/* AMP ENT site styles for every page except the homepage, which carries its own copy of the
   same system inline (it is generated from builds/amp-ent-brands/brands.html).
   Tokens first. Every size and gap below is one of these. */
:root{
  --bg:#08080a; --panel:#0c0c0f; --ink:#f4f4f6; --soft:#d8d8de; --grey:#8b8b93; --dim:#54545b;
  --line:rgba(255,255,255,.09); --accent:#FF6A00; --accent-dk:#d95a00; --on-accent:#0a0a0c; --cream:#eeeeec;
  --disp:"Barlow Semi Condensed",system-ui,sans-serif;
  --body:"Barlow",system-ui,sans-serif;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --t-hero:clamp(48px,8.6vw,96px);
  --t-h2:clamp(32px,5.2vw,64px);
  --t-roll:clamp(24px,3.5vw,48px);
  --t-lede:clamp(20px,2.1vw,24px);
  --t-title:20px;
  --t-body:16px;
  --t-meta:14px;
  --t-micro:12px;

  --gutter:clamp(16px,4vw,48px);
  --section:clamp(64px,10vw,128px);
  --gap:clamp(12px,1.4vw,24px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--t-body);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
h1,h2,h3{font-family:var(--disp);text-transform:uppercase;text-wrap:balance}
p{text-wrap:pretty}
ul{list-style:none}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:var(--s-4);top:var(--s-4);z-index:60;transform:translateY(-400%);padding:var(--s-3) var(--s-4);background:var(--accent);color:var(--on-accent);font-weight:600;font-size:var(--t-meta)}
.skip:focus{transform:none}

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-6)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:var(--s-4) var(--s-6);
  font-weight:600;font-size:var(--t-meta);line-height:1;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(244,244,246,.4);background:rgba(8,8,10,.4);color:#fff;transition:border-color .2s,background .2s}
.btn:hover{border-color:var(--accent)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.solid:hover{background:var(--accent-dk);border-color:var(--accent-dk)}

/* ---------- page top, for pages that open on type ---------- */
.top{padding:calc(var(--s-9) + var(--s-7)) 0 var(--s-7)}
.top h1{font-weight:800;font-size:var(--t-hero);line-height:.92;letter-spacing:.005em}
.top h1 span{display:block;color:var(--accent)}
.top .sub{max-width:56ch;margin-top:var(--s-5);font-size:var(--t-lede);line-height:1.4;color:rgba(244,244,246,.9)}
.top .roll{margin-top:var(--s-8)}

/* ---------- page top, for pages that open on a film ---------- */
.hero{position:relative;height:100svh;min-height:640px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.5) 0%,rgba(8,8,10,.1) 28%,rgba(8,8,10,.5) 50%,rgba(8,8,10,.86) 84%,rgba(8,8,10,.96) 100%)}
.hero-in{position:relative;padding:0 var(--gutter) var(--s-7)}
.hero .line{margin-bottom:var(--s-4);font-weight:600;font-size:var(--t-meta);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.hero h1{font-weight:800;font-size:var(--t-hero);line-height:.92;letter-spacing:.005em}
.hero h1 span{display:block}
.hero h1 .l2{color:var(--accent)}
.hero .sub{max-width:46ch;margin-top:var(--s-5);font-size:var(--t-lede);line-height:1.4;color:rgba(244,244,246,.9)}
.snd{position:absolute;right:var(--gutter);bottom:var(--s-7)}
.snd[aria-pressed="true"]{border-color:var(--accent)}
@media(max-width:820px){.hero-in{padding-bottom:var(--s-9)}.snd{bottom:var(--s-5)}}

/* ---------- name rolls: brands, agencies, networks ---------- */
.roll{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-5)}
.roll dt{grid-column:span 2;font-size:var(--t-meta);color:var(--grey);padding-top:var(--s-2)}
.roll dd{grid-column:span 10;font-family:var(--disp);font-weight:700;font-size:var(--t-roll);line-height:1.1;text-transform:uppercase;text-wrap:balance}
.roll dd span{white-space:nowrap}
.roll dd i{font-style:normal;color:var(--dim);padding:0 0 0 var(--s-3)}
.roll dd.quiet,.roll dd.agencies{font-weight:500;color:var(--soft)}
@media(max-width:820px){.roll{gap:var(--s-2)}.roll dt,.roll dd{grid-column:1 / -1}.roll dd{margin-bottom:var(--s-6)}.roll dd:last-child{margin-bottom:0}}

/* ---------- the work wall ---------- */
.work{padding:var(--section) 0}
.work.first{padding-top:var(--s-7)}
.work.lined{border-top:1px solid var(--line)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;margin-bottom:var(--s-7)}
.head h2{font-weight:700;font-size:var(--t-h2);line-height:.95}
.head h2 span{color:var(--accent)}
.head p{font-size:var(--t-meta);color:var(--grey);max-width:46ch}
.head p.say{font-size:var(--t-body);color:var(--soft)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-7) var(--gap)}
.tile{grid-column:span 6;min-width:0}
.tile.w12{grid-column:1 / -1}
.tile.w4{grid-column:span 4}
.tile.w3{grid-column:span 3}
.film{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--panel)}
.tile.cinema .film{aspect-ratio:21/9}
.tile.strip .film{aspect-ratio:9/2}
.film video,.film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film img.high{object-position:50% 0%}
.film img.upper{object-position:50% 20%}
/* a tile with a still and no cut loop: the film itself plays silently under the pointer */
.film video.peek{opacity:0;transition:opacity .2s}
.film.live video.peek{opacity:1}
.film .dur{position:absolute;right:var(--s-3);bottom:var(--s-3);padding:var(--s-1) var(--s-2);background:rgba(8,8,10,.7);
  font-size:var(--t-micro);font-weight:500;line-height:1.3;font-variant-numeric:tabular-nums;color:#fff}
.film .cue{position:absolute;left:var(--s-3);bottom:var(--s-3);padding:var(--s-1) var(--s-2);background:var(--accent);color:var(--on-accent);
  font-size:var(--t-micro);font-weight:600;line-height:1.3;opacity:0;transition:opacity .2s}
button.film:hover .cue,button.film:focus-visible .cue{opacity:1}
div.film{cursor:default}
.tile figcaption{padding-top:var(--s-4)}
.tile h3{font-weight:700;font-size:var(--t-title);line-height:1.1;letter-spacing:.02em}
.tile figcaption p{margin-top:var(--s-1);font-size:var(--t-meta);color:var(--grey)}
.more-row{display:flex;margin-top:var(--s-7)}
@media(max-width:820px){
  .grid{gap:var(--s-6) var(--s-3)}
  .tile,.tile.w4{grid-column:1 / -1}
  .tile.w3{grid-column:span 6}
  .tile.cinema .film,.tile.strip .film{aspect-ratio:16/9}
  .head h2 span{display:block}
}

/* ---------- numbers ---------- */
.stats{padding:var(--section) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7) var(--s-5)}
.num{padding-top:var(--s-4);border-top:1px solid rgba(244,244,246,.28)}
.num b{display:block;font-family:var(--disp);font-weight:800;font-size:var(--t-h2);line-height:1;text-transform:uppercase;font-variant-numeric:tabular-nums}
.num b i{font-style:normal;color:var(--accent)}
.num span{display:block;margin-top:var(--s-2);font-size:var(--t-meta);color:var(--soft)}
@media(max-width:820px){.nums{grid-template-columns:repeat(2,1fr);gap:var(--s-6) var(--s-4)}}

/* ---------- logo band: light, one row, moving ---------- */
.logos{background:var(--cream);padding:var(--s-7) 0;overflow:hidden}
.logos .track{display:flex;align-items:center;width:max-content;animation:logos 31s linear infinite}
.logos:hover .track{animation-play-state:paused}
.logos .item{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--s-6)}
.logos .logo{height:clamp(32px,3.8vw,48px);width:auto;max-width:clamp(120px,14vw,192px);object-fit:contain;filter:brightness(0) invert(.13);opacity:.92}
@keyframes logos{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.logos .track{animation:none}}

/* ---------- the fit ---------- */
.fit{padding:var(--section) 0;border-top:1px solid var(--line);background:var(--panel)}
.fit .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.fit .card{padding:var(--s-6);border:1px solid var(--line);background:var(--bg)}
.fit .card.yes{border-color:rgba(255,106,0,.55)}
.fit .card h3{font-family:var(--body);font-weight:600;font-size:var(--t-meta);line-height:1.5;letter-spacing:.1em;color:var(--grey)}
.fit .card.yes h3{color:var(--accent)}
.fit .card ul{margin-top:var(--s-2)}
.fit .card li{position:relative;padding:var(--s-3) 0 var(--s-3) var(--s-5);border-bottom:1px solid var(--line);color:var(--grey)}
.fit .card.yes li{color:var(--soft)}
.fit .card li:last-child{border-bottom:0;padding-bottom:0}
.fit .card li::before{content:"";position:absolute;left:0;top:calc(var(--s-3) + var(--s-2));width:8px;height:8px;border:1px solid var(--dim)}
.fit .card.yes li::before{border-color:var(--accent);background:var(--accent)}
@media(max-width:820px){.fit .pair{grid-template-columns:1fr}.fit .card{padding:var(--s-5)}}

/* ---------- about ---------- */
.collage img{width:100%;height:auto;border:1px solid var(--line)}
.bio{padding:var(--section) 0}
.bio .say{max-width:22ch;font-family:var(--disp);font-weight:600;font-size:var(--t-roll);line-height:1.12;text-wrap:balance}
.bio .cols{margin-top:var(--s-7);column-count:2;column-gap:var(--s-8);max-width:1120px}
.bio .cols p{break-inside:avoid-column;color:var(--soft);line-height:1.6}
.bio .cols p+p{margin-top:var(--s-5)}
.bio .cols b{color:#fff;font-weight:600}
@media(max-width:820px){.bio .cols{column-count:1}}
.guilds{background:var(--cream);display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--s-6) var(--s-9);padding:var(--s-6) var(--gutter)}
.guilds img{height:clamp(32px,4.5vw,48px);width:auto;filter:brightness(0) invert(.13);opacity:.92}

/* credit rows: one line per piece */
.rows{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-2) var(--s-5);align-items:baseline;padding:var(--s-4) 0;border-top:1px solid var(--line)}
.row h3{grid-column:span 5;font-weight:700;font-size:var(--t-title);line-height:1.1;letter-spacing:.02em}
.row .for{grid-column:span 5;font-size:var(--t-meta);color:var(--grey)}
.row .as{grid-column:span 2;font-size:var(--t-meta);color:var(--soft);text-align:right}
@media(max-width:820px){.row h3,.row .for{grid-column:1 / -1}.row .as{grid-column:1 / -1;text-align:left}}

/* ---------- close ---------- */
.close{padding:var(--section) 0;border-top:1px solid var(--line);text-align:center}
.close h2{font-weight:800;font-size:var(--t-h2);line-height:.95}
.close h2 span{display:block;color:var(--accent)}
.close .actions{justify-content:center}
footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-5);padding:var(--s-6) var(--gutter);
  border-top:1px solid var(--line);font-size:var(--t-meta);color:var(--grey)}
.foot-wm{font-family:var(--disp);font-weight:700;font-size:var(--t-lede);letter-spacing:.03em;color:#fff}
.foot-wm b{color:var(--accent)}
.foot-meta{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-1)}
footer a:hover{color:var(--ink)}

/* ---------- one-screen pages: contact, book, not found ---------- */
.stage{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.6) 0%,rgba(8,8,10,.4) 30%,rgba(8,8,10,.94) 100%)}
.stage-in{position:relative;max-width:1200px;padding:var(--s-10) var(--gutter) var(--s-8)}
.stage h1{font-weight:800;font-size:var(--t-hero);line-height:.92;letter-spacing:.005em}
.stage h1 span{display:block;color:var(--accent)}
.stage .sub{max-width:52ch;margin-top:var(--s-5);font-size:var(--t-lede);line-height:1.4;color:rgba(244,244,246,.9)}
.stage .mail{margin-top:var(--s-5);font-size:var(--t-body);color:var(--grey)}
.stage .mail a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(244,244,246,.4);text-underline-offset:4px}
.stage .mail a:hover{text-decoration-color:var(--accent)}
.stage .code{font-weight:600;font-size:var(--t-meta);letter-spacing:.1em;color:var(--accent);margin-bottom:var(--s-4)}

/* ---------- player ---------- */
dialog.player{width:100vw;height:100dvh;max-width:none;max-height:none;border:0;padding:0;background:rgba(4,4,6,.96);color:var(--ink)}
dialog.player::backdrop{background:rgba(4,4,6,.96)}
.player .stand{height:100%;display:flex;flex-direction:column;justify-content:center;gap:var(--s-4);padding:var(--s-8) var(--gutter) var(--s-5)}
.player video{width:100%;max-height:calc(100dvh - 192px);background:#000;margin:0 auto}
.player .cap{display:flex;justify-content:space-between;gap:var(--s-5);align-items:baseline;font-size:var(--t-meta);color:var(--grey)}
.player .cap b{font-family:var(--disp);font-weight:700;font-size:var(--t-title);text-transform:uppercase;letter-spacing:.02em;color:#fff}
.player .x{position:absolute;top:var(--s-4);right:var(--gutter);min-height:48px;padding:0 var(--s-4);border:1px solid rgba(244,244,246,.4);
  font-weight:600;font-size:var(--t-meta);letter-spacing:.1em;text-transform:uppercase}
.player .x:hover{border-color:var(--accent)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}