/**
* ── FONTS, SELF-HOSTED, AND WHY THE HEADLINES WERE THICK ────────────
*
* These used to point at fonts.gstatic.com. They now point at files in media/,
* and that change IS the fix for the heavy titles. The story is worth keeping
* because nothing about it was visible from the CSS alone.
*
* WHAT THE FONT FILE ACTUALLY CONTAINS. Inspecting the variable Fraunces the
* source serves — the same file now sitting in media/ — its axes are:
*
* opsz min 9 DEFAULT 9 max 144
* wght min 100 DEFAULT 900 max 900
*
* Both defaults are the WRONG END. Unlike almost every variable font, this one
* defaults to 900 — Black — and to the 9pt optical size, which is the chunky
* small-text cut. So any moment this face is used without `font-variation-
* settings` taking effect, it renders as heavy as the family goes. There is no
* safe failure here: the fallback state is the thickest possible.
*
* WHAT WENT WRONG. Every rule below sets the axes (I checked: 17 of 17), so
* when the file loads the type is right. But the file was fetched from gstatic
* over the network, and this page is routinely opened straight off disk. When
* that request does not complete the stack fell through to
* `local("Times New Roman")` at `size-adjust: 115.45%` — a blunt, heavy serif
* at 115% size, which is exactly "the titles are too thick".
*
* Self-hosting removes the network from the question entirely. It also drops
* the old "Fraunces Static" face, which pointed at a second gstatic URL I could
* never verify from here.
*
* WHAT THE LIVE SITE ACTUALLY RENDERS, measured rather than read. Its CSS says
* `"wght" 300`, but its @font-face pins the face with a single `font-weight:
* 400`. Measuring the stems in a screenshot of the real hero gives a stem width
* of 0.088 em; rendering this same file at 68px gives 0.059 em at wght 300 and
* 0.088 em at wght 400. So the live site renders 400, not the 300 it declares.
* The single-value `font-weight: 400` below reproduces that, and — because it
* pins the axis — it also means that even if `font-variation-settings` were
* ignored, the worst case is 400 rather than the file's native 900.
*
* THE PLACEHOLDERS stay as a last resort, metric-matched so a swap does not
* shove the layout around. With the fonts local they should never be reached.
*/
/* Fraunces — the variable file, opsz and wght axes intact, served locally. */
@font-face {
font-family: "Fraunces Variable";
src: url("media/fraunces-var.woff2") format("woff2");
font-display: swap;
font-style: normal;
/* Single value, as the source has it: pins wght to 400 instead of letting
the file's own 900 default through. NOT a `100 900` range. */
font-weight: 400;
}
@font-face {
font-family: "Fraunces Variable Placeholder";
src: local("Times New Roman");
ascent-override: 84.71%;
descent-override: 22.09%;
line-gap-override: 0%;
size-adjust: 115.45%;
}
/* DM Sans — one file per weight the page actually uses, also local. */
@font-face {
font-family: "DM Sans";
src: url("media/dmsans-400.woff2") format("woff2");
font-display: swap; font-style: normal; font-weight: 400;
}
@font-face {
font-family: "DM Sans";
src: url("media/dmsans-500.woff2") format("woff2");
font-display: swap; font-style: normal; font-weight: 500;
}
@font-face {
font-family: "DM Sans";
src: url("media/dmsans-600.woff2") format("woff2");
font-display: swap; font-style: normal; font-weight: 600;
}
@font-face {
font-family: "DM Sans";
src: url("media/dmsans-700.woff2") format("woff2");
font-display: swap; font-style: normal; font-weight: 700;
}
@font-face {
font-family: "DM Sans Placeholder";
src: local("Arial");
ascent-override: 94.36%;
descent-override: 29.49%;
line-gap-override: 0%;
size-adjust: 105.13%;
}
/**
* SPY — the home page. Loaded ONLY by index.html.
*
* This is a faithful rebuild of the Inyo landing page's structure and design
* system, with Spy's content in it. Deliberately standalone: it does not load
* style.css or app.css, because those describe a different (flatter, sans-only)
* system and the two cascades would fight over every heading.
*
* ── TOKENS, TAKEN FROM THE SOURCE ────────────────────────────────────
*
* These are the actual values off Inyo's published stylesheet, not an
* approximation:
*
* #f7f4ef paper #f1efea paper, one step down (section gradients)
* #211d18 ink #383838 body text
* #f5ff66 the yellow #fcffcc pale yellow (the story card)
* #e7e3da the "them" chat bubble
*
* Note the yellow is #f5ff66 — softer and greener than a true neon. It is still
* a SURFACE, never a text colour: 1.1:1 on paper, but 14.9:1 with #211d18 on
* top of it. Every use below puts ink on yellow, never the reverse.
*
* ── TYPE ─────────────────────────────────────────────────────────────
*
* Fraunces Variable for display, DM Sans for everything else, both from Google
* Fonts. This is a real third-party dependency and a real trade: elsewhere on
* this site I argued against webfonts and used a system stack. Here the fonts
* ARE the design — Fraunces at weight 300 with a high optical size is what
* makes the headlines look like this rather than like a template — so they earn
* the request. `display=swap` means a slow font never blocks the text.
*
* The optical-size axis matters and is easy to lose: `opsz 144` on h1 and
* `opsz 60` on h2 are what give the big text its fine, high-contrast strokes.
* Dropping to the default optical size makes it look like a different typeface.
*
* ── THE SCROLL CHOREOGRAPHY ──────────────────────────────────────────
*
* Several sections are TALL WRAPPERS containing a `position: sticky` stage.
* The wrapper's height is the scroll budget; the stage stays pinned while you
* scroll through it, and home.js maps scroll position within the wrapper to a
* 0–1 progress value it writes back as `--p` on the stage. Everything that
* animates reads `--p`.
*
* That is why the runway heights below (180vh, 400vh, 330vh) look arbitrary:
* each one is "how much scrolling this scene is worth". Shrink one and its
* animation just plays faster.
*/
/* ── tokens ──────────────────────────────────────────────────────────*/
:root {
--paper: #f7f4ef;
--paper-2: #f1efea;
--ink: #211d18;
--body: #383838;
--yellow: #f5ff66;
--yellow-pale: #fcffcc;
--bubble-them: #e7e3da;
/**
* The source uses #a89e8e for the chat status line. That is 2.4:1 on paper —
* real text, well under AA. Same hue, darkened to 4.5:1. It is the one token
* here that deliberately departs from the original, and this is why.
*/
--muted: #766f63;
/* "Fraunces Static" is gone — it was a second unverifiable gstatic URL, and
with the real file served locally there is nothing left for it to catch. */
--display: "Fraunces Variable", "Fraunces Variable Placeholder", serif;
--sans: "DM Sans", "DM Sans Placeholder", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
background: var(--paper);
color: var(--body);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
/**
* ── THE MOBILE SETTINGS ──────────────────────────────────────────
*
* `overscroll-behavior: none` stops the iOS rubber-band. Without it, a hard
* flick past the top shows a band of the browser's own background above the
* paper — which, on a page that now runs under the status bar, is the exact
* white gap viewport-fit=cover was added to remove.
*
* `-webkit-tap-highlight-color: transparent` removes the grey box iOS flashes
* over anything tappable. On a page whose interactive elements are pills and
* a nav that already have their own pressed states, that flash reads as a
* rendering fault rather than feedback.
*
* `text-size-adjust` is on above: it stops Safari inflating body text
* on rotation, which would otherwise reflow every measured line on this page.
*/
overscroll-behavior: none;
-webkit-tap-highlight-color: transparent;
}
/* ── type ────────────────────────────────────────────────────────────*/
/**
* WEIGHT 300, NOT 400 — and the difference is why this looked too heavy.
*
* The source pairs `font-weight: 400` with `font-variation-settings: "wght"
* 300`, which is a contradiction that only resolves the light way if the
* variable font loads AND the browser applies the axis. Whenever either fails
* — a slow font, a blocked request, the metric-matched Times fallback — the
* declared 400 is what renders, and at 80px that reads as noticeably bolder.
*
* Declaring 300 makes the two agree, so the headline is light under every
* condition. `font-synthesis-weight: none` is the third guard: without it a
* browser that can't find a light face will FAKE one by smearing the strokes,
* which is the heaviest-looking outcome of all.
*/
/**
* ── THE HEADING SIZES ARE STEPPED, NOT FLUID ─────────────────────────
*
* h1 and h2 below use the source's four fixed breakpoint sizes rather than the
* `clamp(30px, 6.4vw, 80px)` they had. That clamp is why the titles read as too
* thick: nothing about the WEIGHT was wrong — opsz, wght 300, the character
* variants, letter-spacing and line-height all already matched the source's
* presets exactly — but the type was up to 43% too BIG, and big type at a fixed
* weight looks heavy.
*
* h1 h2
* >=1440 80px 32px (>=1200)
* >=810 56px <- clamp gave 80 28px <- clamp gave 32
* >=390 34px <- clamp gave 45 24px
* <390 30px 22px
*
* The 56px step is the one that matters: the source drops h1 by a third the
* moment you are below 1440, so on an ordinary laptop the clamp was rendering
* 80px against their 56px.
*
* Read from the presets in EInKmaGvJ.js (h1) and JyyxdAYKi.js (h2) in the saved
* page. Note EInKmaGvJ also contains `@media (max-width:1439px) and
* (min-width:1440px)` — a rule that can never match, so its 64px step never
* fires. That is a Framer serialisation artefact, not a size in the design, and
* it is deliberately not reproduced here.
*/
h1 {
font-family: var(--display);
font-size: 80px;
font-weight: 300;
/**
* THE CHARACTER VARIANTS — this is what was actually missing.
*
* The source sets `font-open-type-features: 'blwf' on, 'cv03' on, 'cv04' on,
* 'cv09' on, 'cv11' on`. In Fraunces those `cvXX` axes are CHARACTER
* VARIANTS: they substitute different letterforms, not different weights. Without
* them you get Fraunces' default shapes, which are a recognisably different
* face — rounder, more conventional — no matter how the weight and optical
* size are set. Every weight fix in the world would not have closed the gap.
*/
font-feature-settings: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;
font-variation-settings: "opsz" 144, "wght" 300;
font-synthesis-weight: none;
-webkit-font-synthesis: none;
letter-spacing: -0.01em;
line-height: 1.04em;
color: var(--body);
text-align: center;
}
h2 {
font-family: var(--display);
font-size: 32px;
font-weight: 300;
/**
* THE CHARACTER VARIANTS — this is what was actually missing.
*
* The source sets `font-open-type-features: 'blwf' on, 'cv03' on, 'cv04' on,
* 'cv09' on, 'cv11' on`. In Fraunces those `cvXX` axes are CHARACTER
* VARIANTS: they substitute different letterforms, not different weights. Without
* them you get Fraunces' default shapes, which are a recognisably different
* face — rounder, more conventional — no matter how the weight and optical
* size are set. Every weight fix in the world would not have closed the gap.
*/
font-feature-settings: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;
font-variation-settings: "wght" 300, "opsz" 60;
font-synthesis-weight: none;
-webkit-font-synthesis: none;
letter-spacing: 0;
line-height: 1.2em;
color: var(--ink);
text-align: center;
}
/** The 16px/500 body preset. Centred by default, like the source. */
.lede {
font-size: clamp(13px, 1.2vw, 16px);
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.5em;
color: var(--body);
text-align: center;
}
/** The 14px/700 label preset — nav, badges, footer links. */
.label {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.5em;
color: var(--body);
}
.body-copy {
font-size: 16px;
line-height: 1.4em;
color: var(--body);
text-wrap: balance;
}
a { color: inherit; }
/* ── fixed logo, top centre ──────────────────────────────────────────*/
.fixed-logo {
position: fixed;
/**
* SAFE AREA. With viewport-fit=cover the page runs under the status bar and
* the notch, so a fixed element at a plain `top: 40px` can end up behind the
* clock. env() resolves to 0 on every device without a cutout, so this is the
* same 40px everywhere else.
*/
top: calc(40px + env(safe-area-inset-top, 0px));
left: 0;
right: 0;
z-index: 10;
display: flex;
justify-content: center;
pointer-events: none;
}
.fixed-logo a {
pointer-events: auto;
text-decoration: none;
font-family: var(--display);
font-variation-settings: "opsz" 144, "wght" 300;
font-synthesis-weight: none;
font-feature-settings: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;
font-size: 26px;
letter-spacing: 0.3em;
text-indent: 0.3em;
color: var(--ink);
}
@media (max-width: 809px) {
.fixed-logo { top: calc(20px + env(safe-area-inset-top, 0px)); }
}
/**
* The heading steps. Source values; see the long note above h1.
* h1 breaks at 1440 / 810 / 390, h2 at 1200 / 810 / 390 — they are NOT the
* same set, which a single shared media query would have quietly flattened.
*/
@media (max-width: 1439px) { h1 { font-size: 56px; } }
@media (max-width: 1199px) { h2 { font-size: 28px; } }
@media (max-width: 809px) { h1 { font-size: 34px; } h2 { font-size: 24px; } }
@media (max-width: 389px) { h1 { font-size: 30px; } h2 { font-size: 22px; } }
/**
* ── 100svh, WITH 100vh AS THE FALLBACK ───────────────────────────────
*
* On iOS Safari `100vh` is the height of the viewport WITH THE ADDRESS BAR
* HIDDEN — the largest it can ever be. It does not shrink when the bar is
* showing, which it is whenever someone arrives. So every pinned stage on this
* page was ~114px taller than the window on an iPhone 14, and ~239px taller on
* an SE: the bottom of each composition sat under the fold, and the last beat
* of each scroll section played somewhere you could not see.
*
* `svh` is the SMALL viewport height — the window with the browser chrome
* showing. Sizing pinned content to it means nothing is ever hidden.
*
* NOT `dvh`. The dynamic unit tracks the bar as it collapses, so every stage
* would resize mid-scroll — and these are sticky stages driven by a scroll
* progress that reads their height. Resizing them while the user scrolls is
* exactly the jitter this is meant to avoid.
*
* The plain `100vh` line stays first so anything without svh support (Safari
* below 15.4) keeps the old behaviour rather than collapsing to auto.
*/
/* ── hero ────────────────────────────────────────────────────────────*/
.hero {
min-height: 640px;
height: 100vh;
height: 100svh;
padding: 0 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: clip;
}
.hero-content {
max-width: 780px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.eyebrow { white-space: pre-wrap; }
.eyebrow a { font-weight: 700; text-decoration: none; }
.eyebrow a:hover { color: #5f6600; }
@media (max-width: 1199px) { .hero { padding: 0 64px; } }
@media (max-width: 809px) {
.hero { padding: 0 24px; }
}
/* ── scroll-driven character reveal ──────────────────────────────────
Each character is its own inline-block so it can blur and rise
independently. home.js sets --c (0..1) per character. */
.reveal span.ch {
display: inline-block;
opacity: calc(var(--c, 0));
filter: blur(calc((1 - var(--c, 0)) * 10px));
transform: translateY(calc((1 - var(--c, 0)) * 28px));
will-change: opacity, filter, transform;
}
.reveal .word { white-space: nowrap; }
/* ── problem: a 180vh wrapper with a pinned 100vh stage ──────────────*/
/**
* NO BACKGROUND HERE — and that is the fix, not an omission.
*
* The halftone is drawn on a FIXED canvas at z-index 0, underneath `main`
* (z-index 1). Any section that paints its own opaque background therefore
* covers the canvas completely. The hero has none, so the dots showed; this
* wrapper had `background: var(--paper)`, so the moment the hero ended the
* circle was guillotined — exactly at the boundary between the first
* animation and the second.
*
* `body` is already --paper, so removing this changes nothing visually and
* lets the circle travel, land and ripple through this whole section, which
* is where the landing beat actually happens.
*/
.pin-problem { height: 180vh; position: relative; }
.stage-problem {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
min-height: 700px;
padding: 104px 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: clip;
}
/** The empty circle between the two lines — pure negative space in the
original, and it is what stops the two statements running together. */
.circle-spacer { width: 376px; height: 376px; flex: none; }
@media (max-width: 809px) {
/* 700px is taller than an iPhone SE's visible window (553px). The floor
exists so the desktop composition does not crush; on a phone the stage is
a column and svh already guarantees it fits. */
.stage-problem { padding: 104px 20px; min-height: 0; }
.circle-spacer { width: 200px; height: 200px; }
}
/* ── the phone ───────────────────────────────────────────────────────
Glass slab: translucent fill, a blur, a white hairline, and the layered
shadow that gives it its lift. */
.phone {
width: 300px;
height: 600px;
padding: 18px;
border-radius: 46px;
/**
* 0.3 was the source's value — and it worked there because the halftone had
* already faded out by the time these phones appeared. Ours keeps drifting
* behind them, so at 0.3 the dots read straight through the chat and the
* reservation card, which is the "background coming over" the content. 0.86
* still reads as glass against the paper but gives the screens a surface to
* sit on.
*/
background: rgba(252, 251, 247, 0.62);
border: 1px solid rgba(255, 255, 255, 0.9);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
display: flex;
flex-direction: column;
align-items: center;
overflow: clip;
position: relative;
box-shadow:
0 24px 48px rgba(33, 29, 24, 0.08),
0 2px 6px rgba(33, 29, 24, 0.04),
inset 0 0 24px rgba(33, 29, 24, 0.07),
inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
@media (max-width: 809px) { .phone { width: 200px; height: 400px; border-radius: 32px; } }
.chat-header {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px;
flex: none;
}
.avatar { width: 40px; height: 44px; flex: none; }
@media (max-width: 809px) { .avatar { width: 20px; height: 22px; } }
.chat-name { display: flex; flex-direction: column; gap: 1px; }
.chat-name .row { display: flex; align-items: center; gap: 6px; }
.chat-name b {
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #4aab73; }
.chat-status { font-size: 11px; color: var(--muted); }
/**
* `overflow: hidden` is load-bearing here. home.js pushes #thread-decide down
* by up to 162px with a transform; a transform does not affect layout, so
* without clipping the last bubble simply paints across the input bar at the
* bottom of the handset. Same failure the iMessage body had.
*/
.chat-body {
flex: 1;
width: 100%;
min-height: 0;
overflow: hidden;
padding: 8px 0 14px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
}
/* Bubbles. Yellow = the table/host, paper = you. */
.b {
width: 194px;
padding: 12px 13px;
border-radius: 16px 16px 16px 0;
background: rgba(245, 255, 102, 0.9);
font-family: var(--display);
font-variation-settings: "wght" 300, "opsz" 14;
font-feature-settings: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;
font-size: 12px;
line-height: 1.4em;
color: var(--ink);
/* Scroll-driven: home.js sets --s per bubble. */
opacity: var(--s, 0);
transform: translateY(calc((1 - var(--s, 0)) * 24px))
scale(calc(0.7 + var(--s, 0) * 0.3));
will-change: opacity, transform;
}
.b-you-row {
display: flex;
justify-content: flex-end;
width: 100%;
opacity: var(--s, 0);
transform: translateY(calc((1 - var(--s, 0)) * 24px))
scale(calc(0.7 + var(--s, 0) * 0.3));
will-change: opacity, transform;
}
.b-you {
width: 194px;
padding: 10px 13px;
border-radius: 16px 16px 0 16px;
background: var(--bubble-them);
font-family: var(--sans);
font-size: 11px;
letter-spacing: -0.33px;
line-height: 1.28em;
color: var(--ink);
}
.b-you.fit { width: min-content; white-space: nowrap; }
.im.you.fit { width: min-content; white-space: nowrap; }
@media (max-width: 809px) { .b, .b-you { width: 150px; } }
.chat-input {
flex: none;
width: 100%;
height: 51px;
padding: 0 10px 0 18px;
display: flex;
align-items: center;
border-radius: 100px;
background: rgba(255, 255, 255, 0.35);
border: 1px solid rgba(33, 29, 24, 0.06);
font-size: 12px;
letter-spacing: -0.12px;
color: var(--muted);
}
@media (max-width: 809px) { .chat-input { display: none; } }
/** A second thread stacked over the first, revealed later in the scroll. */
.thread-2 { position: absolute; top: 8px; left: 0; width: 100%;
display: flex; flex-direction: column; gap: 16px; }
.thread-3 { position: absolute; top: 288px; left: 0; width: 100%;
display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 809px) { .thread-3 { top: 195px; } }
@media (max-width: 809px) {
}
/* ── the two pinned story stages ─────────────────────────────────────*/
.chapter { position: relative; overflow: visible; }
/* Starts transparent so the tail of the dive is still visible, then eases
into the banded paper the rest of the page sits on. */
.chapter-chat { background: linear-gradient(rgba(247,244,239,0) 0%, #f7f4ef 8%, #f1efea 22%); }
.stage {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
min-height: 792px;
padding: 96px 120px;
display: flex;
align-items: center;
justify-content: space-between;
overflow: visible;
z-index: 2;
}
.col {
flex: 1 0 0;
width: 1px;
max-width: 380px;
height: 600px;
position: relative;
}
.col-inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
opacity: var(--s, 0);
transform: translateY(calc((1 - var(--s, 0)) * 30px));
will-change: opacity, transform;
}
.col-left .col-inner { padding-right: 40px; align-items: flex-start; }
.col-right .col-inner { padding-left: 40px; align-items: flex-start; }
.col h2 { text-align: left; }
.col .body-copy { max-width: 300px; }
.runway { height: 400vh; }
.runway-short { height: 330vh; }
/** The little outlined pill under each column heading. */
.badge {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 18px;
border: 1px solid var(--yellow);
border-radius: 16px;
background: transparent;
}
.badge svg { width: 24px; height: 24px; flex: none; }
@media (max-width: 1199px) {
.stage { padding: 96px 48px; }
.col-left { position: absolute; right: 48px; top: 96px; bottom: 96px;
width: 380px; flex: none; height: auto; }
}
/**
* ── ON A PHONE THE STAGE IS TWO ROWS: TEXT, THEN THE HANDSET ─────────
*
* The desktop stage is three flex columns — text, phone, text — which has no
* meaning at 390px wide. What it used to do instead was leave the phone
* centred in the stage and pin `.col` absolutely at `top: 88px`, so the copy
* was laid OVER the handset. Both are opaque, so whichever painted second won
* and the other was unreadable.
*
* A two-row grid fixes it properly: row one holds the text, row two the phone,
* and neither can enter the other's row.
*
* BOTH COLUMNS SHARE ROW ONE. Every chapter has two of them — "We start with
* who you actually are" and "Then Spy keeps asking" — and they cross-fade as
* you scroll, so only one is ever visible. Giving them the same grid cell
* (`grid-area: 1 / 1`) lets them stack on each other exactly as they did
* before, while still keeping the phone out from under them. Putting them in
* separate rows would reserve space for a column that is invisible.
*
* The decision chapter's title layer joins them there. On desktop it is
* absolutely positioned at `top: 96px` with the phone dropping clear of it;
* that arithmetic is meaningless once the phone is in a row of its own.
*/
@media (max-width: 809px) {
.stage {
display: grid;
grid-template-rows: auto 1fr;
justify-items: center;
align-content: start;
gap: 14px;
padding: calc(64px + env(safe-area-inset-top, 0px))
calc(20px + env(safe-area-inset-right, 0px))
calc(20px + env(safe-area-inset-bottom, 0px))
calc(20px + env(safe-area-inset-left, 0px));
min-height: 100vh;
min-height: 100svh;
}
.col,
.mutual-text {
position: relative;
grid-area: 1 / 1;
inset: auto;
width: 100%;
max-width: 360px;
height: min-content;
flex: none;
}
.phone,
.phone-hand,
.phone-drop { grid-area: 2 / 1; }
.col-inner { position: relative; inset: auto; align-items: center; padding: 0; gap: 10px; }
.col-left .col-inner, .col-right .col-inner { padding: 0; align-items: center; }
.col h2, .col .body-copy { text-align: center; }
.mutual-text > div { width: 100%; }
/* The little outlined pill under a heading is decoration, and on a phone it
is decoration competing with the handset for the same 200px of height. */
.col .badge { display: none; }
}
/**
* SHORT PHONES GET A SMALLER HANDSET — keyed on HEIGHT, not width.
*
* Two rows only fit if they both fit. At 200x400 the tallest chapter comes to
* 622px, which is fine on an iPhone 14 (730px visible) and 69px too tall on an
* SE (553px visible). Width would have been the wrong thing to test: the SE and
* the 13 mini are both 375px wide, but the mini is 812px tall and has no
* problem. `max-height` targets the device that actually has the problem.
*/
@media (max-width: 809px) and (max-height: 700px) {
.stage { padding: 52px 20px 16px; gap: 12px; }
.phone { width: 170px; height: 340px; border-radius: 28px; }
.quiz-letter { font-size: 40px; }
}
/* ── web logic ───────────────────────────────────────────────────────*/
.logic {
height: 100vh;
height: 100svh;
min-height: 640px;
padding: 96px 120px 100px;
background: linear-gradient(#f1efea 0%, #f7f4ef 30%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
position: relative;
overflow: clip;
}
/**
* The video layer.
*
* Masked top and bottom so it dissolves into the paper instead of ending on a
* hard edge — the same treatment the source gives it.
*/
.logic-bg {
position: absolute;
inset: 0;
z-index: 0;
-webkit-mask: linear-gradient(transparent 0%, #000 12%, #000 88%, transparent 100%);
mask: linear-gradient(transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.logic-bg video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/**
* THE SCRIM, and it is not decoration.
*
* The clip averages ~86% brightness but dips to 18% in places, and the text
* sits over the lower third. Without this, readability would depend on which
* frame happened to be playing — fine most of the time, unreadable for a
* second here and there, and impossible to test for.
*
* So the bottom of the video is washed back to paper. Contrast becomes a
* property of the layout rather than a property of the footage, and #383838
* body copy stays at its full 10.7:1 no matter what is moving underneath.
*/
.logic-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(247, 244, 239, 0) 0%,
rgba(247, 244, 239, 0.55) 42%,
rgba(247, 244, 239, 0.92) 66%,
var(--paper) 88%
);
}
.logic-text {
position: relative;
z-index: 1;
/**
* 460, not the source's 380. The heading gained a clause — "— that we share
* openly with you" — and at the desktop h2 size of 32px its middle line
* measures 403px, so 380 would have re-wrapped it mid-phrase underneath the
* explicit
s. Widening the column is the fix; shrinking the type to make
* it fit would have made this heading smaller than every other h2 on the page.
*/
width: 460px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
opacity: var(--s, 0);
transform: translateY(calc((1 - var(--s, 0)) * 24px));
}
@media (max-width: 809px) {
.logic { height: auto; min-height: 500px; padding: 64px 0 0;
justify-content: flex-start; gap: 32px; }
.logic-text { width: 100%; padding: 0 24px; order: 0; }
.logic-bg { position: relative; height: 240px; order: 1; }
}
/* ── the decision chapter, ending in yellow ──────────────────────────*/
/**
* ── THE PADDING AND THE YELLOW STOP ARE ONE MECHANISM ────────────────
*
* These three declarations are the source's, verbatim (`.framer-a2pfnd` in the
* saved page), and they only work together. I pulled them apart twice, so here
* is what each one is actually for.
*
* `padding-bottom: 400px` IS THE ROOM THE HAND NEEDS TO FADE OUT. The hand
* hangs ~759px below the stage's bottom edge and is masked from 52% to 81% of
* its own height, which lands well past the stage. Remove the padding and
* `overflow: clip` cuts the hand at the section's edge instead — at 37% of its
* height, where it is still fully opaque. That is a razor-straight horizontal
* line across the palm, and you see it the moment the stage comes unstuck and
* scrolls up. This is not spare space at the end of a section; it is the fade.
*
* `#f5ff66 88%` IS WHAT COLOUR THAT ROOM IS. The padding lies below the stage,
* so it is the only part of this section's own background anyone ever sees —
* the sticky stage covers the rest. Cream there reads as a hard-edged pale
* block between the yellow stage and the yellow mission. It does NOT slide a
* visible edge up through the composition, which is what I wrongly assumed
* when I deleted it: by the time this strip is exposed the stage above it is
* already opaque yellow.
*
* The stage ALSO fades to yellow on its own (see below). Both are needed: one
* colours the pinned layer, the other colours the strip underneath it.
*
* The bug that made all of this look like the padding's fault lived in home.js,
* not here — progressOf() counted the padding as scroll budget when the sticky
* constraint does not. It is fixed there, at the measurement, rather than by
* deleting design values that turn out to be load-bearing.
*/
/**
* 560px, not the source's 400. The one place I have deliberately gone past it.
*
* Work out where the mask actually finishes: the hand's top sits 116px above
* the phone's centre, so at a 900px-tall window it is 456px below the stage top,
* and the mask is fully transparent at 81% of 1203px = 974px further down —
* 1430px. The clip is at stage + padding = 1300px. The source therefore cuts its
* own hand at 70% of its height, where the mask has it at ~15% opacity: a faint
* straight edge, but a real one, and it is in the live site too.
*
* 560px puts the clip past the mask at 900px and 1080px windows outright, and
* leaves under 10% opacity at 700–800px. The cost is 160px more yellow before
* the mission — which is yellow anyway.
*/
.chapter-decision {
background: linear-gradient(#f7f4ef 0%, #f1efea 25% 82%, #f5ff66 88%);
padding-bottom: 560px;
overflow: clip;
}
/**
* The step down happens at 810, not 1199. The source steps at 1199, but the
* hand does not change size until 810 — between those two widths it is still
* 784x1203 and still needs the full 560px to fade in, so cutting the padding at
* 1199 reintroduces the edge at exactly the widths the source cuts it. Below
* 810 the hand drops to 523x802 and 360px is more than enough.
*/
@media (max-width: 809px) { .chapter-decision { padding-bottom: 360px; } }
/**
* The yellow, painted in place. home.js writes --bg 0→1 across the first 40%
* of the mutual beat; because the stage is the viewport-fixed layer while
* pinned, the cream→yellow change happens where you are looking.
*/
.chapter-decision .stage {
background: rgba(245, 255, 102, var(--bg, 0));
/* The phone is centred here at every width — there is no left column any
more, so `space-between` would otherwise shove it against the padding. */
justify-content: center;
}
/* The remaining column floats at the right rather than taking a flex slot,
so it cannot pull the phone off centre. */
.chapter-decision .col-right {
position: absolute;
right: 120px;
top: 96px;
bottom: 96px;
width: 380px;
flex: none;
height: auto;
}
@media (max-width: 1199px) { .chapter-decision .col-right { right: 48px; } }
/**
* THE TITLE LAYER — above the phone, not over it.
*
* Top-anchored at 96px, which is the other half of the landing geometry: the
* source lands the phone at a fixed 272px from the stage top *because* this
* layer occupies 96 + ~134, leaving a 40px gap. Centre the phone instead and
* the two collide, which is what was happening here.
*/
.mutual-text {
position: absolute;
top: 96px;
left: 0;
right: 0;
z-index: 6;
display: flex;
justify-content: center;
pointer-events: none;
}
.mutual-text > div {
width: 560px;
max-width: 90vw;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
opacity: var(--s, 0);
transform: translateY(calc((1 - var(--s, 0)) * 24px));
will-change: opacity, transform;
}
.mutual-text h2, .mutual-text .body-copy { text-align: center; }
.mutual-text .body-copy { max-width: 420px; }
@media (max-width: 809px) { .mutual-text { top: 88px; } }
/**
* THE DROP WRAPPER. Carries the hand and the phone together, so the grip cannot
* slip while they move. home.js writes the distances (--dx, --drop) and the two
* eased fractions (--sx, --k); the arithmetic lives here so the per-frame work
* is a custom-property write rather than a layout pass.
*
* TWO AXES, TWO CLOCKS.
*
* x — the phone sits OFF TO THE SIDE for the conversation, at the stage's
* left padding edge with the text to its right, then glides to centre.
* --dx is that offset (negative), --sx the slide, so the rest state is
* --sx 0 = fully left and the landed state is --sx 1 = centred.
*
* y — the descent onto the hand, --drop × --k.
*
* The slide FINISHES BEFORE THE HAND FADES IN, which is the constraint that
* fixes its window. The source can overlap the two because its hand is a
* separate stage-centred layer that the phone slides across to meet; ours is
* anchored to the phone (that is what keeps the grip true at every width), so
* it slides with it — and mid-slide the hand hangs 326px past the phone's left
* edge, i.e. off the side of the section. Finishing the glide by the time the
* hand becomes visible costs nothing and keeps both facts true.
*/
.phone-drop {
position: relative;
z-index: 3;
transform:
translateX(calc(var(--dx, 0px) * (1 - var(--sx, 0))))
translateY(calc(var(--drop, 0px) * var(--k, 0)));
will-change: transform;
}
/* .float-text used to hold the mutual-yes title over the pinned stage. It is
gone: floating the title OVER a centred phone is exactly the collision this
section had. .mutual-text (above) replaces it, top-anchored, with the phone
moving out from under it. */
/**
* THE HAND, with the source's own geometry.
*
* Not sized to the viewport: it hangs off a zero-size anchor at the centre of
* the phone, at top:-116 / left:-476, which is how the original keeps it in the
* same place relative to the handset at every window size. The mask fades it
* out below 52% so it never shows a cut edge at the bottom of the section.
*
* WHY THE ANCHOR IS THE PHONE AND NOT THE STAGE. The source centres this layer
* in the stage, and gets away with it because at desktop widths the stage's two
* equal columns leave the phone exactly in the middle — the two points coincide.
* They stop coinciding at <=1199px, where .col-left goes `position: absolute`,
* the flex row is down to the phone plus one column, and `space-between` pushes
* the phone hard against the left padding edge. A stage-centred hand stays in
* the middle, so it ends up next to the handset rather than holding it.
* Anchoring to the phone's own box makes -476/-116 mean the same thing at every
* width, which is what those numbers were calibrated for.
*
* WHERE -476 COMES FROM. The image is a right hand in profile: thumb up the
* left, fingers curled on the right, and the grip channel between them sits at
* x≈476 of the 784px render (x≈317 of the 523px mobile one — same fraction).
* Putting that column on the phone's centre line is what threads the handset
* through the grip, so the thumb reads to its left and the fingers to its right.
*
* The file is AVIF in the source archive despite its .png name — decoded and
* re-encoded to WebP here, 552K → 42K, because it is a soft translucent render
* that PNG stores very badly.
*/
/**
* The phone's flex slot, sized to the phone exactly so its centre IS the
* phone's centre. Both children are absolutely placed against it.
*/
.phone-hand {
position: relative;
flex: none;
width: 300px;
height: 600px;
}
@media (max-width: 809px) { .phone-hand { width: 200px; height: 400px; } }
.hand-layer {
position: absolute;
/* Dead centre of the phone, with no width of its own to bias the anchor. */
top: 50%;
left: 50%;
width: 0;
height: 0;
z-index: 1;
pointer-events: none;
overflow: visible;
}
.hand-anchor { position: relative; width: 0; height: 0; }
.hand {
position: absolute;
/**
* -276, NOT the source's -116. Both are correct; they are in different
* frames, and I had been mixing them.
*
* The source anchors the hand to the STAGE's centre and then adds a runtime
* correction — `settle = phoneDrop() - CANVAS_DROP` — because the -116 was
* authored for a phone that had dropped 160px. Run its own arithmetic at a
* 900px window: phoneDrop 122, settle -38, so the hand ends at stageCentre
* -154, while the phone's centre ends at stageCentre +122. The gap between
* them is 276px. Ours is anchored to the phone's centre, which is the frame
* that keeps the grip true at every width, so the 276 has to be written down
* rather than arrived at.
*
* Using -116 in this frame left the phone 160px too high — resting against
* the fingertips instead of seated in the grip.
*
* Checked against the live site rather than reasoned: in the reference
* screenshot the phone is 598px wide (300 CSS px at 2x), its top edge at
* y=338, the thumb tip at y=385 and the top of the curled fingers at y=643 —
* so +24px and +153px below the phone's top. The asset's own landmarks are
* y=0 and y=129 of 1203, which at this offset predict +24 and +153. Exact.
*
* The other number that falls out of it: the phone's bottom edge sits at
* 576/1203 of the hand (0.4788), which is the source's own MOBILE_HAND_GRIP_Y
* fraction. centre+300 == handTop+576, so handTop == centre-276.
*/
top: -276px;
left: -476px;
width: 784px;
height: 1203px;
z-index: 2;
pointer-events: none;
-webkit-mask: linear-gradient(#000 52%, transparent 81%);
mask: linear-gradient(#000 52%, transparent 81%);
/* Two clocks: --s is the fade (done by m=0.35), --k the 520px rise (m=0.62). */
opacity: var(--s, 0);
transform: translateY(calc((1 - var(--k, 0)) * 520px));
will-change: opacity, transform;
}
/**
* Mobile: the same fractions on a 2/3-scale hand and a 400px phone. Grip at
* 0.4788 x 802 = 384 (the source's MOBILE_HAND_GRIP_Y), phone bottom at
* centre+200, so top = 200 - 384 = -184. Left stays proportional: 0.607 x 523.
*/
@media (max-width: 809px) {
.hand { width: 523px; height: 802px; top: -184px; left: -317px; }
}
/* The phone sits above the hand, as it does in the source. */
#dec-phone { z-index: 4; }
/**
* ── THE TRANSLUCENT HANDSET, for this last beat only ─────────────────
*
* Everywhere else on this page the phone shows a Messages app: grey inbound,
* blue outbound, because Spy texts a real number and a fake in-app chat would
* make the headline read as a lie. This beat is the exception you asked for,
* and the source treats it as one too: by now the stage is yellow, and the
* handset is a barely-there pane of glass over it with pale bubbles, so the
* hand behind reads *through* the phone. An opaque grey/blue iMessage screen
* would hide the hand entirely and lose the whole image.
*
* CONTRAST. This is the one place where going translucent HELPS: ink on the
* pale bubble composited over the yellow is ~14:1, and ink on the white
* outbound bubble is 15.3:1 — both far better than the 4.6:1 the blue bubble
* scrapes by with. Nothing here relies on the yellow as a text colour.
*/
.phone.translucent {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(6px) saturate(115%);
-webkit-backdrop-filter: blur(6px) saturate(115%);
/* A whisper of lift, not the cream page's layered shadow — over yellow that
reads as dirt. */
box-shadow:
0 18px 40px rgba(33, 29, 24, 0.06),
inset 0 1px 1px rgba(255, 255, 255, 0.75);
}
.phone.translucent .im-top { border-bottom-color: rgba(33, 29, 24, 0.07); }
/* The avatar is a soft bloom rather than a solid disc — it is sitting on
yellow now, so a yellow circle would vanish. */
.phone.translucent .im-avatar {
background: radial-gradient(circle at 50% 50%,
rgba(245, 255, 102, 0.95) 0%,
rgba(245, 255, 102, 0.45) 55%,
rgba(245, 255, 102, 0) 78%);
color: transparent;
}
/* Inbound: pale, and set in the display serif, as in the source. */
.phone.translucent .im.them {
background: rgba(255, 255, 255, 0.62);
color: var(--ink);
border-radius: 18px;
border-bottom-left-radius: 18px;
font-family: var(--display);
font-variation-settings: "wght" 300, "opsz" 14;
font-feature-settings: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;
font-synthesis-weight: none;
font-size: 12.5px;
}
/* Outbound: plain white, sans, ink text. No blue in this beat. */
.phone.translucent .im.you {
background: #fff;
color: var(--ink);
border-radius: 18px;
border-bottom-right-radius: 18px;
}
.phone.translucent .im-input {
background: rgba(255, 255, 255, 0.45);
border-color: rgba(255, 255, 255, 0.6);
/* 0.55, the value the paler design wants, composites to 3.75:1 over this
bar over the yellow. 0.68 is 5.5:1 and still reads as placeholder grey. */
color: rgba(33, 29, 24, 0.68);
}
/* Two screens share this handset; only one is ever opaque. */
#screen-mutual { justify-content: flex-start; }
.riser {
position: absolute;
left: 50%;
bottom: 0;
z-index: 2;
width: 784px;
height: 784px;
margin-left: -392px;
pointer-events: none;
-webkit-mask: linear-gradient(#000 52%, transparent 81%);
mask: linear-gradient(#000 52%, transparent 81%);
opacity: var(--s, 0);
transform: translateY(calc((1 - var(--s, 0)) * 520px));
will-change: opacity, transform;
}
@media (max-width: 809px) { .riser { width: 523px; height: 523px; margin-left: -261px; } }
/* ── mission, on yellow ──────────────────────────────────────────────*/
.mission {
background: var(--yellow);
/* The founder portrait used to sit above this; with it gone the section
opens directly on the label, so it needs its own top padding. */
padding: 96px 0 120px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
overflow: clip;
position: relative;
}
.mission-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
width: 100%;
}
.mission-story {
width: 560px;
max-width: 90vw;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.mission-story .body-copy { width: 296px; max-width: 90vw; text-align: center; }
.credit { font-size: 12px; line-height: 1.4em; color: rgba(56, 56, 56, 0.7); }
@media (max-width: 809px) { .mission { padding: 0 20px 120px; } }
/* Everything in the mission block rises on entry. */
.rise {
opacity: var(--s, 0);
transform: translateY(calc((1 - var(--s, 0)) * 20px));
will-change: opacity, transform;
}
/* ── footer ──────────────────────────────────────────────────────────*/
/**
* NOT STICKY.
*
* The source pins this to the bottom so the mission section scrolls away over
* it — a reveal effect. The side effect is that the legal links sit on screen
* for the entire page, following you down, which reads as a bug rather than a
* flourish. It is the last thing on the page; it should arrive when you reach
* it and not before.
*/
footer.site {
background: var(--body);
padding: 40px 100px 120px;
display: flex;
align-items: center;
/* Was space-between when a brand mark sat on the left. With only the links
and the copyright left, that would fling them to opposite edges. */
justify-content: center;
gap: 40px;
flex-wrap: wrap;
position: relative;
overflow: clip;
}
footer.site nav { display: flex; align-items: center; gap: 28px; }
footer.site nav a { color: var(--yellow); text-decoration: none; }
footer.site nav a:hover { text-decoration: underline; }
footer.site .copyright { font-size: 13px; color: #bababa; }
@media (max-width: 1199px) { footer.site { padding: 40px 40px 120px; } }
@media (max-width: 809px) {
footer.site { flex-direction: column; justify-content: flex-start;
gap: 20px; padding: 20px 20px 120px; }
}
/* ── fixed nav pill, bottom centre ───────────────────────────────────*/
.nav-pill-wrap {
position: fixed;
/* Clears the home indicator on a gesture-navigation iPhone; 0 elsewhere. */
bottom: calc(40px + env(safe-area-inset-bottom, 0px));
left: 0;
width: 100%;
z-index: 5;
display: flex;
justify-content: center;
pointer-events: none;
}
.nav-pill {
pointer-events: auto;
display: flex;
align-items: center;
padding: 6px;
border-radius: 100px;
background: rgba(247, 244, 239, 0.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.nav-pill a {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 26px;
border-radius: 100px;
text-decoration: none;
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--body);
}
.nav-pill a.solid { background: var(--yellow); color: var(--ink); }
.nav-pill a svg { width: 18px; height: 18px; }
/* ═══════════════════════════════════════════════════════════════════
THE "WHY SPY?" DRAWER
Every measurement here is the source's (`.framer-1a58imn`,
`.framer-1ozd06m`, `.framer-125w3uz`, `.framer-1ruxtm6`, `.framer-4wl7op`
and the DrawerCard module), read off the saved page rather than eyeballed.
The one departure is the body text, and it is a real failure in the
original: its cards are rgba(255,255,255,0.5) over a BLURRED PAGE, so the
text's background is whatever you happened to be looking at. #767676 on that
is 4.36:1 over paper and 1.85:1 over the dark footer — and the nav pill is
fixed, so a reader can open this over the footer. Using --body (#383838)
instead makes the worst case 4.79:1 and the usual case 11:1, with the card
itself left exactly as designed.
═══════════════════════════════════════════════════════════════════ */
/**
* The dialog is the dismiss layer: full-viewport, transparent to clicks on
* itself (which close it), with the blur on ::backdrop. `inset: 0` plus the
* max-* resets are needed because a modal dialog is centred and auto-sized by
* default, and this one is a full-screen stage.
*/
.drawer {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
/* The source's own dismiss-layer tint, over the blur. */
background: rgba(255, 255, 255, 0.1);
overflow: visible;
}
/**
* The blur. This is the effect — the whole page goes soft behind the glass.
* 0.3s tween on [.44,0,.56,1], the source's transition22, and `@starting-style`
* is what lets a plain `background` transition run on an element that has just
* been displayed. Without it the backdrop snaps in.
*/
.drawer::backdrop {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(33, 29, 24, 0.12);
transition: backdrop-filter 0.3s cubic-bezier(0.44, 0, 0.56, 1),
background 0.3s cubic-bezier(0.44, 0, 0.56, 1);
}
@starting-style {
.drawer::backdrop {
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
background: rgba(33, 29, 24, 0);
}
}
/** The column: pinned top-right, scrolls on its own if the cards outrun it. */
.drawer-cards {
position: fixed;
top: 40px;
right: 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: min-content;
max-height: calc(100vh - 80px);
overflow: auto;
overscroll-behavior: contain;
}
/* Card one shares its row with the small close button. */
.drawer-row { display: flex; align-items: flex-start; gap: 12px; }
.drawer-card {
width: 350px;
padding: 20px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: flex;
flex-direction: column;
gap: 9px;
/**
* The stagger. --i is set per card in the markup; 0.08s each matches the
* source's transition23–28 delays (0, .08, .16, .24, .32, .40). The easing
* overshoots a little to stand in for its spring at bounce 0.2 — CSS has no
* spring, and a plain ease-out reads noticeably flatter here.
*/
opacity: 0;
transform: translateY(24px);
transition: opacity 0.5s cubic-bezier(0.22, 1.2, 0.36, 1) calc(var(--i, 0) * 0.08s),
transform 0.5s cubic-bezier(0.22, 1.2, 0.36, 1) calc(var(--i, 0) * 0.08s);
}
.drawer[open] .drawer-card { opacity: 1; transform: none; }
.drawer-head { display: flex; align-items: center; gap: 20px; }
/* 12px Fraunces at opsz 14 — the source's Number preset. */
.drawer-num {
flex: none;
font-family: var(--display);
font-size: 12px;
font-weight: 300;
font-variation-settings: "wght" 300, "opsz" 14;
font-feature-settings: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;
font-synthesis-weight: none;
letter-spacing: -0.02em;
line-height: 1.2em;
color: var(--body);
}
.drawer-card h3 {
margin: 0;
flex: 1 1 auto;
font-family: var(--display);
font-size: 16px;
font-weight: 300;
font-variation-settings: "wght" 300, "opsz" 14;
font-feature-settings: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;
font-synthesis-weight: none;
letter-spacing: -0.02em;
line-height: 1.2em;
color: var(--body);
}
.drawer-card p {
margin: 0;
font-size: 12px;
letter-spacing: -0.01em;
line-height: 1.4em;
/* See the note at the top of this block: NOT the source's #767676. */
color: var(--body);
}
/**
* Two close buttons, one visible at a time — the source's arrangement. The
* inline 32px one sits beside card one on wide screens; the fixed 40px one
* takes over when the column goes full-width and there is no room beside it.
*/
.drawer-x {
flex: none;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 5px;
background: #363636;
cursor: pointer;
}
.drawer-x svg { width: 14px; height: 14px; }
.drawer-x:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.drawer-x.inline { width: 32px; height: 32px; }
.drawer-x.fixed { position: fixed; top: 16px; right: 16px; width: 40px; height: 40px; display: none; }
@media (max-width: 809px) {
.drawer-cards {
top: 72px;
right: 16px;
left: 16px;
width: auto;
max-height: 68vh;
overflow-x: hidden;
}
.drawer-card { width: 100%; }
.drawer-row { width: 100%; }
.drawer-x.inline { display: none; }
.drawer-x.fixed { display: flex; }
}
/* Visually hidden, still announced — the dialog needs a real accessible name. */
.sr-only {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ═══════════════════════════════════════════════════════════════════
THE WAITLIST
Measurements from the source: .framer-1ravege is the card (white, radius
24, padding 28, gap 20, width 90% / max 440, max-height 85vh, centred),
.framer-eg1aga the backdrop (#211d18 at 55%), .framer-1hfubff the inputs
(44px, radius 12, 4% black fill, 8% black border, 12px padding, 14px DM
Sans), .framer-1qprqpl the 32px round close button.
═══════════════════════════════════════════════════════════════════ */
/**
* CENTRING A