:root{
  --burgundy:#8c1832; --deep:#6d1226; --chalk:#ffffff;
  --ground:#ffffff; --surface:#f7f3ef; --inset:#efe9e3;
  --ink:#1a0d12; --ink-dim:#5a4a3e;
  --rule:rgba(140,24,50,.22); --rule-strong:rgba(140,24,50,.45);
  --label:#595959;
  --accent:#8c1832; --accent-text:#8c1832; --accent-deep:#8c1832; --ok:#4a3520;
  --accent-soft:rgba(140,24,50,.07);
  --flip-ground:#2a0a14; --flip-ink:#ffffff; --flip-dim:#d9c3c9; --flip-rule:rgba(255,255,255,.20);

  /* Open Sans for reading, Source Serif 4 as the editorial highlight, mono for data */
  --grotesk:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --body:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* no monospace: its fallback resolves to Roboto Mono on Android */
  --mono:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

  --pad:clamp(16px,3.4vw,40px);
  --bar:56px;
}
*{box-sizing:border-box;margin:0;padding:0}
 html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
/* proximity, not mandatory: the long gallery pages must still scroll freely */
html{scroll-snap-type:y proximity}
.panel.snap{scroll-snap-align:start;scroll-snap-stop:always}
@media (prefers-reduced-motion:reduce){ html{scroll-snap-type:none} }
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-weight:400;overflow-x:hidden}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.wrap{padding:0 var(--pad)}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.lede{font-family:var(--body);font-size:16px;max-width:64ch;color:var(--ink-dim);font-size:15px;line-height:1.62;padding:16px 0 30px}
.lede b{color:var(--ink);font-weight:600}
section{scroll-margin-top:calc(var(--bar) + 10px)}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding:clamp(56px,8vw,110px) 0 8px}
.sechead h2{font-family:var(--grotesk);font-weight:700;font-stretch:100%;letter-spacing:-.03em;
  font-size:clamp(27px,4.2vw,50px);line-height:1}

/* ================= GLASS MASTHEAD ================= */
.mast{
  position:fixed;top:0;left:0;right:0;z-index:120;
  background:color-mix(in srgb,#ffffff 78%,transparent);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid var(--rule);
  box-shadow:0 8px 30px rgba(140,24,50,.10),inset 0 1px 0 rgba(255,255,255,.75);
  color:var(--ink);
  transition:transform .32s ease;
}
/* slides away while reading down, back the moment the reader scrolls up */
.mast.away{transform:translateY(-100%)}
.mrow{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:9px var(--pad);flex-wrap:wrap}
.mright{display:flex;align-items:center;gap:18px}
/* the masthead name is the hero name, small: same face, same case */
.crumb{font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;line-height:1;letter-spacing:-.015em;text-transform:none;color:var(--accent);white-space:nowrap}
.crumb i{display:none}
.crumb b{font-weight:500}
.seclinks{display:flex;flex-wrap:wrap}
.seclinks button{background:transparent;border:0;cursor:pointer;position:relative;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);padding:7px 12px;transition:.2s}
.seclinks button:hover{color:var(--accent)}
.seclinks button[aria-pressed="true"]{color:var(--accent)}
.seclinks button[aria-pressed="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;background:var(--accent-text)}
.seclinks button sup{font-size:8px;letter-spacing:.06em;opacity:.62;padding-left:3px}
.mlinks{display:flex;gap:16px}
.mlinks a{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.mlinks a:hover{color:var(--accent)}
.icons{display:flex;gap:4px;align-items:center}
.icons a{display:grid;place-items:center;width:44px;height:44px;border-radius:2px;border:1px solid var(--rule);color:var(--ink);transition:.22s;
  background:color-mix(in srgb,#ffffff 55%,transparent);backdrop-filter:blur(8px)}
.icons a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.icons a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.icons svg{width:15px;height:15px;fill:currentColor}

/* ================= HERO ================= */
.hero{position:relative;height:100svh;min-height:100svh;display:grid;place-items:center;overflow:visible;
  scroll-snap-align:start;scroll-snap-stop:always}
.hero h1{text-align:center;padding:0 var(--pad);
  font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.015em;
  font-size:clamp(36px,7vw,110px);line-height:1;color:var(--accent)}
.heroname{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:22px}
/* hero contacts: the four marks themselves, drawn in burgundy, nothing around them */
.herosocial{justify-content:center;gap:26px}
.herosocial a,.herosocial a:hover{width:auto;height:auto;padding:4px;border:0;border-radius:2px;background:transparent;backdrop-filter:none;color:var(--accent)}
.herosocial a:hover{transform:translateY(-2px)}
.herosocial svg{width:30px;height:30px}
.herosocial .wordmark{font-family:var(--body);font-weight:800;font-size:19px;letter-spacing:.01em;line-height:30px;display:block}
@media (max-width:640px){ .herosocial{gap:20px} .herosocial svg{width:26px;height:26px} .herosocial .wordmark{font-size:17px;line-height:26px} }
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero h1 .w i{display:inline-block;font-style:normal;transform:translateY(102%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.hero.in h1 .w i{transform:translateY(0)}
.hero h1 .w:nth-child(2) i{transition-delay:.09s}

.mosaic{position:absolute;inset:0;z-index:1;overflow:hidden}
.mosaic figure{position:absolute;opacity:1;transform:none;
  transition:opacity .62s cubic-bezier(.2,.8,.2,1),transform .62s cubic-bezier(.2,.8,.2,1)}
.mosaic figure.out{opacity:0}
.mosaic figure.out[data-enter="fade"]{transform:none}
.mosaic figure.out[data-enter="rise"]{transform:translateY(18px)}
.mosaic figure.out[data-enter="drop"]{transform:translateY(-18px)}
.mosaic figure.out[data-enter="zoom"]{transform:scale(.90)}
.mosaic figure.up{z-index:8}
.mosaic .tile{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:2px;
  background:var(--inset);border:0;padding:0;margin:0;cursor:pointer;transform-origin:center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s cubic-bezier(.2,.8,.2,1)}
.mosaic .tile img,.mosaic .tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mosaic .tile img{filter:grayscale(1) contrast(1.04);transition:opacity .5s}
.mosaic .tile video{opacity:0;transition:opacity .5s}
.mosaic{--grow:1.12}
.mosaic .tile.live{transform:scale(var(--grow));box-shadow:0 26px 60px rgba(140,24,50,.30)}
.mosaic .tile.live.has-clip img{opacity:0}
.mosaic .tile.live video{opacity:1}
.mosaic .tile:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}


.work-flash{animation:flash 1.5s ease-out 1}
@keyframes flash{0%{box-shadow:inset 0 0 0 3px var(--accent)}100%{box-shadow:inset 0 0 0 3px transparent}}
.work-flash{border-radius:2px}
@media (prefers-reduced-motion:reduce){
  .mosaic figure{transition:opacity .3s}
  .mosaic figure.out{transform:none}
  .mosaic .tile.live{transform:none}
}

/* ================= REEL ================= */
.reelbox{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100svh - 210px);background:#000;overflow:hidden;border:1px solid var(--rule)}
.reelbox video{width:100%;height:100%;object-fit:contain;background:#000}
.reelmeta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:10px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}

/* ================= GALLERY ================= */
.gal{margin-top:22px}
.gitem{display:grid;grid-template-columns:var(--gmedia,278px) minmax(0,1fr);gap:clamp(16px,3vw,40px);
  padding:26px 0;border-bottom:1px solid var(--rule);align-items:start}
.gitem.on{background:linear-gradient(90deg,var(--accent-soft),transparent 62%)}
.gmedia{position:relative;background:var(--inset);aspect-ratio:1/1;overflow:hidden;cursor:pointer;border-radius:2px}
.gmedia img,.gmedia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gmedia img{filter:none}
.gmedia video{opacity:0;transition:opacity .4s}
.gitem.on .gmedia video{opacity:1}
.gmedia .play{
  position:absolute;left:12px;bottom:12px;z-index:3;
  width:40px;height:40px;display:grid;place-items:center;border-radius:2px;
  background:color-mix(in srgb,#ffffff 62%,transparent);
  backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 6px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.8);
  color:var(--deep);transition:.25s}
.gmedia:hover .play{background:color-mix(in srgb,#ffffff 82%,transparent)}
.gmedia .play svg{width:16px;height:16px;fill:currentColor}
.gmedia .play .ic-pause{display:none}
.gitem.on .gmedia .play .ic-pause{display:block}
.gitem.on .gmedia .play .ic-play{display:none}
/* full screen sits in the top right corner, shown on hover or while playing */
.gmedia .full{
  position:absolute;right:12px;top:12px;z-index:3;
  width:40px;height:40px;display:grid;place-items:center;border-radius:2px;
  background:color-mix(in srgb,#ffffff 62%,transparent);
  backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 6px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.8);
  color:var(--deep);cursor:pointer;opacity:0;transition:.25s}
.gmedia:hover .full,.gitem.on .gmedia .full,.gmedia .full:focus-visible{opacity:1}
.gmedia .full:hover{background:color-mix(in srgb,#ffffff 82%,transparent)}
.gmedia .full svg{width:16px;height:16px;fill:currentColor}
@media (hover:none){ .gmedia .full{opacity:1} }

.gmeta h4{font-family:var(--serif);font-weight:500;letter-spacing:-.006em;line-height:1.1;
  font-size:clamp(19px,2.5vw,32px);padding:5px 0 12px}
/* labels: sentence case, bold, grey. No all caps. */
.gmeta dl{display:grid;grid-template-columns:96px 1fr;gap:4px 14px;
  font-family:var(--body);font-size:13px;letter-spacing:0;line-height:1.7}
.gmeta dt{color:var(--label);font-weight:700;text-transform:none;letter-spacing:0}
.gmeta dd{font-weight:400}
.gmeta .go{display:inline-grid;place-items:center;margin-top:16px;width:40px;height:40px;border-radius:2px;
  border:1px solid var(--rule);color:var(--accent);transition:.22s}
.gmeta .go:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.gmeta .go:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gmeta .go svg{width:17px;height:17px;fill:currentColor}

/* ================= ABOUT ================= */
.about{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:16px}
.about > div{background:var(--surface);padding:clamp(18px,2.6vw,28px)}
.abio{font-family:var(--serif);font-weight:500;letter-spacing:-.004em;font-size:clamp(17px,2vw,24px);line-height:1.35}
.agap{border:1px dashed var(--accent);color:var(--accent);padding:14px 16px;margin-top:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;line-height:1.8}
.afacts{display:grid;grid-template-columns:110px 1fr;gap:0 14px;font-family:var(--mono);font-size:11px;line-height:1.9}
.afacts dt{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.1em;font-size:9.5px;padding-top:8px;border-top:1px solid var(--rule)}
.afacts dd{padding-top:8px;border-top:1px solid var(--rule)}
.afacts dt:first-of-type,.afacts dd:first-of-type{border-top:0}

/* ================= MARKS ================= */
.invert{background:var(--flip-ground);color:var(--flip-ink);margin-top:clamp(56px,8vw,110px);padding:clamp(40px,6vw,70px) 0}
.invert .tag{color:var(--flip-dim)}
.invert .sechead{padding-top:0}
.invert .sechead h2{color:var(--flip-ink)}
.invert .lede{color:var(--flip-dim)}
.invert .lede b{color:var(--flip-ink)}
.marks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--flip-rule);border:1px solid var(--flip-rule)}
.mark{background:var(--flip-ground);aspect-ratio:16/9;display:grid;place-items:center;padding:14px;transition:background .3s}
.mark:hover{background:var(--flip-ink)}
.mark:hover svg,.mark:hover .mname{color:var(--flip-ground)}
.mark svg{color:var(--flip-ink);width:100%;height:auto;max-height:34px;transition:color .3s}
.mname{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--flip-dim);padding-top:9px;transition:color .3s}
.markwrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.caveat{font-family:var(--body);margin-top:20px;border-left:2px solid var(--accent);padding:12px 16px;background:var(--accent-soft);font-size:13.5px;line-height:1.6;color:var(--flip-dim)}
.caveat b{color:var(--flip-ink)}

/* ================= CONTACT ================= */
.contact{border-top:1px solid var(--rule);margin-top:clamp(56px,8vw,110px);padding-top:clamp(46px,7vw,90px);padding-bottom:90px}
.contact .big{display:inline-block;font-weight:700;font-stretch:100%;letter-spacing:-.03em;line-height:1;
  font-size:clamp(26px,5.4vw,80px);border-bottom:1px solid var(--rule);padding-bottom:.06em;transition:border-color .3s}
.contact .big:hover{border-color:var(--accent)}
.clinks{display:flex;gap:24px;flex-wrap:wrap;padding-top:30px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.clinks a{color:var(--accent)}
.rights{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0;margin-bottom:40px;
  display:flex;gap:22px;justify-content:space-between;flex-wrap:wrap}
.rights p{max-width:66ch;font-family:var(--mono);font-size:11px;line-height:1.75;color:var(--ink-dim)}

@media (max-width:900px){
  .about{grid-template-columns:1fr}
  .gitem{grid-template-columns:minmax(0,44%) minmax(0,56%);gap:14px}
  .gmeta h4{font-size:17px}
  .gmeta dl{grid-template-columns:78px 1fr;font-size:12px}
  .mlinks{display:none}
}

/* ---------- multi page additions ---------- */
.pagehead{padding-top:calc(var(--bar) + clamp(38px,6vw,80px))}
.pagehead h1{font-family:var(--grotesk);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(30px,5.6vw,64px);line-height:1;color:var(--accent)}
.pagehead .sub{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);padding-top:12px}
.seclinks a{position:relative;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);padding:7px 12px;transition:.2s}
.seclinks a:hover{color:var(--accent)}
.seclinks a[aria-current="page"]{color:var(--accent)}
.seclinks a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;background:var(--accent)}
.seclinks a sup{font-size:8px;letter-spacing:.06em;opacity:.62;padding-left:3px}
.pagefoot{border-top:1px solid var(--rule);margin-top:clamp(56px,8vw,110px);
  padding-top:26px;padding-bottom:60px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.pagefoot a:hover{color:var(--accent)}
.nextlink{display:block;border-top:1px solid var(--rule);margin-top:40px;padding:26px 0;
  font-family:var(--grotesk);font-weight:700;letter-spacing:-.02em;font-size:clamp(20px,3vw,34px);color:var(--ink)}
.nextlink:hover{color:var(--accent)}
.nextlink span{display:block;font-family:var(--mono);font-weight:400;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);padding-bottom:8px}
@media (max-width:760px){
  .seclinks{order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .seclinks a{white-space:nowrap}
  .mlinks{display:none}
}


/* ---------- panels ---------- */
/* Plain flow. The card overlay read badly on a phone, so sections simply
   follow one another and change colour. */
.stack{position:relative}
.panel{
  background:var(--ground);color:var(--ink);
  padding-top:clamp(38px,6vw,80px);
  padding-bottom:clamp(48px,7vw,96px);
  transition:background .4s,color .4s;
}
.panel:first-child{padding-top:calc(var(--bar) + clamp(30px,5vw,64px))}
.panel.bare{padding:0}
.panel.dark{
  --ink:#ffffff; --ink-dim:rgba(255,255,255,.74); --rule:rgba(255,255,255,.28);
  --accent:#ffffff; --accent-text:#ffffff; --inset:#6d1226;
  --label:rgba(255,255,255,.78);
  background:var(--burgundy);color:#fff;
}
.panel.dark .pagehead h1,.panel.dark .sechead h2{color:#fff}
.panel.dark .gmeta .go{border-color:rgba(255,255,255,.4);color:#fff}
.panel.dark .gmeta .go:hover{background:#fff;color:var(--burgundy);border-color:#fff}
.panel.dark .gmedia{background:#6d1226}
.panel.dark .nextlink{color:#fff}
.panel.dark .nextlink:hover{color:rgba(255,255,255,.7)}
.panel .pagehead{padding-top:0}
.panel + .panel{border-top:1px solid var(--rule)}
.panel.dark + .panel,.panel + .panel.dark{border-top:0}




/* ---------- footer panel ---------- */
.foot h2{font-family:var(--grotesk);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(26px,4.4vw,54px);line-height:1;color:var(--accent)}
.foot .big{display:inline-block;font-weight:700;letter-spacing:-.03em;line-height:1;
  font-size:clamp(22px,4vw,52px);color:var(--ink);
  border-bottom:1px solid var(--rule);padding-bottom:.08em;transition:border-color .3s;margin-top:18px}
.foot .big:hover{border-color:var(--accent)}
.foot .icons{padding-top:30px;gap:10px}
.foot .meta{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:46px;margin-top:40px;border-top:1px solid var(--rule);
  font-family:var(--body);font-size:13px;letter-spacing:0;color:var(--ink-dim)}
.foot .meta a:hover{color:var(--accent)}


/* ---------- sound control ---------- */
.gmedia .snd{
  position:absolute;left:60px;bottom:12px;z-index:3;
  width:40px;height:40px;display:grid;place-items:center;border-radius:2px;
  background:color-mix(in srgb,#ffffff 62%,transparent);
  backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 6px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.8);
  color:var(--deep);cursor:pointer;opacity:0;transition:.25s}
.gitem.on .gmedia .snd{opacity:1}
.gmedia:hover .snd{opacity:1}
.gmedia .snd svg{width:16px;height:16px;fill:currentColor}
.gmedia .snd .ic-off{display:none}
.gitem.muted .gmedia .snd .ic-off{display:block}
.gitem.muted .gmedia .snd .ic-on{display:none}
.gmedia .noaud{
  position:absolute;right:12px;bottom:12px;z-index:3;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  background:color-mix(in srgb,#ffffff 70%,transparent);backdrop-filter:blur(10px);
  color:var(--deep);padding:6px 10px;border-radius:2px}


/* ---------- picture in picture ---------- */
/* the card's own buttons drive the clip; the browser's controls appear only in full view */
.gitem:not(.theatre) video::-webkit-media-controls{display:none}

/* ---------- hamburger and menu ---------- */
.mrow{display:flex;align-items:center;gap:16px;padding:9px var(--pad)}
.burger{
  position:relative;width:44px;height:44px;flex:0 0 44px;
  background:transparent;border:1px solid var(--rule);border-radius:2px;
  cursor:pointer;padding:0;transition:border-color .2s}
.burger:hover{border-color:var(--accent)}
.burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.burger span{
  position:absolute;left:13px;width:18px;height:1.5px;background:var(--ink);
  transition:top .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1)}
.burger span:first-child{top:18px}
.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span{top:21.25px}
.burger[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
/* open: a burgundy block with a white cross */
.burger[aria-expanded="true"]{background:var(--accent);border-color:var(--accent)}
.burger[aria-expanded="true"] span{background:#fff}
.crumb{margin-right:auto;padding:8px 0;text-decoration:none}
.crumb:hover{color:var(--burgundy)}

.menu{
  position:absolute;left:0;right:0;top:100%;
  background:var(--ground);
  border-bottom:1px solid var(--rule);
  box-shadow:0 24px 60px rgba(140,24,50,.16);
  padding:30px var(--pad) 38px;
}
.menu[hidden]{display:none}
.mgroup{display:flex;flex-direction:column;gap:2px;padding-bottom:24px}
.mgroup:last-child{padding-bottom:0;border-top:1px solid var(--rule);padding-top:22px}
.menu a{
  font-family:var(--grotesk);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(22px,4.4vw,34px);line-height:1.3;color:var(--ink);transition:color .2s}
.menu a:hover,.menu a[aria-current="page"]{color:var(--accent)}
.menu a sup{font-size:11px;font-weight:400;letter-spacing:.12em;vertical-align:super;color:var(--ink-dim);padding-left:6px}
.scrim{position:fixed;inset:0;z-index:110;background:rgba(26,13,18,.34);
  backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}


/* ---------- gallery group headings ---------- */



/* ---------- now playing ---------- */
.nowbar{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(14px);
  z-index:130;display:flex;align-items:center;gap:12px;
  padding:10px 12px 10px 16px;max-width:calc(100vw - 32px);
  background:color-mix(in srgb,#ffffff 88%,transparent);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--rule);border-radius:2px;
  box-shadow:0 12px 34px rgba(140,24,50,.20);
  font-family:var(--grotesk);font-size:13px;color:var(--ink);
  opacity:0;pointer-events:none;transition:opacity .28s,transform .28s}
.nowbar.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nowbar .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 8px;
  animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.nowbar .t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.nowbar .t{background:transparent;border:0;padding:0;cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.nowbar .t:hover{color:var(--accent)}
.nowbar .ib{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:2px;
  background:transparent;color:var(--ink);cursor:pointer;padding:0;transition:.2s}
.nowbar .ib svg{width:14px;height:14px;fill:currentColor}
.nowbar .ib:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.nowbar .ib:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nowbar .ic-play{display:none}
.nowbar.paused .ic-play{display:block}
.nowbar.paused .ic-pause{display:none}
.nowbar.paused .dot{animation:none;opacity:.45}
@media (max-width:520px){ .nowbar .t{max-width:38vw} }


/* ---------- hero aurora ---------- */
.aurora{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
}
@media (max-width:640px){
  /* the curves are tuned for a wide canvas, so let them overflow rather than squash */
  .aurora{width:180%;left:-40%}
}


/* ---------- search and filters ---------- */
.galbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:36px;padding:0 0 26px}
/* the search starts as its icon and opens out to the full field on a click */
.search{position:relative;display:flex;align-items:center;flex:0 0 auto;width:44px;height:44px;overflow:hidden;
  transition:width .38s cubic-bezier(.2,.8,.2,1)}
.search.open{width:min(420px,100%)}
@media (max-width:640px){ .search.open{width:100%} }
.search .ic{position:absolute;left:0;top:0;width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink);cursor:pointer;padding:0;z-index:1}
.search.open .ic{color:var(--ink-dim)}
.search .ic svg{width:17px;height:17px;fill:currentColor}
.search input{
  width:100%;font-family:var(--body);font-size:14px;color:var(--ink);
  background:color-mix(in srgb,#ffffff 16%,transparent);
  border:1px solid var(--rule);border-radius:2px;height:44px;box-sizing:border-box;
  padding:0 14px 0 42px;outline:none;transition:.2s}
.search:not(.open) input{opacity:0}
.search:not(.open)::after{content:"";position:absolute;inset:0;border:1px solid var(--rule);border-radius:2px;pointer-events:none}
.search:not(.open):hover::after{border-color:var(--ink)}
.panel:not(.dark) .search input{background:#fff}
.search input::placeholder{color:var(--ink-dim)}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{
  font-family:var(--body);font-size:12px;font-weight:700;
  background:transparent;color:var(--ink);border:1px solid var(--rule);border-radius:2px;
  padding:0 14px;height:44px;cursor:pointer;transition:.2s}
.chips button:hover{border-color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.panel.dark .chips button[aria-pressed="true"]{background:#fff;color:var(--burgundy);border-color:#fff}
.empty{font-family:var(--body);font-size:15px;color:var(--ink-dim);padding:30px 0}

/* ---------- timeline, kept quiet ---------- */
.timeline{position:relative}
.tlmonth{
  font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:0;
  color:var(--label);padding:38px 0 10px;border-bottom:1px solid var(--rule)}
.timeline > .tlmonth:first-child{padding-top:0}
.tlrow{position:relative}
.tlnum{display:none}
/* the still and the clip fill the card's full height beside the details */
.timeline .gitem{grid-template-columns:240px minmax(0,1fr);gap:clamp(18px,3vw,40px);padding:22px 0;align-items:stretch}
.timeline .gmedia{aspect-ratio:auto;height:100%;min-height:240px}
.timeline .gmeta h4{font-size:clamp(19px,2.1vw,26px);padding:2px 0 10px}
.timeline .gmeta dl{grid-template-columns:92px 1fr;gap:2px 14px;line-height:1.6}
@media (max-width:640px){
  .timeline .gitem{grid-template-columns:120px minmax(0,1fr);gap:14px;padding:16px 0}
  .timeline .gmeta h4{font-size:17px}
  .timeline .gmeta dl{grid-template-columns:78px 1fr;font-size:12px}
}


/* ---------- hero flap ----------
   The tile scales to 1.18 about its centre, so its visible box is 118 percent of
   the figure. The flap is sized to that box and pinned to its scaled bottom edge,
   so it reads as sliding out from underneath. Burgundy tint, white and grey text. */
.mosaic .flap{
  position:absolute;left:calc((1 - var(--grow)) * 50%);right:calc((1 - var(--grow)) * 50%);z-index:9;
  padding:11px 13px 12px;
  background:color-mix(in srgb,var(--burgundy) 90%,transparent);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border-radius:0 0 2px 2px;
  box-shadow:0 18px 40px rgba(140,24,50,.28);
  color:#fff;
  opacity:0;pointer-events:none;
  transition:opacity .28s cubic-bezier(.2,.8,.2,1),transform .42s cubic-bezier(.2,.8,.2,1),clip-path .42s cubic-bezier(.2,.8,.2,1);
}
.mosaic .flap b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;display:block;font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.25;letter-spacing:-.01em;color:#fff}
.mosaic .flap span{display:block;font-family:var(--body);font-weight:400;font-size:12px;line-height:1.4;padding-top:3px;color:rgba(255,255,255,.82)}
/* flush with the scaled bottom edge, slides down out of it */
/* upper tiles grow downward, so nothing climbs under the masthead */
.mosaic figure[data-flap="down"] .tile{transform-origin:50% 0}
.mosaic figure[data-flap="down"] .flap{top:calc(var(--grow) * 100%);transform:translateY(-100%);clip-path:inset(0 0 100% 0)}
/* or flush with the scaled top edge, slides up out of it */
/* lower tiles grow upward, so nothing runs off the bottom */
.mosaic figure[data-flap="up"] .tile{transform-origin:50% 100%}
.mosaic figure[data-flap="up"] .flap{bottom:calc(var(--grow) * 100%);border-radius:2px 2px 0 0;transform:translateY(100%);clip-path:inset(100% 0 0 0)}
.mosaic figure.up .flap{opacity:1;transform:translateY(0);clip-path:inset(0)}
@media (prefers-reduced-motion:reduce){ .mosaic .flap{transition:opacity .2s} }

/* ---------- month banners: one full row, text centred ---------- */
.tlmonth{
  display:block;margin:44px 0 6px -27px;padding:10px 18px 11px 24px;text-align:left;
  background:#fff;color:var(--burgundy);
  font-family:var(--grotesk);font-weight:700;font-size:15px;letter-spacing:.01em;
  border:0;border-radius:2px;box-shadow:0 6px 18px rgba(0,0,0,.12);
  position:relative;top:0;z-index:2}
.timeline > .tlmonth:first-child{margin-top:0}
.panel:not(.dark) .tlmonth{background:var(--burgundy);color:#fff}
.tlmonth + .tlrow{border-top:0;padding-top:6px}

/* ---------- the connecting rail: a dot per card, a fill that follows the reader down ---------- */
.timeline{padding-left:36px}
.timeline::before{
  content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;
  background:color-mix(in srgb,#ffffff 26%,transparent)}
.tlfill{
  position:absolute;left:9px;top:0;width:2px;height:0;z-index:1;
  background:#fff;box-shadow:0 0 14px rgba(255,255,255,.55)}
.tlrow::before{
  content:"";position:absolute;left:-32px;top:calc(var(--dot,122px) - 5px);width:10px;height:10px;border-radius:50%;
  box-sizing:border-box;border:2px solid color-mix(in srgb,#ffffff 55%,transparent);
  background:var(--burgundy);z-index:2;transition:background .3s,border-color .3s,box-shadow .3s}
.tlrow.passed::before{
  background:#fff;border-color:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb,#ffffff 20%,transparent)}
.panel:not(.dark) .timeline::before{background:color-mix(in srgb,var(--burgundy) 22%,transparent)}
.panel:not(.dark) .tlfill{background:var(--burgundy);box-shadow:none}
.panel:not(.dark) .tlrow::before{background:#fff;border-color:color-mix(in srgb,var(--burgundy) 45%,transparent)}
.panel:not(.dark) .tlrow.passed::before{background:var(--burgundy);border-color:var(--burgundy);box-shadow:0 0 0 4px color-mix(in srgb,var(--burgundy) 16%,transparent)}
@media (max-width:640px){
  .timeline{padding-left:26px}
  .timeline::before,.tlfill{left:4px}
  .tlrow::before{left:-27px}
  .tlmonth{margin-left:-22px;padding-left:18px}
}
@media (prefers-reduced-motion:reduce){ .tlrow::before{transition:none} }

/* rules only between cards of the same month; none against a banner */
.timeline .tlrow:last-child .gitem,.timeline .tlrow:has(+ .tlmonth) .gitem{border-bottom:0}
/* phones and upright tablets: a gentler grow and a compact flap, so the name keeps its air */
@media (max-width:640px), (max-width:1100px) and (orientation:portrait){
  .mosaic{--grow:1.08}
  .mosaic .flap{padding:7px 9px 8px}
  .mosaic .flap b{font-size:13px;-webkit-line-clamp:1}
  .mosaic .flap span{font-size:11px}
}
@media (max-height:720px) and (max-width:640px){
  .heroname{gap:12px}
  .herosocial svg{width:22px;height:22px}
  .herosocial .wordmark{font-size:15px;line-height:22px}
}
/* controls take the page's type, never the platform's */
button,input,select,textarea{font-family:inherit}
/* comfortable tap targets */
.foot .meta a{display:inline-block;padding:6px 0}

/* ---------- the hero owns the first screen; the name becomes the masthead on the way out ---------- */
.mast.ghost{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
.mast.ghost .burger{opacity:var(--mp,0)}
.mast.ghost .crumb{opacity:0}
.mast .crumb{transition:opacity .12s}
.hero h1{transform-origin:50% 50%;will-change:transform}
.hero .herosocial{will-change:opacity}
.hero.morph h1 .w{overflow:visible}

/* showreel when the file is not hosted: the frame links out */
.reelout{display:block;position:relative;background:#000;border-radius:2px;overflow:hidden}
.reelout img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain}
.reelout::after{content:"Watch on YouTube";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--body);font-weight:700;font-size:14px;color:var(--burgundy);background:#fff;padding:12px 18px;border-radius:2px}

/* ---------- About: the resume ---------- */
.rtools{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.rbtn{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;border:1px solid var(--ink);border-radius:2px;
  background:var(--ink);color:var(--ground);font-family:var(--body);font-weight:700;font-size:13px;cursor:pointer;text-decoration:none;transition:.2s}
.rbtn svg{width:16px;height:16px;fill:currentColor}
.rbtn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.rbtn.ok{background:var(--accent);border-color:var(--accent);color:#fff}
.rbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.rbtn{background:transparent;color:var(--ink)}
button.rbtn:hover,button.rbtn.ok{background:var(--accent);color:#fff}
.resume{margin-top:28px;border:1px solid var(--rule);background:var(--surface);padding:clamp(20px,3vw,40px)}
.rhead h2{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(30px,4.4vw,46px);line-height:1.05;color:var(--accent);letter-spacing:-.01em}
.rhead p{font-family:var(--body);font-size:14px;color:var(--ink-dim);padding-top:10px}
.rhead a{color:var(--ink)}
.rcols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);padding-top:28px}
.resume h3{font-family:var(--body);font-weight:700;font-size:13px;color:var(--label);padding:26px 0 8px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.rcols h3{padding-top:0}
.resume .afacts{padding-top:6px}
.resume .afacts a{color:var(--ink)}
.rtable{width:100%;border-collapse:collapse;font-family:var(--body);font-size:14px;line-height:1.45}
.rtable th{text-align:left;font-weight:700;font-size:12px;color:var(--label);padding:8px 10px 8px 0;border-bottom:1px solid var(--rule)}
.rtable td{padding:9px 10px 9px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink)}
.rtable td:first-child{font-weight:600}
.rtable td:last-child a{color:var(--accent);font-weight:700}
.rtable a{white-space:nowrap}
.rdim{color:var(--ink-dim)}
.rnote{font-family:var(--body);font-size:13px;color:var(--ink-dim);padding-top:18px;line-height:1.55}
@media (max-width:640px){
  .rcols{grid-template-columns:1fr}
  .rtable{display:block;overflow-x:auto;white-space:normal}
  .rtable th:nth-child(2),.rtable td:nth-child(2){display:none}
  .rtable td:first-child::after{content:attr(data-house);display:block;font-weight:400;color:var(--ink-dim);font-size:12px}
}

/* resume links are tappable even when the label is two letters */
.resume a{display:inline-block;padding:3px 0;margin:-3px 0;min-width:28px}
.rtable td:last-child a{padding:3px 6px;margin:-3px -6px 0 0}

/* ---------- full view ---------- */
.gmedia .tbar{display:none}
/* only the clip itself shows; the rest of the frame is burgundy, never the scaled-up still */
.gitem.theatre .gmedia{position:fixed;inset:0;z-index:200;border-radius:0;background:var(--burgundy);aspect-ratio:auto;height:auto;min-height:0;cursor:default}
.gitem.theatre .gmedia video{object-fit:contain;opacity:1;background:transparent;
  /* the clip sits inside a burgundy border on all four sides, below the title bar */
  --tt:calc(max(14px,env(safe-area-inset-top)) + 68px);--tb:max(24px,4vh);--tx:6vw;
  inset:auto;top:var(--tt);left:var(--tx);width:calc(100% - var(--tx) * 2);height:calc(100% - var(--tt) - var(--tb))}
@media (max-width:640px){ .gitem.theatre .gmedia video{--tx:14px;--tb:max(18px,env(safe-area-inset-bottom))} }
.gitem.theatre .gmedia img{display:none}
.gmedia:fullscreen{background:var(--burgundy)}
.gitem.theatre .gmedia .play,.gitem.theatre .gmedia .full,.gitem.theatre .gmedia .snd,.gitem.theatre .gmedia .noaud{display:none}
.gitem.theatre .tbar{display:flex;position:absolute;left:0;right:0;top:0;z-index:5;align-items:center;justify-content:space-between;gap:16px;
  padding:max(14px,env(safe-area-inset-top)) 16px 26px;background:linear-gradient(color-mix(in srgb,var(--burgundy) 88%,transparent),color-mix(in srgb,var(--burgundy) 0%,transparent));color:#fff}
.tbar .ttitle{font-family:var(--serif);font-weight:600;font-size:clamp(16px,2vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbar .tclose{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;height:44px;padding:0 16px 0 12px;border-radius:2px;
  background:color-mix(in srgb,#ffffff 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.7);color:var(--burgundy);font-family:var(--body);font-weight:700;font-size:13px;cursor:pointer;transition:.2s}
.tbar .tclose svg{width:16px;height:16px;fill:currentColor}
.tbar .tclose:hover{background:#fff}
.tbar .tclose:focus-visible{outline:2px solid #fff;outline-offset:2px}
body.theatre-open{overflow:hidden}
body.theatre-open .nowbar{opacity:0;pointer-events:none}
.gmedia:fullscreen{width:100vw;height:100vh}

/* the card you jumped to: an outline that holds, then fades */
.gitem.work-flash{animation:arrive 2.6s ease-out 1;border-radius:2px}
@keyframes arrive{
  0%{box-shadow:0 0 0 2px #fff,0 0 0 8px color-mix(in srgb,#ffffff 25%,transparent)}
  55%{box-shadow:0 0 0 2px #fff,0 0 0 8px color-mix(in srgb,#ffffff 25%,transparent)}
  100%{box-shadow:0 0 0 2px transparent,0 0 0 8px transparent}
}
.panel:not(.dark) .gitem.work-flash{animation-name:arrive-light}
@keyframes arrive-light{
  0%{box-shadow:0 0 0 2px var(--burgundy),0 0 0 8px color-mix(in srgb,var(--burgundy) 18%,transparent)}
  55%{box-shadow:0 0 0 2px var(--burgundy),0 0 0 8px color-mix(in srgb,var(--burgundy) 18%,transparent)}
  100%{box-shadow:0 0 0 2px transparent,0 0 0 8px transparent}
}
@media (prefers-reduced-motion:reduce){ .gitem.work-flash{animation:none;box-shadow:0 0 0 2px #fff} }

/* the name in flight: a fixed copy above everything, moved every frame */
.namefly{position:fixed;left:0;top:0;z-index:125;transform-origin:0 0;pointer-events:none;white-space:nowrap;
  display:none;text-align:center;will-change:transform}

/* showreel from YouTube */
.reelembed{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:2px;overflow:hidden}
.reelembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}