/* ============================================================================= Incomestead — Reading Room (light long-form theme) Brand spec v1.1 §2.1 / §2.2 / §2.3 / §11 · handoff §3. Loaded site-wide. The theme is resolved at TEMPLATE time: default.hbs stamps in the first byte (Ghost posts default light, pages default dark; #estate / #reading override). Nothing here reads the DOM or counts words — no client-side theme switching, no FOUC. The default (Estate / dark) tokens already ship inline in the theme ; they are re-declared here (identical values) only so this file is complete and so --text-soft exists in both themes. The light block is the real payload — it scopes to :root[data-theme="light"] and, being higher specificity than the bare :root, wins regardless of stylesheet order. Components read semantic tokens, so nothing forks between themes; the blocks below only re-point the handful of chrome/prose colours the base theme hardcoded as literals. ========================================================================== */ /* ---- default (Estate / dark) — brand-spec §2.1 --------------------------- */ :root{ --bg:#1E1A16; --surface:#26211B; --raised:#352E25; --line:#463D31; --text:#F3F0E9; --text-soft:#D8D2C6; --muted:#A99E8E; /* DS-03 — was Pewter #6F7A80 */ --accent:#A6835A; --accent-active:#D2A356; --accent-deep:#7E6442; --positive:#5FA98A; --positive-fill:#2E5A4C; --alarm:#C15A4E; } /* ---- Reading Room (light) — brand-spec §2.4 (locked v1.1) ---------------- */ :root[data-theme="light"]{ --bg:#F3F0E9; --surface:#FBF9F4; --raised:#EFEBE1; --line:color-mix(in srgb, var(--text) 12%, transparent); --text:#1E1A16; --text-soft:#3A342D; --muted:#6E665C; /* DS-03: deliberately NOT #A99E8E. This token is ground-relative — the dark value measures 2.32:1 on #F3F0E9, worse than the defect DS-03 exists to fix. #6E665C is 4.96:1 here. Do not "unify" the two. */ --accent:#A6835A; --accent-active:#7A5A34; /* ground-relative active bronze (§2.2) */ --accent-ink:#1E1A16; /* SAME value as the dark block, deliberately. Ink on a bronze FILL is ACCENT-relative, and --accent is #A6835A in both themes, so this does not flip. Repeated here rather than left to inherit so the pairing is visible in the block a reader checks when they change the light palette. 4.95:1 on the bronze. */ --alarm-ink:#A8453B; /* THE ALARM RULE clause 3, light ground. This one IS ground-relative: the dark ink #DB8B80 measures 2.49:1 on --surface #FBF9F4 and 2.30:1 on --bg here, so inheriting it (which is what happened until 2026-08-18) puts failing error text on all 24 Reading-Room posts. #A8453B is 5.58:1 / 5.15:1 and is the same brick text variant --alarm already carries in this block. */ --positive:#357155; --positive-fill:#5FA98A; /* green text variant + resting fill */ --alarm:#A8453B; /* brick text variant */ } /* ---- threshold spine — 4px Warm Stone, both themes (§11.3) --------------- */ /* The "same building" cue: crossing into the light reads as entering a lit room, not leaving the site. Pinned above everything, both grounds. */ body::before{ content:""; position:fixed; top:0; left:0; right:0; height:4px; /* Deliberately the SAME literal on both themes — this is what "both grounds" above means. --bg flips per theme (dark #1E1A16 / light #F3F0E9), so var(--bg) would make the spine vanish into the light body on light pages, which is the one thing this rule exists to prevent. There is no token for "always Warm Stone regardless of theme". */ background:#1E1A16; /* BRAND-WIDE-ALLOW: theme-invariant, see comment above (DS-57, 2026-08-06) */ z-index:50; } /* ---- lit-from-above ground (light only; page treatment, not the mark) ---- */ :root[data-theme="light"] body{ background-image:linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 340px); background-repeat:no-repeat; } /* ============================================================================= Light-theme chrome — the base theme hardcoded a few dark literals that would not flip via tokens. Re-point them so header / nav / footer read fully lit. ========================================================================== */ :root[data-theme="light"] header.site{ background:color-mix(in srgb, var(--bg) 85%, transparent); } :root[data-theme="light"] .nav-link{ color:var(--text-soft); } :root[data-theme="light"] .nav-link:hover{ color:var(--text); } @media (max-width:860px){ :root[data-theme="light"] .nav-right{ background:color-mix(in srgb, var(--bg) 98%, transparent); } } /* DS-06 — the footer was named in the comment above and had zero rules. `.foot-h` and `.foot-guard b` paint resting bronze #A6835A, which is a DARK-ground value: on the light --bg #F3F0E9 it measures 3.07:1, below the 4.5 floor, on every post page. Re-pointed to --accent-active, which the light block above already resolves to the ground-relative #7A5A34 → 5.53:1. Same remedy as DS-02. The brandmark's bronze corpus is deliberately NOT touched: a logotype is exempt from 1.4.3 and is locked by the brand spec. */ :root[data-theme="light"] footer.site .foot-h, :root[data-theme="light"] footer.site .foot-guard b{ color:var(--accent-active); } /* Mark → reversed/ink lockup on light (brand-spec §5.2 / §5.4) — RETIRED, DEAD BY DESIGN (DS-57, 2026-08-06). This selector targeted the wall's literal `fill="#F3F0E9"`, which brandmark.hbs no longer carries: DS-57 tokenised it to `fill="var(--text)"`, and --text already flips to Ink #1E1A16 under this very :root[data-theme="light"] block (line ~29), so the wall now repaints itself with no override needed. The wordmark `income` still follows --text the same way; `stead` stays bronze. Left as a comment, not silently deleted, so a future `.brandmark svg rect[fill="#F3F0E9"]` selector isn't re-added believing it does something — it would match nothing. */ /* ============================================================================= Long-form reading surfaces (post.hbs / #reading page.hbs), light theme. Editorial type per §11.4 / §3: Spectral body, Hanken uppercase H2, drop-cap. These only apply under data-theme="light", so #estate dark notes are untouched. ========================================================================== */ :root[data-theme="light"] .post-content{ font-family:var(--serif); font-size:19px; line-height:1.72; color:var(--text-soft); max-width:664px; margin-left:auto; margin-right:auto; /* measure ~68ch */ } :root[data-theme="light"] .post-content > p:first-of-type{ /* Was `1em`. Same rendered size — the parent above is 19px — but spelled as the rung, because DS-35 makes px the unit. This rule exists to CANCEL the dark theme's lede enlargement (19px there against a 17px body); in the Reading Room the drop-cap below already opens the essay, so the lede sits at body size. */ font-size:19px; color:var(--text-soft); } :root[data-theme="light"] .post-content strong, :root[data-theme="light"] .post-content b{ color:var(--text); } :root[data-theme="light"] .post-content a{ color:var(--accent-active); } :root[data-theme="light"] .post-content a:hover{ color:var(--accent); } /* H2 in Hanken Grotesk, uppercase (structural, not decorative) */ :root[data-theme="light"] .post-content h2{ font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:.8px; text-transform:uppercase; color:var(--text); margin:2.4em 0 .9em; padding-top:1.6em; border-top:1px solid var(--line); } /* H3 — and the rule above is exactly why this one has to exist (DS-71). The dark base declares BOTH headings and orders them correctly by construction: default.hbs sets h2 clamp(1.4rem,2.8vw,1.9rem) and h3 clamp(1.15rem,2.2vw,1.4rem), so h3's MAXIMUM equals h2's MINIMUM and it can never overtake it. The rule above then re-declares H2 ALONE, down to a 15px uppercase label — and no matching H3 override was ever written, so H3 kept the dark clamp and rendered 22.4px against that 15px label. Measured live at 1280px: the sub-head was 1.49x the section heading containing it, on 82 headings across 16 of 24 posts. Each file was self-consistent; the inversion existed only in the RESOLVED cascade, which is why reading either one alone reported it as a non-issue. The treatment is owner-decided off the DS-71 specimen sheet, and it is driven by what these headings actually ARE: all 82 of them end in a question mark, 70 under an FAQ heading and the rest under a Q&A block, median 46 characters. So H3 is a QUESTION with its answer beneath it, not a label — which is why it stays in the serif prose voice and sentence case, and separates from the answer by WEIGHT and INK rather than size. 19px is the top rung of brand spec 3.0a's text band, so this also brings the heading onto the governed ladder; 22.4px sat in the display band, which is ungoverned by owner decision and is not a licence to live there. 600 is LOADED, not synthesised: default.hbs requests Spectral 0,400;0,500;0,600. Do not copy this weight into the APP without checking — frontend/index.html omits 600, and .ist .verdict .badge asks for it and gets a synthetic bold (DS-41). */ :root[data-theme="light"] .post-content h3{ font-family:var(--serif); font-weight:600; font-size:19px; line-height:1.2; letter-spacing:-.01em; color:var(--text); } :root[data-theme="light"] .post-content blockquote{ color:var(--text-soft); } /* Inline code, light theme only — and the reason this override has to EXIST. It was `.9em` in the dark base, which is parent-relative, and `.post-content` has two parent sizes: 17px in default.hbs and 19px here. So one `em` was rendering at 15.3px dark and 17.1px light, and no single px value replaces both. DS-35 splits it: 15px in the base, 17px here. Delete this rule and the Reading Room's code silently drops 2px. */ :root[data-theme="light"] .post-content code{ font-size:17px; } /* editorial drop-cap on the lead paragraph — Spectral, active bronze, light only */ :root[data-theme="light"] .post-content > p:first-of-type::first-letter{ font-family:var(--serif); font-weight:500; float:left; font-size:3.3em; line-height:.82; padding:6px 12px 0 0; color:var(--accent-active); } /* ============================================================================= /tools/ — the hub INDEX, not an essay. (body.page-tools is Ghost's own class, built from the page slug, so this needs no new hook and no per-page injection.) The two rules above this block are correct for long-form prose and wrong for an index of six products: 1. H2 as a 15px uppercase Hanken LABEL is a section marker. On the hub the H2s are the six tool NAMES — the things a reader is scanning for — and at 15px they render SMALLER than the 19px serif body beneath them, inverting the hierarchy exactly where it matters most. Restored to a serif product title. The border-top stays: six ruled entries is precisely what an index wants. text-transform is presentational only, so heading ids and anchors are unaffected either way. 2. The drop-cap opens an essay. The hub's first paragraph is its FOURTH block (byline, standfirst, trust chips, then prose), so a 3.3em floated bronze cap lands mid-furniture rather than opening anything. Suppressed here rather than by reordering the body — the drop-cap is the site-wide convention and the hub is the exception to it. ========================================================================== */ :root[data-theme="light"] body.page-tools .post-content h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.25rem,2.4vw,1.6rem); line-height:1.2; letter-spacing:-.01em; text-transform:none; } :root[data-theme="light"] body.page-tools .post-content > p:first-of-type::first-letter{ float:none; font-size:inherit; line-height:inherit; padding:0; color:inherit; } /* Standfirst / meta / callouts — re-point the base theme's dark greys. These read against cream, so the near-white literals must become ink runs. */ :root[data-theme="light"] .post-standfirst{ color:var(--text-soft); } :root[data-theme="light"] .post-disclaimer{ color:var(--text-soft); } :root[data-theme="light"] .author-card-bio{ color:var(--text-soft); } :root[data-theme="light"] .lede{ color:var(--text-soft); } :root[data-theme="light"] .step p, :root[data-theme="light"] .wcard .wexcerpt{ color:var(--text-soft); }