/* =================================================================== THANKS section css =================================================================== Rebuilt 2026-08-24 against `Than k you-final.pdf` — ONE artboard, **1920 x 1080**. That is the whole page: a single viewport, the header band plus this section, and nothing below it. The marquee, the numbered "what happens next" list and the footer that used to follow are gone because the artboard has none of them (see thank-you.html's head). ⚠️ Unlike the 2026-08-21 cut, EVERY number in here is a measurement. That version's own header said "there is no artboard for this page, so nothing here is a measurement" — there is one now, and it was read out of the PDF's content stream (ink extents, path geometry, and the invisible text layer's own Tm/Tf operators), never off a screenshot. COMPOSITION, top-down on the 1920 x 1080 artboard header marks y 30 -> 70 (unchanged, header.css) h1 baseline y 345, cap top 233 160px, ink x100->884 "You're in." y 443 baseline 40px "Wednesday..." y 512 baseline 20px body paragraph y 572 / 602 / 632 20px on a 30px leading panel y 740 -> 980 x100->1852, 20px corner cut column rule y 780 -> 940 x763.5, 1px panel titles y 808 baseline 24px panel body A 858/882/906 B 858/906/930 18px on a 24px leading ASCII map y 210 -> 650 x1310->1812, 502 x 440 page bottom y 1080 TYPE — every one of these was fitted numerically against the PDF's ink widths in headless Chrome, best-of against the real font files: h1 "Thank You!" Space Grotesk 500, 160px err 0.31% "You're in." Archivo 500, 40px err 0.01% "Wednesday..." Archivo 500, 20px err 0.04% body, 3 lines Archivo 500, 20px err 0.05 / 0.05 / 0.44% panel titles Archivo 500, 24px err 0.15 / 0.71% panel body, 3 lines Archivo 400, 18px err 0.27 / 0.10 / 0.10% The h1 is the DISPLAY face. Width alone cannot separate the candidates — at -.034em, Archivo 700 fits 0.00% and Space Grotesk 700 fits 0.13% — so two other measurements settle it, and both are unambiguous: FAMILY, by cap ratio. The h1 measures 112px of cap on a 160px em = **0.7000**, which is Space Grotesk's cap ratio exactly. Archivo's is 0.6860 and would have drawn 109.8. WEIGHT, by ink area. Rendering each candidate at 4x and comparing lit area against the PDF's own h1 crop: SG 400 -21.10% SG 500 **-0.42%** SG 600 +9.31% SG 700 +18.89% AR 500 +2.61% AR 600 +17.95% AR 700 +32.07% Space Grotesk **500** — --fw-display — fits to 0.42% on ink and 0.14% on lit pixels. Nothing else is within 9%. ⚠️ So .thanks__title has to set `font-weight` as well as the size. The global `h1` is --fw-label (700), and no page in this build loads Space Grotesk above 500, so leaving it inherited would have handed the browser a synthetic bold — heavier AND wider than the real 700 that was already 19% too heavy. Family, tracking and --lhHero still come from the global rule; only size and weight are set here. ⚠️ Tracking is the token, and it is ~0.7% wider than the artboard. This h1's own TJ operators measure **-0.0298em**, where --track-display is -.034em (derived from 12 display runs on Website.pdf, all of them -.031 to -.036). The difference is 5.8px across the whole 784px line, so the token wins over a one-off local value — a display face that tracks differently on one page is a worse outcome than 5.8px. ⚠️ TWO body weights on one artboard, and that is measured, not sloppy. The 20px copy up top is Archivo **500** (--fw-medium); the 18px panel copy is Archivo **400** (--fw-body, i.e. the global `p`). The two differ by ~2% in width and each fits its own weight to under 0.5%, so this is a real distinction rather than measurement noise. ⚠️ --thanks-body is a NEW alpha step. Every grey on the page measured `ca 0.700000` in the PDF's ExtGState — white at 70%, which is not one of the six steps CLAUDE.md 2 records (.05 .1 .2 .4 .6 .8). --body-invert (.8) and --muted-invert (.6) sit either side of it and neither is close, so it is written here as a local token rather than rounded to the wrong one. Still built from --white and an alpha, never a grey hex. Promote it to vendor.css if a second artboard measures the same step. WHAT IT BORROWS rather than re-inventing .is-band / .bg-image / .on-dark the hero's --ink + dot-grid treatment .notch + .notch-xs the panel's ONE-step 20px corner --surface-raised the panel fill (stepped.css) --line-invert the column rule, white @ .1 global `h1` family / weight / tracking / --lhHero global `p` 20px / 400 / --bodyLh, and the `p + p` --sp30 that IS the measured gap between the two copy blocks TWO KNOWN DEPARTURES FROM THE ARTBOARD, both deliberate: 1. The panel is built on `.container` (100 -> 1820) where the artboard draws it 100 -> **1852**. The artboard's right edge is loose — the panel lands on 1852 and the map on 1812, two different values — while its left edge is exactly 100 everywhere. And the panel's internals only add up on 1820: 40 padding + 523.6 + 100 gap + 1 rule + 80 + 935.4 + 40 padding = 1720 = --container exactly. So 1852 is drift, and building on the container keeps the band symmetric like every other one on the site. 2. The header's two marks sit 30px apart here (header.css --sp30) where the artboard measures 40. header.css is shared with index.html and the header was not in scope, so it is left alone. =================================================================== */ .thanks { /* 210 = the h1's line-box top. With --lhHero (1) on a 160px h1 the baseline sits 135px into the box, so 210 + 135 = 345, the measured baseline. It is also exactly where the ASCII map starts. */ --thanks-top: calc(var(--sp110) + var(--sp100)); /* No token goes past --f100. 160px is the measured size; the steps in the breakpoints below hold --f100's own ratio (x1.6) all the way down. */ --thanks-title: 160px; /* The measure that reproduces the artboard's 3-line break. Verified in the browser: the design's break holds from 576 to 599 and re-wraps at 600, where "Brian" pulls up onto line 2. 580 sits just inside it. */ --thanks-measure: 580px; /* 502 / 1720 = 29.2%, so the drawing keeps its share of the measure as the container steps down, instead of needing a value per breakpoint. */ --thanks-map-w: min(502px, 29.2%); /* see the header — a measured 7th alpha step, not one of CLAUDE.md 2's six */ --thanks-body: rgba(255, 255, 255, .7); /* 24px of leading on 18px copy. Also the panel's paragraph gap, which the artboard draws as exactly one blank line. */ --thanks-panel-lh: 1.3333; position: relative; /* The artboard IS one viewport — 1920 x 1080 — and this is the only section on the page, so the band has to reach the bottom of the window or `body`'s --cream shows underneath it. It is a floor, not a height: below 992 the content is taller than the window and the section just grows. Measured at 1920x1080 the content comes to 1078.9, so without this a 1px cream strip sat under the band. */ min-height: 100vh; padding-block: var(--thanks-top) var(--sp100); background: var(--ink); & .container { position: relative; } & .thanks__inner { position: relative; } /* Above the map, which is the only thing they could collide with */ & .thanks__copy, & .thanks__panel { position: relative; z-index: 1; } /* Size and weight. Family, tracking and --lhHero come from the global `h1`; a max-width would only re-wrap a line that is one line by design. --fw-display is measured — see the ⚠️ in the header for why the inherited --fw-label would have rendered as a synthetic bold. */ & .thanks__title { max-width: none; font-size: var(--thanks-title); font-weight: var(--fw-display); } /* Not a heading — the deck under the h1, the same call .hero__subtitle makes. --lhTight puts its baseline at 444 against the measured 443. */ & .thanks__sub { margin-top: var(--sp40); font-size: var(--f40); font-weight: var(--fw-medium); line-height: var(--lhTight); color: var(--text-invert); } /* One line, so no measure. --sp40 is the measured gap; without it the global `p + p` would give 30. */ & .thanks__meta { margin-top: var(--sp40); font-weight: var(--fw-medium); color: var(--thanks-body); } /* The gap above this one IS the global `p + p` --sp30 — measured, so it is deliberately not restated here. */ & .thanks__body { max-width: var(--thanks-measure); font-weight: var(--fw-medium); color: var(--thanks-body); } /* The merge field. Left as the literal {{email}} the artboard prints, in the design's one accent colour. */ & .thanks__email { color: var(--primary); } /* top: 0 is the section's content top, i.e. y210 — the measured top of the drawing. right: 0 lands its right edge on the container at 1820 where the artboard has 1812; that 8px is the same loose right edge the panel shows (see the header, departure 1). */ & .thanks__art { position: absolute; top: 0; right: 0; z-index: 0; width: var(--thanks-map-w); pointer-events: none; user-select: none; } & .thanks__map { display: block; width: 100%; height: auto; } /* ----------------------------------------------------------------- The panel. 34/66 is not a guess — it is the only split that lands the column rule and both text measures where the artboard draws them, given a --g100 gutter: content 1640 = 40 padding either side of --container tracks 1540 = 1640 - --g100 col A 34% = 523.6 -> rule at 140 + 523.6 + 100 = 763.6 (artboard 763.5) col B 66% = 1016.4 -> 1px rule + --sp80 + 935.4 of text, starting at 844.6 (artboard 843) Both measures also have to reproduce the artboard's line breaks, and both do: col A's break holds from ~487 to 534 (523.6 is inside it, and 535 pulls "drinks" up a line), col B's from 900 to 940. ----------------------------------------------------------------- */ & .thanks__panel { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); gap: var(--g100); margin-top: var(--sp100); padding: var(--sp40); background: var(--surface-raised); } /* The rule is a border on the second column rather than an element of its own, so it stretches to the grid row and lands on the measured 780 -> 940 by itself: the artboard's 160px rule is exactly the panel's content box, 40px in from the top and the bottom. */ & .thanks__panel-col + .thanks__panel-col { padding-left: var(--sp80); border-left: 1px solid var(--line-invert); } /* ⚠️ Neither font-family NOR letter-spacing is redundant here, and both were caught by the render probe rather than reasoned about. These are h2s, and vendor.css hands every h1/h2 BOTH the display face and --track-display: inheriting the face Space Grotesk, 225.5 wide vs 220.5 (2.3%) inheriting the tracking -.034em x 24px x 17 gaps = -13.9px, which rendered the line at 207.5 (-5.9%) The body face at 500 with normal tracking fits 220.5 to 0.8%, and the artboard's body runs measure ~0.000 tracking (CLAUDE.md §3). 24px is --f24, measured. --bodyLh is what puts the baseline on 808, which is the artboard's; the tighter heading line-heights land it at 802. */ & .thanks__panel-title { font-family: var(--font-body); font-size: var(--f24); font-weight: var(--fw-medium); line-height: var(--bodyLh); letter-spacing: normal; color: var(--text-invert); } /* Bare `p` — a repeating block where a class would be pure noise (CLAUDE.md 6.2). The weight is the global `p`'s own 400, measured. */ & .thanks__panel-col p { margin-top: var(--sp25); font-size: var(--f18); line-height: var(--thanks-panel-lh); color: var(--thanks-body); } /* The artboard's paragraph gap is exactly one blank line (col B's baselines run 858 -> 906, i.e. 24 of leading plus 24 of gap), so it is written as one line rather than as the nearest --sp token. It follows --f18 down through the breakpoints on its own. */ & .thanks__panel-col p + p { margin-top: calc(var(--f18) * var(--thanks-panel-lh)); } } /* =================================================================== responsive =================================================================== */ /* --thanks-top, --sp*, --g100, --f18 / --f24 / --f40 and --thanks-map-w all step down on their own, so only the h1 and the two-column panel need saying here. */ /* --container is 1360 here, and a 160px h1 (788 of ink) plus the 502 map would leave 70px between them. The step mirrors --f100's own 100 -> 75. */ @media (max-width: 1599.98px) { .thanks { --thanks-title: 120px; } } @media (max-width: 991.98px) { .thanks { --thanks-title: 100px; /* The drawing sits to the RIGHT of the copy and there is no column left for it here: --container is 960 and the copy already wants 580 of it, so the map would land on top of the paragraph instead of beside it. Same call, and the same reason, as .hero__image. */ & .thanks__art { display: none; } /* 34% of the remaining measure is ~290px, which is four or five words a line at --f18. The columns stack, and the rule becomes the join between them. */ & .thanks__panel { grid-template-columns: minmax(0, 1fr); } & .thanks__panel-col + .thanks__panel-col { padding-top: var(--g100); padding-left: 0; border-top: 1px solid var(--line-invert); border-left: 0; } } } @media (max-width: 767.98px) { .thanks { --thanks-title: 72px; } } @media (max-width: 575.98px) { .thanks { --thanks-title: 56px; } }