/* ==========================================================================
   JAMES F. MULHERN — Author / Editor / Publisher
   Art Deco design system. Midnight + antique gold.
   ========================================================================== */

/* <picture> wrappers (WebP + fallback) should be invisible to layout —
   the inner <img> keeps every existing rule and sizing behavior. */
picture {
  display: contents;
}

:root, [data-theme="light"] {
  /* Surfaces — soft warm parchment, lets maroon + green lead */
  --color-bg: #f4ecd9;               /* warm parchment cream */
  --color-surface: #fbf5e3;          /* lighter parchment */
  --color-surface-2: #ebe0c4;        /* aged paper */
  --color-surface-offset: #ddd0ac;
  --color-surface-deep: #d4c69e;
  --color-divider: #b8a47a;          /* faded brass divider */
  --color-border: #6b2a2f;           /* maroon border */

  /* Text — deep maroon and forest green tinted neutrals */
  --color-text: #2a1e1f;             /* very dark plum, almost black */
  --color-text-muted: #4a3d2a;       /* warm umber */
  --color-text-faint: #8a7e6a;
  --color-text-inverse: #2a1e1f;

  /* PRIMARY ACCENTS — deep MAROON and DARK GREEN now dominate */
  --color-oxblood: #6b1f24;          /* deep maroon, primary */
  --color-oxblood-bright: #8a2d32;
  --color-oxblood-deep: #4a1216;
  --color-oxblood-soft: #d4a5a7;

  --color-forest: #1f3a26;           /* dark hunter / racing green, primary */
  --color-forest-bright: #2e4f35;
  --color-forest-deep: #122418;
  --color-forest-soft: #b8c9b3;

  --color-brass: #7e6133;             /* aged brass — supporting only */
  --color-brass-bright: #a27c44;
  --color-brass-deep: #5f4620;
  --color-brass-soft: #d8c394;
  --color-on-accent: #fffbf2;             /* text on gold/oxblood fills */

  /* Legacy aliases — 'gold' now means brass, 'maroon' means oxblood */
  --color-gold: var(--color-brass);
  --color-gold-bright: var(--color-brass-bright);
  --color-gold-deep: var(--color-brass-deep);
  --color-gold-soft: var(--color-brass-soft);

  --color-maroon: var(--color-oxblood);
  --color-maroon-bright: var(--color-oxblood-bright);
  --color-maroon-deep: var(--color-oxblood-deep);
  --color-maroon-soft: var(--color-oxblood-soft);

  --color-sage: var(--color-forest);
  --color-sage-bright: var(--color-forest-bright);
  --color-sage-deep: var(--color-forest-deep);
  --color-sage-soft: var(--color-forest-soft);

  --color-deco-deep: var(--color-forest);
  --color-burgundy: var(--color-oxblood);

  /* Type scale — bumped ~10–12% larger across the board for readability,
     except .excerpt-body (sample writing) which keeps the original sizes. */
  --text-xs: clamp(0.8rem, 0.76rem + 0.22vw, 0.92rem);
  --text-sm: clamp(0.9rem, 0.85rem + 0.28vw, 1.04rem);
  --text-base: clamp(1.12rem, 1.06rem + 0.28vw, 1.24rem);
  --text-lg: clamp(1.26rem, 1.12rem + 0.7vw, 1.58rem);
  --text-xl: clamp(1.68rem, 1.34rem + 1.4vw, 2.52rem);
  --text-2xl: clamp(2.24rem, 1.56rem + 2.7vw, 3.8rem);
  --text-3xl: clamp(2.8rem, 1.56rem + 4.5vw, 5.6rem);
  --text-hero: clamp(2.8rem, 1rem + 6vw, 6.5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Type families — sober Roman, library aesthetic */
  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-deco: "Marcellus SC", "Cinzel", serif;
  --font-body: "EB Garamond", "Garamond", "Georgia", serif;
  --font-ui: "Marcellus SC", "Cinzel", serif;

  /* Misc */
  --radius-sm: 2px;
  --radius-md: 4px;
  --content-narrow: 640px;
  --content-default: 1040px;
  --content-wide: 1240px;

  --transition-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(26, 34, 56, 0.08);
  --shadow-md: 0 8px 28px rgba(26, 34, 56, 0.12);
  --shadow-lg: 0 24px 48px rgba(26, 34, 56, 0.18);
}

[data-theme="dark"] {
  /* Dark mode — soft grayish-blue evening palette */
  --color-bg: #3d4a55;               /* light grayish blue */
  --color-surface: #455260;          /* slightly lifted card surface */
  --color-surface-2: #4f5c6a;        /* nav / footer band */
  --color-surface-offset: #59667a;
  --color-surface-deep: #2f3a44;     /* deepest recessed surface */
  --color-divider: #5a6675;
  --color-border: #e0b568;           /* unified gold border */

  --color-text: #f1ecdc;
  --color-text-muted: #d8d0bb;
  --color-text-faint: #9aa3ad;
  --color-text-inverse: #3d4a55;

  /* DARK MODE — UNIFIED ACCENT.
     All gold, brass, oxblood/maroon, and sage/forest tokens resolve to the
     same warm readable champagne-gold so titles, eyebrows, section h3s,
     rules, and decorative accents are visually consistent. */
  --color-oxblood: #e0b568;            /* unified gold (titles, eyebrows, accents) */
  --color-oxblood-bright: #ecc88a;     /* brighter highlight */
  --color-oxblood-deep: #b8884a;       /* deeper variant for rules/borders */
  --color-oxblood-soft: #3a2c14;

  --color-forest: #e0b568;             /* sage → gold (was greenish, hard to read) */
  --color-forest-bright: #ecc88a;
  --color-forest-deep: #b8884a;
  --color-forest-soft: #2a2620;

  --color-brass: #e0b568;              /* unified gold */
  --color-brass-bright: #ecc88a;
  --color-brass-deep: #b8884a;
  --color-brass-soft: #3a2f1c;
  --color-on-accent: #2a324a;             /* text on gold fills in dark mode */

  --color-gold: var(--color-brass);
  --color-gold-bright: var(--color-brass-bright);
  --color-gold-deep: var(--color-brass-deep);
  --color-gold-soft: var(--color-brass-soft);

  --color-maroon: var(--color-oxblood);
  --color-maroon-bright: var(--color-oxblood-bright);
  --color-maroon-deep: var(--color-oxblood-deep);
  --color-maroon-soft: var(--color-oxblood-soft);

  --color-sage: var(--color-forest);
  --color-sage-bright: var(--color-forest-bright);
  --color-sage-deep: var(--color-forest-deep);
  --color-sage-soft: var(--color-forest-soft);

  --color-deco-deep: var(--color-forest);
  --color-burgundy: var(--color-oxblood);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #3d4a55;
    --color-surface: #455260;
    --color-surface-2: #4f5c6a;
    --color-surface-offset: #59667a;
    --color-surface-deep: #2f3a44;
    --color-divider: #5a6675;
    --color-border: #e0b568;
    --color-text: #f1ecdc;
    --color-text-muted: #d8d0bb;
    --color-text-faint: #9aa3ad;
    --color-text-inverse: #3d4a55;
    --color-oxblood: #e0b568;
    --color-forest: #e0b568;
    --color-brass: #e0b568;
    --color-gold: #e0b568;
    --color-gold-bright: #dcbe7e;
    --color-gold-deep: #8a6d3a;
    --color-gold-soft: #3a2f1c;
    --color-maroon: #c9994a;
    --color-deco-deep: #8aae8c;
    --color-burgundy: #c9994a;
  }
}

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

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-20);
  /* Hard-stop any horizontal scroll at the document root. `clip` (rather than
     `hidden`) suppresses the scroll container entirely, which is the reliable
     fix for iOS Safari letting wide content push the page sideways. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  min-height: 100dvh;
  line-height: 1.72;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  /* Subtle paper grain via SVG noise + warm vignette */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    radial-gradient(at 20% 8%, rgba(176, 138, 62, 0.06), transparent 50%),
    radial-gradient(at 80% 92%, rgba(176, 138, 62, 0.05), transparent 50%);
  background-attachment: fixed;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

/* Unify the Hopper paintings as a single curated collection */
img[src*="images/hopper/"] {
  filter: sepia(0.04) saturate(0.95) contrast(1.0) brightness(1.18);
  transition: filter 500ms ease, box-shadow 500ms ease;
}
img[src*="images/hopper/"][loading="eager"] {
  animation: hopper-fade 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
[data-theme="dark"] img[src*="images/hopper/"] {
  filter: sepia(0.04) saturate(0.92) brightness(1.05);
}
@keyframes hopper-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-interactive);
}

a:hover { color: var(--color-gold-deep); }
[data-theme="dark"] a:hover { color: var(--color-gold-bright); }

button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }

::selection { background: var(--color-gold-soft); color: var(--color-text); }

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

/* Base heading hierarchy — traditional weight + size progression.
   Override individual treatments below as needed (hero name, deco plaques, etc.). */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  line-height: 1.2;
  font-family: var(--font-display);
  color: var(--color-oxblood);
  margin: 0;
}
/* Traditional, bolder hierarchy with clear size jumps + proper spacing.
   H1 dominates a page; H2 dominates a section; H3 dominates a subsection.
   Margins follow Chicago-style: more space above than below to bind heading
   to the content that follows. */
h1 {
  font-weight: 600;
  font-size: clamp(2.6rem, 1.4rem + 4vw, 5rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
  margin: 0 0 clamp(var(--space-6), 2.5vw, var(--space-10));
}
h2 {
  font-weight: 600;
  font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3rem);
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin: clamp(var(--space-12), 4vw, var(--space-16)) 0 clamp(var(--space-5), 2vw, var(--space-8));
}
h3 {
  font-weight: 700;
  font-size: clamp(1.35rem, 0.95rem + 1.1vw, 1.85rem);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: clamp(var(--space-8), 3vw, var(--space-12)) 0 clamp(var(--space-4), 1.5vw, var(--space-6));
}
h4 {
  font-weight: 700;
  font-size: clamp(1.15rem, 0.95rem + 0.5vw, 1.4rem);
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin: clamp(var(--space-6), 2vw, var(--space-9)) 0 clamp(var(--space-3), 1vw, var(--space-5));
}
h5 {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin: var(--space-6) 0 var(--space-3);
}
h6 {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin: var(--space-5) 0 var(--space-2);
}

/* First heading inside a section/container gets no top margin — the section
   itself provides the padding. */
.section > .container > h1:first-child,
.section > .container > h2:first-child,
.section > .container > h3:first-child,
.section > .container > .container-narrow > h2:first-child,
.section-title h1, .section-title h2, .section-title h3,
.page-header h1, .page-header h2,
.intro-text h2, .featured-book-info h3 { margin-top: 0; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--color-oxblood-bright); }
p { text-wrap: pretty; max-width: 68ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container { width: 100%; max-width: var(--content-default); margin-inline: auto; padding-inline: var(--space-6); }
.container-wide { max-width: var(--content-wide); }
.container-narrow { max-width: var(--content-narrow); }

.section { padding-block: clamp(var(--space-16), 10vw, var(--space-32)); }
.closing-deco { padding-block: var(--space-10); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease, box-shadow 240ms ease;
}

.site-header.scrolled {
  border-bottom-color: var(--color-divider);
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  max-width: var(--content-wide);
  margin-inline: auto;
  gap: clamp(var(--space-3), 2vw, var(--space-6));
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-deco);
  font-weight: 400;
  font-size: var(--text-base);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text);
}

.brand-mark { width: 32px; height: 32px; color: var(--color-gold); flex-shrink: 0; }

.nav-links {
  display: flex;
  gap: clamp(0.6rem, 1vw, var(--space-5));
  list-style: none;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.nav-links a {
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 0.6rem + 0.35vw, 0.85rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  position: relative;
  padding-block: var(--space-2);
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: width var(--transition-interactive), left var(--transition-interactive);
}

.nav-links a:hover, .nav-links a[aria-current="page"] {
  color: var(--color-text);
}

.nav-links a:hover::after, .nav-links a[aria-current="page"]::after {
  width: 60%;
  left: 20%;
}

/* Nav groups: on the wide desktop bar, each group becomes a click-to-open
   dropdown (same visual language as the rest of the nav) instead of a
   flat run of links. The accordion styling below governs the mobile
   hamburger menu, which is a separate, simpler stacked layout. */
.nav-group {
  position: relative;
}
.nav-group > details > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 0.6rem + 0.35vw, 0.85rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-block: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.nav-group > details > summary::-webkit-details-marker {
  display: none;
}
.nav-group > details > summary::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  margin-left: 2px;
}
.nav-group:hover > details > summary,
.nav-group > details[open] > summary {
  color: var(--color-text);
}
.nav-group > details > ul {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
  z-index: 20;
  display: none;
}
.nav-group > details[open] > ul {
  display: flex;
  flex-direction: column;
}
.nav-group > details > ul li {
  white-space: nowrap;
}
.nav-group > details > ul a {
  display: block;
  padding: var(--space-2) var(--space-5);
}
.nav-group > details > ul a::after {
  display: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: var(--color-gold);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive);
}
.search-toggle:hover,
.search-toggle:focus-visible {
  color: var(--color-oxblood);
  border-color: var(--color-gold);
  background: color-mix(in oklab, var(--color-gold) 12%, transparent);
}
[data-theme="dark"] .search-toggle:hover,
[data-theme="dark"] .search-toggle:focus-visible {
  color: var(--color-oxblood-bright);
}
.search-toggle svg { width: 17px; height: 17px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: var(--color-gold);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive);
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--color-oxblood);
  border-color: var(--color-gold);
  background: color-mix(in oklab, var(--color-gold) 12%, transparent);
}
[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .theme-toggle:focus-visible {
  color: var(--color-oxblood-bright);
}
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.menu-toggle { display: none; }

/* Intermediate desktop range: 13 nav items overflow between the hamburger
   breakpoint (1360px) and roughly 1600px. Tighten tracking and gap so the
   horizontal nav still fits on common 1366/1440/1512px laptop widths
   instead of collapsing to a hamburger or running off the right edge. */
@media (min-width: 1361px) and (max-width: 1600px) {
  .nav-links { gap: 9px; }
  .nav-links a { letter-spacing: 0.9px; font-size: 13px; }
  .nav-closed-tag { letter-spacing: 0.5px; }
}

@media (max-width: 1360px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-divider);
    border-top: 1px solid var(--color-divider);
  }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    color: var(--color-gold);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  /* Grouped accordion sections inside the open mobile menu — collapses
     the 15-item flat list down to Home + 4 tappable groups. */
  .nav-links.open { align-items: stretch; }

  .nav-links .nav-group {
    display: block;
    width: 100%;
  }

  .nav-group > details {
    display: block;
    width: 100%;
  }

  .nav-group > details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text);
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-divider);
  }

  .nav-group > details > summary::-webkit-details-marker {
    display: none;
  }

  /* Suppress the desktop diagonal-caret glyph — the mobile accordion
     uses a +/− indicator instead, set via ::after below. */
  .nav-group > details > summary::before {
    display: none;
  }

  .nav-group > details > summary::after {
    content: "+";
    font-size: 1rem;
    color: var(--color-gold);
    transition: transform var(--transition-interactive);
  }

  .nav-group > details[open] > summary::after {
    content: "\2212";
  }

  .nav-group > details > ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    padding: var(--space-3) var(--space-3) var(--space-1) var(--space-4);
    margin: 0;
    position: static;
    top: auto; left: auto; transform: none;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .nav-group > details > ul a {
    padding: var(--space-2) 0;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border: 1px solid var(--color-gold);
  color: var(--color-text);
  background: transparent;
  border-radius: 0;
  position: relative;
  transition: all var(--transition-interactive);
}

.btn::before, .btn::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--color-gold);
}
.btn::before { top: -4px; left: -4px; border-right: none; border-bottom: none; }
.btn::after  { bottom: -4px; right: -4px; border-left: none; border-top: none; }

.btn:hover {
  background: var(--color-gold);
  color: var(--color-on-accent);
  letter-spacing: 0.32em;
}

.btn-ghost {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
.btn-ghost::before, .btn-ghost::after { border-color: var(--color-border); }
.btn-ghost:hover { background: transparent; color: var(--color-gold); border-color: var(--color-gold); letter-spacing: 0.32em; }

/* ==========================================================================
   Deco ornaments
   ========================================================================== */

.deco-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-block: var(--space-8);
  color: var(--color-gold);
}

.deco-rule::before, .deco-rule::after {
  content: "";
  flex: 1;
  max-width: 96px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.deco-rule svg { width: 28px; height: 28px; flex-shrink: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-forest);     /* DARK GREEN */
  margin-bottom: var(--space-4);
}
[data-theme="dark"] .eyebrow { color: var(--color-forest); }

.eyebrow::before { content: "❖ "; opacity: 0.8; color: var(--color-oxblood); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
  background:
    radial-gradient(ellipse at 50% 0%, var(--color-surface) 0%, var(--color-surface-2) 60%, var(--color-surface-offset) 100%);
  color: var(--color-text);
  overflow: hidden;
}

[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse at 50% 0%, var(--color-surface) 0%, var(--color-bg) 70%);
  color: var(--color-text);
}

.hero::before {
  content: "";
  position: absolute;
  inset: var(--space-4);
  border: 1px solid var(--color-gold);
  pointer-events: none;
  opacity: 0.5;
}

.hero::after {
  content: "";
  position: absolute;
  inset: var(--space-6);
  border: 1px solid var(--color-sage-deep);
  pointer-events: none;
  opacity: 0.35;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
  position: relative;
  z-index: 1;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding: clamp(var(--space-8), 6vw, var(--space-16));
}

.hero-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--color-forest);     /* DARK GREEN */
  margin-bottom: var(--space-6);
}
[data-theme="dark"] .hero-eyebrow { color: var(--color-forest); }

.hero h1,
.hero .hero-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 1rem + 4vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-oxblood);   /* MAROON */
  margin: 0 0 clamp(var(--space-8), 3vw, var(--space-12));
}
[data-theme="dark"] .hero h1 { color: var(--color-oxblood-bright); }

/* Author · Editor · Publisher line that sits BELOW the genre chip */
.hero-role {
  font-family: var(--font-deco);
  font-weight: 700;
  font-size: clamp(var(--text-base), 0.85rem + 0.5vw, var(--text-xl));
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin: clamp(var(--space-8), 3vw, var(--space-12)) 0 clamp(var(--space-8), 3vw, var(--space-10));
  line-height: 1;
  text-align: center;
  /* Match the chip's natural width so the line centers under it */
  max-width: 36rem;
}
[data-theme="dark"] .hero-role { color: var(--color-forest); }

/* Hide the legacy .gilded subtitle if present anywhere */
.hero h1 .gilded { display: none; }

.hero-tagline {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  max-width: 50ch;
}

.hero-cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero-cta .btn {
  border-color: var(--color-gold);
  color: var(--color-text);
}
.hero-cta .btn:hover { background: var(--color-gold); color: var(--color-on-accent); }

.hero-image {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(20,30,18,0.18);
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 880px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-image { max-width: 360px; margin-inline: auto; }
}

/* ==========================================================================
   Stat strip
   ========================================================================== */

.accolades {
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
  padding-block: var(--space-12);
}

.accolades-grid {
  display: grid;
  /* Four equal columns at wide screens so Oxford sits centered between 300+ and 2017 */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  text-align: center;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
  justify-items: center;
  align-items: center;
}

.accolade {
  width: 100%;
  max-width: 240px;
}

@media (max-width: 960px) {
  .accolades-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .accolades-grid { grid-template-columns: minmax(0, 1fr); }
}

.accolade {
  position: relative;
  padding-inline: var(--space-4);
  text-align: center;
  overflow: hidden;
}

.accolade + .accolade::before {
  content: "";
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--color-divider);
}

.accolade-number {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.4vw + 0.85rem, var(--text-2xl));
  line-height: 1;
  font-weight: 500;
  color: var(--color-oxblood);     /* MAROON */
  letter-spacing: 0.05em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 1.5em;
  margin-bottom: var(--space-2);
  max-width: 100%;
  white-space: nowrap;
}
[data-theme="dark"] .accolade-number { color: var(--color-oxblood-bright); }

.accolade-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (max-width: 720px) {
  .accolade + .accolade::before { display: none; }
}

/* ==========================================================================
   Section: titles
   ========================================================================== */

.section-title {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-title h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-oxblood);    /* MAROON */
}
[data-theme="dark"] .section-title h2 { color: var(--color-oxblood-bright); }

.section-title p {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-style: italic;
  max-width: 56ch;
  margin: var(--space-4) auto 0;
}

/* ==========================================================================
   Featured book card (home)
   ========================================================================== */

.featured-book {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
  background: var(--color-surface);
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  position: relative;
  border: 1px solid var(--color-divider);
}

.featured-book::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--color-gold);
  pointer-events: none;
  opacity: 0.4;
}

.featured-book-image {
  position: relative;
  aspect-ratio: 3 / 4;
  /* Lighter Art Deco hunter-green ground so the gold linework reads brightly */
  background:
    /* visible gold sunburst rays */
    repeating-conic-gradient(from 90deg at 50% 50%,
      color-mix(in oklab, var(--color-gold) 28%, transparent) 0deg,
      transparent 1deg 14deg,
      color-mix(in oklab, var(--color-gold) 20%, transparent) 14deg 15deg),
    /* softer sage → medium hunter-green radial (a hair lighter still) */
    radial-gradient(ellipse at 50% 42%,
      #9cb795 0%,
      #74957a 55%,
      #587f60 100%);
  background-blend-mode: screen, normal;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(var(--space-7), 3.5vw, var(--space-12));
}

/* Outer thick gold frame (gilded) */
.featured-book-image::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 3.5px solid var(--color-gold);
  opacity: 1;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1.5px color-mix(in oklab, var(--color-gold-deep) 70%, transparent),
    inset 0 0 0 2.5px color-mix(in oklab, var(--color-gold) 35%, transparent);
}

/* Inner gold gilding line */
.featured-book-image::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 2px solid var(--color-gold);
  opacity: 0.8;
  pointer-events: none;
}

/* Deco corner ornaments overlay — sits just inside the outer gold frame */
.featured-book-image .deco-corners {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 1;
}
.featured-book-image .deco-corners svg {
  position: absolute;
  width: 48px;
  height: 48px;
  color: var(--color-gold);
  opacity: 1;
  stroke-width: 1.8;
  filter: drop-shadow(0 1px 0 color-mix(in oklab, var(--color-gold-deep) 70%, transparent));
}
.featured-book-image .deco-corners svg.tl { top: 0; left: 0; }
.featured-book-image .deco-corners svg.tr { top: 0; right: 0; transform: scaleX(-1); }
.featured-book-image .deco-corners svg.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.featured-book-image .deco-corners svg.br { bottom: 0; right: 0; transform: scale(-1, -1); }

.featured-book-image .book-cover,
.book-card-cover .book-cover {
  width: 86%;
  aspect-ratio: 2 / 3;
  /* Soft cream cover with deco gold linework — a printed-book feel */
  background:
    linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  color: var(--color-gold-deep);
  position: relative;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  border: 1px solid var(--color-border);
}

/* The photo cover specifically sits on the deco frame with strong shadow */
.featured-book-image .photo-cover {
  width: 80%;
  aspect-ratio: 2 / 3;
  position: relative;
  z-index: 2;
  box-shadow:
    0 1px 2px rgba(42,30,31,0.18),
    0 14px 32px rgba(42,30,31,0.25),
    0 30px 60px rgba(107,31,36,0.18);
  border: 1px solid color-mix(in oklab, var(--color-oxblood) 30%, transparent);
}

.photo-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.photo-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
[data-theme="dark"] .featured-book-image .book-cover,
[data-theme="dark"] .book-card-cover .book-cover {
  background: linear-gradient(135deg, var(--color-surface-2) 0%, var(--color-surface-deep) 100%);
  color: var(--color-gold-bright);
}

.book-card-cover .book-cover { width: 78%; padding: var(--space-4); }

.book-cover::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--color-gold);
  opacity: 0.7;
}

.book-cover-art {
  width: 60%;
  height: auto;
  margin-bottom: var(--space-6);
  color: var(--color-gold);
}

.book-cover-title {
  font-family: var(--font-deco);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  line-height: 1.4;
  margin-bottom: var(--space-3);
}
[data-theme="dark"] .book-cover-title { color: var(--color-oxblood-bright); }

.book-cover-author {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}

.featured-book-info h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-oxblood);    /* MAROON */
  margin-bottom: var(--space-3);
}
[data-theme="dark"] .featured-book-info h3 { color: var(--color-oxblood-bright); }

/* Base pull-quote (used anywhere outside the featured book block) */
.pull-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-forest);
  border-left: 2px solid var(--color-oxblood);
  padding-left: var(--space-6);
  margin: var(--space-6) 0;
  line-height: 1.6;
}

/* Publisher's front-of-book line: an unattributed editorial line (not a
   quotation), set epigraph-style beneath a page title. Centered, italic,
   no border rule -- visually distinct from .pull-quote, which is reserved
   for sourced/cited text. */
.publisher-line {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-oxblood);
  text-align: center;
  max-width: 46ch;
  margin: var(--space-6) auto var(--space-8);
  line-height: 1.5;
  position: relative;
}
[data-theme="dark"] .publisher-line { color: var(--color-oxblood-bright); }

.publisher-line::before,
.publisher-line::after {
  content: "";
  display: block;
  width: 2.5em;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.6;
  margin: var(--space-3) auto;
}
[data-theme="dark"] .pull-quote { color: var(--color-forest); border-left-color: var(--color-oxblood-bright); }

.pull-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-deco);
  font-style: normal;
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-oxblood);
}
[data-theme="dark"] .pull-quote cite { color: var(--color-oxblood-bright); }

.featured-book-info .pull-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-forest);                /* DARK GREEN quote */
  border-left: 2px solid var(--color-oxblood);  /* MAROON rule */
  padding-left: var(--space-6);
  margin: var(--space-6) 0;
  line-height: 1.5;
}

[data-theme="dark"] .featured-book-info .pull-quote { color: var(--color-forest); border-left-color: var(--color-oxblood-bright); }

.featured-book-info .pull-quote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.book-meta-item {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4);
}

@media (max-width: 880px) {
  .featured-book { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Two-column intro
   ========================================================================== */

.intro {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}

/* Single-column intro (awards panel removed) */
.intro.intro--full {
  grid-template-columns: minmax(0, 1fr);
}
.intro.intro--full .intro-text {
  max-width: 70ch;
  margin-inline: auto;
}

.intro-image {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.intro-image img { width: 100%; height: 100%; object-fit: cover; }

.intro-image::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--color-gold);
  opacity: 0.55;
}

/* Designed panel inside the intro frame (replaces empty portrait) */
.intro-panel {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  border: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  overflow: hidden;
}
.intro-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--color-oxblood);
  opacity: 0.5;
  pointer-events: none;
}
.intro-panel-emblem {
  align-self: center;
  width: 56px;
  height: 56px;
  color: var(--color-oxblood);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}
.intro-panel-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text);
  text-align: center;
  max-width: 28ch;
  margin: 0 auto 2px;
}
.intro-panel-quote-attr {
  font-family: var(--font-ui);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-forest);
  margin-top: 2px;
  margin-bottom: var(--space-5);
}
[data-theme="dark"] .intro-panel-quote-attr { color: var(--color-oxblood-bright); }
.intro-panel-rule {
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-forest), transparent);
  align-self: center;
  margin-bottom: var(--space-5);
  flex-shrink: 0;
}
.intro-panel-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-forest);
  text-align: center;
  margin-bottom: var(--space-3);
}
.intro-panel-awards {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--color-text-muted);
  text-align: center;
  flex: 1;
}
.intro-panel-awards li {
  position: relative;
  padding: 0 var(--space-2);
}
.intro-panel-awards li strong {
  display: block;
  font-family: var(--font-deco);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--color-oxblood);
  margin-bottom: 1px;
}
.intro-panel-finial {
  align-self: center;
  width: 28px;
  height: 18px;
  color: var(--color-oxblood);
  margin-top: var(--space-3);
  flex-shrink: 0;
}

/* Let panel grow as tall as needed to show all content; keeps min ratio */
.intro-panel {
  aspect-ratio: auto;
  min-height: 0;
}

/* Compact layout for narrow widths */
@media (max-width: 880px) {
  .intro-panel { min-height: 0; }
}

.intro-text h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-oxblood);    /* MAROON */
  margin-bottom: var(--space-6);
}
[data-theme="dark"] .intro-text h2 { color: var(--color-oxblood-bright); }

.drop-cap::first-letter {
  float: left;
  font-family: var(--font-deco);
  font-size: 4.5em;
  line-height: 0.85;
  padding-right: var(--space-3);
  padding-top: var(--space-1);
  color: var(--color-gold);
}

.intro-text p { margin-bottom: var(--space-4); }

@media (max-width: 880px) {
  .intro { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Books catalog grid
   ========================================================================== */

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(var(--space-8), 4vw, var(--space-12));
}

@media (min-width: 960px) {
  .books-grid > .book-card:nth-child(7) {
    grid-column: 2 / span 1;
  }
}

.book-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  position: relative;
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}

.book-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.book-card-cover {
  aspect-ratio: 3 / 4;
  /* Matches featured panel: faint gold rays over sage→hunter radial */
  background:
    repeating-conic-gradient(from 90deg at 50% 50%,
      color-mix(in oklab, var(--color-gold) 22%, transparent) 0deg,
      transparent 1deg 14deg,
      color-mix(in oklab, var(--color-gold) 16%, transparent) 14deg 15deg),
    radial-gradient(ellipse at 50% 42%,
      #9cb795 0%,
      #74957a 55%,
      #587f60 100%);
  background-blend-mode: screen, normal;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: clamp(var(--space-3), 2.5vw, var(--space-5));
}

/* Outer gold gilding line */
.book-card-cover::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2.5px solid var(--color-gold);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-gold-deep) 70%, transparent);
  z-index: 1;
}

/* Inner gold hairline */
.book-card-cover::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--color-gold);
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

/* Center the cover wrapper (link or direct photo-cover) so the cover sits dead-center */
.book-card-cover > a,
.book-card-cover > .photo-cover,
.book-card-cover > .book-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.book-card-cover > a {
  width: 100%;
  height: 100%;
}

.book-card-cover .book-cover { width: 78%; }
.book-card-cover .photo-cover { width: 78%; margin: 0 auto; }

.book-card-body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.book-card-genre {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-forest);     /* DARK GREEN */
  margin-bottom: var(--space-3);
}

[data-theme="dark"] .book-card-genre { color: var(--color-forest); }

.book-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-oxblood);    /* MAROON */
  margin-bottom: var(--space-3);
  line-height: 1.25;
}
[data-theme="dark"] .book-card-title { color: var(--color-oxblood-bright); }

.book-card-blurb {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  flex: 1;
  line-height: 1.6;
}

.book-card-awards {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.book-card-awards li::before {
  content: "❖ ";
  color: var(--color-oxblood);    /* MAROON marker */
}

/* ==========================================================================
   About page — credentials list
   ========================================================================== */

.credentials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.credential {
  border-top: 1px solid var(--color-forest);     /* DARK GREEN rule */
  padding-top: var(--space-6);
}

.credential-year {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-oxblood);     /* MAROON */
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: var(--space-2);
}
[data-theme="dark"] .credential-year { color: var(--color-oxblood-bright); }

.credential h3 {
  font-family: var(--font-deco);
  font-weight: 400;
  font-size: var(--text-base);
  letter-spacing: 0.06em;
  color: var(--color-forest);     /* DARK GREEN */
  margin-bottom: var(--space-2);
}
[data-theme="dark"] .credential h3 { color: var(--color-forest); }

.credential p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Teaching list */
.teaching {
  background: var(--color-surface);
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  border: 1px solid var(--color-divider);
  position: relative;
}

.teaching::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--color-gold);
  opacity: 0.35;
  pointer-events: none;
}

.teaching-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
  list-style: none;
}

.teaching-list h3 {
  font-family: var(--font-deco);
  font-weight: 400;
  font-size: var(--text-base);
  letter-spacing: 0.06em;
  color: var(--color-forest);     /* DARK GREEN */
  margin-bottom: var(--space-3);
}

[data-theme="dark"] .teaching-list h3 { color: var(--color-gold-bright); }

.teaching-list p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-surface-2);
  color: var(--color-text);
  padding-block: var(--space-16);
  margin-top: var(--space-24);
  position: relative;
  border-top: 1px solid var(--color-divider);
}

[data-theme="dark"] .site-footer {
  background: var(--color-surface);
  color: var(--color-text);
  border-top: 1px solid var(--color-divider);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.footer-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.footer-mark { width: 48px; height: 48px; color: var(--color-gold); }

.footer-name {
  font-family: var(--font-deco);
  font-weight: 400;
  font-size: var(--text-base);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-oxblood);     /* MAROON */
}
[data-theme="dark"] .footer-name { color: var(--color-oxblood-bright); }

.footer-tagline {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-text-muted);
  max-width: 50ch;
}

.footer-meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: var(--space-6);
}
[data-theme="dark"] .footer-meta,
[data-theme="dark"] .footer-links,
[data-theme="dark"] .footer-links a {
  color: var(--color-text-muted);
}
[data-theme="dark"] .footer-links a:hover {
  color: var(--color-oxblood-bright);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .footer-meta,
  :root:not([data-theme]) .footer-links,
  :root:not([data-theme]) .footer-links a {
    color: var(--color-text-muted);
  }
}

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */

.page-header {
  background:
    radial-gradient(ellipse at 50% 30%, var(--color-surface) 0%, var(--color-surface-2) 70%);
  color: var(--color-text);
  padding-block: clamp(var(--space-16), 10vw, var(--space-24));
  text-align: center;
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .page-header {
  background:
    radial-gradient(ellipse at 50% 30%, var(--color-surface) 0%, var(--color-bg) 80%);
}

.page-header::before {
  content: "";
  position: absolute;
  inset: var(--space-4);
  border: 1px solid var(--color-gold);
  opacity: 0.4;
  pointer-events: none;
}

.page-header-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--color-forest);     /* DARK GREEN */
  margin-bottom: var(--space-4);
}
[data-theme="dark"] .page-header-eyebrow { color: var(--color-forest); }

.page-header h1, .page-header h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-oxblood);    /* MAROON */
  margin-bottom: var(--space-4);
}
[data-theme="dark"] .page-header h1, [data-theme="dark"] .page-header h2 { color: var(--color-oxblood-bright); }

.page-header p {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: 0 auto;
}

/* ==========================================================================
   Utility
   ========================================================================== */

/* Fade-in: content is ALWAYS fully visible by default; JS-driven fade is a
   progressive enhancement that gates an initial transparent state only AFTER
   the script has confirmed IntersectionObserver is working. */
.fade-in { opacity: 1; transform: none; transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.js-fade-armed .fade-in:not(.is-visible) {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.js-fade-armed .fade-in.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js-fade-armed .fade-in { opacity: 1; transform: none; }
}

.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;
}

/* ==========================================================================
   Real photographic book covers (replace SVG cover slot)
   ========================================================================== */

.photo-cover {
  width: 86%;
  aspect-ratio: 2 / 3;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.photo-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.book-card-cover .photo-cover { width: 78%; }
.featured-book-image .photo-cover { width: 86%; }

/* Some cover artwork is taller/narrower than the standard 2:3 frame
   (e.g. title or imprint text sits close to the top/bottom edge).
   Forcing object-fit:cover on these crops that text off. Use "contain"
   instead so the full cover art is always visible, letterboxed on a
   matching dark background rather than cropped. */
.photo-cover.no-crop {
  background: #14140f;
}
.photo-cover.no-crop img {
  object-fit: contain;
}

/* Forthcoming badge */
.forthcoming-badge {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--color-oxblood);
  color: #fbf5e3;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-2) var(--space-2);
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ==========================================================================
   Praise / Reviews section
   ========================================================================== */

.praise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.praise-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-top: 3px solid var(--color-oxblood);
  padding: var(--space-8);
  position: relative;
  display: flex;
  flex-direction: column;
}
.praise-card::before {
  content: "“";
  position: absolute;
  top: -0.2em;
  left: 0.15em;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-oxblood);
  opacity: 0.18;
  pointer-events: none;
}
.praise-card.kirkus { border-top-color: var(--color-oxblood); }
.praise-card.kirkus::after {
  content: "★";
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--color-oxblood);
  font-size: var(--text-lg);
}
.praise-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 1;
}
.praise-attr {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.praise-source {
  display: block;
  font-family: var(--font-deco);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  color: var(--color-oxblood);
  margin-bottom: 2px;
}
.praise-book {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-forest);
}

/* Influences / comparisons strip */
.influences {
  background: var(--color-surface-2);
  padding: clamp(var(--space-10), 6vw, var(--space-16));
  border: 1px solid var(--color-divider);
  position: relative;
  margin-top: var(--space-12);
}
.influences::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--color-forest);
  opacity: 0.35;
  pointer-events: none;
}
.influences-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
  position: relative;
  z-index: 1;
}
.influence {
  /* Defensive containment: on some phones/zoom levels a very long unbroken
     word (e.g. a hyphenated surname) can otherwise push past the grid
     column edge. min-width:0 lets this grid item shrink below its content's
     natural size instead of forcing an overflow, and overflow-wrap catches
     any word too long for the column. */
  min-width: 0;
  max-width: 100%;
}
.influence dt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  color: var(--color-oxblood);
  margin-bottom: var(--space-2);
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
}
.influence dd {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
}

/* Amazon buy-link */
.buy-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  border-bottom: 1px solid var(--color-oxblood);
  padding-bottom: 2px;
  margin-top: var(--space-4);
  transition: color var(--transition-interactive), border-color var(--transition-interactive);
}
.buy-link:hover {
  color: var(--color-forest);
  border-bottom-color: var(--color-forest);
}
.buy-link::after { content: "→"; font-size: 1.1em; }

/* Anthologies */
.anthology-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-8);
}
.anthology-list li {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-2) 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.anthology-list li cite {
  font-style: italic;
  color: var(--color-text);
  font-family: var(--font-body);
}
.anthology-list li .year {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-oxblood);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.anthology-list li.featured cite::before {
  content: "★ ";
  color: var(--color-oxblood);
  font-size: 0.85em;
}

/* Small cover-thumbnail gallery — used for magazine/anthology issue covers,
   intentionally lighter-weight than the full .book-card grid above. */
.cover-thumb-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: var(--space-6) var(--space-4);
  margin-top: var(--space-8);
}
.cover-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cover-thumb-image {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(42, 30, 31, 0.22);
  border: 1px solid var(--color-divider);
  background: var(--color-surface-2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cover-thumb-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cover-thumb a:hover .cover-thumb-image {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(42, 30, 31, 0.3);
}
.cover-thumb-title {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--color-text);
  margin-top: var(--space-2);
  line-height: 1.3;
}
.cover-thumb-year {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--color-oxblood);
  letter-spacing: 0.04em;
  margin-top: var(--space-1);
}

/* ==========================================================================
   Writing page — prose excerpts, poems, editor's notes
   ========================================================================== */

.excerpt {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(var(--space-8), 4vw, var(--space-12)) 0;
  position: relative;
}
.excerpt-header {
  text-align: center;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.excerpt-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: var(--space-3);
}
.excerpt-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin-bottom: var(--space-3);
}
.excerpt-meta {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.excerpt-meta a {
  color: var(--color-oxblood);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.excerpt-body {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--color-text);
}
.excerpt-body p {
  margin-bottom: var(--space-4);
  max-width: none;
  text-align: left;
  text-indent: 1.5em;
}
.excerpt-body p:first-of-type { text-indent: 0; }
.excerpt-body p.no-indent { text-indent: 0; }
.excerpt-body .drop-cap-first::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 4rem;
  line-height: 0.9;
  padding-right: 0.08em;
  padding-top: 0.05em;
  color: var(--color-oxblood);
}
.excerpt-end {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.excerpt-end .excerpt-link {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--color-oxblood);
  border-bottom: 1px solid var(--color-oxblood);
  padding-bottom: 2px;
}
.excerpt-end .excerpt-link:hover {
  color: var(--color-forest);
  border-bottom-color: var(--color-forest);
}
.excerpt + .excerpt { border-top: 1px solid var(--color-divider); margin-top: var(--space-8); }

/* Poem layout */
.poem {
  max-width: 58ch;
  margin: 0 auto;
  padding: clamp(var(--space-8), 4vw, var(--space-12)) 0;
  text-align: center;
}
.poem-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin-bottom: var(--space-2);
}
.poem-attr {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: var(--space-8);
}
.poem-body {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--color-text);
  text-align: left;
  display: inline-block;
}
.poem-body .stanza { margin-bottom: var(--space-5); }
.poem-body .stanza p { margin: 0; max-width: none; }
.poem + .poem { border-top: 1px solid var(--color-divider); }

/* Editor's note callout */
.editors-note {
  max-width: 64ch;
  margin: var(--space-12) auto 0;
  padding: var(--space-8);
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-forest);
  position: relative;
}
.editors-note .label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: var(--space-3);
  display: block;
}
.editors-note h2,
.editors-note h3 {
  font-family: var(--font-deco);
  font-weight: 400;
  letter-spacing: 0.05em;
  font-size: var(--text-lg);
  color: var(--color-oxblood);
  margin-bottom: var(--space-3);
}
.editors-note p {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: none;
}
.editors-note p + p { margin-top: var(--space-3); }
.editors-note a {
  color: var(--color-oxblood);
  border-bottom: 1px dotted var(--color-divider);
}
.editors-note a:hover {
  color: var(--color-forest);
  border-bottom-color: var(--color-forest);
}

/* Read-more list */
.read-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.read-more-grid--doors {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.read-more-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  padding: var(--space-6);
  transition: border-color var(--transition-interactive), transform var(--transition-interactive);
}
.read-more-card:hover {
  border-color: var(--color-oxblood);
  transform: translateY(-3px);
}
.read-more-card .venue {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: var(--space-2);
  display: block;
}
.read-more-card .title {
  font-family: var(--font-deco);
  font-weight: 400;
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  display: block;
}
.read-more-card a {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  border-bottom: 1px solid var(--color-oxblood);
  padding-bottom: 2px;
  display: inline-block;
  margin-top: var(--space-2);
  margin-right: var(--space-4);
}
.read-more-card a:hover {
  color: var(--color-forest);
  border-bottom-color: var(--color-forest);
}
.read-more-card a::after { content: " →"; }

/* ==========================================================================
   Musings page — commonplace book / journal entries
   ========================================================================== */

.musings-intro {
  max-width: 64ch;
  margin: 0 auto var(--space-12);
  text-align: center;
}
.musings-intro p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: none;
}

.musings-list {
  max-width: 72ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.musing {
  position: relative;
  padding-left: clamp(var(--space-6), 4vw, var(--space-12));
  border-left: 1px solid var(--color-divider);
}
.musing::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0;
  width: 9px;
  height: 9px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-oxblood);
  transform: rotate(45deg);
}

.musing-header {
  margin-bottom: var(--space-6);
}
.musing-date {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0.06em;
  color: var(--color-oxblood);
  margin-bottom: var(--space-2);
}
.musing-kind {
  display: inline-block;
  margin-left: var(--space-3);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-forest);
  vertical-align: middle;
  padding: 2px 8px;
  border: 1px solid var(--color-forest);
}
.musing-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-top: var(--space-1);
  line-height: 1.25;
}

.musing-body {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--color-text);
}
.musing-body p {
  margin-bottom: var(--space-4);
  max-width: none;
}
.musing-body p:last-child { margin-bottom: 0; }
.musing-body .musing-pull {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--color-forest);
  padding: var(--space-4) var(--space-6);
  border-left: 2px solid var(--color-oxblood);
  margin: var(--space-4) 0;
  max-width: none;
}
.musing-body cite {
  display: block;
  font-style: normal;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.musing-poem {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text);
  white-space: pre-wrap;
  padding: var(--space-4) 0 var(--space-4) var(--space-4);
  border-left: 2px solid var(--color-forest);
  margin: var(--space-4) 0;
}

.musing-end-mark {
  display: block;
  margin-top: var(--space-6);
  text-align: left;
  color: var(--color-oxblood);
  opacity: 0.5;
  letter-spacing: 0.4em;
  font-size: var(--text-sm);
}

/* ==========================================================================
   Italic-block typography rule
   When a block of text is italicized, book/journal titles inside it flip
   to UPRIGHT and slightly BOLDER (classic typesetting — italic within italic
   becomes Roman with weight). Targets <em>/<cite>/<i> inside known
   italic-context selectors.
   ========================================================================== */

.hero-tagline em, .hero-tagline i, .hero-tagline cite,
.pull-quote em, .pull-quote i, .pull-quote cite,
.featured-book-info .pull-quote em, .featured-book-info .pull-quote i,
.intro-panel-quote em, .intro-panel-quote i, .intro-panel-quote cite,
.praise-quote em, .praise-quote i, .praise-quote cite,
.musing-body em.title-flip,
.footer-tagline em, .footer-tagline i, .footer-tagline cite,
.section-title p em, .section-title p i, .section-title p cite,
.book-cover-author em, .book-cover-author i, .book-cover-author cite,
.publisher-line em, .publisher-line i, .publisher-line cite,
.page-header p em, .page-header p i, .page-header p cite,
.page-header-sub em, .page-header-sub i, .page-header-sub cite,
.influence dd em, .influence dd i, .influence dd cite,
.anthology-list li cite em, .anthology-list li cite i,
.excerpt-meta em, .excerpt-meta i, .excerpt-meta cite,
.editors-note p em, .editors-note p i, .editors-note p cite,
.musings-intro p em, .musings-intro p i, .musings-intro p cite,
.musing-body .musing-pull em, .musing-body .musing-pull i, .musing-body .musing-pull cite,
.closed-notice-body em, .closed-notice-body i, .closed-notice-body cite,
.contest-tagline em, .contest-tagline i, .contest-tagline cite,
.service-tagline em, .service-tagline i, .service-tagline cite,
.service-note em, .service-note i, .service-note cite,
.service-timeline em, .service-timeline i, .service-timeline cite,
.rate-unit em, .rate-unit i, .rate-unit cite,
.press-service-desc em, .press-service-desc i, .press-service-desc cite,
.cta-band-copy em, .cta-band-copy i, .cta-band-copy cite,
.sch-quote em, .sch-quote i, .sch-quote cite,
.sch-sig em, .sch-sig i, .sch-sig cite,
.passage-quote em, .passage-quote i, .passage-quote cite,
.excerpt-eyebrow em, .excerpt-eyebrow i, .excerpt-eyebrow cite,
.crossings-poem-number em, .crossings-poem-number i,
.crossings-poem-note em, .crossings-poem-note i,
.story-group-title p em, .story-group-title p i,
.guide-group-title p em, .guide-group-title p i,
.sites-group-title p em, .sites-group-title p i,
.guide-card-quote em, .guide-card-quote i, .guide-card-quote cite,
.story-card-lesson em, .story-card-lesson i,
[style*="font-style:italic"] em, [style*="font-style: italic"] em,
[style*="font-style:italic"] cite, [style*="font-style: italic"] cite,
[style*="font-style:italic"] i, [style*="font-style: italic"] i,
.italic em, .italic i, .italic cite,
em em, em cite, em i, i em, i cite, i i, cite em, cite i {
  font-style: normal;
  font-weight: 600;
}

/* Book/publication titles inside a pull-quote's citation line stay roman:
   the whole pull-quote block (quote body + citation) is an italic context,
   so titles set in <em>/<i> within it must render upright to stay
   distinguishable, per standard typographic convention. (Previously this
   rule re-italicized them, which was the bug.) */

/* ==========================================================================
   Deco Plaque — Art Deco gold-bordered title chip
   Used for section-leading section titles ("A Closer Look") so they stand
   out more than a small eyebrow.
   ========================================================================== */

.deco-plaque {
  display: inline-flex;
  align-items: center;
  gap: clamp(var(--space-4), 1.5vw, var(--space-7));
  margin-inline: auto;
  margin-bottom: clamp(var(--space-6), 2.5vw, var(--space-10));
  padding-block: clamp(var(--space-6), 2.4vw, var(--space-9));
  padding-inline: clamp(var(--space-12), 4.5vw, var(--space-20));
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--color-surface) 88%, var(--color-gold) 12%) 0%,
      var(--color-surface) 100%);
  border: 2.5px solid var(--color-gold);
  box-shadow:
    inset 0 0 0 1.5px color-mix(in oklab, var(--color-gold-deep) 70%, transparent),
    inset 0 0 0 4.5px var(--color-surface),
    inset 0 0 0 5.5px color-mix(in oklab, var(--color-gold) 60%, transparent),
    0 8px 20px rgba(31,58,38,0.08);
}

.deco-plaque-rule {
  width: clamp(20px, 3vw, 36px);
  height: 1.5px;
  background: var(--color-gold);
  display: inline-block;
}

.deco-plaque-text {
  font-family: var(--font-deco);
  font-weight: 600;
  font-size: clamp(var(--text-base), 0.9rem + 0.6vw, var(--text-xl));
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .deco-plaque {
    display: flex;
    width: min(100%, 25rem);
    padding-inline: var(--space-5);
    gap: var(--space-3);
  }

  .deco-plaque-rule {
    width: 1rem;
    flex: 0 1 1rem;
  }

  .deco-plaque-text {
    white-space: normal;
    font-size: 0.65rem;
    letter-spacing: 0.13em;
    line-height: 1.35;
  }
}

[data-theme="dark"] .deco-plaque-text { color: var(--color-oxblood-bright); }

/* The plaque sits in section-title which is text-center already; give generous
   breathing room so the title under it doesn't crowd the gold border. */
.section-title .deco-plaque + h2,
.section-title .deco-plaque + .closer-look-title,
.deco-plaque + h1,
.deco-plaque + h2,
.deco-plaque + .closer-look-title {
  margin-top: clamp(var(--space-8), 3vw, var(--space-14));
}

/* If a section-title contains ONLY a plaque (no h1/h2 below), give it bottom
   breathing room so the content that follows isn't crowded. */
.section-title:has(> .deco-plaque:only-child) {
  margin-bottom: clamp(var(--space-10), 4vw, var(--space-16));
}

/* The "A Closer Look" titles themselves a touch larger to match the plaque's weight */
.closer-look-title {
  font-size: clamp(2rem, 1rem + 3vw, 3.4rem);
}

/* ==========================================================================
   Hero Genre Chip — The very first text on the home page.
   Larger and more elegant than the section plaques: triple gold line,
   stepped Deco corners, and flanking arrow-and-dot finials.
   ========================================================================== */

.hero-genre-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Keep the flourishes flanking the text on ONE row always. Only the text
     itself (.hero-genre-text) is allowed to wrap onto a second line — the
     flex row itself must never wrap, or the left/right flourishes end up
     stacked above/below the text instead of beside it, which reads as
     off-center. */
  flex-wrap: nowrap;
  gap: clamp(var(--space-4), 2vw, var(--space-10));
  /* Hug the text exactly and center the whole box in its column, so the
     genre line sits as a neat, self-contained plaque rather than a full-width
     bar — and can never leave dead space on either side. */
  width: fit-content;
  margin-inline: auto;
  /* Tighter block padding so the strong single-line type fits at all widths */
  padding-block: clamp(var(--space-5), 1.8vw, var(--space-8));
  padding-inline: clamp(var(--space-6), 2.5vw, var(--space-10));
  position: relative;
  /* Anti-overlap safety: chip can never paint outside its own column. */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--color-surface) 82%, var(--color-gold) 18%) 0%,
      var(--color-surface) 100%);
  border: 3px solid var(--color-gold);
  box-shadow:
    inset 0 0 0 2px color-mix(in oklab, var(--color-gold-deep) 80%, transparent),
    inset 0 0 0 5px var(--color-surface),
    inset 0 0 0 6.5px color-mix(in oklab, var(--color-gold) 75%, transparent),
    0 10px 26px rgba(31,58,38,0.12),
    0 2px 0 color-mix(in oklab, var(--color-gold-deep) 50%, transparent);
}

/* Stepped Deco corner ticks on all four corners */
.hero-genre-chip::before,
.hero-genre-chip::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-gold);
  pointer-events: none;
}
.hero-genre-chip::before {
  top: -7px;
  left: -7px;
  border-right: none;
  border-bottom: none;
}
.hero-genre-chip::after {
  bottom: -7px;
  right: -7px;
  border-left: none;
  border-top: none;
}

.hero-genre-flourish {
  /* The flanking arrows are hidden — they forced the chip wider than the
     hero-text column, which pushed the genre line onto multiple lines and
     off-center. The text alone centers cleanly in the gold box. */
  display: none;
}

.hero-genre-text {
  font-family: var(--font-display);
  font-weight: 700;
  /* Strong readable size, sized so "FICTION · POETRY · NONFICTION"
     fits on one row inside the hero-text column at every desktop width. */
  font-size: clamp(0.9rem, 0.65rem + 0.42vw, 1.05rem);
  letter-spacing: clamp(0.1em, 0.06em + 0.15vw, 0.16em);
  text-transform: uppercase;
  color: var(--color-oxblood);
  line-height: 1.25;
  /* Never clip: drop nowrap so the line can wrap gracefully if the column
     narrows, and balance the break so any two-line result stays centered and
     even instead of leaving an orphaned word. */
  text-wrap: balance;
  text-align: center;
  text-shadow: 0 1px 0 color-mix(in oklab, var(--color-gold) 25%, transparent);
  min-width: 0;
}

[data-theme="dark"] .hero-genre-text { color: var(--color-oxblood-bright); }

/* The chip itself must never let its contents exceed its own box, no matter
   the viewport or column width. The row stays nowrap (set above) so the
   flourishes keep flanking the text; only .hero-genre-text wraps internally
   onto a second line if needed. */
.hero-genre-chip {
  max-width: 100%;
}

/* On narrow screens, tighten the chip so the single genre line still fits
   inside the box without clipping. */
@media (max-width: 900px) {
  .hero-genre-text {
    font-size: 0.88rem !important;
    letter-spacing: 0.12em !important;
  }
  .hero-genre-chip {
    padding-inline: var(--space-6) !important;
    padding-block: var(--space-5) !important;
  }
}
@media (max-width: 480px) {
  .hero-genre-text {
    font-size: 0.78rem !important;
    letter-spacing: 0.1em !important;
  }
}

/* ==========================================================================
   Hopper-style imagery — gentle global lift.
   The painterly hero portrait and the Edward Hopper-style scene images are
   intentionally moody, but read too dark on many screens. A single soft
   brightness lift (with a touch of contrast roll-off and saturation to keep
   highlights from blowing out) lightens every one of them site-wide without
   re-encoding any files, and is easy to tune up or down in one place.
   ========================================================================== */
.hero-image img,
img[src*="images/hopper"] {
  filter: brightness(1.18) contrast(0.97) saturate(1.03);
}

/* ==========================================================================
   Closed-Submissions Notice — quietly prominent, Art Deco
   ========================================================================== */

.closed-notice {
  position: relative;
  text-align: center;
  padding-block: clamp(var(--space-12), 5vw, var(--space-16));
  padding-inline: clamp(var(--space-10), 5vw, var(--space-16));
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--color-surface) 92%, var(--color-gold) 8%) 0%,
    var(--color-surface) 100%);
  border: 2.5px solid var(--color-oxblood);
  box-shadow:
    inset 0 0 0 1.5px var(--color-surface),
    inset 0 0 0 3.5px color-mix(in oklab, var(--color-gold) 70%, transparent),
    0 8px 24px rgba(31,58,38,0.08);
  margin-block: var(--space-4);
}

.closed-notice-ornament {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.closed-notice-ornament svg {
  width: 30px;
  height: 30px;
  color: var(--color-gold);
  opacity: 0.9;
}

.closed-notice-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: var(--space-4);
}
[data-theme="dark"] .closed-notice-eyebrow { color: var(--color-forest-bright); }

.closed-notice-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 0.9rem + 1.2vw, 2rem);
  letter-spacing: 0.04em;
  color: var(--color-oxblood);
  margin-bottom: var(--space-5);
  line-height: 1.2;
}
[data-theme="dark"] .closed-notice-title { color: var(--color-oxblood-bright); }

.closed-notice-body {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text);
  max-width: 56ch;
  margin-inline: auto;
}

/* ==========================================================================
   Silver Current Prize panel — proper Art Deco contest card
   ========================================================================== */

.contest-card {
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--color-surface) 94%, var(--color-gold) 6%) 0%,
      var(--color-surface) 100%);
  border: 2.5px solid var(--color-oxblood);
  box-shadow:
    inset 0 0 0 1.5px var(--color-surface),
    inset 0 0 0 3.5px color-mix(in oklab, var(--color-gold) 75%, transparent),
    0 12px 28px rgba(31,58,38,0.10);
  padding-block: clamp(var(--space-14), 6vw, var(--space-20));
  padding-inline: clamp(var(--space-12), 5vw, var(--space-18));
  margin-block: var(--space-8);
}

/* Stepped Deco corners on the contest card */
.contest-card::before,
.contest-card::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-gold);
  pointer-events: none;
}
.contest-card::before { top: -11px;    left: -11px;    border-right: none; border-bottom: none; }
.contest-card::after  { bottom: -11px; right: -11px;   border-left:  none; border-top:    none; }

.contest-header {
  text-align: center;
  margin-bottom: clamp(var(--space-10), 4vw, var(--space-14));
}

.contest-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: var(--space-5);
}
[data-theme="dark"] .contest-eyebrow { color: var(--color-forest-bright); }

.contest-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 1rem + 1.8vw, 2.6rem);
  letter-spacing: 0.04em;
  color: var(--color-oxblood);
  margin-bottom: var(--space-5);
  line-height: 1.15;
}
[data-theme="dark"] .contest-title { color: var(--color-oxblood-bright); }

.contest-tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text);
  max-width: 56ch;
  margin-inline: auto;
}

/* The four-detail grid: Prize · Entry Fee · Reading Period · Judge */
.contest-details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(var(--space-6), 2.5vw, var(--space-10));
  align-items: stretch;
  margin: clamp(var(--space-8), 3vw, var(--space-12)) 0;
  padding-block: clamp(var(--space-8), 3vw, var(--space-10));
  border-top: 1px solid var(--color-gold);
  border-bottom: 1px solid var(--color-gold);
}

.contest-detail {
  text-align: center;
  position: relative;
  padding-inline: var(--space-3);
}
.contest-detail + .contest-detail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: color-mix(in oklab, var(--color-gold) 60%, transparent);
}

.contest-detail dt {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: var(--space-4);
  font-weight: 600;
}
[data-theme="dark"] .contest-detail dt { color: var(--color-forest-bright); }

.contest-detail dd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 0.8rem + 1.3vw, 2rem);
  font-weight: 500;
  color: var(--color-oxblood);
  line-height: 1.15;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .contest-detail dd { color: var(--color-oxblood-bright); }

.contest-detail dd small {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: var(--space-2);
  line-height: 1.3;
}

@media (max-width: 900px) {
  .contest-details { grid-template-columns: repeat(2, 1fr); }
  .contest-detail:nth-child(odd) + .contest-detail::before { display: none; }
}
@media (max-width: 520px) {
  .contest-details { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .contest-detail + .contest-detail::before { display: none; }
  .contest-detail + .contest-detail {
    border-top: 1px solid color-mix(in oklab, var(--color-gold) 50%, transparent);
    padding-top: var(--space-7);
  }
}

/* ==========================================================================
   Small Deco Plaque — used for sub-section labels (Short/Medium/Long bios,
   "Press & Media", interview categories, etc.)
   Half the visual weight of the main section plaque.
   ========================================================================== */

.deco-plaque-sm {
  padding-block: clamp(var(--space-5), 2vw, var(--space-7));
  padding-inline: clamp(var(--space-10), 3.5vw, var(--space-14));
  border-width: 2px;
  margin-bottom: var(--space-6);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--color-gold-deep) 65%, transparent),
    inset 0 0 0 3px var(--color-surface),
    inset 0 0 0 4px color-mix(in oklab, var(--color-gold) 55%, transparent),
    0 4px 12px rgba(31,58,38,0.05);
}
.deco-plaque-sm .deco-plaque-text {
  font-size: var(--text-sm);
  letter-spacing: 0.28em;
}
.deco-plaque-sm .deco-plaque-rule {
  width: clamp(14px, 2vw, 24px);
}

/* ==========================================================================
   Press kit bio blocks
   ========================================================================== */

.bio-block {
  margin-bottom: clamp(var(--space-10), 4vw, var(--space-14));
  text-align: center;
}

.bio-block .deco-plaque-sm { margin-inline: auto; }

.bio-paragraph {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text);
  max-width: 64ch;
  margin: var(--space-6) auto 0;
  text-align: left;
}

/* Last block: no bottom margin, leaves the section's natural padding to handle it */
.bio-block:last-of-type { margin-bottom: 0; }

/* ==========================================================================
   Large, IMPOSSIBLE-TO-MISS closed notice
   ========================================================================== */

.closed-notice-large {
  border-width: 5px;
  padding-block: clamp(var(--space-16), 6vw, var(--space-24));
  padding-inline: clamp(var(--space-12), 6vw, var(--space-20));
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in oklab, var(--color-oxblood) 6%, var(--color-surface)) 0px,
      color-mix(in oklab, var(--color-oxblood) 6%, var(--color-surface)) 14px,
      var(--color-surface) 14px,
      var(--color-surface) 28px
    );
  box-shadow:
    inset 0 0 0 3px var(--color-surface),
    inset 0 0 0 6px color-mix(in oklab, var(--color-gold) 80%, transparent),
    0 14px 36px rgba(107,31,36,0.18);
}

.closed-notice-large .closed-notice-ornament svg {
  width: 56px;
  height: 56px;
  color: var(--color-oxblood);
}

.closed-notice-large .closed-notice-eyebrow {
  font-size: var(--text-base);
  letter-spacing: 0.5em;
  color: var(--color-oxblood);
  font-weight: 700;
  margin-bottom: var(--space-6);
}

.closed-notice-large .closed-notice-title {
  font-size: clamp(2rem, 1rem + 2.5vw, 3.4rem);
  font-weight: 700;
  margin-bottom: var(--space-7);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.closed-notice-large .closed-notice-body {
  font-size: clamp(var(--text-base), 0.95rem + 0.3vw, var(--text-xl));
  line-height: 1.65;
  font-style: normal;
  margin-bottom: var(--space-8);
  max-width: 60ch;
}
.closed-notice-large .closed-notice-body strong {
  color: var(--color-oxblood);
  font-weight: 700;
}

/* The bottom stamp \u2014 reads like a rubber stamp */
.closed-notice-stamp {
  display: inline-block;
  margin: var(--space-4) auto 0;
  padding: var(--space-3) var(--space-8);
  border: 3px solid var(--color-oxblood);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--text-base), 0.9rem + 0.3vw, var(--text-lg));
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  background: color-mix(in oklab, var(--color-oxblood) 5%, var(--color-surface));
  box-shadow: 0 2px 6px rgba(107,31,36,0.15);
}

/* ==========================================================================
   Contest panel closed banner (inside the Silver Current Prize card)
   ========================================================================== */

.contest-closed-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: 0 0 clamp(var(--space-8), 3vw, var(--space-12));
  padding: var(--space-5) var(--space-6);
  background: var(--color-oxblood);
  color: #fffbf2;
  border: 2px solid var(--color-oxblood);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--text-base), 0.9rem + 0.4vw, var(--text-lg));
  letter-spacing: 0.04em;
  line-height: 1.3;
  box-shadow: 0 4px 12px rgba(107,31,36,0.2);
}
.contest-closed-mark { color: var(--color-gold); font-size: 1.1em; }
.contest-closed-text { flex: 1; max-width: 60ch; }
[data-theme="dark"] .contest-closed-banner {
  background: #4a1216;
  border-color: var(--color-oxblood);
}

/* ==========================================================================
   Form closed banner + disabled state
   ========================================================================== */

.form-closed-banner {
  max-width: 720px;
  margin: 0 auto var(--space-10);
  padding: clamp(var(--space-8), 3vw, var(--space-12)) clamp(var(--space-8), 3.5vw, var(--space-14));
  border: 3px solid var(--color-oxblood);
  background: color-mix(in oklab, var(--color-oxblood) 6%, var(--color-surface));
  text-align: center;
  box-shadow: 0 6px 18px rgba(107,31,36,0.12);
}
.form-closed-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--text-lg), 1rem + 0.8vw, var(--text-2xl));
  color: var(--color-oxblood);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
}
.form-closed-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  max-width: 60ch;
  margin-inline: auto;
}

/* Dim the form so it visually communicates "not active right now" */
.submission-form[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.25);
}

/* Disabled button styling \u2014 cannot be hovered/clicked */
.btn-disabled,
.btn:disabled {
  pointer-events: auto;
  cursor: not-allowed;
  background: color-mix(in oklab, var(--color-oxblood) 10%, var(--color-surface-2));
  color: var(--color-oxblood);
  border-color: var(--color-oxblood);
  opacity: 1;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.btn-disabled:hover,
.btn:disabled:hover {
  background: color-mix(in oklab, var(--color-oxblood) 10%, var(--color-surface-2));
  color: var(--color-oxblood);
}

/* Nav "Closed" tag — subtle uppercase marker next to Submissions in the menu */
.nav-closed-tag {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.05em 0.45em;
  font-family: var(--font-ui);
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  border: 1px solid var(--color-oxblood);
  background: color-mix(in oklab, var(--color-oxblood) 6%, var(--color-surface));
  border-radius: 2px;
  vertical-align: 1px;
}

/* ==========================================================================
   Services page — service cards (Art Deco, oxblood + gold + champagne)
   ========================================================================== */

.container-narrow {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.page-header-sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: var(--space-6) auto 0;
  text-align: center;
}

.service-card {
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--color-surface) 96%, var(--color-gold) 4%) 0%,
      var(--color-surface) 100%);
  border: 2px solid var(--color-oxblood);
  box-shadow:
    inset 0 0 0 1px var(--color-surface),
    inset 0 0 0 3px color-mix(in oklab, var(--color-gold) 65%, transparent),
    0 14px 32px rgba(31,58,38,0.10);
  padding-block: clamp(var(--space-12), 5vw, var(--space-16));
  padding-inline: clamp(var(--space-12), 6vw, var(--space-20));
  margin-block: var(--space-8);
}

/* Deco stepped corners */
.service-card::before,
.service-card::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gold);
  pointer-events: none;
}
.service-card::before { top: -10px;    left: -10px;    border-right: none; border-bottom: none; }
.service-card::after  { bottom: -10px; right: -10px;   border-left:  none; border-top:    none; }

[data-theme="dark"] .service-card {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--color-surface) 90%, var(--color-gold) 10%) 0%,
      var(--color-surface) 100%);
  box-shadow:
    inset 0 0 0 1px var(--color-surface),
    inset 0 0 0 3px color-mix(in oklab, var(--color-gold) 60%, transparent),
    0 14px 32px rgba(0,0,0,0.32);
}

.service-card-header {
  text-align: center;
  margin-bottom: clamp(var(--space-8), 3vw, var(--space-12));
  padding-bottom: clamp(var(--space-6), 2vw, var(--space-8));
  border-bottom: 1px solid color-mix(in oklab, var(--color-gold) 50%, transparent);
}

.service-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: var(--space-5);
  font-weight: 600;
}
[data-theme="dark"] .service-eyebrow { color: var(--color-forest-bright); }

.service-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.3rem);
  letter-spacing: 0.03em;
  color: var(--color-oxblood);
  margin: 0 0 var(--space-5);
  line-height: 1.18;
}
[data-theme="dark"] .service-title { color: var(--color-oxblood-bright); }

.service-tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--color-text);
  max-width: 60ch;
  margin-inline: auto;
}

.service-body {
  margin-bottom: clamp(var(--space-8), 3vw, var(--space-10));
}

.service-h3 {
  font-family: var(--font-deco);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin: 0 0 var(--space-5);
  text-align: center;
}
[data-theme="dark"] .service-h3 { color: var(--color-forest-bright); }

.service-body p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.72;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}

.service-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0;
  display: grid;
  gap: var(--space-3);
}

.service-list {
  padding-inline: clamp(var(--space-4), 2vw, var(--space-8));
}

.service-list li {
  position: relative;
  padding-left: var(--space-10);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
}

.service-list li::before {
  content: "❖";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-gold);
  font-size: 0.95em;
}

.service-note {
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-gold);
  padding-left: var(--space-5);
  margin-top: var(--space-6);
  margin-inline: clamp(var(--space-4), 2vw, var(--space-8));
}

/* Rate panel */
.service-rates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--space-5), 2.5vw, var(--space-8));
  margin: clamp(var(--space-8), 3vw, var(--space-10)) 0;
  padding-block: clamp(var(--space-6), 2.5vw, var(--space-8));
  border-top: 1px solid var(--color-gold);
  border-bottom: 1px solid var(--color-gold);
  text-align: center;
}

.service-rates.service-rates-3 { grid-template-columns: repeat(3, 1fr); }
.service-rates.service-rates-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
@media (min-width: 880px) {
  .service-rates.service-rates-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Four-up columns are narrower, so give the (longer, 4-digit) prices in
     this layout a smaller, tightly-clamped size to guarantee a single-line
     fit across the whole 880px-1200px range, not just at the top end. */
  .service-rates.service-rates-4 .rate-amount {
    font-size: clamp(1.15rem, 0.7rem + 0.9vw, 1.8rem);
  }
  /* Four-up columns are also narrower for the label text, so tighten the
     tracking a touch and let long labels wrap onto two lines instead of
     overflowing past the card border. */
  .service-rates.service-rates-4 .service-rate dt {
    letter-spacing: 0.06em;
    line-height: 1.4;
    font-size: 0.72rem;
  }
}
@media (min-width: 1200px) {
  /* Once each column has enough room, let the price grow back toward the
     shared default size. */
  .service-rates.service-rates-4 .rate-amount {
    font-size: clamp(1.8rem, 1.1rem + 1.2vw, 2.6rem);
  }
}

/* Timeline note */
.service-timeline {
  margin: clamp(var(--space-6), 2vw, var(--space-8)) auto 0;
  padding-inline: clamp(var(--space-4), 2vw, var(--space-8));
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-style: italic;
  line-height: 1.7;
  color: var(--color-text);
  text-align: center;
  max-width: 64ch;
}
.service-timeline strong {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-forest);
  display: block;
  margin-bottom: var(--space-2);
}
[data-theme="dark"] .service-timeline strong { color: var(--color-forest-bright); }

.service-rate {
  position: relative;
  padding-inline: var(--space-3);
  min-width: 0;
}

.service-rate + .service-rate::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: color-mix(in oklab, var(--color-gold) 60%, transparent);
}

.service-rate dt {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: var(--space-4);
  font-weight: 600;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
}
[data-theme="dark"] .service-rate dt { color: var(--color-forest-bright); }

.service-rate dd {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.rate-amount {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 1.2rem + 1.4vw, 2.6rem);
  letter-spacing: 0.02em;
  color: var(--color-oxblood);
  line-height: 1;
  white-space: nowrap;
}
[data-theme="dark"] .rate-amount { color: var(--color-oxblood-bright); }

.rate-unit {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.service-cta {
  text-align: center;
  margin-top: clamp(var(--space-6), 2.5vw, var(--space-8));
}

.service-cta .btn {
  border-color: var(--color-gold);
  color: var(--color-text);
  padding-inline: var(--space-10);
}
.service-cta .btn:hover { background: var(--color-gold); color: var(--color-on-accent); }

.service-card-press .service-list strong {
  color: var(--color-oxblood);
}
[data-theme="dark"] .service-card-press .service-list strong { color: var(--color-oxblood-bright); }

@media (max-width: 640px) {
  .service-rates { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .service-rate + .service-rate::before {
    left: 18%;
    right: 18%;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}

/* ==========================================================================
   Global readability pass — May 2026
   Heavier weights, darker body color, larger rate-card text, mobile fixes.
   Sample writing (.excerpt-body) is preserved exactly as before.
   ========================================================================== */

/* Body weight: heavier across the site (Garamond 400 → 500) */
:root {
  --color-text: #1a1408;          /* darker in light mode for stronger contrast */
}

body {
  font-weight: 500;
}

/* Headings — bolder */
h1, h2, h3, h4, h5, h6,
.section-title h2,
.page-header h1, .page-header h2,
.service-title,
.contest-title,
.excerpt-title,
.book-title {
  font-weight: 700 !important;
}

/* Body paragraphs, list items, links — heavier weight */
p, li, dd, dt, label, span:not(.rate-amount):not(.rate-unit) {
  font-weight: 500;
}

strong, b { font-weight: 700; }

/* Eyebrows / small caps labels — heavier */
.eyebrow,
.service-eyebrow,
.excerpt-eyebrow,
.page-header-eyebrow,
.contest-eyebrow {
  font-weight: 700 !important;
  letter-spacing: 0.32em;
}

/* Nav links — heavier */
.nav-links a {
  font-weight: 600 !important;
}

/* Section h3 (e.g. "What you are purchasing") — heavier */
.service-h3 {
  font-weight: 800 !important;
  letter-spacing: 0.22em;
}

/* Service rate panel — heavier numerals, bolder labels */
.rate-amount {
  font-weight: 700 !important;
}
.rate-unit {
  font-weight: 500;
}
.service-rate dt {
  font-weight: 700 !important;
}

/* Service-list bullet text — slightly heavier */
.service-list li {
  font-weight: 500;
}
.service-list li::before {
  font-weight: 700;
}

/* Page-header subtitle — stronger */
.page-header-sub {
  font-weight: 500;
}

/* Tagline italics — heavier so they're not wispy */
.service-tagline {
  font-weight: 500;
}

/* Timeline label and body — heavier */
.service-timeline {
  font-weight: 500;
}
.service-timeline strong {
  font-weight: 700 !important;
}

/* Service-note — heavier */
.service-note {
  font-weight: 500;
}

/* Buttons — heavier */
.btn,
a.btn,
.buy-link {
  font-weight: 700 !important;
  letter-spacing: 0.06em;
}

/* Footer — heavier */
.site-footer p,
.footer-name,
.footer-tagline,
.footer-links a,
.footer-meta {
  font-weight: 500;
}
.footer-name { font-weight: 700 !important; }

/* Honors / credentials — heavier */
.credential,
.credential h3,
.honor,
.honor h3 {
  font-weight: 500;
}
.credential h3,
.honor h3 { font-weight: 700 !important; }

/* PRESERVE SAMPLE WRITING — restore original light weights & sizes */
.excerpt-body,
.excerpt-body p,
.excerpt-body span,
.excerpt-body em,
.excerpt-body strong {
  font-weight: 400 !important;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem) !important;
}
.excerpt-body strong { font-weight: 600 !important; }

/* ==========================================================================
   Decorative ornament thickness — make every SVG accent more visible
   ========================================================================== */
.deco-rule svg,
.brand-mark,
.footer-mark,
.menu-toggle svg {
  stroke-width: 1.85 !important;
}

.deco-rule {
  filter: none;
}
.deco-rule svg {
  width: 36px;
  height: 36px;
}

/* Horizontal gold rules — make them thicker */
hr,
.section-divider {
  border: none;
  height: 2px;
  background: var(--color-gold);
  opacity: 0.85;
}

/* ==========================================================================
   Mobile rate-card overflow fix
   Long prices like "$650 – $1,800" or "$2,500 – $6,500" must stay in column.
   Keep each price on a single line — never break mid-number — and instead
   let the font size shrink to fit the available column width.
   ========================================================================== */
.rate-amount {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;        /* never split a price across lines */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  line-height: 1.1;
}

.rate-unit {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  padding-inline: var(--space-2);
}

@media (max-width: 640px) {
  /* On phones, scale the rate amount down so wide values don't bust the column */
  .rate-amount {
    font-size: clamp(1.5rem, 6vw, 1.9rem) !important;
  }
  .rate-unit {
    font-size: 0.82rem !important;
  }
  .service-rate {
    padding-inline: var(--space-2);
  }
  /* Force all rate grids to single-column on phones so wide prices fit */
  .service-rates,
  .service-rates.service-rates-3,
  .service-rates.service-rates-4 {
    grid-template-columns: 1fr !important;
    gap: var(--space-6);
  }
  .service-rate + .service-rate::before {
    left: 18%;
    right: 18%;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  /* Slightly tighter inner padding on service cards for phones */
  .service-card {
    padding-inline: clamp(var(--space-6), 5vw, var(--space-10));
  }
}

/* ==========================================================================
   Dark-mode readability — LIGHTER & THICKER (not darker)
   Principle: contrast through brightness, not darkness. All body text
   becomes a bright cream; all gold accents become more luminous; weights
   are bumped one step heavier than light mode for legibility on the
   grayish-blue background.
   ========================================================================== */
[data-theme="dark"] {
  --color-text: #fbf7e8;             /* near-white cream */
  --color-text-muted: #ece2c8;       /* still bright, just slightly muted */
  --color-text-faint: #c8c8c8;

  /* Boost dark-mode gold accents (titles, eyebrows, rules) to be more luminous */
  --color-oxblood: #ecc88a;
  --color-oxblood-bright: #f3d9a3;
  --color-forest: #ecc88a;
  --color-forest-bright: #f3d9a3;
  --color-brass: #ecc88a;
  --color-brass-bright: #f3d9a3;
  --color-gold: #ecc88a;
  --color-gold-bright: #f3d9a3;
  --color-border: #ecc88a;
}

/* In dark mode, body text goes one step heavier (500 → 600) for visibility
   on the grayish-blue background. Light mode stays at 500. */
[data-theme="dark"] body,
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] dd,
[data-theme="dark"] dt,
[data-theme="dark"] .service-tagline,
[data-theme="dark"] .page-header-sub,
[data-theme="dark"] .service-note,
[data-theme="dark"] .service-timeline,
[data-theme="dark"] .nav-links a,
[data-theme="dark"] .footer-links a,
[data-theme="dark"] .footer-meta,
[data-theme="dark"] .footer-tagline {
  font-weight: 600 !important;
}

[data-theme="dark"] .service-list li,
[data-theme="dark"] .service-list li::before {
  font-weight: 600 !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] .service-title,
[data-theme="dark"] .service-h3,
[data-theme="dark"] .section-title h2,
[data-theme="dark"] .page-header h1, [data-theme="dark"] .page-header h2,
[data-theme="dark"] .rate-amount,
[data-theme="dark"] .service-rate dt,
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .service-eyebrow,
[data-theme="dark"] .page-header-eyebrow {
  font-weight: 800 !important;
}

/* Dark-mode ornament strokes — thicker and brighter gold */
[data-theme="dark"] .deco-rule svg,
[data-theme="dark"] .brand-mark,
[data-theme="dark"] .footer-mark {
  stroke-width: 2 !important;
  color: var(--color-gold-bright);
}

/* Dark-mode horizontal rules — thicker and brighter */
[data-theme="dark"] hr,
[data-theme="dark"] .section-divider {
  height: 2.5px;
  background: var(--color-gold-bright);
  opacity: 1;
}

/* Sample writing always stays at the original (lighter) weight/size in both modes */
.excerpt-body,
.excerpt-body p,
[data-theme="dark"] .excerpt-body,
[data-theme="dark"] .excerpt-body p {
  font-weight: 400 !important;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem) !important;
}
.excerpt-body strong,
[data-theme="dark"] .excerpt-body strong {
  font-weight: 600 !important;
}

/* ==========================================================================
   May 2026 — Mobile audit + Thoreau attribution + bordered-callout padding
   ========================================================================== */

/* 1. Center the Thoreau attribution under his quote (display:block guarantees
      the text-align center applies even with inherited flex parents). */
.intro-panel-quote-attr {
  display: block !important;
  text-align: center !important;
  width: 100%;
  font-size: 0.72rem;
  font-weight: 700 !important;
}

/* 2. Honors-at-a-Glance entries: more breathing room so bold labels never
      jam against the gold rule or adjacent line on small screens. */
.intro-panel-awards {
  padding-inline: var(--space-4);
  font-size: 0.82rem;
}
.intro-panel-awards li {
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
}
.intro-panel-awards li strong {
  font-size: 0.82rem;
  margin-bottom: 4px;
}

/* 3. Pillar cards on Submissions ("Fiction / Poetry / Nonfiction") — these
      had NO styles in the stylesheet, so the text was running to container
      edges. Give them proper card framing and inner padding. */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.pillar {
  position: relative;
  padding: var(--space-10) var(--space-8) var(--space-8);
  background: color-mix(in oklab, var(--color-surface) 96%, var(--color-gold) 4%);
  border: 1px solid color-mix(in oklab, var(--color-gold) 60%, transparent);
  border-top: 3px solid var(--color-gold);
  border-radius: 2px;
  text-align: center;
}

.pillar-mark {
  display: block;
  font-family: var(--font-deco);
  font-size: 1.4rem;
  letter-spacing: 0.18em;
  color: var(--color-oxblood);
  font-weight: 700;
  margin-bottom: var(--space-4);
}
[data-theme="dark"] .pillar-mark { color: var(--color-oxblood-bright); }

.pillar h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-oxblood);
  margin: 0 0 var(--space-5);
  letter-spacing: 0.04em;
}

.pillar p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  margin: 0;
  padding-inline: var(--space-2);
}

@media (max-width: 880px) {
  .pillars { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .pillar { padding: var(--space-8) var(--space-6); }
}

/* 4. Service-note (italic boxed text with a gold left rule) — push text
      farther from the rule on every screen, especially mobile. */
.service-note {
  padding-left: var(--space-8) !important;
}

/* 5. Universal mobile safety pass — nothing crosses a line on phones. */
@media (max-width: 640px) {
  /* Containers honor screen edges */
  .container,
  .container-narrow {
    padding-inline: var(--space-5) !important;
  }

  /* Anywhere we have a left-rule boxed text, make sure text doesn't kiss it */
  .service-note,
  blockquote,
  .pull-quote,
  .callout {
    padding-left: var(--space-7) !important;
    padding-right: var(--space-4) !important;
  }

  /* Prevent any wide table or pre from breaking layout */
  table, pre, code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
  }

  /* Prevent ALL long inline content (URLs, prices, prose) from busting columns.
     Excludes .service-rate dt / .rate-amount / .rate-unit / .hero-genre-text —
     those short, letter-spaced UI labels must always wrap at whole-word
     boundaries, never split mid-word, so they keep their own rules below. */
  body, p, li, dd, dt, span, a, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .service-rate dt,
  .rate-amount,
  .rate-unit,
  .hero-genre-text {
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  /* Service cards on phones — tighter padding so content has room */
  .service-card {
    padding-inline: var(--space-6) !important;
    padding-block: var(--space-10) !important;
  }

  /* Service eyebrow shouldn't span so wide that it wraps awkwardly */
  .service-eyebrow,
  .eyebrow,
  .page-header-eyebrow {
    letter-spacing: 0.22em !important;
    font-size: 0.7rem !important;
  }

  /* Service h3 (e.g. "WHAT YOU ARE PURCHASING") narrow on phones */
  .service-h3 {
    letter-spacing: 0.16em !important;
    font-size: 0.85rem !important;
  }

  /* Service list bullet — keep the diamond from sliding under the text */
  .service-list li {
    padding-left: var(--space-9) !important;
  }

  /* Honors list on phones: tighter type, more breathing room */
  .intro-panel-awards {
    font-size: 0.78rem;
    padding-inline: var(--space-3);
  }

  /* Thoreau panel — phone padding */
  .intro-panel {
    padding-inline: var(--space-5) !important;
  }

  /* Page headers — reduce huge clamp values so titles don't wrap weirdly.
     Single unbreakable words ("COLLECTIONS", "TRANSCENDENTALISM") set the
     ceiling: at 7.5vw + 0.03em tracking the 17-letter "TRANSCENDENTALISM"
     (~12.2em in Cinzel caps) overran the keyline frame on a 393px iPhone and
     crossed the gold borders. Drop the clamp floor/ceiling and tracking just
     enough that the longest word sits inside the frame at 320–440px. */
  .page-header h1, .page-header h2 { font-size: clamp(1.3rem, 6.75vw, 2.5rem) !important; letter-spacing: 0.02em !important; }

  /* Footer — center and let it breathe */
  .footer-inner { padding-inline: var(--space-4); }
  .footer-links { line-height: 2; }

  /* Navigation menu items shouldn't stretch onto two lines */
  .nav-links a { white-space: nowrap; }
}

/* 6. Dark-mode pillar tweak — same treatment, brighter accents */
[data-theme="dark"] .pillar {
  background: color-mix(in oklab, var(--color-surface) 88%, var(--color-gold) 12%);
  border: 1px solid var(--color-gold);
  border-top: 3px solid var(--color-gold);
}
[data-theme="dark"] .pillar h3 { color: var(--color-oxblood-bright); }

/* ==========================================================================
   May 26 — FINAL MOBILE PADDING PASS
   Authoritative overrides. Every text container has guaranteed left/right
   breathing room; ❖ bullets have guaranteed gap to text.
   ========================================================================== */

/* GLOBAL — bullet ❖ spacing fix (decisive, !important) */
.service-list li,
.intro-panel-awards li {
  padding-left: 2.25rem !important;     /* generous gap from bullet to text */
}
.service-list li::before {
  left: 0.25rem !important;             /* push the diamond off the border */
}

/* All bordered "card" surfaces — give text generous inner padding */
.service-card,
.contest-card,
.honor,
.intro-panel,
.pillar,
.hero-text,
.section .container {
  /* Floor padding on every card; clamped so desktop unchanged */
  padding-inline: clamp(var(--space-5), 4vw, var(--space-16));
}

/* Phone-specific authoritative padding */
@media (max-width: 640px) {
  /* Every container gets a comfortable inset from screen edge */
  .container,
  .container-narrow {
    padding-inline: 22px !important;
  }

  /* Cards get even more inner padding so text doesn't kiss the border */
  .service-card,
  .contest-card,
  .honor,
  .pillar,
  .intro-panel {
    padding-inline: 24px !important;
  }

  /* Hero text block — generous left/right inset */
  .hero-text {
    padding-inline: 22px !important;
  }
  .hero-name {
    font-size: clamp(2rem, 8vw, 2.6rem) !important;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .hero-tagline,
  .hero-role {
    padding-inline: 6px;
  }
  .hero-cta {
    padding-inline: 6px;
  }

  /* Page header containers */
  .page-header {
    padding-inline: 22px !important;
  }
  .page-header h1, .page-header h2 {
    padding-inline: 8px;
  }

  /* Section titles */
  .section-title {
    padding-inline: 12px;
  }
  .section-title h2 {
    padding-inline: 4px;
  }

  /* Service card chapter eyebrow + title + tagline more space */
  .service-card-header {
    padding-inline: 4px;
  }
  .service-title {
    padding-inline: 4px;
  }
  .service-tagline {
    padding-inline: 6px;
  }

  /* Service-list bullets even more padding on phones */
  .service-list {
    padding-inline: 8px !important;
  }
  .service-list li {
    padding-left: 2.5rem !important;
  }

  /* Service-note callout */
  .service-note {
    margin-inline: 4px !important;
    padding-left: 18px !important;
    padding-right: 10px !important;
  }

  /* Rate card */
  .service-rates {
    margin-inline: 4px;
    padding-inline: 8px;
  }

  /* Timeline note */
  .service-timeline {
    padding-inline: 12px !important;
  }

  /* Honors list (About panel) */
  .intro-panel-awards {
    padding-inline: 12px !important;
  }
  .intro-panel-awards li {
    padding-inline: 8px !important;
  }

  /* Hero genre chip — extra inset on phones so text never touches gold */
  .hero-genre-chip {
    margin-inline: 10px;
  }

  /* Buttons — keep them from touching card edges */
  .hero-cta .btn,
  .btn {
    margin-inline: 2px;
  }

  /* Pillar (Fiction / Poetry / Nonfiction) */
  .pillar h3 { padding-inline: 8px; }
  .pillar p { padding-inline: 10px !important; }
}

/* DARK MODE — preserve all the same padding */
[data-theme="dark"] .service-list li,
[data-theme="dark"] .intro-panel-awards li {
  padding-left: 2.25rem !important;
}

/* ============ Service 06 · Press service entries (added 2026-05-31) ============ */
.press-service{
  margin-top:var(--space-6);
  padding:var(--space-5) var(--space-6);
  border:1px solid rgba(107,31,36,0.18);
  border-radius:6px;
  background:rgba(244,236,217,0.45);
}
.press-service + .press-service{ margin-top:var(--space-4); }
.press-service-name{
  font-family:'Cinzel', 'Marcellus SC', serif;
  font-weight:500;
  font-size:1.05rem;
  line-height:1.4;
  margin:0 0 var(--space-3) 0;
  color:#6b1f24;
  letter-spacing:0.02em;
}
.press-service-desc{
  font-style:italic;
  margin:0 0 var(--space-3) 0;
}
.press-service p{
  margin:0 0 var(--space-2) 0;
  line-height:1.55;
}
.press-service p strong{ color:#4a1417; }
/* ---------------------------------------------------------------
   Study note — a bordered aside for printable editions and
   supplementary downloads (used on essay and study pages).
   --------------------------------------------------------------- */
.study-note {
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
  padding: var(--space-6) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-oxblood);
  border-radius: 2px;
}

.study-note p {
  text-indent: 0;
  margin-bottom: 0;
  color: var(--color-text-muted);
}

.study-note p + p {
  margin-top: var(--space-4);
}

.study-note strong {
  color: var(--color-oxblood);
  font-family: var(--font-display, inherit);
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  .study-note {
    padding: var(--space-5) var(--space-4);
    margin-top: var(--space-8);
  }
}

/* ============================================================
   RATE GRID + NAVIGATION FIT CORRECTIONS
   ------------------------------------------------------------
   1. Four-up rate grids. Above 1200px the price size grew faster
      than its column, so four-figure values ($6,800, $4,200,
      $2,400) ran past the column and crossed the divider rules.
      Tighten the column gap to widen each column, and cap the
      price size so the longest value always sits on one line.

   2. Desktop navigation. With twelve links the bar no longer fits
      between 1361px and 1760px, which put a horizontal scrollbar
      on every page. Tighten the tracking and the gap across that
      band only, so the full menu still shows on a 1440px laptop.
      Above 1760px the row has room for the menu at full size.
   ============================================================ */
@media (min-width: 1200px) {
  .service-rates.service-rates-4 {
    column-gap: clamp(var(--space-3), 1.3vw, var(--space-5));
  }
  .service-rates.service-rates-4 .rate-amount {
    font-size: clamp(1.5rem, 0.75rem + 1.05vw, 2.1rem);
  }
}

/* The nav has grown to 14 items since this rule was first written for 12,
   and the header row's max-width is fixed at var(--content-default)
   (1240px) rather than growing with the viewport - so tightening the menu
   only up to 1760px left every wider desktop failing again, from 1792px
   right up through 4K. Uncapped: this band now runs from the point the
   burger menu hides (1361px) to infinity, so there is no upper edge left
   to outgrow next time a link is added. */
@media (min-width: 1361px) {
  .nav-links { gap: clamp(0.4rem, 0.65vw, 0.85rem); }
  .nav-links a {
    font-size: 0.75rem;
    letter-spacing: 0.085em;
  }
}

/* ============================================================
   BRAND WORDMARK - KEEP ON ONE LINE ON DESKTOP
   ------------------------------------------------------------
   The wordmark is a flex item next to the nav list, so once the
   menu grew to twelve links the browser resolved the shortfall by
   letting "JAMES MULHERN" wrap onto a second line, which left the
   header looking broken at every width above 1360px.

   Hold the wordmark on a single line and stop it being compressed,
   then buy back the width it needs by easing the Deco tracking a
   little and trimming the gap between mark and words. Below
   1360px the menu collapses to the toggle and the wordmark has
   room to spare, so this is scoped to desktop only.
   ============================================================ */
@media (min-width: 1361px) {
  .brand {
    flex-shrink: 0;
    gap: var(--space-2);
  }
  .brand span {
    white-space: nowrap;
    letter-spacing: 0.17em;
  }
}

/* ============================================================
   MOBILE WORDMARK - KEEP ON ONE LINE
   ------------------------------------------------------------
   Below 1360px the menu collapses to the toggle, but the wordmark
   was still free to wrap letter-by-letter down the left edge
   ("J A M E S ..."), which made the sticky header tall enough to
   cover the reading area. Hold it on one line, stop the brand
   shrinking, and ease the tracking so "JAMES MULHERN" fits a
   phone column beside the action buttons.
   ============================================================ */
@media (max-width: 1360px) {
  .brand {
    flex-shrink: 0;
    min-width: 0;
    gap: var(--space-2);
  }
  .brand span {
    white-space: nowrap;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
  }
}

/* Very narrow phones: drop the search toggle so the wordmark keeps room.
   (Search stays available from 375px up and on tablet/desktop.) */
@media (max-width: 360px) {
  .search-toggle {
    display: none;
  }
}

/* ============================================================
   ESSAY / GUIDE PAID-DOWNLOAD BOX (Payhip)
   ------------------------------------------------------------
   A quiet purchase box for a typeset PDF edition of an essay
   or guide, placed after the free on-page reading content.
   Reading the piece itself always stays free; this box sells
   the keepable, offline copy.
   ============================================================ */
.essay-download-box {
  max-width: 46ch;
  margin: var(--space-10) auto var(--space-10);
  padding: var(--space-6) var(--space-7);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-top: 2px solid var(--color-brass);
}
.essay-download-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brass-deep);
  margin: 0 0 var(--space-2);
}
.essay-download-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-oxblood);
  margin: 0 0 var(--space-3);
}
.essay-download-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.essay-download-btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f8f1dd !important;
  background: var(--color-oxblood);
  padding: 13px 28px;
  border-radius: 2px;
  text-decoration: none !important;
  transition: background 0.25s ease;
}
.essay-download-btn:hover {
  background: var(--color-oxblood-bright);
}

/* Guides page: paid upgrade line under a free-download card */
.guide-card-upgrade {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-divider);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}
.guide-card-upgrade-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.guide-card-upgrade a.payhip-buy-button {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-oxblood) !important;
  text-decoration: none !important;
}
.guide-card-upgrade a.payhip-buy-button:hover {
  color: var(--color-brass-deep) !important;
}

/* Essay standfirst — the deck beneath an essay title, set in the body column */
.essay-standfirst {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-text-muted, var(--color-text));
  max-width: 60ch;
  margin-block: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
}

/* ============================================================
   BUTTON CORNER BRACKETS ON NARROW SCREENS
   ------------------------------------------------------------
   .btn::before / ::after draw the Deco corner brackets at -4px
   outside the button edge. That is invisible on desktop, but when
   a long label ("Download the Complete Study (PDF)") makes the
   button run the full width of a phone container, the right-hand
   bracket lands past the viewport and puts a 3px horizontal
   scrollbar on the page.

   Give the brackets room to sit outside the button while staying
   inside the container, let long labels wrap onto a second line,
   and trim the generous side padding so the text has more room
   before it needs to wrap at all.
   ============================================================ */
@media (max-width: 560px) {
  .btn {
    display: flex;
    justify-content: center;
    width: fit-content;
    max-width: calc(100% - 16px);
    margin-inline: auto;
    padding-inline: var(--space-5);
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
  /* Pull the brackets in from 4px to 2px so they clear the margin
     even after sub-pixel rounding; at phone sizes the tighter inset
     reads the same. */
  .btn::before { top: -2px; left: -2px; }
  .btn::after  { bottom: -2px; right: -2px; }
}

/* ============================================================
   DECO PLAQUE - LONG LABELS ON TABLETS
   ------------------------------------------------------------
   .deco-plaque-text is set to nowrap, which suits short plaques
   but not the long ones on the press kit and directory pages
   ("For Journalists, Reviewers & Booksellers", "For Writers
   Considering Submission"). On one line those run about 640px
   wide, and with the plaque's side padding they pushed the page
   127px past the viewport at 560px and 49px at 640px.

   Allow the label to wrap and cap the plaque at its container up
   to 900px, above which the single-line version fits on its own.
   ============================================================ */
@media (max-width: 900px) {
  .deco-plaque { max-width: 100%; }
  .deco-plaque-text {
    white-space: normal;
    text-align: center;
  }
}

/* ============================================================
   GLOBAL SAFEGUARD - NEVER SPLIT LETTER-SPACED LABELS MID-WORD
   ------------------------------------------------------------
   Every eyebrow, badge, nav link, button, and service-card title
   on this site is set in uppercase with wide letter-spacing
   (0.2em-0.45em). When one of these short labels sits in a
   narrow column (mobile stacks, 3-up pricing grids, tablet
   widths), the extra letter-spacing can make a single word a
   few pixels wider than its box. Several component and
   mobile-only rules elsewhere in this file set
   overflow-wrap: anywhere / break-word as a general overflow
   fix for long prose and URLs - but applied to these short
   uppercase labels, that same rule lets the browser slice a
   word apart at an arbitrary character (e.g. "CHAPBOOK" ->
   "CHAPBOO" / "K", "SUBMISSION" -> "SUBMISSI" / "ON") instead
   of simply wrapping the whole word to the next line.

   This rule wins by being last in the file (equal specificity,
   later source order beats earlier) and forces every uppercase,
   letter-spaced label back to whole-word wrapping only, with no
   hyphenation, at every viewport width. Font size may still
   shrink via existing clamp()/media rules - only the line-break
   behavior is locked here.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.brand,
.nav-links a,
.btn,
.eyebrow,
.hero-eyebrow,
.hero h1, .hero .hero-name,
.hero-role,
.accolade-label,
.section-title h2,
.book-cover-title,
.featured-book-info h3,
.pull-quote cite,
.book-meta-item,
.intro-panel-quote-attr,
.intro-panel-eyebrow,
.intro-text h2,
.book-card-genre,
.book-card-title,
.book-card-awards,
.footer-name,
.footer-meta,
.page-header-eyebrow,
.page-header h1, .page-header h2,
.forthcoming-badge,
.praise-book,
.buy-link,
.excerpt-eyebrow,
.excerpt-title,
.excerpt-end,
.poem-title,
.poem-attr,
.editors-note .label,
.read-more-card .venue,
.read-more-card a,
.musing-kind,
.musing-title,
.musing-body cite,
.deco-plaque-text,
.hero-genre-text,
.closed-notice-eyebrow,
.contest-eyebrow,
.contest-detail dt,
.contest-detail dd small,
.closed-notice-stamp,
.btn-disabled, .btn:disabled,
.nav-closed-tag,
.service-eyebrow,
.service-h3,
.service-timeline strong,
.service-rate dt,
.essay-download-eyebrow,
.essay-download-btn,
.guide-card-upgrade a.payhip-buy-button {
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

/* ============================================================
   NARROW-SCREEN OVERFLOW FIXES
   ------------------------------------------------------------
   Found by the full-width audit sweep, which exercises 320px and
   360px - widths the nine-width standard run never reached.

   1. Hero. The single-column fallback at 880px uses `1fr`, which is
      shorthand for minmax(auto, 1fr). The `auto` floor means the
      track can never shrink below the content's min-content width,
      so on a 320px screen the grid resolved to a 346px column and
      pushed the page 46px sideways. minmax(0, 1fr) lets it shrink;
      min-width: 0 does the same for the grid children; and the
      display headline is allowed to break so it has a smaller
      min-content to begin with. The 360px image cap is also wider
      than a 320px viewport, so it is capped against the container.

   2. Closed-submissions stamp. Generous side padding plus 0.25em
      tracking on a long label ran 4px past a 320px screen.
   ============================================================ */
@media (max-width: 880px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-inner > * { min-width: 0; }
  .hero-image { max-width: min(360px, 100%); margin-inline: auto; }
}

@media (max-width: 420px) {
  .hero-text h1,
  .hero-title,
  .hero-text .display {
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .closed-notice-stamp {
    max-width: 100%;
    padding-inline: var(--space-4);
    letter-spacing: 0.14em;
    white-space: normal;
  }
}

/* Grid children default to min-width:auto, which stops them shrinking below
   their content and is what actually forces the track wide. Zero it on the
   two-column layouts that collapse to one column on small screens. */
.featured-book > *,
.intro > *,
.hero-inner > * { min-width: 0; }



/* ============================================================
   DISPLAY TYPE ON VERY SMALL SCREENS
   ------------------------------------------------------------
   "UNQUENCHABLE" and "PHILADELPHIA" are single words wider than a
   320px screen at hero size, and their min-content width dragged the
   whole page sideways - 46px on the feature page, 20px on About.

   The first instinct is to let them break, but that produces
   "UNQUENCHABL / E FIRE" on a 390px phone, which is worse than the
   bug. Scale the type down instead so the longest word simply fits.
   The existing clamp floor of 2rem was the real problem: at 320px the
   floor beat the 8vw preferred size and held the word at 32px.
   ============================================================ */
@media (max-width: 420px) {
  .hero .hero-name,
  .hero-name {
    font-size: clamp(1.25rem, 6.4vw, 2.2rem) !important;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
  }
  .section-title h2 {
    font-size: clamp(1.15rem, 5.6vw, 2rem);
    overflow-wrap: normal;
    hyphens: none;
  }
  .featured-book-info h3 {
    font-size: clamp(1rem, 4.8vw, 1.6rem);
    overflow-wrap: normal;
    hyphens: none;
  }
}

/* Essay and content-page titles are plain <h1> elements (not .hero-name or
   .page-header h1). The base h1 clamp floor of 2.6rem (41.6px) plus the
   0.04em letter-spacing makes a long single word like "Unquenchable" wider
   than a phone column, and overflow-wrap: anywhere then slices it mid-word
   ("UNQUENCHABL" / "E FIRE"). Scale the type down on phones so the longest
   word fits on one line, and lock whole-word wrapping only. */
@media (max-width: 480px) {
  h1 {
    font-size: clamp(1.7rem, 8.5vw, 2.6rem);
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
  }
}

/* ==========================================================================
   Site Search — modal overlay, launched from the header search button
   ========================================================================== */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(var(--space-6), 8vh, var(--space-16)) var(--space-4);
  background: color-mix(in oklab, #1a1410 78%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overflow-y: auto;
}
.search-overlay.open { display: flex; }

/* Hide the "Back to …" return ribbon while the search overlay is open so the
   bar never overlaps or obscures the search input on phone-width screens. */
body.search-open #scp-return-ribbon,
body.search-open #mulhern-return-ribbon {
  display: none;
}

.search-modal {
  width: 100%;
  max-width: 640px;
  background: var(--color-surface);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.search-modal-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) var(--space-4) var(--space-3);
  padding: 0 var(--space-4);
  min-height: 52px;
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-modal-field:focus-within {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-gold) 20%, transparent);
}
.search-modal-field svg {
  width: 20px;
  height: 20px;
  color: var(--color-gold);
  flex-shrink: 0;
}
.search-modal-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text);
}
.search-modal-input::placeholder { color: var(--color-text-muted); opacity: 0.7; }

.search-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.search-modal-close:hover { color: var(--color-oxblood); background: color-mix(in oklab, var(--color-gold) 12%, transparent); }
.search-modal-close svg { width: 16px; height: 16px; }

.search-modal-results {
  max-height: min(60vh, 480px);
  overflow-y: auto;
  padding: var(--space-2) 0;
}

.search-result {
  display: block;
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--color-divider) 60%, transparent);
}
.search-result:last-child { border-bottom: none; }
.search-result:hover,
.search-result.active { background: color-mix(in oklab, var(--color-gold) 10%, transparent); }

.search-result-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-oxblood);
  margin-bottom: 2px;
}
[data-theme="dark"] .search-result-title { color: var(--color-oxblood-bright); }

.search-result-snippet {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-result-snippet mark,
.search-result-title mark {
  background: color-mix(in oklab, var(--color-gold) 45%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.search-modal-empty,
.search-modal-hint {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.search-modal-loading {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (max-width: 480px) {
  .search-overlay { padding: var(--space-4) var(--space-3); }
  .search-modal-field { margin: var(--space-3) var(--space-3) var(--space-2); padding: 0 var(--space-3); min-height: 48px; }
  .search-modal-input { font-size: var(--text-base); }
}

/* ==========================================================================
   Mobile Quick-Nav — 4 primary touchpoints, fixed to bottom on small screens
   ========================================================================== */

.mobile-quicknav {
  display: none;
}

@media (max-width: 640px) {
  .mobile-quicknav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--color-surface);
    border-top: 1px solid var(--color-divider);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  [data-theme="dark"] .mobile-quicknav {
    background: var(--color-surface);
    border-top-color: var(--color-divider);
  }
  .mobile-quicknav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 2px 7px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 9px;
    letter-spacing: 0.01em;
    text-align: center;
    line-height: 1.1;
    transition: color 0.15s ease;
  }
  .mobile-quicknav a svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
  }
  .mobile-quicknav a:hover,
  .mobile-quicknav a:active {
    color: var(--color-oxblood);
  }
  [data-theme="dark"] .mobile-quicknav a:hover,
  [data-theme="dark"] .mobile-quicknav a:active {
    color: var(--color-oxblood-bright);
  }
  /* Keep page content and any fixed footer bars clear of the quick-nav */
  body { padding-bottom: 58px; }
}

/* ==========================================================================
   Filter Tabs — category filtering for essays.html / guides.html
   ========================================================================== */

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: 0 0 clamp(var(--space-8), 4vw, var(--space-10));
}

.filter-tab {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.filter-tab:hover {
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
}

.filter-tab.is-active {
  background: var(--color-oxblood);
  border-color: var(--color-oxblood);
  color: var(--color-surface);
}

[data-theme="dark"] .filter-tab.is-active {
  background: var(--color-oxblood-bright);
  border-color: var(--color-oxblood-bright);
}

.filter-tab-count {
  opacity: 0.7;
  font-size: 0.92em;
}

.read-more-card[hidden],
.guide-group[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .filter-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: var(--space-2);
    margin-left: calc(-1 * var(--space-5));
    margin-right: calc(-1 * var(--space-5));
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   Read-Excerpt Modal — on-site Chapter One preview (books.html)
   ========================================================================== */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-oxblood);
  color: var(--color-oxblood);
  cursor: pointer;
}
[data-theme="dark"] .btn-ghost {
  border-color: var(--color-oxblood-bright);
  color: var(--color-oxblood-bright);
}
.btn-ghost:hover {
  background: var(--color-oxblood);
  color: var(--color-surface);
}

.buy-link-outline {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
  margin-left: var(--space-4);
  text-decoration: underline;
  text-decoration-style: dotted;
}

.excerpt-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(20, 14, 10, 0.72);
  backdrop-filter: blur(2px);
}
.excerpt-modal-overlay[hidden] { display: none; }

.excerpt-modal {
  position: relative;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: clamp(var(--space-8), 5vw, var(--space-12));
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}

.excerpt-modal-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-divider);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}
.excerpt-modal-close:hover {
  color: var(--color-oxblood);
  border-color: var(--color-oxblood);
}

.excerpt-modal-panel { display: none; }
.excerpt-modal-panel.is-active { display: block; }

.excerpt-modal-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin-bottom: var(--space-3);
}
[data-theme="dark"] .excerpt-modal-eyebrow { color: var(--color-oxblood-bright); }

.excerpt-modal-title {
  font-family: var(--font-deco);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}

.excerpt-modal-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text);
}
.excerpt-modal-body p { margin-bottom: var(--space-5); }
.excerpt-modal-body p:first-of-type:not(.excerpt-modal-epigraph)::first-letter {
  font-family: var(--font-deco);
  font-size: 2.6em;
  float: left;
  line-height: 0.85;
  padding: 0.05em 0.08em 0 0;
  color: var(--color-oxblood);
}
[data-theme="dark"] .excerpt-modal-body p:first-of-type:not(.excerpt-modal-epigraph)::first-letter {
  color: var(--color-oxblood-bright);
}

.excerpt-modal-epigraph {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-brass);
  padding-left: var(--space-4);
  margin-bottom: var(--space-7) !important;
}
.excerpt-modal-epigraph-attr {
  display: inline-block;
  margin-top: var(--space-2);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-oxblood);
}
[data-theme="dark"] .excerpt-modal-epigraph-attr { color: var(--color-oxblood-bright); }

.excerpt-modal-fade {
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-top: 1px dashed var(--color-divider);
  padding-top: var(--space-5);
  margin-top: var(--space-6) !important;
}

@media (max-width: 480px) {
  .excerpt-modal { padding: var(--space-6); max-height: 90vh; }
  .excerpt-modal-title { font-size: 1.4rem; }
}

/* ==========================================================================
   Poem Audio Sample — Crossings collection page
   ========================================================================== */

.poem-audio-sample {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.poem-audio-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0;
  flex-shrink: 0;
}
[data-theme="dark"] .poem-audio-label { color: var(--color-oxblood-bright); }

.poem-audio-sample audio {
  flex: 1;
  min-width: 220px;
  height: 36px;
}

@media (max-width: 480px) {
  .poem-audio-sample { flex-direction: column; align-items: stretch; }
  .poem-audio-sample audio { width: 100%; }
}

/* ==========================================================================
   Reader's Circle — email capture, site-wide (before footer)
   ========================================================================== */

.readers-circle {
  padding: clamp(var(--space-12), 6vw, var(--space-16)) 0;
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.readers-circle-panel {
  text-align: center;
}

.readers-circle-title {
  font-family: var(--font-deco);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: var(--space-4) 0 var(--space-4);
}

.readers-circle-copy {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: 0 auto var(--space-7);
}

.readers-circle-btn {
  display: inline-flex;
}

/* Compact hero-adjacent variant on the homepage */
.readers-circle-hero {
  margin-top: clamp(var(--space-8), 4vw, var(--space-10));
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  justify-content: space-between;
}

.readers-circle-hero-text {
  flex: 1;
  min-width: 220px;
}

.readers-circle-hero-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0 0 4px;
}
[data-theme="dark"] .readers-circle-hero-label { color: var(--color-oxblood-bright); }

.readers-circle-hero-text p:last-child {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.readers-circle-hero .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .readers-circle-hero { flex-direction: column; align-items: stretch; text-align: center; }
  .readers-circle-hero .btn { width: 100%; justify-content: center; }
  /* Phone overflow guard: the panel and its button must never push the page
     wider than the viewport. Drop the 220px text floor, let the button copy
     wrap instead of forcing a single nowrap line, and allow long words to
     break so nothing is clipped on the right edge. */
  .readers-circle-hero-text { min-width: 0; }
  .readers-circle-hero .btn { white-space: normal; letter-spacing: 0.18em; }
  .readers-circle-hero-label,
  .readers-circle-hero-text p { overflow-wrap: break-word; }
}

/* Two-column hero range: the text column narrows enough that the button
   wraps and collides with the panel border. Stack it full-width instead. */
@media (min-width: 641px) and (max-width: 1050px) {
  .readers-circle-hero { flex-direction: column; align-items: stretch; text-align: center; }
  .readers-circle-hero .btn { width: 100%; justify-content: center; }
  .readers-circle-hero-text { min-width: 0; }
  .readers-circle-hero .btn { white-space: normal; }
}

/* ==========================================================================
   Site notice (under-construction)
   ========================================================================== */
.site-notice {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-8);
  text-align: center;
}
.site-notice-text {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.65;
  font-style: italic;
  color: var(--color-text);
  margin: 0;
}
.site-notice-label {
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
  color: var(--color-oxblood);
  margin-bottom: 10px;
}
.site-notice-text a {
  color: var(--color-oxblood);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.site-notice-text a:hover {
  color: var(--color-brass-deep, #6b5128);
}

/* ==========================================================================
   New Art Deco ornaments — sunburst, stepped band, fan corners, hopper frame
   Added to deepen the Art Deco identity while staying subordinate to text.
   ========================================================================== */

/* Framed "print" treatment for Hopper-style paintings: a parchment mat
   with a gold hairline, echoing the book-cover deco frames. */
.hopper-figure {
  max-width: 100%;
  margin: 0 0 var(--space-8, 2rem);
  padding: clamp(6px, 1vw, 10px);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--color-surface) 92%, var(--color-gold) 8%),
    var(--color-surface));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.hopper-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid color-mix(in oklab, var(--color-gold) 45%, transparent);
}
.hopper-figure figcaption {
  font-family: var(--font-deco);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  text-align: center;
  font-style: italic;
  margin-top: var(--space-3, 0.75rem);
  padding-bottom: 2px;
}

/* Art Deco sunburst — radiating-ray fan with flanking rules and finials */
.deco-sunburst {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-block: var(--space-8);
  color: var(--color-gold);
}
.deco-sunburst::before,
.deco-sunburst::after {
  content: "";
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}
.deco-sunburst svg {
  width: 118px;
  height: 44px;
  flex-shrink: 0;
}

/* Art Deco stepped "ziggurat" band — thin geometric setback strip */
.deco-band {
  width: 100%;
  height: 14px;
  color: var(--color-gold);
  opacity: 0.85;
  line-height: 0;
}
.deco-band svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Art Deco fan corners — quarter-sunburst rays in each corner */
.deco-fan-corners { position: absolute; inset: 0; pointer-events: none; }
.deco-fan-corners svg {
  position: absolute;
  width: 46px;
  height: 46px;
  color: var(--color-gold);
}
.deco-fan-corners svg.tl { top: 0; left: 0; }
.deco-fan-corners svg.tr { top: 0; right: 0; transform: scaleX(-1); }
.deco-fan-corners svg.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.deco-fan-corners svg.br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* ==========================================================================
   Follow-up ornaments — hero sunburst watermark, Greek-key meander border
   ========================================================================== */

/* Sunburst watermark behind the hero name — visible in both light and dark
   themes. Opacity is raised from the earlier near-invisible 0.12 so the
   radiating-ray fan reads clearly while still sitting behind the title. */
.hero-text { position: relative; }
.hero-sunburst {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: min(430px, 94%);
  height: 240px;
  color: var(--color-gold);
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
}
.hero-sunburst svg { width: 100%; height: 100%; display: block; }
/* Lift the title, chip, role, tagline, CTA and Reader's Circle above the
   sunburst — but leave the sunburst itself absolutely positioned so it
   stays a faint backdrop instead of pushing the title down and opening a
   large empty gap at the top of the hero. */
.hero-text > *:not(.hero-sunburst) { position: relative; z-index: 1; }

/* Subtle Greek-key (meander) border strip */
.deco-meander {
  display: block;
  width: 100%;
  height: 12px;
  color: var(--color-gold);
  opacity: 0.7;
  line-height: 0;
}
.deco-meander svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   Art Deco flourishes — thin gold corner brackets, double keylines
   ========================================================================== */

/* Double keyline frame on the page header (echoes the hero) */
.page-header::after {
  content: "";
  position: absolute;
  inset: var(--space-6);
  border: 1px solid var(--color-gold);
  opacity: 0.22;
  pointer-events: none;
}

/* Thin gold corner brackets on key panels */
.motif-card {
  position: relative;
}
.motif-card::before {
  content: "";
  position: absolute;
  top: 8px; left: 8px;
  width: 18px; height: 18px;
  border-top: 1px solid var(--color-gold);
  border-left: 1px solid var(--color-gold);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
.motif-card::after {
  content: "";
  position: absolute;
  bottom: 8px; right: 8px;
  width: 18px; height: 18px;
  border-bottom: 1px solid var(--color-gold);
  border-right: 1px solid var(--color-gold);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}


/* ==========================================================================
   Reading soundtrack — "Listen while you read"
   ========================================================================== */
.soundtrack {
  position: relative;
  z-index: 1;
  margin: var(--space-5, 1.25rem) 0 0;
}
.soundtrack .container-narrow {
  display: flex;
  justify-content: center;
}
.soundtrack-card {
  min-width: min(100%, 340px);
  border: 1px solid var(--color-divider, #b8a47a);
  border-radius: var(--radius-md, 4px);
  background: var(--color-surface, #fbf5e3);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
}
.soundtrack-summary {
  font-family: var(--font-deco, "Marcellus SC", serif);
  font-size: var(--text-sm, 1rem);
  letter-spacing: 0.07em;
  color: var(--color-text-muted, #4a3d2a);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  transition: color var(--transition-interactive, 220ms ease);
}
.soundtrack-summary::-webkit-details-marker { display: none; }
.soundtrack-summary:hover,
.soundtrack-summary:focus-visible {
  color: var(--color-oxblood-bright, #8a2d32);
}
[data-theme="dark"] .soundtrack-summary:hover,
[data-theme="dark"] .soundtrack-summary:focus-visible {
  color: var(--color-gold-bright, #a27c44);
}
.snd-note {
  color: var(--color-oxblood, #6b1f24);
  font-family: var(--font-body, "EB Garamond", serif);
  font-size: 1.05em;
  line-height: 1;
}
[data-theme="dark"] .snd-note { color: var(--color-gold-bright, #a27c44); }
.snd-play {
  margin-left: auto;
  color: var(--color-text-faint, #8a7e6a);
  font-size: 0.85em;
  transition: transform var(--transition-interactive, 220ms ease);
}
.soundtrack-card[open] .snd-play { transform: rotate(90deg); }
.soundtrack-body {
  margin-top: var(--space-3, 0.75rem);
}
.soundtrack-body audio {
  width: 100%;
  max-width: 420px;
  display: block;
}
.soundtrack-note {
  font-family: var(--font-body, "EB Garamond", serif);
  font-size: var(--text-sm, 1rem);
  font-style: italic;
  color: var(--color-text-faint, #8a7e6a);
  margin: var(--space-2, 0.5rem) 0 0;
}

/* ==========================================================================
   Skip link and "Cite this page" (visitor improvements)
   ========================================================================== */
.skip-link {
  position: absolute;
  left: var(--space-4, 1rem);
  top: -100px;
  z-index: 10000;
  padding: 10px 18px;
  background: var(--color-surface);
  color: var(--color-oxblood);
  border: 1px solid var(--color-gold);
  font-family: var(--font-ui);
  font-size: var(--text-sm, 0.9rem);
  letter-spacing: 0.08em;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-4, 1rem); }
main:focus { outline: none; }

.cite-this { padding: 0 0 var(--space-12, 3rem); }
.cite-card {
  border-top: 1px solid var(--color-gold);
  border-bottom: 1px solid var(--color-gold);
  padding: var(--space-4, 1rem) 0;
}
.cite-summary {
  cursor: pointer;
  list-style: none;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm, 0.9rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-oxblood);
}
.cite-summary::-webkit-details-marker { display: none; }
.cite-summary::after { content: " \25BE"; letter-spacing: 0; }
.cite-card[open] .cite-summary::after { content: " \25B4"; }
.cite-body { margin-top: var(--space-4, 1rem); }
.cite-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: var(--space-3, 0.75rem);
  align-items: start;
  padding: var(--space-3, 0.75rem) 0;
  border-top: 1px dotted var(--color-border);
}
.cite-row:first-child { border-top: none; }
.cite-style {
  font-family: var(--font-ui);
  font-size: var(--text-xs, 0.78rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-forest);
  padding-top: 0.2em;
}
.cite-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm, 0.95rem);
  line-height: 1.6;
  color: var(--color-text);
  overflow-wrap: anywhere;
  max-width: none;
}
.cite-copy {
  font-family: var(--font-ui);
  font-size: var(--text-xs, 0.78rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  border: 1px solid var(--color-gold);
  padding: 6px 12px;
  background: transparent;
}
.cite-copy:hover { background: var(--color-surface-2); }
.cite-note {
  margin: var(--space-3, 0.75rem) 0 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-xs, 0.8rem);
  color: var(--color-text-muted);
  text-align: center;
  max-width: none;
}
@media (max-width: 560px) {
  .cite-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cite-text { grid-column: 1 / -1; grid-row: 2; }
}

/* Appearances: booking checklist */
.appearance-checklist {
  margin: var(--space-3, 0.75rem) 0 var(--space-4, 1rem);
  padding-left: 1.2em;
  font-family: var(--font-body);
  font-size: var(--text-sm, 0.95rem);
  line-height: 1.7;
  color: var(--color-text-muted);
}
.appearance-checklist li + li { margin-top: 0.35em; }
.appearance-checklist strong { color: var(--color-text); font-weight: 600; }