/* Pinned ability chapters. Full-bleed on landscape; framed 16:9 on portrait. One device per chapter (strip.js). */
:root{--cream:#e9e1d4;--cream-ink:#211e1b;--night:#12100e}
.strip{--px-per-frame:7;--ease-out:cubic-bezier(.23,1,.32,1);--chrome:var(--ink);--chrome-muted:var(--muted);--word:var(--amber);
  position:relative;isolation:isolate;overflow:clip;height:calc(100vh + var(--frames,480) * var(--px-per-frame) * 1px);background:var(--night)}
@supports(height:100svh){.strip{height:calc(100svh + var(--frames,480) * var(--px-per-frame) * 1px)}}
.strip[data-device=cut]{--chrome:var(--cream-ink);--chrome-muted:rgb(33 30 27 / 55%);--word:#7a4a08;background:var(--cream)}
.strip .pin{position:sticky;top:0;height:100vh;height:100svh;height:100dvh;display:grid;grid-template-rows:auto 1fr auto auto;overflow:hidden;
  padding:clamp(108px,14vh,140px) var(--gutter) clamp(16px,3vh,32px);color:var(--chrome)}
/* The stage fills the pin; the chrome (title, word, label strip) sits above it with a quiet scrim. */
.strip .stage{position:absolute;inset:0;z-index:0;overflow:hidden;container-type:size;background:var(--night)}
.strip[data-device=cut] .stage{background:var(--cream)}
.strip .pin::before,.strip .pin::after{content:'';position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.strip .pin::before{top:0;height:34%;background:linear-gradient(rgb(8 7 6 / 62%),transparent)}
.strip .pin::after{bottom:0;height:30%;background:linear-gradient(transparent,rgb(8 7 6 / 66%))}
.strip[data-device=cut] .pin::before,.strip[data-device=cut] .pin::after{display:none}
.strip header,.strip .ticks,.strip .trust{position:relative;z-index:2}
.strip header{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
/* Phones: the word keeps a fixed share of the row, so the title no longer re-wraps (one line, two lines) each time the word
   changes width (Jesse, 2026-11-07: the change felt abrupt). Knob: the 44%. */
@media(max-width:640px){.strip header .word{flex:0 0 44%;min-width:0}}
.strip h2{font:500 clamp(34px,5vw,76px)/.95 var(--f-display);letter-spacing:-.045em}
.strip .word{font:500 clamp(24px,3.6vw,56px)/.95 var(--f-display);letter-spacing:-.04em;text-align:right;min-width:6ch;
  color:var(--word);display:grid;--word-glint:rgb(255 238 210)}
/* A word change sweeps like the home hero's backtype (Jesse, 2026-11-07: the old cut was too abrupt): a soft band runs left
   to right, erasing the old word ahead of it and revealing the new one behind, with a glint on its edge. strip.js runs it
   (WORD_MS). The band is the soft stop in these masks, 45%-55% of a mask 2.5 boxes wide, so it runs from a quarter box
   before to a quarter after, like the hero. Old and new share one box (the wider word's), so one band crosses both. */
.strip[data-device=cut] .word{--word-glint:var(--amber)}
.strip .word .w{grid-area:1/1;text-align:right}
.strip .word .w.arriving,.strip .word .w.leaving{-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.strip .word .w.arriving{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%)}
.strip .word .w.leaving{-webkit-mask-image:linear-gradient(90deg,transparent 45%,#000 55%);mask-image:linear-gradient(90deg,transparent 45%,#000 55%)}
.strip .word .w.glint{color:transparent;pointer-events:none;
  background:linear-gradient(90deg,transparent 47%,var(--word-glint) 50%,transparent 53%) 100% 0/250% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text}
.strip .pin.bare header,.strip .pin.bare .ticks,.strip .pin.bare .trust{opacity:0}
.strip .pin.bare::before,.strip .pin.bare::after{opacity:0}
.strip .beat{position:absolute;inset:0;display:none}
.strip .beat.on{display:block}
/* The scene is a 16:9 box that covers the stage, so % coordinates stay glued to the picture at any screen shape. */
.strip .scene{position:absolute;left:50%;top:50%;width:max(100cqw,calc(100cqh * 16 / 9));aspect-ratio:16/9;transform:translate(-50%,-50%)}
.strip .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.strip .panel{display:grid;place-content:center;gap:10px;padding:24px;text-align:center;background:var(--cream);color:var(--cream-ink);
  background-image:linear-gradient(135deg,rgb(33 30 27 / 4%) 25%,transparent 25% 50%,rgb(33 30 27 / 4%) 50% 75%,transparent 75%);background-size:28px 28px}
.strip .panel.night,.tabs-stage .panel.night{background-color:var(--night);color:rgb(241 237 230 / 50%);
  background-image:linear-gradient(135deg,rgb(241 237 230 / 4%) 25%,transparent 25% 50%,rgb(241 237 230 / 4%) 50% 75%,transparent 75%)}
.panel-tag{font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.panel-text{font:500 clamp(14px,1.6vw,22px)/1.35 var(--f-display);letter-spacing:-.02em;max-width:34ch;margin-inline:auto}

/* SCAN (Eyes): plain night photo, with KIN's sight revealed behind an amber hairline that sweeps left to right. */
.strip .beat.title{background:#000;display:none;place-items:center}
.strip .beat.title.on{display:grid}
.strip .beat.title h1{white-space:normal;max-width:18ch;text-align:center;font:500 clamp(32px,5.4vw,84px)/1.02 var(--f-display);letter-spacing:-.045em;color:var(--ink)}
.strip .plain,.strip .sensed{position:absolute;inset:0;overflow:hidden}
.strip .plain img.photo{filter:brightness(.26) saturate(.6)}
.strip .sensed .panel.night{background-color:#262320;color:rgb(241 237 230 / 80%)}
.strip .sweep{position:absolute;top:0;bottom:0;width:1px;background:var(--amber);box-shadow:0 0 14px 1px rgb(255 196 107 / 55%);z-index:4}
.strip .sensed.radar .glow{display:none}
.strip .box{position:absolute;border:1px solid var(--amber);box-shadow:0 0 18px rgb(255 196 107 / 35%)}
.strip .glow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgb(255 196 107 / 85%),rgb(255 150 50 / 38%) 55%,transparent);mix-blend-mode:screen}
.strip .sensed.thermal .glow{background:radial-gradient(closest-side,rgb(255 255 255 / 95%),rgb(255 196 107 / 70%) 45%,rgb(255 120 30 / 25%) 75%,transparent)}
.strip .readout{position:absolute;transform:translateY(calc(-100% - 10px));display:grid;gap:3px;padding:7px 10px 6px;border-radius:4px;background:rgb(20 15 11 / 78%);border:1px solid rgb(255 196 107 / 22%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:400 clamp(10px,1.05vw,14px)/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber);width:max-content}
/* Every sense (Infrared, Thermal, Radar, Memory) shares one look: the photo through a heat-style colour map (strip.js infraredFilter) with faint scan lines. */
.strip .sensed img.photo{filter:url(#kin-ir)}
.strip .sensed .scene::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgb(0 0 0 / 14%) 0 1px,transparent 1px 3px)}
.strip .radar{position:absolute;overflow:visible}
/* Memory: a snapshot of what KIN saw, in a rounded corner square (same look as Perception's "What changed" snapshot) */
.strip .snap{position:absolute;z-index:3;right:clamp(12px,2.2vw,32px);bottom:clamp(120px,15vh,170px);width:clamp(104px,17%,220px);aspect-ratio:1;margin:0;border-radius:6px;overflow:hidden;box-shadow:0 10px 30px rgb(0 0 0 / 45%);animation:snap-in .6s .5s cubic-bezier(.23,1,.32,1) backwards;pointer-events:none}
.strip .snap::after{content:'';position:absolute;inset:0;border:1px solid rgb(255 196 107 / 55%);border-radius:inherit}
.strip .snap img{display:block;width:100%;height:100%;object-fit:cover}
.strip .snap figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;background:linear-gradient(transparent,rgb(0 0 0 / 72%));font:400 clamp(8px,.7vw,10px)/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
@keyframes snap-in{from{opacity:0;transform:translateY(8px) scale(.96)}}
@media(max-width:640px),(max-aspect-ratio:1/1){.strip .snap{right:8px;bottom:8px;width:76px}.strip .snap figcaption{padding:12px 5px 4px}}   /* on a phone the photo is a small band: shrink the snapshot into its corner, clear of the ring */
@media(prefers-reduced-motion:reduce){.strip .snap{animation:none}}
.strip .radar path,.strip .radar circle{fill:none;stroke:var(--amber);stroke-width:1.4;filter:drop-shadow(0 0 4px rgb(255 196 107 / 70%))}
.strip .radar .baby-glow{mix-blend-mode:screen;filter:none;animation:glow-breathe 1.9s ease-in-out infinite}
.strip .radar .crib path{stroke-width:1.1;opacity:.85}
/* Breathing: one breath every 1.9 s (infant pace). Rings expand from the baby and fade; the baby scales 2.5%. */
.strip .radar .baby{transform-box:fill-box;transform-origin:50% 60%;animation:breathe 1.9s ease-in-out infinite}
.strip .radar .ring-pulse{transform-box:fill-box;transform-origin:center;opacity:0;animation:ring-out 1.9s ease-out infinite}
@keyframes glow-breathe{0%,100%{opacity:.55}50%{opacity:.95}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes ring-out{0%{transform:scale(.12);opacity:.85}100%{transform:scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.strip .radar .baby,.strip .radar .ring-pulse,.strip .radar .baby-glow{animation:none}.strip .radar .baby-glow{opacity:.75}.strip .radar .ring-pulse:first-child{opacity:.45;transform:scale(.45)}}
.strip .ring{position:absolute;width:4.2%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:2px solid rgb(255 196 107 / 85%);box-shadow:0 0 16px rgb(255 196 107 / 45%);background:rgb(255 196 107 / 10%)}

/* CUT (Hands): full-bleed cream, image locked left so the arm bleeds off the right, dark ink type. */
.strip[data-device=cut] .photo,.strip[data-device=cut] video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 50%}
.strip[data-device=cut] video{z-index:3;pointer-events:none}
/* Body beats with a clip: the clip covers its still, full frame */
.strip[data-device=travel] video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;pointer-events:none}

/* TRAVEL (Body): the world moves past the foot. The pan element is oversized so there is room to move. */
.strip .pan{position:absolute;left:0;top:0;width:128%;height:128%;will-change:transform}
.strip .pan.x{height:100%}
.strip .pan.y{width:100%}
.strip .pan .photo{object-position:0 0}
.strip .pan.y .photo{object-position:50% 100%}
.strip .elev{position:relative;height:64px;margin:6px 0 30px}
.strip .elev svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.strip .elev-line{fill:none;stroke:rgb(241 237 230 / 75%);stroke-width:1.5}
.strip .elev-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px rgb(255 196 107 / 70%)}
.strip .elev .tick{position:absolute;transform:translate(-4px,10px);width:auto;padding:0}
.strip .elev .tick::before{display:none}

/* Label strip (Eyes, Hands, Mind) */
.strip .ticks{position:relative;height:64px;align-self:end}
.strip[data-device=travel] .ticks{height:auto}
.strip .line{position:absolute;left:0;right:0;top:14px;height:1px;background:color-mix(in srgb,var(--chrome) 28%,transparent)}
.strip .fill{position:absolute;left:0;top:14px;height:1px;width:0;background:var(--chrome);opacity:.7}
.strip .tick{position:absolute;top:0;padding-right:6px;font:400 11px/1.35 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--chrome-muted);transition:color 200ms var(--ease-out)}
.strip .tick::before{content:'';display:block;width:1px;height:11px;margin:9px 0 8px;background:currentColor}
.strip .tick.on{color:var(--chrome)}
.strip .tag{display:block;font-style:normal;font-size:9px;letter-spacing:.14em;opacity:.75}
.strip .trust{font:400 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);padding-top:6px}
#chapter-marker{position:fixed;z-index:20;left:var(--gutter);top:82px;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);opacity:0;transition:opacity 160ms var(--ease-out);pointer-events:none}
#chapter-marker.on{opacity:1}
#chapter-marker{display:none}   /* label under the logo removed (Jesse, 2026-10-31); strip.js still tracks chapters for the cream nav */

/* INSIDE KIN: the section fills the viewport exactly, so the visitor never lands half in it. A slim right gutter holds the
   chapter arrows, clear of the exhibit's own control panel. */
.exhibits-chapter{position:relative;z-index:3;scroll-snap-align:start;scroll-snap-stop:always;height:100vh;height:100svh;height:100dvh;background:var(--paper);color:var(--ink)}
.inside-stage{position:absolute;inset:0;overflow:hidden;background:var(--paper);display:grid;place-items:center}
/* The 3D frame keeps the screen's full height (100lvh) while a phone's toolbar slides, so it is never resized mid-scroll: a
   resize left the canvas short of its frame (a line under the hand) and re-framed the hand (Jesse, 2026-11-07). The strip
   hidden under the toolbar is clipped; the exhibit lifts its bottom bars by that much (--kin-cut, exhibits/build.py). */
.exhibit-frame{position:absolute;inset:0 0 auto;width:100%;height:100%;height:100lvh;border:0;display:block;background:var(--paper);color-scheme:dark;transition:opacity 240ms ease-out}
.exhibit-note{font:400 10px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;padding:16px}
.chapter-arrows{position:absolute;z-index:5;right:8px;top:50%;transform:translateY(-50%);display:grid;gap:8px}
.chapter-arrow{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgb(241 237 230 / 32%);background:rgb(12 11 10 / 72%);color:var(--ink);cursor:pointer;
  transition:border-color 160ms var(--ease-out),color 160ms var(--ease-out)}
.chapter-arrow:hover{border-color:var(--amber);color:var(--amber)}
.chapter-arrow:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* Portrait and narrow screens: full screen like desktop (Jesse, 2026-11-02: the framed 16:9 band felt small). The crop
   centres on each beat's subject, --fx (where it sits across the shot, 0 left … 1 right), and never shows an edge. */
@media(max-width:640px),(max-aspect-ratio:1/1){
  .strip .pin{padding-top:112px}
  .strip .beat{--sw:max(100cqw,calc(100cqh * 16 / 9));--crop:clamp(calc(100cqw - var(--sw)),calc(50cqw - var(--fx,.5) * var(--sw)),0px)}
  .strip .scene{left:var(--crop);transform:translateY(-50%)}
  .strip[data-device=cut] .photo,.strip[data-device=cut] video,.strip[data-device=travel] video,.strip[data-device=travel] .photo{object-position:var(--crop) 50%}
}
@media(prefers-reduced-motion:reduce){.strip .word,#chapter-marker,.strip .tick{transition:none}}
.strip .scan-dots{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* Rooms with a depth map (scan-room.js): the canvas replaces the photo; the marks ride on top and follow the object. */
.strip .scan-room{position:absolute;inset:0;width:100%;height:100%;display:block}
.strip .scene.has-room > img.photo{visibility:hidden}
.strip .marks{position:absolute;inset:0;will-change:transform}
.strip .no-reveal .plain,.strip .no-reveal .sweep{display:none}

/* Phones: the pinned chapters fill the screen as it is now (100dvh above), not its smallest height, so no blank strip
   shows once Safari's toolbar slides away. The picture inside keeps the full height (100lvh) and is only clipped, so it never
   re-scales as the toolbar slides (the Second sight room grew and shrank, Jesse 2026-11-07).
   Scroll snapping only while Inside KIN is within a screen (strip.js sets html.kin-near): page-wide, it stopped scrolls dead
   and jumped the page whenever the toolbar slid, even at the top; without it, Inside KIN no longer locked in on iPhone
   (Jesse, 2026-11-07, both). */
.strip .stage{bottom:auto;height:100%;height:100lvh}
@media(pointer:coarse){html.kin-near{scroll-snap-type:y proximity}}