@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url(../fonts/manrope-500-latin.woff2) format('woff2')}
@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url(../fonts/manrope-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(../fonts/manrope-700-latin.woff2) format('woff2')}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(../fonts/manrope-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(../fonts/manrope-800-latin.woff2) format('woff2')}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(../fonts/manrope-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF}

:root{
  /* one pair of margins; band padding follows the window height so every
     band fits the visible area, bookmarks bar included */
  --m:clamp(16px,2.6vw,40px);
  --pad:clamp(32px,7svh,88px);
  /* five type steps */
  --t-mark:min(24.5vw,40svh);
  --t-head:clamp(40px,4.4vw,72px);
  --t-lead:clamp(19px,1.5vw,24px);
  --t-body:18px;
  --t-small:15px;
  /* every capture on the page is this wide, bounded by the window height */
  --steps:72px;
  --barh:64px;
  --shot:min(58vw,calc((100svh - var(--barh) - 1.5 * var(--pad) - var(--steps)) * 16 / 9));
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#eae7df;scroll-behavior:smooth}
body{background:#eae7df;color:#273631;font:500 var(--t-body)/1.55 Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
/* a control reached by Tab never lands under the fixed bar */
main a,main button,main summary{scroll-margin-top:calc(var(--barh) + 16px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the app's themes (css/themes.css): ground, ink, accent, ink on accent.
   Registered as colours so a theme change morphs every part of a band,
   headings and buttons included, not just its ground. */
@property --bg{syntax:'<color>';inherits:true;initial-value:#eae7df}
@property --ink{syntax:'<color>';inherits:true;initial-value:#273631}
@property --acc{syntax:'<color>';inherits:true;initial-value:#79432f}
@property --on{syntax:'<color>';inherits:true;initial-value:#fbf6ee}
.th{background:var(--bg);color:var(--ink);transition:--bg .8s var(--ease),--ink .8s var(--ease),--acc .8s var(--ease),--on .8s var(--ease)}
.paper{--bg:#eae7df;--ink:#273631;--acc:#79432f;--on:#fbf6ee}
.paper2{--bg:#f3f0e9;--ink:#273631;--acc:#79432f;--on:#fbf6ee}
.corinthian{--bg:#f5ecc2;--ink:#3a1b10;--acc:#a84222;--on:#fff6e0}
.slate{--bg:#112f2c;--ink:#fbe6a0;--acc:#e6737c;--on:#1d0c0e} /* the app's #da525d is 3.6:1 here; lifted to 4.8:1 for small text */
.vistoris{--bg:#6d4145;--ink:#ffefae;--acc:#96d1aa;--on:#1d2b22}
.sienna{--bg:#064f6e;--ink:#ecf1f6;--acc:#ebd3a2;--on:#2a2214}
.nile{--bg:#bce4e5;--ink:#341e19;--acc:#793327;--on:#fff}
.indigo{--bg:#051230;--ink:#f0f0f6;--acc:#f68c50;--on:#1a0e05}
.tamam{--bg:#0b0a0e;--ink:#efeef7;--acc:#f2b84b;--on:#14110a}
.charcoal{--bg:#0d0e10;--ink:#efeef7;--acc:#f2b84b;--on:#14110a}
.cinema{--bg:#151615;--ink:#f1eee7;--acc:#e9aa80;--on:#1d120b}
.ink{--bg:#101c26;--ink:#eeeee4;--acc:#dbac75;--on:#1a120a}

/* the app's wordmark (css/logo.css): Manrope 700, -0.06em, accent dot */
.logo{font-weight:700;letter-spacing:-.06em;line-height:1;text-decoration:none;white-space:nowrap}
.logo b{font-weight:700;color:var(--acc)}

/* one button */
.btn{display:inline-block;background:var(--acc);color:var(--on);font-weight:800;font-size:var(--t-body);line-height:1.2;text-decoration:none;padding:14px 24px;transition:filter .2s,transform .15s}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:scale(.97)}

h2{font-size:var(--t-head);font-weight:800;letter-spacing:-.04em;line-height:1}

/* hero */

.bar{display:flex;align-items:center;gap:32px;padding:22px 0;font-size:var(--t-small);font-weight:700}
.bar .logo{font-size:30px;margin-right:auto}
.bar nav{display:flex;gap:28px}
.bar nav a{text-decoration:none}
.bar nav a:hover{color:var(--acc)}


/* where Tamam will run: none of the stores has it yet */
.platforms{margin-top:28px}
.platforms ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:440px}
.platforms li{display:grid;grid-template-rows:32px auto;align-content:start;gap:14px;padding:18px 16px 16px;background:rgb(127 127 127/.12)}
.pm{height:28px;width:auto;max-width:100%;align-self:center;fill:currentColor}
.pm.wide{height:14px}
.pm.lg{height:22px}
.platforms b{display:block;font-size:var(--t-small);line-height:1.2}
.platforms small{display:block;margin-top:3px;font-size:13px;font-weight:700;color:var(--acc)}
.platforms p{margin-top:14px;font-size:var(--t-small);font-weight:700;opacity:.8}
.btn.soon{background:rgb(127 127 127/.18);color:inherit}
.btn.soon:hover{filter:none;background:rgb(127 127 127/.28)}


/* hero: what it is on the left, the app large on the right, the
   wordmark big under both */
.hero{height:100svh;min-height:560px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:'bar bar' 'id tv' 'mk mk';column-gap:var(--m);padding:0 var(--m);overflow:hidden}
.hero .bar{grid-area:bar}
.hero .id{grid-area:id;align-self:center}
.hero .tv{grid-area:tv;min-height:0;display:flex;align-items:center;justify-content:flex-end;container-type:size}
.hero .screen{width:min(100cqw,calc(100cqh * 16 / 9))}
.hero h1{grid-area:mk;font-size:min(20vw,25svh);margin:1svh 0 0 -.04em;padding-bottom:clamp(10px,2svh,24px)}
.lead{font-size:var(--t-lead);line-height:1.45}
.screen{position:relative;width:100%;aspect-ratio:16/9;container-type:inline-size;background:#0b0a0e;overflow:hidden}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* On a computer the hero is one poster, drawn for 1440x760 and scaled
   as a whole by --u (one design pixel), so every window shows the same
   composition; what a window has beyond that ratio is even ground
   around it. Phones keep the fluid layout below. */
@media (min-width:821px){
  .hero{--u:min(calc(100vw / 1440),calc(100svh / 760));height:100svh;min-height:0;width:calc(1440 * var(--u));margin:0 auto;padding:calc((100svh - 760 * var(--u)) / 2) calc(40 * var(--u));column-gap:calc(40 * var(--u))}
  .hero .bar{gap:calc(32 * var(--u));padding:calc(22 * var(--u)) 0;font-size:calc(15 * var(--u))}
  .hero .bar .logo{font-size:calc(30 * var(--u))}
  .hero .bar nav{gap:calc(28 * var(--u))}
  .hero .btn{font-size:calc(18 * var(--u));padding:calc(14 * var(--u)) calc(24 * var(--u))}
  .hero .langs summary{padding:calc(8 * var(--u)) 0}
  .hero .lead{font-size:calc(22 * var(--u))}
  .hero .platforms{margin-top:calc(28 * var(--u))}
  .hero .platforms ul{gap:calc(8 * var(--u));max-width:calc(440 * var(--u))}
  .hero .platforms li{grid-template-rows:calc(32 * var(--u)) auto;gap:calc(14 * var(--u));padding:calc(18 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u))}
  .hero .pm{height:calc(28 * var(--u))}
  .hero .pm.wide{height:calc(14 * var(--u))}
  .hero .pm.lg{height:calc(22 * var(--u))}
  .hero .platforms b{font-size:calc(15 * var(--u))}
  .hero .platforms small{margin-top:calc(3 * var(--u));font-size:calc(13 * var(--u))}
  .hero .platforms p{margin-top:calc(14 * var(--u));font-size:calc(15 * var(--u))}
  .hero h1{font-size:calc(190 * var(--u));margin-top:calc(8 * var(--u));padding-bottom:calc(16 * var(--u))}
}

/* the opening: the app's own (css/main.css .loading-hero-logo,
   loading-intro.ts) in front of everything. "tamam" turns through OK in
   other languages, faster and faster, lands with its dot, and then the
   whole screen shrinks into the hero's TV, revealing the page */
.intro,.intro-word{display:none}
.intro-on .intro{position:fixed;z-index:100;top:0;left:0;width:100vw;height:100dvh;display:block;background:#0b0a0e;overflow:hidden}
.intro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.intro-on .intro-word{position:fixed;z-index:101;inset:0;display:grid;place-items:center;perspective:900px;pointer-events:none}
.hero .mk{display:inline-block}
/* the rest of the hero settles in while the screen shrinks into place */
.hero .bar,.hero .lead,.hero .platforms{transition:opacity .6s var(--ease),transform .7s var(--ease)}
.hero .bar{transition-delay:.35s}
.hero .lead{transition-delay:.45s}
.hero .platforms{transition-delay:.55s}
.pre .hero .bar{opacity:0;transform:translateY(-12px)}
.pre .hero .lead,.pre .hero .platforms{opacity:0;transform:translateY(20px)}
.intro-on{scrollbar-color:#0b0a0e #0b0a0e}
.intro-on .screen img,.intro-on .hero .mk{visibility:hidden}
.intro .word,.intro-word .word{position:relative;font-weight:700;font-size:5.83vw;line-height:1;letter-spacing:-.06em;color:#efeef7;transform-origin:50% 75%;backface-visibility:hidden;white-space:nowrap}
.intro-word .word.out{animation:leaf-out var(--o,130ms) ease-in forwards} /* taste-skill-ignore: the app's own leaf-out timing */
.intro-word .word.in{animation:leaf-in var(--i,190ms) ease-out both}
.intro-word .word b{font-weight:700;color:#f2b84b;display:inline-block;transform-origin:30% 72%;animation:dot-land 280ms cubic-bezier(.3,1.6,.5,1) both}
@keyframes leaf-out{to{transform:translateY(-8px) rotateX(25deg) rotate(-2deg);opacity:0}}
@keyframes leaf-in{from{transform:translateY(10px) rotateX(-25deg) rotate(2deg);opacity:0}to{transform:none;opacity:1}}
@keyframes dot-land{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}


/* letter */
.letter{min-height:100svh;padding:calc(var(--barh) + var(--pad) / 2) var(--m) var(--pad);display:grid;align-items:center}
.letter-in{display:grid;grid-template-columns:4fr 8fr;gap:var(--m);align-items:start}
.letter h2{max-width:9ch}
.letter .body{max-width:52ch;font-size:var(--t-lead);line-height:1.6}
.letter .body p+p{margin-top:1em}
.nero{float:left;width:clamp(150px,15vw,240px);margin:-.6em 1.4em .4em -.8em;shape-outside:circle(48%)}
.sign{font-weight:800}

/* bands: one theme, one claim, one capture, one window */
.band{position:relative;height:100svh;min-height:520px;padding:calc(var(--barh) + var(--pad) / 2) var(--m) var(--pad);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--m);align-items:center}
.band h2{color:var(--acc)}
.cap{position:relative;margin-top:22px;padding-left:16px;max-width:34ch;font-size:var(--t-small);line-height:1.5;min-height:4.5em}
.cap::before{content:'';position:absolute;left:0;top:.2em;bottom:.2em;width:3px;background:var(--acc)}
.cap b{display:block;font-size:var(--t-body);color:var(--acc)}
.more-link{display:inline-block;margin-top:18px;font-weight:800;color:var(--acc);text-underline-offset:.2em}
.more-link:hover{text-decoration-thickness:2px}
.band .txt p{margin-top:20px;font-size:var(--t-lead);line-height:1.5;max-width:30ch}
.theme-now{position:fixed;z-index:20;right:calc(var(--m) + 112px);bottom:max(24px,calc(var(--pad) / 2 - 10px));font-size:var(--t-small);font-weight:800;color:var(--acc);transition:opacity .3s var(--ease)}
.intro-on .theme-now{opacity:0}

/* the site's bar stays once the hero has gone, in the colours of the band
   under it (site.js blends them like the keys'), so the page reads as a
   site and not a slide deck */
.topbar{position:fixed;z-index:30;top:0;left:0;right:0;height:var(--barh);display:flex;align-items:center;gap:32px;padding:0 var(--m);background:var(--bg);color:var(--ink);font-size:var(--t-small);font-weight:700;transform:translateY(-100%);transition:transform .45s var(--ease)}
.topbar.on{transform:none}
.topbar .logo{font-size:26px;margin-right:auto}
.topbar nav{display:flex;gap:28px}
.topbar nav a{text-decoration:none}
.topbar nav a:hover,.topbar nav a[aria-current]{color:var(--acc)}
.topbar .btn{padding:10px 18px}
.intro-on .topbar{display:none}

/* the page's own remote: up and down keys, bottom right, in the colours
   of the band beneath them (site.js copies its theme) */
.pager{position:fixed;z-index:20;right:var(--m);bottom:max(12px,calc(var(--pad) / 2 - 22px));display:flex;gap:8px}
.pg{width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--on);cursor:pointer;transition:transform .15s var(--ease),opacity .3s var(--ease),visibility .3s,filter .2s}
.pg:hover{filter:brightness(1.12)}
.pg:active{transform:scale(.92)}
.pg svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pg[hidden]{display:grid;opacity:0;visibility:hidden;pointer-events:none}
.intro-on .pager,.no-js .pager{opacity:0;pointer-events:none}

/* a capture sequence: real states of the app, stepping while in view */
.stage{width:var(--shot)}
.seq{position:relative;aspect-ratio:16/9;background:#09080c;overflow:hidden}
/* the incoming state fades in over the outgoing one, which stays put
   underneath, so the picture never dips to black between steps */
.seq > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:0}
.seq > .was{opacity:1;z-index:1}
.seq > .on{opacity:1;z-index:2;animation:step-in .9s var(--ease) both}
@keyframes step-in{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
.no-js .seq > :first-child{opacity:1}
/* a phone shot stands upright on the band's own ground inside the stage */
.seq > .ph{inset:-1px;width:auto;height:auto;background:var(--bg)}
.ph img{position:absolute;top:4%;left:50%;height:92%;width:auto;max-width:none;transform:translateX(-50%);border-radius:clamp(12px,1.5vw,24px)}
/* the phone stands on the stage's middle line, so its steps do too */
.has-ph .steps{justify-content:center}
/* taste-skill-ignore: a literal M3U snippet is code */
.raw{margin:0;padding:4% 5%;background:#09080c;color:#a7a2b6;font:500 clamp(11px,.95vw,15px)/1.65 ui-monospace,Consolas,monospace;overflow:hidden}
.raw .g{color:#6f6a80}
.raw .x{color:#f2b84b}
.steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;min-height:40px}
.steps button{position:relative;border:0;background:rgb(127 127 127/.16);color:inherit;font:inherit;font-size:var(--t-small);font-weight:800;padding:9px 14px;cursor:pointer;overflow:hidden;transition:background .2s,color .2s}
.steps button:hover{background:rgb(127 127 127/.28)}
.steps button[aria-current="true"]{background:var(--acc);color:var(--on)}
/* a quiet line under the current step runs out its time */
.steps button i{position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:left;pointer-events:none}
.steps button span{position:relative}
.steps button.run i{transform:scaleX(1);transition:transform var(--dwell,4s) linear}

/* swatches */
.sw{--ring:var(--ink);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:var(--shot);aspect-ratio:16/9}
.sw button{border:0;cursor:pointer;font:inherit;font-size:var(--t-small);font-weight:800;display:flex;align-items:flex-end;padding:12px;background:var(--bg);color:var(--ink);transition:transform .15s}
.sw button:hover{transform:scale(.97)}
/* the picked one is framed inside; the focus ring stays outside it, in
   the band's own ink (a swatch's accent can match the band) */
.sw button[aria-pressed="true"]{box-shadow:inset 0 0 0 5px var(--acc)} /* taste-skill-ignore: a selection frame, not depth */
.sw button:focus-visible{outline-color:var(--ring)}

/* more */
.more{min-height:100svh;padding:var(--pad) var(--m);display:grid;grid-template-columns:4fr 8fr;gap:var(--m);align-items:center}
.more ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,6svh,56px) var(--m);font-size:var(--t-lead);line-height:1.5}
.more li b{display:block;font-weight:800;line-height:1.3;margin-bottom:6px;color:var(--acc)}
.more li{max-width:34ch}

/* close */
/* the promise: what Tamam has none of, counted, beside the statement */
.close{min-height:100svh;padding:calc(var(--barh) + var(--pad) / 2) var(--m) calc(var(--pad) + 32px);display:grid;grid-template-columns:5fr 7fr;grid-template-rows:1fr auto;gap:clamp(32px,6svh,64px) var(--m);align-items:center}
.close h2{max-width:11ch;font-size:clamp(44px,5.4vw,92px)}
.zeros{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5svh,48px) var(--m)}
.zeros b{display:block;font-size:clamp(88px,10vw,168px);font-weight:800;letter-spacing:-.05em;line-height:.85;color:var(--acc)}
.zeros span{display:block;margin-top:10px;font-size:var(--t-lead);font-weight:700;line-height:1.3}
.close .give{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.close .give p{font-size:var(--t-lead);line-height:1.5;max-width:52ch}

/* the footer: the hero's Paper and big name again as the last word,
   the links in one list beside it, the credits under both */
.sitefoot{padding:clamp(48px,8svh,88px) var(--m) 96px;overflow:hidden}
.sf-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--m);align-items:end}
.sitefoot .big{font-size:min(20vw,25svh);margin:0 0 -.12em -.05em}
.sf-links{display:grid;gap:20px;justify-items:start;min-width:260px;font-weight:700}
.sf-links>ul{list-style:none;display:grid;gap:6px;font-size:var(--t-lead)}
.sf-links>ul a,.sf-mail a{text-decoration:none}
.sf-links>ul a:hover,.sf-mail a:hover{color:var(--acc)}
.sitefoot .langs summary{padding:0}
.langs.up ul{top:auto;bottom:100%;font-size:var(--t-small)}
/* the footer's menu opens from its left edge, in two columns, so it
   stays on a phone's screen and clear of the fixed bar */
.sitefoot .langs ul{right:auto;left:0;grid-template-columns:repeat(2,auto);column-gap:8px;min-width:0}
.sf-credits{display:block;margin-top:clamp(40px,7svh,72px);font-size:13px;line-height:1.6;max-width:72ch;opacity:.75}

/* an arriving section lifts its content into place with the scroll
   (--q, set by site.js); the page's one theme does the colour */
.band .txt,.band .stage{transform:translateY(calc((1 - var(--q,1)) * 56px));opacity:calc(.15 + .85 * var(--q,1))}

/* motion: parts rise as a band arrives; the capture settles */
.rise{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}
.no-js .rise{opacity:1;transform:none}

@media (max-width:820px){
  :root{--shot:100%;--t-mark:30vw;--pad:64px}
  .bar{flex-wrap:wrap;row-gap:12px}
  .bar nav{order:3;width:100%;gap:22px;font-size:15px}
  /* one panel per screen here too: every band at least a window tall,
     its content centred, and the scroll settles on a band's start */
  html{scroll-snap-type:y proximity}
  main > section{scroll-snap-align:start}
  .more{height:auto;min-height:0}
  .close{min-height:0;grid-template-columns:1fr;padding-top:72px}
  .sf-in{grid-template-columns:1fr}
  .sitefoot .big{font-size:27vw;order:2}
  .sitefoot{padding-bottom:56px}
  .letter{min-height:100svh}
  .hero{height:auto;min-height:100svh}
  .band{height:auto;min-height:100svh;align-content:center}
  .letter-in,.band{grid-template-columns:1fr}
  .hero{height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:'bar' 'tv' 'id' 'mk';row-gap:24px}
  .hero .tv{display:block;container-type:normal}
  .hero .screen{width:100%}
  .hero h1{font-size:26vw;margin-bottom:0}
  .band{padding-bottom:72px}
  .stage{order:2}
  .pager{display:none}
  .topbar nav{display:none}
  .band{padding-top:calc(var(--barh) + 24px)}
  .theme-now{right:var(--m);bottom:16px}
  .sw{aspect-ratio:auto;grid-template-columns:repeat(3,minmax(0,1fr))}
  .sw button{aspect-ratio:4/3}
  .more,.more ul{grid-template-columns:1fr}
  .more ul{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .more li{max-width:none}
  .nero{width:120px}
  /* a band with phone shots: the stage turns tall so a phone screen is
     read near its own size, shown from the top and cut at the bottom;
     a TV shot shows its middle. The caption follows the steps, under
     the picture it describes. The theme name would sit on them. */
  .has-ph .txt{display:contents}
  .has-ph h2{order:1}
  .has-ph .txt > p{order:2}
  .has-ph .stage{order:3}
  .has-ph .txt > .cap{order:4;margin-top:0;max-width:none;min-height:6em}
  .has-ph .seq{aspect-ratio:auto;height:min(62svh,125vw);background:var(--bg)}
  .has-ph .seq > img{object-position:60% 40%}
  .has-ph .ph img{top:0;width:78%;height:auto;border-radius:18px}
  .theme-now{display:none}
  .topbar .btn{white-space:nowrap}
}
@media (max-width:400px){
  .topbar{gap:16px}
  .topbar .btn,.bar .btn{font-size:15px;padding:9px 12px}
  .sw button{padding:10px 8px;font-size:13px}
}
@media (max-height:560px) and (min-width:821px){
  .hero,.band{height:auto}
}
/* The owner's call (2026-10-31): the site's motion stays on whatever
   the system's reduced-motion setting says. */

/* text sub-pages (site/build-pages.mjs): same bar, a contents column
   beside a readable text column, a short dark footer */
.subbar{display:flex;align-items:center;gap:32px;padding:22px var(--m);font-size:var(--t-small);font-weight:700}
.subbar .logo{font-size:30px;margin-right:auto}
.subnav{display:flex;gap:24px}
.subnav a{text-decoration:none}
.subnav a:hover,.subnav [aria-current]{color:var(--acc)}
.langs{position:relative}
.langs summary{cursor:pointer;list-style:none;padding:8px 0}
.langs summary::-webkit-details-marker{display:none}
.langs summary::after{content:'';display:inline-block;width:.45em;height:.45em;margin-left:.5em;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-.2em) rotate(45deg)}
.langs ul{position:absolute;z-index:5;right:0;top:100%;list-style:none;display:grid;gap:2px;min-width:180px;padding:8px;background:var(--bg);box-shadow:0 12px 32px rgb(0 0 0/.18)} /* taste-skill-ignore: a real dropdown menu */
.langs li a,.langs li span{display:block;padding:8px 12px;text-decoration:none}
.langs li a:hover{background:rgb(127 127 127/.14)}
.langs [aria-current]{color:var(--acc)}
.doc{display:grid;grid-template-columns:4fr 8fr;grid-template-areas:'toc head' 'toc body';gap:0 var(--m);padding:clamp(48px,10svh,120px) var(--m)}
.dochead{grid-area:head}
.doc article{grid-area:body}
.toc{grid-area:toc;position:sticky;top:32px;align-self:start;font-size:var(--t-small);font-weight:700}
.toc p{margin-bottom:12px;opacity:.75}
.toc ol{list-style:none;display:grid;gap:8px}
.toc a{text-decoration:none}
.toc a:hover{color:var(--acc)}
.doc article{max-width:66ch}
.doc h1{font-size:var(--t-head);font-weight:800;letter-spacing:-.04em;line-height:1}
.doc.notoc{grid-template-areas:'. head' '. body'}
.doc ol{margin-top:16px;padding-left:1.4em}
.doc .toc ol{margin-top:0;padding-left:0}
.doc .notice{margin-top:20px;padding:14px 18px;background:rgb(127 127 127/.14);font-size:var(--t-small);line-height:1.5;max-width:60ch}
.doc .notice b{color:var(--acc)}
.doc .updated{margin-top:16px;font-size:var(--t-small);font-weight:700;opacity:.75}
.doc h2{margin-top:56px;font-size:var(--t-lead);letter-spacing:-.01em;line-height:1.3;color:var(--acc);scroll-margin-top:24px}
.doc article > :first-child{margin-top:24px}
.doc p,.doc ul{margin-top:16px}
.doc ul{padding-left:1.2em}
.doc li+li{margin-top:8px}
.doc a{color:var(--acc);text-underline-offset:.15em}
@media (max-width:820px){
  .subbar{flex-wrap:wrap;row-gap:12px}
  .subnav{order:3;width:100%;gap:20px}
  .doc.notoc{grid-template-areas:'head' 'body'}
  .doc{grid-template-columns:1fr;grid-template-areas:'head' 'toc' 'body'}
  .toc{position:static;margin-top:32px}
  .toc ol{gap:6px}
}

/* feature pages: v8's step-by-step scenes as rows, in the theme of the
   home band that tells the same part; and their index */
.feature{padding:clamp(48px,10svh,120px) var(--m)}
.fhead h1,.findex h1{font-size:var(--t-head);font-weight:800;letter-spacing:-.04em;line-height:1}
.fhead .lead{margin-top:20px;font-size:var(--t-lead);line-height:1.5;max-width:40ch}
.fsteps{list-style:none;margin-top:clamp(56px,10svh,112px);display:grid;gap:clamp(64px,12svh,140px)}
.fstep{display:grid;grid-template-columns:4fr 8fr;gap:var(--m);align-items:center}
.ftxt h2{font-size:clamp(26px,2.4vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--acc)}
.ftxt p{margin-top:14px;font-size:var(--t-lead);line-height:1.5;max-width:32ch}
.fshot img,.fshot .rawpage{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.rawpage{margin:0;font-size:clamp(11px,1.05vw,17px);line-height:1.7}
.rawpage .tag{color:#f2b84b}
.rawpage .hit{background:rgb(242 184 75/.24);color:#fff}
.fnext{margin-top:clamp(64px,12svh,140px)}
.findex{padding:clamp(48px,10svh,120px) var(--m)}
.fgrid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--m);margin-top:clamp(40px,7svh,72px)}
.fgrid a{display:grid;gap:10px;padding:16px 16px 22px;text-decoration:none;transition:transform .2s var(--ease)}
.fgrid a:hover{transform:translateY(-4px)}
.fgrid img{width:100%;aspect-ratio:16/9;object-fit:cover}
.fi-t{margin-top:6px;font-size:clamp(22px,1.8vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--acc)}
.fi-d{line-height:1.5}
@media (max-width:820px){
  .fstep{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
}