@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap');

/* 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);
}

/* ==== THE REDESIGN, CARRIED OVER (19 Oct 2026) ===============================
   The generated pages wear the homepage's clothes: cream ground, aubergine
   ink, orange accents, and the same three type styles at the same sizes.
   Heading: Goudy. Subheading: Bricolage, medium. Body: Bricolage, regular.
   The primitives above stay as they are (gate-tokens compares them); the
   roles below are re-pointed, and the type is set once, here, for every page
   and the stylesheets that load after this one. */
:root {
  --maroon: #431e25;
  --cream: #e8ddc7;
  --cream-hi: #f3ece0;
  --orange: #bc4600;
  --mint: #7ee1cc;
  --goudy: 'Goudy Bookletter 1911', Georgia, serif;
  --body: 'Bricolage Grotesque', sans-serif;
  --t-head: clamp(48px, 6.2vw, 104px);
  --t-sub: clamp(20px, 1.6vw, 24px);
  --t-body: clamp(16px, 1.15vw, 17px);
  --gut: clamp(16px, 4vw, 56px);

  --text-primary: var(--maroon);
  --text-display: var(--maroon);
  --text-secondary: rgba(67, 30, 37, 0.82);
  --text-tertiary: rgba(67, 30, 37, 0.66);
  --text-accent: var(--orange);
  --surface-default: var(--cream-hi);
  --surface-raised: var(--cream);
  --border-hairline: rgba(67, 30, 37, 0.16);
}
html body {
  background: var(--cream-hi);
  color: var(--maroon);
  padding: 0;
  letter-spacing: 0;
}
html body > main,
html body > .article {
  padding: clamp(112px, 12vw, 160px) var(--gut) clamp(72px, 8vw, 120px);
}
/* body: everything, unless named below */
html body :is(p, li, a, span, td, th, label, input, button, summary, small, figcaption, .label, .kicker, .step-note,
  .price-fold, .gate-body, .gate-note, .list-dek) {
  font-family: var(--body) !important;
  font-size: var(--t-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body :is(.label, .kicker) {
  font-weight: 600 !important;
  color: var(--orange);
}
/* subheading */
html body :is(h2, h3, h4, .promise, .dek, .close-statement, .list-title, .gate-head, .step-title, .early) {
  font-family: var(--body) !important;
  font-size: var(--t-sub) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--maroon);
}
/* heading */
html body :is(h1, .step-n) {
  font-family: var(--goudy) !important;
  font-size: var(--t-head) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  color: var(--maroon);
}
html body h1 {
  margin: 12px 0 28px;
}
html body p,
html body li {
  line-height: 1.6;
}
html body a {
  color: inherit;
  text-underline-offset: 4px;
}
html body .top {
  border-bottom: 0;
  padding-bottom: 0;
}
/* the nav carries the way home now */
html body .top > a.label:first-child {
  display: none;
}
html body blockquote {
  border-left-color: var(--orange);
}
/* buttons: the homepage's pill */
html body :is(.cta, .button, .gate-row button, a.btn) {
  background: var(--orange) !important;
  color: var(--cream-hi) !important;
  border-radius: 999px;
  font-weight: 700 !important;
  text-decoration: none;
}
html body :is(.cta, .button, .gate-row button, a.btn):hover {
  background: var(--maroon) !important;
}
html body .gate-form {
  background: var(--cream);
  border-radius: 24px;
}

/* ---- the nav --------------------------------------------------------------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px var(--gut);
  background: var(--cream);
  color: var(--maroon);
}
.site-home {
  width: 58px;
  display: block;
}
.site-mark,
.site-badge {
  display: block;
  background: currentColor;
  -webkit-mask: url('/images/cloche-mark.png') center / contain no-repeat;
  mask: url('/images/cloche-mark.png') center / contain no-repeat;
}
.site-mark {
  aspect-ratio: 302 / 286;
}
html body .site-index {
  display: flex;
  gap: 28px;
}
html body .site-index a,
html body .site-menu nav a {
  font-weight: 600 !important;
  text-decoration: none;
}
html body .site-index a:hover {
  text-decoration: underline;
}
html body .site-btn {
  justify-self: end;
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--cream-hi) !important;
  font-weight: 700 !important;
  text-decoration: none;
  white-space: nowrap;
}
html body .site-btn--ink {
  background: var(--maroon);
}
.site-menu {
  display: none;
}
@media (max-width: 900px) {
  .site-nav {
    grid-template-columns: 1fr auto auto;
    column-gap: 12px;
  }
  html body .site-index {
    display: none;
  }
  .site-home {
    width: 48px;
  }
  .site-menu {
    display: block;
  }
  html body .site-menu summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600 !important;
    padding: 8px 4px;
  }
  .site-menu summary::-webkit-details-marker {
    display: none;
  }
  .site-menu nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 8px var(--gut) 20px;
    background: var(--cream);
  }
  html body .site-menu nav a {
    padding: 14px 0;
    border-top: 1px solid var(--border-hairline);
  }
  html body .site-menu nav a:first-child {
    border-top: 0;
  }
}

/* ---- the footer -------------------------------------------------------------- */
.site-foot {
  background: var(--orange);
  color: var(--cream-hi);
  padding: 96px var(--gut) 0;
  overflow: hidden;
}
.site-foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  max-width: 1240px;
  margin: 0 auto;
}
.site-foot-grid > * {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.site-badge {
  width: 220px;
  aspect-ratio: 645 / 601;
  background: var(--cream);
  -webkit-mask-image: url('/images/badge.webp');
  mask-image: url('/images/badge.webp');
}
html body .site-foot a {
  font-weight: 600 !important;
  text-decoration: none;
}
html body .site-foot-label {
  font-weight: 600 !important;
  color: var(--maroon);
}
html body .site-foot-fine {
  max-width: 1240px;
  margin: 72px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(243, 236, 224, 0.3);
}
html body .site-foot-word {
  font-family: var(--goudy) !important;
  font-size: 16.4vw !important;
  line-height: 0.8 !important;
  text-align: center;
  margin: 24px calc(var(--gut) * -1) -0.12em;
  white-space: nowrap;
  color: var(--cream-hi);
}
@media (max-width: 900px) {
  .site-foot-grid {
    grid-template-columns: 1fr;
  }
  .site-badge {
    width: 160px;
  }
}