/* ============================================================
   Arthur L. Bernstein — Home (production)
   Cinematic frontend for the GeneratePress child theme.
   Single source of truth for homepage styling.
   Loaded only on is_front_page(). Fonts self-hosted (see home-fonts.css).
   Tiers: [data-tier="1"] full · [data-tier="2"] simplified · reduced/no-js static.
   ============================================================ */
:root{
  --stage:#0A0A0C; --stage-2:#111116; --bone:#F1EEE7; --bone-2:#E7E2D8;
  --white:#F5F3EE; --ink:#181510; --silver:#8E8C86; --silver-2:#5C5B57;
  --line:rgba(245,243,238,.13); --line-2:rgba(245,243,238,.06);
  --silver-3:#6F6E68; /* AA-safe dim for large text (≥3:1 on stage) */
  --walt:#CE9A3A; --walt-soft:#E4C889;
  --brawler:#BE342A;
  --swing:#C7382E; --swing-cold:#3559A6;
  --focus:#9BB6FF;
  --e-cine:cubic-bezier(.76,0,.24,1);
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-in:cubic-bezier(.6,.04,.98,.34);
  --gutter:clamp(20px,5vw,64px);
  --wrap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body.home{
  background:var(--stage);color:var(--white);
  font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:360;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.home ::selection{background:var(--walt);color:var(--stage)}
.u-mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase}
.u-serif{font-family:"Fraunces",Georgia,serif}
.u-arch{font-family:"Archivo",system-ui,sans-serif}
.u-wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:5px;border-radius:2px}
.skip-link{position:fixed;left:-999px;top:10px;z-index:300;background:var(--white);color:var(--stage);padding:10px 18px;border-radius:3px;font-weight:600}
.skip-link:focus{left:12px}

/* first-paint fade (JS removes .home--boot). No preloader. */
.home.home--boot .fx{opacity:0}
.home:not(.home--boot) .fx{opacity:1;transition:opacity .7s var(--e-out)}
.home.no-js .fx{opacity:1!important}   /* JS-off: never hide content */

/* ---------- minimal chrome ---------- */
.site-chrome{position:fixed;inset:0 0 auto 0;z-index:120;display:flex;justify-content:space-between;align-items:center;
  padding:20px var(--gutter);pointer-events:none;transition:transform .4s var(--e-cine),opacity .4s}
.site-chrome.is-hidden{transform:translateY(-100%);opacity:0}
.site-chrome__id{font-family:"Archivo";font-weight:700;letter-spacing:.01em;font-size:.86rem;pointer-events:auto;mix-blend-mode:difference;color:#fff}
.site-chrome nav{display:flex;gap:26px;pointer-events:auto}
.site-chrome nav a{font-family:"JetBrains Mono";font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;opacity:.85;transition:opacity .2s}
.site-chrome nav a:hover{opacity:1}
.site-chrome__menu{display:none;pointer-events:auto;background:none;border:0;color:#fff;mix-blend-mode:difference;font-family:"JetBrains Mono";font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
@media(max-width:820px){.site-chrome nav{display:none}.site-chrome__menu{display:block}}

/* scene index rail */
.rail{position:fixed;left:clamp(12px,2.4vw,28px);top:50%;transform:translateY(-50%);z-index:110;display:flex;flex-direction:column;gap:15px;pointer-events:auto}
.rail button{width:8px;height:8px;border-radius:50%;border:1px solid rgba(245,243,238,.45);background:transparent;cursor:pointer;padding:0;transition:transform .35s var(--e-cine),background .35s,border-color .35s}
.rail button[aria-current="true"]{background:var(--white);border-color:var(--white);transform:scale(1.4)}
.rail button:hover{border-color:var(--white)}
.rail.on-light button{border-color:rgba(24,21,16,.4)}
.rail.on-light button[aria-current="true"]{background:var(--ink);border-color:var(--ink)}
@media(max-width:820px){.rail{display:none}}

/* ============================================================
   ACT / SCENE MODEL
   .act = tall scroll container · .stage = sticky viewport
   JS sets --p (0..1) on the active stage only.
   ============================================================ */
.act{position:relative}
.stage{position:sticky;top:0;height:100svh;overflow:clip;display:grid;place-items:center}
.plane{position:absolute;inset:0}
.stage.is-live .plane[data-depth]{will-change:transform}   /* GPU only while live */
.layer-content{position:relative;width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(130% 100% at 50% 32%,transparent 52%,rgba(0,0,0,.62) 100%)}
.grain{position:absolute;inset:0;pointer-events:none;z-index:7;opacity:.045;mix-blend-mode:overlay;
  background-image:var(--grain);background-size:180px}
[data-tier="2"] .grain{display:none}

/* ============================================================
   1 · OPENING  (shares the act with Walt — continuous transform)
   ============================================================ */
.act--overture{height:150vh}
.overture__sky{background:radial-gradient(140% 100% at 50% 8%,#17171d 0%,#0a0a0c 62%);z-index:0}
.overture__frame{z-index:2;background-size:cover;background-position:center;background-image:var(--ov-img);
  filter:saturate(.72) contrast(1.04) brightness(.82);
  -webkit-mask-image:radial-gradient(115% 78% at 54% 46%,#000 38%,transparent 76%);
          mask-image:radial-gradient(115% 78% at 54% 46%,#000 38%,transparent 76%)}
.overture__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.5),rgba(10,10,12,.82))}
.overture__grade{z-index:3;background:linear-gradient(180deg,transparent 40%,rgba(10,10,12,.5))}

.overture__title{position:relative;z-index:5;text-align:left}
.overture__eyebrow{font-family:"JetBrains Mono";font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--silver);margin-bottom:26px}
.ttl{font-family:"Fraunces";font-weight:330;line-height:.9;letter-spacing:-.022em;font-size:clamp(3rem,10.5vw,10rem)}
.ttl .l1{display:block;font-size:.42em;font-weight:340;letter-spacing:.01em;color:var(--white);margin-left:.06em;margin-bottom:.06em}
.ttl .l2{display:block;position:relative}
/* imagery passes THROUGH the surname — film frame lives inside the letters */
.ttl .l2 .fill{background-image:var(--ov-img);background-size:120% auto;background-position:48% 30%;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:brightness(1.35) contrast(1.1) saturate(.7)}
.no-js .ttl .l2 .fill{color:var(--white);background:none;-webkit-text-fill-color:currentColor}
.overture__role{font-family:"JetBrains Mono";font-size:.66rem;letter-spacing:.36em;text-transform:uppercase;color:var(--silver);margin-top:30px}
.overture__cta{margin-top:38px;display:inline-flex}
.btn-ghost{display:inline-flex;align-items:center;gap:12px;font-family:"JetBrains Mono";font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--white);border:1px solid rgba(245,243,238,.38);padding:14px 26px;border-radius:2px;background:transparent;cursor:pointer;transition:background .3s var(--e-cine),color .3s,border-color .3s}
.btn-ghost:hover{background:var(--white);color:var(--stage);border-color:var(--white)}
.btn-ghost .a{transition:transform .3s var(--e-cine)}
.btn-ghost:hover .a{transform:translateY(3px)}
.scrollcue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:5;color:var(--silver);text-align:center}
.scrollcue .l{width:1px;height:40px;margin:10px auto 0;background:linear-gradient(var(--silver),transparent);transform-origin:top;animation:cue 2.4s var(--e-cine) infinite}
@keyframes cue{0%,100%{transform:scaleY(.15);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* 2 · WALT — its own slow, graceful act. Shares the overture's film image
   for a continuous handoff (overture frame expands out; Walt still enters). */
.act--walt{height:240vh}
.stage--walt .layer-content{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,66px);align-items:center}
.walt__bg{z-index:0;background:radial-gradient(120% 100% at 24% 22%,rgba(206,154,58,.2),transparent 52%),linear-gradient(180deg,#181207,#0b0906)}
.walt__lightcone{z-index:1;background:radial-gradient(46% 40% at 30% 46%,rgba(228,200,137,.26),transparent 72%);mix-blend-mode:screen}
.walt__still{position:relative;z-index:3;order:2;aspect-ratio:16/11;overflow:hidden;border-radius:2px;background-size:cover;background-position:48% 30%;
  background-image:var(--walt-img);box-shadow:0 50px 120px rgba(0,0,0,.6)}
.walt__still::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,14,6,.55),transparent 58%),linear-gradient(120deg,rgba(206,154,58,.14),transparent 55%)}
.walt__content{position:relative;z-index:4;order:1}
.walt__kicker{font-family:"JetBrains Mono";font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--walt);margin-bottom:20px}
.walt__title{font-family:"Fraunces";font-weight:300;font-size:clamp(2.4rem,6.4vw,5.6rem);line-height:.94;letter-spacing:-.02em;color:#efe1c6}
.walt__title em{font-style:italic}
.walt__log{font-family:"Fraunces";font-style:italic;font-weight:330;font-size:clamp(1.05rem,1.7vw,1.5rem);color:rgba(240,228,204,.86);margin-top:22px;max-width:24ch}
.film-meta{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 22px;font-family:"JetBrains Mono";font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--silver)}
.film-meta b{color:var(--white);font-weight:500}
.film-cta{margin-top:28px;display:inline-flex;align-items:center;gap:10px;font-family:"JetBrains Mono";font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:5px}
.play-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;backdrop-filter:blur(3px);z-index:5;transition:transform .3s var(--e-cine),background .3s}
.play-badge::after{content:"";margin-left:5px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.walt__still:hover .play-badge{background:rgba(255,255,255,.16);transform:translate(-50%,-50%) scale(1.07)}

/* ============================================================
   3 · THE BRAWLER  (short, physical, hard cut)
   ============================================================ */
.act--brawler{height:170vh}
.brawler__bg{z-index:0;background:linear-gradient(180deg,#150e0d,#090605)}
.brawler__crop{position:absolute;z-index:2;top:0;right:0;height:100%;width:46vw;overflow:hidden}
.brawler__crop i{position:absolute;inset:-8% -6%;background-image:var(--brawler-img);background-size:cover;background-position:28% 42%;
  filter:grayscale(.28) contrast(1.18) brightness(.9);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);mask-image:linear-gradient(90deg,transparent,#000 34%)}
.brawler__cut{position:absolute;inset:0;z-index:8;background:#000;pointer-events:none}
.brawler__content{position:relative;z-index:5;max-width:62ch}
.brawler__kicker{font-family:"JetBrains Mono";font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brawler);margin-bottom:18px}
.brawler__title{font-family:"Archivo";font-weight:900;text-transform:uppercase;font-size:clamp(3.2rem,15vw,12rem);line-height:.82;letter-spacing:-.035em;color:#f3ebe7}
.brawler__title .x{color:var(--brawler)}
.brawler__log{margin-top:16px;font-size:clamp(1rem,1.5vw,1.24rem);color:rgba(243,235,231,.82);max-width:30ch}
.brawler__rule{position:absolute;left:0;bottom:9%;height:3px;width:100%;background:var(--brawler);z-index:4;transform-origin:left}
@media(max-width:820px){.brawler__crop{width:100%;opacity:.34}.brawler__content{max-width:none}}

/* ============================================================
   4 · SWING STATE  (lateral / split-axis, restrained editorial)
   ============================================================ */
.act--swing{height:200vh}
.swing__bg{z-index:0;background:#0b0b10}
.swing__panel{position:absolute;top:0;height:100%;width:52%;z-index:1;overflow:hidden}
.swing__panel--l{left:0;background:linear-gradient(120deg,#160a0b,#0b0b10 78%)}
.swing__panel--r{right:0;background:linear-gradient(240deg,#0a0f1c,#0b0b10 78%)}
.swing__seam{position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(180deg,transparent,rgba(199,56,46,.5) 30%,rgba(53,89,166,.5) 70%,transparent);z-index:2;transform-origin:top}
.swing__texture{position:absolute;inset:0;z-index:2;opacity:.5;mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.02) 2px,rgba(255,255,255,.02) 3px)}
.swing__content{position:relative;z-index:5;text-align:center}
.swing__kicker{font-family:"JetBrains Mono";font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--silver);margin-bottom:22px}
.swing__title{font-family:"Archivo";font-weight:800;text-transform:uppercase;font-size:clamp(2.8rem,12vw,9.5rem);line-height:.84;letter-spacing:-.03em}
.swing__title .a{color:var(--swing)}
.swing__title .b{color:var(--swing-cold)}
.swing__log{margin:24px auto 0;max-width:34ch;font-size:clamp(1rem,1.5vw,1.22rem);color:rgba(245,243,238,.78)}
.swing__meta{justify-content:center;margin-top:22px}
.swing__cta{margin-top:26px}

/* ============================================================
   5 · BIOGRAPHY  (dark → light editorial pause)
   ============================================================ */
.act--bio{position:relative;background:var(--bone);color:var(--ink);z-index:3}
.bio__reveal{position:absolute;inset:0 0 auto 0;height:34vh;background:linear-gradient(180deg,var(--stage),transparent);z-index:4;pointer-events:none}
.bio__wrap{position:relative;z-index:5;width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto;
  padding:clamp(90px,17vh,190px) 0;display:grid;gap:clamp(30px,5vw,80px);align-items:center}
.bio__wrap.has-portrait{grid-template-columns:.82fr 1.18fr}
.bio__wrap.no-portrait{grid-template-columns:1fr;max-width:900px}
.bio__portrait{position:relative;aspect-ratio:4/5;border-radius:2px;overflow:hidden;background:var(--bone-2);
  background-image:var(--bio-img);background-size:cover;background-position:center top;box-shadow:0 34px 80px rgba(40,30,12,.22)}
.bio__portrait figcaption{position:absolute;left:14px;bottom:12px;font-family:"JetBrains Mono";font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.bio__kicker{font-family:"JetBrains Mono";font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:#8a5a1a}
.bio__lede{font-family:"Fraunces";font-weight:320;font-size:clamp(1.9rem,4.2vw,3.6rem);letter-spacing:-.022em;line-height:1.02;margin:22px 0 30px;color:#161310;max-width:20ch}
.no-portrait .bio__lede{max-width:16ch}
.bio__lede em{font-style:italic;color:#8a5a1a}
.bio__body{max-width:52ch;color:#3b362d;font-size:1.06rem}
.bio__body p+p{margin-top:16px}
.bio__link{margin-top:26px;display:inline-flex;align-items:center;gap:10px;font-family:"JetBrains Mono";font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:#8a5a1a;border-bottom:1px solid currentColor;padding-bottom:5px}
@media(max-width:760px){.bio__wrap.has-portrait{grid-template-columns:1fr}}

/* ============================================================
   6 · FILMOGRAPHY
   ============================================================ */
.act--films{position:relative;background:var(--stage);z-index:3;padding:clamp(84px,14vh,180px) 0}
.films__head{width:min(var(--wrap),100% - var(--gutter)*2);margin:0 auto clamp(28px,5vh,58px);display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.films__head h2{font-family:"Archivo";font-weight:600;font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:-.01em}
.films__head .u-mono{color:var(--silver)}
.films__grid{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,4vw,64px);align-items:center}
.films__list{list-style:none}
.film-row{display:block;position:relative;padding:clamp(15px,2.3vh,28px) 0;border-top:1px solid var(--line)}
.films__list li:last-child .film-row{border-bottom:1px solid var(--line)}
.film-row__in{display:flex;align-items:baseline;gap:22px}
.film-row__yr{font-family:"JetBrains Mono";font-size:.72rem;color:var(--silver);flex:0 0 66px;transition:color .45s var(--e-cine)}
.film-row__ti{font-family:"Fraunces";font-weight:320;font-size:clamp(1.5rem,3.1vw,2.5rem);letter-spacing:-.012em;color:var(--silver-3);
  transform-origin:left;transition:color .5s var(--e-cine),transform .6s var(--e-out),opacity .5s}
.film-row__role{margin-left:auto;align-self:center;font-family:"JetBrains Mono";font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:transparent;white-space:nowrap;transition:color .45s var(--e-cine)}
.film-row__bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--accent,var(--walt));transition:width .6s var(--e-cine)}
.film-row[aria-current="true"] .film-row__ti{color:var(--white);transform:scale(1.055)}
.film-row[aria-current="true"] .film-row__yr{color:var(--white)}
.film-row[aria-current="true"] .film-row__role{color:var(--silver)}
.film-row[aria-current="true"] .film-row__bar{width:100%}
.film-row:hover .film-row__ti{color:rgba(245,243,238,.78)}
/* preview */
.films__preview{position:relative;aspect-ratio:4/5;border-radius:2px;overflow:hidden;background:var(--stage-2);border:1px solid var(--line)}
.pv-frame{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.07);
  transition:opacity .7s var(--e-cine),transform 1.3s var(--e-out)}
.pv-frame.is-show{opacity:1;transform:scale(1)}
.pv-frame .veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,12,.74),transparent 54%)}
.pv-cap{position:absolute;left:24px;right:24px;bottom:24px;z-index:3}
.pv-cap__t{font-family:"Fraunces";font-weight:330;font-size:1.55rem;letter-spacing:-.01em;opacity:0;transform:translateY(14px);transition:opacity .55s var(--e-out) .12s,transform .55s var(--e-out) .12s}
.pv-cap__m{font-family:"JetBrains Mono";font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);margin-top:9px;opacity:0;transform:translateY(14px);transition:opacity .55s var(--e-out) .22s,transform .55s var(--e-out) .22s}
.pv-cap.is-show .pv-cap__t,.pv-cap.is-show .pv-cap__m{opacity:1;transform:none}
/* mobile: large vertical visual entries */
.film-row__media{display:none}
@media(max-width:760px){
  .films__grid{grid-template-columns:1fr}
  .films__preview{display:none}
  .film-row__in{flex-wrap:wrap}
  .film-row__role{margin-left:0;flex-basis:100%;color:var(--silver);margin-top:4px}
  .film-row__ti{color:var(--white)}
  .film-row__media{display:block;aspect-ratio:16/10;margin-top:14px;border-radius:2px;background-size:cover;background-position:center;position:relative}
  .film-row__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,12,.5),transparent 60%)}
}

/* ============================================================
   7 · CLOSING
   ============================================================ */
.act--closing{background:var(--stage);text-align:center;padding:clamp(70px,13vh,150px) var(--gutter) clamp(80px,14vh,150px);position:relative;z-index:3}
.closing__kicker{font-family:"JetBrains Mono";font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--silver)}
.closing__h{font-family:"Fraunces";font-weight:320;font-size:clamp(1.8rem,4.4vw,3.2rem);letter-spacing:-.02em;margin:18px 0 26px;color:var(--white)}
.closing__actions{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ============================================================
   ENHANCED NAVIGATION (real URLs + View Transitions)
   FLIP image-expand fallback layer
   ============================================================ */
.vt-cover{position:fixed;z-index:400;border-radius:2px;overflow:hidden;background-size:cover;background-position:center;pointer-events:none;
  box-shadow:0 40px 120px rgba(0,0,0,.5)}
@media(prefers-reduced-motion:reduce){.vt-cover{display:none}}

/* ============================================================
   TIER 2 (touch / tablet / low-power) — fewer planes, simpler motion
   ============================================================ */
[data-tier="2"] .overture__grade,[data-tier="2"] .walt__lightcone,[data-tier="2"] .swing__texture{display:none}
[data-tier="2"] .ttl .l2 .fill{-webkit-text-fill-color:var(--white);color:var(--white);background:none}
[data-tier="2"] .plane[data-depth]{transform:none!important}

/* ============================================================
   TIER 3 — REDUCED MOTION + NO-JS  (static, all content present)
   ============================================================ */
.no-js .stage{position:relative;height:auto;min-height:100svh;padding:96px 0}
.no-js .brawler__cut,.no-js .bio__reveal,.no-js .scrollcue{display:none}
.no-js .stage--walt,.no-js .stage--overture{min-height:auto}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .brawler__cut,.bio__reveal,.overture__grade,.walt__lightcone{display:none!important}
  .ttl .l2 .fill{-webkit-text-fill-color:var(--white);color:var(--white);background:none}
  .plane[data-depth]{transform:none!important}
  .scrollcue .l{animation:none}
}

/* composition tweaks */
.overture__title{max-width:min(1100px,100%)}
.brawler__content{margin-left:2vw}
@media(max-width:860px){
  .stage--walt .layer-content{grid-template-columns:1fr}
  .walt__still{order:2;margin-top:22px}
  .walt__content{order:1}
}