/* =====================================================================
   JK FIELD SYSTEM — v3
   Liquid Obsidian & Optic White. Quiet editorial, sentence case.
   Detail (EXIF, telemetry, buy) appears only when a visitor opens an image.
   Motion: <=240ms, cubic-bezier(0.16,1,0.3,1). No soft drop shadows.
   ===================================================================== */

/* ---------- 0. PAGE TRANSITIONS (progressive enhancement; no-op where unsupported) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-max);animation-timing-function:var(--ease)}
::view-transition-new(root){animation-name:page-pop-in}
::view-transition-old(root){animation-name:page-pop-out}
@keyframes page-pop-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
@keyframes page-pop-out{from{opacity:1}to{opacity:0}}

/* ---------- 1. TOKENS ---------- */
:root{
  --canvas:#0C0D10; --canvas-2:#121419; --canvas-3:#181A20;
  --ink:#EDEDE8; --ink-2:#A3A5AD; --ink-3:#6B6E78;
  --rule:#22242B; --rule-2:#2E3139;
  --accent:#FF4800; --accent-ink:#FF6A2E; --on-accent:#0C0D10;

  --glass-bg:rgba(18,20,24,.65);
  --glass-blur:blur(24px) saturate(180%);
  --spec-top:rgba(255,255,255,.22); --spec-bot:rgba(255,255,255,.04);
  --glass-ink:#EDEDE8;
  --grain-opacity:.05;

  --f-display:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"Geist Mono","SF Mono",ui-monospace,Menlo,monospace;

  --fs-hero:clamp(40px,6.2vw,92px);
  --fs-h1:clamp(36px,5.2vw,76px);
  --fs-h2:clamp(28px,3.4vw,48px);
  --fs-h3:clamp(20px,1.9vw,26px);
  --fs-lede:clamp(17px,1.3vw,20px);
  --fs-body:16px;
  --fs-small:13px;
  --fs-mono:12px;

  --pad:clamp(18px,3.4vw,48px);
  --gut:clamp(8px,1vw,14px);
  --r-frame:4px; --r-panel:14px;

  --ease:cubic-bezier(0.16,1,0.3,1);
  --spring:linear(0,.22 6%,.63 14%,.92 22%,1.04 30%,1.06 36%,1.03 46%,1 60%,.995 75%,1);
  --t-fast:120ms; --t-med:180ms; --t-max:240ms;
}
:root[data-theme="light"]{
  --canvas:#F4F3EE; --canvas-2:#ECEBE5; --canvas-3:#E3E2DB;
  --ink:#0C0D10; --ink-2:#45474F; --ink-3:#74767E;
  --rule:#D6D4CC; --rule-2:#C2C0B7;
  --accent-ink:#C93A00;
  --glass-bg:rgba(255,255,255,.70);
  --spec-top:rgba(255,255,255,.95); --spec-bot:rgba(12,13,16,.06);
  --glass-ink:#0C0D10; --grain-opacity:.06;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --canvas:#F4F3EE; --canvas-2:#ECEBE5; --canvas-3:#E3E2DB;
    --ink:#0C0D10; --ink-2:#45474F; --ink-3:#74767E;
    --rule:#D6D4CC; --rule-2:#C2C0B7;
    --accent-ink:#C93A00;
    --glass-bg:rgba(255,255,255,.70);
    --spec-top:rgba(255,255,255,.95); --spec-bot:rgba(12,13,16,.06);
    --glass-ink:#0C0D10; --grain-opacity:.06;
  }
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px;color-scheme:dark light}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 var(--fs-body)/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a,button,input,select,summary,[role=button]{touch-action:manipulation}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--canvas);padding:8px 12px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* matte finish: static grain */
body::before{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

/* ---------- 3. TYPE (sentence case, no forced caps) ---------- */
.h-hero,.h1,.h2,.h3{font-family:var(--f-display);font-weight:500;margin:0;color:var(--ink);text-wrap:balance}
.h-hero{font-size:var(--fs-hero);line-height:1;letter-spacing:-.04em}
.h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.035em}
.h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.03em}
.h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em}
.lede{font-size:var(--fs-lede);line-height:1.5;color:var(--ink-2);max-width:46ch;margin:0}
.copy{color:var(--ink-2);max-width:64ch;margin:0}
.copy + .copy{margin-top:1em}
.prose p{color:var(--ink-2);max-width:64ch;margin:0 0 1em}
.label{font:500 var(--fs-small)/1.3 var(--f-body);color:var(--ink-2)}
.mono{font-family:var(--f-mono);font-size:var(--fs-mono);line-height:1.45;letter-spacing:0;font-variant-numeric:tabular-nums}
.ink-3{color:var(--ink-3)} .ink-2{color:var(--ink-2)}
.acc{color:var(--accent-ink)}

/* ---------- 4. LAYOUT ---------- */
.wrap{padding-inline:var(--pad)}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.sec{padding-block:clamp(56px,8vw,120px)}
.sec-tight{padding-block:clamp(28px,4vw,56px)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:clamp(18px,2.6vw,32px)}
@media (max-width:860px){ .grid12{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ---------- 5. LIQUID GLASS ---------- */
.glass{position:relative;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);color:var(--glass-ink);isolation:isolate}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,var(--spec-top),var(--spec-bot) 55%,rgba(255,255,255,.08));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.glass.milled{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),linear-gradient(var(--glass-bg),var(--glass-bg))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{background:var(--canvas-2)} }

/* ---------- 6. NAV DOCK ---------- */
.dock-wrap{position:fixed;inset:max(12px,env(safe-area-inset-top)) 0 auto 0;z-index:60;display:flex;justify-content:center;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));pointer-events:none}
.dock{pointer-events:auto;display:flex;align-items:center;gap:4px;border-radius:999px;padding:5px 5px 5px 16px;max-width:100%}
.dock .brand{font:500 14px/1 var(--f-body);letter-spacing:-.01em;margin-right:8px;white-space:nowrap;color:var(--glass-ink)}
.dock nav{display:flex;align-items:center;gap:0}
.dock nav a,.dock .dbtn{position:relative;font:450 13px/1 var(--f-body);padding:9px 11px;border-radius:999px;color:var(--ink-2);
  transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),transform var(--t-max) var(--spring)}
.dock nav a:hover,.dock .dbtn:hover{color:var(--glass-ink);background:rgba(127,127,127,.14);transform:translateY(-1px)}
.dock nav a:active,.dock .dbtn:active{transform:scale(.96)}
.dock nav a[aria-current="page"]{color:var(--glass-ink)}
.dock nav a[aria-current="page"]::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;
  background:rgba(127,127,127,.18);view-transition-name:navpill}
.dock .menu-btn{display:none}
.dbtn svg{width:14px;height:14px;display:block}
.sheet{position:fixed;inset:calc(max(12px,env(safe-area-inset-top)) + 54px) max(12px,env(safe-area-inset-right)) auto max(12px,env(safe-area-inset-left));z-index:59;border-radius:var(--r-panel);padding:6px;display:none;overscroll-behavior:contain}
.sheet.open{display:block;animation:drop var(--t-med) var(--ease)}
.sheet a{display:block;padding:13px 12px;border-bottom:1px solid var(--rule);font:500 20px/1.1 var(--f-display);letter-spacing:-.02em}
.sheet a:last-child{border-bottom:0}
@keyframes drop{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
@media (max-width:1080px){ .dock nav{display:none} .dock .menu-btn{display:inline-flex} }
@media (min-width:1081px){ .sheet{display:none!important} }

/* ---------- 7. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:500 14px/1 var(--f-body);padding:14px 18px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--canvas);
  transition:transform var(--t-max) var(--spring),background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{border-color:var(--ink)}
.btn .arr{transition:transform var(--t-med) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- 8. HERO (home + optional section heroes) ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;background:var(--canvas-3);color:#EDEDE8}
.hero.short{min-height:min(86svh,860px)}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media video{opacity:0;transition:opacity var(--t-max) var(--ease)}
.hero-media video.on{opacity:1}
.hero-pause{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) + 6px);right:max(12px,env(safe-area-inset-right));z-index:5;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:11px;letter-spacing:-1px}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,13,16,.45) 0%,rgba(12,13,16,0) 28%,rgba(12,13,16,.1) 55%,rgba(12,13,16,.82) 100%)}
.hero-body{position:relative;z-index:2;padding:0 var(--pad) clamp(28px,4vw,56px)}
.hero .kicker{color:rgba(237,237,232,.78);margin:0 0 16px}
.hero .h-hero,.hero .h1,.hero .h2,.hero .h3{color:#F4F3EE;max-width:18ch}
.hero-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end;margin-top:clamp(18px,2.4vw,28px)}
.hero-row .lede{grid-column:1 / span 6;color:rgba(237,237,232,.8)}
.hero-row .actions{grid-column:8 / span 5;justify-content:flex-end}
.hero .btn{border-color:#EDEDE8;background:#EDEDE8;color:#0C0D10}
.hero .btn.ghost{background:rgba(18,20,24,.35);color:#EDEDE8;border-color:rgba(237,237,232,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media (max-width:860px){ .hero-row{grid-template-columns:1fr} .hero-row .lede,.hero-row .actions{grid-column:1 / -1} .hero-row .actions{justify-content:flex-start;margin-top:20px} }

/* ---------- 9. PAGE MASTHEAD ---------- */
.mast{padding-top:clamp(120px,14vw,176px);padding-bottom:clamp(28px,4vw,48px)}
.mast .meta{grid-column:1 / -1;color:var(--ink-3);margin-bottom:clamp(14px,2vw,22px)}
.mast .h1{grid-column:1 / span 9}
.mast .lede{grid-column:1 / span 6;margin-top:clamp(18px,2.4vw,28px)}
.mast .actions{grid-column:8 / span 5;justify-content:flex-end;align-items:end;margin-top:24px}
@media (max-width:860px){ .mast .h1,.mast .lede,.mast .actions{grid-column:1 / -1} .mast .actions{justify-content:flex-start} }

/* On mobile, surface actual project work before the generic "How it worked"
   rundown — desktop keeps the authored source order. */
@media (max-width:760px){
  main.mobile-reorder{display:flex;flex-direction:column}
  main.mobile-reorder > .mast{order:1}
  main.mobile-reorder > .sec-project{order:2}
  main.mobile-reorder > .sec-worked{order:4}
  main.mobile-reorder > .band{order:5}
}

/* ---------- 10. SPEC LIST ---------- */
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule)}
.specs > div{padding:18px 18px 22px 0;border-bottom:1px solid var(--rule)}
.specs > div + div{padding-left:18px;border-left:1px solid var(--rule)}
.specs h3{font:500 16px/1.3 var(--f-body);margin:0 0 8px}
.specs p{margin:0;color:var(--ink-2);font-size:14px}
@media (max-width:1000px){ .specs{grid-template-columns:repeat(2,minmax(0,1fr))} .specs > div:nth-child(odd){padding-left:0;border-left:0} }
@media (max-width:560px){ .specs{grid-template-columns:1fr} .specs > div{padding-left:0!important;border-left:0!important} }

/* ---------- 11. FRAMES (zero layout shift) ---------- */
.frame{position:relative;display:block;overflow:hidden;border-radius:var(--r-frame);background:var(--canvas-3);aspect-ratio:var(--ar,3/2)}
.frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform var(--t-max) var(--ease)}
.frame:hover img{transform:scale(1.02)}
.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.frame::after{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.12) 48%,rgba(255,255,255,.02) 56%,transparent 64%);
  transform:translateX(-120%);transition:transform 0s}
.frame:hover::after{transform:translateX(120%);transition:transform var(--t-max) var(--ease)}
.frame .mi{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease),transform var(--t-max) var(--ease)}
.frame .mi.on{opacity:1}
.frame .tag{position:absolute;left:10px;bottom:10px;z-index:2;padding:6px 10px;border-radius:999px;font:500 12px/1 var(--f-body)}

/* ---------- 12. LEAD IMAGE (full-bleed, quiet) ---------- */
.lead{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--canvas-3)}
.lead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-max) var(--ease)}
.lead:hover img{transform:scale(1.012)}
@media (max-width:760px){ .lead{aspect-ratio:4/5} }

/* ---------- 13. JUSTIFIED GALLERY (true aspect, exact order) ---------- */
.jgrid{display:flex;flex-wrap:wrap;gap:var(--gut);--rh:clamp(200px,24vw,360px);min-height:var(--rh)}
.jgrid[data-gallery]:empty:not([data-failed]){min-height:max(var(--rh),85svh)}
.jgrid::after{content:"";flex:999 1 0}
.jgrid > figure,.jgrid > .tile{margin:0;flex:var(--ar) 1 calc(var(--ar) * var(--rh));min-width:0;max-width:100%;position:relative}
.jgrid .frame{aspect-ratio:var(--ar)}
@media (max-width:560px){ .jgrid{--rh:140px} }

/* ---------- 14. INDEX TABLE ---------- */
.registry{width:100%;border-collapse:collapse}
.registry th{text-align:left;font:450 var(--fs-small)/1 var(--f-body);color:var(--ink-3);padding:0 12px 12px 0;border-bottom:1px solid var(--rule-2)}
.registry td{padding:0;border-bottom:1px solid var(--rule);vertical-align:middle}
.registry td > a{display:block;padding:18px 12px 18px 0}
.registry tbody tr{transition:background-color var(--t-fast) var(--ease)}
.registry tbody tr:hover{background:var(--canvas-2)}
.registry .r-title{display:block;font:500 clamp(22px,2.4vw,32px)/1.1 var(--f-display);letter-spacing:-.025em;transition:color var(--t-fast) var(--ease)}
.registry tbody tr:hover .r-title{color:var(--accent-ink)}
.registry .r-sub{display:block;margin-top:4px;color:var(--ink-3);font-size:14px}
.registry .r-arrow{text-align:right;color:var(--ink-3)}
@media (max-width:760px){ .registry .c-hide{display:none} }
.peek{position:fixed;z-index:70;width:240px;aspect-ratio:3/2;pointer-events:none;border-radius:6px;overflow:hidden;opacity:0;transform:translate(-50%,-112%) scale(.96);
  transition:opacity var(--t-fast) var(--ease),transform var(--t-med) var(--ease);background:var(--canvas-3)}
.peek.on{opacity:1;transform:translate(-50%,-112%) scale(1)}
.peek img{width:100%;height:100%;object-fit:cover}
@media (hover:none){ .peek{display:none} }

/* ---------- 15. HOME MOSAIC ---------- */
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)}
.mosaic > a{display:flex;flex-direction:column}
.mosaic .m-a{grid-column:1 / span 7} .mosaic .m-b{grid-column:8 / span 5}
.mosaic .m-c{grid-column:1 / span 4} .mosaic .m-d{grid-column:5 / span 4} .mosaic .m-e{grid-column:9 / span 4}
.mosaic .m-f{grid-column:1 / span 5} .mosaic .m-g{grid-column:6 / span 7}
@media (min-width:761px){
  .mosaic .m-b .frame,.mosaic .m-f .frame{aspect-ratio:auto!important;flex:1;min-height:0}
  .mosaic .m-b .frame img,.mosaic .m-f .frame img{position:absolute;inset:0}
}
@media (max-width:760px){ .mosaic > a{grid-column:1 / -1!important} }

/* Hover: the photo itself eases up a few percent inside its frame. The frame stays put,
   so edges and neighbouring tiles never move, and the zoom reads as a calm lens push-in. */
@media (hover:hover) and (pointer:fine){
  .mosaic .frame .mi{transition:opacity 1.1s var(--ease),transform 900ms var(--ease)}
  .mosaic a:hover .frame .mi,.mosaic a:focus-visible .frame .mi{transform:scale(1.06)}
  .mosaic .frame::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mosaic a:hover .frame .mi,.mosaic a:focus-visible .frame .mi{transform:none}
}

/* ---------- 16. CTA BAND ---------- */
.band{display:block;border-top:1px solid var(--rule);padding-block:clamp(36px,6vw,80px);transition:background-color var(--t-fast) var(--ease)}
.band:hover{background:var(--canvas-2)}
.band .h1{display:flex;justify-content:space-between;align-items:end;gap:20px}
.band .arr{font-size:.7em;transition:transform var(--t-med) var(--ease)}
.band:hover .arr{transform:translate(6px,-6px);color:var(--accent-ink)}
.band .sub{margin-top:14px;color:var(--ink-3)}

/* ---------- 17. SPLIT / PROSE ---------- */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.split > .l{grid-column:1 / span 4}
.split > .r{grid-column:6 / span 7}
@media (max-width:860px){ .split > .l,.split > .r{grid-column:1 / -1} .split > .r{margin-top:18px} }

/* ---------- 17b. SOCIAL EMBEDS ---------- */
.social-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.social-grid > blockquote.instagram-media{flex:0 1 auto}
.links{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.links li{border-bottom:1px solid var(--rule)}
.links a{display:flex;justify-content:space-between;padding:14px 0;color:var(--ink-2);transition:color var(--t-fast) var(--ease)}
.links a:hover{color:var(--ink)}

/* ---------- 18. VIDEO ---------- */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,36px) var(--gut)}
.vcard{margin:0}
.vcard .frame{aspect-ratio:16/9}
.vcard .frame img{object-fit:cover}
.vcard iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vcard .play{position:absolute;left:12px;bottom:12px;z-index:2;padding:9px 14px;border-radius:999px;font:500 13px/1 var(--f-body)}
.vcard .expand{position:absolute;right:10px;top:10px;z-index:2;width:34px;height:34px;border-radius:50%;border:none;
  display:grid;place-items:center;cursor:pointer;font-size:15px;line-height:1}
.vcard h3{font:500 16px/1.35 var(--f-body);margin:12px 0 2px}
.vcard p{margin:0;color:var(--ink-3);font-size:14px}
.vcard .pending{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);background:repeating-linear-gradient(135deg,transparent 0 11px,var(--rule) 11px 12px),var(--canvas-2)}
.video-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.9);padding:32px}
.video-modal.open{display:flex}
.video-modal video{max-width:100%;max-height:100%;border-radius:8px}
.video-modal .x{position:absolute;top:16px;right:20px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:18px;cursor:pointer}
@media (max-width:1000px){ .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .vgrid{grid-template-columns:1fr} }

/* ---------- 19. SHOP (Pixieset / SmugMug-style) ---------- */
.egrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,36px) var(--gut)}
.ecard .frame{aspect-ratio:4/3}
.ecard h3{font:500 18px/1.3 var(--f-body);margin:14px 0 2px;letter-spacing:-.01em}
.ecard p{margin:0;color:var(--ink-3);font-size:14px}
.ecard .ext{color:var(--ink-3)}
@media (max-width:1000px){ .egrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .egrid{grid-template-columns:1fr} }
.group-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:clamp(36px,5vw,64px) 0 18px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.crumbs{color:var(--ink-3);font-size:14px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-block:1px solid var(--rule);margin-bottom:var(--gut);
  position:sticky;top:calc(max(12px,env(safe-area-inset-top)) + 42px);z-index:20;background:var(--canvas)}
.toolbar input{font:inherit;font-size:14px;color:var(--ink);background:var(--canvas-2);border:1px solid var(--rule-2);border-radius:999px;padding:9px 14px;min-width:220px}
.toolbar input:focus{border-color:var(--ink)}
.toolbar input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile .frame{cursor:zoom-in}
.tile .hov{position:absolute;inset:auto 8px 8px 8px;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:8px;opacity:0;transform:translateY(4px);
  transition:opacity var(--t-fast) var(--ease),transform var(--t-med) var(--ease);pointer-events:none}
.tile:hover .hov,.tile:focus-within .hov{opacity:1;transform:none;pointer-events:auto}
.tile .hov .id{padding:6px 10px;border-radius:999px}
@media (hover:none){ .tile .hov{opacity:1;transform:none;pointer-events:auto} .tile .hov .id{display:none} }
.buy{display:inline-flex;align-items:center;font:500 13px/1 var(--f-body);padding:9px 13px;border-radius:999px;border:1px solid var(--rule-2);white-space:nowrap;background:var(--canvas);color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.buy:hover{border-color:var(--ink);background:var(--ink);color:var(--canvas)}
.buy.solid{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.notice{border:1px solid var(--accent);padding:14px 16px;border-radius:10px;margin-bottom:20px}
.more{display:flex;justify-content:center;padding:28px 0}
.count-note{color:var(--ink-3);font-size:14px}

/* ---------- 20. FOOTER (quiet) ---------- */
.foot{border-top:1px solid var(--rule);padding-top:28px;padding-bottom:calc(28px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;color:var(--ink-3);font-size:14px}
.foot nav{display:flex;gap:6px 18px;flex-wrap:wrap}
.foot a{transition:color var(--t-fast) var(--ease)}
.foot a:hover{color:var(--ink)}

/* ---------- 21. LIGHTBOX: detail lives here ---------- */
.pswp{--pswp-bg:#07080A;--pswp-placeholder-bg:#121419;overscroll-behavior:contain}
.jk-cap{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:max-content;max-width:min(94vw,860px);z-index:10;
  padding:10px 12px 10px 16px;border-radius:18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  background:rgba(18,20,24,.65);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  color:#EDEDE8;font:400 14px/1.4 var(--f-body);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.jk-cap:empty{display:none}
.jk-cap .c{flex:1 1 auto;min-width:0}
.jk-cap .id{font:500 12px/1 var(--f-mono);color:rgba(237,237,232,.6)}
.jk-cap button,.jk-cap a.b{font:500 13px/1 var(--f-body);padding:8px 12px;border-radius:999px;border:1px solid rgba(237,237,232,.3);color:#EDEDE8;white-space:nowrap}
.jk-cap a.b.solid{background:#EDEDE8;color:#0C0D10;border-color:#EDEDE8}
.jk-cap button[aria-expanded="true"]{border-color:#FF6A2E;color:#FF6A2E}
.jk-cap dl{flex-basis:100%;display:none;grid-template-columns:auto 1fr;gap:3px 16px;margin:4px 0 2px;padding-top:10px;border-top:1px solid rgba(237,237,232,.14);font:400 12px/1.45 var(--f-mono)}
.jk-cap dl.open{display:grid;animation:drop var(--t-med) var(--ease)}
.jk-cap dt{color:rgba(237,237,232,.55)} .jk-cap dd{margin:0}

/* ---------- 22. MOTION SAFETY ---------- */
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }
.mosaic .tag{opacity:0;transform:translateY(4px);transition:opacity var(--t-fast) var(--ease),transform var(--t-med) var(--ease)}
.mosaic a:hover .tag,.mosaic a:focus-visible .tag{opacity:1;transform:none}
@media (hover:none){ .mosaic .tag{opacity:1;transform:none} }
.tile{overflow:hidden;border-radius:var(--r-frame)}
.tile .hov .id{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .hov .buy{margin-left:auto}
[data-shop-gallery] .jgrid{--rh:clamp(130px,15vw,230px)}
.sec-head + .specs{border-top:0}

/* ---------- v3.1 ---------- */
/* compact page headers: short scroll to the photos */
.mast.compact{padding-top:clamp(96px,9vw,128px);padding-bottom:clamp(20px,2.4vw,32px)}
.mast.compact .h2{grid-column:1 / span 9}
.mast.compact .meta{margin-bottom:10px}
.mast.compact .lede{margin-top:12px;font-size:16px}
.mast.compact .actions{margin-top:12px}
.hero.compact{min-height:clamp(340px,50svh,520px)}
.hero.compact .hero-body{padding-top:110px}
.hero.compact .hero-row{margin-top:12px}
.hero.compact .lede{font-size:16px}

/* hover: photos grow slightly */
@media (hover:hover){
  .jgrid > figure,.jgrid > .tile{transition:transform var(--t-med) var(--ease)}
  .jgrid > figure:hover,.jgrid > .tile:hover{transform:scale(1.025);z-index:4}
}
@media (prefers-reduced-motion:reduce){ .jgrid > figure:hover,.jgrid > .tile:hover{transform:none} }

/* home index: compact grid, no numbers */
.ixgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.ix{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);transition:background-color var(--t-fast) var(--ease)}
.ix:hover{background:var(--canvas-2)}
.ix-th{grid-row:1 / span 2;width:64px;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--canvas-3)}
.ix-th img{width:100%;height:100%;object-fit:cover}
.ix-t{font:500 17px/1.2 var(--f-display);letter-spacing:-.015em;align-self:end}
.ix:hover .ix-t{color:var(--accent-ink)}
.ix-s{font-size:13px;color:var(--ink-3);align-self:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:1000px){ .ixgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .ixgrid{grid-template-columns:1fr} }

/* footer socials */
.foot nav{align-items:center}
.socials{display:inline-flex;gap:14px;align-items:center}
.foot .ico{display:inline-flex;color:var(--ink-3)}
.foot .ico:hover{color:var(--ink)}

/* event page: title, highlight strip, galleries immediately below */
.evhead{padding-top:clamp(92px,8vw,116px)}
.evhead .crumbs{color:var(--ink-3);margin-bottom:8px}
.evtitle{display:flex;align-items:baseline;gap:10px 18px;flex-wrap:wrap;margin-bottom:14px}
.evtitle .btn{margin-left:auto;align-self:center}
.strip .jgrid{flex-wrap:nowrap;gap:6px}
.strip .jgrid::after{display:none}
.strip .jgrid > .tile{flex:var(--ar) 1 0;min-width:0}
.strip .tile .hov .id,.strip .exl{display:none}
@media (max-width:760px){
  .strip{margin-inline:calc(var(--pad) * -1);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .strip::-webkit-scrollbar{display:none}
  .strip .jgrid{padding-inline:var(--pad);width:max-content}
  .strip .jgrid > .tile{flex:0 0 auto;height:96px;width:calc(var(--ar) * 96px)}
  .strip .tile .hov{display:none}
  .evtitle .btn{margin-left:0}
}
.evgals{padding-bottom:clamp(48px,6vw,88px)}
.evgals .group-head{margin:clamp(22px,2.6vw,32px) 0 12px;padding-bottom:8px}
.gh{font:500 17px/1.2 var(--f-display);letter-spacing:-.015em}
.egrid.small{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px var(--gut)}
.egrid.small .ecard .frame{aspect-ratio:3/2}
.egrid.small .ecard h3{font-size:15px;margin-top:8px}
.egrid.small .ecard p{font-size:13px}
@media (max-width:1000px){ .egrid.small{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .egrid.small{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px} }

/* shop tiles: EXIF line on hover */
.tile .exl{position:absolute;top:8px;left:8px;right:8px;width:max-content;max-width:calc(100% - 16px);z-index:3;padding:5px 9px;border-radius:999px;font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity var(--t-fast) var(--ease);pointer-events:none}
.tile:hover .exl{opacity:1}
@media (hover:none){ .tile .exl{display:none} }
button.buy{cursor:pointer}
.jk-cap button.b.solid{background:#EDEDE8;color:#0C0D10;border-color:#EDEDE8}

/* licence chooser */
dialog.lic{border:0;padding:0;background:transparent;color:var(--ink);max-width:min(94vw,520px);width:100%}
dialog.lic::backdrop{background:rgba(8,9,11,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog.lic[open]{animation:drop var(--t-med) var(--ease)}
.lic-in{background:var(--canvas);border:1px solid var(--rule-2);border-radius:18px;padding:18px}
.lic-top{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.lic-top img{width:56px;height:56px;object-fit:cover;border-radius:8px}
.lic-top > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.lic-top .id{color:var(--ink-3)}
.lic .x{margin-left:auto;font:400 26px/1 var(--f-body);color:var(--ink-2);background:none;border:0;cursor:pointer;padding:4px 8px}
.lic ul{list-style:none;margin:0;padding:0}
.lic li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.lic .o{flex:1;min-width:0}
.lic .o b{font:500 16px/1.2 var(--f-display);margin-right:8px}
.lic .sz{color:var(--ink-3)}
.lic .o p{margin:4px 0 0;font-size:13px;color:var(--ink-2)}
.lic li .buy{min-width:64px;justify-content:center}
.lic .note,.lic .todo{margin:14px 0 0;font-size:13px;color:var(--ink-2)}
.lic .note a,.lic .todo a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sec-head + .ixgrid{border-top:0}

/* ---------- Contact form ---------- */
.cform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px var(--gut);max-width:880px}
.cform .full{grid-column:1 / -1}
.cform label{display:block;font:500 var(--fs-small)/1.3 var(--f-body);color:var(--ink-2);margin-bottom:6px}
.cform input,.cform textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--canvas-2);border:1px solid var(--rule-2);border-radius:10px;padding:12px 14px;transition:border-color var(--t-fast) var(--ease)}
.cform textarea{resize:vertical;min-height:140px}
.cform input:hover,.cform textarea:hover{border-color:var(--ink-3)}
.cform input:focus,.cform textarea:focus{border-color:var(--ink)}
.cform input:focus-visible,.cform textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cform [aria-invalid="true"]{border-color:var(--accent-ink)}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cform-status{margin:0;max-width:none}
.cform-status.err{color:var(--accent-ink)}
.cform button[disabled]{opacity:.6;cursor:progress}
@media (max-width:700px){ .cform{grid-template-columns:1fr} }

/* Phone-shaped video card (vertical cut shown on small screens) */
.vcard.vertical .frame{aspect-ratio:9 / 16;max-width:420px;margin-inline:auto}

/* ---------- Contact: everything sits on one full-screen video stage ---------- */
.page-contact{background:#0C0D10;color:#EDEDE8}
.stage{position:relative;min-height:calc(100svh - 84px);color:#EDEDE8}
.stage-media{position:fixed;inset:0;z-index:0}
.stage-scrim{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,10,13,.68) 0%,rgba(8,10,13,.4) 48%,rgba(8,10,13,.18) 100%),linear-gradient(180deg,rgba(8,10,13,.3) 0%,rgba(8,10,13,0) 28%,rgba(8,10,13,.42) 100%)}
.stage-body{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center;
  min-height:calc(100svh - 84px);padding-top:clamp(96px,8vw,116px);padding-bottom:clamp(20px,2.4vw,32px)}
.stage-info .kicker{color:rgba(237,237,232,.7);margin:0 0 14px}
.stage-info .h1{color:#F4F3EE;font-size:clamp(34px,4.6vw,68px);max-width:14ch}
.stage-info .lede{color:rgba(237,237,232,.82);margin-top:clamp(14px,1.6vw,22px)}
.stage-mail{display:inline-block;margin-top:clamp(20px,2.4vw,32px);font:500 clamp(22px,2.6vw,38px)/1.1 var(--f-display);letter-spacing:-.02em;color:#F4F3EE;overflow-wrap:anywhere;border-bottom:1px solid rgba(237,237,232,.35);padding-bottom:4px;transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.stage-mail:hover{border-color:var(--accent-ink);color:#fff}
.stage-meta{margin:14px 0 0;color:rgba(237,237,232,.7);font-size:15px;line-height:1.55;max-width:46ch}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid rgba(237,237,232,.3);background:rgba(18,20,24,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#EDEDE8;font:500 14px/1 var(--f-body);transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.pill:hover{background:rgba(237,237,232,.16);border-color:rgba(237,237,232,.6)}
.pill:active{transform:scale(.97)}
.stage-label{margin:clamp(22px,2.6vw,34px) 0 10px;color:rgba(237,237,232,.55)}
.worked{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;max-width:62ch}
.worked a{font-size:13.5px;line-height:1.4;color:rgba(237,237,232,.72);border-bottom:1px solid rgba(237,237,232,.18);transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.worked a:hover{color:#fff;border-color:rgba(237,237,232,.7)}

.stage-card{padding:clamp(20px,2.4vw,32px);border-radius:var(--r-panel);background:rgba(14,16,20,.46);border:1px solid rgba(237,237,232,.2);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.stage-card-title{margin:0;font:500 clamp(22px,2vw,28px)/1.15 var(--f-display);letter-spacing:-.02em;color:#F4F3EE}
.stage-card-sub{margin:8px 0 18px;color:rgba(237,237,232,.7);font-size:14.5px;line-height:1.5}
.stage-card .cform{max-width:none;gap:14px var(--gut)}
.stage-card .cform label{color:rgba(237,237,232,.78)}
.stage-card .cform label .ink-3{color:rgba(237,237,232,.5)}
.stage-card .cform input,.stage-card .cform textarea{background:rgba(255,255,255,.08);border:1px solid rgba(237,237,232,.26);color:#F4F3EE;border-radius:10px}
.stage-card .cform input::placeholder,.stage-card .cform textarea::placeholder{color:rgba(237,237,232,.4)}
.stage-card .cform input:hover,.stage-card .cform textarea:hover{border-color:rgba(237,237,232,.5)}
.stage-card .cform input:focus,.stage-card .cform textarea:focus{border-color:#EDEDE8;background:rgba(255,255,255,.12)}
.stage-card .cform [aria-invalid="true"]{border-color:var(--accent-ink)}
.stage-card .cform textarea{min-height:104px}
.stage-card .btn{background:#EDEDE8;color:#0C0D10;border-color:#EDEDE8}
.stage-card .cform-status{color:rgba(237,237,232,.8)}
.stage-card .cform-status.err{color:#FF8A57}
.page-contact .foot{position:relative;z-index:2;color:rgba(237,237,232,.6);border-top-color:rgba(237,237,232,.16)}
.page-contact .foot a{color:rgba(237,237,232,.75)}
.page-contact .stage .hero-pause{position:fixed}
@media (max-width:899px){
  .stage-body{grid-template-columns:1fr;align-items:start;gap:28px}
  .stage-scrim{background:linear-gradient(180deg,rgba(8,10,13,.72) 0%,rgba(8,10,13,.6) 100%)}
  .stage-info .h1{max-width:none}
  .stage-body{gap:0}
  .stage-info{display:contents}
  .stage-info > *{order:1}
  .stage-card{order:2;margin-top:28px}
  .stage-info > .stage-label,.stage-info > .worked{order:3}
}

/* While a background video plays, avoid per-frame blending and wide blurs over it (big win in Firefox). */
.vid-on body::before{mix-blend-mode:normal;opacity:calc(var(--grain-opacity) * .7)}
.page-contact .stage-card{background:rgba(14,16,20,.66);-webkit-backdrop-filter:none;backdrop-filter:none}
.page-contact .pill{background:rgba(18,20,24,.55);-webkit-backdrop-filter:none;backdrop-filter:none}
.vid-on .hero .btn.ghost{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(18,20,24,.55)}

/* Build stamp, last line of the footer */
.foot a.build:hover{opacity:1;color:var(--ink)}
.foot .build{flex-basis:100%;font-size:11px;letter-spacing:.02em;color:var(--ink-3);opacity:.75}

/* Easter eggs */
.jk-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:9999;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font:500 13px var(--f-mono,monospace);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.jk-toast.on{opacity:1;transform:translate(-50%,0)}
.jk-flash{position:fixed;inset:0;background:#fff;opacity:.9;z-index:9998;pointer-events:none;animation:jkflash .35s ease-out forwards}
@keyframes jkflash{to{opacity:0}}
.jk-pong{position:fixed;inset:0;z-index:10000;touch-action:none;cursor:none}
.jk-pong canvas{display:block}
.jk-pong-x{position:absolute;top:16px;right:16px;cursor:pointer;padding:8px 14px;border-radius:999px;border:1px solid rgba(244,243,238,.4);background:transparent;color:#f4f3ee;font:500 13px var(--f-mono,monospace)}
.jk-pong-hint{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:rgba(244,243,238,.6);font-size:12px;margin:0;pointer-events:none}
.jk-oar{position:fixed;top:45%;left:-160px;width:140px;height:6px;border-radius:3px;background:var(--ink);z-index:9998;pointer-events:none;animation:jkrow 2.4s cubic-bezier(.3,.1,.3,1) forwards}
@keyframes jkrow{to{transform:translateX(calc(100vw + 320px))}}
@media (prefers-reduced-motion:reduce){.jk-flash,.jk-oar{animation:none;opacity:0}}
.scam-check{padding:12px 14px;border:1px solid var(--line,rgba(128,128,128,.3));border-radius:10px}
.scam-check .copy{margin:4px 0 10px}
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
.game-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px;border:1px solid var(--line,rgba(128,128,128,.3));border-radius:12px;background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:border-color .2s,transform .2s}
.game-card:hover,.game-card:focus-visible{border-color:var(--ink);transform:translateY(-2px)}
.game-card b{font-weight:500;font-size:17px}.game-card span{font-size:14px;color:var(--ink-3)}.game-card i{font-style:normal;font-size:12px;margin-top:4px}
.fishy{margin:0;padding:6px 0 18px;text-align:center}
.fishy button{background:none;border:0;padding:8px;color:var(--ink-3);opacity:.35;cursor:pointer;transition:opacity .2s,transform .3s}
.fishy button:hover,.fishy button:focus-visible{opacity:1;transform:translateX(4px)}

/* ---------- Interaction polish: instant press feedback, soft release ---------- */
.jgrid > .tile,.ecard,.game-card,a.band,.mosaic a{-webkit-tap-highlight-color:transparent}
.jgrid > .tile:active,.jgrid > .tile:hover:active,.ecard:active,.game-card:active,.mosaic a:active{transform:scale(.985);transition:transform 90ms ease-out}
a.band:active .h1{transform:translateX(2px);transition:transform 90ms ease-out}
.tile .buy:active,.hero-pause:active,.jk-pong-x:active,.b:active{transform:scale(.96);transition:transform 90ms ease-out}
.foot,.label,.mono{letter-spacing:.012em}

/* ---------- Reduced transparency and higher contrast ---------- */
@media (prefers-reduced-transparency:reduce){
  :root{--glass-blur:none}
  .glass,.dock,.sheet,.jk-cap,.pill,.hero-pause,.stage-card,.hero .btn.ghost,.exl,.tile .hov .id{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .glass{background:var(--bg)}
  .pill,.stage-card,.hero-pause,.hero .btn.ghost,.exl{background:rgba(14,16,20,.94)!important;color:#EDEDE8}
  dialog.lic::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,9,11,.85)}
}
@media (prefers-contrast:more){
  .glass,.pill,.stage-card,.hero-pause,.hero .btn.ghost,.exl{border:1px solid currentColor!important}
  .copy,.lede,.prose p,.label{color:var(--ink)}
}

/* ---------- Free video page ---------- */
.fv-card{max-width:720px;padding:clamp(20px,3vw,32px);border:1px solid var(--rule-2);border-radius:var(--r-frame,14px)}
.fv-id{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.fv-id b{font:500 22px/1.2 var(--f-display);letter-spacing:-.02em}
.fv-id span{color:var(--ink-3);font-size:12px}
.fv-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.fv-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:18px 0 0;font-size:12px}
.fv-links a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.fv-sharelink{background:none;border:0;padding:4px 0;color:var(--ink-3);font-size:12px;cursor:pointer}
.fv-sharelink:hover{color:var(--ink)}
.fv-list{display:grid;gap:clamp(24px,3vw,40px);margin-top:20px}
.fv-item{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(16px,2.4vw,32px);align-items:start;scroll-margin-top:96px;padding:2px;border-radius:12px}
.fv-vid{aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.fv-vid video{width:100%;height:100%;display:block;object-fit:contain}
.fv-body h3{font:500 20px/1.25 var(--f-body);letter-spacing:-.01em;margin:0 0 6px}
.fv-meta{font-size:12px;color:var(--ink-3);margin:0 0 10px}
.fv-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.fv-help{font-size:12px;color:var(--ink-3);margin:12px 0 0;max-width:46ch}
.fv-empty{color:var(--ink-3);margin:16px 0 0}
.fv-hit{outline:2px solid var(--ink);outline-offset:6px}
@media (max-width:760px){.fv-item{grid-template-columns:1fr}}
.fv-ig{background:transparent;color:var(--ink);border-color:var(--ink)}
.fv-ig svg{flex:none}
.fv-find{display:flex;flex-direction:column;gap:8px;max-width:520px}
.fv-find input{font:400 16px/1.2 var(--f-body);padding:14px 16px;border-radius:12px;border:1px solid var(--rule-2);background:transparent;color:var(--ink)}
.fv-find input:focus{outline:2px solid var(--ink);outline-offset:2px}
.fv-count{margin:0;font-size:12px;color:var(--ink-3)}
.fv-banner{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--ink);border-radius:12px}
.fv-banner b{font-weight:500;font-size:18px}.fv-banner .mono{font-size:12px;color:var(--ink-3)}
.fv-end{max-width:none}.fv-end b{font:500 20px/1.3 var(--f-body)}
.fv-item[hidden],.fv-group[hidden]{display:none}

/* Free video page: compact top with the cover photo beside the text */
.fv-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(20px,3.5vw,56px);align-items:center;padding-top:clamp(88px,10vw,120px);padding-bottom:clamp(20px,3vw,40px)}
.fv-top-text{display:flex;flex-direction:column;gap:14px;min-width:0}
.fv-top-text .meta{margin:0}.fv-top-text .copy{margin:0;max-width:56ch}
.fv-top .fv-actions{margin-top:4px}
.fv-cover{margin:0;border-radius:var(--r-frame,14px);overflow:hidden;aspect-ratio:3/2;background:var(--rule)}
.fv-cover img{width:100%;height:100%;object-fit:cover;display:block}
.fv-find{display:flex;flex-direction:row;align-items:center;gap:14px;max-width:none;margin-top:6px}
.fv-find input{flex:1;min-width:0}
@media (max-width:900px){.fv-top{grid-template-columns:1fr}.fv-cover{order:-1;aspect-ratio:16/9}.fv-top{padding-top:84px}}
.dir-form{display:flex;flex-direction:column;gap:12px;max-width:360px}
.dir-form input{font:400 16px/1.2 var(--f-body);padding:14px 16px;border-radius:12px;border:1px solid var(--rule-2);background:transparent;color:var(--ink)}
.dir-form input:focus{outline:2px solid var(--ink);outline-offset:2px}
.dir-form .btn{align-self:flex-start}