/*
Theme Name: Markmaish
Theme URI: https://markmaish.local
Author: Markmaish
Description: Rugged Heritage editorial theme — worn leather, waxed cotton, and repair-culture warmth for long-form reading.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maish-editorial
*/

/* ==========================================================================
   Design tokens
   Locked direction: "Rugged Heritage" — canvas/ink/rust/forest, Bitter +
   Barlow, Fully Alive motion tier. Every color below is contrast-checked;
   see the split rust/rust-text tokens in particular — that split exists
   because a single rust value passed contrast for headlines but failed it
   for small text, not by accident.
   ========================================================================== */

:root{
  /* ---- Color: day (default) ---- */
  --color-canvas: #E8DCC5;
  --color-canvas-raised: #DFD0B2;
  --color-ink: #22190F;
  --color-muted: #6B5D48;
  --color-rust: #B24A24;        /* headlines, buttons, large/bold elements only */
  --color-rust-text: #9A3E1D;   /* links, tags, anything small — 5.02:1 on canvas */
  --color-forest: #3F5240;      /* also: Vol. III "Adulting101" badge — 6.21:1, one token covers both sizes */
  --color-essays: #7A3244;      /* Vol. I "Lifestyle & Inspiration" badge — 6.54:1, one token covers both sizes */
  --color-line: #D2C3A0;
  --color-on-rust: #FFFFFF;     /* text sitting on a --color-rust fill */
  /* Vol. II "#TheBrokeBillionaire" badge reuses --color-rust-text — the
     site's original, flagship accent, fitting since this is where the
     identity started. */
  --color-strategy: #6E5539;       /* Strategy Desk — warm bronze/slate, headlines/large elements — 5.12:1 */
  --color-strategy-text: #543D24;  /* Strategy Desk — small text/links — 7.48:1 on canvas */
  --color-campus: #38536F;         /* Campus Life chapter badge — faded denim, headlines/large elements — 5.87:1 */
  --color-campus-text: #2E4258;    /* Campus Life chapter badge — small text/links — 7.6:1 on canvas */

  /* ---- Typography ----
     Font files are self-hosted and enqueued in functions.php (Step 3), not
     declared here — style.css owns the design tokens, not font loading. */
  --font-display: "Bitter", Georgia, "Times New Roman", serif;
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --leading-tight: 1.15;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.78; /* long-form article body */

  /* Fluid type scale — 375px to 1440px viewport, computed not eyeballed */
  --text-caption: clamp(0.8125rem, 0.7905rem + 0.0939vw, 0.875rem);
  --text-small:   clamp(0.9375rem, 0.9155rem + 0.0939vw, 1rem);
  --text-base:    clamp(1.0625rem, 1.0185rem + 0.1878vw, 1.1875rem);
  --text-lead:    clamp(1.1875rem, 1.1215rem + 0.2817vw, 1.375rem);
  --text-h4:      clamp(1.375rem, 1.287rem + 0.3756vw, 1.625rem);
  --text-h3:      clamp(1.625rem, 1.493rem + 0.5634vw, 2rem);
  --text-h2:      clamp(2rem, 1.7799rem + 0.939vw, 2.625rem);
  --text-h1:      clamp(2.375rem, 2.0229rem + 1.5023vw, 3.375rem);
  --text-display: clamp(2.75rem, 2.1338rem + 2.6291vw, 4.5rem);

  /* ---- Fluid space scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  clamp(0.75rem, 0.706rem + 0.1878vw, 0.875rem);
  --space-s:   clamp(1rem, 0.912rem + 0.3756vw, 1.25rem);
  --space-m:   clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);
  --space-l:   clamp(2rem, 1.6479rem + 1.5023vw, 3rem);
  --space-xl:  clamp(3rem, 2.4718rem + 2.2535vw, 4.5rem);
  --space-2xl: clamp(4rem, 3.2958rem + 3.0047vw, 6rem);
  --space-3xl: clamp(6rem, 4.9437rem + 4.507vw, 9rem);

  /* ---- Grid / layout ---- */
  --content-width: 45rem;   /* ~720px — article measure, matches the approved demo */
  --wide-width: 75rem;      /* ~1200px — entry headers, hero, chrome, wide callouts */
  --full-width: 90rem;      /* ~1440px — outer site container */
  --container-padding: clamp(1.25rem, 0.4577rem + 3.3803vw, 3.5rem);
  --grid-gutter: var(--space-m);
  --bleed-wide: calc((var(--wide-width) - var(--content-width)) / 2); /* extra reach for .alignwide beyond the content column */

  /* ---- Radius ----
     Small and square, deliberately — this is a stamped-leather aesthetic,
     not a rounded-card one. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-pill: 100px; /* reserved for pill-shaped controls only (e.g. toggles) */

  /* ---- Touch target ----
     Minimum size for every tappable control — buttons, links used as
     controls, list items in the drawer/widget. One token so this stays
     consistent instead of hand-typed at each call site. */
  --touch-target: 48px;

  /* ---- Motion ----
     "Fully Alive" tier, locked. All durations below are meant to be wrapped
     in @media (prefers-reduced-motion: no-preference) at the point of use —
     tokens don't enforce that themselves, the CSS that consumes them must. */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-reveal: 700ms;
  --duration-stamp: 500ms;
  --ease-standard: ease;
  --ease-stamp: cubic-bezier(.2, .9, .3, 1.2);

  /* ---- Z-index ----
     Only the layers the site actually needs (sticky header, floating share
     buttons, scroll-progress bar) — not a speculative full scale. */
  --z-progress: 30;
  --z-header: 20;
  --z-float-share: 15;
}

/* ---- Color: night ----
   Day is always the default, regardless of system preference — night only
   applies when the reader explicitly clicks the toggle (persisted to
   localStorage, see theme.js). No @media (prefers-color-scheme) here on
   purpose: that was tried and explicitly reverted per the site owner. */
:root[data-mode="night"]{
  --color-canvas: #1C140D;
  --color-canvas-raised: #251B12;
  --color-ink: #EDE3D0;
  --color-muted: #A89478;
  --color-rust: #D9662E;
  --color-rust-text: #E0793F;
  --color-forest: #7A9A76;
  --color-essays: #C56B82;
  --color-line: #3A2E20;
  --color-on-rust: #1C140D;
  --color-strategy: #C9A66B;       /* 7.92:1 on night canvas */
  --color-strategy-text: #D9B67A;  /* 9.45:1 on night canvas */
  --color-campus: #7B9BC2;         /* 6.33:1 on night canvas */
  --color-campus-text: #89A7CC;    /* 7.33:1 on night canvas */
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-s);
  text-wrap: balance;
  color: var(--color-ink);
}
h1{ font-size: var(--text-h1); }
h2{ font-size: var(--text-h2); }
h3{ font-size: var(--text-h3); }
h4{ font-size: var(--text-h4); }

p{ margin: 0 0 var(--space-m); }

a{
  color: var(--color-rust-text);
  text-decoration: none;
  background-image: linear-gradient(var(--color-rust-text), var(--color-rust-text));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 1px;
}
@media (prefers-reduced-motion: no-preference){
  a{ transition: background-size var(--duration-base) var(--ease-standard); background-size: 0% 2px; }
  a:hover, a:focus-visible{ background-size: 100% 2px; }
}

:focus-visible{
  outline: 2px solid var(--color-rust-text);
  outline-offset: 3px;
}

::selection{
  background: var(--color-rust);
  color: var(--color-on-rust);
}

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

.container{
  max-width: var(--full-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
.content{
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
.wide{
  max-width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ==========================================================================
   Accessibility utilities
   ========================================================================== */

.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.skip-link.screen-reader-text:focus{
  position: fixed !important;
  top: var(--space-s);
  left: var(--space-s);
  width: auto; height: auto;
  clip: auto;
  z-index: 100;
  background: var(--color-ink);
  color: var(--color-canvas);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
}

/* ==========================================================================
   Scroll progress bar (single posts only)
   ========================================================================== */

.progress-track{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: var(--z-progress);
}
.progress-fill{
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(90deg, var(--color-rust) 0 10px, var(--color-rust-text) 10px 20px);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header{
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--color-canvas) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.site-header-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-s);
}
.site-branding{ margin: 0; }
.site-branding-logo{ display: flex; align-items: center; }
.site-branding-logo img{ display: block; height: auto; max-height: 48px; width: auto; }
.site-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  color: var(--color-ink);
  background-image: none;
  padding-bottom: 0;
}
.site-header-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
}

/* ---- Strategy Desk portal trigger — understated, fine-bordered pill ---- */
.strategy-portal-trigger{
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: var(--space-3xs) var(--space-s);
  border: 1px solid var(--color-strategy);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-caption);
  letter-spacing: .02em;
  color: var(--color-strategy-text);
  background-image: none;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference){
  .strategy-portal-trigger{ transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); }
}
.strategy-portal-trigger:hover, .strategy-portal-trigger:focus-visible{
  background: var(--color-strategy);
  color: var(--color-on-rust);
}

/* Curated quick-links row — desktop only. The drawer (always available)
   covers mobile and carries the full menu, so this doesn't need its own
   narrow-screen treatment, just an on/off switch at the breakpoint. */
.site-header-nav{
  display: none;
  align-items: center;
  gap: var(--space-m);
  flex: 1;
  justify-content: center;
}
.site-header-nav a, .site-header-nav-search{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--color-ink);
  background-image: none;
  white-space: nowrap;
}
.site-header-nav-search{
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  min-height: var(--touch-target);
}
.site-header-nav a:hover, .site-header-nav a:focus-visible,
.site-header-nav-search:hover, .site-header-nav-search:focus-visible{ color: var(--color-rust-text); }
@media (min-width: 900px){
  .site-header-nav{ display: flex; }
}

.mode-toggle{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--touch-target);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-caption);
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-ink);
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
}
.mode-toggle:hover{ border-color: var(--color-rust-text); color: var(--color-rust-text); }
.mode-toggle .icon{ width: 18px; height: 18px; flex-shrink: 0; }

/* ==========================================================================
   Navigation drawer
   Single nav mechanism at every breakpoint — replaces what used to be an
   always-visible inline menu that wrapped to three rows on narrow screens.
   ========================================================================== */

.nav-trigger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-trigger:hover{ border-color: var(--color-rust-text); color: var(--color-rust-text); }
.nav-trigger .icon{ width: 20px; height: 20px; }

/* ---- Search panel ---- */
.search-panel{
  border-top: 1px solid var(--color-line);
  background: var(--color-canvas-raised);
}
.search-panel[hidden]{ display: none; }
.search-form{
  max-width: var(--wide-width);
  margin-inline: auto;
  padding: var(--space-m) var(--container-padding);
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
}
.search-input{ flex: 1 1 260px; max-width: none; }
.drawer-search-trigger{
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--touch-target);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lead);
  color: var(--color-ink);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}
.drawer-search-trigger:hover, .drawer-search-trigger:focus-visible{ color: var(--color-rust-text); }

.nav-backdrop{
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-ink) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-header);
}
.nav-backdrop.is-open{ opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference){
  .nav-backdrop{ transition: opacity var(--duration-base) var(--ease-standard); }
}

.nav-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: clamp(280px, 82vw, 360px);
  background: var(--color-canvas-raised);
  box-shadow: -8px 0 24px rgba(0,0,0,.18);
  z-index: calc(var(--z-header) + 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
}
.nav-drawer.is-open{ transform: translateX(0); }
@media (prefers-reduced-motion: no-preference){
  .nav-drawer{ transition: transform var(--duration-reveal) var(--ease-standard); }
}

.nav-drawer-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s) var(--space-m);
  border-bottom: 1px solid var(--color-line);
}
.nav-drawer-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  color: var(--color-ink);
}
.nav-drawer-close{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-ink);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-drawer-close:hover{ border-color: var(--color-rust-text); color: var(--color-rust-text); }
.nav-drawer-close .icon{ width: 18px; height: 18px; }

.nav-drawer-menu{ padding: var(--space-s) var(--space-m); border-bottom: 1px solid var(--color-line); }
.drawer-menu-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer-menu-list a{
  display: flex;
  align-items: center;
  min-height: var(--touch-target);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lead);
  color: var(--color-ink);
  background-image: none;
  border-bottom: 1px solid var(--color-line);
}
.drawer-menu-list li:last-child a{ border-bottom: none; }
.drawer-menu-list a:hover, .drawer-menu-list a:focus-visible{ color: var(--color-rust-text); }

.nav-drawer-volumes{ padding: var(--space-s) var(--space-m) var(--space-m); }
.nav-drawer-heading{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-2xs);
}
.volume-list{ list-style: none; margin: 0; padding: 0; }
.volume-list-link{
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--touch-target);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--color-ink);
  background-image: none;
}
.volume-list-link:hover, .volume-list-link:focus-visible{ color: var(--color-rust-text); }
.volume-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-muted);
}
.volume-list-link.is-volume-billionaire .volume-dot{ background: var(--color-rust-text); }
.volume-list-link.is-volume-adulting .volume-dot{ background: var(--color-forest); }
.volume-list-link.is-volume-lifestyle .volume-dot{ background: var(--color-essays); }
.volume-list-link.is-volume-campus .volume-dot{ background: var(--color-campus); }
.volume-list-count{
  margin-left: auto;
  font-size: var(--text-caption);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer{
  background: var(--color-canvas-raised);
  border-top: 1px solid var(--color-line);
  margin-top: var(--space-3xl);
}

.footer-columns{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  padding-block: var(--space-xl);
}
@media (min-width: 760px){
  .footer-columns{ grid-template-columns: 1fr 1fr 1fr; gap: var(--space-xl); }
}
/* Past 1000px there's room to stop stacking the 3 chapters in a single
   narrow column (Brand/Popular Stories don't need nearly as much height,
   so that stack was making the footer far taller than it needed to be).
   Brand and Popular Stories give up a little width, Chapters gains it, and
   footer-volumes below switches from a vertical stack to its own 3-column
   row inside that wider slot — same overall footer footprint, just
   reallocated. */
@media (min-width: 1000px){
  .footer-columns{ grid-template-columns: 1fr 1fr 1.8fr; }
}

.footer-column{ min-width: 0; }

.footer-logo{
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  color: var(--color-ink);
  background-image: none;
  margin-bottom: var(--space-2xs);
}
.footer-newsletter-heading{ margin-top: var(--space-m); }
.footer-brand .newsletter-form-row{ justify-content: flex-start; }
.footer-brand .newsletter-input{ flex: 1 1 auto; max-width: 220px; }

.footer-volumes{ display: flex; flex-direction: column; gap: var(--space-m); }
@media (min-width: 1000px){
  .footer-volumes{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-m);
    row-gap: var(--space-m);
  }
  /* Collections sits below the 3-across chapter row, spanning its full
     width, rather than squeezing in as an awkward 4th narrow column. */
  .footer-collections{
    grid-column: 1 / -1;
    margin-top: var(--space-xs);
    padding-top: var(--space-m);
    border-top: 1px solid var(--color-line);
  }
}

/* Chapter micro-cards — a distinct, footer-only treatment layered on top
   of the shared .volume-badge component via CSS scoping, not a separate
   class, so the pill-badge look everywhere else (cards, single posts,
   drawer) is untouched. Left-border color follows each chapter's own
   accent (rust/forest/essays) rather than a single fixed color, matching
   how every other chapter-color touchpoint on the site works. */
.footer-volume-block .volume-badge{
  display: flex;
  width: 100%;
  margin-bottom: var(--space-2xs);
  padding: var(--space-xs) var(--space-s);
  background: var(--color-canvas-raised);
  border: none;
  border-left: 3px solid currentColor;
  border-radius: 0 6px 6px 0;
}
@media (prefers-reduced-motion: no-preference){
  .footer-volume-block .volume-badge{ transition: background var(--duration-base) var(--ease-standard); }
}
.footer-volume-block .volume-badge:hover, .footer-volume-block .volume-badge:focus-visible{
  background: color-mix(in srgb, currentColor 10%, var(--color-canvas-raised));
}

.footer-bottom-bar{ border-top: 1px solid var(--color-line); }
.footer-bottom-bar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: wrap;
  padding-block: var(--space-m);
}
.site-footer-credit{
  font-size: var(--text-caption);
  color: var(--color-muted);
  margin: 0;
}
.footer-bottom-nav{
  display: flex;
  gap: var(--space-m);
  flex-wrap: wrap;
}
.footer-bottom-nav a{
  font-size: var(--text-caption);
  color: var(--color-muted);
  background-image: none;
}
.footer-bottom-nav a:hover, .footer-bottom-nav a:focus-visible{ color: var(--color-rust-text); }

/* ==========================================================================
   Homepage hero
   ========================================================================== */

.hero-section{
  background: var(--color-canvas-raised);
  padding-block: var(--space-3xl);
  margin-bottom: var(--space-l);
  border-radius: var(--radius-md);
}
.hero-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: center;
}
.hero-photo{ order: -1; }
@media (min-width: 760px){
  .hero-grid{ grid-template-columns: 1.1fr .9fr; gap: var(--space-xl); }
  .hero-photo{ order: 0; }
}
.hero-headline{
  font-size: var(--text-display);
  margin: 0 0 var(--space-m);
}
.hero-subtitle{
  font-size: var(--text-lead);
  color: var(--color-muted);
  margin: 0 0 var(--space-l);
  max-width: 46ch;
}
.hero-ctas{ display: flex; gap: var(--space-s); flex-wrap: wrap; }
.btn-secondary{
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-small);
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-md);
  background-image: none;
}
.btn-secondary:hover, .btn-secondary:focus-visible{ border-color: var(--color-rust-text); color: var(--color-rust-text); }

.hero-photo-img{
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
}

/* ==========================================================================
   Archive / blog index
   ========================================================================== */

.site-main{ padding-block: var(--space-l) var(--space-3xl); }

.archive-header{ margin-bottom: var(--space-l); max-width: var(--wide-width); }
.archive-title{ font-size: var(--text-h2); margin-bottom: var(--space-2xs); }
.archive-description{ color: var(--color-muted); font-size: var(--text-lead); margin: 0; }

.no-posts{ color: var(--color-muted); font-size: var(--text-lead); }

/* ---- Homepage chapter blocks ---- */
.chapter-block{ margin-bottom: var(--space-2xl); }
.chapter-block-head{ margin-bottom: var(--space-m); }
.chapter-block-title{ font-size: var(--text-h2); margin: 0; }
.chapter-block-title.is-volume-billionaire{ color: var(--color-rust-text); }
.chapter-block-title.is-volume-adulting{ color: var(--color-forest); }
.chapter-block-title.is-volume-lifestyle{ color: var(--color-essays); }
.chapter-block-title.is-volume-campus{ color: var(--color-campus); }
.chapter-block-viewall{ margin: var(--space-m) 0 0; }
.chapter-block-viewall a{
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-small);
  color: var(--color-rust-text);
  background-image: none;
}

/* ---- Chapter archive header ---- */
.chapter-header{
  padding-block: var(--space-xl) var(--space-l);
  margin-inline: auto;
}
.chapter-header-label{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-2xs);
}
.chapter-title{ font-size: var(--text-h1); margin: 0 0 var(--space-s); }
.chapter-title.is-volume-billionaire{ color: var(--color-rust-text); }
.chapter-title.is-volume-adulting{ color: var(--color-forest); }
.chapter-title.is-volume-lifestyle{ color: var(--color-essays); }
.chapter-title.is-volume-campus{ color: var(--color-campus); }
.chapter-title.is-strategy{ color: var(--color-strategy-text); }
.chapter-dek{ color: var(--color-muted); font-size: var(--text-lead); max-width: 60ch; margin: 0; }

.load-more-row{
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}
.js-load-more[disabled]{ opacity: .6; cursor: default; }

/* ==========================================================================
   Volumes catalog — Netflix-style rows
   ========================================================================== */

.volumes-catalog-header{ padding-block: var(--space-xl) var(--space-l); }
.volumes-catalog-header h1{ font-size: var(--text-h1); margin-bottom: var(--space-2xs); }
.volumes-catalog-header p{ color: var(--color-muted); font-size: var(--text-lead); margin: 0; }

.volume-row{ margin-bottom: var(--space-2xl); }
.volume-row-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  margin-bottom: var(--space-m);
}
.volume-row-title{ font-size: var(--text-h2); margin: 0; }
.volume-row-title.is-volume-billionaire{ color: var(--color-rust-text); }
.volume-row-title.is-volume-adulting{ color: var(--color-forest); }
.volume-row-title.is-volume-lifestyle{ color: var(--color-essays); }
.volume-row-title.is-volume-campus{ color: var(--color-campus); }
.volume-row-viewall{
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-small);
  color: var(--color-rust-text);
  background-image: none;
  white-space: nowrap;
}

.volume-row-scroll{
  max-width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  gap: var(--space-m);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2xs); /* room for the scrollbar so it doesn't sit flush against the cards */
}
.volume-row-card{
  flex: 0 0 260px;
  scroll-snap-align: start;
  display: block;
  background: var(--color-canvas-raised);
  border-radius: 8px;
  overflow: hidden;
  background-image: none;
  color: var(--color-ink);
}
.volume-row-card:hover, .volume-row-card:focus-visible{
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}
@media (prefers-reduced-motion: no-preference){
  .volume-row-card{ transition: transform 0.25s ease, box-shadow 0.25s ease; }
}
.volume-row-card-media{
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  background: var(--color-canvas-raised);
}
.volume-row-card-media img{ width: 100%; height: 100%; object-fit: cover; }
.volume-row-card-title{ font-size: var(--text-h4); margin: 0; padding: 1.25rem; }
.volume-row-card:hover .volume-row-card-title, .volume-row-card:focus-visible .volume-row-card-title{ color: var(--color-rust-text); }

.card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-l);
}

/* position:relative anchors the stretched-link overlay below, which makes
   the whole card clickable through a single real <a> (the title link) —
   no nested/duplicate links, no separate click handler needed.
   box-sizing:border-box is already set globally (see the * reset near the
   top of this file) — every card inherits it, not repeated per-component.
   border-radius+overflow:hidden live on this outer wrapper, not on
   .card-media individually, so the image's top corners get clipped by the
   SAME radius as the card itself instead of two independently-rounded
   edges that could show a sliver of mismatch between them. */
.card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-canvas-raised);
  border-radius: 8px;
  overflow: hidden;
}
.card:has(.card-title a:hover), .card:has(.card-title a:focus-visible){
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}
@media (prefers-reduced-motion: no-preference){
  .card{ transition: transform 0.25s ease, box-shadow 0.25s ease; }
}

.card-media{
  display: block;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  background: var(--color-canvas-raised);
}
.card-media img{ width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference){
  .card-media img{ transition: transform var(--duration-reveal) var(--ease-standard); }
  .card:has(.card-title a:hover) .card-media img,
  .card:has(.card-title a:focus-visible) .card-media img{ transform: scale(1.02); }
}

.card-body{ display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }

/* ==========================================================================
   Volume badges
   One accent per chapter of the anthology. Text-color + matching outline
   rather than a filled background — reuses the already contrast-checked
   text tokens instead of needing a separate "readable on top of" pairing
   for every accent.
   ========================================================================== */

.volume-badge{
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 var(--space-xs);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background-image: none;
  white-space: nowrap;
}
.volume-badge:hover, .volume-badge:focus-visible{
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.volume-badge.is-volume-billionaire{ color: var(--color-rust-text); }  /* Vol. II — the flagship original archive */
.volume-badge.is-volume-adulting{ color: var(--color-forest); }        /* Vol. III — mature/strategy content */
.volume-badge.is-volume-lifestyle{ color: var(--color-essays); }       /* Vol. I — Lifestyle & Inspiration */
.volume-badge.is-volume-campus{ color: var(--color-campus); }         /* Campus Life — hidden from primary nav, still a real chapter */

.kicker-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0 0 var(--space-2xs);
}
.kicker-row .card-kicker,
.kicker-row .single-kicker{ margin: 0; }

.card-kicker{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-rust-text);
  margin: 0 0 var(--space-2xs);
}

/* Extra badge alongside a volume/category kicker — e.g. "#CAMPUSLIFE" on
   category-campus-life.php — rendered as a small outlined pill so it reads
   distinctly from the plain-text kicker rather than duplicating it. */
.card-kicker-context{
  display: inline-flex;
  align-items: center;
  padding: 0.1em 0.6em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
}

.card-title{ font-size: var(--text-h4); margin: 0 0 var(--space-2xs); }
.card-title a{
  color: var(--color-ink);
  background-image: none;
}
.card-title a:hover, .card-title a:focus-visible{ color: var(--color-rust-text); }
/* Stretched link — extends the title's click area over the whole card
   (image, dek, byline included) without wrapping any of that in a second
   anchor. Other real links inside the card (e.g. a volume badge) still sit
   above this in stacking order since they're positioned content themselves. */
.card-title a::after{
  content: "";
  position: absolute;
  inset: 0;
}
.card .volume-badge{ position: relative; z-index: 1; }

.card-dek{
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-s);
  flex: 1;
}

.card-byline{
  font-size: var(--text-caption);
  color: var(--color-muted);
  margin: 0;
}

/* pagination */
.pagination, .navigation.pagination{
  display: flex;
  gap: var(--space-s);
  justify-content: center;
  margin-top: var(--space-2xl);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-small);
}
.pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  color: var(--color-ink);
  background-image: none;
  padding: var(--space-2xs) var(--space-s);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}
.pagination .page-numbers.current{
  background: var(--color-rust);
  color: var(--color-on-rust);
  border-color: var(--color-rust);
}
.pagination .page-numbers:hover{ border-color: var(--color-rust-text); }

/* ==========================================================================
   Reveal-on-scroll (Fully Alive tier)
   Wrapped in prefers-reduced-motion so a reader's OS setting silently wins
   regardless of anything else — see markmaish_design_system memory.
   ========================================================================== */

.reveal{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--duration-reveal) ease, transform var(--duration-reveal) ease;
  }
  .reveal.is-visible{ opacity: 1; transform: none; }
}

/* ==========================================================================
   Single post
   ========================================================================== */

.single-header{ padding-block: var(--space-xl) var(--space-m); }

.single-kicker{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-rust-text);
  margin: 0 0 var(--space-s);
}

.single-title{ font-size: var(--text-h1); margin: 0 0 var(--space-s); }
@media (prefers-reduced-motion: no-preference){
  .single-title{ animation: maish-stamp-in var(--duration-stamp) var(--ease-stamp) both; }
}
@keyframes maish-stamp-in{
  from{ opacity: 0; transform: scale(1.04) translateY(6px); }
  to{ opacity: 1; transform: none; }
}

.single-dek{
  font-family: var(--font-body);
  font-size: var(--text-lead);
  color: var(--color-muted);
  margin: 0 0 var(--space-m);
}

.single-byline{
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--text-caption);
  color: var(--color-muted);
  margin: 0 0 var(--space-m);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--color-line);
}

/* ---- Audio player ----
   One player, two data sources: a real <audio> element under the hood when
   a custom_audio_url (ACF) is set, or the Web Speech API otherwise. The
   seek bar behaves differently per-source (see theme.js) but looks and
   sits identically either way — deliberately distinct from the fixed
   scroll-progress bar at the very top of the page (different shape, color,
   and position; that one's a thin diagonal-striped bar pinned to the
   viewport edge, this is a rounded slider inside a bordered card). */
.audio-player{
  display: flex;
  align-items: center;
  gap: var(--space-s);
  max-width: var(--content-width);
  padding: var(--space-s) var(--space-m);
  background: var(--color-canvas-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}
.audio-play-toggle{
  flex-shrink: 0;
  width: var(--touch-target);
  height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--color-rust);
  color: var(--color-on-rust);
  cursor: pointer;
}
.audio-play-toggle:hover{ filter: brightness(1.08); }
.audio-play-toggle .icon{ width: 18px; height: 18px; }
.audio-play-toggle[hidden]{ display: none; }

.audio-time{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-caption);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 3.4em;
}
.audio-time:last-of-type{ text-align: right; }

.audio-seekbar{
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  min-width: 60px;
  border-radius: var(--radius-pill);
  background: var(--color-line);
  cursor: pointer;
}
.audio-seekbar::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-rust);
  border: 2px solid var(--color-canvas-raised);
  box-shadow: 0 0 0 1px var(--color-rust);
  cursor: pointer;
}
.audio-seekbar::-moz-range-thumb{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-rust);
  border: 2px solid var(--color-canvas-raised);
  box-shadow: 0 0 0 1px var(--color-rust);
  cursor: pointer;
}
.audio-seekbar::-moz-range-track{
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-line);
}
.audio-seekbar:focus-visible{ outline: 2px solid var(--color-rust-text); outline-offset: 3px; }

.audio-speed-toggle{
  flex-shrink: 0;
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  padding: 0 var(--space-xs);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  color: var(--color-ink);
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.audio-speed-toggle:hover{ border-color: var(--color-rust-text); color: var(--color-rust-text); }

@media (max-width: 480px){
  .audio-player{ gap: var(--space-2xs); padding: var(--space-xs) var(--space-s); }
  .audio-time{ min-width: 2.8em; font-size: 0.7rem; }
}

.single-hero{
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 70vh;
  overflow: hidden;
  margin-bottom: var(--space-l);
  background: var(--color-canvas-raised);
}
.single-hero img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 640px){
  .single-hero{ aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px){
  .single-hero{ aspect-ratio: 21 / 9; }
}

.audio-controls{ margin-block: var(--space-m); }

/* Bleed grid — `.single-layout` (not `.single-body` itself) is the width
   reference for the bleed system below, and it's intentionally NOT capped
   to --content-width (unlike `.single-header`, which uses the `.content`
   utility and stays narrow). `.entry-content` computes its [full]/[wide]
   columns against `.single-layout`'s box — once the sticky share sidebar
   exists (≥900px, see below), that box is the main column, not the true
   viewport edge, so "full bleed" bleeds to the edge of the reading column
   rather than crashing into the sidebar. That's a deliberate tradeoff, not
   an oversight: a full-bleed image and a persistent sidebar can't both have
   the outer edge at once. Default children sit in the [content] column at
   the normal article measure; the block editor's `.alignwide` / `.alignfull`
   classes place a child in the wider column. This is what makes
   `add_theme_support('align-wide')` (declared in functions.php) actually do
   something visually — the support flag alone doesn't bleed anything
   without this. */
.single-layout{
  max-width: var(--full-width);
  margin-inline: auto;
}
.single-body{ min-width: 0; } /* grid-child safety valve — lets the bleed-grid inside shrink instead of overflowing */
.entry-content{
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--container-padding), 1fr)
    [wide-start] minmax(0, var(--bleed-wide))
    [content-start] min(100% - (var(--container-padding) * 2), var(--content-width))
    [content-end] minmax(0, var(--bleed-wide))
    [wide-end] minmax(var(--container-padding), 1fr)
    [full-end];
}
.entry-content > *{ grid-column: content; }
.entry-content > .alignwide{ grid-column: wide; max-width: none; width: 100%; }
.entry-content > .alignfull{ grid-column: full; max-width: none; width: 100%; }
.entry-content > .alignwide img, .entry-content > .alignfull img{ width: 100%; }

/* Old imported-content photo credits ("Courtesy of X", "Photo: Y") from
   34 legacy posts' [caption] shortcodes — the image itself stays, this
   just drops WordPress's auto-rendered <figcaption class="wp-caption-text">
   credit line underneath it. */
.entry-content .wp-caption-text{ display: none; }

/* Drop cap — applied automatically to the real first paragraph of any post,
   not hand-authored per article. */
.entry-content > p:first-of-type::first-letter{
  float: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.4em;
  line-height: .8;
  color: var(--color-on-rust);
  background: var(--color-rust);
  padding: .12em .18em .06em;
  margin: .03em .16em 0 0;
  border-radius: 2px;
  transform: rotate(-1.5deg);
  box-shadow: 0 2px 0 rgba(0,0,0,.2);
}

.entry-content h2, .entry-content h3, .entry-content h4{ margin-top: var(--space-l); }

/* Pull quotes — the block editor's Quote block, styled as a stitched
   leather patch rather than a plain indent-and-italicize treatment. */
.entry-content blockquote{
  position: relative;
  margin: var(--space-l) 0;
  padding: var(--space-m) var(--space-l);
  background: var(--color-canvas-raised);
  border-radius: var(--radius-sm);
  border: none;
}
.entry-content blockquote::after{
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px dashed var(--color-muted);
  opacity: .35;
  border-radius: 1px;
  pointer-events: none;
}
.entry-content blockquote p{
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: var(--text-lead);
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0;
}

.entry-tags{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  max-width: var(--content-width);
  margin: var(--space-l) auto 0;
  padding: 0 var(--container-padding);
}
.entry-tags a{
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--color-canvas-raised);
  color: var(--color-ink);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background-image: none;
  box-shadow: inset 0 0 0 1px var(--color-line);
}
.entry-tags a:hover{ color: var(--color-rust-text); }

/* ==========================================================================
   Strategy Desk UI mode (body.theme-strategy)
   Base fonts, canvas, and layout ratios are untouched — this shifts accent
   tones only, on the Strategy hub archive and its single articles, plus
   crisper metadata formatting and clean uppercase topic tags.
   ========================================================================== */

body.theme-strategy .single-kicker,
body.theme-strategy .card-kicker{ color: var(--color-strategy-text); }

body.theme-strategy .single-title a,
body.theme-strategy .card-title a:hover,
body.theme-strategy .card-title a:focus-visible{ color: var(--color-strategy-text); }

body.theme-strategy .single-byline{
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--color-muted);
}

body.theme-strategy .entry-tags a{
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-strategy-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-strategy) 45%, var(--color-line));
}
body.theme-strategy .entry-tags a::before{ content: "#"; }
body.theme-strategy .entry-tags a:hover{ color: var(--color-strategy); }

/* ---- End-of-article cross-pollination card (single Strategy pieces) ---- */
.strategy-crosslink{
  margin: var(--space-2xl) auto 0;
  padding: var(--space-l);
  background: var(--color-canvas-raised);
  border-left: 3px solid var(--color-strategy);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  text-align: left;
}
.strategy-crosslink-kicker{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-strategy-text);
  margin: 0 0 var(--space-2xs);
}
.strategy-crosslink-body{ color: var(--color-muted); margin: 0 0 var(--space-s); }
.strategy-crosslink-cta{
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-strategy-text);
  background-image: none;
}
.strategy-crosslink-cta:hover, .strategy-crosslink-cta:focus-visible{ color: var(--color-strategy); }

/* ==========================================================================
   About page
   ========================================================================== */

.about-hero{ padding-top: var(--space-xl); }
.about-hero-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: center;
}
@media (min-width: 640px){
  .about-hero-grid{ grid-template-columns: auto 1fr; }
}
.about-photo{
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--color-canvas-raised);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.about-award-badge{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--touch-target);
  margin-top: var(--space-s);
  padding: var(--space-2xs) var(--space-s);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-canvas-raised);
  color: var(--color-rust-text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  background-image: none;
}
.about-award-badge:hover, .about-award-badge:focus-visible{ border-color: var(--color-rust-text); }
.about-award-badge .icon{ width: 16px; height: 16px; flex-shrink: 0; }

.about-bio{ padding-top: var(--space-xl); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.about-topics-heading{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: var(--space-l) 0 var(--space-2xs);
}
.about-topics-list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
}
.about-topics-list li{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-caption);
  color: var(--color-ink);
  background: var(--color-canvas-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-3xs) var(--space-xs);
}

.work-with-me{
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-line);
  scroll-margin-top: var(--space-xl);
}
.work-with-me-intro{ color: var(--color-muted); font-size: var(--text-lead); max-width: 46ch; }
.work-with-me-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  margin: var(--space-l) 0;
}
@media (min-width: 640px){
  .work-with-me-grid{ grid-template-columns: repeat(3, 1fr); }
}
/* This section is a Gutenberg Group block (About page content, wp-admin-
   editable) — core wraps its children in an auto-inserted
   .wp-block-group__inner-container div, which would otherwise become the
   grid's only child and collapse the 3 cards into one column. Unwrapping
   it with display:contents lets the cards themselves become direct grid
   items again. */
.work-with-me-grid > .wp-block-group__inner-container{ display: contents; }
.work-with-me-card{
  padding: var(--space-m);
  background: var(--color-canvas-raised);
  border-radius: var(--radius-md);
}
.work-with-me-card h3{ font-size: var(--text-h4); margin: 0 0 var(--space-2xs); }
.work-with-me-card p{ color: var(--color-muted); font-size: var(--text-small); margin: 0; }
.work-with-me-contact{ display: flex; gap: var(--space-s); flex-wrap: wrap; margin-top: var(--space-m); }

/* ==========================================================================
   Single-post layout: reading column + sticky share sidebar
   ========================================================================== */

/* Mobile-first: a single column, share row sits in normal flow right after
   .single-body (i.e. below .entry-tags) — no fixed positioning at all, so
   it can never overlap the header or footer. The two-column grid with a
   sticky sidebar is the desktop enhancement. */
.single-layout{ display: block; }
@media (min-width: 900px){
  .single-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--space-xl);
    align-items: start;
  }
}

/* Distinct surface + a real clipping boundary: position:sticky keeps this
   pinned while scrolling, but — unlike position:fixed — it can never escape
   its grid cell, so it stops scrolling with the page once .single-layout's
   bottom edge reaches it. That's what actually fixes the old "floats over
   the footer" bug, not just a z-index/positioning patch. */
.floating-widget{
  background: var(--color-canvas-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  padding: var(--space-m);
}
.floating-widget-share{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.share-btn{
  width: var(--touch-target);
  height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-canvas);
  color: var(--color-ink);
  cursor: pointer;
  text-decoration: none;
  background-image: none;
}
.share-btn .icon{ width: 20px; height: 20px; }
.share-btn[hidden]{ display: none; }
.share-btn:hover, .share-btn:focus-visible{ border-color: var(--color-rust-text); color: var(--color-rust-text); }

/* Real brand marks (X/Facebook/WhatsApp/TikTok) carry their own circular or
   rounded-square badge and fixed brand colors baked into the SVG itself —
   the neutral bordered-circle .share-btn treatment above was built for
   flat single-color icons, so it would just add a second ring around
   these. Transparent/borderless instead, with a scale nudge on hover
   standing in for the color-change hover every other icon here gets. */
.share-btn-brand{
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
}
.share-btn-brand .icon{ width: 40px; height: 40px; }
@media (prefers-reduced-motion: no-preference){
  .share-btn-brand{ transition: transform var(--duration-fast) var(--ease-standard); }
}
.share-btn-brand:hover, .share-btn-brand:focus-visible{ transform: scale(1.08); }

@media (min-width: 900px){
  .floating-widget{ position: sticky; top: 120px; }
}

/* ==========================================================================
   Related posts ("You Might Also Like") + end-of-article lists
   ========================================================================== */

.related-posts{ margin: var(--space-2xl) auto 0; }
.related-posts-heading{ font-size: var(--text-h3); margin: 0 0 var(--space-m); }
.related-posts-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}
@media (min-width: 640px){
  .related-posts-grid{ grid-template-columns: repeat(3, 1fr); }
}
.related-post-card{
  display: block;
  background: var(--color-canvas-raised);
  border-radius: 8px;
  overflow: hidden;
  background-image: none;
  color: var(--color-ink);
}
.related-post-card:hover, .related-post-card:focus-visible{
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}
@media (prefers-reduced-motion: no-preference){
  .related-post-card{ transition: transform 0.25s ease, box-shadow 0.25s ease; }
}
.related-post-media{
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  background: var(--color-canvas-raised);
}
.related-post-media img{ width: 100%; height: 100%; object-fit: cover; }
.related-post-title{ font-size: var(--text-h4); margin: 0; padding: 1.25rem; }
.related-post-card:hover .related-post-title, .related-post-card:focus-visible .related-post-title{ color: var(--color-rust-text); }

.end-of-article-lists{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  margin: var(--space-2xl) auto 0;
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-line);
}
@media (min-width: 640px){
  .end-of-article-lists{ grid-template-columns: 1fr 1fr; }
}
.floating-widget-heading{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-2xs);
}
.floating-widget-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.floating-widget-list a{
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-caption);
  line-height: 1.4;
  color: var(--color-ink);
  background-image: none;
}
.floating-widget-list a:hover, .floating-widget-list a:focus-visible{ color: var(--color-rust-text); }

/* ---- Popular Stories (footer) — thumbnail + 2-line clamped title ---- */
.popular-story-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.popular-story-link{
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background-image: none;
  color: var(--color-ink);
}
.popular-story-link:hover .popular-story-title, .popular-story-link:focus-visible .popular-story-title{ color: var(--color-rust-text); }
.popular-story-thumb{
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-canvas);
}
.popular-story-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.popular-story-title{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-caption);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Newsletter capture
   ========================================================================== */

.newsletter-box{
  margin: var(--space-2xl) auto 0;
  padding: var(--space-l);
  background: var(--color-canvas-raised);
  border-radius: var(--radius-md);
  text-align: center;
}
.newsletter-box h2{ font-size: var(--text-h3); margin: 0 0 var(--space-2xs); }
.newsletter-box > p{ color: var(--color-muted); margin: 0 0 var(--space-m); }
.newsletter-form-row{
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter-input{
  flex: 1 1 260px;
  max-width: 340px;
  min-height: var(--touch-target);
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink);
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 0 var(--space-s);
}
.newsletter-input:focus-visible{ outline: 2px solid var(--color-rust-text); outline-offset: 1px; }
.newsletter-honeypot{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
.newsletter-submit{ border: none; cursor: pointer; }
.newsletter-form-status{ font-size: var(--text-caption); margin: var(--space-xs) 0 0; min-height: 1.4em; }
.newsletter-form-status[data-state="error"]{ color: var(--color-rust-text); }
.newsletter-form-status[data-state="success"]{ color: var(--color-forest); }

/* ==========================================================================
   Shared button
   ========================================================================== */

.btn-primary{
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-small);
  background: var(--color-rust);
  color: var(--color-on-rust);
  border: none;
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.btn-primary:hover{ filter: brightness(1.08); }

/* ==========================================================================
   Comments
   ========================================================================== */

.comments-area{ padding-block: var(--space-xl); border-top: 1px solid var(--color-line); }
.comments-title, .comment-reply-title{ font-size: var(--text-h3); margin: 0 0 var(--space-m); }

.comment-list{ list-style: none; margin: 0 0 var(--space-l); padding: 0; }
.comment-list .children{ list-style: none; margin: 0; padding-left: var(--space-l); }

.comment-list .comment-body{
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--color-line);
}
.comment-list > li:last-child > .comment-body{ border-bottom: none; }

.comment-author{ display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-2xs); }
.comment-author .avatar{ border-radius: 50%; display: block; }
.comment-author .fn{ font-family: var(--font-body); font-weight: 700; font-style: normal; font-size: var(--text-small); color: var(--color-ink); }
.comment-metadata{ font-size: var(--text-caption); color: var(--color-muted); }
.comment-metadata a{ color: var(--color-muted); background-image: none; }

.comment-content p{ font-size: var(--text-small); margin: 0 0 var(--space-s); }

.reply{ margin-top: var(--space-2xs); }
.comment-reply-link{
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-rust-text);
  background-image: none;
}

.comments-closed{ color: var(--color-muted); }

.comment-form{ max-width: var(--content-width); }
.comment-form p{ margin: 0 0 var(--space-s); }
.comment-form label{
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted);
  margin-bottom: var(--space-3xs);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink);
  background: var(--color-canvas-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-s);
}
.comment-form textarea{ min-height: 8rem; }
.comment-form input:focus-visible, .comment-form textarea:focus-visible{
  outline: 2px solid var(--color-rust-text);
  outline-offset: 1px;
}