/* Galene landing (GAL-190), rebuilt from the approved v2 blueprint. Hand-authored: no build step, no framework — this file is the whole design. The palette is the blueprint's, written once with light-dark(); a pinned theme (footer toggle, shared storage key with the app) sets data-theme on , otherwise the system preference decides — with JavaScript off too. */ /* ── Fonts ────────────────────────────────────────────────────────────────── Newsreader and IBM Plex Mono, both SIL Open Font License 1.1. The woff2 files are the SPA's vendored copies at their stable /fonts/ paths (apps/web/public/fonts, generated by fetch-google-fonts.mjs) — the landing ships declarations only, never duplicate files; the site merge verifies every referenced file exists in the final artifact. Blocks copied from apps/web/src/fonts.css. */ /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-normal-400-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-normal-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-normal-400-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; } /* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-normal-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-normal-400-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; } /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-normal-500-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-normal-500-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-normal-500-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; } /* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-normal-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-normal-500-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; } /* vietnamese */ @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 600; font-display: swap; src: url('/fonts/newsreader-italic-300-600-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; } /* latin-ext */ @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 600; font-display: swap; src: url('/fonts/newsreader-italic-300-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 600; font-display: swap; src: url('/fonts/newsreader-italic-300-600-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; } /* vietnamese */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/fonts/newsreader-normal-300-600-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; } /* latin-ext */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/fonts/newsreader-normal-300-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/fonts/newsreader-normal-300-600-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; } /* ── Palette and theme wiring ─────────────────────────────────────────────── */ :root { color-scheme: light dark; /* The blueprint's full ink ladder, light / dark. */ --paper: light-dark(#fbfaf7, #181712); --paper2: light-dark(#f5f4ed, #1e1d17); --ink: light-dark(#1a1a17, #e9e7dc); --ink2: light-dark(#3a3a35, #cfcdc2); --ink3: light-dark(#55554f, #b3b1a6); --mid: light-dark(#6e6e68, #9e9c91); --nav: light-dark(#7c7c76, #8d8b80); --mut: light-dark(#8a8a83, #8b897e); --mut2: light-dark(#9c9c94, #7c7a70); --fade: light-dark(#a3a39b, #6f6d64); --fade2: light-dark(#b0b0a8, #666459); --fade3: light-dark(#b4b4ac, #62605a); --faintb: light-dark(#b9b9b2, #5c5a52); --faint2: light-dark(#c2c2ba, #524f49); --ghost: light-dark(#c9c9c1, #4b4943); --ghost2: light-dark(#d3d3cb, #45433d); --line2: light-dark(#d8d7d0, #3f3d36); --line3: light-dark(#e2e1da, #37352e); --hair: light-dark(#e7e6df, #302e27); --hair2: light-dark(#ecebe5, #2a2922); --hover: light-dark(#f5f4ed, #22211b); --serif: 'Newsreader', serif; --mono: 'IBM Plex Mono', monospace; --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; } :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } /* ── Base ─────────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { background: var(--paper); scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); transition: background-color 0.4s ease, color 0.4s ease; -webkit-font-smoothing: antialiased; } a { color: var(--ink); text-decoration: none; } a:hover { color: var(--mid); } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; } .container { max-width: 1240px; margin-inline: auto; padding-inline: 84px; } @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes marq-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marq-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* ── Header ───────────────────────────────────────────────────────────────── */ .header-inner { padding-top: 34px; display: flex; align-items: baseline; justify-content: space-between; } .wordmark { color: var(--ink); } /* The outlined wordmark is cap-height: its bottom edge is the text baseline, so it sits correctly in the header's baseline row. 11px runs larger than the 12px mono setting it replaced (≈8.5px caps) on purpose — the monoline face needs the extra size to carry the same visual weight. */ .wordmark svg { display: block; height: 11px; width: auto; } .nav { display: flex; gap: 34px; align-items: baseline; font-size: 13px; } .nav-link { color: var(--nav); } .nav-cta { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .hero { margin-top: 118px; max-width: 1000px; animation: fade-up 0.6s ease both; } .hero-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 74px; line-height: 1.06; letter-spacing: -0.022em; text-wrap: pretty; } .hero-sub { margin: 42px 0 0; max-width: 640px; font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.6; color: var(--ink3); } .cta-row { margin-top: 88px; display: flex; align-items: baseline; gap: 32px; flex-wrap: wrap; border-top: 1px solid var(--hair); padding-top: 26px; animation: fade-up 0.6s 0.1s ease both; } .cta { font-family: var(--serif); font-size: 19px; border: 1px solid var(--ink); padding: 13px 38px; transition: background-color 0.25s ease, color 0.25s ease; } .cta:hover { background: var(--ink); color: var(--paper); } .cta-note { font-family: var(--mono); font-size: 12px; color: var(--mut2); } /* ── Ticker ───────────────────────────────────────────────────────────────── */ .ticker-wrap { margin-top: 104px; background: var(--paper2); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 54px 0 58px; } .ticker-label { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; color: var(--mut); } .ticker { margin-top: 34px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .ticker-row { display: flex; width: max-content; animation: marq-left 78s linear infinite; } .ticker-row--right { margin-top: 22px; animation: marq-right 92s linear infinite; } .ticker-band { display: flex; gap: 52px; padding-right: 52px; font-family: var(--serif); font-size: 30px; color: var(--ink2); white-space: nowrap; } .ticker-band--italic { font-style: italic; color: var(--mid); } .ticker-band .dot { color: var(--faintb); } .ticker-band--italic .dot { color: var(--faint2); } .ticker-cap { margin-top: 38px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--mut); } /* ── Sections ─────────────────────────────────────────────────────────────── */ .section { padding-top: 118px; } .section--idea { padding-top: 112px; } .section--access { padding-top: 130px; } .rule-top { border-top: 1px solid var(--hair); padding-top: 40px; } .rule-top--access { padding-top: 56px; } .kicker { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; color: var(--mut); } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; } .two--after-kicker { margin-top: 26px; } .sechead { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 42px; line-height: 1.14; letter-spacing: -0.018em; } .sechead--after-kicker { margin-top: 26px; } .sechead--lg { font-size: 46px; line-height: 1.12; letter-spacing: -0.02em; } .body-copy { margin: 26px 0 0; max-width: 520px; font-family: var(--serif); font-size: 19px; line-height: 1.75; color: var(--ink3); } .body-copy--access { margin-top: 24px; max-width: 600px; font-style: italic; line-height: 1.65; } /* ── Screenshots ──────────────────────────────────────────────────────────── */ .figure { margin: 0; } .figure--sweep, .figure--thread, .figure--closed { margin-top: 104px; } /* Every capture is 2880x1800, and every figure keeps the same top slice of it: one aspect ratio, so all four figures render at the same height and the composition is identical at every viewport width — no deeper cuts on wide screens, no side-cropping on phones. The 1550 line was measured against the captures' whitespace: it cuts below the desk's rows, after the thread's first prose line, between the sweep's second and third findings, and in the closed shelf's calm paper — never through an element. Re-measure before changing it (or reshooting): scan each capture for whitespace bands and pick a line inside all of them. */ .shot { aspect-ratio: 2880 / 1550; border: 1px solid var(--hair); background: var(--paper2); } .shot-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* Each figure holds a light and a dark capture; the one matching the resolved theme shows. Both are loading="lazy", so the hidden one is never fetched. */ .shot-img--dark { display: none; } :root[data-theme='dark'] .shot-img--light { display: none; } :root[data-theme='dark'] .shot-img--dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .shot-img--light { display: none; } :root:not([data-theme='light']) .shot-img--dark { display: block; } } .shot-caption { margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--mut2); } /* ── 01 · The helper: momentum bars ───────────────────────────────────────── */ .bars { padding-top: 12px; } .bar { display: grid; grid-template-columns: 1fr 92px; align-items: center; gap: 28px; padding: 16px 0; } .bar-track { position: relative; height: 1px; background: var(--hair2); } .bar-fill { position: absolute; left: 0; top: 0; height: 1px; transition: width 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); } .bar-fill--1 { background: var(--ink2); width: 78%; } .bar-fill--2 { background: var(--mid); width: 62%; transition-delay: 0.15s; } .bar-fill--3 { background: var(--fade); width: 44%; transition-delay: 0.3s; } .bar-label { font-family: var(--mono); font-size: 11.5px; color: var(--fade2); text-align: right; } .bars-note { margin-top: 20px; font-family: var(--mono); font-size: 12px; color: var(--fade); line-height: 1.7; } .finding { margin-top: 36px; border-top: 1px solid var(--hair2); padding-top: 26px; } .finding-quote { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.6; color: var(--ink3); } .finding-cap { margin-top: 12px; font-family: var(--mono); font-size: 12px; color: var(--mut2); } /* ── 02 · The temperament: two moments ────────────────────────────────────── */ .moments { padding-top: 8px; } .moment { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; gap: 26px; padding: 20px 0; border-bottom: 1px solid var(--hair2); } .moment-num { font-family: var(--mono); font-size: 12px; color: var(--fade3); } .moment-title { font-family: var(--serif); font-size: 22px; line-height: 1.3; } .moment-desc { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--mut); } .silence { padding-top: 26px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--fade); transition: opacity 1.4s ease 0.9s; } /* The line arrives a beat after the two moments, then nothing moves again — the section's claim, played once (landing.js, data-settle). The markup rests finished: without JavaScript the line is simply there, and under prefers-reduced-motion it arrives with everything else. */ html.js .moments:not(.settled) .silence { opacity: 0; } /* ── 03 · The engine ──────────────────────────────────────────────────────── */ .engine-figure { padding-top: 14px; } .clients { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair2); } .client { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--hair2); font-family: var(--serif); font-size: 17px; color: var(--ink2); } .client:nth-child(even) { padding: 18px 0 18px 20px; border-left: 1px solid var(--hair2); } .memory-connector { margin: 0 auto; width: 1px; height: 44px; background: var(--line2); transform-origin: top; transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); } .memory-box { border: 1px solid var(--ink); padding: 22px 26px; text-align: center; transition: border-color 0.9s ease 0.8s; } /* Drawn once when the figure scrolls into view (landing.js, data-settle): the connector reaches down from the clients, and the memory box's border arrives as it lands — convergence, stated one time. The markup rests finished; the pre state exists only under html.js. */ html.js .engine-figure:not(.settled) .memory-connector { transform: scaleY(0); } html.js .engine-figure:not(.settled) .memory-box { border-color: var(--hair2); } .memory-label { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; color: var(--mut); } .memory-title { margin-top: 10px; font-family: var(--serif); font-size: 26px; letter-spacing: -0.01em; } .maydo { margin-top: 30px; border-top: 1px solid var(--hair2); padding-top: 22px; } .maydo-label { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; color: var(--mut); } .maydo-list { margin-top: 16px; display: grid; gap: 11px; font-size: 13px; line-height: 1.6; color: var(--mid); } /* ── 04 · Where it sits: the ladder ───────────────────────────────────────── */ .ladder { padding-top: 6px; } .ladder-row { display: grid; grid-template-columns: 150px 1fr; align-items: baseline; gap: 24px; padding: 17px 0; border-top: 1px solid var(--hair2); } .ladder-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--mut2); } .ladder-val { font-family: var(--serif); font-size: 19px; color: var(--mid); } .ladder-row--big { padding: 22px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); /* The label wraps to two mono lines here; baseline alignment would hang the big serif value off the first line. Center the pair instead. */ align-items: center; } .ladder-row--big .ladder-label { color: var(--ink3); } .ladder-val--big { font-size: 30px; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); } .ladder-note { margin-top: 22px; font-family: var(--mono); font-size: 12px; color: var(--mut2); line-height: 1.7; } /* ── Questions ────────────────────────────────────────────────────────────── */ .faq { margin-top: 36px; max-width: 880px; border-bottom: 1px solid var(--hair2); } .faq-item { border-top: 1px solid var(--hair2); /* Lets ::details-content transition to block-size: auto where supported. */ interpolate-size: allow-keywords; } .faq-row { display: grid; grid-template-columns: 1fr 28px; gap: 20px; align-items: baseline; padding: 24px 4px; cursor: pointer; list-style: none; } .faq-row::-webkit-details-marker { display: none; } .faq-row:hover { background: var(--hover); } .faq-q { font-family: var(--serif); font-size: 23px; line-height: 1.35; color: var(--ink2); } .faq-item[open] .faq-q { color: var(--ink); } .faq-sign { font-family: var(--mono); font-size: 15px; color: var(--fade); text-align: right; } .faq-sign::before { content: '+'; } .faq-item[open] .faq-sign::before { content: '−'; } .faq-a { padding: 2px 4px 26px; max-width: 660px; font-family: var(--serif); font-size: 17px; line-height: 1.7; color: var(--ink3); } /* Smooth open/close where ::details-content is supported; instant elsewhere. */ .faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 0.45s allow-discrete; } .faq-item[open]::details-content { block-size: auto; } /* ── Access ───────────────────────────────────────────────────────────────── */ .access-head { max-width: 820px; } .access-line { margin-top: 48px; max-width: 620px; border-top: 1px solid var(--ink); padding-top: 22px; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink2); } /* ── Footer ───────────────────────────────────────────────────────────────── */ .site-footer { margin-top: 120px; padding-bottom: 64px; } .footer-inner { border-top: 1px solid var(--hair); padding-top: 34px; display: flex; align-items: baseline; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .footer-links { display: flex; gap: 30px; align-items: baseline; font-size: 13px; color: var(--nav); flex-wrap: wrap; } .footer-link { color: var(--nav); } /* Hidden until landing.js runs — a control that can't act shouldn't show. */ .theme-toggle { display: none; gap: 12px; align-items: baseline; } html.js .theme-toggle { display: flex; } .theme-btn { appearance: none; background: none; border: none; margin: 0; padding: 0 0 2px; font-family: var(--mono); font-size: 12px; color: var(--fade); cursor: pointer; border-bottom: 1px solid transparent; } .theme-btn[aria-pressed='true'] { color: var(--ink); border-bottom-color: var(--ink); } /* ── Breakpoints (mirroring the blueprint) ────────────────────────────────── */ @media (max-width: 1240px) { .hero-title { font-size: 60px; } .two { gap: 64px; } } @media (max-width: 1060px) { .hero-title { font-size: 50px; } .hero-sub { font-size: 19px; } .sechead { font-size: 36px; } .two { gap: 48px; } } @media (max-width: 900px) { .container { padding-inline: 44px; } .hero-title { font-size: 44px; letter-spacing: -0.015em; } .hero-sub { font-size: 19px; } .two { grid-template-columns: 1fr; gap: 40px; } .sechead { font-size: 31px; } .ticker-band { font-size: 24px; } .section { padding-top: 92px; } } @media (max-width: 760px) { .container { padding-inline: 22px; } .header-inner { padding-top: 26px; } .section { padding-top: 78px; } .section--access { padding-top: 84px; } .site-footer { margin-top: 84px; padding-bottom: 52px; } .hero { margin-top: 66px; } .hero-title { font-size: 33px; line-height: 1.1; letter-spacing: -0.012em; } .hero-br { display: none; } .hero-sub { font-size: 18.5px; line-height: 1.62; margin-top: 32px; } .cta-row { margin-top: 58px; gap: 20px; } .cta { display: block; width: 100%; text-align: center; padding: 18px 0; font-size: 18px; } .nav-link { display: none; } .nav { gap: 0; } .nav-cta { padding: 15px 0 13px; } .ticker-wrap { margin-top: 76px; padding-top: 40px; padding-bottom: 44px; } .ticker-band { font-size: 20px; gap: 32px; padding-right: 32px; } .ticker-cap { font-size: 17px; margin-top: 28px; } .two { gap: 34px; } .sechead { font-size: 27px; line-height: 1.18; margin-top: 20px; } .body-copy { font-size: 17.5px; line-height: 1.7; margin-top: 20px; } .bar { grid-template-columns: 1fr 62px; gap: 14px; padding: 15px 0; } .moment { grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; } .clients { grid-template-columns: 1fr; } .client, .client:nth-child(even) { padding: 15px 0; border-left: none; } .ladder-row { grid-template-columns: 1fr; gap: 5px; padding: 15px 0; } .ladder-row--big { gap: 7px; padding: 19px 0; } .faq-row { padding: 20px 2px; grid-template-columns: 1fr 24px; gap: 14px; min-height: 58px; } .faq-q { font-size: 20px; line-height: 1.35; } .faq-a { font-size: 16.5px; line-height: 1.68; } .access-line { font-size: 18px; margin-top: 36px; } .footer-inner { flex-direction: column; align-items: flex-start; gap: 22px; } .footer-links { gap: 22px; row-gap: 12px; } /* Bigger tap target without moving the baseline. */ .theme-btn { padding: 13px 8px; margin: -13px 0; } .theme-toggle { gap: 4px; margin-left: -8px; } } @media (max-width: 380px) { .container { padding-inline: 18px; } .hero-title { font-size: 29px; } .hero-sub { font-size: 17.5px; } .sechead { font-size: 25px; } .ticker-band { font-size: 18px; gap: 24px; padding-right: 24px; } .bar { grid-template-columns: 1fr 54px; gap: 12px; } } /* ── Large screens (additive tier, decided 2026-07-28) ──────────────────────── The blueprint's 1240px frame reads sparse past ~1600px: one tier scales the container and the type ~20% and lets the captures use their resolution. Growth is capped here on purpose — line length stays under ~80 characters, and the page keeps its margins. Everything ≤1240px is untouched. Figure heights preserve each capture's composed aspect ratio (content width 1392 vs 1072): the crop lines must keep landing in whitespace. */ @media (min-width: 1600px) { .container { max-width: 1560px; } .header-inner { padding-top: 40px; } .wordmark svg { height: 12px; } .nav { font-size: 14px; } .hero { margin-top: 132px; max-width: 1240px; } .hero-title { font-size: 90px; } .hero-sub { font-size: 24px; max-width: 780px; } .cta { font-size: 21px; padding: 15px 44px; } .cta-note { font-size: 13px; } .ticker-wrap { margin-top: 120px; padding: 62px 0 66px; } .ticker-label { font-size: 12px; } .ticker { margin-top: 40px; } .ticker-band { font-size: 38px; gap: 64px; padding-right: 64px; } .ticker-cap { font-size: 22px; margin-top: 44px; } .section { padding-top: 140px; } .section--idea { padding-top: 132px; } .section--access { padding-top: 152px; } .rule-top { padding-top: 46px; } .rule-top--access { padding-top: 64px; } .kicker { font-size: 12px; } .two { gap: 120px; } .sechead { font-size: 50px; } .sechead--lg { font-size: 56px; } .body-copy { font-size: 21.5px; max-width: 600px; } .body-copy--access { max-width: 690px; } .shot-caption { font-size: 13px; } .bar-label { font-size: 12.5px; } .bars-note { font-size: 13px; } .finding-quote { font-size: 20.5px; } .finding-cap { font-size: 13px; } .moment-title { font-size: 25px; } .moment-desc { font-size: 14.5px; } .silence { font-size: 22px; } .client { font-size: 19px; } .memory-label, .maydo-label { font-size: 12px; } .memory-title { font-size: 30px; } .maydo-list { font-size: 14.5px; } .ladder-label { font-size: 12.5px; } .ladder-val { font-size: 21px; } .ladder-val--big { font-size: 34px; } .ladder-note { font-size: 13px; } .faq { max-width: 1040px; } .faq-q { font-size: 26px; } .faq-a { font-size: 19px; max-width: 780px; } .access-head { max-width: 960px; } .access-line { font-size: 22px; max-width: 720px; } .site-footer { margin-top: 140px; } .footer-links { font-size: 14px; } .theme-btn { font-size: 13px; } } /* ── Reduced motion: a first-class static page ────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } .ticker { -webkit-mask-image: none; mask-image: none; } .ticker-row { width: auto; flex-wrap: wrap; animation: none; } .ticker-band { white-space: normal; flex-wrap: wrap; padding-right: 0; } [data-dup] { display: none; } }