/* Greenpulse, on the Inkoation model: plain HTML, CSS and vanilla JS (see README.md). Map: fonts · tokens · base ·
   header · the hub (parchment, studies, emblem, doors, lens, words, reveal) · the wipe into a door · door pages · phones · motion */

/* ---------------------------------------------------------------- fonts (self-hosted; the kit's Geist and Fraunces) */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/geist-latin.woff2?v=9d846db84c") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/geist-latin-ext.woff2?v=0fa9cb4240") format("woff2"); unicode-range: U+0100-0101, U+0104-0107, U+010C-0113, U+0118-011B, U+0122-0123, U+012A-012B, U+0136-0137, U+013B-013C, U+0141-0148, U+0150-0151, U+0158-015B, U+0160-0161, U+0164-0165, U+016A-016B, U+016E-0171, U+0179-017E; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/geist-mono-latin.woff2?v=0e04bb6e7b") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/geist-mono-latin-ext.woff2?v=0f00847299") format("woff2"); unicode-range: U+0100-0101, U+0104-0107, U+010C-0113, U+0118-011B, U+0122-0123, U+012A-012B, U+0136-0137, U+013B-013C, U+0141-0148, U+0150-0151, U+0158-015B, U+0160-0161, U+0164-0165, U+016A-016B, U+016E-0171, U+0179-017E; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/fraunces-latin.woff2?v=6209c3e164") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/fraunces-latin-ext.woff2?v=4357f9562f") format("woff2"); unicode-range: U+0100-0101, U+0104-0107, U+010C-0113, U+0118-011B, U+0122-0123, U+012A-012B, U+0136-0137, U+013B-013C, U+0141-0148, U+0150-0151, U+0158-015B, U+0160-0161, U+0164-0165, U+016A-016B, U+016E-0171, U+0179-017E; }

/* ---------------------------------------------------------------- tokens: the kit's palette, one kit per door */
:root {
  --paper: #F3F7F6; --ink: #0A2628; --deep: #004A4F; --sage: #64A9A1; --cyan: #4FC0CA; --lcyan: #8BD6E2; --forest: #197A3A; --mist: #BFD2D3; --muted: #506566;
  --line: rgba(10, 38, 40, 0.14);
  /* the doors: Lived (the vine's side), Prescribed (the gears'), Taught (the banner's band), Energy (the bolt's channel) */
  --k-lived: #0F4526; --k-prescribed: #052E31; --k-taught: #0B6670; --k-energy: #0A2628;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Fraunces", Georgia, serif; --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.65, 0, .2, 1); --nav-h: 4.5rem; --pad: clamp(1rem, 3vw, 2.5rem);
  /* the pointer over whatever can be clicked, in place of the hand: the emblem's bolt as an arrow (scripts/cursor.py; tip = hot spot) */
  --hand: url("/assets/img/cursor.png?v=faa99dc354") 2 2, pointer;
}
@supports (cursor: image-set(url("/assets/img/cursor.png?v=faa99dc354") 1x) 2 2, pointer) { :root { --hand: image-set(url("/assets/img/cursor.png?v=faa99dc354") 1x, url("/assets/img/cursor-2x.png?v=b4f7852432") 2x) 2 2, pointer; } }
@supports (cursor: -webkit-image-set(url("/assets/img/cursor.png?v=faa99dc354") 1x) 2 2, pointer) and (not (cursor: image-set(url("/assets/img/cursor.png?v=faa99dc354") 1x) 2 2, pointer)) { :root { --hand: -webkit-image-set(url("/assets/img/cursor.png?v=faa99dc354") 1x, url("/assets/img/cursor-2x.png?v=b4f7852432") 2x) 2 2, pointer; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a[href], button:not(:disabled), [role="button"] { cursor: var(--hand); }
img, svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- header */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--nav-h); display: flex; align-items: center; gap: 1rem; padding: 0 var(--pad); color: var(--deep); transition: color 0.5s var(--ease); pointer-events: none; }
.hd > * { pointer-events: auto; }
.hd-home { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.gp-mark { width: 2.3rem; height: 2.3rem; }
.hd-word { font-weight: 700; letter-spacing: 0.18em; font-size: 0.8rem; }
.hd-status { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.45rem 0.8rem; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; opacity: 0.85; }
.dot { position: relative; } .hd-status .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(79, 192, 202, 0.55); animation: dot-pulse 2.2s ease-out infinite; }
.hd-status .dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--cyan); }
@keyframes dot-pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
.hd-menu { width: 2.6rem; height: 2.6rem; border: 0; border-radius: 999px; background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; display: inline-grid; place-items: center; padding: 0; }
.hd-menu-i, .hd-menu-i::before { display: block; width: 1rem; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease); }
.hd-menu-i { position: relative; transform: translateY(-3px); } .hd-menu-i::before { content: ""; position: absolute; top: 6px; }
.hd-menu[aria-expanded="true"] .hd-menu-i { transform: translateY(0) rotate(45deg); } .hd-menu[aria-expanded="true"] .hd-menu-i::before { transform: translateY(-6px) rotate(-90deg); }
.hd::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hd-bg, var(--paper)); opacity: 0; transition: opacity 0.35s var(--ease); }
.hd.scrolled::before { opacity: 0.94; }
body.door .hd { --hd-bg: var(--kit); }
/* in the lens, the header's paper copy; the real one is masked where the lens passes (main.js sets --lx --ly --lr) */
.hd.hd-ghost { position: absolute; z-index: 4; color: var(--paper); pointer-events: none; will-change: transform; }
.hd.hd-ghost > * { pointer-events: none; }
.hd.hd-ghost::before { display: none; }
.hd-ghost .hd-contact { background: var(--paper); color: var(--ink); }
.hub.revealed .hd-ghost { display: none; }  /* revealed, the real header turns to paper itself */
.hd.lensed { -webkit-mask-image: radial-gradient(circle at var(--lx, -999px) var(--ly, -999px), transparent calc(var(--lr, 0px) - 0.5px), #000 calc(var(--lr, 0px) + 0.5px)); mask-image: radial-gradient(circle at var(--lx, -999px) var(--ly, -999px), transparent calc(var(--lr, 0px) - 0.5px), #000 calc(var(--lr, 0px) + 0.5px)); }
body.menu-open .hd { color: var(--paper); } body.menu-open .hd::before { opacity: 0; }
.hd-contact { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 0.55rem 0.9rem; border-radius: 999px; background: var(--deep); color: var(--paper); }
/* the menu: the doors, the proposal, the consortium; it opens as a circle from its button (main.js) */
.menu { position: fixed; inset: 0; z-index: 19; background: var(--ink); color: var(--paper); display: grid; align-content: center; padding: calc(var(--nav-h) + 2rem) var(--pad) 2rem; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2.5rem 3rem; max-width: 72rem; width: 100%; margin: 0 auto; }
.menu-l { margin: 0 0 1rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.menu a { font-family: var(--font-serif); font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.15; text-decoration: none; transition: color 0.3s var(--ease); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--lcyan); }
.menu-foot { max-width: 72rem; width: 100%; margin: 3rem auto 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); }
body.menu-open { overflow: hidden; }
body.is-revealed .hd, body.door .hd { color: var(--paper); }
body.is-revealed .hd-contact, body.door .hd-contact { background: var(--paper); color: var(--ink); }

/* ---------------------------------------------------------------- the hub */
.hub { position: relative; height: 100vh; height: 100svh; min-height: 36rem; overflow: hidden; isolation: isolate; background: var(--paper); --ew: min(60vh, 70vw); --cy: 49%; }
/* the covered hero is one light sheet of parchment, its foot torn where it lies on the page */
.hub-paper { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: #F3E9CF; background-image:
    radial-gradient(18px circle at 6% 11%, rgba(154, 100, 40, 0.2), transparent), radial-gradient(11px circle at 9% 15%, rgba(154, 100, 40, 0.16), transparent),
    radial-gradient(24px circle at 94% 86%, rgba(154, 100, 40, 0.16), transparent), radial-gradient(9px circle at 88% 8%, rgba(154, 100, 40, 0.2), transparent),
    radial-gradient(14px circle at 3% 74%, rgba(154, 100, 40, 0.15), transparent), radial-gradient(7px circle at 61% 93%, rgba(154, 100, 40, 0.2), transparent),
    radial-gradient(12px circle at 97% 40%, rgba(154, 100, 40, 0.14), transparent),
    radial-gradient(ellipse 75% 70% at 50% 48%, transparent 60%, rgba(138, 90, 36, 0.2)),
    radial-gradient(closest-side at 22% 30%, rgba(160, 110, 50, 0.09), transparent), radial-gradient(closest-side at 78% 64%, rgba(160, 110, 50, 0.08), transparent),
    radial-gradient(closest-side at 64% 18%, rgba(160, 110, 50, 0.06), transparent), radial-gradient(closest-side at 30% 82%, rgba(160, 110, 50, 0.07), transparent),
    url(/assets/img/paper-grain.svg?v=9b34e6ff27),
    radial-gradient(ellipse 72% 72% at 50% 46%, #F8F2E1, #F3E9CF 55%, #E6D3A8);
  background-size: auto, auto, auto, auto, auto, auto, auto, auto, 46% 52%, 52% 58%, 38% 40%, 44% 46%, 240px 240px, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0% 4%, 100% 92%, 72% 0%, 12% 100%, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat; -webkit-mask: url(/assets/img/hero-edge.svg?v=128176928c) 0 0 / 100% 100% no-repeat; mask: url(/assets/img/hero-edge.svg?v=128176928c) 0 0 / 100% 100% no-repeat; }
.hub:not(.revealed) .doors a:not(.door-gap), .hub:not(.revealed) .hub-reveal { background: rgba(252, 248, 236, 0.72); box-shadow: 0 0 0 1px rgba(90, 60, 24, 0.22); }
.hub:not(.revealed) .doors a:hover, .hub:not(.revealed) .hub-reveal:hover { box-shadow: 0 0 0 1px var(--ink); }
/* the reveal button glows, breathing, whenever the hero is covered, so the eye finds it; a halo of its own, composited
   (opacity and scale only) */
.hub-reveal { position: relative; }
.hub-reveal::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; box-shadow: 0 0 16px 4px rgba(79, 192, 202, 0.7), inset 0 0 0 1.5px rgba(79, 192, 202, 0.95); opacity: 0; pointer-events: none; }
.hub:not(.revealed) .hub-reveal::after { animation: reveal-glow 2.2s ease-in-out infinite; }
@keyframes reveal-glow { 0%, 100% { opacity: 0.25; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .hub:not(.revealed) .hub-reveal::after { animation: none; opacity: 0.85; } }
.hub:not(.revealed) .doors a.door-gap { box-shadow: inset 0 0 0 1px rgba(90, 60, 24, 0.22); }
.hub[data-band] { cursor: var(--hand); }
/* the emblem, in the same box on the page and in the lens */
.em-box { position: absolute; left: 50%; top: var(--cy); width: var(--ew); aspect-ratio: 1756 / 1615; transform: translate(-50%, -50%); }
.em-img, .gp-lens { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.em-sk { position: absolute; inset: 0; width: 100%; height: 100%; will-change: opacity; animation: em-breathe 7s ease-in-out 3s infinite alternate; }
@keyframes em-breathe { from { opacity: 1; } to { opacity: 0.3; } }
.em-page { z-index: 1; }
/* studies of energy structures round the emblem (scripts/sketches.js), three on each side, each drawing itself in turn */
.hero-sk { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-sk .sk { position: absolute; }
.hero-sk img { display: block; width: 100%; height: auto; }
/* each study comes in stage by stage — pencil and wash, then its lines, then its shade — holds, and is taken away;
   opacity only, so the compositor does it all and nothing is redrawn */
.hero-sk .sk-b, .hero-sk .sk-c { position: absolute; inset: 0; }
.hero-sk .sk img { opacity: 0; will-change: opacity; animation: 14s linear var(--o, 0s) infinite; }
.hero-sk .sk img.sk-a { animation-name: sk-a; } .hero-sk .sk img.sk-b { animation-name: sk-b; } .hero-sk .sk img.sk-c { animation-name: sk-c; }
@keyframes sk-a { 0% { opacity: 0; } 6%, 74% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes sk-b { 0%, 5% { opacity: 0; } 15%, 70% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes sk-c { 0%, 13% { opacity: 0; } 25%, 66% { opacity: 1; } 78%, 100% { opacity: 0; } }
.sk-turbine { --o: 0s; } .sk-dam { --o: 2.3s; } .sk-cool { --o: 4.6s; } .sk-pylon { --o: 6.9s; } .sk-rotor { --o: 9.2s; } .sk-furnace { --o: 11.5s; }
@media (prefers-reduced-motion: reduce) { .hero-sk .sk img { animation: none; opacity: 1; } }
.sk-turbine { left: 2%; top: 13%; width: clamp(90px, 9.5vw, 180px); }
.sk-dam { left: 11.5%; top: 16%; width: clamp(160px, 18vw, 320px); }
.sk-cool { left: 8%; top: 49%; width: clamp(170px, 19.5vw, 340px); }
.sk-pylon { right: 2%; top: 13%; width: clamp(90px, 9.5vw, 180px); }
.sk-rotor { right: 11%; top: 19%; width: clamp(160px, 18vw, 320px); }
.sk-furnace { right: 8%; top: 49%; width: clamp(160px, 18.5vw, 330px); }
@media (max-width: 900px), (max-aspect-ratio: 5/4) { .hero-sk { display: none; } }
.em-lens { z-index: 2; color: var(--paper); filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.35)); }

/* the doors behind the page, cut along the emblem's own lines (main.js sets --ax, --bx0, --bx1, --by0, --by1 in px) */
.rv { position: absolute; inset: 0; display: block; color: var(--paper); text-decoration: none; }
.rv-lived { background: var(--k-lived); clip-path: inset(0 calc(100% - var(--ax, 50%)) 0 0); }
.rv-prescribed { background: var(--k-prescribed); clip-path: inset(0 0 0 var(--ax, 50%)); }
.rv-energy { background: var(--k-energy); clip-path: inset(0 calc(100% - var(--bx1, 53%)) 0 var(--bx0, 47%)); }
.rv-taught { background: var(--k-taught); clip-path: inset(var(--by0, 46%) 0 calc(100% - var(--by1, 54%)) 0); }
.rv-pat { position: absolute; inset: 0; background: center / cover no-repeat; }
.rv-lived .rv-pat { background-image: url("/assets/img/pat-lived.svg?v=1f4873d388"); }
.rv-prescribed .rv-pat { background-image: url("/assets/img/pat-prescribed.svg?v=81934bd3d9"); }
.rv-taught .rv-pat { background-image: url("/assets/img/pat-taught.svg?v=1c77d71982"); }
.rv-energy .rv-pat { left: var(--bx0, 47%); width: calc(var(--bx1, 53%) - var(--bx0, 47%)); right: auto; background:
    linear-gradient(90deg, #050C1C 0%, rgba(150, 200, 255, 0.55) 6%, rgba(60, 110, 200, 0.28) 11%, rgba(6, 14, 34, 0.92) 28%, rgba(6, 14, 34, 0.92) 72%, rgba(60, 110, 200, 0.24) 89%, rgba(185, 220, 255, 0.4) 94%, #050C1C 100%),
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(47, 120, 255, 0.2), transparent 75%), #071226; }
/* the neon tube's gas breathes, and a light runs slowly down its glass */
.rv-energy .rv-pat::before, .rv-energy .rv-pat::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.rv-energy .rv-pat::before { inset: 0; background: linear-gradient(90deg, transparent 18%, rgba(70, 140, 255, 0.22) 50%, transparent 82%); animation: gas 2.6s ease-in-out infinite alternate; will-change: opacity; }
.rv-energy .rv-pat::after { top: 0; height: 36%; left: 10%; right: auto; width: 9%; border-radius: 4px; background: linear-gradient(180deg, transparent, rgba(225, 240, 255, 0.55), transparent); animation: glint 6.5s cubic-bezier(.45, .05, .55, .95) infinite; will-change: transform; }
@keyframes gas { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes glint { from { transform: translate3d(0, -110%, 0); } to { transform: translate3d(0, 300%, 0); } }
/* its halo, spilling onto the doors beside it (under the banner) */
.tube-glow { position: absolute; top: 0; bottom: 0; left: calc(var(--bx0, 47%) - 70px); width: calc(var(--bx1, 53%) - var(--bx0, 47%) + 140px); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(47, 120, 255, 0.2) calc(70px - 1px), transparent calc(70px - 1px), transparent calc(100% - 70px + 1px), rgba(47, 120, 255, 0.2) calc(100% - 70px + 1px), transparent);
  animation: gas 3.1s ease-in-out infinite alternate; will-change: opacity; }
/* in the lens the patterns move (only while a door is shown: .moving): Lived's two swells roll across at their own
   pace, one bobbing; points of light travel along Prescribed's lines; Taught's three sine waves run through its band,
   their amplitude breathing like sound. Transforms only (the tiles are one period wide: sliding by one period loops) */
.rv-lived .rv-move { background-image: none; }
.rv-prescribed .rv-move { background-image: url("/assets/img/pat-prescribed-grid.svg?v=7632e7fd94"); }
.wv { position: absolute; top: 0; left: 0; height: 100%; width: calc(100% + var(--wp, 540px)); background: url("/assets/img/wave-lived-a.svg?v=9b9aea5ba3") repeat-x 0 0 / auto 100%; will-change: transform; animation: wv-left 24s linear infinite; }
.wv-b { left: calc(-1 * var(--wp, 540px)); background-image: url("/assets/img/wave-lived-b.svg?v=8d7766d3be"); animation: wv-right 37s linear infinite, wv-bob 6.5s ease-in-out infinite alternate; }
@keyframes wv-left { to { transform: translate3d(calc(-1 * var(--wp, 540px)), 0, 0); } }
@keyframes wv-right { to { transform: translate3d(var(--wp, 540px), 0, 0); } }
@keyframes wv-bob { from { translate: 0 -7px; } to { translate: 0 7px; } }
.net { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Energy's channel: a thin plasma filament crossing the screen from top to bottom, behind the emblem (main.js) */
.chan-cv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: screen; z-index: 1; }
.snd { position: absolute; left: 0; right: 0; top: var(--by0, 46%); height: calc(var(--by1, 54%) - var(--by0, 46%)); overflow: hidden; }
.sn { position: absolute; top: 0; left: 0; height: 100%; width: calc(100% + var(--sp, 400px)); background: url("/assets/img/sine-taught-1.svg?v=3e19d665c9") repeat-x 0 50% / auto 100%; will-change: transform; animation: sn-run 3.4s linear infinite, sn-amp 1.9s ease-in-out infinite alternate; }
.sn-2 { background-image: url("/assets/img/sine-taught-2.svg?v=d18f81de4c"); animation-duration: 2.3s, 1.3s; animation-direction: reverse, alternate; }
.sn-3 { background-image: url("/assets/img/sine-taught-3.svg?v=8fde987acd"); animation-duration: 1.6s, 0.9s; }
@keyframes sn-run { to { transform: translate3d(calc(-1 * var(--sp, 400px)), 0, 0); } }
@keyframes sn-amp { from { scale: 1 0.4; } to { scale: 1 1; } }
.hub:not(.moving) .rv-move * { animation-play-state: paused; }
.hub:not(.moving) .rv-energy .rv-pat::before, .hub:not(.moving) .rv-energy .rv-pat::after, .hub:not(.moving) .tube-glow { animation-play-state: paused; }
.hub:not(.lens-on):not(.revealed) .lens *, .hub:not(.lens-on):not(.revealed) .lens *::before, .hub:not(.lens-on):not(.revealed) .lens *::after { animation-play-state: paused; }
/* whatever has left the screen stops moving (main.js marks it .off) */
.off, .off *, .off *::before, .off *::after { animation-play-state: paused !important; }
.rv-taught::before, .rv-energy::before { content: ""; position: absolute; pointer-events: none; }
.rv-taught::before { left: 0; right: 0; top: var(--by0, 46%); height: calc(var(--by1, 54%) - var(--by0, 46%)); border-block: 1px solid rgba(243, 247, 246, 0.4); }
.rv-energy::before { top: 0; bottom: 0; left: var(--bx0, 47%); width: calc(var(--bx1, 53%) - var(--bx0, 47%)); border-inline: 1px solid rgba(160, 205, 255, 0.5); z-index: 1; }
/* the words: big titles and an arrow, nothing more */
.rv-label { position: absolute; display: flex; align-items: baseline; gap: 0.5rem; line-height: 0.9; }
.rv-label b { font-weight: inherit; }
.rv-go { font-style: normal; font-family: var(--font-sans); font-weight: 300; font-size: clamp(1rem, 1.8vw, 1.8rem); transition: transform 0.4s var(--ease); }
.rv-lived .rv-label { left: var(--pad); top: calc(var(--nav-h) + 5vh); font-family: var(--font-serif); font-weight: 500; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(2rem, 5.4vw, 5.6rem); color: #B9E6C6; }
.rv-prescribed .rv-label { right: var(--pad); top: calc(var(--nav-h) + 5vh); font-weight: 800; text-transform: uppercase; letter-spacing: -0.035em; font-size: clamp(1.5rem, 4.2vw, 4.4rem); color: var(--lcyan); }
.rv-taught .rv-label { left: var(--pad); top: var(--by0, 46%); height: calc(var(--by1, 54%) - var(--by0, 46%)); align-items: center; font-family: var(--font-serif); font-weight: 400; font-variation-settings: "opsz" 72; font-size: clamp(1.3rem, 3.2vw, 3.2rem); }
.rv-tag { position: absolute; top: 0; bottom: 0; left: var(--bx0, 47%); width: calc(var(--bx1, 53%) - var(--bx0, 47%)); z-index: 1; text-decoration: none;
  font-weight: 800; text-transform: uppercase; font-size: var(--et-fs, 2.6rem); line-height: 1; color: #9CC8FF; text-shadow: 0 0 22px rgba(47, 120, 255, 0.65), 0 0 2px rgba(220, 238, 255, 0.9); }
.et { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; }
.et b { writing-mode: vertical-rl; white-space: nowrap; letter-spacing: -0.02em; line-height: 1; }
.et-top { top: var(--et-t0, 12%); height: calc(var(--et-t1, 24%) - var(--et-t0, 12%)); }
.et-bot { top: var(--et-b0, 76%); height: calc(var(--et-b1, 96%) - var(--et-b0, 76%)); }
.et .rv-go { margin-top: 0.15em; font-size: 0.7em; font-weight: 300; text-shadow: none; }
.rv-tag b { font-weight: inherit; }
/* on phones Lived's and Prescribed's titles run round the ring (render.js ringArc), in the emblem's units */
.rv-arc { display: none; overflow: visible; pointer-events: none; }
.rv-arc-lived text { font-family: var(--font-serif); font-weight: 500; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: 152px; fill: #B9E6C6; }
.rv-arc-prescribed text { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em; font-size: 104px; fill: var(--lcyan); }
/* on phones the emblem's banner covers Taught's band: its title stands just below the band instead */
.rv-tag-taught { display: none; position: absolute; left: var(--pad); top: calc(var(--by1, 54%) + 0.7rem); z-index: 1; align-items: baseline; gap: 0.4rem; text-decoration: none; color: var(--paper); font-family: var(--font-serif); font-size: 1.9rem; line-height: 1; }
.rv-tag-taught .rv-go { font-size: 1rem; }
.hub.revealed .lens .rv-tag-taught { pointer-events: auto; cursor: var(--hand); }
.hub.revealed .lens .rv-tag { pointer-events: auto; cursor: var(--hand); }
.hub.revealed .rv-tag:hover .rv-go { transform: translateY(0.3em); }
.hub.revealed .hub-under .doors { opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); }
.hub.revealed .rv:hover .rv-go { transform: translateX(0.35em); }

/* the lens: a circle that moves on the compositor, its content counter-moving; a black hole on the page: a dark rim
   inside, a thin photon ring, rings falling into it, and round it a ring of the page bent by its pull (the warp's
   backdrop-filter is Chromium's; elsewhere the rest stands on its own) */
.lens { position: absolute; left: 0; top: 0; z-index: 3; width: 300px; height: 300px; border-radius: 50%; opacity: 0; transition: opacity 0.35s var(--ease); will-change: transform; }
.lens-clip { position: absolute; inset: 0; clip-path: circle(50%); }
.lens-clip::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: 50%; pointer-events: none; background: radial-gradient(circle closest-side, transparent 72%, rgba(1, 16, 18, 0.32) 88%, rgba(0, 6, 8, 0.82) 100%); }
.lens-in { position: absolute; left: 0; top: 0; will-change: transform; }
.lens::before { content: ""; position: absolute; inset: -1px; z-index: 1; border-radius: 50%; pointer-events: none; border: 1px solid rgba(214, 246, 250, 0.9); box-shadow: 0 0 10px 1px rgba(79, 192, 202, 0.55), 0 0 34px 6px rgba(10, 38, 40, 0.16); }
.bh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lens-warp { position: absolute; inset: -35%; border-radius: 50%; pointer-events: none; -webkit-backdrop-filter: url(#bh); backdrop-filter: url(#bh); }
.lens-rings { position: absolute; inset: 0; pointer-events: none; }
.lens-rings i { position: absolute; inset: -2px; border-radius: 50%; border: 1px solid rgba(79, 192, 202, 0.7); opacity: 0; animation: bh-fall 3.2s cubic-bezier(.55, 0, .9, .6) infinite; }
.lens-rings i:nth-child(2) { animation-delay: -0.8s; } .lens-rings i:nth-child(3) { animation-delay: -1.6s; } .lens-rings i:nth-child(4) { animation-delay: -2.4s; }
@keyframes bh-fall { 0% { transform: scale(1.62); opacity: 0; } 35% { opacity: 0.55; } 85% { opacity: 0.8; } 100% { transform: scale(1); opacity: 0; } }
.hub.revealed .lens { transition: none; }
.hub.revealed .lens::before, .hub.revealed .lens-warp, .hub.revealed .lens-rings, .hub.revealed .lens-clip::after { display: none; }
.hub.revealed .lens .rv { pointer-events: auto; cursor: var(--hand); }
.bolt-cv { position: absolute; left: calc(740 / 1756 * 100%); top: calc(40 / 1615 * 100%); width: calc(320 / 1756 * 100%); height: calc(1620 / 1615 * 100%); mix-blend-mode: screen; pointer-events: none; }

/* each part of the emblem moves under its own door (and all of them once revealed) */
.gp-lens * { transform-box: view-box; }
.gp-lens .gp-pull, .gp-lens .gp-sparkle, .gp-lens .gp-flash { display: none; }
/* a part moves only under its own door (revealed too, one door at a time): the gears tick round like clockwork and the
   leaves take one gust — each change repaints the whole emblem, so these are kept to a few redraws a second */
.hub[data-band="prescribed"] .gp-lens .gp-gear:not(#le-lotus-head) { animation: lens-spin var(--dur, 6s) steps(40) infinite var(--dirn, normal); }
.hub[data-band="lived"] .gp-lens .gp-leaf { animation: lens-gust calc(var(--sw, 2.6s) * 0.7) cubic-bezier(.3, .7, .4, 1) calc(var(--sd, 0s) * -0.15) both; }
.hub[data-band="lived"] .gp-lens #le-lotus-head { animation: lens-spin 9s steps(48) infinite; }
:is(.hub[data-band="taught"], .hub.revealed) .gp-lens .gp-open { animation: gp-open 0.75s cubic-bezier(.2, .8, .2, 1) both; }
:is(.hub[data-band="taught"], .hub.revealed) .gp-lens .gp-revealx { animation: gp-revealx 0.7s 0.3s cubic-bezier(.2, .8, .2, 1) both; }
.gp-lens #le-gp-letters, .gp-lens #le-gp-bolt { transition: color 0.4s var(--ease); }
.hub[data-band="taught"] .gp-lens #le-gp-letters { color: var(--lcyan); }
:is(.hub[data-band="energy"], .hub.revealed) .gp-lens #le-gp-bolt { color: #CFF4F8; }
@keyframes lens-spin { to { transform: rotate(360deg); } }
@keyframes lens-gust { 0% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 55% { transform: rotate(4deg); } 80% { transform: rotate(-1.5deg); } 100% { transform: rotate(0); } }
@keyframes gp-open { from { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } to { transform: scaleX(1); opacity: 1; } }
@keyframes gp-revealx { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }

/* the page's words over it all */
.hub-eyebrow, .hub-hint { position: absolute; z-index: 2; margin: 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--deep); }
.hub-eyebrow { left: 0; right: 0; text-align: center; top: calc(var(--cy) - 0.46 * var(--ew) - 2.3rem); }
.hub-under { position: absolute; left: 0; right: 0; top: calc(var(--cy) + 0.46 * var(--ew) + 1rem); display: grid; justify-items: center; gap: 0.8rem; pointer-events: none; }
.hub-hint { position: relative; text-align: center; padding: 0 var(--pad); transition: opacity 0.5s var(--ease); }
.hub.seen .hub-hint { opacity: 0.45; }
.h-touch { display: none; }
@media (hover: none) { .h-mouse { display: none; } .h-touch { display: inline; } }
.doors { position: relative; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; pointer-events: auto; padding: 0 var(--pad); }
.doors a { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; padding: 0.45rem 0.8rem; border-radius: 999px; box-shadow: 0 0 0 1px var(--line); text-decoration: none; background: var(--paper); color: var(--ink); transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease); }
.doors a:hover, .doors a:focus-visible { box-shadow: 0 0 0 1px var(--ink); }
.bolt-i { width: 1.25em; height: 1.25em; margin-left: -0.2em; color: var(--deep); }
.doors a.door-gap { margin-left: 0.5rem; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.door-gap small { font-size: inherit; font-weight: 500; letter-spacing: 0.1em; text-transform: none; opacity: 0.62; }
.hub.revealed .doors a { background: rgba(10, 38, 40, 0.55); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(243, 247, 246, 0.45); }
.hub.revealed .bolt-i { color: var(--lcyan); }
.hub-foot { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); z-index: 5; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; pointer-events: none; }
.hub-foot > * { pointer-events: auto; }
.hub-tag { margin: 0; max-width: 34ch; font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.35; color: var(--deep); }
.hub-tag span { display: block; }
@media (max-height: 860px), (max-width: 1100px) { .hub-tag span { display: none; } }
.hub-tag small { display: block; margin-top: 0.4rem; max-width: 30ch; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hub-reveal { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.6rem; padding: 0 1rem 0 0.75rem; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line); font: 600 0.66rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; transition: box-shadow 0.3s, background-color 0.3s, color 0.3s; }
.hub-reveal .rv-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 1.5px solid var(--cyan); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px var(--cyan); }
.hub-reveal:hover { box-shadow: 0 0 0 1px var(--ink); }
.hub.revealed .hub-tag { color: var(--paper); }
.hub.revealed .hub-tag small { color: var(--mist); }
.hub.revealed .hub-reveal { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(243, 247, 246, 0.45); }

/* the revealed hero's corners: the consortium on its map, the proposal in figures (glass cards over the doors) */
.hub-promo { position: absolute; z-index: 5; padding: 0.8rem; border-radius: 1rem; color: var(--paper); background: rgba(6, 22, 24, 0.86); box-shadow: inset 0 0 0 1px rgba(243, 247, 246, 0.16), 0 14px 40px rgba(0, 0, 0, 0.25); 
  opacity: 0; transform: translate3d(0, 14px, 0); pointer-events: none; transition: opacity 0.5s var(--ease) 0.45s, transform 0.7s var(--ease-out) 0.45s; }
.hub.revealed .hub-promo { opacity: 1; transform: none; pointer-events: auto; }
.hub-promo a { color: inherit; text-decoration: none; }
.promo-map { left: var(--pad); bottom: calc(var(--pad) + 2.6rem); width: clamp(170px, 14vw, 250px); }
.hub.revealed .hub-tag span { display: none; }
.promo-map .map-box { box-shadow: none; border-radius: 0.6rem; background: rgba(243, 247, 246, 0.03); }
.promo-map .m-lab { font-size: 44px; fill: var(--paper); stroke: rgba(6, 22, 24, 0.9); stroke-width: 8px; } .promo-map .m-city, .promo-map .m-far-l { display: none; }
/* the card's map flies: Europe, then along the great circle to Montréal, a pause there, and back (the wide sheet is
   1960 x 1530 from (-1060, -530); Europe's window starts at (0, 0), Montréal's at (-1050, -520)) */
.map-fly .map-pan { position: absolute; left: 0; top: 0; width: calc(100% * 1960 / 900); height: calc(100% * 1530 / 1000); transform: translate(-54.08%, -34.64%); will-change: transform; }
.hub.revealed .map-fly .map-pan { animation: fly 18s cubic-bezier(.45, 0, .25, 1) 1.6s infinite; }
@keyframes fly { 0%, 34% { transform: translate(-54.08%, -34.64%); } 50%, 68% { transform: translate(-0.51%, -0.65%); } 84%, 100% { transform: translate(-54.08%, -34.64%); } }
@media (prefers-reduced-motion: reduce) { .hub.revealed .map-fly .map-pan { animation: none; } }
.promo-map .m-link { stroke: var(--lcyan); stroke-width: 4; } .promo-map .m-far { stroke-dasharray: 10 12; } .promo-map .m-spark { r: 7px; } .promo-map .m-dot { fill: var(--lcyan); } .promo-map .m-ring { stroke: var(--lcyan); } .promo-map .m-coord .m-dot { fill: #7FE0A0; }
.promo-cap { display: grid; gap: 0.15rem; margin-top: 0.6rem; font-size: 0.78rem; } .promo-cap b { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .promo-cap i { font-style: normal; color: var(--lcyan); }
.promo-figs { right: var(--pad); bottom: calc(var(--pad) + 3.6rem); width: clamp(220px, 19vw, 300px); }
.promo-k { margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lcyan); }
.promo-figs ul { list-style: none; margin: 0 0 0.7rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 0.8rem; }
.promo-figs li { display: grid; gap: 0.1rem; } .promo-figs .big-n { font-size: clamp(1.4rem, 2vw, 2rem); color: var(--paper); } .promo-figs li span { font-size: 0.72rem; color: #C2D6D7; }
.promo-figs > a { font-size: 0.8rem; color: var(--lcyan); } .promo-figs > a:hover, .promo-map a:hover .promo-cap i { text-decoration: underline; }
@media (max-width: 1000px), (max-height: 700px) { .hub-promo { display: none; } }

/* ---------------------------------------------------------------- the wipe into a door (the painted transitions come here) */
.wipe { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; color: var(--paper); pointer-events: none; }
.wipe b { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.6rem, 8vw, 7.5rem); letter-spacing: -0.02em; opacity: 0; animation: wipe-word 0.6s 0.35s var(--ease) both; }
@keyframes wipe-word { from { opacity: 0; transform: translateY(0.3em); } to { opacity: 1; transform: none; } }
.wipe-lived { background: var(--k-lived); } .wipe-prescribed { background: var(--k-prescribed); } .wipe-taught { background: var(--k-taught); } .wipe-energy { background: var(--k-energy); }

/* ---------------------------------------------------------------- pages: the house (paper) and the doors (their kits)
   One set of blocks for both; a door page sets the theme tokens of its kit. */
body.house, body.home { --fg: var(--ink); --muted: #506566; --line: rgba(10, 38, 40, 0.14); --card: rgba(255, 255, 255, 0.55); --accent: var(--deep); --soft: rgba(10, 38, 40, 0.04); }
body.door { --fg: var(--paper); --muted: #C2D6D7; --line: rgba(243, 247, 246, 0.18); --card: rgba(243, 247, 246, 0.045); --accent: var(--lcyan); --soft: rgba(243, 247, 246, 0.06); background: var(--kit); color: var(--paper); }
body.door-lived { --kit: var(--k-lived); --accent: #B9E6C6; } body.door-prescribed { --kit: var(--k-prescribed); } body.door-taught { --kit: var(--k-taught); --accent: #CFF4F8; } body.door-energy { --kit: var(--k-energy); --accent: var(--cyan); } body.door-gap { --kit: #06363A; }
.frame { position: relative; width: 100%; max-width: 72rem; margin: 0 auto; }
.eyebrow { margin: 0 0 1rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
/* the head of a page */
.page-head { position: relative; padding: calc(var(--nav-h) + 5rem) var(--pad) 3.5rem; overflow: hidden; }
.door .page-head { min-height: 82vh; min-height: 82svh; display: grid; align-content: end; padding-bottom: 4rem; }
.page-head .rv-pat { opacity: 0.8; }
.door-lived .page-head .rv-pat { background-image: url("/assets/img/pat-lived.svg?v=1f4873d388"); } .door-prescribed .page-head .rv-pat { background-image: url("/assets/img/pat-prescribed.svg?v=81934bd3d9"); } .door-taught .page-head .rv-pat { background-image: url("/assets/img/pat-taught.svg?v=1c77d71982"); }
.page-head h1 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-variation-settings: "opsz" 144; font-size: clamp(2.4rem, 6.2vw, 5.6rem); line-height: 0.98; letter-spacing: -0.025em; max-width: 18ch; text-wrap: balance; }
.page-head h1 b { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.045em; text-transform: uppercase; font-size: 0.88em; }
.page-head .lead { margin: 1.8rem 0 0; max-width: 62ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--fg); opacity: 0.9; }
.page-head .sub { margin: 1rem 0 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.planned { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.6rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0.4rem 0.75rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
/* sections */
.sec { padding: 4.5rem var(--pad); }
.sec + .sec { padding-top: 1rem; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0.5rem 3rem; align-items: start; margin-bottom: 2.2rem; }
.sec-head .eyebrow { grid-column: 1 / -1; margin-bottom: 0.2rem; }
.sec-head h2 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-variation-settings: "opsz" 96; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.sec-intro { color: var(--muted); font-size: 1rem; line-height: 1.6; }
.sec-intro p { margin: 0 0 0.8rem; }
.prose { max-width: 66ch; font-size: 1.02rem; line-height: 1.65; }
.prose p { margin: 0 0 1rem; hyphens: auto; }
.prose strong, .card strong, .row-v strong { color: var(--accent); font-weight: 600; }
.small { font-size: 0.86rem; color: var(--muted); line-height: 1.6; max-width: 70ch; }
/* grids and cards */
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.card { position: relative; padding: 1.4rem 1.4rem 1.5rem; border-radius: 1rem; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.card h3 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 1.35rem; line-height: 1.15; }
.card .meta { margin: 0.45rem 0 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.card p { margin: 0.8rem 0 0; font-size: 0.95rem; line-height: 1.6; }
.card .num { font-family: var(--font-mono); font-size: 1.4rem; color: var(--accent); }
.card.dashed { box-shadow: inset 0 0 0 1px var(--line); outline: 1px dashed var(--accent); outline-offset: -1px; }
a.card { display: block; text-decoration: none; transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
a.card:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.card-foot { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
/* the device: a framed block */
.device { padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 1.2rem; box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--soft); }
.device h2 { margin: 0 0 1.2rem; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.1; }
.device ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); font-size: 0.95rem; line-height: 1.6; }
/* key–value lists */
.kv { display: grid; gap: 0.45rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 1rem 0 0; font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.55; color: var(--muted); }
.kv .wide { grid-column: 1 / -1; }
.kv dt { display: inline; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.kv dt::after { content: " · "; }
.kv dd { display: inline; margin: 0; }
/* rows: a title column beside a text */
.rows { border-radius: 1rem; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0.5rem 1.6rem; padding: 1.1rem 1.3rem; }
.row + .row { border-top: 1px solid var(--line); }
.row-t { margin: 0; font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.25; }
.row-sub { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--muted); }
.row-tag { margin: 0.35rem 0 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.row-v { font-size: 0.94rem; line-height: 1.6; }
.row-v p { margin: 0 0 0.5rem; } .row-v p:last-child { margin: 0; }
.row-v .mono { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); margin-top: 0.35rem; }
/* pills */
.pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.pill { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.25rem 0.65rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 0.8rem; background: var(--soft); }
.pill.mono { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pill.acc { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
/* steps: a vertical line of numbered stations */
.steps { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 1.5px solid var(--line); display: grid; gap: 1.6rem; }
.steps li { position: relative; }
.steps li::before { content: ""; position: absolute; left: calc(-1.4rem - 7px); top: 0.25rem; width: 12px; height: 12px; border-radius: 50%; background: var(--kit, var(--paper)); box-shadow: inset 0 0 0 2px var(--accent); }
.steps .st-l { margin: 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.steps .st-b { margin: 0.35rem 0 0; max-width: 72ch; font-size: 1rem; line-height: 1.6; }
/* lists, notes, figures */
.bul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.6rem; max-width: 72ch; font-size: 0.95rem; line-height: 1.6; }
.bul li::marker { color: var(--accent); }
.olist { margin: 1rem 0 0; padding-left: 1.3rem; display: grid; gap: 0.7rem; font-size: 0.93rem; line-height: 1.6; }
.olist li::marker { color: var(--accent); font-family: var(--font-mono); font-size: 0.8em; }
.note { padding: 1.1rem 1.3rem; border-radius: 0.9rem; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.9rem; line-height: 1.6; max-width: 76ch; }
.note h3, .note h2 { margin: 0 0 0.6rem; font-family: var(--font-serif); font-weight: 500; font-size: 1.2rem; }
.fig { margin: 0; border-radius: 1rem; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
/* the picture in its own frame, so its parallax drift stays inside it and never reaches the caption */
.fig-im { display: block; overflow: hidden; }
.fig img { display: block; width: 100%; height: auto; max-height: 26rem; object-fit: cover; }
.fig figcaption { padding: 1.1rem 1.25rem 1.2rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin: 0 0 1.2rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); }
.stats .acc { color: var(--accent); }
.h3 { margin: 2.6rem 0 1rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.more { display: inline-flex; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--accent); }
.more:hover { text-decoration: underline; }
/* spacing and small parts */
.stack { display: grid; gap: 1rem; }
.after, .grid + .prose, .grid + .small, .rows + .small, .stack + .small, .rows + .prose { margin-top: 1.4rem; }
.country { margin-top: 2.6rem; }
.country-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.country-head h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 1.7rem; }
.card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.status { margin-left: 0.4rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); vertical-align: middle; }
.meta.acc { color: var(--accent); }
.card .note { margin-top: 0.8rem; font-size: 0.8rem; color: var(--muted); }
.pill.m-made { box-shadow: inset 0 0 0 1px rgba(79, 192, 202, 0.6); color: #9FE3EA; } .pill.m-embodied { box-shadow: inset 0 0 0 1px rgba(242, 194, 102, 0.6); color: #F2C266; } .pill.m-retired { box-shadow: inset 0 0 0 1px rgba(200, 182, 242, 0.6); color: #CDBDF4; }
body.house .pill.m-made { color: #0A6C75; } body.house .pill.m-embodied { color: #8A5A00; } body.house .pill.m-retired { color: #5B3FA0; }
.door-energy .page-head .rv-pat { background: radial-gradient(ellipse 40% 60% at 78% 40%, rgba(79, 192, 202, 0.22), rgba(79, 192, 202, 0) 70%), radial-gradient(ellipse 30% 40% at 20% 90%, rgba(25, 122, 58, 0.18), rgba(25, 122, 58, 0) 70%); }
.door-gap .page-head .rv-pat { background: radial-gradient(ellipse 50% 60% at 70% 30%, rgba(139, 214, 226, 0.16), rgba(139, 214, 226, 0) 70%); }
body.house .page-head .rv-pat { background: radial-gradient(ellipse 55% 70% at 75% 0%, rgba(79, 192, 202, 0.14), rgba(79, 192, 202, 0) 70%); }

.refs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.refs li { padding: 0.2rem 0 0.2rem 1rem; border-left: 2px solid var(--line); }
.refs li p { margin: 0; font-family: var(--font-serif); font-size: 1rem; line-height: 1.45; }
.refs li .small { font-family: var(--font-sans); font-size: 0.84rem; margin-top: 0.2rem; }
.stage .prose { margin-top: 1.2rem; max-width: none; columns: 2 26rem; column-gap: 2.4rem; }
.stage .prose p { break-inside: avoid-column; }
.cov-group + .cov-group { margin-top: 1rem; }

.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 0.7rem; background: var(--accent); color: var(--kit, var(--paper)); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
body.house .btn { color: var(--paper); }
.card.contact { display: flex; flex-direction: column; } .card.contact p:last-child:has(.btn) { margin-top: auto; padding-top: 1rem; }
.mono { font-family: var(--font-mono); }
.note.center { text-align: center; margin-left: auto; margin-right: auto; }
/* the proposal's status */
.st-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.9rem 0.35rem 0.35rem; border-radius: 999px; background: rgba(25, 122, 58, 0.1); box-shadow: inset 0 0 0 1px rgba(25, 122, 58, 0.45); font-size: 0.9rem; }
.st-ok { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--forest); color: #fff; }
.st-ok svg { width: 0.9rem; height: 0.9rem; } .st-ok.big { width: 3rem; height: 3rem; } .st-ok.big svg { width: 1.5rem; height: 1.5rem; }
.st-d { color: var(--muted); }
.st-top { display: flex; align-items: center; gap: 1rem; }
.st-t { margin: 0; font-family: var(--font-serif); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; }
.st-track ol { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.st-track li { position: relative; padding: 1rem; border-radius: 0.8rem; box-shadow: inset 0 0 0 1px var(--line); }
.st-track li::before { content: ""; position: absolute; left: 1rem; right: 1rem; top: -2px; height: 4px; border-radius: 4px; background: var(--line); }
.st-track .st-done::before { background: var(--forest); } .st-track .st-now::before { background: var(--cyan); }
.st-l { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.st-l i { display: inline-grid; place-items: center; width: 0.7rem; height: 0.7rem; color: var(--forest); }
.st-l i svg { width: 0.85rem; height: 0.85rem; }
.st-now .st-l i { position: relative; border-radius: 50%; background: var(--cyan); } .st-now .st-l i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(79, 192, 202, 0.55); animation: dot-pulse 2s ease-out infinite; }
.st-next .st-l { color: var(--muted); } .st-next .st-l i { border-radius: 50%; box-shadow: inset 0 0 0 1px var(--muted); }

/* partners and people */
.flag { font-size: 2.2rem; line-height: 1; } .flag.big { font-size: 2.8rem; margin: 0 0 0.6rem; }
.grid.countries { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.grid.countries .pills { margin-top: 0.8rem; }
.who { display: flex; align-items: center; gap: 0.8rem; }
.who h3 { font-size: 1.15rem; }
.mono-gram { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; }
.card.person, .card.seat, .card.partner { display: flex; flex-direction: column; } .card.person .card-foot, .card.seat .card-foot { margin-top: auto; }
.more-d { margin-top: 0.9rem; } .more-d summary { cursor: var(--hand); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.more-d p { font-size: 0.88rem; }

/* at a glance: the emblems and the reader of plates */
.gl-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.card.gl img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0.7rem; margin-bottom: 0.9rem; }
.card.gl h3 { font-size: 1.2rem; }
.reader { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-rows: auto 1fr; background: rgba(10, 38, 40, 0.97); color: var(--paper); --line: rgba(243, 247, 246, 0.2); --muted: #C2D6D7; --accent: var(--lcyan); }
.reader[hidden] { display: none; }
.reader-bar { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem var(--pad); border-bottom: 1px solid var(--line); }
.reader-h { flex: 1; min-width: 0; } .reader-h p { margin: 0; } .reader-t { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.2; }
.reader-em { width: 2.5rem; height: 2.5rem; border-radius: 0.4rem; }
.reader button { width: 2.5rem; height: 2.5rem; border: 0; border-radius: 999px; background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--line); font-size: 1rem; }
.reader button:hover { box-shadow: inset 0 0 0 1px var(--paper); }
.reader .btn { background: var(--paper); color: var(--ink); padding: 0.5rem 0.9rem; }
.reader-body { overflow: auto; padding: 1.4rem var(--pad) 2rem; }
.reader-img { display: block; max-width: min(100%, 1280px); height: auto; margin: 0 auto; border-radius: 0.6rem; background: #fff; }
.reader-body .small { text-align: center; margin: 1rem auto 0; }
body.reader-open { overflow: hidden; }

/* clustering: seven tiers, each with its colour */
.tier-internal { --tier: #3FB36B; } .tier-anchor { --tier: #4F86E8; } .tier-data-reuse { --tier: #9A6BE8; } .tier-advisory { --tier: #2AB0C8; } .tier-heritage { --tier: #D9962A; } .tier-narrative { --tier: #D9558F; } .tier-synergy { --tier: #7E9497; }
.tier-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-right: 0.6rem; vertical-align: 0.12em; background: var(--tier); }
.card.proj { box-shadow: inset 4px 0 0 var(--tier, var(--accent)), inset 0 0 0 1px var(--line); }
.tier-pill { box-shadow: none; background: color-mix(in srgb, var(--tier) 14%, transparent); color: var(--tier); }
.big-n { margin: 0; font-family: var(--font-serif); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; color: var(--accent); }
.device-claim { margin: 1.4rem 0 1rem; font-family: var(--font-serif); font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.3; }
.device .grid p { margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* quotes and small rows */
.quote { margin: 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--accent); }
.quote p { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.25; letter-spacing: -0.01em; max-width: 34ch; }
.quote cite { display: block; margin-top: 0.9rem; font-style: normal; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.grid.t4u { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.stages-row { counter-reset: none; }

/* the brand kit */
.grid.tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.tile { margin: 0; border-radius: 1rem; overflow: hidden; } .tile.bordered { box-shadow: inset 0 0 0 1px var(--line); }
.tile-bg { display: grid; place-items: center; aspect-ratio: 1; padding: 12%; } .tile-bg img { width: 100%; height: 100%; object-fit: contain; }
.tile.anim { max-width: 26rem; } .tile figcaption { padding: 0.7rem 1rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tile-f3f7f6 { background: #F3F7F6; } .tile-004a4f { background: #004A4F; } .tile-0a2628 { background: #0A2628; } .tile-ffffff { background: #FFFFFF; }
.ladder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.6rem; } .ladder figure { margin: 0; display: grid; justify-items: center; gap: 0.4rem; } .ladder figcaption { font-family: var(--font-mono); font-size: 0.64rem; color: var(--muted); }
.ld-16 { width: 16px; height: 16px; } .ld-24 { width: 24px; height: 24px; } .ld-32 { width: 32px; height: 32px; } .ld-48 { width: 48px; height: 48px; } .ld-64 { width: 64px; height: 64px; }
.grid.swatches { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.sw-c { display: block; height: 4.5rem; margin: -1.4rem -1.4rem 1rem; border-radius: 1rem 1rem 0 0; box-shadow: inset 0 -1px 0 var(--line); }
.sw-004a4f { background: #004A4F; } .sw-64a9a1 { background: #64A9A1; } .sw-4fc0ca { background: #4FC0CA; } .sw-8bd6e2 { background: #8BD6E2; } .sw-197a3a { background: #197A3A; } .sw-f3f7f6 { background: #F3F7F6; } .sw-0a2628 { background: #0A2628; } .sw-bfd2d3 { background: #BFD2D3; }
.sw-k-lived { background: var(--k-lived) url("/assets/img/pat-lived.svg?v=1f4873d388") center / cover; } .sw-k-prescribed { background: var(--k-prescribed) url("/assets/img/pat-prescribed.svg?v=81934bd3d9") center / cover; } .sw-k-taught { background: var(--k-taught) url("/assets/img/pat-taught.svg?v=1c77d71982") center / cover; } .sw-k-energy { background: radial-gradient(ellipse 30% 80% at 50% 50%, rgba(79, 192, 202, 0.45), transparent 70%), var(--k-energy); }
.type-sample { margin: 0.8rem 0; } .type-0 .type-sample { font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.1; } .type-1 .type-sample { font-size: 1.15rem; } .type-2 .type-sample { font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* the home page below the hero */
.home-intro { padding-top: 6rem; }
.display { margin: 1.2rem 0 0; font-family: var(--font-serif); font-weight: 300; font-variation-settings: "opsz" 144; font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.display-s { margin: 0.4rem 0; font-family: var(--font-serif); font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.15; }
.sub-name { margin: 1rem 0 0; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1.4rem; }
.intro-grid { align-items: start; gap: 2.5rem; }
.quote-fig { margin: 0; } .quote-fig .quote p { font-size: clamp(1.2rem, 2vw, 1.6rem); max-width: 40ch; }
.wp-quote { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.35; }
.device-claim.big { font-size: clamp(1.4rem, 2.6vw, 2.2rem); max-width: 40ch; margin-top: 0; }
.muted-line { display: block; margin-top: 0.5rem; color: var(--muted); font-size: 0.7em; line-height: 1.2; }
.fig.moment img { aspect-ratio: 3 / 2; } .fig.moment figcaption { display: grid; gap: 0.6rem; padding: 1.4rem 1.5rem 1.5rem; line-height: 1.55; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 0.82rem; } .fig.moment figcaption b { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.gl-grid.six { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); } .card.small-gl h3 { font-size: 1rem; }
.cat-row { margin-top: 0.9rem; } .cat-row .meta { margin: 0 0 0.4rem; }

/* the map (scripts/map-render.js): a cached base picture, and the layer of the page over it */
.map { margin: 0; }
.map-box { position: relative; aspect-ratio: 900 / 1000; border-radius: 1.1rem; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: var(--soft); }
.map-base, .map-over { position: absolute; inset: 0; width: 100%; height: 100%; }
.map figcaption { margin-top: 0.7rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.map-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.map-wrap .grid.countries { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.m-link { fill: none; stroke: var(--deep); stroke-width: 1.4; stroke-opacity: 0.6; stroke-dasharray: 4 4; }
.m-far { stroke-dasharray: 2 5; }
.m-spark { fill: var(--cyan); }
.map-dark .m-link { stroke: var(--lcyan); } .map-dark .m-spark { fill: #E6FBFD; }
.m-dot { fill: var(--deep); } .m-ring { fill: none; stroke: var(--deep); stroke-width: 1.2; stroke-opacity: 0.5; transform-box: fill-box; transform-origin: center; animation: m-pulse 2.8s cubic-bezier(.2, .6, .3, 1) infinite; }
.m-coord .m-dot { fill: var(--forest); } .m-coord .m-ring { stroke: var(--forest); }
@keyframes m-pulse { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
.m-lab { font-family: var(--font-mono); font-size: 17px; font-weight: 600; letter-spacing: 0.06em; fill: var(--ink); paint-order: stroke; stroke: #F3F7F6; stroke-width: 4px; stroke-linejoin: round; }
.m-city { font-weight: 400; font-size: 14px; fill: #506566; }
.m-far-l { font-size: 13px; font-weight: 500; fill: var(--deep); }
.m-site { cursor: default; outline: none; } .m-site:focus-visible circle, .m-site:hover circle { filter: brightness(1.15); }
.m-num { font-family: var(--font-mono); font-size: 10px; font-weight: 700; fill: var(--ink); }
.m-lead { stroke: rgba(243, 247, 246, 0.55); stroke-width: 1; } .m-true { fill: #F3F7F6; }
.map-key { font-size: 0.9rem; }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin: 0 0 1.2rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lg { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; margin-right: -0.3rem; } .lg-made { background: #4FC0CA; } .lg-embodied { background: #F2C266; } .lg-retired { background: #C8B6F2; } .lg-note { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); }
.mk-c + .mk-c { margin-top: 1rem; } .mk-c .meta { margin: 0 0 0.35rem; }
.mk-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.mk-l li { display: flex; align-items: baseline; gap: 0.55rem; line-height: 1.35; }
.mk-n { flex: none; display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--accent); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; }
.mk-r { margin-left: auto; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.coord-grid { align-items: center; }
@media (max-width: 860px) { .map-wrap { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .m-ring { animation: none; } }

/* the work plan: the Gantt/PERT chart (scripts/pages/timeline.js) */
.gantt-scroll { overflow-x: auto; border-radius: 1rem; box-shadow: inset 0 0 0 1px var(--line); background: var(--card); }
.gantt-svg { display: block; min-width: 1000px; width: 100%; height: auto; }
.g-tick { stroke: var(--line); stroke-width: 1; } .g-sep { stroke: var(--line); stroke-width: 1; }
.g-m, .g-rp { font-family: var(--font-mono); font-size: 10px; fill: var(--muted); letter-spacing: 0.06em; }
.g-wp { font-family: var(--font-mono); font-size: 13px; font-weight: 700; } .g-wpn { font-family: var(--font-sans); font-size: 10.5px; fill: var(--muted); }
.g-link { fill: none; stroke-width: 1.2; stroke-opacity: 0.45; } .g-gate { stroke-dasharray: 7 4; } .g-publish { stroke-dasharray: 1.5 3; stroke-linecap: round; }
.gm { cursor: var(--hand); outline: none; } .gm > * { transition: transform 0.2s var(--ease), opacity 0.2s; transform-box: fill-box; transform-origin: center; }
.gm:hover > *, .gm:focus-visible > *, .gm.on > * { transform: scale(1.45); }
.gantt.focus .gm:not(.on) { opacity: 0.35; }
.gantt-phases { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.8rem 0 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.gantt-detail { margin-top: 1rem; min-height: 7.5rem; padding: 1.1rem 1.3rem; border-radius: 1rem; box-shadow: inset 0 0 0 1px var(--line); background: var(--soft); }
.gd-empty { margin: 0; font-size: 0.86rem; color: var(--muted); line-height: 1.6; }
.gd-t { margin: 0.3rem 0 0; font-family: var(--font-serif); font-weight: 500; font-size: 1.3rem; line-height: 1.2; } .gd-b { margin: 0.5rem 0 0; font-size: 0.92rem; line-height: 1.6; }
.gantt-list { margin-top: 1.4rem; } .gantt-list summary { cursor: var(--hand); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); padding: 0.6rem 0; }
.note.wide { max-width: none; }

/* the band of Part B tables at the foot of a page */
.glance-strip { border-top: 1px solid var(--line); margin-top: 2rem; }
.gs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 1.2rem; }
.gs-head a { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.glance-strip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.glance-strip li a { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.8rem 0.5rem 0.5rem; border-radius: 0.8rem; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; background: var(--card); }
.glance-strip li a:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.glance-strip img { width: 3.5rem; height: 3.5rem; border-radius: 0.5rem; flex: none; }
.glance-strip small { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.glance-strip b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem; line-height: 1.2; }
/* the way back */
.back { display: inline-flex; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 0.55rem 0.9rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.back:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.next-doors { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---------------------------------------------------------------- footer */
.ft { padding: 3rem var(--pad) 2rem; border-top: 1px solid var(--line); color: var(--muted); }
.ft-in { max-width: 72rem; margin: 0 auto; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); font-size: 0.86rem; line-height: 1.55; }
.ft p { margin: 0 0 0.3rem; }
.ft .gp-mark { width: 2rem; height: 2rem; color: var(--fg); margin-bottom: 0.7rem; }
.ft-b { font-family: var(--font-mono); font-size: 0.72rem; }
.ft-status { display: inline-flex; align-items: center; gap: 0.45rem; }
.ft-status .dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--forest); }
.ft-org { font-family: var(--font-serif); color: var(--fg); font-size: 1rem; }
.card.contact address { font-style: normal; color: var(--muted); }
.ft-person { font-size: 0.82rem; line-height: 1.5; }
.ft-est { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.ft a { color: var(--accent); }
.ft-end { max-width: 72rem; margin: 2rem auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem 2rem; }
.ft-old { display: inline-flex; padding: 0.5rem 0.9rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--fg) !important; }
.ft-old:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.menu-foot a { color: var(--lcyan); }
.ft-plan { margin: 0; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------------------------------------------------------------- rhythm and motion (main.js: reveal, counters,
   progress, chapters, rails; build: bands). Sections are chapters: numbered, on alternating grounds; what enters the
   screen rises into place; long card sets slide sideways while pinned; photographs drift. Transforms and opacity. */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); }
main { counter-reset: chap; }
/* tones a band can take: dark (paper words) or light (ink words) */
.tone-dark { --fg: var(--paper); --muted: #C2D6D7; --line: rgba(243, 247, 246, 0.18); --card: rgba(243, 247, 246, 0.05); --soft: rgba(243, 247, 246, 0.06); --accent: var(--lcyan); color: var(--fg); }
.tone-light { --fg: var(--ink); --muted: #506566; --line: rgba(10, 38, 40, 0.14); --card: rgba(255, 255, 255, 0.7); --soft: rgba(10, 38, 40, 0.04); --accent: var(--deep); color: var(--fg); }
/* the house: paper, mist, deep teal */
body:is(.house, .home) .sec.band-a { background: linear-gradient(180deg, #E4EEED, #EDF3F2); }
body:is(.house, .home) .sec.band-b { background: radial-gradient(ellipse 60% 80% at 85% 0%, rgba(79, 192, 202, 0.16), transparent 60%), var(--deep); }
/* a door: its kit, a lighter kit, paper */
body.door .sec.band-a { background: color-mix(in srgb, var(--kit) 88%, #F3F7F6); }
body.door .sec.band-b { background: linear-gradient(180deg, #F3F7F6, #E9F0EF); }
body.door-lived .sec.band-b { --accent: var(--forest); } body.door-taught .sec.band-b { --accent: #0B6670; } body.door-energy .sec.band-b { --accent: #1F5FD6; }
.sec.band-a, .sec.band-b { padding-top: 5rem; padding-bottom: 5rem; position: relative; }
.sec.band-a + .sec.band-a, .sec.band-b + .sec.band-b { padding-top: 1rem; }
/* a band's top edge: a thin line a light runs along */
.sec.band-start { overflow-x: clip; }
.sec.band-start::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.sec.band-start::after { content: ""; position: absolute; left: 0; top: 0; width: 40%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: translate3d(-100%, 0, 0); animation: edge-run 7s linear infinite; }
@keyframes edge-run { to { transform: translate3d(250%, 0, 0); } }
@supports not (overflow: clip) { .sec.band-start::after { display: none; } }  /* older Safari: no running light rather than a sideways scroll */
/* chapters: a big outlined number beside each titled section */
.sec-head:has(h2) { position: relative; counter-increment: chap; }
.sec-head:has(h2)::after { content: counter(chap, decimal-leading-zero); position: absolute; right: 0; top: -0.25em; font-family: var(--font-serif); font-weight: 300; font-size: clamp(4.5rem, 11vw, 10rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none; z-index: -1; }
.sec .frame { position: relative; z-index: 0; }
/* entering the screen: rise and clear; headings unveil */
.js .rvp { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.85s var(--ease-out), transform 0.95s var(--ease-out); transition-delay: calc(min(var(--i, 0), 8) * 70ms); }
.js .rvp.in { opacity: 1; transform: none; }
.js h2.rvp, .js h1.rvp { opacity: 1; clip-path: inset(0 0 100% 0); transform: translate3d(0, 0.35em, 0); transition: clip-path 1s var(--ease-out), transform 1s var(--ease-out); }
.js h2.rvp.in, .js h1.rvp.in { clip-path: inset(0 0 -0.2em 0); transform: none; }
/* the reading line */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--forest), var(--cyan), var(--lcyan)); pointer-events: none; }
body.home .progress { display: none; }
/* the chapters' rail, at the right edge */
.chapters { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 15; display: none; }
@media (min-width: 1240px) { .chapters { display: block; } }
.chapters ol { list-style: none; margin: 0; padding: 0.6rem 0.45rem; display: grid; gap: 0.35rem; border-radius: 999px; background: rgba(243, 247, 246, 0.95); box-shadow: 0 6px 24px rgba(10, 38, 40, 0.12), inset 0 0 0 1px rgba(10, 38, 40, 0.08); }
.chapters a { position: relative; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; text-decoration: none; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600; color: #506566; transition: background-color 0.3s, color 0.3s, transform 0.3s var(--ease-out); }
.chapters a span { position: absolute; right: calc(100% + 0.6rem); top: 50%; transform: translate(6px, -50%); white-space: nowrap; padding: 0.35rem 0.6rem; border-radius: 0.5rem; background: var(--ink); color: var(--paper); font-family: var(--font-sans); font-size: 0.74rem; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s var(--ease-out); }
.chapters a:hover span, .chapters a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.chapters a.on { background: var(--deep); color: var(--paper); transform: scale(1.12); }
.chapters { transition: opacity 0.4s var(--ease); } body.home .chapters:not(.show) { opacity: 0; pointer-events: none; }
/* cards answer the pointer: a lift and a light that follows it */
.card { transition: transform 0.45s var(--ease-out), box-shadow 0.3s var(--ease); }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%); }
.card:hover::after { opacity: 1; }
a.card:hover, .card:hover { transform: translateY(-3px); }
/* the timeline lights up station by station */
.steps li::after { content: ""; position: absolute; left: calc(-1.4rem - 1px); top: 1rem; bottom: -1.6rem; width: 1.5px; background: var(--accent); transform-origin: 50% 0; transform: scaleY(0); transition: transform 1.2s var(--ease-out) 0.2s; }
.steps li:last-child::after { display: none; }
.steps li.in::after { transform: scaleY(1); }
.steps li.in::before { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); transition: background-color 0.5s, box-shadow 0.5s; }
/* rails: a long set of cards slides sideways while the section is pinned (wide screens); a swipeable row elsewhere */
.hrail-pin { position: relative; overflow: hidden; }
.hrail-track { display: flex; gap: 1rem; will-change: transform; }
.hrail-track > * { flex: 0 0 min(20rem, 80vw); }
.hrail.pinned .hrail-pin { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
@media (max-width: 979px) { .hrail-pin { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.6rem; } .hrail-track > * { scroll-snap-align: start; } }
.hrail-meter { height: 2px; margin-top: 1rem; background: var(--line); border-radius: 2px; overflow: hidden; } .hrail-meter i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
/* the marquee: the four doors, rolling */
.marquee { overflow: hidden; padding: 1.4rem 0; border-block: 1px solid var(--line); background: var(--ink); color: var(--paper); }
.marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee span { flex: none; padding: 0 0.5em; font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.4rem, 7vw, 6.2rem); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.marquee span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(139, 214, 226, 0.7); }
.marquee span i { font-style: normal; color: var(--cyan); padding: 0 0.3em; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
/* the next door, at the foot of a door page */
.next-door { position: relative; display: block; overflow: hidden; padding: 4.5rem var(--pad); text-decoration: none; color: var(--paper); isolation: isolate; }
.next-door .rv-pat { opacity: 0.9; z-index: -1; }
.next-door .frame { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; }
.next-door b { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.6rem, 8vw, 7rem); line-height: 1; letter-spacing: -0.025em; }
.next-door .nd-go { font-size: clamp(2rem, 5vw, 4rem); transition: transform 0.5s var(--ease-out); }
.next-door:hover .nd-go { transform: translateX(0.3em); }
.next-door.nd-lived { background: var(--k-lived); } .next-door.nd-prescribed { background: var(--k-prescribed); } .next-door.nd-taught { background: var(--k-taught); } .next-door.nd-energy { background: var(--k-energy); } .next-door.nd-gap { background: #06363A; }
.nd-lived .rv-pat { background: url("/assets/img/pat-lived.svg?v=1f4873d388") center / cover; } .nd-prescribed .rv-pat { background: url("/assets/img/pat-prescribed.svg?v=81934bd3d9") center / cover; } .nd-taught .rv-pat { background: url("/assets/img/pat-taught.svg?v=1c77d71982") center / cover; } .nd-energy .rv-pat { background: radial-gradient(ellipse 30% 90% at 70% 50%, rgba(47, 120, 255, 0.35), transparent 70%); } .nd-gap .rv-pat { background: radial-gradient(ellipse 50% 90% at 70% 50%, rgba(148, 100, 52, 0.25), transparent 70%); }
/* the heads of the doors are alive: their pattern moves as on the home page */
.page-head .wv { height: 100%; }
.page-head .snd { top: auto; bottom: 14%; height: 7.5rem; }
.page-head .net { opacity: 0.9; }
.head-cv { position: absolute; top: 0; bottom: 0; right: 18%; width: 7rem; height: 100%; mix-blend-mode: screen; pointer-events: none; }
.head-em { position: absolute; right: -4%; top: 50%; width: min(58vw, 46rem); aspect-ratio: 1756 / 1615; transform: translateY(-45%); opacity: 0.55; pointer-events: none; }
.head-em img { width: 100%; height: 100%; }
body.house .page-head .rv-pat { animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1.06); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } }
.scroll-cue { position: absolute; left: var(--pad); bottom: 1.6rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 0.6rem; }
.scroll-cue i { width: 1px; height: 2.2rem; background: linear-gradient(var(--accent), transparent); transform-origin: 50% 0; animation: cue 2.2s var(--ease-out) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
/* photographs drift as they pass; a page's head recedes as it scrolls away */
@supports (animation-timeline: view()) {
  .fig { overflow: hidden; }
  .fig img { animation: plx linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes plx { from { transform: translate3d(0, -5%, 0) scale(1.1); } to { transform: translate3d(0, 5%, 0) scale(1.1); } }
  .page-head .frame { animation: head-out linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
  @keyframes head-out { to { transform: translate3d(0, -12vh, 0); opacity: 0.15; } }
  .sec-head:has(h2)::after { animation: num-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes num-drift { from { transform: translate3d(0, 30%, 0); } to { transform: translate3d(0, -30%, 0); } }
}
@media (prefers-reduced-motion: reduce) {
  .js .rvp, .js h2.rvp, .js h1.rvp { opacity: 1; transform: none; clip-path: none; transition: none; }
  .marquee-track, .sec.band-start::after, .scroll-cue i, body.house .page-head .rv-pat { animation: none; }
  .fig img, .page-head .frame, .sec-head:has(h2)::after { animation: none !important; }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 860px) {
  /* the doors' titles close to the emblem: Lived and Prescribed round its ring, Energy's words against the bolt's tip
     and foot, Taught's just under the ring, beside the bolt */
  .rv-arc { display: block; } .rv-lived .rv-label, .rv-prescribed .rv-label { display: none; }
  .et-top { align-items: flex-end; } .et-bot { align-items: flex-start; }
  .rv-taught .rv-label { display: none; } .rv-tag-taught { display: flex; top: calc(var(--et-b0, 70%) + 0.2rem); left: auto; right: calc(100% - var(--bx0, 47%) + 0.4rem); }
  /* Taught's ground also lies round its title, under the emblem (a plate joined to the band by a line of no width): the
     lens over the title opens Taught's door */
  .rv-taught { clip-path: polygon(0 var(--by0, 46%), 100% var(--by0, 46%), 100% var(--by1, 54%), var(--tg-x0, 0px) var(--by1, 54%), var(--tg-x0, 0px) var(--tg-y0, 54%), var(--tg-x1, 0px) var(--tg-y0, 54%), var(--tg-x1, 0px) var(--tg-y1, 54%), var(--tg-x0, 0px) var(--tg-y1, 54%), var(--tg-x0, 0px) var(--by1, 54%), 0 var(--by1, 54%)); }
  .rv-prescribed .rv-label { font-size: min(1.45rem, 5.4vw); letter-spacing: -0.02em; }
  .rv-lived .rv-label { font-size: min(2.2rem, 8vw); }
  .sec-head { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  .hub { --ew: min(46vh, 86vw); --cy: 45%; }
  .hd-status { display: none; }
  .hd-home { margin-right: auto; }
  .door-gap small { display: none; }
  .doors a.door-gap { margin-left: 0; }
  .hub-tag { max-width: 24ch; font-size: 0.82rem; }
  /* the end of a page: the next door's card and the footer, less padded */
  .next-door { padding-block: 2.6rem; }
  .ft { padding-top: 2rem; padding-bottom: 1.4rem; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hub { min-height: 0; --ew: min(62vh, 40vw); --cy: 52%; }
  .hub-eyebrow, .hub-hint, .hub-tag { display: none; }
  .hub-under { top: auto; bottom: var(--pad); left: var(--pad); right: auto; justify-items: start; }
  .doors { justify-content: flex-start; padding: 0; }
}

/* ---------------------------------------------------------------- motion */
/* phones and touch screens: the lens's emblem stays still under its doors (its parts were the costliest to repaint) */
@media (hover: none), (max-width: 860px) { .gp-lens * { animation: none !important; } .lens-warp { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .lens-rings, .em-sk, .hd-status .dot::after, .st-now .st-l i::after { animation: none; } .lens-rings, .hd-status .dot::after, .st-now .st-l i::after { display: none; }
  .gp-lens *, .rv-move *, .rv-energy .rv-pat::before, .rv-energy .rv-pat::after, .tube-glow { animation: none !important; }
}

/* Consent (consent.js): the question about Google Analytics, a small card at the foot of the screen, its two answers
   alike; and "Cookie settings", a button that reads as a link */
.consent { position: fixed; z-index: 95; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); width: min(25rem, calc(100vw - 2rem)); padding: 1rem 1.1rem; border-radius: 0.8rem; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px rgba(10, 38, 40, 0.16), 0 18px 40px rgba(0, 0, 0, 0.28); font-size: 0.86rem; line-height: 1.45; }
.consent p { margin: 0 0 0.85rem; }
.consent a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.consent-b { display: flex; gap: 0.5rem; }
.consent-b button { flex: 1; height: 2.5rem; border: 0; border-radius: 999px; background: var(--deep); color: var(--paper); font: 600 0.66rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: var(--hand); }
.consent-b button:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }
.consent-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 0.15em; cursor: var(--hand); }
.ft-legal { margin: 0; font-size: 0.8rem; }