/* =============================================================================
nodacop — first visual mockup
Stylesheet for index.html
Source of truth: DESIGN.md. Every choice traces back there.
Substitution note: DESIGN.md specifies Editorial New (Pangram Pangram). It is
not reachable via a public CDN with a free web license. Fraunces is loaded
from Google Fonts as the closest free editorial-display match — variable
optical-size axis (9..144), high-contrast at display sizes. To upgrade later,
self-host Editorial New and swap the --display var only.
============================================================================= */
/* ─────────────────────── 1. tokens ─────────────────────── */
:root {
/* color — only the five tokens. no white, no black, no gradients. */
--cream: #F2EADB;
--ink: #1B1813;
--terracotta: #B8523A;
--dusty-blue: #5F7682;
--kraft: #D6C8AE;
/* type families */
--display: "Fraunces", "Editorial New", "Times New Roman", serif;
--body: "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
/* layout */
--gutter: 12vw; /* generous, between the 10–14% horizontal range */
--measure: 64ch; /* body column inside the 60–72ch range */
--section-gap: 8.5rem; /* tightened from 14rem — the page should breathe like a spread, not a poster */
--topbar-h: 96px; /* sticky topbar height (masthead + toc) */
/* motion */
--hover: 200ms;
}
/* ─────────────────────── 2. reset & base ─────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
html {
/* Paper grain — bumped from ≤3% (invisible) to ~18% so the texture actually reads. */
background-color: var(--cream);
background-image: url("data:image/svg+xml;utf8,\
");
background-size: 320px 320px;
/* No background-attachment: fixed — the SVG-with-feTurbulence texture is
too expensive to repaint on every scroll, and the grain is fine enough
that scrolling-with-content looks identical anyway. */
scroll-padding-top: calc(var(--topbar-h) + 1rem);
}
body {
color: var(--ink);
font-family: var(--body);
font-size: 18px; /* DESIGN.md §3 — body sets at 18px, never smaller */
line-height: 1.55;
font-feature-settings: "kern" 1, "liga" 1, "onum" 1; /* oldstyle in body */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
p { margin: 0 0 1.2em; }
em { font-style: italic; }
a { color: inherit; }
::selection { background: var(--terracotta); color: var(--cream); }
/* ─────────────────────── 3. shared primitives ─────────────────────── */
.eyebrow {
font-family: var(--body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
opacity: 0.7;
}
.rule {
border: 0;
border-top: 1px solid var(--ink);
margin: 1.4rem 0;
width: 100%;
opacity: 0.75;
}
.rule--thin {
border-top-color: var(--ink);
opacity: 0.25;
margin: 2rem 0;
}
.link {
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
transition: color var(--hover) ease, border-color var(--hover) ease;
}
.link:hover {
color: var(--terracotta);
border-bottom-color: var(--terracotta);
}
.arrow { display: inline-block; margin-left: 0.25em; }
/* plaster wash — only on title page + chapter dividers. */
.plaster {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: url("data:image/svg+xml;utf8,\
");
background-size: cover;
opacity: 0.15; /* DESIGN.md §5 — plaster ~15% over cream/kraft */
/* mix-blend-mode: multiply removed for scroll perf — with 10 plasters on
the page each forcing offscreen compositing, the cumulative cost was
visible. Plain alpha at 0.15 over cream looks near-identical. */
}
.plaster--soft { opacity: 0.10; }
/* ─────────────────────── 4. topbar — sticky masthead + table of contents ─────────────────────── */
.topbar {
position: sticky;
top: 0;
z-index: 50;
background: var(--cream);
background-image: url("data:image/svg+xml;utf8,\
");
background-size: 320px 320px;
border-bottom: 1px solid rgba(27, 24, 19, 0.18);
}
.topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.9rem var(--gutter);
gap: 2.5rem;
min-height: var(--topbar-h);
}
.masthead {
display: flex;
align-items: baseline;
gap: 1.4rem;
flex: 0 0 auto;
}
.masthead__wordmark {
font-family: var(--display);
font-variation-settings: "opsz" 24;
font-weight: 400;
font-size: 22px;
letter-spacing: 0;
text-transform: lowercase;
color: var(--ink);
text-decoration: none;
line-height: 1;
}
.masthead__period {
color: var(--terracotta);
margin-left: 0.02em;
}
.masthead__scarcity {
font-family: var(--body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--terracotta);
border-left: 1px solid rgba(27, 24, 19, 0.25);
padding-left: 1.4rem;
white-space: nowrap;
}
.toc {
display: flex;
align-items: center;
gap: 2rem;
flex: 1 1 auto;
justify-content: flex-end;
}
.toc__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 1.8rem;
}
.toc__link {
display: inline-flex;
align-items: baseline;
gap: 0.5em;
text-decoration: none;
color: var(--ink);
font-family: var(--body);
font-size: 14px;
letter-spacing: 0.02em;
padding: 0.4rem 0;
border-bottom: 1px solid transparent;
transition: color var(--hover) ease, border-color var(--hover) ease;
}
.toc__num {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 18;
color: var(--terracotta);
font-size: 14px;
}
.toc__name { font-weight: 500; }
.toc__link:hover { border-bottom-color: var(--ink); }
.toc__link.is-active { border-bottom-color: var(--terracotta); }
.toc__link.is-active .toc__num { color: var(--ink); }
.toc__cta {
display: inline-block;
font-family: var(--body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cream);
background: var(--terracotta);
border: 1px solid var(--terracotta);
border-radius: 4px;
padding: 0.65rem 1.2rem;
text-decoration: none;
transition: background var(--hover) ease, border-color var(--hover) ease;
}
.toc__cta:hover { background: var(--ink); border-color: var(--ink); }
/* ─────────────────────── 4b. title page (LP §1) ─────────────────────── */
.title-page {
position: relative;
height: calc(100vh - var(--topbar-h));
padding: 3rem var(--gutter);
display: grid;
place-items: center start;
isolation: isolate;
scroll-margin-top: var(--topbar-h);
overflow: hidden;
}
.title-page__inner {
position: relative;
z-index: 1;
align-self: center;
padding: 6rem 0 0;
/* asymmetric padding shifts content below geometric center, so the void
below the CTAs reads as a deliberate footer breath, not an empty void */
max-width: 1100px;
}
/* Hero headline — the outcome line set monumentally. Wordmark moved to masthead. */
.hero-headline {
font-family: var(--display);
font-variation-settings: "opsz" 144;
font-weight: 400;
font-style: normal;
font-size: clamp(40px, 6vw, 84px);
line-height: 1.05;
letter-spacing: -0.015em;
margin: 0 0 1.6rem;
color: var(--ink);
max-width: 18ch;
}
.hero-headline em { font-style: italic; }
/* Hero deck — the static promise body, set in body sans below the headline. */
.hero-deck {
font-family: var(--body);
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.55;
color: var(--ink);
opacity: 0.9;
max-width: 58ch;
margin: 0 0 2rem;
}
/* Rotating clause — single dynamic element on the page (DESIGN.md §10 exception).
A small dynamic line sitting BELOW the CTAs, stepped well down from the
headline scale so it reads as a subtle ticker, not a second headline. */
.rotating {
display: block;
position: relative;
font-family: var(--display);
font-variation-settings: "opsz" 36;
font-size: clamp(15px, 1.7vw, 19px);
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--ink);
opacity: 0.85;
max-width: 40ch;
margin: 0;
}
.rotating__phrase {
font-style: italic;
white-space: pre-wrap;
}
.rotating__phrase::after {
content: '';
display: inline-block;
width: 0.05em;
height: 0.78em;
margin-left: 0.06em;
vertical-align: -0.06em;
background: var(--terracotta);
animation: nodacop-blink 0.85s steps(2) infinite;
}
@keyframes nodacop-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.rotating__phrase::after { animation: none; opacity: 0; }
}
.cta-row {
display: flex;
flex-wrap: wrap;
gap: 2.5rem;
align-items: baseline;
margin: 0 0 1.8rem;
}
.btn {
font-family: var(--body);
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
display: inline-block;
transition: color var(--hover) ease, background var(--hover) ease, border-color var(--hover) ease;
}
.btn--primary {
background: var(--terracotta);
color: var(--cream);
padding: 1rem 1.8rem;
border: 1px solid var(--terracotta);
border-radius: 4px;
}
.btn--primary:hover { background: var(--ink); border-color: var(--ink); }
.btn--ghost {
background: transparent;
color: var(--ink);
padding: 1rem 0;
border: 0;
border-bottom: 1px solid var(--ink);
}
.btn--ghost:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }
/* ─────────────────────── 5. chapter (combined header + section) ─────────────────────── */
.chapter {
position: relative;
padding: 3rem var(--gutter) 0;
isolation: isolate;
margin: 0 0 var(--section-gap);
scroll-margin-top: var(--topbar-h);
}
.chapter__head {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 1.4rem;
max-width: 1200px;
margin: 0 0 3rem;
padding-top: 1.4rem;
}
.chapter__title {
font-family: var(--display);
font-variation-settings: "opsz" 72;
font-weight: 400;
font-size: clamp(28px, 3.6vw, 42px);
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0;
}
.chapter__num {
color: var(--terracotta);
font-size: 0.6em;
}
.chapter__sep {
margin: 0 0.2em;
opacity: 0.5;
font-size: 0.6em;
}
.chapter__name em { font-style: italic; }
.chapter__deck {
font-family: var(--body);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.7;
margin: 0 0 3rem;
max-width: 1200px;
}
.chapter__deck-sep { margin: 0 0.5em; opacity: 0.5; }
.counter {
position: absolute;
right: 0;
top: 1.4rem;
font-family: var(--display);
font-style: italic;
font-size: 14px;
letter-spacing: 0.04em;
opacity: 0.55;
}
/* ─────────────────────── 6. method body (LP §4 broadside, inside chapter № 02) ─────────────────────── */
.method {
padding: 0 var(--gutter);
margin: 0 0 var(--section-gap);
}
/* ─────────────────────── §04 lede + structural blocks ───────────────────────
Linear editorial flow: lede → 3 typographic blocks (two-ways · timeline ·
slate). All info visible at all times — no hover-reveal, no interactive
widget. Each block uses the same eyebrow + hairline + bullet-list pattern. */
/* Rail: thin wrapper so the intro and the timeline live in the same
max-width container. No vertical line of its own — the line lives
only where it doesn't collide with text (intro column gap + small
connector segments between timeline dots). */
.method__rail {
position: relative;
max-width: 1200px;
margin: 0 0 4rem;
}
/* Intro row: lede + "Two ways" sit side-by-side on wide viewports so the
chapter opens as a spread (framing on the left, entry point on the right)
instead of stacking the two short blocks vertically. Stacks on <1024px. */
.method__intro {
margin: 0 0 4rem;
}
@media (min-width: 1024px) {
.method__intro {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 4rem;
align-items: center;
}
.method__intro > .method__lede,
.method__intro > .method__block { max-width: none; margin: 0; }
/* Tighter inner gap — the block now lives in a half-width column. */
.method__intro .method__list--two-cols { column-gap: 2rem; }
/* Vertical hairline in the column gap — runs the full intro height and
stops cleanly at the bottom; doesn't continue into the timeline so it
never crosses any prose. */
.method__intro::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: var(--terracotta);
opacity: 0.45;
transform: translateX(-0.5px);
}
}
/* Pretext: dropcap font-size + line-height set at runtime to match three lede
lines exactly (using lede's column width and Pretext-measured line height). */
.method__lede {
max-width: var(--measure);
margin: 0 0 4rem;
}
/* Body 16.5 / lede 17 — half-point uptick on the opening paragraph,
matched across §03, §04, §08. */
.method__lede p { font-size: 16.5px; }
.method__lede .lede { font-size: 17px; }
.lede { font-size: 17px; }
/* Drop cap. CSS-only approximation; Pretext would size to first 3 lines exactly. */
.dropcap {
font-family: var(--display);
font-variation-settings: "opsz" 144;
font-weight: 700;
font-style: normal;
font-size: 5.4em;
line-height: 0.85;
float: left;
margin: 0.05em 0.12em -0.05em 0;
color: var(--ink);
}
/* ── Structural block: eyebrow + hairline + bullet list ── */
.method__block {
position: relative;
z-index: 1;
margin: 0 0 3.5rem;
max-width: var(--measure);
}
.method__block-head {
margin: 0 0 1.6rem;
}
.method__block-head .rule { margin: 0.6rem 0 0; }
.method__eyebrow {
font-family: var(--body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--terracotta);
margin: 0;
}
.method__meta {
font-family: var(--display);
font-style: italic;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
color: var(--ink);
opacity: 0.7;
margin-left: 0.6em;
}
.method__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1.4rem;
}
.method__item {
display: grid;
grid-template-columns: 1.6rem 1fr;
align-items: start;
gap: 0.4rem 1rem;
}
.method__bullet {
width: 0.55em;
height: 0.55em;
border-radius: 50%;
background: var(--terracotta);
margin-top: 0.55em; /* aligns the dot with the title's cap-height */
justify-self: center;
}
.method__item-body { min-width: 0; }
.method__item-title {
font-family: var(--display);
font-variation-settings: "opsz" 28;
font-weight: 400;
font-size: 19px;
line-height: 1.2;
margin: 0 0 0.35rem;
color: var(--ink);
}
.method__item-title em { font-style: italic; }
.method__item-body p {
margin: 0;
font-size: 16.5px;
line-height: 1.5;
color: var(--ink);
max-width: 56ch;
}
/* ── Feedback-loop block (Block 2b) ── display heading + body, reusing the
block-head/eyebrow treatment above so it reads as a deliberate beat. The
title steps up from the 19px block titles (.method__item-title /
.rail-timeline__title) to a small display scale so the point lands. */
.method__loop-title {
font-family: var(--display);
font-variation-settings: "opsz" 36;
font-weight: 400;
font-size: clamp(22px, 2.4vw, 26px);
line-height: 1.2;
letter-spacing: -0.005em;
margin: 0 0 0.8rem;
color: var(--ink);
}
.method__loop-title em { font-style: italic; }
.method__loop-body {
margin: 0;
font-size: 16.5px;
line-height: 1.5;
color: var(--ink);
max-width: 56ch;
}
/* ── Two-column variant: "Two ways to use it" lays out side-by-side on
desktop so the right side of the page doesn't read as empty. ── */
.method__list--two-cols { gap: 1.4rem; }
@media (min-width: 768px) {
.method__list--two-cols {
grid-template-columns: 1fr 1fr;
gap: 2rem 3.5rem;
}
}
/* ── Rail-anchored timeline ──────────────────────────────────────────────
Centered timeline strung along the rail. Each step is a node — dot above
title, body copy hidden until hover/focus. Three steps so step 2 lands
directly under "Two ways to use it" on the rail. The horizontal hairline
in the block header is centered too, to read as a perpendicular tick on
the vertical rail. */
.method__block--rail { max-width: none; }
.method__block-head--center {
text-align: center;
max-width: var(--measure);
margin-left: auto;
margin-right: auto;
}
.rail-timeline {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 3rem;
}
.rail-timeline__step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 60ch;
position: relative;
}
/* Connector segment — sits in the flex gap above each step (except the
first), centered on the rail axis. Short enough to leave clean breathing
room above the dot and below the previous step's text, so the line reads
as "appearing and disappearing" between content blocks instead of
slicing through them. */
.rail-timeline__step:not(:first-child)::before {
content: '';
position: absolute;
top: -2.2rem;
height: 1.6rem;
width: 1px;
left: 50%;
transform: translateX(-0.5px);
background: var(--terracotta);
opacity: 0.45;
}
.rail-timeline__dot {
width: 0.55em;
height: 0.55em;
border-radius: 50%;
background: var(--terracotta);
display: block;
margin-bottom: 0.7rem;
}
.rail-timeline__title {
font-family: var(--display);
font-variation-settings: "opsz" 28;
font-weight: 400;
font-size: 19px;
line-height: 1.2;
margin: 0;
color: var(--ink);
}
.rail-timeline__title em { font-style: italic; }
.rail-timeline__body {
margin-top: 0.6rem;
max-width: 52ch;
/* Justify the prose so each body reads as a clean rectangular block on the
centered axis; the last line stays centered to keep the eye on the rail
instead of being yanked left by an orphan tail. Hyphens soften the
word-spacing that justify can otherwise produce at narrow measures. */
text-align: justify;
text-align-last: center;
hyphens: auto;
}
.rail-timeline__body p {
margin: 0;
font-size: 16.5px;
line-height: 1.5;
color: var(--ink);
}
.rail-timeline__body p + p { margin-top: 0.5rem; }
/* Step 2 ("Fill the queue") — Caveat back-reference to Two ways above. */
.rail-timeline__ref-note {
margin: 0.6rem 0 0 !important;
max-width: 28ch;
font-family: 'Caveat', 'Bradley Hand', cursive !important;
font-weight: 500;
font-size: 17px !important;
line-height: 1.15 !important;
color: var(--terracotta) !important;
opacity: 0.92;
transform: rotate(-1.5deg);
display: inline-block;
}
.rail-timeline__ref-note em { font-style: italic; }
.method__footnote {
margin-top: 5rem;
font-size: 14px;
letter-spacing: 0.02em;
line-height: 1.5;
color: var(--ink);
opacity: 0.7;
max-width: 60ch;
border-top: 1px solid rgba(27, 24, 19, 0.25);
padding-top: 1.2rem;
}
.footnote__mark {
color: var(--terracotta);
margin-right: 0.4em;
font-family: var(--display);
font-style: italic;
}
/* ─────────────────────── 7. showcase / publication cover (LP §6) ─────────────────────── */
.showcase {
padding: 0 var(--gutter);
margin: 0 0 var(--section-gap);
display: grid;
gap: 3rem;
}
.showcase__caption {
display: flex;
align-items: baseline;
gap: 1.4rem;
flex-wrap: wrap;
margin: 0;
}
.showcase__caption-meta {
font-family: var(--display);
font-style: italic;
font-size: 16px;
opacity: 0.7;
}
/* Pretext: cover title font-size set at runtime so both lines fit the cover's
inner measure at the largest possible single size. Static CSS clamp() is the
fallback if the script fails to load. */
.cover {
position: relative;
background-color: var(--kraft);
border: 1px solid rgba(27, 24, 19, 0.18);
padding: 2rem 2rem 1.6rem;
width: 100%;
max-width: 460px;
aspect-ratio: 3 / 4;
display: grid;
grid-template-rows: auto 1fr auto auto;
gap: 1.2rem;
isolation: isolate;
/* Kraft paper grain — bumped from 0.10 to 0.22 to read at a glance. */
background-image: url("data:image/svg+xml;utf8,\
");
background-size: 220px 220px;
}
.cover__head { display: grid; gap: 0.4rem; }
.cover__brand {
font-family: var(--body);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin: 0;
color: var(--ink);
}
.cover__brand-meta {
font-family: var(--display);
font-style: italic;
font-size: 14px;
margin: 0;
opacity: 0.65;
}
.cover__title {
font-family: var(--display);
font-variation-settings: "opsz" 144;
font-weight: 700;
font-size: clamp(56px, 7vw, 92px);
line-height: 0.95;
letter-spacing: -0.02em;
margin: 0;
align-self: end;
color: var(--ink);
}
.cover__title-line { display: block; }
.cover__title-line--ital em { font-weight: 400; font-style: italic; }
.cover__deck {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 18;
font-size: 17px;
line-height: 1.4;
margin: 0;
max-width: 32ch;
opacity: 0.85;
}
/* one prop per section: terracotta circular stamp */
.cover__stamp {
position: absolute;
top: 2.4rem;
right: 2.4rem;
width: 74px;
height: 74px;
border-radius: 50%;
border: 1.25px solid var(--terracotta);
color: var(--terracotta);
display: grid;
place-content: center;
text-align: center;
font-family: var(--body);
font-weight: 500;
font-size: 7.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1.2;
transform: rotate(-7deg);
opacity: 0.85;
}
.cover__stamp-mid {
font-family: var(--display);
font-style: italic;
font-size: 13px;
letter-spacing: 0;
text-transform: none;
margin: 0.2em 0;
}
.cover__foot {
display: flex;
align-items: baseline;
gap: 0.6em;
font-family: var(--body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
border-top: 1px solid rgba(27, 24, 19, 0.4);
padding-top: 1.2rem;
}
.cover__sep { opacity: 0.4; }
/* ─────────────────────── 6c. cover spine — terracotta accent on every page ───────────────────────
A 16px terracotta strip runs floor-to-ceiling on the left edge of every
cover (page i, ii, and iii). Reads as a bound-publication object — like
a magazine seen from the shelf, with the spine continuing through every
inner page. Cover padding is bumped on the left to clear the strip. */
.specimen .cover {
padding-left: 2.8rem;
}
.specimen .cover::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 16px;
background: var(--terracotta);
z-index: 0;
}
/* ─────────────────────── 6b. sample slate (inside §04) — typeset list of example angles ─────────────────────── */
/* Sample slate · §04. Five ranked angles, grouped into three funnel-stage
columns (ToFu · MoFu · BoFu). Each column carries its own colour treatment
so the funnel reads at a glance — terracotta-saturated at the top, mid-
weight in the middle, deep ink at the bottom. The block stays centered on
the page so the rail timeline above flows into it without an abrupt jump. */
.method__block--slate { max-width: none; }
/* Slate lead-in line — a single framing sentence above the grid, centered to
match the slate block's editorial composition. Display italic so it reads as
an editor's aside, not body prose. */
.slate__framing {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 18;
font-size: 16px;
line-height: 1.45;
color: var(--ink);
opacity: 0.82;
max-width: 1100px;
margin: 0 auto 1.8rem;
}
.slate__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.6rem;
max-width: 1100px;
margin: 0 auto;
}
@media (min-width: 880px) {
.slate__grid {
grid-template-columns: 1fr 1fr 1fr;
gap: 1.8rem;
}
}
.slate__col {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Column header: stage tag + small descriptor. Each variant tints the
stage tag differently so the three columns sing as a funnel. */
.slate__col-head {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0 0 0.6rem;
border-bottom: 1px solid currentColor;
}
.slate__col-stage {
font-family: var(--display);
font-style: italic;
font-weight: 400;
font-size: 22px;
line-height: 1;
letter-spacing: -0.005em;
}
.slate__col-meta {
font-family: var(--body);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.65;
}
/* Stage colour treatments. Terracotta at the top of funnel (hottest),
ink in the middle, kraft-tinted at the bottom — a quiet visual gradient
from saturated to muted as audience intent narrows. */
.slate__col--tofu .slate__col-head { color: var(--terracotta); }
.slate__col--mofu .slate__col-head {
color: var(--ink);
border-bottom-color: rgba(27, 24, 19, 0.55);
}
.slate__col--bofu .slate__col-head {
color: var(--ink);
border-bottom-color: rgba(184, 82, 58, 0.7);
}
.slate__col-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Card. Subtle tinted background per funnel stage with a left accent stripe
in the matching colour — adds the colour the slate was missing without
shouting. */
.slate__card {
position: relative;
padding: 1.1rem 1.1rem 1.1rem 1.3rem;
background: rgba(214, 200, 174, 0.18); /* kraft @ 18% */
border-left: 3px solid var(--terracotta);
border-radius: 1px;
}
.slate__col--mofu .slate__card { border-left-color: rgba(27, 24, 19, 0.55); }
.slate__col--bofu .slate__card {
border-left-color: rgba(184, 82, 58, 0.75);
background: rgba(184, 82, 58, 0.06); /* terracotta @ 6% — quietly warmer at BoFu */
}
/* Kicker: roman numeral + type on one line, both in display italic so the
card opens with a single typographic register before the title. Compact
so the title can lead. */
.slate__card-kicker {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 0.45em;
margin: 0 0 0.5rem;
font-family: var(--display);
font-size: 14px;
line-height: 1.2;
}
.slate__card-num {
font-style: italic;
color: var(--terracotta);
opacity: 0.85;
}
.slate__card-sep {
color: var(--ink);
opacity: 0.35;
}
.slate__card-type {
color: var(--ink);
opacity: 0.88;
}
.slate__card-type em { font-style: italic; }
.slate__card-title {
font-family: var(--display);
font-style: italic;
font-weight: 400;
font-size: 19px;
line-height: 1.25;
margin: 0 0 0.7rem;
color: var(--ink);
}
.slate__card-meta {
margin: 0 0 0.3rem;
font-size: 13.5px;
line-height: 1.45;
color: var(--ink);
opacity: 0.78;
}
.slate__card-meta:last-child { margin-bottom: 0; }
.slate__detail-label {
display: inline-block;
font-family: var(--display);
font-style: italic;
font-weight: 400;
font-size: 12.5px;
color: var(--terracotta);
opacity: 0.92;
margin-right: 0.35em;
letter-spacing: 0;
text-transform: none;
}
@media (max-width: 760px) {
.slate__card-title { font-size: 17px; }
.slate__card-kicker { font-size: 13px; }
.slate__card-meta { font-size: 13px; }
/* Each column's two cards become a horizontal carousel — one card visible
at a time, the second card swipeable. The 2nd card peeks ~6% past the
right edge so users see there's another to swipe to. Snap-mandatory
so the swipe always lands on a card. */
.slate__col-list {
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
gap: 0.8rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.slate__col-list::-webkit-scrollbar { display: none; }
.slate__card {
flex: 0 0 94%;
scroll-snap-align: start;
}
}
/* ─────────────────────── 6c. chapter placeholder (agent fill targets) ─────────────────────── */
.chapter--placeholder {
min-height: 0;
padding: 0;
margin: 0;
}
.chapter--placeholder:empty,
.chapter--placeholder:has(> :only-child:is(:empty)) {
display: none;
}
/* ─────────────────────── 7b. specimens — three-card grid with click-to-flip page-turn ───────────────────────
Each card is a stack of three .specimen__page layers (cover · interior · variants).
Pages are absolute, stacked by z-index, with the cover on top. Clicking the deck
adds .is-flipped to the topmost page; rotateY around its left edge turns it out
of view (backface hidden) and the next page reads through. After the third flip,
another click resets all .is-flipped classes — back to the cover. */
.specimens__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.6rem;
max-width: 1100px;
margin: 0 auto;
}
@media (min-width: 880px) {
.specimens__grid {
grid-template-columns: 1fr 1fr 1fr;
gap: 1.8rem;
}
}
.specimen {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.specimen__deck {
position: relative;
width: 100%;
/* Bumped from 3/4 — interior body and variants needed more vertical room
to breathe inside the card. */
aspect-ratio: 3 / 4.4;
perspective: 1600px;
cursor: pointer;
outline: none;
/* Lift via `top`, NOT `transform`: transforming this perspective container
re-rasterizes its 3D page content (cover/interior text) into a GPU texture,
which is what blurred the text on hover. A positional lift repaints crisply. */
transition: top 240ms ease;
}
.specimen__deck:hover {
top: -5px;
}
.specimen__deck:focus-visible {
outline: 2px solid var(--terracotta);
outline-offset: 4px;
}
/* Stacked-page hint — two phantom layers peek 3px and 6px past the cover
on the right + bottom edges, so the deck reads as a stack of pages
instead of a single flat tile. Pure decoration, behind every real page
(z-index 0 < page z-index 1-3); pointer-events:none keeps clicks intact. */
.specimen__deck::before,
.specimen__deck::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(27, 24, 19, 0.16);
pointer-events: none;
z-index: 0;
}
.specimen__deck::before {
transform: translate(3px, 3px);
background: rgba(214, 200, 174, 0.7);
}
.specimen__deck::after {
transform: translate(6px, 6px);
background: rgba(184, 168, 138, 0.55);
}
.specimen__page {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform-origin: left center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: transform 750ms cubic-bezier(0.4, 0.05, 0.2, 1),
box-shadow 750ms ease;
box-shadow: 0 1px 2px rgba(27, 24, 19, 0.06);
/* No permanent `will-change: transform` — it kept each page promoted to a GPU
layer inside the 3D/perspective context, which rendered the text slightly
blurry (most visible on hover, when the deck's lift transform re-composites
the layer). The rotateY flip stays smooth without it. */
}
.specimen__page:nth-child(1) { z-index: 3; }
.specimen__page:nth-child(2) { z-index: 2; }
.specimen__page:nth-child(3) { z-index: 1; }
/* -178° instead of a flat -180° avoids Safari's z-fighting flicker at the
exact half-turn. Visually identical, no flash. */
.specimen__page.is-flipped {
transform: rotateY(-178deg);
box-shadow: -10px 6px 22px rgba(27, 24, 19, 0.18);
pointer-events: none;
}
/* No-anim utility — added briefly when the deck resets from the last page
back to the cover, so all stacked pages snap into place instead of fanning.
Cascades to the curl too so its opacity doesn't fade during the reset. */
.specimen__page.no-anim,
.specimen__page.no-anim .specimen__curl { transition: none !important; }
/* The cover article fills the rotating wrapper completely. Override .cover's
own max-width (460px) and aspect-ratio (3/4) since the deck dictates size. */
.specimen__page > .cover {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
aspect-ratio: auto;
}
/* The page-curl/turn-page corner was retired — replaced by a single
circle-arrow indicator on the cover (see below). The curl element
stays in the DOM for now (zero cost) but is hidden everywhere. */
.specimen__curl { display: none; }
/* Arrow swipe/click affordance — sits on the cover (page 1 only),
universal across desktop and mobile. Just the glyph + pulse; the
movement is the affordance, no circle frame needed. Pointer-events
disabled so clicks pass through to the deck's flip handler. */
@keyframes cover-swipe-arrow {
0%, 100% { transform: translate(0, -50%) scale(1); opacity: 0.7; }
50% { transform: translate(6px, -50%) scale(1.08); opacity: 1; }
}
.specimen__page:first-child > .cover::after {
content: "→";
position: absolute;
top: 50%;
right: 1.2rem;
font-family: var(--display);
font-style: italic;
font-weight: 700;
font-size: 32px;
line-height: 1;
color: var(--terracotta);
z-index: 10;
pointer-events: none;
animation: cover-swipe-arrow 1.6s ease-in-out infinite;
}
/* Colophon — sits flush below the deck, always visible regardless of which
page is showing. Carries the hypothesis + result + spend metadata so the
reader can see "what the angle did" without flipping to the third page. */
.specimen__colophon {
margin: 1rem 0 0;
padding-top: 0.9rem;
border-top: 1px solid rgba(27, 24, 19, 0.18);
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 18;
font-size: 14px;
line-height: 1.45;
color: var(--ink);
opacity: 0.82;
}
.specimen__colophon p { margin: 0 0 0.3em; }
.specimen__colophon p:last-child { margin-bottom: 0; }
.specimen__colophon .footnote__mark {
color: var(--terracotta);
margin-right: 0.15em;
}
@media (prefers-reduced-motion: reduce) {
.specimen__page { transition: none; }
}
/* ─────────────────────── 7e. specimens — mobile swipe layout ───────────────────────
On narrow viewports the deck becomes a horizontal scroll-snap container
instead of a click-to-flip stack. The user swipes through cover →
interior → variants. Curl and "turn →" hint are hidden — replaced by
a single circle-arrow indicator on the cover (page 1 only). Phantom
page-edges are simulated via box-shadow so they survive overflow-x. */
@media (max-width: 760px) {
.specimen__deck {
perspective: none;
cursor: default;
display: flex;
width: 96%;
margin: 0 auto;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
transition: none;
box-shadow:
3px 3px 0 0 rgba(214, 200, 174, 0.75),
6px 6px 0 0 rgba(184, 168, 138, 0.6);
}
.specimen__deck::-webkit-scrollbar { display: none; }
.specimen__deck:hover { transform: none; }
/* Hide the absolute-positioned phantom pseudos — replaced by box-shadow. */
.specimen__deck::before,
.specimen__deck::after { display: none; }
.specimen__page {
position: relative;
inset: auto;
flex: 0 0 100%;
scroll-snap-align: start;
transform: none !important;
transition: none;
box-shadow: none;
}
.specimen__page.is-flipped {
transform: none !important;
pointer-events: auto;
}
}
/* ─────────────────────── 7f. swipe affordance — slate carousel hint ───────────────────────
§04 slate uses a horizontal scroll-snap carousel on mobile. The
"swipe →" indicator below each column communicates the affordance. */
@keyframes swipe-hint {
0%, 100% { transform: translateX(0); opacity: 0.55; }
50% { transform: translateX(4px); opacity: 0.95; }
}
@media (max-width: 760px) {
.slate__col::after {
content: "swipe →";
display: block;
text-align: center;
font-family: var(--display);
font-style: italic;
font-size: 11px;
letter-spacing: 0.08em;
color: var(--terracotta);
margin-top: 0.2rem;
animation: swipe-hint 1.6s ease-in-out infinite;
}
}
@media (prefers-reduced-motion: reduce) {
.specimen__page:first-child > .cover::after,
.slate__col::after { animation: none; }
}
/* ─────────────────────── 7c. interior (page ii) ─────────────────────── */
.cover--interior {
display: grid;
/* Three rows: header (auto) · body (fills space, may clip) · source link
(auto, always pinned to bottom). The source row guarantees the citation
is visible even when the body content overflows. */
grid-template-rows: auto 1fr auto;
gap: 1.1rem;
}
/* Allow the body track to shrink below intrinsic content size so overflow
clipping kicks in instead of pushing the source row off the card. */
.cover--interior .interior__body { min-height: 0; }
.interior__head {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--body);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
border-bottom: 1px solid rgba(27, 24, 19, 0.4);
padding-bottom: 0.8rem;
}
.interior__head p { margin: 0; }
.interior__head .interior__page { opacity: 0.55; }
.interior__sep { margin: 0 0.45em; opacity: 0.45; }
.interior__body {
font-family: var(--body);
font-size: 14.5px;
line-height: 1.55;
color: var(--ink);
overflow: hidden; /* keep float clear */
}
.interior__body p { margin: 0 0 0.7em; }
.interior__body p:last-child { margin-bottom: 0; }
.interior__lede { font-size: 14.5px; }
.interior__dropcap {
font-family: var(--display);
font-variation-settings: "opsz" 144;
font-weight: 700;
font-style: normal;
float: left;
font-size: 4em;
line-height: 0.72;
margin: 0.05em 0.10em -0.06em 0;
color: var(--ink);
}
.interior__pull {
font-family: var(--display);
font-variation-settings: "opsz" 36;
font-weight: 400;
font-style: italic;
font-size: 18px;
line-height: 1.3;
margin: 0.4rem 0 0.7rem;
padding: 0.2rem 0 0.2rem 1rem;
border-left: 2px solid var(--terracotta);
max-width: 38ch;
color: var(--ink);
}
.interior__pull em { font-style: italic; }
/* Citation row — proof that the angle ran. Pinned to its own grid row at
the bottom of cover--interior so it's always visible, regardless of how
long the body text is. Reads as editorial metadata, not running prose. */
.interior__source {
margin: 0;
padding-top: 0.7rem;
border-top: 1px dashed rgba(27, 24, 19, 0.32);
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 18;
font-size: 12.5px;
line-height: 1.4;
color: rgba(27, 24, 19, 0.72);
}
.interior__source-link {
color: var(--terracotta);
font-style: normal;
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid rgba(184, 82, 58, 0.55);
transition: border-bottom-color 200ms ease, background-color 200ms ease;
}
.interior__source-link:hover,
.interior__source-link:focus-visible {
border-bottom-color: var(--terracotta);
background-color: rgba(184, 82, 58, 0.08);
}
/* ─────────────────────── 7d. variants + colophon (page iii) ─────────────────────── */
/* Variants page (page iii). Two rows now (header + grid) since the
colophon moved outside the deck. The grid centers vertically within
the remaining space so the small cards still feel composed. */
.cover--variants {
display: grid;
grid-template-rows: auto 1fr;
gap: 1rem;
/* Allow the grid track to shrink below intrinsic height when needed. */
min-height: 0;
}
.variants__grid {
display: grid;
grid-template-columns: 1fr 1fr;
/* No row template — rows hug content so the .variant aspect-ratio: 1/1
wins and cells render as squares. */
gap: 0.7rem;
align-content: center;
min-height: 0;
}
.variant {
position: relative;
aspect-ratio: 1 / 1;
background: rgba(27, 24, 19, 0.06);
border: 1px solid rgba(27, 24, 19, 0.28);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0.7rem;
margin: 0;
min-width: 0;
overflow: hidden;
}
.variant__label {
font-family: var(--display);
font-variation-settings: "opsz" 144;
font-style: italic;
font-weight: 700;
font-size: clamp(20px, 2vw, 26px);
line-height: 1;
color: var(--ink);
}
.variant__caption {
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.14em;
line-height: 1.25;
text-transform: uppercase;
opacity: 0.7;
}
/* Variants that show a real ad-creative thumbnail (e.g. the Dr. Marty's
specimen). The image bleeds to the cell edges; the size caption sits as a
small legible chip over the bottom. */
.variant--photo { padding: 0; }
.variant__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.variant--photo .variant__caption {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
margin: 0; padding: 5px 7px;
background: rgba(27, 24, 19, 0.62); color: #F2EADB; opacity: 1;
}
/* .variants__sep still used inline inside .specimen__colophon below the deck. */
.variants__sep { margin: 0 0.4em; opacity: 0.45; }
/* ─────────────────────── 8. colophon (proof of Pretext) ─────────────────────── */
/* Colophon — dark closing band. Sits flush under §10's terracotta as a
deeper sibling (burnt brown, ~70% ink / 30% terracotta), reading as the
inside of the back cover. The text fades in on intersection (.is-active);
the band itself stays visible so the visual closure isn't dependent on JS. */
.pretext-colophon {
font-family: var(--body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: lowercase;
color: transparent; /* fades in to kraft on .is-active */
text-align: center;
margin: 0;
padding: 2.4rem var(--gutter);
background-color: #4A291F;
background-image:
url("data:image/svg+xml;utf8,\
");
background-size: 320px 320px;
background-repeat: repeat;
transition: color 600ms ease;
}
.pretext-colophon.is-active { color: var(--kraft); }
.pretext-colophon__mark {
font-family: var(--display);
font-style: italic;
letter-spacing: 0;
text-transform: lowercase;
}
/* ─────────────────────── 9. responsive ─────────────────────── */
/* Tablet — narrower topbar, condense TOC */
@media (max-width: 1100px) {
.toc__list { gap: 1.2rem; }
.toc__name { display: none; } /* show only "№ XX" + period link target */
.toc { gap: 1.2rem; }
.masthead__scarcity { padding-left: 1rem; }
}
/* Mobile — single column, larger gutters relative to viewport, hero scales down */
@media (max-width: 760px) {
:root {
--gutter: 6vw;
--section-gap: 6rem;
--topbar-h: 80px;
}
.topbar__inner { padding: 0.7rem var(--gutter); flex-wrap: wrap; gap: 1rem; min-height: var(--topbar-h); }
.toc__list { gap: 1rem; }
.toc__cta { padding: 0.5rem 0.9rem; font-size: 11px; }
.masthead__scarcity { font-size: 11px; padding-left: 0.9rem; }
.masthead__wordmark { font-size: 18px; }
/* §01 hero on mobile: keep the section substantial enough to read as a
proper opener — min-height 70 vh, content vertically centred so the
empty space distributes evenly above and below the headline + CTAs. */
.title-page {
height: auto;
min-height: 70vh;
padding: 4rem var(--gutter);
}
.title-page__inner {
align-self: center;
padding: 0;
}
.hero-headline { font-size: clamp(34px, 8.5vw, 56px); max-width: 16ch; margin-bottom: 1.2rem; }
.hero-deck { margin-bottom: 1.4rem; }
.rotating { font-size: clamp(14px, 3.8vw, 17px); margin-bottom: 0.5rem; }
/* Buttons stay inline on mobile — Subscribe + ghost link side by side,
both compact so they fit within the column. */
.cta-row {
flex-direction: row;
gap: 1.2rem;
align-items: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.cta-row .btn--primary { padding: 0.75rem 1.3rem; font-size: 12px; }
.cta-row .btn--ghost { padding: 0.55rem 0; font-size: 12px; }
.chapter { padding: 1.4rem var(--gutter) 0; }
.chapter__title { font-size: 26px; }
.chapter__head { margin-bottom: 2rem; }
}
/* =============================================================================
§02 Imprint + §03 Premise
(consolidated from styles.proof.css)
============================================================================= */
/* =============================================================================
nodacop — styles.proof.css
Section-specific CSS for §02 Imprint and §03 Premise.
Source of truth: SECTIONS.md §02–§03, DESIGN.md §3–§7.
Tokens used (declared in styles.css):
--cream --ink --terracotta --dusty-blue --kraft
Patterns reused:
.chapter, .chapter__head, .chapter__title, .chapter__num, .chapter__name,
.chapter__sep, .counter, .rule, .plaster, .lede, .dropcap, .eyebrow,
.method__aside (kraft panel pattern, mirrored in .dedication).
============================================================================= */
/* ─────────────────────── §02 Imprint — printed dedications ─────────────────────── */
/* Three testimonial blocks. Each card is a content shell; the framing
comes from the variant modifier (--bar / --hairline / --quote). */
.imprint__dedications {
position: relative;
z-index: 1;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
max-width: 1200px;
}
/* Base testimonial card — minimal layout shell. All three trial variants
(--bar / --hairline / --quote) keep the same content order and override
the framing on top. No kraft fill in the trial; cream shows through. */
.dedication {
position: relative;
padding: 1.4rem 1.6rem 1.4rem;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 1.4rem;
min-height: 22rem;
}
/* Logo slot — fixed visual height so the three cards stay aligned regardless
of whether the placeholder text or a real logo image is present. */
.dedication__logo-slot {
display: flex;
align-items: center;
justify-content: center;
min-height: 3rem;
padding: 0.4rem 0;
}
.dedication__logo-placeholder {
font-family: var(--display);
font-variation-settings: "opsz" 36;
font-style: italic;
font-weight: 400;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--ink);
opacity: 0.45;
}
/* When swapped to a real logo: keep it constrained to the slot, never bigger. */
.dedication__logo {
max-width: 60%;
max-height: 2.6rem;
width: auto;
height: auto;
object-fit: contain;
}
/* ─── Vertical bar — left-edge terracotta marker, the chosen frame ─── */
.dedication--bar {
border-left: 4px solid var(--terracotta);
padding-left: 1.6rem;
}
/* ─── Kraft fill — soft (kraft at 25% over cream, light grain) ─── */
.dedication--kraft-soft {
background-color: rgba(214, 200, 174, 0.25);
/* Same grain pattern as the original kraft, but at half opacity so the
texture only just registers — paper feel without the weight. */
background-image: url("data:image/svg+xml;utf8,\
");
background-size: 280px 280px;
}
/* ─── Kraft fill — medium (kraft at 45% over cream, light grain) ─── */
.dedication--kraft {
background-color: rgba(214, 200, 174, 0.45);
background-image: url("data:image/svg+xml;utf8,\
");
background-size: 280px 280px;
}
.dedication__quote {
font-family: var(--display);
font-variation-settings: "opsz" 36;
font-weight: 400;
font-style: italic;
font-size: 19px;
line-height: 1.4;
color: var(--ink);
margin: 0;
padding: 0;
border: 0;
align-self: center;
text-align: left;
}
.dedication__quote em { font-style: italic; }
.dedication__attrib {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 0.25rem;
color: var(--ink);
}
.dedication__name {
font-family: var(--body);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0.85;
}
.dedication__role {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 18;
font-size: 13.5px;
opacity: 0.78;
}
/* ─────────────────────── §03 Premise — editorial note ─────────────────────── */
/* Single column, wide measure (~70ch per spec). Drop cap on the lede.
The .dropcap class itself is declared in styles.css; Pretext sizes it
at runtime. We only set the column geometry here. */
/* §03 acts as the positioning context for hand-scrawled editor's marks —
keywords get a terracotta circle, with a Caveat-font margin note flying
out to the left or right gutter (alternating). */
.premise__note {
position: relative;
z-index: 1;
max-width: 1100px;
margin: 0 0 2rem; /* left-aligned with chapter head; gutters live INSIDE */
}
/* Text column left-aligned within premise__note. All margin notes live in
the right gutter (which is wide). Body 16.5 / lede 17 — half-point uptick. */
.premise__note p {
max-width: 60ch;
font-size: 16.5px;
line-height: 1.55;
margin: 0 0 1.4em;
color: var(--ink);
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
position: relative;
}
.premise__note p:last-child { margin-bottom: 0; }
.premise__note .premise__lede { font-size: 17px; }
/* ── Circled keyword: hand-drawn terracotta oval around the word ── */
.circled {
position: relative;
display: inline-block;
white-space: nowrap; /* keep the phrase on one line — circle stays whole */
font-style: inherit;
cursor: help; /* visual cue: hover for editor's note */
}
.circled::before {
content: '';
position: absolute;
inset: -0.18em -0.55em -0.12em -0.55em;
border: 1.5px solid var(--terracotta);
/* Asymmetric radii + slight rotation = the "drawn by hand" feel without SVG. */
border-radius: 56% 60% 50% 64% / 50% 60% 50% 60%;
transform: rotate(-1.8deg);
pointer-events: none;
opacity: 0.85;
}
/* ── Margin note: Caveat scrawl. Two modes:
· Desktop (>900px): position absolute, JS sets top + left/right per line.
Hidden by default, .is-active toggled on .circled hover.
· Mobile (<=900px): position static, flows as a block element after each
, visible by default with a leading "↳" arrow prefix. ── */
.margin-note {
position: absolute;
width: 12rem;
font-family: 'Caveat', 'Bradley Hand', cursive;
font-weight: 500;
font-size: 19px;
line-height: 1.15;
color: var(--terracotta);
opacity: 0;
pointer-events: none;
z-index: 2;
transition: opacity 260ms ease, transform 260ms ease;
}
.margin-note--right {
text-align: left;
transform: rotate(-2.5deg) translateY(6px);
transform-origin: left top;
}
.margin-note--left {
text-align: right;
transform: rotate(1.8deg) translateY(6px);
transform-origin: right top;
}
.margin-note.is-active { opacity: 0.92; }
.margin-note--right.is-active { transform: rotate(-2.5deg) translateY(0); }
.margin-note--left.is-active { transform: rotate(1.8deg) translateY(0); }
/* ── SVG overlay carrying the hand-scrawled connector arrows. The wobble
filter (defined in the SVG defs from JS) gives each path the look of an
uneven pen stroke. */
.margin-arrows {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
z-index: 1;
}
.margin-arrow {
fill: none;
stroke: var(--terracotta);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0;
transition: opacity 280ms ease;
}
.margin-arrow.is-active { opacity: 0.78; }
/* Mobile: gutters disappear. Editor's marks switch to a footnote convention —
the oval around each keyword becomes a superscript asterisk, and the
inline notes below the paragraph carry a matching * prefix. */
@media (max-width: 900px) {
.margin-arrows { display: none; }
.circled { cursor: auto; }
/* Drop the hand-drawn oval; replace with an inline asterisk after the word. */
.circled::before { display: none; }
.circled::after {
content: '*';
color: var(--terracotta);
font-family: var(--display);
font-weight: 600;
margin-left: 0.08em;
opacity: 0.9;
}
.margin-note {
position: static;
width: auto;
max-width: 36ch;
margin: 0.4rem 0 1.4rem;
opacity: 0.92;
transform: rotate(-1deg);
transform-origin: left center;
text-align: left;
pointer-events: auto;
}
.margin-note--right,
.margin-note--left {
transform: rotate(-1deg);
text-align: left;
}
/* Override the active-state transforms so the slight tilt stays consistent. */
.margin-note.is-active,
.margin-note--right.is-active,
.margin-note--left.is-active { transform: rotate(-1deg); }
.margin-note::before {
content: '*';
color: var(--terracotta);
font-family: var(--display);
font-weight: 600;
font-style: normal;
margin-right: 0.4em;
opacity: 0.9;
}
}
/* ─────────────────────── responsive ─────────────────────── */
/* Tablet — dedications stay 3-up until they get crowded. */
@media (max-width: 1100px) {
.imprint__dedications { gap: 1.2rem; }
.dedication__quote { font-size: 19px; }
}
/* Mobile — dedications stack one per row. */
@media (max-width: 760px) {
.imprint__dedications {
grid-template-columns: 1fr;
gap: 1.2rem;
}
.dedication {
min-height: 0;
padding: 1.6rem 1.4rem 1.4rem;
}
.dedication__quote { font-size: 19px; }
.premise__note { max-width: 100%; }
.premise__note p {
font-size: 17px;
text-align: left;
hyphens: none;
-webkit-hyphens: none;
}
.premise__note .premise__lede { font-size: 18px; }
}
/* =============================================================================
§05 Manifest + §07 Process + §11 Notes
(consolidated from styles.prose.css)
============================================================================= */
/* =============================================================================
nodacop — prose middle (§05 Manifest · §07 Process · §11 Notes)
Source of truth: DESIGN.md + SECTIONS.md.
Three list/prose-based chapters that visually rhyme:
– Roman numerals in display italic, terracotta
– Display-serif title + body sans elaboration
– Footnote marks (* † ‡) in display italic, terracotta
– Cream backdrop, ink rules, kraft only where panels are warranted
Every color goes through one of: var(--cream) · var(--ink) · var(--terracotta)
· var(--dusty-blue) · var(--kraft). No hex literals here.
============================================================================= */
/* Screen-reader-only utility — visually hides text but leaves it in the
accessibility tree for keyboard / assistive-tech users. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ─────────────────────── §11 notes — Q&A as editorial endnotes ─────────────────────── */
.notes {
list-style: none;
margin: 0;
padding: 0;
max-width: 880px;
position: relative;
z-index: 1;
border-top: 1px solid rgba(27, 24, 19, 0.4);
}
.notes__entry {
border-bottom: 1px solid rgba(27, 24, 19, 0.18);
}
/* native — accessibility comes free.
Reset disclosure-triangle on summary, replace with our own typeset chevron. */
.notes__details {
/* no padding here — summary owns the click target */
}
.notes__summary {
display: grid;
grid-template-columns: 3rem 1fr 1.4rem;
align-items: baseline;
column-gap: 1.2rem;
padding: 1.3rem 0;
cursor: pointer;
list-style: none;
user-select: none;
transition: color var(--hover) ease;
}
.notes__summary::-webkit-details-marker { display: none; }
.notes__summary::marker { display: none; content: ""; }
.notes__summary:hover { color: var(--terracotta); }
.notes__summary:hover .notes__num { opacity: 1; }
.notes__summary:focus-visible {
outline: 2px solid var(--terracotta);
outline-offset: 4px;
}
.notes__num {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 24;
font-size: 18px;
line-height: 1.4;
color: var(--terracotta);
opacity: 0.85;
letter-spacing: 0;
}
.notes__q {
font-family: var(--display);
font-variation-settings: "opsz" 36;
font-weight: 400;
font-size: clamp(20px, 2.2vw, 24px);
line-height: 1.3;
letter-spacing: -0.005em;
color: inherit;
}
.notes__q em { font-style: italic; }
/* chevron — typeset glyph in display italic, rotates on open */
.notes__chevron {
position: relative;
width: 1em;
height: 1em;
align-self: center;
justify-self: end;
transition: transform var(--hover) ease, color var(--hover) ease;
color: var(--ink);
opacity: 0.5;
}
.notes__chevron::before,
.notes__chevron::after {
content: "";
position: absolute;
top: 50%;
width: 9px;
height: 1px;
background: currentColor;
}
.notes__chevron::before { left: 1px; transform: rotate(45deg); transform-origin: left center; }
.notes__chevron::after { right: 1px; transform: rotate(-45deg); transform-origin: right center; }
.notes__details[open] .notes__chevron {
color: var(--terracotta);
opacity: 1;
}
.notes__details[open] .notes__chevron::before { transform: rotate(-45deg); }
.notes__details[open] .notes__chevron::after { transform: rotate(45deg); }
.notes__details[open] .notes__summary {
color: var(--ink);
}
/* answer body — set in body sans, indented under the question */
.notes__a {
padding: 0 1.4rem 1.6rem calc(3rem + 1.2rem); /* aligns under the question, past the numeral column */
font-family: var(--body);
font-size: 17px;
line-height: 1.6;
color: var(--ink);
max-width: 64ch;
opacity: 0.9;
}
.notes__a p { margin: 0; }
.notes__a p + p { margin-top: 0.9em; }
/* qualifier — two columns under Q i */
.notes__a--qualifier {
max-width: none;
padding-right: 0;
padding-bottom: 1.8rem;
}
.notes__qualifier {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.4rem 3rem;
padding: 1rem 1.6rem 1.4rem;
background-color: var(--kraft);
background-image: url("data:image/svg+xml;utf8,\
");
background-size: 280px 280px;
border: 1px solid rgba(27, 24, 19, 0.16);
}
.notes__col-head {
font-family: var(--body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--terracotta);
margin: 0 0 0.9rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid rgba(27, 24, 19, 0.3);
}
.notes__col-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.7rem;
}
.notes__col-list li {
font-family: var(--body);
font-size: 16px;
line-height: 1.5;
color: var(--ink);
padding-left: 1.1em;
text-indent: -1.1em;
}
.notes__col-list li::before {
content: "·";
color: var(--terracotta);
font-family: var(--display);
font-style: italic;
margin-right: 0.55em;
}
@media (max-width: 760px) {
.notes__summary {
grid-template-columns: 2.2rem 1fr 1.2rem;
column-gap: 0.9rem;
padding: 1.1rem 0;
}
.notes__num { font-size: 16px; }
.notes__q { font-size: 19px; }
.notes__a {
padding: 0 0 1.4rem calc(2.2rem + 0.9rem);
font-size: 16px;
}
.notes__qualifier {
grid-template-columns: 1fr;
gap: 1.6rem;
padding: 1rem 1.2rem 1.2rem;
}
}
/* =============================================================================
§08 Price + §09 Compare + §10 Team + §12 Subscribe
(consolidated from styles.close.css)
============================================================================= */
/* =============================================================================
nodacop — closing block stylesheet
§08 Price card · §09 Comparative spec sheet · §10 Team · §12 Subscribe
Source of truth: DESIGN.md + SECTIONS.md.
Tokens only — var(--cream), var(--ink), var(--terracotta), var(--dusty-blue),
var(--kraft). No new colors. No gradients. Reuses .btn, .btn--primary,
.btn--ghost, .rule, .footnote__mark, .chapter, .chapter__head from styles.css.
============================================================================= */
/* ─────────────────────── §08 — Price card ─────────────────────── */
/* Editorial rate card. Two-column grid: terms list on the left, value-math
sidebar (sticky, terracotta-tinted) on the right as an annotation. The
price reveal sits below as a horizontal row — eyebrow / amount + Subscribe
button / terms — pinned at the bottom of the section. */
/* The article itself is the grid. The aside lives in the right column
alongside the LIST row only — when the user reaches the bottom of
the conditions list, the aside's cell ends and its sticky releases
right before the terracotta line of the reveal. The reveal stays in
the left column (same visual width as before); the right cell of the
reveal row is empty. */
.price {
position: relative;
z-index: 1;
padding: 2.4rem clamp(1.6rem, 4vw, 3rem) 2.4rem;
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 240px;
grid-template-areas:
"list aside"
"reveal cta";
column-gap: 3rem;
row-gap: 2.4rem;
}
.price__list { grid-area: list; }
.price__reveal { grid-area: reveal; }
/* The track is the grid item — fills row 1 right column, height = list
height (default grid stretch). The sticky aside lives INSIDE the track,
so its containing block is the track box (not the whole .price). When
the user scrolls past the list, the track ends and the sticky releases
right before the terracotta line of the reveal. */
.price__aside-track {
grid-area: aside;
}
.price__aside {
position: sticky;
/* Sticky offset accounts for the fixed topbar (96 px) plus 1.5rem of
breathing room — without this the aside reads as "dragged" by the
masthead because its top edge clips behind the topbar. */
top: calc(var(--topbar-h) + 1.5rem);
padding: 1.5rem 1.4rem 1.7rem;
border-left: 3px solid var(--terracotta);
background: rgba(184, 82, 58, 0.08);
}
.price__aside-eyebrow {
font-family: var(--display);
font-style: italic;
font-size: 13px;
color: var(--terracotta);
margin: 0 0 1rem;
}
.price__aside-amount {
font-family: var(--display);
font-variation-settings: "opsz" 144;
font-weight: 700;
font-size: 36px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--terracotta);
margin: 0;
font-feature-settings: "tnum" 1, "lnum" 1;
}
.price__aside-tag {
font-family: var(--body);
font-weight: 500;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.7;
margin: 0.3rem 0 1.1rem;
}
.price__aside-industry {
font-family: var(--display);
font-size: 20px;
color: rgba(27, 24, 19, 0.55);
text-decoration: line-through;
text-decoration-thickness: 1.5px;
margin: 0;
font-feature-settings: "tnum" 1, "lnum" 1;
}
.price__aside-industry-tag {
font-family: var(--body);
font-weight: 500;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.55;
margin: 0.3rem 0 0;
}
/* Roman-numeral inclusion list — typeset as an editorial enumeration, not a
bullet list. Numerals in italic display, lines in body. */
.price__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1rem;
}
.price__item {
display: grid;
grid-template-columns: 2.6rem 1fr;
align-items: baseline;
gap: 0.8rem;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(27, 24, 19, 0.14);
}
.price__item:last-child { border-bottom: 0; }
.price__num {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 24;
font-size: 16px;
color: var(--terracotta);
text-align: right;
padding-right: 0.4rem;
opacity: 0.9;
}
.price__line {
font-family: var(--body);
font-size: 17px;
line-height: 1.5;
margin: 0;
color: var(--ink);
}
.price__nowrap { white-space: nowrap; }
/* Reveal — the price + Subscribe pinned at the bottom of the section.
Terracotta top border draws the eye; price sits left, button right,
in a flex row. Terms below in italic display. */
.price__reveal {
padding-top: 1.6rem;
border-top: 2px solid var(--terracotta);
}
.price__reveal-eyebrow {
font-family: var(--body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terracotta);
margin: 0 0 0.5rem;
}
/* CTA cluster — its own grid item in the right column of row 2.
align-self: center vertically aligns it with the price line of the
reveal (which dominates the cell vertically). Stacks the two buttons
(Join today / Book a Call) plus the refund + scarcity microcopy. */
.price__reveal-cta {
grid-area: cta;
align-self: center;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.price__reveal-btn {
width: 100%;
text-align: center;
padding: 1.05em 1.5em;
font-size: 14px;
letter-spacing: 0.18em;
white-space: nowrap;
}
.price__reveal-call {
align-self: center;
padding: 0.5em 0;
font-size: 13px;
letter-spacing: 0.1em;
}
.price__reveal-refund,
.price__reveal-scarcity {
font-family: var(--display);
font-style: italic;
font-size: 13px;
line-height: 1.4;
margin: 0;
}
.price__reveal-refund {
color: rgba(27, 24, 19, 0.72);
}
.price__reveal-scarcity {
color: var(--terracotta);
opacity: 0.95;
}
.price__reveal-price {
font-family: var(--display);
font-variation-settings: "opsz" 144;
font-weight: 700;
font-size: clamp(40px, 5.5vw, 56px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0;
font-feature-settings: "tnum" 1, "lnum" 1;
}
.price__reveal-per {
font-family: var(--display);
font-style: italic;
font-weight: 400;
font-size: 0.36em;
color: rgba(27, 24, 19, 0.6);
margin-left: 0.15em;
letter-spacing: 0;
}
.price__reveal-terms {
font-family: var(--display);
font-style: italic;
font-size: 14px;
color: rgba(27, 24, 19, 0.72);
margin: 0.7rem 0 0;
}
.price__reveal-anchor {
font-family: var(--body);
font-size: 14px;
line-height: 1.5;
color: var(--ink);
opacity: 0.8;
margin: 0.8rem 0 0;
max-width: 42ch;
}
@media (max-width: 760px) {
.price {
padding: 1.6rem 1.4rem 1.6rem;
/* Single column — aside FIRST (right under the chapter title), then
list, then reveal, then Subscribe CTA below as its own full-width
row. Aside goes static on mobile. */
grid-template-columns: 1fr;
grid-template-areas:
"aside"
"list"
"reveal"
"cta";
column-gap: 0;
row-gap: 1.4rem;
}
.price__aside {
position: static;
top: auto;
}
.price__line { font-size: 16px; }
.price__reveal-price {
font-size: clamp(40px, 11vw, 52px);
margin: 0 0 0.7rem;
}
.price__reveal-cta {
align-self: stretch;
}
.price__reveal-btn { padding: 1.05rem 1.4rem; }
}
/* ─────────────────────── §09 — Comparative spec sheet ─────────────────────── */
/* 4-column 1960s-catalog table. Tabular figures throughout. nodacop column
gets a faint terracotta tint via rgba on the column + th-tint. The Quality
row is the kill row — buyer-quote in italic display, called out subtly. */
.compare {
margin: 0 auto;
max-width: 1200px;
padding: 0;
}
.compare__caption {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.2rem;
margin: 0 0 1rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid rgba(27, 24, 19, 0.4);
}
.compare__eyebrow {
font-family: var(--body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--terracotta);
}
.compare__meta {
font-family: var(--display);
font-style: italic;
font-size: 14px;
opacity: 0.7;
}
/* Horizontal scroll on narrow viewports — table keeps catalog-grade density
on desktop, but won't overflow the layout on mobile. Native scrollbar
hidden on mobile (it was reading as a heavy UI chrome strip); the swipe
itself is the affordance. */
.compare__scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
scrollbar-width: none; /* Firefox */
}
.compare__scroll::-webkit-scrollbar { display: none; } /* Chromium / Safari */
.compare__table {
width: 100%;
border-collapse: collapse;
font-family: var(--body);
font-size: 15px;
line-height: 1.4;
color: var(--ink);
/* Tabular figures across the whole table — DESIGN.md §3 rule for spec sheets. */
font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1;
table-layout: fixed;
}
.compare__col { width: auto; }
.compare__col--label { width: 22%; }
.compare__col--us {
/* Faint terracotta tint on the nodacop column — ~8% over kraft/cream so it
reads as a highlight without breaking the palette rule. */
background-color: rgba(184, 82, 58, 0.07);
}
/* Column header row */
.compare__th {
font-family: var(--body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
text-align: left;
vertical-align: bottom;
padding: 1.4rem 1rem 0.9rem;
border-bottom: 1.5px solid var(--ink);
color: var(--ink);
white-space: normal;
}
.compare__th--label { text-align: left; }
.compare__th--us {
/* The "nodacop" column header is italic display — the spec calls for it. */
font-family: var(--display);
font-style: normal;
font-weight: 400;
font-size: 22px;
letter-spacing: -0.01em;
text-transform: lowercase;
color: var(--terracotta);
background-color: rgba(184, 82, 58, 0.1);
border-bottom: 1.5px solid var(--terracotta);
padding-top: 1rem;
}
.compare__th--us em { font-style: italic; }
.compare__th-eyebrow {
font-family: var(--display);
font-style: italic;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: lowercase;
color: var(--ink);
opacity: 0.55;
font-weight: 400;
}
.compare__th-sub {
display: block;
font-family: var(--display);
font-style: italic;
font-weight: 400;
font-size: 12px;
letter-spacing: 0.02em;
text-transform: none;
opacity: 0.65;
margin-top: 0.2em;
}
/* Body rows */
.compare__row-label {
font-family: var(--body);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: left;
vertical-align: top;
padding: 1.1rem 1rem 1.1rem 0;
color: var(--ink);
opacity: 0.85;
border-bottom: 1px solid rgba(27, 24, 19, 0.22);
}
.compare__cell {
vertical-align: top;
padding: 1.1rem 1rem;
border-bottom: 1px solid rgba(27, 24, 19, 0.18);
color: var(--ink);
}
.compare__cell--us {
background-color: rgba(184, 82, 58, 0.07);
color: var(--ink);
font-weight: 500;
border-bottom-color: rgba(184, 82, 58, 0.32);
}
.compare__num {
font-family: var(--body);
font-weight: 500;
font-size: 15.5px;
letter-spacing: 0.005em;
font-feature-settings: "tnum" 1, "lnum" 1;
white-space: nowrap;
}
.compare__cell-sub {
display: block;
font-family: var(--display);
font-style: italic;
font-weight: 400;
font-size: 13px;
opacity: 0.7;
margin-top: 0.15em;
}
/* Checkmark glyph — small typeset ✓ in terracotta, slightly raised. */
.compare__check {
display: inline-block;
color: var(--terracotta);
font-size: 14px;
margin-right: 0.35em;
line-height: 1;
vertical-align: 0.02em;
font-weight: 500;
}
/* Em-dash absence marker — dusty-blue, distinguishes a deliberate "no" from a
blank space. */
.compare__dash {
display: inline-block;
color: var(--dusty-blue);
margin-right: 0.4em;
font-weight: 500;
}
/* Kill row — Quality. Subtle background lift + italic display quote in the AI
column lands the buyer line. */
.compare__row--kill .compare__cell,
.compare__row--kill .compare__row-label {
padding-top: 1.4rem;
padding-bottom: 1.4rem;
}
.compare__quote {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 24;
font-size: 14.5px;
line-height: 1.45;
color: var(--ink);
opacity: 0.92;
display: inline;
}
/* Last row — no double-border with the table's bottom edge. */
.compare__table tbody tr:last-child .compare__cell,
.compare__table tbody tr:last-child .compare__row-label {
border-bottom: 1.5px solid var(--ink);
}
@media (max-width: 900px) {
.compare__table { min-width: 720px; font-size: 14px; }
.compare__th--us { font-size: 18px; }
}
@media (max-width: 760px) {
.compare__caption { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}
/* ─────────────────────── §09b — Compare table mobile (Option B · tabbed) ───────────────────────
Mobile view of §07: pills pick which competitor to compare nodacop
against; the rows below show a 2-column comparison. All values live
in the DOM at once — CSS hides the inactive ones via [data-active]
on the parent. The desktop table is hidden on mobile. */
.compare__m { display: none; }
@media (max-width: 760px) {
.compare__scroll { display: none; }
.compare__m { display: block; max-width: 100%; }
.compare__m-pills {
display: flex;
gap: 0.4rem;
margin: 0 0 1.4rem;
flex-wrap: wrap;
}
.compare__m-pill {
flex: 1;
min-width: 0;
padding: 0.6rem 0.5rem;
border: 1px solid rgba(27, 24, 19, 0.28);
background: transparent;
font-family: var(--body);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
cursor: pointer;
border-radius: 4px;
text-align: center;
transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.compare__m-pill:hover { border-color: var(--terracotta); color: var(--terracotta); }
.compare__m-pill.is-active {
background: var(--terracotta);
color: var(--cream);
border-color: var(--terracotta);
}
.compare__m-rows {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.compare__m-row {
display: grid;
gap: 0.4rem;
padding: 0.7rem 0;
border-bottom: 1px solid rgba(27, 24, 19, 0.14);
}
.compare__m-row:last-child { border-bottom: 0; }
.compare__m-criterion {
font-family: var(--body);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--terracotta);
margin: 0 0 0.2rem;
}
.compare__m-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
}
.compare__m-cell {
padding: 0.55rem 0.65rem;
border: 1px solid rgba(27, 24, 19, 0.14);
background: rgba(214, 200, 174, 0.18);
}
.compare__m-cell--us {
background: rgba(184, 82, 58, 0.10);
border-color: rgba(184, 82, 58, 0.4);
}
.compare__m-name {
display: block;
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(27, 24, 19, 0.55);
margin: 0 0 0.3rem;
}
.compare__m-cell--us .compare__m-name {
color: var(--terracotta);
opacity: 1;
}
.compare__m-val {
font-family: var(--body);
font-size: 13px;
line-height: 1.35;
color: var(--ink);
margin: 0;
}
.compare__m-val em { font-style: italic; }
.compare__m-num {
font-family: var(--display);
font-weight: 700;
font-feature-settings: "tnum" 1, "lnum" 1;
font-size: 15px;
letter-spacing: -0.005em;
}
.compare__m-cell--us .compare__m-num { color: var(--terracotta); }
.compare__m-sub {
display: inline;
color: rgba(27, 24, 19, 0.6);
font-style: italic;
}
/* Reuse the existing check/dash markers from the desktop table — they
work fine at this scale. */
.compare__m-val .compare__check { color: var(--terracotta); margin-right: 0.25em; }
.compare__m-val .compare__dash { color: rgba(27, 24, 19, 0.45); margin-right: 0.25em; }
/* ─── Visibility toggle: only the active competitor's name + value
render in the right cell. CSS-only switching via the parent's
data-active attribute (set by JS on pill click). ─── */
.compare__m[data-active="hire"] .compare__m-name--agency,
.compare__m[data-active="hire"] .compare__m-name--ai,
.compare__m[data-active="hire"] .compare__m-val--agency,
.compare__m[data-active="hire"] .compare__m-val--ai,
.compare__m[data-active="agency"] .compare__m-name--hire,
.compare__m[data-active="agency"] .compare__m-name--ai,
.compare__m[data-active="agency"] .compare__m-val--hire,
.compare__m[data-active="agency"] .compare__m-val--ai,
.compare__m[data-active="ai"] .compare__m-name--hire,
.compare__m[data-active="ai"] .compare__m-name--agency,
.compare__m[data-active="ai"] .compare__m-val--hire,
.compare__m[data-active="ai"] .compare__m-val--agency { display: none; }
}
/* ─────────────────────── §10 — Team (Daniel + Noela) ─────────────────────── */
/* Two bio blocks side-by-side on desktop, stacked on mobile. Each: name in
display serif, role in italic small caps, body paragraphs at body size.
Drop cap on Daniel's first paragraph reuses the existing .dropcap class. */
.team {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 4rem 5rem;
max-width: 1200px;
align-items: start;
}
.team__bio {
max-width: 56ch;
}
.team__head {
margin: 0 0 1.6rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(27, 24, 19, 0.4);
}
.team__name {
font-family: var(--display);
font-variation-settings: "opsz" 60;
font-weight: 400;
font-size: clamp(36px, 4.4vw, 48px);
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 0 0.6rem;
color: var(--ink);
}
.team__role {
font-family: var(--display);
font-style: italic;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-feature-settings: "smcp" 1;
color: var(--terracotta);
margin: 0;
opacity: 0.95;
}
.team__role em { font-style: italic; }
.team__body {
font-family: var(--body);
font-size: 16.5px;
line-height: 1.6;
color: var(--ink);
/* Body 16.5 / lede 17 — half-point uptick on the opening paragraph,
matched across §03, §04, §08. Keep the lede's drop-cap float contained. */
overflow: hidden;
}
.team__body p { margin: 0 0 1.1em; }
.team__body p:last-child { margin-bottom: 0; }
.team__lede { font-size: 17px; }
/* Visible bracketed placeholder marker — dusty-blue, italic display, so the
founder spots them and the page reads as a working draft, not as final. */
.team__placeholder {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 18;
color: var(--dusty-blue);
white-space: normal;
}
.team__placeholder--inline {
font-size: 0.6em;
letter-spacing: 0.02em;
vertical-align: 0.1em;
opacity: 0.85;
margin-left: 0.2em;
}
.team__placeholder--block {
display: block;
padding: 0.9rem 1rem;
border: 1px dashed rgba(95, 118, 130, 0.5);
background-color: rgba(95, 118, 130, 0.05);
color: var(--dusty-blue);
font-size: 15.5px;
line-height: 1.5;
}
/* Shared close — "brains, not meetings" objection-killer + action, full width
beneath the two bios. Carries the §08 CTA cluster (Join today + Book a Call). */
.team__close {
margin: 3rem 0 0;
padding: 2.2rem 2.4rem;
border: 1px solid rgba(27, 24, 19, 0.18);
background-color: rgba(27, 24, 19, 0.035);
max-width: 1200px;
}
.team__close .team__close-eyebrow {
font-family: var(--display);
font-style: italic;
font-size: 13px;
line-height: 1.2;
letter-spacing: 0.12em;
text-transform: uppercase;
font-feature-settings: "smcp" 1;
color: var(--terracotta);
margin: 0 0 1.4rem;
max-width: none;
}
.team__close p {
font-family: var(--body);
font-size: 17px;
line-height: 1.6;
color: var(--ink);
margin: 0 0 1.1em;
max-width: 64ch;
}
.team__close-line {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 28;
font-size: clamp(20px, 2.2vw, 24px);
line-height: 1.3;
color: var(--ink);
margin: 0 0 2rem !important;
}
.team__cta {
display: flex;
flex-wrap: wrap;
gap: 2.4rem;
align-items: baseline;
}
/* Optional credit line — small caps row beneath the two bios. */
.team__credit {
margin: 4rem 0 0;
padding-top: 1.4rem;
border-top: 1px solid rgba(27, 24, 19, 0.25);
font-family: var(--body);
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 500;
color: var(--ink);
opacity: 0.85;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4em;
max-width: 1200px;
}
.team__credit-label { color: var(--terracotta); }
.team__credit-sep { opacity: 0.55; margin: 0 0.3em; }
.team__credit-dot { opacity: 0.45; margin: 0 0.2em; }
.team__credit .team__placeholder {
font-size: 14px;
letter-spacing: 0.02em;
text-transform: none;
}
@media (max-width: 900px) {
.team { grid-template-columns: 1fr; gap: 3rem; }
.team__bio { max-width: 100%; }
}
@media (max-width: 760px) {
.team__name { font-size: 34px; }
.team__body { font-size: 16.5px; }
.team__close { padding: 1.6rem 1.4rem; }
.team__close p { font-size: 16px; }
.team__cta { gap: 1.4rem; align-items: center; }
}
/* ─────────────────────── §12 — Final Subscribe CTA ─────────────────────── */
/* The closing block. Restated promise at hero scale. Small-caps benefit strip.
Same .btn pair as §08 and the topbar so the buyer recognizes the close. */
.subscribe {
max-width: 1100px;
margin: 0 auto;
padding: 4rem 0 0;
text-align: center;
}
/* Restated promise — split into two beats, each on a single line. The
first line lands the offer in display weight; the second, smaller and
italic, completes it. Reads as "the deal" then "the timing". */
.subscribe__promise {
font-family: var(--display);
font-variation-settings: "opsz" 144;
font-weight: 400;
line-height: 1.0;
letter-spacing: -0.015em;
margin: 0 auto 4.4rem;
color: var(--ink);
}
.subscribe__promise em { font-style: italic; }
.subscribe__promise-lead,
.subscribe__promise-tail {
display: block;
}
.subscribe__promise-lead {
/* Now a full sentence, so it wraps rather than running off-edge; stepped
down from the old short-phrase scale and given a measure to balance. */
font-size: clamp(40px, 5.4vw, 68px);
max-width: 18ch;
margin: 0 auto;
}
.subscribe__promise-tail {
font-style: italic;
font-size: clamp(26px, 3.4vw, 48px);
line-height: 1.05;
margin-top: 0.55em;
opacity: 0.94;
}
@media (max-width: 760px) {
.subscribe__promise-lead,
.subscribe__promise-tail { white-space: normal; }
}
/* Small-caps benefit strip — 5 items, em-dash separated. */
.subscribe__strip {
list-style: none;
margin: 0 auto 3rem;
padding: 1rem 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: 0.7em 0.9em;
border-top: 1px solid rgba(27, 24, 19, 0.25);
border-bottom: 1px solid rgba(27, 24, 19, 0.25);
max-width: 920px;
}
.subscribe__item {
font-family: var(--body);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
opacity: 0.85;
}
.subscribe__sep {
font-family: var(--display);
font-style: italic;
color: var(--terracotta);
opacity: 0.7;
font-size: 16px;
line-height: 1;
}
/* CTA pair — same .btn pair as §08. Near-centered (the one place SECTIONS.md
permits centering), still side-by-side, never stacked on desktop. */
.subscribe__cta {
display: inline-flex;
flex-wrap: wrap;
gap: 2.4rem;
align-items: baseline;
justify-content: center;
margin: 0 auto 2.4rem;
}
@media (max-width: 760px) {
.subscribe__promise { font-size: clamp(44px, 11vw, 72px); }
.subscribe__strip { gap: 0.4em 0.7em; padding: 0.8rem 0; }
.subscribe__item { font-size: 11.5px; letter-spacing: 0.14em; }
.subscribe__cta { flex-direction: column; align-items: center; gap: 1.4rem; }
}
/* ─────────── §10 — negative palette ───────────
The closing chapter flips the page: terracotta ground, cream typography.
Every accent that was terracotta in the rest of the book pivots to kraft
so nothing collapses into the new background. Scoped to #subscribe so the
shared classes (.btn--primary, .chapter__num, .rule …) keep their default
styling everywhere else. */
#subscribe {
/* Three-layer ground: paper grain (same SVG-feTurbulence the rest of the
site uses for its texture) on top, vertical darkening gradient in the
middle to lift the closing weight, solid terracotta beneath. The grain
opacity is bumped slightly (0.22 vs the html's 0.18) so the texture
reads against the saturated terracotta. */
background-color: var(--terracotta);
background-image:
url("data:image/svg+xml;utf8,\
"),
linear-gradient(to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.06) 50%,
rgba(0, 0, 0, 0.16) 100%);
background-size: 320px 320px, 100% 100%;
background-repeat: repeat, no-repeat;
color: var(--cream);
padding-bottom: 5rem;
/* Flush against the colophon dark band below — no cream gap between the
two closing surfaces. */
margin-bottom: 0;
}
/* The ink-tinted plaster wash darkens the terracotta unhelpfully — drop it
so the negative band stays clean. */
#subscribe .plaster { display: none; }
/* Hero promise — biggest text on the page, full cream. */
#subscribe .subscribe__promise { color: var(--cream); }
/* Benefit strip — cream items + cream-alpha hairlines + kraft em-dashes. */
#subscribe .subscribe__strip {
border-top-color: rgba(242, 234, 219, 0.4);
border-bottom-color: rgba(242, 234, 219, 0.4);
}
#subscribe .subscribe__item { color: var(--cream); opacity: 0.92; }
#subscribe .subscribe__sep { color: var(--kraft); opacity: 0.75; }
/* CTA — primary button inverts (cream block on terracotta, terracotta type);
ghost link stays transparent but in cream so it pairs with the primary. */
#subscribe .btn--primary {
background: var(--cream);
color: var(--terracotta);
border-color: var(--cream);
}
#subscribe .btn--primary:hover {
background: var(--ink);
color: var(--cream);
border-color: var(--ink);
}
#subscribe .btn--ghost {
color: var(--cream);
border-bottom-color: var(--cream);
}
#subscribe .btn--ghost:hover {
color: var(--kraft);
border-bottom-color: var(--kraft);
}
/* Selection on a terracotta ground reads better as a cream highlight. */
#subscribe ::selection { background: var(--cream); color: var(--terracotta); }