/* The Lexicon: the demos, and the frame that holds them (entrance and term pages).
   Every term page loads this one file; a demo's rules only match on its own page. */
:root{
  /* A looping alternate pan needs a symmetric curve; the house curve's fast
     departure lurches when it reverses. */
  --pan:cubic-bezier(.37,0,.63,1);
  --vf:'Geist Variable','Switzer',system-ui,sans-serif;
  /* Vertical setting stands on a square em. Measured at 100px in a
     vertical-rl box: this face advances exactly 1em per glyph in all three
     scripts; LXGW WenKai wanders 0.99–1.18em and Smiley Sans Oblique
     advances 0. One face, three scripts, one grid. */
  --song:'Source Han Serif SC VF','Source Han Serif SC','Songti SC',serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:15px;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-weight:400}

.wrap{max-width:1380px;margin:0 auto;padding-inline:clamp(18px,4.5vw,64px)}

/* ── reading progress · specimen 01 lives here too ─────────── */
.readbar{position:fixed;inset:0 0 auto 0;height:2px;z-index:80;background:var(--accent);
  transform-origin:0 50%;transform:scaleX(0);
  animation:track linear both;animation-timeline:scroll(root)}
@keyframes track{to{transform:scaleX(1)}}

/* ── sticky index ──────────────────────────────────────────── */
/* the bar's height is one number: stages that pin under it read the same --bar */
:root{--bar:46px}
.topnav{position:sticky;top:0;z-index:70;
  background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topnav .inner{max-width:1380px;margin:0 auto;padding:0 clamp(18px,4.5vw,64px);height:calc(var(--bar) - 1px);box-sizing:border-box;
  display:flex;align-items:center;gap:10px 26px}
.brand{font-family:var(--display);font-size:17px;letter-spacing:-.01em;margin-right:6px;transition:color .3s var(--settle)}
.brand:hover{color:var(--accent)}
.brand i{font-style:italic;color:var(--accent)}
.theme[data-inline]{margin-left:4px}
/* one pinned line: the full contents sit in the header */
.navfam{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--dim);padding:2px 0;
  border-bottom:1px solid transparent;
  transition:color .3s var(--settle),border-color .3s var(--settle)}
.navfam i{font-style:normal;color:var(--accent)}
.navfam:hover{color:var(--ink);border-bottom-color:var(--accent)}
.navtail{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim)}

/* ── catalogue contents ────────────────────────────────────── */
/* the largest family takes a double column and splits its own list in two */
.index{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(20px,3vw,46px);
  border-top:1px solid var(--line);margin-top:clamp(28px,5vh,54px);padding-top:21px}
/* multi-column has no effect on a grid container — this ol must go back to block */
.idxcol.wide ol{display:block;columns:2;column-gap:clamp(18px,2.4vw,40px)}
.idxcol.wide ol li{break-inside:avoid;margin-bottom:6px}
.idxcol h4{margin:0 0 13px;font-weight:400;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  display:flex;gap:9px;align-items:baseline}
.idxcol h4 em{margin-left:auto;font-style:normal;color:var(--dim)}
.idxcol ol{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.idxcol ol a{display:grid;grid-template-columns:21px minmax(0,1fr);gap:8px;align-items:baseline;
  font-size:12.5px;line-height:1.44;color:var(--mid);transition:color .3s var(--settle)}
.idxcol ol a b{font-family:var(--mono);font-weight:400;font-size:9px;color:var(--dim);
  transition:color .3s var(--settle)}
.idxcol ol a:hover{color:var(--ink)}
.idxcol ol a:hover b{color:var(--accent)}

/* ── hero ──────────────────────────────────────────────────── */
header{padding-block:clamp(64px,13vh,150px) clamp(34px,6vh,72px)}
.kicker{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 26px}
h1{font-family:var(--display);font-size:clamp(50px,10.5vw,152px);
  line-height:.84;letter-spacing:-.032em;margin:0}
h1 em{font-style:italic;color:var(--accent)}
.lede{font-size:clamp(16px,2vw,21px);line-height:1.5;color:var(--mid);
  max-width:48ch;margin:32px 0 0;text-wrap:pretty}
.lede b{color:var(--ink);font-weight:500}
.howto{display:flex;flex-wrap:wrap;gap:10px 34px;border-top:1px solid var(--line);
  margin-top:clamp(30px,5vh,56px);padding-top:17px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--dim)}
.howto b{color:var(--accent);font-weight:400}

/* ── family heading ────────────────────────────────────────── */
.famhead{border-top:1px solid var(--accent);padding-top:14px;
  margin-top:clamp(48px,9vh,110px);display:flex;justify-content:space-between;
  align-items:baseline;gap:20px;flex-wrap:wrap;scroll-margin-top:52px}
.famhead h2{font-family:var(--display);font-size:clamp(30px,5vw,58px);
  letter-spacing:-.025em;margin:0;line-height:1}
.famhead p{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}

/* ── specimen frame ────────────────────────────────────────── */
.spec{border-top:1px solid var(--line);padding-block:clamp(40px,7vh,84px);
  display:grid;grid-template-columns:minmax(0,350px) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);align-items:start;scroll-margin-top:52px}
.meta{position:sticky;top:clamp(56px,9vh,84px)}
.idx{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--accent);
  display:block;margin-bottom:13px;text-transform:uppercase}
.name{font-family:var(--display);font-size:clamp(27px,3.4vw,40px);
  line-height:1.02;letter-spacing:-.022em;margin:0;text-wrap:balance}
.aka{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--dim);
  margin:13px 0 0;line-height:1.8}
.aka i{font-style:normal;color:var(--mid)}
.gloss{font-size:16.5px;line-height:1.52;color:var(--ink);
  margin:15px 0 0;text-wrap:pretty}
.how{margin-top:14px}
.how summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);transition:color .3s var(--settle)}
.how summary::-webkit-details-marker{display:none}
.how summary::before{content:'+';width:9px;color:var(--accent)}
.how[open] summary::before{content:'\2212'}
.how summary:hover{color:var(--ink)}
code.api{display:block;font-family:var(--mono);font-size:10.5px;line-height:1.85;
  color:var(--mid);background:var(--raise);border:1px solid var(--line);
  padding:11px 13px;margin-top:10px;white-space:pre-wrap;word-break:break-word;border-radius:2px}
.note{font-size:12.5px;line-height:1.72;color:var(--dim);margin:14px 0 0;max-width:42ch}
.note b{color:var(--mid);font-weight:500}
.note code{font-family:var(--mono);font-size:11px;color:var(--mid)}
.note em{font-style:italic;color:var(--mid)}

.deeper{display:inline-flex;align-items:center;gap:8px;margin-top:15px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mid);border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:color .3s var(--settle),border-color .3s var(--settle)}
.deeper::after{content:'\2192'}
.deeper:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* clip, not hidden: hidden makes the stage a scroll container, and every sticky
   pin and view timeline inside it then measures against a box that never scrolls */
.stage{border:1px solid var(--line);background:var(--raise);position:relative;
  overflow:clip;border-radius:2px}
.tag{position:absolute;top:9px;right:11px;z-index:9;font-family:var(--mono);
  font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  pointer-events:none;mix-blend-mode:difference}

.btn{position:absolute;left:12px;bottom:12px;z-index:6;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink);
  background:color-mix(in srgb,var(--ground) 72%,transparent);border:1px solid var(--line);
  padding:6px 11px;cursor:pointer;border-radius:2px;
  transition:border-color .3s var(--settle),color .3s var(--settle)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.rng{position:absolute;left:12px;right:12px;bottom:12px;z-index:6;width:calc(100% - 24px);
  appearance:none;height:2px;background:color-mix(in srgb,var(--ink) 20%,transparent);
  outline:none;cursor:ew-resize}
.rng::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--accent);cursor:ew-resize;border:2px solid var(--ground)}

/* ── 01 dial ───────────────────────────────────────────────── */
.dial{height:clamp(270px,46vh,400px);display:grid;place-items:center;padding:26px}
.ring{width:min(58vw,clamp(210px,34vh,320px));aspect-ratio:1;border:1px solid var(--line);
  border-radius:50%;position:relative;display:grid;place-items:center}
.hand{position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;
  border-top-color:var(--accent);animation:spin linear both;animation-timeline:scroll(root)}
@keyframes spin{to{transform:rotate(1turn)}}
.pct{font-family:var(--mono);font-size:clamp(32px,5.6vw,62px);letter-spacing:-.04em;
  color:var(--indigo);font-variant-numeric:tabular-nums}

/* ── 02 view timeline rows ─────────────────────────────────── */
.plates{display:grid;gap:11px;padding:14px}
.plate{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:center;
  view-timeline-name:--plate;view-timeline-axis:block}
.plate figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--lift)}
.plate img{width:100%;height:100%;object-fit:cover;
  animation:unveil linear both;animation-timeline:--plate;animation-range:entry 0% cover 45%}
@keyframes unveil{from{opacity:.22;transform:scale(1.16)}to{opacity:1;transform:none}}
.plate .bar{height:2px;background:var(--line);position:relative}
.plate .bar i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;
  transform:scaleX(0);display:block;
  animation:track linear both;animation-timeline:--plate;animation-range:entry 0% exit 100%}
.plate .cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--dim);
  margin-bottom:6px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 03 pin + scrub ────────────────────────────────────────── */
.pinrun{height:280vh;position:relative}
.pinstage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.frame{width:min(86vw,780px);aspect-ratio:3/2;position:relative;overflow:hidden;
  border:1px solid var(--line)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover{position:absolute;inset:0;background:var(--raise);transform-origin:100% 50%}
.flabel{position:absolute;left:0;bottom:-30px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ── 04 parallax ───────────────────────────────────────────── */
.para{height:clamp(290px,48vh,410px);position:relative;overflow:hidden;view-timeline-name:--para}
.lyr{position:absolute;inset:-20% 0;background-size:cover;background-position:center;
  animation-timeline:--para;animation-range:cover 0% cover 100%;animation-timing-function:linear;
  animation-fill-mode:both}
.l1{animation-name:drift1;opacity:.55;filter:blur(1px)}
.l2{animation-name:drift2;mix-blend-mode:screen;opacity:.8}
@keyframes drift1{from{transform:translateY(-10%)}to{transform:translateY(10%)}}
@keyframes drift2{from{transform:translateY(-3.5%)}to{transform:translateY(3.5%)}}
.pcap{position:absolute;inset:auto 0 0 0;padding:16px 18px;z-index:3;
  font-family:var(--display);font-size:clamp(20px,3.3vw,33px);letter-spacing:-.02em;
  background:linear-gradient(transparent,color-mix(in srgb,var(--ground) 88%,transparent));
  animation:drift3 linear both;animation-timeline:--para;animation-range:cover 0% cover 100%}
@keyframes drift3{from{transform:translateY(24px)}to{transform:translateY(-24px)}}

/* ── 05 horizontal ─────────────────────────────────────────── */
.hrun{height:240vh;position:relative}
.hstage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.htrack{display:flex;gap:16px;padding-inline:22px;will-change:transform}
.hcard{flex:none;width:min(64vw,310px)}
.hcard figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--lift)}
.hcard img{width:100%;height:100%;object-fit:cover}
.hcard p{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--dim);margin:9px 0 0}

/* ── 06 snap ───────────────────────────────────────────────── */
.snap{height:clamp(240px,40vh,330px);overflow-y:auto;scroll-snap-type:y mandatory;
  scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
.snap>div{height:100%;scroll-snap-align:start;display:grid;place-items:center;
  border-bottom:1px solid var(--line)}
.snap>div span{font-family:var(--display);font-size:clamp(25px,4.2vw,42px);
  letter-spacing:-.02em;color:var(--mid)}
.snap>div:nth-child(odd) span{color:var(--accent)}

/* ── 07 stacking cards ─────────────────────────────────────── */
.stackrun{padding:14px;margin:0}
.stackrun li{list-style:none;position:sticky;top:72px;margin-bottom:13px}
.stackcard{border:1px solid var(--line);background:var(--ground);padding:16px 18px;
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:15px;align-items:center}
.stackcard figure{margin:0;aspect-ratio:1;overflow:hidden;background:var(--lift)}
.stackcard img{width:100%;height:100%;object-fit:cover}
.stackcard h4{margin:0;font-family:var(--display);font-size:18px;font-weight:400;letter-spacing:-.015em}
.stackcard p{margin:3px 0 0;font-family:var(--mono);font-size:9.5px;color:var(--dim);letter-spacing:.04em}

/* ── 08 velocity skew ──────────────────────────────────────── */
.skew{height:clamp(220px,36vh,300px);display:grid;place-items:center;padding:20px 20px 34px}
.skewinner{display:flex;flex-direction:column;gap:7px;width:100%;
  transform:skewY(calc(var(--vel,0) * -4deg)) scaleY(calc(1 + var(--vel,0) * .1));
  transition:transform .09s linear}
.skewinner i{display:block;height:9px;background:var(--mid);opacity:.5;border-radius:1px}
.skewinner i:nth-child(3n){background:var(--accent);opacity:.85}
.velout{position:absolute;left:0;right:0;bottom:11px;margin:0;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim);
  font-variant-numeric:tabular-nums}
.velout span{color:var(--indigo)}

/* ── 09 blur-up ────────────────────────────────────────────── */
.lqip{aspect-ratio:3/2;position:relative;overflow:hidden;background:var(--lift)}
.lqip .ph,.lqip .full{position:absolute;inset:0;background-size:cover;background-position:center}
.lqip .ph{filter:blur(20px);transform:scale(1.1)}
.lqip .full{opacity:0;transition:opacity .9s var(--settle)}
.lqip.done .full{opacity:1}

/* ── 10 ken burns ──────────────────────────────────────────── */
.kb{aspect-ratio:16/9;background-size:cover;background-position:center;
  animation:kb 20s var(--pan) infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.16) translate(-2.5%,1.8%)}}

/* ── 11 duotone ────────────────────────────────────────────── */
.duo{aspect-ratio:3/2;position:relative;overflow:hidden;isolation:isolate}
.duoBase,.duoTint{position:absolute;inset:0;background-size:cover;background-position:center}
.duoBase{filter:grayscale(1) contrast(1.15)}
.duoTint{background:var(--accent);mix-blend-mode:color;opacity:calc(var(--duo,1))}

/* ── 12 progressive blur ───────────────────────────────────── */
.pblur{aspect-ratio:16/9;position:relative;overflow:hidden}
.pbImg{position:absolute;inset:0;background-size:cover;background-position:center}
.pbL{position:absolute;inset:0;backdrop-filter:blur(var(--b));
  -webkit-backdrop-filter:blur(var(--b));
  mask-image:linear-gradient(to top,#000 0,#000 calc(100% - var(--s)),transparent calc(100% - var(--s) + 14%));
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 calc(100% - var(--s)),transparent calc(100% - var(--s) + 14%))}
.pbTxt{position:absolute;left:18px;bottom:15px;margin:0;z-index:4;
  font-family:var(--display);font-size:clamp(19px,3vw,30px);letter-spacing:-.02em}

/* ── 13 dithering ──────────────────────────────────────────── */
.dith{aspect-ratio:3/2;display:grid;place-items:center;background:var(--lift)}
.dith canvas{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}

/* ── 14 clip-path reveal ───────────────────────────────────── */
.clipr{aspect-ratio:3/2;position:relative;overflow:hidden;cursor:crosshair}
.clipImg{position:absolute;inset:0;background-size:cover;background-position:center}
.clipImg.alt{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--settle)}
.clipr:hover .clipImg.alt{clip-path:inset(0 0 0 0)}

/* ── 15 comparison slider ──────────────────────────────────── */
.cmp{aspect-ratio:3/2;position:relative;overflow:hidden;cursor:ew-resize;touch-action:none}
.cmpA,.cmpB{position:absolute;inset:0;background-size:cover;background-position:center}
.cmpB{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.cmpBar{position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;background:var(--ink);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ground) 40%,transparent)}
.cmpBar::after{content:'';position:absolute;top:50%;left:50%;width:26px;height:26px;
  translate:-50% -50%;border:1px solid var(--ink);border-radius:50%;
  background:color-mix(in srgb,var(--ground) 50%,transparent)}

/* ── 16 split reveal ───────────────────────────────────────── */
.reveal{padding:30px 22px;display:flex;flex-direction:column;gap:9px}
.reveal .ln{overflow:hidden}
.reveal .ln span{display:block;font-family:var(--display);
  font-size:clamp(21px,3vw,33px);letter-spacing:-.02em;line-height:1.2;
  transform:translateY(112%);transition:transform 1s var(--settle)}
.reveal.on .ln span{transform:none}
.reveal .ln:nth-child(2) span{transition-delay:.1s}
.reveal .ln:nth-child(3) span{transition-delay:.2s}

/* ── 17 variable font ──────────────────────────────────────── */
.vf{min-height:clamp(200px,32vh,270px);display:grid;place-items:center;padding:24px 22px 42px}
.vf p{margin:0;font-family:var(--vf);font-size:clamp(24px,4.4vw,46px);line-height:1.1;
  letter-spacing:-.025em;text-align:center;
  font-variation-settings:'wght' var(--w,400);transition:font-variation-settings .18s linear}

/* ── 18 text mask ──────────────────────────────────────────── */
.tmask{min-height:clamp(220px,38vh,330px);display:grid;place-items:center;padding:22px}
.tmask h3{margin:0;font-family:var(--vf);font-weight:900;
  font-size:clamp(38px,8.2vw,114px);letter-spacing:-.05em;line-height:.9;text-align:center;
  font-variation-settings:'wght' 900;
  background-size:cover;background-position:center;
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── 19 vertical writing ───────────────────────────────────── */
/* row-reverse, because vertical-rl means the columns read right to left:
   the first line belongs on the right. */
.vert{min-height:clamp(300px,52vh,440px);display:flex;flex-direction:row-reverse;
  justify-content:center;align-items:flex-start;gap:clamp(26px,6vw,78px);padding:34px 20px;
  view-timeline-name:--vert;view-timeline-axis:block}
.vert p{writing-mode:vertical-rl;text-orientation:mixed;margin:0;
  font-family:var(--song);line-height:1;font-feature-settings:'vert' 1;
  animation:vwrite linear both;animation-timeline:--vert}
/* each column is written downward, and the columns arrive right to left —
   the order the page is actually read in */
@keyframes vwrite{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -8% 0)}}
.vert .vt1{font-size:clamp(30px,5.6vw,56px);color:var(--ink);letter-spacing:.1em;
  animation-range:entry 14% cover 44%}
.vert .vt2{font-size:clamp(25px,4.4vw,43px);color:var(--accent);letter-spacing:.1em;
  animation-range:entry 24% cover 54%}
.vert .vt3{font-size:clamp(22px,3.8vw,37px);color:var(--mid);letter-spacing:.1em;
  animation-range:entry 34% cover 64%}
.vert .vt4{font-size:clamp(15px,2.3vw,23px);color:var(--dim);letter-spacing:.06em;
  animation-range:entry 44% cover 74%}
/* 縦中横 — a short number held upright in one square, as a printed vertical page does */
.vert .vt4 .tcy{text-combine-upright:all}

/* ── 20 marquee ────────────────────────────────────────────── */
.marq{overflow:hidden;padding-block:26px;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marqrow{display:flex;gap:26px;width:max-content;animation:slide 28s linear infinite}
.marqrow span{font-family:var(--display);font-size:clamp(23px,3.4vw,37px);
  letter-spacing:-.02em;color:var(--mid);white-space:nowrap}
.marqrow span:nth-child(even){color:var(--accent);font-style:italic}
@keyframes slide{to{transform:translateX(-50%)}}
.marq:hover .marqrow{animation-play-state:paused}

/* ── support pill · each 2026 specimen reports its own status ─ */
.supp{position:absolute;right:11px;bottom:11px;z-index:8;font-family:var(--mono);
  font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);padding:3px 8px;border-radius:99px;
  background:color-mix(in srgb,var(--ground) 74%,transparent);pointer-events:none}
.supp::after{content:'not in this browser'}
@supports (container-type:scroll-state){
  .supp[data-f="ss"]::after{content:'supported here';color:var(--mid)}}
@supports selector(::scroll-marker){
  .supp[data-f="sm"]::after{content:'supported here';color:var(--mid)}}
@supports selector(::scroll-button(right)){
  .supp[data-f="sb"]::after{content:'supported here';color:var(--mid)}}
@supports (timeline-scope:--x){
  .supp[data-f="ts"]::after{content:'supported here';color:var(--mid)}}

/* shared inner scroller chrome */
.ssq,.snapq,.tsc,.dirs,.loopx,.spy{scrollbar-width:thin;scrollbar-color:var(--dim) transparent}

/* ── 09 sticky state query ─────────────────────────────────── */
.ssq{height:clamp(240px,38vh,320px);overflow-y:auto}
.ssqhead{position:sticky;top:0;z-index:3;container-type:scroll-state}
.ssqbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 15px;background:var(--raise);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);transition:padding .45s var(--settle),background .45s var(--settle),
  color .45s var(--settle),border-color .45s var(--settle)}
.ssqbar b{font-weight:400;color:var(--accent);opacity:0;transition:opacity .45s var(--settle)}
@container scroll-state(stuck: top){
  .ssqbar{padding:8px 15px;background:var(--ground);color:var(--ink);border-bottom-color:var(--accent)}
  .ssqbar b{opacity:1}
}
.ssqbody{padding:14px 15px 22px;display:grid;gap:11px}
.ssqrow{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center}
.ssqrow figure{margin:0;aspect-ratio:1;overflow:hidden;background:var(--lift)}
.ssqrow img{width:100%;height:100%;object-fit:cover}
.ssqrow span{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--dim)}

/* ── 10 snapped state query ────────────────────────────────── */
.snapq{height:clamp(240px,38vh,320px);overflow-y:auto;scroll-snap-type:y mandatory;
  margin:0;padding:0;list-style:none}
.snapq li{height:100%;scroll-snap-align:center;container-type:scroll-state;
  display:grid;place-items:stretch;padding:15px}
.qcard{border:1px solid var(--line);background:var(--raise);display:grid;
  place-items:center;align-content:center;gap:8px;
  transition:border-color .5s var(--settle),background .5s var(--settle),transform .5s var(--settle)}
.qcard b{font-family:var(--display);font-weight:400;font-size:clamp(22px,4vw,34px);
  letter-spacing:-.022em;color:var(--mid);transition:color .5s var(--settle)}
.qcard i{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);opacity:0;transition:opacity .5s var(--settle)}
@container scroll-state(snapped: block){
  .qcard{border-color:var(--accent);background:var(--lift);transform:scale(1.015)}
  .qcard b{color:var(--ink)}
  .qcard i{opacity:1}
}

/* ── 11 scroll markers ─────────────────────────────────────── */
.cml{margin:0;padding:15px 15px 2px;list-style:none;display:flex;gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-marker-group:after;scrollbar-width:none}
.cml::-webkit-scrollbar{display:none}
.cml li{flex:none;width:min(58%,186px);scroll-snap-align:center}
.cml figure{margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--lift)}
.cml img{width:100%;height:100%;object-fit:cover}
.cml p{margin:8px 0 0;font-family:var(--mono);font-size:9px;letter-spacing:.05em;color:var(--dim)}
.cml::scroll-marker-group{display:flex;gap:8px;justify-content:center;padding:15px 0 17px}
.cml li::scroll-marker{content:'';width:7px;height:7px;border-radius:50%;
  border:1px solid var(--dim);transition:background .3s var(--settle),border-color .3s var(--settle),scale .3s var(--settle)}
.cml li::scroll-marker:target-current{background:var(--accent);border-color:var(--accent);scale:1.3}

/* ── 12 scroll buttons ─────────────────────────────────────── */
.csbwrap{position:relative}
.csb{margin:0;padding:15px 15px 62px;list-style:none;display:flex;gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.csb::-webkit-scrollbar{display:none}
.csb li{flex:none;width:min(46%,148px);scroll-snap-align:start}
.csb figure{margin:0;aspect-ratio:1;overflow:hidden;background:var(--lift)}
.csb img{width:100%;height:100%;object-fit:cover}
.csb::scroll-button(*){position:absolute;bottom:14px;z-index:5;width:32px;height:32px;
  border:1px solid var(--line);border-radius:50%;background:var(--raise);color:var(--ink);
  font-family:var(--mono);font-size:13px;cursor:pointer;
  transition:border-color .3s var(--settle),color .3s var(--settle),opacity .3s var(--settle)}
.csb::scroll-button(*):hover{border-color:var(--accent);color:var(--accent)}
.csb::scroll-button(*):disabled{opacity:.25;cursor:default}
.csb::scroll-button(left){content:'←';left:15px}
.csb::scroll-button(right){content:'→';left:55px}

/* ── 13 timeline scope ─────────────────────────────────────── */
.tsc{height:clamp(240px,38vh,320px);overflow-y:auto;position:relative;timeline-scope:--tsplate}
.tschead{position:sticky;top:0;z-index:3;padding:12px 15px;display:grid;gap:8px;
  background:color-mix(in srgb,var(--ground) 90%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.tschead span{font-family:var(--mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.tscbar{height:2px;background:var(--line);position:relative}
.tscbar i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;
  transform:scaleX(0);animation:track linear both;
  animation-timeline:--tsplate;animation-range:entry 0% cover 70%}
.tscpad{height:118px;display:grid;place-items:center;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.tscbox{view-timeline-name:--tsplate;view-timeline-axis:block;margin-inline:15px;
  aspect-ratio:3/2;overflow:hidden;background:var(--lift)}
.tscbox img{width:100%;height:100%;object-fit:cover}

/* ── 14 path drawing ───────────────────────────────────────── */
.pdraw{min-height:clamp(230px,36vh,300px);display:grid;place-items:center;
  padding:26px 20px 32px;view-timeline-name:--pd}
.pdraw svg{width:100%;max-width:none;height:auto;overflow:visible}
/* stroke-width is in viewBox units and scales with the box, so it thins as
   the stage grows; 1.2 lands near 3.5px at desktop width. */
.pdraw path{fill:none;stroke-width:1.2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:draw linear both;animation-timeline:--pd}
.pdraw .p1{stroke:var(--accent);animation-range:entry 5% cover 50%}
.pdraw .p2{stroke:var(--ink);animation-range:entry 18% cover 62%}
.pdraw .p3{stroke:var(--mid);animation-range:entry 34% cover 74%}
@keyframes draw{to{stroke-dashoffset:0}}
.pdcap{margin:18px 0 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}

/* ── 15 word scrub ─────────────────────────────────────────── */
.wscrub{padding:clamp(28px,5vw,44px) clamp(20px,4vw,34px);view-timeline-name:--ws}
.wscrub p{margin:0;font-family:var(--display);font-size:clamp(21px,3.2vw,34px);
  line-height:1.34;letter-spacing:-.018em}
.wscrub .w{display:inline-block;color:var(--dim);opacity:.26;
  animation:lightup linear both;animation-timeline:--ws}
@keyframes lightup{to{color:var(--ink);opacity:1}}

/* ── 16 direction state ────────────────────────────────────── */
.dirs{height:clamp(240px,38vh,320px);overflow-y:auto;position:relative}
.dirshead{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;
  align-items:center;padding:13px 15px;background:var(--raise);
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mid);
  transition:transform .42s var(--settle)}
.dirshead b{font-weight:400;color:var(--accent)}
.dirs[data-dir="down"] .dirshead{transform:translateY(-104%)}
.dirsbody{padding:14px 15px 24px;display:grid;gap:11px}

/* ── 17 curtain overlap ────────────────────────────────────── */
.curt{height:230vh;position:relative}
.curtA{position:sticky;top:0;height:100vh;display:grid;place-items:center;
  background-size:cover;background-position:center}
.curtA::after{content:'';position:absolute;inset:0;background:color-mix(in srgb,var(--ground) 46%,transparent)}
.curtA span,.curtB span{position:relative;z-index:2;font-family:var(--display);
  font-size:clamp(24px,4.4vw,42px);letter-spacing:-.024em}
.curtB{position:relative;z-index:2;min-height:100vh;background:var(--ground);
  border-top:1px solid var(--accent);display:grid;place-items:center}

/* ── 18 depth of field ─────────────────────────────────────── */
.dof{padding:15px;display:grid;gap:12px}
.dofrow{view-timeline-name:--dofr;view-timeline-axis:block}
.dofinner{display:grid;grid-template-columns:64px minmax(0,1fr);gap:13px;align-items:center;
  animation:focusband linear both;animation-timeline:--dofr;animation-range:cover 0% cover 100%}
@keyframes focusband{
  0%,100%{filter:blur(4.5px);opacity:.34}
  46%,54%{filter:blur(0);opacity:1}
}
.dofrow figure{margin:0;aspect-ratio:1;overflow:hidden;background:var(--lift)}
.dofrow img{width:100%;height:100%;object-fit:cover}
.dofrow span{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--mid)}

/* ── 19 infinite loop ──────────────────────────────────────── */
.loopx{height:clamp(240px,38vh,320px);overflow-y:auto;padding-inline:15px}
.lrow{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:13px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line)}
.lrow figure{margin:0;aspect-ratio:1;overflow:hidden;background:var(--lift)}
.lrow img{width:100%;height:100%;object-fit:cover}
.lrow b{font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:-.016em}
.lrow em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--dim)}

/* ── 20 kinetic drag ───────────────────────────────────────── */
.kin{height:clamp(215px,34vh,282px);overflow:hidden;display:flex;align-items:center;
  cursor:grab;touch-action:pan-y;user-select:none}
.kin.drag{cursor:grabbing}
.kintrack{display:flex;gap:14px;padding-inline:16px;will-change:transform}
.kincard{flex:none;width:min(52vw,172px)}
.kincard figure{margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--lift)}
.kincard img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.kincard p{margin:8px 0 0;font-family:var(--mono);font-size:9px;letter-spacing:.05em;color:var(--dim)}

/* ── 21 scroll-triggered count ─────────────────────────────── */
.cnt{min-height:clamp(215px,34vh,282px);display:grid;grid-template-columns:repeat(3,1fr);
  align-items:center;gap:12px;padding:24px 18px 48px}
.cntcell{text-align:center}
.cntcell b{display:block;font-family:var(--mono);font-weight:400;
  font-size:clamp(25px,4.6vw,43px);letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.cntcell:nth-child(2) b{color:var(--accent)}
.cntcell span{display:block;margin-top:9px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);line-height:1.65}

/* ── 22 scrollspy ──────────────────────────────────────────── */
.spy{height:clamp(250px,40vh,330px);overflow-y:auto;display:grid;
  grid-template-columns:106px minmax(0,1fr)}
.spyrail{position:sticky;top:0;align-self:start;padding:15px 0 15px 15px;display:grid;gap:9px}
.spyrail a{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);border-left:1px solid var(--line);padding:3px 0 3px 9px;
  transition:color .35s var(--settle),border-color .35s var(--settle)}
.spyrail a.on{color:var(--accent);border-left-color:var(--accent)}
.spybody{padding:15px}
.spysec{min-height:152px;padding-bottom:18px}
.spysec h5{margin:0 0 9px;font-family:var(--display);font-weight:400;font-size:20px;
  letter-spacing:-.018em}
.spysec p{margin:0;font-size:12px;line-height:1.7;color:var(--dim)}

/* ── 23 overscroll containment ─────────────────────────────── */
.osb{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:15px}
.osbcap{margin:0 0 8px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.osbpane{height:clamp(168px,26vh,212px);overflow-y:auto;border:1px solid var(--line);
  padding:11px;scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
.osbpane.keep{overscroll-behavior:contain;border-color:var(--accent)}
.osbpane p{margin:0 0 10px;font-family:var(--mono);font-size:10px;line-height:1.7;color:var(--mid)}

/* ── 24 snap stop ──────────────────────────────────────────── */
.snst{padding:15px;display:grid;gap:9px}
.snstrack{margin:0 0 5px;padding:0;list-style:none;display:flex;gap:10px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.snstrack::-webkit-scrollbar{display:none}
.snstrack li{flex:none;width:min(38%,118px);scroll-snap-align:center;position:relative;
  aspect-ratio:3/4;overflow:hidden;background:var(--lift)}
.snstrack img{width:100%;height:100%;object-fit:cover}
.snstrack li b{position:absolute;left:8px;top:7px;font-family:var(--mono);font-weight:400;
  font-size:9px;letter-spacing:.1em;color:var(--ink);text-shadow:0 1px 5px var(--ground)}
.snstrack.stop li{scroll-snap-stop:always}

/* ── colour family ─────────────────────────────────────────── */
@property --rot { syntax: '<angle>'; inherits: true; initial-value: 0deg }

/* 37 token interpolation — scoped to this stage, never to :root */
.ti{--rot:0deg;view-timeline-name:--tiv;view-timeline-axis:block;
  animation:tirot linear both;animation-timeline:--tiv;animation-range:cover 8% cover 92%;
  --g:oklch(0.185 0.012 calc(58deg + var(--rot)));
  --i:oklch(0.950 0.014 calc(80deg + var(--rot)));
  --d:oklch(0.620 0.017 calc(71deg + var(--rot)));
  --a:oklch(0.637 0.145 calc(40.2deg + var(--rot)));
  background:var(--g);min-height:clamp(230px,36vh,300px);display:grid;
  align-content:center;gap:18px;padding:clamp(20px,4vw,34px)}
:root[data-theme="day"] .ti{
  --g:oklch(0.930 0.012 calc(78deg + var(--rot)));
  --i:oklch(0.215 0.012 calc(68deg + var(--rot)));
  --d:oklch(0.480 0.016 calc(70deg + var(--rot)));
  --a:oklch(0.560 0.150 calc(40.2deg + var(--rot)))}
@keyframes tirot{to{--rot:-135.77deg}}
.tiface{display:grid;gap:9px;border-left:1px solid var(--a);padding-left:16px}
.tieye{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--a)}
.tiface b{font-family:var(--display);font-weight:400;font-size:clamp(25px,4vw,38px);
  letter-spacing:-.025em;color:var(--i)}
.tiface p{margin:0;font-size:12px;line-height:1.7;color:var(--d)}
.tibtn{justify-self:start;font-family:var(--mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--a);border:1px solid var(--a);padding:6px 13px;border-radius:2px}
.tibar{height:3px;background:linear-gradient(90deg,var(--a),var(--i))}

/* 38 scoped rotation */
.sc{--rot:0deg;--cols:6;min-height:clamp(250px,40vh,340px);padding:38px 16px 52px;
  position:relative;display:flex;
  animation:tirot linear both;animation-timeline:scroll(root)}
.scgrid{flex:1;display:grid;grid-template-columns:repeat(var(--cols),1fr);
  grid-auto-rows:1fr;gap:clamp(2px,.5vw,5px)}
/* one hue, varied by weight — three rotating hues read as noise, not as a field */
.scgrid i{display:block;border-radius:1px;
  background:oklch(0.637 0.145 calc(40.2deg + var(--rot)))}
:root[data-theme="day"] .scgrid i{background:oklch(0.560 0.150 calc(40.2deg + var(--rot)))}
.scgrid i:nth-child(3n){opacity:.52}
.scgrid i:nth-child(7n){opacity:.26}
.scout{position:absolute;left:16px;bottom:15px;margin:0;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;color:var(--dim);font-variant-numeric:tabular-nums}
.scout #scMs{color:var(--indigo)}
.sc .btn{left:auto;right:12px}

/* 39 gamut arc — the two routes run side by side as fields you can see from
   across the room; the strip under each is that same route laid out whole.
   One registered number drives both, declared on the stage so only this
   subtree re-resolves per frame. */
@property --gat{syntax:'<number>';inherits:true;initial-value:0}
.ga{--gaL:.637;--gaC:.148;--gaH:40.2deg;--gaSweep:-135.8deg;
  --gaA:oklch(var(--gaL) var(--gaC) var(--gaH));
  --gaB:oklch(var(--gaL) var(--gaC) calc(var(--gaH) + var(--gaSweep)));
  --gat:0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.7vw,20px);
  padding:clamp(14px,2vw,22px);
  animation:gaturn linear both;animation-timeline:view();
  animation-range:entry 14% cover 74%}
:root[data-theme="day"] .ga{--gaL:.559;--gaC:.150;--gaH:40.1deg}
@keyframes gaturn{to{--gat:1}}
.gacol{display:flex;flex-direction:column;gap:7px;min-width:0}
.gafield{flex:1;min-height:clamp(132px,23vh,196px);border-radius:2px}
.gafield.rim{background:oklch(var(--gaL) var(--gaC)
  calc(var(--gaH) + var(--gaSweep) * var(--gat)))}
.gafield.chord{background:color-mix(in srgb,var(--gaB) calc(var(--gat) * 100%),var(--gaA))}
.gapath{height:15px;border-radius:2px}
.gapath.rim{background:linear-gradient(90deg in oklch shorter hue,var(--gaA),var(--gaB))}
.gapath.chord{background:linear-gradient(90deg in srgb,var(--gaA),var(--gaB))}
.galab{margin:3px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);line-height:1.5}
.galab i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.05em;
  text-transform:none;color:var(--dim);margin-top:3px}
@media (max-width:560px){.ga{grid-template-columns:1fr;padding-top:36px}
  .gafield{min-height:clamp(104px,17vh,152px)}}

/* 40 difference inversion */
.di{position:relative;min-height:clamp(214px,34vh,284px);overflow:hidden}
.dirun{position:absolute;inset:0;width:400%;display:flex;
  animation:dipan 34s var(--pan) infinite alternate}
.dirun>i{flex:1;display:block}
@keyframes dipan{to{transform:translateX(-75%)}}
/* literal white, not a token: difference blending inverts about white by
   definition, and a themed ink would break the claim the words are making. */
.ditxt{position:absolute;inset:0;margin:0;display:grid;place-items:center;
  padding-inline:20px;text-align:center;pointer-events:none;
  mix-blend-mode:difference;color:#fff;
  font-family:var(--display);font-size:clamp(28px,4.4vw,54px);
  line-height:1.04;letter-spacing:-.022em}

/* 41 threshold flip */
.tf{height:clamp(240px,38vh,320px);overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:var(--dim) transparent;
  transition:background-color .7s var(--settle),color .7s var(--settle)}
.tfpanels>div{height:clamp(240px,38vh,320px);display:grid;align-content:center;gap:13px;
  padding-inline:clamp(20px,4vw,52px);max-width:44ch}
.tfpanels b{font-family:var(--display);font-weight:400;font-size:clamp(27px,4.4vw,42px);
  letter-spacing:-.025em;line-height:1}
.tfpanels p{margin:0;font-size:13.5px;line-height:1.66;opacity:.72;max-width:30ch}
.tfchips{display:flex;gap:7px}
.tfchips i{width:34px;height:7px;border-radius:1px;background:currentColor;opacity:.22}
.tfchips i:first-child{background:var(--tfa);opacity:1;width:46px}
.tfchips i:nth-child(2){opacity:.44}
/* three unrelated palettes, written out rather than derived: the point of this
   specimen is that they are NOT a rotation of one another. */
.tf[data-flip="a"]{background:#0B0A09;color:#F2EDE5;--tfa:#D4673F}
.tf[data-flip="b"]{background:#191021;color:#EFDCF2;--tfa:#B478D8}
.tf[data-flip="c"]{background:#0E161B;color:#DCEAF2;--tfa:#5BA8C9}
:root[data-theme="day"] .tf[data-flip="a"]{background:#F4F0E9;color:#1D1814;--tfa:#BA4E24}
:root[data-theme="day"] .tf[data-flip="b"]{background:#EFDDE6;color:#33182C;--tfa:#8B3FB0}
:root[data-theme="day"] .tf[data-flip="c"]{background:#DDE7EC;color:#15262F;--tfa:#1F6E8C}

footer{border-top:1px solid var(--line);margin-top:clamp(40px,7vh,86px);
  padding-block:40px 74px;display:flex;flex-wrap:wrap;gap:12px 44px;
  justify-content:space-between;font-family:var(--mono);font-size:10px;
  letter-spacing:.04em;color:var(--dim);line-height:1.8}
footer a{color:var(--mid);border-bottom:1px solid var(--line)}
footer a:hover{color:var(--accent)}

@media (max-width:880px){
  .spec{grid-template-columns:minmax(0,1fr);gap:20px}
  .meta{position:static}
  .plate{grid-template-columns:62px minmax(0,1fr)}
  .index{grid-template-columns:1fr;gap:26px}
  .osb{grid-template-columns:1fr}
  .cnt{grid-template-columns:1fr;gap:24px;padding-block:26px 48px}
  .spy{grid-template-columns:84px minmax(0,1fr)}
  .spyrail{padding-left:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important}
  .readbar,.plate .bar i,.tscbar i{transform:scaleX(1)}
  .plate img{opacity:1;transform:none}
  .reveal .ln span{transform:none}
  .kb{transform:none}
  /* scroll-driven specimens settle at their resolved state rather than mid-scrub */
  .wscrub .w{opacity:1;color:var(--ink)}
  .pdraw path{stroke-dashoffset:0}
  .vert p{clip-path:none}
  .dofinner{filter:none;opacity:1}
  .csb{scroll-behavior:auto}
  /* the colour channel stays — it moves nothing */
  .ti,.sc,.ga{animation-play-state:running}
  /* this one does move, so it parks straddling the grey band instead */
  .dirun{animation:none;transform:translateX(-52%)}
}

/* ── the Lexicon as a book: an entrance, and a page per term ─── */
/* Between terms the page turns instead of reloading: the name and the stage
   carry across and the rest cross-fades, on the house curve. */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:var(--settle)}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none}
}
/* a term's title shares its transition name with its word in the index, so the word travels */
.term .stage{view-transition-name:stage}
.pillarnav{view-transition-name:pillarnav}

.brand + .brand{margin-left:-20px}
.navfam[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}

/* the entrance: five pillars, the whole vocabulary on one screen */
.index{grid-template-columns:repeat(5,minmax(0,1fr))}
.idxcol h4{margin-bottom:6px}
.idxcol .blurb{margin:0 0 16px;font-size:12px;line-height:1.5;color:var(--dim);text-wrap:balance}
.idxcol ol a{font-size:14.5px;grid-template-columns:24px minmax(0,1fr)}
.idxcol ol a b{font-size:9.5px}
.idxcol ol{gap:7px}

/* a term page: where it sits, the term, its pillar beside it, and the way on */
.crumb{margin:clamp(34px,6vh,64px) 0 clamp(22px,3.6vh,38px);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.crumb a{color:var(--mid);transition:color .3s var(--settle)}
.crumb a:hover{color:var(--accent)}
.termgrid{display:grid;grid-template-columns:196px minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start}
.term .spec{border-top:1px solid var(--line);padding-top:clamp(26px,4vh,40px)}
.pillarnav{position:sticky;top:clamp(60px,9vh,84px);border-top:1px solid var(--accent);padding-top:14px}
.pillarnav h4{margin:0 0 14px;font-weight:400;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:baseline}
.pillarnav h4 em{margin-left:auto;font-style:normal;color:var(--dim)}
.pillarnav ol{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.pillarnav ol a{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;align-items:baseline;
  font-size:12.5px;line-height:1.4;color:var(--dim);transition:color .3s var(--settle)}
.pillarnav ol a b{font-family:var(--mono);font-weight:400;font-size:9px}
.pillarnav ol a:hover{color:var(--ink)}
.pillarnav ol a[aria-current]{color:var(--ink)}
.pillarnav ol a[aria-current] b{color:var(--accent)}
.pillarnav .others{margin:22px 0 0;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:5px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.pillarnav .others a{display:block;color:var(--dim)}
.pillarnav .others a:hover{color:var(--accent)}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--line);
  margin-top:clamp(48px,8vh,96px);padding-top:22px}
.pager a{display:grid;gap:8px;max-width:26ch}
.pager a.next{justify-self:end;text-align:right}
.pager small{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.pager span{font-family:var(--display);font-size:clamp(22px,2.6vw,34px);line-height:1.04;letter-spacing:-.02em;
  color:var(--mid);transition:color .3s var(--settle);text-wrap:balance}
.pager a:hover span{color:var(--accent)}

@media (max-width:1180px){
  .index{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .termgrid{grid-template-columns:minmax(0,1fr)}
  /* on a narrow screen the pillar becomes a row of stops to swipe through */
  .pillarnav{position:static;order:2}
  .pillarnav ol{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  .pillarnav li{flex:none;scroll-snap-align:start}
  .pillarnav ol a{display:inline-flex;gap:7px;border:1px solid var(--line);padding:7px 11px;border-radius:2px;white-space:nowrap}
}
@media (max-width:760px){
  .index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pager{grid-template-columns:minmax(0,1fr)}
  .pager a.next{justify-self:start;text-align:left}
}

/* ── the entrance: one screen; the vocabulary is the page ───── */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.entrance{min-height:calc(100svh - var(--bar));display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  column-gap:clamp(28px,5vw,84px);align-content:start;padding-block:clamp(30px,6.5vh,76px) clamp(18px,3vh,30px)}
.entrance .kicker{margin-bottom:18px}
.entrance h1{font-size:clamp(46px,6.2vw,98px);line-height:.86}
.find{align-self:end;padding-bottom:4px}
.find input{width:100%;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:0 0 12px;font-family:var(--display);font-size:clamp(28px,3.3vw,48px);letter-spacing:-.02em;line-height:1.1;
  color:var(--ink);caret-color:var(--accent);outline:none;transition:border-color .35s var(--settle)}
.find input::placeholder{color:var(--dim);opacity:.65}
.find input:focus{border-bottom-color:var(--accent)}
.find input::-webkit-search-cancel-button{appearance:none}
.caption{margin:14px 0 0;min-height:3.2em;font-size:15px;line-height:1.55;color:var(--mid);max-width:54ch;text-wrap:pretty}
.caption b{color:var(--ink);font-weight:500}
.entrance .index{grid-column:1/-1;margin-top:clamp(26px,5vh,56px)}
.keys{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 28px;margin:clamp(18px,3vh,30px) 0 0;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
/* finding: the matches stay, the rest step back, and nothing moves */
.idxcol ol a{transition:opacity .35s var(--settle),color .3s var(--settle)}
.index.finding ol a:not(.hit){opacity:.15}
.index a.hit span{color:var(--ink)}
.index a.on span,.index a.on b{color:var(--accent)}
.idxcol .aka-hit{grid-column:2;font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.04em;color:var(--accent)}
@media (max-width:900px){
  .entrance{grid-template-columns:minmax(0,1fr);min-height:0}
  .find{margin-top:28px}
  .keys span:last-child{display:none}
}

/* the index fits one screen: vertical rhythm scales with the window's height */
.entrance{padding-block:clamp(22px,5vh,72px) clamp(14px,2.4vh,28px)}
.entrance h1{font-size:clamp(44px,min(6.2vw,10.5vh),98px)}
.entrance .kicker{margin-bottom:clamp(10px,2vh,18px)}
.entrance .index{margin-top:clamp(18px,4vh,56px);padding-top:clamp(14px,2.4vh,21px)}
.entrance .idxcol .blurb{margin-bottom:clamp(8px,1.6vh,16px)}
.entrance .idxcol ol{gap:clamp(2px,.55vh,7px)}
.idxcol h4 a,.pillarnav h4 a{color:inherit;border-bottom:1px solid transparent;transition:border-color .3s var(--settle)}
.idxcol h4 a:hover,.pillarnav h4 a:hover{border-bottom-color:var(--accent)}

/* a pillar: its name, its terms as stops, then each term running */
.pillarhead{padding:0 0 clamp(8px,2vh,20px)}
.pillarhead h1{font-family:var(--display);font-size:clamp(48px,8vw,120px);line-height:.86;letter-spacing:-.03em;margin:0}
.pillarhead .blurb{margin:18px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.chips{margin:clamp(22px,4vh,36px) 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-flex;gap:8px;align-items:baseline;padding:7px 12px;border:1px solid var(--line);border-radius:2px;
  font-size:13px;color:var(--mid);transition:color .3s var(--settle),border-color .3s var(--settle)}
.chips a b{font-family:var(--mono);font-weight:400;font-size:9px;color:var(--dim)}
.chips a:hover{color:var(--ink);border-color:var(--accent)}
.spec h2.name a{color:inherit;transition:color .3s var(--settle)}
.spec h2.name a:hover{color:var(--accent)}
.meta .deeper + .deeper{margin-left:18px}
.entrance .keys{margin-top:clamp(10px,2vh,30px)}
@media (max-width:760px){.navtail{display:none}}
/* the pillars keep to the bar's one line; where it is narrow they slide under the brand, the current one in view */
.navfams{display:contents}
@media (max-width:1100px){
  .navtail{display:none}
  .topnav .inner{gap:0 4px}
  .brand + .brand{margin-left:2px}
  .navfams{display:flex;align-items:center;align-self:stretch;gap:20px;flex:1;min-width:0;padding-inline:12px 26px;scroll-padding-inline:12px 26px;
    overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 26px),transparent)}
  .navfam{flex:none}
  .navfam[aria-current]{scroll-initial-target:nearest}
}
@media (max-width:760px){.topnav .theme span{display:none}}
/* a showcase page: the term and what it is about, side by side above its stage */
.showhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;
  padding-block:0 clamp(18px,3vh,30px)}
.showhead .name{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.4vw,78px);line-height:.9;letter-spacing:-.025em;margin:0}
.showhead .gloss{margin:14px 0 0;max-width:40ch;font-size:16.5px;line-height:1.52;text-wrap:pretty}
.showhead .journey h2{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.4vw,32px);line-height:1;letter-spacing:-.02em;margin:0;color:var(--accent)}
.showhead .journey p{margin:10px 0 0;color:var(--mid);font-size:14.5px;line-height:1.55;max-width:54ch;text-wrap:pretty}
/* the stage ends the showcase; the notes on it begin after a breath */
.showhead + .stage{margin-bottom:clamp(40px,8vh,96px)}
.showmeta .credit{margin:22px 0 0;font-size:12.5px;line-height:1.6;color:var(--dim);max-width:78ch;text-wrap:pretty}
.showmeta .credit a{color:var(--mid);border-bottom:1px solid var(--line);transition:color .3s var(--settle),border-color .3s var(--settle)}
.showmeta .credit a:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:760px){.showhead{grid-template-columns:minmax(0,1fr)}}

/* a term with a full showcase carries a small terracotta dot */
.shows{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:9px;vertical-align:.2em}
.keys .shows{margin:0 7px 0 0}

/* Japanese and Chinese in labels, aliases and code fall to the Lexicon's own Han face,
   never to the system's: its fallback can be missing (it was, on macOS 27), and a
   missing fallback draws boxes. The face loads only the ranges a page actually uses. */
:root{
  --sans:'Switzer',-apple-system,system-ui,'Source Han Serif SC VF',sans-serif;
  --mono:'Geist Mono Variable',ui-monospace,SFMono-Regular,'Source Han Serif SC VF',monospace;
}