/* =============================================================================
 * Digital Coach — Ghost Theme
 * Editorial · warm-white · book-forward
 *
 * SECTIONS
 *  01. Tokens (CSS variables)
 *  02. Reset & base
 *  03. Typography
 *  04. Layout primitives
 *  05. Buttons & forms
 *  06. Cards, tags, dividers, placeholders
 *  07. Component: Site header / nav
 *  08. Component: Masthead bar
 *  09. Component: Book mockup (3D tilted hardback)
 *  10. Component: Open spread (two-page preview)
 *  11. Component: Photo card (polaroid w/ tape)
 *  12. Component: PDF / sheet mockup
 *  13. Component: Seal / badge
 *  14. Component: Marquee
 *  15. Component: Footer
 *  16. Component: Newsletter blocks (4 variants)
 *  17. Page: Home (hero, bottom row)
 *  18. Page: Index / Archive (mosaic)
 *  19. Page: Post (header, cover collage, body, prose)
 *  20. Page: About
 *  21. Page: Book sales (Atlas)
 *  22. Page: Tools catalog
 *  23. Page: Contact
 *  24. Page: Tag / Author / Error / Generic page
 *  25. Reading progress bar
 *  26. Share buttons
 *  27. Comments (Ghost native)
 *  28. Member portal & subscribe form states
 *  29. Search & dialog
 *  30. Mobile navigation drawer
 *  31. Koenig content cards (post.hbs prose)
 *  32. Responsive breakpoints
 *  33. Print styles
 *  34. Accessibility / utilities
 * =============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

/* =============================================================================
 * 01. TOKENS
 * =============================================================================*/
:root {
  /* — Surfaces — */
  --w-bg:        #FBFAF6;
  --w-bg-2:      #F3F0E8;
  --w-bg-3:      #E9E5DA;
  --w-card:      #FFFFFF;
  --w-rule:      #E5E1D5;
  --w-rule-soft: #EFECE2;

  /* — Ink — */
  --w-ink:       oklch(0.20 0.022 265);
  --w-ink-2:     oklch(0.36 0.022 265);
  --w-ink-3:     oklch(0.50 0.020 260);
  --w-ink-mute:  oklch(0.62 0.018 258);

  /* — Clay (accent) — */
  --w-clay:      oklch(0.62 0.135 45);
  --w-clay-deep: oklch(0.46 0.130 38);
  --w-clay-soft: oklch(0.93 0.038 60);
  --w-clay-tint: oklch(0.97 0.020 60);

  /* — Slate — */
  --w-slate:     oklch(0.46 0.060 235);
  --w-slate-tint:oklch(0.95 0.018 235);

  /* — Type — */
  --w-serif: 'Instrument Serif', 'Times New Roman', Times, serif;
  --w-sans:  'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --w-mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* — Spacing scale (8-based) — */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;   --s-6: 24px;   --s-7: 32px;  --s-8: 40px;
  --s-9: 56px;   --s-10: 72px;  --s-11: 96px; --s-12: 128px;

  /* — Radii — */
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;

  /* — Page padding (fluid) — */
  --page-x: clamp(20px, 5vw, 80px);
  --section-y: clamp(48px, 8vw, 84px);

  /* — Z-layers — */
  --z-nav: 50;
  --z-drawer: 80;
  --z-progress: 60;
  --z-modal: 100;
}

/* If the Ghost admin sets a custom accent color, surface it as a variable
 * we can fall back to (kept separate from --w-clay so designers can opt in). */
.has-accent-color {
  --w-clay-admin: var(--ghost-accent-color, var(--w-clay));
}

/* =============================================================================
 * 02. RESET & BASE
 * =============================================================================*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  background: var(--w-bg);
  color: var(--w-ink);
  font-family: var(--w-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { font-style: italic; background-repeat: no-repeat; background-size: cover; }
img[alt] { font-style: italic; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
hr { border: 0; height: 1px; background: var(--w-rule); margin: var(--s-7) 0; }

::selection { background: var(--w-clay-soft); color: var(--w-clay-deep); }
:focus-visible { outline: 2px solid var(--w-clay-deep); outline-offset: 3px; border-radius: 2px; }

/* =============================================================================
 * 03. TYPOGRAPHY
 * =============================================================================*/
.h-display, .h-1, .h-2, .h-3, .h-4 {
  font-family: var(--w-serif);
  font-weight: 400;
  text-wrap: balance;
  color: var(--w-ink);
}
.h-display { font-size: clamp(54px, 9.2vw, 132px); line-height: 0.92; letter-spacing: -0.028em; }
.h-1       { font-size: clamp(44px, 7.6vw, 108px); line-height: 0.96; letter-spacing: -0.022em; }
.h-2       { font-size: clamp(34px, 5vw,   72px);  line-height: 1.02; letter-spacing: -0.018em; }
.h-3       { font-size: clamp(26px, 3vw,   44px);  line-height: 1.08; letter-spacing: -0.012em; }
.h-4       { font-size: clamp(20px, 2vw,   28px);  line-height: 1.15; letter-spacing: -0.008em; }

.eyebrow-w {
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--w-clay-deep);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow-w::before { content: ""; width: 22px; height: 1px; background: currentColor; flex-shrink: 0; }
.eyebrow-w.no-dash::before { display: none; }

.label-w {
  font-family: var(--w-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--w-ink-mute);
}

.lead-w  { font-family: var(--w-sans); font-weight: 400; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; letter-spacing: -0.006em; color: var(--w-ink-2); }
.body-w  { font-size: 15px; line-height: 1.55; color: var(--w-ink-2); }
.small-w { font-size: 13px; line-height: 1.5; color: var(--w-ink-3); }

.italic  { font-style: italic; }
.serif-w { font-family: var(--w-serif); }
.sans-w  { font-family: var(--w-sans); }
.mono-w  { font-family: var(--w-mono); }
.clay-w  { color: var(--w-clay-deep); }
.mute-w  { color: var(--w-ink-mute); }
.upper-w { text-transform: uppercase; letter-spacing: 0.16em; }

/* =============================================================================
 * 04. LAYOUT PRIMITIVES
 * =============================================================================*/
.site {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.container {
  width: 100%;
  padding-left: var(--page-x);
  padding-right: var(--page-x);
}
.container-narrow {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: var(--page-x);
  padding-right: var(--page-x);
}
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-tight { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(32px, 5vw, 56px); }
.section-rule { border-top: 1px solid var(--w-rule); }
.section-rule-bot { border-bottom: 1px solid var(--w-rule); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2vw, 28px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 22px); }
.grid-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }

.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-7 > * + * { margin-top: var(--s-7); }
.stack-8 > * + * { margin-top: var(--s-8); }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.cluster-lg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }

/* =============================================================================
 * 05. BUTTONS & FORMS
 * =============================================================================*/
.btn-w {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--w-sans); font-weight: 500; font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--w-ink); color: var(--w-bg);
  border: 1px solid var(--w-ink);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: transform .15s ease, background .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.btn-w:hover { transform: translateY(-1px); opacity: 0.92; }
.btn-w:active { transform: translateY(0); }
.btn-w.ghost { background: transparent; color: var(--w-ink); }
.btn-w.ghost:hover { background: var(--w-ink); color: var(--w-bg); }
.btn-w.clay  { background: var(--w-clay); color: #fff; border-color: var(--w-clay); }
.btn-w.clay:hover { background: var(--w-clay-deep); border-color: var(--w-clay-deep); }
.btn-w.lg    { font-size: 15px; padding: 16px 26px; }
.btn-w.xl    { font-size: 16px; padding: 18px 30px; }
.btn-w[disabled], .btn-w.is-loading { opacity: 0.6; cursor: not-allowed; }

.input-w {
  font-family: var(--w-sans); font-size: 14px;
  padding: 14px 18px;
  border-radius: var(--r-pill);
  background: var(--w-card); color: var(--w-ink);
  border: 1px solid var(--w-rule);
  width: 100%;
  transition: border-color .15s ease;
}
.input-w:focus-visible { outline: none; border-color: var(--w-ink); }
.input-w::placeholder { color: var(--w-ink-mute); }

textarea.input-w { border-radius: var(--r-lg); min-height: 140px; resize: vertical; line-height: 1.5; }

.tag-w {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--w-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--w-bg-2); color: var(--w-ink-2);
  text-decoration: none;
  transition: background .15s ease;
  white-space: nowrap;
}
.tag-w:hover { background: var(--w-bg-3); }
.tag-w.clay { background: var(--w-clay-soft); color: var(--w-clay-deep); }
.tag-w.clay:hover { background: var(--w-clay-tint); }
.tag-w.ink  { background: var(--w-ink); color: var(--w-bg); }
.tag-w.ink:hover { opacity: 0.9; }

/* =============================================================================
 * 06. CARDS, DIVIDERS, PLACEHOLDERS
 * =============================================================================*/
.card-w {
  background: var(--w-card);
  border: 1px solid var(--w-rule);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  position: relative;
}
.surface-clay {
  background: var(--w-clay-tint);
  border: 1px solid var(--w-clay-soft);
}
.surface-ink {
  background: var(--w-ink);
  color: var(--w-bg);
  border: 1px solid var(--w-ink);
}
.surface-ink h1, .surface-ink h2, .surface-ink h3, .surface-ink h4 { color: var(--w-bg); }
.surface-ink .lead-w, .surface-ink .body-w { color: rgba(255,255,255,0.72); }
.surface-ink .label-w, .surface-ink .eyebrow-w { color: var(--w-clay-soft); }
.surface-bg-2 { background: var(--w-bg-2); }
.divider-w { height: 1px; background: var(--w-rule); width: 100%; }

/* Image placeholders for posts without feature_image */
.ph-w {
  background: repeating-linear-gradient(135deg, #ECE7DA 0 12px, #F4EFE3 12px 24px);
  border: 1px solid var(--w-rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--w-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--w-ink-mute);
  text-align: center;
  padding: 16px;
  aspect-ratio: 5 / 4;
}
.ph-w.ink   { background: repeating-linear-gradient(135deg, #1c2030 0 12px, #232838 12px 24px); color: oklch(0.7 0.022 260); border-color: oklch(0.30 0.022 265); }
.ph-w.clay  { background: repeating-linear-gradient(135deg, #E9C5A8 0 12px, #F2D4B7 12px 24px); color: var(--w-clay-deep); border-color: var(--w-clay-soft); }
.ph-w.slate { background: repeating-linear-gradient(135deg, #B9C5D2 0 12px, #C7D2DD 12px 24px); color: var(--w-slate); border-color: #C0CCDA; }
.ph-w.cream { background: repeating-linear-gradient(135deg, #E8E1D0 0 12px, #F0EADA 12px 24px); color: var(--w-ink-mute); }

/* When an image fills the placeholder, hide the pattern */
.ph-w > img,
.ph-w > picture > img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
}
.ph-w.has-img { position: relative; padding: 0; }

/* =============================================================================
 * 07. SITE HEADER / NAV
 * =============================================================================*/
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--page-x);
  border-bottom: 1px solid var(--w-rule);
  background: var(--w-bg);
  position: relative;
  z-index: var(--z-nav);
  gap: var(--s-5);
}
.site-header-brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--w-ink);
}
.brand-mark { flex-shrink: 0; }
.brand-wordmark {
  font-family: var(--w-serif);
  font-size: 22px;
  letter-spacing: -0.025em;
  line-height: 0.9;
}
.brand-wordmark .digital { font-style: italic; }
.brand-wordmark .dot { color: var(--w-clay); }

.site-nav {
  display: flex; align-items: center;
  gap: var(--s-7);
  font-family: var(--w-sans); font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--w-ink-2);
}
.site-nav a {
  color: inherit;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.site-nav a:hover,
.site-nav a.is-active { border-bottom-color: var(--w-ink); color: var(--w-ink); }

.site-header-actions { display: flex; align-items: center; gap: var(--s-3); }
.nav-search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--w-ink-2);
  transition: background .15s ease, color .15s ease;
}
.nav-search:hover { background: var(--w-bg-2); color: var(--w-ink); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--w-sans); font-weight: 500; font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--w-ink); color: var(--w-bg);
  border: 1px solid var(--w-ink);
  text-decoration: none;
  transition: opacity .15s;
}
.nav-cta:hover { opacity: 0.9; }
.nav-cta::after { content: "→"; }
.nav-member {
  font-family: var(--w-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--w-ink-mute);
}
.nav-member a { color: var(--w-ink-2); }

.nav-toggle {
  display: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  color: var(--w-ink);
}
.nav-toggle:hover { background: var(--w-bg-2); }

/* =============================================================================
 * 08. MASTHEAD BAR (homepage issue strip)
 * =============================================================================*/
.masthead-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--page-x);
  border-bottom: 1px solid var(--w-rule);
  background: var(--w-bg);
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--w-ink-mute);
  gap: var(--s-5);
}
.masthead-bar .dot { color: var(--w-clay-deep); }
.masthead-bar > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.masthead-bar > div:nth-child(2) { text-align: center; }
.masthead-bar > div:nth-child(3) { text-align: right; }

/* =============================================================================
 * 09. BOOK MOCKUP — 3D tilted hardback
 * =============================================================================*/
.book {
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  filter: drop-shadow(28px 32px 36px rgba(35,28,18,0.18))
          drop-shadow(8px 12px 16px rgba(35,28,18,0.10));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.book:hover .book-inner { transform: rotateY(0) rotateX(0) rotateZ(0); }
.book-inner {
  position: relative;
  transform: rotateY(-22deg) rotateX(4deg) rotateZ(-1deg);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.book-cover {
  position: relative;
  background: var(--w-ink);
  color: var(--w-bg);
  font-family: var(--w-serif);
  display: flex; flex-direction: column;
  padding: 28px 24px;
  overflow: hidden;
  border-radius: 2px 6px 6px 2px;
}
.book-cover::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 18px;
  background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.1) 60%, transparent);
}
.book-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(0,0,0,0.10) 100%);
  pointer-events: none;
}
.book-cover.clay  { background: var(--w-clay); color: #fff; }
.book-cover.cream { background: #F4ECDA; color: var(--w-ink); }
.book-cover.paper { background: #ECE5D2; color: var(--w-ink); }
.book-cover.slate { background: #2C3A4F; color: #F4ECDA; }
.book-meta-top { font-family: var(--w-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; }
.book-glyph { flex: 1; display: flex; align-items: center; justify-content: center; }
.book-glyph svg { width: 42%; }
.book-title { font-family: var(--w-serif); line-height: 1; letter-spacing: -0.015em; font-size: calc(var(--book-w, 260) * 0.1px); }
.book-subtitle { font-family: var(--w-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 8px; opacity: 0.55; }
.book-foot { margin-top: 18px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.12); font-family: var(--w-mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; }
.book-cover.ink .book-foot, .book-cover.slate .book-foot { border-top-color: rgba(255,255,255,0.18); }
.book-pages {
  position: absolute;
  right: -8px; top: 6px; bottom: 6px;
  width: 8px;
  background: repeating-linear-gradient(to bottom, #fff 0 2px, #E8E2D2 2px 3px);
  border-radius: 0 2px 2px 0;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.12);
}

/* =============================================================================
 * 10. OPEN SPREAD — two-page editorial preview
 * =============================================================================*/
.spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #FBF6E9;
  border: 1px solid var(--w-rule);
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(35,28,18,0.20), 0 4px 12px rgba(35,28,18,0.08);
}
.spread::before {
  content: "";
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 36px; transform: translateX(-50%);
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.10) 50%, transparent);
  pointer-events: none;
}
.spread-page {
  padding: 22px 20px;
  font-family: var(--w-serif);
  color: var(--w-ink);
  font-size: 9px;
  line-height: 1.4;
  position: relative;
  min-height: 200px;
}
.spread-page.dark { background: #1A1F2E; color: #F4ECDA; }
.spread-folio {
  position: absolute; bottom: 8px;
  font-family: var(--w-mono);
  font-size: 7px;
  letter-spacing: 0.16em;
  color: var(--w-ink-mute);
  text-transform: uppercase;
}
.spread-page.left .spread-folio { left: 14px; }
.spread-page.right .spread-folio { right: 14px; }
.spread-rule {
  height: 1px;
  background: repeating-linear-gradient(to right, var(--w-ink-mute) 0 2px, transparent 2px 4px);
  opacity: 0.4;
  margin: 4px 0;
}
.spread-h { font-family: var(--w-serif); font-size: 13px; line-height: 1.05; margin: 0 0 6px; letter-spacing: -0.01em; }
.spread-eyebrow { font-family: var(--w-mono); font-size: 6.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--w-clay-deep); margin-bottom: 6px; }
.spread-bar { height: 4px; background: var(--w-ink); border-radius: 1px; margin: 6px 0; }
.spread-bar.clay { background: var(--w-clay); }
.spread-bar.mute { background: var(--w-rule); }
.spread-line { height: 2px; background: var(--w-rule); border-radius: 1px; margin: 4px 0; }
.spread-line.long  { width: 95%; }
.spread-line.med   { width: 70%; }
.spread-line.short { width: 40%; }
.spread-line.clay  { background: var(--w-clay); }

/* =============================================================================
 * 11. PHOTO CARD — polaroid with optional tape
 * =============================================================================*/
.photo-card {
  background: #fff;
  border: 1px solid var(--w-rule);
  padding: 10px 10px 14px;
  border-radius: 2px;
  box-shadow: 0 14px 26px -10px rgba(35,28,18,0.14), 0 2px 6px rgba(35,28,18,0.06);
  position: relative;
  display: inline-block;
}
.photo-card-img { display: block; aspect-ratio: 5 / 6; }
.photo-card-caption {
  font-family: var(--w-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-ink-mute);
  margin-top: 10px;
  padding: 0 4px;
}
.photo-card .tape {
  position: absolute;
  width: 78px; height: 22px;
  background: rgba(217,200,143,0.55);
  border-left: 1px dashed rgba(180,150,90,0.4);
  border-right: 1px dashed rgba(180,150,90,0.4);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
}

/* =============================================================================
 * 12. PDF / SHEET MOCKUP
 * =============================================================================*/
.sheet {
  background: #fff;
  border: 1px solid var(--w-rule);
  border-radius: 3px;
  padding: 22px 20px;
  position: relative;
  box-shadow: 0 18px 34px -14px rgba(35,28,18,0.18), 0 3px 8px rgba(35,28,18,0.07);
  font-family: var(--w-sans);
  color: var(--w-ink);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.sheet::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 28px; height: 28px;
  background: linear-gradient(225deg, var(--w-bg-2) 50%, transparent 50%);
  border-left: 1px solid var(--w-rule);
  border-bottom: 1px solid var(--w-rule);
}
.sheet-stack { position: relative; }
.sheet-stack::before, .sheet-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border: 1px solid var(--w-rule);
  border-radius: 3px;
  z-index: -1;
  box-shadow: 0 10px 20px -10px rgba(35,28,18,0.12);
}
.sheet-stack::before { transform: rotate(-2deg) translate(-6px, 4px); }
.sheet-stack::after  { transform: rotate(2deg) translate(6px, 8px); z-index: -2; }

.line {
  height: 6px;
  background: var(--w-ink);
  border-radius: 2px;
  margin: 6px 0;
  opacity: 0.85;
}
.line.mute  { background: var(--w-rule); opacity: 1; }
.line.clay  { background: var(--w-clay); }
.line.short { width: 40%; }
.line.med   { width: 70%; }
.line.long  { width: 95%; }

/* =============================================================================
 * 13. SEAL / BADGE
 * =============================================================================*/
.seal {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--w-clay);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--w-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 14px;
  transform: rotate(-8deg);
  box-shadow: 0 8px 16px -6px rgba(120,60,30,0.35);
}
.seal.ink   { background: var(--w-ink); }
.seal.cream { background: #F4ECDA; color: var(--w-ink); }

/* =============================================================================
 * 14. MARQUEE — scrolling band
 * =============================================================================*/
.marquee {
  display: flex; align-items: center; gap: 32px;
  font-family: var(--w-serif);
  font-style: italic;
  font-size: clamp(22px, 3vw, 36px);
  white-space: nowrap;
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--w-rule);
  border-bottom: 1px solid var(--w-rule);
  background: var(--w-bg);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.marquee-track {
  display: inline-flex; align-items: center; gap: 32px;
  animation: marquee 38s linear infinite;
  padding-left: 32px;
}
.marquee .dot { width: 8px; height: 8px; background: var(--w-clay); border-radius: 50%; flex: 0 0 8px; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* =============================================================================
 * 15. FOOTER
 * =============================================================================*/
.site-footer {
  background: var(--w-bg-2);
  border-top: 1px solid var(--w-rule);
  padding: 56px var(--page-x) 36px;
  font-size: 13px;
  color: var(--w-ink-3);
  margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.footer-brand .tagline { color: var(--w-ink-2); max-width: 36ch; margin-top: var(--s-4); line-height: 1.55; }
.footer h6 {
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--w-ink-mute);
  margin: 0 0 14px;
  font-weight: 500;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer a { color: var(--w-ink-2); text-decoration: none; transition: color .15s; }
.footer a:hover { color: var(--w-ink); }
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--w-rule);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4);
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-ink-mute);
}
.footer-social { display: flex; gap: var(--s-4); }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; }

/* =============================================================================
 * 16. NEWSLETTER BLOCKS
 * =============================================================================*/
.newsletter-inline {
  margin: var(--s-9) 0;
  padding: clamp(28px, 4vw, 48px);
  background: var(--w-card);
  border: 1px solid var(--w-rule);
  border-radius: var(--r-lg);
  display: grid;
  grid-template-columns: 2fr 1.4fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}
.newsletter-inline h3 { font-family: var(--w-serif); font-size: clamp(24px, 3vw, 40px); line-height: 1.1; margin: var(--s-3) 0 var(--s-3); letter-spacing: -0.012em; }

.newsletter-clay {
  padding: clamp(28px, 4vw, 48px);
  background: var(--w-clay-tint);
  border: 1px solid var(--w-clay-soft);
  border-radius: var(--r-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}
.newsletter-clay h3 { font-family: var(--w-serif); font-size: clamp(28px, 4vw, 56px); line-height: 0.98; margin: 0; letter-spacing: -0.018em; }

.newsletter-ink {
  padding: var(--s-6);
  background: var(--w-ink);
  color: var(--w-bg);
  border: 1px solid var(--w-ink);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 280px;
  gap: var(--s-4);
}
.newsletter-ink h3 { font-family: var(--w-serif); font-size: clamp(18px, 2vw, 24px); line-height: 1.1; color: var(--w-bg); margin: var(--s-2) 0 0; }
.newsletter-ink .input-w {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  color: var(--w-bg);
}
.newsletter-ink .input-w::placeholder { color: rgba(255,255,255,0.5); }

.newsletter-sidebar {
  padding: var(--s-6) var(--s-7);
  background: var(--w-card);
  border: 1px solid var(--w-rule);
  border-radius: var(--r-lg);
  display: flex; gap: var(--s-5);
  align-items: center;
  max-width: 480px;
}
.newsletter-sidebar .nls-text { flex: 1; min-width: 0; }
.newsletter-sidebar .nls-title { font-family: var(--w-serif); font-style: italic; font-size: 18px; line-height: 1.2; }
.newsletter-sidebar .nls-sub { font-size: 13px; color: var(--w-ink-mute); margin-top: 2px; }

.newsletter-form {
  display: flex; flex-direction: column; gap: var(--s-2);
}
.newsletter-form .form-row { display: flex; gap: var(--s-2); }
.newsletter-form .form-row .input-w { flex: 1; min-width: 0; }
.newsletter-success {
  display: none;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--w-clay-tint);
  border: 1px solid var(--w-clay-soft);
  color: var(--w-clay-deep);
  font-family: var(--w-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.newsletter-form.is-success .form-row { display: none; }
.newsletter-form.is-success .newsletter-success { display: block; }
.newsletter-form.is-error .form-row .input-w { border-color: #c1392b; }

/* =============================================================================
 * 17. HOME PAGE
 * =============================================================================*/
.home-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  padding: clamp(36px, 6vw, 72px) var(--page-x) clamp(24px, 4vw, 48px);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  position: relative;
}
.home-hero-left { display: flex; flex-direction: column; gap: var(--s-7); justify-content: center; }
.home-hero-title { font-size: clamp(48px, 9vw, 132px); line-height: 0.92; letter-spacing: -0.028em; }
.home-hero-title em { font-style: italic; color: var(--w-clay-deep); }
.home-hero-lead { max-width: 44ch; }
.home-hero-actions { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.home-hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6);
  padding-top: var(--s-6); border-top: 1px solid var(--w-rule);
}
.stat-item .stat-num { font-family: var(--w-serif); font-size: clamp(28px, 3vw, 40px); line-height: 1; }
.stat-item .stat-label { margin-top: 6px; }

.home-hero-right {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 480px;
}
.home-hero-backdrop {
  position: absolute; inset: 8% -6% 12% 4%;
  background: var(--w-clay-tint);
  border-radius: var(--r-lg);
  border: 1px solid var(--w-clay-soft);
  z-index: 0;
}
.home-hero-sheet { position: absolute; left: 8%; bottom: 16%; transform: rotate(-7deg); z-index: 1; }
.home-hero-spread { position: absolute; right: 2%; top: 10%; transform: rotate(4deg); z-index: 1; }
.home-hero-book { position: relative; z-index: 2; }
.home-hero-seal { position: absolute; top: -18px; right: -28px; z-index: 5; }

.home-bottom {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--s-5);
  padding: var(--s-7) var(--page-x) clamp(48px, 6vw, 72px);
}
.home-feature-card {
  padding: 0; overflow: hidden;
  display: flex; flex-direction: row;
  color: inherit;
  border: 1px solid var(--w-rule);
  background: var(--w-card);
  border-radius: var(--r-lg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-feature-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(35,28,18,0.14); }
.home-feature-card .feat-img {
  width: 220px;
  flex-shrink: 0;
  background-size: cover; background-position: center;
  border-right: 1px solid var(--w-rule);
}
.home-feature-card .feat-img.is-placeholder {
  background: repeating-linear-gradient(135deg, #E8E1D0 0 12px, #F0EADA 12px 24px);
}
.home-feature-card .feat-body { flex: 1; padding: 20px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3); }
.home-feature-card .feat-title { font-family: var(--w-serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.05; }
.home-feature-card .feat-title em { font-style: italic; color: var(--w-clay-deep); }

.home-tool-card {
  position: relative;
  background: var(--w-bg-2);
  border: 1px solid var(--w-rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 220px;
}
.home-tool-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(35,28,18,0.14); }
.home-tool-card .tool-mockup { position: absolute; top: -10px; right: -20px; transform: rotate(8deg); }
.home-tool-card .tool-body { padding: 20px 22px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3); position: relative; z-index: 2; }
.home-tool-card .tool-title { font-family: var(--w-serif); font-size: clamp(20px, 2vw, 24px); line-height: 1.05; max-width: 9ch; }
.home-tool-card .tool-price { font-family: var(--w-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--w-clay-deep); text-transform: uppercase; margin-top: var(--s-2); }

/* =============================================================================
 * 18. INDEX / ARCHIVE — magazine mosaic
 * =============================================================================*/
.archive-header {
  padding: clamp(48px, 7vw, 72px) var(--page-x) var(--s-7);
  border-bottom: 1px solid var(--w-rule);
}
.archive-header-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: var(--s-6); margin-bottom: var(--s-4);
}
.archive-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 540px; }

.archive-featured {
  padding: clamp(32px, 5vw, 56px) var(--page-x) clamp(40px, 6vw, 64px);
  border-bottom: 1px solid var(--w-rule);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: stretch;
}
.archive-featured-text { display: flex; flex-direction: column; justify-content: center; }
.archive-featured-title { font-family: var(--w-serif); font-size: clamp(40px, 6vw, 96px); line-height: 0.96; letter-spacing: -0.022em; margin: var(--s-4) 0 var(--s-6); }
.archive-featured-title em { font-style: italic; }
.archive-featured-title .clay { color: var(--w-clay-deep); }
.archive-featured-cover { position: relative; min-height: 420px; }
.archive-featured-cover .cover-img {
  position: absolute; inset: 0 0 0 12%;
  border-radius: 6px;
  background-size: cover; background-position: center;
  background-color: var(--w-bg-3);
  border: 1px solid var(--w-rule);
}
.archive-featured-cover .cover-img.is-placeholder {
  background: repeating-linear-gradient(135deg, #1c2030 0 12px, #232838 12px 24px);
}
.archive-featured-cover .cover-overlay-img { position: absolute; left: -8px; bottom: 24px; transform: rotate(-4deg); }
.archive-featured-cover .cover-pill {
  position: absolute; right: 12px; top: 16px;
  background: var(--w-bg); padding: 6px 12px;
  border-radius: var(--r-pill); border: 1px solid var(--w-rule);
  font-family: var(--w-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--w-clay-deep); text-transform: uppercase;
}

.archive-mosaic { padding: clamp(40px, 6vw, 64px) var(--page-x); }
.archive-mosaic-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: var(--s-7); gap: var(--s-5); flex-wrap: wrap;
}
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
  row-gap: clamp(28px, 4vw, 44px);
}

/* Post card with cover treatment variations */
.post-card {
  color: inherit; text-decoration: none;
  display: block;
}
.post-card-link {
  color: inherit; text-decoration: none;
  display: flex; flex-direction: column; gap: var(--s-4);
  transition: transform .2s ease;
}
.post-card-link:hover { transform: translateY(-2px); }
.post-card .pc-cover {
  height: 260px;
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
  display: flex;
  border: 1px solid var(--w-rule);
}
.post-card .pc-cover img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.post-card-link:hover .pc-cover img { transform: scale(1.03); }
.post-card .pc-body { display: flex; flex-direction: column; gap: var(--s-2); }
.post-card .pc-meta-row { display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.post-card .pc-meta-num { font-family: var(--w-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--w-clay-deep); text-transform: uppercase; }
.post-card .pc-title { font-family: var(--w-serif); font-size: clamp(22px, 2.5vw, 28px); line-height: 1.08; margin: var(--s-1) 0 var(--s-3); }
.post-card .pc-foot { font-family: var(--w-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--w-ink-mute); text-transform: uppercase; }

/* Cover treatments — fallback artwork when post has no feature_image.
 * Single layout with 4 colour rotations applied via :nth-child in the grid.
 * The default treatment is "ink"; .archive-grid overrides for variety. */
.pc-cover-treatment {
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--w-ink);
  color: var(--w-bg);
}
.pc-cover-treatment .pc-cover-glyph { color: currentColor; opacity: 0.7; align-self: flex-end; }
.pc-cover-treatment .pc-cover-title {
  font-family: var(--w-serif);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-top: auto;
}
.pc-cover-treatment .pc-cover-title .dot { color: var(--w-clay-soft); }

/* Rotation by index — works in any grid */
.archive-grid .post-card:nth-child(4n+1) .pc-cover-treatment {
  background: repeating-linear-gradient(135deg, #1c2030 0 12px, #232838 12px 24px);
  border-color: #2a3040; color: var(--w-bg);
}
.archive-grid .post-card:nth-child(4n+2) .pc-cover-treatment {
  background: repeating-linear-gradient(135deg, #E9C5A8 0 12px, #F2D4B7 12px 24px);
  border-color: var(--w-clay-soft); color: var(--w-clay-deep);
}
.archive-grid .post-card:nth-child(4n+2) .pc-cover-treatment .pc-cover-title .dot { color: var(--w-clay); }
.archive-grid .post-card:nth-child(4n+3) .pc-cover-treatment {
  background: repeating-linear-gradient(135deg, #E8E1D0 0 12px, #F0EADA 12px 24px);
  border-color: var(--w-rule); color: var(--w-ink);
}
.archive-grid .post-card:nth-child(4n+3) .pc-cover-treatment .pc-cover-title .dot { color: var(--w-clay-deep); }
.archive-grid .post-card:nth-child(4n+4) .pc-cover-treatment {
  background: repeating-linear-gradient(135deg, #B9C5D2 0 12px, #C7D2DD 12px 24px);
  border-color: #C0CCDA; color: var(--w-ink);
}
.archive-grid .post-card:nth-child(4n+4) .pc-cover-treatment .pc-cover-title .dot { color: var(--w-slate); }

/* Pagination */
.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: var(--s-5);
  margin-top: clamp(40px, 5vw, 56px);
  font-family: var(--w-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--w-ink-mute);
}
.pagination .nav-prev, .pagination .nav-next {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--w-rule);
  background: var(--w-bg);
  color: var(--w-ink-2);
  transition: background .15s;
}
.pagination .nav-prev:hover, .pagination .nav-next:hover { background: var(--w-bg-2); color: var(--w-ink); }

/* =============================================================================
 * 19. POST PAGE
 * =============================================================================*/
.post-header {
  padding: clamp(56px, 8vw, 96px) var(--page-x) var(--s-7);
  max-width: 1200px;
  margin: 0 auto;
}
.post-tag-line { color: var(--w-clay-deep); margin-bottom: var(--s-5); }
.post-title {
  font-family: var(--w-serif); font-weight: 400;
  font-size: clamp(40px, 8vw, 108px);
  letter-spacing: -0.024em;
  line-height: 0.96;
  margin: var(--s-5) 0 var(--s-6);
  text-wrap: balance;
}
.post-title em { font-style: italic; }
.post-title .clay { color: var(--w-clay-deep); }
.post-excerpt {
  font-family: var(--w-sans); font-weight: 400;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--w-ink-2);
  max-width: 60ch;
  margin: 0;
}
.post-meta {
  display: flex; gap: var(--s-6); align-items: center; flex-wrap: wrap;
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--w-rule);
}
.post-meta-author { display: flex; align-items: center; gap: var(--s-3); }
.post-meta-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--w-clay-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--w-serif); font-size: 16px; color: var(--w-clay-deep);
  overflow: hidden;
}
.post-meta-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-meta-item { font-family: var(--w-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--w-ink-mute); }
.post-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--w-ink-mute); }

.post-cover {
  position: relative;
  padding: 0 var(--page-x);
}
.post-cover-img {
  height: clamp(280px, 40vw, 480px);
  border-radius: var(--r-md);
  background-size: cover; background-position: center;
  border: 1px solid var(--w-rule);
}
.post-cover-img.is-placeholder { background: repeating-linear-gradient(135deg, #1c2030 0 12px, #232838 12px 24px); }
.post-cover-pill {
  position: absolute; left: calc(var(--page-x) + 16px); bottom: 16px;
  background: var(--w-bg); padding: 8px 14px;
  border-radius: var(--r-pill); border: 1px solid var(--w-rule);
  font-family: var(--w-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--w-clay-deep); text-transform: uppercase;
}
.post-cover-cards {
  position: absolute; right: calc(var(--page-x) + 16px); bottom: -36px;
  display: flex; gap: var(--s-4);
}

.post-body {
  padding: clamp(56px, 8vw, 96px) var(--page-x) 0;
  max-width: 1200px;
  margin: 0 auto;
}
.post-opener {
  font-family: var(--w-serif);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.32;
  color: var(--w-ink);
}
.post-opener em.clay { color: var(--w-clay-deep); font-style: italic; }

.post-body-grid {
  display: grid;
  grid-template-columns: 1fr 2.6fr;
  gap: clamp(32px, 5vw, 64px);
  margin-top: clamp(40px, 5vw, 56px);
}
.post-aside { position: sticky; top: 100px; align-self: start; }
.post-aside .toc-list {
  list-style: none; padding: 0; margin: 0;
  font-family: var(--w-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--w-ink-2);
}
.post-aside .toc-list li {
  padding: 10px 0;
  border-top: 1px solid var(--w-rule);
}
.post-aside .toc-list li:last-child { border-bottom: 1px solid var(--w-rule); }
.post-aside .toc-list a { color: var(--w-ink-2); display: block; transition: color .15s; }
.post-aside .toc-list a:hover { color: var(--w-clay-deep); }

.related-tool {
  margin-top: var(--s-8);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--w-clay-tint);
  border: 1px solid var(--w-clay-soft);
  position: relative;
  overflow: hidden;
}
.related-tool-mockup { position: absolute; right: -16px; top: 8px; transform: rotate(8deg); opacity: 0.9; }
.related-tool-title { font-family: var(--w-serif); font-style: italic; font-size: 22px; max-width: 12ch; margin: var(--s-2) 0 var(--s-3); }

/* =============================================================================
 * 20. ABOUT PAGE
 * =============================================================================*/
.about-hero {
  padding: clamp(56px, 8vw, 96px) var(--page-x) clamp(40px, 6vw, 64px);
  border-bottom: 1px solid var(--w-rule);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.about-hero-title { font-size: clamp(48px, 8vw, 108px); line-height: 0.94; }
.about-hero-title em { font-style: italic; }
.about-hero-title .clay { color: var(--w-clay-deep); }
.about-hero-meta { font-family: var(--w-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--w-ink-mute); text-transform: uppercase; margin-top: var(--s-6); }
.about-portrait { position: relative; height: clamp(360px, 50vw, 480px); }
.about-portrait .photo-card { position: absolute; }
.about-portrait .photo-card:first-child { left: 0; top: 0; transform: rotate(-3deg); }
.about-portrait .photo-card:last-child { right: 8px; bottom: 0; transform: rotate(4deg); }

.about-pillars {
  padding: clamp(48px, 6vw, 72px) var(--page-x);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-7);
}
.pillar-card {
  display: flex; flex-direction: column;
  padding: var(--s-7);
  background: var(--w-card);
  border: 1px solid var(--w-rule);
  border-radius: var(--r-lg);
  min-height: 260px;
  gap: var(--s-4);
}
.pillar-num { font-family: var(--w-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--w-clay-deep); text-transform: uppercase; }
.pillar-title { font-family: var(--w-serif); font-size: clamp(26px, 3vw, 38px); margin: var(--s-2) 0; }
.pillar-body { color: var(--w-ink-2); font-size: 15px; line-height: 1.55; margin-top: auto; }

.about-manifesto {
  padding: clamp(40px, 5vw, 56px) var(--page-x) clamp(56px, 7vw, 88px);
  background: var(--w-clay-tint);
  border-top: 1px solid var(--w-clay-soft);
  border-bottom: 1px solid var(--w-clay-soft);
}
.about-manifesto-quote {
  font-family: var(--w-serif); font-size: clamp(28px, 5vw, 60px);
  line-height: 1.1; margin: 0; max-width: 26ch;
}
.about-manifesto-quote em { font-style: italic; }
.about-manifesto-quote .clay { color: var(--w-clay-deep); }

.about-timeline {
  padding: clamp(48px, 6vw, 72px) var(--page-x);
}
.timeline-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--s-7);
}
.timeline-item {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--s-7);
  padding-top: var(--s-5); border-top: 1px solid var(--w-rule);
}
.timeline-year { font-family: var(--w-serif); font-size: clamp(32px, 4vw, 48px); color: var(--w-clay-deep); line-height: 1; }
.timeline-title { font-family: var(--w-serif); font-size: clamp(20px, 2vw, 26px); margin-bottom: var(--s-2); }

/* =============================================================================
 * 21. BOOK SALES (ATLAS) PAGE
 * =============================================================================*/
.atlas-hero {
  padding: clamp(48px, 6vw, 80px) var(--page-x) clamp(36px, 5vw, 56px);
  border-bottom: 1px solid var(--w-rule);
}
.atlas-breadcrumb { font-family: var(--w-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--w-ink-mute); text-transform: uppercase; margin-bottom: var(--s-6); }
.atlas-breadcrumb a { color: inherit; }
.atlas-hero-grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.atlas-title { font-size: clamp(48px, 8vw, 104px); line-height: 0.94; letter-spacing: -0.024em; margin: var(--s-5) 0 var(--s-6); }
.atlas-title em { font-style: italic; color: var(--w-clay-deep); }
.atlas-meta-strip {
  display: grid; grid-template-columns: repeat(4, auto);
  gap: clamp(20px, 3vw, 32px);
  margin-top: var(--s-8);
}
.atlas-meta-strip .label-w { display: block; }
.atlas-meta-strip .meta-value { font-family: var(--w-serif); font-size: clamp(20px, 2.5vw, 26px); margin-top: var(--s-1); }

.atlas-stage {
  position: relative;
  background: var(--w-clay-tint);
  border: 1px solid var(--w-clay-soft);
  border-radius: var(--r-lg);
  min-height: clamp(420px, 50vw, 560px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.atlas-stage .book.back-left  { position: absolute; left: 32px; bottom: 32px; transform: rotate(-7deg); }
.atlas-stage .book.front      { position: relative; z-index: 2; }
.atlas-stage .book.side-right { position: absolute; right: 32px; top: 40px; transform: rotate(8deg); }
.atlas-stage .seal { position: absolute; top: 24px; left: 24px; }

.atlas-spreads {
  padding: clamp(48px, 6vw, 72px) var(--page-x);
  background: var(--w-bg-2);
  border-bottom: 1px solid var(--w-rule);
}
.atlas-spreads-head {
  display: flex; justify-content: space-between; align-items: end;
  flex-wrap: wrap; gap: var(--s-5); margin-bottom: var(--s-8);
}
.atlas-spreads-head h2 { font-family: var(--w-serif); font-size: clamp(32px, 5vw, 64px); line-height: 1; margin: var(--s-2) 0 0; }
.atlas-spreads-head h2 em { font-style: italic; }
.atlas-spreads-head h2 .clay { color: var(--w-clay-deep); }
.atlas-spreads-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

.atlas-chapters {
  padding: clamp(48px, 6vw, 72px) var(--page-x);
  border-bottom: 1px solid var(--w-rule);
}
.atlas-chapters-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
  margin-top: var(--s-6);
}
.chapter-card { display: flex; flex-direction: column; gap: var(--s-3); }
.chapter-card .ch-num { font-family: var(--w-serif); font-size: clamp(36px, 4vw, 48px); line-height: 1; color: var(--w-clay-deep); }
.chapter-card .ch-pages { font-family: var(--w-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--w-ink-mute); text-transform: uppercase; }
.chapter-card .ch-title { font-family: var(--w-serif); font-size: clamp(22px, 2vw, 28px); margin: var(--s-3) 0 var(--s-2); }

.atlas-testimonials {
  padding: clamp(48px, 6vw, 72px) var(--page-x);
  background: var(--w-ink); color: var(--w-bg);
}
.atlas-testimonials .label-w { color: var(--w-clay-soft); }
.atlas-testimonials h2 { font-family: var(--w-serif); font-size: clamp(32px, 4vw, 48px); line-height: 1.05; color: var(--w-bg); max-width: 22ch; margin: var(--s-5) 0 var(--s-9); }
.atlas-testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-9);
}
.testimonial-card { display: flex; flex-direction: column; gap: var(--s-4); }
.testimonial-card .avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: repeating-linear-gradient(135deg, #B9C5D2 0 12px, #C7D2DD 12px 24px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--w-serif); font-size: 16px; color: var(--w-bg);
}
.testimonial-card blockquote { margin: 0; font-family: var(--w-serif); font-style: italic; font-size: clamp(18px, 2vw, 24px); line-height: 1.3; color: var(--w-bg); }
.testimonial-card footer { font-family: var(--w-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--w-clay-soft); text-transform: uppercase; font-style: normal; }

.atlas-cta {
  padding: clamp(56px, 8vw, 96px) var(--page-x);
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.atlas-cta h2 { font-family: var(--w-serif); font-size: clamp(40px, 7vw, 84px); line-height: 0.96; margin: 0; }
.atlas-cta h2 em { font-style: italic; }
.atlas-cta h2 .clay { color: var(--w-clay-deep); }
.atlas-cta-actions { display: flex; flex-direction: column; gap: var(--s-3); }
.atlas-cta-actions .btn-w { justify-content: center; padding: 22px 24px; font-size: 17px; }

.atlas-faq { padding: clamp(48px, 6vw, 72px) var(--page-x); border-top: 1px solid var(--w-rule); }
.atlas-faq-list { display: grid; gap: var(--s-3); margin-top: var(--s-7); max-width: 880px; }
.atlas-faq details {
  border: 1px solid var(--w-rule);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  background: var(--w-card);
  transition: background .15s;
}
.atlas-faq details[open] { background: var(--w-clay-tint); border-color: var(--w-clay-soft); }
.atlas-faq summary {
  font-family: var(--w-serif); font-size: clamp(18px, 2vw, 22px);
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-4);
}
.atlas-faq summary::-webkit-details-marker { display: none; }
.atlas-faq summary::after { content: "+"; font-family: var(--w-sans); font-size: 24px; color: var(--w-clay-deep); transition: transform .2s; }
.atlas-faq details[open] summary::after { content: "−"; }
.atlas-faq details > *:not(summary) { margin-top: var(--s-4); color: var(--w-ink-2); }

/* =============================================================================
 * 22. TOOLS CATALOG
 * =============================================================================*/
.tools-header {
  padding: clamp(48px, 7vw, 72px) var(--page-x) clamp(32px, 5vw, 48px);
  border-bottom: 1px solid var(--w-rule);
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}
.tools-header h1 { font-size: clamp(40px, 7vw, 92px); line-height: 0.96; margin: var(--s-5) 0 0; }
.tools-header h1 em { font-style: italic; }
.tools-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--s-5); }

.tools-feature {
  padding: clamp(36px, 5vw, 56px) var(--page-x);
  border-bottom: 1px solid var(--w-rule);
}
.tools-feature-card {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--w-ink);
  color: var(--w-bg);
  border: 1px solid var(--w-ink);
  border-radius: 18px;
  overflow: hidden;
}
.tools-feature-card .left { padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7); }
.tools-feature-card .right {
  background: var(--w-clay-tint);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 420px;
}
.tools-feature-card h2 { font-family: var(--w-serif); color: var(--w-bg); font-size: clamp(36px, 5vw, 68px); line-height: 0.96; }
.tools-feature-card h2 em { font-style: italic; color: var(--w-clay-soft); }
.tools-feature-card .stats {
  display: flex; gap: clamp(14px, 2vw, 18px); margin-top: var(--s-6);
  padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,0.12);
}
.tools-feature-card .stat-num { font-family: var(--w-serif); font-size: clamp(22px, 2.5vw, 32px); line-height: 1; color: var(--w-bg); }
.tools-feature-card .stat-label { font-family: var(--w-mono); font-size: 9px; letter-spacing: 0.18em; color: rgba(255,255,255,0.55); text-transform: uppercase; margin-top: 6px; }
.tools-feature-card .price {
  display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-4);
}
.tools-feature-card .price .amount { font-family: var(--w-serif); font-size: clamp(32px, 5vw, 56px); color: var(--w-bg); }
.tools-feature-card .price .meta { font-family: var(--w-mono); font-size: 12px; color: rgba(255,255,255,0.5); letter-spacing: 0.14em; text-transform: uppercase; }

.tools-grid {
  padding: clamp(40px, 6vw, 64px) var(--page-x);
}
.tools-grid-head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: var(--s-7); gap: var(--s-5); flex-wrap: wrap;
}
.tools-grid-body {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
.tool-tile {
  display: flex; flex-direction: column;
  background: var(--w-card);
  border: 1px solid var(--w-rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tool-tile:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(35,28,18,0.14); }
.tool-tile.is-dark { background: var(--w-ink); color: var(--w-bg); border-color: var(--w-ink); }
.tool-tile.is-dark h3 { color: var(--w-bg); }
.tool-tile .tile-visual {
  height: 240px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--w-rule);
}
.tool-tile.is-dark .tile-visual { border-bottom-color: rgba(255,255,255,0.08); }
.tool-tile .tile-visual.bg-cream { background: #F4ECDA; }
.tool-tile .tile-visual.bg-clay  { background: var(--w-clay-tint); }
.tool-tile .tile-visual.bg-slate { background: var(--w-slate-tint); }
.tool-tile .tile-visual.bg-ink   { background: var(--w-ink); }
.tool-tile .tile-tag { position: absolute; top: 14px; left: 14px; z-index: 3; }
.tool-tile .tile-body { padding: 20px 22px; display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.tool-tile .tile-id { font-family: var(--w-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--w-ink-mute); }
.tool-tile.is-dark .tile-id { color: rgba(255,255,255,0.45); }
.tool-tile h3 { font-family: var(--w-serif); font-size: clamp(22px, 2vw, 26px); line-height: 1.1; margin: 0; }
.tool-tile .tile-sub { font-size: 13px; color: var(--w-ink-mute); }
.tool-tile.is-dark .tile-sub { color: rgba(255,255,255,0.55); }
.tool-tile .tile-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: var(--s-4);
  border-top: 1px solid var(--w-rule);
}
.tool-tile.is-dark .tile-foot { border-top-color: rgba(255,255,255,0.08); }
.tool-tile .tile-price { font-family: var(--w-serif); font-size: clamp(20px, 2vw, 26px); }
.tool-tile .tile-cta { font-family: var(--w-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--w-clay-deep); text-transform: uppercase; }
.tool-tile.is-dark .tile-cta { color: var(--w-clay-soft); }

/* =============================================================================
 * 23. CONTACT PAGE
 * =============================================================================*/
.contact-hero {
  padding: clamp(56px, 8vw, 96px) var(--page-x) clamp(40px, 6vw, 64px);
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  border-bottom: 1px solid var(--w-rule);
}
.contact-hero h1 { font-size: clamp(40px, 7vw, 84px); line-height: 0.96; }
.contact-hero h1 em { font-style: italic; color: var(--w-clay-deep); }

.contact-grid {
  padding: clamp(48px, 6vw, 72px) var(--page-x);
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.contact-form-card {
  background: var(--w-card);
  border: 1px solid var(--w-rule);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 40px);
}
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.contact-form .form-field { margin-bottom: var(--s-4); }
.contact-form label { display: block; font-family: var(--w-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--w-ink-2); margin-bottom: var(--s-2); }
.contact-form .input-w { border-radius: var(--r-md); }
.contact-options {
  display: grid; gap: var(--s-5);
}
.contact-option {
  padding: var(--s-6);
  background: var(--w-bg-2);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.contact-option .label-w { color: var(--w-clay-deep); }
.contact-option h3 { font-family: var(--w-serif); font-size: clamp(22px, 2vw, 28px); margin: 0; }

/* =============================================================================
 * 24. TAG / AUTHOR / ERROR / PAGE
 * =============================================================================*/
.tag-hero, .author-hero {
  padding: clamp(48px, 7vw, 80px) var(--page-x);
  border-bottom: 1px solid var(--w-rule);
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}
.tag-hero h1, .author-hero h1 { font-size: clamp(40px, 7vw, 92px); line-height: 0.96; margin: var(--s-5) 0 0; }
.author-hero-avatar {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--w-clay-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--w-serif); font-size: 56px; color: var(--w-clay-deep);
  overflow: hidden;
  margin-bottom: var(--s-5);
}
.author-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-hero-meta { display: flex; gap: var(--s-5); margin-top: var(--s-6); font-family: var(--w-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--w-ink-mute); text-transform: uppercase; }
.author-hero-bio { color: var(--w-ink-2); margin-top: var(--s-5); max-width: 56ch; line-height: 1.55; }

.error-page {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--section-y) var(--page-x);
  text-align: center;
  gap: var(--s-6);
}
.error-page h1 { font-family: var(--w-serif); font-size: clamp(64px, 12vw, 168px); line-height: 0.9; letter-spacing: -0.028em; }
.error-page h1 em { font-style: italic; color: var(--w-clay-deep); }

/* Generic page (page.hbs without a custom template) */
.page-generic {
  padding: clamp(56px, 8vw, 96px) var(--page-x);
  max-width: 880px;
  margin: 0 auto;
}
.page-generic h1 { font-size: clamp(40px, 6vw, 80px); line-height: 0.98; margin: var(--s-4) 0 var(--s-7); }

/* =============================================================================
 * 25. READING PROGRESS BAR
 * =============================================================================*/
.reading-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: var(--w-clay);
  z-index: var(--z-progress);
  transition: width 0.05s linear;
  pointer-events: none;
}

/* =============================================================================
 * 26. SHARE BUTTONS
 * =============================================================================*/
.share-buttons {
  display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap;
  margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--w-rule);
}
.share-buttons .label-w { margin-right: var(--s-3); }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--w-rule);
  color: var(--w-ink-2);
  transition: background .15s, color .15s, border-color .15s;
}
.share-btn:hover { background: var(--w-ink); color: var(--w-bg); border-color: var(--w-ink); }
.share-btn.copy-link.is-copied { background: var(--w-clay); color: #fff; border-color: var(--w-clay); }

/* Sticky variant on large screens */
.share-sticky {
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: var(--s-2);
}

/* =============================================================================
 * 27. COMMENTS (Ghost native)
 * =============================================================================*/
.comments-section {
  padding: clamp(48px, 6vw, 72px) var(--page-x);
  background: var(--w-bg-2);
  border-top: 1px solid var(--w-rule);
}
.comments-section-inner { max-width: 880px; margin: 0 auto; }
.comments-section h2 {
  font-family: var(--w-serif); font-size: clamp(28px, 4vw, 48px);
  margin: 0 0 var(--s-6);
}
.comments-section h2 em { font-style: italic; color: var(--w-clay-deep); }

/* =============================================================================
 * 28. MEMBER PORTAL & SUBSCRIBE
 * =============================================================================*/
.access-gate {
  margin: var(--s-9) auto;
  padding: clamp(32px, 4vw, 56px);
  max-width: 720px;
  background: var(--w-clay-tint);
  border: 1px solid var(--w-clay-soft);
  border-radius: var(--r-lg);
  text-align: center;
}
.access-gate .label-w { color: var(--w-clay-deep); }
.access-gate h3 { font-family: var(--w-serif); font-size: clamp(28px, 3vw, 40px); margin: var(--s-4) 0 var(--s-3); }
.access-gate p { color: var(--w-ink-2); margin-bottom: var(--s-6); }
.access-gate .actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

.member-account-page {
  padding: clamp(48px, 6vw, 80px) var(--page-x);
  max-width: 720px; margin: 0 auto;
}
.member-account-page h1 { font-family: var(--w-serif); font-size: clamp(40px, 6vw, 80px); line-height: 0.98; margin-bottom: var(--s-5); }
.member-account-page .member-card {
  margin-top: var(--s-7);
  padding: var(--s-7);
  background: var(--w-card);
  border: 1px solid var(--w-rule);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.member-account-page .member-card .row { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--w-rule); }
.member-account-page .member-card .row:last-child { border-bottom: 0; }
.member-account-page .member-card .row .label-w { color: var(--w-ink-2); }

/* =============================================================================
 * 29. SEARCH (Ghost Sodo Search)
 * =============================================================================*/
.sodo-search [data-popup-overlay] { background-color: rgba(28, 32, 48, 0.4) !important; }

/* =============================================================================
 * 30. MOBILE NAVIGATION DRAWER
 * =============================================================================*/
.nav-drawer {
  position: fixed; inset: 0;
  background: var(--w-bg);
  z-index: var(--z-drawer);
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
  padding: 24px var(--page-x);
  visibility: hidden;
}
.nav-drawer.is-open { transform: translateY(0); visibility: visible; }
.nav-drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--w-rule); }
.nav-drawer-links {
  display: flex; flex-direction: column;
  font-family: var(--w-serif);
  font-size: 36px;
  letter-spacing: -0.018em;
  margin-top: var(--s-7);
  gap: var(--s-4);
}
.nav-drawer-links a { padding: 8px 0; }
.nav-drawer-foot {
  margin-top: auto;
  padding-top: var(--s-6);
  border-top: 1px solid var(--w-rule);
  display: flex; flex-direction: column; gap: var(--s-3);
}

body.is-drawer-open { overflow: hidden; }

/* =============================================================================
 * 31. KOENIG CONTENT (post.hbs prose)
 * =============================================================================*/
.kg-content {
  font-family: var(--w-sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--w-ink-2);
}
.kg-content > * + * { margin-top: var(--s-6); }

.kg-content h2,
.kg-content h3,
.kg-content h4 {
  font-family: var(--w-serif);
  color: var(--w-ink);
  font-weight: 400;
  margin-top: var(--s-9);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.kg-content h2 { font-size: clamp(28px, 3.5vw, 44px); line-height: 1.05; }
.kg-content h3 { font-size: clamp(22px, 2.5vw, 32px); line-height: 1.1; }
.kg-content h4 { font-size: clamp(18px, 2vw, 24px); line-height: 1.15; }

.kg-content h2 em, .kg-content h3 em, .kg-content h4 em { font-style: italic; }

.kg-content p { margin: 0; }
.kg-content p strong { color: var(--w-ink); font-weight: 600; }
.kg-content p em { font-style: italic; }
.kg-content a {
  color: var(--w-clay-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.kg-content a:hover { color: var(--w-ink); }

.kg-content ul, .kg-content ol { padding-left: var(--s-6); }
.kg-content li { margin-top: var(--s-3); }
.kg-content li::marker { color: var(--w-clay-deep); }

.kg-content blockquote {
  margin: var(--s-9) 0;
  padding: 0 0 0 var(--s-7);
  border-left: 3px solid var(--w-clay);
  font-family: var(--w-serif);
  font-style: italic;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.25;
  color: var(--w-ink);
}
.kg-content blockquote p { margin: 0; }
.kg-content blockquote.kg-blockquote-alt {
  border: 0;
  text-align: center;
  padding: 0;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.15;
}

.kg-content hr {
  margin: var(--s-10) auto;
  width: 80px; height: 1px;
  background: var(--w-clay);
}

.kg-content pre {
  margin: var(--s-7) 0;
  padding: var(--s-6);
  background: var(--w-ink); color: var(--w-bg);
  border-radius: var(--r-md);
  font-family: var(--w-mono); font-size: 14px; line-height: 1.5;
  overflow-x: auto;
}
.kg-content code {
  font-family: var(--w-mono);
  font-size: 0.9em;
  background: var(--w-bg-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--w-clay-deep);
}
.kg-content pre code { background: transparent; padding: 0; color: inherit; }

/* Drop cap on first paragraph */
.kg-content.has-drop-cap > p:first-of-type::first-letter {
  font-family: var(--w-serif);
  float: left;
  font-size: 4.4em;
  line-height: 0.86;
  margin: 0.05em 0.12em 0 0;
  color: var(--w-clay-deep);
}

/* Koenig image cards */
.kg-image-card { margin: var(--s-9) 0; }
.kg-image-card .kg-image { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: var(--r-md); }
.kg-image-card.kg-width-wide .kg-image {
  max-width: min(1200px, 100vw - 2 * var(--page-x));
  width: 100%;
}
.kg-image-card.kg-width-full .kg-image {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0;
  max-width: none;
}
.kg-image-card figcaption {
  font-family: var(--w-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--w-ink-mute);
  text-align: center;
  margin-top: var(--s-4);
}

/* Koenig gallery */
.kg-gallery-card { margin: var(--s-9) 0; }
.kg-gallery-container { display: grid; gap: var(--s-3); }
.kg-gallery-row { display: grid; gap: var(--s-3); }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); }

/* Koenig bookmark */
.kg-bookmark-card { margin: var(--s-7) 0; }
.kg-bookmark-container {
  display: flex;
  background: var(--w-card);
  border: 1px solid var(--w-rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
}
.kg-bookmark-container:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(35,28,18,0.14); }
.kg-bookmark-content { padding: var(--s-6); flex: 1; display: flex; flex-direction: column; }
.kg-bookmark-title { font-family: var(--w-serif); font-size: 22px; line-height: 1.15; margin-bottom: var(--s-2); }
.kg-bookmark-description { font-size: 14px; color: var(--w-ink-2); line-height: 1.5; flex: 1; }
.kg-bookmark-metadata { font-family: var(--w-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--w-ink-mute); margin-top: var(--s-4); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.kg-bookmark-metadata .kg-bookmark-icon { width: 16px; height: 16px; }
.kg-bookmark-author { color: var(--w-ink-2); font-weight: 500; }
.kg-bookmark-author::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin-right: var(--s-2); vertical-align: middle; opacity: 0.4; }
.kg-bookmark-publisher { color: var(--w-clay-deep); }
.kg-bookmark-publisher::before { content: "·"; margin-right: var(--s-2); opacity: 0.5; }
.kg-bookmark-thumbnail { width: 200px; flex-shrink: 0; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

/* Koenig embed */
.kg-embed-card { margin: var(--s-9) 0; }
.kg-embed-card iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r-md); }

/* Koenig button card */
.kg-button-card {
  display: flex; justify-content: center;
  margin: var(--s-7) 0;
}
.kg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--w-sans); font-weight: 500; font-size: 14px;
  padding: 14px 22px; border-radius: var(--r-pill);
  background: var(--w-ink); color: var(--w-bg);
  text-decoration: none;
  transition: opacity .15s;
}
.kg-btn:hover { opacity: 0.9; color: var(--w-bg); }
.kg-btn-accent { background: var(--w-clay); }

/* Koenig callout */
.kg-callout-card {
  margin: var(--s-7) 0;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--w-rule);
  display: flex; gap: var(--s-4);
  align-items: flex-start;
}
.kg-callout-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }
.kg-callout-text { color: var(--w-ink-2); }
.kg-callout-card-grey   { background: var(--w-bg-2); }
.kg-callout-card-white  { background: var(--w-card); }
.kg-callout-card-blue   { background: var(--w-slate-tint); border-color: var(--w-slate-tint); }
.kg-callout-card-green  { background: #E8F1E2; border-color: #D1E3C8; }
.kg-callout-card-yellow { background: #FAF1D9; border-color: #F0E0BB; }
.kg-callout-card-red    { background: #F6E1D9; border-color: #ECC6B7; }
.kg-callout-card-pink   { background: var(--w-clay-tint); border-color: var(--w-clay-soft); }
.kg-callout-card-purple { background: #ECE5F2; border-color: #DBD0E6; }
.kg-callout-card-accent { background: var(--w-clay-tint); border-color: var(--w-clay-soft); color: var(--w-clay-deep); }

/* Koenig toggle */
.kg-toggle-card {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  background: var(--w-card);
  border: 1px solid var(--w-rule);
  border-radius: var(--r-lg);
}
.kg-toggle-heading {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--w-serif); font-size: 20px;
  cursor: pointer;
}
.kg-toggle-content { margin-top: var(--s-4); display: none; color: var(--w-ink-2); }
.kg-toggle-card.is-open .kg-toggle-content { display: block; }
.kg-toggle-card-icon { transition: transform .2s; }
.kg-toggle-card.is-open .kg-toggle-card-icon { transform: rotate(90deg); }

/* Koenig file card */
.kg-file-card {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  background: var(--w-card);
  border: 1px solid var(--w-rule);
  border-radius: var(--r-lg);
  display: flex; align-items: center; gap: var(--s-4);
}
.kg-file-card-icon { width: 40px; height: 40px; background: var(--w-clay-tint); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--w-clay-deep); flex-shrink: 0; }
.kg-file-card-contents { flex: 1; }
.kg-file-card-title { font-family: var(--w-serif); font-size: 18px; margin: 0; }
.kg-file-card-caption { font-size: 13px; color: var(--w-ink-mute); margin-top: 2px; }

/* Koenig product card */
.kg-product-card {
  margin: var(--s-7) 0;
  padding: var(--s-6);
  background: var(--w-card);
  border: 1px solid var(--w-rule);
  border-radius: var(--r-lg);
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--s-6);
  align-items: start;
}
.kg-product-card-image img { border-radius: var(--r-md); }
.kg-product-card-title { font-family: var(--w-serif); font-size: 24px; margin: 0 0 var(--s-3); }
.kg-product-card-rating { display: flex; gap: 2px; margin-bottom: var(--s-3); }
.kg-product-card-rating-active { color: var(--w-clay); }
.kg-product-card-button { margin-top: var(--s-4); }

/* Koenig header card */
.kg-header-card {
  margin: var(--s-9) 0;
  padding: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 48px);
  background: var(--w-bg-2);
  border-radius: var(--r-lg);
  text-align: center;
}
.kg-header-card h2 { font-family: var(--w-serif); font-size: clamp(36px, 6vw, 64px); line-height: 1; margin: 0; letter-spacing: -0.018em; }
.kg-header-card .kg-header-card-subheader { margin-top: var(--s-4); color: var(--w-ink-2); }

/* =============================================================================
 * 32. RESPONSIVE
 * =============================================================================*/
@media (max-width: 1100px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-hero-right { min-height: 380px; }
  .home-bottom { grid-template-columns: 1fr 1fr; }
  .archive-featured { grid-template-columns: 1fr; }
  .archive-grid, .tools-grid-body, .atlas-spreads-grid, .atlas-chapters-grid, .atlas-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .about-pillars { grid-template-columns: repeat(2, 1fr); }
  .post-body-grid { grid-template-columns: 1fr; }
  .post-aside { position: static; }
  .atlas-hero-grid, .atlas-cta, .about-hero, .contact-hero, .contact-grid, .tools-header, .tag-hero, .author-hero { grid-template-columns: 1fr; }
  .tools-feature-card { grid-template-columns: 1fr; }
  .tools-feature-card .right { min-height: 360px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .site-nav, .site-header-actions > .nav-cta, .site-header-actions > .nav-member { display: none; }
  .nav-toggle { display: inline-flex; }
  .masthead-bar { font-size: 9.5px; gap: var(--s-3); padding: 10px var(--page-x); }
  .masthead-bar > div:nth-child(2) { display: none; }
  .home-hero { padding-top: clamp(28px, 5vw, 48px); }
  .home-hero-right { min-height: 320px; }
  .home-bottom { grid-template-columns: 1fr; }
  .archive-grid, .tools-grid-body, .atlas-spreads-grid, .atlas-chapters-grid, .atlas-testimonials-grid { grid-template-columns: 1fr; }
  .about-pillars { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .newsletter-inline { grid-template-columns: 1fr; }
  .newsletter-clay { grid-template-columns: 1fr; }
  .newsletter-clay .newsletter-form { width: 100%; }
  .newsletter-form .form-row { flex-direction: column; }
  .post-cover-cards { right: 16px; }
  .post-meta { gap: var(--s-3); font-size: 12px; }
  .home-feature-card { flex-direction: column; }
  .home-feature-card .feat-img { width: 100%; height: 200px; border-right: 0; border-bottom: 1px solid var(--w-rule); }
  .atlas-meta-strip { grid-template-columns: repeat(2, 1fr); }
  .tools-feature-card h2 { font-size: clamp(32px, 7vw, 48px); }
  .archive-featured-cover { min-height: 280px; }
  .archive-featured-cover .cover-img { inset: 0; }
  .archive-featured-cover .cover-overlay-img { display: none; }
  .post-cover-cards { display: none; }
  .home-hero-spread { transform: rotate(4deg) scale(0.65); right: -8%; top: 0; }
  .home-hero-sheet { transform: rotate(-7deg) scale(0.7); left: -2%; bottom: 8%; }
  .home-hero-seal { right: 0; top: -8px; transform: rotate(-8deg) scale(0.85); }
}

/* =============================================================================
 * 33. PRINT
 * =============================================================================*/
@media print {
  .site-header, .masthead-bar, .marquee, .site-footer,
  .reading-progress, .share-buttons, .comments-section,
  .newsletter-inline, .newsletter-clay, .newsletter-ink, .newsletter-sidebar,
  .nav-drawer, .post-aside, .related-tool, .access-gate {
    display: none !important;
  }
  body { background: #fff; color: #000; font-size: 12pt; line-height: 1.5; }
  .post-title { font-size: 28pt; }
  .kg-content { font-size: 11.5pt; line-height: 1.55; color: #111; }
  .post-body-grid { grid-template-columns: 1fr; gap: 0; }
  a { color: #000; text-decoration: underline; }
  .container, .container-narrow, .post-header, .post-body { padding-left: 0; padding-right: 0; max-width: none; }
}

/* =============================================================================
 * 34. ACCESSIBILITY / UTILITY
 * =============================================================================*/
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: absolute; top: -100px; left: 8px;
  background: var(--w-ink); color: var(--w-bg);
  padding: var(--s-3) var(--s-5);
  font-family: var(--w-mono); font-size: 12px;
  border-radius: var(--r-pill);
  z-index: var(--z-modal);
  transition: top .15s;
}
.skip-link:focus { top: 8px; }

.no-wrap { white-space: nowrap; }
.text-center { text-align: center; }
.flex-1 { flex: 1; }
.hidden { display: none !important; }

/* ============================================================
 * 35. NEW FEATURES (v1.1) — post nav, recs, multi-author, newsletter
 * ============================================================ */

/* Post navigation: prev / next cards under post body */
.post-nav {
  max-width: var(--container);
  margin: clamp(48px, 6vw, 80px) auto;
  padding: 0 var(--page-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.post-nav-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-7);
  background: var(--w-bg-2);
  border: 1px solid var(--w-rule);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, background .2s ease;
  min-height: 140px;
}
.post-nav-card:hover {
  background: var(--w-card);
  transform: translateY(-2px);
}
.post-nav-card .label-w { color: var(--w-clay-deep); }
.post-nav-card h3 {
  font-family: var(--w-serif);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}
.post-nav-card .post-nav-tag {
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--w-ink-mute);
  margin-top: auto;
}
.post-nav-next {
  text-align: right;
  align-items: flex-end;
}
.post-nav .post-nav-card:only-child {
  grid-column: 1 / -1;
  max-width: 540px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-next { text-align: left; align-items: flex-start; }
}

/* Multi-author display */
.post-meta-authors {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.post-meta-author-sep {
  font-family: var(--w-serif);
  font-style: italic;
  color: var(--w-ink-mute);
  font-size: 14px;
}

/* Footer recommendations grid */
.footer-recommendations {
  padding: var(--s-9) var(--page-x);
  border-bottom: 1px solid var(--w-rule);
}
.recs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  max-width: var(--container);
  margin: 0 auto;
}
.rec-card {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--w-card);
  border: 1px solid var(--w-rule);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, border-color .2s ease;
  align-items: flex-start;
}
.rec-card:hover {
  transform: translateY(-2px);
  border-color: var(--w-clay-soft);
}
.rec-favicon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: cover;
}
.rec-body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.rec-title {
  font-family: var(--w-serif);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.rec-desc {
  font-size: 13px;
  color: var(--w-ink-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rec-reason {
  font-family: var(--w-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--w-clay-deep);
  margin-top: var(--s-2);
  line-height: 1.4;
}
@media (max-width: 1100px) {
  .recs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .recs-grid { grid-template-columns: 1fr; }
}

/* Newsletter custom template */
.post-newsletter { max-width: 740px; margin: 0 auto; padding: 0 var(--page-x); }
.newsletter-post-masthead {
  padding: clamp(48px, 6vw, 80px) 0 var(--s-7);
  border-bottom: 1px solid var(--w-rule);
  margin-bottom: var(--s-9);
}
.newsletter-masthead-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
  flex-wrap: wrap;
}
.newsletter-post-title {
  font-family: var(--w-serif);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}
.newsletter-post-dek {
  font-family: var(--w-serif);
  font-size: clamp(18px, 2vw, 22px);
  font-style: italic;
  line-height: 1.4;
  color: var(--w-ink-2);
  margin: 0;
  max-width: 56ch;
}
.newsletter-masthead-rule {
  height: 4px;
  width: 64px;
  background: var(--w-clay);
  margin-top: var(--s-6);
}
.newsletter-post-cover {
  margin: 0 0 var(--s-9);
}
.newsletter-post-cover img {
  width: 100%;
  border-radius: var(--r-sm);
  display: block;
}
.newsletter-post-cover figcaption {
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-ink-mute);
  margin-top: var(--s-3);
  text-align: center;
}
.newsletter-post-body { margin-bottom: var(--s-9); }

/* Author signoff */
.newsletter-signoff {
  margin-top: var(--s-9);
  padding-top: var(--s-7);
  border-top: 1px solid var(--w-rule);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.newsletter-signoff > em {
  font-family: var(--w-serif);
  font-style: italic;
  font-size: 32px;
  color: var(--w-clay);
  line-height: 1;
}
.signoff-author {
  display: flex;
  gap: var(--s-4);
  align-items: center;
}
.signoff-author img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.signoff-name {
  font-family: var(--w-serif);
  font-size: 20px;
  font-style: italic;
  letter-spacing: -0.01em;
}
.signoff-bio {
  font-size: 13px;
  color: var(--w-ink-2);
  margin-top: 2px;
}

/* Page cover (page.hbs feature_image) */
.page-cover {
  margin: var(--s-7) 0;
}
.page-cover img {
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  display: block;
}
.page-cover figcaption {
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-ink-mute);
  margin-top: var(--s-3);
  text-align: center;
}

/* Post cover caption */
.post-cover-caption {
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-ink-mute);
  margin-top: var(--s-3);
  text-align: center;
}

/* Print stylesheet additions */
@media print {
  .post-nav, .footer-recommendations, .newsletter-signoff,
  .post-aside, .share-buttons, .comments-section { display: none !important; }
}

/* ============================================================
 * 36. MOBILE DRAWER (v1.1.3) — critical hide-by-default
 * ============================================================ */

/* Drawer is hidden by default everywhere. .is-open class reveals it. */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--w-bg);
  padding: var(--s-6) var(--page-x);
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  /* Hidden by default — opacity + transform + pointer-events */
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.mobile-nav-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-nav-close {
  appearance: none;
  border: 1px solid var(--w-rule);
  background: var(--w-card);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--w-ink);
}
.mobile-nav-close:hover { background: var(--w-bg-2); }

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.mobile-nav-list a {
  font-family: var(--w-serif);
  font-size: 28px;
  letter-spacing: -0.015em;
  color: var(--w-ink);
  text-decoration: none;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--w-rule);
}
.mobile-nav-list a:hover { color: var(--w-clay-deep); }

.mobile-nav-foot {
  margin-top: auto;
  display: flex;
  gap: var(--s-3);
  padding-bottom: var(--s-7);
}
.mobile-nav-foot .btn-w { flex: 1; justify-content: center; }

/* Lock scroll on body when drawer is open */
body.is-drawer-open { overflow: hidden; }

/* Desktop: nav-toggle is hidden — only shown on mobile via media query below */
.nav-toggle { display: none; }

/* Mobile: show nav-toggle (already exists at line 1923, this enforces it) */
@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  /* Hide desktop nav and inline member buttons on mobile */
  .site-nav,
  .site-header-actions .signin-link,
  .site-header-actions .btn-w.sm:not(.nav-toggle) { display: none; }
}