/* ahdisberuk.com — Ahdis Beruk, Sankofic storyteller.
   Built by daysgraphic. Plain static CSS, no build step.

   WHAT CARRIED OVER FROM THE MOCKUP
   The palette, the asymmetry, the full-screen colour moments and the Sankofic
   band all survive from the approved direction. What changed is structure and
   type: the single scroll is now seven pages behind a top-right menu, and the
   display face is softer.

   TYPE — Ahdis chose Abril Fatface (2026-09-02) from a four-face specimen.
   Abril is a single-weight poster didone with NO italic, so it carries the
   bold display only (--disp) at weight 400 — never 600/700, which would
   synthesise a faux bold. Fraunces stays as --serif for the italic accents
   and the two light editorial uses she said were fine: the press quote and
   the intro line. Do not put Abril on an italic, and do not bolden it.

   COLOUR ROLES
     plum       identity — home panel and the closing invitation
     coral      an accent only — italic headline words, the band's
                "storyteller", links. Never a ground under body text:
                Luis vetoed the coral panels, and coral+ink was 5.5:1 at best.
     paper      the reading grounds: biography, credits, press
     aubergine  the cinematic acting panels
     chartreuse the booking action and the Sankofic band, nothing else

   CONTRAST — coral #EF553F is only 2.85:1 on paper and 3.97:1 on plum, so it
   never carries text on either. --coral-ink is the paper-safe coral,
   --coral-lift the plum-safe one. Do not "simplify" these back to one value.

   Single theme by design: this is a brand surface, not a document. */

/* Fonts are linked from the <head> (tools/build-pages.js FONTS_URL) so the
   browser can fetch them in parallel with this file instead of after it. */

:root{
  /* Refuses forced-dark tools (Chrome Auto Dark Mode, Dark Reader). They would
     darken the coral/plum panels and leave the ink text dark — black on black. */
  color-scheme:only light;
  --paper:#F0E7E1;
  --paper-2:#E4D7D0;
  --ink:#190911;
  --plum:#5B092D;
  --coral:#EF553F;
  --coral-ink:#C4392A;
  --coral-text:#A83324;
  --coral-lift:#FF8A72;
  --chartreuse:#DCE951;
  --white:#FFF9F4;
  --muted:#6A5158;
  --muted-inv:rgba(255,249,244,.68);

  --rule:rgba(25,9,17,.18);
  --rule-inv:rgba(255,249,244,.24);

  --disp:"Abril Fatface",Georgia,"Times New Roman",serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"DM Sans","Helvetica Neue",Arial,sans-serif;

  --t--1:.75rem;
  --t-0:1.0625rem;
  --t-1:1.25rem;
  --t-2:clamp(1.5rem,2.4vw,2rem);
  --t-3:clamp(2.1rem,5vw,3.6rem);
  --t-4:clamp(2.6rem,7vw,5.5rem);
  --t-5:clamp(3rem,10vw,8.5rem);

  --gut:clamp(1.25rem,4.5vw,4rem);
  --maxw:1560px;
  --head-h:74px;
}

*{box-sizing:border-box}
/* Grid and flex children default to min-width:auto, which lets a long word
   push a track past the viewport. Load-bearing at these display sizes. */
.rows>*,.row>*,.gal>*,.split>*,.fieldrow>*,.inq>*,.home>*,.duo>*{min-width:0}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
p{margin:0}
img{display:block;max-width:100%}
a{color:inherit}

/* .wrap uses padding-inline, never the padding shorthand — a shorthand
   redeclared at a breakpoint silently zeroes another rule's vertical space. */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--white);
  padding:.7rem 1rem;font-size:var(--t--1);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:0}

:where(a,button,input,select,textarea):focus-visible{
  outline:2.5px solid var(--chartreuse);outline-offset:3px;
}
.on-paper :where(a,button,input,select,textarea):focus-visible{outline-color:var(--coral-text)}

/* ── type roles ──────────────────────────────────────────── */
.d{
  font-family:var(--disp);font-weight:400;
  line-height:.94;letter-spacing:-.006em;margin:0;
  text-wrap:balance;overflow-wrap:break-word;
}
.i{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
  letter-spacing:-.014em;
}
.kicker{font-size:var(--t--1);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.on-dark .kicker,.on-plum .kicker{color:var(--muted-inv)}
.lede{font-size:var(--t-1);line-height:1.5;max-width:44ch}
.body{max-width:60ch}
.small{font-size:var(--t--1);letter-spacing:.14em;text-transform:uppercase;font-weight:500}

.ic{width:.72em;height:.72em;display:inline-block;margin-left:.4em;flex:none}

/* Primary booking action — the one solid control anywhere on the site. */
.cta{
  display:inline-flex;align-items:center;align-self:flex-start;
  background:var(--chartreuse);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-0);font-weight:700;letter-spacing:.05em;
  text-decoration:none;padding:.75rem 1.15rem;border:0;cursor:pointer;
}
.cta:hover{background:var(--white)}
.cta .ic{width:.8em;height:.8em}

.alink{
  display:inline-flex;align-items:baseline;font-size:var(--t-0);font-weight:500;
  text-decoration:none;padding-bottom:.3rem;border-bottom:1.5px solid currentColor;
}
.alink:hover{color:var(--coral)}
.on-paper .alink:hover{color:var(--coral-text)}
.linkrow{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}

/* ── header + navigation ─────────────────────────────────── */
/* Desktop gets inline links: there is room, and a hamburger on a wide screen
   hides navigation for no reason. The overlay panel is the small-screen
   form of the same nav, and only one of the two is ever in the DOM tree at
   a time (the other is display:none, so it is out of the a11y tree too). */
.site-head{position:absolute;inset:0 0 auto;z-index:60;color:var(--white)}
/* On the home panel the header sits over the photograph, whose light
   background is far too pale for white text. A short scrim secures it. It holds
   full strength through --head-h so the nav row is never over a bare
   highlight, then fades over the next 100px. */
.site-head:not(.solid)::before{
  content:"";position:absolute;inset:0 0 auto;height:180px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(20,7,13,.78),rgba(20,7,13,.72) var(--head-h),rgba(20,7,13,0));
}
.site-head.solid{position:sticky;top:0;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--rule)}
.head-in{position:relative;display:flex;align-items:center;gap:1rem;min-height:var(--head-h)}
.mark{display:flex;align-items:baseline;gap:.4rem;text-decoration:none;margin-right:auto}
.mark b{font-family:var(--disp);font-weight:400;font-size:1.45rem;line-height:1}
.mark span{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75}

/* inline nav — desktop. Shrinkable, with the gap easing on narrower desktops
   so the row never outgrows the wrap. */
.mark{flex:0 1 auto;min-width:0}
.nav-inline{display:flex;align-items:center;min-width:0;flex:0 1 auto}
.nav-inline ul{display:flex;align-items:center;gap:clamp(.9rem,1.5vw,1.6rem);list-style:none;margin:0;padding:0}
.head-cta{flex:none}
/* Between 1041 and 1280 the chip is dropped from the header — every page
   already carries Booking & Inquiries in its body, so nothing is lost. */
/* .head-in prefix: this block precedes the base .head-cta rule, and at equal
   specificity the later base rule would win and keep the chip visible. */
@media (max-width:1280px){.head-in .head-cta{display:none}.mark span{display:none}}
.nav-inline a{
  font-size:var(--t--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding-block:.35rem;border-bottom:1.5px solid transparent;
}
.nav-inline a:hover{border-bottom-color:currentColor}
.nav-inline a[aria-current="page"]{border-bottom-color:var(--coral)}
.head-cta{
  display:inline-flex;align-items:center;background:var(--chartreuse);color:var(--ink);
  font-size:var(--t--1);font-weight:700;letter-spacing:.08em;text-decoration:none;
  padding:.55rem .85rem;margin-left:.4rem;white-space:nowrap;
}
.head-cta:hover{background:var(--white)}

.menu-btn{
  display:none;align-items:center;gap:.6rem;background:none;border:0;cursor:pointer;
  color:inherit;font-family:var(--sans);font-size:var(--t--1);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;padding:.5rem 0;
}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:4px;width:22px}
.menu-btn .bars i{display:block;height:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
.menu-btn[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.menu-btn .bars i{transition:none}}

/* Below 1040 the seven links plus a CTA stop fitting, so the overlay takes
   over and the inline nav goes away. */
@media (max-width:1040px){
  .nav-inline,.head-cta{display:none}
  .menu-btn{display:inline-flex}
}

/* Overlay panel — small screens only.
   Toggled with display, not a visibility transition: a transitioned
   visibility can sit stuck on `hidden` while the class says open, leaving
   the panel unreachable. The fade is an entry animation with no fill, so a
   animation that never runs degrades to "just visible". */
.menu{
  position:fixed;inset:0;z-index:55;background:var(--plum);color:var(--white);
  display:none;flex-direction:column;justify-content:center;
  padding:calc(var(--head-h) + 1.5rem) var(--gut) 2rem;
  overflow-y:auto;overscroll-behavior:contain;
}
.menu.open{display:flex;animation:menu-in .24s ease}
@keyframes menu-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.menu.open{animation:none}}
.menu ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1em;
  width:100%;max-width:var(--maxw);margin-inline:auto}
.menu li{display:block}
/* The whole row is the link — the number sits inside the anchor, so there is
   no dead zone to tap by accident. Generous block padding for thumbs. */
.menu a{
  display:flex;align-items:baseline;gap:.9rem;padding-block:.35rem;
  font-family:var(--disp);font-weight:400;
  font-size:clamp(1.6rem,5.2vw,2.6rem);line-height:1.18;letter-spacing:-.02em;text-decoration:none;
}
.menu .n{font-family:var(--sans);font-size:var(--t--1);color:var(--coral-lift);
  font-variant-numeric:tabular-nums;flex:none;width:2rem}
.menu a:hover,.menu a[aria-current="page"]{color:var(--coral)}
.menu-foot{
  width:100%;max-width:var(--maxw);margin:2rem auto 0;padding-top:1.25rem;
  border-top:1px solid var(--rule-inv);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;
}
/* Lock BOTH — html is the scroll container in most engines, and locking only
   body left the page scrollable behind the open panel. */
html.locked,body.locked{overflow:hidden}

/* ── home panel ──────────────────────────────────────────── */
.home{
  position:relative;background:var(--plum);color:var(--white);
  display:grid;grid-template-columns:minmax(0,57fr) minmax(0,43fr);
  min-height:100svh;
}
.home-type{display:flex;flex-direction:column;justify-content:center;gap:1.1rem;
  padding:calc(var(--head-h) + 2rem) var(--gut) 2.5rem}
.home-roles{letter-spacing:.24em;color:var(--chartreuse)}
.home-name{font-size:var(--t-5)}
.home-pos{max-width:46ch;color:rgba(255,249,244,.88);margin-top:.5rem}
.home-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:1.5rem}

/* Natural colour. No blend, no filter — she has to be recognisable here.
   The treated version lives on /acting/ and nowhere else. */
.home-shot{position:relative;overflow:hidden;background:var(--plum)}
.home-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
@media (max-width:900px){
  .home{grid-template-columns:1fr;min-height:0}
  .home-shot{order:1;width:100%;height:min(52svh,430px)}
  .home-type{order:2;padding-top:2.5rem}
}

/* ── inner page header ───────────────────────────────────── */
.page-head{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3vw,2.5rem)}
.page-head h1{font-size:var(--t-4);margin-top:.6rem}
.page-head .lede{margin-top:1.1rem}

.sec{padding-block:clamp(2.5rem,6vw,5rem)}
.on-paper{background:var(--paper);color:var(--ink)}
.on-paper-2{background:var(--paper-2);color:var(--ink)}
.on-dark{background:var(--ink);color:var(--white)}
.on-plum{background:var(--plum);color:var(--white)}

/* ── sankofic band ───────────────────────────────────────── */
.sanko-wrap{overflow:hidden;background:var(--paper)}
.sanko{background:var(--chartreuse);color:var(--ink);transform:rotate(-2.2deg);
  margin-inline:-4vw;margin-block:clamp(1rem,4vw,2.5rem);padding-block:clamp(1.1rem,2.6vw,2rem)}
.sanko-in{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 .12em;
  padding-inline:var(--gut);margin:0}
.sanko-a{font-family:var(--disp);font-weight:400;
  font-size:clamp(2.2rem,7.6vw,6.2rem);line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
.sanko-b{font-family:var(--serif);font-style:italic;font-weight:400;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
  font-size:clamp(2.2rem,7.8vw,6.4rem);line-height:.95;color:var(--coral-ink)}
.sanko-gloss{width:min(64ch,100% - 2.5rem);margin:clamp(1.1rem,2.6vw,1.75rem) auto 0;
  text-align:center;color:var(--muted)}
.sanko-gloss strong{color:var(--ink);font-weight:700}
@media (prefers-reduced-motion:reduce){.sanko{transform:none}}

/* ── two-up split (acting, contact) ──────────────────────── */
.duo{display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr)}
.duo.flip{grid-template-columns:minmax(0,57fr) minmax(0,43fr)}
.duo-shot{position:relative;overflow:hidden;isolation:isolate;background:var(--coral);min-height:min(80svh,760px)}
.duo-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  filter:grayscale(1) contrast(1.04);mix-blend-mode:multiply}
.duo-type{display:flex;flex-direction:column;justify-content:center;gap:1.4rem;
  padding:clamp(2.5rem,6vw,5rem) var(--gut)}
@media (max-width:900px){
  .duo,.duo.flip{grid-template-columns:1fr}
  .duo-shot{min-height:0;aspect-ratio:5/4}
}

/* ── typographic rows (credits, works) ───────────────────── */
.rows{display:flex;flex-direction:column;border-top:1px solid var(--rule);margin-top:1.5rem}
.row{display:grid;grid-template-columns:2.75rem minmax(0,1fr) auto;gap:.35rem 1.5rem;
  align-items:baseline;padding-block:clamp(.9rem,1.8vw,1.4rem);border-bottom:1px solid var(--rule)}
.row-n{font-size:var(--t--1);color:var(--muted);font-variant-numeric:tabular-nums}
.row-t{font-family:var(--disp);font-weight:400;
  font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.02;letter-spacing:-.018em}
.row-m{font-size:var(--t--1);font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);text-align:right}
.row-note{grid-column:2/-1;font-size:var(--t--1);color:var(--muted);max-width:56ch;line-height:1.55}
@media (max-width:760px){
  .row{grid-template-columns:2rem minmax(0,1fr);gap:.3rem 1rem}
  .row-m{grid-column:2;text-align:left}
  .row-note{grid-column:2}
}
.wip{display:inline-block;margin-left:.5rem;vertical-align:.18em;font-size:.625rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--chartreuse);padding:.15rem .4rem}

/* ── media gallery ───────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.6rem,1.2vw,1rem);margin-top:1.5rem;max-width:1100px}
/* Compact: six equal prints in one row on desktop (Luis, 2026-09-06 — the
   old 2x2 feature took too much room). */
.gal figure{margin:0;display:flex;flex-direction:column;gap:.5rem;min-width:0}
.gal-feature{grid-column:span 1;grid-row:span 1}
.gal-item{grid-column:span 1}
.gal figcaption{font-size:var(--t--1);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
/* The figure owns the ratio so the caption sits outside it. */
.gal-feature .slot{aspect-ratio:4/5}
.gal-item .slot{aspect-ratio:4/5}
@media (max-width:900px){
  .gal{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gal-feature{grid-column:span 1;grid-row:auto}
}
@media (max-width:560px){
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal-feature,.gal-item{grid-column:span 1}
  .gal-item .slot{aspect-ratio:4/5}
}

/* ── press ───────────────────────────────────────────────── */
.quote{font-family:var(--serif);font-weight:400;font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 144;
  font-size:clamp(1.9rem,5.4vw,4.4rem);line-height:1.08;letter-spacing:-.02em;margin:1rem 0 0;max-width:18ch}
.quote-by{margin-top:1.5rem;font-family:var(--serif);font-style:italic;font-size:var(--t-1);color:var(--coral-text)}
.press-list{display:flex;flex-direction:column;gap:0;margin:2rem 0 0;padding:0;list-style:none;
  border-top:1px solid var(--rule)}
.press-list li{border-bottom:1px solid var(--rule)}
.press-list a{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;align-items:baseline;justify-content:space-between;
  padding-block:1rem;text-decoration:none}
.press-list a:hover{color:var(--coral-text)}
.press-q{font-family:var(--disp);font-weight:400;
  font-size:var(--t-2);line-height:1.15;letter-spacing:-.015em}
.press-src{font-size:var(--t--1);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* ── contact ─────────────────────────────────────────────── */
.inq{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem 1.5rem;
  margin-top:.5rem;padding-top:1.25rem;border-top:1px solid var(--rule-inv)}
.inq div{display:flex;flex-direction:column;gap:.15rem}
.inq b{font-size:var(--t--1);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-lift)}
.inq span{font-size:var(--t--1);color:var(--muted-inv);line-height:1.45}

.form{display:flex;flex-direction:column;gap:.85rem;max-width:34rem;margin-top:1.5rem}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media (max-width:560px){.fieldrow{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{font-size:var(--t--1);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-inv)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:var(--t-0);color:var(--white);
  background:rgba(255,249,244,.07);border:1px solid var(--rule-inv);border-radius:0;padding:.65rem .75rem;width:100%;
}
.field select option{color:var(--ink);background:var(--white)}
.field textarea{resize:vertical;min-height:6rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--chartreuse)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{display:none;margin-top:.25rem;border-left:3px solid var(--chartreuse);
  padding:.8rem .95rem;background:rgba(220,233,81,.1);font-size:var(--t--1);line-height:1.55;max-width:34rem}
.form-msg.on{display:block}
.form-msg.bad{border-left-color:var(--coral-lift);background:rgba(255,138,114,.12)}

/* ── footer ──────────────────────────────────────────────── */
.site-foot{background:var(--ink);color:var(--white)}
.foot-in{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;justify-content:space-between;padding-block:1.75rem}
.site-foot .small{color:var(--muted-inv)}
.site-foot b{font-family:var(--disp);font-weight:400;font-size:1.1rem}
.site-foot a:hover{color:var(--chartreuse)}
.foot-ig{text-decoration:none;color:var(--muted-inv);display:inline-flex;align-items:baseline}

/* ── reveal ──────────────────────────────────────────────── */
.js .up{opacity:0;transform:translateY(12px)}
.js .up.lit{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media (prefers-reduced-motion:reduce){
  .js .up{opacity:1;transform:none}
  .js .up.lit{transition:none}
}

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE PORTFOLIO COMPONENTS
   Every media slot is a .slot; when the real file is missing it also
   carries .ph and renders an art-directed frame instead of a grey box.
   ══════════════════════════════════════════════════════════════════ */

/* ── media slots ─────────────────────────────────────────────────── */
/* Ratio is reserved before load, so nothing shifts when media arrives. */
.slot{position:relative;overflow:hidden;background:var(--paper-2);width:100%}
.slot img,.slot video{width:100%;height:100%;object-fit:cover;display:block}
/* YouTube embeds fill the ratio box. Dark ground so the player's own black
   letterbox never reads as a broken frame while it loads. */
.slot.yt{background:var(--ink)}
.slot.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ar-16x9{aspect-ratio:16/9}
.ar-3x2{aspect-ratio:3/2}
.ar-4x5{aspect-ratio:4/5}
.ar-9x16{aspect-ratio:9/16}
.ar-9x11{aspect-ratio:9/11}

/* Art-directed placeholder: hairline frame, diagonal tone, labelled with what
   belongs there. Reads as a deliberate holding frame, not an empty box. */
.ph{
  background:
    repeating-linear-gradient(-45deg,transparent 0 11px,rgba(25,9,17,.05) 11px 12px),
    var(--paper-2);
  border:1px solid var(--rule);
}
.ph-in{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.45rem;text-align:center;padding:1rem;
}
.ph-kind{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(.95rem,1.8vw,1.35rem);line-height:1.1;color:var(--ink);
}
.ph-ratio{
  font-size:.625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  background:var(--chartreuse);color:var(--ink);padding:.2rem .5rem;
}
.ph-play{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;text-decoration:none;
  font-size:var(--t--1);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.ph-play-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:50%;border:1.5px solid currentColor;
}
.ph-play-ic svg{width:1.1rem;height:1.1rem;fill:currentColor;margin-left:2px}
.ph-play:hover{color:var(--coral-text)}

/* Placeholders on dark grounds invert. */
.on-dark .ph,.booking .ph{
  background:
    repeating-linear-gradient(-45deg,transparent 0 11px,rgba(255,249,244,.06) 11px 12px),
    rgba(255,249,244,.05);
  border-color:var(--rule-inv);
}
.on-dark .ph-kind,.booking .ph-kind{color:var(--white)}
.on-dark .ph-play,.booking .ph-play{color:var(--white)}
.on-dark .ph-play:hover,.booking .ph-play:hover{color:var(--chartreuse)}

/* ── section headings ────────────────────────────────────────────── */
.sec-h{font-size:var(--t-3);margin-top:.5rem}
.sec-h .i{color:var(--coral-ink)}
.on-dark .sec-h .i,.on-plum .sec-h .i{color:var(--coral)}

/* ── hero scroll cue ─────────────────────────────────────────────── */
.scroll-cue{
  position:absolute;left:var(--gut);bottom:1.5rem;z-index:3;
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:var(--t--1);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,249,244,.78);
}
.scroll-cue .ic{animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue .ic{animation:none}}
.scroll-cue:hover{color:var(--chartreuse)}
@media (max-width:900px){.scroll-cue{display:none}}

/* ── featured reel ───────────────────────────────────────────────── */
.reel-frame{margin-top:clamp(1.25rem,3vw,2rem);max-width:1100px}
.reel-frame .slot{border-width:1.5px}

/* ── performance rail ────────────────────────────────────────────── */
/* Desktop: an asymmetric grid. Mobile: a real swipe rail, because stacking
   eight mixed-ratio items makes an unreadable amount of scroll. */
.rail-wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);margin-top:1.5rem}
.rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.6rem,1.4vw,1.1rem);align-items:start}
.rail-i{min-width:0}
.rail-i.w2{grid-column:span 2}
@media (max-width:900px){
  .rail-wrap{padding-inline:0;overflow:hidden}
  .rail{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-inline:var(--gut);gap:.75rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .rail::-webkit-scrollbar{display:none}
  .rail-i{flex:0 0 68vw;scroll-snap-align:start}
  .rail-i.w2{flex-basis:82vw}
}

/* ── selected work cards ─────────────────────────────────────────── */
.works{display:flex;flex-direction:column;gap:clamp(1.5rem,3.5vw,2.75rem);margin-top:1.75rem}
.work{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:center}
.work:nth-child(even){grid-template-columns:minmax(0,4fr) minmax(0,5fr)}
.work:nth-child(even) .work-media{order:2}
.work-media{min-width:0}
.work-body{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.work-t{font-size:var(--t-3)}
.work-role{font-size:var(--t--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-text)}
.work-d{max-width:46ch;color:var(--muted);line-height:1.6}
.work-body .alink{margin-top:.5rem;align-self:flex-start}
@media (max-width:820px){
  .work,.work:nth-child(even){grid-template-columns:1fr}
  .work:nth-child(even) .work-media{order:0}
}

/* ── press moment ────────────────────────────────────────────────── */
.press-mo{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.press-mo-t{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.press-mo .quote{max-width:none;margin-top:.5rem}
.press-mo-src{font-size:var(--t-0);color:rgba(255,249,244,.88)}
.press-mo-src strong{font-weight:700}
.press-mo-m{min-width:0}
@media (max-width:820px){.press-mo{grid-template-columns:1fr}}

/* ── short intro ─────────────────────────────────────────────────── */
.intro{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.intro-t{
  font-family:var(--serif);font-weight:400;font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 96;
  font-size:clamp(1.3rem,2.9vw,2.1rem);line-height:1.28;letter-spacing:-.012em;max-width:36ch;
}

/* ── booking panel (home) ────────────────────────────────────────── */
/* The form is ON the page. Headline and a supporting still on the left,
   the form on the right — a form laid over a photograph is unreadable, so
   the image sits beside it instead. Off-centre on purpose, 5:6. */
.booking{padding-block:clamp(3.5rem,8vw,6.5rem)}
.book-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.book-t{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.book-f{min-width:0}
.book-f .form{margin-top:0;max-width:none}
.booking-h{font-size:var(--t-4);max-width:14ch;margin-top:.3rem}
.booking-h .i{color:var(--coral)}
.book-media{max-width:22rem;margin-top:.75rem}
@media (max-width:900px){
  .book-in{grid-template-columns:1fr;gap:2rem}
  .book-media{display:none}   /* the form is the point on a phone; the still would push it below the fold */
}

/* ── prominent action pair (acting page) ─────────────────────────── */
.actions{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin-top:.5rem}
.cta-ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px var(--white)}
.cta-ghost:hover{background:var(--white);color:var(--ink);box-shadow:none}

/* A link whose URL Ahdis has not supplied. Visibly present, clearly not
   clickable, impossible to mistake for a working control. */
.is-pending{
  display:inline-flex;align-items:center;gap:.5rem;cursor:not-allowed;
  opacity:.8;border-bottom-style:dashed;
}
.cta.is-pending{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;color:var(--white)}
.on-paper .is-pending,.on-paper-2 .is-pending{color:var(--muted)}
.pending-tag{
  font-style:normal;font-size:.5625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--chartreuse);color:var(--ink);padding:.15rem .4rem;
}

/* ── press list meta ─────────────────────────────────────────────── */
.press-meta{display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline}
.press-prod{font-size:var(--t--1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}

/* Credit rows first appear on a dark ground on the homepage. --muted is a
   dark mauve built for paper and measures 2.69:1 on near-black, so the
   metadata needs the inverted muted here. */
.on-dark .rows,.on-plum .rows,.on-dark .row,.on-plum .row{border-color:var(--rule-inv)}
.on-dark .row-n,.on-dark .row-m,.on-dark .row-note,
.on-plum .row-n,.on-plum .row-m,.on-plum .row-note{color:var(--muted-inv)}
.on-dark .work-d,.on-plum .work-d{color:var(--muted-inv)}
.on-dark .work-role,.on-plum .work-role{color:var(--coral-lift)}
.on-dark .press-prod,.on-plum .press-prod{color:var(--white)}

/* ── media page sections + audio slots ──────────────────────────── */
/* One section per Dropbox folder. Audio is a strip, not a 16:9 box — a
   sound file has no picture to fill one, and two players stacked as video
   frames would read as broken video. */
.media-sec .sec-h{margin-bottom:.25rem}
.ar-3x1{aspect-ratio:3/1}
.audio-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1rem;margin-top:1.5rem;max-width:56rem}
.slot.audio{
  display:flex;flex-direction:column;gap:.55rem;aspect-ratio:auto;
  padding:1rem 1.1rem;background:rgba(255,249,244,.06);border:1px solid var(--rule-inv);
}
.slot.audio audio{width:100%;display:block}
.audio-k{font-size:var(--t--1);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-lift)}
/* Audio placeholder: short strip, no play-circle (that promises video). */
.slot.ph.ph-a{aspect-ratio:auto;min-height:6.5rem}
.slot.ph.ph-a .ph-in{gap:.35rem}
.slot.ph.ph-a .ph-play{margin-top:.25rem}

/* ── scene picker (media page) ───────────────────────────────────── */
/* One player; the stills beneath swap its source. The current still carries
   a chartreuse ring and a filled play mark, the rest sit at .72 until hovered.
   Stills are 16:9 boxes with the image cover-fitted, so a missing still still
   holds its space on the ink ground. */
#player{scroll-margin-top:calc(var(--head-h) + 1rem)}
.player-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .75rem;margin-top:1rem;max-width:1100px;color:var(--muted-inv)}
.player-now b{color:var(--white);font-weight:500;font-size:var(--t-0)}
.player-now b i,.pick-cap i{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:.02em;font-size:1.05em}
.picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.6rem,1.4vw,1rem);margin-top:1.25rem;max-width:1100px}
.pick{display:block;min-width:0;text-decoration:none;color:var(--muted-inv)}
.pick-th{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.pick-th img{display:block;width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .2s,transform .3s}
.pick-th .ic{position:absolute;right:.5rem;bottom:.5rem;width:1.7rem;height:1.7rem;padding:.3rem;box-sizing:border-box;background:rgba(25,9,17,.72);color:var(--white);border-radius:50%}
.pick:hover .pick-th img,.pick:focus-visible .pick-th img,.pick.is-current .pick-th img{opacity:1}
.pick:hover .pick-th img{transform:scale(1.03)}
.pick.is-current{color:var(--white)}
.pick.is-current .pick-th::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--chartreuse);pointer-events:none}
.pick.is-current .pick-th .ic{background:var(--chartreuse);color:var(--ink)}
.pick-cap{display:block;margin-top:.45rem;font-size:var(--t--1);font-weight:500;letter-spacing:.13em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.pick-th img{transition:none}.pick:hover .pick-th img{transform:none}}
@media (max-width:900px){.picker{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── YouTube facade ──────────────────────────────────────────────── */
/* Her still, our button, nothing of YouTube's until play is pressed. The
   gradient at the foot keeps the button readable on a bright frame. */
.slot.facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.play-big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink);background:linear-gradient(to top,rgba(25,9,17,.5),rgba(25,9,17,0) 55%)}
.play-big .ic{width:clamp(3rem,7vw,5rem);height:clamp(3rem,7vw,5rem);margin:0;background:var(--chartreuse);border-radius:50%;box-shadow:0 10px 30px rgba(25,9,17,.35);transition:transform .2s}
.rail-i .play-big .ic{width:clamp(2.5rem,5vw,3.5rem);height:clamp(2.5rem,5vw,3.5rem)}
.play-big:hover .ic,.play-big:focus-visible .ic{transform:scale(1.07)}
.play-big:focus-visible{outline:3px solid var(--chartreuse);outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.play-big .ic{transition:none}.play-big:hover .ic,.play-big:focus-visible .ic{transform:none}}

/* ── featured reels (home) ───────────────────────────────────────── */
/* One big player, two stills stacked beside it. The stills set the height;
   the big slot fills it absolutely, so the pair and the player always line
   up top and bottom. On phones the player goes full width with the two
   stills side by side beneath. */
.feat{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(.6rem,1.4vw,1rem);margin-top:clamp(1.25rem,3vw,2rem);max-width:1100px}
.feat-big{position:relative;min-width:0}
.feat-big .slot{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.feat-side{display:grid;grid-template-rows:auto auto;gap:inherit;min-width:0;align-content:start}
@media (max-width:760px){
  .feat{grid-template-columns:1fr}
  .feat-big .slot{position:relative;inset:auto;aspect-ratio:16/9;height:auto}
  .feat-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}
}

/* ── video library (home, on paper) ──────────────────────────────── */
/* Same stills as /media/, on a light ground: full-opacity stills, plum ring
   and plum play mark for the current one (chartreuse would vanish here). */
.lib{margin-top:1.5rem;max-width:none}
.lib .pick{color:var(--muted)}
.lib .pick.is-current{color:var(--ink)}
.lib .pick-th{background:var(--paper-2)}
.lib .pick-th img{opacity:1}
.lib .pick.is-current .pick-th::after{box-shadow:inset 0 0 0 2px var(--plum)}
.lib .pick.is-current .pick-th .ic{background:var(--plum);color:var(--white)}
.lib-ph{min-width:0}
.lib-note{margin-top:1rem;color:var(--muted)}

/* ── headshots: deck fan-out (home) ──────────────────────────────── */
/* Four prints start as one pile at the centre of the group — js/main.js
   sets --dx/--dy on each figure from layout — each rotated a few degrees
   with depth between them (translateZ under perspective). When the group is
   a third on screen (.lit via data-reveal) they slide apart, top print
   first, and land in the grid with a plum-tinted shadow. Gated on .js;
   reduced motion and no-JS see the plain grid. Even prints sit lower. */
.hs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.75rem,2vw,1.5rem);margin-top:clamp(1.25rem,3vw,2rem);align-items:start;position:relative;perspective:1400px}
.hs-i{margin:0;min-width:0;--dx:0px;--dy:0px;--r:0deg;--z:0px;--delay:0s}
.hs-i:nth-child(even){margin-top:clamp(1.5rem,5vw,4rem)}
.hs-i .slot{box-shadow:0 14px 34px -20px rgba(91,9,45,.35)}
.js .hs.up{opacity:1;transform:none;transition:none}
.js .hs-i:nth-child(1){--r:-8deg;--z:-90px;--delay:.3s;z-index:1}
.js .hs-i:nth-child(2){--r:5deg;--z:-60px;--delay:.2s;z-index:2}
.js .hs-i:nth-child(3){--r:-3deg;--z:-30px;--delay:.1s;z-index:3}
.js .hs-i:nth-child(4){--r:9deg;--z:-40px;--delay:.2s;z-index:4}
.js .hs-i:nth-child(5){--r:-5deg;--z:-20px;--delay:.1s;z-index:5}
.js .hs-i:nth-child(6){--r:6deg;--z:0px;--delay:0s;z-index:6}
.js .hs-i .slot{transform:translate3d(var(--dx),var(--dy),var(--z)) rotate(var(--r)) scale(1.02);box-shadow:0 40px 70px -24px rgba(91,9,45,.55);will-change:transform}
/* The transition only exists once the pile is measured (.ready, set by JS
   after a forced layout), so the pile appears instantly and only the
   fan-out animates — never a slide from grid to pile on load. */
.js .hs.ready .hs-i .slot{transition:transform 1.2s cubic-bezier(.2,.8,.2,1) var(--delay),box-shadow 1.2s ease var(--delay)}
.js .hs.lit .hs-i .slot{transform:none;box-shadow:0 14px 34px -20px rgba(91,9,45,.35)}
@media (prefers-reduced-motion:reduce){.js .hs-i .slot{transform:none;transition:none;box-shadow:0 14px 34px -20px rgba(91,9,45,.35)}}
@media (max-width:900px){
  .hs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs-i:nth-child(even){margin-top:clamp(1.5rem,6vw,3rem)}
}

/* ── launch: cards without media ─────────────────────────────────── */
/* HIDE_PENDING (tools/build-pages.js) omits a slot and its wrapper; the
   card or panel that expected it collapses to a single column. */
.work.no-media,.work.no-media:nth-child(even){grid-template-columns:1fr}
.work.no-media .work-d{max-width:60ch}
.press-mo.no-media{grid-template-columns:1fr}

/* ── self-hosted video ───────────────────────────────────────────── */
/* Same facade as YouTube; on click a native <video> fills the slot. The
   slot takes the clip's own ratio (1712/912 for the Storehouse clip, its
   picture with the recording's black frame cropped off), so the player has
   no bars of its own. contain, not cover: never crop a performance. */
.slot.vid{background:var(--ink)}
.slot.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.ar-1712x912{aspect-ratio:1712/912}

/* ── self-hosted clips: their own ratios ─────────────────────────── */
.ar-1776x1072{aspect-ratio:1776/1072}

/* footer: several handles, wrapping cleanly */
.foot-links{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;min-width:0}

/* ── "See more" on the home video library ────────────────────────── */
/* JS adds .collapsed and shows the button; tiles marked .is-more hide until
   it is pressed. No JS: everything shows, no button. */
.picker.collapsed .is-more{display:none}
[data-more] .ic{transition:transform .25s ease}
[data-more][aria-expanded="true"] .ic{transform:rotate(180deg)}
/* ghost button on the light grounds */
.on-paper .cta-ghost,.on-paper-2 .cta-ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.on-paper .cta-ghost:hover,.on-paper-2 .cta-ghost:hover{background:var(--ink);color:var(--white);box-shadow:none}
@media (prefers-reduced-motion:reduce){[data-more] .ic{transition:none}}