/* =============================================================
   Mere Orthodoxy — Ghost theme
   Consolidated from homepage-mockup.html and article-mockup.html.
   ============================================================= */

:root {
  --color-primary: #ee7d51;
  --color-secondary: #c1593c;
  --color-background: #f1e0c9;
  --color-page: #f6f3f2;
  --color-dark: #2d2927;
  --color-white: #ffffff;
  --color-card-border: #d9c6a7;
  --color-card-featured-bg: #f1e0c9;
  --color-muted: #6b6660;
  /* Hairlines: --color-rule and --color-card-border are deliberately
     the same value so all dividers across the site read at the same
     weight. Was #e9dec8 (lighter) until a visible inconsistency
     between nav-rail underline and card-grid hairlines was flagged. */
  --color-rule: #d9c6a7;

  --font-display: 'IM Fell Great Primer', 'Source Serif Pro', Georgia, serif;
  --font-body: 'Source Serif Pro', Georgia, serif;

  --radius: 10px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 2px rgba(45, 41, 39, 0.04), 0 6px 20px rgba(45, 41, 39, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(45, 41, 39, 0.05), 0 14px 38px rgba(45, 41, 39, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* max-width: 100vw prevents the html element from ever exceeding the
   current visual viewport width. 100vw always reflects the live
   layout viewport, so it self-corrects after iOS Safari orientation
   changes or Split View resize events that leave the page wider than
   the visible area. overflow-x: hidden suppresses any horizontal
   scrollbar that could appear during the brief reflow window. */
html { scroll-behavior: smooth; scroll-padding-top: 72px; max-width: 100vw; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-dark);
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-secondary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 520px) {
  .container { padding: 0 18px; }
}

.container-narrow {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 520px) {
  .container-narrow { padding: 0 18px; }
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 16px;
}
.eyebrow-light { color: rgba(255,255,255,0.78); }

.section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.12;
  color: var(--color-dark);
  margin: 0;
}
.section-heading em { font-style: italic; }
.section-heading-light { color: var(--color-white); }

.section-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

/* -------- Header -------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  transition: transform 0.25s ease;
  will-change: transform;
  background-color: #f1e8d5;
  border-bottom: 1px solid rgba(130, 102, 70, 0.18);
  box-shadow: 0 6px 14px -12px rgba(60, 42, 22, 0.3);
}
.site-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(130, 102, 70, 0.22) 50%, transparent 100%);
  pointer-events: none;
}
.site-header.is-hidden { transform: translateY(-100%); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  padding-bottom: 6px;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo {
  display: block;
  height: 72px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  overflow: hidden;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-name {
  font-family: var(--font-display);
  color: var(--color-dark);
  line-height: 1;
}
.brand-name .big {
  display: block;
  font-size: 21px;
  letter-spacing: 0.02em;
  font-style: italic;
  font-weight: 400;
}
.brand-name .est {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-top: 5px;
  font-weight: 600;
}

.nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav a {
  font-family: var(--font-body);
  color: var(--color-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 14px;
  transition: color 0.15s;
}
.nav a:hover { color: var(--color-primary); text-decoration: none; }

/* Pre-JS hide of dropdown children. Server renders the flat nav
   list — every "Resources > Ebooks", "Resources > Mere Fidelity
   Podcast", etc. as its own inline <a> — and nav-dropdowns.js
   reorganizes them into a "Resources" dropdown after parse. Between
   first paint and the script firing, all the children showed
   inline for a frame, producing a visible flicker (worst on
   Firefox; user-test feedback flagged it). Hiding any
   data-nav-label item containing ">" until the JS runs eliminates
   the flicker — the script then wipes nav.innerHTML and rebuilds,
   so this selector matches nothing afterward and no cleanup is
   needed. The matching <noscript> override in default.hbs preserves
   the no-JS fallback so children stay reachable if the script
   never runs. */
[data-nav-dropdowns] a[data-nav-label*=">"] {
  display: none;
}

/* Desktop dropdown: parent is a <button> in the same row as flat
   links, menu is an absolutely-positioned panel. Built by
   nav-dropdowns.js from "Parent > Child" labels in Ghost admin. */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown-toggle {
  font-family: var(--font-body);
  color: var(--color-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s;
}
.nav-dropdown-toggle:hover,
.nav-dropdown.is-open .nav-dropdown-toggle { color: var(--color-primary); }
.nav-dropdown-caret {
  font-size: 10px;
  line-height: 1;
  transition: transform 0.15s;
}
.nav-dropdown.is-open .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(45, 41, 39, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s, transform 0.12s, visibility 0s linear 0.12s;
  z-index: 40;
}
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.12s, transform 0.12s;
}
.nav-dropdown-menu li { list-style: none; }
.nav-dropdown-menu a {
  display: block;
  padding: 8px 16px;
  color: var(--color-dark);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover {
  color: var(--color-primary);
  background: var(--color-page);
  text-decoration: none;
}
.nav-dropdown-menu .nav-dropdown-parent {
  border-bottom: 1px solid var(--color-rule);
  font-style: italic;
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0.02em;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sign-in {
  font-size: 14px;
  color: var(--color-muted);
  padding: 8px 12px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
}
.sign-in:hover { color: var(--color-dark); text-decoration: none; }

/* Search trigger — magnifier icon button next to Sign in. Opens
   Ghost's built-in sodo-search modal (loaded via ghost_head).
   Keyboard "/" also opens it. */
.nav-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}
.nav-search:hover {
  color: var(--color-dark);
  background: rgba(45, 41, 39, 0.05);
}
.nav-search-icon { display: block; }

.btn {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary { background: var(--color-primary); color: var(--color-white); box-shadow: 0 8px 20px -8px rgba(238,125,81,0.55); }
.btn-primary:hover { background: var(--color-secondary); }
.btn-dark { background: var(--color-dark); color: var(--color-white); }
.btn-dark:hover { background: #1a1816; }
.btn-ghost { background: transparent; color: var(--color-white); border: 1px solid rgba(255,255,255,0.35); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.btn-outline { background: transparent; color: var(--color-dark); border: 1px solid var(--color-dark); }
.btn-outline:hover { background: var(--color-dark); color: var(--color-white); }
.btn-lg { padding: 16px 32px; font-size: 16px; }

/* -------- Breadcrumb (article) -------- */

.breadcrumb {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-rule);
  padding: 14px 0;
  font-size: 13px;
  color: var(--color-muted);
}
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-secondary); text-decoration: none; }
.breadcrumb .sep { margin: 0 10px; color: var(--color-card-border); }
.breadcrumb .current { color: var(--color-dark); }

/* -------- Hero -------- */

.hero {
  /* Layered bg: a top-to-bottom dark overlay on top of the
     mo-header-bg image, with the dark color underneath as a
     fallback if the image fails to load. The overlay fades from
     0.97 at the top (texture barely visible) to 1.0 at the bottom
     (solid dark), so the image ghosts into the hero from above and
     dissolves before the band ends. Tune the top alpha for more or
     less image at the top. Orange burst on .hero::before still
     renders on top. */
  background:
    linear-gradient(to bottom, rgba(45, 41, 39, 0.90) 0%, rgba(45, 41, 39, 1) 50%),
    url("../images/mo-header-bg.jpg") center/cover no-repeat,
    var(--color-dark);
  color: var(--color-white);
  padding: 72px 0 120px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -200px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(238,125,81,0.28), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  font-weight: 600;
  margin: 0 0 24px;
}
/* Eyebrow kicker mark: a display-italic pilcrow in primary orange,
   replacing the previous SaaS-y geometric dot. The .dot span in the
   markup is intentionally empty; ::before injects the glyph so we
   don't have to touch every hero-kicker site-wide. The soft text-
   shadow pulse keeps the "active accent" feel without being a literal
   blinking light. Letter-spacing nudge corrects the pilcrow's natural
   left-side bearing so it sits flush against the kicker text. */
.hero-kicker .dot {
  display: inline-block;
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1;
  color: var(--color-primary);
  margin-right: 2px;
  animation: hero-kicker-pulse 2.4s ease-in-out infinite;
}
.hero-kicker .dot::before { content: "\00B6"; }
@keyframes hero-kicker-pulse {
  0%, 100% { text-shadow: 0 0 5px rgba(238, 125, 81, 0.40), 0 0 10px rgba(238, 125, 81, 0.20); }
  50%      { text-shadow: 0 0 9px rgba(238, 125, 81, 0.75), 0 0 18px rgba(238, 125, 81, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-kicker .dot { animation: none; }
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1.05;
  color: var(--color-white);
  margin: 0 0 28px;
}
.hero-headline em { font-style: italic; }
.hero-headline .highlight {
  background-image: linear-gradient(90deg, rgba(193, 89, 60, 0.78) 0%, rgba(193, 89, 60, 0.78) 100%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
  padding: 0 0.14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  animation: hero-highlight-sweep 0.9s 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}
@keyframes hero-highlight-sweep {
  to { background-size: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-headline .highlight {
    background-size: 100% 100%;
    animation: none;
  }
}
.hero-headline-tail {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.82em;
  line-height: 1.05;
}

.hero-sub {
  font-size: 19px;
  color: rgba(255,255,255,0.78);
  margin: 0 0 32px;
  max-width: 560px;
  line-height: 1.6;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.hero-meta {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-meta-item .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  color: var(--color-primary);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.hero-meta-item .lbl {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

.hero-visual { position: relative; }
.hero-feature {
  background: transparent;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero-feature .eyebrow {
  color: var(--color-primary);
  margin-bottom: 0;
  font-variant: small-caps;
  letter-spacing: 0.28em;
}
/* Hand-drawn circle annotation around "Latest" — single-stroke
   loop with a slight overshoot at the end (the path's last C
   segment ends inside the loop, mimicking the spiral-once-around
   pattern of a real pen mark). Draws in once on page load over
   1.4s, then stays static — addresses the "I trained myself to
   skip the hero" pattern from the May 5 user-test feedback
   without a looping animation that would itself become
   distracting. prefers-reduced-motion shows the circle drawn
   statically. The .eyebrow--circled wrapper plus .eyebrow-text
   span keeps the SVG separable from the text so it can float
   absolutely without affecting layout. */
.eyebrow--circled {
  position: relative;
  display: inline-block;
  /* .hero-feature is column flex with default cross-axis stretch,
     so a block child takes full column width; align-self lets the
     paragraph shrink-wrap to its text instead. Without this the
     circle SVG stretches across the entire hero column. */
  align-self: flex-start;
  isolation: isolate;
}
.eyebrow--circled .eyebrow-text {
  position: relative;
  z-index: 1;
}
.eyebrow-circle {
  position: absolute;
  top: -10px;
  bottom: -8px;
  left: -19px;
  right: -15px;
  pointer-events: none;
  z-index: 0;
  display: block;
}
.eyebrow-circle svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.eyebrow-circle path {
  stroke-dasharray: 820;
  stroke-dashoffset: 820;
  animation: eyebrow-circle-draw 1.4s ease-out 0.35s forwards;
}
@keyframes eyebrow-circle-draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow-circle path {
    stroke-dashoffset: 0;
    animation: none;
  }
}
.hero-feature h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 34px;
  line-height: 1.12;
  margin: 0;
  color: var(--color-white);
}
.hero-feature .byline {
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  margin: 0;
}
.hero-feature .byline em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--color-white);
}
.hero-feature .excerpt {
  font-size: 16px;
  color: rgba(255,255,255,0.78);
  line-height: 1.65;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.hero-feature .excerpt .hero-initial {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 40px;
  line-height: 1;
  color: var(--color-primary);
  min-width: 26px;
  text-align: center;
  margin-top: -3px;
}
.hero-feature .read-link {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  font-variant: small-caps;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 16px;
  display: inline-block;
}
.hero-feature .read-link:hover { color: var(--color-white); text-decoration: none; }

.hero-feature-img {
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255,255,255,0.16);
  padding: 6px;
  background: transparent;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.hero-feature-img-inner {
  /* Pin to the padded content box so the image can't overflow past
     the outline on mobile (iOS Safari handles height:100% + aspect-
     ratio + padding unreliably, which was the source of the bottom
     spill). Matching border-radius clips the image to the outer
     rounded corners. */
  position: absolute;
  inset: 6px;
  background-color: #3a332e;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
  filter: sepia(0.1) saturate(0.9);
  border-radius: 2px;
}
.hero-feature-img-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(238,125,81,0.22), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 8px);
}

/* -------- Topic rail -------- */

.topics {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-rule);
  padding: 22px 0;
  position: relative;
}
.topics-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* old Edge */
}
.topics-inner::-webkit-scrollbar {  /* Chromium, Safari */
  display: none;
  width: 0;
  height: 0;
}
/* Scroll-progress thumb. Sits one pixel above the rail's
   existing bottom hairline (1px tall, brand orange). Stays
   inside the padding box because the mobile rule below adds
   overflow: hidden on .topics; positioning the thumb at
   bottom: -1 like a typical "on the border" overlay would
   clip it on the very platform we're trying to indicate to.
   Sized + positioned via inline width/left set by the inline
   handler in topic-rail.hbs. Hidden until JS confirms the
   rail is actually scrollable. */
.topics-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--color-primary);
  width: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.topics-progress[hidden] { display: none; }
.topics-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
  white-space: nowrap;
  padding-right: 12px;
  border-right: 1px solid var(--color-rule);
}
.topic-pill {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  color: var(--color-dark);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.topic-pill:hover { background: var(--color-background); border-color: var(--color-card-border); text-decoration: none; }
.topic-pill.is-active { background: var(--color-dark); color: var(--color-white); }

/* -------- Today (featured) -------- */

.today {
  padding: 96px 0 72px;
  background: var(--color-page);
}

.today-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 48px;
  align-items: stretch;
}
.article-card {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.article-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); text-decoration: none; }

/* -------- Feature entry (Today's main piece) -------- */

.feature-entry {
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}
.feature-entry:hover { text-decoration: none; }
.feature-entry:hover .feature-title { color: var(--color-secondary); }

.feature-plate {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--color-card-border);
  padding: 8px;
  background: var(--color-white);
  box-shadow: 0 4px 14px rgba(45,41,39,0.08);
}
.feature-plate-inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  filter: sepia(0.12) saturate(0.9) contrast(1.02);
  background: linear-gradient(135deg, #4a3f36 0%, #2d2927 100%);
  background-size: cover;
  background-position: center;
}
.feature-plate-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 10px);
}

.feature-body { padding: 0 8px; flex: 1; display: flex; flex-direction: column; }

.feature-topic {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 18px;
  font-variant: small-caps;
}

.feature-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 48px;
  line-height: 1.08;
  color: var(--color-dark);
  margin: 0 0 24px;
  transition: color 0.2s;
}

.feature-excerpt {
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-dark);
  margin: 0 0 28px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.feature-excerpt .feature-initial {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 46px;
  line-height: 1;
  color: var(--color-secondary);
  min-width: 32px;
  text-align: center;
  margin-top: -4px;
}

.feature-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  border-top: 1px solid var(--color-card-border);
  padding-top: 18px;
  margin-top: auto;
}
.feature-byline {
  font-size: 15px;
  color: var(--color-dark);
  margin: 0;
}
.feature-byline em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
}
.feature-date {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
  white-space: nowrap;
}

.card-media {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  position: relative;
}
.card-media.mock-1 { background: linear-gradient(135deg, #4a3f36 0%, #2d2927 100%); }
.card-media.mock-2 { background: linear-gradient(135deg, #e6d5b8 0%, #c8b898 100%); }
.card-media.mock-3 { background: linear-gradient(135deg, #6b6660 0%, #3a332e 100%); }
.card-media.mock-4 { background: linear-gradient(135deg, #c1593c 0%, #8a3e29 100%); }
.card-media.mock-5 { background: linear-gradient(135deg, #d9c6a7 0%, #a89677 100%); }
.card-media.mock-6 { background: linear-gradient(135deg, #2d2927 0%, #5a4a3e 100%); }
.card-media.mock-7 { background: linear-gradient(135deg, #ee7d51 0%, #c1593c 100%); }

.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 10px);
}

.card-body {
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-topic {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 14px;
}

.card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.18;
  color: var(--color-dark);
  margin: 0 0 14px;
}
.card-title em { font-style: italic; }

.article-card.is-featured .card-title { font-size: 38px; }

.card-byline {
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 16px;
}
.card-byline .author {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-dark);
  font-size: 16px;
}

.card-excerpt {
  font-size: 16px;
  color: var(--color-dark);
  line-height: 1.6;
  margin: 0 0 22px;
  flex: 1;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--color-rule);
  font-size: 13px;
  color: var(--color-muted);
}
.card-meta .read-more {
  color: var(--color-secondary);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.today-main,
.today-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar-heading {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-card-border);
}
.sidebar-heading .eyebrow { margin-bottom: 6px; }
.sidebar-heading h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 24px;
  line-height: 1.15;
  color: var(--color-dark);
  margin: 0;
}

.read-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.read-list li {
  position: relative;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-rule);
}
.read-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.read-list li:first-child { padding-top: 0; }
.read-list a {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  align-items: flex-start;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s;
}
.read-list a:hover { text-decoration: none; }
.read-list a:hover .card-title { color: var(--color-secondary); }

/* Cover-image plate — matches the entry-plate chrome in This Week
   so the sidebar list reads as a smaller-scale version of the same
   editorial card style. White backing + card border + subtle
   shadow on the outside, sepia-toned image inside, gradient
   fallback when a post has no feature_image. */
.read-plate {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--color-card-border);
  padding: 4px;
  background: var(--color-white);
  box-shadow: 0 2px 6px rgba(45,41,39,0.06);
}
.read-plate-inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  filter: sepia(0.12) saturate(0.85) contrast(1.02);
  background-size: cover;
  background-position: center;
  background-color: #4a3f36;
  background-image: linear-gradient(135deg, #4a3f36 0%, #2d2927 100%);
}
.read-text { min-width: 0; }

.read-list .card-topic {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 6px;
}
.read-list .card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  color: var(--color-dark);
  margin: 0 0 6px;
  transition: color 0.15s;
}
.read-list .card-title em { font-style: italic; }
.read-list .card-excerpt {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0 0 8px;
}
.read-list .card-byline {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
}
.read-list .card-byline .author {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-dark);
  font-size: 14px;
}

/* -------- Tag filter view (inside Today section) -------- */

.today-tag {
  max-width: 1120px;
  margin: 0 auto;
}
.tag-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.tag-header .eyebrow {
  color: var(--color-primary);
  font-variant: small-caps;
  letter-spacing: 0.28em;
  margin-bottom: 12px;
}
.tag-header h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.12;
  color: var(--color-dark);
  margin: 0;
}

.today-tag .week-grid { row-gap: 0; }
.today-tag .week-grid::before {
  top: 24px;
  bottom: 24px;
}
.today-tag .entry:nth-child(n+3)::before {
  background: var(--color-page);
}

.tag-more {
  text-align: center;
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--color-card-border);
  position: relative;
}
.tag-more::before {
  content: "\2766";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  font-size: 16px;
  line-height: 1;
  background: transparent;
}
.tag-more-link {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-secondary);
  font-weight: 600;
  font-variant: small-caps;
}
.tag-more-link:hover { color: var(--color-primary); text-decoration: none; }

/* -------- Weekly Digest (typographic signup) -------- */

.digest-section {
  padding: 56px 0;
  background: var(--color-page);
  position: relative;
}

.digest-cta {
  margin: 0 auto;
  max-width: 1040px;
  padding: 28px 24px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
  position: relative;
  border-top: 1px solid var(--color-card-border);
  border-bottom: 1px solid var(--color-card-border);
}
.digest-cta::before {
  content: none;
}
.digest-copy { position: relative; }
.digest-copy .eyebrow {
  color: var(--color-primary);
  font-variant: small-caps;
  letter-spacing: 0.28em;
  margin-bottom: 8px;
}
.digest-copy h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.15;
  color: var(--color-dark);
  margin: 0 0 8px;
}
.digest-copy p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
  max-width: 360px;
}

.digest-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 6px 18px;
  align-items: end;
}
.digest-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.digest-field label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
  font-variant: small-caps;
}
.digest-field input {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 6px 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-card-border);
  border-radius: 0;
  color: var(--color-dark);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.digest-field input::placeholder {
  color: var(--color-muted);
  font-style: italic;
  opacity: 0.6;
}
.digest-field input:focus {
  border-bottom-color: var(--color-primary);
}
.digest-submit {
  /* Sits on its own row beneath the three inputs so the fields have
     room to breathe. Right-aligned keeps the visual rhythm from when
     it lived inline at the end of the row. */
  grid-column: 1 / -1;
  justify-self: end;
  background: transparent;
  color: var(--color-secondary);
  border: 0;
  padding: 10px 0;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
}
.digest-submit::after {
  content: " \2192";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s;
}
.digest-submit:hover { color: var(--color-primary); }
.digest-submit:hover::after { transform: translateX(4px); }
.digest-fineprint { display: none; }
/* Status line under the digest form for inline errors / progress. */
.digest-form .digest-status {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-muted);
  min-height: 0;
}
.digest-form .digest-status:empty { display: none; }
.digest-form .digest-status.is-error { color: var(--color-secondary); }

/* -------- Divider flourish -------- */

.flourish {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 280px;
  margin: 0 auto 48px;
}
.flourish::before,
.flourish::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-card-border);
}
/* Divider mark: the MO site mark rendered as a small badge by the
   shared flourish-mark partial. Source is a transparent PNG so the
   mark reads cleanly on any page background. display: block (instead
   of inline-block + vertical-align) avoids inline-baseline drift that
   left the mark sitting visibly above the divider line in some
   contexts. Size bumped from 24 to 32 so the mark reads as a logo
   at 100% browser zoom on larger desktops, not a smudge. */
.flourish-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: block;
  background: transparent;
}
@media (max-width: 640px) {
  .flourish { margin-bottom: 24px; }
}

/* -------- This Week (book-page entries) -------- */

.this-week {
  padding: 48px 0 96px;
  background: var(--color-background);
}
.this-week .section-intro { margin-bottom: 24px; }
.this-week .flourish { margin-bottom: 24px; }

.week-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 72px;
  row-gap: 0;
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
}
.week-grid::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 50%;
  width: 1px;
  background: var(--color-card-border);
}

.entry {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  align-items: flex-start;
  padding: 36px 0;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}
.entry:hover { text-decoration: none; }
.entry:hover .entry-title { color: var(--color-secondary); }

.entry:nth-child(n+3) {
  border-top: 1px solid var(--color-card-border);
}
.entry:nth-child(n+3)::before {
  content: "\2766";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  font-size: 14px;
  line-height: 1;
  background: transparent;
}

.entry-plate {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--color-card-border);
  padding: 6px;
  background: var(--color-white);
  box-shadow: 0 2px 6px rgba(45,41,39,0.06);
}
.entry-plate-inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  filter: sepia(0.12) saturate(0.85) contrast(1.02);
  background-size: cover;
  background-position: center;
  background-color: #4a3f36;
  background-image: linear-gradient(135deg, #4a3f36 0%, #2d2927 100%);
}
.entry-plate-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 10px);
}

.entry-topic {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 12px;
  font-variant: small-caps;
}
/* Render every tag as a candidate; show every non-author one joined
   by "·". Ghost's match helper has no regex, so attribute selectors
   do the filtering. Same pattern applies to feature/card/article
   topic eyebrows below. */
.entry-topic--candidates .entry-topic-tag,
.feature-topic--candidates .feature-topic-tag,
.card-topic--candidates .card-topic-tag,
.article-topic--candidates .article-topic-tag { display: none; }
.entry-topic--candidates .entry-topic-tag:not([data-tag-slug^="author-"]),
.feature-topic--candidates .feature-topic-tag:not([data-tag-slug^="author-"]),
.card-topic--candidates .card-topic-tag:not([data-tag-slug^="author-"]),
.article-topic--candidates .article-topic-tag:not([data-tag-slug^="author-"]) { display: inline; }
/* "·" separator: the general-sibling (~) combinator ignores hidden
   author tags between two visible ones. */
.entry-topic--candidates .entry-topic-tag:not([data-tag-slug^="author-"]) ~ .entry-topic-tag:not([data-tag-slug^="author-"])::before,
.feature-topic--candidates .feature-topic-tag:not([data-tag-slug^="author-"]) ~ .feature-topic-tag:not([data-tag-slug^="author-"])::before,
.card-topic--candidates .card-topic-tag:not([data-tag-slug^="author-"]) ~ .card-topic-tag:not([data-tag-slug^="author-"])::before,
.article-topic--candidates .article-topic-tag:not([data-tag-slug^="author-"]) ~ .article-topic-tag:not([data-tag-slug^="author-"])::before {
  content: " \00B7 ";
  color: var(--color-muted);
  margin: 0 2px;
}
/* Trailing static type label ("Long Read") only shows when there's
   at least one visible topic tag. */
.feature-topic--candidates .feature-topic-type::before {
  content: " \00B7 ";
  color: var(--color-muted);
  margin: 0 2px;
}
.entry-topic--candidates:not(:has(.entry-topic-tag:not([data-tag-slug^="author-"]))),
.feature-topic--candidates:not(:has(.feature-topic-tag:not([data-tag-slug^="author-"]))),
.card-topic--candidates:not(:has(.card-topic-tag:not([data-tag-slug^="author-"]))),
.article-topic--candidates:not(:has(.article-topic-tag:not([data-tag-slug^="author-"]))) { display: none; }

.entry-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 28px;
  line-height: 1.18;
  color: var(--color-dark);
  margin: 0 0 16px;
  transition: color 0.2s;
}

.entry-excerpt {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-dark);
  margin: 0 0 20px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.entry-excerpt .entry-initial {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  color: var(--color-secondary);
  min-width: 20px;
  text-align: center;
  margin-top: -2px;
}

.entry-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  border-top: 1px solid var(--color-rule);
  padding-top: 14px;
  margin-top: 4px;
}
.entry-byline {
  font-size: 14px;
  color: var(--color-dark);
  margin: 0;
}
.entry-byline em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
}
.entry-date {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
  white-space: nowrap;
}

/* -------- Journal promo band -------- */

.journal-band {
  padding: 96px 0;
  background: var(--color-dark);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}
.journal-band::before {
  content: "";
  position: absolute;
  bottom: -240px;
  left: -100px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(238,125,81,0.22), transparent 60%);
  pointer-events: none;
}

.journal-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
}

.journal-art {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.journal-art-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.journal-art-inner {
  text-align: center;
  padding: 40px;
  color: var(--color-dark);
}
.journal-art-inner .mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 72px;
  line-height: 1;
  color: var(--color-secondary);
  margin-bottom: 20px;
}
.journal-art-inner .title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 12px;
}
.journal-art-inner .issue {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.journal-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  color: var(--color-white);
  margin: 0 0 24px;
}
.journal-copy h2 em { font-style: italic; }
.journal-copy p {
  font-size: 18px;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 500px;
}
.journal-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* -------- Podcasts (book-page entries) -------- */

.listen {
  padding: 96px 0;
  background: var(--color-page);
}

.listen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 72px;
  row-gap: 0;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
.listen-grid::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 50%;
  width: 1px;
  background: var(--color-card-border);
}

.pod-entry {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 0;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: opacity 0.2s;
}
.pod-entry:hover { text-decoration: none; }
.pod-entry:hover .pod-title { color: var(--color-secondary); }

.pod-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 42px;
  color: var(--color-primary);
  line-height: 1;
  margin: 0;
}

.pod-topic {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
  margin: 0;
  font-variant: small-caps;
}

.pod-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 26px;
  line-height: 1.18;
  color: var(--color-dark);
  margin: 0;
  transition: color 0.2s;
}

.pod-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.pod-listen-link {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-secondary);
  font-weight: 600;
  font-variant: small-caps;
  border-top: 1px solid var(--color-rule);
  padding-top: 14px;
  margin-top: 8px;
  display: inline-block;
}

/* -------- Readers (book-page testimonials) -------- */

.readers {
  padding: 96px 0;
  background: var(--color-background);
}

.reader-feature {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.35;
  color: var(--color-dark);
  max-width: 820px;
  margin: 0 auto 48px;
  text-align: center;
  padding: 0 24px;
  position: relative;
}
.reader-feature::after {
  content: "\2766";
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  font-size: 18px;
  line-height: 1;
  margin: 22px auto 0;
  text-align: center;
}
/* Coda quote at the bottom of the section — same display sizing as
   the opening feature, but quieter (no flourish, smaller scale, more
   muted color). Sits below the grid as a closing note. */
.reader-feature--coda {
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--color-muted);
  margin: 48px auto 0;
}
.reader-feature--coda::after { display: none; }

.readers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  column-gap: 56px;
  row-gap: 32px;
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
}
.readers-grid::before,
.readers-grid::after {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--color-card-border);
}
.readers-grid::before { left: calc(33.333% - 1px); }
.readers-grid::after { left: calc(66.666% - 1px); }

.reader-quote {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-dark);
  position: relative;
  text-align: center;
}
.reader-quote p { margin: 0; }
/* The middle column carries the long testimonial — bump it slightly
   so the eye reads it as the anchor, with the two short side quotes
   playing supporting roles. */
.reader-quote--long {
  font-size: 19px;
  line-height: 1.6;
}

/* Membership-context override for the long-in-middle layout. The
   homepage's 3-medium-quote grid keeps its 2-col tablet step at 1024px
   (defined further down). The membership grid skips that step and goes
   straight to a single column when the side quotes can no longer share
   a row with the long middle quote without breaking the rhythm. */
.membership .readers-grid { row-gap: 32px; }
@media (max-width: 1024px) {
  .membership .readers-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .membership .readers-grid::before,
  .membership .readers-grid::after { display: none; }
  .membership .reader-quote { padding: 0 12px; }
  .membership .reader-quote--long { font-size: 18px; line-height: 1.55; }
  .membership .reader-feature--coda { margin-top: 36px; }
}

/* -------- Membership CTA -------- */

.membership-cta {
  padding: 120px 0;
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.membership-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(238,125,81,0.14), transparent 60%);
  pointer-events: none;
}

.cta-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 28px;
}
.cta-inner .eyebrow { color: var(--color-primary); }
.cta-inner h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.1;
  margin: 0 0 24px;
}
.cta-inner h2 em { font-style: italic; }
.cta-inner .highlight {
  background-color: rgba(193, 89, 60, 0.78);
  padding: 0 0.14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cta-inner p {
  font-size: 19px;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  margin: 0 0 36px;
}
.cta-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* -------- Footer flourish + footer -------- */

.closing-flourish {
  text-align: center;
  padding: 56px 0 32px;
  background: var(--color-page);
  color: var(--color-primary);
}
/* Footer flourish uses the same heart-aflame mark at a larger size. */
.closing-flourish .flourish-mark {
  width: 48px;
  height: 48px;
}
.wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--color-dark);
  margin: 10px 0 0;
}

.site-footer {
  background: var(--color-page);
  padding: 56px 0 0;
  border-top: 1px solid var(--color-rule);
}
.site-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}
.site-footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-dark);
}
.site-footer-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}
.site-footer-wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-dark);
}
.site-footer-wordmark em { font-style: italic; }
.site-footer-tagline {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--color-muted);
  max-width: 28ch;
  line-height: 1.5;
}
.site-footer-heading {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-rule);
}
.site-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer-list li { margin-bottom: 10px; }
.site-footer-list li:last-child { margin-bottom: 0; }
.site-footer-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-dark);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.4;
  transition: color 0.15s;
}
.site-footer-list a:hover { color: var(--color-secondary); }
.site-footer-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: currentColor;
  color: var(--color-muted);
  transition: color 0.15s;
}
.site-footer-list a:hover .site-footer-icon { color: var(--color-secondary); }

.site-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 22px 0 28px;
  border-top: 1px solid var(--color-rule);
  font-size: 13px;
  color: var(--color-muted);
}
.site-footer-meta {
  margin: 0;
  max-width: 64ch;
  line-height: 1.5;
}
.footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-nav a { color: var(--color-muted); text-decoration: none; }
.footer-nav a:hover { color: var(--color-secondary); }

@media (max-width: 1024px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .site-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .site-footer { padding-top: 40px; }
  .site-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 40px;
  }
  .site-footer-brand { grid-column: auto; }
  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 0 32px;
  }
}

/* -------- Drop-cap excerpts (book-page aesthetic) --------
   Ghost's Handlebars has no `truncate` helper, so we can't split the
   first letter of an excerpt server-side. Instead, we style the first
   letter with ::first-letter to match the inherited-initial look from
   the mockups. The same treatment is reused across hero, feature,
   entry, and pod excerpts.
*/

/* Excerpt dropcaps used to apply to homepage hero, feature, entry,
   and pod previews via .hero-excerpt-dropcap / .feature-excerpt-
   dropcap / .entry-excerpt-dropcap / .pod-excerpt-dropcap classes.
   Removed in user-test pass — four cards in a row each carrying
   their own large initial reads as a tic, not an ornament. The
   dropcap stays where the editorial weight is intentional: real
   articles (.article-content > p:first-of-type::first-letter, plus
   the dark-mode override) and the About-page lede
   (.about-lede::first-letter). The corresponding .x-dropcap classes
   were also stripped from the markup, so no orphan no-op selectors
   are left behind. */

/* -------- Avatar initials (show first letter only) --------
   We render the full author name inside a span and then use a CSS
   trick to show only its first letter. Setting font-size: 0 hides all
   text; ::first-letter restores it for the initial alone.
*/

.meta-avatar-initial,
.author-bio-avatar-initial,
.archive-avatar-initial {
  font-size: 0;
  line-height: 1;
}
.meta-avatar-initial::first-letter {
  font-size: 18px;
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: italic;
}
.author-bio-avatar-initial::first-letter {
  font-size: 36px;
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: italic;
}
.archive-avatar-initial::first-letter {
  font-size: 40px;
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: italic;
}

/* -------- Koenig editor required classes -------- */

.kg-width-wide,
.kg-width-full {
  position: relative;
  width: 100%;
}

.article-content .kg-width-wide {
  max-width: 1040px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.article-content .kg-width-full {
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.kg-image {
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  display: block;
}

.kg-image-card figcaption,
.kg-embed-card figcaption,
.kg-gallery-card figcaption {
  font-size: 13px;
  color: var(--color-muted);
  font-style: italic;
  text-align: center;
  margin-top: 10px;
}

.kg-gallery-container {
  display: flex;
  flex-direction: column;
  max-width: 1040px;
  width: 100vw;
  margin: 0 auto;
}
.kg-gallery-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.kg-gallery-image img {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
}
.kg-gallery-row:not(:first-of-type) { margin: 0.75em 0 0 0; }
.kg-gallery-image:not(:first-of-type) { margin: 0 0 0 0.75em; }

.kg-bookmark-card {
  width: 100%;
  margin: 24px 0;
}
.kg-bookmark-container {
  display: flex;
  min-height: 148px;
  color: var(--color-dark);
  background: var(--color-white);
  font-family: var(--font-body);
  text-decoration: none;
  border-radius: 4px;
  box-shadow: var(--shadow-card);
}
.kg-bookmark-content {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px;
}
.kg-bookmark-title {
  font-weight: 600;
}

/* -------- Ghost custom-font CSS variable hooks -------- */

body {
  font-family: var(--gh-font-body, 'Source Serif Pro'), Georgia, serif;
}
.section-heading,
.feature-title,
.entry-title,
.pod-title,
.article-title,
.article-dek,
.card-title,
.hero-headline,
.hero-feature h3,
.journal-copy h2,
.cta-inner h2,
.error-title,
.archive-header h1,
.author-bio-body h4,
.sidebar-heading h3,
.tag-header h3,
.reader-feature,
.reader-quote,
.wordmark {
  font-family: var(--gh-font-heading, 'IM Fell Great Primer'), 'Source Serif Pro', Georgia, serif;
}

/* =============================================================
   Article (post / page) specific styles
   ============================================================= */

.article-header {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 72px 0 96px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.article-header::before {
  content: "";
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 520px;
  background: radial-gradient(ellipse, rgba(238,125,81,0.22), transparent 65%);
  pointer-events: none;
}

.article-header-inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 28px;
}

.article-topic {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid rgba(238,125,81,0.4);
  border-radius: 999px;
  margin-bottom: 28px;
  text-decoration: none;
}
/* Inner per-tag links hover independently. The parent .article-topic
   is a <p> — not a link — so no parent hover rule (one would cascade
   via `color: inherit` and brighten every sibling tag at once). */
.article-topic-tag { color: inherit; text-decoration: none; transition: color 0.15s; }
.article-topic-tag:hover { color: var(--color-white); text-decoration: none; }

.article-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.08;
  margin: 0 0 24px;
  color: var(--color-white);
}

/* Audio-article Listen block sits below the meta line in the dark
   article header. Members-only — rendered server-side only for paid
   @member.status. The trigger swaps to a native audio element on
   click via assets/js/article-audio.js. */
.article-audio {
  margin: 32px auto 0;
  display: flex;
  justify-content: center;
}
.article-audio-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(238, 125, 81, 0.12);
  border: 1px solid rgba(238, 125, 81, 0.4);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.article-audio-trigger:hover {
  background: rgba(238, 125, 81, 0.22);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.article-audio-icon { width: 11px; height: 11px; fill: currentColor; flex: 0 0 auto; }
.article-audio-player {
  width: 100%;
  max-width: 520px;
  height: 48px;
  border-radius: 999px;
}
.ao-player {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 520px;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: rgba(238, 125, 81, 0.08);
  border: 1px solid rgba(238, 125, 81, 0.35);
}
.ao-player audio { display: none; }
.ao-play {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--color-primary, #ee7d51);
  color: var(--color-white, #fff);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.ao-play:hover { background: #e26a3b; }
.ao-play:active { transform: scale(0.96); }
.ao-icon { width: 16px; height: 16px; fill: currentColor; }
.ao-icon-pause { display: none; }
.ao-player.is-playing .ao-icon-play { display: none; }
.ao-player.is-playing .ao-icon-pause { display: block; }
.ao-track {
  position: relative;
  flex: 1 1 auto;
  height: 18px;
  cursor: pointer;
  touch-action: none;
}
.ao-track-bg,
.ao-track-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  border-radius: 2px;
  transform: translateY(-50%);
}
.ao-track-bg {
  left: 0;
  right: 0;
  background: rgba(238, 125, 81, 0.18);
}
.ao-track-fill {
  left: 0;
  width: 0;
  background: var(--color-primary, #ee7d51);
}
.ao-track-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--color-primary, #ee7d51);
  transform: translateY(-50%);
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(238, 125, 81, 0.2);
}
.ao-time {
  flex: 0 0 auto;
  font-family: var(--font-body, sans-serif);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary, #ee7d51);
  letter-spacing: 0.02em;
  min-width: 82px;
  text-align: right;
}
.ao-player.is-preparing .ao-time {
  font-variant-numeric: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
  animation: ao-pulse 1.3s ease-in-out infinite;
}
.ao-player.is-preparing .ao-play { opacity: 0.75; }
.ao-speed {
  flex: 0 0 auto;
  min-width: 36px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(238, 125, 81, 0.4);
  background: transparent;
  color: var(--color-primary, #ee7d51);
  font-family: var(--font-body, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s, border-color 0.15s;
}
.ao-speed:hover { background: rgba(238, 125, 81, 0.14); border-color: var(--color-primary, #ee7d51); }
@keyframes ao-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@media (max-width: 480px) {
  .ao-player { padding: 6px 12px 6px 6px; gap: 10px; }
  .ao-play { width: 36px; height: 36px; }
  .ao-time { min-width: 72px; font-size: 11px; }
}
.article-title em { font-style: italic; }
.article-title .highlight {
  background-color: rgba(193,89,60,0.78);
  padding: 0 0.14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.article-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
  margin: 0 auto 40px;
  max-width: 640px;
}

.article-meta {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.14);
  flex-wrap: wrap;
}
.meta-author {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.meta-author:hover { text-decoration: none; }
.meta-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ee7d51, #c1593c);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  overflow: hidden;
}
.meta-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.meta-author-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--color-white);
}
.meta-author-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
}
.meta-new-contributor {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.4;
}
.new-contributor-pill {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 6px 0 0;
}
.meta-dot { color: rgba(255,255,255,0.3); }
.meta-item {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
}

/* -------- Feature image (borderless, gradient) -------- */

.article-feature-img {
  max-width: 1080px;
  margin: -56px auto 0;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}
.article-feature-img-inner {
  aspect-ratio: 16 / 8;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #4a3f36 0%, #2d2927 60%, #c1593c 140%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.article-feature-img-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.article-feature-img-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 35%, rgba(238,125,81,0.3), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 10px);
}
.article-feature-caption {
  max-width: 1024px;
  margin: 14px auto 0;
  padding: 0 28px;
  font-size: 13px;
  color: var(--color-muted);
  font-style: italic;
  text-align: center;
}

/* -------- Article body -------- */

.article-body {
  padding: 72px 0 24px;
}

.article-body-inner {
  display: grid;
  grid-template-columns: 160px minmax(0, 720px) 160px;
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
}

.article-rail {
  padding-top: 6px;
  position: sticky;
  top: 100px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* The In-This-Essay rail stays put at its original position instead
   of following the scroll — Share rail keeps its sticky behavior. */
.article-rail-toc {
  position: static;
  top: auto;
}
/* Both TOC containers start with the `hidden` attribute; toc.js only
   removes it when the article has H2s. The `.article-rail` (display:flex)
   and `.toc-mobile` (display:block, in the 1024px media query) rules
   otherwise win over the attribute's default display:none. */
.article-rail[hidden],
.toc-mobile[hidden] { display: none !important; }

.rail-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
}

.share-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.share-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none;
}
.share-btn:hover { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); text-decoration: none; }

.article-content {
  font-size: 19px;
  line-height: 1.75;
  color: var(--color-dark);
}

.article-content p { margin: 0 0 24px; }

.article-content > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 1.8em;
  line-height: 1;
  padding-right: 0.08em;
  color: var(--color-secondary);
  font-style: italic;
}

.article-content h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.2;
  margin: 56px 0 20px;
  color: var(--color-dark);
  position: relative;
  padding-top: 24px;
}
.article-content h2 em { font-style: italic; }
.article-content h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--color-primary);
}

.article-content h2 .numeral {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  font-size: 22px;
  display: block;
  margin-bottom: 8px;
  font-weight: 400;
}

.article-content h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  margin: 40px 0 14px;
}
.article-content h3 em { font-style: italic; }

.article-content blockquote {
  margin: 40px -40px;
  padding: 0 60px;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.55;
  color: var(--color-dark);
  position: relative;
}
.article-content blockquote::before {
  content: '\201C';
  position: absolute;
  top: -24px;
  left: 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 96px;
  line-height: 1;
  color: rgba(238,125,81,0.35);
}
.article-content blockquote p { margin: 0 0 12px; }
.article-content blockquote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  letter-spacing: 0.06em;
  margin-top: 12px;
}
.article-content blockquote cite::before {
  content: "\2014 ";
  color: var(--color-primary);
}

.article-content a:not(.btn) {
  color: var(--color-secondary);
  border-bottom: 1px solid rgba(193,89,60,0.3);
}
.article-content a:not(.btn):hover { color: var(--color-primary); border-bottom-color: var(--color-primary); text-decoration: none; }

.article-content em { font-style: italic; }
.article-content strong { font-weight: 600; }

.article-content ul,
.article-content ol {
  margin: 0 0 28px;
  padding-left: 28px;
}
.article-content li { margin-bottom: 10px; }

.article-content hr {
  border: 0;
  text-align: center;
  margin: 48px 0;
  height: 20px;
  position: relative;
}
.article-content hr::before {
  content: "\00A7 \00A7 \00A7";
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  letter-spacing: 0.5em;
  font-size: 16px;
}

.article-content img,
.article-content figure {
  max-width: 100%;
  height: auto;
  margin: 32px 0;
}
.article-content figure img { margin: 0; }

/* iframes (YouTube, Vimeo, embeds) — Ghost's embed cards render the
   iframe with literal width/height attributes from the provider
   (e.g. YouTube's 728x409). Without these overrides, on mobile the
   728px iframe widens its ancestor containers past the viewport,
   which then causes paragraphs in the same container to render at
   the wider width and clip their tails at the right edge. Force
   full-width responsive with a 16:9 default. */
.article-content iframe,
.article-content .kg-embed-card,
.article-content .kg-embed-card iframe {
  max-width: 100%;
  width: 100%;
}
/* aspect-ratio + height must be on the higher-specificity selector so
   they win over Ghost's cards.min.css which loads after screen.min.css
   via {{ghost_head}} and would otherwise override same-specificity rules. */
.article-content iframe,
.article-content .kg-embed-card iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
}
.article-content figcaption {
  font-size: 13px;
  color: var(--color-muted);
  font-style: italic;
  text-align: center;
  margin-top: 10px;
}

/* -------- Soft post gate (5-paragraph cutoff) --------
   The gate fades the last visible paragraph into the background and
   then presents a sign-up / upgrade card. Injected by post-gate.js. */
.article-content .is-gate-fade {
  mask-image: linear-gradient(to bottom, black 30%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent);
}
.post-gate-card {
  margin: 32px -40px 0;
  padding: 48px 40px;
  background: var(--color-background);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg, 12px);
  text-align: center;
  color: var(--color-dark);
}
.post-gate-card .eyebrow { margin: 0 0 12px; }
.post-gate-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  margin: 0 0 14px;
}
.post-gate-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 540px;
  margin: 0 auto 24px;
}
.post-gate-actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Inline Subscribe form inside the free-tier gate. Two-up on the
   first row (first / last), email on its own row, full-width submit
   underneath. */
.post-gate-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto 18px;
  text-align: left;
}
.post-gate-form .post-gate-field:nth-child(3),
.post-gate-form .post-gate-submit { grid-column: 1 / -1; }
.post-gate-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.post-gate-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-card-border);
  border-radius: 6px;
  background: var(--color-white);
  font: inherit;
  color: var(--color-dark);
}
.post-gate-field input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.post-gate-submit { justify-self: stretch; }
.post-gate-signin {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--color-muted);
}
.post-gate-signin-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-secondary);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.post-gate-signin-link:hover { color: var(--color-primary); }

.post-gate-status {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-muted);
  min-height: 18px;
  text-align: center;
}
.post-gate-status.is-error { color: var(--color-secondary); }

/* Inline signup success state — replaces the form in place once
   Ghost accepts the magic-link request. Shared by the post gate and
   the digest CTA. */
.inline-signup-success {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
  padding: 24px 16px;
}
.inline-signup-success .eyebrow { margin: 0 0 10px; }
.inline-signup-success h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0 0 10px;
  color: var(--color-dark);
}
.inline-signup-success p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
}
.inline-signup-success strong {
  font-weight: 600;
  color: var(--color-dark);
}

@media (max-width: 640px) {
  .post-gate-card { margin: 32px 0 0; padding: 32px 20px; }
  .post-gate-actions { width: 100%; }
  .post-gate-actions .btn { width: 100%; }
  .post-gate-form { grid-template-columns: 1fr; }
}

/* Dark mode: the post-gate card keeps its cream background (it sits
   inside the dark article body as a lit signup zone), so the nested
   h3/p must stay DARK — otherwise the article-content cascade flips
   them cream and they go invisible on the cream card.

   Specificity note: the article-content dark-mode rules
   (html[data-theme="dark"] .article-content h3 / p) are 0,2,2 and
   live ~4000 lines later in this file, so a plain
   html[data-theme="dark"] .post-gate-card h3 selector (also 0,2,2)
   loses to source order. Adding .article-content to the chain
   bumps these to 0,3,3 — wins the cascade. Same fix on
   .inline-signup-success (post-submit success state, same context). */
html[data-theme="dark"] .article-content .post-gate-card h3 {
  color: var(--color-dark);
}
html[data-theme="dark"] .article-content .post-gate-card p,
html[data-theme="dark"] .article-content .post-gate-card .post-gate-signin {
  color: var(--color-muted);
}
html[data-theme="dark"] .article-content .inline-signup-success h4,
html[data-theme="dark"] .article-content .inline-signup-success strong {
  color: var(--color-dark);
}
html[data-theme="dark"] .article-content .inline-signup-success p {
  color: var(--color-muted);
}

/* -------- Inline membership prompt -------- */

/* Mid-article member pitch — editorial prose block, no card chrome.
   Sits between paragraphs of .article-content; bordered top & bottom
   with a thin rule so it reads as an intentional pause, not a widget. */
.inline-support {
  margin: 44px 0;
  padding: 28px 0;
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.inline-support .eyebrow {
  color: var(--color-primary);
  margin: 0 0 12px;
}
.inline-support h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--color-dark);
}
.inline-support h3 em { font-style: italic; }
.inline-support p {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 18px;
  color: var(--color-dark);
  max-width: 620px;
}
.inline-support-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* -------- Author bio — editorial prose, no card -------------------- */

.author-bio {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.author-bio .flourish { margin: 0 0 24px; }
.author-bio-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.author-bio-portrait {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ee7d51, #c1593c);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 40px;
}
.author-bio-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.author-bio-initial { font-size: 0; line-height: 1; }
.author-bio-initial::first-letter { font-size: 40px; }
.author-bio-text-col { flex: 1; min-width: 0; }
.author-bio .eyebrow {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 10px;
}
.author-bio-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--color-dark);
}
.author-bio-name em { font-style: italic; }
.author-bio-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-dark);
  margin: 0 0 16px;
}
.author-bio-links {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  margin: 0;
}
.author-bio-links a {
  color: var(--color-primary);
  text-decoration: none;
  margin-right: 16px;
  transition: color 0.15s;
}
.author-bio-links a:hover { color: var(--color-secondary, #c1593c); }

/* Sub-headings within the related section ("Recent Articles",
   "More on this theme.") sit below the eyebrow and above the
   flourish for each block. Margin-top adds breathing room after
   the flourish that separates the two sub-sections. */
.related-sub-heading {
  text-align: center;
  margin: 0 0 24px;
}
.related-sub-heading--more {
  margin-top: 64px;
}

/* -------- Related -------- */

.related {
  padding: 40px 0 72px;
  background: var(--color-page);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

/* =============================================================
   Archive (tag / author) styles
   ============================================================= */

/* Dark hero treatment on tag archive headers — matches article
   headers (post.hbs). Orange radial glow behind, white display
   headline, primary-orange eyebrow. */
.archive-header {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 72px 0 96px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.archive-header::before {
  content: "";
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 520px;
  background: radial-gradient(ellipse, rgba(238, 125, 81, 0.22), transparent 65%);
  pointer-events: none;
}
.archive-header-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 28px;
}
.archive-header .eyebrow {
  color: var(--color-primary);
  font-variant: small-caps;
  letter-spacing: 0.28em;
  margin-bottom: 14px;
}
.archive-header h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.1;
  color: var(--color-white);
  margin: 0 0 18px;
}
.archive-header .archive-description {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto;
  max-width: 560px;
}
.archive-header .archive-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ee7d51, #c1593c);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 40px;
  overflow: hidden;
}
.archive-header .archive-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-body {
  padding: 72px 0 96px;
  background: var(--color-background);
}

/* -------- Pagination -------- */

.pagination {
  max-width: 1120px;
  margin: 56px auto 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--color-card-border);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  font-variant: small-caps;
  color: var(--color-muted);
}
.pagination::before {
  content: "\2766";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  font-size: 16px;
  line-height: 1;
  background: transparent;
}
.pagination a {
  color: var(--color-secondary);
  text-decoration: none;
}
.pagination a:hover { color: var(--color-primary); text-decoration: none; }
.pagination .pagination-current {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-dark);
}
.pagination .pagination-spacer { flex: 1; }

/* Numbered pagination (archive, tag, author). Prev on the left, numbered
   window in the middle with an ellipsis for gaps, Next + Last on the right.
   JS builds the number list; the server renders Prev/Next/Last so the
   control works without JS. */
.pagination--numbered { gap: 16px; flex-wrap: wrap; }
.pagination--numbered .pagination-pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  flex: 1;
}
.pagination--numbered .pagination-pages li { display: inline-flex; }
.pagination--numbered .pagination-num,
.pagination--numbered .pagination-ellipsis,
.pagination--numbered .pagination-current {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: none;
  font-variant: normal;
  font-weight: 400;
}
.pagination--numbered .pagination-num { color: var(--color-secondary); }
.pagination--numbered .pagination-num:hover { color: var(--color-primary); }
.pagination--numbered .pagination-current { color: var(--color-dark); }
.pagination--numbered .pagination-ellipsis { color: var(--color-muted); }
.pagination--numbered .pagination-prev-group,
.pagination--numbered .pagination-next-group { display: inline-flex; gap: 14px; align-items: baseline; }
.pagination--numbered .is-disabled { opacity: 0.35; }
@media (max-width: 640px) {
  .pagination--numbered {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    font-size: 11px;
  }
  .pagination--numbered .pagination-pages {
    grid-column: 1 / -1;
    order: -1;
    flex: none;
    gap: 4px 10px;
  }
  .pagination--numbered .pagination-prev-group { justify-self: start; }
  .pagination--numbered .pagination-next-group { justify-self: end; }
  .pagination--numbered .pagination-num,
  .pagination--numbered .pagination-ellipsis,
  .pagination--numbered .pagination-current { font-size: 15px; }
}
.archive-curious {
  text-align: center;
  margin-top: 40px;
}
.archive-curious-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 18px;
  color: var(--color-secondary);
  background: transparent;
  border: 1.5px solid var(--color-secondary);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.archive-curious-btn:hover {
  background: var(--color-secondary);
  color: var(--color-white);
  text-decoration: none;
}

/* =============================================================
   Error page
   ============================================================= */

.error-section {
  padding: 120px 0;
  background: var(--color-page);
  text-align: center;
}
.error-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 28px;
}
.error-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 120px;
  line-height: 1;
  color: var(--color-primary);
  margin: 0 0 20px;
}
.error-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  color: var(--color-dark);
  margin: 0 0 20px;
}
.error-title em { font-style: italic; }
.error-message {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 32px;
}

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

/* ---------- Hamburger + Mobile nav ---------- */

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  padding: 10px 8px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  margin-left: 4px;
}
.nav-toggle-bar {
  display: block;
  height: 2px;
  background: var(--color-dark);
  transition: transform 0.25s, opacity 0.2s;
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 41, 39, 0.55);
  opacity: 0;
  transition: opacity 0.25s;
}
.mobile-nav[data-open="true"] .mobile-nav-backdrop {
  opacity: 1;
}
.mobile-nav-panel {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 78%;
  max-width: 320px;
  background-color: #f1e8d5;
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
  overflow-y: auto;
  box-shadow: -16px 0 40px rgba(45, 41, 39, 0.28);
}
.mobile-nav[data-open="true"] .mobile-nav-panel {
  transform: translateX(0);
}
.mobile-nav-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-card-border);
  margin-bottom: 6px;
}
.mobile-nav-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--color-dark);
  letter-spacing: 0.02em;
}
.mobile-nav-close {
  background: transparent;
  border: 0;
  font-size: 24px;
  color: var(--color-muted);
  cursor: pointer;
  padding: 2px 8px;
  line-height: 1;
}
.mobile-nav-close:hover { color: var(--color-dark); }
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.mobile-nav-links a {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-dark);
  padding: 14px 0;
  border-bottom: 1px solid var(--color-rule);
  text-decoration: none;
}
.mobile-nav-links a:hover {
  color: var(--color-secondary);
  text-decoration: none;
}

/* Mobile dropdown group: parent renders as a heading (or link if it
   has a URL of its own), children are indented inline links so the
   whole tree is visible at once in the drawer. */
.mobile-nav-group { display: flex; flex-direction: column; }
.mobile-nav-group-heading {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--color-rule);
}
/* Toggle variant — used when the parent is a grouping only (no URL),
   so Resources / Support collapse on mobile and expand on tap.
   Inherits the heading style but swaps the element to <button> and
   adds a right-aligned caret that rotates when expanded. */
.mobile-nav-group-toggle {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-rule);
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mobile-nav-group-caret {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  color: var(--color-muted);
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}
.mobile-nav-group:not(.is-collapsed) .mobile-nav-group-caret {
  transform: rotate(0);
}
.mobile-nav-group.is-collapsed .mobile-nav-group-children {
  display: none;
}
.mobile-nav-group-parent {
  font-weight: 600;
}
.mobile-nav-group-children {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
}
.mobile-nav-group-child {
  font-size: 15px !important;
  font-weight: 400 !important;
}
.mobile-nav-actions {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--color-card-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-nav-signin {
  font-family: var(--font-body);
  background: transparent;
  border: 0;
  padding: 8px;
  font-size: 13px;
  color: var(--color-muted);
  cursor: pointer;
  letter-spacing: 0.02em;
  text-align: center;
}
.mobile-nav-signin:hover { color: var(--color-dark); }

/* Mobile search row — text + icon, full-width tap target. */
.mobile-nav-search {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  background: transparent;
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--color-dark);
  cursor: pointer;
  letter-spacing: 0.02em;
  width: 100%;
}
.mobile-nav-search:hover {
  background: rgba(45, 41, 39, 0.04);
}
.mobile-nav-search svg { color: var(--color-muted); }
.mobile-nav-actions .btn {
  width: 100%;
  max-width: none;
  padding: 12px 20px;
  font-size: 14px;
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .today-grid { grid-template-columns: 1fr; }
  .digest-section { padding: 48px 0; }
  .digest-cta { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; text-align: center; }
  .digest-copy p { margin: 0 auto; }
  .digest-form { grid-template-columns: 1fr; gap: 16px; }
  .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readers-grid::before { left: 50%; }
  .readers-grid::after { display: none; }
  .journal-grid { grid-template-columns: 1fr; gap: 48px; }
  .nav { display: none; }
  .nav-actions { display: none; }
  .nav-toggle { display: inline-flex; }
  .article-body-inner { grid-template-columns: 1fr; gap: 0; max-width: 720px; }
  .article-rail { display: none; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-content blockquote { margin: 40px 0; padding: 0 20px 0 40px; }
  .article-content blockquote::before { font-size: 56px; top: -20px; left: 0; }
  .inline-support { margin: 56px 0; }
}

@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .container { padding: 0 20px; }

  .week-grid, .listen-grid, .readers-grid { grid-template-columns: 1fr; }
  .week-grid::before, .listen-grid::before, .readers-grid::before, .readers-grid::after { display: none; }

  .hero { padding: 48px 0 64px; }
  .today, .this-week, .listen, .readers, .journal-band { padding: 64px 0; }
  .membership-cta { padding: 72px 0; }
  .nav-actions .sign-in { display: none; }

  /* Header + hamburger alignment */
  .header-inner { padding: 4px 28px; gap: 12px; }
  .brand-logo { height: 52px; }
  .brand-mark { width: 38px; height: 38px; font-size: 18px; }
  .brand-name .big { font-size: 16px; }
  .brand-name .est { font-size: 9px; margin-top: 3px; }
  .nav-toggle { width: 36px; height: 36px; padding: 9px 7px; margin-left: 0; align-self: center; }

  /* Topic rail: let it scroll horizontally inside its own band without pushing the page */
  .topics { padding: 14px 0; overflow: hidden; }
  .topics-inner { padding: 0 20px; gap: 12px; }
  .topics-label { font-size: 10px; letter-spacing: 0.18em; padding-right: 10px; }
  .topic-pill { font-size: 13px; padding: 6px 12px; }

  /* Hero: tighten headline + subhead so nothing overflows */
  .hero-headline { font-size: clamp(42px, 10vw, 56px); }
  .hero-headline-tail { font-size: 0.7em; }
  .hero-sub { font-size: 16px; }
  .hero-ctas { flex-direction: row; align-items: stretch; gap: 8px; flex-wrap: nowrap; }
  .hero-ctas .btn { flex: 1 1 0; min-width: 0; width: auto; padding: 12px 14px; font-size: 13px; }
  .hero-ctas .btn-lg { padding: 12px 14px; font-size: 13px; }
  .hero-ctas .btn:only-child { flex: 0 0 auto; }
  /* Feature image on mobile: fill the 16:10 frame with `cover` so
     the box is always occupied, regardless of source aspect ratio.
     Center-position keeps the subject roughly middle. */
  .hero-feature-img-inner { background-size: cover; }

  /* Today feature (homepage) */
  .feature-entry { align-items: center; text-align: center; }
  .feature-plate { padding: 5px; width: 100%; max-width: 420px; margin: 0 auto; }
  .feature-body { width: 100%; }
  .feature-meta { justify-content: center; }
  .feature-title { font-size: clamp(28px, 8vw, 36px); }
  .feature-excerpt { font-size: 16px; }
  .feature-meta { flex-direction: column; align-items: center; gap: 6px; }

  /* Weekly Digest */
  .digest-cta { padding: 20px 16px; }

  /* Card / Entry tweaks so nothing exceeds viewport */
  .article-card.is-featured .card-title { font-size: 28px; }
  .related-grid { grid-template-columns: 1fr; }

  /* This Week entries: horizontal on mobile — small image on the
     left, text filling the rest. `min-width: 0` on the text column
     is what keeps the phrase "min-width: auto" grid default from
     pushing overflow. */
  .entry { grid-template-columns: 96px 1fr; gap: 16px; padding: 20px 0; align-items: flex-start; }
  .entry > * { min-width: 0; }
  .entry-plate { width: 96px; margin: 0; aspect-ratio: 4 / 5; }
  .entry-title { font-size: 20px; margin: 0 0 8px; }
  .entry-excerpt { font-size: 14px; margin: 0 0 10px; line-height: 1.55; }
  .entry-topic { font-size: 9px; margin: 0 0 6px; }
  /* On narrow mobile columns the byline wraps to three lines while the
     date sits on one. Stack them so byline gets the full row. */
  .entry-meta { font-size: 11px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .entry:nth-child(n+2) { border-top: 1px solid var(--color-card-border); }
  .entry:nth-child(n+3) { border-top: 1px solid var(--color-card-border); }
  .entry:nth-child(n+2)::before,
  .entry:nth-child(n+3)::before { display: none; }

  /* Article page */
  .article-header { padding: 48px 0 72px; }
  .article-meta { gap: 8px 14px; flex-wrap: wrap; justify-content: center; }
  .meta-authors, .meta-authors-fallback { width: 100%; display: flex; justify-content: center; }
  .meta-dot { display: none; }
  .meta-dot.meta-dot--date { display: inline; }
  .author-bio { margin-top: 24px; }
  .author-bio-layout { gap: 18px; }
  .author-bio-portrait { width: 112px; height: 112px; font-size: 30px; }
  .author-bio-initial::first-letter { font-size: 30px; }
  .author-bio-name { font-size: 22px; }
  .article-content { font-size: 17px; }
  .article-content > p:first-of-type::first-letter { font-size: 1.6em; }
}

/* =============================================================
   Membership page
   Rendered by custom-membership.hbs. Hero classes are prefixed
   `mb-` so they don't collide with the homepage hero.
   ============================================================= */

.membership br.mobile-only { display: none; }
@media (max-width: 640px) {
  .membership br.mobile-only { display: inline; }
}

/* --- Membership hero --- */
.mb-hero {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 56px 0 88px;
  position: relative;
}
.mb-hero .hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.mb-hero .hero-content {
  text-align: left;
  max-width: 560px;
}
.mb-hero-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.12;
  color: var(--color-white);
  margin: 0 0 22px;
}
.mb-hero-headline em { font-style: italic; }
.mb-hero-headline .highlight {
  background-color: rgba(193, 89, 60, 0.75);
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mb-hero-sub {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 16px;
  max-width: 520px;
  line-height: 1.55;
}
.mb-hero-sub:last-child { margin-bottom: 0; }
.mb-hero-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mb-hero-image img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.mb-hero-intro {
  margin-top: 48px;
  margin-bottom: 0;
}
.mb-hero-intro .section-heading { color: var(--color-white); }

/* --- Pricing --- */
.pricing {
  background: #f6f3f2;
  padding: 72px 0 96px;
}
.already-member {
  text-align: center;
  font-style: italic;
  color: var(--color-muted);
  font-size: 17px;
  margin: 0;
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 72px;
  row-gap: 0;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}
.cards::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 50%;
  width: 1px;
  background: var(--color-card-border);
}
.membership .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 48px 16px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  position: relative;
}
.membership .card.is-featured {
  background: transparent;
  border: 0;
  box-shadow: none;
  isolation: isolate;
}
.membership .card.is-featured::before,
.other-way.is-featured::before {
  content: "";
  position: absolute;
  inset: -40px -60px;
  background: radial-gradient(ellipse at center, rgba(238,125,81,0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.other-way.is-featured { isolation: isolate; }
.membership .card.is-featured .btn-primary {
  box-shadow: 0 10px 24px -8px rgba(238, 125, 81, 0.55);
}
.card-flag {
  position: absolute;
  top: 0;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  padding: 0;
  border-radius: 0;
  font-variant: small-caps;
}
.card-flag::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-primary);
}
.card-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 16px;
  letter-spacing: 0.01em;
  line-height: 1;
}
.card-label em { font-style: italic; }
.card-lifetime .card-label { color: var(--color-secondary); }
.card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.price-amount {
  font-family: var(--font-body);
  font-size: 62px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1;
  letter-spacing: -0.01em;
}
.price-interval {
  font-size: 18px;
  color: var(--color-muted);
}
.card-subtext {
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 16px;
}
.card-pitch {
  font-size: 15px;
  color: var(--color-dark);
  margin: 0 0 22px;
  line-height: 1.5;
  min-height: 2.8em;
}

/* btn-pill is a no-op on top of the theme's already pill-shaped .btn,
   but btn-inline is a new sizing variant for inline CTAs. */
.btn-pill { border-radius: 999px; padding: 16px 24px; font-size: 15px; }
.btn-inline { width: auto; padding: 14px 28px; }
.btn-tagline {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted);
  text-align: center;
  margin: 8px 0 0;
}
.membership .card .btn { width: 100%; }

.benefits {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.benefits li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  color: var(--color-dark);
  line-height: 1.5;
}
.benefits li strong {
  color: var(--color-secondary);
  font-weight: 600;
}
.benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23ee7d51' d='M6.173 11.414 2.76 8l1.414-1.414 2 2 4.586-4.586L12.173 5.4z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* --- Other ways to join --- */
.other-ways {
  max-width: 960px;
  margin: 88px auto 8px;
  padding-top: 64px;
  border-top: 1px solid var(--color-card-border);
}
.other-ways-intro {
  text-align: center;
  margin-bottom: 48px;
}
.other-ways-intro .eyebrow {
  color: var(--color-primary);
  margin-bottom: 12px;
}
.other-ways-intro .section-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 36px);
  color: var(--color-dark);
  margin: 0;
  line-height: 1.15;
}
.other-ways-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.other-way {
  display: flex;
  flex-direction: column;
  padding: 8px 32px;
  position: relative;
}
.other-way + .other-way::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--color-card-border);
}
.other-way-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--color-secondary);
  line-height: 1;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.other-way-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--color-dark);
}
.other-way-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0 0 18px;
  flex-grow: 1;
}
.other-way-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: 0.02em;
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
  padding-bottom: 2px;
}
.other-way-link:hover,
.other-way-link:focus-visible {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
  outline: none;
}
.other-way-link span {
  display: inline-block;
  margin-left: 4px;
  transition: transform 120ms ease;
}
.other-way-link:hover span,
.other-way-link:focus-visible span {
  transform: translateX(3px);
}

/* --- Included ("What You're Supporting") --- */
.included {
  background: var(--color-secondary);
  color: var(--color-white);
  padding: 96px 0;
}
.included-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  text-align: center;
  margin: 0 0 48px;
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 44px;
  margin-bottom: 56px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.benefit-item {
  color: var(--color-white);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 20px;
}
.benefit-numeral {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}
.benefit-item h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 26px;
  line-height: 1.18;
  color: var(--color-white);
  margin: 0 0 12px;
  letter-spacing: 0.005em;
}
.benefit-item p {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  line-height: 1.55;
}
.capstone {
  background: var(--color-dark);
  color: var(--color-white);
  border-radius: 14px;
  padding: 40px 48px;
  margin-bottom: 48px;
  text-align: center;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.capstone-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 34px);
  margin: 0 0 14px;
  color: var(--color-white);
}
.capstone-title em { font-style: italic; }
.capstone-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.included-cta { text-align: center; }

/* --- Membership responsive --- */
@media (max-width: 900px) {
  .mb-hero .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .mb-hero .hero-content { text-align: center; max-width: none; margin: 0 auto; }
  .mb-hero-sub { margin: 0 auto 18px; }
  .mb-hero-sub:last-child { margin-bottom: 0; }
  .mb-hero-image { order: 2; }
  .mb-hero-image img { max-height: 340px; }
}
@media (max-width: 820px) {
  .other-ways-grid { grid-template-columns: 1fr; }
  .other-way { padding: 28px 0; border-top: 1px solid var(--color-card-border); }
  .other-way:first-child { border-top: 0; padding-top: 0; }
  .other-way + .other-way::before { display: none; }
}
@media (max-width: 760px) {
  .mb-hero { padding: 56px 0 88px; }
  .pricing { padding: 88px 0 64px; }
  .cards { grid-template-columns: 1fr; }
  .cards::before { display: none; }
  .benefit-grid { grid-template-columns: 1fr; }
  .included { padding: 64px 0; }
  .capstone { padding: 28px 24px; }
  .btn-inline { width: 100%; }
}

/* =============================================================
   Membership support pages
   Rendered by custom-gift, custom-groups, custom-group-manage,
   custom-institutions, custom-institution-manage, custom-manage,
   and custom-success. All rules are scoped under
   `.membership-support` so they don't collide with the rest of
   the theme (including the pricing page in custom-membership).
   ============================================================= */

.membership-support .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Page hero (dark banner atop support pages) --- */
.membership-support .page-hero {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 72px 0 64px;
}
.membership-support .page-hero .container { max-width: 780px; }
.membership-support .page-hero .eyebrow { color: var(--color-primary); }
.membership-support .page-hero-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
  margin: 14px 0 18px;
  color: var(--color-white);
}
.membership-support .page-hero-headline em { font-style: italic; }
.membership-support .page-hero-sub {
  font-size: 17px;
  line-height: 1.55;
  color: #d8cfc2;
  max-width: 640px;
  margin: 0;
}

/* Light variants for page-simple (manage / success) where the
   hero text sits on the cream background, not the dark banner. */
.membership-support.page-simple .page-hero-headline,
.membership-support .page-hero-headline--dark {
  color: var(--color-dark);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.12;
  margin: 0 0 18px;
}
.membership-support.page-simple .page-hero-sub,
.membership-support .page-hero-sub--dark {
  color: var(--color-muted);
  max-width: none;
  margin: 0 auto 24px;
}

/* --- Form section (cream band beneath the hero) --- */
.membership-support .form-section {
  background: #f6f3f2;
  padding: 56px 0 88px;
}
.membership-support .form-section .container { max-width: 720px; }

/* --- Stacked form card --- */
.membership-support .stacked-form {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 14px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-shadow: var(--shadow-card);
}
.membership-support .form-intro {
  font-size: 15px;
  color: var(--color-muted);
  margin: 0;
}
.membership-support .form-group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.membership-support .form-legend {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--color-secondary);
  margin-bottom: 4px;
  padding: 0;
}
.membership-support .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.membership-support .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.membership-support .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
}
.membership-support .form-hint {
  font-weight: 400;
  color: var(--color-muted);
  font-size: 13px;
}
.membership-support .form-field input,
.membership-support .form-field select,
.membership-support .form-field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-dark);
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
}
.membership-support .form-field textarea {
  resize: vertical;
  min-height: 92px;
}
.membership-support .form-field input:focus,
.membership-support .form-field select:focus,
.membership-support .form-field textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.membership-support .form-success {
  color: var(--color-secondary);
  font-weight: 600;
  margin: 0;
}

/* --- Radio + checkbox groups (demographics) --- */
.membership-support .radio-group,
.membership-support .checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.membership-support .radio-option,
.membership-support .checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 15px;
  color: var(--color-dark);
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms ease;
}
.membership-support .radio-option:hover,
.membership-support .checkbox-option:hover {
  background: var(--color-bg-muted, #f6f3f2);
}
.membership-support .radio-option input,
.membership-support .checkbox-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* --- Tier options (gift page) --- */
.membership-support .tier-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.membership-support .tier-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  background: var(--color-white);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.membership-support .tier-option input {
  margin-top: 4px;
  accent-color: var(--color-primary);
}
.membership-support .tier-option:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(238, 125, 81, 0.15);
}
.membership-support .tier-option-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.membership-support .tier-option-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--color-dark);
}
.membership-support .tier-option-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-dark);
}
.membership-support .tier-option-detail {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.4;
}

/* --- Pricing table (groups page) --- */
.membership-support .pricing-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.membership-support .pricing-tier {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  padding: 22px 22px 20px;
}
.membership-support .pricing-tier-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--color-secondary);
  margin: 0 0 6px;
  letter-spacing: 0.04em;
}
.membership-support .pricing-tier-price {
  margin: 0 0 4px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.membership-support .pricing-tier-price .price-amount {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-dark);
}
.membership-support .pricing-tier-price .price-interval {
  font-size: 14px;
  color: var(--color-muted);
}
.membership-support .pricing-tier-detail {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
}

/* --- Group total callout --- */
.membership-support .group-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 8px 0 0;
  padding: 14px 16px;
  background: #f1e0c9;
  border-radius: 10px;
}
.membership-support .group-total-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--color-secondary);
}
.membership-support .group-total-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-dark);
}

/* --- Institutional overview (three points) --- */
.membership-support .institutional-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}
.membership-support .institutional-point {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  padding: 20px 20px 18px;
}
.membership-support .institutional-point h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--color-secondary);
  margin: 0 0 8px;
}
.membership-support .institutional-point p {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0;
}

/* --- Buttons (support-page sizing variants) --- */
.membership-support .btn-wide {
  align-self: stretch;
  justify-content: center;
  width: 100%;
}
.membership-support .btn-label { display: inline-block; }
.membership-support .btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: mo-spin 0.6s linear infinite;
}
.membership-support .btn.is-loading .btn-spinner { display: inline-block; }
.membership-support .btn:disabled,
.membership-support .btn.is-loading {
  cursor: wait;
  opacity: 0.85;
  transform: none;
}
@keyframes mo-spin { to { transform: rotate(360deg); } }

.membership-support .btn-error {
  color: #B33A1F;
  font-size: 13px;
  margin: 10px 0 0;
  min-height: 18px;
}

/* --- Admin dashboards (group + institution manage) --- */
.membership-support .admin-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.membership-support .admin-summary-item {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  padding: 16px 18px;
}
.membership-support .admin-summary-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--color-secondary);
  margin: 0 0 6px;
  letter-spacing: 0.04em;
}
.membership-support .admin-summary-value {
  font-size: 18px;
  color: var(--color-dark);
  margin: 0;
  font-weight: 600;
}
.membership-support .admin-summary-subtle {
  font-weight: 400;
  color: var(--color-muted);
  font-size: 14px;
}

.membership-support .stacked-form + .stacked-form,
.membership-support .stacked-form + .bulk-add,
.membership-support .bulk-add + .stacked-form,
.membership-support .bulk-add + .admin-list,
.membership-support .stacked-form + .admin-list {
  margin-top: 24px;
}
.membership-support .stacked-form--nested {
  box-shadow: none;
  border: 0;
  padding: 16px 0 0;
  background: transparent;
}

.membership-support .bulk-add {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  padding: 0 22px;
}
.membership-support .bulk-add > summary {
  padding: 16px 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-dark);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.membership-support .bulk-add > summary::-webkit-details-marker { display: none; }
.membership-support .bulk-add > summary::before {
  content: "+";
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--color-primary);
  line-height: 1;
}
.membership-support .bulk-add[open] > summary::before { content: "–"; }

.membership-support .admin-list {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  padding: 22px 24px;
}
.membership-support .admin-list-header { margin-bottom: 12px; }
.membership-support .admin-list-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-dark);
  margin: 0 0 4px;
}
.membership-support .admin-list-title em { font-style: italic; }
.membership-support .admin-list-hint {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
}
.membership-support .admin-list-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.membership-support .admin-list-items--compact { margin-top: 14px; }
.membership-support .admin-list-empty {
  color: var(--color-muted);
  font-size: 14px;
  padding: 8px 0;
}
.membership-support .admin-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--color-card-border);
}
.membership-support .admin-list-row:first-child { border-top: 0; }
.membership-support .admin-list-person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.membership-support .admin-list-name {
  font-weight: 600;
  color: var(--color-dark);
  font-size: 15px;
}
.membership-support .admin-list-email {
  color: var(--color-muted);
  font-size: 13px;
}
.membership-support .admin-list-remove {
  background: transparent;
  border: 0;
  color: var(--color-secondary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 120ms ease;
}
.membership-support .admin-list-remove:hover,
.membership-support .admin-list-remove:focus-visible {
  background: rgba(193, 89, 60, 0.1);
  outline: none;
}
.membership-support .admin-list-remove:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* --- Simple pages (manage / success) --- */
.membership-support.page-simple {
  display: flex;
  flex-direction: column;
}
.membership-support .centered-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 0;
  background: var(--color-background);
}
.membership-support .centered-inner {
  max-width: 620px;
  text-align: center;
  margin: 0 auto;
}
.membership-support .centered-inner.narrow { max-width: 480px; }
.membership-support .check-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
  color: var(--color-primary);
}
.membership-support .check-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.membership-support .button-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 32px 0 24px;
}
.membership-support .fine-print {
  font-size: 14px;
  color: var(--color-muted);
  margin: 0;
}
.manage-address-section {
  margin-top: 48px;
  margin-bottom: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--color-card-border);
  text-align: left;
}
.manage-section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--color-dark);
}
.manage-section-sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0 0 20px;
}
.membership-support .manage-form {
  display: flex;
  gap: 10px;
  margin: 32px auto 0;
  max-width: 440px;
}
.membership-support .manage-form input[type="email"] {
  flex: 1;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 16px;
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-dark);
  min-width: 0;
}
.membership-support .manage-form input[type="email"]:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
  border-color: var(--color-primary);
}
.membership-support .manage-form .btn {
  width: auto;
  white-space: nowrap;
}

/* --- Responsive --- */
@media (max-width: 820px) {
  .membership-support .institutional-overview { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .membership-support .form-row,
  .membership-support .tier-options,
  .membership-support .pricing-table {
    grid-template-columns: 1fr;
  }
  .membership-support .stacked-form { padding: 28px 22px; }
  .membership-support .admin-summary { grid-template-columns: 1fr; }
  .membership-support .manage-form { flex-direction: column; }
  .membership-support .manage-form .btn { width: 100%; }
}

/* =============================================================
   Contributor tagging system
   -------------------------------------------------------------
   Any Ghost tag with slug "author-*" acts as a guest-author
   record: name is the display name, description is the bio,
   feature_image is the headshot. Tag URL (/tag/author-slug/ or
   /contributors/slug/ if rewritten) renders as a contributor
   bio page via tag.hbs. /contributors/ lists them all via
   custom-contributors.hbs.
   ============================================================= */

/* Byline hide/show: if the contributors span has any child <a>,
   the fallback (staff author byline) is suppressed so guest
   authors override Ghost's author without losing fallback. */
/* Contributor byline filtering — CSS attribute prefix selectors
   handle the "any tag whose slug starts with author-" check since
   Ghost's match helper has no regex operator. Candidates are every
   tag on the post; CSS shows only the author-* ones and hides the
   staff fallback when one exists. */
.meta-authors[data-byline] .meta-author--candidate { display: none; }
.meta-authors[data-byline] .meta-author--candidate[data-tag-slug^="author-"] { display: flex; align-items: center; gap: 14px; }
.meta-authors[data-byline]:has([data-tag-slug^="author-"]) + .meta-authors-fallback { display: none; }
.meta-authors[data-byline] .meta-author--candidate[data-tag-slug^="author-"] + .meta-author--candidate[data-tag-slug^="author-"] {
  border-left: 1px solid var(--color-card-border);
  padding-left: 14px;
  margin-left: 14px;
}

.entry-byline-contributors[data-byline] .entry-contributor--candidate { display: none; }
.entry-byline-contributors[data-byline] .entry-contributor--candidate[data-tag-slug^="author-"] { display: inline; font-style: italic; }
.entry-byline-contributors[data-byline]:has([data-tag-slug^="author-"]) + .entry-byline-fallback { display: none; }
.entry-byline-contributors[data-byline]:not(:has([data-tag-slug^="author-"])) .entry-byline-prefix { display: none; }
.entry-byline-contributors[data-byline] .entry-contributor--candidate[data-tag-slug^="author-"] + .entry-contributor--candidate[data-tag-slug^="author-"]::before { content: ", "; }

.byline-inline--contributors[data-byline] .byline-author--candidate { display: none; }
.byline-inline--contributors[data-byline] .byline-author--candidate[data-tag-slug^="author-"] { display: inline; }
.byline-inline--contributors[data-byline]:has([data-tag-slug^="author-"]) + .byline-inline--fallback { display: none; }
.byline-inline--contributors[data-byline] .byline-author--candidate[data-tag-slug^="author-"] + .byline-author--candidate[data-tag-slug^="author-"]::before { content: ", "; }

.author-bio-contributors[data-bio] .author-bio--candidate { display: none; }
.author-bio-contributors[data-bio] .author-bio--candidate[data-tag-slug^="author-"] { display: block; }
.author-bio-contributors[data-bio]:has([data-tag-slug^="author-"]) + .author-bio-fallback { display: none; }
.author-bio-contributors[data-bio] .author-bio--candidate[data-tag-slug^="author-"] + .author-bio--candidate[data-tag-slug^="author-"] {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-card-border);
}

/* tag.hbs swap: .tag-page[data-tag-slug^="author-"] shows the
   contributor layout; non-author slugs show the archive layout. */
.tag-page-contributor { display: none; }
.tag-page-archive { display: block; }
.tag-page[data-tag-slug^="author-"] .tag-page-contributor { display: block; }
.tag-page[data-tag-slug^="author-"] .tag-page-archive { display: none; }

/* Contributor bio page (tag.hbs author-* branch) */
.contributor-header {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 72px 0 96px;
}
.contributor-header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  align-items: center;
}
.contributor-portrait {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #4a3f36 0%, #2d2927 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(45, 41, 39, 0.25);
}
.contributor-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contributor-initials {
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 72px;
  line-height: 1;
  opacity: 0.7;
  display: block;
  width: 1ch;
  overflow: hidden;
  text-align: center;
}
.contributor-header-body h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  margin: 8px 0 16px;
  color: var(--color-white);
}
.contributor-header-body .eyebrow {
  color: var(--color-primary);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.contributor-bio {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 560px;
  margin: 0;
}
.contributor-list-intro {
  max-width: 960px;
  margin: 56px auto 24px;
  padding: 0 20px;
  text-align: center;
}

/* Contributors index (custom-contributors.hbs) */
.contributors-hero {
  padding: 72px 0 48px;
  text-align: center;
}
.contributors-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  margin: 8px 0 16px;
  color: var(--color-dark);
}
.contributors-sub {
  font-size: 18px;
  color: var(--color-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.55;
}
.contributors-body { padding: 24px 0 96px; }

/* ── Alphabet rail ─────────────────────────────────────────────
   Filters the grid by last-name initial. Visually echoes the topic
   rail on the homepage: scrollable strip of pills, hairline below.
   Disabled letters (no contributors) dim and refuse clicks. */
.contributors-rail {
  max-width: 1040px;
  margin: 0 auto 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-card-border);
}
.contributors-rail-label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 10px;
}
.contributors-rail-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}
.contributors-rail-inner::-webkit-scrollbar { height: 4px; }
.contributors-rail-inner::-webkit-scrollbar-track { background: transparent; }
.contributors-rail-inner::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 2px; }

.contributors-rail-pill {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 12px;
  min-width: 36px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.contributors-rail-pill[data-letter="all"] {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 6px 14px;
}
.contributors-rail-pill:hover:not(:disabled) { color: var(--color-dark); }
.contributors-rail-pill.is-active {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}
.contributors-rail-pill:disabled,
.contributors-rail-pill[aria-disabled="true"] {
  color: var(--color-card-border);
  cursor: not-allowed;
}

/* Empty state shown when an alphabet letter has zero matches. */
.contributors-empty {
  text-align: center;
  font-family: var(--font-body);
  color: var(--color-muted);
  margin: 48px auto;
  max-width: 520px;
}
.contributors-empty strong {
  font-weight: 600;
  color: var(--color-dark);
}

/* View-all toggle. Sits below the grid, centered. Hidden until JS
   confirms the threshold actually hides anything. */
.contributors-toggle {
  text-align: center;
  margin-top: 48px;
}
/* "+ View All Contributors" link on the curated page. */
.contributors-view-all {
  text-align: center;
  margin-top: 48px;
}

@media (max-width: 760px) {
  .contributors-rail-label { font-size: 10px; }
  .contributors-rail-inner { gap: 2px; }
  .contributors-rail-pill { padding: 6px 10px; min-width: 32px; font-size: 11px; }
}

/* Editorial two-column list, no card chrome. Mirrors the .week-grid
   motif used on the homepage: hairline vertical divider between the
   two columns on desktop, horizontal rules between rows via each
   entry's border-top. */
.contributors-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 0;
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
}
.contributors-grid::before {
  content: "";
  position: absolute;
  top: 24px; bottom: 24px;
  left: 50%;
  width: 1px;
  background: var(--color-card-border);
}
.contributor-card {
  display: flex;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--color-card-border);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.contributor-card:hover { text-decoration: none; }
.contributor-card:hover .contributor-card-name { color: var(--color-secondary); }
/* Show only author-* tags on /contributors/. The template fetches all
   public tags because Ghost's NQL prefix-match on `slug` is unreliable
   across versions; CSS filters the render. */
.contributor-card--candidate { display: none; }
.contributor-card--candidate[data-tag-slug^="author-"] {
  display: flex;
}
.contributor-card-portrait {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 24px;
  font-style: italic;
}
.contributor-card-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Initial-fallback: the SSR template renders the full contributor
   name into this span as a placeholder for the missing portrait, but
   spelling out the name inside a 72×72 circle clipped or wrapped
   awkwardly. Hide the full text and surface only the first letter
   via ::first-letter — the same pattern used by .archive-avatar-initial
   and the other byline avatars. JS-rendered cards (contributors.js)
   write a clean 1-letter initial directly so they don't need the trick. */
.contributor-card-initial {
  font-size: 0;
  line-height: 1;
  font-style: italic;
}
.contributor-card-initial::first-letter {
  font-size: 28px;
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: italic;
}
/* JS-rendered cards already contain just one letter — opt out of the
   font-size:0 trick so the visible character renders straight. */
.contributor-card-initial--rendered {
  font-size: 28px;
  color: var(--color-white);
  font-family: var(--font-display);
}
.contributor-card-body { flex: 1; min-width: 0; }
.contributor-card-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--color-dark);
}
.contributor-card-bio {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.contributor-card-count {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
  font-weight: 600;
}

@media (max-width: 640px) {
  .contributor-header-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 20px; }
  .contributor-portrait { width: 140px; height: 140px; }
  .contributor-initials { font-size: 60px; }
  .contributor-bio { margin: 0 auto; }
  .contributors-grid { grid-template-columns: 1fr; column-gap: 0; }
  .contributors-grid::before { display: none; }
  .contributor-card { padding: 20px 0; gap: 14px; }
  .contributor-card-portrait { width: 56px; height: 56px; }
  .contributor-card-name { font-size: 19px; }
}

/* =============================================================
   Table of contents
   -------------------------------------------------------------
   Populated client-side from <h2> headings by assets/js/toc.js.
   Two DOM copies render: the desktop rail (sticky, right column)
   and a mobile-only slot between the hero image and the article
   body. Both start `hidden`; the script unhides only if there
   are H2s to list.
   ============================================================= */

.toc-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: toc;
}
.toc-item { counter-increment: toc; position: relative; padding-left: 22px; }
.toc-item::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--color-primary);
}
.toc-link {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-dark);
  text-decoration: none;
  transition: color 0.15s;
}
.toc-link:hover { color: var(--color-secondary); text-decoration: none; }

/* Mobile-only TOC slot between feature image and article body.
   Spacing lives entirely on .toc-mobile so the gap above and below
   the card matches. .article-body padding-top collapses on mobile
   (see the tablet/mobile overrides below) so the visual rhythm is
   hero -> 40px -> TOC -> 40px -> article. */
.toc-mobile {
  display: none;
  max-width: 720px;
  margin: 40px auto;
  padding: 20px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 6px;
}
.toc-mobile .toc-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
  margin: 0;
}
.toc-mobile .toc-list { font-size: 15px; gap: 12px; }

@media (max-width: 1024px) {
  /* Sticky desktop rail is hidden by the existing @media block;
     surface the TOC in the mobile slot. Spacing rule: the TOC's
     own symmetric margin owns the gap above AND below when it's
     visible, and .article-body padding only kicks in when there's
     no TOC so short posts keep some hero->article breathing room. */
  .toc-mobile { display: block; }
  .article-body { padding-top: 40px; }
  .toc-mobile:not([hidden]) + .article-body { padding-top: 0; }
}
@media (max-width: 640px) {
  .toc-mobile {
    margin: 32px 20px;
    padding: 16px 18px;
    border-radius: 4px;
  }
  .toc-mobile .toc-list { font-size: 14px; }
  .article-body { padding-top: 32px; }
  .toc-mobile:not([hidden]) + .article-body { padding-top: 0; }
}

/* Subtle rounded corners on every image plate across the theme —
   homepage hero feature, Today feature, This Week entries, related
   article cards, and the membership hero. Small 6px radius warms
   the UI without turning anything into a card. */
.hero-feature-img,
.hero-feature-img-inner,
.feature-plate,
.feature-plate-inner,
.entry-plate,
.entry-plate-inner,
.read-plate,
.read-plate-inner,
.card-media {
  border-radius: 6px;
}


/* =============================================================
   About page (custom-about.hbs and page-about.hbs, served at /about/)
   Borrows the editorial feel of the homepage hero, the flourish
   dividers, the Roman-numeraled other-ways grid, and the contributor
   card portraits so the page reads as part of the same journal.
   ============================================================= */

.about { overflow-x: clip; }
.about-hero { padding: 72px 0 0; overflow: visible; position: relative; }
.about-hero .container { max-width: 1180px; text-align: left; }
.about-hero .hero-kicker { justify-content: flex-start; }
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-hero-content { max-width: 620px; }
.about-hero-headline {
  font-size: clamp(36px, 4.4vw, 56px);
  margin: 0 0 24px;
}
.about-hero .hero-sub {
  max-width: 520px;
  margin: 0 0 56px;
  font-style: italic;
}
.about-hero-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.about-hero-image {
  position: relative;
  z-index: 3;
  margin-bottom: 0;
}
.about-hero-image img {
  width: 100%;
  height: auto;
  max-height: 680px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}
.about-hero-highlight {
  white-space: nowrap;
}

.about-body { padding: 56px 0 32px; background-color: #f1e8d5; }
.about-prose { max-width: 640px; margin: 0 auto; }
.about-prose + .about-prose { margin-top: 24px; }
.about-prose p {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.75;
  color: var(--color-dark);
  margin: 0 0 22px;
}
.about-prose p em { font-style: italic; }
.about-prose p:last-child { margin-bottom: 0; }
.about-lede { font-size: 19px !important; }
.about-lede::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6em;
  line-height: 1;
  color: var(--color-secondary);
  padding-right: 0.1em;
}
.about-body .section-intro {
  max-width: 640px;
  margin: 48px auto 20px;
  text-align: left;
}
.about-body .flourish { margin: 48px auto; }

/* ---- /digest/ internal tool page. Reuses the about hero styling so
   it feels part of the site, then swaps the prose column for a
   lightweight form + textarea output block. ---- */
.digest-page .about-body { padding: 56px 0 96px; }
.digest-controls {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 16px;
}
/* Hidden auth field — still in the DOM so the JS can read it, but
   the admin has prefilled the token so nothing to display. Collapse
   the grid to two columns. */
.digest-controls:has(.digest-field--hidden) {
  grid-template-columns: 140px auto;
}
.digest-field--hidden { display: none; }
.digest-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.digest-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-card-border);
  border-radius: 6px;
  background: var(--color-white);
  font: inherit;
  color: var(--color-dark);
}
.digest-field--action .btn { width: 100%; }
.digest-status {
  font-size: 14px;
  color: var(--color-muted);
  min-height: 22px;
  margin: 0;
}
.digest-status.is-error { color: var(--color-secondary); }

.digest-output {
  max-width: 780px;
  margin: 56px auto 0;
}
/* Rendered preview: Georgia body, 15pt, 1.5 line-height per the
   editorial spec. Contenteditable so the user can tweak the draft
   in-place. Source-mode override flips to monospace so edits to
   raw Markdown stay readable. */
.digest-output-body {
  width: 100%;
  min-height: 520px;
  padding: 28px 32px;
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  background: var(--color-white);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15pt;
  line-height: 1.5;
  color: var(--color-dark);
  outline: none;
  overflow-wrap: break-word;
}
.digest-output-body:focus { border-color: var(--color-primary); }
.digest-output-body p,
.digest-output-body li { font-size: 15pt; line-height: 1.5; }
.digest-output-body h1,
.digest-output-body h2,
.digest-output-body h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.5;
  margin: 24px 0 12px;
}
.digest-output-body h1 { font-size: 22pt; }
.digest-output-body h2 { font-size: 19pt; }
.digest-output-body h3 { font-size: 17pt; }
.digest-output-body a { color: var(--color-secondary); text-decoration: underline; }
.digest-output-body hr { border: 0; border-top: 1px solid var(--color-card-border); margin: 28px 0; }
.digest-output-body ol,
.digest-output-body ul { padding-left: 1.4em; margin: 12px 0; }
.digest-output-body.is-source {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
}
.digest-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.digest-meta {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}
@media (max-width: 720px) {
  .digest-controls {
    grid-template-columns: 1fr;
  }
  .digest-field--action .btn { width: 100%; }
}

/* Vision grid — mirrors the "Other Memberships" layout on the
   membership page: big roman numerals, display italic label,
   short body beneath. */
.about-vision {
  padding: 72px 0;
  background: var(--color-background);
  border-top: 1px solid var(--color-card-border);
  border-bottom: 1px solid var(--color-card-border);
}
.about-vision .section-intro {
  text-align: center;
  margin-bottom: 48px;
}
.about-vision-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 960px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 40px;
}
.about-vision-item {
  padding: 28px 0 0;
  border-top: 1px solid var(--color-card-border);
  position: relative;
}
.about-vision-item:first-child,
.about-vision-item:nth-child(2) { border-top: 0; padding-top: 0; }
.about-vision-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--color-primary);
  display: inline-block;
  margin-bottom: 10px;
  line-height: 1;
}
.about-vision-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  color: var(--color-dark);
  margin: 0 0 10px;
}
.about-vision-body {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 360px;
}
.about-vision-coda {
  max-width: 640px;
  margin: 56px auto 0;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-dark);
}

/* Endorsements */
.about-endorsements { padding: 48px 0 0; }
.about-endorsements .section-intro { text-align: center; margin-bottom: 48px; }
.about-endorsements-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
}
.about-endorsement {
  border-top: 1px solid var(--color-hairline);
  padding-top: 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.about-endorsement p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-body);
  margin: 0 0 16px;
}
.about-endorsement footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.about-endorsement-portrait {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.about-endorsement-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-endorsement-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--color-dark);
  display: block;
  line-height: 1.2;
}
.about-endorsement-title {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  display: block;
  line-height: 1.3;
}
@media (max-width: 700px) {
  .about-endorsements-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Team — circular portraits, display italic names. Same feel as
   the contributor cards on /contributors/. */
.about-divider {
  max-width: 280px;
  margin: 48px auto;
}
.about-divider .flourish {
  margin: 0 auto;
}
.about-team { padding: 0 0 56px; }
.about-team .section-intro { text-align: center; margin-bottom: 48px; }
.about-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  max-width: 960px;
  margin: 0 auto;
}
.about-team-member { text-align: center; }
.about-team-portrait {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4a3f36 0%, #2d2927 100%);
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 64px;
  box-shadow: 0 6px 20px rgba(45, 41, 39, 0.12);
}
.about-team-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-team-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--color-dark);
  margin: 0 0 6px;
}
.about-team-title {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 0;
}

/* Editorial board — numbered list, each row with a Roman numeral
   accent so the list feels typeset rather than a table. */
.about-board { padding: 32px 0 88px; }
.about-board .section-intro { text-align: center; margin-bottom: 40px; }
.about-board-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
}
.about-board-entry {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: start;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--color-card-border);
}
.about-board-entry:first-child,
.about-board-entry:nth-child(2) { border-top: 0; }
.about-board-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--color-primary);
  line-height: 1;
  padding-top: 4px;
}
.about-board-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  color: var(--color-dark);
  margin: 0 0 4px;
}
.about-board-role {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0;
}

/* -------- Admin data tables (/admin/addresses/, /gifts/, etc.) ---------- */

.admin-table-host { margin: 32px 0; }
.admin-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.admin-table-count {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-dark);
  font-weight: 600;
  margin: 0;
}
.admin-table-status {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-secondary);
  min-height: 20px;
  margin: 8px 0;
}
.admin-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--color-card-border);
}

/* --- Drift report sections -------------------------------------------- */
/* Each section is a heading + table. Generous margin between sections so
   you can scan each category independently. */
.drift-section {
  margin: 48px 0;
}
.drift-section:first-of-type {
  margin-top: 24px;
}
.drift-section .section-intro {
  margin-bottom: 16px;
}
.drift-section .admin-sub {
  margin: 0 0 18px;
  color: #4a4440;
  max-width: 62ch;
}
.drift-reconcile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 0;
}
.drift-reconcile-progress {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-secondary);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13px;
}
.admin-table thead th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-card-border);
  white-space: nowrap;
}
.admin-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-dark);
  vertical-align: top;
}
.admin-table tbody tr:hover td { background: rgba(238, 125, 81, 0.04); }
@media (max-width: 640px) {
  .admin-table thead th { padding: 10px 8px; font-size: 9px; letter-spacing: 0.18em; }
  .admin-table tbody td { padding: 10px 8px; font-size: 12px; }
  .admin-table-toolbar { flex-wrap: wrap; gap: 10px; }
}
.admin-table-empty {
  text-align: center;
  color: var(--color-muted);
  font-style: italic;
  padding: 32px !important;
}
.admin-table-link {
  color: var(--color-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.admin-table-link:hover { border-bottom-color: var(--color-secondary); }

/* ── Per-institution admin detail page ─────────────────────────── */
.admin-page .admin-back-link {
  margin: 0 0 24px;
  font-family: var(--font-body);
  font-size: 13px;
}
.admin-page .admin-back-link a { color: var(--color-muted); }
.admin-page .admin-back-link a:hover { color: var(--color-secondary); }

.admin-page .admin-detail-header {
  border-bottom: 1px solid var(--color-card-border);
  padding-bottom: 18px;
  margin-bottom: 24px;
}
.admin-page .admin-detail-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 0 0 6px;
  color: var(--color-dark);
}
.admin-page .admin-detail-sub {
  font-family: var(--font-body);
  color: #4a4440;
  margin: 0;
}

.admin-page .admin-summary--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px 28px;
  margin: 0 0 36px;
  padding: 0;
}
.admin-page .admin-summary--grid .admin-summary-item { margin: 0; }
.admin-page .admin-summary-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin: 0 0 4px;
}
.admin-page .admin-summary-value {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-dark);
  margin: 0;
}

.admin-page .admin-section {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--color-card-border);
}
.admin-page .admin-section-header { margin-bottom: 16px; }
.admin-page .admin-section-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 4px;
  color: var(--color-dark);
}
.admin-page .admin-section-title em { font-style: normal; }
.admin-page .admin-section-hint {
  font-family: var(--font-body);
  font-size: 13px;
  color: #4a4440;
  margin: 0;
  max-width: 640px;
}

.admin-page .stacked-form--inline {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 16px 0 18px;
}
.admin-page .stacked-form--inline .form-field {
  margin: 0;
  flex: 1 1 240px;
}
.admin-page .stacked-form--inline .form-field--grow { flex-grow: 1; }
.admin-page .stacked-form--inline input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-card-border);
  border-radius: 6px;
  background: var(--color-white);
  font: inherit;
  color: var(--color-dark);
}
.admin-page .stacked-form--inline .btn-error {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  color: var(--color-secondary);
}

.admin-page .admin-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.admin-page .admin-list-empty {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-muted);
  padding: 16px 0;
}
.admin-page .admin-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--color-card-border);
}
.admin-page .admin-list-row:first-of-type { border-top: 0; }
.admin-page .admin-list-person {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-page .admin-list-name {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-dark);
}
.admin-page .admin-list-email {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
}
.admin-page .admin-list-remove {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-card-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.admin-page .admin-list-remove:hover {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.admin-page .admin-list-remove:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── /institution-manage/ — read-only domain pills ─────────────── */
.admin-summary-note {
  margin: 24px 0 8px;
  padding: 18px 22px;
  background: rgba(238,125,81,0.04);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
}
.admin-summary-note .admin-summary-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 10px;
}
.admin-summary-note .form-hint {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
}
.admin-summary-note .form-hint a { color: var(--color-secondary); }
.admin-domain-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-domain-pill {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-dark);
}

.btn-sm { padding: 8px 18px; font-size: 11px; letter-spacing: 0.18em; }

/* Role eyebrow inside .contributor-card — sits between the display
   name and the bio, styled like .contributor-card-count but carrying
   the person's role instead of a post count. Used on the About page
   Team + Editorial Board blocks where cards are static, not driven
   from Ghost tag data. */
.contributor-card-role {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 10px;
}

/* About page bios aren't clamped. The 3-line clamp on
   .contributor-card-bio makes sense on /contributors/ (where the
   grid is dense and bios get long) but on About we want the full
   text for the 10 Team + Board members. */
/* The shared .contributors-grid::before draws a single vertical
   hairline at left:50% for the 2-column /contributors/ layout. The
   /about/ Team grid overrides to 3 columns, where 50% falls through
   the middle column instead of between columns — hide it here. */
.about-team-grid::before { display: none; }

.about-team .contributor-card-bio,
.about-board .contributor-card-bio {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

@media (max-width: 820px) {
  .about-vision-grid { grid-template-columns: 1fr; column-gap: 0; }
  .about-vision-item { padding-top: 28px; border-top: 1px solid var(--color-card-border); }
  .about-vision-item:first-child { border-top: 0; padding-top: 0; }
  .about-vision-item:nth-child(2) { border-top: 1px solid var(--color-card-border); padding-top: 28px; }
  .about-team-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-board-list { grid-template-columns: 1fr; column-gap: 0; }
  .about-board-entry { border-top: 1px solid var(--color-card-border); }
  .about-board-entry:first-child { border-top: 0; }
  .about-board-entry:nth-child(2) { border-top: 1px solid var(--color-card-border); }
}
@media (max-width: 640px) {
  .about-hero { padding: 48px 0 40px; }
  .about-hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .about-hero-content { max-width: none; }
  .about-hero-headline { font-size: clamp(22px, 6.2vw, 34px); line-height: 1.18; }
  .about-hero .hero-sub { margin: 0; }
  .about-hero-image { order: 2; margin-bottom: 0; }
  .about-hero-image img { max-height: 320px; }
  .about-body { padding: 56px 0 16px; }
  .about-prose p { font-size: 17px; line-height: 1.7; }
  .about-lede { font-size: 19px !important; }
  .about-vision { padding: 56px 0; }
  .about-vision-label { font-size: 26px; }
  .about-team { padding: 0 0 40px; }
  .about-divider { margin: 32px auto; }
  .about-team-portrait { width: 124px; height: 124px; font-size: 52px; }
  .about-board { padding: 24px 0 64px; }
  .about-board-entry { grid-template-columns: 48px 1fr; }
}

/* Journal status tracker (replaces the old "Spring issue is at the
   printer now" line on the homepage Journal Band). Three labeled
   dots — drafting (blue) / in production (yellow) / arriving
   (green) — connected by hairlines, matching the visual language
   of the hero kicker dot. */
.journal-status-section {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-white);
  margin: 40px 0 6px;
}
.journal-status-section em { font-style: italic; }

.journal-status-heading {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 600;
  margin: 0 0 14px;
}
.journal-status-heading em {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 16px;
  color: var(--color-white);
  font-weight: 400;
  margin-left: 2px;
}
.journal-status-sep {
  color: rgba(255, 255, 255, 0.25);
  margin: 0 6px;
  font-weight: 400;
}

/* Journal status triptych: three small SVG marks depicting the
   issue's lifecycle (draft page → bound book → sealed letter) in
   place of the prior SaaS-y connector-dots. The marks are drawn in
   currentColor so a single class flips the active stage from muted
   outline to primary-orange + soft pulsing drop-shadow. No
   connecting hairline — the three glyphs do the work as a triptych. */
.journal-status {
  list-style: none;
  padding: 0;
  margin: 24px 0 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  max-width: 360px;
  position: relative;
}
/* Connecting hairline rendered as four segments in the column gaps,
   not as one rule behind the marks. The earlier approach (one rule
   behind, marks carrying a solid var(--color-dark) background to
   "punch through") made the active mark's glow halo reveal a darker
   square because the bg color blocked the radial light. With the
   line drawn in the gaps, the marks have no background at all and
   the glow can spread freely. Each non-first step draws a segment
   on its left side; each non-last step draws one on its right side.
   At top: 18px the segments line up with the vertical midpoint of
   the 36px marks. */
.journal-status-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: transparent;
  position: relative;
  z-index: 1;
}
.journal-status-step::before,
.journal-status-step::after {
  content: "";
  position: absolute;
  top: 18px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
  z-index: 0;
}
.journal-status-step::before {
  left: 0;
  right: calc(50% + 22px);
}
.journal-status-step::after {
  left: calc(50% + 22px);
  right: 0;
}
.journal-status-step:first-child::before { display: none; }
.journal-status-step:last-child::after { display: none; }
.journal-status-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: rgba(255, 255, 255, 0.32);
  transition: color 0.2s ease;
}
.journal-status-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.journal-status-mark.is-active {
  color: var(--color-primary);
  animation: journal-status-glow 2.6s ease-in-out infinite;
}
@keyframes journal-status-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(238, 125, 81, 0.45)) drop-shadow(0 0 10px rgba(238, 125, 81, 0.20)); }
  50%      { filter: drop-shadow(0 0 8px rgba(238, 125, 81, 0.80)) drop-shadow(0 0 18px rgba(238, 125, 81, 0.45)); }
}
@media (prefers-reduced-motion: reduce) {
  .journal-status-mark.is-active { animation: none; filter: drop-shadow(0 0 6px rgba(238, 125, 81, 0.55)); }
}
.journal-status-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
.journal-status-mark.is-active + .journal-status-label {
  color: var(--color-white);
}

@media (max-width: 640px) {
  .journal-status { max-width: 320px; margin: 20px 0 28px; }
  .journal-status-label { font-size: 10px; letter-spacing: 0.12em; }
}

/* Membership page: billing-interval toggle (ported from the original
   membership-site). Anchored to the bottom of the dark .mb-hero so
   it floats where the dark band meets the pricing section. */
.mb-hero .toggle-wrap {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -28px;
}
.mb-hero .toggle {
  display: inline-flex;
  background: var(--color-white);
  padding: 5px;
  border-radius: 999px;
  border: 1px solid var(--color-card-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.mb-hero .toggle-option {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
  background: transparent;
  border: 0;
  padding: 14px 22px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, color 0.15s;
}
.mb-hero .toggle-option:hover { color: var(--color-dark); }
.mb-hero .toggle-option.is-active {
  background: var(--color-dark);
  color: var(--color-white);
}
.mb-hero .toggle-option .badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.mb-hero { position: relative; }
/* Paid-member "Gift A Membership" CTA sits under the headline
   in place of the pricing toggle below. */
.mb-hero-gift-cta { margin-top: 24px; }

/* "Read more essays" link at the bottom of the This Week section on
   the homepage, routing to /archive/ for the full listing. */
.week-more {
  margin-top: 40px;
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--color-card-border);
  position: relative;
}
.week-more::before {
  content: "\2766";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  font-size: 14px;
  line-height: 1;
  background: transparent;
}
.week-more-link {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-dark);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
.week-more-link:hover { color: var(--color-primary); text-decoration: none; }

/* Archive listing page (custom-archive.hbs, served at /archive/). */
.archive-listing { padding: 48px 0 96px; }
.archive-listing .section-intro { margin-bottom: 32px; text-align: center; }

/* Paper texture — removed for comparison. Revert this commit to restore. */

/* Contributor byline — inline wrapper pattern used across hero
   byline, Today feature-entry, Editor's Pick list card, and
   post.hbs related cards. Mirrors the [data-byline]:empty approach
   already in use on post.hbs and post-entry.hbs: show the
   contributor span if it has any .byline-author children; hide the
   fallback in that case. */
.byline-inline--contributors[data-byline]:empty { display: none; }
.byline-inline--contributors[data-byline]:not(:empty) + .byline-inline--fallback { display: none; }

/* Suppress the contributor paragraph entirely when there is no
   author-prefixed candidate inside it — prevents an empty <p>
   from taking up a line above the fallback byline on mobile. */
.entry-byline-contributors[data-byline]:not(:has([data-tag-slug^="author-"])) { display: none; }
.feature-byline.byline-inline--contributors[data-byline]:not(:has([data-tag-slug^="author-"])) { display: none; }

/* Homepage includes the full membership body at the bottom, which
   has its own Readers testimonial section. The homepage already has
   its own Readers section higher up, so hide the duplicate from
   the inlined membership body. */
.homepage-membership .readers { display: none; }

/* Read-by topic rail: contributor tags (slug starts with "author-")
   are bylines, not topics — hide them so the rail only shows
   editorial categories. */
.topics .topic-pill[data-tag-slug^="author-"] { display: none; }


/* Listen grid in "podcasts" mode — merges both feeds into the 4
   most-recent episodes, so swap the 2-col layout for a 4-col grid
   on desktop (2×2 on tablet, stacked on mobile) and kill the
   centered hairline separator from the default listen-grid. */
.listen-grid--podcasts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 40px;
  max-width: 1180px;
}
.listen-grid--podcasts::before { display: none; }
@media (max-width: 1024px) {
  .listen-grid--podcasts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
}
@media (max-width: 640px) {
  .listen-grid--podcasts { grid-template-columns: 1fr; row-gap: 28px; }
}

/* Podcast episode cards (listen-grid--podcasts). More deliberate
   spacing, a shared column rhythm, and a clear Listen block at the
   bottom so each card reads as a standalone object rather than a
   dense paragraph. */
.listen-grid--podcasts { column-gap: 48px; row-gap: 56px; }
.listen-grid--podcasts .pod-entry--episode {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.listen-grid--podcasts .pod-topic {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-card-border);
}
.listen-grid--podcasts .pod-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.18;
  color: var(--color-dark);
  margin: 0 0 18px;
}
.listen-grid--podcasts .pod-title em { font-style: italic; }
.listen-grid--podcasts .pod-excerpt {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0 0 24px;
  flex: 1;
}
.listen-grid--podcasts .pod-listen {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-card-border);
}
.listen-grid--podcasts .pod-listen-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 4px;
}
.listen-grid--podcasts .pod-listen-platforms {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--color-dark);
}
.listen-grid--podcasts .pod-listen-platforms a {
  color: var(--color-dark);
  text-decoration: none;
  transition: color 0.15s;
}
.listen-grid--podcasts .pod-listen-platforms a:hover { color: var(--color-primary); }
.listen-grid--podcasts .pod-listen-sep { color: var(--color-card-border); padding: 0 6px; }

/* Covers layout — two shows side by side, cover art on top,
   latest episode underneath. Used on the homepage. */
.listen-grid--covers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  row-gap: 40px;
  max-width: 860px;
}
.listen-grid--covers::before { display: none; }
@media (max-width: 640px) {
  .listen-grid--covers { grid-template-columns: 1fr; row-gap: 48px; }
  .listen-grid--covers .pod-show-cover { margin-left: auto; margin-right: auto; display: block; }
  .listen-grid--covers .pod-show-name { text-align: center; }
}
.pod-show-cover {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
}
.pod-show-name {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-card-border);
}
.pod-show-name a { color: inherit; text-decoration: none; }
.pod-show-name a:hover { color: var(--color-secondary, #c1593c); }
.pod-show-ep-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
  margin: 0 0 4px;
}
.pod-show-ep-date {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 12px;
}
.pod-show-latest .pod-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-dark);
  margin: 0 0 12px;
}
.pod-show-latest .pod-title em { font-style: italic; }
.pod-show-latest .pod-excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0 0 20px;
}
.pod-show {
  display: flex;
  flex-direction: column;
}
.pod-show-latest {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.pod-show-latest .pod-listen {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-card-border);
}
.pod-show-latest .pod-listen-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 4px;
}
.pod-show-latest .pod-listen-platforms {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--color-dark);
}
.pod-show-latest .pod-listen-platforms a {
  color: var(--color-dark);
  text-decoration: none;
  transition: color 0.15s;
}
.pod-show-latest .pod-listen-platforms a:hover { color: var(--color-primary); }
.pod-show-latest .pod-listen-sep { color: var(--color-card-border); padding: 0 6px; }

/* ----------------------------------------------------------------------------
   Member dashboard (/dashboard/) — editorial layout modeled on
   custom-about.hbs. Dark hero, two-column body, <details> modules
   on the left with roman-numeral essay lists, identity rail on
   the right.
   ---------------------------------------------------------------------------- */
.dashboard-hero {
  background: var(--color-dark);
  color: var(--color-white, #fff);
  padding: 96px 0 72px;
}
.dashboard-hero .hero-headline { margin-top: 12px; max-width: 780px; }
.dashboard-hero .hero-sub { max-width: 640px; margin-top: 18px; }
.dashboard-hero .dashboard-actions { margin-top: 28px; }
/* Liturgical week chip — collapsed shows just the week label as a
   small all-caps eyebrow. Click to expand into the BCP Collect. */
.hero-liturgical-week {
  font-family: var(--font-body);
  margin: 24px 0 0;
  max-width: 720px;
}
.hero-liturgical-week[hidden] { display: none; }

.hero-liturgical-week-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  transition: color 180ms ease;
}
.hero-liturgical-week-summary::-webkit-details-marker { display: none; }
.hero-liturgical-week-summary:hover { color: rgba(255,255,255,0.85); }
.hero-liturgical-week-summary:focus-visible {
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: 4px;
  color: rgba(255,255,255,0.85);
}
.hero-liturgical-week-chev {
  display: inline-block;
  font-size: 10px;
  transition: transform 180ms ease;
}
.hero-liturgical-week[open] .hero-liturgical-week-chev {
  transform: rotate(180deg);
}

.hero-liturgical-collect {
  margin-top: 20px;
  padding: 24px 28px;
  background: rgba(255,255,255,0.06);
  border-left: 2px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  /* Brief fade-in when opened */
  animation: hero-liturgical-collect-fade 220ms ease-out;
}
@keyframes hero-liturgical-collect-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-liturgical-collect-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 12px;
}
.hero-liturgical-collect-body {
  font-family: var(--font-display, var(--font-body));
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  margin: 0;
  /* Drop cap-ish first letter via small caps would be heavy here;
     the BCP cadence comes through fine with serif body alone. */
}
.hero-liturgical-collect-source {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.4);
  margin: 16px 0 0;
}

@media (max-width: 640px) {
  .hero-liturgical-collect {
    padding: 18px 20px;
  }
  .hero-liturgical-collect-body {
    font-size: 16px;
  }
}

.dashboard-admin-banner {
  background: rgba(238, 125, 81, 0.12);
  border: 1px solid rgba(238, 125, 81, 0.5);
  color: var(--color-dark);
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 13px;
  text-align: center;
}
.dashboard-admin-banner code {
  font-size: 12px;
  background: rgba(0,0,0,0.05);
  padding: 1px 6px;
  border-radius: 3px;
}

.dashboard-body {
  background: var(--color-cream, #f5efe1);
  padding: 72px 0 96px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}
.dashboard-main {
  /* Give the grid row enough height for the sticky rail on the
     right to actually have somewhere to stick, even when the
     modules are collapsed. */
  min-height: calc(100vh - 240px);
}

/* --- Module (expandable section) -------------------------------------- */
.dashboard-module {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
}
/* Generous breathing room between modules so each reads as its
   own editorial beat. Flourish sits mid-way between. */
.dashboard-module + .flourish { margin: 72px 0; }
.dashboard-module + .dashboard-module { margin-top: 72px; }
.dashboard-module summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 18px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.dashboard-module summary::-webkit-details-marker { display: none; }
.dashboard-module-title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.15;
  margin: 0;
  color: var(--color-dark);
  font-weight: 400;
}
.dashboard-module-chev {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s;
  align-self: center;
}
.dashboard-module[open] .dashboard-module-chev {
  transform: rotate(-135deg) translateY(-3px);
}
.dashboard-module-body { padding: 24px 0 0; }

/* --- Editorial essay list (used for members-only + history) ---------- */
.dashboard-essay-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Inline on /dashboard/ (bookmarks + history modules): 2 entries
   per row. Full-page views (/dashboard/bookmarks/ + history/)
   stay single-column so the archive reads linearly. */
.dashboard-module .dashboard-essay-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
}
@media (max-width: 720px) {
  .dashboard-module .dashboard-essay-list { grid-template-columns: 1fr; }
}
.dashboard-essay {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 22px;
  align-items: start;
}
.dashboard-essay-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--color-card-border, rgba(0,0,0,0.1));
  padding: 6px;
  background: var(--color-white, #fff);
  box-shadow: 0 4px 12px rgba(45, 41, 39, 0.06);
  background-clip: content-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.dashboard-essay-thumb:hover {
  box-shadow: 0 6px 18px rgba(45, 41, 39, 0.12);
  border-color: rgba(238, 125, 81, 0.45);
}
.dashboard-essay-body { min-width: 0; }
.dashboard-essay-topic {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
  margin: 0 0 4px;
}
.dashboard-essay-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 6px;
  font-weight: 400;
}
.dashboard-essay-title a {
  color: var(--color-dark);
  text-decoration: none;
  transition: color 0.15s;
}
.dashboard-essay-title a:hover { color: var(--color-primary); }
.dashboard-essay-excerpt,
.dashboard-essay-meta {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
}
.dashboard-essay-meta { margin-top: 6px; font-size: 12px; letter-spacing: 0.02em; }

.dashboard-empty {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0;
  padding: 8px 0;
}

/* --- Rail (right column) --------------------------------------------- */
/* No sticky, no fixed — rail sits in its natural spot in the grid
   column and scrolls with the page. */
.dashboard-rail {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Editorial rail — no cards, no borders. Each section is plain
   prose: eyebrow, italic display tier line, meta, inline arrow
   link. A thin rule separates the sections. */
.dashboard-rail-item { padding: 0; }
.dashboard-rail-item .eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 8px;
}
.dashboard-rail-tier {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 4px;
  color: var(--color-dark);
  font-weight: 400;
}
.dashboard-rail-meta {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0 0 14px;
}
.dashboard-rail-link {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(238, 125, 81, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.15s, color 0.15s;
}
.dashboard-rail-link:hover {
  border-color: var(--color-primary);
  color: var(--color-secondary, #c1593c);
}
.dashboard-rail-sep {
  height: 1px;
  background: rgba(0,0,0,0.1);
  margin: 0;
}

/* --- Engagement module (dashboard) ----------------------------------- */
.engagement-module {
  position: relative;
  margin-bottom: 72px;
  padding: 28px 28px 28px 32px;
  border-left: 4px solid var(--color-primary);
  background: rgba(238, 125, 81, 0.06);
}
.engagement-module details { list-style: none; }
.engagement-module summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}
.engagement-module summary::-webkit-details-marker { display: none; }
.engagement-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.3;
  color: var(--color-dark);
  margin: 0;
}
.engagement-body { padding: 16px 0 0; }
.engagement-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-body);
  margin: 0 0 20px;
}
.engagement-link-btn { margin-top: 4px; }
.engagement-poll { display: flex; flex-direction: column; gap: 8px; }
.engagement-poll-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 4px;
  background: var(--color-white);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-dark);
  overflow: hidden;
  transition: border-color 0.15s;
}
.engagement-poll-option:hover:not(:disabled) { border-color: var(--color-primary); }
.engagement-poll-option:disabled { cursor: default; opacity: 0.85; }
.engagement-poll-option-label { position: relative; z-index: 1; }
.engagement-poll-option-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(238, 125, 81, 0.12);
  transition: width 0.4s ease;
}
.engagement-poll-option-pct {
  position: relative;
  z-index: 1;
  font-size: 13px;
  color: var(--color-muted);
  font-weight: 600;
}
.engagement-respond { display: flex; flex-direction: column; gap: 12px; }
.engagement-respond-input {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  resize: vertical;
  min-height: 72px;
}
.engagement-respond-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(238, 125, 81, 0.15);
}
.engagement-respond-anon {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.engagement-respond-btn { align-self: flex-start; }
.engagement-respond-status {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-primary);
  margin: 0;
}
/* Admin engagement page */
.engagement-poll-results { display: flex; flex-direction: column; gap: 10px; }
.engagement-poll-row { display: flex; align-items: center; gap: 12px; }
.engagement-poll-label { font-size: 14px; min-width: 100px; }
.engagement-poll-bar {
  flex: 1;
  height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.engagement-poll-bar span {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: 4px;
}
.engagement-poll-count { font-size: 13px; color: var(--color-muted); min-width: 70px; text-align: right; }
.engagement-response-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.engagement-response-item { border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 16px; }
.engagement-response-meta { font-size: 12px; color: var(--color-muted); margin: 0 0 4px; }
.engagement-response-text { font-size: 14px; line-height: 1.5; margin: 0; }
@media (max-width: 640px) {
  .engagement-module { padding: 20px 20px 20px 24px; margin-bottom: 48px; }
  .engagement-title { font-size: 19px; }
}

/* --- Reading tracker (dashboard rail) -------------------------------- */
.reading-tracker { list-style: none; }
.reading-tracker summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}
.reading-tracker summary::-webkit-details-marker { display: none; }
.reading-tracker summary .eyebrow { margin: 0; }
.reading-tracker summary .dashboard-module-chev {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.reading-tracker[open] summary .dashboard-module-chev {
  transform: rotate(-135deg);
}
.reading-tracker-body {
  padding: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reading-tracker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.reading-tracker-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
}
.reading-tracker-dots {
  display: flex;
  gap: 6px;
}
.reading-tracker-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,0.1);
  transition: background 0.3s;
}
.reading-tracker-dots .dot.is-filled {
  background: var(--color-primary);
  box-shadow: 0 0 6px 2px rgba(238, 125, 81, 0.5);
}
.reading-tracker-count {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-dark);
  line-height: 1;
}

/* --- Dashboard address module ---------------------------------------- */
/* Editorial styling — no cards, no bordered boxes. Hairline focus
   states on inputs, a bottom rule under each field, italic display
   headings for section legends. Matches the rest of the dashboard
   prose rather than the bordered signup forms on /give/ /groups/. */
/* Make sure our display:flex below doesn't override the HTML hidden
   attribute — JS flips between view/empty/form via [hidden]. */
.dashboard-address [hidden] { display: none !important; }
.dashboard-address-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dashboard-address-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0;
}
.dashboard-address-display {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0;
  white-space: pre-line;
}
.dashboard-address-lede {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 14px;
  max-width: 52ch;
}
.dashboard-address-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Inline arrow link — used for Edit / Add / Cancel. No pill, no
   background. Just the primary color with a soft underline. */
.dashboard-inline-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  border-bottom: 1px solid rgba(238, 125, 81, 0.35);
  padding-bottom: 2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.dashboard-inline-link:hover {
  color: var(--color-secondary, #c1593c);
  border-color: var(--color-primary);
}
.dashboard-inline-link--muted {
  color: var(--color-muted);
  border-bottom-color: rgba(0, 0, 0, 0.18);
  font-weight: 500;
}
.dashboard-inline-link--muted:hover {
  color: var(--color-dark);
  border-bottom-color: rgba(0, 0, 0, 0.4);
}

/* Form. No card, no box-shadow. Fieldset groups separated by a
   full-width hairline above an italic display heading. Inputs
   sit on a bottom rule only — underlined fields, not bordered
   boxes — which is the house style for the dashboard context. */
.dashboard-address-form {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.dashboard-form-group {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.dashboard-form-group[hidden] {
  display: none;
}
.dashboard-form-group:first-child {
  border-top: 0;
  padding-top: 0;
}
.dashboard-form-legend {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  color: var(--color-dark);
  font-weight: 400;
  margin: 0;
}
.dashboard-form-legend em {
  font-style: italic;
  color: var(--color-secondary, #c1593c);
}
.dashboard-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.dashboard-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dashboard-form-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-dark);
  font-weight: 600;
}
.dashboard-form-hint {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #4a4440;
  font-weight: 400;
  font-style: italic;
}
.dashboard-form-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.dashboard-form-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.dashboard-form-field input,
.dashboard-form-field select {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-dark);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  padding: 8px 0;
  width: 100%;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.dashboard-form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
                    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.dashboard-form-field input:focus,
.dashboard-form-field select:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
  border-bottom-width: 2px;
  padding-bottom: 7px;
}
/* --- Radio + checkbox groups (dashboard demographics) --- */
.dashboard-address .radio-group,
.dashboard-address .checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dashboard-address .radio-option,
.dashboard-address .checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--color-dark);
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms ease;
}
.dashboard-address .radio-option:hover,
.dashboard-address .checkbox-option:hover {
  background: var(--color-bg-muted, #f6f3f2);
}
.dashboard-address .radio-option input,
.dashboard-address .checkbox-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.dashboard-address-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
}
.dashboard-form-success {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-secondary, #c1593c);
  font-weight: 600;
  margin: 0;
}

@media (max-width: 960px) {
  .dashboard-grid { grid-template-columns: 1fr; gap: 40px; }
  .dashboard-main { min-height: auto; }
  .dashboard-rail {
    position: static;
    width: auto;
    right: auto;
    max-height: none;
    overflow-y: visible;
  }
}
@media (max-width: 640px) {
  .dashboard-hero { padding: 72px 0 56px; }
  .dashboard-body { padding: 48px 0 72px; }
  .dashboard-module-title { font-size: 24px; }
  .dashboard-essay { grid-template-columns: 96px 1fr; gap: 16px; }
  .dashboard-essay-title { font-size: 18px; }
  .dashboard-module + .flourish { margin: 56px 0; }
  .dashboard-module + .dashboard-module { margin-top: 56px; }
  .dashboard-form-row { grid-template-columns: 1fr; gap: 22px; }
  .dashboard-form-legend { font-size: 20px; }
  .dashboard-rail-select select {
    font-size: 16px;
    padding: 10px 28px 10px 12px;
    background-position: right 10px center;
  }
}

/* --- Post-page bookmark button (sits next to the audio trigger) ---- */
.article-actions {
  margin: 32px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Icon group — keeps bookmark + pdf + gift together, so when the
   expanded audio pill is wide enough to wrap, all three icons
   move to the next line as a unit. */
.article-actions-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.article-actions .article-audio { margin: 0; }
.article-bookmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(238, 125, 81, 0.08);
  border: 1px solid rgba(238, 125, 81, 0.35);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.article-bookmark:hover {
  background: rgba(238, 125, 81, 0.16);
  border-color: var(--color-primary);
}
.article-bookmark-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.article-bookmark .article-bookmark-outline { display: block; }
.article-bookmark .article-bookmark-fill { display: none; }
.article-bookmark.is-bookmarked {
  background: var(--color-primary);
  color: var(--color-white, #fff);
  border-color: var(--color-primary);
}
.article-bookmark.is-bookmarked .article-bookmark-outline { display: none; }
.article-bookmark.is-bookmarked .article-bookmark-fill { display: block; }

/* --- Dashboard "Remove" button inline on bookmark list items ------ */
.dashboard-essay-remove {
  margin-top: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s;
}
.dashboard-essay-remove:hover { color: var(--color-primary); }
.dashboard-essay-remove:disabled { opacity: 0.5; cursor: default; }

/* --- View all link (under truncated list) + full-list + breadcrumb - */
.dashboard-view-all {
  margin: 24px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.dashboard-view-all a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(238, 125, 81, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.15s, color 0.15s;
}
.dashboard-view-all a:hover {
  border-color: var(--color-primary);
  color: var(--color-secondary, #c1593c);
}
.dashboard-breadcrumb {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.dashboard-breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s;
}
.dashboard-breadcrumb a:hover { color: var(--color-secondary, #c1593c); }
.dashboard-main--full { max-width: 1120px; margin: 0 auto; }

/* Full-page bookmarks + history lists: reuse the archive/home 2-up
   .week-grid + .entry layout so these pages read like the blog
   listings. Remove button sits under the entry on the member's
   own pages since no ownership signal exists on editorial lists. */
.dashboard-entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dashboard-entry .entry { flex: 1; }
.dashboard-entry .dashboard-essay-remove { align-self: flex-start; margin-top: 4px; }

/* --- Commonplace Book ------------------------------------------------ */

.commonplace-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.commonplace-entry {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-card-border);
}
.commonplace-entry:first-child { padding-top: 0; }
.commonplace-entry:last-child { border-bottom: none; }

.commonplace-quote {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-dark);
  margin: 0 0 10px;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--color-primary);
}

.commonplace-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  margin-bottom: 8px;
}
.commonplace-source {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}
.commonplace-source:hover { text-decoration: underline; }
.commonplace-date {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  margin: 4px 0 8px;
}

.commonplace-actions {
  display: flex;
  gap: 12px;
}
.commonplace-action-btn {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.15s;
}
.commonplace-action-btn:hover { color: var(--color-dark); }
.commonplace-action-remove.is-confirming {
  color: var(--color-primary);
}
.commonplace-action-btn:disabled { opacity: 0.5; cursor: default; }

/* Highlight-to-save floating tooltip */
.commonplace-tooltip {
  position: absolute;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.commonplace-tooltip.visible {
  opacity: 1;
  pointer-events: auto;
}
.commonplace-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  transition: background 0.15s;
}
.commonplace-save-btn:hover {
  background: var(--color-secondary, #c1593c);
}
.commonplace-save-btn:disabled {
  cursor: default;
  opacity: 0.85;
}
.commonplace-save-btn svg {
  stroke: #fff;
  flex-shrink: 0;
}

@media print {
  .commonplace-tooltip { display: none !important; }
}

/* --- "Become a Member to access" note under the action row ---------- */
.article-actions-upsell {
  margin: 12px auto 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
}
.article-actions-upsell a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(238, 125, 81, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.15s, color 0.15s;
}
.article-actions-upsell a:hover {
  border-color: var(--color-primary);
  color: var(--color-secondary, #c1593c);
}


/* ----------------------------------------------------------------------------
   /events/ library + /forum/ detail. /forum/ hero mirrors custom-about:
   two-column grid with the event's feature image on the right,
   title + excerpt left.
   ---------------------------------------------------------------------------- */
.events-page [data-events-source] { display: none; }

/* --- /forum/ hero ---------------------------------------------------- */
.forum-hero {
  background: var(--color-dark);
  color: var(--color-white, #fff);
  padding: 72px 0;
  overflow: visible;
  position: relative;
}
.forum-hero .container { max-width: 1180px; text-align: left; }
.forum-hero .hero-kicker { justify-content: flex-start; }
.forum-hero--empty .hero-sub a { color: var(--color-primary); text-decoration: underline; }
.forum-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.forum-hero-content { max-width: 620px; }
.forum-hero-headline {
  font-size: clamp(36px, 4.4vw, 56px);
  margin: 0 0 20px;
}
.forum-hero .hero-sub {
  max-width: 520px;
  margin: 0;
  font-style: italic;
  opacity: 0.9;
}
.events-hero-link,
.events-hero-link:hover { color: inherit; text-decoration: none; }
.forum-hero-image {
  position: relative;
  z-index: 3;
}
.forum-hero-image-inner {
  aspect-ratio: 16 / 9;
  background: #3a332e center / cover no-repeat;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

/* --- /forum/ body (prose + registration) ---------------------------- */
.events-body {
  background: var(--color-cream, #f5efe1);
  padding: 72px 0 96px;
}
.events-prose {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-dark);
}
.events-prose > :first-child { margin-top: 0; }
.events-prose > :last-child { margin-bottom: 0; }
.events-register { margin-top: 16px; }
.events-register .eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 12px;
}
.events-register-title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--color-dark);
  font-weight: 400;
}
.events-register-sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 28px;
  max-width: 620px;
}

/* --- /events/ library ------------------------------------------------ */
.events-library-hero {
  background: var(--color-dark);
  color: var(--color-white, #fff);
  padding: 96px 0 72px;
}
.events-library-hero .hero-sub { max-width: 680px; margin-top: 18px; }
.events-library-body {
  background: var(--color-cream, #f5efe1);
  padding: 72px 0 96px;
}
.events-library-section { margin: 0; }
.events-library-section + .flourish { margin: 48px 0; }
.events-library-section .eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 10px;
}
.events-library-title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.15;
  margin: 0 0 24px;
  color: var(--color-dark);
  font-weight: 400;
}
.events-library-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  margin: -16px 0 24px;
}
.events-library-sub a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(238, 125, 81, 0.35);
}
.events-library-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.events-library-link {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 22px;
  align-items: start;
  text-decoration: none;
  color: inherit;
}
.events-library-link--no-thumb {
  grid-template-columns: 1fr;
}
.events-library-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--color-card-border, rgba(0,0,0,0.1));
  padding: 6px;
  background: var(--color-white, #fff);
  background-clip: content-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.events-library-when {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
  margin: 0 0 6px;
}
.events-library-card-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  margin: 0;
  color: var(--color-dark);
  font-weight: 400;
  transition: color 0.15s;
}
.events-library-link:hover .events-library-card-title { color: var(--color-primary); }
.events-library-empty { text-align: center; max-width: 520px; margin: 0 auto; }
.events-library-empty .eyebrow { text-align: center; }

@media (max-width: 820px) {
  .forum-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .forum-hero-content { max-width: none; }
  .forum-hero-image-inner { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .forum-hero { padding: 56px 0; }
  .events-body { padding: 48px 0 72px; }
  .events-library-hero { padding: 72px 0 56px; }
  .events-library-body { padding: 48px 0 72px; }
  .events-register-title,
  .events-library-title { font-size: 26px; }
  .events-library-link { grid-template-columns: 96px 1fr; gap: 16px; }
  .events-library-link--no-thumb { grid-template-columns: 1fr; }
  .events-library-card-title { font-size: 18px; }
}

/* ----------------------------------------------------------------------------
   /dashboard/replays/ — paid-only video replay library.
   ---------------------------------------------------------------------------- */
.dashboard [data-replays-source] { display: none; }
.replays-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.replays-card {
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 24px;
}
.replays-card:first-child { border-top: 0; padding-top: 0; }
.replays-details { margin: 0; padding: 0; }
.replays-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 18px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.replays-summary::-webkit-details-marker { display: none; }
.replays-date {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
  margin: 0 0 6px;
  grid-column: 1;
}
.replays-title {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.2;
  margin: 0;
  font-weight: 400;
  color: var(--color-dark);
}
.replays-sub {
  grid-column: 1;
  grid-row: 3;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 8px 0 0;
}
.replays-chev {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s;
}
.replays-details[open] .replays-chev {
  transform: rotate(-135deg) translateY(-3px);
}
.replays-body {
  padding: 20px 0 4px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-dark);
}
.replays-body iframe { max-width: 100%; border-radius: 4px; }
.replays-body > :first-child { margin-top: 0; }
.replays-body > :last-child { margin-bottom: 0; }
.replays-empty {
  list-style: none;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
}

@media (max-width: 640px) {
  .replays-title { font-size: 22px; }
}

/* --- Ebook list ------------------------------------------------
   Editorial rows (no cards): 4 entries per row on desktop, stacking
   to 2 on tablets and 1 on phones. Each entry is a plain column
   with a short hairline accent above the title — no background,
   no border, no shadow. Used on /dashboard/ebooks/ and inline on
   /dashboard/ via the shared ebooks-list partial.                  */
.ebooks-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
}
@media (max-width: 980px) {
  .ebooks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ebooks-grid { grid-template-columns: 1fr; }
}
.ebook-entry {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 16px;
}
.ebook-entry-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.ebook-entry-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
}
.ebook-entry-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
  color: var(--color-dark);
}
.ebook-entry-excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
  flex: 1;
}
.ebook-entry-cta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 4px;
  transition: color 0.15s;
}
.ebook-entry-link:hover { text-decoration: none; }
.ebook-entry-link:hover .ebook-entry-cta { color: var(--color-secondary, #c1593c); }

/* Home → "Want More Mere Orthodoxy?" CTA for signed-in free
   Subscribers. Reuses .digest-section/.digest-cta inline grid so
   the block sits in rhythm with the rest of the homepage's light
   sections. Left: copy. Right: benefits list + Become a Member. */
.home-upgrade-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.home-upgrade-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-dark);
}
.home-upgrade-list li {
  position: relative;
  padding-left: 22px;
}
.home-upgrade-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 2px;
  background: var(--color-primary);
}
.home-upgrade-btn { align-self: flex-start; }

/* Tablet/mobile: the parent .digest-cta switches to text-align: center
   at ≤1024px, which cascades into the upgrade list. Each <li> uses an
   absolutely-positioned orange dash at left:0 of its content box, so
   centered text floats to the middle of each line while the dash stays
   pinned at the box edge — short and long items end up with different
   visual offsets ("stair-step"). Plus the button's flex-start alignment
   pins it to the left. Override both: confine the body to a centered
   narrow column, left-align text inside, and center the button below
   the list. */
@media (max-width: 1024px) {
  .home-upgrade-cta .home-upgrade-body {
    text-align: left;
    max-width: 360px;
    margin: 0 auto;
    align-items: stretch;
  }
  .home-upgrade-cta .home-upgrade-list { margin: 0; }
  .home-upgrade-cta .home-upgrade-btn { align-self: center; }
}

/* Account button shows @member.name; cap width so long names
   truncate instead of stretching the header. */
.btn-account {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Download-PDF button in .article-actions, matching the pill
   aesthetic of the Listen + Bookmark buttons. */
.article-pdf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(238, 125, 81, 0.08);
  border: 1px solid rgba(238, 125, 81, 0.35);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.article-pdf:hover {
  background: rgba(238, 125, 81, 0.16);
  border-color: var(--color-primary);
  text-decoration: none;
  color: var(--color-primary);
}
.article-pdf-icon { width: 14px; height: 14px; flex: 0 0 auto; }

/* Icon-only circle variant for the article-action buttons. Labels
   are hidden; aria-label carries the meaning. The audio trigger
   swaps to the full-width inline player on click, which is not
   affected here. */
.article-actions .article-audio-trigger,
.article-actions .article-bookmark,
.article-actions .article-pdf,
.article-actions .article-gift,
.article-actions .article-theme {
  width: 40px;
  height: 40px;
  padding: 0;
  gap: 0;
  justify-content: center;
}
/* Pulse animation for loading states (audio preparing, PDF signing).
   Icon stays visible; the border breathes to signal activity. */
@keyframes action-pulse {
  0%, 100% { border-color: rgba(238, 125, 81, 0.35); opacity: 1; }
  50% { border-color: var(--color-primary); opacity: 0.6; }
}
.article-actions .is-loading {
  animation: action-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
}

/* Dark-mode toggle — matches the pill aesthetic of .article-pdf /
   .article-bookmark / .article-gift. The .article-actions 40x40
   override above squares it into an icon-only circle. */
.article-theme {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(238, 125, 81, 0.08);
  border: 1px solid rgba(238, 125, 81, 0.35);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.article-theme:hover {
  background: rgba(238, 125, 81, 0.16);
  border-color: var(--color-primary);
}
.article-theme[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.article-theme[aria-pressed="true"]:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

/* ===========================================================
   Dark-mode palette overrides — scoped to html[data-theme="dark"]
   .article-body so only the article wrapper and its descendants
   flip. Masthead, hero, footer, and any other site chrome stay
   unchanged.

   Tuning notes:
   - Body bg is deliberately SLIGHTLY lighter than the hero
     (--color-dark = #2d2927) so the hero→body transition still
     reads visually instead of bleeding into a solid wall.
   - Text is warm cream, not pure white, to match the brand's
     parchment identity.
   - Links and dropcap keep --color-primary (#ee7d51) because it
     reads well on dark without a shift; --color-secondary
     (#c1593c rust) is too muddy on dark so the dropcap is
     lifted to primary.

   This is a prototype starting point — expect to iterate on
   specific inline elements (pull-quotes, code blocks, figures,
   captions, footnote markers) once we see real posts rendered.
   =========================================================== */
/* Body bg on post pages — darkens the band BEHIND the feature image
   and the mobile TOC nav so the hero→feature-image→article-body
   transition is a continuous dark rather than dark→cream→dark.
   Scoped to body.post-template (Ghost's auto class) so non-post
   pages stay light even if the reader's localStorage has dark on. */
html[data-theme="dark"] body.post-template {
  background: #33302d;
}
html[data-theme="dark"] .article-feature-caption {
  color: #b8ab98;
}
html[data-theme="dark"] .toc-mobile {
  background: rgba(233, 222, 200, 0.04);
  border-color: rgba(233, 222, 200, 0.18);
  color: #e9dec8;
}
html[data-theme="dark"] .toc-mobile .toc-label {
  color: #b8ab98;
}
html[data-theme="dark"] .toc-mobile .toc-link {
  color: #e9dec8;
}

/* IMPORTANT: every rule below must be scoped to body.post-template.
   The Faith Received reading rooms (custom-faith-* templates) reuse
   the .article-body and .article-content classes; without this scope
   a reader who toggled dark mode on a post and then navigates to a
   document gets dark-mode text colors on a still-cream Faith Received
   body — black-on-black at the section summaries, cream-on-cream
   inside the answer prose. Don't drop the body.post-template selector. */
html[data-theme="dark"] body.post-template .article-body {
  background: #33302d;
  color: #e9dec8;
}
html[data-theme="dark"] body.post-template .article-content,
html[data-theme="dark"] body.post-template .article-content p,
html[data-theme="dark"] body.post-template .article-content li {
  color: #e9dec8;
}
html[data-theme="dark"] body.post-template .article-content h1,
html[data-theme="dark"] body.post-template .article-content h2,
html[data-theme="dark"] body.post-template .article-content h3,
html[data-theme="dark"] body.post-template .article-content h4,
html[data-theme="dark"] body.post-template .article-content h5,
html[data-theme="dark"] body.post-template .article-content h6 {
  color: #f4ebd8;
}
html[data-theme="dark"] body.post-template .article-content a:not(.btn) {
  color: var(--color-primary);
}
html[data-theme="dark"] body.post-template .article-content a:not(.btn):hover {
  color: #f19371;
}
html[data-theme="dark"] body.post-template .article-content blockquote {
  border-left-color: rgba(233, 222, 200, 0.35);
  color: #d4c7b0;
}
html[data-theme="dark"] body.post-template .article-content hr {
  background: rgba(233, 222, 200, 0.18);
  border-color: rgba(233, 222, 200, 0.18);
}
html[data-theme="dark"] body.post-template .article-content code,
html[data-theme="dark"] body.post-template .article-content pre {
  background: rgba(233, 222, 200, 0.08);
  color: #e9dec8;
}
/* Ghost's first-letter dropcap on articles (if any) lifts to
   primary so the dark-mode accent stays legible. */
html[data-theme="dark"] body.post-template .article-content > p:first-of-type::first-letter {
  color: var(--color-primary);
}
/* Share rail + table-of-contents rail sit inside .article-body,
   so their text needs the cream treatment too. */
html[data-theme="dark"] .article-rail,
html[data-theme="dark"] .article-rail .rail-label,
html[data-theme="dark"] .article-rail-toc .toc-label,
html[data-theme="dark"] .article-rail-toc .toc-link {
  color: #b8ab98;
}
html[data-theme="dark"] .article-rail-toc .toc-link:hover {
  color: var(--color-primary);
}
/* Inline-support CTA at the end of the article: keep the editorial
   pause feel in dark mode — visible top/bottom hairlines, no card
   background. Paragraph + button text get explicit cream/white so
   they survive whatever the article-content cascade throws at them. */
html[data-theme="dark"] .inline-support {
  background: transparent;
  border-top-color: rgba(233, 222, 200, 0.22);
  border-bottom-color: rgba(233, 222, 200, 0.22);
  color: #e9dec8;
}
html[data-theme="dark"] .inline-support h3 {
  color: #f4ebd8;
}
html[data-theme="dark"] .inline-support p {
  color: #e9dec8;
}
html[data-theme="dark"] .inline-support .eyebrow {
  color: var(--color-primary);
}
html[data-theme="dark"] .inline-support .btn-primary {
  color: #ffffff;
}
html[data-theme="dark"] .inline-support .btn-ghost {
  color: #f4ebd8;
  border-color: rgba(244, 235, 216, 0.4);
}

/* Dark-mode only: soften the seam where .article-header's
   --color-dark meets the body's slightly-lighter #33302d. A
   bottom-of-header pseudo-element fades from transparent (showing
   the header's dark) to #33302d at the bottom. Extra stops give an
   ease-out feel across the full 240px fade distance so the
   transition is more gradual than a straight linear gradient. */
html[data-theme="dark"] .article-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  background: linear-gradient(
    to bottom,
    rgba(51, 48, 45, 0) 0%,
    rgba(51, 48, 45, 0.15) 35%,
    rgba(51, 48, 45, 0.55) 70%,
    #33302d 100%
  );
  pointer-events: none;
}

/* Theme transition — fades dark-mode colors in/out over 300ms so
   the toggle feels like a dissolve rather than a hard cut. Scoped
   to the elements that actually flip on post pages; keeps hover
   transitions on buttons (article-bookmark etc.) at their own
   faster rhythms by not including them. */
body.post-template,
body.post-template .article-body,
body.post-template .article-content,
body.post-template .article-content a,
body.post-template .article-content h1,
body.post-template .article-content h2,
body.post-template .article-content h3,
body.post-template .article-content h4,
body.post-template .article-content h5,
body.post-template .article-content h6,
body.post-template .article-content p,
body.post-template .article-content li,
body.post-template .article-content blockquote,
body.post-template .article-content hr,
body.post-template .article-content code,
body.post-template .article-content pre,
body.post-template .article-feature-caption,
body.post-template .toc-mobile,
body.post-template .toc-mobile .toc-label,
body.post-template .toc-mobile .toc-link,
body.post-template .article-rail,
body.post-template .article-rail .rail-label,
body.post-template .article-rail-toc .toc-label,
body.post-template .article-rail-toc .toc-link,
body.post-template .inline-support,
body.post-template .inline-support h3,
body.post-template .inline-support .eyebrow,
body.post-template .author-bio-name,
body.post-template .author-bio-text,
body.post-template .author-bio-links a,
body.post-template .related,
body.post-template .related .entry-title,
body.post-template .related .entry-excerpt,
body.post-template .related .entry-byline,
body.post-template .related .entry-date,
body.post-template .related .entry-meta,
body.post-template .related .entry-plate {
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}

/* Author bio block sits OUTSIDE .article-body (it's in the
   container-narrow wrapper after the article), so the .article-body
   text color overrides don't reach it. Scope these directly to the
   bio classes on post-template + dark. */
html[data-theme="dark"] .post-template .author-bio-name {
  color: #f4ebd8;
}
html[data-theme="dark"] .post-template .author-bio-text {
  color: #e9dec8;
}
html[data-theme="dark"] .post-template .author-bio-links a {
  color: var(--color-primary);
}
html[data-theme="dark"] .post-template .author-bio-links a:hover {
  color: #f19371;
}
/* "Read Next / More on this theme" sits outside .article-body, so
   needs explicit selectors to flip into the dark palette. */
html[data-theme="dark"] body.post-template .related {
  background: #33302d;
}
html[data-theme="dark"] body.post-template .related .section-heading {
  color: #f4ebd8;
}
html[data-theme="dark"] body.post-template .related .flourish::before,
html[data-theme="dark"] body.post-template .related .flourish::after {
  background: rgba(233, 222, 200, 0.18);
}
html[data-theme="dark"] body.post-template .related .entry-title {
  color: #f4ebd8;
}
html[data-theme="dark"] body.post-template .related .entry-excerpt {
  color: #e9dec8;
}
html[data-theme="dark"] body.post-template .related .entry-byline {
  color: #e9dec8;
}
html[data-theme="dark"] body.post-template .related .entry-date {
  color: #b8ab98;
}
html[data-theme="dark"] body.post-template .related .entry-meta {
  border-top-color: rgba(233, 222, 200, 0.18);
}
html[data-theme="dark"] body.post-template .related .entry:nth-child(n+3) {
  border-top-color: rgba(233, 222, 200, 0.18);
}
html[data-theme="dark"] body.post-template .related .entry-plate {
  border-color: rgba(233, 222, 200, 0.12);
}
html[data-theme="dark"] body.post-template .related .entry:hover .entry-title {
  color: var(--color-primary);
}
/* During a dark-mode flip, kill transitions on the 5 feature toggles
   so they snap instantly instead of fading via their hover-color
   transitions. dark-mode.js sets data-theme-switching for two frames
   while the theme swaps, then removes it. */
html[data-theme-switching] .article-actions .article-audio-trigger,
html[data-theme-switching] .article-actions .article-bookmark,
html[data-theme-switching] .article-actions .article-pdf,
html[data-theme-switching] .article-actions .article-gift,
html[data-theme-switching] .article-actions .article-theme {
  transition: none !important;
}

/* Hover tooltips for the round article-action buttons. The text
   labels live inline (in the hbs) so screen readers can read them
   regardless of CSS; here they're absolutely positioned below the
   button and fade in on hover/focus. Pointer-events:none keeps
   them from intercepting clicks. */
.article-actions .article-audio-trigger,
.article-actions .article-bookmark,
.article-actions .article-pdf,
.article-actions .article-gift,
.article-actions .article-theme { position: relative; }

.article-audio-label,
.article-bookmark-label,
.article-pdf-label,
.article-gift-label,
.article-theme-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  display: inline-block;
  background: var(--color-dark);
  color: #f4ebd8;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 20;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.35);
}
.article-actions .article-audio-trigger:hover .article-audio-label,
.article-actions .article-audio-trigger:focus-visible .article-audio-label,
.article-actions .article-bookmark:hover .article-bookmark-label,
.article-actions .article-bookmark:focus-visible .article-bookmark-label,
.article-actions .article-pdf:hover .article-pdf-label,
.article-actions .article-pdf:focus-visible .article-pdf-label,
.article-actions .article-gift:hover .article-gift-label,
.article-actions .article-gift:focus-visible .article-gift-label,
.article-actions .article-theme:hover .article-theme-label,
.article-actions .article-theme:focus-visible .article-theme-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* While the audio player is expanded into the inline pill, hide
   its tooltip so it doesn't float under the active controls. */
.article-audio.is-playing .article-audio-label,
.article-audio.is-loading .article-audio-label { display: none; }

.article-actions .article-audio-icon,
.article-actions .article-bookmark-icon,
.article-actions .article-pdf-icon,
.article-actions .article-theme-icon,
.article-actions .article-gift-icon { width: 16px; height: 16px; }

/* Gift button shares the pill aesthetic with .article-pdf /
   .article-bookmark so the four buttons sit in a single row. */
.article-gift {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(238, 125, 81, 0.08);
  border: 1px solid rgba(238, 125, 81, 0.35);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.article-gift:hover {
  background: rgba(238, 125, 81, 0.16);
  border-color: var(--color-primary);
}
.article-gift[disabled] { opacity: 0.5; cursor: default; }

/* Feature gate MODAL — both subscriber (PDF, gift) and member
   (audio, bookmark) gated clicks now open a centered dialog with
   the right next step. Subscriber modals embed the Ghost magic-
   link signup form (see feature-gate.js subscriberInner); member
   modals show a prominent "Become a Member" CTA. Panel styling is
   shared. */
.feature-gate-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  opacity: 0;
  transition: opacity 200ms ease;
  padding: 20px;
}
.feature-gate-modal.is-visible { opacity: 1; }
.feature-gate-modal.is-closing { opacity: 0; }
.feature-gate-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 41, 39, 0.72);
  cursor: pointer;
}
.feature-gate-modal-panel {
  position: relative;
  max-width: 480px;
  width: 100%;
  background: var(--color-page);
  border: 1px solid var(--color-card-border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  padding: 40px 32px 32px;
  text-align: center;
}
.feature-gate-modal-panel .eyebrow {
  margin: 0 0 10px;
}
.feature-gate-modal-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  color: var(--color-dark);
  margin: 0 0 14px;
}
.feature-gate-modal-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0 0 22px;
}
.feature-gate-modal-form {
  text-align: left;
}
/* Modal layout: First + Last on row 1, Email alone on row 2,
   Subscribe alone on row 3. Gives each element room to breathe in
   the narrower modal width, and keeps the visual rhythm top-down. */
.feature-gate-modal-form {
  grid-template-columns: 1fr 1fr;
  gap: 22px 18px;
}
.feature-gate-modal-form .digest-field:nth-of-type(3) {
  /* Email — its own row, full width. */
  grid-column: 1 / -1;
}
.feature-gate-modal-form .digest-submit {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 14px;
}
.feature-gate-modal-form .digest-fineprint,
.feature-gate-modal-form .digest-status {
  grid-column: 1 / -1;
  text-align: center;
  margin: 0;
}
.feature-gate-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.15s;
}
.feature-gate-modal-close:hover { color: var(--color-dark); }
body.feature-gate-modal-open { overflow: hidden; }

/* Member variant: a single prominent CTA button instead of the
   signup form. The .btn / .btn-primary classes from the theme's
   existing button system do the heavy lifting; this wrapper just
   centers it and gives top spacing. */
.feature-gate-modal-actions {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
.feature-gate-modal-cta {
  min-width: 220px;
}

/* Dark-mode override for the modal — matches the article-body dark
   palette so the overlay sits well on a dark page. */
html[data-theme="dark"] .feature-gate-modal-panel {
  background: #33302d;
  border-color: rgba(233, 222, 200, 0.18);
  color: #e9dec8;
}
html[data-theme="dark"] .feature-gate-modal-title,
html[data-theme="dark"] .feature-gate-modal-body {
  color: #e9dec8;
}

/* Clipboard-copy confirmation toast used by article-gift.js. Fixed
   at bottom-center, fades in/out via .is-visible. */
.gift-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(16px);
  background: var(--color-dark);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 14px 12px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9999;
  max-width: calc(100vw - 32px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.gift-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.gift-toast-msg {
  font-family: var(--font-body);
  font-size: 14px;
  color: inherit;
}
.gift-toast-action {
  background: var(--color-primary);
  color: var(--color-white);
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.gift-toast-action:hover { background: #d96d44; }
.gift-toast-action:active { transform: translateY(1px); }
/* Last-ditch fallback when even execCommand+clipboard both fail —
   show the URL in a focusable, pre-selected input so the user can
   copy manually with Cmd/Ctrl-C. Stretches the toast to fit. */
.gift-toast:has(.gift-toast-field) { white-space: normal; max-width: min(560px, calc(100vw - 32px)); }
.gift-toast-field {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.gift-toast-field:focus { outline: 1px solid var(--color-primary); outline-offset: 1px; }
@media (max-width: 520px) {
  .gift-toast { padding: 10px 12px 10px 18px; font-size: 13px; gap: 10px; }
  .gift-toast-action { padding: 7px 12px; font-size: 10px; letter-spacing: 0.16em; }
}

/* Top-of-article banner for ?gift=<token> visitors. Reuses the
   homepage Digest CTA via the .digest-cta class. Inside the narrower
   article column the 4-across form squeezes the inputs, so on
   .gift-banner the submit drops to its own row and the three fields
   share the full width equally. */
.gift-banner { margin: 0 0 36px; }
/* Copy aligned to top of form; tighter bottom padding so the bottom
   hairline sits close to the Subscribe link instead of floating. */
.gift-banner.digest-cta {
  align-items: start;
  padding-bottom: 0;
}
/* Three rows: First+Last, Email full width, Subscribe link. */
.gift-banner .digest-form {
  grid-template-columns: 1fr 1fr;
}
.gift-banner .digest-form .digest-field:nth-child(3) {
  grid-column: 1 / -1;
}
.gift-banner .digest-submit {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 10px;
  padding-bottom: 16px;
}
@media (max-width: 720px) {
  .gift-banner .digest-form { grid-template-columns: 1fr; }
}

/* --- /contact/ and /submissions/ pages ---------------------------
   Centered hero, then a 2-col body: editorial prose left, form
   pinned top-right. Aesthetic borrowed from /about/ (flourishes,
   Roman numerals, italic display headings, no cards).            */
.contact-page-hero {
  padding: 72px 0 32px;
  text-align: center;
}
.contact-page-hero .container { max-width: 760px; }
.contact-page-hero .hero-kicker { justify-content: center; }
.contact-page-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.04;
  color: var(--color-white);
  margin: 14px 0 18px;
}
.contact-page-headline em { font-style: italic; }
.contact-page-sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin: 0 auto;
}

.contact-page-body { padding: 56px 0 96px; }
.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 880px) {
  .contact-page-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Left column — editorial prose. */
.contact-page-left .contact-section + .contact-section { margin-top: 24px; }
.contact-page-left .flourish { margin: 32px 0; }
.contact-page-left .section-intro { text-align: left; margin-bottom: 24px; max-width: none; }
.section-intro-left { text-align: left !important; margin-left: 0 !important; }

.contact-section .eyebrow { color: var(--color-primary); margin: 0 0 4px; }
.contact-section p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0;
}
.contact-section a {
  color: var(--color-secondary, #c1593c);
  text-decoration: none;
  border-bottom: 1px solid rgba(193, 89, 60, 0.35);
  transition: border-color 0.15s;
}
.contact-section a:hover { border-color: var(--color-secondary, #c1593c); }
.contact-address {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-dark);
}

/* Right column — form sticks to the top of its grid cell. */
.contact-page-right { position: sticky; top: 24px; }
@media (max-width: 880px) {
  .contact-page-right { position: static; }
}
.contact-form-panel { }
.contact-form-panel .eyebrow { color: var(--color-primary); margin: 0 0 6px; }
.contact-panel-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.2;
  color: var(--color-dark);
  margin: 0 0 22px;
}

/* Submissions guidelines — Roman numeral list like .about-vision-grid
   but stacked single-column for prose-length lines. */
.submissions-guidelines {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.submissions-guideline {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
}
.submissions-guideline-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  color: var(--color-primary);
  text-align: center;
}
.submissions-guideline-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-dark);
  margin: 0 0 4px;
}
.submissions-guideline p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
}

/* File upload pill: hide the native input, show a styled button
   plus filename. site-forms.js updates the filename on change. */
.site-form-upload {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}
.site-form-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}
.site-form-upload-btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-card-border);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-secondary, #c1593c);
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.site-form-upload:hover .site-form-upload-btn,
.site-form-upload input:focus + .site-form-upload-btn {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.site-form-upload.has-file .site-form-upload-btn {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.site-form-upload-name {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.site-form { display: flex; flex-direction: column; gap: 18px; }
.site-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 480px) { .site-form-row { grid-template-columns: 1fr; } }
.site-form-field { display: flex; flex-direction: column; gap: 4px; }
.site-form-field label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
  font-variant: small-caps;
}
.site-form-field input[type="text"],
.site-form-field input[type="email"],
.site-form-field input[type="tel"],
.site-form-field input[type="date"],
.site-form-field input[type="number"],
.site-form-field select,
.site-form-field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 10px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-card-border);
  border-radius: 0;
  color: var(--color-dark);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
}

.site-form-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  cursor: pointer;
}

.site-form-field select:focus { border-bottom-color: var(--color-primary); }
.site-form-field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}
.site-form-field input[type="number"] {
  -moz-appearance: textfield;
}
.site-form-field input:focus,
.site-form-field textarea:focus { border-bottom-color: var(--color-primary); }
.site-form-field textarea { resize: vertical; min-height: 96px; padding: 10px 4px; }
.site-form-field input[type="file"] {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 6px 0;
  color: var(--color-dark);
}
.site-form-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.site-form-field-check label,
label.site-form-field-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  font-variant: normal;
  font-weight: 500;
  color: var(--color-dark);
  line-height: 1.5;
  cursor: pointer;
}
.site-form-field-check input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.site-form-submit {
  align-self: flex-start;
  background: transparent;
  color: var(--color-secondary);
  border: 0;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s;
  margin-top: 4px;
}
.site-form-submit::after {
  content: " \2192";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s;
}
.site-form-submit:hover { color: var(--color-primary); }
.site-form-submit:hover::after { transform: translateX(4px); }
.site-form-submit[disabled] { opacity: 0.5; cursor: default; }
.site-form-submit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}
@media (max-width: 640px) {
  .site-form-submit {
    min-height: 48px;
    padding: 14px 0;
    font-size: 12px;
  }
}

.site-form-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 8px 0 24px;
}

.site-form-status {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  margin: 4px 0 0;
  min-height: 18px;
}
.site-form-status.is-error { color: var(--color-secondary); }

.site-form-success .eyebrow { color: var(--color-primary); margin: 0 0 6px; }
.site-form-success h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--color-dark);
}
.site-form-success p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
}

/* --- /sponsorship/ page ------------------------------------------------
   Inventory grid showing ad-slot availability, plus a contact form.
   Fetches status from admin worker settings (public, no auth).        */

.sponsorship-hero {
  padding: 72px 0 32px;
  text-align: center;
}
.sponsorship-hero .container { max-width: 760px; }
.sponsorship-hero .hero-kicker { justify-content: center; }
.sponsorship-headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  margin: 8px 0 16px;
  color: var(--color-white);
}
.sponsorship-sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px;
  margin: 0 auto;
}
.sponsorship-headline .highlight {
  background-image: linear-gradient(90deg, rgba(193, 89, 60, 0.78) 0%, rgba(193, 89, 60, 0.78) 100%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
  padding: 0 0.14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  animation: hero-highlight-sweep 0.9s 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .sponsorship-headline .highlight {
    background-size: 100% 100%;
    animation: none;
  }
}

/* Stats bar — audience metrics */
.sponsorship-stats {
  margin-bottom: 48px;
  padding: 32px 0 36px;
  border-top: 1px solid var(--color-card-border);
  border-bottom: 1px solid var(--color-card-border);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sponsorship-stats.is-loaded {
  opacity: 1;
}
.stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 48px;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.stat-number {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.stat-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
    max-width: 340px;
  }
  .stat-number { font-size: 28px; }
  .stat-label {
    font-size: 10px;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
}

/* Inventory section */
.sponsorship-inventory {
  padding: 48px 0 64px;
}
.sponsorship-intro {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-muted);
}
.sponsorship-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1060px;
  margin: 0 auto;
}

/* Row of three: Digest / MF / CRC */
.sponsor-row--trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .sponsor-row--trio {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
}

/* Category cards */
.sponsor-category {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sponsor-category-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--color-card-border);
}
.sponsor-category-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-dark);
  margin: 0 0 6px;
}
.sponsor-category-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0;
}

/* Individual slots */
.sponsor-slots {
  padding: 0;
}
.sponsor-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--color-card-border);
}
.sponsor-slot:last-child {
  border-bottom: none;
}
.sponsor-slot-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
  white-space: nowrap;
}
.sponsor-slot-badge {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sponsor-slot-badge.is-available {
  background: #e8f5e9;
  color: #2e7d32;
}
.sponsor-slot-badge.is-filled {
  background: #fff3e0;
  color: #e65100;
}

/* Subgroup — "Category Slide-Ins" inside Website card */
.sponsor-subgroup {
  border-top: 1px solid var(--color-card-border);
  padding-bottom: 20px;
}
.sponsor-subgroup-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  padding: 20px 24px 4px;
  margin: 0;
}
.sponsor-slots--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--color-card-border);
  gap: 1px;
}
.sponsor-slots--grid .sponsor-slot {
  padding: 12px 20px;
  border: none;
  background: var(--color-white);
}
/* Fill empty trailing cells so lines extend uniformly */
.sponsor-slots--grid::after {
  content: '';
  background: var(--color-white);
}
@media (max-width: 768px) {
  .sponsor-slots--grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  .sponsor-slots--grid {
    grid-template-columns: 1fr 1fr;
  }
  .sponsor-slots--grid .sponsor-slot {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 16px;
  }
  .sponsor-slots--grid .sponsor-slot-badge {
    font-size: 11px;
    padding: 3px 10px;
  }
}

/* Mobile padding for sponsorship sections */
@media (max-width: 640px) {
  .sponsorship-inventory { padding: 32px 0 48px; }
  .sponsorship-intro { margin-bottom: 32px; font-size: 15px; }
  .sponsor-category-header { padding: 20px 20px 14px; }
  .sponsor-slot { padding: 12px 16px; }
  .sponsor-subgroup-title { padding: 16px 16px 4px; }
}

/* Form section */
.sponsorship-form-section {
  padding: 64px 0 96px;
  border-top: 1px solid var(--color-card-border);
}
.sponsorship-form-header {
  text-align: center;
  margin-bottom: 48px;
}
.sponsorship-form-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 400;
  color: var(--color-dark);
  margin: 8px 0 12px;
}
.sponsorship-form-sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 480px;
  margin: 0 auto;
}
.sponsorship-form {
  max-width: 640px;
  margin: 0 auto;
}

/* Checkbox grid for interest selection */
.sponsor-interests {
  border: none;
  padding: 0;
  margin: 0;
}
.sponsor-interests legend {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-muted);
  margin-bottom: 12px;
}
.sponsor-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}
@media (max-width: 480px) {
  .sponsor-check-grid {
    grid-template-columns: 1fr;
  }
}
.sponsor-check-group-label {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
  margin: 12px 0 2px;
  padding-top: 8px;
  border-top: 1px solid var(--color-card-border);
}
.sponsor-check-group-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Admin settings: sponsor subgroup headers + side-by-side rows */
.settings-subgroup-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin: 20px 0 8px;
}
.settings-subgroup-title:first-of-type {
  margin-top: 0;
}
.settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}
@media (max-width: 640px) {
  .settings-row {
    grid-template-columns: 1fr;
  }
}
.settings-group-desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  margin: -4px 0 16px;
  line-height: 1.5;
}

/* --- /podcasts/mere-fidelity/ and /podcasts/christians-reading-classics/ ---
   Hero: header left, square artwork right. Body: episode feed left,
   host list right. Matches the editorial-but-warm feel of the rest
   of the site; no cards on the hosts, just portraits + prose.      */
.podcast-hero { padding: 72px 0 88px; }
.podcast-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 880px) {
  .podcast-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
.podcast-hero-content { max-width: 620px; }
.podcast-hero-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.1;
  color: var(--color-white);
  margin: 14px 0 20px;
}
.podcast-hero-headline em { font-style: italic; }
.podcast-hero-sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 28px;
  max-width: 520px;
}
.podcast-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.podcast-hero-art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.podcast-hero-art img {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
}

/* Body: 2-col, feed left, hosts right. Sticky hosts so they stay
   visible while the episode list scrolls. */
.podcast-body { padding: 64px 0 96px; background: var(--color-background); }
.podcast-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 72px;
  max-width: 1120px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 880px) {
  .podcast-grid { grid-template-columns: 1fr; gap: 56px; }
}

/* Episode list — the existing .listen-grid / .pod-entry styles do
   most of the work. Here we stack entries vertically with hairlines
   instead of using the homepage 2-col grid treatment. */
.podcast-episode-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: none;
}
/* Kill the homepage listen-grid vertical divider; it's a 2-col
   center line that makes no sense on a single-column list. */
.podcast-episode-list::before { display: none; }
.podcast-episode-list .pod-entry {
  padding: 14px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  gap: 6px;
}
.podcast-episode-list .pod-entry:first-child {
  border-top: 0;
  padding-top: 0;
}
/* Bigger text, same tight row heights — line-heights + gaps stay
   compact so the entries don't balloon when the fonts grow. */
.podcast-episode-list .pod-title { font-size: 22px; line-height: 1.2; }
.podcast-episode-list .pod-topic { font-size: 11px; }
.podcast-episode-list .pod-date {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}
.podcast-episode-list .pod-excerpt { font-size: 15px; line-height: 1.45; }
.podcast-episode-list .pod-listen { margin-top: 4px; }
.podcast-episode-list .pod-listen-label,
.podcast-episode-list .pod-listen-platforms { font-size: 11px; }

/* Show-page (full-detail) episode card. The compact .pod-entry on
   the homepage stays as-is; .pod-entry--full is rendered when the
   listen-grid has data-show set, and it includes a meta row, an
   embedded Buzzsprout player iframe, and a transcript link. */
.podcast-episode-list .pod-entry--full {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 0 32px;
}
.podcast-episode-list .pod-entry--full .pod-meta {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.3;
}
.podcast-episode-list .pod-entry--full .pod-meta-show {
  color: var(--color-primary);
}
.podcast-episode-list .pod-entry--full .pod-meta-sep {
  color: var(--color-card-border);
  margin: 0 2px;
}
.podcast-episode-list .pod-entry--full .pod-title {
  margin: 0;
}
/* ── Custom audio player ────────────────────────────────────── */
.podcast-episode-list .pod-player {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 6px;
  background: rgba(45, 41, 39, 0.04);
  border: 1px solid var(--color-rule);
  margin: 4px 0 8px;
}
.podcast-episode-list .pod-player-play {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-secondary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
  padding: 0;
}
.podcast-episode-list .pod-player-play:hover {
  background: var(--color-primary);
  transform: scale(1.06);
}
.podcast-episode-list .pod-player-icon {
  width: 16px;
  height: 16px;
}
.podcast-episode-list .pod-player-icon--play {
  margin-left: 2px; /* optical center for triangle */
}
.podcast-episode-list .pod-player-track {
  flex: 1;
  min-width: 0;
}
.podcast-episode-list .pod-player-progress {
  width: 100%;
  height: 6px;
  background: rgba(45, 41, 39, 0.1);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.podcast-episode-list .pod-player-fill {
  height: 100%;
  width: 0%;
  background: var(--color-secondary);
  border-radius: 3px;
  transition: width 0.15s linear;
}
.podcast-episode-list .pod-player-time {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.podcast-episode-list .pod-player-speed {
  flex-shrink: 0;
  border: 1px solid var(--color-rule);
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.podcast-episode-list .pod-player-speed:hover {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
/* Episode-specific listen link */
.podcast-episode-list .pod-listen-episode-link {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-secondary);
  text-decoration: none;
  transition: color 0.15s;
}
.podcast-episode-list .pod-listen-episode-link:hover {
  color: var(--color-primary);
}
@media (max-width: 640px) {
  .podcast-episode-list .pod-player {
    gap: 10px;
    padding: 10px 12px;
  }
  .podcast-episode-list .pod-player-play {
    width: 36px;
    height: 36px;
  }
}
.podcast-episode-list .pod-entry--full .pod-excerpt {
  margin: 0;
  color: var(--color-dark);
}
.podcast-episode-list .pod-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
.podcast-episode-list .pod-footer .pod-listen { margin: 0; }
.podcast-episode-list .pod-transcript-link {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-secondary);
  text-decoration: none;
  transition: color 0.15s;
}
.podcast-episode-list .pod-transcript-link:hover {
  color: var(--color-primary);
}
@media (max-width: 640px) {
  .podcast-episode-list .pod-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}
.podcast-episodes-loading {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  margin: 0;
}

/* Host list — compact portrait + name, click-through to
   contributor page. 2-col grid so 6 hosts fit in 3 rows inside
   the right rail. Not sticky — gets stuck off-screen when the
   list is taller than the viewport. */
.podcast-host-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
}
/* Keep 2 per row on mobile too; portrait + name is compact enough. */
/* CRC has one host — center it rather than leaving a blank column. */
.podcast-host-list--single { grid-template-columns: minmax(0, 200px); justify-content: center; }

/* Most-Listened sidebar block: lives inside the .podcast-hosts
   aside, below the host portraits. Editorial treatment — Roman
   numerals (matching the brand vocabulary used on About + Member-
   ships pages) + italic titles + hairline divider per row. No card
   chrome. Hidden by default; podcast-feed.js removes the [hidden]
   attr once it's populated. */
.podcast-most-listened {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--color-rule);
}
.podcast-most-listened .section-intro { margin-bottom: 18px; }
.podcast-most-listened-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.podcast-most-listened-item {
  margin: 0;
  border-top: 1px solid var(--color-rule);
}
.podcast-most-listened-item:first-child { border-top: 0; }
.podcast-most-listened-link {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  text-decoration: none;
  color: var(--color-dark);
  transition: color 0.15s;
}
.podcast-most-listened-link:hover {
  color: var(--color-secondary);
}
.podcast-most-listened-link:hover .podcast-most-listened-numeral {
  color: var(--color-primary);
}
.podcast-most-listened-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.1;
  color: var(--color-primary);
  text-align: right;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.podcast-most-listened-title {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.3;
  color: var(--color-dark);
}
.podcast-most-listened-title em { font-style: italic; }
@media (max-width: 640px) {
  .podcast-most-listened { margin-top: 40px; }
}
.podcast-host { min-width: 0; }
.podcast-host-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.podcast-host-portrait {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, #2d2927, #45413f);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.podcast-host-link:hover .podcast-host-portrait {
  box-shadow: 0 6px 18px rgba(45, 41, 39, 0.2);
  transform: translateY(-1px);
}
.podcast-host-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.podcast-host-initial {
  display: inline-block;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}
.podcast-host-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-dark);
  margin: 0;
  transition: color 0.15s;
}
.podcast-host-link:hover .podcast-host-name { color: var(--color-primary); }

/* Transcript list — Ghost posts tagged #podcast-transcript,
   pulled into the podcast-page sidebar via {{#get}}. */
.podcast-transcripts {
  margin-top: 48px;
}
.podcast-transcripts .section-intro { margin-bottom: 24px; }
.podcast-transcript-list {
}
.podcast-transcript-entry {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--color-card-border);
  text-decoration: none;
  color: inherit;
  transition: color 0.15s;
}
.podcast-transcript-entry:first-child { border-top: 0; }
.podcast-transcript-entry:hover { color: var(--color-secondary); }
.podcast-transcript-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-dark);
  margin: 0;
}
.podcast-transcript-title em { font-style: italic; }
.podcast-transcript-entry:hover .podcast-transcript-title { color: var(--color-secondary); }
.podcast-transcript-date {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .podcast-transcript-entry {
    flex-direction: column;
    gap: 4px;
  }
}

/* =============================================================
   Admin dashboard — /admin/, /admin/members/, …

   Editorial aesthetic. No cards. Hairline-separated columns.
   Minimal margins. Same dark hero pattern as /contact/ and
   /podcasts/*.
   ============================================================= */

.admin-page { }
.admin-hero {
  padding: 64px 0 48px;
  text-align: center;
}
.admin-hero .container { max-width: 760px; }
.admin-hero .hero-kicker { justify-content: center; }
.admin-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 5.2vw, 60px);
  line-height: 1.06;
  color: var(--color-white);
  margin: 12px 0 16px;
  overflow-wrap: break-word;
}
@media (max-width: 640px) {
  .admin-hero { padding: 40px 0 32px; }
  .admin-body { padding: 32px 0 64px; }
}
.admin-headline em { font-style: italic; }
.admin-sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 520px;
  margin: 0 auto;
}
.admin-sub a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Horizontal tool nav between admin pages. */
.admin-nav {
  border-bottom: 1px solid var(--color-card-border);
  background: var(--color-page);
}
.admin-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.admin-nav-list::-webkit-scrollbar { display: none; }
.admin-nav-link {
  display: inline-block;
  padding: 16px 0;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-nav-link:hover { color: var(--color-primary); }
.admin-nav-link--pending {
  color: var(--color-muted);
  pointer-events: none;
}
.admin-nav-soon {
  margin-left: 6px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  opacity: 0.65;
}

/* /admin/members/* two-column layout: sticky left sidebar with
   section nav, main column for the active section's content.
   Collapses to a horizontal-scroll chip strip above content at
   <=760px so the whole sidebar becomes a one-line selector that
   matches the top admin-nav's mobile treatment. */
.admin-members-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: start;
}
.admin-members-sidebar { position: static; align-self: start; }
.admin-members-subnav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-members-subnav-link {
  display: block;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.admin-members-subnav-link:hover { color: var(--color-primary); }
.admin-members-subnav-link.is-active {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}
.admin-members-main { min-width: 0; }

@media (max-width: 760px) {
  .admin-members-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .admin-members-sidebar {
    position: static;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--color-card-border);
  }
  .admin-members-sidebar::-webkit-scrollbar { display: none; }
  .admin-members-subnav-list {
    flex-direction: row;
    gap: 24px;
    flex-wrap: nowrap;
  }
  .admin-members-subnav-link {
    padding: 12px 0;
    border-left: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .admin-members-subnav-link.is-active {
    border-bottom-color: var(--color-primary);
  }
}

.admin-body {
  padding: 48px 0 96px;
  background: var(--color-page);
}
.admin-body .admin-sub {
  color: var(--color-dark);
  opacity: 0.7;
}
.admin-body .btn-ghost {
  color: var(--color-dark);
  border-color: rgba(45, 41, 39, 0.3);
}
.admin-body .btn-ghost:hover {
  background: rgba(45, 41, 39, 0.06);
}

/* Landing page — tool list. Numeral + title + description + arrow. */
.admin-tool-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.admin-tool {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.admin-tool:first-child { border-top: 0; }
.admin-tool-link {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 24px 0;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
a.admin-tool-link:hover { background: rgba(238, 125, 81, 0.06); }
.admin-tool-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: var(--color-primary);
  text-align: center;
}
.admin-tool-body { min-width: 0; }
.admin-tool-body .eyebrow { color: var(--color-primary); margin: 0 0 4px; }
.admin-tool-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-dark);
  margin: 0 0 4px;
}
.admin-tool-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: #4a4440;
  margin: 0;
}
.admin-tool-arrow {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-primary);
}
.admin-tool-soon {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.admin-tool--pending { opacity: 0.55; }

/* Stat row — 6 columns on wide desktop, 3 on tablet, 2 on phone. */
.admin-stats {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 880px) {
  .admin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.admin-stat {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.admin-stat:first-child { border-left: 0; }
@media (max-width: 880px) {
  .admin-stat:nth-child(3n+1) { border-left: 0; }
  .admin-stat:nth-child(n+4) { border-top: 1px solid rgba(0, 0, 0, 0.1); }
}
@media (max-width: 520px) {
  .admin-stat:nth-child(3n+1) { border-left: 1px solid rgba(0, 0, 0, 0.1); }
  .admin-stat:nth-child(2n+1) { border-left: 0; }
  .admin-stat:nth-child(n+3) { border-top: 1px solid rgba(0, 0, 0, 0.1); }
}
.admin-stat-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-dark);
  font-weight: 600;
}
.admin-stat-value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--color-dark);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) {
  .admin-stat { padding: 14px 12px; }
  .admin-stat-value { font-size: 24px; }
  .admin-stat-label { font-size: 9px; letter-spacing: 0.18em; }
}

/* Chart + recent signups — 2-col split, chart left, list right. */
.admin-split {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 880px) {
  .admin-split { grid-template-columns: 1fr; gap: 40px; }
}

.admin-chart { --yaxis-w: 44px; }
.admin-chart-summary {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-dark);
  margin: 0 0 12px;
}
.admin-chart-summary strong { color: var(--color-primary); font-weight: 600; }
.admin-chart-plot { width: 100%; }
.admin-chart-canvas {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
/* Y-axis: 4 tick labels aligned with the SVG's inner plot area.
   Padding matches the SVG's P=8 so top label lines up with niceMax
   and bottom label sits at 0. */
.admin-chart-yaxis {
  flex: 0 0 var(--yaxis-w);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px 0;
  box-sizing: border-box;
}
.admin-chart-yaxis span {
  display: block;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  line-height: 1;
}
.admin-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  flex: 1 1 auto;
  min-width: 0;
}
.admin-chart-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.admin-chart-area {
  fill: rgba(238, 125, 81, 0.12);
  stroke: none;
}
.admin-chart-gridline {
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}
/* Per-day visitor totals, rendered above the chart. Same N-column
   grid as the x-axis date row so each number sits above its day.
   Left offset matches the y-axis width so the number columns line
   up with the plot area, not the full chart width. */
.admin-chart-values {
  display: grid;
  grid-template-columns: repeat(var(--days, 30), minmax(0, 1fr));
  padding: 0 8px 6px calc(var(--yaxis-w, 44px) + 8px);
  min-height: 16px;
}
.admin-chart-values span {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
/* Per-day tick labels below the visitors chart. Rotated -55deg so
   30+ days don't overlap. Left offset matches the y-axis width. */
.admin-chart-days {
  display: grid;
  grid-template-columns: repeat(var(--days, 30), minmax(0, 1fr));
  padding: 0 8px 0 calc(var(--yaxis-w, 44px) + 8px);
  margin-top: 12px;
  min-height: 64px;
}
.admin-chart-days span {
  display: block;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  white-space: nowrap;
  transform: rotate(-55deg);
  transform-origin: top right;
  text-align: right;
  padding-right: 6px;
  line-height: 1;
}
@media (max-width: 640px) {
  .admin-chart { --yaxis-w: 32px; }
  .admin-chart-yaxis span { font-size: 9px; }
  .admin-chart-values span { font-size: 9px; }
  .admin-chart-days span { font-size: 9px; }
}
.admin-chart-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  margin: 6px 0 0;
}

/* --- Spacing rhythm between admin sections ----------------------------- */
/* The flourish dividers used to carry the vertical rhythm. Without them,
   sections need real margin between each unit. "Unit" = an admin-split,
   a stand-alone admin-stats / admin-chart / admin-ranked list, OR a
   section-intro plus whatever follows it. Drift-section blocks get the
   same treatment. */
.admin-body .container > .admin-period,
.admin-body .container > .admin-stats,
.admin-body .container > .admin-split,
.admin-body .container > .admin-chart,
.admin-body .container > .admin-ranked,
.admin-body .container > .section-intro,
.admin-body .container > .drift-section,
.admin-body .container > .admin-table-host,
.admin-body .container .drift-host > .admin-stats,
.admin-body .container .drift-host > .admin-table-status,
.admin-body .container .drift-host > .drift-section {
  margin-top: 64px;
}
.admin-body .container > :first-child,
.admin-body .container .drift-host > :first-child {
  margin-top: 0;
}
/* When a section-intro directly precedes its content (a chart or list),
   keep them tight as a pair — the gap belongs BEFORE the section-intro,
   not between it and the content it introduces. */
.admin-body .container > .section-intro + .admin-chart,
.admin-body .container > .section-intro + .admin-ranked {
  margin-top: 16px;
}

/* --- Admin period selector (traffic page) ------------------------------ */
/* Toggle-style row of time-range options. Active option has an underline
   rather than a pill background, matching the editorial tone elsewhere. */
.admin-period {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 0 32px;
  border-bottom: 1px solid var(--color-card-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.admin-period::-webkit-scrollbar { display: none; }
.admin-period-option {
  background: transparent;
  border: 0;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-period-option:hover {
  color: var(--color-dark);
}
.admin-period-option.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* --- Ranked lists (top pages, top sources, top countries) --------------- */
/* Each row shows a faint bar scaled to the highest value, an item label,
   and a numeric count. No cards; bars use a tinted primary. */
.admin-ranked {
  list-style: none;
  padding: 0;
  margin: 0;
}
.admin-ranked-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
@media (max-width: 520px) {
  .admin-ranked-item { padding: 10px 10px; gap: 8px; }
  .admin-ranked-label { font-size: 13px; }
  .admin-ranked-value { font-size: 12px; }
}
.admin-ranked-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(238, 125, 81, 0.08);
  pointer-events: none;
  z-index: 0;
}
.admin-ranked-label {
  position: relative;
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
}
.admin-ranked-label a {
  color: inherit;
  text-decoration: none;
}
.admin-ranked-label a:hover {
  color: var(--color-primary);
}
.admin-ranked-value {
  position: relative;
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  z-index: 1;
  font-variant-numeric: tabular-nums;
}
.admin-ranked--columns {
  column-count: 2;
  column-gap: 32px;
}
.admin-ranked--columns .admin-ranked-item {
  break-inside: avoid;
}
@media (max-width: 640px) {
  .admin-ranked--columns { column-count: 1; }
}

/* Recent signup list — hairlines, no cards. */
.admin-recent {
  list-style: none;
  padding: 0;
  margin: 0;
}
.admin-recent-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.admin-recent-item:first-child { border-top: 0; }
.admin-recent-person { min-width: 0; }
.admin-recent-name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-recent-email {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-recent-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.admin-recent-tier {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}
.admin-recent-tier--paid { color: var(--color-primary); }
.admin-recent-tier--comped { color: var(--color-secondary, #c1593c); }
.admin-recent-tier--free { color: var(--color-muted); }
.admin-recent-date {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

.admin-empty {
  list-style: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
}

/* --- /admin/editorial/ — submissions inbox + workflow board ----------- */
/* Hairlines, no cards. Inbox is a vertical list of incoming submissions
   with Approve/Deny inline. Below the inbox sits a five-column workflow
   board with HTML5 drag-drop between columns. */

.editorial-inbox {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-card-border);
}
.editorial-inbox-card {
  border-bottom: 1px solid var(--color-rule);
  cursor: grab;
}
.editorial-inbox-card.is-dragging { opacity: 0.4; cursor: grabbing; }
.editorial-card-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0;
}
.editorial-card-date {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  margin-left: auto;
  white-space: nowrap;
}
.editorial-card-contact {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  margin: 0 0 12px;
}
.editorial-card-contact a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.editorial-card-contact a:hover { color: var(--color-secondary); }
.editorial-inbox-sub { color: var(--color-muted); margin: 8px 0 0; }

/* Spacing between inbox section and workflow section. */
.editorial-board-intro { margin-top: 64px !important; }

/* Workflow board — five columns. Stacks below the inbox. Horizontal
   scroll on narrow viewports rather than wrapping (so the sequence
   reads left-to-right). */
.editorial-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.editorial-col {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  border-top: 2px solid var(--color-dark);
}
.editorial-col--denied { border-top-color: var(--color-muted); opacity: 0.85; }
.editorial-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--color-rule);
}
.editorial-col-head .eyebrow { margin: 0; }
.editorial-col-count {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--color-muted);
  font-weight: 600;
}
.editorial-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  min-height: 80px;
}
.editorial-col-body.is-drop-target {
  background: rgba(238, 125, 81, 0.06);
  outline: 1px dashed var(--color-primary);
  outline-offset: -4px;
}
.editorial-card {
  padding: 8px 10px;
  border: 1px solid var(--color-rule);
  background: #fff;
  cursor: grab;
  transition: border-color 0.15s;
}
.editorial-card:hover { border-color: var(--color-card-border); }
.editorial-card.is-dragging { opacity: 0.4; cursor: grabbing; }
.editorial-card .editorial-card-name {
  font-size: 13px;
  cursor: pointer;
  display: block;
}
.editorial-card .editorial-card-name:hover { color: var(--color-secondary); }

@media (max-width: 760px) {
  .editorial-board { grid-template-columns: repeat(5, minmax(180px, 220px)); }
  .editorial-col { min-width: 180px; }
}

/* Inbox card head — clickable row that opens the detail modal. */
.editorial-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  cursor: pointer;
  transition: background 0.12s;
}
.editorial-card-head:hover {
  background: rgba(238, 125, 81, 0.04);
}
.editorial-card-body {
  padding: 12px 0 16px;
}
.editorial-card-section { margin-top: 14px; }
.editorial-card-section:first-child { margin-top: 0; }
.editorial-card-section .eyebrow { margin: 0 0 6px; }
.editorial-card-section p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-dark);
  margin: 0;
  white-space: pre-wrap;
  max-width: 70ch;
}
.editorial-card-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.editorial-card-empty {
  font-style: italic;
  color: var(--color-muted);
}
.editorial-card-notes-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.editorial-card-notes-state {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  font-style: italic;
}
.editorial-card-notes {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-dark);
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  resize: vertical;
  box-sizing: border-box;
}
.editorial-card-notes:focus {
  outline: 1px solid var(--color-primary);
  outline-offset: 0;
  border-color: var(--color-primary);
}

/* Decision row — inbox-only. Lives at the bottom of the expanded
   body so editors approve or deny AFTER reading the full submission,
   not from a button on the collapsed head. Buttons match the sm
   pill scale used elsewhere in the card so the section reads as
   a quiet closing action, not a CTA banner. */
.editorial-card-decision {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--color-rule);
}
.editorial-card-decision-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 4px;
}
.editorial-card-decision-hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  font-style: italic;
}

/* Detail modal — opened from board card click. Inherits .au-modal-overlay
   and .au-modal base styles; these add the editorial-specific header. */
.editorial-detail-modal {
  max-width: 480px;
}
.editorial-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-rule);
}
.editorial-detail-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  margin: 0;
  color: var(--color-dark);
}
.editorial-detail-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  margin: 4px 0 0;
}
.editorial-detail-close {
  appearance: none;
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.12s;
}
.editorial-detail-close:hover {
  color: var(--color-dark);
}
.editorial-detail-modal .editorial-card-body {
  display: block;
}

/* Remove button — danger variant of .btn-sm */
.btn-danger {
  color: #b91c1c;
  border-color: #fca5a5;
}
.btn-danger:hover {
  background: #fef2f2;
  border-color: #f87171;
  color: #991b1b;
}
.editorial-card-remove-section {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--color-rule);
}

/* --- /admin/sponsors/ — sponsorship pipeline dashboard -------------- */

.sponsor-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.sponsor-metric {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
.sponsor-metric-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-dark);
  line-height: 1.2;
}
.sponsor-metric-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 4px;
  letter-spacing: 0.03em;
}
/* Sponsor inbox — form inquiries */
.sponsor-inbox { margin-bottom: 32px; }
.sponsor-inbox-sub { color: var(--color-muted); margin: 8px 0 0; }
.sponsor-inbox-card .sponsor-inbox-meta {
  display: flex;
  gap: 12px;
  padding: 0 16px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
}
.sponsor-inbox-contact {
  font-weight: 400;
  color: var(--color-muted);
}
.sponsor-inbox-placement {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}
.sponsor-toolbar {
  margin-bottom: 24px;
}
.sponsor-board-intro { margin-top: 32px !important; }
.sponsor-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.sponsor-col {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  border-top: 2px solid var(--color-dark);
}
.sponsor-col--completed { border-top-color: var(--color-muted); opacity: 0.85; }
.sponsor-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--color-rule);
}
.sponsor-col-head .eyebrow { margin: 0; }
.sponsor-col-count {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--color-muted);
  font-weight: 600;
}
.sponsor-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  min-height: 80px;
}
.sponsor-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-rule);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sponsor-card:hover { border-color: var(--color-card-border); }
.sponsor-card-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sponsor-card-name:hover { color: var(--color-secondary); }
.sponsor-card-type {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* Sponsor detail modal */
.sponsor-detail-modal {
  max-width: 520px;
}
.sponsor-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-rule);
}
.sponsor-detail-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  margin: 0;
  color: var(--color-dark);
  word-break: break-word;
}
.sponsor-detail-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sponsor-status-select {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 2px 6px;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  background: #fff;
  color: var(--color-dark);
  cursor: pointer;
}
.sponsor-status-select:focus {
  outline: 1px solid var(--color-primary);
  border-color: var(--color-primary);
}
.sponsor-detail-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sponsor-detail-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-rule);
}
.sponsor-detail-section:last-child { border-bottom: none; }
.sponsor-detail-section .eyebrow { margin: 0 0 6px; }
.sponsor-detail-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-dark);
  margin: 0;
  white-space: pre-wrap;
  max-width: 60ch;
}
.sponsor-detail-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sponsor-detail-text a:hover { color: var(--color-secondary); }
.sponsor-detail-actions {
  display: flex;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-rule);
}

/* Financials row */
.sponsor-financials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.sponsor-amount {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-dark);
}
.sponsor-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  cursor: pointer;
}
.sponsor-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--color-primary);
}

/* Assets section */
.sponsor-asset-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--color-rule);
}
.sponsor-asset-row:last-child { border-bottom: none; }
.sponsor-asset-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
}
.sponsor-asset-link {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.sponsor-asset-link:hover { color: var(--color-secondary); }
.sponsor-asset-delete {
  appearance: none;
  border: none;
  background: none;
  color: var(--color-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  margin-left: auto;
}
.sponsor-asset-delete:hover { color: #b91c1c; }
.sponsor-asset-empty {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--color-muted);
  margin: 0;
}
.sponsor-asset-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.sponsor-asset-label-input,
.sponsor-asset-url-input {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  background: #fff;
  color: var(--color-dark);
}
.sponsor-asset-label-input { width: 160px; }
.sponsor-asset-url-input { width: 180px; }
.sponsor-asset-label-input:focus,
.sponsor-asset-url-input:focus {
  outline: 1px solid var(--color-primary);
  border-color: var(--color-primary);
}
.sponsor-asset-file-input {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
}

/* Notes label (mirrors editorial) */
.sponsor-notes-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.sponsor-notes-state {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  font-style: italic;
}

/* Edit/create form modal */
.sponsor-edit-modal {
  max-width: 480px;
}
.sponsor-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sponsor-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sponsor-form-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0.03em;
}
.sponsor-form-input {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  background: #fff;
  color: var(--color-dark);
  width: 100%;
  box-sizing: border-box;
}
.sponsor-form-input:focus {
  outline: 1px solid var(--color-primary);
  border-color: var(--color-primary);
}
.sponsor-form-textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.5;
}
.sponsor-form-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
}

/* Responsive — sponsor dashboard */
@media (max-width: 760px) {
  .sponsor-metrics { grid-template-columns: repeat(2, 1fr); }
  .sponsor-board { grid-template-columns: repeat(5, minmax(170px, 200px)); }
  .sponsor-col { min-width: 170px; }
}
@media (max-width: 640px) {
  .sponsor-detail-actions .btn,
  .sponsor-form-actions .btn {
    padding: 12px 16px;
    min-height: 44px;
  }
  .sponsor-asset-delete {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sponsor-check {
    min-height: 44px;
    padding: 8px 0;
  }
  .sponsor-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 540px) {
  .sponsor-metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sponsor-metric { padding: 12px; }
  .sponsor-metric-value { font-size: 20px; }
  .sponsor-asset-upload { flex-direction: column; align-items: stretch; }
  .sponsor-asset-label-input,
  .sponsor-asset-url-input { width: 100%; }
}
@media (max-width: 520px) {
  .sponsor-board { grid-template-columns: repeat(5, minmax(140px, 180px)); gap: 10px; }
  .sponsor-col { min-width: 140px; }
}

/* --- Podcast admin dashboard (/admin/podcasts/) ------------------------- */

.podcast-shows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.podcast-show-card {
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  padding: 24px;
}
.podcast-show-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.podcast-show-badge {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
}
.podcast-show-badge--mf { background: var(--color-dark); }
.podcast-show-badge--crc { background: var(--color-secondary); }
.podcast-show-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0 0 2px;
}
.podcast-show-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
}
.podcast-show-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.podcast-show-stat {
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  padding: 10px 12px;
  text-align: center;
}
.podcast-show-stat-val {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-dark);
}
.podcast-show-stat-label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 2px;
}
.podcast-latest-label {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 6px;
}
.podcast-latest-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0 0 4px;
  line-height: 1.3;
}
.podcast-latest-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  margin: 0 0 12px;
}
.podcast-latest-placeholder {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  margin: 0;
}
.podcast-embed {
  border-radius: 6px;
  margin-top: 4px;
}
.podcast-section-intro { margin-top: 24px; }
.podcast-section-intro .section-sub {
  font-size: .85rem;
  color: var(--color-secondary-text, #666);
  margin: 6px 0 0;
  font-style: normal;
}

/* Timeline */
.podcast-timeline { margin-bottom: 48px; }
.podcast-tl-row {
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color .15s;
}
.podcast-tl-row:hover { border-color: rgba(0,0,0,.14); }
.podcast-tl-row.is-expanded { border-color: rgba(0,0,0,.18); }
.podcast-tl-head:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.podcast-tl-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
.podcast-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 22px;
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.podcast-badge--mf { background: var(--color-dark); }
.podcast-badge--crc { background: var(--color-secondary); }
.podcast-tl-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podcast-tl-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.podcast-tl-chevron {
  font-size: 10px;
  color: var(--color-muted);
  flex-shrink: 0;
}
.podcast-tl-detail {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.podcast-tl-detail-meta {
  display: flex;
  gap: 8px;
  margin: 12px 0 8px;
}
.podcast-tl-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  background: rgba(0,0,0,.04);
  padding: 3px 8px;
  border-radius: 2px;
}
.podcast-tl-description {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 8px 0 12px;
}

/* Leaderboard — collapsible panels */
.podcast-lb-panel { margin-bottom: 24px; }
.podcast-lb-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 2px solid var(--color-dark);
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.podcast-lb-toggle:hover .podcast-lb-toggle-title { color: var(--color-secondary); }
.podcast-lb-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.podcast-lb-toggle-title { flex: 1; text-align: left; }
.podcast-lb-toggle-chevron {
  width: 12px;
  height: 12px;
  color: var(--color-muted);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.podcast-lb-panel.is-collapsed .podcast-lb-toggle-chevron { transform: rotate(-90deg); }
.podcast-lb-panel.is-collapsed .podcast-lb-toggle { border-bottom-color: var(--color-rule); }
.podcast-lb-body { padding-top: 10px; }
.podcast-lb-panel.is-collapsed .podcast-lb-body { display: none; }
@media (prefers-reduced-motion: reduce) {
  .podcast-lb-toggle-chevron { transition: none; }
}

.podcast-leaderboard { margin-bottom: 48px; }
.podcast-lb-list { display: flex; flex-direction: column; gap: 6px; }
.podcast-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
.podcast-lb-rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-muted);
  width: 22px;
  text-align: right;
  flex-shrink: 0;
}
.podcast-lb-info {
  flex: 1;
  min-width: 0;
}
.podcast-lb-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}
.podcast-lb-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,.05);
  border-radius: 3px;
  overflow: hidden;
}
.podcast-lb-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--color-dark);
  transition: width .15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .podcast-lb-bar { transition: none; }
}
.podcast-lb-plays {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-dark);
  flex-shrink: 0;
  white-space: nowrap;
}
.podcast-empty {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  margin: 0;
}
.podcast-timeline-loading,
.podcast-leaderboard-loading {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
}

/* Podcast dashboard responsive */
@media (max-width: 900px) {
  .podcast-shows { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .podcast-tl-head { flex-wrap: wrap; gap: 6px; min-height: 44px; }
  .podcast-tl-title { white-space: normal; }
  .podcast-tl-meta { width: 100%; padding-left: 42px; font-size: 13px; }
  .podcast-lb-row { flex-wrap: wrap; gap: 6px; }
  .podcast-lb-info { width: 100%; order: 3; }
  .podcast-lb-plays { margin-left: auto; }
  .podcast-show-stats { grid-template-columns: 1fr; gap: 8px; }
  .podcast-show-stat-label { font-size: 12px; }
  .podcast-lb-toggle { min-height: 44px; }
}

.admin-forbidden { max-width: 560px; }
.admin-forbidden .eyebrow { color: var(--color-primary); margin: 0 0 6px; }
.admin-forbidden .section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 34px);
  margin: 0 0 12px;
  color: var(--color-dark);
}
.admin-forbidden p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0;
}
.admin-forbidden code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  color: var(--color-dark);
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 3px;
}

/* --- /ebook/<slug>/ — free-subscriber landing pages --------------------- */
/* Two-column hero: left is the editorial pitch, right is a single signup
   card. Mirrors the .about-hero-grid layout so the page reads in the same
   editorial register as About / Forum. The card collapses below the pitch
   on mobile so the form is the second thing the visitor sees, not the
   first (the headline + blurb earn the email). */

.ebook-page { background: var(--color-background); }

.ebook-hero {
  padding: 64px 0 48px;
}
.ebook-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}
.ebook-hero-content { max-width: 620px; }
.ebook-hero-headline {
  font-size: clamp(34px, 4.2vw, 52px);
  margin: 0 0 20px;
}
.ebook-hero .hero-sub {
  max-width: 520px;
  margin: 0 0 32px;
  font-style: italic;
}
.ebook-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 28px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.ebook-meta-row {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items: baseline;
}
.ebook-meta-row .eyebrow {
  margin: 0;
  color: var(--color-primary);
  font-size: 10px;
  letter-spacing: 0.22em;
}
.ebook-hero-prose p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 14px;
  max-width: 56ch;
}
.ebook-hero-prose p:last-child { margin-bottom: 0; }
.ebook-hero-prose em { font-style: italic; }

/* Right column: the signup / unlock / open card. Hairlines, subtle
   surface contrast, no card chrome shadows (per the no-cards rule). */
.ebook-landing { display: block; }
.ebook-landing-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 32px;
  color: var(--color-white);
}
.ebook-landing-card .eyebrow {
  color: var(--color-primary);
  margin: 0 0 8px;
}
.ebook-landing-form-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  color: var(--color-white);
  margin: 0 0 12px;
}
.ebook-landing-form-title em { font-style: italic; }
.ebook-landing-form-sub {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 20px;
}
.ebook-landing-form-sub strong { color: var(--color-white); }
.ebook-landing-form-fields { margin: 0; }
.ebook-landing-form-fields .digest-field { margin-bottom: 12px; }
.ebook-landing-form-fields .digest-field label {
  color: rgba(255, 255, 255, 0.78);
}
.ebook-landing-form-fields .digest-field input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--color-white);
}
.ebook-landing-form-fields .digest-field input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}
.ebook-landing-form-fields .digest-submit {
  width: 100%;
  margin-top: 6px;
}
.ebook-landing-form-fields .digest-fineprint {
  color: rgba(255, 255, 255, 0.56);
  margin-top: 10px;
}
.ebook-landing-form-fields .digest-status {
  color: rgba(255, 255, 255, 0.78);
  margin-top: 10px;
}
.ebook-landing-form-fields .digest-status.is-error {
  color: #ffb29a;
}
.ebook-landing-open-btn { width: 100%; }

/* Mobile: stack. Pitch above, card below. Below 760 the dark card fills
   the column width; meta-row labels stay tight via the same grid template. */
@media (max-width: 880px) {
  .ebook-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .ebook-hero-content { max-width: none; }
  .ebook-hero .hero-sub { max-width: none; }
}
@media (max-width: 520px) {
  .ebook-hero { padding: 40px 0 32px; }
  .ebook-landing-card { padding: 24px; }
  .ebook-landing-form-title { font-size: 24px; }
  .ebook-meta-row { grid-template-columns: 72px 1fr; gap: 10px; font-size: 13px; }
}

/* --- /ebooks/ — public catalog ----------------------------------------- */
/* Editorial row treatment, hairlines only, matches the rest of the
   site's no-cards rule. Each tile is a clickable row that takes the
   visitor to the per-ebook landing page; the landing page handles
   member-state branching (signup form / unlock / open). */

.ebooks-page { background: var(--color-background); }

.ebooks-hero {
  padding: 64px 0 48px;
  text-align: center;
}
.ebooks-hero .hero-kicker { justify-content: center; }
.ebooks-hero .hero-headline { margin-bottom: 16px; }
.ebooks-hero .hero-sub {
  max-width: 560px;
  margin: 0 auto;
  font-style: italic;
}

.ebooks-body { padding: 16px 0 80px; }

/* Responsive grid — auto-fit so 1 / 2 / 3+ ebooks all lay out
   reasonably without per-count breakpoints. minmax floors each tile
   so two tiles don't stretch to absurd widths on a wide viewport.  */
.ebooks-catalog {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}
.ebooks-catalog-item {
  display: flex;
  flex-direction: column;
}
.ebooks-catalog-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--color-card-border);
  background: var(--color-background);
  transition: border-color 0.15s, transform 0.05s;
}
.ebooks-catalog-link:hover { text-decoration: none; border-color: var(--color-primary); }
.ebooks-catalog-link:hover .ebooks-catalog-title { color: var(--color-secondary); }
.ebooks-catalog-link:hover .ebooks-catalog-cta { color: var(--color-secondary); }
.ebooks-catalog-link .eyebrow {
  color: var(--color-primary);
  margin: 0 0 10px;
}
.ebooks-catalog-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--color-dark);
  transition: color 0.15s;
}
.ebooks-catalog-title em { font-style: italic; }
.ebooks-catalog-excerpt {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-dark);
  margin: 0 0 18px;
  flex: 1 1 auto;
}
.ebooks-catalog-cta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  transition: color 0.15s;
  margin-top: auto;
}
.ebooks-catalog-note {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 40px 0 0;
  font-style: italic;
  text-align: center;
}
.ebooks-catalog-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 520px) {
  .ebooks-hero { padding: 40px 0 32px; }
  .ebooks-catalog { gap: 20px; }
  .ebooks-catalog-link { padding: 24px; }
}

/* -------- Membership migration page (/migrate/) --------
   Single-step landing for current paid Members moving over to
   Ghost. Hero (dark band) → warning (cream band, primary left
   rule) → CTA (centered explanation + button). No steps, no
   form — the Stripe Payment Link does all the work and the
   webhook on mo-membership flags the buyer in HubSpot. Page
   renders light always (no dark-mode override; matches the
   rest of the non-article site). */

/* FAQ accordion at the top of /migrate/. Two stacked
   <details> rows; matches the dashboard module pattern
   (italic display heading, brand-orange chev, hairline
   between rows, no card chrome). */
.migrate-faq {
  background: var(--color-page);
  padding: 56px 0 24px;
}
.migrate-faq .container { max-width: 780px; }
.migrate-faq-item {
  border-top: 1px solid var(--color-card-border);
  padding: 0;
}
.migrate-faq-item:last-of-type {
  border-bottom: 1px solid var(--color-card-border);
}
.migrate-faq-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 18px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.migrate-faq-summary::-webkit-details-marker { display: none; }
.migrate-faq-title {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.2;
  margin: 0;
  color: var(--color-dark);
  font-weight: 400;
}
.migrate-faq-chev {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s;
}
.migrate-faq-item[open] .migrate-faq-chev {
  transform: rotate(-135deg) translateY(-3px);
}
.migrate-faq-body {
  padding: 0 0 28px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-dark);
}
.migrate-faq-body p { margin: 0 0 14px; }
.migrate-faq-body p:last-child { margin-bottom: 0; }
.migrate-faq-emphasis {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-secondary);
  margin-top: 18px !important;
}

@media (max-width: 640px) {
  .migrate-faq { padding: 40px 0 16px; }
  .migrate-faq-summary { padding: 20px 0; }
  .migrate-faq-title { font-size: 22px; }
  .migrate-faq-body { font-size: 15px; padding-bottom: 24px; }
}

.migrate-warning {
  background: var(--color-page);
  padding: 28px 0 8px;
}
.migrate-warning .container { max-width: 780px; }
.migrate-warning-inner {
  border-left: 3px solid var(--color-primary);
  padding: 8px 0 8px 18px;
}
.migrate-warning-inner .eyebrow {
  color: var(--color-primary);
  margin: 0 0 4px;
}
.migrate-warning-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-dark);
  margin: 0;
}

.migrate-cta {
  background: var(--color-page);
  padding: 40px 0 88px;
}
.migrate-cta .container {
  max-width: 620px;
  text-align: center;
}
.migrate-cta-text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0 auto 28px;
  max-width: 520px;
}
.migrate-cta-button { margin: 0; }

/* Two-tier picker — monthly + annual side-by-side on desktop,
   stacked on mobile. Each option is a button + small tagline. */
.migrate-cta-options {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
}
.migrate-cta-option {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.migrate-cta-option .btn-tagline {
  margin: 8px 0 0;
}

@media (max-width: 640px) {
  .migrate-warning { padding: 24px 0 4px; }
  .migrate-cta { padding: 32px 0 64px; }
  .migrate-cta-text { font-size: 16px; }
  .migrate-cta-options { gap: 20px; }
  .migrate-cta-option .btn { width: 100%; }
  .migrate-cta-option { width: 100%; max-width: 320px; }
}

/* -------- Site search modal --------
   Editorial palette: italic display titles, eyebrow meta rows,
   hairline separators between results, no card chrome on the
   results themselves. The panel itself does have a subtle
   container border so it reads as a focused surface against
   the dimmed page. */

.mo-search-modal[hidden] { display: none; }
.mo-search-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 24px 24px;
}
body.mo-search-open { overflow: hidden; }

.mo-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 41, 39, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mo-search-panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 120px);
  background: var(--color-page);
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(45, 41, 39, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mo-search-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-card-border);
}
.mo-search-icon { color: var(--color-muted); flex: 0 0 auto; }
.mo-search-input {
  flex: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  color: var(--color-dark);
  background: transparent;
  border: 0;
  outline: none;
  padding: 4px 0;
}
.mo-search-input::placeholder {
  color: var(--color-muted);
  font-style: italic;
}
.mo-search-close {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: transparent;
  border: 1px solid var(--color-card-border);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.mo-search-close:hover {
  color: var(--color-dark);
  border-color: var(--color-muted);
}

.mo-search-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--color-card-border);
}
.mo-search-filter-select,
.mo-search-filter-input {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-dark);
  background: var(--color-white, #fff);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 3px;
  padding: 5px 8px;
}
.mo-search-filter-select {
  padding-right: 22px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%232d2927' opacity='.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
}
.mo-search-filter-input {
  flex: 1;
}
.mo-search-filter-input[hidden] { display: none; }
.mo-search-filter-select:focus,
.mo-search-filter-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(238, 125, 81, 0.1);
}

.mo-search-status {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  color: var(--color-muted);
  margin: 0;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-card-border);
}

.mo-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.mo-search-result {
  border-bottom: 1px solid var(--color-card-border);
}
.mo-search-result:last-child { border-bottom: 0; }
.mo-search-result.is-active {
  background: rgba(238, 125, 81, 0.06);
}

.mo-search-result-link {
  display: block;
  padding: 18px 24px;
  text-decoration: none;
  color: inherit;
}
.mo-search-result-link:hover { text-decoration: none; }

.mo-search-result-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
  color: var(--color-dark);
  margin: 0 0 6px;
}
.mo-search-result-title em { font-style: italic; }
.mo-search-result.is-active .mo-search-result-title { color: var(--color-secondary); }

.mo-search-result-meta {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 8px;
}

.mo-search-result-excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-dark);
  margin: 0;
  /* Clamp excerpt to two lines so result rows stay scannable. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mo-search-result-excerpt mark {
  background: rgba(238, 125, 81, 0.18);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

.mo-search-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--color-card-border);
  background: rgba(45, 41, 39, 0.02);
}
.mo-search-hint kbd {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  padding: 2px 6px;
  margin-right: 4px;
  border: 1px solid var(--color-card-border);
  border-radius: 4px;
  background: var(--color-page);
  color: var(--color-dark);
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 640px) {
  .mo-search-modal { padding: 16px; align-items: stretch; }
  .mo-search-panel { max-height: calc(100vh - 32px); }
  .mo-search-header { padding: 12px 16px; }
  .mo-search-input { font-size: 18px; }
  .mo-search-filters { padding: 8px 16px; }
  .mo-search-filter-select,
  .mo-search-filter-input { font-size: 14px; padding: 6px 8px; }
  .mo-search-filter-select { padding-right: 22px; }
  .mo-search-status { padding: 12px 16px; font-size: 13px; }
  .mo-search-result-link { padding: 14px 16px; }
  .mo-search-result-title { font-size: 17px; }
  .mo-search-hint { padding: 10px 12px; gap: 10px; }
}

/* =============================================================
   The Faith Received
   -------------------------------------------------------------
   Project home + per-document reading rooms + feature pages
   (search, scripture, today, topics, devotional). All styles
   scoped under `.faith-received` to keep them isolated. Uses the
   site's existing tokens (--color-primary, --font-display, etc.)
   so the project reads as part of the Mere Orthodoxy journal.
   ============================================================= */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Page-level container ─────────────────────────────────────── */
.faith-received {
  background: var(--color-page);
}

/* ── Hero (homepage + feature pages) ──────────────────────────── */
.faith-hero {
  /* Inherits .hero. Project's hero has no feature-image, so we
     compose with a softer dark plate + the same orange bloom
     and add room for the email capture form below the sub. */
  padding: 96px 0 96px;
  text-align: left;
}
.faith-hero .container { position: relative; z-index: 1; max-width: 920px; }
.faith-hero .hero-kicker { justify-content: flex-start; font-size: 16px; }
.faith-hero .hero-kicker .dot { font-size: 26px; }
.faith-hero-headline {
  font-size: clamp(40px, 5vw, 68px);
  margin-bottom: 24px;
  max-width: 880px;
}
.faith-hero .hero-sub { max-width: 620px; margin-bottom: 32px; }

.faith-hero-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 520px;
  align-items: stretch;
  margin-top: 32px;
}
.faith-hero-form input[type="email"] {
  flex: 1 1 240px;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  color: var(--color-white);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.faith-hero-form input[type="email"]::placeholder { color: rgba(255,255,255,0.5); }
.faith-hero-form input[type="email"]:focus {
  border-color: var(--color-primary);
  background: rgba(255,255,255,0.1);
}
.faith-hero-form .btn { flex: 0 0 auto; padding: 14px 22px; }
.faith-hero-status {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  min-height: 18px;
}
.faith-hero-status.is-error { color: #ffb3a0; }

/* When the inline-signup partial swaps in its success block, keep
   the success card on a dark hero background by giving it a translucent
   surface treatment that mirrors the form. */
.faith-hero .inline-signup-success {
  margin-top: 32px;
  padding: 20px 24px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  max-width: 520px;
  color: var(--color-white);
}
.faith-hero .inline-signup-success .eyebrow { color: var(--color-primary); }
.faith-hero .inline-signup-success h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  margin: 4px 0 8px;
}

/* ── Quick-link rail under the hero ───────────────────────────── */
.faith-rail {
  background: var(--color-page);
  border-bottom: 1px solid var(--color-rule);
}
.faith-rail .topics-inner { padding: 16px 28px; }

/* ── Section nav (every TFR page) ─────────────────────────────
   Persistent secondary nav that sits below the dark hero on every
   page in /the-faith-received/. Reads as a quiet hairline-bordered
   rail in the existing topic-pill vocabulary so the project keeps
   its editorial feel while readers can move between Documents,
   Library, Topics, etc., without bouncing back to the home page. */
.faith-section-nav {
  background: var(--color-page);
  border-bottom: 1px solid var(--color-rule);
  position: relative;
  z-index: 5;
}
.faith-section-nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 28px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.faith-section-nav-inner::-webkit-scrollbar { display: none; }
.faith-section-nav-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--color-dark);
  margin-right: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}
.faith-section-nav-brand:hover { color: var(--color-secondary); text-decoration: none; }
.faith-section-nav-link {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-dark);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.12s;
  flex-shrink: 0;
}
.faith-section-nav-link:hover { color: var(--color-primary); text-decoration: none; }
@media (max-width: 1023px) {
  .faith-section-nav-inner { padding: 12px 20px; gap: 14px; }
  .faith-section-nav-brand { font-size: 14px; }
  .faith-section-nav-link { font-size: 10px; letter-spacing: 0.2em; }
}
/* When a doc page renders the left-anchored sidebar at ≥1024px,
   the section nav still spans the full viewport width — readers
   shouldn't have to scroll back into the centered area to switch
   pages. The reading layout below shifts left under the sidebar. */

/* ── Section bands (Documents, Library, Tools) ────────────────── */
.faith-section-band {
  padding: 56px 0;
}
.faith-section-band + .faith-section-band {
  border-top: 1px solid var(--color-card-border);
}
.faith-band-documents,
.faith-band-library,
.faith-band-traditions { background: var(--color-page); }

/* Traditions tab — sub-nav of italic display links above the active
   tradition band. Only one band is visible at a time; JS toggles via
   data-faith-tradition. Sub-nav matches the .faith-view-toggle
   editorial pattern (italic display + accent underline on active). */
.faith-band-traditions { padding: 40px 0 56px; }
.faith-tradition-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0 auto 36px;
  padding: 12px 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  justify-content: center;
}
.faith-tradition-tab {
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--color-muted);
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
}
.faith-tradition-tab em { font-style: italic; }
.faith-tradition-tab:hover { color: var(--color-dark); }
.faith-tradition-tab.is-active { color: var(--color-primary); }
.faith-tradition-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -13px;
  height: 1px;
  background: var(--color-secondary);
}
.faith-tradition-band { padding: 8px 0 0; }
.faith-tradition-intro { margin-bottom: 32px; }
.faith-tradition-heading {
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0 auto 12px;
}

@media (max-width: 640px) {
  .faith-tradition-tabs { gap: 16px; padding: 10px 0; }
  .faith-tradition-tab { font-size: 15px; }
}

.faith-band-tools { background: var(--color-page); }

.faith-section-lede {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-muted);
  max-width: 560px;
  margin: 16px auto 0;
}
.faith-section-band .section-intro { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.faith-section-band .flourish { margin: 24px auto 40px; }

/* ── Card grid (chronological library) ────────────────────────
   Three-up on desktop, two-up at mid-widths, single column on
   phones. Uses top + left hairlines to draw a clean grid (no
   border on the first row's tops or the first column's lefts);
   no card chrome, just editorial rules. */
.faith-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 1180px;
  margin: 0 auto;
}
.faith-card {
  display: block;
  padding: 32px 32px 28px;
  border-top: 1px solid var(--color-card-border);
  border-left: 1px solid var(--color-card-border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
/* Strip the left border on the leftmost column and the top border
   on the first row (3 columns means first 3 cards get no top). */
.faith-card:nth-child(3n+1) { border-left: 0; }
.faith-card:nth-child(-n+3) { border-top: 0; padding-top: 14px; }
.faith-card:hover { text-decoration: none; background: rgba(238,125,81,0.04); }
/* Filler cells pad the grid out to a multiple of 6 so the row-
   separator hairline extends across the whole grid even when the
   last row isn't fully populated. They keep the same border-top /
   border-left behaviour as real cards (so the lines extend) but
   carry no content, no link, no padding-bottom, no hover. Hidden
   at the 1-col phone breakpoint where row separators don't apply. */
.faith-card--filler {
  padding-bottom: 0;
  pointer-events: none;
}
.faith-card--filler:hover { background: transparent; }
.faith-card:hover .faith-card-title { color: var(--color-secondary); }
.faith-card:hover .faith-card-arrow { transform: translateX(3px); }
.faith-card-date {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 10px;
}
.faith-card-title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 4px;
  color: var(--color-dark);
  transition: color 0.15s;
}
.faith-card-title em { font-style: italic; }
.faith-card-author {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 12px;
}
.faith-card-author em { font-style: italic; }
.faith-card-desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0 0 18px;
  max-width: 480px;
}
.faith-card-link {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-secondary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.faith-card-arrow { display: inline-block; transition: transform 0.15s; }

@media (max-width: 960px) {
  .faith-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faith-card:nth-child(3n+1) { border-left: 1px solid var(--color-card-border); }
  .faith-card:nth-child(2n+1) { border-left: 0; }
  .faith-card:nth-child(-n+3) { border-top: 1px solid var(--color-card-border); padding-top: 32px; }
  .faith-card:nth-child(-n+2) { border-top: 0; padding-top: 14px; }
}
@media (max-width: 600px) {
  .faith-card-grid { grid-template-columns: 1fr; }
  .faith-card { border-left: 0 !important; padding: 28px 20px; }
  .faith-card:nth-child(-n+3),
  .faith-card:nth-child(-n+2) { border-top: 1px solid var(--color-card-border); padding-top: 28px; }
  .faith-card:first-child { border-top: 0; padding-top: 8px; }
  .faith-card--filler { display: none; }
}

/* ── Tools grid (Devotional / Today / Topics / Scripture) ─────── */
.faith-tools-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 960px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 40px;
}
.faith-tool {
  padding: 28px 0 0;
  border-top: 1px solid var(--color-card-border);
  position: relative;
}
.faith-tool:first-child,
.faith-tool:nth-child(2) { border-top: 0; padding-top: 0; }
.faith-tool-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--color-primary);
  display: inline-block;
  margin-bottom: 10px;
}
.faith-tool-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.12;
  color: var(--color-dark);
  margin: 0 0 10px;
}
.faith-tool-title em { font-style: italic; }
.faith-tool-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 18px;
  max-width: 360px;
}
.faith-tool-link {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-secondary);
  font-weight: 600;
}
@media (max-width: 720px) {
  .faith-tools-grid { grid-template-columns: 1fr; }
  .faith-tool, .faith-tool:nth-child(2) { border-top: 1px solid var(--color-card-border); padding-top: 24px; }
  .faith-tool:first-child { border-top: 0; padding-top: 0; }
}

/* ── Closing coda band (reuses .journal-band styling) ─────────── */
.faith-coda { padding: 64px 0; }
.faith-coda-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.faith-coda-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  color: var(--color-white);
  margin: 16px 0 24px;
}
.faith-coda-heading em { font-style: italic; }
.faith-coda-body {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
  margin: 0 0 32px;
}
.faith-coda-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Document reading view ────────────────────────────────────── */
/* Defensive ground-truth colors. Faith Received pages reuse the
   .article-body and .article-content classes from the post template,
   so any future unscoped dark-mode/system-style rule that targets
   those classes can leak in. These explicit rules pin the cream-on-
   dark colors regardless of what's set elsewhere. */
.faith-doc { background: var(--color-page); color: var(--color-dark); }
.faith-doc .article-body,
.faith-doc .faith-doc-body { background: transparent; color: var(--color-dark); }
.faith-doc .article-content,
.faith-doc .article-content p,
.faith-doc .article-content li,
.faith-doc .article-content h1,
.faith-doc .article-content h2,
.faith-doc .article-content h3,
.faith-doc .article-content h4,
.faith-doc .article-content h5,
.faith-doc .article-content h6 {
  color: var(--color-dark);
}
.faith-doc .article-content a:not(.btn) {
  color: var(--color-secondary);
}
.faith-doc .article-content > p:first-of-type::first-letter {
  /* Reset the Ghost article first-letter dropcap — the per-section
     bodies inherit `.article-content` for prose styling but the
     dropcap belongs only on the leading paragraph of an actual essay,
     not on every section/Q&A first paragraph. */
  font-family: inherit;
  font-size: 1em;
  color: inherit;
  font-style: inherit;
  padding-right: 0;
}

.faith-doc-header {
  /* Inherits .article-header. Tightened from the V1 padding so the
     hero doesn't dominate the page above the reading. Inner content
     centered horizontally so title, dek, description, and actions
     align as a single editorial block. */
  padding: 56px 0 40px;
}
/* Center every element in the doc hero on the same vertical axis.
   Wider inner container so the long display title doesn't visually
   overflow. Each child block centers itself horizontally; max-widths
   on the prose blocks keep the measure readable while preserving the
   shared center. */
.faith-doc-header { text-align: center; }
.faith-doc-header .article-header-inner {
  max-width: 960px;
  text-align: center;
}
.faith-doc-header .article-topic {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
/* Tradition pills sit alongside the project pill inside the same
   capsule. Adjacent-sibling separator inserts a mid-dot between
   tags so the lineage reads as a path: "THE FAITH RECEIVED · ROMAN
   CATHOLIC · SCHOLASTIC". */
.faith-doc-header .article-topic .article-topic-tag + .article-topic-tag::before {
  content: "·";
  margin: 0 8px;
  color: var(--color-muted);
  font-weight: 400;
}
/* On phones the pill capsule fits one short label cleanly but
   overflows ugly when the doc carries two or three tradition tags
   ("THE FAITH RECEIVED · REFORMED · BAPTIST"). Drop the capsule
   chrome at <=600px and render the tags as a centered uppercase
   line with mid-dot separators — same vocabulary, no awkward
   rounded edges. */
@media (max-width: 600px) {
  .faith-doc-header .article-topic {
    display: block;
    border: 0;
    padding: 0;
    font-size: 10px;
    letter-spacing: 0.18em;
    line-height: 1.7;
    margin-bottom: 20px;
    max-width: 100%;
  }
  .faith-doc-header .article-topic .article-topic-tag + .article-topic-tag::before {
    margin: 0 6px;
  }
}
.faith-doc-header .article-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.faith-doc-header .faith-doc-dek { text-align: center; }
.faith-doc-header .faith-doc-translator { text-align: center; }
.faith-doc-header .faith-doc-description {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.faith-doc-header .faith-doc-actions {
  justify-content: center;
  text-align: center;
}
.faith-doc-header .faith-doc-back { display: inline-flex; }
.faith-doc-dek {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  /* margin auto on left/right is critical — base .article-dek caps
     width at 640px, so without auto the dek anchors to the left edge
     of its container instead of centering. */
  margin: 16px auto 24px;
  text-align: center;
}
.faith-doc-header--library .faith-doc-rule { margin-left: auto; margin-right: auto; }
.faith-doc-header--library .faith-format-downloads { justify-content: center; }
.faith-doc-description {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  max-width: 640px;
  margin: 0 auto 28px;
}
.faith-doc-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  flex-wrap: wrap;
  margin-top: 12px;
}
/* ── Toggle pills (Expand/Collapse + Modernize) ──────────────
   Bordered pill buttons matching the dashboard prayer toggle. */
.faith-toggle-switch {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  background: none;
  border: 1px solid var(--color-card-border);
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.faith-toggle-switch:hover {
  color: var(--color-dark);
  border-color: var(--color-dark);
}
.faith-toggle-switch[aria-pressed="true"] {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.faith-toggle-label { line-height: 1; }
.faith-doc-back {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
}
.faith-doc-back:hover { color: var(--color-primary); text-decoration: none; }

.faith-doc-body {
  padding: 40px 0 64px;
}
.faith-doc-inner {
  /* Reading column. Match the article column width across the rest
     of the site for visual consistency. */
  max-width: 720px;
  padding: 0 28px;
}

/* ── Editorial introduction (atop every document) ────────────── */
.faith-intro {
  background: var(--color-page);
  padding: 36px 0 8px;
  position: relative;
}
.faith-intro-eyebrow {
  text-align: center;
  margin: 0 0 18px;
}
.faith-intro-prose {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.75;
  color: var(--color-dark);
  margin: 0 auto 0;
  max-width: 640px;
  text-align: left;
}
.faith-intro-prose::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6em;
  line-height: 1;
  color: var(--color-secondary);
  padding-right: 0.1em;
}
.faith-intro-flourish {
  margin: 40px auto 0;
}

/* ── Reading controls (Expand / Collapse all + Modernize) ────── */
/* Quiet inline row beneath the view toggle. No bar chrome, no caps,
   no border lines. Italic body links separated by hairlines, accent
   on hover. The "Reading" label is hidden — the visible affordances
   already say what they do. */
.faith-reading-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 28px;
  padding: 0;
  background: transparent;
  border: 0;
}
.faith-reading-controls-label { display: none; }
.faith-reading-control {
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-secondary);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.faith-reading-control:hover { color: var(--color-primary); }
.faith-reading-control--link { text-decoration: none; }

/* ── Document section / chapter / article container ──────────── */
/* Two flavors:
   - Flat (.faith-section as <article>) for short docs (creeds, theses,
     edwards, westminster shorter)
   - Collapsible (.faith-section-details as <details>) for everything
     longer. The collapsible variant matches the migrate-faq accordion
     pattern: hairline rows, 45°→-135° brand-orange chev, no card
     chrome, italic display title in the summary. */
.faith-section {
  padding: 0 0 36px;
  margin: 0 0 36px;
  border-bottom: 1px solid var(--color-card-border);
  scroll-margin-top: 96px;
}
.faith-section:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.faith-section-numeral {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 12px;
}
.faith-section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  color: var(--color-dark);
  margin: 0 0 16px;
}
.faith-section-title em { font-style: italic; }
.faith-section-subtitle,
.faith-section-subtitle-inline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17px;
  color: var(--color-muted);
}
.faith-section-subtitle { margin: 0 0 24px; }
.faith-section-subtitle-inline {
  display: block;
  font-size: 0.6em;
  margin-top: 6px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.faith-section-body { margin-top: 8px; }

/* Collapsible variant. Each <details> is a row in an accordion
   stack — top hairline, generous summary padding, body fades in. */
.faith-section-details {
  border-top: 1px solid var(--color-card-border);
  padding: 0;
  scroll-margin-top: 96px;
}
.faith-section-details:last-of-type { border-bottom: 1px solid var(--color-card-border); }
.faith-section-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 24px;
  padding: 28px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: padding 0.18s;
}
.faith-section-summary::-webkit-details-marker { display: none; }
.faith-section-summary:hover .faith-section-title { color: var(--color-secondary); }
.faith-section-summary-inner {
  min-width: 0;
}
.faith-section-summary-inner .faith-section-numeral { margin-bottom: 6px; }
.faith-section-summary-inner .faith-section-title {
  margin: 0;
  transition: color 0.15s;
}
/* Brand-orange chev — 45° pointing down (closed); -135° pointing up
   (open). Matches the migrate FAQ accordion. */
.faith-chev {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.faith-section-details[open] .faith-chev {
  transform: rotate(-135deg) translateY(-3px);
}
.faith-section-details[open] .faith-section-summary { padding-bottom: 18px; }
.faith-section-details > .faith-section-body {
  padding: 0 0 36px;
  margin-top: 0;
  /* Soft fade-in on open. Browsers ignore the animation on attribute
     toggle, but adding it makes the open state feel less jarring. */
  animation: faith-section-fade-in 0.22s ease-out;
}
@keyframes faith-section-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .faith-section-details > .faith-section-body { animation: none; }
}

/* ── 95 Theses ────────────────────────────────────────────────── */
.faith-thesis-list {
  padding: 0;
  margin: 0;
}
/* Each thesis is now a <details>; .faith-thesis is the summary inside
   it. Click the row → reveals the Copy link / Copy passage row that
   JS injects into the body. Hide the default disclosure marker since
   the row text itself is the click target. */
.faith-thesis-details {
  scroll-margin-top: 96px;
}
.faith-thesis-details > .faith-thesis {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}
.faith-thesis-details > .faith-thesis::-webkit-details-marker { display: none; }
.faith-thesis-details > .faith-thesis::marker { content: ""; }
.faith-thesis-details > .faith-thesis:hover .faith-thesis-text { color: var(--color-secondary); }
.faith-thesis-details[open] > .faith-thesis { padding-bottom: 12px; }
.faith-thesis-text { transition: color 0.15s; }
.faith-thesis-number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  line-height: 1;
  color: var(--color-primary);
  text-align: right;
  padding-top: 4px;
}
.faith-thesis-text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-dark);
  margin: 0;
}

/* ── Q & A (Westminster Shorter flat; Larger collapsible) ────── */
.faith-qa {
  padding: 0 0 32px;
  margin: 0 0 32px;
  border-bottom: 1px solid var(--color-rule);
  scroll-margin-top: 96px;
}
.faith-qa:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.faith-qa-number {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 8px;
}
.faith-qa-question {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  color: var(--color-dark);
  margin: 0 0 18px;
}
.faith-qa-question em { font-style: italic; }
.faith-qa-answer { margin: 8px 0 0; }
.faith-qa-answer p { font-size: 17px; line-height: 1.75; }
.faith-qa-references {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-rule);
}
.faith-qa-ref-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  margin-right: 10px;
}

/* Clickable scripture reference. JS upgrades these into popovers
   with verse text fetched from bolls.life (CSB17). Default state
   reads as a quiet inline link with a soft underline; hover/focus
   highlights with the brand color. */
.faith-verse-ref {
  font: inherit;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  background: transparent;
  border: 0;
  padding: 1px 2px;
  margin: 0;
  color: var(--color-secondary);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(193, 89, 60, 0.3);
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s, background 0.15s;
  border-radius: 3px;
}
.faith-verse-ref:hover,
.faith-verse-ref:focus-visible {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
  background: rgba(238,125,81,0.08);
  outline: none;
}
.faith-verse-ref[aria-expanded="true"] {
  color: var(--color-primary);
  background: rgba(238,125,81,0.12);
  text-decoration-color: var(--color-primary);
}
.faith-verse-sep { color: var(--color-card-border); }

/* Popover. Position is set inline by JS (top-left + transform);
   styling here. Above the trigger by default; flips below via
   .is-below when there's no room above. */
.faith-verse-popover {
  position: absolute;
  z-index: 100;
  width: 320px;
  max-width: calc(100vw - 28px);
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 6px;
  box-shadow: 0 12px 32px -8px rgba(45, 41, 39, 0.22);
  padding: 18px 20px 16px;
  font-family: var(--font-body);
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
}
@media (max-width: 640px) {
  .faith-verse-popover { width: 280px; padding: 16px 18px 14px; }
}
.faith-verse-popover.is-open { opacity: 1; pointer-events: auto; }
.faith-verse-popover-ref {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-secondary);
  margin: 0 0 4px;
}
.faith-verse-popover-translation {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
  margin: 0 0 12px;
}
.faith-verse-popover-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-dark);
  margin: 0;
  font-style: italic;
}
.faith-verse-popover-text:not(.is-loaded) {
  font-style: italic;
  color: var(--color-muted);
}
/* Arrow pointing down at the trigger when popover is above. Flips
   to point up via .is-below. */
.faith-verse-popover-arrow {
  position: absolute;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: var(--color-white);
  border-right: 1px solid var(--color-card-border);
  border-bottom: 1px solid var(--color-card-border);
  transform: translateX(-50%) rotate(45deg);
}
.faith-verse-popover.is-below .faith-verse-popover-arrow {
  bottom: auto;
  top: -7px;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid var(--color-card-border);
  border-top: 1px solid var(--color-card-border);
}

/* Section action row (Copy link / Copy passage). Injected at the
   bottom of every section/Q&A by initSectionActions(). Quiet by
   default so it doesn't compete with the prose; brightens on hover. */
.faith-section-actions {
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 24px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-rule);
}
.faith-section-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 4px 2px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.15s;
}
.faith-section-action:hover,
.faith-section-action:focus-visible {
  color: var(--color-secondary);
  outline: none;
}
.faith-section-action.is-copied { color: var(--color-primary); }
.faith-section-action-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .faith-section-actions { gap: 14px; }
  .faith-section-action { font-size: 10px; letter-spacing: 0.16em; }
}

/* Collapsible Q&A variant (Westminster Larger): question goes in the
   summary; answer + scripture refs live in the details body. */
.faith-qa-details .faith-qa-summary { column-gap: 20px; padding: 22px 0; }
.faith-qa-details .faith-qa-number { margin: 0 0 6px; }
.faith-qa-details .faith-qa-question {
  font-size: 22px;
  margin: 0;
  transition: color 0.15s;
}
.faith-qa-details[open] .faith-qa-summary { padding-bottom: 14px; }
.faith-qa-details > .faith-qa-answer { padding: 0 0 28px; }

/* Heidelberg part / Lord's Day (Lord's Day = collapsible) */
.faith-heidelberg-part { padding: 8px 0 32px; }
.faith-heidelberg-part .flourish { margin-bottom: 32px; }
.faith-part-eyebrow {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.32em;
  margin: 0 0 16px;
}
.faith-lords-day-details {
  /* inherits .faith-section-details */
}
.faith-lords-day-details + .faith-lords-day-details { border-top: 1px solid var(--color-card-border); }
.faith-lords-day-body {
  padding: 4px 0 36px;
}
/* Inside an open Lord's Day, Q&A items render as flat blocks. */
.faith-lords-day-body .faith-qa { padding-bottom: 28px; margin-bottom: 28px; }
.faith-lords-day-body .faith-qa:last-child { padding-bottom: 0; margin-bottom: 0; }

/* Edwards' Resolutions */
.faith-edwards-preamble {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 19px;
  line-height: 1.7;
  color: var(--color-dark);
  margin: 0 0 48px;
  padding: 0 0 32px;
  border-bottom: 1px solid var(--color-card-border);
}
/* Each resolution is now a <details>; .faith-edwards-item is the
   summary inside it. Same pattern as theses — click the row to
   reveal the Copy link / Copy passage row in the body. */
.faith-edwards-details {
  scroll-margin-top: 96px;
}
.faith-edwards-details > .faith-edwards-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.faith-edwards-details > .faith-edwards-item::-webkit-details-marker { display: none; }
.faith-edwards-details > .faith-edwards-item::marker { content: ""; }
.faith-edwards-details > .faith-edwards-item:hover .faith-edwards-text { color: var(--color-secondary); }
.faith-edwards-details[open] > .faith-edwards-item { padding-bottom: 12px; }
.faith-edwards-text { transition: color 0.15s; }
.faith-edwards-number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  color: var(--color-primary);
  text-align: right;
  padding-top: 4px;
}
.faith-edwards-text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-dark);
  margin: 0;
}

/* Library books (Calvin / Augustine / Imitation) */
.faith-book {
  padding: 24px 0 64px;
  margin: 0 0 56px;
}
.faith-book + .faith-book { padding-top: 56px; border-top: 1px solid var(--color-card-border); }
.faith-book-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-align: center;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  color: var(--color-dark);
  margin: 0 0 24px;
}
.faith-book-title em { font-style: italic; }
.faith-book .flourish { margin-bottom: 32px; }
/* Per-chapter <details> nested inside a book — slightly tighter
   summary padding so book-level framing reads as the dominant rhythm
   and chapters as nested rows. */
.faith-book .faith-book-chapter .faith-section-summary { padding: 20px 0; }
.faith-book .faith-book-chapter .faith-section-numeral { margin-bottom: 4px; }
.faith-book .faith-book-chapter .faith-section-title { font-size: clamp(22px, 2.4vw, 28px); }

/* ── Prayer cards: compact collapsible sub-cards ───────────────
   Used inside books with many short chapters (e.g. Prayers &
   Thanksgivings). Each prayer is a mini collapsible with just a
   title row — no eyebrow numeral, tighter spacing. */
.faith-prayer-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faith-prayer-card {
  border-bottom: 1px solid var(--color-card-border);
}
.faith-prayer-card:first-child {
  border-top: 1px solid var(--color-card-border);
}
.faith-prayer-card-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  gap: 12px;
}
.faith-prayer-card-summary::-webkit-details-marker { display: none; }
.faith-prayer-card-title {
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 500;
  color: var(--color-dark);
  line-height: 1.35;
}
.faith-prayer-card-summary:hover .faith-prayer-card-title {
  color: var(--color-secondary);
}
.faith-prayer-card-chev {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.faith-prayer-card[open] .faith-prayer-card-chev {
  transform: rotate(90deg);
}
.faith-prayer-card-body {
  padding: 0 0 20px;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.7;
}
.faith-prayer-card-body p { margin-bottom: 12px; }
.faith-prayer-card-body p:last-child { margin-bottom: 0; }

/* ── Document layout: left-anchored sidebar + reading column ───
   Matches the original TFR: sidebar is fixed at the left edge of
   the viewport (not sat inside a centered max-width container).
   Reading content shifts left, leaving the sidebar in the reader's
   peripheral vision and the prose anchored to a comfortable measure
   in the remaining width. Mobile: drawer. */
.faith-doc-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 32px 24px 64px;
}
.faith-doc-body--has-sidebar { padding: 0; background: var(--color-page); }

@media (min-width: 1024px) {
  /* Sidebar sits in document flow as a grid column, so it starts
     BELOW the dark hero and rides the page until it would scroll
     off-screen, at which point sticky positioning locks it under the
     global Mere Orthodoxy nav. No more overlap with the hero. */
  .faith-doc-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 36px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 32px 64px;
    align-items: start;
  }
  /* Sidebar sits in document flow as a static grid column. It does
     NOT sticky-follow the reader on scroll — it scrolls off with the
     rest of the page. Reader scrolls back up to the TOC to navigate. */
  .faith-toc-sidebar {
    position: static;
    padding: 8px 18px 28px 4px;
    background: transparent;
    border-right: 1px solid var(--color-rule);
  }
  .faith-toc-sidebar::-webkit-scrollbar { width: 6px; }
  .faith-toc-sidebar::-webkit-scrollbar-track { background: transparent; }
  .faith-toc-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-rule);
    border-radius: 3px;
  }
  .faith-doc-inner { min-width: 0; }
  /* The header "Contents" button + drawer-close button are mobile-
     only chrome; hide on desktop where the sidebar is always there. */
  .faith-doc-toc-toggle,
  .faith-toc-close,
  .faith-toc-backdrop { display: none !important; }
}

/* Mobile: drawer */
@media (max-width: 1023px) {
  /* The sidebar is hidden off-canvas by default. CSS Grid still
     places it in the layout but the fixed positioning takes it out
     of flow. Reading column gets the full width. */
  .faith-doc-layout { grid-template-columns: 1fr; padding: 32px 0 64px; }
  .faith-toc-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 86vw;
    background: var(--color-page);
    z-index: 100;
    transform: translateX(-101%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 32px rgba(45, 41, 39, 0.18);
    padding: 64px 24px 24px;
    /* Restore content margin since we're using padding for header
       space and need internal items to start below the close button. */
  }
  .faith-toc-sidebar.is-open { transform: translateX(0); }
  .faith-toc-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid var(--color-card-border);
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: var(--color-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, border-color 0.15s;
  }
  .faith-toc-close:hover { background: rgba(45,41,39,0.04); border-color: var(--color-dark); }

  .faith-toc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(45, 41, 39, 0.42);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .faith-toc-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  /* Lock body scroll when drawer is open. */
  body.faith-toc-open { overflow: hidden; }
}

/* "Contents" button in the dark-hero faith-doc-actions row. Hidden
   on desktop. Hamburger icon + label. */
.faith-doc-toc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.faith-doc-toc-toggle:hover { background: rgba(255,255,255,0.08); }
.faith-doc-toc-toggle-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 16px;
  height: 11px;
}
.faith-doc-toc-toggle-icon span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}

/* TOC nav itself (rendered inside .faith-toc-sidebar). Single column,
   left-aligned, compact rows. Active item highlight via JS adds
   `is-active`; the rule below catches both that and the :target
   pseudo-class so deep links to a section anchor highlight too. */
.faith-toc {
  font-family: var(--font-body);
}
.faith-toc-label-heading {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
  margin: 0 0 14px;
  padding: 0 8px;
}
.faith-toc-group { margin-bottom: 18px; }
.faith-toc-group + .faith-toc-group { margin-top: 8px; }
.faith-toc-group-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 8px;
  padding: 0 8px;
}
.faith-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
/* Editorial rows: hairlines between items, no card chrome. Active
   item gets a thin accent rule on the left and accent-coloured text;
   no background fill (MO rule: hairlines + editorial rows, not pills).
   Stacked layout keeps the numeral as a small eyebrow above the title
   so long values ("c. 2nd–3rd Century") don't crowd the row. */
.faith-toc-item { display: block; border-top: 1px solid var(--color-rule); }
.faith-toc-item:last-child { border-bottom: 1px solid var(--color-rule); }
.faith-toc-item a {
  display: block;
  padding: 9px 8px 9px 12px;
  color: var(--color-dark);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.faith-toc-item a:hover {
  color: var(--color-secondary);
  text-decoration: none;
  border-left-color: var(--color-rule);
}
.faith-toc-item a.is-active {
  color: var(--color-secondary);
  border-left-color: var(--color-secondary);
}
.faith-toc-item a.is-active .faith-toc-num { color: var(--color-secondary); }
.faith-toc-num {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.faith-toc-label {
  display: block;
  color: inherit;
}

@media (max-width: 1023px) {
  /* Inline-mode TOC has a 2-column grid for short labels (creeds,
     theses) and stays single-column for label-heavy docs (Heidelberg,
     Calvin). Default to one-column to avoid awkward wrapping. */
  .faith-toc-list { gap: 0; }
  .faith-toc-item a { padding: 6px 8px; font-size: 13px; }
}

/* "Long work — only first chapter set so far" notice */
.faith-oversized-note {
  margin: 0 0 56px;
  padding: 24px 28px;
  border: 1px solid var(--color-card-border);
  border-left: 3px solid var(--color-primary);
  background: rgba(238,125,81,0.04);
  border-radius: 6px;
}
.faith-oversized-note .eyebrow { margin-bottom: 8px; }
.faith-oversized-note p:last-child { margin-bottom: 0; font-size: 15px; line-height: 1.65; color: var(--color-muted); }

/* ── Feature pages: shared shell ──────────────────────────────── */
.faith-feature .faith-feature-hero { padding: 88px 0 88px; }
.faith-feature-hero .container { max-width: 920px; }
.faith-feature-body { padding: 48px 0 64px; }
.faith-feature-cta {
  margin-top: 48px;
  text-align: center;
}
.faith-feature-cta .section-heading { font-size: clamp(24px, 2.8vw, 32px); margin: 4px auto 24px; }
.faith-feature-cta .faith-hero-form {
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  max-width: 460px;
}
.faith-feature-cta .faith-hero-form input[type="email"] {
  border: 0;
  background: transparent;
  color: var(--color-dark);
  padding: 10px 0;
  font-size: 15px;
}
.faith-feature-cta .faith-hero-form input[type="email"]::placeholder { color: var(--color-muted); }
.faith-feature-cta .faith-hero-form input[type="email"]:focus { background: transparent; }
.faith-feature-cta .faith-hero-form .btn { padding: 12px 22px; }
.faith-feature-cta .faith-hero-status { color: var(--color-muted); }

/* ── Search page ──────────────────────────────────────────────── */
.faith-search-form {
  display: flex;
  gap: 12px;
  margin-top: 36px;
  max-width: 720px;
  align-items: stretch;
}
.faith-search-form input[type="search"] {
  flex: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  color: var(--color-white);
  outline: none;
}
.faith-search-form input[type="search"]::placeholder {
  color: rgba(255,255,255,0.5);
  font-style: italic;
}
.faith-search-form input[type="search"]:focus {
  border-color: var(--color-primary);
  background: rgba(255,255,255,0.1);
}
.faith-search-status {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
  margin: 0 0 24px;
}
.faith-search-status.is-error { color: var(--color-secondary); }
.faith-search-results {
  list-style: none;
  padding: 0;
  margin: 0;
}
.faith-search-hit {
  border-bottom: 1px solid var(--color-rule);
}
.faith-search-hit-link {
  display: block;
  padding: 24px 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}
.faith-search-hit-link:hover { opacity: 1; }
.faith-search-hit-link:hover .faith-search-hit-title { color: var(--color-secondary); }
.faith-search-hit-meta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 8px;
}
.faith-search-hit-author {
  color: var(--color-muted);
  margin-left: 12px;
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: none;
}
.faith-search-hit-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--color-dark);
  transition: color 0.15s;
}
.faith-search-hit-snippet,
.faith-search-hit-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-dark);
  margin: 0 0 4px;
}
.faith-search-hit-body { color: var(--color-muted); }
.faith-search-hit mark {
  background: rgba(238,125,81,0.22);
  color: inherit;
  padding: 0 2px;
}
.faith-search-empty {
  padding: 48px 0;
  text-align: center;
  font-family: var(--font-body);
  color: var(--color-muted);
}

/* ── Scripture index page ─────────────────────────────────────── */
/* OT/NT toggle in MO editorial style — italic display tabs separated
   by spacing, accent underline on active. Lives below the fold on the
   light page background, so the previous on-dark pill chrome wasn't
   readable. Matches the .faith-view-toggle pattern. */
.faith-scripture-toggle {
  display: flex;
  align-items: baseline;
  gap: 28px;
  margin: 0 0 28px;
  padding: 12px 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  background: transparent;
  border-radius: 0;
}
.faith-scripture-toggle-btn {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--color-muted);
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
}
.faith-scripture-toggle-btn:hover { color: var(--color-dark); }
.faith-scripture-toggle-btn.is-active {
  background: transparent;
  color: var(--color-primary);
}
.faith-scripture-toggle-btn.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 1px;
  background: var(--color-secondary);
}
/* Single-column list of book collapsibles. No card chrome — each
   book is an editorial row with hairlines above/below. Click a book
   to reveal its chapters; click a chapter to reveal the references.
   Three-deep <details> nesting (book → chapter → refs) keeps the
   grid compact and lets the reader drill in without leaving the
   page or losing place. */
.faith-scripture-grid {
  display: block;
  margin: 8px 0 0;
  max-width: 760px;
}
.faith-scripture-status {
  text-align: center;
  font-family: var(--font-body);
  color: var(--color-muted);
  margin: 24px 0;
}
.faith-scripture-book-details {
  border-top: 1px solid var(--color-rule);
}
.faith-scripture-book-details:last-of-type {
  border-bottom: 1px solid var(--color-rule);
}
.faith-scripture-book-details.is-empty .faith-scripture-book {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.faith-scripture-book {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  column-gap: 18px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  background: transparent;
  border: 0;
  text-decoration: none;
  color: var(--color-dark);
  transition: color 0.15s;
}
.faith-scripture-book::-webkit-details-marker { display: none; }
.faith-scripture-book::marker { content: ""; }
.faith-scripture-book:hover .faith-scripture-book-name {
  color: var(--color-secondary);
}
.faith-scripture-book-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  transition: color 0.15s;
}
.faith-scripture-book-count {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.faith-scripture-chev {
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--color-primary);
  border-bottom: 1.5px solid var(--color-primary);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
.faith-scripture-book-details[open] > .faith-scripture-book .faith-scripture-chev,
.faith-scripture-chapter-details[open] > .faith-scripture-chapter .faith-scripture-chev {
  transform: rotate(-135deg) translateY(-2px);
}
.faith-scripture-book-details[open] > .faith-scripture-book {
  padding-bottom: 10px;
}

.faith-scripture-book-body {
  padding: 0 0 18px 24px;
}
.faith-scripture-chapter-details {
  border-top: 1px solid var(--color-rule);
}
.faith-scripture-chapter-details:first-child { border-top: 0; }
.faith-scripture-chapter {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  column-gap: 14px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  transition: color 0.15s;
}
.faith-scripture-chapter::-webkit-details-marker { display: none; }
.faith-scripture-chapter::marker { content: ""; }
.faith-scripture-chapter:hover .faith-scripture-chapter-name {
  color: var(--color-secondary);
}
.faith-scripture-chapter-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  transition: color 0.15s;
}
.faith-scripture-chapter-count {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.faith-scripture-chapter-details[open] > .faith-scripture-chapter {
  padding-bottom: 8px;
}
.faith-scripture-refs { list-style: none; padding: 0; margin: 0; }
.faith-scripture-ref { border-top: 1px solid var(--color-rule); }
.faith-scripture-ref:first-child { border-top: 0; }
.faith-scripture-ref-link {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: 18px;
  padding: 18px 0;
  text-decoration: none;
  color: var(--color-dark);
  align-items: baseline;
}
.faith-scripture-ref-link:hover { text-decoration: none; }
.faith-scripture-ref-link:hover .faith-scripture-ref-passage { color: var(--color-secondary); }
.faith-scripture-ref-passage {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-dark);
  display: block;
  transition: color 0.15s;
}
.faith-scripture-ref-source {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  display: block;
  margin-top: 6px;
}
.faith-scripture-ref-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.faith-scripture-ref-excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted);
  display: block;
}

/* ── Today's reading page ─────────────────────────────────────── */
.faith-today-body { padding: 72px 0 96px; }
.faith-today-card {
  text-align: center;
}
.faith-today-card .eyebrow { margin: 0 0 8px; }
.faith-today-card .section-heading { margin: 0 0 24px; max-width: 580px; margin-left: auto; margin-right: auto; }
.faith-today-content {
  text-align: left;
  margin-top: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  padding: 32px 36px;
  border-radius: 8px;
}
.faith-today-content p { font-size: 18px; line-height: 1.75; }
.faith-today-content > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.8em;
  line-height: 1;
  padding-right: 0.08em;
  color: var(--color-secondary);
}
.faith-today-cta { margin-top: 32px; text-align: center; }
.faith-today-status {
  text-align: center;
  font-family: var(--font-body);
  color: var(--color-muted);
  padding: 32px 0;
}
.faith-today-status.is-error { color: var(--color-secondary); }

/* ── Memorize mode ────────────────────────────────────────────── */
.faith-memorize-body { padding: 56px 0 96px; }

.faith-memorize-progress {
  max-width: 560px;
  margin: 0 auto 28px;
}
.faith-memorize-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}
.faith-memorize-progress-pct {
  color: var(--color-secondary);
  font-feature-settings: "tnum" 1;
}
.faith-memorize-progress-track {
  height: 4px;
  border-radius: 999px;
  background: var(--color-card-border);
  overflow: hidden;
}
.faith-memorize-progress-fill {
  height: 100%;
  background: var(--color-primary);
  width: 0%;
  transition: width 220ms ease;
}

/* Filters: hairline-separated italic links, accent underline on
   active. Drops the pill container + bordered pill buttons. */
.faith-memorize-filters {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 0 auto 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  width: auto;
}
.faith-memorize-filter {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted);
  padding: 6px 0;
  cursor: pointer;
  position: relative;
  transition: color 160ms ease;
}
.faith-memorize-filter:hover { color: var(--color-dark); }
.faith-memorize-filter.is-active {
  background: transparent;
  color: var(--color-primary);
}
.faith-memorize-filter.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-secondary);
}

/* Memorize card: no card chrome — just an editorial Q&A block in the
   center of the reading column. Hairline above + below to separate
   it from controls and nav, no perimeter border, no rounded corners,
   no shadow. */
.faith-memorize-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  border-radius: 0;
  padding: 36px 0 32px;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: none;
}
.faith-memorize-numeral {
  margin: 0 0 14px;
  color: var(--color-secondary);
}
.faith-memorize-question {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.35;
  margin: 0 0 8px;
  color: var(--color-dark);
}
.faith-memorize-question em { font-style: italic; }

.faith-memorize-answer {
  margin: 24px 0 8px;
  padding: 24px 0 4px;
  border-top: 1px solid var(--color-card-border);
}
.faith-memorize-answer .flourish { margin: 0 0 18px; }
.faith-memorize-answer-text p {
  font-size: 17px;
  line-height: 1.78;
  margin: 0 0 14px;
}
.faith-memorize-answer-text p:last-child { margin-bottom: 0; }
.faith-memorize-refs {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-card-border);
}

.faith-memorize-actions {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 28px;
  flex-wrap: wrap;
}
/* Reveal + Mark memorized: italic display text-buttons matching the
   reading-controls vocabulary. No pill backgrounds. */
.faith-memorize-reveal,
.faith-memorize-mark {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--color-secondary);
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}
.faith-memorize-reveal:hover,
.faith-memorize-mark:hover { color: var(--color-primary); }
.faith-memorize-mark.is-memorized {
  color: var(--color-primary);
  font-weight: 500;
}

.faith-memorize-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-card-border);
}
.faith-memorize-step {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  cursor: pointer;
  padding: 6px 0;
}
.faith-memorize-step:hover { color: var(--color-secondary); }
.faith-memorize-position {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-feature-settings: "tnum" 1;
}

.faith-memorize-hint {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
}
.faith-memorize-hint kbd {
  font-family: var(--font-body);
  font-size: 11px;
  background: var(--color-card-border);
  color: var(--color-dark);
  padding: 1px 6px;
  border-radius: 4px;
  margin: 0 2px;
}

.faith-memorize-empty {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  padding: 48px 24px;
}
.faith-memorize-empty .section-heading { margin: 4px 0 16px; }
.faith-memorize-empty-body { color: var(--color-muted); }
.faith-memorize-empty-link {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-secondary);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}

.faith-memorize-back {
  text-align: center;
  margin: 36px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
}
.faith-memorize-back a { color: var(--color-muted); }
.faith-memorize-back a:hover { color: var(--color-secondary); }

@media (max-width: 640px) {
  .faith-memorize-card { padding: 28px 22px 24px; }
  .faith-memorize-actions .btn { min-width: 0; flex: 1; }
  .faith-memorize-nav { flex-wrap: wrap; gap: 10px; justify-content: center; }
  .faith-memorize-position { order: -1; width: 100%; text-align: center; }
}

/* ── Topics page (V1: list + Coming soon) ─────────────────────── */
.faith-topics-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: 32px;
}
.faith-topic {
  padding: 24px 0 0;
  border-top: 1px solid var(--color-card-border);
}
.faith-topic:first-child,
.faith-topic:nth-child(2) { border-top: 0; padding-top: 8px; }
.faith-topic-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--color-primary);
  display: inline-block;
  margin-bottom: 8px;
}
.faith-topic-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  color: var(--color-dark);
  margin: 0 0 8px;
}
.faith-topic-title em { font-style: italic; }
.faith-topic-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
}
@media (max-width: 720px) {
  .faith-topics-list { grid-template-columns: 1fr; }
  .faith-topic, .faith-topic:nth-child(2) { border-top: 1px solid var(--color-card-border); padding-top: 22px; }
  .faith-topic:first-child { border-top: 0; padding-top: 0; }
}

/* ── Topics index page (the new card grid replacing the V1 stub) ─ */
.faith-topic-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
.faith-topic-card {
  display: block;
  padding: 28px 28px 24px;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--color-card-border);
  border-left: 1px solid var(--color-card-border);
  transition: background 0.15s, color 0.15s;
}
.faith-topic-card:nth-child(3n+1) { border-left: 0; }
.faith-topic-card:hover {
  background: rgba(238,125,81,0.05);
  text-decoration: none;
}
.faith-topic-card:hover .faith-topic-card-title { color: var(--color-secondary); }
.faith-topic-card-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--color-primary);
  display: block;
  margin-bottom: 10px;
}
.faith-topic-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  color: var(--color-dark);
  margin: 0 0 10px;
  transition: color 0.15s;
}
.faith-topic-card-title em { font-style: italic; }
.faith-topic-card-desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0 0 14px;
}
.faith-topic-card-count {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}
@media (max-width: 880px) {
  .faith-topic-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faith-topic-card:nth-child(3n+1) { border-left: 1px solid var(--color-card-border); }
  .faith-topic-card:nth-child(2n+1) { border-left: 0; }
}
@media (max-width: 540px) {
  .faith-topic-card-grid { grid-template-columns: 1fr; }
  .faith-topic-card { border-left: 0 !important; padding: 24px 20px; }
}

/* ── Per-topic detail page ───────────────────────────────────── */
.faith-topic-header { padding-bottom: 56px; }
.faith-topic-header .article-title { font-size: clamp(36px, 4.4vw, 56px); }
.faith-topic-empty {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-muted);
  padding: 48px 0;
  text-align: center;
}

/* ── Mobile tightening ───────────────────────────────────────── */
@media (max-width: 640px) {
  .faith-hero { padding: 64px 0 64px; }
  .faith-hero-headline { font-size: clamp(32px, 9vw, 44px); }
  .faith-hero-form { flex-direction: column; }
  .faith-hero-form .btn { width: 100%; }
  .faith-section-band { padding: 56px 0; }
  .faith-doc-body { padding: 48px 0 64px; }
  .faith-doc-inner { padding: 0 20px; }
  .faith-section { padding-bottom: 40px; margin-bottom: 40px; }
  .faith-doc-actions { flex-direction: column; gap: 14px; }
  .faith-thesis,
  .faith-edwards-item { grid-template-columns: 44px 1fr; gap: 14px; }
  .faith-thesis-number,
  .faith-edwards-number { font-size: 22px; }
  .faith-search-form input[type="search"] { font-size: 18px; padding: 12px 16px; }
  .faith-feature-cta .faith-hero-form { flex-direction: row; padding: 4px 4px 4px 14px; }
  .faith-feature-cta .faith-hero-form .btn { padding: 10px 18px; }
  .faith-scripture-grid { grid-template-columns: 1fr; }
  .faith-scripture-ref-link { grid-template-columns: 1fr; gap: 4px; }
  .faith-section-summary { padding: 22px 0; column-gap: 16px; }
  .faith-section-summary .faith-section-title { font-size: clamp(22px, 5.5vw, 28px); }
  .faith-intro { padding: 40px 0 4px; }
  .faith-intro-prose { font-size: 17px; }
  .faith-reading-controls { gap: 16px; padding: 12px 0; }
  .faith-toc { padding: 24px 0; }
}

/* ── Print ────────────────────────────────────────────────────────
   Documents are confessional reference material — readers will print.
   Force every collapsible open, drop the dark hero treatment for an
   ink-friendly title block, hide the nav/header/footer/controls,
   add proper page breaks. Mirrors the article-print styles already
   used elsewhere in the theme. */
@media print {
  .site-header,
  .site-footer,
  .faith-rail,
  .faith-reading-controls,
  .faith-doc-actions,
  .faith-toc,
  .faith-card-grid,
  .faith-tools-grid,
  .faith-coda,
  nav { display: none !important; }
  body { background: white; color: black; font-size: 11pt; line-height: 1.45; }
  .faith-doc-header {
    background: white;
    color: black;
    padding: 0 0 24pt;
    border-bottom: 1pt solid #999;
    text-align: left;
  }
  .faith-doc-header::before { display: none; }
  .faith-doc-header .article-title { color: black; font-size: 24pt; margin: 0 0 8pt; }
  .faith-doc-header .article-topic { display: none; }
  .faith-doc-dek,
  .faith-doc-description { color: #444 !important; max-width: 100%; }
  .faith-intro {
    background: white;
    border-bottom: 0;
    padding: 18pt 0 8pt;
  }
  .faith-intro-flourish { display: none; }
  .faith-intro-prose::first-letter { color: black; }
  /* Force every <details> open and hide the chev. */
  details.faith-section-details { border-color: #ccc; page-break-inside: avoid; }
  details.faith-section-details > .faith-section-body,
  details.faith-section-details summary + * { display: block !important; }
  details.faith-section-details:not([open]) > .faith-section-body,
  details.faith-section-details:not([open]) summary + * { display: block !important; }
  details summary { list-style: none; cursor: default; }
  .faith-chev { display: none !important; }
  /* Open all <details> programmatically through CSS isn't possible —
     but the body display rule above makes the inner content print
     even when the element is closed. So rely on that, plus the
     inline JS below to force them open before the print preview. */
  .faith-section,
  .faith-section-details { padding: 6pt 0; margin: 0; border-bottom: 1pt solid #eee; }
  .faith-section-numeral,
  .faith-qa-number { color: black; }
  .faith-section-title,
  .faith-qa-question { color: black; font-size: 15pt; }
  .faith-qa-answer p,
  .faith-section-body p { font-size: 11pt; line-height: 1.5; }
  a { color: black; text-decoration: none; border-bottom: 0; }
  .flourish { display: none; }
  /* Header re-print on each page for the document's title. */
  @page { margin: 0.6in 0.7in; }
}

/* ── Library books: collapsible book sections ──────────────────
   Calvin / Augustine / Imitation render each book as a <details>
   with the book heading in the summary and chapter list in the
   body. First book opens by default; subsequent collapse to a
   compact book-title row. */
/* Book details: editorial rows separated by hairlines. No card
   chrome — no background fill, no border-radius, no perimeter
   border. The summary itself is a flush row with eyebrow + italic
   title + chev; the body opens beneath with a hairline divider. */
.faith-book-details {
  padding: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-rule);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.faith-book-details:last-child { border-bottom: 1px solid var(--color-rule); }
.faith-book-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: transparent;
  transition: color 0.15s;
}
.faith-book-summary::-webkit-details-marker { display: none; }
.faith-book-details[open] > .faith-book-summary {
  padding-bottom: 14px;
}
.faith-book-summary:hover .faith-book-title { color: var(--color-secondary); }
.faith-book-summary-inner { min-width: 0; }
.faith-book-summary-inner .faith-part-eyebrow {
  text-align: left;
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.24em;
}
.faith-book-summary-inner .faith-book-title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  text-align: left;
  transition: color 0.15s;
}
.faith-book-body {
  padding: 8px 0 28px;
  animation: faith-section-fade-in 0.22s ease-out;
}
.faith-book-body > .flourish { margin-bottom: 28px; }
.faith-book-body .faith-book-chapter {
  border-top-color: var(--color-rule);
}
.faith-book-body .faith-book-chapter:first-of-type { border-top: 0; }
.faith-book-body .faith-book-chapter:last-of-type { border-bottom: 0; }
@media (max-width: 640px) {
  .faith-book-summary { padding: 18px 0; }
  .faith-book-body { padding: 6px 0 20px; }
}

/* ── Library sidebar: collapsible book groups ─────────────────
   Each <details> in booksTocBlock collapses the chapter list under
   a book-level summary so a 4-book classic isn't a wall of links. */
.faith-toc-book-details {
  border-top: 1px solid var(--color-card-border);
  padding: 0;
}
.faith-toc-book-details:first-of-type { border-top: 0; }
.faith-toc-book-summary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faith-toc-book-summary::-webkit-details-marker { display: none; }
.faith-toc-book-summary:hover .faith-toc-book-label { color: var(--color-secondary); }
.faith-toc-book-summary .faith-toc-book-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}
.faith-toc-book-count {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
}
.faith-toc-book-summary .faith-chev {
  width: 9px;
  height: 9px;
  border-right-width: 1.5px;
  border-bottom-width: 1.5px;
}
.faith-toc-book-list {
  padding: 4px 0 14px;
  margin: 0;
}

/* ── Topic page: filter bar ──────────────────────────────────── */
.faith-topic-filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 0 36px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--color-card-border);
}
.faith-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.faith-filter-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
  margin-right: 4px;
}
.faith-filter-pill {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 5px 14px;
  border: 1px solid var(--color-card-border);
  border-radius: 20px;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.faith-filter-pill:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.faith-filter-pill.is-active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

/* ── Topic page: collapsible document groups ─────────────────── */
.faith-topic-group {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--color-card-border);
}
.faith-topic-group:last-child { border-bottom: 0; }
.faith-topic-group[hidden] { display: none; }
.faith-topic-group-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faith-topic-group-header::-webkit-details-marker { display: none; }
.faith-topic-group-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.faith-topic-group-header .eyebrow { margin: 0; }
.faith-topic-group-header .section-heading {
  font-size: clamp(20px, 2.5vw, 28px);
  margin: 0;
}
.faith-topic-group-author {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  margin: 0;
  font-style: italic;
}
.faith-topic-group-count {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
}
.faith-topic-group-header .faith-chev {
  transition: transform 0.2s;
}
.faith-topic-group[open] > .faith-topic-group-header .faith-chev {
  transform: rotate(180deg);
}
.faith-topic-group > .faith-topic-row-list {
  padding: 0 0 24px;
  animation: faith-section-fade-in 0.22s ease-out;
}

/* ── Topic page: passage rows ────────────────────────────────── */
.faith-topic-row-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.faith-topic-row { border-top: 1px solid var(--color-rule); }
.faith-topic-row:first-child { border-top: 0; }
.faith-topic-row-link {
  display: block;
  padding: 16px 0;
  text-decoration: none;
  color: var(--color-dark);
  transition: color 0.15s;
}
.faith-topic-row-link:hover {
  text-decoration: none;
  color: var(--color-secondary);
}
.faith-topic-row-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.faith-topic-row-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.faith-topic-row-snippet {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-dark);
}
.faith-topic-row-excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 4px 0 0;
}
.faith-topic-row-read {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: var(--color-secondary);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 6px;
  transition: color 0.15s;
}
.faith-topic-row-link:hover .faith-topic-row-read {
  color: var(--color-primary);
}

@media (max-width: 640px) {
  .faith-topic-group-header {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 18px 0;
  }
  .faith-topic-group-count { display: none; }
  .faith-topic-row-meta { flex-direction: column; gap: 4px; }
  .faith-filter-group { gap: 6px; }
  .faith-filter-pill { font-size: 12px; padding: 4px 10px; }
}

/* ── Memorize mode ────────────────────────────────────────────
   One Q&A at a time. Compact card-style layout (the rare place we
   embrace card chrome — a memorize card IS a flashcard). Quiet
   progress bar at the top, filter pill set, current/total counter.
   Keyboard-first: Space reveals, M marks, ←/→ navigate. */
.faith-memorize-body { padding: 32px 0 56px; background: var(--color-page); }

.faith-memorize-progress { margin: 0 0 18px; }
.faith-memorize-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.faith-memorize-progress-label { color: var(--color-muted); }
.faith-memorize-progress-pct { color: var(--color-primary); }
.faith-memorize-progress-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--color-card-border);
  overflow: hidden;
}
.faith-memorize-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.faith-memorize-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
  flex-wrap: wrap;
}
.faith-memorize-filter {
  display: inline-flex;
  background: var(--color-background);
  border: 1px solid var(--color-card-border);
  border-radius: 999px;
  padding: 3px;
}
.faith-memorize-filter-btn {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 7px 14px;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.faith-memorize-filter-btn:hover { color: var(--color-dark); }
.faith-memorize-filter-btn.is-active {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(45,41,39,0.08);
}
.faith-memorize-position {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
}

.faith-memorize-card {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  padding: 36px 36px 28px;
  margin: 0 0 24px;
  box-shadow: 0 2px 8px rgba(45,41,39,0.04);
}
.faith-memorize-card-header { margin-bottom: 24px; }
.faith-memorize-card-numeral {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 12px;
}
.faith-memorize-card-question {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  color: var(--color-dark);
  margin: 0;
}
.faith-memorize-card-question em { font-style: italic; }
.faith-memorize-answer {
  border-top: 1px solid var(--color-rule);
  padding-top: 20px;
  margin: 0 0 24px;
  animation: faith-section-fade-in 0.22s ease-out;
}
.faith-memorize-answer .eyebrow { margin: 0 0 10px; }
.faith-memorize-answer-text p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-dark);
  margin: 0 0 14px;
}
.faith-memorize-answer-text p:last-child { margin-bottom: 0; }
.faith-memorize-answer .faith-qa-references { margin-top: 18px; }
.faith-memorize-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.faith-memorize-actions .btn {
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 20px;
}
.faith-memorize-actions .btn-outline.is-memorized {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.faith-memorize-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.faith-memorize-nav-btn {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--color-card-border);
  border-radius: 999px;
  color: var(--color-dark);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.faith-memorize-nav-btn:hover {
  background: rgba(238,125,81,0.06);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.faith-memorize-empty {
  text-align: center;
  padding: 48px 0;
  color: var(--color-muted);
  font-style: italic;
}

.faith-memorize-header kbd {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  padding: 1px 5px;
  margin: 0 1px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 640px) {
  .faith-memorize-card { padding: 24px 22px; }
  .faith-memorize-actions { flex-direction: column; }
  .faith-memorize-actions .btn { width: 100%; }
  .faith-memorize-nav-btn { font-size: 10px; padding: 9px 14px; }
}

/* ── Read-introduction disclosure ───────────────────────────── */
/* Mirrors the original TFR site's "Read introduction" toggle. The
   summary is a compact accent-coloured link; opening it reveals the
   full editorial intro with its dropcap and closing flourish. */
.faith-intro-disclosure {
  margin: 0 auto;
  max-width: 640px;
  padding: 8px 0 0;
  text-align: center;
}
.faith-intro-disclosure .faith-intro-body { text-align: left; }
.faith-intro-disclosure > .faith-intro-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--color-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 6px 0;
}
.faith-intro-disclosure > .faith-intro-summary::-webkit-details-marker { display: none; }
.faith-intro-summary:hover { color: var(--color-primary); }
.faith-intro-summary-chev {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.faith-intro-disclosure[open] .faith-intro-summary-chev {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.faith-intro-body {
  padding: 18px 0 0;
}
.faith-intro-body .faith-intro-prose { margin-top: 0; }

/* ── View toggle (Heidelberg) ───────────────────────────────── */
/* Editorial switcher: italic display tabs separated by hairlines,
   active tab marked by an accent underline. Replaces the original
   site's pill chrome with MO's hairline-and-italic vocabulary. */
.faith-view-toggle {
  display: flex;
  align-items: baseline;
  gap: 28px;
  margin: 0 0 28px;
  padding: 12px 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.faith-view-toggle-tab {
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-muted);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: color 0.15s;
}
.faith-view-toggle-tab em { font-style: italic; }
.faith-view-toggle-tab:hover { color: var(--color-dark); }
.faith-view-toggle-tab.is-active {
  color: var(--color-primary);
}
.faith-view-toggle-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 1px;
  background: var(--color-secondary);
}
.faith-view-toggle-tab--link::before {
  content: "→";
  display: inline-block;
  margin-right: 6px;
  color: var(--color-secondary);
  font-style: normal;
  font-size: 0.85em;
  vertical-align: middle;
}

/* ── Heidelberg Part containers (responsive to view) ────────── */
.faith-heidelberg-views { display: block; }
.faith-heidelberg-part { margin: 0 0 56px; }
.faith-heidelberg-part:last-child { margin-bottom: 0; }
.faith-heidelberg-part-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 16px 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: default;
  border-bottom: 1px solid var(--color-rule);
}
.faith-heidelberg-part-summary-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.faith-heidelberg-part-summary-inner .faith-part-eyebrow { margin: 0; }
.faith-part-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  margin: 0;
}
.faith-heidelberg-part-chev {
  display: none;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid var(--color-muted);
  border-bottom: 1.5px solid var(--color-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faith-heidelberg-part-body { display: block; }
.faith-heidelberg-part-body .flourish { margin: 24px 0 32px; }

[data-faith-view="lords-day"] .faith-heidelberg-part-summary { cursor: default; pointer-events: none; }
[data-faith-view="lords-day"] .faith-heidelberg-part-chev { display: none; }
[data-faith-view="lords-day"] .faith-heidelberg-part-body { display: block; }

[data-faith-view="section"] .faith-heidelberg-part-summary { cursor: pointer; pointer-events: auto; }
[data-faith-view="section"] .faith-heidelberg-part-summary:hover .faith-part-eyebrow { color: var(--color-primary); }
[data-faith-view="section"] .faith-heidelberg-part-chev { display: inline-block; }
[data-faith-view="section"] .faith-heidelberg-part.is-open .faith-heidelberg-part-chev {
  transform: rotate(225deg);
}
[data-faith-view="section"] .faith-heidelberg-part:not(.is-open) .faith-heidelberg-part-body { display: none; }
[data-faith-view="section"] .faith-heidelberg-part.is-open .faith-heidelberg-part-body { display: block; }
/* In section view the LD <details> are forced open via JS so the
   reader gets a continuous body of text. The LD summary chrome
   (Lord's Day N · title) reads as an inline header rather than a
   click-target. */
[data-faith-view="section"] .faith-lords-day-details > .faith-section-summary .faith-chev { display: none; }
[data-faith-view="section"] .faith-lords-day-details > .faith-section-summary { cursor: default; pointer-events: none; }

/* Memorize view: hide reading-controls and (on desktop) sidebar TOC.
   Memorize is its own self-contained interaction; the reading-view
   chrome would just be in the way. JS toggles .is-memorize-view on
   .faith-doc-layout (avoids :has() browser-compat questions). */
.faith-doc-layout.is-memorize-view .faith-reading-controls { display: none; }
@media (min-width: 1024px) {
  .faith-doc-layout.is-memorize-view {
    grid-template-columns: minmax(0, 1fr);
  }
  .faith-doc-layout.is-memorize-view .faith-toc-sidebar { display: none; }
}

/* ── Library editorial header extras ────────────────────────── */
.faith-doc-header--library .faith-doc-translator {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 16px;
  font-style: italic;
}
.faith-doc-rule {
  border: 0;
  height: 1px;
  background: var(--color-secondary);
  opacity: 0.4;
  width: 64px;
  margin: 24px 0 20px;
}
.faith-format-downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.03em;
}
.faith-format-link {
  color: var(--color-secondary);
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.faith-format-link:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-secondary);
}
.faith-format-link--muted { color: var(--color-muted); }
.faith-format-link--muted:hover { color: var(--color-secondary); }
.faith-format-link[data-faith-download-pending] {
  pointer-events: none;
  opacity: 0.55;
  cursor: not-allowed;
}
.faith-format-sep {
  color: var(--color-rule);
  user-select: none;
}

/* ── Library: Introductory Material ──────────────────────────── */
/* Each entry is a <details> collapsible: summary holds the title +
   subtitle, body opens inline below. Hairline-separated rows, no
   card chrome. */
.faith-front-matter {
  margin: 0 0 48px;
}
.faith-front-matter-heading {
  margin: 0 0 8px;
}
.faith-front-matter-list {
  margin: 0;
  padding: 0;
}
.faith-front-matter-details {
  border-top: 1px solid var(--color-rule);
  padding: 0;
}
.faith-front-matter-details:last-child {
  border-bottom: 1px solid var(--color-rule);
}
.faith-front-matter-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 24px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faith-front-matter-summary::-webkit-details-marker { display: none; }
.faith-front-matter-summary:hover .faith-front-matter-title { color: var(--color-secondary); }
.faith-front-matter-summary-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.faith-front-matter-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  color: var(--color-primary);
  transition: color 0.15s;
}
.faith-front-matter-title em { font-style: italic; }
.faith-front-matter-subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.5;
}
.faith-front-matter-chev {
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--color-primary);
  border-bottom: 1.5px solid var(--color-primary);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
.faith-front-matter-details[open] .faith-front-matter-chev {
  transform: rotate(-135deg) translateY(-2px);
}
.faith-front-matter-details[open] > .faith-front-matter-summary {
  padding-bottom: 8px;
}
.faith-front-matter-body {
  padding: 4px 0 28px;
  animation: faith-section-fade-in 0.22s ease-out;
}
.faith-front-matter-body p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-dark);
  margin: 0 0 16px;
}
.faith-front-matter-body p:last-child { margin-bottom: 0; }

/* ── Library editorial book ──────────────────────────────────── */
.faith-book-details--editorial {
  border-top: 1px solid var(--color-rule);
  padding: 6px 0 0;
}
.faith-book-details--editorial:last-child {
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: 0;
}
.faith-book-details--editorial + .faith-book-details--editorial {
  border-top: 1px solid var(--color-rule);
  padding-top: 6px;
}
.faith-book-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  margin: 6px 0 0;
}
.faith-doc--editorial .faith-book-details--editorial .faith-book-summary {
  padding: 22px 0;
}

@media (max-width: 640px) {
  .faith-view-toggle { gap: 16px; flex-wrap: wrap; }
  .faith-view-toggle-tab { font-size: 16px; }
  .faith-front-matter-title { font-size: 18px; }
  .faith-format-downloads { gap: 10px; }
}

/* =============================================================
   Slide-in CTA
   ============================================================= */
.slide-in {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 320px;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  z-index: 900;
  overflow: hidden;
  transform: translateX(calc(100% + 48px));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.slide-in.is-visible {
  transform: translateX(0);
}
.slide-in-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  z-index: 2;
  transition: color 0.15s, border-color 0.15s;
}
.slide-in-close:hover {
  color: var(--color-dark);
  border-color: var(--color-dark);
}

/* ── Image-left layout (matches This Week entry-plate) ── */
.slide-in.has-image {
  width: 440px;
  display: grid;
  grid-template-columns: 170px 1fr;
}
.slide-in.has-image .slide-in-image {
  grid-row: 1 / -1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.12) saturate(0.85) contrast(1.02);
  border-right: 1px solid var(--color-card-border);
}

/* ── No-image (stacked) — kept for backward compat ── */
.slide-in:not(.has-image) .slide-in-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.slide-in-content {
  padding: 20px 22px 22px;
}
.slide-in-eyebrow {
  color: var(--color-primary);
  margin: 0 0 4px;
}
.slide-in-headline {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  color: var(--color-dark);
  margin: 0 0 8px;
}
.slide-in-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-dark);
  margin: 0 0 16px;
}
.slide-in-btn {
  display: inline-block;
  font-size: 13px;
  padding: 8px 20px;
}

/* Mobile: bottom banner */
@media (max-width: 640px) {
  .slide-in,
  .slide-in.has-image {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    display: grid;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: none;
    transform: translateY(100%);
  }
  .slide-in:not(.has-image) {
    grid-template-columns: 1fr;
  }
  .slide-in.has-image {
    grid-template-columns: 110px 1fr;
  }
  .slide-in.is-visible {
    transform: translateY(0);
  }
  .slide-in:not(.has-image) .slide-in-image {
    display: none;
  }
  .slide-in.has-image .slide-in-image {
    grid-row: 1 / -1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.12) saturate(0.85) contrast(1.02);
    border-right: 1px solid var(--color-card-border);
    border-radius: var(--radius) 0 0 0;
  }
  .slide-in-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    font-size: 15px;
  }
  .slide-in-content {
    padding: 12px 40px 14px 14px;
  }
  .slide-in-eyebrow {
    margin: 0 0 2px;
    font-size: 10px;
  }
  .slide-in-headline {
    font-size: 16px;
    margin: 0 0 8px;
  }
  .slide-in-body {
    font-size: 13px;
    margin: 0 0 10px;
  }
  .slide-in-btn {
    font-size: 12px;
    padding: 6px 16px;
  }
}

/* =============================================================
   Admin: Slide-in list
   ============================================================= */
.admin-slide-in-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.admin-slide-in-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-rule);
}
.admin-slide-in-item:first-child {
  border-top: 1px solid var(--color-rule);
}
.admin-slide-in-info {
  flex: 1 1 auto;
  min-width: 0;
}
.admin-slide-in-name {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-dark);
  margin: 0;
}
.admin-slide-in-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: #4a4440;
  margin: 4px 0 0;
}
.admin-slide-in-status {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.admin-slide-in-status.is-active { color: #4a8c5c; }
.admin-slide-in-status.is-inactive { color: #4a4440; }
.admin-slide-in-actions {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
}
.btn-danger { color: #b94a48; }
.btn-danger:hover { color: #943b3a; }

/* Checkbox field variant for admin forms */
.dashboard-form-field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.dashboard-form-field--checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}
.dashboard-form-field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: var(--color-white, #fff);
  color: var(--color-dark);
  resize: vertical;
  width: 100%;
}
.dashboard-form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(238, 125, 81, 0.12);
}

@media (max-width: 640px) {
  .admin-slide-in-item { flex-direction: column; align-items: flex-start; }
  .admin-slide-in-actions { width: 100%; }
}

/* Image upload widget for admin forms */
.slide-in-image-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.slide-in-image-preview {
  position: relative;
  display: inline-block;
  max-width: 280px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--color-rule);
}
.slide-in-image-preview img {
  display: block;
  width: 100%;
  height: auto;
}
.slide-in-image-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
}
.slide-in-image-remove:hover {
  color: #b94a48;
  border-color: #b94a48;
}
.slide-in-image-picker {
  display: flex;
  align-items: center;
  gap: 12px;
}
.slide-in-image-uploading {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  font-style: italic;
}

/* Fix: hidden attribute must override display:flex on form fields */
.dashboard-form-field[hidden],
[data-tag-field][hidden],
[data-trigger-value-field][hidden] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   Liturgical Calendar Theme
   Members-only church-year color system. Each lc-* class on <body>
   shifts the hero overlay, article header, and accent glow to the
   season's color. Muted, editorial-grade hues — dark enough for
   white text, warm enough to sit beside the MO brand palette.
   ═══════════════════════════════════════════════════════════════ */

/* ── Season palettes ─────────────────────────────────────────── */
body.lc-advent {
  --lc-bg: #1c2538;
  --lc-hero-top: rgba(28, 37, 56, 0.70);
  --lc-hero-bot: rgb(28, 37, 56);
  --lc-accent-hero: rgba(70, 110, 180, 0.28);
  --lc-accent-article: rgba(70, 110, 180, 0.22);
  --lc-dot: #6e8fbe;
}
body.lc-christmas {
  --lc-bg: #1c2e1e;
  --lc-hero-top: rgba(28, 46, 30, 0.70);
  --lc-hero-bot: rgb(28, 46, 30);
  --lc-accent-hero: rgba(180, 45, 40, 0.55);
  --lc-accent-article: rgba(180, 45, 40, 0.40);
  --lc-dot: #c44040;
}
body.lc-epiphany {
  --lc-bg: #352c18;
  --lc-hero-top: rgba(53, 44, 24, 0.70);
  --lc-hero-bot: rgb(53, 44, 24);
  --lc-accent-hero: rgba(195, 160, 55, 0.30);
  --lc-accent-article: rgba(195, 160, 55, 0.22);
  --lc-dot: #c4a037;
}
body.lc-lent {
  --lc-bg: #282030;
  --lc-hero-top: rgba(40, 32, 48, 0.70);
  --lc-hero-bot: rgb(40, 32, 48);
  --lc-accent-hero: rgba(115, 80, 150, 0.24);
  --lc-accent-article: rgba(115, 80, 150, 0.18);
  --lc-dot: #8a5cb0;
}
body.lc-easter {
  --lc-bg: #322a1a;
  --lc-hero-top: rgba(50, 42, 26, 0.70);
  --lc-hero-bot: rgb(50, 42, 26);
  --lc-accent-hero: rgba(220, 195, 100, 0.55);
  --lc-accent-article: rgba(220, 195, 100, 0.40);
  --lc-dot: #d4b84e;
}
body.lc-pentecost {
  --lc-bg: #351c1e;
  --lc-hero-top: rgba(53, 28, 30, 0.70);
  --lc-hero-bot: rgb(53, 28, 30);
  --lc-accent-hero: rgba(170, 58, 62, 0.28);
  --lc-accent-article: rgba(170, 58, 62, 0.22);
  --lc-dot: #c43e42;
}
body.lc-ordinary {
  --lc-bg: #1e2a20;
  --lc-hero-top: rgba(30, 42, 32, 0.70);
  --lc-hero-bot: rgb(30, 42, 32);
  --lc-accent-hero: rgba(80, 138, 85, 0.25);
  --lc-accent-article: rgba(80, 138, 85, 0.20);
  --lc-dot: #5d9a62;
}

/* ── Hero overlay (homepage, dashboard, about, etc.) ─────────── */
body[class*="lc-"] .hero {
  background:
    linear-gradient(to bottom, var(--lc-hero-top) 0%, var(--lc-hero-bot) 50%),
    url("../images/mo-header-bg.jpg") center/cover no-repeat,
    var(--lc-bg);
}
body[class*="lc-"] .hero::before {
  background: radial-gradient(circle, var(--lc-accent-hero), transparent 65%);
}

/* Christmas: radial red glow from top-right corner */
body.lc-christmas .hero::before {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at top right,
    rgba(180, 40, 35, 0.70) 0%,
    rgba(180, 40, 35, 0.40) 30%,
    rgba(50, 90, 50, 0.15) 55%,
    transparent 75%);
}

/* Easter: radial white/gold glow from top-right corner */
body.lc-easter .hero::before {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at top right,
    rgba(255, 250, 230, 0.55) 0%,
    rgba(235, 210, 120, 0.40) 30%,
    rgba(220, 195, 100, 0.15) 55%,
    transparent 75%);
}

/* Advent: blue glow fading into dark */
body.lc-advent .hero::before {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at top right,
    rgba(40, 70, 150, 0.80) 0%,
    rgba(35, 60, 130, 0.50) 30%,
    rgba(25, 40, 85, 0.22) 55%,
    transparent 75%);
}

/* Epiphany: full gold glow from top-right */
body.lc-epiphany .hero::before {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at top right,
    rgba(210, 175, 60, 0.70) 0%,
    rgba(195, 160, 55, 0.45) 30%,
    rgba(180, 145, 45, 0.18) 55%,
    transparent 75%);
}

/* Lent: purple glow fading into dark */
body.lc-lent .hero::before {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at top right,
    rgba(140, 85, 180, 0.80) 0%,
    rgba(120, 75, 160, 0.50) 30%,
    rgba(70, 45, 100, 0.22) 55%,
    transparent 75%);
}

/* Pentecost: red and white glow from top-right */
body.lc-pentecost .hero::before {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at top right,
    rgba(255, 240, 235, 0.45) 0%,
    rgba(190, 55, 55, 0.55) 25%,
    rgba(170, 50, 50, 0.20) 55%,
    transparent 75%);
}

/* Ordinary Time: green and white glow from top-right */
body.lc-ordinary .hero::before {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at top right,
    rgba(245, 255, 245, 0.40) 0%,
    rgba(80, 150, 85, 0.50) 25%,
    rgba(70, 130, 75, 0.18) 55%,
    transparent 75%);
}

/* ── Article header (full background swap) ───────────────────── */
body[class*="lc-"] .article-header {
  background: var(--lc-bg);
}
body[class*="lc-"] .article-header::before {
  background: radial-gradient(ellipse, var(--lc-accent-article), transparent 65%);
}


/* ── Dashboard liturgical settings module ────────────────────── */
.liturgical-settings-desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0 0 20px;
}
.liturgical-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.liturgical-preview-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.liturgical-preview-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--color-muted);
}
.lc-swatch-advent { background: #6e8fbe; }
.lc-swatch-christmas { background: #c44040; }
.lc-swatch-epiphany { background: #c4a037; }
.lc-swatch-lent { background: #8a5cb0; }
.lc-swatch-easter { background: #d4b84e; }
.lc-swatch-pentecost { background: #c43e42; }
.lc-swatch-ordinary { background: #5d9a62; }

/* Rail-positioned select for the liturgical theme picker */
.dashboard-rail-select {
  display: block;
  margin: 0;
}
.dashboard-rail-select select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 12px;
  padding: 5px 24px 5px 8px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 3px;
  background: var(--color-white, #fff);
  color: var(--color-dark);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232d2927' opacity='.45'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.dashboard-rail-select select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(238, 125, 81, 0.1);
}
.dashboard-rail .liturgical-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.dashboard-rail .liturgical-preview-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dashboard-rail .liturgical-preview-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
}

/* ── Dashboard Prayer (Daily Office) ─────────────────────────── */
.dashboard-prayer-hero { text-align: center; }

.prayer-office-toggle {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}
.prayer-office-btn {
  font-family: var(--font-display);
  font-size: 15px;
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s;
}
.prayer-office-btn.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.prayer-office-btn:hover:not(.is-active) {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
}

.prayer-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-card-border);
}
.prayer-lang-toggle {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  background: none;
  border: 1px solid var(--color-card-border);
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.prayer-lang-toggle:hover {
  color: var(--color-dark);
  border-color: var(--color-dark);
}
.prayer-lang-toggle[aria-pressed="false"] {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.prayer-source-link {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  text-decoration: none;
}
.prayer-source-link:hover { color: var(--color-secondary); }

/* Section collapsibles */
.prayer-section {
  border-bottom: 1px solid var(--color-card-border);
}
.prayer-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}
.prayer-section-summary::-webkit-details-marker { display: none; }
.prayer-section-summary::marker { display: none; content: ""; }
.prayer-section-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  color: var(--color-dark);
}
.prayer-section-subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  color: var(--color-muted);
  margin-top: 2px;
}
.prayer-section-chev {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--color-muted);
  border-bottom: 1.5px solid var(--color-muted);
  transform: rotate(45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 16px;
}
.prayer-section[open] > .prayer-section-summary .prayer-section-chev {
  transform: rotate(-135deg);
}

/* Prayer text */
.prayer-section-body {
  padding: 0 0 24px;
}
.prayer-section-body p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-dark);
  margin: 0 0 12px;
}
.prayer-section-body p:last-child { margin-bottom: 0; }

/* Versicle / Response styling */
.prayer-versicle {
  color: var(--color-muted) !important;
  font-style: italic;
}
.prayer-response {
  margin-left: 24px !important;
}

/* Canticle verse lines */
.prayer-verse {
  padding-left: 20px;
  text-indent: -20px;
}

/* Loading / error */
.prayer-loading,
.prayer-error {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-muted);
  text-align: center;
  padding: 48px 0;
}
.prayer-error a { color: var(--color-secondary); }

/* Back link */
.prayer-back {
  padding: 32px 0;
  text-align: center;
}
.prayer-back a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  text-decoration: none;
}
.prayer-back a:hover { color: var(--color-secondary); }

/* Mobile */
@media (max-width: 640px) {
  .prayer-office-toggle { flex-direction: column; align-items: center; }
  .prayer-office-btn { width: 200px; }
  .prayer-controls { flex-direction: column; gap: 12px; align-items: flex-start; }
  .prayer-section-title { font-size: 16px; }
  .prayer-section-body p { font-size: 15px; }
}

/* ── Faith Gate (password overlay) ────────────────────────────── */
.faith-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  background: rgba(30, 25, 20, 0.55);
}
.faith-gate-card {
  max-width: 440px;
  padding: 48px 40px;
  text-align: center;
}
.faith-gate-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: #fff;
  margin: 0 0 12px;
}
.faith-gate-sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 32px;
}
.faith-gate-form {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.faith-gate-input {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  width: 200px;
  outline: none;
  transition: border-color 0.15s;
}
.faith-gate-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.faith-gate-input:focus { border-color: var(--color-primary); }
.faith-gate-btn {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s;
}
.faith-gate-btn:hover { opacity: 0.85; }
.faith-gate-error {
  font-family: var(--font-body);
  font-size: 13px;
  color: #e57373;
  margin: 16px 0 0;
}
@keyframes faith-gate-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.faith-gate--shake .faith-gate-card {
  animation: faith-gate-shake 0.35s ease;
}

/* --- /privacy/ --------------------------------------------------------- */
.privacy-hero {
  padding: 72px 0 32px;
  text-align: center;
}
.privacy-hero .container { max-width: 760px; }
.privacy-hero .hero-kicker { justify-content: center; }
.privacy-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.04;
  color: var(--color-white);
  margin: 14px 0 18px;
}
.privacy-headline em { font-style: italic; }
.privacy-sub {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.privacy-body {
  padding: 56px 0 96px;
}
.privacy-body p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-dark);
  margin: 0 0 20px;
}
.privacy-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-dark);
  margin: 0 0 24px;
}
.privacy-subheading {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 8px;
}
.privacy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.privacy-list li {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-dark);
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.privacy-list li::before {
  content: "\B6";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: 13px;
  top: 2px;
}
.privacy-pilcrow {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--color-dark);
  line-height: 1;
}
.privacy-entity {
  font-size: 14px;
  color: var(--color-muted);
  margin-top: 32px;
}

/* ── Bookstore (/bookstore/) ─────────────────────────────────── */
.bookstore-page { padding-bottom: 80px; }
.bookstore-hero .hero-sub a { color: var(--color-primary); text-decoration: underline; }

/* Hero override — show more of the background image on the
   bookstore page. Lighter gradient, image pulled slightly down. */
.bookstore-hero {
  background:
    linear-gradient(to bottom, rgba(45, 41, 39, 0.72) 0%, rgba(45, 41, 39, 1) 65%),
    url("../images/mo-header-bg.jpg") center 30% / cover no-repeat,
    var(--color-dark);
}
.bookstore-body { padding-top: 64px; }

/* Collapsible sections via <details>/<summary> */
details.bookstore-section { margin-bottom: 56px; }
details.bookstore-section > summary { list-style: none; cursor: pointer; }
details.bookstore-section > summary::-webkit-details-marker { display: none; }
details.bookstore-section > summary::marker { display: none; content: ""; }
.bookstore-section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
/* Chevron toggle indicator */
.bookstore-section-header::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 16px;
}
details.bookstore-section[open] > .bookstore-section-header::after {
  transform: rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
  .bookstore-section-header::after { transition: none; }
}
.bookstore-section-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-dark);
  margin: 0;
}
.bookstore-view-all {
  display: block;
  text-align: center;
  margin-top: 28px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  white-space: nowrap;
}
.bookstore-view-all:hover { text-decoration: underline; }

.bookstore-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.bookstore-book {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-top: 1px solid var(--color-card-border);
  transition: border-color 0.15s;
}
.bookstore-book:hover { border-color: var(--color-dark); }
.bookstore-cover {
  width: 100%;
  max-width: 160px;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  margin-bottom: 14px;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.bookstore-book-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  color: var(--color-dark);
  line-height: 1.35;
  margin-bottom: 6px;
}
.bookstore-book-author {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: auto;
}
.bookstore-book-price {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-primary);
  margin-top: 12px;
}
@media (max-width: 980px) {
  .bookstore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bookstore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bookstore-view-all { font-size: 14px; padding: 13px 0; }
  .bookstore-book-author { font-size: 14px; }
  .bookstore-book-price { font-size: 14px; }
  details.bookstore-section { margin-bottom: 40px; }
}

/* ── Offer page (/offer/) ── */
.offer-flag {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  padding: 6px 14px !important;
  border-radius: 20px;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  left: 50% !important;
  transform: translateX(-50%);
  top: -14px !important;
  white-space: nowrap;
}
.offer-flag::after { display: none !important; }
.price-original {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-muted);
  text-decoration: line-through;
  margin-right: 8px;
  line-height: 1;
  align-self: center;
}
.offer-price { color: var(--color-primary) !important; }
@media (max-width: 640px) {
  .price-original { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   /bible/ — Scripture reader
   ─── Hero, controls rail, chapter typography, cross-references
   ─── Matches TFR editorial vocabulary: dark hero, hairline
   ─── dividers, italic display headings, cream-on-dark.
   ═══════════════════════════════════════════════════════════════ */

.bible { background: var(--color-page); }

/* ── Hero ───────────────────────────────────────────────────── */
.bible-hero { padding: 96px 0 72px; text-align: center; }
.bible-hero .container { max-width: 760px; }
.bible-hero .hero-kicker { justify-content: center; }
.bible-hero .hero-headline {
  font-size: clamp(40px, 5vw, 60px);
  margin-bottom: 20px;
}
.bible-hero .hero-sub {
  max-width: 580px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
}
.bible-hero .hero-sub a { color: var(--color-primary); text-decoration: none; border-bottom: 1px solid rgba(238,125,81,0.4); }
.bible-hero .hero-sub a:hover { color: var(--color-white); border-bottom-color: var(--color-white); }

/* ── Controls rail ──────────────────────────────────────────── */
.bible-controls {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-page);
  border-bottom: 1px solid var(--color-rule);
}
.bible-controls-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  padding: 18px 28px;
  justify-content: center;
}
.bible-control {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bible-control-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
}
.bible-control select {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-dark);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-card-border);
  padding: 4px 18px 4px 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
                    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  min-width: 0;
  cursor: pointer;
}
.bible-control select:focus { outline: none; border-bottom-color: var(--color-primary); }
.bible-control select:disabled { color: var(--color-muted); cursor: not-allowed; }
.bible-control--chapter select { min-width: 64px; text-align: center; }
.bible-controls-nav { display: inline-flex; gap: 6px; align-self: stretch; align-items: flex-end; }
.bible-nav-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-card-border);
  background: transparent;
  border-radius: 999px;
  color: var(--color-dark);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bible-nav-btn:hover:not(:disabled) { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.bible-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Reading body ───────────────────────────────────────────── */
.bible-body { padding: 56px 0 96px; }
.bible-status {
  text-align: center;
  color: var(--color-muted);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 64px 0;
}
.bible-status.is-error { color: var(--color-secondary); text-transform: none; letter-spacing: 0; font-size: 15px; }

.bible-chapter { max-width: 720px; margin: 0 auto; }
.bible-chapter-header { text-align: center; margin: 0 0 36px; }
.bible-chapter-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 8px;
}
.bible-chapter-heading {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  color: var(--color-dark);
  margin: 0;
}
.bible-chapter-heading em { font-style: italic; }

/* Chapter content. api.bible returns HTML with their own classes
   (`p` paragraph, `v` verse-number span, `s1` section heading, etc.).
   Style their classes directly rather than transforming the markup. */
.bible-chapter-content { font-family: var(--font-body); font-size: 19px; line-height: 1.85; color: var(--color-dark); }
.bible-chapter-content p { margin: 0 0 1.1em; }
.bible-chapter-content p.p,
.bible-chapter-content p.m,
.bible-chapter-content p.pmo,
.bible-chapter-content p.q,
.bible-chapter-content p.q1,
.bible-chapter-content p.q2,
.bible-chapter-content p.qr { margin: 0 0 1.1em; }
.bible-chapter-content p.q,
.bible-chapter-content p.q1 { margin-left: 1.5em; text-indent: -0.75em; }
.bible-chapter-content p.q2 { margin-left: 3em; text-indent: -0.75em; }
.bible-chapter-content p.qc { text-align: center; margin: 0.6em 0; font-style: italic; }
.bible-chapter-content .s1,
.bible-chapter-content .s2,
.bible-chapter-content h2.s1,
.bible-chapter-content h3.s1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--color-dark);
  margin: 1.8em 0 0.6em;
  font-weight: 400;
}
.bible-chapter-content .v {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  vertical-align: super;
  letter-spacing: 0.04em;
  margin-right: 4px;
  padding: 0;
}
.bible-chapter-content .add { font-style: italic; color: var(--color-muted); }
.bible-chapter-content .wj { color: var(--color-secondary); }
.bible-chapter-content .nd { font-variant: small-caps; letter-spacing: 0.04em; }

/* ── Cross-references panel ─────────────────────────────────── */
.bible-cross-refs {
  max-width: 720px;
  margin: 64px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--color-rule);
}
.bible-cross-refs-details summary { list-style: none; cursor: pointer; }
.bible-cross-refs-details summary::-webkit-details-marker { display: none; }
.bible-cross-refs-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 20px;
}
.bible-cross-refs-summary .eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
}
.bible-cross-refs-count {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}
.bible-cross-refs-list { list-style: none; padding: 0; margin: 0; }
.bible-cross-ref { margin: 0; }
.bible-cross-ref + .bible-cross-ref { border-top: 1px solid var(--color-rule); }
.bible-cross-ref-link {
  display: block;
  padding: 18px 0;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s;
}
.bible-cross-ref-link:hover { background: rgba(238,125,81,0.04); text-decoration: none; }
.bible-cross-ref-source {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 4px;
}
.bible-cross-ref-title {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-dark);
  line-height: 1.25;
  margin: 0 0 6px;
}
.bible-cross-ref-title em { font-style: italic; }
.bible-cross-ref-excerpt {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Translation attribution ────────────────────────────────── */
.bible-attribution {
  max-width: 720px;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.6;
  text-align: center;
}
.bible-attribution em { font-style: italic; color: var(--color-dark); }
.bible-attribution-sep { margin: 0 8px; color: var(--color-card-border); }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .bible-hero { padding: 72px 0 48px; }
  .bible-controls-inner { padding: 14px 20px; gap: 12px; }
  .bible-control-label { font-size: 9px; letter-spacing: 0.18em; }
  .bible-control select { font-size: 13px; }
  .bible-controls-nav { width: 100%; justify-content: center; }
  .bible-chapter-content { font-size: 18px; line-height: 1.8; }
}

/* ═══════════════════════════════════════════════════════════════
   /admin/coverage/ — Coverage Scan dashboard
   ─── Editorial radar across 16 peer publications.
   ─── Visual vocabulary: hairlines + numeral eyebrows, no cards
   ─── chrome. Match the existing admin pages.
   ═══════════════════════════════════════════════════════════════ */

.admin-coverage .admin-body { padding: 48px 0 96px; }

.coverage-app { max-width: 1180px; margin: 0 auto; }

/* ── Toolbar ────────────────────────────────────────────────── */
.coverage-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: 24px;
}
.coverage-toolbar-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-right: auto;
}
.coverage-toolbar-meta .eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
}
.coverage-toolbar-time {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-dark);
  font-variant-numeric: tabular-nums;
}
.coverage-scan-btn:disabled { opacity: 0.6; cursor: progress; }

/* ── Status + empty states ──────────────────────────────────── */
.coverage-status {
  padding: 14px 18px;
  background: rgba(238,125,81,0.06);
  border: 1px solid rgba(238,125,81,0.18);
  border-radius: 6px;
  color: var(--color-dark);
  font-size: 14px;
  margin: 0 0 24px;
}
.coverage-status.is-error {
  background: rgba(192,72,46,0.06);
  border-color: rgba(192,72,46,0.25);
  color: var(--color-secondary);
}
.coverage-empty {
  padding: 64px 32px;
  text-align: center;
  border: 1px dashed var(--color-rule);
  border-radius: 8px;
}
.coverage-empty .eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
}
.coverage-empty-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 40px);
  margin: 8px 0 16px;
  color: var(--color-dark);
}
.coverage-empty-body {
  font-family: var(--font-body);
  color: var(--color-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Radar block: date + stat tiles ─────────────────────────── */
.coverage-radar {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  margin: 0 0 48px;
}
.coverage-radar-head .eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
}
.coverage-radar-date {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 44px);
  margin: 8px 0 12px;
  color: var(--color-dark);
  line-height: 1.05;
}
.coverage-radar-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
}
.coverage-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.coverage-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  text-align: center;
}
.coverage-stat-n {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--color-dark);
  font-weight: 400;
  line-height: 1;
}
.coverage-stat-l {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
  margin-top: 8px;
}

/* ── Sections ───────────────────────────────────────────────── */
.coverage-section { padding: 0 0 48px; }
.coverage-section + .coverage-section {
  padding-top: 48px;
  border-top: 1px solid var(--color-rule);
}
.coverage-section-head { margin: 0 0 28px; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; }
.coverage-section-numeral {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  margin: 6px 0 0;
  grid-row: span 2;
}
.coverage-section-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 32px);
  margin: 0;
  color: var(--color-dark);
  line-height: 1.15;
}
.coverage-section-title em { font-style: italic; }
.coverage-section-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  margin: 6px 0 0;
}

/* ── Headlines grid ─────────────────────────────────────────── */
.coverage-headlines-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.coverage-headlines-card {
  padding: 20px 24px 24px;
  border-top: 1px solid var(--color-rule);
  border-left: 1px solid var(--color-rule);
}
.coverage-headlines-card:nth-child(3n+1) { border-left: 0; }
.coverage-headlines-card:nth-child(-n+3) { border-top: 0; padding-top: 4px; }
.coverage-headlines-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
}
.coverage-headlines-name {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-dark);
}
.coverage-headlines-count {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.coverage-headlines-list { list-style: none; padding: 0; margin: 0; }
.coverage-headlines-item {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 8px;
}
.coverage-headlines-item a {
  color: var(--color-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.coverage-headlines-item a:hover { color: var(--color-secondary); border-bottom-color: var(--color-card-border); }
.coverage-headlines-author {
  display: block;
  font-size: 12px;
  font-style: italic;
  color: var(--color-muted);
  margin-top: 1px;
}
.coverage-headlines-error {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-secondary);
  margin: 12px 0 0;
  font-style: italic;
}

/* ── Contested + Gaps blocks ────────────────────────────────── */
.coverage-blocks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.coverage-block {
  padding: 20px 22px;
  border: 1px solid var(--color-rule);
  border-radius: 8px;
}
.coverage-block-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 8px;
}
.coverage-blocks--contested .coverage-block-eyebrow { color: #d93f6b; }
.coverage-blocks--contested .coverage-block-eyebrow::before { content: "●  "; }
.coverage-blocks--gaps .coverage-block-eyebrow { color: #e08a2c; }
.coverage-blocks--gaps .coverage-block-eyebrow::before { content: "●  "; }
.coverage-block-title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-dark);
  line-height: 1.3;
}
.coverage-block-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0;
}

/* ── Pitches ────────────────────────────────────────────────── */
.coverage-pitches {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  counter-reset: pitch;
}
.coverage-pitch {
  padding: 20px 22px;
  border: 1px solid var(--color-rule);
  border-radius: 8px;
}
.coverage-pitch-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
}
.coverage-pitch-numeral {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.coverage-pitch-copy {
  background: transparent;
  border: 1px solid var(--color-rule);
  color: var(--color-muted);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}
.coverage-pitch-copy:hover { color: var(--color-primary); border-color: var(--color-primary); }
.coverage-pitch-copy.is-copied { color: var(--color-white); background: var(--color-primary); border-color: var(--color-primary); }
.coverage-pitch-title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--color-dark);
  line-height: 1.3;
}
.coverage-pitch-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0;
}
.coverage-copy-all {
  background: transparent;
  border: 1px solid var(--color-rule);
  color: var(--color-muted);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 12px;
  transition: all 0.15s;
}
.coverage-copy-all:hover { color: var(--color-primary); border-color: var(--color-primary); }
.coverage-copy-all.is-copied { color: var(--color-white); background: var(--color-primary); border-color: var(--color-primary); }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .coverage-radar { grid-template-columns: 1fr; gap: 24px; }
  .coverage-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .coverage-headlines-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage-headlines-card:nth-child(3n+1) { border-left: 1px solid var(--color-rule); }
  .coverage-headlines-card:nth-child(2n+1) { border-left: 0; }
  .coverage-headlines-card:nth-child(-n+3) { border-top: 1px solid var(--color-rule); padding-top: 20px; }
  .coverage-headlines-card:nth-child(-n+2) { border-top: 0; padding-top: 4px; }
  .coverage-blocks { grid-template-columns: 1fr; }
  .coverage-pitches { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .coverage-stats { grid-template-columns: repeat(3, 1fr); }
  .coverage-headlines-grid { grid-template-columns: 1fr; }
  .coverage-headlines-card { border-left: 0 !important; padding: 18px 4px; }
  .coverage-headlines-card:nth-child(-n+3),
  .coverage-headlines-card:nth-child(-n+2) { border-top: 1px solid var(--color-rule); padding-top: 18px; }
  .coverage-headlines-card:first-child { border-top: 0; padding-top: 4px; }
}


/* =============================================================
   Admin workspace shell — sidebar + topbar layout.
   Replaces the hero-based admin layout with an app-like workspace.
   ============================================================= */

/* Hide site chrome on admin pages. */
body[class*="page-template-custom-admin"] .site-header,
body[class*="page-template-custom-admin"] .site-footer,
body.page-template-custom-digest-gen .site-header,
body.page-template-custom-digest-gen .site-footer,
body:has(.admin-workspace) .site-header,
body:has(.admin-workspace) .site-footer {
  display: none !important;
}
html:has(.admin-workspace),
body[class*="page-template-custom-admin"],
body.page-template-custom-digest-gen,
body:has(.admin-workspace) {
  padding: 0 !important;
  margin: 0 !important;
  background: var(--color-page) !important;
  height: 100vh;
  overflow: hidden;
}
body:has(.admin-workspace) > *:not(.admin-workspace):not(.au-modal-overlay) {
  display: none !important;
}
.admin-workspace {
  min-height: 100vh;
  flex: 1;
}

/* Digest toolbar: allow wrapping inside the workspace. */
.admin-workspace [data-mo-topbar] {
  flex-wrap: wrap !important;
  gap: 10px 20px !important;
}
.admin-workspace [data-mo-topbar-spacer] {
  display: none !important;
}
.admin-workspace [data-mo-topbar-brand] {
  flex: 1 1 100%;
  border-bottom: 1px solid #d8c4a3;
  padding-bottom: 10px;
  margin-bottom: 2px;
}
.admin-workspace [data-mo-topbar-group] {
  flex-wrap: wrap;
}
.admin-workspace [data-mo-topbar-divider] {
  display: none !important;
}

/* Workspace container: sidebar + main. */
.admin-workspace {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--color-page);
}

/* ---- Sidebar ---- */
.ws-sidebar {
  width: 240px;
  min-width: 240px;
  height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
  background: #1d1b18;
  color: rgba(255, 255, 255, 0.72);
  z-index: 100;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.ws-sidebar-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.ws-sidebar-head {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ws-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  text-decoration: none;
  transition: color 0.15s;
}
.ws-sidebar-brand:hover { text-decoration: none; }
.ws-sidebar-brand--primary {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ws-sidebar-brand--primary:hover { color: #fff; }
.ws-sidebar-brand--primary .ws-sidebar-icon { opacity: 1; width: 18px; height: 18px; }
.ws-sidebar-brand--secondary {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.ws-sidebar-brand--secondary:hover { color: rgba(255, 255, 255, 0.8); }
.ws-sidebar-logo { width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0; }
.ws-sidebar-brand--secondary:hover .ws-sidebar-logo { opacity: 1; }

.ws-sidebar-nav {
  flex: 1;
  min-height: 0;
  padding: 12px 0;
  overflow-y: auto;
}

.ws-sidebar-section { padding: 8px 0; }
.ws-sidebar-section--muted { opacity: 0.5; }
.ws-sidebar-section.is-collapsed .ws-sidebar-list { display: none; }
.ws-sidebar-section.is-collapsed .ws-sidebar-caret { transform: rotate(-90deg); }

.ws-sidebar-label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  padding: 8px 20px 4px;
  margin: 0;
  transition: color 0.12s;
}
.ws-sidebar-label:hover { color: rgba(255, 255, 255, 0.6); }
.ws-sidebar-caret {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.15s;
}
.ws-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ws-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 20px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  cursor: pointer;
}
.ws-sidebar-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
  border-left-color: rgba(255, 255, 255, 0.3);
}
.ws-sidebar-link.is-active {
  color: #fff;
  background: rgba(238, 125, 81, 0.12);
  border-left-color: var(--color-primary);
  font-weight: 600;
}
.ws-sidebar-link--disabled {
  opacity: 0.5;
  cursor: default;
}
.ws-sidebar-link--disabled:hover {
  color: rgba(255, 255, 255, 0.68);
  background: transparent;
}
.ws-sidebar-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.65;
}
.ws-sidebar-link.is-active .ws-sidebar-icon { opacity: 1; }

.ws-sidebar-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-primary);
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
}

.ws-sidebar-foot {
  flex-shrink: 0;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ws-sidebar-foot-text {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  margin: 0;
}

/* ---- Main content area ---- */
.admin-main {
  flex: 1;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Topbar replaces the dark hero. */
.admin-topbar {
  padding: 24px 32px 20px;
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-page);
  position: sticky;
  top: 0;
  z-index: 50;
}
.admin-topbar-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-dark);
  margin: 0;
}
.admin-topbar-title em { font-style: normal; }
.admin-topbar-sub {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 4px 0 0;
}

/* Workspace overrides for admin-body. */
.admin-workspace .admin-body {
  padding: 32px 0 64px;
  flex: 1;
}
.admin-workspace .admin-body > .container {
  max-width: 1200px;
}

/* Hide old admin-hero and admin-nav inside workspace. */
.admin-workspace .admin-hero { display: none; }
.admin-workspace .admin-nav { display: none; }

/* Members sidebar within workspace. */
.admin-workspace .admin-members-layout {
  grid-template-columns: 180px 1fr;
}

/* ---- Settings page ---- */
.settings-section {
  background: var(--color-page);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  padding: 28px 32px 32px;
}
.settings-section + .settings-section {
  margin-top: 32px;
}
.settings-section-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 4px;
  color: var(--color-dark);
}
.settings-section-title em { font-style: normal; }
.settings-section-desc {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0 0 24px;
  line-height: 1.5;
}
.settings-group {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-rule);
}
.settings-group:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.settings-group-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 16px;
}
.settings-group-desc {
  font-size: 13px;
  color: var(--color-muted);
  margin: -4px 0 16px;
  line-height: 1.5;
}
.settings-subgroup-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin: 20px 0 8px;
}
.settings-subgroup-title:first-of-type {
  margin-top: 0;
}
.settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}
@media (max-width: 640px) {
  .settings-row {
    grid-template-columns: 1fr;
  }
}
.settings-field--half {
  /* grid handles layout */
}
.settings-field {
  display: block;
  margin-bottom: 14px;
}
.settings-field:last-child { margin-bottom: 0; }
.settings-field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 6px;
}
.settings-field-hint {
  display: block;
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 4px;
}
.settings-input,
.settings-select {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: #fff;
  color: var(--color-dark);
  outline: none;
  transition: border-color 0.15s;
}
.settings-input:focus,
.settings-select:focus {
  border-color: var(--color-primary);
}
.settings-input--short { max-width: 160px; }
.settings-select { cursor: pointer; }
.settings-actions {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.settings-actions--top { margin-top: 0; margin-bottom: 16px; }
.settings-status {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
}
.settings-status.is-error { color: #b94a48; }

/* ---- Admin Users list ---- */
.au-list { margin-top: 8px; }
.au-empty {
  font-size: 14px;
  color: var(--color-muted);
  font-style: italic;
  margin: 0;
  padding: 16px 0;
}
.au-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--color-rule);
}
.au-row:first-of-type { border-top: 0; }
.au-row-info { flex: 1; min-width: 0; }
.au-row-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
}
.au-row-email {
  display: block;
  font-size: 13px;
  color: var(--color-muted);
}
.au-row-meta {
  flex-shrink: 0;
}
.au-row-count {
  font-size: 12px;
  color: var(--color-muted);
  background: rgba(45, 41, 39, 0.06);
  padding: 3px 10px;
  border-radius: 12px;
}
.au-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.au-row-btn {
  background: none;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--color-muted);
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
}
.au-row-btn:hover {
  color: var(--color-dark);
  border-color: var(--color-dark);
}
.au-row-btn--danger:hover {
  color: #b94a48;
  border-color: #b94a48;
}

/* ---- Admin Users modal ---- */
.au-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 41, 39, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body:has(.au-modal-overlay) {
  overflow: hidden;
}
.au-modal {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  touch-action: pan-y;
}
.au-modal--narrow { max-width: 400px; }
.au-modal-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 20px;
  color: var(--color-dark);
}
.au-modal-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0 0 20px;
}
.au-modal-fields {
  margin-bottom: 20px;
}
.au-modal-fields .settings-field { margin-bottom: 12px; }
.au-modal-fields input[readonly] {
  background: var(--color-page);
  color: var(--color-muted);
  cursor: not-allowed;
}
.au-modal-perms {
  margin-bottom: 24px;
}
.au-modal-perms-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0 0 8px;
}
.au-modal-select-all {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.au-link-btn {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--color-primary);
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
}
.au-link-btn:hover { color: var(--color-secondary); text-decoration: underline; }
.au-modal-group {
  margin-bottom: 16px;
}
.au-modal-group:last-child { margin-bottom: 0; }
.au-modal-group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 8px;
}
.au-modal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 14px;
  color: var(--color-dark);
  cursor: pointer;
}
.au-modal-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.au-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.au-modal-status {
  font-size: 13px;
  color: #b94a48;
  margin: 12px 0 0;
}

/* Access denied (for permission-blocked pages) */
.admin-denied-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 24px;
  text-align: center;
}
.admin-denied-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 12px;
  color: var(--color-dark);
}
.admin-denied-text {
  font-size: 15px;
  color: var(--color-muted);
  margin: 0 0 24px;
  max-width: 400px;
}

@media (max-width: 640px) {
  .settings-section { padding: 20px 16px 24px; }
  .au-row { flex-wrap: wrap; }
  .au-modal { padding: 24px 20px; }
}

/* ---- Landing page (overview) ---- */
.ws-landing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.ws-landing-card {
  background: var(--color-page);
  padding: 24px;
  text-decoration: none;
  color: var(--color-dark);
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--color-rule);
  margin-top: -1px;
  margin-left: -1px;
}
.ws-landing-card:hover {
  background: #fff;
  text-decoration: none;
}
.ws-landing-card-icon {
  width: 20px;
  height: 20px;
  color: var(--color-muted);
}
.ws-landing-card-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.ws-landing-card-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-muted);
  margin: 0;
}
.ws-landing-card--disabled {
  opacity: 0.45;
  cursor: default;
}
.ws-landing-card--disabled:hover { background: var(--color-page); }

.ws-landing-section {
  margin-top: 40px;
}
.ws-landing-section-title {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 12px;
}

/* ---- Content Calendar ---- */
.cc-sync {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  vertical-align: middle;
  margin-left: 6px;
}
.cc-sync--idle { color: var(--color-mid); }
.cc-sync--saving { color: #e67e22; }
.cc-sync--saved { color: #27ae60; }
.cc-sync--error { color: #c1593c; }
.cc-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - 180px);
}
.cc-sidebar {
  background: var(--color-page);
  border-right: 1px solid var(--color-rule);
  display: flex;
  flex-direction: column;
}
.cc-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 0 0;
}
.cc-sidebar-section {
  flex: 1;
  overflow-y: auto;
}
.cc-sidebar-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  margin-bottom: 12px;
}
.cc-sidebar-section-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cc-sidebar-action {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-sidebar-action:hover { color: var(--color-dark); background: var(--color-card-border); }

.cc-sidebar-group-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.cc-sidebar-group-toggle:hover { background: var(--color-card-border); }
.cc-sidebar-caret {
  color: var(--color-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.is-collapsed .cc-sidebar-caret { transform: rotate(-90deg); }
.cc-sidebar-group-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cc-sidebar-group-count {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-muted);
  margin-left: auto;
}
.is-collapsed .cc-sidebar-list { display: none; }
.cc-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.cc-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 16px 7px 32px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-dark);
  text-align: left;
}
.cc-sidebar-item:hover { background: var(--color-card-border); }
.cc-sidebar-item.is-active { background: var(--color-card-border); font-weight: 600; }
.cc-sidebar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cc-sidebar-item-edit {
  margin-left: auto;
  opacity: 0;
  color: var(--color-muted);
  transition: opacity 0.1s, color 0.1s;
  flex-shrink: 0;
}
.cc-sidebar-item:hover .cc-sidebar-item-edit { opacity: 1; }
.cc-sidebar-item-edit:hover { color: var(--color-dark); }
.cc-sidebar-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-sidebar-foot {
  border-top: 1px solid var(--color-rule);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cc-sidebar-foot-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  text-align: left;
}
.cc-sidebar-foot-btn:hover { background: var(--color-card-border); color: var(--color-dark); }

/* Calendar main */
.cc-main {
  padding: 24px 32px;
  overflow-y: auto;
}
.cc-main-head {
  margin-bottom: 20px;
}
.cc-main-title {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0 0 10px;
}
.cc-week-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-week-nav-btn {
  background: none;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--color-muted);
  display: flex;
  align-items: center;
}
.cc-week-nav-btn:hover { color: var(--color-dark); border-color: var(--color-dark); }
.cc-week-nav-label {
  background: none;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  padding: 4px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
}
.cc-week-nav-label:hover { border-color: var(--color-dark); }
.cc-week-nav-range {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  margin-left: 8px;
}

/* Filters */
.cc-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.cc-filter {
  position: relative;
}
.cc-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--color-page);
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-dark);
  cursor: pointer;
}
.cc-filter-btn:hover { border-color: var(--color-dark); }
.cc-filter-btn.is-filtered {
  background: var(--color-dark);
  color: var(--color-page);
  border-color: var(--color-dark);
}
.cc-filter-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  min-width: 160px;
  padding: 4px;
  display: none;
}
.cc-filter-dropdown.is-open {
  display: flex;
  flex-direction: column;
}
.cc-filter-option {
  display: block;
  width: 100%;
  padding: 7px 12px;
  background: none;
  border: none;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-dark);
  text-align: left;
  cursor: pointer;
}
.cc-filter-option:hover { background: var(--color-page); }
.cc-filter-option.is-active { font-weight: 700; color: var(--color-accent); }

/* Day rows */
.cc-day-row {
  border-top: 1px solid var(--color-rule);
  padding: 16px 0;
}
.cc-day-row:last-child {
  border-bottom: 1px solid var(--color-rule);
}
.cc-day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.cc-day-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
}
.cc-day-today-badge {
  display: inline-block;
  padding: 2px 10px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 10px;
}
.cc-day-add {
  margin-left: auto;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.cc-day-row:hover .cc-day-add { opacity: 1; }
.cc-day-add:hover { background: var(--color-card-border); color: var(--color-dark); }
.cc-day-empty {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
  padding: 0 0 4px;
}
.cc-day-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Calendar items */
.cc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  cursor: default;
  transition: box-shadow 0.1s;
}
.cc-item:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.cc-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cc-item-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-item-type,
.cc-item-person {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  flex-shrink: 0;
}
.cc-item-status {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.cc-item-remove {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.1s;
}
.cc-item:hover .cc-item-remove { opacity: 1; }
.cc-item-remove:hover { color: var(--color-accent); }

/* Modal */
.cc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cc-modal {
  background: #fff;
  border-radius: 8px;
  padding: 28px 28px 20px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.15);
}
.cc-modal-title {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--color-dark);
}
.cc-modal-field {
  display: block;
  margin-bottom: 14px;
}
.cc-modal-field > span {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 4px;
}
.cc-modal-field input,
.cc-modal-field select,
.cc-modal-field textarea {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  background: var(--color-page);
  color: var(--color-dark);
}
.cc-modal-field input:focus,
.cc-modal-field select:focus,
.cc-modal-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.cc-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 20px;
}
.cc-btn-danger {
  color: #c1593c !important;
  border-color: #c1593c !important;
}
.cc-btn-danger:hover { background: #c1593c !important; color: #fff !important; }

/* Color picker */
.cc-color-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cc-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.1s;
}
.cc-color-swatch:hover { border-color: var(--color-dark); }
.cc-color-swatch.is-active { border-color: var(--color-dark); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-dark); }

/* Category management */
.cc-cat-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  max-height: 260px;
  overflow-y: auto;
}
.cc-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
}
.cc-cat-row:hover { background: var(--color-page); }
.cc-cat-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cc-cat-name {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-dark);
  flex: 1;
}
.cc-cat-edit,
.cc-cat-remove {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.1s;
}
.cc-cat-row:hover .cc-cat-edit,
.cc-cat-row:hover .cc-cat-remove { opacity: 1; }
.cc-cat-edit:hover { color: var(--color-dark); }
.cc-cat-remove { font-size: 16px; }
.cc-cat-remove:hover { color: #c1593c; }
.cc-cat-edit-input {
  flex: 0 0 120px;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 12px;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  background: var(--color-page);
  color: var(--color-dark);
}
.cc-cat-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--color-rule);
}
.cc-cat-add-input {
  flex: 1;
  min-width: 120px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  background: var(--color-page);
  color: var(--color-dark);
}
.cc-cat-add-colors {
  flex: 1;
  min-width: 0;
}
.cc-cat-add-colors .cc-color-swatch {
  width: 18px;
  height: 18px;
}

/* Drag and drop */
.cc-item[draggable="true"],
.cc-mcell-item[draggable="true"] {
  cursor: grab;
}
.cc-item[draggable="true"]:active,
.cc-mcell-item[draggable="true"]:active {
  cursor: grabbing;
}
.cc-item.is-dragging,
.cc-mcell-item.is-dragging {
  opacity: 0.35;
}
.cc-day-row.cc-drag-over {
  background: rgba(193, 89, 60, 0.04);
  border-radius: 6px;
}
.cc-month-cell.cc-drag-over {
  background: rgba(193, 89, 60, 0.08) !important;
}
.cc-drop-line {
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
  margin: 3px 0;
  pointer-events: none;
  position: relative;
}
.cc-drop-line::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
}

/* View toggle (week / month) */
.cc-nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cc-view-toggle {
  display: inline-flex;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  overflow: hidden;
  margin-left: auto;
}
.cc-view-btn {
  background: none;
  border: none;
  padding: 5px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.cc-view-btn + .cc-view-btn { border-left: 1px solid var(--color-rule); }
.cc-view-btn:hover { color: var(--color-dark); }
.cc-view-btn.is-active {
  background: var(--color-dark);
  color: #fff;
  font-weight: 600;
}

/* Month grid */
.cc-month-grid {
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  overflow: hidden;
}
.cc-month-header,
.cc-month-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cc-month-header-cell {
  padding: 8px 6px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-page);
  border-bottom: 1px solid var(--color-rule);
}
.cc-month-header-cell + .cc-month-header-cell { border-left: 1px solid var(--color-rule); }
.cc-month-cell {
  min-height: 90px;
  min-width: 0;
  padding: 6px;
  border-bottom: 1px solid var(--color-rule);
  background: #fff;
  position: relative;
  overflow: hidden;
}
.cc-month-cell + .cc-month-cell { border-left: 1px solid var(--color-rule); }
.cc-month-row:last-child .cc-month-cell { border-bottom: none; }
.cc-month-cell.is-other-month { background: var(--color-page); }
.cc-month-cell.is-other-month .cc-mcell-date { color: var(--color-rule); }
.cc-mcell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.cc-mcell-date {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
}
.cc-mcell-date.is-today {
  background: none;
  color: var(--color-dark);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  border: 2px solid #e67e22;
}
.cc-mcell-add {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.1s;
}
.cc-month-cell:hover .cc-mcell-add { opacity: 1; }
.cc-mcell-add:hover { color: var(--color-dark); }
.cc-mcell-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.cc-mcell-item {
  display: flex;
  align-items: center;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  min-height: 20px;
  min-width: 0;
  max-width: 100%;
}
.cc-mcell-item:hover { filter: brightness(0.9); }
.cc-mcell-item-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.cc-mcell-more {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-muted);
  padding: 2px 4px;
  cursor: pointer;
}
.cc-mcell-more:hover { color: var(--color-dark); }

@media (max-width: 760px) {
  .cc-layout { grid-template-columns: 1fr; }
  .cc-sidebar { border-right: none; border-top: 1px solid var(--color-rule); order: 2; }
  .cc-main { order: 1; padding: 16px; }
  .cc-sidebar-inner { padding: 12px 0; max-height: none; overflow-y: auto; }
  .cc-month-cell { min-height: 60px; }
  .cc-mcell-item-title { font-size: 9px; }
}

/* ---- Meeting Agenda (/admin/agenda/) ---- */
.ag-root {
  padding: 24px 32px 48px;
}
.ag-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

/* Collapsible sections */
.ag-section {
  margin-bottom: 4px;
}
.ag-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  cursor: pointer;
  user-select: none;
  border-bottom: 2px solid var(--color-dark);
}
.ag-section-head:hover {
  background: rgba(0, 0, 0, 0.02);
}
.ag-section-caret {
  flex-shrink: 0;
  color: var(--color-muted);
  transition: transform 0.15s;
}
.ag-section.is-collapsed .ag-section-caret {
  transform: rotate(-90deg);
}
.ag-section-name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-dark);
}
.ag-section-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-mid);
  margin-left: 2px;
}
.ag-section-drag-handle {
  display: none;
  align-items: center;
  color: var(--color-mid);
  cursor: grab;
  padding: 0 6px;
  margin-left: 4px;
}
.ag-section-head:hover .ag-section-drag-handle { display: inline-flex; }
.ag-section-remove {
  display: none;
  background: none;
  border: none;
  color: var(--color-mid);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  margin-left: auto;
}
.ag-section-head:hover .ag-section-remove { display: inline-flex; }
.ag-section-remove:hover { color: var(--color-accent); }
.ag-section.is-section-dragging { opacity: 0.4; }
.ag-section.ag-section-drop-above { border-top: 2px solid var(--color-accent); position: relative; }
.ag-section.ag-section-drop-above::before {
  content: "";
  position: absolute;
  top: -4px; left: -4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.ag-section.ag-section-drop-below { border-bottom: 2px solid var(--color-accent); position: relative; }
.ag-section.ag-section-drop-below::after {
  content: "";
  position: absolute;
  bottom: -4px; left: -4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.ag-inline-section-input {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-dark);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
  background: #fff;
  min-width: 120px;
}
.ag-section-name[data-ag-section-rename] { cursor: text; }
.ag-add-section { padding: 12px 4px; }
.ag-add-section-btn {
  background: none;
  border: none;
  color: var(--color-mid);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
}
.ag-add-section-btn:hover { color: var(--color-accent); }
.ag-add-section-btn[hidden] { display: none; }
.ag-add-section-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.ag-add-section-form[hidden] { display: none; }
.ag-section-body {
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.ag-section.is-collapsed .ag-section-body {
  display: none;
}

/* Task rows */
.ag-section-items {
  min-height: 2px;
}
.ag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 6px 8px;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-body);
  transition: background 0.1s;
  position: relative;
}
.ag-item:hover {
  background: rgba(238, 125, 81, 0.03);
}
.ag-item.is-done {
  opacity: 0.45;
}
.ag-item.is-done .ag-item-title {
  text-decoration: line-through;
  color: var(--color-muted);
}
.ag-item.is-dragging {
  opacity: 0.3;
}
.ag-item.ag-drop-above {
  box-shadow: 0 -2px 0 0 var(--color-accent);
  position: relative;
}
.ag-item.ag-drop-above::before {
  content: "";
  position: absolute;
  top: -4px; left: -4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.ag-item.ag-drop-below {
  box-shadow: 0 2px 0 0 var(--color-accent);
  position: relative;
}
.ag-item.ag-drop-below::after {
  content: "";
  position: absolute;
  bottom: -4px; left: -4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.ag-drop-zone-active {
  min-height: 36px;
  background: rgba(238, 125, 81, 0.06);
  border-radius: 4px;
}

/* Drag handle — right side of item row */
.ag-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  min-width: 14px;
  height: 20px;
  color: transparent;
  cursor: grab;
  transition: color 0.1s;
  margin-left: 4px;
  padding: 0 4px;
}
.ag-item:hover .ag-drag-handle {
  color: var(--color-mid);
}
.ag-drag-handle:active {
  cursor: grabbing;
}

/* Checkbox */
.ag-check {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-rule);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: transparent;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ag-check:hover {
  border-color: #27ae60;
}
.ag-check.is-checked {
  border-color: #27ae60;
  background: #27ae60;
  color: #fff;
}

/* Task title */
.ag-item-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.1s;
}
.ag-item-title:hover {
  background: rgba(0, 0, 0, 0.04);
}
.ag-inline-title-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-dark);
  padding: 2px 4px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  outline: none;
  background: #fff;
}

/* Task meta */
.ag-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ag-item-date {
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
}
.ag-item-cat {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--cat-color, var(--color-muted));
  background: color-mix(in srgb, var(--cat-color, #9a8773) 10%, transparent);
  padding: 1px 8px;
  border-radius: 10px;
}

/* Action buttons */
.ag-item-detail,
.ag-item-remove {
  background: none;
  border: none;
  color: var(--color-mid);
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0;
  transition: opacity 0.1s, color 0.1s;
  display: flex;
  align-items: center;
}
.ag-item:hover .ag-item-detail,
.ag-item:hover .ag-item-remove {
  opacity: 1;
}
.ag-item-detail:hover { color: var(--color-dark); }
.ag-item-remove { font-size: 16px; }
.ag-item-remove:hover { color: #c1593c; }

/* Inline add */
.ag-inline-add {
  padding: 4px 4px 8px 30px;
}
.ag-inline-add-btn {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  border-radius: 4px;
  transition: color 0.1s, background 0.1s;
  width: 100%;
}
.ag-inline-add-btn:hover {
  color: var(--color-primary);
  background: rgba(238, 125, 81, 0.04);
}
.ag-inline-add-form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ag-inline-add-form[hidden] {
  display: none;
}
.ag-inline-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  outline: none;
  color: var(--color-dark);
  background: #fff;
  transition: border-color 0.15s;
}
.ag-inline-input:focus {
  border-color: var(--color-primary);
}
.ag-inline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ag-inline-save {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.ag-inline-save:hover { opacity: 0.9; }
.ag-inline-cancel {
  font-size: 16px;
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 2px 6px;
}
.ag-inline-cancel:hover { color: var(--color-dark); }

/* Completed section */
.ag-completed-wrap {
  margin-top: 24px;
  padding-top: 12px;
}
.ag-completed-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ag-clear-completed {
  display: none;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-mid);
  cursor: pointer;
  padding: 2px 0;
}
.ag-completed-header:hover .ag-clear-completed { display: inline; }
.ag-clear-completed:hover { color: var(--color-accent); }
.ag-completed-toggle {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  margin-bottom: 8px;
}
.ag-completed-toggle:hover { color: var(--color-dark); }
.ag-completed-caret {
  transition: transform 0.15s;
}

/* ---- Content Calendar list view ---- */
.cc-list-groups {
  padding: 0 0 48px;
}
.cc-list-group {
  margin-bottom: 28px;
}
.cc-list-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 2px solid var(--color-rule);
  margin-bottom: 0;
}
.cc-list-group-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cc-list-group-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
}
.cc-list-group-count {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-mid);
  background: var(--color-page);
  border-radius: 10px;
  padding: 1px 8px;
}
.cc-list-group-edit {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--color-muted);
  cursor: pointer;
  padding: 2px 4px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.1s;
}
.cc-list-group-head:hover .cc-list-group-edit { opacity: 1; }
.cc-list-group-edit:hover { color: var(--color-dark); }
.cc-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 34px;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.1s;
}
.cc-list-item:hover { background: rgba(238, 125, 81, 0.03); }
.cc-list-item-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-list-item-person {
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
}
.cc-list-item-date {
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
}
.cc-list-item-status {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.cc-list-empty {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-mid);
  padding: 12px 12px 12px 34px;
  border-bottom: 1px solid var(--color-rule);
}

@media (max-width: 760px) {
  .ag-root { padding: 16px; }
  .ag-item-meta { display: none; }
  .cc-list-item-person { display: none; }
  .ag-drag-handle { color: var(--color-mid); touch-action: none; padding: 8px 12px; min-width: 32px; min-height: 32px; }
  .ag-section-drag-handle { display: inline-flex; touch-action: none; padding: 8px 12px; min-width: 32px; min-height: 32px; }
  .ag-section-remove { display: inline-flex; padding: 8px; min-width: 32px; min-height: 32px; }
  .ag-item-remove { opacity: 1; }
}
.ag-drag-handle, .ag-section-drag-handle { touch-action: none; }
.ag-touch-dragging { opacity: 0.4; pointer-events: none; }

/* ---- Workspace de-branding ----
   Kill the editorial display font and decorative italics everywhere
   inside the admin shell. Headings use the body sans; the basic serif
   (Source Serif / Georgia) is fine for body text if inherited. */
.admin-workspace h1,
.admin-workspace h2,
.admin-workspace h3,
.admin-workspace h4,
.admin-workspace h5,
.admin-workspace h6,
.admin-workspace .dashboard-module-title,
.admin-workspace .dashboard-form-legend,
.admin-workspace .admin-section-title,
.admin-workspace .admin-stat-value,
.admin-workspace .admin-headline,
.admin-workspace .ws-landing-card-title,
.admin-workspace .admin-topbar-title,
.admin-workspace .copy-result-platform {
  font-family: var(--font-body) !important;
  font-style: normal !important;
}
.admin-workspace .dashboard-form-legend em,
.admin-workspace .admin-section-title em,
.admin-workspace .admin-headline em,
.admin-workspace .admin-topbar-title em,
.admin-workspace .dashboard-module-title em {
  font-style: normal !important;
  color: inherit !important;
}

/* ---- Mobile sidebar ---- */
.ws-sidebar-toggle {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1d1b18;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  align-items: center;
  justify-content: center;
}
.ws-sidebar-toggle svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 860px) {
  .ws-sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    transition: left 0.25s ease;
    z-index: 300;
  }
  .ws-sidebar.is-open { left: 0; }
  .ws-sidebar-toggle { display: flex; }
  .ws-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 299;
  }
  .ws-sidebar.is-open ~ .ws-sidebar-backdrop { display: block; }
  .admin-topbar { padding: 20px 16px 16px; }
  .admin-workspace .admin-body > .container { padding: 0 16px; }
  .ws-landing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .ws-landing-grid { grid-template-columns: 1fr; }
}


/* =============================================================
   Social Asset Creator — /admin/assets/
   ============================================================= */

.asset-creator { }

.asset-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.asset-toolbar-modes {
  display: flex;
  gap: 2px;
  background: var(--color-rule);
  border-radius: 6px;
  overflow: hidden;
}
.asset-mode-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border: none;
  background: var(--color-page);
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.asset-mode-btn.is-active {
  background: var(--color-dark);
  color: var(--color-white);
}
.asset-mode-btn:hover:not(.is-active) { background: #fff; }
.asset-mode-dim {
  font-weight: 400;
  font-size: 11px;
  opacity: 0.6;
}

.asset-toolbar-pull {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}
.asset-url-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: #fff;
  color: var(--color-dark);
}
.asset-url-input::placeholder { color: var(--color-muted); opacity: 0.6; }

.asset-workspace {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}

/* Settings panel */
.asset-settings {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.asset-settings-group {
  padding: 16px;
  border-bottom: 1px solid var(--color-rule);
}
.asset-settings-group:last-child { border-bottom: 0; }
.asset-settings-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 10px;
}

.asset-template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.asset-template-btn {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 4px;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  background: var(--color-page);
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.12s;
}
.asset-template-btn.is-active {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}
.asset-template-btn:hover:not(.is-active) {
  border-color: var(--color-dark);
}

.asset-color-swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.asset-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
  transition: border-color 0.12s;
}
.asset-swatch.is-active {
  border-color: var(--color-primary);
}
.asset-swatch:hover { border-color: var(--color-dark); }

.asset-settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.asset-settings-field:last-child { margin-bottom: 0; }
.asset-settings-field-label {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
}
.asset-settings-field input[type="text"],
.asset-settings-field textarea {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  background: var(--color-page);
  color: var(--color-dark);
  resize: vertical;
}
.asset-settings-field input[type="color"] {
  width: 100%;
  height: 28px;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  cursor: pointer;
  padding: 2px;
}
.asset-settings-field input[type="range"] {
  width: 100%;
  accent-color: var(--color-primary);
}
.asset-settings-field-value {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  text-align: right;
}
.asset-settings-field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.asset-settings-field--checkbox input { width: auto; }

.asset-image-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

/* ── Admin button system ──────────────────────────────────────
   Compact, neutral buttons for tool UIs. No CTA styling —
   primary actions use dark bg, destructive uses red outline,
   secondary uses border only. */
.admin-workspace .btn,
.au-modal-overlay .btn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  box-shadow: none;
  border: 1px solid transparent;
}
.admin-workspace .btn:hover,
.au-modal-overlay .btn:hover {
  transform: none;
  box-shadow: none;
}
.admin-workspace .btn-pill,
.au-modal-overlay .btn-pill {
  border-radius: 6px;
  padding: 7px 16px;
}
.admin-workspace .btn-sm,
.au-modal-overlay .btn-sm {
  padding: 5px 12px;
  font-size: 11px;
}
.admin-workspace .btn-primary,
.au-modal-overlay .btn-primary {
  background: var(--color-dark);
  color: #fff;
  padding: 7px 16px;
  box-shadow: none;
  border-color: var(--color-dark);
}
.admin-workspace .btn-primary:hover,
.au-modal-overlay .btn-primary:hover {
  background: #1a1816;
  border-color: #1a1816;
}
.admin-workspace .btn-dark,
.au-modal-overlay .btn-dark {
  box-shadow: none;
}
.admin-workspace .btn-danger,
.au-modal-overlay .btn-danger {
  background: transparent;
  color: #c0392b;
  border: 1px solid #c0392b;
}
.admin-workspace .btn-danger:hover,
.au-modal-overlay .btn-danger:hover {
  background: #c0392b;
  color: #fff;
}
.admin-workspace .btn-ghost,
.au-modal-overlay .btn-ghost {
  background: transparent;
  color: var(--color-dark);
  border: 1px solid var(--color-rule);
}
.admin-workspace .btn-ghost:hover,
.au-modal-overlay .btn-ghost:hover {
  border-color: var(--color-dark);
  background: transparent;
  color: var(--color-dark);
}
.admin-workspace .btn:not(.btn-primary):not(.btn-dark):not(.btn-danger):not(.btn-ghost),
.au-modal-overlay .btn:not(.btn-primary):not(.btn-dark):not(.btn-danger):not(.btn-ghost) {
  background: transparent;
  color: var(--color-dark);
  border: 1px solid var(--color-rule);
}
.admin-workspace .btn:not(.btn-primary):not(.btn-dark):not(.btn-danger):not(.btn-ghost):hover,
.au-modal-overlay .btn:not(.btn-primary):not(.btn-dark):not(.btn-danger):not(.btn-ghost):hover {
  border-color: var(--color-dark);
}
.admin-workspace .btn:disabled,
.au-modal-overlay .btn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* Canvas preview */
.asset-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.asset-canvas-wrap {
  max-width: 100%;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}
.asset-canvas-wrap canvas {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}

/* Panel strip (carousel) */
.asset-panels {
  display: flex;
  align-items: center;
  gap: 8px;
}
.asset-panels-strip {
  display: flex;
  gap: 4px;
}
.asset-panel-thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--color-rule);
  background: var(--color-page);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.12s;
}
.asset-panel-thumb.is-active {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}
.asset-panel-add,
.asset-panel-remove {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--color-rule);
  background: var(--color-page);
  font-size: 16px;
  color: var(--color-muted);
  cursor: pointer;
}
.asset-panel-add:hover, .asset-panel-remove:hover {
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.asset-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .asset-workspace { grid-template-columns: 1fr; }
  .asset-settings { order: 2; }
  .asset-preview { order: 1; }
}



/* =============================================================
   Social Copy Creator — /admin/copy/
   ============================================================= */

.copy-creator { }

.copy-section {
  margin-bottom: 28px;
}
.copy-section-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.copy-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.copy-field-tone {
  flex: 1;
  min-width: 200px;
}
.copy-field-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.copy-input,
.copy-select {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: #fff;
  color: var(--color-dark);
  width: 100%;
}
.copy-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.copy-input:focus,
.copy-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(238, 125, 81, 0.12);
}
.copy-textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: #fff;
  color: var(--color-dark);
  resize: vertical;
  width: 100%;
  min-height: 80px;
}
.copy-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(238, 125, 81, 0.12);
}

.copy-divider-or {
  text-align: center;
  position: relative;
  margin: 16px 0;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.copy-divider-or::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-rule);
}
.copy-divider-or span {
  position: relative;
  background: var(--color-bg, #f6f3f2);
  padding: 0 12px;
}

.copy-platform-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.copy-pill {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 100px;
  border: 1px solid var(--color-rule);
  background: #fff;
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.copy-pill:hover {
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.copy-pill.is-active {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: #fff;
}

.copy-generate-wrap {
  flex-shrink: 0;
  padding-bottom: 2px;
}

.copy-status {
  font-family: var(--font-body);
  font-size: 14px;
  margin: 0 0 16px;
}

.copy-output {
  margin-top: 8px;
}
.copy-output-divider {
  height: 1px;
  background: var(--color-rule);
  margin-bottom: 28px;
}

.copy-result-card {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: #fff;
  padding: 20px;
  margin-bottom: 16px;
}
.copy-result-platform {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 8px;
}
.copy-result-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-dark);
  white-space: pre-wrap;
  margin: 0 0 12px;
}
.copy-result-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 640px) {
  .copy-section-row {
    flex-direction: column;
    align-items: stretch;
  }
  .copy-generate-wrap {
    width: 100%;
  }
  .copy-generate-wrap .btn {
    width: 100%;
  }
}


/* =============================================================
   Social Dashboard — /admin/social/
   ============================================================= */

.social-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.social-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.social-action-btn:hover:not(:disabled) {
  border-color: var(--color-dark);
  background: var(--color-dark);
  color: #fff;
}
.social-action-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.social-action-btn--generate {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.social-action-btn--generate:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.social-action-btn--delete {
  border-color: #c0392b;
  color: #c0392b;
}
.social-action-btn--delete:hover:not(:disabled) {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
.social-action-btn--push {
  border-color: #27ae60;
  color: #27ae60;
}
.social-action-btn--push:hover:not(:disabled) {
  background: #27ae60;
  border-color: #27ae60;
  color: #fff;
}

.social-status {
  padding: 12px 16px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.03);
  margin-bottom: 24px;
}
.social-status-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
}

.social-drafts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-rule);
}
.social-drafts-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0;
}
.social-select-all {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.social-draft-card {
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 20px;
  overflow: hidden;
}
.social-draft-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid var(--color-rule);
}
.social-draft-card-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0;
}
.social-draft-card-link {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-primary);
}

.social-draft-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-rule);
}
.social-draft-row:last-child { border-bottom: 0; }
.social-draft-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.social-draft-cb { cursor: pointer; }
.social-draft-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.social-draft-chars {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  margin-left: auto;
}
.social-draft-schedule {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 4px;
}
.social-draft-schedule-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
}
.social-draft-schedule-input {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-dark);
  background: var(--color-page);
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  padding: 4px 8px;
}
.social-draft-schedule-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.social-draft-text {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-dark);
  background: var(--color-page);
  resize: vertical;
}
.social-draft-text:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Delete modal */
.social-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
}
.social-modal-backdrop.is-open {
  display: flex;
}
.social-modal {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}
.social-modal-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0 0 16px;
}
.social-modal-info {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 12px;
}
.social-modal-option {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-dark);
  padding: 6px 0;
  cursor: pointer;
}
.social-modal-option--all {
  font-weight: 600;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-rule);
}
.social-modal-items {
  max-height: 300px;
  overflow-y: auto;
}
.social-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-rule);
}
.social-modal-cancel {
  padding: 8px 16px;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
  cursor: pointer;
}
.social-modal-cancel:hover { background: rgba(0, 0, 0, 0.03); }


/* =============================================================
   Admin Dashboard — Mobile Responsive Fixes
   ============================================================= */

/* Members sub-pages: fix specificity bug where workspace selector
   overrides the base 760px collapse rule. Affects: members, addresses,
   drift, gifts, groups, institutions, institution pages. */
@media (max-width: 760px) {
  .admin-workspace .admin-members-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .admin-workspace .admin-members-sidebar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--color-card-border);
  }
  .admin-workspace .admin-members-sidebar::-webkit-scrollbar { display: none; }
  .admin-workspace .admin-members-subnav-list {
    flex-direction: row;
    gap: 24px;
    flex-wrap: nowrap;
  }
  .admin-workspace .admin-members-subnav-link {
    padding: 12px 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .admin-workspace .admin-members-subnav-link.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--color-primary);
  }
}

/* Admin tool links: tighten spacing at narrow widths */
@media (max-width: 640px) {
  .admin-tool-link {
    gap: 12px;
    padding: 18px 0;
  }
  .admin-tool-numeral {
    font-size: 26px;
  }
  .admin-tool-title {
    font-size: 18px;
  }
}

/* Content calendar: week nav needs wrapping */
@media (max-width: 640px) {
  .cc-week-nav {
    flex-wrap: wrap;
  }
  .cc-month-cell {
    min-height: 44px;
    padding: 3px 2px;
  }
  .cc-month-header-cell {
    padding: 6px 2px;
    font-size: 9px;
    letter-spacing: 0.04em;
  }
  .cc-mcell-date {
    font-size: 10px;
  }
  .cc-mcell-date.is-today {
    width: 18px;
    height: 18px;
    font-size: 9px;
  }
  .cc-mcell-item {
    padding: 2px 3px;
    min-height: 16px;
  }
  .cc-mcell-item-title {
    font-size: 8px;
  }
}

/* Asset creator: pull bar and actions at narrow widths */
@media (max-width: 540px) {
  .asset-toolbar-pull {
    min-width: 0;
    width: 100%;
  }
  .asset-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Social dashboard: no mobile rules existed */
@media (max-width: 640px) {
  .social-action-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
  .social-draft-card-header {
    flex-wrap: wrap;
    gap: 6px;
  }
  .social-draft-card-title {
    font-size: 13px;
  }
  .social-draft-schedule {
    flex-wrap: wrap;
    gap: 6px;
  }
  .social-draft-schedule-label {
    width: 100%;
  }
  .social-draft-schedule-input {
    width: 100%;
  }
}

/* Admin topbar: reduce title at very narrow viewports */
@media (max-width: 540px) {
  .admin-topbar-title {
    font-size: 17px;
  }
  .admin-topbar-sub {
    font-size: 13px;
  }
}

/* Modal: tighter padding at phone width */
@media (max-width: 480px) {
  .au-modal {
    padding: 20px 16px;
  }
}

/* Editorial kanban: reduce column minimums for narrower scroll */
@media (max-width: 520px) {
  .editorial-board {
    grid-template-columns: repeat(5, minmax(140px, 180px));
    gap: 10px;
  }
  .editorial-col {
    min-width: 140px;
  }
  .editorial-card-name {
    font-size: 13px;
  }
  .editorial-card-meta {
    font-size: 10px;
  }
}

/* Editorial kanban: scroll affordance shadow */
.editorial-board {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
}
.editorial-board:hover,
.editorial-board:focus-within {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---------------------------------------------------------------------------
   Contact Inbox — /admin/contact/
   --------------------------------------------------------------------------- */

.contact-filters {
  margin-bottom: 24px;
}

.contact-filter-select {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  max-width: 280px;
  padding: 8px 36px 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-dark, #1e1c1a);
  background: var(--color-light, #f6f5f3)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  border: 1px solid var(--color-border, #e8e4de);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.contact-filter-select:hover {
  border-color: #c8c2bb;
}

.contact-filter-select:focus {
  outline: none;
  border-color: var(--color-dark, #1e1c1a);
  box-shadow: 0 0 0 3px rgba(30,28,26,0.08);
}

/* Message list */
.contact-msg-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-border, #e8e4de);
}

.contact-msg-row {
  border-bottom: 1px solid var(--color-border, #e8e4de);
}

.contact-msg-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  user-select: none;
}

.contact-msg-head:hover .contact-msg-name {
  color: var(--color-primary, #ee7d51);
}

.contact-msg-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-dark, #1e1c1a);
  transition: color 0.12s;
}

.contact-msg-row.is-unread .contact-msg-name {
  font-weight: 700;
}

.contact-msg-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary, #ee7d51);
  flex-shrink: 0;
}

.contact-msg-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

/* Type badge colours */
.contact-type-partnership_request { background: #e8f4e8; color: #2d6a2d; }
.contact-type-technical_support   { background: #e8eef8; color: #2a4a8a; }
.contact-type-media_query         { background: #f8f0e8; color: #7a4a10; }
.contact-type-general_feedback    { background: #f0e8f8; color: #5a2a8a; }
.contact-type-other               { background: #f0eeea; color: #666; }

.contact-msg-date {
  font-size: 11px;
  color: var(--color-muted, #888);
  white-space: nowrap;
}

/* Expanded body */
.contact-msg-body {
  padding: 0 0 20px;
}

.contact-msg-email {
  font-size: 12px;
  color: var(--color-muted, #888);
  margin: 0 0 12px;
}

.contact-msg-email a {
  color: inherit;
  text-decoration: underline;
}

.contact-msg-text {
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  color: var(--color-dark, #1e1c1a);
  margin: 0 0 16px;
  max-width: 640px;
}

.contact-msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 640px) {
  .contact-msg-head {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .contact-msg-date {
    grid-column: 2;
    grid-row: 1;
  }
  .contact-msg-badge {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }
}


/* ---------------------------------------------------------------------------
   Admin Inbox — /admin/inbox/
   --------------------------------------------------------------------------- */

/* Sidebar inbox link + badge */
.ws-sidebar-inbox-link {
  padding: 8px 12px 4px;
}
.ws-sidebar-link--inbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark, #1e1c1a);
  text-decoration: none;
  background: var(--color-light, #f6f5f3);
  border: 1px solid var(--color-border, #e8e4de);
  transition: background 0.15s;
}
.ws-sidebar-link--inbox:hover,
.ws-sidebar-link--inbox.is-active {
  background: var(--color-dark, #1e1c1a);
  color: #fff;
  border-color: var(--color-dark, #1e1c1a);
}
.ws-inbox-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  background: var(--color-primary, #ee7d51);
  color: #fff;
  border-radius: 9px;
  line-height: 1;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s;
}
.ws-inbox-badge.has-count { opacity: 1; }

/* Two-pane layout */
.admin-body--inbox { padding: 0; }
.inbox-workspace {
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: calc(100vh - 72px);
  border-top: 1px solid var(--color-border, #e8e4de);
}

.inbox-pane {
  padding: 28px 32px;
  border-right: 1px solid var(--color-border, #e8e4de);
  overflow-y: auto;
}

.todos-pane {
  padding: 24px 20px;
  background: var(--color-light, #f6f5f3);
  overflow-y: auto;
}

/* Inbox filter bar */
.inbox-filter-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
.inbox-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--color-border, #e8e4de);
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-muted, #888);
  transition: all 0.15s;
}
.inbox-filter-btn:hover {
  background: #ede9e3;
  color: var(--color-dark, #1e1c1a);
}
.inbox-filter-btn.is-active {
  background: var(--color-dark, #1e1c1a);
  color: #fff;
  border-color: var(--color-dark, #1e1c1a);
}
.inbox-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  background: var(--color-primary, #ee7d51);
  color: #fff;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.15s;
}
.inbox-filter-count.has-count { opacity: 1; }
.inbox-filter-btn.is-active .inbox-filter-count { background: rgba(255,255,255,0.3); }

/* Inbox list */
.inbox-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-border, #e8e4de);
}
.inbox-row {
  border-bottom: 1px solid var(--color-border, #e8e4de);
  cursor: grab;
}
.inbox-row.is-dragging { opacity: 0.4; }
.inbox-row-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  cursor: pointer;
  user-select: none;
}
.inbox-row-head:hover .inbox-row-title { color: var(--color-primary, #ee7d51); }

.inbox-source-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.inbox-source-editorial { background: #e8f4e8; color: #2d6a2d; }
.inbox-source-contact   { background: #e8eef8; color: #2a4a8a; }
.inbox-source-sponsors  { background: #f8f0e8; color: #7a4a10; }
.inbox-source-agenda    { background: #f0e8f8; color: #5a2a8a; }
.inbox-source-other     { background: #f0eeea; color: #666; }

.inbox-row-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-dark, #1e1c1a);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.12s;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-row.is-unread .inbox-row-title { font-weight: 700; }
.inbox-unread-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary, #ee7d51);
  flex-shrink: 0;
}
.inbox-row-from {
  font-size: 11px;
  color: var(--color-muted, #888);
  white-space: nowrap;
}
.inbox-row-date {
  font-size: 11px;
  color: var(--color-muted, #888);
  white-space: nowrap;
}
.inbox-row-body {
  padding: 0 0 16px;
}
.inbox-snippet {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-dark, #1e1c1a);
  margin: 0 0 12px;
  white-space: pre-wrap;
  max-width: 600px;
}
.inbox-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.inbox-status-select {
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--color-border, #e8e4de);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  color: var(--color-dark, #1e1c1a);
}

/* @mention chip */
.mention-chip {
  display: inline-block;
  background: #e8f0fb;
  color: #2a4a8a;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 0.9em;
  font-weight: 600;
}

/* @mention dropdown */
.mention-dropdown {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #fff;
  border: 1px solid var(--color-border, #e8e4de);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  min-width: 200px;
  max-height: 200px;
  overflow-y: auto;
}
.mention-option {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--color-dark, #1e1c1a);
}
.mention-option:hover,
.mention-option.is-focused {
  background: var(--color-light, #f6f5f3);
  color: var(--color-primary, #ee7d51);
}

/* ---------------------------------------------------------------------------
   To-Do Pane
   --------------------------------------------------------------------------- */

.todos-pane-title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  color: var(--color-dark, #1e1c1a);
  margin: 0 0 16px;
}

.todo-section { margin-bottom: 16px; }

.todo-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  text-align: left;
}
.todo-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted, #888);
}
.todo-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  background: var(--color-primary, #ee7d51);
  color: #fff;
  border-radius: 8px;
}
.todo-section-chevron {
  margin-left: auto;
  font-size: 14px;
  color: var(--color-muted, #888);
  transition: transform 0.2s;
  display: inline-block;
}
.todo-section.is-collapsed .todo-section-chevron { transform: rotate(-90deg); }
.todo-section.is-collapsed .todo-section-body { display: none; }

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

.todo-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border, #e8e4de);
  cursor: grab;
}
.todo-item:last-child { border-bottom: 0; }
.todo-item.is-done .todo-text {
  text-decoration: line-through;
  color: var(--color-muted, #888);
}
.todo-item.is-dragging { opacity: 0.4; }

.todo-check {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-muted, #888);
  line-height: 0;
}
.todo-item.is-done .todo-check { color: var(--color-primary, #ee7d51); }

.todo-text {
  flex: 1;
  font-size: 13px;
  color: var(--color-dark, #1e1c1a);
  line-height: 1.4;
  cursor: pointer;
  word-break: break-word;
}
.todo-edit-input {
  flex: 1;
  font-size: 13px;
  padding: 2px 4px;
  border: 1px solid var(--color-primary, #ee7d51);
  border-radius: 3px;
  outline: none;
  color: var(--color-dark, #1e1c1a);
  background: #fff;
}
.todo-source-link {
  font-size: 11px;
  color: var(--color-muted, #888);
  text-decoration: none;
  flex-shrink: 0;
}
.todo-source-link:hover { color: var(--color-primary, #ee7d51); }
.todo-edit-btn,
.todo-delete-btn {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-muted, #888);
  opacity: 0;
  transition: opacity 0.1s, color 0.1s;
  line-height: 1;
}
.todo-item:hover .todo-edit-btn,
.todo-item:hover .todo-delete-btn { opacity: 1; }
.todo-edit-btn:hover { color: var(--color-dark, #1e1c1a); }
.todo-delete-btn:hover { color: #c0392b; }

.todo-add-row { padding: 8px 0 4px; }
.todo-add-input {
  width: 100%;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px dashed var(--color-border, #e8e4de);
  border-radius: 4px;
  background: transparent;
  color: var(--color-dark, #1e1c1a);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.todo-add-input::placeholder { color: var(--color-muted, #888); }
.todo-add-input:focus { border-color: var(--color-primary, #ee7d51); border-style: solid; }

/* Drop zone highlight */
[data-todo-drop][data-dragover="true"] {
  background: rgba(238, 125, 81, 0.06);
  border-radius: 4px;
  outline: 2px dashed var(--color-primary, #ee7d51);
  outline-offset: 2px;
}

/* Mobile — stack panes */
@media (max-width: 820px) {
  .inbox-workspace {
    grid-template-columns: 1fr;
  }
  .inbox-pane {
    border-right: 0;
    border-bottom: 1px solid var(--color-border, #e8e4de);
    padding: 20px 16px;
  }
  .todos-pane {
    padding: 20px 16px;
  }
  .inbox-filter-btn {
    min-height: 44px;
    touch-action: manipulation;
  }
  .todo-check {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inbox-row-head {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
  }
  .inbox-row-from {
    grid-column: 2 / span 2;
    grid-row: 2;
    font-size: 11px;
  }
  .inbox-row-date {
    grid-column: 3;
    grid-row: 1;
  }
}

.todo-empty {
  font-size: 12px;
  color: var(--color-muted, #888);
  padding: 8px 0;
  font-style: italic;
  list-style: none;
}