/* ==========================================================================
   Inkoation Research — design system (InKR: Innovation · Knowledge · Research)
   Four palettes. House = the logo's ink on paper. Each space has its own
   brand kit (supplied by Ludovic, 2026-09-28):
     Innovation  0A1931 1A3D63 4A7FA7 B3CFE5 F6FAFD          (blue, EU)
     Knowledge   1D1617 262630 2A374D 444A41 9F6932 522623   (old library)
     Research    081B1B 203B37 5A8F76 96CDB0 C18D52 EEE8B2   (green marble)
   Derived, not in the kits: Knowledge parchment #EFE6D6 / #E4D7C0 and a
   lighter gold #BF9B74 for small text on dark (contrast), and the muted
   text tints (kit colour mixed toward the background).
   Fonts: Mona Sans + Mona Sans Mono + Fraunces (all OFL, self-hosted).
   ========================================================================== */

@font-face { font-family: "Mona Sans"; src: url("/assets/fonts/mona-sans.woff2?v=3982c3ea9e") format("woff2-variations"), url("/assets/fonts/mona-sans.woff2?v=3982c3ea9e") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: "Mona Sans Mono"; src: url("/assets/fonts/mona-sans-mono.woff2?v=bb6417df7a") format("woff2-variations"), url("/assets/fonts/mona-sans-mono.woff2?v=bb6417df7a") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces.woff2?v=75060b98fd") format("woff2-variations"), url("/assets/fonts/fraunces.woff2?v=75060b98fd") format("woff2"); font-weight: 100 900; font-display: swap; }

@property --o { syntax: "<number>"; inherits: true; initial-value: 0; }

/* Palettes ---------------------------------------------------------------- */
/* the pointer over whatever can be clicked, in place of the hand: the logo turned into an arrow, the chevron its
   head and the two bars lying flat under it (drawn by scripts/cursor.py; its tip, at 3 3, is the hot spot) */
:root { --hand: url("/assets/img/cursor.png?v=df09f72e63") 3 3, pointer; }
@supports (cursor: -webkit-image-set(url("/assets/img/cursor.png?v=df09f72e63") 1x) 3 3, pointer) { :root { --hand: -webkit-image-set(url("/assets/img/cursor.png?v=df09f72e63") 1x, url("/assets/img/cursor-2x.png?v=068d5dd4ce") 2x) 3 3, pointer; } }
@supports (cursor: image-set(url("/assets/img/cursor.png?v=df09f72e63") 1x) 3 3, pointer) { :root { --hand: image-set(url("/assets/img/cursor.png?v=df09f72e63") 1x, url("/assets/img/cursor-2x.png?v=068d5dd4ce") 2x) 3 3, pointer; } }
a[href], button:not(:disabled), summary, label[for], select, [role="button"] { cursor: var(--hand); }

:root, [data-space="house"] {
  --l-bg: #F5F4F0; --l-bg-2: #E9E7E0; --l-fg: #191E2A; --l-mute: #62666F; --l-line: rgba(25, 30, 42, 0.14);
  --l-btn: #191E2A; --l-btn-fg: #F5F4F0; --l-hi: #191E2A; --l-hi-2: #191E2A; --l-card: #FBFAF7; --l-card-line: rgba(25, 30, 42, 0.2); --l-contour: rgba(25, 30, 42, 0.12);
  --d-bg: #191E2A; --d-bg-2: #222838; --d-fg: #F5F4F0; --d-mute: #A2A6AF; --d-line: rgba(245, 244, 240, 0.14);
  --d-btn: #F5F4F0; --d-btn-fg: #191E2A; --d-hi: #F5F4F0; --d-hi-2: #F5F4F0; --d-card: #222838; --d-card-line: rgba(245, 244, 240, 0.16); --d-contour: rgba(245, 244, 240, 0.11);
  --glow: radial-gradient(40% 55% at 22% 0%, rgba(74, 127, 167, 0.55), transparent 70%), radial-gradient(40% 55% at 50% 0%, rgba(159, 105, 50, 0.5), transparent 70%), radial-gradient(40% 55% at 78% 0%, rgba(90, 143, 118, 0.55), transparent 70%);
  --canvas-line: #191E2A; --canvas-fill: #E9E7E0;
}
[data-space="innovation"] {
  --l-bg: #F6FAFD; --l-bg-2: #B3CFE5; --l-fg: #0A1931; --l-mute: #566172; --l-line: rgba(10, 25, 49, 0.14);
  --l-btn: #1A3D63; --l-btn-fg: #F6FAFD; --l-hi: #4A7FA7; --l-hi-2: #1A3D63; --l-card: #FFFFFF; --l-card-line: rgba(26, 61, 99, 0.22); --l-contour: rgba(26, 61, 99, 0.2);
  --d-bg: #0A1931; --d-bg-2: #1A3D63; --d-fg: #F6FAFD; --d-mute: #89A2B8; --d-line: rgba(179, 207, 229, 0.16);
  --d-btn: #B3CFE5; --d-btn-fg: #0A1931; --d-hi: #B3CFE5; --d-hi-2: #B3CFE5; --d-card: #0F2342; --d-card-line: rgba(179, 207, 229, 0.2); --d-contour: rgba(179, 207, 229, 0.2);
  --glow: radial-gradient(70% 55% at 50% 0%, rgba(74, 127, 167, 0.75), transparent 70%);
  --canvas-line: #1A3D63; --canvas-fill: #B3CFE5;
}
[data-space="knowledge"] {
  --l-bg: #EFE6D6; --l-bg-2: #E4D7C0; --l-fg: #1D1617; --l-mute: #5C5450; --l-line: rgba(29, 22, 23, 0.16);
  --l-btn: #522623; --l-btn-fg: #EFE6D6; --l-hi: #522623; --l-hi-2: #522623; --l-card: #F6F0E4; --l-card-line: rgba(82, 38, 35, 0.25); --l-contour: rgba(82, 38, 35, 0.15);
  --d-bg: #1D1617; --d-bg-2: #262630; --d-fg: #EFE6D6; --d-mute: #9B938A; --d-line: rgba(159, 105, 50, 0.3);
  --d-btn: #EFE6D6; --d-btn-fg: #1D1617; --d-hi: #9F6932; --d-hi-2: #BF9B74; --d-card: #262630; --d-card-line: rgba(159, 105, 50, 0.35); --d-contour: rgba(159, 105, 50, 0.28);
  --glow: radial-gradient(70% 55% at 50% 0%, rgba(159, 105, 50, 0.6), transparent 70%);
  --canvas-line: #522623; --canvas-fill: #E4D7C0;
}
[data-space="research"] {
  /* green and gold: sage paper and deep green, gold for the accents (2026-09-29, softer than cream on black) */
  --l-bg: #E8EDE2; --l-bg-2: #D3E4D6; --l-fg: #16302C; --l-mute: #4E6B5F; --l-line: rgba(22, 48, 44, 0.16);
  --l-btn: #203B37; --l-btn-fg: #EEE8B2; --l-hi: #9A6C3A; --l-hi-2: #5A8F76; --l-card: #F2F4EC; --l-card-line: rgba(32, 59, 55, 0.2); --l-contour: rgba(90, 143, 118, 0.3);
  --d-bg: #0E2624; --d-bg-2: #203B37; --d-fg: #E9E4C0; --d-mute: #93AE9F; --d-line: rgba(150, 205, 176, 0.18);
  --d-btn: #C18D52; --d-btn-fg: #0E2624; --d-hi: #C18D52; --d-hi-2: #96CDB0; --d-card: #143330; --d-card-line: rgba(150, 205, 176, 0.22); --d-contour: rgba(150, 205, 176, 0.2);
  --glow: radial-gradient(70% 55% at 50% 0%, rgba(90, 143, 118, 0.7), transparent 70%);
  --canvas-line: #203B37; --canvas-fill: #96CDB0;
}
[data-space="ai"] {
  /* the chora at the blue hour: deep night blue, the cyan of the veins on the water, the amber of the windows, the
     rose of the valley's glow (2026-09-30, after the chora Ludovic supplied) */
  --l-bg: #F2F3FA; --l-bg-2: #DEE2F2; --l-fg: #101A3E; --l-mute: #525C84; --l-line: rgba(16, 26, 62, 0.15);
  --l-btn: #16285A; --l-btn-fg: #F2F3FA; --l-hi: #1C7FA6; --l-hi-2: #16285A; --l-card: #F8F9FD; --l-card-line: rgba(22, 40, 90, 0.2); --l-contour: rgba(28, 127, 166, 0.2);
  --d-bg: #0B1A40; --d-bg-2: #16285A; --d-fg: #EDEFFA; --d-mute: #A2ABCF; --d-line: rgba(95, 230, 242, 0.18);
  --d-btn: #FFC978; --d-btn-fg: #0B1A40; --d-hi: #5FE6F2; --d-hi-2: #FFC978; --d-card: #10214D; --d-card-line: rgba(95, 230, 242, 0.24); --d-contour: rgba(95, 230, 242, 0.15);
  --glow: radial-gradient(70% 55% at 50% 0%, rgba(237, 142, 133, 0.45), transparent 70%);
  --canvas-line: #16285A; --canvas-fill: #5FE6F2;
}
/* The formats keep their card colours: SMP green, GRBC red (on their pages, and on their frames in Innovation) */
[data-palette="smp"] {
  --l-bg: #EEF3EA; --l-bg-2: #CFE0CF; --l-fg: #10261F; --l-mute: #4F6A5E; --l-line: rgba(16, 38, 31, 0.15);
  --l-btn: #1F4A3A; --l-btn-fg: #EEF3EA; --l-hi: #2F6B52; --l-hi-2: #1F4A3A; --l-card: #F7FAF4; --l-card-line: rgba(31, 74, 58, 0.24); --l-contour: rgba(31, 74, 58, 0.2);
  --d-bg: #102A22; --d-bg-2: #1F4A3A; --d-fg: #EEF3EA; --d-mute: #93B3A3; --d-line: rgba(184, 144, 74, 0.28);
  --d-btn: #C9A15A; --d-btn-fg: #102A22; --d-hi: #D2AE66; --d-hi-2: #9CCBB2; --d-card: #16362C; --d-card-line: rgba(184, 144, 74, 0.35); --d-contour: rgba(156, 203, 178, 0.2);
  --glow: radial-gradient(70% 55% at 50% 0%, rgba(47, 107, 82, 0.7), transparent 70%);
  --canvas-line: #1F4A3A; --canvas-fill: #CFE0CF;
}
[data-palette="grbc"] {
  --l-bg: #FBF3EF; --l-bg-2: #F0D5CA; --l-fg: #2A0F0E; --l-mute: #7A5752; --l-line: rgba(42, 15, 14, 0.14);
  --l-btn: #7A2320; --l-btn-fg: #FBF3EF; --l-hi: #A5342C; --l-hi-2: #7A2320; --l-card: #FFF9F6; --l-card-line: rgba(122, 35, 32, 0.22); --l-contour: rgba(122, 35, 32, 0.18);
  --d-bg: #3A1110; --d-bg-2: #5E1D1B; --d-fg: #F7E6DF; --d-mute: #C9A097; --d-line: rgba(227, 164, 124, 0.26);
  --d-btn: #E0A763; --d-btn-fg: #3A1110; --d-hi: #E8AE7E; --d-hi-2: #F0C9A8; --d-card: #4A1614; --d-card-line: rgba(227, 164, 124, 0.32); --d-contour: rgba(240, 201, 168, 0.18);
  --glow: radial-gradient(70% 55% at 50% 0%, rgba(165, 52, 44, 0.7), transparent 70%);
  --canvas-line: #7A2320; --canvas-fill: #F0D5CA;
}
/* Active tokens: a section (or the nav) picks the light or dark half. */
[data-theme="light"] { --bg: var(--l-bg); --bg-2: var(--l-bg-2); --fg: var(--l-fg); --mute: var(--l-mute); --line: var(--l-line); --btn: var(--l-btn); --btn-fg: var(--l-btn-fg); --hi: var(--l-hi); --hi-2: var(--l-hi-2); --card: var(--l-card); --card-line: var(--l-card-line); --contour: var(--l-contour); }
[data-theme="dark"] { --bg: var(--d-bg); --bg-2: var(--d-bg-2); --fg: var(--d-fg); --mute: var(--d-mute); --line: var(--d-line); --btn: var(--d-btn); --btn-fg: var(--d-btn-fg); --hi: var(--d-hi); --hi-2: var(--d-hi-2); --card: var(--d-card); --card-line: var(--d-card-line); --contour: var(--d-contour); }
[data-theme="alt"] { --bg: var(--l-bg-2); --bg-2: var(--l-bg); --fg: var(--l-fg); --mute: var(--l-mute); --line: var(--l-line); --btn: var(--l-btn); --btn-fg: var(--l-btn-fg); --hi: var(--l-hi-2); --hi-2: var(--l-hi-2); --card: var(--l-card); --card-line: var(--l-card-line); --contour: var(--l-contour); }
section[data-theme], footer[data-theme], .panel[data-theme] { background: var(--bg); color: var(--fg); }

:root {
  --ease: cubic-bezier(0.65, 0.05, 0, 1);
  --dur: 0.75s;
  --gap: 1.25rem;
  --pad: clamp(1rem, 2.6vw, 2.5rem);
  --nav-h: 5.5rem;
  --radius-s: 0.55rem; --radius-m: 1rem; --radius-l: 6.25rem;
  --font-sans: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-mono: "Mona Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-display: clamp(3.2rem, 9vw, 10rem);
  --text-h2: clamp(2.4rem, 5.8vw, 5.6rem);
  --text-h3: clamp(1.6rem, 3vw, 2.6rem);
  --text-impact: clamp(1.9rem, 4.6vw, 4.5rem);
  --text-body: clamp(1rem, 1.05vw, 1.15rem);
  --text-eyebrow: 0.72rem;
}

/* Base -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--l-bg); color: var(--l-fg); font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.5; font-variation-settings: "wdth" 100, "opsz" 16; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p a, li a, td a, .link { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--l-bg-2); color: var(--l-fg); }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1; text-wrap: balance; }
button { font: inherit; color: inherit; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--l-fg); color: var(--l-bg); padding: 0.6em 1em; font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; }
.skip-link:focus { left: var(--pad); top: var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type -------------------------------------------------------------------- */
.display, .h2, .h3 { font-family: var(--font-sans); font-weight: 800; font-variation-settings: "wdth" 92, "opsz" 100; text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.88; }
.display { font-size: var(--text-display); }
.h2 { font-size: var(--text-h2); }
.h3 { font-size: var(--text-h3); letter-spacing: -0.025em; line-height: 0.95; }
.serif { font-family: var(--font-serif); font-weight: 600; font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1; letter-spacing: -0.01em; color: var(--hi); }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.6em; margin: 0 0 1.4rem; }
.eyebrow::before { content: ""; width: 0.55em; height: 0.55em; background: var(--hi); border-radius: 1px; transform: rotate(45deg); flex: none; }
.quote { font-family: var(--font-serif); font-weight: 400; font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1; font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.45rem); line-height: 1.35; letter-spacing: -0.01em; font-weight: 500; }
.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; }
.small { font-size: 0.85rem; }
.mute { color: var(--mute); }
.price { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0; white-space: nowrap; color: var(--hi-2); }

.lines .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.lines .line > span { display: block; transform: translateY(112%); transition: transform var(--dur) var(--ease); }
.lines .line:nth-child(2) > span { transition-delay: 90ms; }
.lines .line:nth-child(3) > span { transition-delay: 180ms; }
.lines .line:nth-child(4) > span { transition-delay: 270ms; }
.lines.in .line > span { transform: none; }
[data-reveal] { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

/* Layout ------------------------------------------------------------------ */
.s { position: relative; padding: clamp(4rem, 9vw, 8rem) 0; isolation: isolate; }
.s.full { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.frame { width: min(100% - 2 * var(--pad), 1680px); margin-inline: auto; position: relative; z-index: 1; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.stack > * + * { margin-top: 1.25rem; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.section-title { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: end; margin-bottom: clamp(2rem, 5vw, 4rem); }
.section-title p { margin: 0; color: var(--mute); }

/* Contour lines: one mask-ready SVG per variant, coloured by the theme. */
.contours { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--contour); -webkit-mask: var(--svg) center / cover no-repeat; mask: var(--svg) center / cover no-repeat; }
.contours.v-a { --svg: url("/assets/img/contours-a.svg?v=d86b91fb63"); }
.contours.v-b { --svg: url("/assets/img/contours-b.svg?v=8911480498"); }
.contours.v-c { --svg: url("/assets/img/contours-c.svg?v=b6eee98ac4"); }
.contours.v-marbled { --svg: url("/assets/img/contours-marbled.svg?v=9ad446bed8"); }
.contours.v-vein { --svg: url("/assets/img/contours-vein.svg?v=1828419ada"); background: var(--vein, rgba(193, 141, 82, 0.55)); }
.contours.fade-top { -webkit-mask: linear-gradient(to bottom, transparent, #000 30%), var(--svg) center / cover no-repeat; -webkit-mask-composite: source-in; mask: linear-gradient(to bottom, transparent, #000 30%), var(--svg) center / cover no-repeat; mask-composite: intersect; }

/* Buttons ----------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 0.6em; height: 3rem; padding: 0 1.1rem; background: var(--btn); color: var(--btn-fg); border: 1px solid var(--btn); border-radius: var(--radius-s); font-family: var(--font-sans); font-size: 0.9rem; font-weight: 800; font-variation-settings: "wdth" 86, "opsz" 16; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; cursor: var(--hand); transition: transform 0.45s var(--ease), background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn .arr { transition: transform 0.45s var(--ease); }
.btn:hover .arr { transform: translateX(0.25em); }
.btn.ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn.ghost:hover { background: var(--btn); color: var(--btn-fg); border-color: var(--btn); }
.btn.big { height: 3.75rem; padding: 0 1.5rem; font-size: 1.05rem; border-radius: var(--radius-l); }
.links { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Nav --------------------------------------------------------------------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; padding: var(--gap) var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 1rem; pointer-events: none; color: var(--fg); transition: color 0.5s var(--ease); }
.nav > * { pointer-events: auto; }
.brand { position: relative; display: flex; align-items: center; }
.brand-home { display: flex; align-items: center; gap: 0.7rem; }
.brand .mark { width: 3.1rem; height: 3.1rem; flex: none; transition: transform 0.6s var(--ease); }
.brand .mark .mk-chev { transition: transform 0.6s var(--ease); }
.brand:hover .mark, .brand:focus-within .mark { transform: scale(1.12); }
.brand:hover .mark .mk-chev, .brand:focus-within .mark .mk-chev { transform: translateX(-2.2px); }
.brand-name { display: block; font-weight: 800; font-size: 0.92rem; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; font-variation-settings: "wdth" 96; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.brand-name span { display: block; }
.brand-spaces { position: absolute; left: calc(3.1rem + 0.2rem); top: 50%; display: flex; gap: 0.35rem; padding: 0.8rem 1.2rem 0.8rem 0.5rem; transform: translateY(-50%); pointer-events: auto; }
.brand-spaces a { display: inline-flex; align-items: center; gap: 0.45rem; height: 2.5rem; padding: 0 0.8rem 0 0.55rem; border-radius: var(--radius-l); background: var(--bg); box-shadow: 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; transform: translateX(-0.8rem); transition: opacity 0.3s var(--ease) 0.55s, transform 0.5s var(--ease) 0.55s, visibility 0s 0.9s, box-shadow 0.3s; white-space: nowrap;  visibility: hidden; }
/* the glyphs share one box (render.js GLYPH_BOX, 37.6 x 47.2): sized outright, since a max-width of 100% inside a
   link sized by its content resolves to nothing */
.brand-spaces a svg { height: 1.55rem; width: calc(1.55rem * 37.6 / 47.2); max-width: none; flex: none; }
.brand-spaces a:hover { box-shadow: 0 0 0 1px currentColor; }

.brand:hover .brand-spaces a, .brand:focus-within .brand-spaces a, .brand.open .brand-spaces a { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.brand:hover .brand-spaces a:nth-child(2), .brand:focus-within .brand-spaces a:nth-child(2), .brand.open .brand-spaces a:nth-child(2) { transition-delay: 60ms, 60ms, 0s, 0s; }
.brand:hover .brand-spaces a:nth-child(3), .brand:focus-within .brand-spaces a:nth-child(3), .brand.open .brand-spaces a:nth-child(3) { transition-delay: 120ms, 120ms, 0s, 0s; }
.brand:hover .brand-name, .brand:focus-within .brand-name, .brand.open .brand-name { opacity: 0; transform: translateX(0.5rem); }
.nav-right { display: flex; align-items: center; gap: 0.6rem; }
.nav .btn { height: 3.25rem; }
.nav .btn .pill-note { font-family: var(--font-mono); font-weight: 600; opacity: 0.75; }
.nav .cta { display: none; }
body:not([data-space]) .nav .cta-house, [data-space="house"] .nav .cta-house, [data-space="ai"] .nav .cta-house, [data-space="knowledge"] .nav .cta-house, [data-space="research"] .nav .cta-house { display: inline-flex; }
[data-space="innovation"] .nav .cta-innovation { display: inline-flex; }
.nav-ham { width: 3.25rem; height: 3.25rem; border-radius: 0.74rem; border: 0; background: var(--bg); color: var(--fg); display: inline-flex; align-items: center; justify-content: center; cursor: var(--hand); transition: background-color 0.5s var(--ease), color 0.5s var(--ease), transform 0.45s var(--ease); box-shadow: 0 0 0 1px var(--line); }
.nav-ham:hover { transform: translateY(-2px); }
.nav-ham .ham { width: 1.25rem; height: 0.7rem; position: relative; display: block; }
.nav-ham .ham::before, .nav-ham .ham::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.5s var(--ease), top 0.5s var(--ease), width 0.5s var(--ease); }
.nav-ham .ham::before { top: 0; }
.nav-ham .ham::after { top: calc(100% - 2px); width: 70%; }
.menu-open .nav-ham .ham::before { top: calc(50% - 1px); transform: rotate(45deg); }
.menu-open .nav-ham .ham::after { top: calc(50% - 1px); width: 100%; transform: rotate(-45deg); }

/* Menu -------------------------------------------------------------------- */
.menu { position: fixed; inset: 0; z-index: 90; clip-path: ellipse(0% 0% at 50% 0%); visibility: hidden; transition: clip-path 0.9s var(--ease), visibility 0s linear 0.9s; overflow: hidden; }
.menu-open .menu { clip-path: ellipse(140% 120% at 50% 10%); visibility: visible; transition: clip-path 0.9s var(--ease), visibility 0s; }
.menu-inner { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--pad); padding: calc(var(--nav-h) + 1rem) var(--pad) calc(var(--pad) + 3rem); align-items: center; }
.menu-spaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-self: stretch; max-height: 34rem; }
.menu-space { position: relative; border-radius: 0.8rem; background: var(--bg); color: var(--fg); padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transform: translateY(1.5rem); opacity: 0; transition: transform 0.9s var(--ease), opacity 0.9s var(--ease), box-shadow 0.4s; box-shadow: 0 0 0 1px var(--line); isolation: isolate; }
.menu-space .glyph { height: 58%; width: auto; margin: auto; position: relative; z-index: 1; transition: transform 0.7s var(--ease); }
.menu-space:hover .glyph { transform: translateY(-6px) scale(1.04); }
.menu-space .label { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; display: flex; justify-content: space-between; }
.menu-space:hover { box-shadow: 0 0 0 1px currentColor; }
.menu-open .menu-space { transform: none; opacity: 1; }
.menu-open .menu-space:nth-child(1) { transition-delay: 0.15s; }
.menu-open .menu-space:nth-child(2) { transition-delay: 0.22s; }
.menu-open .menu-space:nth-child(3) { transition-delay: 0.29s; }
.menu-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.12em; font-size: clamp(2.2rem, 5vw, 4.6rem); }
.menu-links a { position: relative; display: inline-block; text-transform: uppercase; font-weight: 800; font-variation-settings: "wdth" 92, "opsz" 100; letter-spacing: -0.035em; line-height: 0.95; overflow: hidden; }
.menu-links a > span { display: block; transform: translateY(110%); transition: transform 0.8s var(--ease); }
.menu-open .menu-links a > span { transform: none; }
.menu-open .menu-links a:nth-child(2) > span { transition-delay: 0.06s; }
.menu-open .menu-links a:nth-child(3) > span { transition-delay: 0.12s; }
.menu-open .menu-links a:nth-child(4) > span { transition-delay: 0.18s; }
.menu-open .menu-links a:nth-child(5) > span { transition-delay: 0.24s; }
.menu-open .menu-links a:nth-child(6) > span { transition-delay: 0.3s; }
.menu-links a::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 0.075em; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.menu-links a:hover::after, .menu-links a[aria-current="page"]::after { transform: scaleX(1); }
.menu-foot { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; z-index: 1; }
.menu-foot .eyebrow { margin: 0; }
.menu-foot ul { display: flex; gap: 1.2rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; flex-wrap: wrap; }
.menu-foot a:hover { text-decoration: underline; }

/* Scroll indicator -------------------------------------------------------- */
.scroll-ind { position: fixed; right: 0.9rem; top: 50%; transform: translateY(-50%); width: 3px; height: 6rem; border-radius: 3px; background: color-mix(in srgb, currentColor 18%, transparent); z-index: 80; overflow: hidden; pointer-events: none; color: var(--fg); }
.scroll-ind span { position: absolute; left: 0; right: 0; top: 0; height: var(--p, 10%); min-height: 0.5rem; background: currentColor; border-radius: inherit; }

/* Glyph tokens: the illustrated I (column), K (book) and R adapt to their ground.
   Light values are the kits' dark tones; dark values are the kits' light tones. */
.g-column { --c-s: #0A1931; --c-f1: #F6FAFD; --c-f2: #B3CFE5; --c-f3: #4A7FA7; --lab: #1A3D63; }
.g-book { --b-p: #EFE6D6; --b-l: #9F6932; --b-c: #522623; --b-o: #1D1617; --b-g: #9F6932; --lab: #522623; }
.g-r { --r-s: #081B1B; --r-b1: #EEE8B2; --r-b2: #203B37; --r-h: #203B37; --r-l: #5A8F76; --r-beam: #C18D52; --lab: #203B37; }
[data-theme="dark"] .g-column, [data-theme="dark"].g-column { --c-s: #B3CFE5; --c-f1: #0F2342; --c-f2: #1A3D63; --c-f3: #4A7FA7; --lab: #B3CFE5; }
[data-theme="dark"] .g-book, [data-theme="dark"].g-book { --b-o: #9F6932; --b-g: #BF9B74; --lab: #BF9B74; }
[data-theme="dark"] .g-r, [data-theme="dark"].g-r { --r-s: #EEE8B2; --r-b1: #96CDB0; --r-b2: #203B37; --r-h: #96CDB0; --r-l: #5A8F76; --r-beam: #EEE8B2; --lab: #96CDB0; }
.cs { stroke: var(--c-s); } .cf1 { fill: var(--c-f1); } .cf2 { fill: var(--c-f2); } .cf3s { stroke: var(--c-f3); } .cd { fill: var(--c-s); }
.bp { fill: var(--b-p); } .bls { stroke: var(--b-l); } .bc { fill: var(--b-c); } .bo { stroke: var(--b-o); } .bgs { stroke: var(--b-g); } .bgf { fill: var(--b-g); } .bhl { stroke: var(--b-p); stroke-opacity: 0.16; }
.rs { stroke: var(--r-s); } .rl { stroke: var(--r-l); } .rb1 { fill: var(--r-b1); } .rb2 { fill: var(--r-b2); } .rh { fill: var(--r-h); } .rbm { fill: var(--r-beam); }
.mk-label { font-family: var(--font-mono); font-weight: 600; font-size: 2.45px; letter-spacing: 0.34px; fill: var(--lab); }
.glyph { overflow: visible; }
.menu { background: var(--bg); color: var(--fg); }
.menu-space.g-column, .menu-space.g-book, .menu-space.g-r { color: var(--fg); }

/* Hub hero: the mark, still; a lens follows the pointer and uncovers the three
   spaces behind it (after the landonorris.com hover) ------------------------ */
.hub-hero { position: relative; height: 100vh; height: 100svh; min-height: 34rem; overflow: hidden; padding: 0; background: var(--bg); --mk: min(58vh, 74vw); --ch: min(46vh, 60vw); isolation: isolate; }
.hub-ground { position: absolute; inset: 0; z-index: 0; }
.hub-mark { position: absolute; left: 50%; top: 50%; width: var(--mk); height: var(--mk); transform: translate(-50%, -50%); color: var(--fg); z-index: 2; overflow: visible; }
/* the objects: same boxes on the page (outlines) and behind it (filled) */
.hx { position: absolute; top: 50%; overflow: visible; }
.hx-col { left: 15%; top: 58%; height: var(--ch); width: auto; aspect-ratio: 16 / 45; transform: translate(-50%, -50%); }
/* the fire on the capital: its own box above the column's (the column's box clips the rise), in the same units */
.hx-fire { left: 15%; top: calc(58% - var(--ch) * 0.55); height: calc(var(--ch) * 0.3); width: auto; aspect-ratio: 16 / 13.5; transform: translate(-50%, -50%); pointer-events: none; }
.hxf-in { position: absolute; inset: 0; opacity: 0; transform-origin: 47.4% 73.7%; }
.hx-fire .hf { transform-origin: 47.4% 73.7%; will-change: transform; }
:is(.hub-hero[data-band="in"], .hub-hero.revealed) .hxf-in { animation: ignite 0.55s 1.75s cubic-bezier(.3,.8,.3,1) both; }
:is(.hub-hero[data-band="in"], .hub-hero.revealed) .hf-1, .scene.play .fl-1 { animation: flick-a 0.82s ease-in-out infinite alternate; }
:is(.hub-hero[data-band="in"], .hub-hero.revealed) .hf-2, .scene.play .fl-2 { animation: flick-b 0.61s ease-in-out infinite alternate; }
:is(.hub-hero[data-band="in"], .hub-hero.revealed) .hf-3, .scene.play .fl-3 { animation: flick-c 0.47s ease-in-out infinite alternate; }
:is(.hub-hero[data-band="in"], .hub-hero.revealed) .hf-g, .scene.play .fg { animation: glow-p 1.3s ease-in-out infinite alternate; }
:is(.hub-hero[data-band="in"], .hub-hero.revealed) .hf-e, .scene.play .fe { animation: embers 1.7s linear infinite; }
@keyframes ignite { from { opacity: 0; transform: scale(0.25, 0.06); } 65% { opacity: 1; transform: scale(1.06, 1.12); } to { opacity: 1; transform: none; } }
@keyframes flick-a { from { transform: scale(1, 1) skewX(0); } 35% { transform: scale(0.95, 1.07) skewX(-3deg); } 70% { transform: scale(1.03, 0.94) skewX(2deg); } to { transform: scale(0.98, 1.04) skewX(-1deg); } }
@keyframes flick-b { from { transform: scale(1.02, 0.96) skewX(2deg); } 40% { transform: scale(0.93, 1.1) skewX(-4deg); } to { transform: scale(1.05, 0.9) skewX(3deg); } }
@keyframes flick-c { from { transform: scale(0.96, 1.08) skewX(-2deg); } 50% { transform: scale(1.06, 0.9) skewX(3deg); } to { transform: scale(0.94, 1.12) skewX(-3deg); } }
@keyframes glow-p { from { opacity: 0.7; transform: scale(0.94); } to { opacity: 1; transform: scale(1.06); } }
@keyframes embers { from { opacity: 0; transform: translateY(1.5%); } 20% { opacity: 1; } 80% { opacity: 0.9; } to { opacity: 0; transform: translateY(-5%); } }
.hx-fire-still { opacity: 1; }
.hx-book { left: 50%; width: var(--mk); height: var(--mk); transform: translate(-50%, -50%); }
.hx-gears { left: 84%; top: calc(58% + 0.01 * var(--ch)); height: calc(var(--ch) * 1.12); width: auto; aspect-ratio: 100 / 150; transform: translate(-50%, -50%); }
/* the word AI inside the mark (mark units as percentages of its box, 100 wide): the A in the narrow of the "<" before
   the arc, the I after it, both 6.8 tall; in the lens the A rocks onto its side (scaled 729/657, so it stays as tall as
   the I) and back; on the page their outlines are drawn after the mark's */
.hx-aiw { position: absolute; inset: 0; pointer-events: none; color: #7FD4FF; filter: drop-shadow(0 0 0.5em rgba(47, 139, 255, 0.85)); }
.hx-aiw svg { position: absolute; top: calc(50% - 3.4%); height: 6.8%; overflow: visible; fill: currentColor; }
.aiw-a { left: calc(50% + 10% - 3.064%); width: 6.128%; transform-origin: 50% 50%; will-change: transform; }
.aiw-i { left: calc(50% + 19.2% - 0.793%); width: 1.586%; }
/* the A stands still; pointed at (the AI under the lens, or hovered once revealed) it turns onto its left side, scaled
   so it stands as tall as the I, a "<" in the "<", and back upright when the pointer leaves */
.aiw-a { transition: transform 0.6s var(--ease); }
:is(.hub-hero:not(.revealed)[data-band="ai"], .hub-hero.revealed.ai-hover) .aiw-a { transform: rotate(-90deg) scale(1.1096); }
/* on the page, the word's strokes chase one another after the mark's (1.2 to 3.5 s), each drawn slowly */
.hub-outlines .hx-book .a0 { --dd: 1.20s; } .hub-outlines .hx-book .a1 { --dd: 1.45s; } .hub-outlines .hx-book .a2 { --dd: 2.10s; } .hub-outlines .hx-book .a3 { --dd: 1.70s; } .hub-outlines .hx-book .a4 { --dd: 1.90s; } .hub-outlines .hx-book .a5 { --dd: 2.40s; } .hub-outlines .hx-book .a6 { --dd: 2.55s; } .hub-outlines .hx-book .a7 { --dd: 2.20s; } .hub-outlines .hx-book .a8 { --dd: 2.35s; } .hub-outlines .hx-book .a9 { --dd: 2.70s; } .hub-outlines .hx-book .a10 { --dd: 3.00s; } .hub-outlines .hx-book .a11 { --dd: 3.15s; } .hub-outlines .hx-book .a12 { --dd: 3.50s; }
.hub-outlines .hx.hx-book .hx-i .aiw-o path { animation-duration: 3.1s; }
/* the sketch under the outlines: sepia, fine, the construction drawn first, the hatching last */
.hub-outlines .hx .hx-i .sk { stroke: #946434 !important; stroke-width: 0.7 !important; opacity: 1; }
.hub-outlines .hx .hx-i .skc { --dd: 0s; } .hub-outlines .hx .hx-i .skh { --dd: 2.6s; }
/* on a phone, the word stands under the ring, centred (the AI access stays on the chevron) */
/* the clockwork stays inside its chamber: the spinning gears are clipped by the arch (a still clip on their wrapper) */
.hgc { position: absolute; inset: 0; clip-path: polygon(39.0% 74.7%, 39.0% 52.0%, 39.4% 50.1%, 40.5% 48.3%, 42.2% 46.8%, 44.5% 45.6%, 47.2% 44.9%, 50.0% 44.7%, 52.8% 44.9%, 55.5% 45.6%, 57.8% 46.8%, 59.5% 48.3%, 60.6% 50.1%, 61.0% 52.0%, 61.0% 74.7%); }
/* the lighthouse's lamp, lit: dark on the page, beating under the lens and once revealed (a quick flash, a slow fade) */
.lhg { opacity: 0; pointer-events: none; transform-box: view-box; transform-origin: 50% 17%; }
:is(.hub-hero[data-band="r"], .hub-hero.revealed) .lens .lhg { animation: lh-beat 2.6s cubic-bezier(.3,0,.4,1) infinite; }
@keyframes lh-beat { 0% { opacity: 0.25; transform: scale(0.82); } 12% { opacity: 1; transform: scale(1.12); } 45% { opacity: 0.5; transform: scale(0.95); } 100% { opacity: 0.25; transform: scale(0.82); } }
@media (prefers-reduced-motion: reduce) { :is(.hub-hero[data-band="r"], .hub-hero.revealed) .lens .lhg { animation: none; opacity: 0.7; } }
.hub-outlines { position: absolute; inset: 0; z-index: 1; pointer-events: none; color: var(--fg); }
.hub-outlines .hx-i * { fill: none !important; stroke: currentColor !important; stroke-width: 1 !important; vector-effect: non-scaling-stroke; }
.hx-o { position: absolute; inset: 0; overflow: hidden; }
.hx-i { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-outlines .hx text { display: none; }
/* in outline, what is in front hides what is behind: gear bodies and leaves take the page colour */
.hub-outlines .hx :is(.gr-body, .gr-hub, .gr-spoke, .lf, .lh-wall, .lh-band, .lh-base) { fill: var(--bg) !important; }
.hub-outlines .hx .lf-l { display: none; }
/* the breeze: each leaf sways a few degrees about its stalk, at its own pace, under the lens and when revealed */
.hub-outlines .hx .lf-v { stroke-width: 0.6 !important; }
/* the outlines draw themselves once, as a pen would: each stroke runs its dash from nothing to full, part after part,
   the column first, then the mark and its word, then the lighthouse; then they stay (still, a drawing costs nothing:
   looping, its ~130 stroke animations kept the main thread busy every frame) */
.hub-outlines .hx { opacity: 0.42; }
.hub-outlines .hx .hx-i :is(path, rect, circle, ellipse, line, polygon) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hx-draw 2.2s linear both; animation-delay: calc(var(--od, 0s) + var(--dd, 0s)); }
.hub-outlines .hx-col { --od: 0.2s; } .hub-outlines .hx-book { --od: 0.9s; } .hub-outlines .hx-gears { --od: 1.6s; }
.hub-outlines .hx-book .dr-2 { --dd: 0.6s; } .hub-outlines .hx-book .dr-3 { --dd: 1.2s; }
.hub-outlines .hx-col .dr-2 { --dd: 0.4s; } .hub-outlines .hx-col .dr-3 { --dd: 1s; } .hub-outlines .hx-col .dr-4 { --dd: 1.6s; }
.hub-outlines .dr-1 { --dd: 0s; } .hub-outlines .dr-2 { --dd: 0.5s; } .hub-outlines .dr-3 { --dd: 1.1s; } .hub-outlines .dr-4 { --dd: 1.5s; } .hub-outlines .dr-5 { --dd: 1.8s; } .hub-outlines .dr-6 { --dd: 2.4s; }
@keyframes hx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* gears, filled */
.gr-body { fill: #203B37; stroke: #C18D52; stroke-width: 0.6; }
.gr-spoke { stroke: #C18D52; stroke-width: 2.4; stroke-linecap: round; }
.gr-hub { fill: #EEE8B2; }
.vn { fill: none; stroke: #5A8F76; stroke-width: 1.5; stroke-linecap: round; }
.lf { fill: #5A8F76; stroke: #0C2322; stroke-width: 0.35; } .leaf.b .lf { fill: #96CDB0; }
.lf-v { fill: none; stroke: #0C2322; stroke-width: 0.35; }
.vn { stroke-width: 2.2; }
.lf-g { transform-box: fill-box; transform-origin: 0% 50%; }
.sc-research .g-r { --r-s: #EEE8B2; --r-b1: #EEE8B2; --r-b2: #203B37; --r-h: #203B37; --r-beam: #FFF3C4; --r-l: #5A8F76; }
.sc-research .g-r * { stroke-width: 0.16; }
/* the lens: a shape that changes (main.js) and moves on the compositor; its content counter-moves */
.lens { position: absolute; left: 0; top: 0; z-index: 3; width: 300px; height: 300px; opacity: 0; transition: opacity 0.35s var(--ease); will-change: transform; pointer-events: none; }
.lens-rim, .lens-clip { position: absolute; clip-path: circle(50%); }
.lens-rim { inset: -2px; background: rgba(255, 255, 255, 0.55); }
.lens-clip { inset: 0; }
.lens-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.rv { position: absolute; inset: 0; display: block; color: var(--fg); background: var(--bg); text-decoration: none; }
.rv-in { clip-path: polygon(0 0, 42% 0, 24% 100%, 0 100%); }
.rv-k { clip-path: polygon(42% 0, 76% 0, 58% 100%, 24% 100%); }
.rv-r { clip-path: polygon(76% 0, 100% 0, 100% 100%, 58% 100%); }
.rv-pat { position: absolute; inset: 0; background: center / cover no-repeat; }
.rv-pat::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 38%, transparent); transition: opacity 0.4s var(--ease); will-change: opacity; }
.hub-hero[data-band="in"] .rv-in .rv-pat::after, .hub-hero[data-band="k"] .rv-k .rv-pat::after, .hub-hero[data-band="r"] .rv-r .rv-pat::after { opacity: 0.32; }
/* the patterns come once the page is idle or the hero is first touched (main.js adds .pats) */
.hub-hero:not(.pats) .rv-pat { background-image: none; }
.rv-in .rv-pat { background-image: url("/assets/img/pattern-innovation.webp?v=a3b1fca54c"); }
.rv-k .rv-pat { background-image: url("/assets/img/pattern-knowledge.webp?v=9d1687b164"); }
.rv-r .rv-pat { background-image: url("/assets/img/pattern-research.webp?v=53ded1f1ac"); }
.rv-label { position: absolute; top: calc(var(--nav-h) + 4vh); display: grid; gap: 0.35rem; max-width: 22ch; }
.rv-in .rv-label { left: 4%; } .rv-k .rv-label { left: 45%; } .rv-r .rv-label { left: 79%; }
.rv-label b { font-family: var(--font-sans); font-weight: 800; font-variation-settings: "wdth" 92; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.9; font-size: clamp(1.1rem, 3.4vw, 4rem); color: var(--d-hi, var(--fg)); }
.rv-k .rv-label b { font-family: var(--font-serif); font-weight: 500; text-transform: none; letter-spacing: -0.01em; font-size: clamp(1.25rem, 3.8vw, 4.4rem); color: #BF9B74; }
.rv-r .rv-label b { color: #EEE8B2; }
/* under each title, only an arrow: it slides a little when the band is pointed at */
.rv-label .rv-go { font-style: normal; font-family: var(--font-sans); font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.9rem); line-height: 1; transition: transform 0.4s var(--ease); }
.hub-hero.revealed .rv:hover .rv-go { transform: translateX(0.35em); }
.rv-cuts { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the AI access: the chevron of the mark and the bolt's place beside it (mark units -4..38 across, -24..24 down) */
.rv-ai { inset: auto; left: calc(50% - 0.04 * var(--mk)); top: calc(50% - 0.24 * var(--mk)); width: calc(0.42 * var(--mk)); height: calc(0.48 * var(--mk)); background: transparent; z-index: 1; }
.rv-ai::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 139, 255, 0.35), rgba(47, 139, 255, 0) 70%); opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; }
.hub-hero[data-band="ai"] .rv-ai::before, .hub-hero.revealed .rv-ai:hover::before { opacity: 1; }
.hub-hero[data-band="ai"] .rv-k .rv-label { opacity: 0.35; }
/* the gas in the chevron, the A's arc and the I's bolt: drawn live on a canvas over the chevron (mark units -6..40
   across, -26..26 down), lit with the additive light of the plasma */
.hxz { position: absolute; left: 44%; top: 24%; width: 46%; height: 52%; pointer-events: none; mix-blend-mode: screen; }
.rv-cuts line { stroke: #EEE8B2; stroke-opacity: 0.7; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rv-objects { position: absolute; inset: 0; pointer-events: none; }
/* under the lens, each space's object moves: the column rises from the ground and is carved as marble falls from it,
   the book's pages riffle, the gears turn and the leaves grow */
.hub-hero[data-band="in"] /* in the lens, each moving part is its own compositor layer */
.rv-objects .hx-i { position: absolute; inset: 0; }
.hxc { overflow: hidden; }
.hxc-rise, .hxc-carve, .hxc-carve-in { position: absolute; inset: 0; }
.hxc-carve { overflow: hidden; }
.hxc-carve .hx-i { stroke: #F2E9D8; }
:is(.hub-hero[data-band="in"], .hub-hero.revealed) .hxc-rise { animation: col-rise 1.9s cubic-bezier(.2,.7,.2,1) both; }
:is(.hub-hero[data-band="in"], .hub-hero.revealed) .hxc-carve { animation: carve-o 2s 0.8s cubic-bezier(.3,.6,.3,1) both; }
:is(.hub-hero[data-band="in"], .hub-hero.revealed) .hxc-carve-in { animation: carve-i 2s 0.8s cubic-bezier(.3,.6,.3,1) both; }
@keyframes col-rise { from { transform: translateY(102%); } to { transform: none; } }
@keyframes carve-o { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes carve-i { from { transform: translateY(100%); } to { transform: none; } }
.crm { position: absolute; left: var(--x); top: var(--y); width: var(--k); aspect-ratio: 1; background: #EFE9DC; clip-path: polygon(0 60%, 45% 0, 100% 35%, 80% 100%, 20% 90%); opacity: 0; }
:is(.hub-hero[data-band="in"], .hub-hero.revealed) .crm { animation: crumb 0.9s var(--d) ease-in 2 both; }
@keyframes crumb { 0% { opacity: 0; transform: none; } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--fy)) rotate(220deg); } }
.hgf { will-change: transform; }
.hg { will-change: transform; }
.hg1 { transform-origin: 50% 64%; } .hg2 { transform-origin: 59% 55.333%; } .hg3 { transform-origin: 41% 56%; }
:is(.hub-hero[data-band="r"], .hub-hero.revealed) .hg1 { animation: spin 9s linear infinite; }
:is(.hub-hero[data-band="r"], .hub-hero.revealed) .hg2 { animation: spin-r 4.5s linear infinite; }
:is(.hub-hero[data-band="r"], .hub-hero.revealed) .hg3 { animation: spin-r 3.857s linear infinite; }
/* the ink the lens leaves behind (main.js): splashes that show the bands, then recede */
.inkfield { position: absolute; inset: 0; z-index: 3; pointer-events: none; clip-path: circle(0); }
.inkfield .ink-in { position: absolute; left: 0; top: 0; will-change: transform; }
.inkfield .rv-pat::after { background: color-mix(in srgb, var(--bg) 22%, transparent); will-change: auto; transition: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-r { to { transform: rotate(-360deg); } }
.rv-mark { pointer-events: none; color: #F6F2EA; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.35)); }
.hub-hero[data-band] { cursor: var(--hand); }
/* page text over it all */
.hub-stage { position: absolute; inset: 0; pointer-events: none; }
.hub-eyebrow, .hub-hint { z-index: 2; }
.hub-spaces { position: relative; z-index: 4; }
.hub-eyebrow { position: absolute; z-index: 2; left: 0; right: 0; max-width: none; top: calc(50% - var(--mk) / 2 - 2.6rem); display: flex; justify-content: center; margin: 0; }
.hub-under { position: absolute; left: 0; right: 0; top: calc(50% + var(--mk) / 2 + 1.4rem); display: grid; justify-items: center; gap: 0.7rem; }
.hub-hint { position: relative; margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; transition: opacity 0.5s var(--ease); }
.hub-hero.seen .hub-hint { opacity: 0.45; }
.hub-hint { padding: 0 var(--pad); text-align: center; } .h-touch { display: none; }
@media (hover: none) { .h-mouse { display: none; } .h-touch { display: inline; } }
.hub-spaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; pointer-events: auto; }
.hub-spaces a { 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: var(--radius-l); box-shadow: 0 0 0 1px var(--line); text-decoration: none; background: var(--bg); transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease); }
.hub-spaces a:hover, .hub-spaces a:focus-visible { box-shadow: 0 0 0 1px var(--fg); }
/* the fourth access, transversal: the theory beneath the three spaces, marked by a wire tesseract that turns */
.hub-spaces a.hub-arc { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 0.5rem; padding: 0.4rem 0.85rem 0.4rem 0.6rem; background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.3s var(--ease), color 0.3s var(--ease); }
.hub-arc small { font-size: inherit; font-weight: 500; letter-spacing: 0.1em; opacity: 0.62; text-transform: none; }
.hub-spaces a.hub-arc:hover, .hub-spaces a.hub-arc:focus-visible { box-shadow: inset 0 0 0 1px var(--fg); }
.hub-arc .tess { width: 1.1rem; height: 1.1rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; }
.hub-arc .tess-o, .hub-arc .tess-i { transform-box: view-box; transform-origin: 0 0; }
.hub-arc .tess-o { animation: spin-r 26s linear infinite; } .hub-arc .tess-i { animation: spin 18s linear infinite; }
.hub-arc:hover .tess-o { animation-duration: 6s; } .hub-arc:hover .tess-i { animation-duration: 4s; }
.hub-hero.revealed .hub-spaces a.hub-arc { color: #F6F2EA; box-shadow: inset 0 0 0 1px rgba(246, 242, 234, 0.55); background: rgba(10, 22, 20, 0.35); }
@media (max-width: 860px) { .hub-arc small { display: none; } .hub-spaces a.hub-arc { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .hub-arc .tess-o, .hub-arc .tess-i { animation: none; } }
.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-meta { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: right; line-height: 1.7; color: var(--mute); margin: 0; }
/* phones: the mark smaller and higher, the column and the lighthouse smaller and lower, so the three keep clear of
   one another and of the words above and the pills below */
/* phones: the mark, the column and the lighthouse on one line (--cy), the mark smaller, the line under the mark and
   the one above it following it */
@media (max-width: 860px) {
  .hub-hero { --cy: 47%; --mk: min(33vh, 50vw); --ch: min(26vh, 44vw); }
  .hub-mark, .hx-book { top: var(--cy); } .rv-ai { top: calc(var(--cy) - 0.24 * var(--mk)); }
  .hx-col { left: 12%; top: var(--cy); } .hx-fire { left: 12%; top: calc(var(--cy) - var(--ch) * 0.55); }
  .hx-gears { left: 86%; top: calc(var(--cy) + 0.01 * var(--ch)); height: calc(var(--ch) * 1.12); }
  .hub-eyebrow { top: calc(var(--cy) - var(--mk) / 2 - 2.4rem); } .hub-under { top: calc(var(--cy) + var(--mk) / 2 + 1.2rem); }
  .hub-meta { display: none; }
}
/* phones held sideways: the hero is the screen's height (not 34rem), the three objects on one line at mid-height, the
   spaces' buttons in one row at the bottom left, the reveal at the bottom right; the line above the mark, the hint and
   the Horizon Watch strip are left out */
@media (max-height: 500px) and (orientation: landscape) {
  .hub-hero { min-height: 0; --cy: 53%; --mk: min(40vh, 30vw); --ch: 38vh; }
  .hub-mark, .hx-book { top: var(--cy); } .rv-ai { top: calc(var(--cy) - 0.24 * var(--mk)); }
  .hx-col { left: 19%; top: var(--cy); } .hx-fire { left: 19%; top: calc(var(--cy) - var(--ch) * 0.55); }
  .hx-gears { left: 81%; top: calc(var(--cy) + 0.01 * var(--ch)); height: calc(var(--ch) * 1.12); }
  .hub-eyebrow, .hub-hint, .hub-foot .ticker { display: none; }
  .hub-under { top: auto; bottom: var(--pad); left: var(--pad); right: auto; justify-items: start; z-index: 6; }
  .hub-spaces { flex-wrap: nowrap; justify-content: flex-start; }
  .hub-spaces a { padding-block: 0.3rem; }
  .hub-foot { flex-direction: row; justify-content: flex-end; }
  .rv-label { top: calc(var(--nav-h) + 1vh); }
  .rv-label b { font-size: clamp(1rem, 3vw, 1.7rem); }
}

/* Scenes: the layered pictures that carry you into a space ------------------ */
@view-transition { navigation: auto; }
.scene { position: fixed; inset: 0; z-index: 300; visibility: hidden; overflow: hidden; pointer-events: none; container-type: size; --vb: max(calc(100cqw / 1600), calc(100cqh / 1000)); }
.sc-reveal, .sc-body { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sc-reveal { overflow: hidden; }
.sc-body { container-type: size; }
.sc-reveal { background: linear-gradient(var(--sc-top, #000) 50%, var(--sc-bot, #000) 50%); }
.sc-innovation { --sc-top: #081530; --sc-bot: #060F22; } .sc-knowledge { --sc-top: #1C1310; --sc-bot: #0E0806; } .sc-research { --sc-top: #020909; --sc-bot: #081B19; }
/* portrait screens: a square band shows 1000 units of the scene's width (cover would show about 450), blended into the scene's colours above and below */
@media (max-aspect-ratio: 1/1) {
  /* portrait screens: the scene fills the screen at its full height; layers that would fall outside the frame
     are moved towards the centre (--mx, in scene units), and some are left out */
  .scene { --vb: calc(100cqh / 1000); }
  .sc-research { --mx: -14; }
  .sc-innovation .l-col.c1 { --mx: 520; } .sc-innovation .l-col.c3 { --mx: -470; } .sc-innovation .l-col.c2 { display: none; }
}
}
/* once a scene covers the screen, the page beneath stops painting */
html.scene-cover body > :not(.scene) { visibility: hidden; }
.scene.play { visibility: visible; pointer-events: auto; }
.scene.prime:not(.play) { visibility: visible; opacity: 0.01; clip-path: inset(0 0 calc(100% - 1px) 0); }
.sc-layer { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; transform-origin: 50% 60%; overflow: visible; }
.sc-fade { position: absolute; inset: 0; opacity: 0; will-change: opacity; z-index: 60; } /* above the band's vignette and fades on phones (z 50) */
.sc-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(10, 6, 5, 0.55) 100%); }
.sc-ai { --sc-top: #495699; --sc-bot: #3B3A65; } .sc-ai .sc-fade { background: #0B1A40; }
/* AI, the chora: the layers turn about the scene's centre; the lights (windows, lamps, circuits, the veins on the
   water) are screened over their element, so the last frame is the picture with every light on */
.sc-ai .sc-layer { transform-origin: calc(50% + var(--mx, 0) * var(--vb)) 50%; }
.sc-ai :is(.l-leftw, .l-leftc, .l-cityw, .l-cityc, .l-wheelw, .l-wheelc, .l-gardenw, .l-gardenc, .l-boatw, .l-v1, .l-v2, .l-v3, .l-vq, .l-vt, .l-vs, .l-vc, .l-vn, .l-vl) { mix-blend-mode: screen; }
@media (max-aspect-ratio: 1/1) { .sc-ai { --mx: -160; } }
.sc-innovation .sc-fade { background: #F6FAFD; } .sc-knowledge .sc-fade { background: #1D1617; } .sc-research .sc-fade { background: #0E2624; }
.sc-innovation .g-column { --c-s: #6893BA; --c-f1: #0A1931; --c-f2: #0D1F3B; --c-f3: #2F5E88; }
.sc-innovation .g-column * { stroke-width: 0.14; }
.sc-innovation .l-col { transform-origin: 50% 100%; }
.sc-innovation .l-col > div, .sc-innovation .l-col .fire > div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sc-innovation .l-col.c1 { --fx: 110; --fy: 183.1; } .sc-innovation .l-col.c2 { --fx: 1250; --fy: 443.4; } .sc-innovation .l-col.c3 { --fx: 1450; --fy: 183.1; }
.sc-innovation :is(.fire, .fl, .fg) { transform-origin: calc(50% + (var(--fx) - 800 + var(--mx, 0)) * var(--vb)) calc(50% + (var(--fy) - 500) * var(--vb)); }
.sc-innovation .fire { opacity: 0; } .sc-innovation :is(.fl, .fg, .fe) { will-change: transform; }
.sc-innovation .c2 .g-column { --c-f1: #112845; --c-f2: #132C50; }
.sc-innovation .rays { transform-box: view-box; transform-origin: 800px 640px; }
/* research gears: one layer each, turned about their own centre (viewBox point mapped with --vb, the slice scale) */
.sc-knowledge .sc-layer { transform-origin: 50% 47%; }
/* the library's two sets: the landscape picture, or the portrait one on portrait screens */
.sc-knowledge .k-port { display: none; }
@media (max-aspect-ratio: 1/1) { .sc-knowledge .k-land { display: none; } .sc-knowledge .k-port { display: block; } }
/* on a phone, in a browser (its bars take height, so the screen is less tall than the picture is narrow), the portrait
   library covers the screen: scaled by whichever of its height (1000) and its width (460.7) fills more */
@media (max-aspect-ratio: 1/1) { .sc-knowledge { --vb: max(calc(100cqh / 1000), calc(100cqw / 460.7)); } }
/* the machine: the gears and pulleys turn (the picture inside the layer, so the layer can still sink); the lamp's
   globe breathes; the lighthouse rises from its base point; the moon's halo breathes; the beam sweeps; the sails bob */
/* the gear train turns by main.js (each gear by its ratio, driven by the falling counterweight), about its own centre */
.sc-research :is(.l-g1, .l-g2, .l-g3, .l-g4, .l-g5, .l-p1, .l-p2, .l-p3) .sc-img { transform-origin: 50% 50%; }
.sc-research .l-strand { transform-origin: calc(50% + (1438.3 - 800 + var(--mx, 0)) * var(--vb)) calc(50% + (683.6 - 500) * var(--vb)); }
.sc-research .l-boat1 { transform-origin: calc(50% + (369 - 800 + var(--mx, 0)) * var(--vb)) calc(50% + (698 - 500) * var(--vb)); } .sc-research .l-boat2 { transform-origin: calc(50% + (624 - 800 + var(--mx, 0)) * var(--vb)) calc(50% + (678 - 500) * var(--vb)); }
/* AI: the tracks under the floating island glow gently once lit; the leaves sway; on a portrait screen the valley is
   seen from the lake's middle (the island to the left, the waterfall to the right) */
/* Research: the moon grows about its own centre, the arm's links turn about the shoulder (scene units, following --mx) */
/* the beam turns about the lantern (scene units 1009.7, 346.9); it and the flash are light, screened over the sky */
.sc-research :is(.l-beam, .l-cone, .l-flare) { transform-origin: calc(50% + (1009.7 - 800 + var(--mx, 0)) * var(--vb)) calc(50% + (346.9 - 500) * var(--vb)); mix-blend-mode: screen; }
.sc-research :is(.l-arm1, .l-arm2) { transform-origin: calc(50% + (330 - 800 + var(--mx, 0)) * var(--vb)) calc(50% + (612 - 500) * var(--vb)); }
@keyframes globe-breathe { from { opacity: 0.82; transform: scale(0.97); } to { opacity: 1; transform: scale(1.04); } }
@keyframes moon-breathe { from { opacity: 0.7; transform: scale(0.96); } to { opacity: 1; transform: scale(1.05); } }
@keyframes beam-sweep { from { transform: rotate(-7deg); opacity: 0.5; } to { transform: rotate(6deg); opacity: 0.9; } }
@keyframes bob { from { transform: translateY(-0.6%) rotate(-1.2deg); } to { transform: translateY(0.6%) rotate(1.2deg); } }
@media (prefers-reduced-motion: reduce) { .sc-research .sc-img { animation: none !important; } }
/* the doors hinge at the scene's edges (off screen on a portrait screen), not at the frame's */
.sc-knowledge .l-cover-l { transform-origin: calc(50% - 706 * var(--vb)) 50%; } .sc-knowledge .l-cover-r { transform-origin: calc(50% + 708 * var(--vb)) 50%; }
/* the library's lamps: their glow screened over the room, flickering a little (two sets, out of step) */
.sc-knowledge :is(.l-glow1, .l-glow2, .l-p-glow1, .l-p-glow2) { mix-blend-mode: screen; }
.scene.play.sc-knowledge :is(.l-glow1, .l-p-glow1) .sc-img { animation: k-flicker 1.7s linear infinite; }
.scene.play.sc-knowledge :is(.l-glow2, .l-p-glow2) .sc-img { animation: k-flicker 2.3s linear -0.9s infinite; }
@keyframes k-flicker { 0% { opacity: 0.72; } 9% { opacity: 0.95; } 14% { opacity: 0.6; } 22% { opacity: 0.9; } 38% { opacity: 0.8; } 44% { opacity: 1; } 57% { opacity: 0.66; } 63% { opacity: 0.88; } 78% { opacity: 0.75; } 86% { opacity: 0.97; } 100% { opacity: 0.72; } }
@media (prefers-reduced-motion: reduce) { .scene.play.sc-knowledge .sc-img { animation: none; } }
.scene .gear { transform-box: fill-box; transform-origin: center; }
html:has(#arrive:target) main > section:first-child :is(.copy, .hero-title, .page-head, .hub-stage) { animation: arrive-rise 0.9s var(--ease) 0.15s both; }
@keyframes arrive-rise { from { opacity: 0; transform: translateY(2.5rem); } }
/* the Horizon Watch as a thin rolling stripe (a ticker): a fixed tag, then the entries rolling by, paused under
   the pointer; the roll is one composited transform over a doubled run */
.ticker { display: flex; align-items: stretch; width: min(100%, 48rem); min-width: 0; height: 1.7rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--fg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); --tk-dur: 40s; }
.tk-tag { flex: none; display: flex; align-items: center; padding: 0 0.9em; border-right: 1px solid var(--line); font-weight: 700; color: var(--mute); }
.tk-rail { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent); }
.tk-run { flex: none; display: inline-flex; align-items: center; white-space: nowrap; animation: tk-roll var(--tk-dur) linear infinite; will-change: transform; }
.tk-item { display: inline-flex; align-items: center; gap: 0.7em; padding: 0 1.1em; }
.tk-item::after { content: "◆"; font-size: 0.55em; color: var(--mute); margin-left: 1.1em; }
.tk-item b { font-weight: 700; } .tk-item i { font-style: normal; font-size: 0.85em; padding: 0.05em 0.55em; border-radius: var(--radius-l); box-shadow: 0 0 0 1px currentColor; color: var(--mute); }
.ticker:hover .tk-run { animation-play-state: paused; }
.hub-hero.revealed .ticker { color: #F2E9D8; border-color: rgba(255, 255, 255, 0.28); background: rgba(8, 12, 16, 0.55); }
.hub-hero.revealed .ticker :is(.tk-tag, .tk-item i, .tk-item::after) { color: rgba(242, 233, 216, 0.72); border-color: rgba(255, 255, 255, 0.28); }
@keyframes tk-roll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .tk-run { animation: none; } .tk-run + .tk-run { display: none; } }

/* Hub: the three spaces, stacked panels that slide over each other ----------- */
.spaces { position: relative; }
.panel { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; padding: calc(var(--nav-h) + 2rem) var(--pad) var(--pad); overflow: hidden; isolation: isolate; border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; }
.panel:first-child { border-radius: 0; }
.panel .glyph-wrap { position: relative; z-index: 1; display: grid; place-items: center; }
.panel .glyph { height: min(62vh, 560px); width: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.35)); }
.panel .body { position: relative; z-index: 1; }
.panel .display { font-size: clamp(3rem, 8vw, 8.5rem); margin-bottom: 1.2rem; }
.panel .lead { max-width: 40ch; }
.panel-list { margin: 2rem 0 0; border-top: 1px solid var(--line); max-width: 44rem; }
.panel-list li { border-bottom: 1px solid var(--line); }
.panel-list a { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: 1rem 0; transition: padding 0.5s var(--ease), color 0.3s; }
.panel-list a:hover { padding-left: 0.6rem; color: var(--hi-2); }
.panel-list b { font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-variation-settings: "wdth" 92; font-size: clamp(1.05rem, 1.5vw, 1.35rem); }
.panel-list span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.panel-list small { display: block; margin-top: 0.25rem; font-size: 0.9rem; color: var(--mute); font-family: var(--font-sans); letter-spacing: 0; text-transform: none; font-weight: 400; }

/* Space hero (Knowledge, Research landing) ------------------------------------ */
.space-hero { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--pad); padding: calc(var(--nav-h) + 2rem) var(--pad) clamp(2.5rem, 6vw, 5rem); position: relative; isolation: isolate; overflow: hidden; }
.space-hero .copy { container-type: inline-size; }
.space-hero .display { font-size: clamp(3.2rem, 8.2vw, 9.5rem); font-size: clamp(3rem, 15cqi, 11rem); } /* sized to its column: the longest word always fits */
/* the space's pattern, veiled on the text side and opening towards the glyph */
.space-pat { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; }
.space-pat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--bg) 94%, transparent) 38%, color-mix(in srgb, var(--bg) 72%, transparent) 64%, color-mix(in srgb, var(--bg) 40%, transparent)); }
.pat-knowledge { background-image: url("/assets/img/pattern-knowledge.webp?v=9d1687b164"); }
.pat-research { background-image: url("/assets/img/pattern-research.webp?v=53ded1f1ac"); }
.pat-ai { background-image: url("/assets/img/pattern-ai.webp?v=372cfe93fa"); }
.space-hero .lead { margin-top: 1.5rem; max-width: 42ch; }
.space-hero .glyph { height: min(70vh, 640px); width: auto; justify-self: center; align-self: center; position: relative; z-index: 1; }
.space-hero .copy { position: relative; z-index: 1; }
.sub-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.sub-nav a { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 0.55rem 0.9rem; border-radius: var(--radius-l); box-shadow: 0 0 0 1px var(--line); transition: box-shadow 0.3s, background-color 0.3s, color 0.3s; }
.sub-nav a:hover { box-shadow: 0 0 0 1px currentColor; }

/* Innovation hero (contour field → page) ------------------------------------ */
.hero { height: 200vh; height: 200svh; margin: 0; padding: 0; }
.hero-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-frame { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: 1fr auto; padding: calc(var(--nav-h) + 1rem) var(--pad) var(--pad); }
.hero-title { align-self: center; max-width: 62%; }
.hero-title .display { font-size: clamp(3rem, 8.4vw, 10rem); }
.hero-sub { margin-top: 1.5rem; max-width: 34ch; }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.card { border: 1px solid var(--card-line); border-radius: var(--radius-m); padding: 0.9rem 1rem; background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); max-width: 21rem; }
.card.wide { max-width: none; }
.card .eyebrow { margin-bottom: 0.6rem; font-size: 0.62rem; }
.card-title { font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; font-variation-settings: "wdth" 92; margin: 0; }
.card-meta { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.5rem; color: var(--mute); display: flex; gap: 0.8em; flex-wrap: wrap; }
.card-meta.plain { color: inherit; }
.hero-meta { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: right; line-height: 1.7; color: var(--mute); }
/* Innovation hero: a hand of three game cards where the page used to take shape; scrolling opens the hand (--hp, set from main.js) */
.deck { position: absolute; left: 71%; top: 55%; z-index: 2; --cw: clamp(9.2rem, 12.4vw, 14.6rem); width: calc(var(--cw) * 3.15); height: calc(var(--cw) * 2.08); margin: calc(var(--cw) * -1.04) 0 0 calc(var(--cw) * -1.575); border-radius: calc(var(--cw) * 0.16); }
/* the liquid-glass pane (the hero's original page, grown to hold the hand): tinted blue, a bright rim, depth at the foot, a sheen */
.deck::before, .deck::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.deck::before { background: linear-gradient(150deg, color-mix(in srgb, var(--canvas-fill) 70%, transparent), color-mix(in srgb, var(--canvas-fill) 34%, transparent) 55%, color-mix(in srgb, var(--canvas-fill) 52%, transparent)); -webkit-backdrop-filter: blur(2px) saturate(1.35); backdrop-filter: blur(2px) saturate(1.35); border: 1px solid rgb(255 255 255 / 0.8); box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.95), inset 0 -1px 1px rgb(10 25 49 / 0.14), inset 0 1.4rem 2.6rem -1.6rem rgb(255 255 255 / 0.85), inset 0 -2rem 3rem -2.4rem rgb(26 61 99 / 0.4), inset 1.2rem 0 2rem -1.8rem rgb(255 255 255 / 0.5), 0 2.2rem 4rem -2.2rem rgb(10 25 49 / 0.4), 0 0 0 1px color-mix(in srgb, var(--canvas-line) 22%, transparent); }
.deck::after { background: linear-gradient(118deg, transparent 18%, rgb(255 255 255 / 0.28) 30%, rgb(255 255 255 / 0.06) 40%, transparent 48%), radial-gradient(60% 40% at 20% 0%, rgb(255 255 255 / 0.45), transparent 70%); mix-blend-mode: screen; }
.display.fit-long { font-size: clamp(1.9rem, 6.2vw, 7.4rem); }
.gcard { position: absolute; left: calc(50% - var(--cw) * 0.5); top: calc(50% - var(--cw) * 0.6); width: var(--cw); aspect-ratio: 5 / 7; display: flex; flex-direction: column; gap: 0.4em; padding: 0.85em 0.85em 0.75em; border: 1px solid color-mix(in srgb, var(--gc-deep) 42%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--gc-paper) 74%, transparent); color: var(--gc-ink); font-size: clamp(0.62rem, calc(var(--cw) * 0.06), 0.9rem); text-decoration: none; transform-origin: 50% 125%;
  /* --sep: 0 = stacked (the backs peek out above), 1 = fanned; the hand opens on hover and as the page scrolls */
  --sep: clamp(0, calc(var(--hp, 0) * 1.6 + var(--hv, 0)), 1);
  transform: translateX(calc(var(--o) * var(--cw) * (0.05 + var(--sep) * (var(--spr, 0.62) + var(--spg, 0.24) * var(--hp, 0) - 0.05)))) translateY(calc(var(--cw) * (var(--sep) * var(--lift) * 0.07 - (1 - var(--sep)) * var(--d) * 0.13))) rotate(calc(var(--o) * (1.5deg + var(--sep) * (7.5deg + 5deg * var(--hp, 0)))));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.18), 0 1.4rem 2.6rem -1.4rem rgb(8 14 24 / 0.38); transition: transform 0.7s var(--ease), box-shadow 0.4s, background-color 0.4s; }
.gcard::before { content: ""; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--gc-gilt) 55%, transparent); border-radius: 10px; pointer-events: none; }
.deck:hover, .deck:focus-within { --hv: 1; }
.gc-i0 { --o: -1; --lift: 1; --d: 0; z-index: 3; } .gc-i1 { --o: 0; --lift: 0; --d: 1; z-index: 2; } .gc-i2 { --o: 1; --lift: 1; --d: 2; z-index: 1; }
.gcard:hover, .gcard:focus-visible { z-index: 5; background: color-mix(in srgb, var(--gc-paper) 88%, transparent); transform: translateX(calc(var(--o) * var(--cw) * (var(--spr, 0.62) + 0.04 + var(--spg, 0.24) * var(--hp, 0)))) translateY(calc(var(--cw) * -0.09)) rotate(calc(var(--o) * (4deg + 3deg * var(--hp, 0)))); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.2), 0 2rem 3.4rem -1.3rem rgb(8 14 24 / 0.5); }
.gcard:focus-visible { outline: 2px solid var(--gc-gilt); outline-offset: 3px; }
.gc-smp { --gc-deep: #1F4A3A; --gc-paper: #E6EDDF; --gc-ink: #16302C; --gc-gilt: #B8904A; }
.gc-grbc { --gc-deep: #7A2320; --gc-paper: #F4E4DC; --gc-ink: #3A1412; --gc-gilt: #C9A04A; }
.gc-eu { --gc-deep: #1D3557; --gc-paper: #E2E9F3; --gc-ink: #14223A; --gc-gilt: #C9A04A; }
.gc-top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); color: var(--gc-deep); }
.gc-top b { font-size: 1.05em; letter-spacing: 0.08em; }
.gc-top small { font-size: 0.62em; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; }
.gc-art { flex: 1 1 auto; min-height: 0; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 1px var(--gc-gilt); }
.gc-art svg, .card-art { display: block; width: 100%; height: 100%; }
.gc-name { font-family: var(--font-serif); font-weight: 600; font-size: 1.28em; line-height: 1.05; letter-spacing: -0.01em; color: var(--gc-deep); }
.gc-line { font-size: 0.74em; line-height: 1.3; opacity: 0.85; }
.gc-go { font-family: var(--font-mono); font-size: 0.62em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gc-deep); }
.gc-go i { font-style: normal; display: inline-block; transition: transform 0.3s var(--ease); }
.gcard:hover .gc-go i { transform: translateX(0.3em); }
.gc-acro-b { position: absolute; right: 0.9em; bottom: 0.6em; font-family: var(--font-mono); font-size: 0.66em; font-weight: 700; letter-spacing: 0.08em; color: var(--gc-deep); opacity: 0.55; transform: rotate(180deg); }
/* a format page's plate: the card's picture, large, in its frame */
.plate { border: 5px solid var(--gc-deep); border-radius: 18px; padding: 6px; background: var(--gc-paper); box-shadow: 0 1.6rem 3rem -1.6rem rgb(8 14 24 / 0.5); position: relative; aspect-ratio: 6 / 5; }
.plate::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--gc-gilt); border-radius: 12px; pointer-events: none; z-index: 1; }
.plate .card-art { border-radius: 10px; }
.format-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero-hint { position: absolute; left: 50%; bottom: var(--pad); transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); opacity: 0; animation: hint 1.4s var(--ease) 1.2s forwards; }

/* Marquee ----------------------------------------------------------------- */
.marquee { overflow: hidden; padding: 1.6rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; }
.marquee-track { display: inline-flex; animation: marquee 40s linear infinite; }
.marquee-track > span { display: inline-flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem; font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.4rem); text-transform: uppercase; letter-spacing: -0.02em; font-variation-settings: "wdth" 92; }
.marquee-track i { width: 0.5em; height: 0.5em; background: var(--hi); transform: rotate(45deg); border-radius: 2px; flex: none; }
.marquee-track .serif { text-transform: none; font-weight: 500; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Impact statement -------------------------------------------------------- */
.impact-text { font-size: var(--text-impact); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95; font-variation-settings: "wdth" 92, "opsz" 100; text-align: center; max-width: 24ch; margin-inline: auto; text-wrap: balance; }
.impact-text .ch { opacity: 0.08; transition: opacity 0.12s linear; }
.impact-text .ch.on { opacity: 1; }
.impact-text .cursor { display: inline-block; width: 0.55em; height: 0.82em; background: var(--hi); vertical-align: -0.08em; margin-left: 0.04em; }
.impact-text.done .cursor { animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.impact-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(3rem, 6vw, 5rem); }
.impact-list li { border-top: 1px solid var(--line); padding-top: 1rem; font-size: 0.98rem; color: var(--mute); }
.impact-list li b { display: block; color: var(--fg); font-family: var(--font-mono); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5rem; }
.impact-note { margin-top: 2.5rem; }

/* Horizontal track -------------------------------------------------------- */
.track { padding: 0; height: 420vh; }
.track-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: calc(var(--nav-h) + 0.25rem) 0 var(--pad); }
.track-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: 0 var(--pad); z-index: 2; position: relative; }
.track-head p { max-width: 38ch; margin: 0; }
.track-head .h2 { font-size: clamp(2rem, 4.6vw, 4.6rem); }
.track-rail { display: flex; gap: clamp(1rem, 2vw, 2rem); align-items: center; padding: 0 var(--pad); will-change: transform; flex: 1; min-height: 0; position: relative; z-index: 1; }
.track-rail > * { flex: none; }
.stage { width: clamp(17rem, 24vw, 22rem); border: 1px solid var(--card-line); border-radius: var(--radius-m); padding: 1.4rem 1.4rem 1.6rem; background: var(--card); min-height: min(23rem, 58vh); display: flex; flex-direction: column; }
.stage .eyebrow { margin-bottom: 1.5rem; }
.stage .h3 { margin-bottom: 1rem; }
.stage p { font-size: 0.95rem; color: var(--mute); margin: 0; }
.stage .when { margin-top: auto; padding-top: 1.2rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.stage .when b { color: var(--fg); }
.stage-num { font-family: var(--font-serif); font-weight: 600; font-variation-settings: "opsz" 144, "SOFT" 40; font-size: 3.4rem; line-height: 0.8; margin-bottom: 0.3rem; }
.stage.alt { background: var(--d-bg); color: var(--d-fg); border-color: var(--d-bg); --hi: var(--d-hi); }
.stage.alt p { color: var(--d-mute); }
.stage.alt .when b { color: var(--d-hi-2); }
.stage.alt .stage-num { color: var(--d-hi); }
.track-quote { width: clamp(16rem, 24vw, 26rem); padding: 0 1rem; }
.track-quote .sig { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.track-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 var(--pad); font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); position: relative; z-index: 1; }
.track-bar { flex: 1; height: 2px; background: var(--line); position: relative; }
.track-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--fg); }

/* Split: start here / full build ------------------------------------------ */
.split { padding: 0; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.half { position: relative; padding: calc(var(--nav-h) + 2rem) var(--pad) var(--pad); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.half + .half { border-left: 1px solid var(--line); }
.half .bleed { position: absolute; z-index: 0; pointer-events: none; opacity: 0.9; }
.half .bleed svg { width: 100%; height: 100%; }
.bleed-l { left: -22%; top: -8%; width: 78%; height: 72%; background: var(--contour); -webkit-mask: url("/assets/img/contours-blob.svg?v=a7349ef442") center / contain no-repeat; mask: url("/assets/img/contours-blob.svg?v=a7349ef442") center / contain no-repeat; }
.bleed-r { right: -18%; top: -6%; width: 70%; height: 76%; color: var(--fg); }
.bleed-r .fill { fill: var(--bg-2); }
.half .body { position: relative; z-index: 1; }
.half .display { font-size: clamp(3rem, 7vw, 7.5rem); margin-bottom: 1.5rem; }
.offer { border-top: 1px solid var(--line); }
.offer li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.offer li b { font-weight: 700; }
.offer li small { display: block; color: var(--mute); font-size: 0.85rem; margin-top: 0.15rem; }
.half .btn { margin-top: 1.5rem; }

/* Modules grid ------------------------------------------------------------ */
.mod-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: end; margin-bottom: clamp(2rem, 5vw, 4rem); }
.mod-head p { max-width: 42ch; color: var(--mute); margin: 0; }
.modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.module { position: relative; aspect-ratio: 1 / 1.05; border: 1px solid var(--card-line); border-radius: var(--radius-m); padding: 1.2rem; display: flex; flex-direction: column; background: var(--card); transition: border-color 0.5s var(--ease), transform 0.6s var(--ease); }
.module:nth-child(4n+2) { margin-top: 3rem; }
.module:nth-child(4n+4) { margin-top: 1.5rem; }
.module:hover { border-color: var(--hi); transform: translateY(-4px); }
.module .glyph { flex: 1; display: grid; place-items: center; transition: opacity 0.5s var(--ease); }
.module .glyph svg { width: 46%; height: auto; stroke: var(--fg); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.5s var(--ease), transform 0.7s var(--ease); }
.module:hover .glyph svg { stroke: var(--hi); transform: scale(1.06); }
.module .label { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.module .desc { position: absolute; inset: 1.2rem; font-size: 0.9rem; line-height: 1.4; opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; }
.module:hover .desc, .module:focus-within .desc { opacity: 1; }
.module:hover .glyph, .module:focus-within .glyph { opacity: 0.08; }
.module a.cover { position: absolute; inset: 0; border-radius: inherit; }

/* Formats (packages) ------------------------------------------------------- */
.formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.format { position: relative; border: 1px solid var(--card-line); border-radius: 1.25rem; padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--card); display: flex; flex-direction: column; gap: 1.2rem; overflow: hidden; }
.format .h3 { font-size: clamp(1.8rem, 3.4vw, 3rem); }
.format .acro { font-family: var(--font-serif); font-weight: 600; font-variation-settings: "opsz" 144, "SOFT" 40; font-size: clamp(3.5rem, 7vw, 6.5rem); line-height: 0.8; color: var(--hi); }
.format ul { border-top: 1px solid var(--line); }
.format li { padding: 0.75rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; font-size: 0.95rem; }
.format li b { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 0.2rem; font-weight: 600; }
.format .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.format .foot .price { font-size: 1rem; }
.format[data-palette] { background: var(--d-card); color: var(--d-fg); border-color: var(--d-card-line); --fg: var(--d-fg); --mute: var(--d-mute); --line: var(--d-line); --hi: var(--d-hi); --btn: var(--d-btn); --btn-fg: var(--d-btn-fg); --card-line: var(--d-card-line); }
.format-art { margin: calc(-1 * clamp(1.4rem, 3vw, 2.4rem)) calc(-1 * clamp(1.4rem, 3vw, 2.4rem)) 0; aspect-ratio: 12 / 5; overflow: hidden; border-bottom: 1px solid var(--line); }

/* Horizon Watch ------------------------------------------------------------ */
.watch { position: relative; border-left: 1px solid var(--line); margin-left: 0.4rem; }
.watch-item { position: relative; display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem; padding: 1.2rem 0 1.4rem 1.6rem; border-bottom: 1px solid var(--line); }
.watch-item::before { content: ""; position: absolute; left: -0.36rem; top: 1.55rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--mute); }
.watch-item.is-next::before { background: var(--hi); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hi) 30%, transparent); }
.watch-item.is-past { opacity: 0.62; }
.watch-item.is-past::before { background: var(--mute); }
.watch-date { margin: 0; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; }
.watch-flag, .watch-now { display: inline-block; margin-top: 0.35rem; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.2em 0.6em; border-radius: var(--radius-l); box-shadow: 0 0 0 1px currentColor; }
.watch-kind { margin: 0 0 0.35rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.watch-title { font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-variation-settings: "wdth" 92; margin-bottom: 0.5rem; line-height: 1.05; }
.watch-body p { margin: 0 0 0.5rem; font-size: 0.95rem; max-width: 70ch; }
.watch-src { font-size: 0.8rem !important; color: var(--mute); }
.watch-today { position: relative; padding: 0.6rem 0 0.6rem 1.6rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hi-2); border-bottom: 1px dashed var(--hi-2); }
.watch-today::before { content: ""; position: absolute; left: -0.45rem; top: 50%; width: 0.9rem; height: 2px; background: var(--hi-2); }

/* Knowledge: the library ------------------------------------------------------ */
.library { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.shelf { display: grid; grid-template-columns: minmax(12rem, 3fr) minmax(0, 9fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: end; position: relative; }
.shelf-plate { align-self: end; padding-bottom: 1.2rem; }
.shelf-span { margin: 0 0 0.5rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hi-2); }
.shelf-plate h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; font-variation-settings: "wdth" 92; line-height: 1; margin-bottom: 0.6rem; }
.shelf-note { font-size: 0.9rem; color: var(--mute); margin: 0; }
.books { display: flex; align-items: flex-end; gap: 3px; min-height: 17rem; padding: 2.2rem 0 0; position: relative; flex-wrap: nowrap; }
.shelf-board { position: absolute; left: calc(25% + 1rem); right: 0; bottom: -1rem; height: 1rem; border-radius: 2px; background: linear-gradient(#7A4E2E, #5C3B24 40%, #3A2418); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 220, 170, 0.25); }
.books { display: flex; align-items: flex-end; gap: 3px; margin: 0; padding: 0 0 0 0.3rem; list-style: none; min-height: 17rem; position: relative; }
.books::after { content: ""; flex: none; width: 1.1rem; height: 7.5rem; margin-left: 0.6rem; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #9F6932, #D9B45A 45%, #7A4E2E); box-shadow: 4px 0 8px rgba(0, 0, 0, 0.35); } /* a brass bookend */
.book { position: relative; flex: none; }
.bw-1 .spine { width: 2.6rem; } .bw-2 .spine { width: 3.1rem; } .bw-3 .spine { width: 3.6rem; } .bw-4 .spine { width: 4.3rem; }
.bh-1 .spine { height: 13.5rem; } .bh-2 .spine { height: 15rem; } .bh-3 .spine { height: 16.5rem; }
.tone-0 { --spine: #5A2A26; } .tone-1 { --spine: #2A374D; } .tone-2 { --spine: #3F4A3C; } .tone-3 { --spine: #6B4630; } .tone-4 { --spine: #3B2A3A; } .tone-5 { --spine: #2F3D33; }
.spine { display: grid; grid-template-rows: 0 minmax(0, 1fr) auto; justify-items: center; align-items: center; border: 0; margin: 0; padding: 1.75rem 0 0.45rem; cursor: var(--hand); border-radius: 3px 3px 1px 1px; color: #EFE6D6; position: relative; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  /* leather: darker at the edges, a soft light down the middle */
  background: linear-gradient(90deg, color-mix(in srgb, var(--spine) 62%, #000) 0%, var(--spine) 18%, color-mix(in srgb, var(--spine) 86%, #fff) 46%, var(--spine) 70%, color-mix(in srgb, var(--spine) 55%, #000) 100%);
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.35); }
/* raised bands, gilt */
.spine::before, .spine::after { content: ""; position: absolute; left: 0; right: 0; height: 0.95rem; background: linear-gradient(transparent 0 30%, rgba(0, 0, 0, 0.3) 30% 38%, rgba(217, 180, 90, 0.8) 38% 46%, transparent 46% 54%, rgba(217, 180, 90, 0.8) 54% 62%, rgba(0, 0, 0, 0.3) 62% 70%, transparent 70%); }
.spine::before { top: 0.5rem; } .spine::after { bottom: 1.9rem; }
/* the title label: a darker panel set into the leather, the short title in gilt */
.spine-title { grid-row: 2; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-serif); font-weight: 600; font-variation-settings: "opsz" 24, "SOFT" 30; font-size: 0.84rem; line-height: 1.1; letter-spacing: 0.02em; color: #E9D2A6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%; font-size: 0.8rem;
  padding: 0.55rem 0.18rem; border-radius: 2px; background: color-mix(in srgb, var(--spine) 55%, #000); box-shadow: inset 0 0 0 1px rgba(217, 180, 90, 0.55); }
.spine-year { grid-row: 3; padding-top: 1.55rem; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.05em; color: #D9B45A; }
.book:hover .spine, .spine:focus-visible, .book.is-open .spine { transform: translateY(-1.1rem); box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.22), 0 14px 22px rgba(0, 0, 0, 0.35); }
.spine:focus-visible { outline: 2px solid #BF9B74; outline-offset: 2px; }
.book-card { position: absolute; bottom: calc(100% + 1.4rem); left: 50%; width: min(22rem, 80vw); transform: translate(-50%, 0.5rem); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.45s var(--ease); z-index: 5; padding: 1rem 1.1rem; border-radius: 0.7rem; background: #EFE6D6; color: #1D1617; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.book:first-child .book-card, .book:nth-child(2) .book-card { left: 0; transform: translate(0, 0.5rem); }
.book:hover .book-card, .book:focus-within .book-card, .book.is-open .book-card { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.book:first-child:hover .book-card, .book:first-child:focus-within .book-card, .book:first-child.is-open .book-card,
.book:nth-child(2):hover .book-card, .book:nth-child(2):focus-within .book-card, .book:nth-child(2).is-open .book-card { transform: translate(0, 0); }
.book:last-child .book-card, .book:nth-last-child(2) .book-card { left: auto; right: 0; transform: translate(0, 0.5rem); }
.book:last-child:hover .book-card, .book:last-child:focus-within .book-card, .book:last-child.is-open .book-card,
.book:nth-last-child(2):hover .book-card, .book:nth-last-child(2):focus-within .book-card, .book:nth-last-child(2).is-open .book-card { transform: translate(0, 0); }
.book-meta { margin: 0 0 0.35rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #522623; }
.book-title { margin: 0 0 0.35rem; font-family: var(--font-serif); font-weight: 600; font-variation-settings: "opsz" 36, "SOFT" 40; font-size: 1.02rem; line-height: 1.2; }
.book-venue { margin: 0 0 0.5rem; font-size: 0.82rem; color: #5C5450; }
.book-with { margin: 0 0 0.5rem; font-size: 0.8rem; font-style: italic; color: #5C5450; }
.book-status { margin: 0 0 0.5rem; font-size: 0.75rem; font-family: var(--font-mono); letter-spacing: 0.04em; color: #522623; }
.book-link { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 0.2em; color: #522623; word-break: break-all; }
.book-link.none { text-decoration: none; color: #5C5450; }
.profiles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.profiles a { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 0.6rem 0.95rem; border-radius: var(--radius-l); box-shadow: 0 0 0 1px var(--line); transition: box-shadow 0.3s; }
.profiles a:hover { box-shadow: 0 0 0 1px currentColor; }

/* Marginalia (science watch) --------------------------------------------------- */
.marginalia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 4vw, 4rem); }
.margin-note { border-top: 1px solid var(--line); padding: 1.3rem 0 1.5rem; }
.mn-tag { margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hi-2); }
.mn-ref { margin: 0 0 0.6rem; font-size: 0.92rem; }
.mn-ref cite { font-style: normal; font-family: var(--font-serif); font-weight: 600; font-variation-settings: "opsz" 36, "SOFT" 40; font-size: 1.05rem; }
.mn-note { margin: 0; font-family: var(--font-serif); font-variation-settings: "opsz" 24, "SOFT" 60, "WONK" 1; font-size: 1rem; color: var(--mute); padding-left: 1rem; border-left: 2px solid var(--hi); }

/* Research ------------------------------------------------------------------ */
.programme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); counter-reset: none; }
.programme article { border-top: 2px solid var(--hi); padding-top: 1.2rem; }
.programme .label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hi-2); margin: 0 0 0.8rem; }
.programme h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; font-variation-settings: "wdth" 92; margin-bottom: 0.9rem; line-height: 1; }
.programme p { color: var(--mute); font-size: 0.98rem; }
.methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.method { border: 1px solid var(--card-line); border-radius: var(--radius-m); padding: 1.3rem; background: var(--card); display: flex; flex-direction: column; gap: 0.8rem; }
.method .acro { font-family: var(--font-serif); font-weight: 600; font-variation-settings: "opsz" 144, "SOFT" 40; font-size: 2.8rem; line-height: 0.85; color: var(--hi); }
.method h3 { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-variation-settings: "wdth" 92; }
.method p { font-size: 0.92rem; color: var(--mute); margin: 0; }
.method .who { margin-top: auto; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hi-2); }
.branches { margin: 0; }
.branches svg { width: 100%; height: auto; overflow: visible; }
.branches figcaption { margin-top: 1rem; font-size: 0.85rem; color: var(--mute); max-width: 70ch; }
.br-grid { stroke: var(--line); stroke-width: 1; }
.br-year { fill: var(--mute); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }
.br-line { fill: none; stroke-width: 2; stroke-linecap: round; }
.br-fork { fill: var(--bg); stroke: #C18D52; stroke-width: 2; }
.br-node { stroke: var(--bg); stroke-width: 2; transition: r 0.3s var(--ease); cursor: var(--hand); }
.br-node-link:hover .br-node, .br-node-link:focus-visible .br-node { stroke: var(--fg); }
.br-label { fill: var(--fg); font-family: var(--font-sans); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: -0.01em; }
.br-span { fill: var(--mute); font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.08em; }
.br-now { stroke: #C18D52; stroke-width: 1.5; stroke-dasharray: 4 4; }
.br-now-t { fill: #C18D52; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; }
.now-list { border-top: 1px solid var(--line); }
.now-list li { display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem; padding: 1.2rem 0 1.3rem; border-bottom: 1px solid var(--line); }
.now-list .state { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--hi-2); padding-top: 0.2rem; }
.now-list h3 { font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-variation-settings: "wdth" 92; margin-bottom: 0.4rem; line-height: 1.05; }
.now-list p { margin: 0; color: var(--mute); font-size: 0.95rem; }

/* Case -------------------------------------------------------------------- */
.case-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.facts { border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.facts li b { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 0.25rem; }
.chart { border: 1px solid var(--card-line); border-radius: var(--radius-m); padding: 1.4rem; background: var(--card); }
.chart h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.2rem; }
.bars { display: grid; gap: 0.6rem; }
.bar { display: grid; grid-template-columns: 3.2rem 1fr 3rem; gap: 0.8rem; align-items: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; }
.bar i { display: block; height: 1.6rem; background: var(--fg); width: 0; transition: width 1.2s var(--ease); border-radius: 2px; }
.bar.after i { background: var(--bg-2); border: 1px solid var(--fg); }
.in .bar i { width: var(--w); }
.bar em { font-style: normal; text-align: right; font-weight: 700; }
.chart .note { margin: 1rem 0 0; font-size: 0.85rem; color: var(--mute); }

/* Tables ------------------------------------------------------------------ */
.tbl { width: 100%; border-collapse: collapse; margin: 0 0 3rem; font-size: 0.95rem; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 0.9rem 1rem 0.9rem 0; border-bottom: 1px solid var(--line); }
.tbl th { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--mute); }
.tbl td:first-child { font-weight: 700; width: 24%; }
.tbl td:last-child { white-space: nowrap; }

/* Terms, prose, pills ------------------------------------------------------- */
.terms { display: grid; border-top: 1px solid var(--line); }
.terms li { padding: 1rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.8rem; font-size: 0.98rem; color: var(--mute); }
.terms li::before { content: ""; width: 0.55em; height: 0.55em; margin-top: 0.45em; background: var(--hi); transform: rotate(45deg); border-radius: 1px; }
.terms li b { color: var(--fg); }
.who { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.page-head { padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 5rem)); }
.page-head .display { font-size: clamp(3rem, 8vw, 8.5rem); }
.page-head .lead { margin-top: 1.5rem; max-width: 46ch; }
.prose h2 { font-size: var(--text-h3); text-transform: uppercase; letter-spacing: -0.025em; margin: 2.5rem 0 1rem; font-variation-settings: "wdth" 92; }
.prose h2:first-child { margin-top: 0; }
.prose ul li { position: relative; padding-left: 1.3rem; margin-bottom: 0.5rem; max-width: 62ch; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5em; height: 0.5em; background: var(--hi); transform: rotate(45deg); border-radius: 1px; }
.pill { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid currentColor; border-radius: var(--radius-l); padding: 0.35em 0.9em; }
.draft { display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3em 0.75em; border-radius: var(--radius-l); background: var(--hi); color: var(--bg); vertical-align: middle; }

/* Footer ------------------------------------------------------------------ */
.footer { padding: 0; overflow: hidden; }
.footer-glow { position: absolute; left: 0; right: 0; top: 0; height: 60vh; background: var(--glow); pointer-events: none; z-index: 0; }
.footer-inner { position: relative; z-index: 1; padding: clamp(5rem, 12vw, 10rem) var(--pad) var(--pad); }
.footer-mark { width: 4.2rem; height: 4.2rem; margin: 0 auto 2rem; }
.footer-statement { text-align: center; margin: 0 auto clamp(3rem, 7vw, 6rem); }
.footer-statement .display { font-size: clamp(2.4rem, 6.8vw, 7.5rem); }
.footer-statement .fs { display: none; }
body:not([data-space]) .fs-house, [data-space="house"] .fs-house, [data-space="ai"] .fs-house, [data-space="innovation"] .fs-innovation, [data-space="knowledge"] .fs-knowledge, [data-space="research"] .fs-research { display: block; }
.footer-note { margin: 1.5rem auto 0; max-width: 36ch; text-align: center; color: var(--mute); }
.footer-cta { text-align: center; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; align-items: start; margin-top: clamp(3rem, 7vw, 6rem); }
.footer-cols .eyebrow { margin-bottom: 1rem; color: var(--mute); }
.footer-cols ul { display: grid; gap: 0.25rem; }
.footer-cols a { font-weight: 800; text-transform: uppercase; font-size: clamp(1.05rem, 1.5vw, 1.4rem); letter-spacing: -0.02em; font-variation-settings: "wdth" 92; }
.footer-cols a:hover { color: var(--hi-2); }
.footer-legal { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.2rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.footer-legal a:hover { color: var(--fg); }

/* Utilities ----------------------------------------------------------------- */
.pt0 { padding-top: 0; }
.pt-section { padding-top: clamp(4rem, 9vw, 8rem); }
.mt-half { margin-top: 0.8rem; margin-bottom: 0; }
.mt-1 { margin-top: 1rem; } .mt-15 { margin-top: 1.5rem; } .mt-2 { margin-top: 2rem; } .mt-xl { margin-top: clamp(3rem, 7vw, 6rem); }
.center { margin-inline: auto; text-align: center; }
.center-flex { display: flex; justify-content: center; }
.narrow { max-width: 60ch; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1100px) {
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module:nth-child(4n+2), .module:nth-child(4n+4) { margin-top: 0; }
  .module:nth-child(2n) { margin-top: 2.5rem; }
  .impact-list { grid-template-columns: 1fr; gap: 0.5rem; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf { grid-template-columns: 1fr; }
  .books { overflow-x: auto; overflow-y: visible; padding-bottom: 1rem; scrollbar-width: thin; }
  /* the row scrolls sideways, so it clips what rises above it: here the tapped book's card is a panel at the foot of the
     screen instead (only the tapped one; a lingering hover or focus does not open it) */
  .library .books .book .book-card { position: fixed; left: 50%; right: auto; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); width: min(26rem, calc(100vw - 2rem)); transform: translate(-50%, 1rem); z-index: 60; max-height: 60vh; overflow-y: auto; }
  .library .books .book:is(:hover, :focus-within):not(.is-open) .book-card { opacity: 0; pointer-events: none; }
  .library .books .book.is-open .book-card { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
}
@media (max-width: 860px) {
  :root { --nav-h: 4.5rem; }
  .brand-spaces { left: 0; top: 100%; transform: none; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 0.5rem 0 0; }
  .brand-spaces a { height: 2.7rem; font-size: 0.7rem; }
  .nav .btn .pill-text { display: none; }
  .grid-2, .case-grid, .who, .mod-head, .section-title, .formats, .programme, .marginalia { grid-template-columns: 1fr; }
  .menu-inner { grid-template-columns: 1fr; align-content: start; gap: 1.5rem; }
  .menu-spaces { max-height: 11rem; }
  .menu-foot { position: static; margin-top: 1rem; }
  .split-grid { grid-template-columns: 1fr; }
  .half + .half { border-left: 0; border-top: 1px solid var(--line); }
  .half { min-height: 80vh; }
  .track { height: auto; padding: clamp(4rem, 9vw, 8rem) 0; }
  .track-sticky { position: static; height: auto; overflow: visible; padding: 0; }
  .track-head { flex-direction: column; margin-bottom: 2rem; }
  .track-rail { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; -webkit-overflow-scrolling: touch; transform: none !important; }
  .track-rail > * { scroll-snap-align: start; }
  .track-foot { margin-top: 1rem; }
  .hero-hint { display: none; }
  .hero:has(.deck) { height: auto; }
  .hero:has(.deck) .hero-sticky { position: static; height: auto; min-height: 100svh; }
  .hero:has(.deck) .hero-frame { grid-template-rows: auto auto auto; align-content: start; gap: 1rem; }
  .deck { position: relative; left: auto; top: auto; margin: 0.5rem auto 0; width: min(100%, calc(var(--cw) * 3.15)); height: calc(var(--cw) * 2.08); --cw: min(8.4rem, 27vw); --spr: 0.52; --spg: 0; }
  .gc-line { display: none; }
  .format-head { grid-template-columns: 1fr; }
  .facts li, .watch-item, .now-list li { grid-template-columns: 1fr; gap: 0.3rem; }
  .footer-cols { grid-template-columns: 1fr; }
  .hero-title { max-width: none; }
  .tbl td:first-child { width: auto; }
  .tbl td:last-child { white-space: normal; }
  .hub-foot { flex-direction: column; align-items: stretch; }
  .ticker { width: 100%; height: 1.55rem; font-size: 0.58rem; }
  .tk-tag { padding: 0 0.6em; }
  .hub-meta { text-align: left; }
  .panel, .space-hero { grid-template-columns: 1fr; }
  .panel { position: relative; min-height: auto; padding-top: calc(var(--nav-h) + 1rem); border-radius: 0; }
  .panel .glyph { height: 38vh; }
  .space-hero .glyph { height: 34vh; order: -1; justify-self: start; }
  .format li { grid-template-columns: 1fr; gap: 0.2rem; }
}
@media (max-width: 560px) {
  .modules, .methods { grid-template-columns: 1fr; }
  .module:nth-child(2n) { margin-top: 0; }
  .module { aspect-ratio: auto; min-height: 14rem; }
  .bar { grid-template-columns: 2.6rem 1fr 2.6rem; }
  .scroll-ind { display: none; }
  .menu-spaces { max-height: 8.5rem; gap: 0.5rem; }
  .menu-space { padding: 0.6rem; }
  .menu-space .label span:last-child { display: none; }
}

/* Without JavaScript nothing is hidden. */
.no-js [data-reveal] { opacity: 1; transform: none; }
.no-js .lines .line > span { transform: none; }
.no-js .impact-text .ch { opacity: 1; }
.no-js .bar i { width: var(--w, 0); }
.no-js .hero, .no-js .track { height: auto; }
.no-js .track-sticky { position: static; height: auto; }
.no-js .track-rail { overflow-x: auto; }

/* Motion preferences ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hub-outlines .hx { opacity: 0.3; } .hub-outlines .hx-i * { animation: none !important; stroke-dasharray: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .marquee-track { animation: none; }
  .lines .line > span, [data-reveal] { transform: none !important; opacity: 1 !important; }
  .impact-text .ch { opacity: 1; }
  .bar i { width: var(--w); }
  .hero, .track { height: auto; }
  .track-sticky { position: static; height: auto; }
  .track-rail { overflow-x: auto; transform: none !important; }
  .panel { position: relative; }
}

.arrive-veil { display: none; position: fixed; inset: 0; z-index: 400; pointer-events: none; background: var(--arrive-bg, #191E2A); }
#arrive:target { display: block; animation: veil-out 0.9s var(--ease) 0.1s both; }
@keyframes veil-out { to { opacity: 0; visibility: hidden; } }
[data-space="innovation"] { --arrive-bg: #F6FAFD; } [data-space="knowledge"] { --arrive-bg: #1D1617; } [data-space="research"] { --arrive-bg: #0E2624; } [data-space="ai"] { --arrive-bg: #0B1A40; }
@media (prefers-reduced-motion: reduce) { #arrive:target { display: none; } }
/* Scene layers are pictures (assets/scenes, rendered by npm run scenes); a layer with grain is the picture plus its rings,
   each a tile of specks masked to the ring (geometry in viewBox units from data-g, mapped with --vb, set once by main.js) */
.sc-img { position: absolute; display: block; max-width: none; left: calc(50% + (var(--bx, 0) - 800 + var(--mx, 0)) * var(--vb)); top: calc(50% + (var(--by, 0) - 500) * var(--vb)); width: calc(var(--bw, 1600) * var(--vb)); height: calc(var(--bh, 1000) * var(--vb)); }
.grain { position: absolute; left: calc(50% + (var(--cx) - var(--r) - 800 + var(--mx, 0)) * var(--vb)); top: calc(50% + (var(--cy) - var(--ry) - 500) * var(--vb)); width: calc(2 * var(--r) * var(--vb)); height: calc(2 * var(--ry) * var(--vb)); background-size: calc(180 * var(--vb)) calc(180 * var(--vb)); }
/* fetched only once their scene is (main.js sets data-loaded) */
.scene:not([data-loaded]) .grain { background-image: none; }
.g-l { background-image: url(/assets/img/grain-l.png?v=5d29370f6f); -webkit-mask-image: radial-gradient(closest-side, transparent calc(var(--core) * 100%), rgba(0, 0, 0, var(--amt)) calc(var(--peak) * 100%), transparent 100%); mask-image: radial-gradient(closest-side, transparent calc(var(--core) * 100%), rgba(0, 0, 0, var(--amt)) calc(var(--peak) * 100%), transparent 100%); }
.g-d { background-image: url(/assets/img/grain-d.png?v=939b4d9087); -webkit-mask-image: radial-gradient(closest-side, rgba(0, 0, 0, calc(var(--amt) * 0.5)) 0, transparent calc(var(--core) * 140%)); mask-image: radial-gradient(closest-side, rgba(0, 0, 0, calc(var(--amt) * 0.5)) 0, transparent calc(var(--core) * 140%)); }
/* the Artificial Immanence page: its plate in the research palette, the numbered questions */
.gc-res { --gc-deep: #0E2624; --gc-paper: #E8EDE2; --gc-gilt: #C18D52; }
.questions { list-style: none; margin: 0; padding: 0; counter-reset: q; border-top: 1px solid var(--line); }
.questions li { counter-increment: q; display: grid; grid-template-columns: 3.4rem 1fr; grid-template-rows: auto auto; column-gap: 1.2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.questions li::before { content: counter(q, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--font-serif); font-size: 2rem; line-height: 1; color: var(--hi); }
.questions b { font-size: 1.15rem; font-weight: 600; }
.questions span { color: var(--mute); margin-top: 0.3rem; }
.writings li span .mute { font-size: 0.85em; }
.label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hi); margin: 0 0 0.8rem; }
/* the Lex Robotica illustration as the plate of the arc */
.plate-sq { aspect-ratio: 1 / 1; }
.lex-art { object-fit: cover; object-position: 50% 0; border-radius: 10px; }
.lex-fig { margin: 0; }
.lex-fig figcaption { margin-top: 0.8rem; }
.arc-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
@media (max-width: 860px) { .arc-grid { grid-template-columns: 1fr; } }
/* the way back: beneath the mark on every page but the home page, shown on arrival, after a scroll, and on hover */
.back-home { position: absolute; left: 0; top: calc(100% + 0.35rem); display: inline-flex; align-items: center; gap: 0.4rem; height: 2rem; padding: 0 0.7rem 0 0.5rem; border-radius: var(--radius-l); background: var(--bg); box-shadow: 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: inherit; text-decoration: none; opacity: 0; visibility: hidden; transform: translateY(-0.3rem); transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s 0.3s; }
.back-home svg { width: 0.9rem; height: 0.9rem; }
.brand.show-back .back-home, .brand:hover .back-home, .brand:focus-within .back-home { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.brand.open .back-home { display: none; }
/* the reveal: a button at the foot of the hub that lifts the whole cover, the three spaces and their objects in motion beneath */
.hub-reveal { pointer-events: auto; display: inline-flex; align-items: center; gap: 0.5rem; height: 2.6rem; padding: 0 1rem 0 0.75rem; margin-top: 0.6rem; border: 0; border-radius: var(--radius-l); background: var(--bg); color: inherit; box-shadow: 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: var(--hand); transition: box-shadow 0.3s, background-color 0.3s, color 0.3s; }
.hub-reveal svg { width: 1.1rem; height: 1.1rem; }
/* 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(236, 170, 66, 0.65), inset 0 0 0 1.5px rgba(236, 170, 66, 0.95); opacity: 0; pointer-events: none; }
.hub-hero: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-hero:not(.revealed) .hub-reveal::after { animation: none; opacity: 0.85; } }
.hub-reveal:hover, .hub-reveal[aria-pressed="true"] { box-shadow: 0 0 0 1px currentColor; }
.hub-reveal:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.hub-foot > .hub-meta-wrap { display: grid; justify-items: end; }
.hub-hero.revealed .lens { transition: none; }
.hub-hero.revealed :is(.lens-rim, .inkfield) { display: none; }
.hub-hero.revealed .lens .rv { pointer-events: auto; cursor: var(--hand); }
/* the machine under the Research stage: the boom's two links turn about their pivots (nested), the ropes are drawn live */

/* The art page: the mark on paper and on ink, the palettes as swatches, the objects, the pictures to open or download */
.art-marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.art-mark-box { margin: 0; display: grid; place-items: center; gap: 1rem; padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radius-l); background: var(--l-bg-2); color: var(--l-fg); }
.art-mark-d { background: var(--d-bg); color: var(--d-fg); }
.art-mark-box .art-mark { width: min(220px, 60%); height: auto; }
.art-mark-box figcaption, .art-obj figcaption { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.art-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.pals { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.pal h3 { margin: 0 0 0.8rem; font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.pal-row { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 0.8rem; }
.pal-side { margin: 0.6rem 0 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.6rem; }
.swatch { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.6rem; align-items: center; }
.swatch svg { width: 2.5rem; height: 2.5rem; }
.swatch span { display: grid; min-width: 0; } .swatch b { font-size: 0.8rem; } .swatch code { font-family: var(--font-mono); font-size: 0.66rem; color: var(--mute); overflow-wrap: anywhere; }
.art-objs { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--gap); }
.art-obj { margin: 0; display: grid; gap: 0.7rem; }
.art-obj-in { aspect-ratio: 1; display: grid; place-items: center; padding: 1.6rem 2.2rem; border-radius: var(--radius-l); background: var(--l-card); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.art-obj-in .glyph { overflow: hidden; }
.art-obj-in svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; }
.art-h { margin: 2.4rem 0 1rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.art-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--gap); }
.art-item { display: grid; gap: 0.6rem; }
.art-pic { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-m, 10px); overflow: hidden; background: #191E2A; box-shadow: 0 0 0 1px var(--line); }
.art-pic img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.6s var(--ease); }
.art-pic:hover img { transform: scale(1.03); }
.art-item p { margin: 0; display: grid; gap: 0.15rem; font-size: 0.85rem; }
.art-item p span { font-family: var(--font-mono); font-size: 0.68rem; color: var(--mute); }
.art-dl { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.3em; }
@media (max-width: 720px) { .art-marks { grid-template-columns: 1fr; } .pal-row { grid-template-columns: 1fr; gap: 0.3rem; } }

/* Consent (consent.js): the question about Google Analytics, a small card at the foot of the screen, its two answers
   alike; and "Cookie settings" in the footer, 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: #F5F4F0; color: #191E2A; box-shadow: 0 0 0 1px rgba(25, 30, 42, 0.14), 0 18px 40px rgba(0, 0, 0, 0.28); font-size: 0.84rem; 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: #191E2A; color: #F5F4F0; font: 600 0.68rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: var(--hand); }
.consent-b button:focus-visible { outline: 2px solid #191E2A; 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); }