/* Geist and Geist Mono (SIL OFL 1.1), served from /fonts/; fetched by fetch_fonts.py */
/* Geist, cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/geist-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geist, cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/geist-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist, vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/geist-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Geist, latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist, latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist Mono, cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geist Mono, cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist Mono, symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-symbols2.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* Geist Mono, vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Geist Mono, latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist Mono, latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Skywake Pixel Serif"; src: url("/fonts/skywake-pixel-serif.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Skywake Pixel Mono"; src: url("/fonts/skywake-pixel-mono.woff2") format("woff2"); font-display: block; }
/* skywakelabs.com, built from the signed-off mock (design/homepage-mock/). One pinned film stage inside a scroll
   container; the film scrubs from the first scroll and only the hero sits on it. How we work rises over the finished
   screen, then What we do and What we believe share one card. Light by default, with a dark mode in black. */
:root {
  color-scheme: light;
  --body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --px-serif: "Skywake Pixel Serif", Georgia, serif;
  --px-mono: "Skywake Pixel Mono", "Geist Mono", ui-monospace, monospace;
}
/* Palette: Bonsai (the operator's pick, 2026-10-24): pine ink, fresh leaf, bark */
:root {
  --paper: #f1f0e7;
  --paper-2: #e3e4d5;
  --card: #fbfbf6;
  --ink: #14261c;
  --ink-2: #44554a;
  --ink-3: #7f8b7c;
  --line: rgba(20, 38, 28, 0.12);
  --line-2: rgba(20, 38, 28, 0.22);
  --accent: #bfd66b;
  --on-accent: #14261c;
  --accent-2: #2f6b3d;
  --live: #b8662b;
  --halo: rgba(247, 247, 240, 0.9);
  --halo-2: rgba(247, 247, 240, 0.5);
  --shade: #14261c;  /* shadows, mixed thin */
  --w-shadow: 0 24px 60px rgba(40, 36, 20, 0.1), 0 2px 6px rgba(40, 36, 20, 0.05);
  --glass-hi: rgba(255, 255, 255, 0.8);  /* the frosted header's top edge */
  --frost-b: 1.18;
  --film-ink: #14261c;  /* the glyphs of the ASCII ink film and page images */
}
/* Dark (the operator, 2026-10-25): black, not green. It follows the system setting, or the visitor's pick from the header.
   Neutral black and greys; paper stays the ink and leaf the highlight; green and bark are lifted (OKLCH lightness, same
   hue) so they read on black. Contrast on the ground: text 17:1, muted 9.5:1 and 5.6:1, green 8.3:1, bark 6.6:1. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0b0b;
  --paper-2: #050505;
  --card: #171717;
  --ink: #f1f0e7;
  --ink-2: #b5b4ad;
  --ink-3: #8a8983;
  --line: rgba(241, 240, 231, 0.12);
  --line-2: rgba(241, 240, 231, 0.22);
  --accent: #bfd66b;
  --on-accent: #14261c;
  --accent-2: #77b682;
  --live: #d58047;
  --halo: rgba(11, 11, 11, 0.9);
  --halo-2: rgba(11, 11, 11, 0.5);
  --shade: #000;
  --w-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --glass-hi: rgba(241, 240, 231, 0.08);
  --frost-b: 0.9;
  --film-ink: #8f8e88;  /* a neutral grey, dimmer than the text, so the words stand clear of the picture */
}
/* Each logo comes in its kit's light and dark versions; the page shows the one for the theme */
:root[data-theme="dark"] .lg-light, :root:not([data-theme="dark"]) .lg-dark { display: none; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); overflow: hidden; font-family: var(--body); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; }

/* ---------- the page: a fixed frame with its own scroller, so the film can pin and scrub ---------- */
.app { position: fixed; inset: 0; color: var(--ink); }
.scroller { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; container: site / size; background: var(--paper); outline: none; }

/* ---------- the film stage ---------- */
.film { position: relative; z-index: 1; height: 520cqh; }  /* the landscape timeline's end + 1 screen, so How we work sits below it before the script sets the exact height (QA: it covered the screen, then jumped) */
.stage { position: sticky; top: 0; height: 100cqh; overflow: hidden; background: var(--paper); }
#cv, #gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#gl { display: none; }
/* At rest at the top the header is clear, so the film's top edge fades to paper under it (the logo kit allows no effects
   on the mark itself). The fade goes as the page moves and the frosted header takes over. */
.stage::after { content: ""; position: absolute; inset: 0 0 auto; z-index: 4; height: 120px; pointer-events: none; opacity: var(--scrim, 1); background: linear-gradient(to bottom, var(--card) 0%, color-mix(in srgb, var(--card) 88%, transparent) 45%, transparent 100%); }
/* The way out: the screen glows up (screen blend, so dark goes light with no grey), then settles on paper */

/* ---------- copy, straight on the film ---------- */
.beat {
  position: absolute; z-index: 5;
  display: flex; flex-direction: column; gap: 16px;
  color: var(--ink);
  text-shadow: 0 0 1px var(--halo), 0 0 6px var(--halo), 0 0 16px var(--halo), 0 0 34px var(--halo-2);
  opacity: var(--o, 0); visibility: hidden;
}
.beat.vis { visibility: visible; }
.beat > * { margin: 0; }
/* The hero sits in the open sky between the trunk and the cabinet (frame x 470-845); JS maps that gap onto the window */
.beat[data-zone="sky"] { left: var(--hx, 24cqw); top: 60%; width: var(--hw, 20cqw); transform: translateY(calc(-50% + var(--dy, 0px))); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 12px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); }
.eyebrow::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.hero-h { font-weight: 400; font-size: clamp(28px, calc(var(--hw, 360px) / 8.6), 60px); line-height: 1.08; letter-spacing: -0.04em; text-wrap: balance; }
.px { font-family: var(--px-serif); font-weight: 400; letter-spacing: -0.01em; }
mark.px { background: var(--accent); color: var(--on-accent); padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-size: 1.04em; text-shadow: none; }
.sub { font-size: clamp(16px, 1.15cqw, 19px); line-height: 1.55; }
.sub { color: var(--ink-2); }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; text-shadow: none; }
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px 0 16px; border-radius: 6px; font: 500 15px/1 var(--body); text-decoration: none; }
.btn i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; }
.btn i svg { width: 12px; height: 12px; }
.btn-a { background: var(--ink); color: var(--paper); }
.btn-a i { background: var(--accent); color: var(--on-accent); }
.btn-b { color: var(--ink); background: var(--halo); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-b i { background: var(--line); }
.btn:focus-visible, .scroller:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Hover and press. Keyboard focus gets the hover look. */
.btn { position: relative; isolation: isolate; overflow: hidden; transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms cubic-bezier(0.2, 0.8, 0.2, 1), color 200ms; }
.btn i { transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 200ms, color 200ms; }
.btn:active { transition-duration: 90ms; }
/* Arcade (the operator's pick, OQ-13): a hard pixel shadow that pops out on hover and pushes in like a cabinet button */
.ctas .btn { border-radius: 2px; overflow: visible; }
.ctas .btn-a { box-shadow: 4px 4px 0 var(--accent-2); }
.ctas .btn-b { box-shadow: inset 0 0 0 1.5px var(--ink), 4px 4px 0 var(--ink); }
.ctas .btn:is(:hover, :focus-visible) { transform: translate(-2px, -2px); }
.ctas .btn-a:is(:hover, :focus-visible) { box-shadow: 6px 6px 0 var(--accent-2); }
.ctas .btn-b:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1.5px var(--ink), 6px 6px 0 var(--ink); }
.ctas .btn i, .ctas .btn { transition-timing-function: steps(2, end); transition-duration: 120ms; }
.ctas .btn:is(:hover, :focus-visible) i { transform: translateX(3px); }
.ctas .btn:active { transform: translate(4px, 4px); }
.ctas .btn-a:active { box-shadow: 0 0 0 var(--accent-2); }
.ctas .btn-b:active { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 var(--ink); }

svg[data-icon] { shape-rendering: crispEdges; }

/* ---------- header (logo kit v1: the horizontal logo, ~32px tall), after Aether's layout: logo left, pill nav centred ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30; height: calc(64px + env(safe-area-inset-top, 0px)); margin-bottom: calc(-64px - env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);  /* clear of a phone's status bar */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px;
  padding-inline: max(16px, 3.5cqw);
  background: transparent; box-shadow: none;  /* completely clear at the top of the page */
  transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 240ms, box-shadow 240ms, -webkit-backdrop-filter 240ms, backdrop-filter 240ms;
}
/* Frosted glass once the page has moved (the operator's picks, 2026-10-24: frosted, whitish, glassy). The blur also lifts
   the brightness of what's behind, so the dark ASCII film reads as light glass rather than grey; a thin highlight on the
   top edge and a faint line underneath give it the glass edge. */
.site-header:is(.frost, .open) {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--card) 74%, transparent), color-mix(in srgb, var(--card) 52%, transparent));
  -webkit-backdrop-filter: blur(24px) saturate(1.3) brightness(var(--frost-b)); backdrop-filter: blur(24px) saturate(1.3) brightness(var(--frost-b));
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 8px 24px color-mix(in srgb, var(--shade) 6%, transparent);
}
/* Out of the way while the page is scrolling; back as soon as it stops, at the top, or on keyboard focus */
.site-header.away { transform: translateY(calc(-100% - 2px)); }
.site-header.away:focus-within { transform: none; }
.brand { grid-row: 1; grid-column: 1; justify-self: start; display: inline-flex; border-radius: 4px; }
.brand svg { display: block; width: auto; height: 32px; }
/* The pills: a glass capsule of its own, so the links read over the film even while the header is clear */
.site-nav { grid-row: 1; grid-column: 2; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--card) 62%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: inset 0 0 0 1px var(--line-2); }
.site-nav a { padding: 9px 16px; border-radius: 999px; font: 500 14px/1 var(--body); color: var(--ink-2); text-decoration: none; transition: background-color 200ms, color 200ms; }
.site-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.site-nav a[aria-current="page"] { color: var(--on-accent); background: var(--accent); }
.site-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.site-nav a svg { display: none; }
/* Phones: the pills fold into a menu button (top right) that drops a panel under the header */
/* The header's right end: the light/dark toggle (a glass circle like the pills), and on phones the menu button beside it */
.hd-end { grid-row: 1; grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.theme-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--card) 62%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: background-color 200ms; }
.theme-btn:hover { background: color-mix(in srgb, var(--ink) 8%, var(--card)); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.menu-btn { display: none; place-content: center; gap: 4px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 2px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink), 3px 3px 0 var(--ink); cursor: pointer; transition: transform 120ms steps(2, end), box-shadow 120ms steps(2, end); }
.menu-btn i { display: block; width: 16px; height: 2px; background: var(--ink); transition: transform 200ms, opacity 200ms; }
.menu-btn:active { transform: translate(3px, 3px); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 var(--ink); }
.menu-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.site-header.open .menu-btn i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.open .menu-btn i:nth-child(2) { opacity: 0; }
.site-header.open .menu-btn i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.foot-nav { display: flex; gap: clamp(18px, 2.4cqw, 36px); }
.foot-nav a { position: relative; padding: 8px 0; font: 500 14px/1 var(--body); color: var(--ink); text-decoration: none; }
.foot-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--accent-2); transform: scaleX(0); transform-origin: left; transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.foot-nav a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.brand:focus-visible, .foot-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ---------- footer (light, per the Contract; repeats the portfolio and the address, per the copy) ---------- */
.site-footer { position: relative; z-index: 2; background: var(--paper-2); border-top: 1px solid var(--line); padding: 9cqh max(16px, 5cqw) 4cqh; display: grid; gap: 7cqh; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 4cqw; align-items: start; }
.foot-top .brand svg { height: 40px; }
.foot-col { display: grid; gap: 12px; align-content: start; }
.foot-col h2 { margin: 0 0 4px; }
.foot-col p, .foot-col li { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-col .soon { color: var(--ink-3); }
.mail { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail a { font: 500 16px/1.4 var(--mono); color: var(--ink); text-decoration: underline 1px var(--line-2); text-underline-offset: 0.22em; transition: text-decoration-color 200ms; }
.mail a:hover { text-decoration-color: var(--accent-2); }
.mail a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.mail button { font: 500 11px/1 var(--mono); padding: 7px 10px; border-radius: 6px; border: 0; background: var(--card); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; }
.mail button { border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-2), 2px 2px 0 var(--line-2); transition: transform 120ms steps(2, end), box-shadow 120ms steps(2, end), color 120ms; }
.mail button:is(:hover, :focus-visible) { color: var(--ink); transform: translate(-1px, -1px); box-shadow: inset 0 0 0 1px var(--ink), 3px 3px 0 var(--ink); }
.mail button:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 var(--ink); }
.mail button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line); font: 400 12px/1.4 var(--mono); color: var(--ink-3); }

/* ---------- How we work ---------- */
.hww { position: relative; z-index: 2; background: var(--paper); }
/* Whichever section follows the film rises over its last screen as it glows up */
/* The section after the film rises over its last screen as a full-width sheet, straight after the hold */
.after-film { margin-top: -100cqh; border-radius: 28px 28px 0 0; box-shadow: 0 -30px 70px color-mix(in srgb, var(--shade) 22%, transparent); }
.sec-head { display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding: 11cqh max(16px, 5cqw) 7cqh; }
/* No visible title (the operator's call, OQ-12): the film ends on the same headline, so the sheet opens on the first card.
   The heading stays in the page for screen readers. */
.hww.no-head .sec-head { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hww.no-head .rows { border-top: 0; }
.sec-h { margin: 0; font-weight: 400; font-size: clamp(36px, 3.6cqw, 60px); line-height: 1.05; letter-spacing: -0.04em; }
.sec-h .px { color: var(--accent-2); font-size: 1.08em; }
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.row-demo { display: grid; place-items: center; padding: 8cqh 5cqw; border-right: 1px solid var(--line); }
.row-copy { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 6cqh 5cqw; }
.num { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 5px; font: 400 16px/1 var(--px-mono); color: var(--ink-2); background: var(--paper-2); }
.row-copy h3 { margin: 0 0 14px; font-weight: 400; font-size: clamp(24px, 2.3cqw, 42px); letter-spacing: -0.03em; }
.row-copy p { margin: 0; max-width: 46ch; font-size: clamp(16px, 1.15cqw, 20px); line-height: 1.6; color: var(--ink-2); }
.row-copy p + p { margin-top: 14px; }
.row-copy p.lead { color: var(--ink); font-size: clamp(18px, 1.4cqw, 25px); line-height: 1.45; letter-spacing: -0.01em; }
/* ---------- Portfolio and Contact: separate pages, linked from the nav (Notion v0.10) ---------- */
.page.subpage { position: relative; z-index: 2; background: var(--paper); }
/* Each page opens on one still from the film, in the same ink (Aether's pattern, in our world). JS draws the frame, maps
   its open sky onto the window for the copy (--hx, --hw, --hy) and, on Contact, lays the logo flat on the lit screen.
   The next row peeks in under it, so the page reads as going on. */
.phero { position: relative; height: 84cqh; overflow: hidden; }
.phero-img, .phero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Scrolling: the picture pushes in toward its subject, like the film's camera, redrawn so the ink cells stay crisp; the
   copy scrolls with the page and stays solid (the operator, 2026-10-25: the words shouldn't move or fade) */
.phero::after { content: ""; position: absolute; inset: 0 0 auto; height: 120px; pointer-events: none; background: linear-gradient(to bottom, var(--card) 0%, color-mix(in srgb, var(--card) 88%, transparent) 45%, transparent 100%); }
.phero-copy { position: absolute; z-index: 1; left: var(--hx, 5cqw); top: var(--hy, 58%); width: var(--hw, 30cqw); transform: translateY(-50%); display: grid; gap: 22px; text-shadow: 0 0 1px var(--halo), 0 0 6px var(--halo), 0 0 16px var(--halo), 0 0 34px var(--halo-2); }
.phero-copy > * { margin: 0; }
.phero-glass { position: absolute; left: var(--gx, 40%); top: var(--gy, 30%); width: var(--gw, 30%); height: var(--gh, 40%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--gw, 400px) * 0.07); }
.phero-logo { width: 46%; }
.phero-logo svg { display: block; width: 100%; height: auto; }  /* the kit's stacked logo as it is: flat, no effects */
/* Dark: the lit glass draws dense in the positive ink, so the glass goes plain black (soft at the edge) and the on-dark logo
   keeps its clear space, as the pale glass gives it on paper */
:root[data-theme="dark"] .phero-glass { background: var(--paper); border-radius: calc(var(--gw, 400px) * 0.06); box-shadow: 0 0 calc(var(--gw, 400px) * 0.06) calc(var(--gw, 400px) * 0.03) var(--paper); }
/* The address types onto the glass under the logo, like the film's headline (the operator's pick, 2026-10-25) */
.phero-type { box-sizing: content-box; width: 21ch; margin: 0; overflow: hidden; white-space: nowrap; font: 400 calc(var(--gw, 400px) * 0.046)/1.1 var(--px-mono); color: var(--accent-2); border-right: 0.55em solid var(--live); }
.phero-type { animation: type 1.4s steps(21, end) 0.8s both, caret 1.1s steps(1) infinite; }
@keyframes type { from { width: 0; } }
@keyframes caret { 50% { border-right-color: transparent; } }
.page-h { margin: 0; font-weight: 400; font-size: clamp(40px, calc(var(--hw, 600px) / 5.4), 96px); line-height: 1; letter-spacing: -0.045em; text-wrap: balance; }
.page-h .px { color: var(--accent-2); font-size: 1.06em; }
.page-h:focus { outline: none; }
/* Two companies in rule-line cells, like the How we work rows: a status row, then the name and its line */
.cos { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.co { min-height: 38cqh; display: flex; flex-direction: column; gap: 16px; padding: 5cqh 5cqw 8cqh; border-bottom: 1px solid var(--line); }
.co:not(.feat) + .co:not(.feat) { border-left: 1px solid var(--line); }
/* GlowPro, the live company (the operator, 2026-10-25): a full-width row, its logo beside the name. Each company's logo is its
   own file, shown as it is (assets/portfolio/). */
.co.feat { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 5cqw; }
.co-text { display: grid; gap: 16px; min-width: 0; }
.co.feat .co-top { margin-bottom: 2cqh; }
.co.feat h2 { font-size: clamp(40px, 4.6cqw, 80px); }
.co-line { margin: 0; max-width: 48ch; font-size: clamp(17px, 1.3cqw, 23px); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-2); }
.co-line b { font-weight: 500; color: var(--ink); }  /* what it is, then what it does and the outcome (the operator, 2026-10-25) */
.co-logo { width: clamp(64px, 6cqw, 96px); }
/* Bonsai and Kallo show their own lockup or wordmark as the name, as their brand kits require (never the name retyped
   beside the mark); the text name stays for screen readers. The SVGs carry their clear space, so a negative margin lines
   the drawing up with the tag above, and the letters come out at the size of the other names. */
.co-wm { --h: clamp(34px, 3.6cqw, 64px); margin: 0; line-height: 0; }
.co-wm svg { display: block; width: auto; }
.co-wm-bonsai svg { height: calc(var(--h) * 2.1); margin: calc(var(--h) * -0.39) 0 calc(var(--h) * -0.25) calc(var(--h) * -0.39); }
.co-wm-kallo svg { height: calc(var(--h) * 1.4); margin: calc(var(--h) * -0.24) 0 0 calc(var(--h) * -0.24); }  /* the space below is Kallo's clear space: kept */
.co-logo svg { display: block; width: 100%; height: auto; }
.co-logo-gp { width: clamp(150px, 15cqw, 240px); }  /* the blob carries the wordmark small inside it */
.tag.live::before { content: ""; width: 8px; height: 8px; background: var(--accent-2); }
.co-top { display: flex; min-height: 24px; margin-bottom: 9cqh; }
.co h2 { margin: 0; font-weight: 400; font-size: clamp(34px, 3.6cqw, 64px); line-height: 1.05; letter-spacing: -0.04em; }
.tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 8px; font: 400 17px/1 var(--px-mono); color: var(--ink-2); background: var(--paper-2); }
.tag.soon::after { content: ""; width: 7px; height: 13px; background: var(--live); animation: blink 1.1s steps(1) infinite; }  /* an arcade cursor */
/* Each card links to the company's own address (session 06, the operator's pick): the address at the card's foot, and the whole
   card is the link's target */
.co { position: relative; }
.co-link { align-self: flex-start; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font: 500 14px/1.4 var(--mono); color: var(--ink); text-decoration: underline 1px var(--line-2); text-underline-offset: 0.22em; transition: text-decoration-color 200ms; }
.co-link svg { width: 12px; height: 12px; transition: transform 120ms steps(2, end); }
.co-link::after { content: ""; position: absolute; inset: 0; }
.co:hover .co-link { text-decoration-color: var(--accent-2); }
.co:hover .co-link svg { transform: translateX(3px); }
.co-link:focus-visible { outline: none; }
.co:has(.co-link:focus-visible) { outline: 2px solid var(--ink); outline-offset: -4px; }
@keyframes blink { 50% { opacity: 0; } }
/* Contact: the line and the address, then the footer repeats the address (Notion v0.10) */
.ct { display: grid; grid-template-columns: 1fr 1fr; align-content: start; border-top: 1px solid var(--line); }
.ct > * { margin: 0; padding: 6cqh 5cqw 9cqh; border-bottom: 1px solid var(--line); }
.ct > p { font-size: clamp(18px, 1.4cqw, 25px); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); }
.ct .mail { display: flex; align-items: center; align-content: flex-start; gap: 14px; border-left: 1px solid var(--line); }
.ct .mail a { font-size: clamp(20px, 2.3cqw, 40px); letter-spacing: -0.02em; }
.page.enter :is(.phero-copy > *, .co, .ct > *) { animation: rise 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.page.enter :is(.phero-copy > * + *, .co + .co, .ct > * + *) { animation-delay: 80ms; }
.page.enter :is(.phero-img, .phero-glass) { animation: fade 1s ease both; }  /* the image fades in, as Aether's do */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tag.soon::after, .page.enter :is(.phero-copy > *, .phero-img, .phero-glass, .co, .ct > *), .phero-type { animation: none; } }

/* ---------- Lab notes: an index of notes, then one note's layout, for search and AI answers (operator, 2026-10-25) ---------- */
.phero.short { height: 64cqh; }
.notes { border-top: 1px solid var(--line); }
.note-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.note { min-width: 0; border-bottom: 1px solid var(--line); }
.note.feat { grid-column: 1 / -1; }
.note.r { border-left: 1px solid var(--line); }  /* the right-hand cell of a row */
.note a { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 5cqh 5cqw 6cqh; color: inherit; text-decoration: none; transition: background-color 200ms; }
.note a:hover { background: color-mix(in srgb, var(--card) 70%, transparent); }
.note a:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.note h2 { margin: 0; max-width: 24ch; font-weight: 400; font-size: clamp(26px, 2.3cqw, 40px); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.note.feat h2 { max-width: 20ch; font-size: clamp(34px, 4.2cqw, 72px); line-height: 1.04; letter-spacing: -0.04em; }
.note a:is(:hover, :focus-visible) h2 { text-decoration: underline 2px var(--accent-2); text-underline-offset: 0.14em; }
.note .dek { margin: 0; max-width: 60ch; font-size: clamp(16px, 1.15cqw, 19px); line-height: 1.55; color: var(--ink-2); }
.note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.note-meta .tag { letter-spacing: 0; text-transform: none; }
.more { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--body); color: var(--accent-2); }
.more svg { width: 12px; height: 12px; transition: transform 120ms steps(2, end); }
.note a:is(:hover, :focus-visible) .more svg { transform: translateX(3px); }
/* One note: the answer first, key points, one question per section, questions at the end; a sticky outline beside it */
.note-art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 68ch) minmax(0, 1fr); column-gap: 4cqw; padding: calc(64px + 8cqh) max(16px, 5cqw) 0; }
.na-head { grid-area: 1 / 2; display: grid; gap: 22px; }
.na-key { grid-area: 2 / 2; }
.na-body { grid-area: 3 / 2; padding-bottom: 8cqh; }
.na-toc { grid-column: 1; grid-row: 2 / span 2; align-self: start; justify-self: end; position: sticky; top: 96px; width: min(100%, 220px); margin-top: 6cqh; display: grid; gap: 12px; }
.na-more { grid-area: 4 / 1 / 5 / -1; margin: 0 calc(-1 * max(16px, 5cqw)); border-top: 1px solid var(--line); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 13px/1.4 var(--mono); color: var(--ink-3); }
.crumbs a { color: var(--accent-2); text-decoration: none; }
.crumbs a:is(:hover, :focus-visible) { text-decoration: underline; }
.na-h { margin: 0; font-weight: 400; font-size: clamp(40px, 4.6cqw, 80px); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.na-h:focus { outline: none; }
.na-dek { margin: 0; font-size: clamp(19px, 1.5cqw, 25px); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-2); }
.na-key { margin-top: 6cqh; padding: 22px 26px; display: grid; gap: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); border-left: 4px solid var(--accent); }
.na-key ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; font-size: 17px; line-height: 1.5; }
.na-toc ol { list-style: none; margin: 0; padding: 0; display: grid; border-left: 1px solid var(--line-2); }
.na-toc a { display: block; padding: 7px 0 7px 14px; font-size: 14px; line-height: 1.35; color: var(--ink-2); text-decoration: none; }
.na-toc a:is(:hover, :focus-visible) { color: var(--ink); box-shadow: inset 2px 0 0 var(--accent-2); }
.na-body h2 { margin: 2em 0 0.6em; font-weight: 400; font-size: clamp(26px, 2.2cqw, 38px); line-height: 1.1; letter-spacing: -0.03em; scroll-margin-top: 96px; }
.na-body > p { margin: 0 0 1em; font-size: clamp(17px, 1.2cqw, 20px); line-height: 1.7; }
.na-body blockquote { margin: 1.4em 0; font-size: clamp(24px, 2.2cqw, 36px); line-height: 1.2; letter-spacing: -0.03em; }
.na-body blockquote p { margin: 0; }
/* Lists in a note (the operator, 2026-10-25): the paragraphs' size, items spaced like short paragraphs, a little room around the
   list, and markers outside so wrapped lines sit under the text, not under the number */
.na-body :is(ul, ol) { margin: 1em 0 1.25em; padding-left: 1.6em; list-style-position: outside; font-size: clamp(17px, 1.2cqw, 20px); line-height: 1.6; }
.na-body li { padding-left: 0.25em; }
.na-body li + li { margin-top: 0.6em; }
.na-body li > :is(ul, ol) { margin: 0.6em 0 0; font-size: 1em; }
.na-faq :is(ul, ol) { margin: 0 0 18px; font-size: 17px; color: var(--ink-2); }
.na-faq details { border-top: 1px solid var(--line); }
.na-faq details:last-child { border-bottom: 1px solid var(--line); }
.na-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 19px; line-height: 1.4; cursor: pointer; list-style: none; }
.na-faq summary::-webkit-details-marker { display: none; }
.na-faq summary::after { content: "+"; font: 400 22px/1 var(--px-mono); color: var(--accent-2); }
.na-faq details[open] summary::after { content: "-"; }
.na-faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.na-faq p { max-width: 60ch; margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.na-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 3em 0 0; font-size: 18px; }
.na-more > h2 { margin: 0; padding: 28px max(16px, 5cqw) 4px; }
.page.enter :is(.note, .na-head, .na-key) { animation: rise 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (prefers-reduced-motion: reduce) { .page.enter :is(.note, .na-head, .na-key) { animation: none; } }

/* ---------- What we do and What we believe: one card to click through ---------- */
.read { position: relative; z-index: 2; min-height: 100cqh; display: flex; flex-direction: column; background: var(--card); border-top: 1px solid var(--line); }
.reader { flex: 1; display: flex; flex-direction: column; }
.r-top, .r-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px max(16px, 5cqw); }
.r-top { border-bottom: 1px solid var(--line); }
.r-foot { border-top: 1px solid var(--line); }
.r-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 9px; background: var(--paper-2); }
.r-tabs button { border: 0; background: none; padding: 10px 16px; border-radius: 7px; font: 500 13px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; }
.r-tabs button[aria-selected="true"] { background: var(--card); color: var(--accent-2); box-shadow: 0 1px 3px color-mix(in srgb, var(--shade) 14%, transparent); }
.r-count { font: 400 20px/1 var(--px-mono); color: var(--ink-3); }
.r-count b { font-weight: 400; color: var(--ink); }
.r-pages { flex: 1; display: grid; align-content: center; padding: 7cqh max(16px, 5cqw); touch-action: pan-y; overflow: hidden; }
.r-page { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; opacity: 0; visibility: hidden; transform: translateX(28px); transition: opacity 300ms, transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 420ms; }
.r-page.prev { transform: translateX(-28px); }
.r-page.on { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms 80ms, transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s; }
.r-state .px { color: var(--accent-2); font-size: 1.06em; }
.r-three h3.px { color: var(--accent-2); }
.r-three { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4cqw; }
.r-three li { display: grid; gap: 12px; align-content: start; }
.r-three .r-mini { margin-bottom: 6px; }
/* Each page carries a live drawing: words left, drawing right (stacked on phones). It replays whenever its page comes
   up. Green is AI doing the routine; bark is a specialist's judgement, as in the Operate card. */
.r-page.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 5cqw; }
.r-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.split .r-state { font-size: clamp(34px, 3.5cqw, 68px); }
.r-vis, .r-mini { margin: 0; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.r-vis { display: grid; gap: 14px; padding: clamp(14px, 1.4cqw, 24px); }
.r-mini { padding: 10px; border-radius: 12px; }
.r-vis canvas, .r-mini canvas { display: block; width: 100%; height: auto; }
.r-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font: 400 12px/1.4 var(--mono); color: var(--ink-2); }
.r-key li { display: inline-flex; align-items: center; gap: 7px; }
.r-key li::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--sw); }
.r-key li.ln::before { width: 14px; height: 3px; }
.r-key li.dash::before { width: 14px; height: 3px; background: repeating-linear-gradient(to right, var(--sw) 0 3px, transparent 3px 6px); }
.r-vis .cap { margin-top: -6px; }
.r-three h3 { margin: 0; font-weight: 400; font-size: clamp(26px, 2.4cqw, 46px); line-height: 1.05; letter-spacing: -0.01em; }
.r-three p { margin: 0; font-size: clamp(16px, 1.3cqw, 23px); line-height: 1.5; color: var(--ink-2); }
.r-state { margin: 0; max-width: 18ch; font-weight: 400; font-size: clamp(38px, 5cqw, 96px); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.r-body { margin: 0; max-width: 58ch; font-size: clamp(17px, 1.35cqw, 24px); line-height: 1.55; color: var(--ink-2); }
.r-dots { display: flex; }
.r-dots button { min-width: 26px; height: 30px; border: 0; padding: 0 4px; background: none; display: grid; place-items: center; cursor: pointer; }
.r-dots button::after { content: ""; width: 8px; height: 8px; background: var(--line-2); transition: width 200ms, background 200ms; }
.r-dots button[aria-current="true"]::after { width: 30px; background: linear-gradient(to right, var(--accent-2) calc(var(--prog, 1) * 100%), var(--line-2) 0); }
.r-hint { font-size: 12px; color: var(--ink-3); }
.reader .w-btns button { height: 34px; min-width: 42px; }
.w-btns button:disabled { opacity: 0.35; cursor: default; background: none; }
.reader button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- the step cards ---------- */
.w { width: 100%; max-width: clamp(400px, 30cqw, 680px); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--w-shadow); overflow: hidden; font-size: clamp(13px, 0.8cqw, 15px); }
.w-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.w-t { display: flex; align-items: center; gap: 9px; }
.w-t svg { width: 14px; height: 14px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; font: 500 11px/1.5 var(--mono); color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 35%, transparent); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.w-body { padding: 16px 14px; display: grid; gap: 14px; -webkit-user-select: none; user-select: none; }
.w-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.w-btns { display: flex; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2), 2px 2px 0 var(--line-2); overflow: hidden; }
.w-btns button:active { transform: translate(1px, 1px); }  /* small controls: the arcade press, lighter */
.w-btns button { display: grid; place-items: center; min-width: 34px; height: 28px; padding: 0 10px; background: none; border: 0; color: var(--ink-2); cursor: pointer; font: 500 11px var(--mono); }
.w-btns button + button { box-shadow: inset 1px 0 0 var(--line-2); }
.w-btns button:hover { color: var(--ink); background: var(--paper-2); }
.w-btns button[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.w-btns svg { width: 12px; height: 12px; }
.w button:focus-visible, .w canvas:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.w canvas { display: block; width: 100%; cursor: pointer; }
.cap { font: 400 11px/1.4 var(--mono); color: var(--ink-3); }
.chks { display: grid; gap: 6px; }
.chk { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: var(--paper-2); color: var(--ink-2); text-align: left; cursor: pointer; font: 400 13px var(--body); transition: color 200ms, box-shadow 200ms; }
.chk i { flex: none; width: 14px; height: 14px; box-shadow: inset 0 0 0 2px var(--line-2); display: grid; place-items: center; }
.chk.on { color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent-2); }
.chk.on i { background: var(--accent-2); box-shadow: none; }
.chk.on i::after { content: ""; width: 6px; height: 6px; background: var(--card); }
.meter { display: flex; align-items: flex-end; gap: 4px; height: 44px; padding: 0 2px; }
.meter b { flex: 1; height: calc(var(--h) * 1%); background: var(--line); transition: background 250ms; }
.meter b.on { background: var(--accent-2); }
.w.done .meter b.on { background: var(--accent); }
.route { width: 100%; height: auto; display: block; }
.route text { font-family: var(--body); font-size: 12px; fill: var(--ink-2); pointer-events: none; }
.route .lit text, .route text.lit { fill: var(--ink); }
.route .tag { font-family: var(--mono); font-size: 10.5px; }
.route g[role="button"]:focus-visible rect { stroke: var(--ink); }
.grid-x { display: grid; grid-template-columns: auto auto 1fr; gap: 6px 10px; align-items: center; }
.cells { display: grid; grid-template-columns: repeat(6, 18px); gap: 4px; }
.cells i { aspect-ratio: 1; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); transition: background 220ms; }
.cells i.on { background: var(--accent-2); box-shadow: none; }
.cells i.now { background: var(--accent); }
.grid-x [data-say] { align-self: end; padding-left: 8px; color: var(--ink-2); }
.vlab { writing-mode: vertical-rl; transform: rotate(180deg); }

/* ---------- portrait / narrow ---------- */
@container site (orientation: portrait) {
  .film { height: 325cqh; }  /* the portrait timeline's end + 1 screen */
  .beat[data-zone="sky"] { left: 20px; right: 20px; width: auto; top: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); gap: 12px; transform: translateY(var(--dy, 0px)); }
  /* The phone's hero sits over the cabinet body, which is busier than the clouds: full ink and a wider halo */
  .beat { text-shadow: 0 0 2px var(--halo), 0 0 8px var(--halo), 0 0 18px var(--halo), 0 0 36px var(--halo), 0 0 60px var(--halo-2); }
  .sub { color: var(--ink); font-weight: 450; }
  .hero-h { font-size: 8.4cqw; }
  .sub { font-size: 15px; line-height: 1.5; }
  .btn { font-size: 14px; padding-left: 12px; gap: 10px; }
  /* Portrait goes from the glass straight into the cards (no stage-select), so How we work shows its title here */
  .hww.no-head .sec-head { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; padding: 48px 20px 32px; }
  .hww.no-head .rows { border-top: 1px solid var(--line); }
  /* The page images: the still is a band under the header, framed on the cabinet and fading to paper; the copy sits under it */
  .phero, .phero.short { height: auto; }
  .phero-copy { position: relative; left: auto; top: auto; width: auto; transform: none; gap: 16px; padding: calc(var(--band-b, 60cqw) + 20px) max(16px, 5cqw) 40px; }
  .page-h { font-size: clamp(40px, 11.5cqw, 72px); }
}
@container site (max-width: 760px) {
  .site-header { height: calc(56px + env(safe-area-inset-top, 0px)); margin-bottom: calc(-56px - env(safe-area-inset-top, 0px)); }
  .brand svg { height: 26px; }
  .menu-btn { display: grid; }
  .hd-end { gap: 12px; }
  .theme-btn { border-radius: 2px; background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1.5px var(--ink), 3px 3px 0 var(--ink); transition: transform 120ms steps(2, end), box-shadow 120ms steps(2, end); }  /* a pair with the menu button */
  .theme-btn:hover { background: var(--card); }
  .theme-btn:active { transform: translate(3px, 3px); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 var(--ink); }
  .theme-btn:focus-visible { outline-offset: 4px; }
  .site-nav { grid-column: 1 / -1; display: none; position: absolute; top: 100%; left: calc(-1 * max(16px, 3.5cqw)); right: calc(-1 * max(16px, 3.5cqw)); flex-direction: column; gap: 0; padding: 8px 20px 20px; border-radius: 0; background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--line), 0 24px 40px color-mix(in srgb, var(--shade) 14%, transparent); }
  .site-header.open .site-nav { display: flex; }
  .site-nav a, .site-nav a:hover, .site-nav a[aria-current="page"] { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-radius: 0; background: none; font-size: 28px; font-weight: 400; letter-spacing: -0.03em; color: var(--ink); border-bottom: 1px solid var(--line); }
  .site-nav a[aria-current="page"] { color: var(--accent-2); }
  .site-nav a svg { display: block; width: 16px; height: 16px; color: var(--accent-2); }
  .site-nav a:active { color: var(--accent-2); }
  .foot-top { grid-template-columns: 1fr; gap: 32px; }
  .page-h { font-size: clamp(40px, 11.5cqw, 60px); }
  .cos, .ct { grid-template-columns: 1fr; }
  .co { min-height: 0; padding: 28px 20px 36px; gap: 14px; }
  .co-top { margin-bottom: 36px; }
  .co:not(.feat) + .co:not(.feat), .ct .mail { border-left: 0; }
  .co.feat { grid-template-columns: 1fr; row-gap: 20px; }
  .co-logo-gp { width: 150px; }
  .ct > * { padding: 28px 20px 36px; }
  .note-list { grid-template-columns: 1fr; }
  .note.r { border-left: 0; }
  .note a { padding: 28px 20px 32px; gap: 14px; }
  .note-art { grid-template-columns: minmax(0, 1fr); padding: calc(56px + 32px) 20px 0; }
  .note-art > * { grid-area: auto; }
  .na-toc { position: static; justify-self: stretch; width: auto; margin-top: 32px; }
  .na-more { margin: 0 -20px; }
  .na-more > h2 { padding: 24px 20px 0; }
  .foot-top .brand svg { height: 32px; }
  .sec-head { padding: 10cqh 20px 40px; }
  .sec-h { font-size: 10cqw; }
  .rows { border-left: 0; border-right: 0; }
  .row { grid-template-columns: 1fr; }
  .row-copy { order: -1; gap: 18px; padding: 24px 20px 4px; }
  .row-demo { padding: 20px 16px 32px; border-right: 0; }
  .row-copy p { font-size: 15px; }
  .row-copy p.lead { font-size: 17px; }
  .r-top, .r-foot { padding: 12px 16px; }
  .r-tabs button { padding: 8px 9px; font-size: 11px; letter-spacing: 0.06em; }
  .r-pages { padding: 5cqh 20px; }
  .r-page.split { grid-template-columns: 1fr; gap: 20px; }
  .split .r-state { font-size: 30px; }
  .r-copy { gap: 14px; }
  .r-vis { padding: 12px; gap: 10px; }
  .r-key { font-size: 11px; gap: 4px 12px; }
  .r-three { grid-template-columns: 1fr; gap: 16px; }
  .r-three li { grid-template-columns: 132px minmax(0, 1fr); gap: 4px 14px; }
  .r-three .r-mini { grid-row: span 2; align-self: start; margin: 0; padding: 4px; border-radius: 10px; }
  .r-three h3 { font-size: 24px; }
  .r-three p { font-size: 15px; }
  .r-state { font-size: 34px; }
  .r-body { font-size: 16px; }
  .r-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) { .chk, .meter b, .cells i, .btn, .btn i, .btn::before, .ctas .btn, .ctas .btn i { transition: none; } .ctas .btn:is(:hover, :focus-visible, :active), .ctas .btn:is(:hover, :focus-visible) i { transform: none; } }

/* ---------- the skip link and the 404 page ---------- */
.skip { position: fixed; z-index: 100; left: calc(12px + env(safe-area-inset-left, 0px)); top: -60px; padding: 12px 16px; border-radius: 2px; background: var(--ink); color: var(--paper); font: 500 14px/1 var(--body); text-decoration: none; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); outline: 2px solid var(--accent); outline-offset: 2px; }
.nf { min-height: 80cqh; display: grid; align-content: center; justify-items: start; gap: 24px; padding: calc(64px + 6cqh) max(16px, 5cqw) 8cqh; }
.nf > * { margin: 0; }

/* Lab notes before the first article */
.notes-empty { padding: 6cqh max(16px, 5cqw) 12cqh; }
.notes-empty p { margin: 0; max-width: 40ch; font-size: clamp(18px, 1.4cqw, 25px); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-2); }