/* Shared by index.html and letters.html. Kept in one file so the two pages
cannot drift apart visually — admin.html has its own, separate system.
Palette: cream is the base. Navy is no longer the background — it is the
dark anchor, used deliberately for the hero band, the newsletter card and
the footer. Gold splits in two: --gold is decorative (fills, rules, active
underlines) and --gold-ink is the darker text/link tone that stays legible
on cream. Never use --gold for body-size text. */
:root{
--cream:#FAF8F3;
--navy:#10192C;
--navy-soft:#3A4258;
--gold:#C9A84C;
--gold-lt:#DCC079;
--gold-ink:#9C7A28;
--rule:#E4DFD1;
--meta:#8B8878;
/* A shade above cream, so a card reads as lifted off the page rather than
drawn on it. Only for raised surfaces — the page ground stays --cream. */
--card:#FFFDF8;
/* Text tones for use *inside* the navy bands, where cream is the ink. */
--on-navy:#C9CDD9;
--on-navy-dim:#A6ADBE;
--ok:#2E7D5B;
--err:#B3453A;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; background:var(--cream);}
html, body{background:var(--cream) !important; min-height:100%;}
body{
background:var(--cream); color:var(--navy);
font-family:'DM Sans',sans-serif;
-webkit-font-smoothing:antialiased;
font-size:15px;
}
a{color:inherit;}
/* ---------- Header ---------- */
header{
display:flex; align-items:center; justify-content:space-between;
padding:22px 32px; max-width:1000px; margin:0 auto;
}
.wordmark{
font-family:'Instrument Sans',sans-serif; font-weight:600;
font-size:21px; color:var(--navy); text-decoration:none; letter-spacing:-0.02em;
display:flex; align-items:center; gap:9px;
}
/* One group of links, Connect through FAQ, every one styled identically.
The audience split (For Entrepreneurs / For Investors, behind a rule)
left the nav on 2026-09-23: Connect serves both sides and asks which
one after signup, so the header no longer asks first. The pages stay
live at their URLs; they're reached from the homepage's foot. */
nav{display:flex; gap:22px; align-items:center;}
.navGroup{display:flex; gap:22px; align-items:center;}
nav a{
color:var(--navy-soft); text-decoration:none; font-size:13.5px; font-weight:500;
position:relative; padding-bottom:3px;
}
/* Underline grows from the left rather than swapping colour — keeps the
header quiet while still answering the hover. */
nav a::after{
content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px;
background:var(--gold); transition:width .22s ease;
}
nav a:hover::after{width:100%;}
.menuBtn{display:none; background:none; border:none; color:var(--navy); cursor:pointer;}
/* ---------- Hero (full-bleed navy band) ---------- */
.hero{
background:var(--navy); color:var(--cream);
padding:74px 32px 84px; text-align:center;
}
/* The hero lands in sequence — eyebrow, headline, subhead, CTA. `backwards`
rather than `both` on purpose: the fill must not persist, or the settled
transform would outrank the CTA's hover lift and the button would sit dead. */
@keyframes riseIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.hero .eyebrow{
display:block; font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
color:var(--gold); margin-bottom:20px;
animation:riseIn .6s ease backwards;
}
/* The homepage identity eyebrow takes the site's mono label voice.
Spec colour for eyebrows is gold ink, but that's the cream-ground
token — on the hero's navy band it fails contrast, so this makes the
same navy-inversion swap to --gold that .heroQuote makes. Pages
using it must load JetBrains Mono. */
.hero .eyebrow.mono{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:10.5px; letter-spacing:0.2em;
}
.hero h1{
font-family:'Instrument Sans',sans-serif; font-weight:600;
font-size:clamp(34px,5.2vw,50px); line-height:1.1;
letter-spacing:-0.032em; max-width:680px; margin:0 auto; color:var(--cream);
animation:riseIn .6s ease .1s backwards;
}
.hero .lede{
font-size:17px; line-height:1.62; color:var(--on-navy);
max-width:560px; margin:20px auto 0; font-weight:400;
animation:riseIn .6s ease .2s backwards;
}
/* For the one hero whose lede is a full paragraph rather than a subhead
(/entrepreneurs) — 560px would run it to nine centred lines. */
.hero .lede.wide{max-width:660px;}
/* A supporting redirect, not a second CTA — smaller and dimmer than the lede
on purpose, so it answers "am I on the right page?" without pulling
attention off the CTA. Last in the hero's stagger. */
.hero .heroNote{
font-size:13.5px; line-height:1.6; color:var(--on-navy-dim);
max-width:560px; margin:16px auto 0;
animation:riseIn .6s ease .3s backwards;
}
.hero .heroNote a{
color:var(--gold-lt); text-decoration:none;
border-bottom:1px solid rgba(220,192,121,0.45); padding-bottom:1px;
transition:border-color .18s;
}
.hero .heroNote a:hover{border-color:var(--gold-lt);}
/* ---------- Hero pull quote ----------
One class, used on two pages, so the pair cannot drift apart — that is the
whole reason it lives here rather than in either page.
Deliberately the same shape as .pullQuote in the letter bodies (gold mark,
rule, letter-spaced caption) so these read as Harbor's existing pull-quote
rather than a new component. The colours are the navy-band inversion of it:
cream text, and --gold for the caption where the cream-ground version uses
--gold-ink. Italic is the one departure — it separates a quoted voice from
the site's own, which matters when the quote sits inside the hero making
the page's argument. */
.heroQuote{
max-width:600px; margin:34px auto 0; text-align:center;
animation:riseIn .6s ease .3s backwards;
}
.heroQuote .mark{
display:block; font-family:'Instrument Sans',sans-serif; font-weight:600;
font-size:54px; line-height:0.7; color:var(--gold); margin-bottom:14px;
}
.heroQuote blockquote{
font-family:'Instrument Sans',sans-serif; font-weight:600; font-style:italic;
font-size:23px; line-height:1.42; letter-spacing:-0.018em; color:var(--cream);
margin:0;
}
/* The rule is the attribution's em-dash, drawn rather than typed — same as
the letter pull-quotes, where renderBody() strips the dash off the name. */
.heroQuote .rule{
display:block; width:32px; height:2px; background:var(--gold);
margin:22px auto 13px;
}
.heroQuote figcaption{
font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
letter-spacing:0.16em; text-transform:uppercase; color:var(--gold);
}
/* Gold fill, matching the subscribe button — this is the page's primary action. */
.heroCta{
display:inline-block; margin-top:30px; padding:13px 26px;
background:var(--gold); color:var(--navy); text-decoration:none;
font-family:'DM Sans',sans-serif; font-weight:700; font-size:14px;
border-radius:4px;
/* Last in the hero's stagger: eyebrow, headline, lede, quote, then this. */
animation:riseIn .6s ease .4s backwards;
transition:background .15s, transform .2s ease, box-shadow .2s ease;
}
.heroCta:hover{
background:var(--gold-lt);
transform:translateY(-2px); box-shadow:0 8px 20px rgba(201,168,76,0.25);
}
/* ---------- Feature duo (homepage, under the hero) ----------
The two headline offers as raised cards with a gold cap — louder than
the outline-only .tracks doors at the page
foot, because these are the page's actual pitch rather than a parting
redirect. Still a matched pair: neither is the default. */
.featureDuo{
max-width:1000px; margin:0 auto; padding:34px 32px 6px;
display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.featureCard{
position:relative; overflow:hidden; display:block;
background:var(--card); border:1px solid var(--rule); border-radius:12px;
padding:24px 26px 22px; text-decoration:none; color:var(--navy);
transition:border-color .18s, box-shadow .22s ease, transform .22s ease;
}
.featureCard::before{
content:''; position:absolute; left:0; right:0; top:0; height:3px;
background:linear-gradient(90deg, var(--gold), var(--gold-lt));
}
.featureCard:hover{
border-color:var(--gold-lt);
transform:translateY(-2px); box-shadow:0 12px 30px rgba(16,25,44,0.08);
}
.featureCard h2{
font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:21px;
letter-spacing:-0.024em; line-height:1.2; margin-bottom:8px;
}
.featureCard p{font-size:14px; line-height:1.6; color:var(--navy-soft);}
.featureCard .go{
display:block; margin-top:16px; font-family:'DM Sans',sans-serif;
font-size:14px; font-weight:600; color:var(--gold-ink);
transition:transform .18s ease;
}
.featureCard:hover .go{transform:translateX(3px);}
/* The audience-door pair closing the homepage — same cards, and room to
breathe before the footer since no section follows it. */
.audienceDuo{padding-top:44px; padding-bottom:60px;}
/* Connect's card under the hero (2026-08-23): the only card, full
width — the hero made the case, this is the door. */
.featureTrio .featureCard.primary{grid-column:1 / -1; padding:30px 30px 26px;}
.featureTrio .featureCard.primary h2{font-size:24px;}
.featureTrio .featureCard.primary p{font-size:15px; max-width:640px;}
/* Letters and Training Ground as the preparation row — text-forward,
deliberately not cards, so they read as "how you get ready" rather
than two more equal choices. */
.prepRow{
max-width:1000px; margin:0 auto; padding:18px 32px 4px;
display:flex; flex-direction:column; gap:7px; align-items:flex-start;
}
.prepLabel{
font-size:11px; font-weight:500; letter-spacing:0.14em;
text-transform:uppercase; color:var(--gold-ink); margin-bottom:3px;
}
/* The whole line is the link, so it wears Harbor's link tone — gold
ink, per the :root note that --gold-ink is the text/link gold. Never
the browser default. */
.prepRow a{
font-size:14px; line-height:1.6; color:var(--gold-ink); text-decoration:none;
}
.prepRow a b{font-weight:600;}
.prepRow a:hover{text-decoration:underline;}
/* The Buffett quote, relocated from the hero to the Training Ground
section (2026-08-23): same shape, re-inked for the cream ground and
left-set to sit in the section's reading column. */
.sectionQuote{margin:26px 0 8px; text-align:left; max-width:560px;}
.sectionQuote blockquote{color:var(--navy); font-size:19px;}
.sectionQuote .mark{color:var(--gold-ink); margin-bottom:10px;}
.sectionQuote .rule{margin:16px 0 10px; background:var(--gold-ink);}
.sectionQuote figcaption{color:var(--gold-ink);}
/* ---------- Sections ---------- */
.section{
max-width:1000px; margin:0 auto; padding:56px 32px;
border-bottom:1px solid var(--rule);
}
.section:last-of-type{border-bottom:none;}
.sectionHead{margin-bottom:26px;}
.sectionHead .label{
display:block; font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-ink);
margin-bottom:12px;
}
.sectionHead h2{
font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:26px;
letter-spacing:-0.025em; line-height:1.2; max-width:580px;
}
/* The line under a section headline that names the thing being sold. */
.sectionHead .sub{
font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:17px;
letter-spacing:-0.015em; color:var(--navy); margin-top:10px;
}
.sectionHead .deck{
font-size:14.5px; color:var(--navy-soft); line-height:1.65;
max-width:620px; margin-top:10px;
}
/* ---------- Letter list ---------- */
.letterRow{
display:flex; gap:26px; padding:26px 0; border-top:1px solid var(--rule);
text-decoration:none; color:var(--navy); cursor:pointer;
}
/* Scroll reveal. The `reveal` class is added by JS only when it can also
observe the row (see revealRows in letters.js) — without script, or with
reduced motion asked for, the rows are simply visible from the start. */
.letterRow.reveal{
opacity:0; transform:translateY(16px);
transition:opacity .5s ease, transform .5s ease;
}
.letterRow.reveal.inView{opacity:1; transform:none;}
.letterRow .no{
font-family:'DM Sans',sans-serif; font-size:12px; color:var(--gold-ink);
letter-spacing:0.1em; flex-shrink:0; padding-top:5px; width:44px;
}
.letterRow h3{
font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:20px;
line-height:1.28; letter-spacing:-0.018em; margin-bottom:8px;
transition:color .18s;
}
.letterRow:hover h3{color:var(--gold-ink);}
.letterRow p{color:var(--navy-soft); font-size:14.5px; line-height:1.6; max-width:620px;}
.letterRow .byline{
font-family:'DM Sans',sans-serif; font-size:9.5px; letter-spacing:0.1em;
text-transform:uppercase; color:var(--navy-soft); margin-top:9px;
}
.letterRow .byline b{color:var(--gold-ink); font-weight:500;}
/* Plain gold text — the pill it used to wear fought with the gold rules. */
.letterRow .cat{
display:block; font-family:'DM Sans',sans-serif; font-size:10.5px;
letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-ink);
margin-bottom:9px;
}
.letterMeta{
display:flex; align-items:center; gap:9px; margin-top:10px;
font-family:'DM Sans',sans-serif; font-size:10.5px; letter-spacing:0.08em;
text-transform:uppercase; color:var(--meta);
}
.letterMeta .dot{width:3px; height:3px; border-radius:50%; background:var(--meta); flex-shrink:0;}
.empty{color:var(--navy-soft); font-size:14px; padding:40px 0;}
/* The education-not-advice fine print beside a price. Quiet on purpose —
it states a boundary, it doesn't sell — but always a real link to the
full disclaimer at /training-ground/disclaimer (the proxied page; never
a local copy — see terms.html for the same rule). */
.disclaimerLine{
font-size:12.5px; line-height:1.6; color:var(--meta); margin-top:10px;
}
.disclaimerLine a{
color:var(--gold-ink); text-decoration:none;
border-bottom:1px solid rgba(156,122,40,0.4); padding-bottom:1px;
}
.disclaimerLine a:hover{border-color:var(--gold-ink);}
.ctaLink{
display:inline-block; margin-top:26px; font-family:'DM Sans',sans-serif;
font-size:14px; font-weight:600; color:var(--gold-ink); text-decoration:none;
}
.ctaLink:hover{text-decoration:underline;}
/* ---------- Category filters (archive page) ---------- */
.filters{
display:flex; gap:24px; flex-wrap:wrap;
padding-bottom:20px; border-bottom:1px solid var(--rule); margin-bottom:4px;
}
.filterChip{
font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500;
padding:0 0 4px; border:none; border-bottom:1.5px solid transparent;
background:transparent; color:var(--navy-soft); cursor:pointer;
transition:color .18s, border-color .18s;
}
/* Hover previews the underline in the lighter gold; active commits to it.
The active rule sits last so hovering the selected tab keeps full gold. */
.filterChip:hover{color:var(--navy); border-bottom-color:var(--gold-lt);}
.filterChip.active{color:var(--navy); border-bottom-color:var(--gold); font-weight:600;}
/* ---------- Single letter view ---------- */
.reader{max-width:680px; margin:0 auto; padding:40px 32px 90px;}
.backLink{
font-family:'DM Sans',sans-serif; font-size:12.5px; color:var(--navy-soft);
text-decoration:none; display:inline-block; margin-bottom:34px;
}
.backLink:hover{color:var(--gold-ink);}
.reader .no{
font-family:'DM Sans',sans-serif; font-size:11.5px; color:var(--gold-ink);
letter-spacing:0.14em; margin-bottom:14px;
}
.reader h1{
font-family:'Instrument Sans',sans-serif; font-weight:600;
font-size:clamp(30px,4.8vw,44px); line-height:1.1; letter-spacing:-0.032em;
margin-bottom:14px;
}
.reader .lede{
font-size:18px; color:var(--navy-soft); line-height:1.55; margin-bottom:22px;
font-weight:400;
}
.reader .date{
font-family:'DM Sans',sans-serif; font-size:10.5px; color:var(--meta);
letter-spacing:0.1em; text-transform:uppercase;
padding-bottom:28px; border-bottom:1px solid var(--rule); margin-bottom:32px;
}
.reader .body p{
font-size:17px; line-height:1.78; margin-bottom:24px; color:var(--navy);
}
.reader .body p:first-of-type{font-size:18.5px;}
/* ---------- Quotes in letter bodies ----------
A markdown `>` block renders as .quote. If its last line is an em-dash
attribution, it is upgraded to the .pullQuote treatment instead — see
renderBody() in letters.js. */
.reader .body .quote{
margin:30px 0; padding:2px 0 2px 20px; border-left:2px solid var(--rule);
font-size:17px; line-height:1.7; color:var(--navy-soft); font-style:italic;
}
.reader .body .pullQuote{
margin:44px auto; max-width:480px; text-align:center;
}
.reader .body .pullMark{
display:block; font-family:'Instrument Sans',sans-serif; font-weight:600;
font-size:64px; line-height:0.75; color:var(--gold); margin-bottom:16px;
}
.reader .body .pullQuote blockquote{
font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:25px;
line-height:1.32; letter-spacing:-0.02em; color:var(--navy); margin:0;
}
.reader .body .pullRule{
display:block; width:32px; height:2px; background:var(--gold);
margin:24px auto 14px;
}
.reader .body .pullQuote figcaption{
font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-ink);
}
/* ---------- Previous / next letter ---------- */
.letterNav{
display:grid; grid-template-columns:1fr 1fr; gap:14px;
margin-top:56px; padding-top:30px; border-top:1px solid var(--rule);
}
.letterNavItem{
display:block; padding:18px 20px; border:1px solid var(--rule); border-radius:8px;
text-decoration:none; color:var(--navy); cursor:pointer; background:transparent;
text-align:left; font-family:'DM Sans',sans-serif;
transition:border-color .18s, background .18s;
}
.letterNavItem:hover{border-color:var(--gold); background:rgba(201,168,76,0.06);}
.letterNavItem .dir{
display:block; font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
color:var(--gold-ink); margin-bottom:8px;
}
.letterNavItem .t{
font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:16px;
line-height:1.35; letter-spacing:-0.015em;
}
.letterNavItem.next{text-align:right;}
/* Holds the column so a lone "previous" doesn't slide under the "next" slot. */
.letterNavItem.spacer{visibility:hidden;}
/* ---------- Signup ---------- */
.signup{max-width:1000px; margin:0 auto; padding:0 32px 56px;}
.signupCard{
background:var(--navy); border-radius:8px; padding:26px 30px;
display:flex; align-items:center; justify-content:space-between;
gap:22px; flex-wrap:wrap;
}
.signupCard h2{
font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:18px;
letter-spacing:-0.02em; color:var(--cream); margin-bottom:5px;
}
.signupCard p{
color:var(--on-navy-dim); font-size:13.5px; line-height:1.5; max-width:430px;
}
.signupForm{display:flex; gap:8px; flex-wrap:wrap;}
.signupForm input{
background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15);
border-radius:5px; padding:11px 14px; color:var(--cream);
font-family:'DM Sans',sans-serif; font-size:14px; width:210px; outline:none;
}
.signupForm input::placeholder{color:#6B7385;}
.signupForm input:focus{border-color:var(--gold);}
.signupForm button{
background:var(--gold); color:var(--navy); border:none; border-radius:5px;
padding:11px 20px; font-family:'DM Sans',sans-serif; font-weight:700;
font-size:14px; cursor:pointer;
transition:background .15s, transform .2s ease, box-shadow .2s ease;
}
.signupForm button:hover{
background:var(--gold-lt);
transform:translateY(-2px); box-shadow:0 8px 20px rgba(201,168,76,0.25);
}
/* Sits inside the navy card, so it takes the light tones, not the cream ones.
Hidden while empty — otherwise it holds a full flex row open and the card
sits lopsided before anyone has typed anything. */
.signupMsg{
flex-basis:100%; font-size:13px; min-height:18px;
color:var(--on-navy-dim);
}
.signupMsg:empty{display:none;}
.signupMsg.ok{color:#7BD6A6;}
.signupMsg.err{color:#E8A69E;}
/* ---------- Harbor Connect steps (/entrepreneurs) ----------
How raising works, in three moves, under the Connect section head.
Same raised --card ground and gold cap as .featureCard, so it reads as
the site's existing card language rather than a new one. The numerals
are the step order, not decoration — keep them in sequence. */
.connectSteps{
display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
list-style:none; margin:0 0 26px; padding:0;
}
.connectStep{
position:relative; overflow:hidden;
background:var(--card); border:1px solid var(--rule); border-radius:12px;
padding:24px 22px 22px;
}
.connectStep::before{
content:''; position:absolute; left:0; right:0; top:0; height:3px;
background:linear-gradient(90deg, var(--gold), var(--gold-lt));
}
.connectStepNum{
display:block; font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-ink);
margin-bottom:10px;
}
.connectStep h3{
font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:17px;
letter-spacing:-0.02em; line-height:1.3; margin-bottom:7px; color:var(--navy);
}
.connectStep p{font-size:14px; line-height:1.6; color:var(--navy-soft);}
@media (max-width:760px){
.connectSteps{grid-template-columns:1fr; gap:12px;}
.connectStep{padding:20px 20px 18px;}
}
/* ---------- Books shelf (/books) ----------
A ledger, not a catalogue: rules between rows, no covers, no cards. Two
columns on desktop so a 20-title category doesn't run off the screen —
the eye reads down one column and back up the next, which is how a real
shelf is scanned. Rows are built by renderShelf() in books.js. */
.shelfNote{
max-width:1000px; margin:0 auto; padding:26px 32px 0;
font-size:12.5px; line-height:1.6; color:var(--meta);
}
.shelf{max-width:1000px; margin:0 auto; padding:0 32px 30px;}
.shelfCat{padding:40px 0; border-bottom:1px solid var(--rule);}
.shelfCat:last-child{border-bottom:none;}
/* Baseline-aligned so the count sits on the category's own line rather than
floating beside it. */
.shelfCatHead{display:flex; align-items:baseline; gap:14px; margin-bottom:14px;}
.shelfCatHead h2{
font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:24px;
letter-spacing:-0.028em; line-height:1.2;
}
.shelfCount{
font-family:'DM Sans',sans-serif; font-size:10.5px; letter-spacing:0.12em;
text-transform:uppercase; color:var(--meta); white-space:nowrap;
}
.shelfList{
list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0 44px;
}
.bookRow{
display:block; padding:13px 2px 14px 0; border-top:1px solid var(--rule);
text-decoration:none; color:var(--navy);
}
.bookTitle{
display:block; font-family:'Instrument Sans',sans-serif; font-weight:600;
font-size:16px; line-height:1.32; letter-spacing:-0.016em;
transition:color .18s;
}
.bookRow:hover .bookTitle{color:var(--gold-ink);}
.bookAuthor{
display:block; font-size:13px; line-height:1.4; color:var(--navy-soft);
margin-top:4px;
}
/* ---------- FAQ (/faq) ----------
Scanned rather than read, so it is built to be skimmed: a category heading
you can find from across the page, then question/answer pairs separated by
hairlines. Narrower than the shelf and wider than the letter reader — the
answers are short, and a full 680px measure would leave most of them
sitting on one lonely line.
The gold underline under each category is the separation between groups;
it is the same accent the filter chips use. */
.faq{max-width:760px; margin:0 auto; padding:50px 32px 74px;}
.faqGroup{margin-bottom:50px;}
.faqGroup:last-child{margin-bottom:0;}
.faqGroup > h2{
font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:22px;
letter-spacing:-0.026em; line-height:1.2;
padding-bottom:12px; border-bottom:2px solid var(--gold);
}
.faqItem{padding:22px 0; border-bottom:1px solid var(--rule);}
.faqItem:last-child{border-bottom:none; padding-bottom:0;}
.faqItem h3{
font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:17.5px;
letter-spacing:-0.018em; line-height:1.35; margin-bottom:8px;
}
.faqItem p{font-size:15.5px; line-height:1.7; color:var(--navy-soft);}
.faqItem p + p, .faqItem ul + p{margin-top:10px;}
/* Same hand-drawn gold dash the legal pages use — a list answer keeps the FAQ's own type, not the UA's. */
.faqItem ul{list-style:none; margin:10px 0 0;}
.faqItem li{
position:relative; padding-left:22px; margin-bottom:9px;
font-size:15.5px; line-height:1.7; color:var(--navy-soft);
}
.faqItem li:last-child{margin-bottom:0;}
.faqItem li::before{
content:''; position:absolute; left:0; top:12px;
width:10px; height:1.5px; background:var(--gold);
}
.faqItem b{color:var(--navy); font-weight:600;}
.faqItem a{
color:var(--gold-ink); text-decoration:none;
border-bottom:1px solid rgba(156,122,40,0.4); padding-bottom:1px;
}
.faqItem a:hover{border-color:var(--gold-ink);}
/* ---------- Legal pages (/privacy, /terms) ----------
Same measure and rhythm as the letter reader — these are read top to
bottom, not skimmed — but on their own class so a change to the reader
can't quietly restyle the terms. */
.legal{max-width:680px; margin:0 auto; padding:44px 32px 90px;}
.legal .updated{
font-family:'DM Sans',sans-serif; font-size:10.5px; color:var(--meta);
letter-spacing:0.1em; text-transform:uppercase;
padding-bottom:26px; border-bottom:1px solid var(--rule); margin-bottom:34px;
}
.legal h2{
font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:21px;
letter-spacing:-0.022em; line-height:1.25; margin:40px 0 14px;
}
.legal h2:first-of-type{margin-top:0;}
.legal p{font-size:16px; line-height:1.72; color:var(--navy); margin-bottom:18px;}
.legal ul{list-style:none; margin:0 0 18px;}
/* Hand-drawn marker rather than a list bullet: the gold dash is the same
accent the letter rows use, and it survives the list-style reset above. */
.legal li{
position:relative; padding-left:22px; margin-bottom:11px;
font-size:16px; line-height:1.65; color:var(--navy);
}
.legal li::before{
content:''; position:absolute; left:0; top:11px;
width:10px; height:1.5px; background:var(--gold);
}
.legal a{color:var(--gold-ink); text-decoration:none; border-bottom:1px solid rgba(156,122,40,0.4);}
.legal a:hover{border-color:var(--gold-ink);}
footer{
background:var(--navy); color:#8A93A8; padding:34px 32px;
text-align:center; font-family:'DM Sans',sans-serif; font-size:12px;
letter-spacing:0.06em;
}
footer div:first-child{color:var(--cream);}
.footerLinks{
display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:14px;
}
.footerLinks a{color:#8A93A8; text-decoration:none; transition:color .18s;}
.footerLinks a:hover{color:var(--gold-lt);}
.view{display:none;}
.view.active{display:block; animation:fade .3s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
/* ---------- Nav collapse ----------
The links drop out of the header row and become a panel the menu button
opens underneath it. Without this the site has no navigation at all on a
phone. This breaks at 880px rather than the 640px the rest of the layout
uses: seven links run about 600px, which stops fitting beside the
wordmark well above phone width.
880 hands over to the panel just before the row would wrap — tablet
portrait (768) now gets the panel, which beats a two-line header.
Sized when the nav had seven links; it has five since 2026-09-23 and
would fit lower, but 880 was kept deliberately — it works as is. */
@media (max-width:880px){
header{flex-wrap:wrap;}
.menuBtn{display:flex; align-items:center; padding:6px; margin:-6px;}
nav{
display:none; order:3; flex-basis:100%; flex-direction:column; gap:0;
margin-top:14px; padding-top:4px; border-top:1px solid var(--rule);
/* The base rule centres the row layout; stacked, that would shrink each
link to its text and leave the divider rules stubby. */
align-items:stretch;
}
nav.open{display:flex;}
.navGroup{flex-direction:column; align-items:stretch; gap:0;}
/* One rule for every link, so the panel matches the header: same size,
same weight, same colour. The last link (FAQ) drops its trailing
hairline, since nothing follows it. */
nav a{padding:14px 0; font-size:15px; border-bottom:1px solid var(--rule);}
nav a:last-child{border-bottom:none;}
/* The draw-in underline is a pointer affordance — meaningless stacked. */
nav a::after{display:none;}
}
@media (max-width:640px){
header{padding:20px;}
.hero{padding:52px 20px 58px;}
.heroQuote{margin-top:28px;}
.heroQuote .mark{font-size:44px; margin-bottom:11px;}
.heroQuote blockquote{font-size:19px; line-height:1.4;}
.heroQuote .rule{margin:18px auto 11px;}
/* Stacked, still a matched pair — same card, one above the other. */
.featureDuo{grid-template-columns:1fr; gap:12px; padding:26px 20px 0;}
.section{padding:44px 20px;}
.audienceDuo{padding-top:34px; padding-bottom:44px;}
.signup{padding:0 20px 44px;}
.signupForm, .signupForm input{width:100%;}
.reader{padding:30px 20px 70px;}
.legal{padding:34px 20px 70px;}
.faq{padding:34px 20px 56px;}
.faqGroup{margin-bottom:38px;}
.shelfNote{padding:22px 20px 0;}
.shelf{padding:0 20px 20px;}
/* Two columns at phone width would break every long title onto four
lines — one column, and the rules do the separating. */
.shelfList{grid-template-columns:1fr;}
.shelfCat{padding:32px 0;}
.letterRow{gap:16px;}
.letterRow .no{width:32px; font-size:11px;}
.letterNav{grid-template-columns:1fr;}
.letterNavItem.next{text-align:left;}
.letterNavItem.spacer{display:none;}
.reader .body .pullQuote{margin:36px auto;}
.reader .body .pullQuote blockquote{font-size:22px;}
}
/* Motion is decoration here — none of it carries meaning, so it all goes. */
@media (prefers-reduced-motion:reduce){
*, *::before, *::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
}