/* =============================================================================
   Concept F · depth layer (2026-10-19), after jjettas.com's layering
   Below the hero the page is a run of chapters. Each cuts in over the one before on a diagonal
   that straightens as it arrives. In f-statue.html every chapter stands on a surface (asphalt, hammered
   metal, marble, smoke); f.html's pipeline, fleet and memory keep the void and a still film grain. depth.js drives the scroll-linked
   parts through custom properties:
     --cut  0..1  the diagonal at a chapter's top edge (1 = full slant, 0 = flat)
     --gy   px    the board photograph's slow drift
     --t    0..1  the drawn board tipping up to face the reader
     --w    0..1  how much of a word on the dot-matrix sign is lit
     --px   px    how far the pipeline/fleet track has slid left
   Scroll moves use the individual translate / rotate / scale properties, so they never fight the
   reveals in style.css, which own `transform`. Everything here has a still state: with scripts off
   or reduced motion the chapters keep a fixed diagonal, the sign is lit and nothing is pinned.
   Owns no hero rule: the hero belongs to the head-follow work.
   ========================================================================== */

:root{
  --cutH:clamp(44px,8vw,132px);
  --dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='2.7'/%3E%3C/svg%3E");
  --solid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Crect width='10' height='10'/%3E%3C/svg%3E");
  --ink-2:#4a4845;
}


/* ---- chapters */
.ch{position:relative;isolation:isolate;overflow:clip;--cut:.5}
.ch>.sec,.ch>.strip,.ch>.foot{position:relative;z-index:1}
/* each chapter after the first rises over the empty foot of the one before; that foot is padding,
   so the diagonal never covers anything. --cut (depth.js) straightens the diagonal as it arrives.
   --tz is the overlap, which the chapter grounds also pull up by */
:root{--tz:var(--cutH)}
.ch+.ch,main+.ch,.hero+.ch{margin-top:calc(var(--cutH)*-1);padding-top:var(--cutH)}
.ch:has(+.ch),main>.ch:last-child{padding-bottom:var(--cutH)}
.ch[data-cut="r"]{clip-path:polygon(0 calc(var(--cutH)*var(--cut)),100% 0,100% 100%,0 100%)}
.ch[data-cut="l"]{clip-path:polygon(0 0,100% calc(var(--cutH)*var(--cut)),100% 100%,0 100%)}
/* the first chapter cuts into the hero the same way, so its diagonal shows the hero's own light.
   The hero keeps that band at its foot clear (the only hero rules here) */
main>.hero{padding-bottom:calc(130px + var(--cutH))}
main>.hero .hero__foot{bottom:calc(40px + var(--cutH))}

.ch--void{background:var(--void)}
.ch--bone{background:var(--bone);color:var(--void)}
.ch--board{background:#090909}
/* chapters with a photograph (data-ground): a viewport-tall layer that starts at the
   chapter's very top, under the diagonal, and sticks while the chapter scrolls past it */
.ch__ground{position:sticky;top:0;z-index:0;display:block;height:100lvh;margin:calc(var(--tz)*-1) 0 calc(var(--tz) - 100lvh);overflow:hidden;pointer-events:none}
.ch__ground::before{content:"";position:absolute;inset:-10vh -2vw;background:var(--ground) center/cover no-repeat;opacity:var(--go,.12);
  translate:0 var(--gy,0px);will-change:translate}
/* the trading cards stand on dark smoke, recreated at 4k after Trevor's own texture: even from edge to
   edge, no vignette, no blur, fine grain */
.ch[data-ground="smoke"]{--ground:url("../../assets/ground/smoke-4k.webp");--go:1;background:#000}
/* the creative chapter: a still from Trevor's own Bull Rider film, and over it a still of each piece as it comes
   in (main.js stacks them in .ch__shots, which then stands in for the one picture) */
.ch[data-ground="arena"]{--ground:url("../../assets/ground/arena.webp");--go:.26}
.ch__shots{position:absolute;inset:-10vh -2vw;opacity:var(--go,.26);translate:0 var(--gy,0px);will-change:translate}
.ch__shots>i{position:absolute;inset:0;background:#000 center/cover no-repeat;opacity:0;transition:opacity .9s var(--ease)}
.ch__shots>i.is-on{opacity:1}
.ch__ground:has(.ch__shots)::before{content:none}
@media (prefers-reduced-motion:reduce){.ch__shots>i{transition:none}}
.motion-off .ch__shots>i{transition:none}
/* the light chapters are white marble, soft all over (Trevor, 2026-10-21: the Carrara slab before it read too
   black and white): ambientCG's Marble 019 for thin grey veins over Marble 005's clouds, softened (both CC0), neutral
   grey and lifted to the softness of the white marble Trevor sent (scripts/make-marble.py), shown as it is, a seamless tile about three quarters of the
   screen's width; each light chapter shows a different part of it */
.ch[data-ground^="marble"]{--ground:url("../../assets/ground/marble-white.webp");--go:1}
.ch[data-ground^="marble"] .ch__ground::before{background-size:max(620px,75vw) auto;background-repeat:repeat}
.ch[data-ground="marble-cloud"] .ch__ground::before{background-position:20% 80%}
/* a void chapter with no ground of its own (f.html's pipeline, fleet and memory) keeps a coarse film grain
   behind its content, still: Trevor did not want it moving (2026-10-20). The tile is scripts/make-grain.py's */
.ch--void:not([data-ground]) .ch__ground::before{inset:-12%;opacity:.06;
  background:url("../../assets/ground/grain.png") 0 0/360px 360px repeat}
/* f-statue.html: the dark chapters stand on physical surfaces instead, near black, still, in high
   definition (scripts/make-grounds.py; Trevor, 2026-10-20): the pipeline and fleet on asphalt (Poly Haven's
   clean_asphalt scan, CC0), the memory core on hammered metal. The darkness is in the pictures, so they
   show at full strength */
.ch[data-ground="asphalt"]{--ground:url("../../assets/ground/asphalt.webp");--go:1;background:#070707}
.ch[data-ground="hammered"]{--ground:url("../../assets/ground/hammered-metal.webp");--go:1;background:#070707}
/* the close: black marble, so it reads apart from the white marble of Career above it */
/* A uniform neutral scrim keeps even the pale veins behind the name and small links readable. */
/* the black granite Trevor likes, at the close and behind the pipeline and the fleet: the slab bookmatched four
   ways (assets/ground/black-marble-tile.webp, each quarter the original slab), shown at two thirds its old scale */
.ch[data-ground="black-marble"]{--ground:url("../../assets/ground/black-marble-tile.webp");--go:.4;background:#050505}
.ch[data-ground="black-marble"] .ch__ground::before{background-size:auto 133%;background-repeat:repeat}
/* the menu overlay is a screen too: the board under it */
.menu::before{content:"";position:absolute;inset:0;background:url("../../assets/ground/board-traces.webp") center/cover no-repeat;opacity:.1;pointer-events:none}
.menu__list{position:relative}

/* light grounds take dark ink, a dark focus ring and dark secondary text */
.ch--bone :focus-visible{outline-color:var(--void)}
.ch--bone .sh__lede,.ch--bone .career__when,.ch--bone .career__org,.ch--bone .career__note{color:var(--ink-2)}
.ch--bone .career>li{background:var(--bone-2)}
/* the close: the name stands well clear of the contact buttons, on the board */
.ch--close .foot{padding-top:clamp(96px,12vw,200px)}
.foot__credit{flex:1 0 100%;max-width:70ch;font-size:14px;color:var(--mute)}
/* the close is marble now: dark ink for the name, the links and the credit */
.ch--bone .pill{background:var(--void);color:var(--bone)}
.ch--bone .pill:hover{background:var(--white);color:var(--void)}
.ch--close .foot__credit{color:var(--ash);background:rgba(5,5,5,.86);padding:12px 16px}
.foot__credit a{display:inline;min-height:0;padding:0;text-decoration-color:currentColor}

/* ---- reveals: the parts of a group arrive one after another */
.reveal-ready [data-r]{transition-delay:calc(var(--i,0)*80ms)}

/* ---- tools: two marquees running against each other, sped up by the scroll */
.strip{background:none;padding:clamp(56px,7vw,104px) 0}
.strip__label{margin-bottom:clamp(28px,3vw,44px)}
/* with the marquee running, the names say what the label said; it stays for screen readers */
.depth-on .strip__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mq{display:grid;gap:clamp(18px,2.4vw,36px);overflow:hidden}
.mq__row{display:flex;width:max-content;will-change:translate}
.mq__set{display:flex;align-items:center;flex:none}
.mq--marks .mq__set{gap:clamp(44px,5.4vw,96px);padding-right:clamp(44px,5.4vw,96px)}
.mq--marks .mq__set span{display:grid;place-items:center;width:clamp(40px,3.8vw,60px);aspect-ratio:1}
.mq--marks svg,.mq--marks img{width:100%;height:100%}
.mq--marks svg{fill:#1b1b1b}
.mq--marks img{filter:invert(1) brightness(.12)}
.mq--names .mq__set{font:400 clamp(54px,8.4vw,150px)/.88 var(--cond);letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap}
.mq--names i{display:inline-block;width:.2em;height:.2em;margin:0 .42em;background:var(--ember);vertical-align:.24em}
.depth-on .strip__list--logos{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Text fallback survives prerendering, where system.js (which supplies the marks) is blocked. */
.strip__list--logos li:not(:has(svg,img)){width:auto;height:auto}

/* ---- the fleet glides in from the left, then holds in the middle while a request runs through it.
   Only on screens wide and tall enough to show all six lanes side by side at the larger card size;
   fleet.js moves the cards (it owns their positions, so the lines stay attached). */
.glide-on #fleet{max-width:none}
.glide-on #fleet>.sh{max-width:880px}
.glide-on .glide{height:250vh}
.glide-on .glide__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:100px;padding-bottom:24px}
.glide-on .fx{overflow:visible;margin:0;padding:0}
.glide-on .fx__in{min-width:0;width:min(1840px,calc(100vw - 2 * var(--gut)));margin:0 auto;--fg:clamp(52px,4.4vw,100px)}
.glide-on .fx__heads{margin-bottom:28px}
.glide-on .fx__head{font-size:16px}
.glide-on .fx__lane{gap:16px;align-items:flex-start}
/* each card at its own width, so a lane reads as things floating, not a column of boxes */
.glide-on .fx-card{max-width:100%}
.glide-on .fx-card{padding:18px 18px 19px;will-change:transform}
.glide-on .fx-card__t{font-size:clamp(21px,1.5vw,26px);gap:11px}
.glide-on .fx-card svg{width:18px;height:18px}
.glide-on .fx-card__d,.glide-on .fx-parent__h,.glide-on .fx-grp h4{font-size:16px}
.glide-on .fx-logo{width:38px;height:38px}
.glide-on .fx-logo svg{width:18px;height:18px}
.glide-on .fx-logo img{width:19px;height:19px}
/* cards float: a dragged card shows it is held */
.fx-card.is-drag{cursor:grabbing;z-index:4}
.glide-on .fx-card{cursor:grab;user-select:none;-webkit-user-select:none}

/* ---- the pipeline and the fleet as one sideways move (f-statue.html; Trevor, 2026-10-20). On screens with
   room for each at full size the chapter pins; the pipeline holds, slides off to the left while the fleet
   comes in from the right, and the fleet holds before the page scrolls on. depth.js sets the run's height and
   --px, the track's offset. The fleet stands still in its panel (fleet.js skips its own glide here).
   Elsewhere, or with motion off, the two stack as before. */
.pan{position:relative;z-index:1}
.pan-on .pan__pin{position:sticky;top:0;height:100svh;overflow:clip}
.pan-on .pan__track{display:flex;width:200vw;height:100%;translate:var(--px,0px) 0;will-change:translate}
.pan-on .pan__track>.sec{flex:0 0 100vw;max-width:none;height:100%;margin:0;display:flex;flex-direction:column;justify-content:center;
  padding:80px var(--gut) 24px}
.pan-on .pan__track .sh{margin-bottom:28px;max-width:none}
.pan-on .pan__track .sh__title{max-width:none}
.pan-on #system .board{width:min(1240px,100%,calc((100svh - 210px) * 1200 / 780));margin:0 auto}
.pan-on #fleet .glide{height:auto}
.pan-on #fleet .glide__pin{position:static;height:auto;display:block;padding:0}

/* ---- the memory core arrives as a flash that falls to a point and bursts into the graph */
/* the flash lights the memory chapter from behind its title and graph (system.js moves it there) */
.mem__flash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:none}
.depth-on .mem__well{clip-path:circle(var(--br,100%) at 50% 50%);opacity:var(--bo,1)}
.depth-on .mem__well[data-state="error"]{clip-path:none;opacity:1}
/* A lost context leaves its DOM labels behind; the readable fallback needs that space. */
.mem__well[data-state="error"] .cx-core__labels,.mem__well[data-state="error"] .cx-core__tip{display:none}

/* ---- the memory core as a hologram (f-statue.html, #memory[data-holo]; Trevor, 2026-10-20, after the
   holotable in Revenge of the Sith). The section is a full-screen scene in an elven sanctuary of marble arches,
   roses and statues, out of focus: a photograph-like still made for the page, its white marble and gold
   holotable's glass lit blue (assets/ground/sanctuary-*.webp; it replaced a ship's war room, keeping the same
   table in the same place). The room behind the table is darkened in the picture itself, so the graph reads.
   The graph floats over the glass, solid, in the first table's blue (rgb(119 190 253)), inside a faint beam, and
   its labels take the same blue. No scan lines (Trevor: "not CCTV").
   The scene (Trevor, 2026-10-20: "the whole screen stop on this elven screen… it fades in… locks in the center
   with the memory core popping out… then it fades out"): the section is one screen tall and the room fills it
   edge to edge, no fades at its top or foot. With motion (depth.js, html.scene-on) the chapter starts a screen
   early, over the end of the fleet's run, and its section sticks for 2.3 screens: the screen dips to black as
   the fleet slides away beneath it, the room comes up out of the dark, holds while the table lights and the
   graph rises, and goes back into the dark before the creative chapter cuts in. Without motion it is simply
   one screen, lit.
   Geometry: --R0 is the room above the glass, from the top of .mem; system.js sizes and places the picture
   (its glass line, height and table width come with the <img>) so the glass lands --R below the top of .mem and
   the picture covers the whole section, growing the picture a little or moving the glass if the screen's shape
   needs it (it then sets --R). --iw is the width the table is measured from: the table is .6016 of it, as on the
   first, 16:9 still. The graph is framed in a band (system.js) whose foot sits --sink below the glass's far
   edge and whose height is --gscale times the room above the glass, so it stands on the table, a little
   narrower than the glass (Trevor: smaller and lower, part of the table). The well itself reaches --lift above
   and --drop below that band, so nothing clips as the clusters swing forward.
   The entrance (system.js): .is-dark comes off, the beam rises, and the graph is uncovered from the glass
   upward (--br) as it opens out of the sphere; the room itself stays as it is, no flicker. Without the
   entrance (reduced motion, Pause, no WebGL) the graph is simply there. */
.mem--holo{--holo:119 190 253;--iw:max(calc(100svh * 1.75),100vw);--ih:calc(var(--iw) * .5625);--R0:max(380px,48svh);--R:var(--R0);
  --lift:80px;--drop:150px;--sink:12px;--gscale:1.05}
/* the section is the screen: the title near its top, the graph and the table under it; the picture is cut at
   the section's edges */
/* (the large viewport: with a phone's address bar tucked away the room still reaches the screen's foot) */
#memory[data-holo]{max-width:none;height:100vh;height:100lvh;min-height:600px;overflow:clip;padding-top:clamp(72px,10svh,120px);padding-bottom:0;box-sizing:border-box}
#memory[data-holo]>.sh{position:relative;z-index:1;margin-bottom:clamp(24px,4svh,48px)}
/* (three classes: beats the plain graph's heights here and in style.css at every width) */
.ch .mem.mem--holo{height:calc(var(--R) + var(--ih) * .36);min-height:0}
@media (max-width:700px){
  .mem.mem--holo{--iw:175vw;--R0:96vw;--lift:0px;--drop:48px;--sink:0px;--gscale:.9;margin-top:16px}
  #memory[data-holo]{padding-top:88px}
}
/* a tablet held upright: the table sized to the width, as on a phone (and the 3:4 picture) */
@media (max-aspect-ratio:1/1) and (min-width:701px){.mem.mem--holo{--iw:175vw}}
/* the renderer fits a quantile of the cloud; a shallower band also keeps its outer records inside a tablet */
@media (min-width:701px) and (max-width:900px){.mem.mem--holo{--gscale:.84}}
.holo{position:absolute;inset:0;z-index:-1;pointer-events:none}
.holo picture{display:contents}
/* placed by system.js; this is where it would sit without it (the computer picture, centred on its glass) */
.holo__room{position:absolute;left:50%;top:calc(var(--R) - var(--iw) * .39);width:var(--iw);max-width:none;height:calc(var(--iw) * .75);translate:-50% 0}
/* where the layout puts the glass (--R0, and --R once system.js has placed the picture), for system.js to read */
.holo__probe{position:absolute;left:0;top:var(--R);width:var(--iw);height:0;visibility:hidden}
.holo__probe--base{top:var(--R0)}
/* the room is always lit, and never flickers (Trevor, 2026-10-20: "remove the flash… no flashing"): the scene's
   fade from black is the only change of light, and only the beam and the core wait for the entrance */
/* the beam: from the glass up through the graph, widening as it rises, its sides feathered; as wide as the
   table (--tw, set by system.js) */
.holo__beam{position:absolute;left:50%;top:-6%;width:calc(var(--tw, calc(var(--iw) * .6016)) * 1.03);height:calc(var(--R) + var(--ih) * .04 + 6%);
  translate:-50% 0;clip-path:polygon(20% 100%,80% 100%,100% 0,0 0);transform-origin:50% 100%;
  background:linear-gradient(to top,rgb(var(--holo) / .2),rgb(var(--holo) / .07) 45%,rgb(var(--holo) / 0) 92%);mix-blend-mode:screen;
  -webkit-mask:linear-gradient(90deg,transparent 6%,#000 34%,#000 66%,transparent 94%);mask:linear-gradient(90deg,transparent 6%,#000 34%,#000 66%,transparent 94%);
  transition:scale .8s cubic-bezier(.2,.7,.2,1) .35s,opacity .8s ease .35s}
.mem--holo.is-dark .holo__beam{scale:1 0;opacity:0;transition:none}
/* the graph stands on the glass, inside the beam */
.mem--holo .mem__well{inset:calc(var(--lift) * -1) 0 auto;height:calc(var(--R) + var(--ih) * .035 + var(--lift) + var(--drop))}
.depth-on .mem--holo .mem__well{clip-path:inset(calc(100% - var(--br,100%)) 0 0 0)}
.depth-on .mem--holo .mem__well[data-state="error"]{clip-path:none}
/* the colour matrix in main.js keeps a softened share of each cluster's own colour over a pale version of the
   glass's blue, so the clusters differ a little and the whole reads bright and near white, in the table's light */
.mem--holo .cx-gl__canvas{filter:url(#holoBlue)}
.mem--holo .mem__well[data-ui] .cx-core__label{border-color:rgb(var(--holo) / .55);background:rgb(3 12 26 / .72);color:#e6f2ff}
.mem--holo .mem__well[data-ui] .cx-core__label-m{color:rgb(var(--holo))}
.mem--holo .mem__well[data-ui] .cx-core__label.is-core{border-color:rgb(var(--holo))}
.mem--holo .mem__well[data-ui] .cx-core__leader{background:rgb(var(--holo) / .8)}
/* the sanctuary's own chapter (the key keeps its first name, "ship"): black, no ground of its own (the still is
   the ground), and no diagonal: it fades */
.ch[data-ground="ship"]{background:#020304}
.ch[data-ground="ship"] .ch__ground{display:none}
.ch[data-scene]{margin-top:0;padding-top:0}
/* the scene with motion: the chapter starts a screen early, over the end of the fleet's run (it is see-through
   until its section darkens the screen, and lets the pointer through to the fleet), and its section sticks: the
   section is the dark (depth.js fades it in), and its title and room fade in and out over it */
.scene-on .ch[data-scene]{height:330svh;margin-top:-100svh;background:none;pointer-events:none}
.scene-on .ch[data-scene]>.sec{position:sticky;top:0;opacity:0;background:#020304;will-change:opacity}
.scene-on .ch[data-scene]>.sec>*{opacity:0}

/* the sign follows the core closely: no empty band between them */
#memory{padding-bottom:0}

/* ---- the dot-matrix sign that opens the AI systems chapter, over the trading cards */
.dots__stage{display:grid;place-items:center;padding:var(--gap) 0 calc(var(--gap)*.75)}
/* two lines at every width: "AI systems that / empower the user" */
.dots__line{font:400 clamp(40px,8.4vw,150px)/.88 var(--cond);letter-spacing:-.03em;text-transform:uppercase;text-align:center;max-width:17ch;text-wrap:balance}
/* Keep the full second line inside the gutters on the smallest supported phones. */
@media (max-width:389px){.dots__line{font-size:clamp(32px,10.26vw,40px)}}
.dots__w{display:inline-block;padding:.04em 0;
  -webkit-mask:var(--dot) 0 0/var(--ds,.06em) var(--ds,.06em) repeat,var(--solid) 0 0/calc(var(--w,1)*100%) 100% no-repeat;
  mask:var(--dot) 0 0/var(--ds,.06em) var(--ds,.06em) repeat,var(--solid) 0 0/calc(var(--w,1)*100%) 100% no-repeat}
.depth-on .dots{height:190vh}
.depth-on .dots__stage{position:sticky;top:0;height:100svh;padding:0 0 8vh}
/* the sign's stage starts inside its chapter's diagonal (that band of the stage is empty anyway),
   so the memory core and the sign sit one screen apart, not one and a half */
.dots{margin-top:calc(var(--cutH)*-1)}
/* the core fills the screen: full bleed, nearly the full height */
#memory{max-width:none}
@media (min-width:701px){.ch .mem{height:max(520px,calc((100svh - 150px) * .84));margin:0 calc(var(--gut) * -1)}}

/* ---- each creative piece's video drifts inside its frame */
.film__frame{overflow:hidden}
.depth-on .film__frame>video{scale:calc(1.14 - var(--f,0)*.14)}

/* ---- the figures under the creative work: three since the client-growth figure came out (Trevor, 2026-10-20) */
#creative .proof--four{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){#creative .proof--four{grid-template-columns:1fr}}

/* ---- the music button is a live visualizer (main.js; Trevor, 2026-10-20): five bars that move with the
   music while it plays (main.js scales them from the spectrum) and lie low when it is off. A click toggles it */
.pill--music{width:64px;padding:0;justify-content:center}
.eq{display:flex;align-items:center;gap:3px;height:18px}
.eq i{display:block;width:3px;height:100%;border-radius:2px;background:currentColor;scale:1 .16;transition:scale .3s var(--ease)}
.pill--music.is-on .eq i{transition:scale .08s linear}

/* ---- under the film's name, the three references it was made from, small (Trevor, 2026-10-20) */
.film__sheets{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.film__sheets li{display:grid;gap:6px}
.film__sheets img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:var(--abyss)}
.film__sheets span{font:400 13px/1.2 var(--prose);color:var(--mute)}

/* ---- the creative work, one piece at a time (Trevor, 2026-10-21): every piece in a container like the film's,
   its video on the left and its name, what it is and its link on the right. With motion each has a screen of
   its own that sticks, so the next piece slides up and covers the one in the middle, which sinks back a little
   and dims (depth.js sets --c, 0 to 1, and its scale); the chapter's picture fades to a still of the piece on
   top (main.js) and the scroll settles on it (depth.js). A screen under 560px tall cannot hold a piece, so
   there they follow one another; without motion they are a list */
.show{display:grid;gap:48px;margin-bottom:48px}
.show .film{margin:0}
.show__v{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--abyss)}
.film__go{align-self:flex-start;margin-top:8px;background:var(--void)}
.depth-on .show{gap:0}
.depth-on .show__slot{min-height:100svh;display:grid;align-content:center;padding:84px 0 24px}
@media (min-height:560px){.depth-on .show__slot{position:sticky;top:0}}
/* a screen rising over the piece before it lets the pointer through its empty part to that piece */
.depth-on .show__slot{pointer-events:none}
.depth-on .show__card{pointer-events:auto}
.depth-on .show__card.is-under{opacity:0;pointer-events:none}
.show__card::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;background:#000;opacity:calc(var(--c,0) * .5);pointer-events:none}
/* the section's title is for screen readers: the sign above and each piece's own name say the rest */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- built: the cards travel sideways along an ember trace while the section is pinned */
/* the title rides in the pin above the cards, and the two stand centred on the screen together (Trevor, 2026-10-20) */
.run-on .travel__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:84px;padding-bottom:20px}
.run-on #built{max-width:none;padding-left:0;padding-right:0}
.run-on .travel__pin>.sh{width:100%;max-width:var(--max);margin:0 auto 44px;padding:0 var(--gut)}
.run-on .travel__track{align-self:flex-start}
.run-on .travel__track{position:relative;display:flex;align-items:center;gap:clamp(28px,3.2vw,56px);width:max-content;padding:0 max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));translate:var(--rx,0px) 0;will-change:translate}
/* ---- built: six trading cards (main.js), after jjettas.com. A card is one finished picture, its
   frame painted in; the page adds only the rounded cut, a drop shadow, the turn and the tilt. The
   caption (title, number, line) sits under the card and arrives as the card turns face up.
   --fl (depth.js): 0 face down, 1 face up. --hx/--hy: the pointer tilt. */
.tc-hand{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:48px 28px;perspective:1600px}
.tc{position:relative;display:flex;flex-direction:column;gap:18px;padding:0;background:none;--fl:1;--hx:0deg;--hy:0deg}
.tc:hover{background:none}
.tc__float{position:relative;aspect-ratio:900/1355}
.tc__in{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--hx)) rotateY(calc(var(--hy) - (1 - var(--fl)) * 180deg));
  translate:0 calc(sin(var(--fl) * 180deg) * -44px);scale:calc(1 + sin(var(--fl) * 180deg) * .06);
  transition:transform .5s var(--ease)}
.tc__face{position:absolute;inset:0;border-radius:4%/2.7%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.tc__face img{display:block;width:100%;height:100%;object-fit:cover}
.tc__face--back{transform:rotateY(180deg);display:none}
/* the back exists only where cards are dealt; lying face up in a grid there is nothing to turn */
.run-on .tc__face--back{display:block}
.run-on .tc.is-up .tc__face--back{visibility:hidden}
.tc__brand{position:absolute;left:0;right:0;bottom:16%;text-align:center;font:400 clamp(24px,2.2vw,34px)/1 var(--cond);letter-spacing:.04em;text-transform:uppercase;color:#f3e2b0}
/* the light on a card turned towards it */
.tc__glare{position:absolute;left:var(--gx,50%);top:var(--gy2,30%);width:70%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:rgba(255,255,255,.5);filter:blur(36px);mix-blend-mode:soft-light;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.tc:hover .tc__glare{opacity:.9}
.tc__cap{display:grid;gap:6px;text-align:center;justify-items:center}
.tc__name{font:400 clamp(22px,1.7vw,28px)/1 var(--cond);letter-spacing:.03em;text-transform:uppercase;color:var(--white)}
.tc__line{font:400 16px/1.45 var(--prose);color:rgba(255,255,255,.82);max-width:34ch}
/* Compaytence Chat's line is followed by the marks of the networks it brings together (system.js fills them) */
.tc__logos{display:flex;justify-content:center;gap:12px;margin-top:4px}
.tc__logos svg{width:20px;height:20px;fill:rgba(255,255,255,.82)}
.tc__logos img{width:20px;height:20px}

/* the dealt run (wide screens): cards at their own heights and tilts, face down until they travel in */
.run-on .travel__track.tc-hand{display:flex;align-items:center;gap:clamp(70px,7vw,140px);perspective:1600px}
.run-on .travel__track>.tc{flex:none;width:clamp(220px,calc((100svh - 420px) * 900 / 1355),330px);
  translate:0 var(--oy,0);rotate:calc(var(--r0,0deg) + var(--v,0) * 1deg)}
.run-on .travel__track>.tc:nth-child(3n+1){--oy:-3vh;--r0:-2.4deg}
.run-on .travel__track>.tc:nth-child(3n+2){--oy:3vh;--r0:2deg}
.run-on .travel__track>.tc:nth-child(3n){--oy:-1vh;--r0:-1deg}
.run-on .tc__cap{opacity:var(--fl);translate:0 calc((1 - var(--fl)) * 14px)}
.run-on .tc__line{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.run-on .tc__float{animation:bob 5.5s ease-in-out infinite;animation-delay:calc(var(--b) * -1.37s)}
/* the bob runs only while the cards are on screen (depth.js marks the run): left running it cost work on every
   frame all the way down the page (2026-10-20 profile) */
.run-on .tc__float{animation-play-state:paused}
.run-on .travel.is-near .tc__float{animation-play-state:running}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
.run-on .tc__in{transition:none}
@media (max-height:680px){
  .run-on .tc__line,.run-on .tc__logos{display:none}
  .run-on .travel__track>.tc:nth-child(n){--oy:0px}
}
.motion-off .tc__float{animation:none}
/* phones: one card at a time, at full height, with its caption */
@media (max-width:560px){.tc-hand{grid-template-columns:1fr;justify-items:center;gap:56px}.tc{width:min(80vw,330px)}}
@media (prefers-reduced-motion:reduce){.tc__float{animation:none}.tc__in{transition:none}}

/* ---- career rows weave in from alternate sides */
.depth-on .career>li{translate:var(--sx,0px) 0}
/* ---- career: each row is a button that opens onto what the job was, one open at a time (main.js;
   Trevor, 2026-10-20). The row keeps the old three-column line; the details open under it. */
.career>li{display:block;padding:0;overflow:hidden}
.career__row{display:grid;grid-template-columns:180px 1.4fr 1fr 20px;gap:24px;align-items:baseline;width:100%;padding:24px;border:0;border-radius:10px;
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.career__row:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
.career__chev{width:10px;height:10px;align-self:center;justify-self:end;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  rotate:45deg;translate:0 -3px;transition:rotate .35s var(--ease),translate .35s var(--ease)}
.career>li.is-open .career__chev{rotate:225deg;translate:0 3px}
.career__more{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s var(--ease),visibility 0s .45s}
.career>li.is-open .career__more{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s var(--ease),visibility 0s}
.career__inner{overflow:hidden;min-height:0}
.career__more ul{display:grid;gap:10px;margin:0;padding:0 68px 26px 228px;list-style:none}
.career__more li{position:relative;display:block;padding:0 0 0 18px;border-radius:0;background:none;font:400 16px/1.5 var(--prose);max-width:72ch}
.career__more li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:currentColor}
@media (max-width:900px){
  .career__row{grid-template-columns:1fr 20px;gap:8px;padding:20px}
  .career__row>span{grid-column:1}
  .career__chev{grid-column:2;grid-row:1}
  .career__more ul{padding:0 20px 20px}
}
@media (prefers-reduced-motion:reduce){.career__more,.career__chev{transition:none}}
.motion-off .career__more,.motion-off .career__chev{transition:none}

/* ---- the close: the name rises letter by letter off the board */
.foot__name{overflow:hidden;padding:.08em 0 .02em}
.foot__name span{display:inline-block;translate:0 calc((1 - var(--k,1))*108%)}

@media (max-width:900px){
  .mq--names .mq__set{font-size:clamp(44px,13vw,80px)}
}
/* the old systems grid let the last card span two columns; a hand of cards never does */
.grid.tc-hand>.prog.tc:last-child{grid-column:auto}
/* a dragged card rises above the other lanes (each lane is its own layer) */
.fx__lane:has(.is-drag){z-index:6}