/* ============================================================
   RR.CSS — the site's pages: "Istituzionale" (October 2026, fifth direction).

   The site is a long-term public showcase (his words: "una vetrina politica per il 2030"), so it reads like an
   institution's page, not a product's: warm paper and deep navy ink, one serif for what is said (Source Serif 4),
   one sans for everything around it (Geist), numbers in Geist Mono. Hairlines, square corners, generous white space,
   calm motion. The projects and the newsletter are the centre; the themes show what the work is about; the Lab is the
   evidence. The mark lives in the header, small, with no name beside it.

   THE SKINS: light is the default; `html[data-skin="dark"]` (public/skin.js, from the switch in the header,
   remembered in this browser) re-points every token below. A rule here never names a colour: it names a token, and
   each skin gives the token its value. Real text always carries a real colour (the audit reads it, in both skins).

   Tokens first (toys.css reads the same names), then the pieces in the order of a page.
============================================================ */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-serif-4-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-mono-latin-wght-normal.woff2) format('woff2')}

:root{
  --rr-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --rr-sans:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --rr-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --rr-display:var(--rr-serif);
  /* paper, panels, lines, ink */
  --bg:#FBFAF6;--bg-2:#F3F1EA;--surface:#FFFFFF;--surface-2:#F5F3EE;--surface-3:#ECE9E1;
  --line:#E3DFD5;--edge:#CFCAC0;--edge-hi:#8A857B;
  --text:#121821;--muted:#434B57;--dim:#5B6370;
  /* the one colour: institutional navy (text and fill alike), its hover, its hairline, the ink on it, its tint; and a
     brass for the small rule over a label */
  --accent:#173A6A;--accent-hi:#0E2A52;--accent-lo:#9AAFCB;--accent-ink:#FFFFFF;--accent-tint:#EAF0F7;--seal:#7A5C27;
  /* a move in a figure: up, down */
  --up:#1B6B43;--down:#A3301C;--up-rgb:27,107,67;--down-rgb:163,48,28;--on-up:#FFFFFF;--on-down:#FFFFFF;--tint-up:rgba(var(--up-rgb),.1);--tint-down:rgba(var(--down-rgb),.1);
  /* names the demos (toys.css) were written against */
  --gold:var(--accent);--gold-hi:var(--accent-hi);--gold-lo:var(--accent-lo);--gold-ink:var(--accent-ink);
  --fund:var(--accent);--spx:#8A857B;--heat:var(--accent);
  --head-bg:rgba(251,250,246,.94);--scrim:rgba(18,24,33,.42);--shadow:0 24px 60px -32px rgba(18,24,33,.35);
  --rr-control:44px;--rr-hair:1px solid;--rr-tag:28px;
  --pad:clamp(20px,4.4vw,56px);--head-h:72px;--max:1200px;--read:42rem;
  --ease:cubic-bezier(.2,0,0,1);--dur:200ms;--fast:120ms;
  color-scheme:light;
}
/* the dark skin: night paper, the navy turned to a clear blue */
:root[data-skin="dark"]{
  --bg:#0D131C;--bg-2:#111925;--surface:#141C28;--surface-2:#1A2331;--surface-3:#222C3B;
  --line:#253041;--edge:#34404F;--edge-hi:#6B7686;
  --text:#EEF1F5;--muted:#B4BCC8;--dim:#96A0AD;
  --accent:#9DBCEB;--accent-hi:#C2D6F4;--accent-lo:#3F5A82;--accent-ink:#0D131C;--accent-tint:#17243A;--seal:#D2B07A;
  --up:#6FD39B;--down:#FF8B76;--up-rgb:111,211,155;--down-rgb:255,139,118;--on-up:#0D131C;--on-down:#0D131C;
  --spx:#8E98A6;
  --head-bg:rgba(13,19,28,.94);--scrim:rgba(0,0,0,.6);--shadow:0 24px 60px -32px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* ---------- moving between pages (browsers that can): the header stays, the rest cross-fades ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);color:var(--text);font-synthesis:none;scroll-padding-top:calc(var(--head-h) + 24px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--rr-sans);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;padding-top:var(--head-h);overflow-x:clip}
[hidden]{display:none!important}
a{color:inherit}
p{margin:0;text-wrap:pretty}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.ar{display:inline-block;width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter;vertical-align:-.125em}
.ic{display:block;width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}
.skip{position:absolute;left:var(--pad);top:-80px;z-index:100;padding:14px 20px;background:var(--accent);color:var(--accent-ink);font:600 1rem/1 var(--rr-sans);text-decoration:none}
.skip:focus{top:12px}
.mono{font-family:var(--rr-mono);font-variant-numeric:tabular-nums}

/* ---------- type ---------- */
.display{font:600 clamp(2.35rem,3.4vw + 1.3rem,4.25rem)/1.06 var(--rr-serif);letter-spacing:-.018em;margin:0;text-wrap:balance;color:var(--text)}
.h2{font:600 clamp(1.85rem,1.6vw + 1.3rem,2.75rem)/1.12 var(--rr-serif);letter-spacing:-.012em;margin:0;color:var(--text)}
.h3{font:600 1.375rem/1.25 var(--rr-serif);letter-spacing:-.005em;margin:0;color:var(--text)}
.kicker,.label,.foot-k,.facts dt,.issue time,.about-i,.group-n,.row-no,.crumbs{font:600 .8125rem/1.35 var(--rr-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.kicker{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:var(--seal)}
.kicker::before{content:"";flex:none;width:28px;height:2px;background:var(--seal)}
.lede{font:400 clamp(1.125rem,.4vw + 1rem,1.3125rem)/1.55 var(--rr-sans);color:var(--muted);max-width:var(--read)}
.nb{white-space:nowrap}

/* ---------- controls: plain, solid, square ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;font:600 .9375rem/1.1 var(--rr-sans);color:var(--accent-ink);background:var(--accent);border:1px solid var(--accent);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn.btn-2,.btn.btn-inv{background:transparent;color:var(--accent);border-color:var(--accent-lo)}
.btn.btn-2:hover,.btn.btn-inv:hover{background:var(--accent-tint);border-color:var(--accent)}
.btn .ar{transition:transform var(--dur) var(--ease)}
.btn:hover .ar-right{transform:translateX(3px)}
.btn:hover .ar-down{transform:translateY(2px)}
.toy-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;font:600 .875rem/1 var(--rr-sans);color:var(--text);background:transparent;border:1px solid var(--edge);border-radius:0;cursor:pointer;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.toy-btn:hover{border-color:var(--accent);color:var(--accent)}
.toy-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- header ---------- */
.site-head{view-transition-name:head;position:fixed;inset:0 0 auto 0;z-index:60;height:var(--head-h);background:var(--head-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:clamp(8px,1.4vw,18px);height:100%}
.brand{display:flex;align-items:center;min-height:48px;min-width:48px;color:var(--accent);text-decoration:none;margin-right:auto}
.brand .mark{width:58px;height:auto;flex:none}
@media (min-width:1024px){.brand{margin-right:0}.head-nav{margin:0 auto 0 clamp(16px,3vw,48px)}}
.head-nav{display:flex;align-items:center;gap:4px}
.head-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;white-space:nowrap;font:500 .9375rem/1 var(--rr-sans);color:var(--muted);text-decoration:none;transition:color var(--dur) var(--ease)}
.head-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--dur) var(--ease)}
.head-nav a:hover,.head-nav a[aria-current]{color:var(--text)}
.head-nav a:hover::after,.head-nav a[aria-current]::after{transform:scaleX(1)}
.btn-head{min-height:44px;padding:0 18px;font-size:.875rem}
.jump-chip,.mus,.skin-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;min-width:44px;padding:0 12px;background:transparent;border:1px solid var(--line);border-radius:0;color:var(--muted);font:500 .875rem/1 var(--rr-sans);cursor:pointer;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.jump-chip{display:none}
.jump-chip kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;font:600 .8125rem/1 var(--rr-mono);color:var(--text);background:var(--surface-2);border:1px solid var(--line)}
.jump-chip .ic{width:18px;height:18px}
@media (hover:hover) and (pointer:fine) and (min-width:1180px){.jump-chip{display:inline-flex}}
.skin-btn{padding:0;width:44px}
.jump-chip:hover,.mus:hover,.skin-btn:hover{border-color:var(--accent);color:var(--accent)}
.mus[aria-expanded="true"]{color:var(--accent);border-color:var(--accent-lo)}
.mus-bars{display:flex;align-items:flex-end;gap:3px;height:15px;flex:none}
.mus-bars i{display:block;width:3px;background:currentColor}
.mus-bars i:nth-child(1){height:45%}.mus-bars i:nth-child(2){height:100%}.mus-bars i:nth-child(3){height:62%}.mus-bars i:nth-child(4){height:80%}
.skin-btn .ic-sun,:root[data-skin="dark"] .skin-btn .ic-moon{display:none}
:root[data-skin="dark"] .skin-btn .ic-sun{display:block}
@media (max-width:1023px){.head-nav{display:none}}
@media (max-width:719px){.mus-t{display:none}.mus{padding:0;width:44px}.btn-head{display:none}:root{--head-h:64px}.brand .mark{width:52px}}

/* the phone menu: a <details> in the header; below 1024px it replaces the nav */
.menu{display:none;position:static}
.menu-btn{list-style:none;display:grid;place-content:center;gap:6px;width:46px;height:44px;border:1px solid var(--line);cursor:pointer;-webkit-tap-highlight-color:transparent}
.menu-btn::-webkit-details-marker{display:none}
.menu-btn span{display:block;width:20px;height:2px;background:var(--text);transition:transform var(--dur) var(--ease)}
.menu[open] .menu-btn{border-color:var(--accent)}
.menu[open] .menu-btn span:first-child{transform:translateY(4px) rotate(45deg)}
.menu[open] .menu-btn span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu-panel{position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - var(--head-h));overflow:auto;display:flex;flex-direction:column;padding:8px var(--pad) 28px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.menu-panel a{display:flex;align-items:center;justify-content:space-between;min-height:62px;font:600 1.5rem/1.2 var(--rr-serif);color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.menu-panel a:hover,.menu-panel a[aria-current]{color:var(--accent)}
.menu-panel .menu-sub{margin-top:22px;justify-content:center;min-height:52px;border:0;font:600 1rem/1 var(--rr-sans);background:var(--accent);color:var(--accent-ink)}
.menu-panel .menu-sub:hover{background:var(--accent-hi);color:var(--accent-ink)}
@media (max-width:1023px){.menu{display:block}}

/* the player: Spotify's own embed, built by public/player.js on the first press; closing only hides it */
.rr-dock{position:fixed;z-index:70;right:var(--pad);bottom:20px;width:min(404px,calc(100vw - 2 * var(--pad)));background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur)}
.rr-dock:not(.open){opacity:0;transform:translateY(14px);visibility:hidden;pointer-events:none}
.rr-dock.open{transition-delay:0s}
.rr-dock-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-left:16px;border-bottom:1px solid var(--line)}
.rr-dock-t{font:600 .8125rem/1.2 var(--rr-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.rr-dock-x{display:grid;place-items:center;width:44px;height:44px;padding:0;background:transparent;border:0;color:var(--text);cursor:pointer}
.rr-dock-x:hover{color:var(--accent)}
.rr-dock iframe{display:block;width:100%;height:352px;border:0;background:var(--surface-2)}
@media (max-width:719px){.rr-dock{left:0;right:0;bottom:0;width:auto;border-inline:0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}}

/* ---------- the first screen: the statement, the name, two calls, and the newsletter beside it ---------- */
.hero-home{padding-block:clamp(48px,8vw,112px) clamp(48px,7vw,96px);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
.hero-copy{min-width:0}
.hero-home .display{max-width:19ch}
.hero-home .lede{margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
@media (max-width:479px){.hero-cta .btn{flex:1 1 100%}}
/* the highlighted word rolls (CSS only; the first is the real text): the widest word holds the room, so nothing jumps */
.roll{display:inline-grid;vertical-align:baseline}
.rw{grid-area:1/1;color:var(--accent)}
.rw:not(:first-child){opacity:0}
@media (prefers-reduced-motion:no-preference){
  .rw{animation:word 15s calc(var(--i) * 3s) infinite backwards}
  .rw:not(:first-child){animation-fill-mode:none}
}
@keyframes word{0%{opacity:0}2%,18%{opacity:1}20%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.rw:not(:first-child){display:none}}

/* a card beside the statement: the newsletter, with its form */
.card{position:relative;background:var(--surface);border:1px solid var(--line);padding:clamp(24px,3vw,36px)}
.card-accent{border-top:3px solid var(--accent)}
.hero-card .h3{margin-bottom:10px}
.hero-card .card-line{color:var(--muted);margin-bottom:18px}
.hero-card .latest{display:block;margin:-4px 0 20px;padding:14px 0;border-block:1px solid var(--line);font:600 1.0625rem/1.4 var(--rr-serif);color:var(--text)}
.hero-card .latest:empty{display:none}

/* ---------- sections ---------- */
.sec{padding-block:clamp(64px,8vw,112px) 0}
.sec.last{padding-bottom:clamp(64px,8vw,112px)}
.sec-band{background:var(--bg-2);border-block:1px solid var(--line);padding-block:clamp(64px,8vw,112px);margin-top:clamp(64px,8vw,112px)}
.sec-band + .sec{padding-top:clamp(64px,8vw,112px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(28px,4vw,48px);padding-bottom:16px;border-bottom:1px solid var(--line)}
.sec-head .kicker{margin-bottom:10px}
.sec-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 .9375rem/1.2 var(--rr-sans);color:var(--accent);text-decoration:none}
.sec-link:hover{text-decoration:underline;text-underline-offset:.25em}
.sec.flush{padding-top:0}

/* ---------- a project: in its own words, with how it works ---------- */
.project{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,64px);background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);padding:clamp(28px,4vw,56px)}
@media (min-width:900px){.project{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.project-t{font:600 clamp(2.4rem,3vw + 1.2rem,3.75rem)/1.05 var(--rr-serif);letter-spacing:-.02em;margin:0;color:var(--text)}
.project-t a{color:inherit;text-decoration:none}
.project-t a:hover{color:var(--accent)}
.project-q{font:400 clamp(1.25rem,.6vw + 1.1rem,1.5rem)/1.45 var(--rr-serif);color:var(--text);margin:18px 0 0;max-width:30ch}
.project-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:minmax(36px,max-content) minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--text)}
.steps li:first-child{padding-top:0}
.steps b{display:grid;place-items:center;min-width:36px;height:36px;padding:0 8px;font:600 .8125rem/1 var(--rr-sans);color:var(--accent);border:1px solid var(--accent-lo)}
.steps span{align-self:center}
.wait{padding-block:8px;margin-top:22px}
.wait-track{display:flex;height:10px;gap:3px}
.wait-ok{flex:58;background:var(--edge)}
.wait-over{flex:42;background:var(--accent);position:relative}
.wait-over::after{content:"";position:absolute;right:0;top:-8px;width:2px;height:26px;background:var(--down)}
.wait-marks{display:grid;grid-template-columns:58fr 42fr;margin-top:14px;font:600 .8125rem/1.35 var(--rr-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.wait-marks span:nth-child(2){grid-row:1;grid-column:2;padding-left:3px;color:var(--text)}
.wait-marks span:nth-child(3){grid-column:2;justify-self:end;text-align:right;color:var(--text);margin-top:6px}

/* ---------- newsletter ---------- */
.news{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,64px)}
@media (min-width:960px){.news{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:start}.news-side{position:sticky;top:calc(var(--head-h) + 28px)}}
.news-free{margin:10px 0 20px;color:var(--muted)}
.news-go{display:flex;flex-direction:column;gap:10px}
.news-go .btn{width:100%}
.news-rhythm{font:600 .875rem/1.4 var(--rr-sans);color:var(--seal);margin:-6px 0 16px}
.sub{max-width:34rem}
.sub .label{display:block;margin-bottom:8px}
.sub-row{display:flex;gap:10px;flex-wrap:wrap}
.sub input{flex:1 1 13rem;min-width:0;height:48px;padding:0 16px;border:1px solid var(--edge-hi);border-radius:0;background:var(--surface);color:var(--text);font:400 1rem/1.2 var(--rr-sans)}
.sub input::placeholder{color:var(--dim);opacity:1}
.sub input:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.sub .btn{flex:none}
.posts{min-width:0}
.posts-empty{padding:12px 0}
.posts-empty a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 .9375rem/1.4 var(--rr-sans);color:var(--accent)}
.issues{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.issues li{margin:0;border-bottom:1px solid var(--line)}
.issue{display:grid;gap:8px;padding:22px 0;color:inherit;text-decoration:none}
.issue time{color:var(--seal)}
.issue b{font:600 clamp(1.25rem,.5vw + 1.1rem,1.5rem)/1.3 var(--rr-serif);letter-spacing:-.005em;color:var(--text);overflow-wrap:break-word}
.issue span{font:400 1.0625rem/1.55 var(--rr-sans);color:var(--muted);max-width:62ch}
a.issue:hover b{color:var(--accent);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.issues .lead .issue{padding:clamp(24px,3vw,32px) 0}
.issues .lead .issue b{font-size:clamp(1.75rem,1.6vw + 1.2rem,2.5rem);line-height:1.15}
.issues .lead .issue span{font-size:1.1875rem}

/* ---------- themes: what the work is about, each leading to the work ---------- */
.themes{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.6vw,20px)}
@media (min-width:700px){.themes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.themes.t-4{grid-template-columns:repeat(4,minmax(0,1fr))}.themes.t-3,.themes.t-6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.theme{display:flex;flex-direction:column;gap:12px;min-width:0;padding:clamp(22px,2.4vw,30px);background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent)}
.theme-t{font:600 1.375rem/1.25 var(--rr-serif);margin:0;color:var(--text)}
.theme-line{font:400 1rem/1.55 var(--rr-sans);color:var(--muted);margin:0}
.theme-links{list-style:none;margin:auto 0 0;padding:12px 0 0}
.theme-links a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;font:600 .9375rem/1.2 var(--rr-sans);color:var(--accent);text-decoration:none;border-top:1px solid var(--line)}
.theme-links a:hover{text-decoration:underline;text-underline-offset:.25em}

/* ---------- the Lab, on the home page: three short lists ---------- */
.labs{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,48px)}
@media (min-width:900px){.labs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.labs-t{font:600 .8125rem/1.35 var(--rr-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0;padding-bottom:10px;border-bottom:2px solid var(--text)}
.labs ul{list-style:none;margin:0;padding:0}
.labs li a{display:block;padding:14px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.labs li b{display:block;font:600 1.1875rem/1.3 var(--rr-serif);color:var(--text)}
.labs li span{display:block;margin-top:2px;font:400 .9375rem/1.45 var(--rr-sans);color:var(--muted)}
.labs li a:hover b{color:var(--accent);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}

/* the Lab hub: an index, one line each */
.hub{padding-top:clamp(40px,5vw,64px)}
.hub .group{padding-top:clamp(40px,5vw,64px)}
.hub .group:first-child{padding-top:0}
.group-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.group-t{font:600 clamp(1.5rem,1vw + 1.2rem,2rem)/1.2 var(--rr-serif);margin:0;color:var(--text)}
.group-n{color:var(--dim)}
.group-line{color:var(--muted);margin:0 0 18px}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--text)}
.row{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line)}
.row-main{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px 32px;align-items:baseline;padding:18px 4px;color:inherit;text-decoration:none}
@media (min-width:760px){.row-main{grid-template-columns:3rem minmax(0,20rem) minmax(0,1fr)}}
.row-t{font:600 1.375rem/1.25 var(--rr-serif);color:var(--text)}
.row-line{font:400 1rem/1.5 var(--rr-sans);color:var(--muted)}
a.row-main:hover .row-t{color:var(--accent);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.row.soon .row-t,.row.soon .row-line{color:var(--dim)}
.go,.row-go{flex:none;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);color:var(--accent);text-decoration:none;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
a.go:hover,.row-go:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tag{display:inline-flex;align-items:center;gap:8px;height:var(--rr-tag);padding:0 10px;font:600 .8125rem/1 var(--rr-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);border:1px solid var(--line)}
.tag-live{color:var(--up);border-color:rgba(var(--up-rgb),.4);background:var(--tint-up)}

/* a lab's demo on its own page (toys.css draws the inside) */
.tiles{display:grid;grid-template-columns:minmax(0,1fr)}
.tile{position:relative;display:flex;flex-direction:column;gap:20px;min-width:0;padding:clamp(22px,2.4vw,34px);background:var(--surface);border:1px solid var(--line)}
.has-toy>.toy{margin-block:auto}

/* ---------- inner pages ---------- */
.hero-page{padding-block:clamp(40px,6vw,88px) clamp(32px,4vw,56px);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.hero-page .lede{margin-top:18px}
.hero-page .hero-cta{margin-top:28px}
.hero-news{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:end}
@media (min-width:960px){.hero-news{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.crumbs{display:flex;gap:10px;align-items:center;margin:0 0 18px}
.crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--accent);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--text)}
.demo{padding-top:clamp(32px,4vw,56px)}
.dt{padding-block:clamp(40px,5vw,72px)}
.dt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media (min-width:900px){.dt-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(32px,4vw,64px)}
  .dt-what{grid-column:span 5}.dt-how{grid-column:span 7}.dt-facts{grid-column:span 5}.dt-what:only-child{grid-column:span 7}
  .dt-grid:has(.dt-how) .dt-what{grid-column:1/span 5;grid-row:1}
  .dt-grid:has(.dt-how) .dt-facts{grid-column:1/span 5;grid-row:2}
  .dt-grid:has(.dt-how) .dt-how{grid-column:6/span 7;grid-row:1/span 2}}
.dt-grid .h3{padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.dt-list{list-style:none;margin:0;padding:0}
.dt-list li{padding:16px 0 16px 26px;border-bottom:1px solid var(--line);font:400 1.125rem/1.55 var(--rr-sans);position:relative;color:var(--text)}
.dt-list li::before{content:"";position:absolute;left:2px;top:27px;width:8px;height:8px;background:var(--accent)}
.facts{margin:0}
.facts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.facts dt{flex:none}
.facts dd{margin:0;font:500 1.0625rem/1.45 var(--rr-sans);text-align:right;min-width:0;color:var(--text)}
.facts dd a{color:var(--accent);text-underline-offset:.2em}
.reply{margin:0;padding-bottom:clamp(56px,7vw,96px);font:400 1.0625rem/1.5 var(--rr-sans);color:var(--muted)}
.reply a{color:var(--accent);text-underline-offset:.2em}
.feature{background:var(--bg-2);border-bottom:1px solid var(--line)}
.feature-in{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:end;padding-block:clamp(48px,7vw,96px)}
@media (min-width:900px){.feature-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,88px)}}
.feature-quote{font:400 clamp(1.25rem,.8vw + 1.05rem,1.625rem)/1.45 var(--rr-serif);margin-top:20px;max-width:30ch;color:var(--text)}
.feature-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- who I am ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
@media (min-width:900px){.about{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.about-i{display:block;margin-bottom:14px;color:var(--seal)}
.roll-list{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.roll-list li{padding:14px 0;border-bottom:1px solid var(--line);font:500 1.25rem/1.35 var(--rr-serif);color:var(--text)}
.about-body>p:first-child{font:400 1.25rem/1.6 var(--rr-serif);margin-bottom:28px;max-width:46ch;color:var(--text)}
.about-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.about-short{font:400 clamp(1.25rem,.6vw + 1.1rem,1.5rem)/1.55 var(--rr-serif);max-width:44ch;color:var(--text)}

/* ---------- footer ---------- */
.site-foot{margin-top:clamp(64px,8vw,112px);background:var(--bg-2);border-top:1px solid var(--line)}
.sec.last + .site-foot,main:has(.sec.last:last-child) + .site-foot{margin-top:0}
.foot{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;padding-block:clamp(48px,6vw,80px) 36px}
@media (min-width:760px){.foot{grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr)}}
.foot-brand{display:flex;align-items:center;gap:16px;min-height:48px;color:var(--accent);text-decoration:none;align-self:start}
.foot-brand .mark{width:64px;height:auto}
.foot-name{font:600 1.375rem/1 var(--rr-serif);color:var(--text)}
.foot-k{margin:0 0 10px}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col a{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;font:500 1rem/1.2 var(--rr-sans);color:var(--text);text-decoration:none}
.foot-col a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.25em}
.foot-col .ar{font-size:.875rem;color:var(--dim)}
.foot-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:18px 28px;border-top:1px solid var(--line);font:500 .875rem/1.4 var(--rr-sans);color:var(--dim)}

/* ---------- the quick search (K / Cmd+K) ---------- */
.jump{position:fixed;inset:0;z-index:100;display:flex;justify-content:center;align-items:flex-start;padding:max(16px,12vh) 16px 16px;background:var(--scrim)}
.jump[hidden]{display:none}
.jump-box{position:relative;width:min(640px,100%);max-height:min(600px,100%);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);color:var(--text);overflow:hidden;box-shadow:var(--shadow)}
.jump-in{flex:none;height:64px;padding:0 22px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:inherit;font:400 1.125rem/1 var(--rr-sans);outline:none}
.jump-in::placeholder{color:var(--dim);opacity:1}
.jump-list{list-style:none;margin:0;padding:8px;overflow-y:auto;overscroll-behavior:contain}
.jump-list li[hidden]{display:none}
.jump-list a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:48px;padding:12px 14px;color:inherit;text-decoration:none;font:500 1rem/1.3 var(--rr-sans)}
.jump-k{flex:none;font:600 .8125rem/1 var(--rr-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.jump-list a[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.jump-list a[aria-selected="true"] .jump-k{color:inherit}
.jump-none{padding:16px;color:var(--muted);font:400 1rem/1.3 var(--rr-sans)}
html.jump-open{overflow:hidden}

/* ---------- reveal on scroll: hidden only while the script is on its way ---------- */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--d,0) * 70ms)}
.js .rv.in{opacity:1;transform:none}
.no-stage .rv{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}*,*::before,*::after{transition-duration:.01ms!important}}

/* ============================================================
   PHONES AND TOUCH — the most important screens (checked at 360, 390 and 430 px)
============================================================ */
@media (max-width:719px){
  .sub-row{flex-direction:column}
  .sub-row .btn,.sub input{width:100%;flex:none}
  .project{padding:24px 20px;border-left-width:3px}
  .hero-page .hero-cta .btn{flex:1 1 100%}
  .dt .facts div{flex-direction:column;align-items:flex-start;gap:4px}.dt .facts dd{text-align:left}
  .card{padding:22px}
}
@media (pointer:coarse){
  .toy-btn{height:44px;padding:0 18px}
}