/* ?depth trial (Claude, after podium.global): the opening that replaces the hero video. depth-opening.js draws it on a
   fixed canvas over a block of scroll room in front of Work; every step is scrubbed by the scroll, so it reverses. */
html.depth .shero{ display:none; }
.depth-room{ position:relative; height:calc(500vh / var(--page-zoom, 1)); }   /* 5 real screens at any page zoom */
.depth-canvas{ position:fixed; inset:0; z-index:50; pointer-events:none; }
.depth-room :is(.depth-line,.depth-name,.depth-cue,.depth-pct){ position:fixed; z-index:55; margin:0; opacity:calc(1 - var(--depth-open, 0) * 4); pointer-events:none;
  transition:color .6s var(--ease); color:#1b1a17; }   /* the opening is paper in both themes */
html.light .depth-room :is(.depth-line,.depth-cue,.depth-pct){ color:#1b1a17; }
.depth-line, .depth-name{ top:50%; font:600 clamp(13px,1.05vw,15px)/1.2 "Clash Display",sans-serif; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; }
/* Jun's line sits just to the right of the dot (his sketch); scrolling in slides it away to the right */
.depth-line{ left:calc(50% + 34px); text-align:left; transform:translate(calc(var(--depth-open, 0) * 42vw), -50%); }
.depth-room :is(.depth-line,.depth-name){ opacity:calc(1 - var(--depth-open, 0) * 2.2); }
.depth-cue{ right:var(--pad); bottom:clamp(22px,4vh,40px); font:600 11px/1 "Clash Display",sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.depth-pct{ left:50%; top:calc(50% + 22px); transform:translateX(-50%); font:500 10px/1 "Geist Mono",monospace; letter-spacing:.2em; transition:opacity .5s var(--ease) !important; }
.depth-room.is-loaded .depth-pct{ opacity:0 !important; }
/* the real cards wait under the flying images and take over the moment they land */
html.depth:not(.depth-landed) #work .gentry-plate{ opacity:var(--depth-plate, 0); transition:none; }   /* fades up under the landing image */
/* while the opening is on screen the header floats over it with no bar behind (only the pill and controls) */
html.depth:not(.depth-landed) .site-header.is-stuck{ background:transparent !important; border-bottom-color:transparent !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
/* inside the dark space the header's ink turns light so the clock and buttons stay readable */
html.depth.depth-in:not(.depth-landed) .site-header{ --ink:#ece8df; --muted:rgba(236,232,223,.6); color:#ece8df; }
html.depth.depth-in:not(.depth-landed) .site-header .burger span{ background:#ece8df !important; }
html.depth.depth-in:not(.depth-landed) .hdr-time{ opacity:0; transition:opacity .4s var(--ease); }   /* the LED clock is drawn in page ink; it steps aside in the dark */
/* the simpler theme switch (Jun's pick): one icon, the same size and weight as the full-screen button, in both themes */
html.depth .theme-toggle, html.depth.light .theme-toggle{ width:32px; height:32px; padding:0; justify-content:center; border:0; background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:10px; }
html.depth .theme-toggle .tt-knob, html.depth.light .theme-toggle .tt-knob{ transform:none; background:transparent; box-shadow:none; }
html.depth .theme-toggle .tt-sec{ display:none; }
html.depth .theme-toggle .tt-knob svg{ color:currentColor !important; }
html.depth :is(.theme-toggle,.hdr-fs){ color:var(--muted); transition:color .3s var(--ease), background-color .3s var(--ease), transform .18s var(--ease); }
html.depth :is(.theme-toggle,.hdr-fs):hover{ color:var(--ink); background:rgba(128,128,128,.12); }
html.depth :is(.theme-toggle,.hdr-fs):focus-visible{ outline:1px solid var(--ink); outline-offset:2px; }
html.depth :is(.theme-toggle,.hdr-fs):active{ transform:scale(.94); }
/* dark theme, still on the paper opening: the header's ink is dark until the space opens */
html.depth:not(.light):not(.depth-in):not(.depth-landed) .site-header{ --ink:#1b1a17; --muted:rgba(27,26,23,.6); color:#1b1a17; }
html.depth:not(.light):not(.depth-in):not(.depth-landed) .site-header .burger span{ background:#1b1a17 !important; }
/* The page at 80%, as if the browser were zoomed out (Jun, tuned on his laptop): type, nav, cards and spacing scale
   together. Laptop-width screens with a mouse or trackpad only. Phones, tablets and wide monitors keep the designed
   size, so their responsive layout isn't shrunk into a narrow column. Story films and the opening canvas stay full size. */
@media (min-width:1200px) and (max-width:1799.98px) and (pointer:fine){
  html.depth{ --page-zoom:.8; }
  html.depth #after-hero, html.depth .site-footer, html.depth .site-header, html.depth #tubelight{ zoom:.8; }
}
@media (min-width:99999px){
  html.depth{ --page-zoom:.9; }
  html.depth #after-hero, html.depth .site-footer, html.depth .site-header, html.depth #tubelight{ zoom:.9; }
}
/* the lanyard is set aside in this trial (Jun) while its replacement is decided; its slot in About stays empty */
html.depth :is(#pass, .lanyard-canvas){ visibility:hidden !important; }   /* keeps its measured size, so the lanyard code stays happy */
/* the side scroll rail: a blend-based inverse did not composite over the WebGL canvas, so it switches ink with the space */
html.depth.depth-in:not(.depth-landed) .daylight-rail{ opacity:1 !important; --rail-ink:#ece8df !important; --rail-reverse-ink:#ece8df !important; color:#ece8df !important; }   /* light ink in the dark space, its own ink everywhere else */
/* the middle nav pill stays out of the opening and arrives with Work */
html.depth:not(.depth-work):not(.depth-landed) #tubelight{ opacity:0 !important; pointer-events:none !important; translate:0 -14px; }
html.depth #tubelight{ transition:opacity .5s var(--ease), translate .6s var(--ease); }
/* in the dot phase the ink drop under the pointer is the cursor, so the site cursor steps aside */
html.depth.depth-dot body:not(.story-open) :is(#cursor, .cursor, #cursorHint){ opacity:0 !important; }   /* not while a story is open over the opening (a deep link lands there) */
/* Jun's name in LED diodes, over the opening (a 2D canvas: no extra WebGL context) */
.depth-name-canvas{ position:fixed; inset:0; z-index:52; pointer-events:none; }
/* the side rail stays readable while idle in this trial */
html.depth .daylight-rail.is-idle{ opacity:.75; }
/* the clock leaves the top bar in this trial (Jun: cleaner without it) */
html.depth .hdr-time{ display:none !important; }
/* the flying Resonate card sits above the dark space while it lands */
html.depth.depth-flying #work{ z-index:60; }   /* Work (z 5) must rise above the opening canvas (z 50) while the card lands */
html.depth.depth-flying #work .gentry-item:has(.gentry[data-id="a01"]){ opacity:1 !important; transform:none !important; transition:none !important; }   /* not waiting for its scroll reveal, nor fading in over it (its .9s reveal made a fast scroll blink) */
html.depth.depth-flying #work .gentry[data-id="a01"] :is(.gentry-plate,.led-card-frame){ will-change:transform,opacity; }
/* while scrolling down the top bar and its buttons slide away (the pill stays); scroll up or hover the top to bring them back */
html.depth .site-header{ transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .4s cubic-bezier(.22,1,.36,1), background-color .4s ease, border-color .4s ease; }
html.depth.nav-away .site-header:not(:hover):not(:focus-within){ transform:translateY(-100%); opacity:0; }
html.depth.nav-away .site-header::after{ content:""; position:absolute; left:0; right:0; top:100%; height:28px; }   /* a hover strip at the very top, so the bar can be summoned */
@media (prefers-reduced-motion:reduce){ html.depth .site-header{ transition:none; } }
html.depth.depth-flying #work .gentry[data-id="a01"] .gentry-plate{ opacity:1 !important; }   /* the flying card shows in full */
/* phones: the line sits under the dot, centred, and sinks away as the opening opens */
@media (max-width:640px){
  .depth-line{ left:50%; right:auto; top:calc(50% + 34px); text-align:center; white-space:normal; width:min(84vw, 320px); transform:translate(-50%, calc(var(--depth-open, 0) * 18vh)); }
}
html.depth.depth-flying #work .gentry[data-id="a01"] .gentry-ref{ opacity:0; }   /* no A.01 tag while the card flies */
/* while Resonate settles, the title and carousel stay back and fade in above it at the end (never passing behind it) */
html.depth.depth-flying #work :is(.archive-head, #workMarquee){ opacity:var(--depth-head, 0); }
/* The layout trial lands within the real grid cells, never in the title/banner lane.
   Resonate's frame owns its short Y rise; don't add an ancestor reveal underneath it
   or restart one when depth-flying hands off to depth-landed. Neighbour cards retain
   their own vertical reveal. Clip only during the handoff, keeping landed LED glows. */
html.depth[data-polish-layout="v2"] #work .gentry-item:has(.gentry[data-id="a01"]){ opacity:1 !important; transform:none !important; transition:none !important; }
html.depth[data-polish-layout="v2"]:not(.depth-landed) #work .gentry-item{ clip-path:inset(0); }
html.depth.depth-flying[data-polish-layout="v2"] #work :is(.archive-head, #workMarquee){ opacity:1; }
/* The full-bleed rain panel reaches both edges at any page zoom. */
html.depth .dark-window{ width:calc(100vw / var(--page-zoom, 1)); margin-left:calc(50% - 50vw / var(--page-zoom, 1)); height:calc(min(78vh, 760px) / var(--page-zoom, 1)); }   /* full bleed at the designed proportion */
/* Phones are no longer zoomed, so the phone dock keeps the shared nav.css placement: no zoom compensation here. */