/* ============================================================ CORRIDOR — SHARED TOKEN LAYER Derived from computed styles on moderntreasury.com (Aug 2026). Every value below is measured, not invented. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Schibsted+Grotesk:ital,wght@0,400..700;1,400..700&family=Newsreader:ital,opsz,wght@0,6..72,300..500;1,6..72,300..500&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { /* ---- INK ------------------------------------------------ MT never uses pure black for text. #151515 is the ink; body copy sits at 80% of it. This single choice does more for perceived refinement than any other token here. */ --ink: #151515; --ink-80: rgba(21, 21, 21, 0.80); --ink-60: rgba(21, 21, 21, 0.60); --ink-50: rgba(21, 21, 21, 0.50); /* ---- GROUND --------------------------------------------- */ --paper: #ffffff; --paper-warm: #f8f5f4; /* warm off-white */ --paper-cool: #f0f8f9; /* cool off-white */ /* ---- ACCENT --------------------------------------------- One family only: green. Mint is a *surface*, never text. The two deep greens are text-on-mint / text-on-paper. */ --mint: #bae0cf; --green-mid: #29735c; --green-deep: #1c493c; --green-ink: #0c221d; /* ---- RULES ---------------------------------------------- 36 hairlines on MT's homepage. Rules are the primary structural device — they replace cards and shadows. */ --rule: #dcdcdc; --rule-soft: rgba(21, 21, 21, 0.20); --rule-invert: rgba(255, 255, 255, 0.20); /* ---- TYPE FAMILIES -------------------------------------- */ --f-grotesk: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; --f-display: 'Schibsted Grotesk', 'Instrument Sans', ui-sans-serif, sans-serif; --f-serif: 'Newsreader', ui-serif, Georgia, serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; /* ---- TYPE SCALE (measured off MT, rem at 16px root) ----- Ratios matter more than sizes: display leads at 1.10, everything else at 1.25–1.30. */ --t-d1: 4.4375rem; /* 71px / 78.1px — 1.10 */ --t-d2: 2.9375rem; /* 47px / 58.75px — 1.25 */ --t-h3: 2rem; /* 32px / 40px — 1.25 */ --t-h4: 1.3125rem; /* 21px / 27.3px — 1.30 */ --t-body: 1rem; /* 16px / 24px — 1.50 */ --t-sm: 0.875rem; /* 14px — UI */ --t-xs: 0.75rem; /* 12px — labels*/ --lh-d1: 1.10; --lh-d2: 1.25; --lh-h: 1.28; --lh-body: 1.5; /* ---- WEIGHTS ------------------------------------------- THE defining constraint. MT's weight census across ~900 elements: 400, 500, 360, 600, 330, 450. Nothing above 600, and 600 only on 14px UI text. Display type is 450. Never set a display weight of 700+. */ --w-display: 450; --w-text: 400; --w-medium: 500; --w-ui: 600; /* 14px buttons and small labels ONLY */ /* ---- RADII --------------------------------------------- Census: 2px ×64, 4px ×27, 8px ×11. 2px is the house radius. Nothing is ever pill-shaped or 16px+. */ --r: 2px; --r-md: 4px; /* ---- SPACE --------------------------------------------- */ --pad-x: 1.25rem; /* 20px mobile edge */ --pad-x-md: 1.5rem; /* 24px */ --pad-x-lg: 3rem; /* 48px desktop */ --sec-y: 3.75rem; /* 60px between sections */ --page-y: 5.625rem; /* 90px page top / bottom */ /* ---- MEASURE ------------------------------------------- */ --w-outer: 90rem; /* 1440 */ --w-content: 75rem; /* 1200 */ --w-wide: 56rem; /* 896 */ --w-read: 42rem; /* 672 — max measure for prose */ /* ---- BORDER / FOCUS ----------------------------------- */ --hair: 1px; } /* ============================================================ RESET — minimal, no opinions beyond box model and rhythm ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--f-grotesk); font-size: var(--t-body); line-height: var(--lh-body); font-weight: var(--w-text); color: var(--ink-80); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; /* never let the browser fake a weight */ } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } h1, h2, h3, h4 { color: var(--ink); font-weight: var(--w-display); letter-spacing: normal; /* MT tracks nothing. Resist tightening. */ text-wrap: balance; } a { color: inherit; text-decoration: none; } hr { border: 0; border-top: var(--hair) solid var(--rule); margin: 0; } /* Tabular figures wherever numbers are compared vertically. */ .tnum { font-variant-numeric: tabular-nums; } /* ============================================================ HOUSE PRIMITIVES ============================================================ */ /* Edge padding — the only responsive step MT makes. */ .edge { padding-inline: var(--pad-x); } @media (min-width: 48rem) { .edge { padding-inline: var(--pad-x-md); } } @media (min-width: 64rem) { .edge { padding-inline: var(--pad-x-lg); } } .shell { max-width: var(--w-outer); margin-inline: auto; } .content { max-width: var(--w-content); margin-inline: auto; } .read { max-width: var(--w-read); } /* Buttons — measured from MT: 14px / 600 / 2px radius / 6px 12px padding. Deliberately small. A CTA the size of a dinner plate is the loudest AI tell there is. */ .btn { display: inline-block; font: var(--w-ui) var(--t-sm)/1.4 var(--f-grotesk); padding: 0.5rem 0.875rem; border-radius: var(--r); border: var(--hair) solid var(--ink); background: var(--ink); color: var(--paper); } .btn--ghost { background: transparent; color: var(--ink); } /* Text link with a trailing mark. MT uses a literal arrow glyph, not an icon. Kept as a character so we ship no SVG. */ .lnk { font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--ink); border-bottom: var(--hair) solid var(--rule-soft); padding-bottom: 2px; } .lnk::after { content: ' \2192'; } /* Eyebrow / section label. Mono, small, minimally tracked — the one place tracking is defensible. */ .eyebrow { font: var(--w-text) var(--t-xs)/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-50); } /* ============================================================ SCROLL — Lenis, mandatory ------------------------------------------------------------ Lenis 1.3.26 is a required dependency on every page. It is a third-party scroll implementation, not motion we authored, so it does not breach the no-animation rule — it replaces the browser's scroll response rather than adding an effect. Two things must be true for it to work: 1. scroll-behavior is NEVER set to smooth anywhere. It fights Lenis and the result stutters. 2. lenis.css must load. It is linked from CDN per page rather than reproduced here, so it stays correct across versions. Its `transition-property: scroll-behavior` rule is vendor CSS and is exempt from the no-transition rule below. House configuration, identical on all three pages: new Lenis({ autoRaf: true, lerp: 0.09, // slightly smoother than the // 0.1 default, still tight. // Heavy inertia reads as // agency-template; resist it. smoothWheel: true, syncTouch: false, // leave touch native — synced // touch feels broken on iOS anchors: true, // in-page nav glides respectReducedMotion: false, // mandatory per brief }) NOTE on that last line: Lenis honours prefers-reduced-motion by default. Setting it false overrides a user's OS-level accessibility preference. That is a deliberate instruction, recorded here so it is a choice and not an accident. ============================================================ */ html { scroll-behavior: auto; } /* never smooth — Lenis owns this */ /* ============================================================ NON-NEGOTIABLES for every page built on this layer ------------------------------------------------------------ No @keyframes. No transform. No transition. No CSS animation. No JS of our own beyond the Lenis init block above. No , , icon fonts, emoji, or CSS gradients. No box-shadow. Depth comes from rules and ground tone only. No scroll-triggered reveals, parallax, or sticky theatrics — Lenis smooths the scroll, it does not license effects on it. ============================================================ */