/* ═══════════════════════════════════════════════════════════════════════
   Ethan Everitt — ethaneveritt.com
   Dusk Bronze × Element Grammar

   Three grounds only:
     --dusk     hero bands, contact band, footer, motion surfaces
     --paper    all body content
     --gallery  photography sections ONLY

   Sans only — Sora (display) + Manrope (body). No monospace.
   Every colour pair here passes WCAG AA. Run Brand/contrast-check.py
   before introducing a new one.
   ═══════════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --dusk:#261D17;
  --cream:#F6EFE4;
  --bronze:#D98E3B;
  --bronze-dk:#91571B;      /* corrected from #A6641F — AA on paper (5.26:1) */
  --paper:#F7F2E9;
  --ink:#26201A;
  --body:#57503F;
  --muted:#766E60;          /* corrected from #8C8272 — AA on paper (4.52:1) */
  --gallery:#FFFDF9;
  --line:#E3DACB;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --disp:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,0,0,1);
  --navh:88px;   /* logo 52 + 18 padding top and bottom */
}

/* scroll-padding keeps #contact and the skip link from landing behind the bar */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--navh)}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.4px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
em{font-style:normal}
cite{font-style:italic}

::selection{background:rgba(217,142,59,.28)}
:focus-visible{outline:2px solid var(--bronze-dk);outline-offset:3px;border-radius:2px}
.topband :focus-visible,.hero :focus-visible,
.contact-band :focus-visible,footer.site :focus-visible{outline-color:var(--bronze)}

/* Clipped rather than pushed off-canvas, so it never counts as page overflow. */
.skip{position:absolute;left:0;top:0;z-index:200;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);background:var(--bronze);color:var(--dusk);font-weight:700;
  font-size:14px;padding:12px 20px;border-radius:0 0 6px 0;white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none}

.container{max-width:1120px;margin:0 auto;padding:0 40px}
/* Reading column. Same outer box as .container so the Writing page shares a left
   edge with the nav and page head; the measure is capped on the children. */
.narrow{max-width:1120px;margin:0 auto;padding:0 40px}
.narrow>*{max-width:740px}

/* ─── shared type ─────────────────────────────────────────────────────── */
.kicker{font-size:11.5px;letter-spacing:3.5px;text-transform:uppercase;
  font-weight:600;color:var(--bronze-dk)}
.kicker.light{color:var(--bronze)}
.lede{margin-top:18px;font-size:16px;line-height:1.7;max-width:56ch}
.sub{margin-top:10px;font-size:15px;color:var(--body);line-height:1.7;max-width:58ch}
.meta{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);font-weight:600}

.more{font-size:14px;font-weight:700;color:var(--bronze-dk);
  border-bottom:1.5px solid var(--bronze-dk);padding-bottom:2px;white-space:nowrap;
  transition:.16s var(--ease)}
.more:hover{color:var(--ink);border-color:var(--ink)}
.more.inline{white-space:normal}

.btn{display:inline-block;background:var(--bronze);color:var(--dusk);font-weight:700;
  font-size:14px;padding:13px 28px;border-radius:6px;transition:.16s var(--ease)}
.btn:hover{background:#E8A251}
.btn.ghost{background:transparent;color:var(--cream);
  border:1.5px solid rgba(246,239,228,.5);font-weight:600}
.btn.ghost:hover{border-color:var(--cream);background:rgba(246,239,228,.06)}

.tags{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.tags span{font-size:12.5px;font-weight:600;padding:6px 15px;border-radius:100px;
  background:rgba(145,87,27,.12);color:var(--bronze-dk)}

section.pad{padding:70px 0}
section.pad.pt0{padding-top:0}

.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  flex-wrap:wrap;margin-bottom:30px}
.sec-head h2{font-size:clamp(24px,3vw,30px);letter-spacing:-.5px}
.sec-head .kicker{margin-bottom:11px}
.sec-head.tight{margin-bottom:6px}
.sec-head.mt{margin-top:56px}

/* ─── stat rows — reserved. No ticks, no rules, no fills. ─────────────── */
.stats{display:flex;gap:44px;flex-wrap:wrap;margin:26px 0 0}
.stats div{font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.stats b{display:block;font-family:var(--disp);font-size:28px;letter-spacing:-.8px;
  color:var(--ink);font-weight:600;margin-bottom:6px;line-height:1}
.stats.on-dusk div{color:rgba(246,239,228,.66)}
.stats.on-dusk b{color:var(--cream)}
.stats.tight{gap:22px;margin-top:20px}
.stats.tight b{font-size:22px}
.stats.tight div{font-size:10.5px;letter-spacing:1.4px}
.stats.mb{margin-bottom:34px}
.stats.mt{margin-top:30px}
.stats.stack{flex-direction:column;gap:20px;margin:0}

/* ─── nav ─────────────────────────────────────────────────────────────────
   The bar is a sibling of the hero, not a child of it — .hero has
   overflow:hidden, which would kill position:sticky from the inside. The
   hero is then pulled up by --navh so the photo still runs behind the bar.
   Transparent at rest, solid once scrolled, because past the hero the bar
   sits over paper and cream-on-paper is unreadable. */
.navbar{position:sticky;top:0;z-index:60;border-bottom:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.navbar.stuck{background:rgba(38,29,23,.94);border-bottom-color:rgba(246,239,228,.12)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .navbar.stuck{background:rgba(38,29,23,.82);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    backdrop-filter:saturate(140%) blur(14px)}
}
nav.site{display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;gap:20px;flex-wrap:wrap}
nav.site .lockup img{height:52px;width:auto;display:block}
nav.site .links{display:flex;gap:26px;font-size:13.5px;font-weight:600}
nav.site .links a{color:rgba(246,239,228,.78);padding-bottom:4px;
  border-bottom:2px solid transparent;transition:.16s var(--ease)}
nav.site .links a:hover{color:var(--cream)}
nav.site .links a.active{color:var(--cream);border-bottom-color:var(--bronze)}

.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:14px 10px;
  flex-direction:column;gap:5px;min-width:44px;min-height:44px;align-items:center;
  justify-content:center}
.navtoggle span{display:block;width:24px;height:2px;background:var(--cream);border-radius:2px;
  transition:.2s var(--ease)}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── home hero ───────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--dusk);color:var(--cream);overflow:hidden;
  margin-top:calc(var(--navh) * -1)}
.hero-photo{position:absolute;inset:0;
  background:url('assets/images/hero-venice.webp') center 42%/cover no-repeat}
.hero-grad{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(38,29,23,.95) 0%,rgba(38,29,23,.86) 38%,
    rgba(38,29,23,.52) 68%,rgba(38,29,23,.34) 100%)}
.hero-inner{position:relative;padding-top:var(--navh);padding-bottom:66px}
.hero-copy{max-width:660px;padding-top:52px}
.hero-copy h1{font-size:clamp(38px,5.6vw,64px);line-height:1.05;letter-spacing:-1.6px;
  margin-top:16px}
.hero-copy h1 em{color:var(--bronze)}
.hero-copy .lede{color:rgba(246,239,228,.86)}
.cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.hero-stats{margin-top:54px}

/* ─── interior page head ──────────────────────────────────────────────── */
.topband{background:var(--dusk);color:var(--cream);
  margin-top:calc(var(--navh) * -1);padding-top:var(--navh)}
.phead{padding:44px 0 62px}
.phead .kicker{margin-bottom:16px}
.phead h1{font-size:clamp(32px,4.6vw,52px);line-height:1.08;letter-spacing:-1.2px;
  max-width:20ch}
.phead h1 em{color:var(--bronze)}
.phead .lede{color:rgba(246,239,228,.86)}

/* ─── home: the hook ──────────────────────────────────────────────────── */
/* Was a dusk card — a floating dark slab is none of the three grounds, and
   sitting a sliver of paper below the dusk hero it read as debris off it.
   The card itself was right, though: it wants to feel like an aside, not a
   monument. So the geometry is unchanged and only the fill moved — a 10%
   --gallery fill: the same off-white that separates bands elsewhere on the
   site, so the card is a surface the eye already knows. A bronze wash was
   tried and pulled — it appears nowhere else, so it read as a one-off. */
.hook{display:grid;grid-template-columns:1.45fr .55fr;gap:44px;align-items:center;
  border-radius:12px;padding:40px 42px;
  background:var(--gallery);border:1px solid var(--line)}
.hook .q{font-family:var(--disp);font-size:clamp(21px,2.6vw,28px);line-height:1.4;
  letter-spacing:-.6px;font-weight:400}
.hook .q em{color:var(--bronze-dk)}
.hook .qbody{margin-top:20px;font-size:15px;line-height:1.75;color:var(--body);
  max-width:60ch}

/* ─── home: proof filmstrip ───────────────────────────────────────────── */
.proof{display:grid;grid-template-columns:1.778fr .643fr .8fr;gap:16px;align-items:start}
.proof .item{display:flex;flex-direction:column;min-width:0}
.proof .media{width:100%;border-radius:8px;overflow:hidden;position:relative;display:block;
  background:var(--dusk)}
.proof .media img{width:100%;height:100%;object-fit:cover}
.proof .r169{aspect-ratio:16/9}
.proof .r914{aspect-ratio:9/14}
.proof .r45{aspect-ratio:4/5}
.proof .dusk-card{padding:20px 18px;display:flex;flex-direction:column;
  justify-content:space-between}
.proof .hooktxt{position:relative;font-family:var(--disp);font-weight:600;font-size:15px;
  line-height:1.4;letter-spacing:-.2px;text-transform:lowercase;color:var(--cream)}
.proof .views{position:relative;align-self:flex-start;font-family:var(--disp);font-weight:600;
  font-size:13px;background:rgba(246,239,228,.14);border:1px solid rgba(246,239,228,.26);
  padding:5px 12px;border-radius:100px;color:var(--cream)}
.proof .views i{font-style:normal;color:var(--bronze);margin-right:6px}
.proof .cap{margin-top:13px}
.proof .cap b{display:block;font-family:var(--disp);font-size:16px;font-weight:600;
  letter-spacing:-.3px}
.proof .cap span{display:block;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-top:6px;line-height:1.6}
.proof .item:hover .cap b{color:var(--bronze-dk)}

.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border:2px solid rgba(255,255,255,.92);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:.2s var(--ease)}
.play::after{content:"";border-left:15px solid rgba(255,255,255,.95);
  border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
a:hover>.play,a:hover .media .play{background:rgba(255,255,255,.18)}
.tc{position:absolute;bottom:9px;right:9px;background:rgba(20,14,11,.82);color:var(--cream);
  font-size:11px;font-weight:600;padding:4px 8px;border-radius:3px}

/* ─── home: written lines ─────────────────────────────────────────────── */
.lines{border-top:1px solid var(--line)}
.ln{display:flex;justify-content:space-between;align-items:baseline;gap:28px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.ln span{font-family:var(--disp);font-size:17px;line-height:1.5;letter-spacing:-.2px;
  color:var(--ink)}
.ln b{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);
  font-weight:700;white-space:nowrap}

/* ─── home: the two doors ─────────────────────────────────────────────── */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.door{border:1px solid var(--line);border-radius:10px;padding:32px 32px 36px;display:block;
  background:var(--gallery);transition:.16s var(--ease)}
.door:hover{border-color:var(--bronze-dk);transform:translateY(-2px)}
.door h2{font-size:26px;margin-top:13px;letter-spacing:-.6px}
.door .more{display:inline-block;margin-top:22px}

/* ─── TikTok cards ────────────────────────────────────────────────────── */
.tt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tt-card .screen{aspect-ratio:9/14;border-radius:12px;position:relative;overflow:hidden;
  padding:20px 18px;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--dusk);transition:.25s var(--ease)}
.tt-card:hover .screen{transform:translateY(-4px)}
/* Real covers now sit behind these. The per-card bronze radials are gone —
   the photographs supply the variety, and a warm wash over warm frames
   muddied them. What is left is a neutral dusk scrim doing one job:
   holding the hook text legible at the top and the pill at the foot. */
/* Order matters here: ::before is the FIRST child, so without explicit
   layers the img paints straight over the scrim and the hook text ends up
   sitting on bare photograph. Photo 0, scrim 1, type 2. */
.tt-card .screen img,.proof .dusk-card img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0}
.tt-card .screen::before,.proof .dusk-card::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(38,29,23,.88) 0%,rgba(38,29,23,.66) 30%,
    rgba(38,29,23,.14) 60%,rgba(38,29,23,.58) 100%)}
.tt-card .hooktxt,.tt-card .views,
.proof .dusk-card .hooktxt,.proof .dusk-card .views{z-index:2}
/* belt and braces: the aquarium cover is bright cyan and the scrim alone
   left the hook text swimming in it. */
.tt-card .hooktxt,.proof .dusk-card .hooktxt{text-shadow:0 1px 4px rgba(20,14,11,.6)}
.tt-card .hooktxt{position:relative;font-family:var(--disp);font-weight:600;font-size:16.5px;
  line-height:1.4;letter-spacing:-.2px;text-transform:lowercase;color:var(--cream)}
.tt-card .views{position:relative;align-self:flex-start;font-family:var(--disp);font-weight:600;
  font-size:14px;background:rgba(246,239,228,.14);border:1px solid rgba(246,239,228,.26);
  padding:6px 13px;border-radius:100px;color:var(--cream)}
.tt-card .views i{font-style:normal;color:var(--bronze);margin-right:6px}
.tt-card .cap{display:block;margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--muted)}

/* ─── photography — gallery ground only ───────────────────────────────── */
.gallery-band{background:var(--gallery)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
figure.framed .imw{position:relative;display:block;padding:8px}
figure.framed img{width:100%;height:auto}
/* Portraits arrive at slightly different ratios — hold one frame so the row reads
   as a contact sheet rather than three loose crops. */
.grid3 figure.framed img{aspect-ratio:3/4;object-fit:cover}
figure.framed figcaption{margin-top:12px;font-size:10.5px;letter-spacing:1.7px;
  text-transform:uppercase;color:var(--muted);font-weight:700;line-height:1.7}
figure.framed figcaption em{color:var(--bronze-dk)}
.tick{position:absolute;width:12px;height:12px;border-color:#B9AC97;border-style:solid;
  pointer-events:none}
.tick.tl{top:0;left:0;border-width:1px 0 0 1px}
.tick.tr{top:0;right:0;border-width:1px 1px 0 0}
.tick.bl{bottom:0;left:0;border-width:0 0 1px 1px}
.tick.br{bottom:0;right:0;border-width:0 1px 1px 0}

figure.framed.solo{max-width:840px;cursor:pointer}
figure.framed.solo img{transition:.25s var(--ease)}
figure.framed.solo:hover img{opacity:.9}
.opencue{color:var(--bronze-dk)}
figure.framed.solo:hover .opencue{color:var(--ink)}

/* ─── featured video ──────────────────────────────────────────────────── */
.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.videobox{position:relative;display:block;border-radius:10px;overflow:hidden;
  box-shadow:0 18px 46px rgba(38,32,26,.24)}
.videobox img{width:100%;height:auto}
/* Once the real player is injected the poster is gone, so the box has to hold
   its own shape — the image was the only thing giving it height. */
.videobox.playing{aspect-ratio:16/9;cursor:default}
.videobox.playing img,.videobox.playing .play,.videobox.playing .tc{display:none}
.videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.feature p{font-size:15px;line-height:1.7;color:var(--body);margin-top:14px}
.spine{border-left:3px solid var(--bronze-dk);padding-left:22px}
.spine .meta{margin-top:0}

/* ─── the Bullet Hole, outside and inside ─────────────────────────────────
   izyuair's exterior is 2.33:1 and the cross-section is 1:1.74, so the columns
   are proportioned (4.05 : 1) to land both images on exactly the same height.
   Pairing them also shrinks the exterior from 740px to 579px, which makes this
   block shorter than the single banner it replaces. */
.holepair{display:grid;grid-template-columns:4.05fr 1fr;gap:18px;
  align-items:start;margin:24px 0 6px}
.holefig{display:block;width:100%;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:zoom-in}
.holefig .imw{display:block;overflow:hidden;border-radius:6px;line-height:0;
  box-shadow:0 12px 30px rgba(38,32,26,.20)}
.holefig img{width:100%;height:auto;display:block;transition:transform .5s ease}
.holefig:hover img{transform:scale(1.02)}
.holefig:focus-visible .imw{outline:2px solid var(--bronze-dk);outline-offset:3px}
.holefig .cap{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);line-height:1.5}
.holefig .cap a{color:var(--bronze-dk);border-bottom:1px solid transparent}
.holefig .cap a:hover{border-bottom-color:var(--bronze-dk)}
@media(prefers-reduced-motion:reduce){.holefig img{transition:none}
  .holefig:hover img{transform:none}}

/* ─── title cards, as a filmstrip ─────────────────────────────────────────
   The cards are dithered, and dither is a pixel-scale pattern — shrink it and
   it turns to mush, so these can't be shown small at any column count. A
   horizontal strip is the only shape that keeps them large (700px, where the
   grain survives) while costing one row of page instead of ten. */
.tcstrip-wrap{position:relative}
.tcstrip-wrap::after{content:"";position:absolute;top:0;right:0;bottom:34px;width:72px;
  background:linear-gradient(90deg,rgba(255,253,249,0),var(--gallery));pointer-events:none;
  transition:opacity .25s}
/* The fade signals "there's more" — at the end there isn't, and leaving it up
   just veils the last card. */
.tcstrip-wrap.at-end::after{opacity:0}
.tcstrip{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding-bottom:10px;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.tcstrip:focus-visible{outline:2px solid var(--bronze-dk);outline-offset:4px}
.tcstrip::-webkit-scrollbar{height:6px}
.tcstrip::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.tcstrip::-webkit-scrollbar-track{background:transparent}

.tcard{flex:0 0 700px;scroll-snap-align:start;display:block;padding:0;border:0;
  background:none;font:inherit;color:inherit;text-align:left;cursor:zoom-in}
.tcard .imw{display:block;position:relative;width:100%;aspect-ratio:64/27;
  border-radius:8px;overflow:hidden;background:var(--dusk);
  box-shadow:0 10px 26px rgba(38,32,26,.14)}
.tcard img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.tcard:hover img,.tcard:focus-visible img{transform:scale(1.02)}
.tcard:focus-visible .imw{outline:2px solid var(--bronze-dk);outline-offset:3px}
.tcard .lbl{display:block;margin-top:9px;font-size:12px;letter-spacing:.01em;
  color:var(--muted)}
.tcard:hover .lbl{color:var(--ink)}

.tcnavs{display:flex;gap:8px;margin:0}
.tcnav{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--ink);font-size:19px;line-height:1;cursor:pointer;
  transition:border-color .2s,color .2s,opacity .2s}
.tcnav:hover:not(:disabled){border-color:var(--bronze-dk);color:var(--bronze-dk)}
.tcnav:disabled{opacity:.3;cursor:default}
.tcnav:focus-visible{outline:2px solid var(--bronze-dk);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.tcard img{transition:none}
  .tcard:hover img,.tcard:focus-visible img{transform:none}
  .tcstrip{scroll-behavior:auto}}

/* ─── credentials ─────────────────────────────────────────────────────── */
.creds{border-top:1px solid var(--line)}
.cred{padding:30px 0;border-bottom:1px solid var(--line)}
.credtop{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline}
.cred h3{font-size:20px;letter-spacing:-.3px}
.cred .rolelabel{font-family:var(--sans);font-size:13.5px;font-weight:700;
  color:var(--ink);letter-spacing:.1px;margin-top:5px}
.cred .role{font-size:14.5px;color:var(--body);line-height:1.65;margin-top:8px;max-width:66ch}
.cred .rolelabel+.role{margin-top:7px}
.cred .fig{font-family:var(--disp);font-size:16px;font-weight:600;white-space:nowrap;
  text-align:right}
.cred .fig.na{font-family:var(--sans);font-size:11px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.clips{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px;
  align-items:start}
.clip{border:1px solid var(--line);border-radius:6px;overflow:hidden;display:block;
  background:var(--gallery);transition:.16s var(--ease)}
.clip:hover{border-color:var(--bronze-dk)}
/* One frame for shorts and episodes alike — a ragged row of mixed ratios reads
   as a broken grid, not as two formats. */
.clip .th{background:var(--dusk);position:relative;display:block;aspect-ratio:16/9;
  overflow:hidden}
.clip .th img{width:100%;height:100%;object-fit:cover}
.clip .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border:1.5px solid rgba(255,255,255,.9);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(20,14,11,.42)}
.clip .pl::after{content:"";border-left:11px solid rgba(255,255,255,.95);
  border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.clip:hover .pl{background:rgba(20,14,11,.15)}
.clip .lbl{display:block;padding:10px 12px;font-size:10.5px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted);font-weight:700}

/* ─── lightbox ────────────────────────────────────────────────────────── */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(20,14,11,.94);
  display:flex;align-items:center;justify-content:center;padding:70px 80px 90px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
.lightbox button{position:absolute;background:none;border:0;color:var(--cream);
  cursor:pointer;font-family:var(--sans);line-height:1;transition:.16s var(--ease)}
.lightbox button:hover{color:var(--bronze)}
.lb-close{top:22px;right:26px;font-size:24px;padding:8px}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:52px;padding:10px 18px}
.lb-prev{left:10px}
.lb-next{right:10px}
.lb-cap{position:absolute;bottom:32px;left:0;right:0;text-align:center;font-size:11px;
  letter-spacing:1.8px;text-transform:uppercase;font-weight:700;color:rgba(246,239,228,.72)}
body.lb-open{overflow:hidden}

/* ─── writing ─────────────────────────────────────────────────────────── */
.wpiece{border-top:1px solid var(--line);padding:30px 0}
.wpiece.last{border-bottom:none}
.wpiece .cat{font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.wpiece h3{font-size:24px;letter-spacing:-.4px;margin-top:9px;line-height:1.25}
.wpiece .desc{font-size:15.5px;line-height:1.75;color:var(--body);margin-top:11px}
.wpiece .pull{font-family:var(--disp);font-size:20px;line-height:1.55;letter-spacing:-.4px;
  color:var(--ink);border-left:3px solid var(--bronze-dk);padding-left:20px;max-width:60ch}
.wpiece .foot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:18px}
.wpiece .count{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);font-weight:700}
/* The numeral carries the weight; "/10" is the unit, set quieter and smaller
   so the score still reads as one glyph at a glance. */
.wpiece .score{font-family:var(--disp);font-size:13px;font-weight:600;color:var(--muted);
  letter-spacing:.02em;white-space:nowrap}
.wpiece .score b{font-size:19px;font-weight:600;color:var(--ink)}

details.rd{margin-top:18px}
details.rd summary{list-style:none;cursor:pointer;font-size:13.5px;font-weight:700;
  color:var(--bronze-dk);border-bottom:1.5px solid var(--bronze-dk);display:inline-block;
  padding-bottom:2px}
details.rd summary::-webkit-details-marker{display:none}
details.rd summary:hover{color:var(--ink);border-color:var(--ink)}
details.rd[open] summary{margin-bottom:24px}
details.rd[open] summary::after{content:" — close"}
.prose{font-size:16.5px;line-height:1.85;color:var(--body);max-width:66ch}
.prose p+p{margin-top:17px}
.prose .passage{font-family:var(--disp);font-size:11px;letter-spacing:2.4px;
  text-transform:uppercase;font-weight:700;color:var(--bronze-dk);margin:38px 0 18px;
  padding-bottom:9px;border-bottom:1px solid var(--line);max-width:none}
.prose .passage:first-child{margin-top:0}

.copyblock{border-left:3px solid var(--bronze-dk);padding-left:20px;margin-top:18px}
.copyblock .line{display:flex;justify-content:space-between;gap:24px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:15px;line-height:1.65;color:var(--ink)}
.copyblock .line:last-child{border-bottom:none}
.copyblock .line b{font-family:var(--disp);font-weight:600;white-space:nowrap;
  color:var(--muted);font-size:13.5px}

/* A paired entry: the post cover above, the caption below. The cover stops the
   scroll, the caption gets it sent — two type sizes say that without a label.
   A video entry has no .covertxt row and carries no note explaining the gap. */
.copyblock .line .pair{display:flex;flex-direction:column;gap:4px;min-width:0}
.copyblock .line .captxt{display:block}
.copyblock .line .covertxt{display:block;font-size:12.5px;line-height:1.5;
  color:var(--muted)}
/* the hover arrow above targets every descendant span — re-point it at the caption */
.copyblock a.line .pair::after,.copyblock a.line .covertxt::after{content:none}
.copyblock a.line:hover .covertxt{color:var(--muted)}

/* ─── about ───────────────────────────────────────────────────────────── */
.bio{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.portrait{aspect-ratio:4/5;background:var(--gallery);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
.portrait span{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--muted);font-weight:700;line-height:1.8}
.bio p{font-size:16px;line-height:1.85;color:var(--body)}
.bio p+p{margin-top:18px}
.bio .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bio .stats div{line-height:1.6}
.reslinks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.reslink{border:1px solid var(--line);border-radius:6px;padding:18px 20px;
  background:var(--gallery);transition:.16s var(--ease)}
.reslink:hover{border-color:var(--bronze-dk)}
.reslink b{display:block;font-family:var(--disp);font-size:16px;font-weight:600}
.reslink span{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);margin-top:6px;font-weight:700}
.viewer{margin-top:22px;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:var(--gallery)}
.viewer .bar{padding:11px 16px;border-bottom:1px solid var(--line);font-size:10.5px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);font-weight:700;
  display:flex;justify-content:space-between;gap:12px}
.viewer .page{aspect-ratio:8.5/11;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:var(--muted);font-size:12px;letter-spacing:1.5px;
  text-transform:uppercase;font-weight:700;line-height:1.8}

/* ─── linked lines — the whole row is the target ───────────────────────
   Copy that references a video should reach it. The arrow is the only new
   ink; hover moves the line to bronze-deep, which is already the link
   colour everywhere else on the site. */
a.ln,.copyblock a.line{transition:.16s var(--ease)}
a.ln span::after,.copyblock a.line span::after{content:"\2197";font-size:.72em;
  margin-left:.45em;color:var(--muted);opacity:.5;display:inline-block;
  vertical-align:1px;transition:.16s var(--ease)}
a.ln:hover span,.copyblock a.line:hover span{color:var(--bronze-dk)}
a.ln:hover span::after,.copyblock a.line:hover span::after{color:var(--bronze-dk);opacity:1}
.copyblock a.line b{color:var(--bronze-dk)}

/* the trailer synopsis tagline — display type, not a heading */
.prose .tagline{font-family:var(--disp);font-size:12.5px;font-weight:700;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--ink);
  line-height:1.6;margin-bottom:16px;max-width:none}

.reslinks.wide{grid-template-columns:1fr 1fr;max-width:720px;margin-top:0}
.portrait.filled{padding:0;background:var(--dusk);overflow:hidden}
.portrait.filled img{width:100%;height:100%;object-fit:cover;display:block}

/* ─── featured client shoot ───────────────────────────────────────────
   Every frame is 2:3, so the column ratio is not arbitrary: a hero of
   width H is 1.5H tall, and two stacked frames of width S plus one gap g
   fill exactly that when 3S + g = 1.5H. Solving against the container
   gives 2.048fr / 1fr, which lines the two columns up to within a few
   pixels at any width — so nothing has to be cropped to make the block
   square off. His framing survives intact. */
.feature-shoot{display:grid;grid-template-columns:2.09fr 1fr;gap:24px;align-items:start}
.feature-shoot .stack{display:grid;gap:24px}
.feature-shoot img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.feature-shoot .primary figcaption{font-size:11.5px;color:var(--ink)}

/* ─── commissioned art + design artefacts ─────────────────────────────
   One image, not a list. It runs to the container width while the prose
   holds its 740px measure, which is what makes it read as a banner for the
   section rather than another item in it. Credit sits quietly underneath —
   it is what makes this read as "I hired and directed this". */
.gh-banner{max-width:none;margin:24px 0 6px}
.gh-banner img{width:100%;height:auto;display:block;border-radius:6px;
  border:1px solid var(--line)}
.gh-banner figcaption,.withcover .cover figcaption{margin-top:10px;font-size:10.5px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700;
  line-height:1.8}
.gh-banner figcaption a,.withcover .cover figcaption a{color:var(--bronze-dk);
  border-bottom:1px solid rgba(145,87,27,.4)}
.gh-banner figcaption a:hover,.withcover .cover figcaption a:hover{border-bottom-color:var(--bronze-dk)}

/* the essay that came with a design brief attached */
.withcover{display:grid;grid-template-columns:1fr 150px;gap:26px;align-items:start}
.withcover .cover img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.withcover .cover figcaption{font-size:9.5px;letter-spacing:1.2px}

/* ─── contact + footer ────────────────────────────────────────────────── */
.contact-band{background:var(--dusk);color:var(--cream);padding:64px 0}
.contact-inner{display:flex;justify-content:space-between;align-items:center;gap:32px;
  flex-wrap:wrap}
.contact-band h2{font-size:clamp(24px,3.2vw,34px);letter-spacing:-.7px}
.contact-band h2 em{color:var(--bronze)}
.mail{margin-top:14px;font-size:14.5px;line-height:1.9;color:rgba(246,239,228,.82)}
.mail a{border-bottom:1.5px solid rgba(246,239,228,.4)}
.mail a:hover{color:var(--bronze);border-color:var(--bronze)}

footer.site{background:var(--dusk);color:rgba(246,239,228,.58);padding:0 0 34px;
  font-size:12.5px}
footer.site .finner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid rgba(246,239,228,.14)}
footer.site a{border-bottom:1px solid rgba(246,239,228,.24)}
footer.site a:hover{color:var(--bronze);border-color:var(--bronze)}

/* ─── responsive ──────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .hook{grid-template-columns:1fr;gap:32px;padding:32px 28px}
  .hook .stats.stack{flex-direction:row;gap:36px}
  .feature{grid-template-columns:1fr;gap:28px}
  .proof,.doors{grid-template-columns:1fr;gap:26px}
  .proof .media{max-width:520px}
  .bio{grid-template-columns:1fr;gap:32px}
  .portrait{max-width:360px}
}
@media(max-width:820px){
  .container,.narrow{padding:0 22px}
  section.pad{padding:52px 0}
  :root{--navh:68px}   /* logo 46 + 11 padding top and bottom */
  .navtoggle{display:flex}
  nav.site{padding:11px 0}
  nav.site .lockup img{height:46px}
  nav.site .links{display:none;flex-basis:100%;flex-direction:column;gap:0;
    border-top:1px solid rgba(246,239,228,.16);margin-top:4px;padding-bottom:6px}
  nav.site .links.open{display:flex}
  nav.site .links a{padding:14px 0;border-bottom:1px solid rgba(246,239,228,.08);font-size:15px}
  nav.site .links a.active{border-bottom-color:rgba(246,239,228,.08);color:var(--bronze)}
  .hero-copy{padding-top:36px}
  /* The 100° desktop gradient reveals the photo on the right, which doesn't exist
     on a phone. Vertical instead, and lighter through the middle so the Venice
     frame is actually visible rather than a dark band with texture. */
  /* 2400px of Venice is pointless on a 390px screen — half the bytes, same frame. */
  .holepair{grid-template-columns:1fr;gap:22px}
  .holefig.tall{max-width:220px}
  .tcard{flex:0 0 86vw}
  .tcnavs{display:none}

  .hero-photo{background-position:center 55%;
    background-image:url('assets/images/hero-venice-1200.webp')}
  .hero-grad{background:linear-gradient(180deg,rgba(38,29,23,.90) 0%,
    rgba(38,29,23,.74) 48%,rgba(38,29,23,.90) 100%)}
  /* A wrapping flex row of stats lands 2-1-1 on a phone and reads as broken.
     A two-column grid keeps the numbers in a column you can scan. */
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px}
  .stats.stack,.bio .stats{grid-template-columns:1fr 1fr}
  .stats b{font-size:25px}
  .hero-stats{margin-top:38px}
  .tt-grid,.clips,.grid3{grid-template-columns:repeat(2,1fr)}
  .reslinks,.reslinks.wide{grid-template-columns:1fr}
  .credtop{grid-template-columns:1fr}
  .cred .fig{text-align:left}
  .ln,.copyblock .line{flex-direction:column;gap:8px}
  .lightbox{padding:60px 20px 80px}
  .lb-prev,.lb-next{font-size:38px;padding:8px 10px}
}
@media(max-width:520px){
  /* Portraits go full width — they're the argument. The TikTok screens and the
     clip thumbnails stay two-up: at one-up the Content page becomes twenty
     screens of scrolling and nobody reaches the trailer. */
  .grid3{grid-template-columns:1fr}
  .withcover{grid-template-columns:1fr;gap:20px}
  .withcover .cover{max-width:150px}
  .feature-shoot{grid-template-columns:1fr}
  .feature-shoot .stack{grid-template-columns:1fr 1fr}
  .tt-card .hooktxt{font-size:13.5px}
  .tt-card .views{font-size:12px;padding:4px 10px}
  .tt-card .screen{padding:14px 12px}
  .cta-row .btn{flex:1 1 100%;text-align:center}
}

/* ─── touch ───────────────────────────────────────────────────────────────
   Two things only matter on a phone and neither shows up on desktop:
   labels set at 10.5px stop being readable, and a 17px-tall text link is
   below every touch-target guideline. Labels get a floor of 11.5px; links
   get an invisible expanded hit area so the type keeps its size and the
   underline keeps its position. */
@media(max-width:820px){
  .kicker{font-size:12px;letter-spacing:2.6px}
  .stats div,.proof .cap span,.ln b,figure.framed figcaption,.clip .lbl,
  .tt-card .cap,.wpiece .cat,.wpiece .count,.reslink span,.viewer .bar,
  .meta,.cred .fig.na,.portrait span{font-size:11.5px;letter-spacing:1.3px}

  .more,details.rd summary{position:relative}
  .more::after,details.rd summary::before{content:"";position:absolute;
    left:-6px;right:-6px;top:-13px;bottom:-13px}

  .mail{line-height:2.4}
  footer.site .finner{line-height:2.4}
  .mail a,footer.site a{position:relative}
  .mail a::after,footer.site a::after{content:"";position:absolute;
    left:-4px;right:-4px;top:-11px;bottom:-11px}

  nav.site .lockup{position:relative}
  nav.site .lockup::after{content:"";position:absolute;inset:-8px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

@media print{
  .hero-photo,.hero-grad,nav.site,.navtoggle,.contact-band,footer.site,.lightbox{display:none}
  body{background:#fff}
  details.rd{display:block}
  details.rd .prose{display:block!important}
}