/* =====================================================================
   Urban Groups — shared sheet system
   The three deep pages are drawing sheets: same paper, same pens, same
   title block. What changes between them is the SCALE, and the scale
   readout in the header ticks down as you scroll deeper into detail.
   story.html keeps its own inline CSS; this file must agree with it.
   ===================================================================== */

/* ---------- self-hosted subsets (see scripts/subset-fonts.py) ---------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-subset.woff2') format('woff2');
  font-weight:300 800; font-stretch:100% 118%;
  font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-italic-subset.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-subset.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('../fonts/dmmono-subset.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Noto Serif Devanagari';
  src:url('../fonts/noto-dev-subset.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

/* =====================================================================
   THE PALETTE — three layers, and every colour has exactly one job.

   GROUND     paper and ink. The sheet, and the line drawn on it.
   TECHNICAL  slate. Anything that is a measurement: dimension strings, the
              grid, the scale rule, section marks, level markers, hairlines.
              It is the only cool hue on the site, which is what stops the
              warm ground reading as mud and lets the accent actually accent.
   HUMAN      ochre. Anything asking you to do or notice something: the
              current chapter, an active control, a call to action, money.

   Nothing else. The 3D materials, the charts and the drawings all derive
   from these; no page invents its own colour.
   ===================================================================== */
:root{
  --paper:#f3f1ea;
  --paper-2:#e9e6dc;
  --ink:#14161a;
  --ink-2:#474e54;

  --slate:#2b4152;
  --slate-2:#6c8496;

  --ochre:#c6763a;
  --ochre-2:#e2a468;

  --dusk:#12151a;
  --dusk-2:#1b2028;

  /* the two pens: everything below reads these, never a raw colour */
  --bg:var(--paper);
  --fg:var(--ink);
  --dim:var(--ink-2);
  --line:rgba(43,65,82,.20);
  --line-soft:rgba(43,65,82,.10);
  --veil:rgba(243,241,234,.9);
}
/* a section can flip to the dark sheet without touching any component rule */
.dk{
  --bg:var(--dusk);
  --fg:var(--paper);
  --dim:rgba(226,229,235,.6);
  --line:rgba(160,180,196,.22);
  --line-soft:rgba(160,180,196,.11);
  --veil:rgba(18,21,26,.9);
  background:var(--bg); color:var(--fg);
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth;scroll-padding-top:7rem}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);color:var(--fg);
  font-family:'Archivo',system-ui,sans-serif;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}

/* =====================================================================
   THE VOICES
   ARCHIVO 800, wide, uppercase  — structural. The building talking: the
     narrative chapter headlines on the pinned stages, and big figures.
   FRAUNCES roman, sentence case — editorial. The page explaining itself:
     every section heading in the reading half of a page.
   DM MONO                       — technical. Labels, sheet numbers, data.
   Before this split every heading on the site was the same shout.
   ===================================================================== */
.grot{font-family:'Archivo',sans-serif;font-weight:800;font-stretch:118%;
      letter-spacing:-.035em;text-transform:uppercase;line-height:.88;text-wrap:balance}
.ed{font-family:'Fraunces',Georgia,serif;font-weight:500;font-style:normal;
    letter-spacing:-.022em;line-height:1.02;text-wrap:balance;text-transform:none}
.ed em{font-style:italic;font-weight:400;color:var(--ochre)}
.ser{font-family:'Fraunces',Georgia,serif;font-weight:400;font-style:italic}

.mono{font-family:'DM Mono','Archivo',ui-monospace,monospace;font-weight:400;
      font-size:.65rem;letter-spacing:.18em;text-transform:uppercase}
.mono.lc{text-transform:none;letter-spacing:.04em;font-size:.72rem}
/* numbers are read, not chanted: no uppercase, no tracking, tabular figures */
.data{font-family:'DM Mono','Archivo',ui-monospace,monospace;font-weight:400;
      font-size:.78rem;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.dev{font-family:'Noto Serif Devanagari',serif;font-weight:600}
.num{font-variant-numeric:tabular-nums}

/* ---------- grain, shared with the landing page ---------- */
#grain{position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.2;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:gr 8s steps(9) infinite}
@keyframes gr{0%{transform:translate(0,0)}25%{transform:translate(-5%,3%)}
  50%{transform:translate(4%,-4%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){#grain{animation:none}}

/* =====================================================================
   ARRIVAL — the same beat on every page: the brand, then a drawn rule
   ===================================================================== */
#loader{position:fixed;inset:0;z-index:300;background:var(--paper);display:grid;
  place-items:center;transition:opacity .8s ease,visibility .8s}
#loader.done{opacity:0;visibility:hidden}
#loader .in{text-align:center}
#loader .ru{width:0;height:1px;background:var(--ink);margin:1.2rem auto 0;
  transition:width 1.1s cubic-bezier(.76,0,.24,1)}
#loader.go .ru{width:220px}
#loader .sub{margin-top:1.2rem;color:var(--graphite)}
@media(prefers-reduced-motion:reduce){#loader{transition:none}#loader .ru{transition:none;width:220px}}

/* =====================================================================
   THE PINNED NARRATIVE
   Same device as the landing page: a stage that stays put while a tall
   spacer scrolls behind it, and copy choreographed to the drawing.
   ===================================================================== */
#stage{position:fixed;inset:0;z-index:1;color:var(--fg)}
#spacer{position:relative;z-index:2;pointer-events:none}

#chapters{position:absolute;inset:0;z-index:5;pointer-events:none}
.ch{position:absolute;max-width:34rem;opacity:0;left:4.5vw;bottom:11vh;
  will-change:opacity,transform;transform:translateY(var(--ty,0))}
.ch::before{content:'';position:absolute;inset:-3rem -4.4rem;z-index:-1;
  background:radial-gradient(ellipse at center,var(--veil) 0%,var(--veil) 34%,transparent 78%)}
.ch.r{left:auto;right:5vw;text-align:right}
@media(min-width:901px){.ch.r{right:9rem}}
.ch .k{display:flex;align-items:baseline;gap:.8rem;color:var(--ochre);
  margin-bottom:1rem;position:relative}
.ch.r .k{justify-content:flex-end}
.ch .k .dev{font-size:1.4rem;line-height:1}
.ch h2{font-size:clamp(1.7rem,4.2vw,3.1rem);margin-bottom:1rem;position:relative}
.ch p{position:relative;font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(.98rem,1.4vw,1.22rem);line-height:1.55;color:var(--dim)}
.ch .sp{margin-top:1.3rem;color:var(--fg);opacity:.6;position:relative}
.ch.first{bottom:auto;top:50%;transform:translateY(calc(-50% + var(--ty,0)));max-width:44rem}
.ch.first h2{font-size:clamp(2.1rem,5.6vw,4.3rem)}

/* the chapter rail, in Devanagari numerals */
#rail{position:absolute;right:2.2rem;top:50%;transform:translateY(-50%);z-index:6;
  display:flex;flex-direction:column;gap:.9rem;align-items:flex-end;color:var(--fg)}
#rail .r{display:flex;align-items:center;gap:.7rem;opacity:.3;transition:opacity .5s}
#rail .r.on{opacity:1}
#rail .r span{font-family:'Noto Serif Devanagari',serif;font-size:.72rem}
#rail .r i{display:block;width:20px;height:1px;background:currentColor;
  transition:width .5s cubic-bezier(.16,1,.3,1)}
#rail .r.on i{width:44px;background:var(--ochre)}

#hint{position:absolute;left:50%;bottom:2.4vh;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  transition:opacity .5s;color:var(--fg)}
#hint .l{width:1px;height:38px;background:currentColor;opacity:.35;position:relative;overflow:hidden}
#hint .l::after{content:'';position:absolute;inset:0;background:var(--ochre);
  animation:dn 2s cubic-bezier(.76,0,.24,1) infinite}
@keyframes dn{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media(prefers-reduced-motion:reduce){#hint .l::after{animation:none}}

@media(max-width:900px){#rail{display:none}}
@media(max-width:820px){
  .ch{left:5vw;right:5vw;max-width:none;bottom:6vh}
  .ch.r,.ch.first{left:5vw;right:5vw;text-align:left;max-width:none}
  .ch.r .k{justify-content:flex-start}
  .ch.first{top:auto;bottom:6vh;transform:translateY(var(--ty,0))}
  .ch h2{font-size:clamp(1.5rem,7.4vw,2.1rem);margin-bottom:.7rem}
  .ch.first h2{font-size:clamp(1.55rem,7.8vw,2.2rem)}
  .ch p{font-size:.92rem;line-height:1.55}
  .ch .k{margin-bottom:.6rem;font-size:.58rem}
  .ch .sp{margin-top:.9rem;font-size:.58rem}
  /* a flat scrim beats a radial veil when the copy spans the full width */
  .ch::before{inset:-1.5rem -5vw -8vh;
    background:linear-gradient(180deg,transparent 0%,var(--veil) 20%,var(--veil) 100%)}
  #hint{bottom:1.4vh;font-size:.56rem}
  #hint .l{height:22px}
}

/* =====================================================================
   HEADER — nav + the scale readout
   ===================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .5s,color .5s,border-color .5s}
.nav .r1{display:flex;align-items:center;gap:1.6rem;padding:.85rem 2.2rem}
.nav .brand{font-weight:800;font-stretch:112%;letter-spacing:-.02em;font-size:1rem;
  text-transform:uppercase;white-space:nowrap}
.nav .brand i{color:var(--slate-2);font-style:normal}
.nav .links{display:flex;gap:1.5rem;margin:0 auto}
.nav .links a{position:relative;padding-bottom:3px;opacity:.62;transition:opacity .3s}
.nav .links a:hover{opacity:1}
.nav .links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--ochre);transition:right .4s cubic-bezier(.16,1,.3,1)}
.nav .links a:hover::after,.nav .links a[aria-current]::after{right:0}
.nav .links a[aria-current]{opacity:1}
.nav .r1 .sep{width:1px;height:16px;background:var(--line)}
.nav .act{display:flex;gap:1.1rem;align-items:center}
.nav .act .cta{border:1px solid var(--ochre);color:var(--ochre);padding:.5rem .9rem;
  transition:background .35s,color .35s}
.nav .act .cta:hover{background:var(--ochre);color:var(--bg)}
.nav .tel .short{display:none}

/* the scale readout: a real ruler that resizes as the drawing zooms in */
.rule{display:flex;align-items:center;gap:1rem;padding:.42rem 2.2rem;
  border-top:1px solid var(--line-soft);color:var(--slate-2);white-space:nowrap;overflow:hidden}
.rule .sheet{color:var(--slate)}
.rule .bar{position:relative;height:9px;flex:0 0 auto;width:var(--rw,120px);color:var(--slate-2);
  border-left:1px solid currentColor;border-right:1px solid currentColor;
  transition:width .55s cubic-bezier(.16,1,.3,1)}
.rule .bar::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
.rule .bar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:9px;
  background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px var(--tick,25%));
  transition:background .55s}
.rule .sc{color:var(--slate);transition:opacity .3s}
.rule .len{color:var(--slate)}
.rule .what{margin-left:auto;opacity:.7}
.dk .rule .sheet,.dk .rule .sc,.dk .rule .len{color:#9db1c0}
.dk .rule{color:rgba(157,177,192,.7)}
@media(max-width:900px){.rule .what{display:none}}

@media(max-width:820px){
  .nav .r1{padding:.7rem 1.1rem;gap:.9rem}
  .nav .brand{font-size:.9rem}
  .nav .links{order:3;width:100%;margin:0;gap:1.1rem;overflow-x:auto;
    padding:.55rem 1.1rem;border-top:1px solid var(--line-soft);
    scrollbar-width:none;-ms-overflow-style:none}
  .nav .links::-webkit-scrollbar{display:none}
  .nav .r1{flex-wrap:wrap;padding-bottom:0}
  .nav .r1 .sep{display:none}
  .nav .act{margin-left:auto;gap:.7rem}
  .nav .tel .full{display:none}
  .nav .tel .short{display:inline}
  .nav .act .cta{padding:.45rem .7rem;font-size:.6rem;letter-spacing:.1em}
  .rule{padding:.4rem 1.1rem;gap:.7rem;font-size:.58rem;letter-spacing:.1em}
  .rule .bar{width:var(--rw,70px)}
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:9rem 4.5vw 3.5rem;overflow:hidden}
.hero .stagewrap{position:absolute;inset:0;z-index:0}
.hero canvas,.hero svg.fill{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .cop{position:relative;z-index:2;max-width:46rem}
.hero .eb{display:flex;align-items:center;gap:.8rem;color:var(--ochre);margin-bottom:1.3rem}
.hero .eb .dev{font-size:1.4rem;line-height:1}
.hero h1{font-size:clamp(2.1rem,5.6vw,4.3rem);margin-bottom:1.5rem}
.hero .sub{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.02rem,1.65vw,1.35rem);line-height:1.55;color:var(--dim);max-width:36rem}
.hero .foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;margin-top:2.6rem;max-width:54rem;
  padding-top:1.4rem;border-top:1px solid var(--line);color:var(--dim)}
.hero .foot b{display:block;color:var(--fg);font-weight:600;font-size:1.05rem;
  letter-spacing:-.01em;margin-bottom:.3rem;text-transform:none}
@media(max-width:820px){
  .hero{padding:8.5rem 5vw 2.5rem;min-height:auto}
  .hero .foot{grid-template-columns:1fr 1fr;gap:1.2rem 1.4rem;margin-top:1.8rem}
}

/* =====================================================================
   SECTIONS
   ===================================================================== */
.sec{padding:7rem 4.5vw;border-top:1px solid var(--line);background:var(--bg);color:var(--fg)}
.sec.tight{padding-top:4rem}
/* a quieter beat between the loud ones: recessed ground, less air */
.sec.quiet{background:var(--paper-2);padding-top:4.6rem;padding-bottom:4.6rem}
.dk.quiet,.sec.quiet.dk{background:var(--dusk-2)}
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  flex-wrap:wrap;margin-bottom:3.2rem}
.shead .e{color:var(--ochre);margin-bottom:.9rem;display:block}
.shead h2{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.022em;
  line-height:1.02;text-wrap:balance;text-transform:none;font-size:clamp(1.9rem,4.8vw,3.5rem)}
.shead h2 em{font-style:italic;font-weight:400;color:var(--ochre)}
.shead .aside{color:var(--dim);max-width:30ch;line-height:1.9}
.lede{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:clamp(1.05rem,1.7vw,1.32rem);
  line-height:1.6;color:var(--dim);max-width:42rem;margin-bottom:2.6rem}
.body p{line-height:1.75;color:var(--dim);max-width:62ch;font-weight:300;margin-bottom:1.1rem}
.body p strong{color:var(--fg);font-weight:600}
.body p:last-child{margin-bottom:0}
@media(max-width:820px){
  .sec{padding:3.8rem 5vw}
  .shead{margin-bottom:2rem}
  .shead .aside{display:none}
}

/* ---------- spec table: label / value / why ---------- */
.spec{border-top:1px solid var(--line)}
.spec .row{display:grid;grid-template-columns:12rem 1fr 1.35fr;gap:1.6rem;
  padding:1.5rem 0;border-bottom:1px solid var(--line);align-items:start}
.spec .row .k{color:var(--ochre)}
.spec .row .v{font-weight:600;letter-spacing:-.01em;font-size:1.02rem;line-height:1.45}
.spec .row .v small{display:block;font-weight:400;font-size:.82rem;color:var(--dim);
  margin-top:.35rem;letter-spacing:0}
.spec .row .w{color:var(--dim);font-weight:300;font-size:.92rem;line-height:1.68}
@media(max-width:820px){
  .spec .row{grid-template-columns:1fr;gap:.55rem;padding:1.2rem 0}
}

/* ---------- numbered process rows ---------- */
.steps{border-top:1px solid var(--line);counter-reset:st}
.st{display:grid;grid-template-columns:3.4rem 1fr 1.5fr 8.5rem;gap:1.5rem;align-items:start;
  padding:1.7rem 0;border-bottom:1px solid var(--line);
  transition:padding-left .5s cubic-bezier(.16,1,.3,1)}
.st:hover{padding-left:1.2rem}
.st .i{color:var(--ochre)}
.st h3{font-family:'Archivo',sans-serif;font-size:clamp(1.15rem,2.3vw,1.6rem);font-weight:800;
  font-stretch:110%;letter-spacing:-.03em;text-transform:uppercase;line-height:1;transition:color .4s}
.st:hover h3{color:var(--ochre)}
.st p{color:var(--dim);font-size:.92rem;font-weight:300;line-height:1.7}
.st .r{text-align:right;color:var(--dim)}
.st .r b{display:block;color:var(--fg);font-weight:600;font-size:.95rem;
  letter-spacing:-.01em;text-transform:none;margin-bottom:.25rem}
@media(max-width:820px){
  .st{grid-template-columns:2.4rem 1fr;row-gap:.5rem;padding:1.3rem 0}
  .st:hover{padding-left:0}
  .st p,.st .r{grid-column:2;text-align:left}
  .st .r{display:flex;gap:.9rem;flex-wrap:wrap;align-items:baseline}
  .st .r b{margin:0}
}

/* ---------- honest comparison ---------- */
.cmp{border:1px solid var(--line);overflow-x:auto}
.cmp table{width:100%;border-collapse:collapse;min-width:44rem}
.cmp th,.cmp td{text-align:left;padding:1.1rem 1.4rem;border-bottom:1px solid var(--line);
  vertical-align:top;font-size:.92rem;line-height:1.65;font-weight:300;color:var(--dim)}
.cmp thead th{font-family:'DM Mono','Archivo',monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:400;color:var(--fg);background:var(--line-soft)}
.cmp thead th.us{color:var(--ochre)}
.cmp td:first-child{color:var(--fg);font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  white-space:nowrap}
.cmp td.us{color:var(--fg)}
.cmp tbody tr:last-child td{border-bottom:0}
@media(max-width:820px){.cmp th,.cmp td{padding:.85rem 1rem;font-size:.86rem}}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.card{background:var(--bg);padding:1.7rem 1.6rem}
.card .k{color:var(--ochre);margin-bottom:1rem;display:block}
.card h4{font-weight:700;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:.6rem}
.card p{color:var(--dim);font-size:.9rem;font-weight:300;line-height:1.7}

/* ---------- big figures ---------- */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:2rem}
.duo .figs{grid-template-columns:1fr 1fr;gap:2.6rem}
.figs b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-stretch:112%;
  font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.045em;line-height:.85;
  font-variant-numeric:tabular-nums;color:var(--fg)}
.figs span{display:block;margin-top:.75rem;color:var(--dim)}

/* ---------- buttons ---------- */
.btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;
  border:1px solid var(--line);padding:1rem 2rem;position:relative;overflow:hidden;
  transition:color .45s,border-color .45s;background:none;color:inherit;
  font-family:'DM Mono','Archivo',monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;line-height:1}
.btn span{position:relative;z-index:2}
.btn::before{content:'';position:absolute;inset:0;background:var(--ochre);
  transform:translateY(101%);transition:transform .55s cubic-bezier(.76,0,.24,1)}
.btn:hover{color:var(--bg);border-color:var(--ochre)}
.btn:hover::before{transform:none}
.btn.pri{border-color:var(--ochre);color:var(--ochre)}
.btnrow{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.4rem}
@media(max-width:520px){.btnrow{flex-direction:column}.btn{width:100%}}

/* ---------- closing CTA + footer ---------- */
.close{text-align:center;padding:8rem 4.5vw}
.close h2{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.024em;
  line-height:1.04;text-wrap:balance;text-transform:none;font-size:clamp(2rem,5.4vw,4.2rem)}
.close h2 em{font-style:italic;font-weight:400;color:var(--ochre)}
.close p{max-width:46ch;margin:1.7rem auto 0;color:var(--dim);line-height:1.75;font-weight:300}
.close .btnrow{justify-content:center}
@media(max-width:820px){.close{padding:4.5rem 5vw}}

/* the title block, exactly where it sits on a real sheet: bottom of the page */
.tblock{border-top:1px solid var(--line);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));background:var(--line);gap:1px}
.tblock div{background:var(--bg);padding:1.1rem 1.4rem}
.tblock .k{display:block;color:var(--dim);margin-bottom:.45rem}
.tblock .v{font-weight:600;font-size:.95rem;letter-spacing:-.01em}

.foot{border-top:1px solid var(--line);padding:1.7rem 4.5vw;display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--dim)}
@media(max-width:820px){.foot{padding:1.4rem 5vw;flex-direction:column;gap:.5rem}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- shared small parts ---------- */
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{border:1px solid var(--line);padding:.6rem 1rem;cursor:pointer;user-select:none;
  transition:background .3s,color .3s,border-color .3s;background:none;color:inherit;
  font-family:'DM Mono','Archivo',monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;line-height:1}
.chip:hover{border-color:color-mix(in srgb,var(--fg) 45%,transparent)}
.chip.on{background:var(--ochre);border-color:var(--ochre);color:var(--paper)}
.dk .chip.on{color:var(--dusk)}
@media(pointer:coarse){.chip{min-height:44px;display:inline-flex;align-items:center}}

.tag{display:inline-block;border:1px solid var(--line);padding:.3rem .6rem;color:var(--dim)}
.note{color:var(--dim);font-size:.82rem;font-weight:300;line-height:1.7;max-width:58ch;opacity:.8}