/* Home v2 (draft). The case studies on the orbit, dressed as the Per My Last Prompt call:
   rounded tiles, dark name pills, steel outline on whoever has the floor, a dock of round controls.
   Steel says "current"; gold is the one action (Discuss a project). Tokens shared with /case-studies/. */
@font-face{font-family:"H Public Sans";src:url("/screen/assets/public-sans-vf.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"H Barlow";src:url("/screen/assets/barlow-semi-condensed-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"H Droid";src:url("/screen/assets/droid-sans-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"H Droid";src:url("/screen/assets/cousine-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  color-scheme:dark;
  --ground:#0e1a25; --call:#0b1219; --tile:#111b26; --well:#0a131b;
  --film:#f1f5f8; --plate:#dee4e9; --muted:#a6aeb5;
  --rule:rgba(241,245,248,.14); --hair:rgba(241,245,248,.24); --edge:rgba(241,245,248,.12);
  --pill:rgba(7,12,18,.78); --pill-edge:rgba(241,245,248,.1);
  --steel:#6fa3d6; --steel-glow:rgba(111,163,214,.28);
  --gold:#f59e0b; --gold-hi:#ffb02e; --on-gold:#0e1a25;
  --sans:"H Public Sans","Public Sans",Arial,sans-serif;
  --label:"H Barlow","Barlow Semi Condensed",Arial,sans-serif;
  --mark:"H Droid","Droid Sans Mono",monospace;
  --gutter:clamp(16px,4.5vw,64px);
  --r:14px; --r-sm:8px;
  --ease:cubic-bezier(.25,1,.5,1);
}
*{box-sizing:border-box}
html{background:var(--call);scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;min-height:100svh;background:var(--call);color:var(--plate);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;z-index:-1;inset:0;background:url("/screen/assets/obsidian-material.png") 43% 55% / max(300vw,400vh) auto no-repeat;opacity:.16;pointer-events:none}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--film);outline-offset:4px;border-radius:4px}
::selection{background:rgba(241,245,248,.22);color:var(--film)}
#main:focus{outline:none}
.wrap{width:min(1320px,calc(100% - var(--gutter)*2));margin-inline:auto}
.skip{position:fixed;top:12px;left:12px;z-index:50;padding:10px 16px;background:var(--film);color:var(--ground);border-radius:6px;clip-path:inset(50%)}
.skip:focus{clip-path:none}
.eyebrow{color:var(--muted);font:500 12px/1.4 var(--label);letter-spacing:.16em;text-transform:uppercase}

/* ── the bar: the call's top strip ── */
.bar{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--call) 82%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--rule)}
.bar-in{display:flex;align-items:center;gap:32px;min-height:68px}
.lockup{display:inline-flex;align-items:center;gap:9px;min-height:44px;flex-shrink:0}
.lockup img{display:block}
.wordmark{color:var(--film);font:400 19px/1 var(--mark);letter-spacing:.06em}
.wordmark b{font-weight:700}
.nav{display:flex;gap:28px;margin-left:auto;font-size:14px;font-weight:500}
.nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);transition:color .16s var(--ease)}
.nav a:hover{color:var(--film)}
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--gold);color:var(--on-gold);font-size:14px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;box-shadow:0 0 0 0 rgba(245,158,11,0);transition:background .2s var(--ease),box-shadow .3s var(--ease)}
.btn-gold:hover{background:var(--gold-hi);box-shadow:0 0 28px -4px rgba(245,158,11,.55)}
.btn-gold span{font-size:12px}
.btn-lg{min-height:52px;padding:0 26px;font-size:16px}

/* ── the work ── */
.work{padding-top:clamp(28px,3.6vw,56px)}
.work-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:20px clamp(28px,4vw,64px)}
.work-head h1{margin-top:16px;color:var(--film);font-size:clamp(36px,4.4vw,64px);font-weight:450;letter-spacing:-.048em;line-height:1.02;text-wrap:balance}
.lede{max-width:40ch;padding-bottom:8px;font-size:clamp(17px,1.35vw,20px);line-height:1.6;text-wrap:pretty}

/* the orbit stage: geometry is set from JS as --w (card width) */
.orbit{--w:clamp(300px,min(54vw,(100svh - 440px) * 1.5),780px);--h:calc(var(--w) * .5625);position:relative;height:calc(var(--h) + var(--w) * .15 + 16px);margin-top:clamp(12px,2vw,28px);perspective:calc(var(--w) * 1.7);perspective-origin:50% 30%;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.orbit-track{position:absolute;inset:0;transform-style:preserve-3d;cursor:grab;outline:none}
.orbit-track.is-drag{cursor:grabbing}
.orbit-track:focus-visible .tile.is-front{box-shadow:0 0 0 2px var(--steel),0 0 0 6px var(--film),0 30px 80px -30px rgba(0,0,0,.8)}
.tile{position:absolute;left:50%;bottom:16px;width:var(--w);height:var(--h);margin-left:calc(var(--w) / -2);border-radius:var(--r);background:var(--tile);box-shadow:0 0 0 1px var(--edge),0 30px 80px -30px rgba(0,0,0,.85);transform-origin:50% 100%;will-change:transform;backface-visibility:hidden;transition:box-shadow .35s var(--ease)}
.tile-screen{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.tile-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none;-webkit-user-drag:none}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--call);opacity:var(--veil,0);pointer-events:none}
.tile.is-front{box-shadow:0 0 0 2px var(--steel),0 0 40px -6px var(--steel-glow),0 30px 80px -30px rgba(0,0,0,.85)}

/* the name pill, as on a webcam tile */
.tag{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:6px 12px 6px 10px;border:1px solid var(--pill-edge);border-radius:8px;background:var(--pill);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--film);font-size:13px;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag svg{flex:0 0 14px;width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round}
.tag-n{color:var(--muted);font:400 12px/1 var(--mark);letter-spacing:.06em}
.tile.is-front .tag svg{stroke:var(--steel)}
.tile.is-front .tag-n{color:var(--steel)}

/* the dock: round call controls + who has the floor */
.dock{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.round{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--pill-edge);border-radius:50%;background:var(--tile);cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease)}
.round:hover{background:#18232f;border-color:var(--hair)}
.round svg{width:16px;height:16px;fill:none;stroke:var(--film);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.now{display:inline-flex;align-items:center;gap:10px;min-width:132px;height:48px;justify-content:center;padding:0 20px;border:1px solid var(--pill-edge);border-radius:999px;background:var(--tile);color:var(--muted);font:400 13px/1 var(--mark);letter-spacing:.06em}
.now-n{color:var(--film)}
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.bars i{display:block;width:2px;height:100%;border-radius:1px;background:var(--steel);transform-origin:bottom;animation:bar 1.1s var(--ease) infinite alternate}
.bars i:nth-child(2){animation-delay:-.35s}
.bars i:nth-child(3){animation-delay:-.7s}
@keyframes bar{0%{transform:scaleY(.3)}100%{transform:scaleY(1)}}
.orbit.is-moving~.wrap .bars i{animation-play-state:paused}

/* the caption under the floor */
.caption{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px clamp(28px,4vw,64px);margin-top:clamp(32px,4vw,52px);padding-block:28px clamp(56px,7vw,96px);border-top:1px solid var(--rule);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.caption.is-swap{opacity:0;transform:translateY(4px)}
.cap-name{color:var(--film);font-size:clamp(28px,2.8vw,40px);font-weight:450;letter-spacing:-.035em;line-height:1.12;text-wrap:balance}
.cap-sum{max-width:58ch;font-size:17px;line-height:1.7;text-wrap:pretty}
.cap-meta{margin-top:12px;color:var(--muted);font-size:13px}
.cap-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:20px}
.cap-cta,.cap-all{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:500}
.cap-cta{color:var(--film);text-decoration:underline;text-decoration-color:var(--steel);text-decoration-thickness:1px;text-underline-offset:.3em}
.cap-cta:hover{text-decoration-thickness:2px}
.cap-all{color:var(--muted)}
.cap-all:hover{color:var(--film)}
.cap-cta span,.cap-all span{font-size:12px}

/* ── the film ── */
.film{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(32px,5vw,96px);padding-block:clamp(64px,8vw,120px);border-top:1px solid var(--rule)}
.film-copy h2,.sec-head h2,.door-copy h2{margin-top:16px;color:var(--film);font-size:clamp(32px,3.6vw,52px);font-weight:450;letter-spacing:-.045em;line-height:1.08;text-wrap:balance}
.film-sum{max-width:42ch;margin-top:20px;font-size:17px;line-height:1.7;text-wrap:pretty}
.film-meta{display:flex;align-items:center;gap:10px;margin-top:20px;color:var(--muted);font:400 13px/1.4 var(--mark);letter-spacing:.04em}
.dot{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(245,158,11,.7)}
.film-tile{position:relative;justify-self:end;width:min(100%,520px);aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--tile);box-shadow:0 0 0 1px var(--edge),0 40px 100px -40px rgba(0,0,0,.9)}
.film-tile video{display:block;width:100%;height:100%;object-fit:cover;background:var(--well)}
.film-play{position:absolute;inset:0;margin:auto;display:grid;place-items:center;width:76px;height:76px;padding:0;border:1px solid var(--pill-edge);border-radius:50%;background:var(--pill);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:transform .25s var(--ease),background .2s var(--ease)}
.film-play:hover{transform:scale(1.06);background:rgba(7,12,18,.9)}
.film-play svg{width:22px;height:22px;margin-left:3px;fill:var(--film)}
.tag-film{gap:9px}
.film-tile.is-playing .film-play,.film-tile.is-playing .tag-film{opacity:0;pointer-events:none}

/* ── services ── */
.services{padding-block:clamp(64px,8vw,120px);border-top:1px solid var(--rule)}
.sec-head{max-width:44ch}
.sec-sum{margin-top:16px;color:var(--plate);font-size:17px;line-height:1.65}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(32px,4vw,56px)}
.steps li{display:flex;flex-direction:column;gap:10px;min-height:200px;padding:24px;border-radius:var(--r);background:var(--tile);box-shadow:0 0 0 1px var(--edge)}
.step-n{color:var(--muted);font:400 13px/1 var(--mark);letter-spacing:.08em}
.steps h3{margin-top:auto;color:var(--film);font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.3}
.steps p{font-size:15px;line-height:1.65;text-wrap:pretty}

/* ── the door ── */
.door{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);padding-block:clamp(64px,8vw,120px);border-top:1px solid var(--rule)}
.door-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field span{color:var(--muted);font:500 12px/1.4 var(--label);letter-spacing:.14em;text-transform:uppercase}
.field input,.field textarea{width:100%;padding:14px 16px;border:1px solid var(--pill-edge);border-radius:10px;background:var(--tile);color:var(--film);font:400 16px/1.5 var(--sans);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.field textarea{resize:vertical;min-height:132px}
.field input:hover,.field textarea:hover{border-color:var(--hair)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px var(--steel-glow)}
.field-wide{grid-column:1/-1}
.door-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:4px}
.door-alt{color:var(--muted);font-size:14px;text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:.3em}
.door-alt:hover{color:var(--film)}

.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-block:28px 40px;border-top:1px solid var(--rule);color:var(--muted);font-size:13px}
.foot a{display:inline-flex;gap:10px;align-items:center;min-height:44px}
.foot a:hover{color:var(--film)}

/* no-JS: the tiles become a scroll-snap strip */
.orbit:not(.is-live){height:auto;perspective:none;overflow-x:auto;scroll-snap-type:x mandatory}
.orbit:not(.is-live) .orbit-track{position:static;display:flex;gap:16px;padding:0 var(--gutter) 24px;cursor:auto}
.orbit:not(.is-live) .tile{position:relative;left:auto;bottom:auto;flex:0 0 var(--w);margin:0;scroll-snap-align:center}

@media (max-width:900px){
  .work-head,.caption,.film,.door{grid-template-columns:minmax(0,1fr)}
  .film-tile{justify-self:start}
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li{min-height:0}
  .steps h3{margin-top:8px}
}
@media (max-width:640px){
  .bar-in{gap:12px;min-height:60px}
  .nav{display:none}
  .lockup{margin-right:auto}
  .wordmark{font-size:16px}
  .lockup img{width:26px;height:26px}
  .btn-gold{min-height:38px;padding:0 14px;font-size:13px}
  .orbit{--w:82vw}
  .tag{font-size:12px;padding:5px 10px 5px 8px;left:8px;bottom:8px}
  .door-form{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* the door's answer (2026-10-02) + the honeypot field robots fill */
.door-note{grid-column:1/-1;max-width:52ch;margin:0;color:var(--film);font-size:17px;line-height:1.6}
.door-note[data-kind=err]{color:var(--plate)}
.door-note a{text-decoration:underline;text-decoration-color:var(--steel);text-underline-offset:.3em}
.door-note:focus{outline:none}
.door-fields{display:contents}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}