/* The reading surface, in the Enara turn's clothes (2026-08-14): white
   ground, Bricolage everywhere, olive accents — the same system as the
   homepage, at reading quietness. One column, generous leading, no
   ornament. Old token NAMES kept so method/brand-system/compare CSS keep
   resolving: --paper holds white, --ink holds the near-black, --teal holds
   the olive accent role. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

/* THE SECOND PALETTE, brought into the system (2026-08-16).

   This file is served to every generated page (writing, method, brand
   system, training, compare, service pages) and carried its OWN colours,
   which is why the type audit found 243 nodes still painting #43332B and 80
   still painting #8A7C72 after the homepage tokens had already moved. Two
   colour sources is the exact fragmentation a token system exists to end.

   The tiers below MIRROR src/components/enara/enara.css. They are duplicated
   rather than imported because this stylesheet is served statically to
   prerendered pages while that one is bundled by Vite — so
   scripts/gate-tokens.mjs fails the build if the two ever disagree.

   Old names (--paper/--ink/--teal/--line/--dim) are kept as aliases so the
   method / brand-system / compare stylesheets keep resolving. Note --teal
   holds the OLIVE: a name left over from a retired palette, and a good
   example of why tokens are named for their ROLE, not their appearance. */

:root {
  /* tier 1 — primitives (OKLCH-derived; the name states the lightness) */
  --c-espresso-25: #2e1d12;
  --c-espresso-32: #492a16;
  --c-espresso-42: #5e483a;
  --c-espresso-56: #896e5d;
  --c-cream-95: #f4ece7;
  --c-paper-93: #f0e7e1;
  --c-olive-65: #809e26;
  --c-hairline-88: #e7ded8;
  --c-white: #ffffff;

  /* tier 2 — semantic */
  --text-primary: var(--c-espresso-25);
  --text-display: var(--c-espresso-32);
  --text-secondary: var(--c-espresso-42);
  --text-tertiary: var(--c-espresso-56);
  --text-inverse: var(--c-cream-95);
  --text-accent: var(--c-olive-65);
  --surface-default: var(--c-white);
  --surface-raised: var(--c-paper-93);
  --border-hairline: var(--c-hairline-88);

  /* tier 3 — the names this file and its siblings already use */
  --paper: var(--surface-default);
  --ink: var(--text-primary);
  --teal: var(--text-accent);
  --line: var(--border-hairline);
  --dim: var(--text-tertiary);
}

* {
  margin:0;
  box-sizing: border-box;
}

body {
  background: var(--paper);
  color: var(--text-primary);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.62;
  padding:44px 6vw 112px;
  -webkit-font-smoothing: antialiased;
}

.article {
  max-width: 640px;
  margin:0 auto;
}

.label {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

a {
  color: inherit;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom:16px;
}

.meta {
  margin-top:40px;
}

h1 {
  font-weight: 500;
  color: var(--teal);
  font-size: clamp(34px, 5.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin:16px 0 16px;
}

h2 {
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: -0.03em;
  margin:48px 0 8px;
}

.dek {
  font-size: 20px;
  line-height: 1.5;
  opacity: 0.72;
  max-width: 34ch;
}

.body {
  margin-top:40px;
}

.body p,
.body ul {
  margin:16px 0;
}

.body ul {
  padding-left:20px;
}

.body li {
  margin:8px 0;
}

blockquote {
  margin:32px 0;
  padding:4px 0 4px 20px;
  border-left: 2px solid var(--teal);
}

blockquote p {
  margin:0;
}

/* ---- the sign-up, and the preview it opens ----

   THIS IS A NEWSLETTER SIGN-UP ON HER OWN SITE, not a lock. The whole
   article is in the HTML of every page and stays there: crawlers, screen
   readers and "view source" all get the complete text, and the page says so
   in its structured data. What follows only softens the second half in the
   browser until a reader takes the offer — a preview fade, the same one a
   magazine uses on a stand. Nothing is hidden from a machine, no credential
   is ever asked for, and the address goes to her own Formspree endpoint —
   the one the enquiry form on the homepage already posts to. */

.paywalled.is-locked {
  max-height: 220px;
  overflow: hidden;
  opacity: 0.4;
  filter: blur(3px);
  user-select: none;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}

.gate-form {
  margin-top:48px;
  padding:24px 24px 24px;
  border: 0;
  border-radius: 0;
  background: #f0e7e1;
}

.gate-form.is-done .gate-head,
.gate-form.is-done .gate-body,
.gate-form.is-done .gate-row,
.gate-form.is-done .gate-note {
  display: none;
}

.gate-head {
  font-size: 20px;
  letter-spacing: -0.01em;
}

.gate-body {
  margin-top:8px;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.78;
  max-width: 46ch;
}

.gate-row {
  display: flex;
  gap:8px;
  margin-top:16px;
  flex-wrap: wrap;
}

.gate-row input {
  flex: 1 1 240px;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  padding:12px 16px;
  border: 0;
  border-bottom: 1px solid #d9d2ca;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}

.gate-row input:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

.gate-row button {
  font-family: inherit;
  font-size: 14px;
  padding:12px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.gate-row button:hover {
  background: var(--teal);
  color: #fff;
}

.gate-note {
  margin-top:12px;
  font-size: 12px;
  opacity: 0.6;
}

.gate-status {
  margin-top:8px;
  font-size: 14px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- the close ---- */

.end {
  margin-top:72px;
  padding-top:16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  opacity: 0.8;
}

.end .label {
  display: block;
  margin-bottom:8px;
}

/* ---- the index ---- */

.index h1 {
  margin-top:40px;
}

.list {
  list-style: none;
  padding:0;
  margin:48px 0 0;
}

.list li {
  border-top: 1px solid var(--line);
}

.list a {
  display: block;
  padding:24px 0;
  text-decoration: none;
}

.list-title {
  display: block;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin:8px 0 8px;
}

.list-dek {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.7;
  max-width: 48ch;
}

.list a:hover .list-title {
  color: var(--teal);
}

/* ---- display type takes the area-corrected espresso ----------------------
   Mirrors the rule in enara.css. This file loads BEFORE method.css /
   brand-system.css / compare.css, and none of them declare a colour on these
   selectors, so this wins by inheritance rather than by specificity. */
h1,
h2,
h3,
.step-n,
.close-statement,
.promise,
.list-title {
  color: var(--text-display);
}