/*
Theme Name: StoriesNow
Theme URI: https://thestoriesnow.com
Author: TheStoriesNow
Description: A dark, cinematic reading theme for quiet psychological fiction. Built for TheStoriesNow.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: storiesnow
Tags: blog, one-column, custom-menu, featured-images
*/

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root {
  --ink:        #0B0B0D;
  --ink-2:      #121215;
  --ink-3:      #1B1B20;
  --paper:      #EDE7DC;
  --paper-dim:  #9C968C;
  --paper-faint:#6B665F;
  --amber:      #C9A227;
  --amber-soft: #E0BF56;

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:    "Lora", Georgia, "Times New Roman", serif;

  --measure: 34rem;
  --wide:    72rem;

  --step-0: 1.0625rem;
  --step-1: clamp(1.25rem, 0.9rem + 1vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.1rem + 2vw, 2.25rem);
  --step-3: clamp(2.1rem, 1.2rem + 4vw, 3.5rem);
  --step-4: clamp(2.6rem, 1.2rem + 6.5vw, 5.5rem);
}

/* ---------------------------------------------------------------
   2. Reset and base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--paper); text-decoration-color: var(--paper-faint); text-underline-offset: .25em; }
a:hover { color: var(--amber-soft); text-decoration-color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}

.container { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.reading   { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--paper); color: var(--ink);
  padding: .75rem 1.25rem; z-index: 999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

.eyebrow {
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--paper-faint);
  font-weight: 500;
  line-height: 1.4;
}
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--amber-soft); }

/* ---------------------------------------------------------------
   3. Header
   --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 11, 13, .9);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--ink-3);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1rem 0;
}
.site-title {
  font-family: var(--display);
  font-size: 1.45rem; font-weight: 600;
  letter-spacing: .02em; margin: 0;
}
.site-title a { text-decoration: none; color: var(--paper); }
.site-title a:hover { color: var(--amber-soft); }
.site-title .dot { color: var(--amber); }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--ink-3); border-radius: 2px;
  color: var(--paper); font-family: var(--body);
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .55rem .85rem; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--paper-faint); }

.main-nav ul {
  list-style: none; display: flex; align-items: center;
  gap: 1.75rem; margin: 0; padding: 0;
}
.main-nav a {
  text-decoration: none;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-dim); white-space: nowrap;
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.main-nav a:hover { color: var(--paper); border-bottom-color: var(--amber); }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-parent > a { color: var(--paper); border-bottom-color: var(--amber); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink-2); border-bottom: 1px solid var(--ink-3);
    padding: .5rem 0 1.25rem;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav li { border-top: 1px solid var(--ink-3); }
  .main-nav a { display: block; padding: .95rem 1.25rem; border-bottom: 0; }
  .main-nav a:hover { background: var(--ink-3); border-bottom: 0; }
}

/* ---------------------------------------------------------------
   4. Home hero
   --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(82vh, 640px);
  display: grid; align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--ink-3);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.05) brightness(.62); }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(11,11,13,1) 4%, rgba(11,11,13,.55) 48%, rgba(11,11,13,.2) 100%),
    radial-gradient(120% 90% at 50% 100%, rgba(11,11,13,0) 40%, rgba(11,11,13,.7) 100%);
}
.hero__body { position: relative; padding: 5rem 0 3.5rem; }
.hero__kicker { color: var(--amber); margin-bottom: 1.25rem; }
.hero__title {
  font-size: var(--step-4);
  max-width: 16ch;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.hero__title a { text-decoration: none; }
.hero__dek {
  max-width: 44ch; color: var(--paper-dim);
  font-size: var(--step-1); line-height: 1.55; margin: 0 0 2rem;
}
.hero__meta { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }

.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none;
  padding: .9rem 1.75rem;
  border: 1px solid var(--amber);
  color: var(--amber-soft);
  background: transparent;
  transition: background .25s, color .25s;
}
.btn:hover { background: var(--amber); color: var(--ink); }
.btn--ghost { border-color: var(--ink-3); color: var(--paper-dim); }
.btn--ghost:hover { background: transparent; border-color: var(--paper-dim); color: var(--paper); }

/* ---------------------------------------------------------------
   5. Sections
   --------------------------------------------------------------- */
.section { padding: 5rem 0; }
.section--tight { padding: 3.5rem 0; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; margin-bottom: 2.75rem;
  border-bottom: 1px solid var(--ink-3);
}
.section-head h2 { font-size: var(--step-2); margin: 0; }
.section-head a { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); text-decoration: none; }
.section-head a:hover { color: var(--amber-soft); }

/* ---------------------------------------------------------------
   6. Story cards
   --------------------------------------------------------------- */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 3rem 2rem;
}
.story-card { display: flex; flex-direction: column; }
.story-card__media {
  display: block; position: relative;
  aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--ink-2);
  margin-bottom: 1.25rem;
}
.story-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.4) brightness(.78);
  transition: transform .7s cubic-bezier(.2,.6,.2,1), filter .5s;
}
.story-card:hover .story-card__media img { transform: scale(1.04); filter: grayscale(0) brightness(.92); }
.story-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,13,.8), rgba(11,11,13,0) 55%);
}
.story-card__title {
  font-size: var(--step-1); margin: 0 0 .5rem; line-height: 1.2;
}
.story-card__title a { text-decoration: none; }
.story-card__title a:hover { color: var(--amber-soft); }
.story-card__excerpt { color: var(--paper-dim); font-size: .95rem; line-height: 1.65; margin: 0 0 .9rem; }
.story-card__meta { margin-top: auto; }

.story-feature {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.4fr 1fr;
  align-items: start;
}
@media (max-width: 860px) { .story-feature { grid-template-columns: 1fr; } }
.story-feature .story-card--lead .story-card__media { aspect-ratio: 4 / 3; }
.story-feature .story-card--lead .story-card__title { font-size: var(--step-2); }
.story-feature__side { display: grid; gap: 2rem; }
.story-card--row { flex-direction: row; gap: 1.25rem; align-items: flex-start; }
.story-card--row .story-card__media { width: 7.5rem; flex: none; aspect-ratio: 3/4; margin-bottom: 0; }
.story-card--row .story-card__title { font-size: 1.15rem; }
.story-card--row .story-card__excerpt { font-size: .875rem; margin-bottom: .5rem; }

/* ---------------------------------------------------------------
   7. Theme cards
   --------------------------------------------------------------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; }
.theme-card {
  display: block; text-decoration: none;
  border: 1px solid var(--ink-3); padding: 1.75rem 1.5rem;
  background: var(--ink-2);
  transition: border-color .25s, background .25s, transform .25s;
}
.theme-card:hover { border-color: var(--amber); background: #16161a; transform: translateY(-2px); }
.theme-card h3 { font-size: 1.4rem; margin: 0 0 .4rem; }
.theme-card p { margin: 0; color: var(--paper-dim); font-size: .9rem; line-height: 1.6; }
.theme-card .eyebrow { margin-top: .9rem; display: block; }

/* ---------------------------------------------------------------
   8. Quote band
   --------------------------------------------------------------- */
.band {
  border-top: 1px solid var(--ink-3);
  border-bottom: 1px solid var(--ink-3);
  background: var(--ink-2);
  padding: 5rem 0;
  text-align: center;
}
.band blockquote {
  margin: 0 auto; max-width: 30ch;
  font-family: var(--display); font-size: var(--step-3);
  line-height: 1.2; color: var(--paper);
}
.band cite { display: block; margin-top: 1.75rem; font-style: normal; }

/* ---------------------------------------------------------------
   9. Single story
   --------------------------------------------------------------- */
.story-header { padding: 4.5rem 0 2.5rem; text-align: center; }
.story-header .eyebrow { color: var(--amber); }
.story-header h1 { font-size: var(--step-3); margin: 1.25rem auto .9rem; max-width: 18ch; text-wrap: balance; }
.story-header__meta { color: var(--paper-faint); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.story-header__meta span + span::before { content: "\00B7"; margin: 0 .6rem; color: var(--ink-3); }

.story-hero {
  max-width: 54rem; margin: 0 auto 3.5rem;
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-2);
}
.story-hero img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) brightness(.8); }

.story-body { font-size: 1.1875rem; line-height: 1.95; }
.story-body p { margin: 0 0 1.6em; }
.story-body > p:first-of-type::first-letter {
  font-family: var(--display);
  float: left; font-size: 3.6em; line-height: .82;
  padding: .06em .12em 0 0; color: var(--amber);
}
.story-body h2, .story-body h3 { margin: 2.5em 0 .6em; }
.story-body h2 { font-size: var(--step-2); }
.story-body blockquote {
  margin: 2.5em 0; padding-left: 1.5rem;
  border-left: 2px solid var(--amber);
  font-family: var(--display); font-size: 1.5rem; line-height: 1.35; color: var(--paper);
}
.story-body img { margin: 2.5em auto; }
.story-body hr {
  border: 0; margin: 3em auto; width: 6rem;
  border-top: 1px solid var(--ink-3);
}
.story-body ul, .story-body ol { padding-left: 1.4em; margin: 0 0 1.6em; }
.story-body li { margin-bottom: .6em; }
.story-body a { color: var(--amber-soft); }

.story-end {
  text-align: center; margin: 4rem 0 0;
  color: var(--paper-faint); letter-spacing: .6em; font-size: .8rem;
}

.story-footer { border-top: 1px solid var(--ink-3); margin-top: 4rem; padding-top: 2.5rem; }
.story-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.story-tags a {
  text-decoration: none; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--ink-3); padding: .45rem .9rem; color: var(--paper-dim);
}
.story-tags a:hover { border-color: var(--amber); color: var(--amber-soft); }

.story-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 640px) { .story-nav { grid-template-columns: 1fr; } }
.story-nav a { text-decoration: none; display: block; }
.story-nav .eyebrow { display: block; margin-bottom: .5rem; }
.story-nav strong { font-family: var(--display); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.story-nav .next { text-align: right; }
@media (max-width: 640px) { .story-nav .next { text-align: left; } }

/* ---------------------------------------------------------------
   9b. Legacy story classes
   The stories were written with their own inline <style> blocks.
   Those are stripped on output (see functions.php) and the class
   names are re-styled here, dark-native and consistent.
   --------------------------------------------------------------- */

/* The old layout wrappers become plain flow. */
.story-body .story-wrapper,
.story-body .story-container,
.story-body .storybook,
.story-body .tsn-editorial,
.story-body .snow-candle-story {
  max-width: none; margin: 0; padding: 0;
  background: none; color: inherit; font-family: inherit;
  line-height: inherit;
}
.story-body .story-wrapper p,
.story-body .story-container p,
.story-body .storybook p { font-size: inherit; margin: 0 0 1.6em; }

/* The body repeats the title and subtitle; keep the subtitle as a dek. */
.story-body .story-title { display: none; }
.story-body .story-subtitle,
.story-body .story-epigraph {
  font-family: var(--display);
  font-size: 1.5rem; font-style: italic;
  text-align: center; color: var(--paper-dim);
  margin: 0 0 2.5em;
}

/* Beats and pauses. */
.story-body .pause,
.story-body .quiet-gap,
.story-body .story-divider,
.story-body .tsn-divider,
.story-body .decor-line,
.story-body .glow-line,
.story-body .after-line {
  text-align: center; letter-spacing: .6em;
  color: var(--paper-faint); margin: 3em 0;
  background: none; height: auto;
}
.story-body .story-divider:empty,
.story-body .tsn-divider:empty,
.story-body .decor-line:empty,
.story-body .glow-line:empty,
.story-body .after-line:empty {
  height: 1px; margin: 3em auto; width: 6rem;
  background: var(--ink-3); letter-spacing: 0;
}

/* Emphasis. */
.story-body .highlight,
.story-body .story-highlight,
.story-body .soft-highlight,
.story-body .editorial-highlight,
.story-body .final-highlight,
.story-body .heavy,
.story-body .slam,
.story-body .focus,
.story-body .story-emphasis {
  color: var(--paper); font-weight: 500;
}
.story-body .blood,
.story-body .story-horror { color: #C4553D; font-weight: 500; }
.story-body .glow-text,
.story-body .story-reveal,
.story-body .realization,
.story-body .story-command { color: var(--amber-soft); font-weight: 500; }

/* Quiet voices. */
.story-body .whisper,
.story-body .story-whisper,
.story-body .final-whisper,
.story-body .after-whisper,
.story-body .muted,
.story-body .secondary,
.story-body .story-note,
.story-body .sound,
.story-body .story-absence {
  color: var(--paper-dim); font-style: italic;
}

/* Speech. */
.story-body .dialogue,
.story-body .story-dialogue,
.story-body .story-question {
  font-style: italic; color: var(--paper);
  padding-left: 1.25rem; border-left: 1px solid var(--ink-3);
  margin: 2em 0;
}

/* Pull quotes and closing lines. */
.story-body .quote,
.story-body .story-quote,
.story-body .reflection,
.story-body .story-contrast {
  font-family: var(--display); font-size: 1.5rem; line-height: 1.35;
  color: var(--paper); margin: 2.5em 0;
  padding-left: 1.5rem; border-left: 2px solid var(--amber);
}
.story-body .final-line,
.story-body .story-last-line,
.story-body .story-final,
.story-body .final-thought,
.story-body .ending,
.story-body .story-ending,
.story-body .story-inevitable {
  font-family: var(--display); font-size: 1.6rem; line-height: 1.3;
  color: var(--paper); margin: 2em 0 0;
}
.story-body .end-mark,
.story-body .story-end,
.story-body .after-story {
  text-align: center; letter-spacing: .6em;
  color: var(--paper-faint); margin: 3em 0 0;
}

/* Sections the author deliberately set dark stay dark — as a panel. */
.story-body .story-dark,
.story-body .mirror,
.story-body .story-shift {
  background: #08080A;
  border: 1px solid var(--ink-3);
  padding: 2rem 1.75rem;
  margin: 2.5em 0;
}

/* The end-of-story call to action. */
.story-body .cta-box,
.story-body .glow-cta,
.story-body .tsn-cta-card,
.story-body .tsn-follow-block,
.story-body .after-cta {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  padding: 2.25rem 1.75rem;
  margin: 3em 0 0;
  text-align: center;
}
.story-body .cta-label,
.story-body .tsn-cta-text { display: block; color: var(--paper-dim); margin-bottom: 1rem; }
.story-body .cta-subtext,
.story-body .after-text,
.story-body .tsn-follow-copy { color: var(--paper-dim); font-size: .95rem; }
.story-body .cta-button,
.story-body .tsn-cta-action,
.story-body .tsn-follow-cta,
.story-body .story-link,
.story-body .after-link,
.story-body .simple-follow a {
  display: inline-block;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none;
  padding: .9rem 1.75rem; margin-top: .5rem;
  border: 1px solid var(--amber); color: var(--amber-soft);
  background: transparent;
  transition: background .25s, color .25s;
}
.story-body .cta-button:hover,
.story-body .tsn-cta-action:hover,
.story-body .tsn-follow-cta:hover,
.story-body .story-link:hover,
.story-body .after-link:hover { background: var(--amber); color: var(--ink); }

/* Openings and continuations. */
.story-body .opening,
.story-body .editorial-lead,
.story-body .story-paragraph,
.story-body .story-text,
.story-body .continuation-text,
.story-body .story-continuation,
.story-body .story-transition,
.story-body .story-after,
.story-body .story-afterglow,
.story-body .story-warmth,
.story-body .story-object,
.story-body .read { color: inherit; }

/* Galleries inside stories. */
.story-body .wp-block-gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 2.5em 0; }
.story-body .wp-block-gallery figure { margin: 0; }
.story-body .wp-block-image { margin: 2.5em 0; }

/* The ratings plugin sits below the story. */
.story-body .post-ratings { margin-top: 2.5em; color: var(--paper-dim); }

/* Drop cap: the first paragraph may be nested in a legacy wrapper. */
.story-body > .story-wrapper:first-child > p:first-of-type::first-letter,
.story-body > .story-container:first-child > p:first-of-type::first-letter {
  font-family: var(--display);
  float: left; font-size: 3.6em; line-height: .82;
  padding: .06em .12em 0 0; color: var(--amber);
}

/* ---------------------------------------------------------------
   10. Page hero
   --------------------------------------------------------------- */
.page-hero { padding: 5rem 0 3rem; border-bottom: 1px solid var(--ink-3); margin-bottom: 4rem; }
.page-hero .eyebrow { color: var(--amber); }
.page-hero h1 { font-size: var(--step-3); margin: 1rem 0 .75rem; max-width: 20ch; }
.page-hero p { color: var(--paper-dim); max-width: 52ch; margin: 0; font-size: var(--step-1); line-height: 1.55; }

.filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.filter-bar a {
  text-decoration: none; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--ink-3); padding: .5rem 1rem; color: var(--paper-dim);
}
.filter-bar a:hover, .filter-bar a[aria-current="page"] { border-color: var(--amber); color: var(--amber-soft); }

/* ---------------------------------------------------------------
   11. Static pages
   --------------------------------------------------------------- */
.page-body { font-size: 1.125rem; line-height: 1.85; }
.page-body p { margin: 0 0 1.5em; }
.page-body h2 { font-size: var(--step-2); margin: 2.2em 0 .6em; }
.page-body h3 { font-size: var(--step-1); margin: 2em 0 .5em; }
.page-body ul, .page-body ol { padding-left: 1.4em; margin: 0 0 1.5em; }
.page-body li { margin-bottom: .55em; }
.page-body a { color: var(--amber-soft); }
.page-body blockquote {
  margin: 2em 0; padding-left: 1.5rem; border-left: 2px solid var(--amber);
  font-family: var(--display); font-size: 1.45rem; line-height: 1.35;
}
.page-body img { margin: 2em auto; }

/* ---------------------------------------------------------------
   12. Pagination
   --------------------------------------------------------------- */
.pagination { margin-top: 4rem; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.pagination .page-numbers {
  text-decoration: none; padding: .6rem .95rem;
  border: 1px solid var(--ink-3); color: var(--paper-dim);
  font-size: .85rem;
}
.pagination .page-numbers:hover { border-color: var(--paper-faint); color: var(--paper); }
.pagination .page-numbers.current { border-color: var(--amber); color: var(--amber-soft); }

/* ---------------------------------------------------------------
   13. Search form
   --------------------------------------------------------------- */
.search-form { display: flex; gap: .5rem; max-width: 26rem; }
.search-form input[type="search"] {
  flex: 1; background: var(--ink-2); border: 1px solid var(--ink-3);
  color: var(--paper); font-family: var(--body); font-size: .95rem;
  padding: .75rem 1rem;
}
.search-form input[type="search"]::placeholder { color: var(--paper-faint); }
.search-form input[type="search"]:focus { border-color: var(--amber); outline: none; }
.search-form button {
  background: transparent; border: 1px solid var(--ink-3); color: var(--paper-dim);
  font-family: var(--body); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .75rem 1.25rem; cursor: pointer;
}
.search-form button:hover { border-color: var(--amber); color: var(--amber-soft); }

/* ---------------------------------------------------------------
   14. Footer
   --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--ink-3);
  margin-top: 6rem;
  padding: 4rem 0 2.5rem;
  background: var(--ink-2);
}
.footer-grid {
  display: grid; gap: 3rem;
  grid-template-columns: 1.5fr 1fr 1fr;
  margin-bottom: 3rem;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 2.25rem; } }
.footer-brand h3 { font-size: 1.4rem; margin: 0 0 .75rem; }
.footer-brand p { color: var(--paper-dim); margin: 0 0 1.5rem; max-width: 34ch; font-size: .95rem; }
.footer-col h4 { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-faint); font-family: var(--body); font-weight: 500; margin: 0 0 1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .6rem; }
.footer-col a { text-decoration: none; color: var(--paper-dim); font-size: .92rem; }
.footer-col a:hover { color: var(--amber-soft); }
.footer-bottom {
  border-top: 1px solid var(--ink-3); padding-top: 1.75rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--paper-faint); font-size: .8rem;
}
.footer-bottom a { color: var(--paper-faint); text-decoration: none; }
.footer-bottom a:hover { color: var(--paper-dim); }

/* ---------------------------------------------------------------
   15. Utilities
   --------------------------------------------------------------- */
.alignwide  { width: min(100%, 62rem); margin-inline: auto; }
.aligncenter { margin-inline: auto; }
.wp-caption-text, figcaption { color: var(--paper-faint); font-size: .82rem; text-align: center; margin-top: .75rem; }