/* ============================================================
   Communion — v1 "Dark Editorial Cinematic"
   Shared design system. Used by index, post, tag, page.
   ============================================================ */

:root{
  --ink:#0C1524;
  --ink-2:#142238;
  --ink-3:#1E2F4A;
  --bone:#FDFCF9;
  --parchment:#F6F1E8;
  --parchment-2:#EFE8D9;
  --copper:#B88856;
  --copper-bright:#D4A574;
  --copper-deep:#8F6A40;
  --slate:#4A5568;
  --slate-soft:#8B95A3;
  --rule:#E5DFD3;
  --rule-dark:rgba(255,255,255,.08);
  --rule-mid:rgba(255,255,255,.14);

  --display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ui:var(--body);
  --accent-script:"Frank Ruhl Libre", var(--display);

  --gh-font-heading:var(--display);
  --gh-font-body:var(--body);

  --wrap:1200px;
  --wrap-wide:1360px;
  --wrap-read:740px;
  --wrap-post:1240px; /* widened so the middle 1fr column can reach --wrap-read at desktop */

  --radius:2px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-snap:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* Reserve space for the scrollbar so opening drawer/search (which sets body overflow:hidden)
     doesn't horizontally shift the layout. Falls back gracefully on older browsers. */
  scrollbar-gutter:stable;
}
html,body{margin:0;padding:0}
body{
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  color:#111;
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}

/* Skip-to-content link — WCAG 2.1 Level A. Hidden off-screen until keyboard-focused. */
.skip-to-content{
  position:absolute;
  top:-100px;left:16px;
  z-index:1000;
  background:var(--copper);
  color:var(--ink);
  padding:12px 20px;
  font-family:var(--body);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border-radius:var(--radius);
  transition:top .2s var(--ease);
}
.skip-to-content:focus{
  top:16px;
  outline:2px solid var(--ink);
  outline-offset:2px;
}

/* Global :focus-visible indicator — copper ring on all interactive elements.
   :focus-visible (not :focus) ensures the ring shows for keyboard navigation
   only, not for mouse clicks. Dark-cover surfaces use copper-bright for contrast.
   No border-radius set: each element keeps its own corner radius. */
*:focus-visible{
  outline:2px solid var(--copper);
  outline-offset:3px;
}
.nav *:focus-visible,
.drawer *:focus-visible,
.search-overlay *:focus-visible,
.hero *:focus-visible,
.featured *:focus-visible,
.signature *:focus-visible,
.post-cover *:focus-visible,
.tag-hero *:focus-visible,
.start-hero *:focus-visible,
.members-hero *:focus-visible,
.contact-cover *:focus-visible,
.footer *:focus-visible{
  outline-color:var(--copper-bright);
}
/* Disable the default ring on inputs that already have a custom focus border */
.search-input-wrap input:focus-visible,
.sub-form input:focus-visible,
.contact-row input:focus-visible,
.contact-row textarea:focus-visible{outline:none}

::selection{background:var(--copper);color:var(--ink)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.wrap-wide{max-width:var(--wrap-wide);margin:0 auto;padding:0 32px}
.wrap-read{max-width:var(--wrap-read);margin:0 auto;padding:0 24px}
.wrap-post{max-width:var(--wrap-post);margin:0 auto;padding:0 32px}

/* Utility type */
.eyebrow{
  font-family:var(--body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--copper);
}
.eyebrow-light{color:var(--copper-bright)}
.eyebrow.has-line{display:inline-flex;align-items:center;gap:10px}
.eyebrow.has-line::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.kicker{
  font-family:var(--display);
  font-style:italic;
  font-size:18px;
  color:var(--slate);
  font-weight:400;
}

/* Reveal-on-scroll */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s var(--ease-snap), transform .8s var(--ease-snap);
}
.reveal.in{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}

/* ============================================================
   Sticky glass nav
   ============================================================ */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  padding:16px 0;
  transition:background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease);
  background:linear-gradient(to bottom, rgba(12,21,36,.55), rgba(12,21,36,0));
  backdrop-filter:blur(0);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(253,252,249,.92);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--rule);
  padding:12px 0;
}
.nav.on-light{
  background:rgba(253,252,249,.92);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--rule);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:var(--wrap-wide);
  margin:0 auto;
  padding:0 24px;
}
/* Centered nav variant — opt-in via Settings → Design → Customize → Navigation
   layout. Brand mark sits on its own row above the nav links; nav links centre
   themselves. Scoped to desktop (≥1001px) only: below that breakpoint the
   responsive .nav-links { display:none } rule + drawer take over, so the
   centred-stack would only push the burger out of place. */
@media (min-width: 1001px){
  [data-nav="centered"] .nav{position:relative}
  [data-nav="centered"] .nav-inner{
    flex-direction:column;
    gap:8px;
    padding-top:12px;
    padding-bottom:12px;
  }
  [data-nav="centered"] .nav-inner .brand{margin:0 auto}
  [data-nav="centered"] .nav-inner .nav-links{margin:0 auto;justify-content:center}
  [data-nav="centered"] .nav-inner .nav-actions{position:absolute;right:24px;top:14px}
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#fff;
  transition:color .3s;
}
.brand-mark{
  /* Typographic mark — the ◆ glyph rendered in the accent colour. Replaces the
     supply-your-own brandmark.png pattern: buyers can ship the theme as-is and
     get a clean diamond + site title, or override by uploading a logo via
     Ghost Admin → Settings → General → Publication identity (which makes
     {{@site.logo}} truthy and swaps in the .brand-logo <img> instead). */
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  font-size:32px;line-height:1;
  color:var(--copper);
  flex-shrink:0;
}
.footer-brand .brand{gap:14px}
.footer-brand .brand-mark{width:64px;height:64px;font-size:42px}
.brand-logo{
  height:80px;width:auto;
  display:block;
  flex-shrink:0;
}
.footer-brand .brand-logo{height:104px}
.brand-name{
  font-family:var(--display);
  font-weight:500;
  font-size:36px;
  letter-spacing:-.015em;
  line-height:1.02;
}
.footer-brand .brand-name{font-size:44px;white-space:nowrap}
.brand-name em{font-style:italic;font-weight:400}
.nav.scrolled .brand,
.nav.on-light .brand{color:var(--ink)}

.nav-links{
  display:flex;
  align-items:center;
  gap:32px;
  list-style:none;
  margin:0;padding:0;
  flex-wrap:nowrap;
}
/* Direct-child combinators (> li > a) deliberately stop the cascade at the
   top-level nav links. Without this, descendant `.nav-links a` matches every
   <a> inside the dropdown menu (which is structurally <ul.nav-dropdown-menu>
   nested inside .nav-links), polluting dropdown item colour + underline rules
   with the dark-nav-on-cover styling. Specificity battles between
   `.nav.scrolled .nav-links a` and `.nav-dropdown-menu a` then make hovered
   dropdown items render dark-on-dark on light-mode pages. */
.nav-links > li > a{
  font-size:17px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.005em;
  color:rgba(255,255,255,.85);
  text-decoration:none;
  transition:color .2s;
  position:relative;
  padding:4px 0;
  white-space:nowrap;
}
.nav-links > li > a:hover{color:#fff}
.nav-links > li > a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:1px;
  background:var(--copper);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav-links > li > a:hover::after{transform:scaleX(1)}
.nav.scrolled .nav-links > li > a,
.nav.on-light .nav-links > li > a{color:var(--ink)}

/* Topics dropdown — desktop nav. Shell is the toggle button styled like a nav link;
   menu is absolute-positioned, opacity/visibility-toggled for transition + a11y.
   The mobile drawer takes over at <=1000px (.nav-links is hidden — see breakpoint
   block below), so on real mobile this dropdown is never rendered. The
   max-width:899px hide-rule below is defensive in case someone changes the
   .nav-links breakpoint without updating this file. */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{
  /* font-size + line-height + padding MUST match .nav-links a exactly so the
     button renders at the same height as sibling <a> elements. <button> has
     different intrinsic line-height than <a> in most browsers, which is why
     "Topics" sat 1-2px higher than its neighbours before this fix. */
  background:none;border:0;cursor:pointer;padding:4px 0;margin:0;
  font:inherit;
  font-size:17px;font-weight:500;line-height:1.4;letter-spacing:.005em;
  color:rgba(255,255,255,.85);
  display:inline-flex;align-items:center;gap:6px;
  transition:color .2s;
}
.nav-dropdown-toggle:hover{color:#fff}
.nav.scrolled .nav-dropdown-toggle,
.nav.on-light .nav-dropdown-toggle{color:var(--ink)}
.nav-dropdown-caret{width:14px;height:14px;transition:transform .2s var(--ease);flex-shrink:0}
.nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-caret{transform:rotate(180deg)}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(-4px);
  min-width:240px;padding:8px;margin:0;
  list-style:none;
  background:var(--bone);
  border:1px solid var(--rule);
  border-radius:14px;
  box-shadow:0 16px 40px rgba(12,21,36,.14);
  opacity:0;visibility:hidden;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
  z-index:50;
}
.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.nav-dropdown-menu li{margin:0}
.nav-dropdown-menu a{
  display:block;padding:10px 14px;border-radius:10px;
  font-size:14px;font-weight:500;
  color:var(--ink);text-decoration:none;
  transition:background .15s,color .15s;
}
.nav-dropdown-menu a::after{display:none}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible{background:var(--ink);color:#fff}
.nav-dropdown-all{margin-top:4px;padding-top:6px;border-top:1px solid var(--rule)}
.nav-dropdown-all a{color:var(--copper-deep);font-size:13px}
@media (max-width:899px){
  .nav-dropdown{display:none}
}

/* Drawer Topics — vertical inline list under the parent label */
.drawer-topics{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer-topics-label{
  display:block;font-family:var(--display);font-size:32px;line-height:1.2;
  letter-spacing:-.015em;color:#fff;font-weight:400;margin-bottom:8px;
}
.drawer-topics-list{list-style:none;margin:0 0 0 16px;padding:0}
.drawer-topics-list a{
  display:block;font-family:var(--body);font-size:15px;font-weight:500;
  color:rgba(255,255,255,.78);text-decoration:none;
  padding:8px 0;border-bottom:0;
}
.drawer-topics-list a:hover{color:#fff}
.drawer-topics-all a{color:var(--copper-bright)}

.nav-actions{display:flex;align-items:center;gap:16px}
.nav-search{
  background:transparent;
  border:none;
  color:rgba(255,255,255,.85);
  cursor:pointer;
  padding:12px;
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:color .2s;
  border-radius:var(--radius);
}
.nav-search:hover{color:#fff}
.nav.scrolled .nav-search,
.nav.on-light .nav-search{color:var(--ink)}
.nav-search svg{width:18px;height:18px}

.nav-cta{
  font-family:var(--body);
  font-size:13px;
  font-weight:600;
  letter-spacing:.03em;
  padding:10px 20px;
  background:var(--copper);
  color:var(--ink);
  border:1px solid var(--copper);
  cursor:pointer;
  text-decoration:none;
  border-radius:var(--radius);
  transition:background .2s, color .2s, border-color .2s;
}
.nav-cta:hover{background:var(--copper-bright);border-color:var(--copper-bright)}

.nav-burger{
  display:none;
  background:transparent;
  border:none;
  padding:12px;
  min-width:44px;
  min-height:44px;
  color:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.nav.scrolled .nav-burger,
.nav.on-light .nav-burger{color:var(--ink)}
.nav-burger svg{width:22px;height:22px}

/* Mobile drawer
   hardening — iOS WebKit was rendering the drawer INLINE on the
   page (drawer-head brand + drawer-links + drawer-foot Subscribe button
   all leaking into normal flow at the top of the homepage). Three
   defensive changes:
     1. Explicit top/right/bottom/left longhand instead of `inset:0`
        shorthand — older iOS WebKit silently drops `inset` (CSS Logical
        Properties Level 1), which strips the four anchor points and
        causes position:fixed to render at 0,0 with intrinsic size only.
     2. translate3d(...) instead of translateY(...) — forces a GPU
        compositing layer on iOS so the transform actually applies. iOS
        WebKit sometimes ignores plain translateY() on overflow:hidden
        ancestors.
     3. visibility:hidden + pointer-events:none on the closed state —
        belt-and-braces guard so even if BOTH transform fixes above fail
        on some legacy iOS, the drawer still cannot render or capture
        clicks. .open class adds visibility:visible synchronously.
   The transition rule lists `visibility 0s linear .35s` so visibility
   only flips AFTER the slide-out animation completes (open→close case). */
.drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:60;
  background:var(--ink);
  padding:32px;
  transform:translate3d(0,-100%,0);
  transition:transform .35s var(--ease), visibility 0s linear .35s;
  visibility:hidden;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  /* iOS Safari fix: when drawer content (especially the Topics dropdown
     expanded with 5+ tag links) is taller than the viewport, OR Safari's
     dynamic toolbar shrinks the viewport mid-scroll, content past the
     bottom is unreachable. overflow-y:auto makes the drawer itself
     scrollable; -webkit-overflow-scrolling:touch enables momentum on
     older iOS; overscroll-behavior:contain stops scroll-chain bleed
     into the underlying body. */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.drawer.open{
  transform:translate3d(0,0,0);
  visibility:visible;
  pointer-events:auto;
  transition:transform .35s var(--ease), visibility 0s;
}
.drawer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:48px;
}
.drawer-close{
  background:transparent;border:none;color:#fff;cursor:pointer;padding:8px;
}
.drawer-close svg{width:22px;height:22px}
.drawer .brand{color:#fff}
.drawer-links{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:4px;
}
.drawer-links a{
  display:block;
  font-family:var(--display);
  font-size:32px;
  line-height:1.2;
  letter-spacing:-.015em;
  color:#fff;
  text-decoration:none;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-weight:400;
}
.drawer-links a em{font-style:italic;color:var(--copper-bright)}
.drawer-foot{margin-top:auto;padding-top:32px}
.drawer-foot .btn{width:100%;justify-content:center}

/* ============================================================
   Search overlay
   ============================================================ */
.search-overlay{
  position:fixed;
  inset:0;
  z-index:70;
  background:rgba(12,21,36,.96);
  backdrop-filter:blur(20px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:14vh 32px 32px;
}
.search-overlay.open{opacity:1;pointer-events:auto}
.search-inner{max-width:640px;width:100%}
.search-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--copper-bright);
  margin-bottom:16px;
}
.search-input-wrap{
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.2);
  transition:border-color .2s;
}
.search-input-wrap:focus-within{border-bottom-color:var(--copper)}
.search-input-wrap input{
  width:100%;
  background:transparent;
  border:none;
  font-family:var(--display);
  font-size:32px;
  font-weight:300;
  letter-spacing:-.015em;
  color:#fff;
  padding:12px 40px 16px 0;
  outline:none;
}
.search-input-wrap input::placeholder{color:rgba(255,255,255,.35);font-style:italic}
.search-close{
  position:absolute;
  right:0;top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  color:rgba(255,255,255,.6);
  cursor:pointer;
  padding:8px;
}
.search-close:hover{color:#fff}
.search-close svg{width:20px;height:20px}
.search-hint{
  margin-top:24px;
  font-size:13px;
  color:rgba(255,255,255,.5);
  font-style:italic;
  font-family:var(--display);
}
.search-suggestions{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.search-chip{
  display:inline-flex;
  padding:8px 16px;
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.75);
  border-radius:999px;
  font-size:13px;
  text-decoration:none;
  transition:border-color .2s, color .2s, background .2s;
}
.search-chip:hover{
  border-color:var(--copper);
  color:#fff;
  background:rgba(184,136,86,.15);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  font-family:var(--body);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  padding:16px 28px;
  border-radius:var(--radius);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:transform .2s var(--ease), background .2s, color .2s, border-color .2s;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:10px 18px;font-size:13px}
.btn-primary{
  background:var(--copper);
  color:var(--ink);
  border-color:var(--copper);
}
.btn-primary:hover{background:var(--copper-bright);border-color:var(--copper-bright)}
.btn-ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.25);
}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn-outline-dark{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline-dark:hover{background:var(--ink);color:#fff}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* Text link — subtle underline motion */
.link{
  font-family:var(--body);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
  position:relative;
  padding-bottom:2px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.link::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(1);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.link:hover::after{transform:scaleX(.6);transform-origin:right}
.link-copper{color:var(--copper)}
.link-copper:hover{color:var(--copper-deep)}
.link-light{color:var(--copper-bright)}

/* ============================================================
   Hero — dark cinematic
   ============================================================ */
.hero{
  position:relative;
  min-height:auto;
  background:var(--ink);
  color:#fff;
  /* Nav is position:fixed (~100px tall after logo bump). Top padding clears the nav
     and provides editorial breathing room above the eyebrow per NYT/Atlantic patterns. */
  padding:160px 0 96px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:-20%;
  left:50%;
  transform:translateX(-50%);
  width:1200px;
  height:1200px;
  background:radial-gradient(circle at center, rgba(184,136,86,.14) 0%, rgba(184,136,86,.06) 30%, transparent 60%);
  pointer-events:none;
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.6;
  pointer-events:none;
  z-index:0;
}
.hero-inner{
  position:relative;z-index:1;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:1.35fr .9fr;
  gap:80px;
  align-items:center;
}
.hero-left{max-width:720px}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--copper-bright);
  margin-bottom:28px;
}
.hero-eyebrow::before{content:"";width:28px;height:1px;background:var(--copper)}
.hero-accent{
  font-family:var(--accent-script);
  font-weight:400;
  font-size:22px;
  color:var(--copper);
  margin:0 0 20px;
  letter-spacing:.04em;
  opacity:.85;
}
.hero h1{
  font-family:var(--display);
  font-size:clamp(48px, 7.2vw, 104px);
  line-height:.98;
  letter-spacing:-0.03em;
  font-weight:400;
  word-break:break-word;
  hyphens:auto;
  margin:0 0 28px;
  color:#fff;
  font-variation-settings:"opsz" 144;
}
.hero h1 em{font-style:italic;font-weight:300;color:var(--copper-bright)}
.hero-sub{
  font-family:var(--display);
  font-size:clamp(18px, 1.7vw, 22px);
  line-height:1.5;
  color:rgba(255,255,255,.76);
  max-width:560px;
  margin:0 0 44px;
  font-weight:300;
  font-style:italic;
}
.hero-ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* Hero card — modeled on the Latest-grid essay-card pattern (image on top, meta + title below).
   Replaced the old .hero-plate editorial card (legacy CSS removed 2026-04-28). */
.hero-card-wrap{
  display:flex;
  flex-direction:column;
  max-width:420px;
  margin-left:auto;
  width:100%;
}
.hero-card-heading{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--ui);
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--copper-bright);
  margin:0 0 18px;
}
.hero-card-pulse{
  width:8px;height:8px;
  background:var(--copper-bright);
  border-radius:50%;
  flex-shrink:0;
  box-shadow:0 0 0 0 rgba(212,165,116,.6);
  animation:heroCardPulse 2.4s ease-out infinite;
}
.hero-card-heading-text{
  display:inline-block;
}
@keyframes heroCardPulse{
  0%{box-shadow:0 0 0 0 rgba(212,165,116,.55)}
  70%{box-shadow:0 0 0 10px rgba(212,165,116,0)}
  100%{box-shadow:0 0 0 0 rgba(212,165,116,0)}
}
@media (prefers-reduced-motion: reduce){
  .hero-card-pulse{animation:none}
}
.hero-card{
  position:relative;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:#fff;
  transition:transform .3s var(--ease);
}
.hero-card:hover{transform:translateY(-4px)}
.hero-card-cover{
  position:relative;
  aspect-ratio:4/5;
  background:linear-gradient(160deg, #1E2F4A 0%, #0C1524 100%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid rgba(255,255,255,.12);
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  border-radius:var(--radius);
}
.hero-card-cover::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(12,21,36,0) 0%, rgba(12,21,36,.35) 50%, rgba(12,21,36,.86) 100%);
  z-index:0;pointer-events:none;
}
.hero-card-cover-typographic{
  background:linear-gradient(160deg, #1E2F4A 0%, #0C1524 100%);
}
.hero-card-cover-typographic::before{display:none}
.hero-card-sigil{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--display);font-size:160px;
  color:var(--copper);opacity:.08;line-height:1;
  pointer-events:none;
}
.hero-card-cover-top{position:relative;z-index:1}
.hero-card-cover-top .eyebrow{
  display:inline-block;
  font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--copper-bright);
  margin-bottom:12px;
}
.hero-card-cover h4{
  font-family:var(--display);
  font-size:28px;line-height:1.1;
  letter-spacing:-.02em;color:#fff;font-weight:400;
  margin:0;
}
.hero-card-cover-foot{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.7);
}
.hero-card-lock{color:var(--copper-bright)}
.hero-card-meta{
  display:flex;justify-content:space-between;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:500;
  margin:18px 0 6px;
}
.hero-card-title{
  font-family:var(--display);
  font-size:18px;line-height:1.3;
  letter-spacing:-.01em;color:rgba(255,255,255,.92);
  font-weight:400;margin:0;
}

/* (Legacy .hero-plate / .plate-* styles removed 2026-04-28 — pass-1 audit
   confirmed zero templates emit those classes after the .hero-card rewrite.
   ~100 lines of dead CSS shipped to every page-load. Restore from git if
   the old plate ever needs reviving.) */

.scroll-ind{
  position:absolute;
  bottom:36px;left:50%;
  transform:translateX(-50%);
  font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.35);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  z-index:1;
}
.scroll-ind::after{
  content:"";
  width:1px;height:40px;
  background:linear-gradient(to bottom, var(--copper), transparent);
}

/* ============================================================
   Trust band
   ============================================================ */
.trust{
  background:var(--ink);
  color:rgba(255,255,255,.7);
  padding:28px 0;
  border-top:1px solid var(--rule-dark);
}
.trust-inner{
  display:flex;justify-content:center;align-items:center;
  gap:48px;flex-wrap:wrap;
  font-size:13px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;
}
.trust-item{display:flex;align-items:baseline;gap:10px}
.trust-num{
  font-family:var(--display);
  font-size:28px;
  font-weight:400;
  color:var(--copper-bright);
  letter-spacing:-.02em;
}

/* ============================================================
   Section heads
   ============================================================ */
.section-head{text-align:center;margin-bottom:64px}
.section-head .eyebrow{display:block;margin-bottom:16px}
.section-head h2{
  font-family:var(--display);
  font-size:clamp(36px, 4.8vw, 60px);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 16px;
}
.section-head h2 em{font-style:italic;font-weight:300;color:var(--copper)}
.section-head p{
  font-family:var(--display);
  font-style:italic;
  font-size:20px;
  font-weight:300;
  color:var(--slate);
  max-width:580px;
  margin:0 auto;
  line-height:1.5;
}
.section-head-dark h2{color:#fff}
.section-head-dark p{color:rgba(255,255,255,.72)}
.section-head-dark h2 em{color:var(--copper-bright)}

/* ============================================================
   Start Here — guided reading band
   ============================================================ */
.start-here{
  padding:100px 0;
  background:var(--parchment);
  position:relative;
  overflow:hidden;
}
.start-here-inner{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:80px;
  align-items:center;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 32px;
}
.start-here-left .eyebrow{display:block;margin-bottom:18px}
.start-here-left h2{
  font-family:var(--display);
  font-size:clamp(34px, 4.2vw, 52px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 20px;
}
.start-here-left h2 em{font-style:italic;color:var(--copper)}
.start-here-left p{
  font-family:var(--display);
  font-size:19px;
  font-weight:300;
  line-height:1.65;
  font-style:italic;
  color:var(--slate);
  margin:0 0 32px;
}

.path-steps{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:0;
  counter-reset:step;
  background:var(--bone);
  border:1px solid var(--rule);
}
.path-step{
  counter-increment:step;
  padding:28px 32px 28px 88px;
  position:relative;
  border-bottom:1px solid var(--rule);
  transition:background .2s;
  text-decoration:none;
  color:var(--ink);
  display:block;
}
.path-step:last-child{border-bottom:none}
.path-step:hover{background:var(--parchment)}
.path-step::before{
  content:counter(step, upper-roman);
  position:absolute;
  left:32px;top:28px;
  font-family:var(--display);
  font-style:italic;
  font-size:28px;
  font-weight:300;
  color:var(--copper);
  line-height:1;
  min-width:36px;
}
.path-step h4{
  font-family:var(--display);
  font-size:22px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 6px;
}
.path-step h4 em{font-style:italic;font-weight:400}
.path-step p{
  font-size:14px;
  line-height:1.5;
  color:var(--slate);
  margin:0;
}
.path-step-arrow{
  position:absolute;
  right:28px;top:50%;
  transform:translateY(-50%);
  color:var(--slate-soft);
  transition:color .2s, transform .25s var(--ease);
}
.path-step:hover .path-step-arrow{color:var(--copper);transform:translate(4px,-50%)}

/* ============================================================
   Topic index
   ============================================================ */
.topics{padding:120px 0 100px;background:var(--bone)}
.topic-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.topic{
  padding:36px 28px;
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  text-decoration:none;
  color:var(--ink);
  display:block;
  position:relative;
  transition:background .3s;
  background:var(--bone);
  min-height:220px;
}
.topic:hover{background:var(--parchment)}
.topic-count{
  font-family:var(--display);
  font-size:48px;
  font-weight:300;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--copper);
  margin-bottom:12px;
  font-variation-settings:"opsz" 144;
}
.topic-count sup{
  font-size:11px;
  font-weight:600;
  vertical-align:top;
  margin-left:6px;
  letter-spacing:.16em;
  color:var(--slate);
  text-transform:uppercase;
  font-family:var(--body);
  top:16px;position:relative;
}
.topic-name{
  font-family:var(--display);
  font-size:22px;
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 6px;
}
.topic-dek{
  font-size:13px;
  line-height:1.5;
  color:var(--slate);
  margin:0;
}
.topic-arrow{
  position:absolute;
  top:28px;right:24px;
  font-size:14px;
  color:var(--slate-soft);
  transition:color .2s, transform .25s var(--ease);
}
.topic:hover .topic-arrow{color:var(--copper);transform:translate(4px,-4px)}

/* ============================================================
   Featured editorial cover
   ============================================================ */
.featured{
  padding:100px 0;
  background:var(--ink);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.featured::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.5;pointer-events:none;
}
.featured-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 32px;
}
.featured-left .eyebrow{color:var(--copper-bright);margin-bottom:24px;display:block}
.featured-left h3{
  font-family:var(--display);
  font-size:clamp(34px, 4.2vw, 56px);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.02em;
  color:#fff;margin:0 0 28px;
}
.featured-left h3 em{font-style:italic;font-weight:300;color:var(--copper-bright)}
.featured-left .excerpt{
  font-family:var(--display);
  font-style:italic;font-size:20px;line-height:1.55;font-weight:300;
  color:rgba(255,255,255,.78);margin:0 0 32px;
}
.featured-left .byline{
  font-size:13px;font-weight:500;letter-spacing:.06em;
  color:rgba(255,255,255,.55);margin:0 0 32px;
}
.featured-left .byline .lock{color:var(--copper-bright);margin-left:8px}

.featured-plate{
  position:relative;
  aspect-ratio:3/4;
  max-width:460px;
  margin:0 auto;
  background:
    linear-gradient(155deg, rgba(184,136,86,.25) 0%, transparent 50%),
    linear-gradient(180deg, #1E2F4A 0%, #0C1524 100%);
  border:1px solid rgba(255,255,255,.12);
  padding:48px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
.featured-plate::before{
  content:"◆";
  position:absolute;
  top:-30px;right:-20px;
  font-family:var(--display);
  font-size:340px;line-height:1;
  color:var(--copper);opacity:.06;
  font-weight:300;letter-spacing:-.04em;
  z-index:1;
}
/* Featured plate feature-image variant — Unsplash/uploaded image as bg, dark gradient for legibility */
.featured-plate-bg{
  position:absolute;inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  z-index:0;
}
.featured-plate-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(12,21,36,.55) 0%, rgba(12,21,36,.8) 55%, rgba(12,21,36,.94) 100%);
  z-index:1;
}
.featured-plate-img > *:not(.featured-plate-bg):not(.featured-plate-shade){position:relative;z-index:2}
.featured-plate-img::before{display:none}
.featured-plate-top{position:relative;z-index:1}
.featured-plate .eyebrow{color:var(--copper-bright);margin-bottom:14px;display:block}
.featured-plate-title{
  position:relative;z-index:1;
  font-family:var(--display);
  font-size:44px;line-height:1.02;
  letter-spacing:-.025em;color:#fff;font-weight:400;
}
.featured-plate-title em{font-style:italic;font-weight:300;color:var(--copper-bright)}
.featured-plate-foot{
  position:relative;z-index:1;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;
  font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
}

/* ============================================================
   Latest essays grid
   ============================================================ */
.latest{padding:120px 0 100px;background:var(--bone)}
.latest-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:56px;gap:40px;flex-wrap:wrap;
}
.latest-head-left .eyebrow{display:block;margin-bottom:12px}
.latest-head-left h2{
  font-family:var(--display);
  font-size:clamp(32px, 3.8vw, 48px);
  font-weight:400;line-height:1.08;letter-spacing:-.02em;
  color:var(--ink);margin:0;
}
.latest-head-left h2 em{font-style:italic;color:var(--copper)}
.latest-head-right{
  font-family:var(--display);font-style:italic;
  color:var(--slate);font-size:16px;
  max-width:340px;text-align:right;
}

.latest-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
}
.essay-card{
  text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease);
}
.essay-card:hover{transform:translateY(-4px)}
.essay-cover{
  position:relative;
  aspect-ratio:4/5;
  margin-bottom:24px;
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.essay-cover::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.5;pointer-events:none;
}
/* Typographic cover plate — gradient cycles by DOM position via :nth-of-type. */
.essay-cover-typographic{background:linear-gradient(155deg, #1E2F4A 0%, #0C1524 100%)}
.essay-card:nth-of-type(6n+2) .essay-cover-typographic{background:linear-gradient(155deg, #2A1F3D 0%, #0C1524 100%)}
.essay-card:nth-of-type(6n+3) .essay-cover-typographic{background:linear-gradient(155deg, #1C3A3A 0%, #0C1524 100%)}
.essay-card:nth-of-type(6n+4) .essay-cover-typographic{background:linear-gradient(155deg, #3A1F1F 0%, #0C1524 100%)}
.essay-card:nth-of-type(6n+5) .essay-cover-typographic{background:linear-gradient(155deg, #2A2E3D 0%, #0C1524 100%)}
.essay-card:nth-of-type(6n) .essay-cover-typographic{background:linear-gradient(155deg, #1A2E3D 0%, #0C1524 100%)}
.essay-cover-sigil{
  position:absolute;top:-20px;right:-10px;
  font-size:240px;line-height:1;color:var(--copper);
  opacity:.07;font-weight:300;z-index:0;
}
.essay-cover-top{position:relative;z-index:1}
.essay-cover .eyebrow{color:var(--copper-bright);margin-bottom:10px;display:block}
.essay-cover h4{
  position:relative;z-index:1;
  font-family:var(--display);
  font-size:26px;line-height:1.1;
  letter-spacing:-.02em;color:#fff;margin:0;font-weight:400;
}
.essay-cover h4 em{font-style:italic;font-weight:300;color:var(--copper-bright)}
.essay-cover-foot{
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:500;
}
.essay-lock{color:var(--copper-bright)}
.essay-meta{
  display:flex;justify-content:space-between;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);font-weight:500;margin-bottom:10px;
}
.essay-title{
  font-family:var(--display);
  font-size:22px;line-height:1.25;
  letter-spacing:-.01em;color:var(--ink);font-weight:500;margin:0 0 10px;
}
.essay-dek{font-size:14px;line-height:1.55;color:var(--slate);margin:0}

.latest-foot{text-align:center;margin-top:64px}

/* (Legacy .pillars / .pillar* styles removed 2026-04-28 — index.hbs no longer
   renders the WWB-pillars band; restore from git if revived.) */

/* ============================================================
   Founder band
   ============================================================ */
.archive-cta{padding:120px 0;background:var(--bone);position:relative}
.archive-cta-inner{
  display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:center;
  max-width:var(--wrap);margin:0 auto;padding:0 32px;
}
/* ============================================================
   Signature series collection
   ============================================================ */
.signature{padding:120px 0;background:var(--ink);color:#fff;position:relative;overflow:hidden}
.signature::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.5;
}
.signature-inner{position:relative;z-index:1}
.signature-head{text-align:center;margin-bottom:72px}
.signature-head .eyebrow{color:var(--copper-bright);display:block;margin-bottom:18px}
.signature-head h2{
  font-family:var(--display);
  font-size:clamp(40px, 5.4vw, 72px);
  font-weight:400;line-height:1;
  letter-spacing:-.025em;color:#fff;margin:0 0 20px;
}
.signature-head h2 em{font-style:italic;font-weight:300;color:var(--copper-bright)}
.signature-head p{
  font-family:var(--display);font-style:italic;
  font-size:22px;font-weight:300;color:rgba(255,255,255,.72);
  max-width:640px;margin:0 auto;line-height:1.5;
}
.collection{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:24px;
  max-width:var(--wrap);margin:0 auto;padding:0 32px;
}
.collection-card{
  text-decoration:none;color:#fff;
  aspect-ratio:3/4;padding:32px;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(160deg, #142238 0%, #0C1524 100%);
  transition:transform .35s var(--ease), border-color .35s;
}
.collection-card:hover{transform:translateY(-6px);border-color:var(--copper)}
.collection-num{
  font-family:var(--display);font-style:italic;
  font-size:88px;line-height:.9;color:var(--copper);
  font-weight:300;letter-spacing:-.04em;opacity:.95;
  font-variation-settings:"opsz" 144;
}
.collection-title{
  font-family:var(--display);
  font-size:22px;line-height:1.14;
  color:#fff;font-weight:400;letter-spacing:-.01em;
}
.collection-title em{font-style:italic;font-weight:300;color:var(--copper-bright)}
.collection-meta{
  font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
  padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;
}
.signature-foot{text-align:center;margin-top:56px}

/* ============================================================
   Subscribe
   ============================================================ */
.subscribe{padding:140px 0;background:var(--parchment);text-align:center;position:relative;overflow:hidden}
.subscribe::before{
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:800px;height:800px;
  background:radial-gradient(circle at center, rgba(184,136,86,.15) 0%, transparent 60%);
  pointer-events:none;
}
.subscribe-inner{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:0 32px}
.subscribe .eyebrow{display:block;margin-bottom:18px}
.subscribe h2{
  font-family:var(--display);
  font-size:clamp(36px, 5vw, 64px);
  font-weight:400;line-height:1.04;
  letter-spacing:-.025em;color:var(--ink);margin:0 0 24px;
}
.subscribe h2 em{font-style:italic;color:var(--copper)}
.subscribe p{
  font-family:var(--display);font-style:italic;
  font-size:19px;font-weight:300;color:var(--slate);
  margin:0 auto 40px;max-width:540px;line-height:1.55;
}
.sub-form{
  display:flex;gap:8px;max-width:520px;margin:0 auto 20px;flex-wrap:wrap;
}
.sub-form input{
  flex:1;min-width:240px;
  font-family:var(--body);font-size:16px; /* ≥16px to prevent iOS auto-zoom on focus */
  padding:16px 20px;
  border:1px solid var(--ink);background:var(--bone);color:var(--ink);
  border-radius:var(--radius);
}
.sub-form input:focus{outline:2px solid var(--copper);outline-offset:-1px}
.sub-note{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);font-weight:500;
}

/* ============================================================
   Footer
   ============================================================ */
.footer{
  background:var(--ink);color:rgba(255,255,255,.7);
  padding:80px 0 40px;
  border-top:1px solid var(--rule-dark);
}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:60px;margin-bottom:64px;
}
.footer-blurb{
  font-family:var(--display);font-style:italic;
  font-size:16px;font-weight:300;line-height:1.6;
  color:rgba(255,255,255,.6);
  margin:20px 0 28px;max-width:360px;
}
.footer-accent{
  font-family:var(--accent-script);font-size:24px;color:var(--copper);
  opacity:.7;letter-spacing:.04em;
}
.footer h5{
  font-family:var(--body);
  font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--copper-bright);
  margin:0 0 20px;
}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:10px}
.footer a{color:rgba(255,255,255,.75);text-decoration:none;font-size:14px;transition:color .2s}
.footer a:hover{color:var(--copper-bright)}
.footer-bottom{
  padding-top:32px;border-top:1px solid var(--rule-dark);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:20px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.45);font-weight:500;
}

/* ============================================================
   POST PAGE — reading experience
   ============================================================ */
.post-cover{
  position:relative;
  padding:160px 0 80px;
  background:var(--ink);
  color:#fff;
  overflow:hidden;
}
.post-cover::before{
  content:"";position:absolute;
  top:-30%;left:30%;
  width:900px;height:900px;
  background:radial-gradient(circle at center, rgba(184,136,86,.14) 0%, transparent 55%);
  pointer-events:none;
}
.post-cover::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.5;pointer-events:none;
}
.post-cover-inner{
  position:relative;z-index:1;
  max-width:var(--wrap-read);
  margin:0 auto;
  padding:0 24px;
}
.post-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  text-decoration:none;margin-bottom:28px;
  transition:color .2s;
}
.post-back:hover{color:var(--copper-bright)}
.post-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--copper-bright);
  margin-bottom:28px;
}
.post-eyebrow::before{content:"";width:28px;height:1px;background:var(--copper)}
.post-title{
  font-family:var(--display);
  font-size:clamp(40px, 5.4vw, 72px);
  font-weight:400;line-height:1.02;
  letter-spacing:-.025em;color:#fff;
  margin:0 0 28px;
  font-variation-settings:"opsz" 144;
}
.post-title em{font-style:italic;font-weight:300;color:var(--copper-bright)}
.post-standfirst{
  font-family:var(--display);font-style:italic;
  font-size:22px;font-weight:300;line-height:1.5;
  color:rgba(255,255,255,.78);
  margin:0 0 44px;
  max-width:600px;
}
.post-meta{
  padding-top:28px;border-top:1px solid var(--rule-mid);
  display:flex;gap:32px;align-items:center;
  flex-wrap:wrap;
  font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}
.post-meta .dot{color:rgba(255,255,255,.25)}
.post-meta .members{color:var(--copper-bright)}
.post-meta-author{
  display:flex;align-items:center;gap:12px;
}
.post-meta-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(160deg, #1E2F4A 0%, #0C1524 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-style:italic;
  color:var(--copper);font-size:16px;
  border:1px solid var(--copper);
}
.post-meta-name{
  font-family:var(--display);font-style:normal;font-size:14px;
  letter-spacing:.04em;color:#fff;
  text-transform:none;font-weight:500;
}

/* Post body layout */
.post-body{
  position:relative;
  background:var(--bone);
  padding:80px 0 120px;
}
.post-layout{
  max-width:var(--wrap-post);
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:200px minmax(0,1fr) 140px;
  gap:48px;
  align-items:start;
}
/* When TOC is hidden by JS (post has no h2 elements), drop its column */
.post-layout.post-layout-no-toc{
  grid-template-columns:minmax(0,1fr) 140px;
}
.post-toc{
  position:sticky;
  top:120px;
  font-family:var(--body);
}
.post-toc-label{
  font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate);
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--rule);
}
.post-toc ul{list-style:none;margin:0;padding:0}
.post-toc li{margin-bottom:10px}
.post-toc a{
  font-size:13px;line-height:1.45;
  color:var(--slate);text-decoration:none;
  display:block;padding:4px 0 4px 12px;
  border-left:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.post-toc a:hover{color:var(--ink);border-left-color:var(--rule)}
.post-toc a.active{color:var(--copper);border-left-color:var(--copper);font-weight:600}

.post-share{
  position:sticky;
  top:120px;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
}
.post-share-label{
  font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate);
  margin-bottom:8px;writing-mode:vertical-rl;
  transform:rotate(180deg);
  padding-bottom:12px;
  border-bottom:1px solid var(--rule);
}
.share-btn{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--rule);
  background:var(--bone);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--slate);cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.share-btn:hover{border-color:var(--copper);color:var(--copper);background:var(--parchment)}
.share-btn svg{width:16px;height:16px}

.post-content{
  font-family:var(--display);
  font-size:19px;
  line-height:1.75;
  color:#1a1a1a;
  font-weight:400;
  min-width:0;
}
/* Casper-style content grid — gives every block its own track + lets wide/full cards break out.
   Tracks: outer 1fr absorbs leftover width; main is capped at var(--wrap-read) but never exceeds parent.
   The minmax(0,...) on every track prevents grid-blowout when nested inside a narrower parent column
   (.post-layout middle column may be tighter than --wrap-read at 1024-1099px hinge). */
.post-content.gh-content,
.gh-content{
  display:grid;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [wide-start] minmax(0, 60px)
    [main-start] minmax(0, var(--wrap-read))
    [main-end] minmax(0, 60px)
    [wide-end] minmax(0, 1fr)
    [full-end];
  width:100%;
}
.gh-content > *{
  grid-column:main-start / main-end;
  min-width:0;
}
.gh-content > .kg-width-wide,
.gh-content > figure.kg-width-wide{
  grid-column:wide-start / wide-end;
  min-width:0;
}
.gh-content > .kg-width-full,
.gh-content > figure.kg-width-full{
  grid-column:full-start / full-end;
  min-width:0;
}
.gh-content > .kg-width-full img{width:100%}
.post-content p{margin:0 0 1.5em}
/* Drop cap: only when the very first child of the content is a paragraph
   (skip when the post opens with an image card, callout, blockquote, or H2 — drop-cap
   floating mid-page disconnected from the title looks broken). */
.post-content > p:first-child::first-letter{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  float:left;
  font-size:5.4em;
  line-height:.82;
  margin:0.06em 0.12em -0.04em 0;
  padding:0;
  color:var(--copper);
  font-variation-settings:"opsz" 144;
}
.post-content h2{
  font-family:var(--display);
  font-size:36px;font-weight:500;line-height:1.15;
  letter-spacing:-.015em;color:var(--ink);
  margin:2.4em 0 .8em;
  font-variation-settings:"opsz" 72;
  scroll-margin-top:100px;
}
.post-content h2 em{font-style:italic;color:var(--copper)}
.post-content h2::before{
  content:"";display:block;width:40px;height:1px;background:var(--copper);margin-bottom:18px;
}
.post-content h3{
  font-family:var(--display);
  font-size:26px;font-weight:500;line-height:1.25;
  letter-spacing:-.01em;color:var(--ink);
  margin:2em 0 .6em;
  scroll-margin-top:100px;
}
.post-content h3 em{font-style:italic;color:var(--copper)}
.post-content a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--copper);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color .2s;
}
.post-content a:hover{color:var(--copper)}
.post-content strong{color:var(--ink);font-weight:600}
.post-content em{font-style:italic}
.post-content ul, .post-content ol{
  margin:0 0 1.5em;padding-left:1.2em;
}
.post-content li{margin-bottom:.6em}

/* Inline reference chip — opt-in via class="ref" on inline span/code/cite. */
.ref{
  font-family:var(--body);
  font-size:.82em;
  font-weight:600;
  letter-spacing:.04em;
  padding:3px 10px 4px;
  background:var(--parchment);
  color:var(--copper-deep);
  border:1px solid var(--rule);
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  display:inline-block;
  vertical-align:baseline;
  line-height:1.4;
  transition:background .2s, border-color .2s, color .2s;
}
.ref::before{
  content:"◆";
  color:var(--copper);
  font-size:.7em;
  margin-right:5px;
  vertical-align:1px;
}
.ref:hover{
  background:var(--copper);color:var(--ink);border-color:var(--copper);
}
.ref:hover::before{color:var(--ink)}

/* Inline accent script — opt-in via class="accent-script" on inline spans.
   Works for Greek, Latin, Hebrew, Arabic, Devanagari, etc. For RTL scripts
   (Hebrew, Arabic) ALSO add class="rtl" — kept separate so LTR languages
   don't get mirrored punctuation. */
.accent-script{
  font-family:var(--accent-script);
  font-weight:500;
  color:var(--copper-deep);
  padding:0 .2em;
}
.accent-script.rtl, .rtl{
  direction:rtl;
  unicode-bidi:embed;
}

/* Pull quote */
.pull{
  font-family:var(--display);
  font-style:italic;
  font-size:28px;
  line-height:1.35;
  color:var(--ink);
  font-weight:400;
  letter-spacing:-.01em;
  border-left:2px solid var(--copper);
  padding:12px 0 12px 32px;
  margin:2.4em 0;
  max-width:680px;
}
.pull footer{
  margin-top:16px;
  font-style:normal;font-size:13px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate);
}
.pull footer::before{content:"by "}

/* (Legacy .members-gate / .gate-card paywall block removed 2026-04-28 —
   replaced by partials/content-cta.hbs + .paywall* styles. Both systems
   were coexisting after BP2 added the new partial.) */

/* Series nav at bottom */
.series-nav{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:32px 0;
  margin-top:80px;
  background:var(--parchment);
}
.series-nav-inner{
  max-width:var(--wrap-post);
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:40px;align-items:center;
}
.series-nav a{
  text-decoration:none;color:var(--ink);display:block;
}
.series-nav-item.prev{text-align:left}
.series-nav-item.next{text-align:right}
.series-nav-label{
  font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);
  margin-bottom:6px;
}
.series-nav-title{
  font-family:var(--display);
  font-size:18px;font-weight:500;line-height:1.25;
  letter-spacing:-.01em;color:var(--ink);
}
.series-nav-title em{font-style:italic;color:var(--copper)}
.series-nav-center{
  font-family:var(--display);font-style:italic;
  color:var(--slate);font-size:14px;text-align:center;
}
.series-nav-center a{color:var(--copper);text-decoration:none}

/* Author card */
.author-card{
  background:var(--parchment-2);
  padding:48px;
  border:1px solid var(--rule);
  margin:80px auto 0;
  max-width:var(--wrap-read);
  display:grid;
  grid-template-columns:120px 1fr;
  gap:32px;
  align-items:start;
}
.author-card-avatar{
  aspect-ratio:1/1;
  background:linear-gradient(160deg, #1E2F4A 0%, #0C1524 100%);
  border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-style:italic;
  color:var(--copper);font-size:48px;
}
.author-card .eyebrow{display:block;margin-bottom:8px}
.author-card h4{
  font-family:var(--display);
  font-size:28px;font-weight:500;letter-spacing:-.015em;
  color:var(--ink);margin:0 0 12px;
}
.author-card p{
  font-family:var(--display);font-size:16px;line-height:1.6;
  font-style:italic;font-weight:300;color:#2d2d2d;
  margin:0 0 16px;
}

/* ============================================================
   TAG/SERIES PAGE
   ============================================================ */
.tag-hero{
  position:relative;
  padding:180px 0 100px;
  background:var(--ink);color:#fff;
  overflow:hidden;
}
.tag-hero::before{
  content:"";position:absolute;
  top:-40%;left:50%;transform:translateX(-50%);
  width:1200px;height:1200px;
  background:radial-gradient(circle at center, rgba(184,136,86,.12) 0%, transparent 55%);
  pointer-events:none;
}
.tag-hero::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.5;
}
.tag-hero-inner{
  position:relative;z-index:1;
  max-width:var(--wrap);margin:0 auto;padding:0 32px;
  text-align:center;
}
.tag-watermark{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--display);font-style:italic;
  font-size:clamp(180px, 26vw, 320px);
  font-weight:300;letter-spacing:-.04em;
  color:var(--copper);
  opacity:.05;
  pointer-events:none;
  line-height:1;
  z-index:0;
  font-variation-settings:"opsz" 144;
  white-space:nowrap;
}
.tag-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--copper-bright);
  margin-bottom:32px;position:relative;z-index:1;
}
.tag-eyebrow::before,.tag-eyebrow::after{content:"";width:40px;height:1px;background:var(--copper)}
.tag-title{
  font-family:var(--display);
  font-size:clamp(56px, 8vw, 128px);
  font-weight:400;line-height:.98;
  letter-spacing:-.03em;color:#fff;
  margin:0 0 28px;position:relative;z-index:1;
  font-variation-settings:"opsz" 144;
}
.tag-title em{font-style:italic;font-weight:300;color:var(--copper-bright)}
.tag-desc{
  font-family:var(--display);font-style:italic;
  font-size:22px;font-weight:300;line-height:1.5;
  color:rgba(255,255,255,.76);
  max-width:640px;margin:0 auto 44px;
  position:relative;z-index:1;
}
.tag-stats{
  position:relative;z-index:1;
  display:flex;justify-content:center;gap:44px;flex-wrap:wrap;
  padding-top:32px;
  border-top:1px solid var(--rule-mid);
  max-width:720px;margin:0 auto;
}
.tag-stat{text-align:center}
.tag-stat-num{
  font-family:var(--display);
  font-size:32px;font-weight:400;
  color:var(--copper-bright);letter-spacing:-.02em;
  display:block;line-height:1.1;
}
.tag-stat-label{
  font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  margin-top:6px;display:block;
}

/* Tags index page (/tags/) — directory of every public tag with post count.
   Card layout sits inside the .latest section so it inherits the bone bg + wrap. */
.tags-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;list-style:none;margin:0;padding:0;
}
.tags-card{
  display:flex;flex-direction:column;gap:8px;
  padding:24px;border:1px solid var(--rule);border-radius:14px;
  background:#fff;color:var(--ink);text-decoration:none;
  transition:border-color .2s,transform .2s,box-shadow .2s;
  height:100%;
}
.tags-card:hover{
  border-color:var(--copper);transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(12,21,36,.08);
}
.tags-card-name{
  font-family:var(--display);font-size:22px;font-weight:400;
  letter-spacing:-.01em;line-height:1.2;
}
.tags-card-meta{
  display:flex;align-items:baseline;gap:6px;
  color:var(--copper-deep);
}
.tags-card-count{
  font-family:var(--display);font-size:18px;font-weight:500;
}
.tags-card-label{
  font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;
}
.tags-card-desc{
  font-size:14px;line-height:1.5;color:var(--ink-3);
  margin-top:4px;
}
.tags-empty,
.topics-empty,
.latest-empty{
  text-align:center;color:var(--ink-3);
  font-size:16px;padding:60px 0;
  font-family:var(--display);font-style:italic;
}

/* Reading list */
.reading-list{
  padding:100px 0;
  background:var(--bone);
}
.reading-list-head{
  max-width:var(--wrap-post);margin:0 auto 56px;
  padding:0 32px;
  display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:24px;
}
.reading-list-head h2{
  font-family:var(--display);
  font-size:28px;font-weight:400;letter-spacing:-.015em;
  margin:0;color:var(--ink);
}
.reading-list-head h2 em{font-style:italic;color:var(--copper)}

.reading-item{
  max-width:var(--wrap-post);
  margin:0 auto;
  padding:36px 32px;
  border-bottom:1px solid var(--rule);
  display:grid;
  grid-template-columns:100px 1fr auto;
  gap:40px;align-items:center;
  text-decoration:none;color:var(--ink);
  transition:background .2s;
}
.reading-item:hover{background:var(--parchment)}
.reading-item-num{
  font-family:var(--display);font-style:italic;
  font-size:72px;line-height:1;
  color:var(--copper);font-weight:300;letter-spacing:-.04em;
  text-align:center;
  font-variation-settings:"opsz" 144;
}
.reading-item-body .eyebrow{display:block;margin-bottom:10px}
.reading-item-body h3{
  font-family:var(--display);
  font-size:28px;font-weight:500;line-height:1.15;
  letter-spacing:-.015em;color:var(--ink);
  margin:0 0 10px;
}
.reading-item-body h3 em{font-style:italic;color:var(--copper)}
.reading-item-body p{
  font-family:var(--display);font-style:italic;font-size:17px;
  line-height:1.55;font-weight:300;color:var(--slate);
  margin:0;max-width:640px;
}
.reading-item-meta{
  text-align:right;
  font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);
  line-height:1.8;
}
.reading-item-meta .members{color:var(--copper);font-weight:600}

/* ============================================================
   Responsive

   IMPORTANT: each "mobile" breakpoint has a defensive OR clause
   `(hover:none) and (pointer:coarse)` so the mobile layout fires
   on any touch device REGARDLESS of viewport width reported by the
   browser. This covers two real-world cases:
     1. iOS Safari/Chrome with "Request Desktop Site" toggled — iOS
        reports a 1024px viewport, so `max-width:1000px` does NOT
        fire even though the physical screen is ~393-430px. Without
        the touch fallback the desktop nav crams into the iPhone
        screen and the drawer/links overlap (real bug seen 2026-04-28).
     2. iPad in any mode — iPadOS sometimes reports 1024 too.
   `(hover:none) and (pointer:coarse)` matches genuine touch
   primary-input devices and excludes touch laptops with a mouse
   attached (those report `hover:hover, pointer:fine`).
   ============================================================ */
@media (max-width:1100px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  /* Match .post-layout AND .post-layout.post-layout-no-toc — the no-toc
     variant has higher specificity (0,2,0) and sets a 2-column grid
     (content + share-rail). without explicit override, mobile
     posts with no h2 (no TOC) keep the share rail beside the content,
     forcing narrow column width and word-per-line wrap. */
  .post-layout,
  .post-layout.post-layout-no-toc{grid-template-columns:1fr;gap:32px}
  .post-toc,.post-share{position:static;top:auto}
  .post-toc{order:2;padding:24px;background:var(--parchment);border:1px solid var(--rule)}
  .post-share{order:3;flex-direction:row;justify-content:center;margin-top:20px;width:100%}
  .post-share-label{writing-mode:horizontal-tb;transform:none;border-bottom:none;border-right:1px solid var(--rule);padding:0 12px 0 0;margin:0}
}
@media (max-width:1000px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  .hero-inner{grid-template-columns:1fr;gap:60px}
  .topic-grid{grid-template-columns:repeat(2, 1fr)}
  .featured-inner{grid-template-columns:1fr;gap:48px}
  .featured-plate{max-width:380px}
  .latest-grid{grid-template-columns:repeat(2, 1fr);gap:32px}
  .archive-cta-inner,.start-here-inner{grid-template-columns:1fr;gap:48px;max-width:640px}
  .collection{grid-template-columns:repeat(2, 1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .author-card{grid-template-columns:1fr;text-align:left}
  .author-card-avatar{max-width:100px}
  .nav-links{display:none}
  .nav-burger{display:inline-flex}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap,.wrap-wide,.hero-inner,.featured-inner,.archive-cta-inner,.start-here-inner,.post-layout{padding-left:20px;padding-right:20px}
  .nav-inner{padding:0 20px}
  .hero{padding:140px 0 60px;min-height:auto}
  .hero h1{font-size:48px}
  .hero-sub{font-size:17px}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{justify-content:center;width:100%}
  .scroll-ind{display:none}
  .trust-inner{gap:24px;font-size:12px}
  .trust-num{font-size:24px}
  .topics,.latest,.archive-cta,.signature,.subscribe,.featured,.start-here{padding:80px 0}
  .topic-grid{grid-template-columns:1fr}
  .latest-grid{grid-template-columns:1fr;gap:32px}
  .essay-cover{padding:24px}
  .essay-cover h4{font-size:22px}
  .latest-head{flex-direction:column;align-items:flex-start}
  .latest-head-right{text-align:left}
  .collection{grid-template-columns:1fr;gap:16px}
  .collection-card{aspect-ratio:4/3}
  .footer-grid{grid-template-columns:1fr;gap:40px}
  .sub-form{flex-direction:column}
  .sub-form .btn{width:100%;justify-content:center}
  .path-step{padding:24px 24px 24px 72px}
  .path-step::before{left:24px;font-size:22px}
  .post-cover{padding:120px 0 56px}
  .post-title{font-size:40px}
  .post-standfirst{font-size:18px}
  .post-body{padding:48px 0 80px}
  .post-content{font-size:17px}
  .post-content h2{font-size:26px}
  .post-content h3{font-size:20px}
  /* mobile post rendering hardening.
     Two combined bugs caused word-per-line wrap on iPhone:
       1. .gh-content grid reserves [wide-start]60px + [wide-end]60px tracks
          for breakout cards. On a ~393px viewport with .post-layout's outer
          padding, that left ~150px for the main reading column. Set the
          wide tracks to 0px on phone so the main column gets full width.
       2. The drop-cap was 5.4em with float:left, occupying ~90px alongside
          the narrow column — paragraphs wrapped one word per line around
          it. Reduce to 3.6em on phone. Drop-cap stays elegant; text flows. */
  .post-content.gh-content,
  .gh-content{
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [wide-start] minmax(0, 0px)
      [main-start] minmax(0, var(--wrap-read))
      [main-end] minmax(0, 0px)
      [wide-end] minmax(0, 1fr)
      [full-end];
  }
  .post-content > p:first-child::first-letter{
    font-size:3.6em;
    margin:0.05em 0.08em -0.04em 0;
  }
  .pull{font-size:22px;padding-left:20px}
  .reading-item{grid-template-columns:60px 1fr;gap:20px;padding:28px 20px}
  .reading-item-num{font-size:48px}
  .reading-item-body h3{font-size:22px}
  .reading-item-meta{grid-column:1 / -1;text-align:left}
  .series-nav-inner{grid-template-columns:1fr;gap:20px}
  .series-nav-item.next{text-align:left}
  .tag-hero{padding:140px 0 72px}
  .tag-stats{gap:24px}
  .tag-stat-num{font-size:26px}
  /* Shrink the giant search input on narrow phones so it doesn't wrap awkwardly. */
  .search-input-wrap input{font-size:24px}
  .search-overlay{padding:10vh 20px 24px}
  /* Subscribe form input already 16px (L8 fix); ensure no override. */
  .sub-form input{font-size:16px}
}

/* ============================================================
   START HERE PAGE
   ============================================================ */
.start-hero{
  position:relative;
  padding:180px 0 100px;
  background:var(--ink);color:#fff;
  overflow:hidden;
  text-align:center;
}
.start-hero::before{
  content:"";position:absolute;
  top:-30%;left:50%;transform:translateX(-50%);
  width:1400px;height:1400px;
  background:radial-gradient(circle at center, rgba(184,136,86,.16) 0%, transparent 55%);
  pointer-events:none;
}
.start-hero::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.5;pointer-events:none;
}
.start-hero-inner{
  position:relative;z-index:1;
  max-width:880px;margin:0 auto;padding:0 32px;
}
.start-hero .hero-eyebrow{justify-content:center;margin-bottom:24px}
.start-hero h1{
  font-family:var(--display);
  font-size:clamp(48px, 7.4vw, 96px);
  font-weight:400;line-height:1;letter-spacing:-.03em;
  color:#fff;margin:0 0 28px;
  font-variation-settings:"opsz" 144;
}
.start-hero h1 em{font-style:italic;font-weight:300;color:var(--copper-bright)}
.start-hero p.lede{
  font-family:var(--display);font-style:italic;
  font-size:clamp(19px, 2vw, 24px);font-weight:300;
  line-height:1.5;color:rgba(255,255,255,.78);
  margin:0 auto 0;max-width:640px;
}

/* Tall path cards (start page version) */
.start-paths{
  padding:80px 0 100px;
  background:var(--bone);
  margin-top:-40px;
  position:relative;z-index:2;
}
.start-paths-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 32px;
  /* auto-fit + minmax: 1 card centers (max-width caps width), 2 cards fill 2 cols,
     3 cards fill 3 cols. Buyers leaving start_path_2/3_post_slug blank get a clean
     layout regardless of how many paths render. */
  display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:24px;
  justify-content:center;
  counter-reset:start-path;
}
.start-path{max-width:520px;width:100%;justify-self:center}
.start-path{
  background:var(--parchment);
  counter-increment:start-path;
  padding:40px 32px 36px;
  text-decoration:none;color:var(--ink);
  border:1px solid var(--rule);
  display:flex;flex-direction:column;
  position:relative;
  transition:transform .35s var(--ease), background .25s, border-color .25s;
  min-height:340px;
}
.start-path:hover{transform:translateY(-6px);background:var(--bone);border-color:var(--copper)}
.start-path::before{
  content:counter(start-path, upper-roman);
  display:block;
  font-family:var(--display);font-style:italic;
  font-size:64px;line-height:1;color:var(--copper);
  font-weight:300;letter-spacing:-.04em;
  margin-bottom:24px;
  font-variation-settings:"opsz" 144;
}
.start-path .eyebrow{display:block;margin-bottom:10px}
.start-path h3{
  font-family:var(--display);
  font-size:24px;font-weight:500;line-height:1.2;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 12px;
}
.start-path h3 em{font-style:italic;color:var(--copper)}
.start-path p{
  font-family:var(--display);font-style:italic;
  font-size:16px;line-height:1.55;font-weight:300;
  color:var(--slate);margin:0 0 24px;flex:1;
}
.start-path-link{
  font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--copper);
  display:inline-flex;align-items:center;gap:8px;
  border-top:1px solid var(--rule);padding-top:18px;
  margin-top:auto;
}
.start-path:hover .start-path-link{color:var(--copper-deep)}

/* Intro content (Ghost page body) */
.start-intro{
  padding:80px 0;
  background:var(--bone);
}
.start-intro .gh-content{
  max-width:var(--wrap-read);margin:0 auto;padding:0 24px;
  font-family:var(--display);
  font-size:19px;line-height:1.75;color:#1a1a1a;font-weight:400;
}
.start-intro .gh-content > * + *{margin-top:1.2em}

/* FAQ band */
.faq{
  padding:120px 0;
  background:var(--parchment);
}
.faq-inner{
  max-width:880px;margin:0 auto;padding:0 32px;
}
.faq-list{
  margin-top:48px;
  border-top:1px solid var(--rule);
}
.faq-item{
  border-bottom:1px solid var(--rule);
}
.faq-item summary{
  list-style:none;
  padding:24px 0;
  min-height:44px;
  font-family:var(--display);
  font-size:22px;font-weight:500;line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);
  cursor:pointer;
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--copper)}
.faq-item summary em{font-style:italic;color:var(--copper)}
/* Wrap the question text in a single flex item so inline <em> flows naturally
   instead of every text node + em becoming its own flex child (which gets
   spread across the row by justify-content:space-between). */
.faq-item summary .faq-q{flex:1 1 auto;min-width:0}
.faq-item .faq-chev{
  flex-shrink:0;width:24px;height:24px;color:var(--slate);
  transition:transform .25s var(--ease), color .2s;
  margin-top:6px;
}
.faq-item[open] .faq-chev{transform:rotate(45deg);color:var(--copper)}
.faq-item summary:hover .faq-chev{color:var(--copper)}
.faq-item .faq-body{
  padding:0 0 28px;
  font-family:var(--display);
  font-size:17px;line-height:1.65;color:#2d2d2d;font-weight:300;
  max-width:680px;
}
.faq-item .faq-body p + p{margin-top:1em}
.faq-item .faq-body em{font-style:italic;color:var(--copper-deep);font-weight:400}

/* Featured starter essay block */
.starter{
  padding:120px 0;
  background:var(--ink);color:#fff;
  position:relative;overflow:hidden;
}
.starter::before{
  content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:900px;height:900px;
  background:radial-gradient(circle at center, rgba(184,136,86,.14) 0%, transparent 55%);
  pointer-events:none;
}
.starter-inner{
  position:relative;z-index:1;
  max-width:var(--wrap);margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.starter-left .eyebrow{color:var(--copper-bright);display:block;margin-bottom:20px}
.starter-left h2{
  font-family:var(--display);
  font-size:clamp(34px, 4.4vw, 56px);
  font-weight:400;line-height:1.05;
  letter-spacing:-.02em;color:#fff;margin:0 0 24px;
}
.starter-left h2 em{font-style:italic;font-weight:300;color:var(--copper-bright)}
.starter-left p{
  font-family:var(--display);font-style:italic;
  font-size:19px;line-height:1.55;font-weight:300;
  color:rgba(255,255,255,.78);margin:0 0 32px;
}

/* (Legacy .teacher-preview* strip CSS removed 2026-04-28 — never emitted
   by any template since the institutional rebrand removed founder-forward
   surfaces.) */

/* ============================================================
   MEMBERS / PRICING PAGE
   ============================================================ */
.members-hero{
  position:relative;
  padding:180px 0 100px;
  background:var(--ink);color:#fff;
  overflow:hidden;
  text-align:center;
}
.members-hero::before{
  content:"";position:absolute;
  top:-30%;left:50%;transform:translateX(-50%);
  width:1400px;height:1400px;
  background:radial-gradient(circle at center, rgba(184,136,86,.18) 0%, transparent 55%);
  pointer-events:none;
}
.members-hero::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.5;
}
.members-hero-inner{
  position:relative;z-index:1;
  max-width:880px;margin:0 auto;padding:0 32px;
}
.members-hero h1{
  font-family:var(--display);
  font-size:clamp(48px, 7vw, 96px);
  font-weight:400;line-height:1;letter-spacing:-.03em;
  color:#fff;margin:0 0 24px;
  font-variation-settings:"opsz" 144;
}
.members-hero h1 em{font-style:italic;font-weight:300;color:var(--copper-bright)}
.members-hero p.lede{
  font-family:var(--display);font-style:italic;
  font-size:clamp(19px, 2vw, 24px);font-weight:300;
  line-height:1.5;color:rgba(255,255,255,.78);
  margin:0 auto;max-width:600px;
}

/* Value unlocks list */
.unlocks{
  padding:120px 0;
  background:var(--bone);
}
.unlocks-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start;
}
.unlocks-left{position:sticky;top:120px}
.unlocks-left .eyebrow{display:block;margin-bottom:18px}
.unlocks-left h2{
  font-family:var(--display);
  font-size:clamp(36px, 4.6vw, 56px);
  font-weight:400;line-height:1.05;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 22px;
}
.unlocks-left h2 em{font-style:italic;color:var(--copper)}
.unlocks-left p{
  font-family:var(--display);font-style:italic;
  font-size:18px;line-height:1.6;font-weight:300;
  color:var(--slate);margin:0 0 24px;
}
.unlocks-list{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--rule);
}
.unlocks-list li{
  border-bottom:1px solid var(--rule);
  padding:24px 0 24px 56px;
  position:relative;
}
.unlocks-list li::before{
  content:"";
  position:absolute;
  left:0;top:30px;
  width:36px;height:1px;background:var(--copper);
}
.unlocks-list .ulock-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--copper);margin-bottom:8px;
}
.unlocks-list h4{
  font-family:var(--display);
  font-size:22px;font-weight:500;line-height:1.25;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 8px;
}
.unlocks-list h4 em{font-style:italic;color:var(--copper)}
.unlocks-list p{
  font-size:14px;line-height:1.55;color:var(--slate);margin:0;
}
.unlocks-list .ulock-meta{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper-deep);font-weight:500;margin-top:8px;
  display:inline-block;
}

/* Plan card */
.plan{
  padding:120px 0;
  background:var(--parchment);
  position:relative;overflow:hidden;
}
.plan::before{
  content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:900px;height:900px;
  background:radial-gradient(circle at center, rgba(184,136,86,.18) 0%, transparent 60%);
  pointer-events:none;
}
.plan-inner{
  position:relative;z-index:1;
  max-width:560px;margin:0 auto;padding:0 32px;
  text-align:center;
}
.plan .eyebrow{display:block;margin-bottom:18px}
.plan-card{
  background:var(--ink);color:#fff;
  border:1px solid var(--ink);
  padding:56px 48px;
  margin-top:36px;
  position:relative;overflow:hidden;
  text-align:center;
}
.plan-card::before{
  content:"";position:absolute;
  top:-50%;left:50%;transform:translateX(-50%);
  width:600px;height:600px;
  background:radial-gradient(circle at center, rgba(184,136,86,.2) 0%, transparent 55%);
  pointer-events:none;
}
.plan-card-inner{position:relative;z-index:1}
.plan-tier{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;
  border:1px solid var(--copper);color:var(--copper-bright);
  font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:32px;
}
.plan-price{
  font-family:var(--display);
  display:flex;justify-content:center;align-items:baseline;gap:6px;
  margin-bottom:8px;
}
.plan-price-num{
  font-size:88px;font-weight:300;color:#fff;
  letter-spacing:-.03em;line-height:1;
  font-variation-settings:"opsz" 144;
}
.plan-price-currency{
  font-size:32px;font-weight:300;color:rgba(255,255,255,.55);
  align-self:flex-start;margin-top:18px;
}
.plan-price-term{
  font-family:var(--body);
  font-size:13px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}
/* Optional secondary cadence — shown on tiers with BOTH monthly and yearly. */
.plan-price-alt{
  font-family:var(--body);
  font-size:13px;font-weight:500;letter-spacing:.04em;
  color:rgba(255,255,255,.55);
  margin-top:6px;
}
.plan-card h3{
  font-family:var(--display);
  font-size:28px;font-weight:400;line-height:1.2;
  letter-spacing:-.015em;color:#fff;margin:24px 0 16px;
}
.plan-card h3 em{font-style:italic;color:var(--copper-bright)}
.plan-card .plan-blurb{
  font-family:var(--display);font-style:italic;
  font-size:17px;line-height:1.55;font-weight:300;
  color:rgba(255,255,255,.74);margin:0 0 32px;max-width:420px;margin-left:auto;margin-right:auto;
}
.plan-card .btn{margin-top:8px}
.plan-features{
  list-style:none;margin:32px 0 0;padding:0;
  text-align:left;
}
.plan-features li{
  padding:12px 0 12px 32px;
  font-family:var(--body);font-size:14px;line-height:1.5;
  color:rgba(255,255,255,.85);
  position:relative;
  border-top:1px solid rgba(255,255,255,.08);
}
.plan-features li:first-child{border-top:none}
.plan-features li::before{
  content:"◆";
  position:absolute;left:8px;top:13px;
  color:var(--copper-bright);font-size:11px;
}
.plan-foot{
  margin-top:36px;
  font-family:var(--display);font-style:italic;
  font-size:14px;color:var(--slate);
}
.plan-foot a{color:var(--copper);text-decoration:none}
.plan-foot a:hover{color:var(--copper-deep);text-decoration:underline}

/* ============================================================
   START / MEMBERS responsive
   (mobile-fallback per the touch-OR pattern documented above)
   ============================================================ */
@media (max-width:1000px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  .start-paths-inner{grid-template-columns:1fr;gap:16px}
  .start-path{min-height:auto;padding:32px 28px}
  .starter-inner{grid-template-columns:1fr;gap:48px}
  .unlocks-inner{grid-template-columns:1fr;gap:48px}
  .unlocks-left{position:static}
}
@media (max-width:640px){
  .start-hero,.members-hero{padding:140px 0 72px}
  .start-paths{padding:48px 0 64px}
  .start-paths-inner{padding:0 20px}
  .starter-inner{padding:0 20px}
  .unlocks,.plan,.faq{padding:72px 0}
  .unlocks-list li{padding:20px 0 20px 48px}
  .plan-card{padding:36px 24px}
  .plan-price-num{font-size:64px}
  .faq-item summary{font-size:18px;padding:20px 0}
}

/* (Legacy .mockup-banner / .page-switcher static-mockup chrome removed,
   never emitted by any template since the initial release.) */

/* ============================================================
   Koenig editor card support — required by Ghost
   ============================================================ */

/* Standard image widths, set on figure.kg-card */
.gh-content > .kg-image-card,
.gh-content > .kg-gallery-card,
.gh-content > .kg-embed-card,
.gh-content > .kg-video-card,
.gh-content > .kg-audio-card,
.gh-content > .kg-file-card,
.gh-content > .kg-bookmark-card,
.gh-content > .kg-callout-card,
.gh-content > .kg-toggle-card,
.gh-content > .kg-product-card,
.gh-content > .kg-header-card,
.gh-content > .kg-button-card,
.gh-content > .kg-signup-card{
  margin:32px 0;
}

.gh-content .kg-image{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:var(--radius)}

/* Wide / Full image cards: rely on the gh-content grid columns above; keep the inner image at the column width */
.gh-content > .kg-width-wide .kg-image,
.gh-content > .kg-width-full .kg-image{width:100%;max-width:100%;border-radius:0}
.gh-content figure.kg-card figcaption{
  font-family:var(--body);font-size:14px;line-height:1.5;
  color:var(--slate);text-align:center;margin-top:12px;
}

/* Wide / Full widths handled via .gh-content grid columns above (Casper pattern) */

/* Bookmark card */
.kg-bookmark-card .kg-bookmark-container{
  display:flex;color:inherit;text-decoration:none;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--bone);overflow:hidden;
  transition:border-color .2s var(--ease);
}
.kg-bookmark-card .kg-bookmark-container:hover{border-color:var(--copper)}
.kg-bookmark-card .kg-bookmark-content{flex:1;padding:20px;display:flex;flex-direction:column;justify-content:flex-start}
.kg-bookmark-card .kg-bookmark-title{font-family:var(--display);font-size:18px;font-weight:600;color:var(--ink);margin:0 0 6px}
.kg-bookmark-card .kg-bookmark-description{font-size:14px;line-height:1.5;color:var(--slate);margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kg-bookmark-card .kg-bookmark-metadata{font-size:12px;color:var(--slate-soft);display:flex;gap:8px;align-items:center}
.kg-bookmark-card .kg-bookmark-thumbnail{flex:0 0 200px}
.kg-bookmark-card .kg-bookmark-thumbnail img{width:100%;height:100%;object-fit:cover}
.kg-bookmark-card .kg-bookmark-icon{width:14px;height:14px}

/* Callout */
.kg-callout-card{padding:24px;border-radius:var(--radius);font-family:var(--body)}
.kg-callout-card-grey{background:var(--parchment)}
.kg-callout-card-white{background:var(--bone);border:1px solid var(--rule)}
.kg-callout-card-blue{background:var(--ink);color:var(--bone)}
.kg-callout-card-green{background:#ECF5EE;color:#1F4D2A}
.kg-callout-card-yellow{background:#FBF1D7;color:#5C4A18}
.kg-callout-card-red{background:#FDEAEA;color:#7A1F1F}
.kg-callout-card-pink{background:#FBEAF1;color:#7A1F4A}
.kg-callout-card-purple{background:#EFEAF8;color:#3D2871}
.kg-callout-card-accent{background:var(--copper);color:var(--ink)}
.kg-callout-emoji{margin-right:12px;font-size:20px}

/* Toggle */
.kg-toggle-card{padding:20px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.kg-toggle-heading-text{font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink);margin:0}
.kg-toggle-content{padding-top:16px;color:var(--slate);font-size:16px;line-height:1.6}

/* Header card */
.kg-header-card{padding:80px 32px;text-align:center;background:var(--ink);color:var(--bone)}
.kg-header-card.kg-style-light{background:var(--parchment);color:var(--ink)}
.kg-header-card.kg-style-dark{background:var(--ink);color:var(--bone)}
.kg-header-card.kg-style-accent{background:var(--copper);color:var(--ink)}
.kg-header-card-image{width:100%;height:auto;margin-top:32px}

/* Button card */
.kg-button-card{text-align:center;margin:32px 0}
.kg-button-card .kg-btn{
  display:inline-block;padding:14px 28px;
  font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--bone);background:var(--ink);
  border:1px solid var(--ink);border-radius:var(--radius);text-decoration:none;
  transition:background .15s, color .15s;
}
.kg-button-card.kg-align-left{text-align:left}
.kg-button-card.kg-align-right{text-align:right}
.kg-button-card .kg-btn-accent{background:var(--copper);border-color:var(--copper);color:var(--ink)}
.kg-btn:hover{background:var(--copper);border-color:var(--copper);color:var(--ink)}

/* Embed / video / audio */
.kg-embed-card,.kg-video-card,.kg-audio-card{position:relative}
.kg-embed-card iframe{max-width:100%}
.kg-video-card video{display:block;width:100%;height:auto}

/* File card */
.kg-file-card{display:block;border:1px solid var(--rule);padding:16px;text-decoration:none;color:inherit}
.kg-file-card-title{font-family:var(--display);font-weight:600;color:var(--ink)}

/* Product card */
.kg-product-card{border:1px solid var(--rule);padding:24px;border-radius:var(--radius)}
.kg-product-card-title{font-family:var(--display);font-size:22px;font-weight:600;color:var(--ink);margin:0 0 8px}

/* Signup card */
.kg-signup-card{padding:48px 32px;text-align:center;background:var(--parchment);border-radius:var(--radius)}
.kg-signup-card-heading{font-family:var(--display);font-size:32px;font-weight:600;color:var(--ink);margin:0 0 12px}
.kg-signup-card-subheading{color:var(--slate);font-size:16px;line-height:1.5;margin:0 0 24px}

/* Gallery */
.kg-gallery-container{display:flex;flex-direction:column;gap:8px}
.kg-gallery-row{display:flex;gap:8px}
.kg-gallery-image img{width:100%;height:auto;display:block;border-radius:var(--radius)}

/* Blockquote alt — Koenig pull quote */
.kg-card-hascaption blockquote{
  font-family:var(--display);font-size:24px;font-style:italic;line-height:1.4;
  color:var(--ink);border-left:3px solid var(--copper);padding-left:24px;margin:0;
}

/* ============================================================
   Print — give readers a clean printout of just the article
   ============================================================ */
@media print{
  /* Hide chrome that doesn't belong on paper. */
  .nav,.drawer,.search-overlay,.post-toc,.post-share,
  .series-nav,.subscribe,.footer,.scroll-ind,
  .author-card,.featured,.starter,.signature,.start-here,.topics,
  .latest,.members-hero,.start-hero,.plan,.unlocks,.faq,
  .reading-list,.archive-cta,.paywall{
    display:none !important;
  }
  /* Reset cinematic dark covers to plain text. */
  .post-cover,.hero{
    background:transparent !important;color:#000 !important;
    padding:0 0 16pt !important;border-bottom:1px solid #ccc;
  }
  .post-cover::before,.post-cover::after,.hero::before,.hero::after{display:none !important}
  .post-title,.tag-title,.hero h1,.post-eyebrow,.post-meta,.post-back,.post-standfirst{
    color:#000 !important;
  }
  .post-meta{border-top-color:#ccc !important}
  /* Body content single-column at full width. */
  .post-body{padding:0 !important;background:#fff !important}
  .post-layout{display:block !important;max-width:none !important;padding:0 !important}
  .post-content,.post-content.gh-content,.gh-content{
    display:block !important;max-width:none !important;font-size:11pt;line-height:1.5;color:#000;
  }
  .post-content > *{display:block !important;max-width:100% !important}
  .post-content a{color:#000 !important;text-decoration:underline}
  .post-content a[href^="http"]::after{
    content:" (" attr(href) ")";font-size:9pt;color:#666;
  }
  .post-content h2::before{display:none}
  body{background:#fff !important;color:#000 !important}
  /* Avoid orphaned headings + page breaks inside images/code. */
  h1,h2,h3,h4{page-break-after:avoid;break-after:avoid-page}
  img,figure,blockquote,pre{page-break-inside:avoid;break-inside:avoid}
}

/* ============================================================
   Reduced motion — disable transforms, animations, smooth scroll
   for users with vestibular disorders.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important}
  .btn:hover,.essay-card:hover,.collection-card:hover,
  .start-path:hover,.path-step:hover{transform:none !important}
}

/* ============================================================
   Forced colors (Windows High Contrast) — preserve hierarchy
   when system colors override our palette.
   ============================================================ */
@media (forced-colors: active){
  /* Let the system pick the colors but keep structural cues visible. */
  .nav.scrolled,.nav.on-light{border-bottom:1px solid CanvasText}
  .btn-primary,.nav-cta,.plan-tier{
    border:1px solid CanvasText;
    forced-color-adjust:none;
  }
  /* The decorative noise / gradient layers add nothing in HC mode. */
  .hero::before,.hero::after,.featured::before,.signature::before,
  .post-cover::before,.post-cover::after,.tag-hero::before,.tag-hero::after,
  .members-hero::before,.members-hero::after,.start-hero::before,.start-hero::after,
  .subscribe::before,.starter::before,.plan::before,.plan-card::before,
  .tag-watermark,.featured-plate::before,
  .essay-cover::before{display:none}
  /* Underline links so they remain identifiable when copper colour is overridden. */
  .post-content a,.link,.nav-links a,.footer a{text-decoration:underline}
}

/* ========== CONTACT PAGE ==========
   Used by page-contact.hbs (Ghost auto-applies for the Page slug `contact`). */
.contact-cover{padding:200px 0 64px}
.contact-main{
  background:var(--bone);
  color:var(--ink);
  padding:80px 0 120px;
}
.contact-wrap{
  max-width:680px;
  margin:0 auto;
  padding:0 24px;
}
.contact-intro{
  margin-bottom:48px;
  font-family:var(--display);
  font-size:19px;
  line-height:1.6;
  color:var(--ink);
}
.contact-intro p{margin:0 0 16px}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.contact-row{display:flex;flex-direction:column;gap:8px}
.contact-row label{
  font-family:var(--ui);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.72;
}
.contact-row input,
.contact-row textarea{
  font-family:var(--ui);
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--rule);
  border-radius:6px;
  padding:14px 16px;
  width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.contact-row input:focus,
.contact-row textarea:focus{
  outline:none;
  border-color:var(--copper);
  box-shadow:0 0 0 3px rgba(184,136,86,.15);
}
.contact-row textarea{resize:vertical;min-height:160px;font-family:var(--display)}
.contact-actions{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:8px;
}
.contact-email-link{
  font-family:var(--ui);
  font-size:14px;
  color:var(--ink);
  opacity:.7;
  text-decoration:underline;
  text-underline-offset:3px;
}
.contact-email-link:hover{opacity:1;color:var(--copper)}
.contact-mailcard{
  background:var(--parchment);
  border:1px solid var(--rule);
  border-radius:8px;
  padding:48px 40px;
  text-align:center;
}
.contact-mailcard-lede{
  font-family:var(--ui);
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.7;
  margin:0 0 16px;
}
.contact-mailcard-link{
  display:inline-block;
  font-family:var(--display);
  font-size:32px;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--copper);
  text-decoration:none;
  margin-bottom:24px;
  word-break:break-word;
}
.contact-mailcard-link:hover{color:var(--ink)}
.contact-mailcard-note{
  font-family:var(--display);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  opacity:.75;
  margin:0;
}
@media (max-width:640px){
  .contact-cover{padding:160px 0 48px}
  .contact-main{padding:64px 0 96px}
  .contact-wrap{padding:0 20px}
  .contact-mailcard{padding:32px 24px}
  .contact-mailcard-link{font-size:24px}
}

/* ========== PAYWALL / CONTENT-CTA ==========
   Used by partials/content-cta.hbs (Ghost auto-discovers when a non-member
   hits a paid/members post). Replaces Ghost's default unstyled CTA. */
.paywall{
  background:var(--parchment);
  padding:80px 24px;
  border-top:1px solid var(--rule);
}
.paywall-inner{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}
.paywall-inner h2{
  font-family:var(--display);
  font-size:clamp(28px, 3.6vw, 42px);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:18px 0 14px;
}
.paywall-inner h2 em{font-style:italic;color:var(--copper)}
.paywall-desc{
  font-family:var(--display);
  font-size:18px;
  line-height:1.55;
  color:var(--slate);
  margin:0 auto 32px;
  max-width:520px;
}
.paywall-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.paywall-signin{
  font-family:var(--ui);
  font-size:14px;
  color:var(--slate);
  text-decoration:underline;
  text-underline-offset:3px;
}
.paywall-signin:hover{color:var(--copper)}
@media (max-width:640px){
  .paywall{padding:64px 20px}
  .paywall-actions .btn{width:100%;justify-content:center}
}