/* FVY · v3.2 "Grade", 27 Oct 2026. Tokens on :root; modules (exploded edit, podcast) follow at the end. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:dark;
  --ground:#080808; --bar:#000000; --field:#121212; --field-2:#1b1b1b; --field-3:#262626;
  --ink:#f1f0ec; --ink-2:#a9a8a3; --ink-3:#8f8e88;
  --tally:#ff3b30;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --gut:max(16px, env(safe-area-inset-left,0px));
  --font:"Archivo","Helvetica Neue",Arial,sans-serif;
  --nav:64px; --strip:18px;
  --top:calc(var(--nav) + var(--strip));
}
@media (min-width:760px){ :root{ --gut:max(32px, env(safe-area-inset-left,0px)); --strip:22px; } }

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ground);scrollbar-color:var(--field-3) var(--ground);scrollbar-width:thin;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top) + 12px)}
body{background:var(--ground);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:clip;caret-color:var(--ink)}
::selection{background:var(--ink);color:var(--bar)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ground)}
::-webkit-scrollbar-thumb{background:var(--field-3);border:2px solid var(--ground)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
img,canvas{display:block}
[hidden]{display:none!important}   /* a hidden element stays hidden whatever display rule it carries (the price line in the booking strip) */
.num{font-variant-numeric:tabular-nums lining-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-80px;z-index:50;background:var(--ink);color:var(--bar);padding:12px 16px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
main{outline:none}
#top{position:absolute;top:0}

/* page structure shared with modules */
.wrap{max-width:1376px;padding-inline:var(--gut);margin-inline:auto}
/* every section opens the same way: one heading, one sentence under it, then the thing itself */
.sec__head{display:grid;gap:22px;justify-items:start}
.h2{font-weight:600;font-size:clamp(2rem,3.9vw,3.5rem);line-height:1;letter-spacing:-.035em;font-variation-settings:"wdth" 88;text-wrap:balance;max-width:22ch}
.sec__intro{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink);max-width:46ch}
.sec__intro .quiet,.quiet{color:var(--ink-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:0 22px;border:0;border-radius:0;background:var(--ink);color:var(--bar);font:600 16px/1 var(--font);font-variation-settings:"wdth" 100;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 140ms var(--ease-out),background-color 180ms ease;text-align:center}
.btn:active{transform:scale(.97)}
.btn--ghost{background:none;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.link{display:inline-flex;align-items:center;gap:.3em;min-height:48px;background:none;border:0;color:var(--ink);font:500 16px/1.2 var(--font);padding:0 2px;cursor:pointer;text-decoration:none;transition:transform 140ms var(--ease-out)}
.link [data-email-text]{text-decoration:underline;text-underline-offset:.3em;text-decoration-color:var(--ink-3);transition:text-decoration-color 180ms ease}
.link:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:#ffffff}
  .btn--ghost:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
  .link:hover [data-email-text]{text-decoration-color:var(--ink)}
}

/* nav: a plain bar, then the page drawn as a timeline under it */
.nav{position:fixed;z-index:30;top:0;left:0;right:0;padding-top:env(safe-area-inset-top,0px);background:var(--bar)}
.nav .wrap{height:var(--nav);display:flex;align-items:center;gap:28px}
.wordmark{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink)}
.wm{height:20px;width:auto;fill:currentColor;display:block}
.nav ul{display:flex;gap:4px;list-style:none;margin-left:auto}
.nav ul a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;text-decoration:none;color:var(--ink-2);font-size:15px;transition:color 180ms ease}
.nav ul a::after{content:"";position:absolute;left:10px;right:10px;bottom:9px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ease-out)}
.nav ul a[aria-current]{color:var(--ink)}
.nav ul a[aria-current]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){ .nav ul a:hover{color:var(--ink)} }
@media (min-width:760px) and (max-width:939px){ .nav .wrap{gap:18px} .nav ul{gap:0} .nav ul a{padding:0 7px;font-size:14px} .nav ul a::after{left:7px;right:7px} }
.nav .btn{min-height:44px;padding:0 16px;font-size:15px}
.menu{display:none;margin-left:auto;min-height:44px;padding:0 10px;background:none;border:0;color:var(--ink);font:500 15px/1 var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (max-width:759px){
  .menu{display:inline-flex;align-items:center}
  .nav ul{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--bar);padding:4px var(--gut) 16px;border-top:1px solid var(--field-2)}
  .nav.open ul{display:flex}
  .nav ul a{min-height:48px;font-size:17px;padding:0 4px;width:100%}
  .nav ul a::after{left:4px;right:auto;width:28px;bottom:6px}
  .nav .btn{margin-left:0}
}
/* the strip: one clip per section, widths follow section heights, red playhead = where you are */
.strip{position:relative;height:var(--strip);background:var(--ground);display:flex;gap:2px;padding:0 2px;border-top:1px solid var(--field-2);overflow:hidden}
.strip:empty{display:none}
.strip__c{position:relative;flex:var(--w,1) 1 0;min-width:0;height:100%;margin:0;padding:0 6px;border:0;border-radius:0;background:var(--field);color:var(--ink-3);font:500 12px/1 var(--font);letter-spacing:.01em;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:clip;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color 160ms ease,color 160ms ease}
.strip__c::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--field-3)}
.strip__c.is-on{background:var(--field-3);color:var(--ink)}
.strip__c.is-done{color:var(--ink-2)}
.strip__c:focus-visible{outline-offset:-2px}
@media (hover:hover) and (pointer:fine){ .strip__c:hover{background:var(--field-3);color:var(--ink)} }
.strip__ph{position:absolute;z-index:2;top:0;bottom:0;left:0;width:2px;background:var(--tally);pointer-events:none;transform:translateX(var(--x,0px));will-change:transform}
.strip__ph::before{content:"";position:absolute;left:-4px;top:0;width:10px;height:5px;background:var(--tally)}
@media (max-width:1199px),(pointer:coarse){ .strip__c{font-size:0;padding:0} }
@media (pointer:coarse){ .strip__c{pointer-events:none} }
/* phones: the sticky bar covers the bottom, so anchored jumps leave room for it */
@media (max-width:759px){ html{scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))} }

/* ============ HERO: the first screen sells; scrolling reframes the footage ============ */
.hero{position:relative;height:calc(100svh + 120vh);background:var(--bar)}
.stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;background:var(--bar)}
.frame{position:absolute;inset:0;clip-path:inset(86px 0 50% 0);will-change:clip-path;background:var(--field)}
.frame canvas{position:absolute;inset:0;width:100%;height:100%}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.12;background-image:var(--grain);background-size:200px 200px;animation:grain .8s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
@media (pointer:coarse){ .grain{animation:none} .pod .pod-grain{animation:none} }
.hero.is-away .grain,.tile:not(.lit) .grain,.pod:not(.is-run) .pod-grain{animation-play-state:paused}

.readout{position:absolute;left:0;top:0;z-index:3;display:flex;gap:16px;font-size:13px;line-height:1;color:rgba(241,240,236,.86);padding:14px 16px;white-space:nowrap;pointer-events:none;will-change:transform}
.swap{display:inline-grid}
.swap>span{grid-area:1/1;transition:opacity 220ms ease}
.swap>span+span{opacity:0}
.swap.on>span:first-child{opacity:0}
.swap.on>span+span{opacity:1}

.scopes{position:absolute;left:0;top:0;z-index:3;display:flex;gap:8px;pointer-events:none;will-change:transform,opacity}
@media (max-width:759px),(max-height:500px){ .scopes{display:none} }
.scopes figure{background:var(--bar);padding:8px 8px 6px}
.scopes canvas{width:120px;height:120px}
.scopes .wf{width:160px}
.scopes figcaption{font-size:12px;line-height:1;color:var(--ink-3);padding-top:6px;display:flex;justify-content:space-between;gap:12px}
.scopes.sm{gap:4px}
.scopes.sm figure{padding:5px 5px 4px}
.scopes.sm canvas{width:64px;height:64px}
.scopes.sm .wf{width:84px}
.scopes.sm figcaption{display:none}

/* cursor as playhead (fine pointers only) */
.phd{position:absolute;z-index:3;top:0;left:0;width:1px;height:10px;background:var(--ink);pointer-events:none;opacity:0;transition:opacity 180ms ease;will-change:transform}
.phd span{position:absolute;left:8px;bottom:10px;font-size:12px;line-height:1;color:var(--ink);background:var(--bar);padding:5px 6px;white-space:nowrap}
.phd.on{opacity:1}

.burn{position:absolute;left:0;top:0;z-index:3;width:min(78vw,330px);display:flex;flex-wrap:wrap;justify-content:center;gap:5px 6px;pointer-events:none;will-change:transform}
.cap{display:inline-block;background:var(--bar);color:var(--ink);font-weight:800;font-size:clamp(19px,1.7vw,25px);line-height:1;padding:.3em .36em .36em;letter-spacing:-.01em;font-variation-settings:"wdth" 92;opacity:0;transform:translateY(6px);transition:opacity 160ms var(--ease-out),transform 220ms var(--ease-out),background-color 140ms ease,color 140ms ease}
.cap.on{opacity:1;transform:none}
.cap.now{background:var(--ink);color:var(--bar)}

.copy{position:absolute;z-index:4;left:0;right:0;bottom:20px;padding-inline:max(var(--gut), calc((100% - 1376px)/2 + var(--gut)));display:grid;gap:18px;align-items:end}
.copy h1{font-weight:600;font-size:clamp(2.3rem,6.4vw,6rem);line-height:.94;letter-spacing:-.04em;font-variation-settings:"wdth" 86;text-wrap:balance}
.copy .for{font-size:clamp(17px,1.2vw,18px);line-height:1.5;color:var(--ink);max-width:40ch}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:18px}
.door{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:start;align-content:start;min-height:60px;padding:10px 12px 10px 10px;background:var(--field);color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color 180ms ease,transform 140ms var(--ease-out)}
.door canvas{grid-row:1/3;width:40px;height:40px;background:var(--field-2)}
.door__t{font-weight:600;font-size:15px;line-height:1.2;letter-spacing:-.01em}
.door__s{font-size:13px;line-height:1.3;color:var(--ink-2);margin-top:2px;text-wrap:balance}
.door:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){ .door:hover{background:var(--field-2)} }
.copy .acts{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;margin-top:18px}
@media (min-width:760px){
  /* tablets: headline on top, the rest under it; two columns only once the headline has room for two lines */
  /* the fallback height mirrors the script's sum (screen minus top bar minus the wide frame), so nothing jumps when the script lands */
  .copy{grid-template-columns:1fr;bottom:0;height:var(--bb,calc(100svh - var(--top) - min((100vw - 64px)/2.39, 52svh)));align-items:center;align-content:center;padding-block:8px 14px;gap:22px 40px}
  .copy .right{width:100%;max-width:480px}
}
@media (min-width:760px) and (orientation:portrait){ .copy{height:var(--bb,calc(100svh - var(--top) - min((100vw - 64px)/1.6, 52svh)))} }
@media (min-width:1024px){
  .copy{grid-template-columns:minmax(0,1fr) minmax(0,440px)}
  .copy .right{justify-self:end;max-width:none}
}
@media (min-width:1200px){ .copy{grid-template-columns:minmax(0,1fr) minmax(0,480px)} }
@media (max-width:759px){
  .copy{top:var(--ct,auto);bottom:auto;gap:14px}
  .copy .for{font-size:16px}
  .door{min-height:54px;padding:8px 10px 8px 8px;grid-template-columns:32px minmax(0,1fr);column-gap:10px}
  .door canvas{width:32px;height:32px}
  .door__t{font-size:14px}
  .door__s{font-size:12px}
  .doors{margin-top:14px}
  .copy .acts{margin-top:14px;gap:6px 18px}
}
.copy.fade{opacity:var(--co,1);transform:translateY(calc((1 - var(--co,1)) * -14px))}
.copy.fade.off{pointer-events:none}

/* ============ WHAT WE MAKE: three rows on one shared minute ============ */
.make{padding-block:clamp(112px,13vw,208px) clamp(96px,11vw,176px);background:var(--ground)}
.kinds{list-style:none;margin-top:clamp(44px,5.5vw,80px);border-top:1px solid var(--field-3)}
.kind{position:relative;display:grid;gap:10px 48px;padding:28px 0 30px;border-bottom:1px solid var(--field-3)}
.kind h3{font-weight:600;font-size:clamp(22px,2vw,30px);letter-spacing:-.025em;line-height:1.1}
.kind > p{font-size:clamp(16px,1.2vw,17px);line-height:1.5;color:var(--ink-2);max-width:50ch}
.kind__len{font-size:15px;line-height:1.3;color:var(--ink-2);white-space:nowrap}
.kind__len b{font-weight:600;color:var(--ink)}
@media (min-width:760px){
  .kind{grid-template-columns:minmax(0,5fr) minmax(0,9fr) auto;align-items:start}
  .kind h3{grid-column:1}
  .kind > p{grid-column:2}
  .kind > .kind__len{grid-column:3;justify-self:end;padding-top:.35em}
  .kind__bar{grid-column:1/-1}
}
/* D4: the length range sits on a one-minute scale; a red playhead runs the clip's real length while the row is pointed at (or on screen, on touch) */
.kind__bar{position:relative;display:block;height:4px;margin-top:8px;background:var(--field-2);container-type:inline-size}
.kind__bar i{position:absolute;top:0;bottom:0;left:calc(var(--a,0) * 100%);width:calc((var(--b,1) - var(--a,0)) * 100%);background:var(--ink)}
.kind__bar em{position:absolute;top:-5px;bottom:-5px;left:0;width:2px;background:var(--tally);opacity:0;transition:opacity 160ms ease}
.kind.is-on .kind__bar em{opacity:1;animation:kind-run var(--len,30s) linear infinite}
@media (hover:hover) and (pointer:fine){ .kind:hover .kind__bar em{opacity:1;animation:kind-run var(--len,30s) linear infinite} }
@keyframes kind-run{from{transform:translateX(0)}to{transform:translateX(calc(var(--b,1) * 100cqw))}}
.kinds__ruler{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;line-height:1;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){ .kind__bar em{display:none} }

/* ============ CLIPS: the wall (stand-ins until real clips land) ============ */
.work{padding-block:clamp(112px,13vw,208px);background:var(--ground)}
.wall{list-style:none;margin-top:clamp(44px,5.5vw,80px);display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}   /* --cols = clips per row: 6 in one row on desktop, 3 on tablets, 2 on phones */
.tile{min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tile-pic{position:relative;aspect-ratio:9/16;background:var(--field);overflow:hidden}
.tile-pic canvas,.tile-pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-pic .grain{opacity:.1}
.tile-burn{position:absolute;left:8%;right:8%;bottom:16%;display:flex;flex-wrap:wrap;justify-content:center;gap:3px 4px;z-index:2;opacity:0;transition:opacity 180ms ease}
.tile.lit .tile-burn{opacity:1}
.tile-burn span{background:var(--bar);color:var(--ink);font-weight:800;font-size:clamp(11px,.95vw,15px);line-height:1;padding:.3em .36em .34em;font-variation-settings:"wdth" 92}
.tile-burn span.now{background:var(--ink);color:var(--bar)}
.tile-pic::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--ink);opacity:0;transition:opacity 160ms ease;pointer-events:none}
.tile.lit .tile-pic::after{opacity:1}
/* hover (mouse only): the clip lifts out of the row and grows to ~150%; wall.js sets --lk (scale) and --lx/--ly (nudge to stay on screen).
   Only transform and opacity animate, so the row never reflows. */
@media (hover:hover) and (pointer:fine){
  .tile{position:relative;z-index:1}
  .tile-pic{transform:translate3d(0,0,0) scale(1);transition:transform 420ms cubic-bezier(.22,1,.36,1),box-shadow 420ms cubic-bezier(.22,1,.36,1),opacity 260ms ease;will-change:transform}
  .tile.big{z-index:5}
  .tile.big .tile-pic{transform:translate3d(var(--lx,0),var(--ly,0),0) scale(var(--lk,1.5));box-shadow:0 30px 80px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06);transition-duration:520ms}
  .tile.big .tile-pic::after{opacity:0}
  .wall.has-big .tile:not(.big) .tile-pic{opacity:.45}
}
.tile-pic:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (max-width:1023px){ .wall{--cols:3} }
@media (max-width:759px){ .wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px} }

/* ============ BOOKING STRIP ============ */
.bstrip{background:var(--field);padding-block:32px}
.bstrip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px}
.bstrip p{font-size:clamp(17px,1.4vw,20px);line-height:1.45;max-width:46ch}
.bstrip p .quiet{display:block;font-size:15px;margin-top:4px}
.bstrip__acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}

/* ============ PROCESS: the week as four messages; the last one carries the final folder ============ */
.process{padding-block:clamp(112px,13vw,208px);background:var(--ground)}
.week{margin-top:clamp(44px,5.5vw,80px);max-width:680px}
.msgs{list-style:none;display:grid;gap:12px}
.msg{position:relative;display:grid;gap:8px;padding:18px 20px 20px;background:var(--field)}
.msg__day{font-size:13px;line-height:1;color:var(--ink-3)}
.msg p{font-size:clamp(16px,1.3vw,19px);line-height:1.45;color:var(--ink);max-width:46ch}
.msg__att{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:8px 10px;background:var(--field-2);font-size:13px;color:var(--ink-2);width:max-content;max-width:100%}
.msg--end{background:var(--field-2)}
/* the final folder: the list of what is in it */
.folder{display:grid;gap:4px;margin-top:10px}
.folder__list{margin-top:8px}
.folder__list > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:6px 0}
.folder dt{font-weight:600;font-size:16px;line-height:1.45}
.folder dd{font-size:16px;line-height:1.45;color:var(--ink-2)}
@media (max-width:420px){ .folder__list > div{grid-template-columns:84px minmax(0,1fr);gap:10px} }

/* ============ FAQ ============ */
.faq{padding-block:clamp(112px,13vw,208px);background:var(--ground)}
.faq .wrap{display:grid;gap:36px}
@media (min-width:960px){ .faq .wrap{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start} }
.qa-list{display:grid;gap:8px}
.qa{background:var(--field)}
.qa h3{font:inherit}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 22px;background:none;border:0;color:var(--ink);text-align:left;cursor:pointer;font:600 clamp(18px,1.6vw,22px)/1.25 var(--font);letter-spacing:-.015em;-webkit-tap-highlight-color:transparent;transition:background-color 180ms ease}
.qa button:focus-visible{outline-offset:-2px}
.qa .pm{position:relative;flex:none;width:32px;height:32px;background:var(--field-3);transition:transform 140ms var(--ease-out)}
.qa button:active .pm{transform:scale(.94)}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:9px;right:9px;top:15px;height:2px;background:var(--ink);transition:transform 200ms var(--ease-out)}
.qa .pm::after{transform:rotate(90deg)}
.qa.open .pm{background:var(--ink)}
.qa.open .pm::before,.qa.open .pm::after{background:var(--bar)}
.qa.open .pm::after{transform:rotate(0deg)}
.qa .a{padding:0 22px 24px}
.qa .a p{font-size:17px;line-height:1.55;color:var(--ink);max-width:60ch;transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
@starting-style{ .qa .a p{opacity:0;transform:translateY(6px)} }
@media (hover:hover) and (pointer:fine){ .qa:not(.open) button:hover{background:var(--field-2)} }

/* ============ BOOK (house lights up): three fields, or the call ============ */
.book{background:var(--ink);color:var(--ground);padding-block:clamp(112px,13vw,208px)}
.book ::selection{background:var(--ground);color:var(--ink)}
.book .wrap{display:grid;gap:40px}
@media (min-width:960px){ .book .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:72px} }
.book .h2{color:var(--ground)}
.book__avail{font-size:15px;line-height:1.45;color:#5e5d59}
.book .lede{font-size:clamp(17px,1.4vw,20px);line-height:1.5;max-width:40ch;margin-top:22px;color:var(--ground)}
.book__alt{margin-top:28px;display:grid;gap:14px;justify-items:start}
.book .btn{background:var(--ground);color:var(--ink)}
.book .btn--ghost{background:none;color:var(--ground);box-shadow:inset 0 0 0 2px var(--ground)}
@media (hover:hover) and (pointer:fine){ .book .btn:hover{background:var(--bar)} .book .btn--ghost:hover{background:rgba(8,8,8,.08)} .book .copybtn:hover{text-decoration-color:var(--ground)} }
.book :focus-visible{outline-color:var(--ground)}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.mail .addr{font-weight:600;font-size:clamp(20px,2vw,26px);letter-spacing:-.01em;color:var(--ground);text-decoration:none}
.book__social{display:flex;flex-wrap:wrap;gap:0 24px;font-size:15px}
.book__social a{color:var(--ground);min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:.3em;text-decoration-color:#8f8e88}
@media (hover:hover) and (pointer:fine){ .book__social a:hover{text-decoration-color:var(--ground)} }
.copybtn{background:none;border:0;font:500 15px/1 var(--font);color:var(--ground);min-height:44px;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.3em;text-decoration-color:#8f8e88;transition:transform 140ms var(--ease-out)}
.copybtn:active{transform:scale(.97)}
.ask{display:grid;gap:14px;align-content:start}
.ask .f{display:grid;gap:6px}
.ask .f[hidden]{display:none}
.ask label{font-weight:600;font-size:15px;line-height:1.3}
.ask input{width:100%;min-height:52px;padding:0 14px;border:0;border-radius:0;background:#ffffff;color:var(--ground);font:400 17px/1.3 var(--font);box-shadow:inset 0 0 0 1px #c9c8c3;transition:box-shadow 160ms ease}
.ask input::placeholder{color:#6f6e69}
.ask input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ground)}
.ask input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #b3261e}
.ask .f__err{font-size:13px;line-height:1.3;color:#b3261e}
.ask .btn{margin-top:6px;justify-self:start;min-width:220px}
.ask .btn:disabled{opacity:.6;cursor:wait}
.ask__msg{font-size:15px;line-height:1.45;color:var(--ground);min-height:1.45em}
.ask__msg:empty{display:none}
.ask.is-sent .f,.ask.is-sent .btn{display:none}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* sticky booking bar on phones */
.stick{display:none}
@media (max-width:759px){
  .stick{display:block;position:fixed;z-index:25;left:0;right:0;bottom:0;padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom,0px));background:var(--bar);border-top:1px solid var(--field-2);transform:translateY(110%);transition:transform 180ms var(--ease-out),visibility 0s linear 180ms;visibility:hidden}
  .stick .btn{width:100%;min-height:44px}
  .stick.on{transform:none;visibility:visible;transition:transform 260ms var(--ease-out),visibility 0s}
  .nav .btn{transition:opacity 160ms ease,visibility 0s}
  .nav.stick-on .btn{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 120ms ease,visibility 0s linear 120ms}
  .menu{transition:transform 220ms var(--ease-out)}
  .nav.stick-on .menu{transform:translateX(var(--bw,0px))}   /* Menu takes the corner the button left */
  body.has-stick{padding-bottom:0}
}

/* footer */
.foot{background:var(--ground);padding-block:72px 32px;overflow:hidden}
.foot-row{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.foot-row .wm{height:26px}
.foot-row p{color:var(--ink-2);font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 28px;font-size:15px}
.foot-links a{color:var(--ink);text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
@media (hover:hover) and (pointer:fine){ .foot-links a:hover{text-decoration:underline} }
.big{display:block;width:100%;height:auto;margin-top:56px;fill:var(--field-3);user-select:none}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;font-size:14px;color:var(--ink-2)}
.legal a{color:var(--ink-2);display:inline-flex;min-height:44px;align-items:center}

/* lite mode (phones, slow connections): demos start as stills with a Play button */
.lite-play{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 16px;border:0;border-radius:0;background:var(--ink);color:var(--bar);font:600 15px/1 var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent}
.lite-play::before{content:"";width:0;height:0;border-left:10px solid var(--bar);border-top:6px solid transparent;border-bottom:6px solid transparent}
.lite-play:active{transform:translate(-50%,-50%) scale(.97)}

/* reduced motion: end states, still */
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .hero{height:auto}
  .stage{position:relative;height:100svh;min-height:640px}
  .cap,.qa .a p,.nav ul a::after,.stick,.stick.on,.nav .btn,.menu{transition:none!important}
  .tile.lit .tile-pic::after{opacity:0}   /* stills: no "playing" frame on every tile */
}
/* stacked hero: no pin, frame on top, copy in normal flow underneath (reduced motion, lite phones, short screens) */
.hero.stacked{height:auto}
.hero.stacked .stage{position:relative;height:auto;min-height:0;padding-bottom:40px}
.hero.stacked .copy{position:relative;top:auto;bottom:auto;height:auto;padding-top:var(--fbr,560px);grid-template-columns:1fr;opacity:1;transform:none;pointer-events:auto}
.hero.stacked .copy .right{justify-self:start}
@media (min-width:760px){ .hero.short .copy{grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:start;column-gap:32px} }
.hero.short .copy h1{font-size:clamp(2rem,4.6vw,3rem)}
.hero.short .copy .doors{margin-top:12px}
.hero.short .copy .acts{margin-top:10px}
.hero.stacked .frame{will-change:auto}
@media (max-width:759px){ .hero.stacked .scopes{display:none} }

/* ============ MOTION GRAPHICS: examples first, then the feel ============ */
.mg{padding-block:clamp(112px,13vw,208px) clamp(96px,11vw,176px);background:var(--ground)}
.mg-tiles{list-style:none;margin-top:clamp(44px,5.5vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,36px)}
.mg-tile{min-width:0}
.mg-pic{position:relative;aspect-ratio:16/10;background:var(--field);overflow:hidden}
.mg-pic canvas{position:absolute;inset:0;width:100%;height:100%}
.mg-tile h3{font-weight:600;font-size:20px;letter-spacing:-.015em;line-height:1.2;margin-top:20px}
.mg-tile p{font-size:15px;line-height:1.45;color:var(--ink-2);margin-top:6px;max-width:34ch}
.mg-tile .len{color:var(--ink);margin-top:12px}
.mg-tile .len b{font-weight:600;font-size:17px;margin-right:.35em}
/* the rig: the stage with four presets under it; the curve editor is folded away until "Drag the curve" */
.mg-rig{margin-top:clamp(48px,6vw,88px);display:grid;grid-template-columns:1fr;background:var(--bar)}
.mg-stage{position:relative;aspect-ratio:16/4;min-height:180px}
.mg-curve{position:relative;aspect-ratio:16/7;min-height:240px;background:var(--field);touch-action:none;cursor:grab;border-top:1px solid var(--field-2)}
.mg-curve[hidden]{display:none}
.mg-curve.drag{cursor:grabbing}
.mg-curve canvas,.mg-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.mg-ax{position:absolute;font-size:12px;line-height:1;color:var(--ink-3);pointer-events:none}
.mg-ax--x{right:14px;bottom:14px}
.mg-ax--y{left:14px;top:14px}
.mg-note{position:absolute;left:20px;right:20px;bottom:16px;font-size:13px;line-height:1.4;color:var(--ink-3)}
.mg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:12px 12px 12px 16px;background:var(--field-2)}
.mg-bar__t{font-weight:600;font-size:16px;line-height:1.2}
.mg-presets{display:flex;flex-wrap:wrap;gap:4px}
.mg-p{min-height:44px;padding:0 16px;border:0;background:var(--field-3);color:var(--ink-2);font:500 15px/1 var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 140ms var(--ease-out),background-color 180ms ease,color 180ms ease}
.mg-p:active{transform:scale(.97)}
.mg-p[aria-pressed="true"]{background:var(--ink);color:var(--bar)}
.mg-more{margin-left:auto;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink-2);font:500 15px/1 var(--font);text-decoration:underline;text-underline-offset:.3em;text-decoration-color:var(--ink-3);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mg-more[aria-expanded="true"]{color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .mg-p[aria-pressed="false"]:hover{color:var(--ink)} .mg-more:hover{color:var(--ink)} }
@media (max-width:759px){
  .mg-curve,.mg-more{display:none}
  .mg-stage{min-height:0;aspect-ratio:4/3}
  .mg-bar__t{width:100%}
  .mg-presets{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .mg-tiles{grid-template-columns:1fr;gap:36px}
}

/* module: exploded */
/* ===== exploded edit (.xp, #edit) ===== */
.xp{
  position:relative;background:var(--ground);color:var(--ink);overflow-x:clip;
  padding-block:clamp(112px,13vw,208px) clamp(48px,6vw,96px);
  --ph:min(52svh,340px);
  --pw:calc(var(--ph) * 9 / 16);
}
@media (min-width:760px){ .xp{ --ph:min(60svh,560px,62vw); } }
.xp[data-mode="scrub"]{padding-bottom:clamp(48px,6vw,96px)}

/* track + sticky stage */
.xp-track{position:relative}
.xp[data-mode="scrub"] .xp-track{height:205svh}
.xp-stage{position:relative}
.xp[data-mode="scrub"] .xp-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.xp-grid{display:grid;gap:20px;padding-top:clamp(20px,2.5vw,32px)}
.xp[data-mode="scrub"] .xp-grid{height:100%;padding-top:var(--xp-nav,86px);padding-bottom:16px}
@media (min-width:760px){
  .xp-grid{grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
}

/* layer list */
.xp-side{min-width:0;display:grid;gap:28px;align-content:center}
@media (min-width:760px){ .xp[data-mode="scrub"] .xp-side{align-self:start;padding-top:8px} }
.xp-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.xp-btn{
  display:grid;justify-items:start;gap:6px;width:100%;margin:0;border:0;border-radius:0;
  background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  padding:9px 0;transform-origin:left center;-webkit-tap-highlight-color:transparent;
  transition:transform 140ms var(--ease-out);
}
.xp-btn:active{transform:scale(.97)}
.xp-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.xp-btn__name{
  font-weight:600;font-size:clamp(17px,1.35vw,20px);line-height:1.15;letter-spacing:-.01em;
  padding:.16em .34em .2em;margin-left:-.34em;color:var(--ink);
  transition:background-color 160ms ease,color 160ms ease;
}
.xp-btn__line{font-size:15px;line-height:1.45;color:var(--ink-2);max-width:34ch}
.xp-btn--fin{margin-top:10px}
.xp-btn.is-on .xp-btn__name{background:var(--ink);color:var(--bar)}
.xp.has-sel .xp-btn:not(.is-on) .xp-btn__name{color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){
  .xp-btn:hover .xp-btn__name{background:var(--field-3)}
  .xp-btn.is-on:hover .xp-btn__name{background:var(--ink)}
}

/* sentences: one at a time in the readout while moving, all of them when static */
.xp:not([data-mode="static"]) .xp-btn__line{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.xp[data-mode="static"] .xp-read{display:none}
.xp-read{margin:0;min-height:3.2em;font-size:clamp(18px,1.6vw,22px);line-height:1.38;letter-spacing:-.005em;color:var(--ink);max-width:24ch}
.xp-read__t{display:block;transition:opacity 180ms ease,transform 220ms var(--ease-out)}
.xp-read.is-swap .xp-read__t{opacity:0;transform:translateY(6px);transition:none}

/* scene */
.xp-view{min-width:0;position:relative;display:grid}
.xp-scene{
  position:relative;height:calc(var(--ph) * 1.34);min-height:0;
  display:grid;place-items:center;perspective:1700px;perspective-origin:50% 50%;
  touch-action:pan-y;
}
.xp[data-mode="scrub"] .xp-view{height:100%;grid-template-rows:minmax(0,1fr) auto auto}
.xp[data-mode="scrub"] .xp-scene{height:auto}
.xp[data-mode="step"] .xp-scene{cursor:pointer}
.xp-cam{
  position:relative;width:var(--pw);height:var(--ph);transform-style:preserve-3d;
  transform:rotateX(-11deg) rotateY(50deg) scale3d(.82,.82,.82);
}
.xp-plane{
  position:absolute;inset:0;container-type:inline-size;
  background:color-mix(in srgb,var(--ink) 6%,transparent);
  transform:translateZ(calc((var(--i) - 3) * var(--pw) * .42));
}
.xp-plane::after{
  content:"";position:absolute;inset:-4px;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--ink);opacity:var(--hl,0);
}
.xp-plane--raw{background:var(--field)}
.xp-plane--col{background:var(--field)}
.xp-clip{position:absolute;inset:0;overflow:hidden}
.xp-clip canvas,.xp-ins canvas,.xp-slice canvas{display:block;width:100%;height:100%}
.xp-cv{transform-origin:50% 42%}

.xp-tc{
  position:absolute;top:4cqw;right:4.5cqw;font-size:max(10px,4.2cqw);line-height:1;
  color:color-mix(in srgb,var(--ink) 82%,transparent);font-variant-numeric:tabular-nums lining-nums;
}

/* the cut: footage sliced into strips, pauses pulled out */
.xp-plane--cut{background:none}
.xp-slices{position:absolute;inset:0;display:grid;grid-template-rows:repeat(7,1fr);row-gap:3px}
.xp-slice{position:relative;min-height:0}
.xp-slice--gone canvas{opacity:.42}
.xp-pause{
  position:absolute;right:3cqw;top:50%;transform:translateY(-50%);
  background:var(--bar);color:var(--ink);font-size:max(10px,4.4cqw);font-weight:600;line-height:1;padding:.32em .4em .36em;
}
.xp-jc{position:absolute;left:-5cqw;top:calc(var(--y) / 7 * 100% - 2px);width:10cqw;height:4px;background:var(--ink)}

/* punch-ins */
.xp-plane--punch{background:none}
.xp-guides{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.xp-g path{fill:none;stroke:var(--ink);stroke-width:2px;vector-effect:non-scaling-stroke}
.xp-g--1 path{stroke:var(--ink-3)}
.xp-g--2 path{stroke:var(--ink-2)}
.xp-zoom{
  position:absolute;right:var(--x);bottom:var(--y);font-size:max(10px,4.4cqw);font-weight:600;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums lining-nums;
}

/* captions */
.xp-plane--caps{background:none}
.xp-app{position:absolute;right:4cqw;bottom:22%;display:grid;gap:5cqw}
.xp-app i{display:block;width:9cqw;height:9cqw;border-radius:50%;background:color-mix(in srgb,var(--ink) 20%,transparent)}
.xp-desc{position:absolute;left:6cqw;bottom:6%;display:grid;gap:2.4cqw;width:58%}
.xp-desc i{display:block;height:3cqw;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.xp-desc i+i{width:64%}
.xp-caps{
  position:absolute;left:7cqw;right:20cqw;top:57%;margin:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.6cqw 1.8cqw;
  font-weight:800;font-size:8.6cqw;line-height:1;letter-spacing:-.005em;font-variation-settings:"wdth" 92;
}
.xp-caps span{background:var(--bar);color:var(--ink);padding:.28em .34em .32em}
.xp-caps span.is-now{background:var(--ink);color:var(--bar)}

/* b-roll */
.xp-plane--broll{background:none}
.xp-ins{position:absolute;background:var(--field-2);overflow:hidden}
.xp-ins--a{left:7cqw;top:8%;width:52%;aspect-ratio:4/5}
.xp-ins--b{right:7cqw;top:40%;width:40%;aspect-ratio:1}

/* sound */
.xp-plane--sound{background:none}
.xp-wave{position:absolute;inset:0;width:100%;height:100%;display:block}
.xp-ph{position:absolute;left:0;top:30%;height:46%;width:2px;background:var(--ink);transform:translateX(var(--px,0px))}

/* in-scene name labels, projected next to each plane */
.xp-labels{position:absolute;inset:0;pointer-events:none;overflow:clip}
.xp-lab{
  position:absolute;left:0;top:0;white-space:nowrap;
  background:var(--bar);color:var(--ink);font-size:13px;font-weight:600;line-height:1;padding:6px 8px 7px;
  opacity:0;transition:background-color 160ms ease,color 160ms ease;
}
.xp-lab.is-on{background:var(--ink);color:var(--bar)}

.xp-hud{
  margin:0;display:flex;justify-content:center;gap:20px;padding-top:12px;
  font-size:13px;line-height:1.2;color:var(--ink-2);font-variant-numeric:tabular-nums lining-nums;
}
.xp-hud__s{color:var(--ink)}

/* static (reduced motion or no script): everything visible, exploded */
.xp[data-mode="static"] .xp-lab{opacity:1}
.xp[data-mode="scrub"] .xp-lab:not(.is-on){visibility:hidden}
.xp[data-mode="scrub"] .xp-hud{display:none}
.xp[data-mode="static"] .xp-plane{transition:opacity 200ms ease}
.xp[data-mode="static"] .xp-plane::after{transition:opacity 200ms ease}

/* phones: one tight block that fits a screen. The clip on top, one sideways row of layer chips right under it,
   the layer's line under the chips, and the caption picker only while Captions is on. Tap the clip for the next layer. */
@media (max-width:759px){
  .xp{--ph:min(42svh,300px)}
  .xp-view{order:-1}
  .xp-cam{transform:rotateX(56deg) rotateZ(-32deg) scale3d(.86,.86,.86)}
  .xp-plane{transform:translateZ(calc((var(--i) - 3) * var(--pw) * .3))}
  .xp-lab{font-size:12px;padding:5px 7px 6px}
  .xp-grid{gap:14px}
  .xp:not([data-mode="static"]) .xp-view{display:contents}
  .xp:not([data-mode="static"]) .xp-side{display:contents}
  .xp:not([data-mode="static"]) .xp-scene{order:1;height:calc(var(--ph) * 1.2)}
  .xp:not([data-mode="static"]) .xp-hud{display:none}
  .xp:not([data-mode="static"]) .xp-list{
    order:2;display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
    margin-inline:calc(var(--gut,20px) * -1);padding-inline:var(--gut,20px);scroll-padding-inline:var(--gut,20px);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut,20px),#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut,20px),#000 calc(100% - 28px),transparent);
  }
  .xp:not([data-mode="static"]) .xp-list::-webkit-scrollbar{display:none}
  .xp:not([data-mode="static"]) .xp-list li{flex:none;scroll-snap-align:start}
  .xp:not([data-mode="static"]) .xp-btn{background:var(--field-2);min-height:44px;padding:0 14px;align-content:center;white-space:nowrap;transform-origin:center;transition:transform 140ms var(--ease-out),background-color 160ms ease,color 160ms ease}
  .xp:not([data-mode="static"]) .xp-btn__name{font-size:15px;line-height:1;padding:0;margin:0;background:none;color:inherit}
  .xp:not([data-mode="static"]) .xp-btn--fin{margin-top:0}
  .xp:not([data-mode="static"]) .xp-btn.is-on{background:var(--ink);color:var(--bar)}
  .xp.has-sel:not([data-mode="static"]) .xp-btn:not(.is-on){color:var(--ink-2)}
  .xp:not([data-mode="static"]) .xp-read{order:3;font-size:18px;max-width:34ch;min-height:4.2em}
  .xp:not([data-mode="static"]) .xp-subs{order:4;margin-top:0;min-height:0}
  .xp[data-mode="step"] .xp-sub:not(.is-on){display:none}
  .xp[data-mode="step"] .xp-sub__t{display:none}
}

@media (prefers-reduced-motion:reduce){
  .xp-btn,.xp-read__t{transition:none}
}


/* sub-panels under the scene: the take strip (The cut) and the caption picker (Captions). Space is reserved so nothing jumps. */
.xp-subs{display:grid;margin-top:14px;min-height:150px}
.xp-sub{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity 200ms ease,visibility 0s linear 200ms;display:grid;gap:12px;align-content:start}
.xp-sub.is-on{opacity:1;visibility:visible;transition-delay:0s}
.xp-sub__t{font-size:15px;line-height:1.45;color:var(--ink);max-width:60ch}
.xp-sub__t b{font-weight:600}
.capstyles{display:flex;flex-wrap:wrap;gap:4px}
.cs{min-height:44px;padding:0 16px;border:0;border-radius:0;background:var(--field-2);color:var(--ink-2);font:500 15px/1 var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 140ms var(--ease-out),background-color 180ms ease,color 180ms ease}
.cs:active{transform:scale(.97)}
.cs[aria-pressed="true"]{background:var(--ink);color:var(--bar)}
@media (hover:hover) and (pointer:fine){ .cs[aria-pressed="false"]:hover{color:var(--ink);background:var(--field-3)} }
@media (max-width:899px){ .capstyles{display:grid;grid-template-columns:1fr 1fr} }
@media (max-width:759px){ .xp-subs{min-height:0} }
/* caption styles (C3) */
.xp-plane--caps[data-cs="big"] .xp-caps{right:7cqw;font-size:11cqw;gap:1cqw 2.4cqw;top:52%}
.xp-plane--caps[data-cs="big"] .xp-caps span{background:none;padding:0;color:var(--ink);-webkit-text-stroke:.6cqw var(--bar);paint-order:stroke fill;text-transform:uppercase}
.xp-plane--caps[data-cs="big"] .xp-caps span.is-now{color:#ffb27a;background:none}
.xp-plane--caps[data-cs="box"] .xp-caps{gap:0 1.6cqw;padding:3cqw 4cqw;background:var(--bar);right:14cqw;top:58%;justify-content:flex-start}
.xp-plane--caps[data-cs="box"] .xp-caps span{background:none;padding:0;color:var(--ink-2)}
.xp-plane--caps[data-cs="box"] .xp-caps span.is-now{background:none;color:var(--ink)}
.xp-plane--caps[data-cs="lower"] .xp-caps{top:auto;bottom:11%;left:6cqw;right:30cqw;justify-content:flex-start;font-size:6.4cqw;font-weight:600;gap:0 1.3cqw;padding:2.4cqw 3cqw;background:var(--bar);border-left:1.6cqw solid var(--ink)}
.xp-plane--caps[data-cs="lower"] .xp-caps span{background:none;padding:0;color:var(--ink)}
.xp-plane--caps[data-cs="lower"] .xp-caps span.is-now{background:none;color:#ffb27a}

/* module: podcast */
/* FVY v3 · podcast module (prefix pod-) */
.pod{position:relative;background:var(--ground);color:var(--ink);padding-block:clamp(112px,13vw,208px);outline:none}
.pod .pod-num{font-variant-numeric:tabular-nums lining-nums}
.pod .pod-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- the rig: program monitor plus three camera previews ---------- */
.pod .pod-rig{display:grid;grid-template-columns:min(58%, calc(64svh * 9 / 16)) minmax(0,1fr);gap:8px;margin-top:clamp(36px,5vw,64px)}
@media (min-width:900px){ .pod .pod-rig{grid-template-columns:minmax(0,1fr) clamp(220px,22vw,304px);gap:12px} }

.pod .pod-pgm{position:relative;aspect-ratio:9/16;background:var(--bar);overflow:hidden;isolation:isolate}
@media (min-width:900px){ .pod .pod-pgm{aspect-ratio:16/9} }
.pod .pod-pgm canvas,.pod .pod-cam canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pod .pod-pgm canvas{filter:contrast(1.06)}
.pod .pod-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.1;background-image:var(--pod-grain);background-size:200px 200px;animation:pod-grain .9s steps(6) infinite}
@keyframes pod-grain{0%{transform:translate(0,0)}17%{transform:translate(-3%,2%)}33%{transform:translate(2%,-4%)}50%{transform:translate(-4%,-1%)}67%{transform:translate(3%,3%)}83%{transform:translate(-1%,4%)}100%{transform:translate(0,0)}}

.pod .pod-chip{display:inline-block;background:var(--bar);color:var(--ink);font-size:13px;line-height:1;padding:6px 8px 7px;white-space:nowrap}
.pod .pod-osd{position:absolute;inset:0 0 auto 0;z-index:4;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:10px;pointer-events:none}
.pod .pod-osd__pgm{color:var(--ink-2)}
@media (max-width:899px){ .pod .pod-osd__pgm,.pod [data-pod-tc]{display:none} }

/* 9:16 safe area: the clip that gets posted */
.pod .pod-safe{position:absolute;z-index:3;inset:0;pointer-events:none}
.pod .pod-safe__lbl{display:none}
@media (min-width:900px){
  .pod .pod-safe{inset:0 auto 0 0;height:100%;aspect-ratio:9/16;opacity:0;visibility:hidden;transition:opacity 220ms ease,transform 520ms var(--ease-in-out),visibility 0s linear 220ms}
  .pod .pod-safe.is-snap{transition:opacity 220ms ease,visibility 0s linear 220ms}
  .pod .pod-safe::before,.pod .pod-safe::after{content:"";position:absolute;top:0;bottom:0;width:200vw;background:color-mix(in srgb,var(--bar) 66%,transparent)}
  .pod .pod-safe::before{right:100%}
  .pod .pod-safe::after{left:100%}
  .pod .pod-safe__lbl{display:inline-block;position:absolute;left:10px;bottom:10px;color:var(--ink-2)}
  .pod.is-vert .pod-safe{opacity:1;visibility:visible;transition-delay:0s}
}
.pod .pod-caps{position:absolute;left:7%;right:7%;bottom:17%;display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-end;gap:4px 5px;min-height:3em;opacity:0;transition:opacity 200ms ease}
.pod.is-caps .pod-caps{opacity:1}
.pod .pod-caps span{background:var(--bar);color:var(--ink);font-weight:800;font-size:clamp(15px,1.45vw,21px);line-height:1;padding:.3em .36em .34em;font-variation-settings:"wdth" 92;letter-spacing:-.005em}
.pod .pod-caps span.is-now{background:var(--ink);color:var(--bar)}

/* camera previews: buttons */
.pod .pod-cams{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;min-height:0}
@media (min-width:900px){ .pod .pod-cams{gap:12px} }
.pod .pod-cam{position:relative;display:block;width:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:var(--bar);color:var(--ink);font:inherit;text-align:left;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:transform 140ms var(--ease-out)}
.pod .pod-cam:active{transform:scale(.97)}
.pod .pod-cam:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.pod .pod-tally{position:absolute;z-index:2;top:8px;left:8px;width:22px;height:8px;background:var(--field-3)}
.pod .pod-cam[aria-pressed="true"] .pod-tally{background:var(--tally)}
.pod .pod-cam__lbl{position:absolute;z-index:2;left:0;bottom:0;display:flex;align-items:baseline;gap:6px;max-width:100%;padding:6px 8px 7px;background:var(--bar);font-size:14px;line-height:1;white-space:nowrap;transition:background-color 160ms ease,color 160ms ease}
.pod .pod-cam__n{font-weight:600}
.pod .pod-cam__r{color:var(--ink-2);transition:color 160ms ease}
.pod .pod-cam[aria-pressed="true"] .pod-cam__lbl{background:var(--ink);color:var(--bar)}
.pod .pod-cam[aria-pressed="true"] .pod-cam__r{color:var(--field-3)}
.pod .pod-key{position:absolute;z-index:2;top:6px;right:8px;display:none;font-size:13px;line-height:1;color:var(--ink-2);padding:3px 5px;background:var(--bar);font-variant-numeric:tabular-nums}
@media (max-width:420px){ .pod .pod-cam__r{display:none} }
@media (hover:hover) and (pointer:fine){
  .pod .pod-key{display:block}
  .pod .pod-cam:hover .pod-cam__lbl{background:var(--field-3)}
  .pod .pod-cam[aria-pressed="true"]:hover .pod-cam__lbl{background:var(--ink)}
}

/* ---------- switcher toggles ---------- */
.pod .pod-ctrl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
@media (min-width:900px){ .pod .pod-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px} }
.pod .pod-tg{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:48px;margin:0;padding:0 14px 0 16px;border:0;border-radius:0;background:var(--field-2);color:var(--ink);font-family:inherit;font-weight:500;font-size:16px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 140ms var(--ease-out),background-color 160ms ease,color 160ms ease}
.pod .pod-tg:active{transform:scale(.97)}
.pod .pod-tg:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pod .pod-tg__st{font-size:13px;font-weight:500;color:var(--ink-3);transition:color 160ms ease}
.pod .pod-tg[aria-pressed="true"]{background:var(--ink);color:var(--bar)}
.pod .pod-tg[aria-pressed="true"] .pod-tg__st{color:var(--field-3)}
.pod .pod-tg:disabled{cursor:not-allowed;color:var(--ink-3)}
.pod .pod-tg:disabled:active{transform:none}
.pod .pod-tg--desk{display:none}
@media (max-width:899px){ .pod .pod-tg[data-tg="cut"]{grid-column:1 / -1} }
@media (min-width:900px){ .pod .pod-tg--desk{display:inline-flex} }
@media (hover:hover) and (pointer:fine){
  .pod .pod-tg:not(:disabled):not([aria-pressed="true"]):hover{background:var(--field-3)}
}
.pod .pod-hint{grid-column:1 / -1;font-size:14px;line-height:1.45;color:var(--ink-3);margin-top:6px}
@media (min-width:900px){ .pod .pod-hint{margin:0 0 0 12px;max-width:34ch} }
.pod .pod-hint__rm{display:none}
.pod.is-rm .pod-hint__rm{display:inline}

/* ---------- waveform timeline ---------- */
.pod .pod-tl{margin-top:clamp(48px,6vw,80px)}
.pod .pod-tl__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px}
.pod .pod-tl__what{font-size:16px;line-height:1.45;color:var(--ink-2);max-width:40ch}
.pod .pod-len{display:flex;align-items:baseline;gap:12px}
.pod .pod-len__lbl{font-size:14px;color:var(--ink-3)}
.pod .pod-len__v{display:inline-block;min-width:3.6ch;text-align:right;font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.01em;font-variation-settings:"wdth" 100}
.pod .pod-tl__body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;margin-top:18px}
.pod .pod-lanes{display:grid;grid-template-rows:44px 44px;row-gap:8px;font-size:14px;color:var(--ink-2)}
.pod .pod-lanes span{display:flex;align-items:center}
.pod .pod-trackwrap{position:relative;min-width:0}
.pod .pod-track{position:relative;height:96px;background:var(--field);overflow:hidden}
.pod .pod-track > *{position:absolute;transform-origin:0 50%;transition:transform 640ms var(--ease-in-out),opacity 220ms ease 320ms}
.pod .pod-track.is-static > *{transition:none}
.pod .pod-sil{top:0;bottom:0;background:var(--ground)}
.pod.is-cut .pod-sil{transition:transform 640ms var(--ease-in-out),opacity 200ms ease 360ms}
.pod .pod-seg{height:44px;opacity:.42}
.pod .pod-seg--a{top:0}
.pod .pod-seg--b{top:52px}
.pod .pod-seg canvas{display:block;width:100%;height:100%}
.pod .pod-seg.is-now{opacity:1;transition:transform 640ms var(--ease-in-out),opacity 120ms ease}
.pod .pod-tail{top:0;bottom:0;left:100%;width:100%;background:var(--ground)}
.pod .pod-head{position:absolute;top:-8px;left:-1px;width:2px;height:112px;background:var(--ink);pointer-events:none;will-change:transform}
.pod .pod-ruler{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  .pod .pod-grain{animation:none}
  .pod .pod-track > *,.pod.is-cut .pod-sil,.pod .pod-seg.is-now{transition:none}
  .pod .pod-safe{transition:opacity 220ms ease}
}


/* ui-ux-pro-max: touch targets on coarse pointers */
@media (pointer:coarse){.btn,nav a,.addr,.wordmark,.link{min-height:44px;display:inline-flex;align-items:center}}
/* static layers (reduced motion, no script): both sub-panels in flow */
.xp[data-mode="static"] .xp-sub{grid-area:auto;opacity:1;visibility:visible}
.xp[data-mode="static"] .xp-subs{gap:24px}