/* ========================================================================
   Frank Harold Publishing — public store
   Design: refined literary publisher. Bone-paper, deep ink, champagne
   gold. Modern indie-press aesthetic (Pushkin Press / Tin House /
   Soho Press reference).
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* paper + ink — clean editorial cream + rich near-black. Strong
     contrast is the foundation; everything else borrows from the
     single bold accent below. */
  --paper:         #fbf6e8;       /* clean editorial cream */
  --surface:       #ffffff;       /* true white for cards / panels */
  --paper-warm:    #f1e8cf;       /* accent panel — slight warmth */
  --paper-deep:    #d5c89e;
  --ink:           #15120e;       /* rich near-black */
  --ink-soft:      #3a342c;
  --muted:         #7a7164;
  --rule:          #d8ccac;
  --rule-soft:     #eee5ca;

  /* SINGLE BOLD ACCENT — saturated coral-orange. This is the brand:
     used for every brand moment (eyebrows, nav current, buttons,
     featured highlights, current filters, headings underline). The
     restraint of one bold color is what reads as modern. */
  --accent:        #ed4f1c;       /* vibrant coral-orange — primary */
  --accent-deep:   #c33a0d;       /* darker hover state */
  --accent-soft:   #fde0d3;       /* light tint backgrounds */
  --accent-glow:   rgba(237, 79, 28, 0.16);

  /* Secondary — emerald, used very sparingly for "live / available" */
  --emerald:       #0e7a4f;
  --emerald-soft:  #cfeadb;

  /* Legacy gold/coral kept so existing components don't break, but
     they're effectively aliased into the accent system now. */
  --gold:          #ed4f1c;
  --gold-deep:     #c33a0d;
  --gold-soft:     #fbd0bd;
  --coral:         #ed4f1c;
  --coral-deep:    #c33a0d;

  --burgundy:      #6a2a26;
  --forest:        #2d4236;
  --forest-deep:   #1d2a24;

  /* Status colors */
  --status-live:   #0e7a4f;       /* emerald — available now */
  --status-pre:    #ed4f1c;       /* coral — preorder */
  --status-soon:   #7a7164;       /* muted */

  /* Series accents — distinct hues for per-series theming, all bumped
     to higher saturation so they pop on the cream paper. */
  --ga-accent:     #1c5f8a;       /* SF series — vivid teal */
  --rl-accent:     #5a6e1c;       /* RL series — olive */
  --rof-accent:    #a83e22;       /* ROF series — brick red */
  --sotr-accent:   #c08020;

  /* typography */
  --font-display:  'Cormorant Garamond', 'Book Antiqua', Georgia, serif;
  --font-serif:    'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-ui:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* spacing + shell */
  --shell:         72rem;
  --shell-wide:    84rem;
  --gutter:        clamp(1.25rem, 4vw, 2.25rem);

  /* radius — slightly softer */
  --r-sm:          5px;
  --r-md:          10px;
  --r-lg:          16px;
  --r-pill:        999px;

  /* shadows — softer, more diffused, less grey */
  --shadow-sm:     0 1px 2px rgba(26, 22, 18, 0.06);
  --shadow-md:     0 4px 14px rgba(26, 22, 18, 0.08), 0 1px 3px rgba(26, 22, 18, 0.04);
  --shadow-lg:     0 14px 38px rgba(26, 22, 18, 0.14), 0 4px 10px rgba(26, 22, 18, 0.06);
  --shadow-cover:  0 18px 30px rgba(26, 22, 18, 0.22), 0 4px 12px rgba(26, 22, 18, 0.08);

  /* motion */
  --t-fast:        140ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:        220ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:        340ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Editorial photo background — books on a cream paper backdrop. Fixed
   so it stays in place as the reader scrolls; cover so it fills the
   viewport at any size; centered top so the books stack sits to the
   right of the headline content. iOS Safari has a longstanding bug
   with background-attachment:fixed (renders at full document size
   instead of viewport), so on phones we switch to scroll. */
body {
  background: var(--paper) url('/assets/background.jpg') no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
}
@media (max-width: 760px) {
  body {
    background-attachment: scroll;
    background-position: center top;
  }
}

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

a {
  color: var(--accent);
  text-decoration: none;
  background: none;
  background-size: 0 0;
}
a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 0.18em; }

::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.55em;
  color: var(--ink);
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 500; letter-spacing: -0.018em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -0.012em; }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); letter-spacing: -0.005em; }

p { margin: 0 0 1em; }
p.lead { font-size: 1.15em; color: var(--ink-soft); font-style: italic; }

hr.rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 3rem 0;
}

/* ---- Shell + layout ------------------------------------------------- */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.shell-wide {
  max-width: var(--shell-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

/* ============================================================
   RELEASE BANNER — rotating upcoming-titles ticker at the top
   ============================================================ */
.release-banner {
  background: var(--accent);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  position: relative;
  z-index: 25; /* sits above the sticky header */
}
.release-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: var(--shell-wide);
  margin: 0 auto;
  padding: 0.55rem var(--gutter);
  min-height: 38px;
}
.release-banner-label {
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.68rem;
  opacity: 0.85;
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 0.9rem;
  border-right: 1px solid rgba(255, 255, 255, 0.30);
}
.release-banner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  flex: 1;
  min-height: 1.4em;
}
.release-banner-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 380ms ease, transform 380ms ease, visibility 0ms linear 380ms;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.release-banner-item.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 380ms ease, transform 380ms ease;
}
.release-banner-date {
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.18);
  padding: 0.14rem 0.55rem;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.release-banner-link {
  color: #fff;
  text-decoration: none;
  background: none;
  background-size: 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}
.release-banner-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.release-banner-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.release-banner-sep { opacity: 0.5; padding: 0 0.1rem; }
.release-banner-byline {
  font-family: var(--font-display);
  font-style: italic;
  opacity: 0.85;
  font-size: 0.92rem;
  white-space: nowrap;
}
.release-banner-cta {
  margin-left: auto;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  background: rgba(0, 0, 0, 0.18);
  padding: 0.22rem 0.7rem;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .release-banner-byline { display: none; }
  .release-banner-cta { display: none; }
  .release-banner-label { font-size: 0.62rem; padding-right: 0.6rem; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 246, 232, 0.85);
  border-bottom: 1px solid var(--rule);
}
.site-header .inner {
  display: flex;
  align-items: center;
  max-width: var(--shell-wide);
  margin: 0 auto;
  padding: 0.7rem var(--gutter);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: none;
  background-size: 0% 0%;
  text-transform: uppercase;
  transition: color var(--t-fast);
}
.site-header .brand:hover { background-size: 0% 0%; color: var(--gold-deep); }
/* Header brand logo (image, replaces the old text monogram) — clicking
   the entire .brand anchor routes back to home, same as before. */
.site-header .brand .brand-logo {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: #0a0a0a;
  padding: 3px;
  object-fit: contain;
  flex-shrink: 0;
}
.site-header .brand .monogram {
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  background: #0a0a0a;
  background-image:
    linear-gradient(135deg, #c0bdb4 0 48%, #b08a3a 52% 100%);
  color: #fff;
  font-weight: 700;
  line-height: 34px;
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  box-shadow: var(--shadow-sm);
}
.site-header .brand .brand-text { font-size: 0.85rem; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.95rem, 1.8vw, 1.6rem);
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.site-nav a {
  color: var(--ink-soft);
  background: none;
  background-size: 0% 0%;
  padding: 0.35rem 0;
  position: relative;
  transition: color var(--t-fast);
}
.site-nav a:hover { color: var(--accent); }
.site-nav a.current {
  color: var(--accent);
}
.site-nav a.current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.nav-toggle {
  display: none;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 0.5rem 0.85rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
  min-height: 36px;
}
.nav-toggle:hover { background: var(--surface); border-color: var(--ink-soft); }

@media (max-width: 760px) {
  .site-nav { display: none; }
  .site-nav.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem 0;
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  }
  .site-nav.open a {
    padding: 0.95rem var(--gutter);
    border-bottom: 1px solid var(--rule-soft);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .site-nav.open a:last-child { border-bottom: none; }
  .site-nav.open a.current::after { display: none; }
  .site-nav.open a.current {
    background: var(--accent);
    color: #fff;
  }
  .nav-toggle { display: inline-flex; align-items: center; }
}

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

.hero {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
  overflow: hidden;
}
.hero .kicker {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.4rem);
  font-weight: 500;
  max-width: 20ch;
  margin: 0 auto 1rem;
  line-height: 1.08;
  color: var(--forest-deep);
}
.hero .tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0 auto 2rem;
}
.hero .logo-plate {
  display: inline-block;
  background: #0a0a0a;
  padding: 0.6rem;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 2rem;
}
.hero .logo-plate img { width: 170px; height: 170px; display: block; border-radius: 10px; }

.hero .cta-row {
  display: inline-flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---- Buttons -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  background-image: none;
  background-size: auto;
  text-decoration: none;
  position: relative;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background-size: auto; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

.btn.primary {
  background: var(--accent);
  color: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 2px 0 0 var(--accent-deep), 0 4px 14px rgba(12, 88, 123, 0.30);
}
.btn.primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  box-shadow: 0 2px 0 0 #052233, 0 8px 20px rgba(7, 59, 86, 0.42);
}

.btn.gold {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 2px 0 0 var(--gold-deep), 0 4px 14px rgba(210, 136, 24, 0.32);
}
.btn.gold:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  box-shadow: 0 2px 0 0 #5a380a, 0 8px 22px rgba(142, 87, 8, 0.42);
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn.ghost:hover {
  background: var(--ink);
  color: var(--surface);
}

.btn.subtle {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule);
  font-weight: 500;
}
.btn.subtle:hover {
  background: var(--surface);
  border-color: var(--ink-soft);
  color: var(--ink);
}

/* ---- Section wrappers ---------------------------------------------- */

section {
  padding: clamp(3rem, 6vw, 5.5rem) 0;
}
section.bleed {
  background: var(--surface);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
section .section-head {
  text-align: center;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
section .section-head .eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.8rem;
}
section .section-head h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 500;
  max-width: 22ch;
  margin: 0 auto;
}
section .section-head .kicker-line {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 1rem auto 0;
}

/* ---- Series cards --------------------------------------------------- */

.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1.25rem;
}
.series-card {
  position: relative;
  display: block;
  padding: 2rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  color: inherit;
  background-image: none;
  background-size: auto;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.series-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--series-accent, var(--gold));
  background-size: auto;
  color: inherit;
}
.series-card .crest {
  width: 54px; height: 54px;
  margin-bottom: 1rem;
  color: var(--series-accent, var(--gold));
}
.series-card .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--forest-deep);
  margin-bottom: 0.25rem;
}
.series-card .meta {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--series-accent, var(--gold));
  margin-bottom: 0.8rem;
}
.series-card .desc {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.series-card .count {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.series-card[data-series="ga"]   { --series-accent: var(--ga-accent); }
.series-card[data-series="rl"]   { --series-accent: var(--rl-accent); }
.series-card[data-series="rof"]  { --series-accent: var(--rof-accent); }
.series-card[data-series="sotr"] { --series-accent: var(--sotr-accent); }

/* Author byline on series cards / pages / book detail */
.series-card .byline {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: -0.35rem 0 0.6rem;
}
.series-author-byline {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0.2rem 0 0.6rem;
}

/* Current-issue block at top of /newsletter/ — frames the launch
   announcement so it reads like a published letter rather than a blog
   post. Sits inside .shell, full-width on small screens, centred prose
   width on larger ones. */
.newsletter-current-issue {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule, #e4dcc6);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.newsletter-current-issue .issue-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted, #999);
  margin-bottom: 0.6rem;
}
.newsletter-current-issue h2 {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  margin: 0 0 1.4rem;
  line-height: 1.2;
}
.newsletter-current-issue h3 {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.25rem;
  margin: 1.6rem 0 0.6rem;
}
.newsletter-current-issue p.lead {
  font-size: 1.08rem;
}
.newsletter-current-issue p.signoff {
  font-style: italic;
  margin-top: 2rem;
  color: var(--ink-soft, #4a4a4a);
}

/* ===== Encyclopedia (simple validation view) ===================== */
.enc-toolbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface, #fffaf0);
  padding-top: 1rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule, #e4dcc6);
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center;
}
#enc-search {
  flex: 0 1 360px;
  font: inherit; padding: 0.6rem 0.9rem;
  border: 1px solid var(--rule, #c9b988); border-radius: 4px;
  background: #fdfaf0; color: inherit;
}
#enc-search:focus { outline: none; border-color: var(--ink, #2a2a2a); }
.enc-cat-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 1 1 auto;
}
.enc-cat-pill {
  display: inline-flex; gap: 0.4rem; align-items: center;
  font-family: var(--font-ui);
  font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule, #c9b988); border-radius: 999px;
  color: var(--ink-soft, #4a4a4a); text-decoration: none;
  background: #fdfaf0;
}
.enc-cat-pill span {
  font-family: var(--font-ui); font-size: 0.7rem;
  background: var(--ink-soft, #4a4a4a); color: #fffaf0;
  padding: 0 0.4em; border-radius: 999px;
}
.enc-cat-pill:hover { background: var(--ink-soft, #4a4a4a); color: #fffaf0; }
.enc-cat-pill:hover span { background: #fffaf0; color: var(--ink-soft, #4a4a4a); }

.enc-content { padding-bottom: 4rem; }
.enc-section { margin: 2.5rem 0 3rem; scroll-margin-top: 7rem; }
.enc-section-head {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.8rem;
  margin: 0.6rem 0 1rem;
  display: flex; align-items: baseline; gap: 0.6rem;
  border-bottom: 1px solid var(--rule, #e4dcc6);
  padding-bottom: 0.4rem;
}

/* Section banner — placeholder gradient until a real image is supplied
   via CATEGORY_BANNERS. .has-image strips the gradient and shows the
   user-supplied image. */
.enc-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 1;
  min-height: 110px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  border: 1px solid var(--rule, #e4dcc6);
}
.enc-banner.illustration {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--enc-accent, #888) 75%, #0a0e1a) 0%,
      color-mix(in srgb, var(--enc-accent, #888) 25%, #0a0e1a) 100%);
  color: #fffaf0;
}
.enc-banner.illustration .enc-banner-svg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.enc-banner.illustration .enc-banner-svg svg {
  width: 100%; height: 100%;
  color: rgba(255, 250, 240, 0.92);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
.enc-banner.has-image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* When the supplied artwork already has the typeset category label
   built into the composition, run a different display track: drop the
   bottom-up gradient overlay (the art handles its own atmosphere),
   relax the aspect to give the painted composition vertical room, and
   anchor the image at the top of the frame so the burned-in label sits
   in the visible area. */
.enc-banner.has-image.labels-baked {
  aspect-ratio: auto;
  height: clamp(320px, 38vw, 520px);
  background-size: cover;
  background-position: center top;
  border: none;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(20,15,5,0.22);
}
.enc-banner.has-image.labels-baked::after {
  display: none;
}
.enc-banner-label {
  position: relative; z-index: 2;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.6), 0 0 4px rgba(0,0,0,0.7);
  color: #fffaf0;
  padding: 0 1.2rem;
}
.enc-banner.has-image .enc-banner-label { color: #fffaf0; }

/* Ship hierarchy — class header + nested named-ship cards */
.enc-subgroup { margin-bottom: 2rem; }
.enc-subgroup-head {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.35rem;
  margin: 0.6rem 0 0.6rem;
  display: flex; align-items: baseline; gap: 0.5rem;
  color: var(--ink, #2a2a2a);
}
.enc-subgroup-head .enc-count {
  font-family: var(--font-ui); font-size: 0.78rem;
  color: var(--muted, #999); letter-spacing: 0.04em;
}
.enc-card.enc-class {
  border-left: 4px solid var(--ink-soft, #6b5d3a);
  background: #fff7e6;
  margin-bottom: 0.8rem;
}
.enc-card.enc-class h3::before {
  content: "Class · "; color: var(--muted, #888);
  font-size: 0.78em; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.enc-sub-cards {
  margin-left: 1.5rem;
  border-left: 2px dashed var(--rule, #e4dcc6);
  padding-left: 1rem;
}
.enc-card.enc-sub {
  background: #fffefa;
}
.enc-empty {
  margin-left: 1.5rem;
  padding: 0.6rem 1rem;
  font-style: italic; color: var(--muted, #999);
  border-left: 2px dashed var(--rule, #e4dcc6);
}
.enc-section-head .enc-count {
  font-family: var(--font-ui); font-size: 0.85rem;
  color: var(--muted, #999); letter-spacing: 0.04em;
}
.enc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1rem;
}
.enc-card {
  background: #fdfaf0;
  border: 1px solid var(--rule, #e4dcc6);
  border-radius: 6px;
  padding: 1.2rem 1.3rem;
  scroll-margin-top: 7rem;
}
.enc-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.2rem;
}
.enc-card h3 {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.25rem; margin: 0;
}
.enc-card .enc-era {
  font-family: var(--font-ui); font-size: 0.75rem;
  color: var(--muted, #999); letter-spacing: 0.05em;
}
.enc-card .enc-id {
  font-family: var(--font-ui);
  font-size: 0.7rem; color: var(--muted, #b3a87a);
  letter-spacing: 0.05em;
}
.enc-card .enc-subtitle {
  margin: 0 0 0.6rem;
  font-style: italic; font-size: 0.92rem;
  color: var(--ink-soft, #4a4a4a);
}
.enc-card .enc-tags {
  margin-bottom: 0.7rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.enc-tag {
  font-family: var(--font-ui); font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: 0.15em 0.55em;
  background: rgba(0,0,0,0.04);
  border-radius: 999px;
  color: var(--ink-soft, #4a4a4a);
}
.enc-card .enc-body p {
  font-size: 0.95rem; line-height: 1.6; margin: 0 0 0.7em;
}
.enc-card .enc-body p:last-child { margin-bottom: 0; }
.xlink {
  color: inherit; border-bottom: 1px dashed currentColor;
  text-decoration: none;
}
.xlink:hover { border-bottom-style: solid; }
.xlink-broken {
  color: #a0361b; border-bottom: 1px dotted #a0361b;
  cursor: help;
}
.enc-xrefs { margin-top: 1rem; padding-top: 0.7rem; border-top: 1px dashed var(--rule, #e4dcc6); }
.enc-xrefs-label {
  font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted, #999);
  margin-bottom: 0.4rem;
}
.enc-xrefs-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.enc-xref-chip {
  font-family: var(--font-ui); font-size: 0.75rem;
  padding: 0.18em 0.6em;
  border: 1px solid var(--rule, #c9b988); border-radius: 999px;
  color: var(--ink-soft, #4a4a4a); text-decoration: none;
  background: #fffaf0;
}
.enc-xref-chip:hover { background: var(--ink-soft, #4a4a4a); color: #fffaf0; }
.enc-xref-chip.broken {
  color: #a0361b; border-color: #a0361b;
  background: rgba(160,54,27,0.05); cursor: help;
}

/* Series-page CTA cluster: encyclopedia + "See the series on Amazon"
   buttons. Sits in the series-page hero, beneath the pitch. */
.series-extras {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}
.series-extras .encyclopedia-cta {
  border-color: var(--series-accent, var(--rule, #c9b988));
  color: var(--series-accent, var(--ink, #2a2a2a));
  letter-spacing: 0.06em;
}
.series-extras .encyclopedia-cta:hover,
.series-extras .encyclopedia-cta:focus {
  background: var(--series-accent, #2a2a2a);
  color: #fffaf0;
  outline: none;
}

/* "See the series on Amazon" — the primary CTA when present. Uses the
   gold accent to read as a buy/action button; visually dominant over
   the encyclopedia ghost button. On the hero background it has a
   subtle border lift so it stays legible. */
.series-extras .series-amazon-cta {
  letter-spacing: 0.04em;
}
.page-title--hero .series-extras .series-amazon-cta {
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
.series-author-byline a { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 0.08em; }
.series-author-byline a:hover { color: var(--ink); }
.book-author-byline {
  font-family: var(--font-ui);
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin: -0.25rem 0 1rem;
  font-style: italic;
}
.book-author-byline a { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 0.08em; }
.book-author-byline a:hover { color: var(--ink); }

/* ---- Author grid (home strip + authors index) ----------------------- */

.author-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: 1.5rem;
}
.author-card {
  display: block;
  padding: 1.6rem 1.5rem;
  background: var(--surface, #fffaf0);
  border: 1px solid var(--rule, #e4dcc6);
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.author-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(60,50,30,0.10);
}
.author-card .name {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.4rem;
  margin-bottom: 0.1rem;
}
.author-card .genre {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.author-card .desc {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 0.7rem;
}
.author-card .count {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.author-grid-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: 1.5rem;
}
.author-card-lg {
  display: block;
  padding: 2.2rem 2rem;
  background: var(--surface, #fffaf0);
  border: 1px solid var(--rule, #e4dcc6);
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.author-card-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(60,50,30,0.12);
}
.author-card-lg .name {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.8rem;
  margin-bottom: 0.1rem;
}
.author-card-lg .genre {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.author-card-lg .desc {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.author-card-lg .series-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
}
.author-card-lg .series-list li {
  padding: 0.2rem 0;
  border-top: 1px solid var(--rule, #e4dcc6);
}
.author-card-lg .series-list li:first-child { border-top: none; }
.author-card-lg .count {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* Portrait thumbnails on author cards */
.portrait-thumb-wrap {
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: -2.2rem -2rem 1.2rem; /* bleed to card edges */
  overflow: hidden;
  border-bottom: 1px solid var(--rule, #e4dcc6);
  background: #1a1a1a;
}
.portrait-thumb-wrap.sm {
  width: 96px;
  height: 120px;
  aspect-ratio: 4 / 5;
  margin: 0 auto 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--rule, #e4dcc6);
  overflow: hidden;
  background: #1a1a1a;
}
.portrait-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Author page hero (portrait + bio, with disclosure) ------------- */

.author-intro { margin-top: 1rem; }
.author-intro-grid {
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 760px) {
  .author-intro-grid { grid-template-columns: 1fr; }
}
.author-hero {
  margin: 0;
  padding: 0;
}
.author-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 14px 40px rgba(30,20,10,0.18);
  background: #1a1a1a;
}
.author-disclosure {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
  font-style: italic;
  margin: 0.8rem 0.1rem 0;
  padding: 0.6rem 0.8rem;
  border-left: 2px solid var(--rule, #e4dcc6);
  background: rgba(0,0,0,0.02);
}
.author-bio .lead {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink);
}

/* ---- Book grid ------------------------------------------------------ */

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 50%), 1fr));
  gap: clamp(1.2rem, 2.2vw, 1.8rem);
}
.book-tile {
  /* Flex-column so the price line can be pushed to a consistent
     bottom alignment regardless of title length. */
  display: flex;
  flex-direction: column;
  color: inherit;
  background-image: none;
  background-size: auto;
  transition: transform var(--t-base);
}
.book-tile:hover {
  color: inherit;
  background-size: auto;
  transform: translateY(-3px);
}
.book-tile .cover-wrap {
  aspect-ratio: 2 / 3;
  background: var(--ink);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.book-tile img { width: 100%; height: 100%; object-fit: cover; }
.book-tile .book-vol {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 0.7rem;
}
.book-tile .book-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
  margin-top: 0.2rem;
  line-height: 1.2;
  letter-spacing: -0.003em;
  /* Clamp to 2 lines so titles take consistent vertical space,
     keeping the price line aligned across tiles in the same row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em; /* 2 lines × 1.2 line-height */
}
.book-tile .book-price {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-top: auto; /* pushed to the bottom of the flex column */
  padding-top: 0.4rem;
}
.book-tile .book-price.comingsoon {
  color: var(--muted);
  font-weight: 500;
  font-style: italic;
}
.book-tile .book-price.preorder {
  color: var(--gold-deep);
  font-weight: 600;
}

/* ---- Book detail page ---------------------------------------------- */

.book-detail {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  align-items: start;
}
@media (max-width: 760px) { .book-detail { grid-template-columns: 1fr; } }

.book-detail .cover-col img {
  width: 100%;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.book-detail .meta-col .series-line {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--series-accent, var(--gold-deep));
  margin-bottom: 0.9rem;
}
.book-detail .meta-col h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 500;
  margin-bottom: 0.5rem;
  letter-spacing: -0.022em;
  line-height: 1.04;
}
.book-detail .meta-col .subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
}
.book-detail .blurb {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
}
.book-detail .blurb p:first-child {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.45;
}
.book-detail .buy-box {
  margin: 2.2rem 0 1rem;
  padding: 1.4rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}
.book-detail .buy-box .price-line {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.book-detail .buy-box .price {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--forest-deep);
  line-height: 1;
}
.book-detail .buy-box .format {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.book-detail .buy-box.comingsoon {
  background: transparent;
  border-style: dashed;
}
.book-detail .buy-box.comingsoon .price { color: var(--muted); font-size: 1.1rem; font-style: italic; }

.book-detail .meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.book-detail .meta-grid .cell label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.book-detail .meta-grid .cell .val {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--forest-deep);
}

/* ---- Sample reader (on book detail) -------------------------------- */

.sample-reader {
  max-width: 36rem;
  margin: 3rem auto;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink);
}
.sample-reader h1, .sample-reader h2, .sample-reader h3, .sample-reader h4 {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  margin: 2.2em 0 1em;
}
.sample-reader h1 { font-size: 1.4em; }
.sample-reader h2 { font-size: 1.2em; }
.sample-reader h3 { font-size: 1.05em; }
.sample-reader p {
  margin: 0;
  text-indent: 1.4em;
}
.sample-reader p:first-of-type,
.sample-reader h1 + p,
.sample-reader h2 + p,
.sample-reader h3 + p,
.sample-reader .break + p {
  text-indent: 0;
}
.sample-reader .break {
  text-align: center;
  letter-spacing: 0.6em;
  color: var(--muted);
  margin: 1.8em 0;
  font-size: 0.9em;
  text-indent: 0;
}
.sample-reader .sample-end {
  text-align: center;
  margin: 3rem auto;
  padding: 2rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-warm);
}
.sample-reader .sample-end .label {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.sample-reader .sample-end h3 {
  font-size: 1.5rem;
  margin: 0 0 0.4rem;
  color: var(--forest-deep);
}

/* ---- Feature block (lead title) ------------------------------------ */

.feature-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem) 0;
}
@media (max-width: 760px) { .feature-title { grid-template-columns: 1fr; } }
.feature-title .cover img {
  width: 100%;
  max-width: 340px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  margin: 0 auto;
}
.feature-title .eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.8rem;
}
.feature-title h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1rem; }
.feature-title p { color: var(--ink-soft); max-width: 48ch; }

/* ---- Footer --------------------------------------------------------- */

.site-footer {
  margin-top: clamp(3rem, 8vw, 6rem);
  background: var(--ink);
  color: rgba(244, 237, 224, 0.78);
  font-family: var(--font-serif);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}

/* Minimal footer variant — centered fine-print rows. */
.site-footer.site-footer--minimal {
  padding: 2.2rem 0;
  text-align: center;
}
.site-footer.site-footer--minimal .fine-print {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(244, 237, 224, 0.65);
}
.site-footer.site-footer--minimal .footer-contact a {
  color: rgba(244, 237, 224, 0.92);
  text-decoration: none;
  background: none;
  background-size: 0 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.30);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.site-footer.site-footer--minimal .footer-contact a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.85);
}
.site-footer.site-footer--minimal .gate-signout {
  justify-content: center;
  margin-top: 0.5rem;
}
.site-footer .inner {
  max-width: var(--shell-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
@media (max-width: 760px) { .site-footer .inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer .inner { grid-template-columns: 1fr; } }

.site-footer h4 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c5a460;
  margin: 0 0 0.8rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.35rem; }
.site-footer a {
  color: #d9c89a;
  font-size: 0.92rem;
  background: none;
  background-size: 0% 0%;
}
.site-footer a:hover { color: #fff3d1; }
.site-footer .brand-line {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #f5ead0;
  margin-bottom: 0.3rem;
}
.site-footer .imprint-blurb {
  font-size: 0.92rem;
  font-style: italic;
  color: #b8a37a;
  max-width: 30ch;
}
.site-footer .fine-print {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(217, 200, 154, 0.18);
  font-size: 0.78rem;
  color: #8a7953;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Footer sign-out (only present when SITE_GATED is True). Sits inline with
   the other fine-print row items; tapping the button clears the unlock
   token in localStorage and reloads, which re-presents the sign-in form. */
.site-footer .gate-signout {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-style: italic;
}
.site-footer .gate-signout .gate-status {
  color: #b8a37a;
}
.site-footer .gate-signout .gate-signout-btn {
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  background: none;
  border: 1px solid rgba(217, 200, 154, 0.32);
  color: #d4c197;
  padding: 0.25em 0.85em;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.site-footer .gate-signout .gate-signout-btn:hover,
.site-footer .gate-signout .gate-signout-btn:focus {
  background: #d4c197;
  color: #1d2a24;
  border-color: #d4c197;
  outline: none;
}

/* ---- Series hero with background image + feature banner ------------ */

/* Variant of .page-title with a full-bleed background image. The
   background is painted behind a dark gradient overlay so the
   foreground text — eyebrow / h1 / byline / pitch — stays readable
   regardless of the image's brightness. */
.page-title.page-title--hero {
  position: relative;
  background-size: cover;
  background-position: center 35%;
  color: #fffaf0;
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  text-align: center;
  border-bottom-width: 2px;
  overflow: hidden;
}
.page-title.page-title--hero .page-title-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,22,0.55) 0%, rgba(8,12,22,0.78) 100%);
  pointer-events: none;
}
.page-title.page-title--hero > .shell {
  position: relative; z-index: 1;
}
.page-title.page-title--hero h1 {
  color: #fffaf0;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.page-title.page-title--hero .breadcrumbs,
.page-title.page-title--hero .breadcrumbs a {
  color: rgba(255,250,240,0.78);
}
.page-title.page-title--hero .breadcrumbs a:hover {
  color: #fffaf0;
}
.page-title.page-title--hero .page-tag {
  color: rgba(255,250,240,0.92);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.page-title.page-title--hero .series-author-byline,
.page-title.page-title--hero .series-author-byline a {
  color: rgba(255,250,240,0.92);
}
.page-title.page-title--hero .eyebrow {
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Wider hero on the home page: opens up the .shell container so the
   headline + paragraph have more horizontal room beneath the launch
   tagline. Applies only on the home hero, not on other pages. */
.hero > .shell {
  max-width: 1100px;
}
.hero h1 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.hero p.tag {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Big launch tagline that sits between the top banner and the hero on
   the home page. Reads as a single confident statement of where to buy
   right now, in display type. */
.home-launch-tagline {
  text-align: center;
  padding: clamp(1.4rem, 3vw, 2rem) 0;
}
.home-launch-tagline p {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.6rem, 4.5vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--ink, #2a2a2a);
}
.home-launch-tagline strong {
  color: var(--gold-deep, #8a6d26);
  font-weight: 600;
}

/* Home-page feature banner — top-of-page launch art, full-bleed
   (edge to edge of the viewport), clickable anchor routes to the
   series page. Sits flush against the header so it reads as the lead
   visual; the hero section follows immediately below it. */
.home-feature-banner {
  display: block;
  width: 100%;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(20,15,5,0.18);
  transition: opacity 200ms ease;
}
.home-feature-banner:hover {
  opacity: 0.94;
}
.home-feature-banner img {
  display: block;
  width: 100%;
  height: auto;
  /* Cap the banner height on tall portrait viewports so it doesn't
     swallow the entire fold; image keeps its aspect ratio via height
     auto, but on very narrow screens we clamp to keep the page-flow
     readable. */
  max-height: clamp(320px, 60vh, 720px);
  object-fit: cover;
  object-position: center 40%;
}

/* Series feature banner — full-width promotional image between the hero
   and the book grid. Uses object-fit:cover so any future swap-in works
   without distortion. */
.series-feature {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.series-feature-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(20,15,5,0.18);
}

/* ---- Page title blocks --------------------------------------------- */

.page-title {
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  text-align: center;
  border-bottom: 1px solid var(--rule-soft);
}
.page-title .eyebrow {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.page-title h1 {
  font-size: clamp(2.6rem, 5.8vw, 4rem);
  font-weight: 500;
  max-width: 22ch;
  margin: 0 auto 0.9rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.page-title .page-tag {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.5;
}

/* ---- Content prose (About, Terms, Privacy, etc.) ------------------- */

.prose {
  max-width: 38rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
  font-size: 1.07rem;
  line-height: 1.72;
}
.prose h2 { font-size: 1.6rem; margin-top: 2.5rem; }
.prose h3 { font-size: 1.25rem; margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: 0.4em; }
.prose blockquote {
  margin: 1.5em 0;
  padding: 0.8em 1.2em;
  border-left: 3px solid var(--gold);
  font-style: italic;
  color: var(--ink-soft);
  background: rgba(154, 109, 42, 0.05);
}

/* ---- Newsletter / email signup ------------------------------------- */

.newsletter {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  text-align: center;
}
.newsletter form {
  display: inline-flex;
  gap: 0.5rem;
  max-width: 28rem;
  width: 100%;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter input[type="email"] {
  flex: 1 1 15rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  padding: 0.72rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
}
.newsletter input[type="email"]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(154, 109, 42, 0.15);
}
.newsletter .status {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---- Breadcrumbs ---------------------------------------------------- */

.breadcrumbs {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding: 1rem 0;
  text-transform: uppercase;
}
.breadcrumbs a { color: var(--ink-soft); background: none; background-size: 0% 0%; }
.breadcrumbs a:hover { color: var(--gold-deep); }
.breadcrumbs .sep { margin: 0 0.5em; color: var(--rule); }

/* ---- Utility -------------------------------------------------------- */

.center { text-align: center; }
.hidden { display: none !important; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 2rem; }

/* focus styles for keyboard nav */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* print basics for the sample reader */
@media print {
  .site-header, .site-footer, .buy-box, .cta-row, .newsletter { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   HOME PAGE — bookstore-style layout
   ============================================================ */

/* ============================================================
   FEATURED-BOOK HERO — bookstore showpiece
   Cover on the left, headline + buy CTA on the right. Confident
   editorial layout with dramatic typography and a gold accent rule.
   ============================================================ */
.hero-featured {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5.5rem);
  background: transparent;
  border-bottom: 1px solid var(--rule);
}

/* ============================================================
   DUAL-FEATURED HERO — two book cards side by side
   ============================================================ */
.hero-featured--dual {
  text-align: center;
}
.hero-featured-eyebrow {
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  max-width: 56ch;
}
.hero-featured-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.2rem;
  padding: 0.35rem 0.85rem;
  background: var(--accent);
  border-radius: var(--r-pill);
}
.hero-featured-headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 500;
  margin: 0 0 0.5rem;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.hero-featured-deck {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  color: var(--ink-soft);
  margin: 0;
}
.hero-featured-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 760px) {
  .hero-featured-dual-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
.hero-feature-card {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: center;
  text-align: left;
}
@media (max-width: 480px) {
  .hero-feature-card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.2rem;
  }
}
.hero-feature-cover {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--ink);
  background-image: none;
  background-size: auto;
  max-width: 200px;
}
@media (max-width: 480px) {
  .hero-feature-cover { margin: 0 auto; }
}
.hero-feature-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-feature-meta { min-width: 0; }
.hero-feature-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.8rem;
}
.hero-feature-kicker .kicker-dot {
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}
.hero-feature-series {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.hero-feature-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 500;
  line-height: 1.02;
  margin: 0 0 0.45rem;
  color: var(--ink);
  letter-spacing: -0.018em;
}
.hero-feature-byline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}
.hero-feature-byline strong {
  font-weight: 600;
  font-style: normal;
  color: var(--ink);
}
.hero-feature-cta-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (max-width: 480px) {
  .hero-feature-cta-row { justify-content: center; }
}
.hero-feature-cta-row .btn {
  padding: 0.6rem 1.1rem;
  font-size: 0.74rem;
}
.hero-featured-grid {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 760px) {
  .hero-featured-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
}
.hero-featured-cover {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--ink);
  background-image: none;
  background-size: auto;
  max-width: 280px;
  margin: 0 auto;
}
.hero-featured-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-featured-meta {
  max-width: 50ch;
}
@media (max-width: 760px) {
  .hero-featured-meta { max-width: none; margin: 0 auto; }
}
.hero-featured-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.4rem;
  padding: 0.4rem 0.85rem;
  background: var(--accent);
  border-radius: var(--r-pill);
}
.hero-featured-kicker .kicker-dot {
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
}
.hero-featured-series {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.8rem;
}
.hero-featured-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 500;
  line-height: 0.96;
  margin: 0 0 0.8rem;
  color: var(--ink);
  letter-spacing: -0.028em;
}
.hero-featured-byline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color: var(--ink-soft);
  margin-bottom: 1.3rem;
}
.hero-featured-byline strong {
  font-weight: 600;
  font-style: normal;
  color: var(--ink);
}
.hero-featured-blurb {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0 0 1.8rem;
  max-width: 48ch;
}
@media (max-width: 760px) {
  .hero-featured-blurb { margin-left: auto; margin-right: auto; }
}
.hero-featured-cta-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}
@media (max-width: 760px) {
  .hero-featured-cta-row { justify-content: center; }
}
.hero-featured-stats {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
}
.hero-featured-stats .dot { color: var(--rule); }
@media (max-width: 760px) {
  .hero-featured-stats { justify-content: center; max-width: 32ch; margin: 0 auto; }
}

/* Hero — storefront variant. Confident, generous, modern. Uses the
   gold rule + small kicker pattern for editorial publishing feel. */
.home-hero-storefront {
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  text-align: center;
  position: relative;
}
.home-hero-storefront > .shell { position: relative; z-index: 1; }
.home-hero-storefront .kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.4rem;
}
.home-hero-storefront h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 500;
  max-width: 22ch;
  margin: 0 auto 1.2rem;
  line-height: 1.04;
  letter-spacing: -0.022em;
}
.home-hero-storefront .tag {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  max-width: 58ch;
  margin: 0 auto;
  line-height: 1.5;
}

/* Section container — generous padding, distinct headings */
.home-store-section {
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
  border-top: 1px solid var(--rule-soft);
}
.home-store-section .section-head {
  text-align: left;
  max-width: 72ch;
  margin: 0 0 clamp(2.5rem, 4.5vw, 3.5rem);
  position: relative;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--rule-soft);
}
.home-store-section .section-head::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.home-store-section .section-head .eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.home-store-section .section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 500;
  margin: 0 0 0.7rem;
  letter-spacing: -0.022em;
  line-height: 1.02;
}
.home-store-section .section-head .kicker-line {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  margin: 0;
  line-height: 1.5;
  max-width: 56ch;
}

/* "Now Available" storefront tile grid — larger, info-rich tiles
   with title + author + price + Amazon CTA underneath the cover. */
.store-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 50%), 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.2rem);
}
.store-tile {
  display: block;
  color: inherit;
  text-decoration: none;
}
.store-tile-cover {
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
  aspect-ratio: 2 / 3;
  background: var(--ink);
}
.store-tile-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.store-tile-meta { text-align: left; }
.store-tile-series {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.4rem;
}
.store-tile-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.18;
  margin-bottom: 0.2rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.store-tile-byline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 0.7rem;
}
.store-tile-priceline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule-soft);
}
.store-tile-price {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.store-cta {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--gold);
  border-radius: var(--r-pill);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.store-cta.dim {
  color: var(--muted);
  border-color: var(--rule);
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
}

/* Author spotlight section — transparent so the body background art
   shows through all the way down the page. Border-top is the only
   visual marker between sections. */
.home-author-spotlight {
  padding: clamp(5rem, 8vw, 8rem) 0 clamp(4rem, 6vw, 6rem);
  border-top: 1px solid var(--rule-soft);
  background: transparent;
  position: relative;
}
.home-author-spotlight > .shell { position: relative; z-index: 1; }
.home-author-spotlight-header {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2rem, 3.5vw, 2.8rem);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 640px) {
  .home-author-spotlight-header {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}
.home-author-portrait {
  flex: 0 0 auto;
  width: clamp(120px, 14vw, 150px);
  height: clamp(150px, 17vw, 188px);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
}
.home-author-portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.home-author-meta { flex: 1; }
.home-author-meta .eyebrow {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.home-author-meta .home-author-name {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 4rem);
  font-weight: 500;
  margin: 0.1rem 0 0.7rem;
  line-height: 1.0;
  letter-spacing: -0.026em;
}
.home-author-meta .home-author-tag {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.1rem;
  margin: 0 0 0.8rem;
  line-height: 1.5;
  max-width: 62ch;
}
.home-author-meta .home-author-counts {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.32rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
}

/* Per-series spotlight inside an author block — quiet sub-heads so
   the books carry the visual weight, not the labels above them. */
.home-series-spotlight-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(2.2rem, 4vw, 3.2rem);
}
.home-series-spotlight {
  padding-bottom: 0;
}
.home-series-spotlight-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule-soft);
}
.home-series-spotlight-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 500;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.012em;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.home-series-spotlight-title a {
  color: var(--ink);
  text-decoration: none;
  background: none;
  background-size: 0% 0%;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.home-series-spotlight-title a:hover {
  color: var(--series-accent, var(--gold-deep));
  border-bottom-color: var(--series-accent, var(--gold));
  background: none;
  background-size: 0% 0%;
}
.home-series-spotlight-era {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--series-accent, var(--gold-deep));
  font-style: normal;
  white-space: nowrap;
}
.home-series-spotlight-link {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  background-size: 0% 0%;
  transition: color var(--t-fast);
}
.home-series-spotlight-link:hover {
  color: var(--ink);
  background: none;
  background-size: 0% 0%;
}

/* ============================================================
   RELEASE CALENDAR — physical month-grid layout
   ============================================================ */
.cal-stack {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.2rem);
}
@media (max-width: 760px) {
  .cal-stack {
    grid-template-columns: 1fr;
  }
}
/* TBA section always spans the full row (its own list view) */
.cal-month-tba { grid-column: 1 / -1; }
.cal-month {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cal-month-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.1rem 1.6rem;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
}
.cal-month-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cal-month-name .cal-month-year {
  font-style: italic;
  color: var(--ink-soft);
  margin-left: 0.35em;
  font-weight: 400;
}
.cal-month-count {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.cal-grid {
  padding: 1rem 1rem 1.2rem;
}
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.cal-weekday {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.35rem 0;
}
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-day {
  min-height: 84px;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  background: var(--paper);
  padding: 4px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.cal-day-blank {
  background: transparent;
  border-color: transparent;
}
.cal-day-number {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: right;
  padding: 0 2px;
  line-height: 1;
}
.cal-day-has-release {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.cal-day-has-release .cal-day-number {
  color: var(--accent);
  font-weight: 700;
}
.cal-day-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
  min-height: 0;
}
.cal-event {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-height: 0;
  border-radius: 3px;
  padding: 2px;
  background: var(--accent-soft);
  transition: background-color var(--t-fast);
}
.cal-event:hover {
  background: var(--accent);
}
.cal-event:hover .cal-event-title { color: #fff; }
.cal-event-cover {
  flex: 0 0 22px;
  width: 22px;
  aspect-ratio: 2 / 3;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ink);
}
.cal-event-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cal-event-title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-width: 0;
}

/* Date-TBA section is a small list, since the books have no
   calendar position to render in. */
.cal-month-tba .cal-tba-list {
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cal-tba-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
  border: 1px dashed var(--rule);
}
.cal-tba-item:hover { background: var(--paper-warm); }
.cal-tba-cover {
  flex: 0 0 40px;
  width: 40px;
  aspect-ratio: 2 / 3;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ink);
}
.cal-tba-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-tba-series {
  font-family: var(--font-ui);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.cal-tba-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
}
.cal-tba-byline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.cal-foot {
  text-align: center;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* Phone — collapse calendar event titles so day-cells stay readable */
@media (max-width: 640px) {
  .cal-grid { padding: 0.6rem 0.6rem 0.8rem; }
  .cal-day { min-height: 60px; padding: 3px; }
  .cal-day-number { font-size: 0.62rem; }
  .cal-event { gap: 3px; padding: 1px; }
  .cal-event-cover { flex-basis: 16px; width: 16px; }
  .cal-event-title {
    font-size: 0.58rem;
    -webkit-line-clamp: 1;
  }
  .cal-weekday { font-size: 0.6rem; padding: 0.25rem 0; }
}

/* ============================================================
   BROWSE-ALL-BOOKS PAGE — filterable storefront
   ============================================================ */
.browse-page {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.browse-toolbar {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 1.3rem 1.5rem;
  margin-bottom: clamp(2rem, 3.5vw, 2.6rem);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: clamp(60px, 7vh, 80px);
  z-index: 5;
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
}
.browse-filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.filter-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 0 auto;
  width: 60px;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.filter-chip {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.42rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.filter-chip:hover {
  background: var(--paper-warm);
  color: var(--ink);
  border-color: var(--ink-soft);
}
.filter-chip.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(12, 88, 123, 0.25);
}
.browse-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.browse-sort-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.browse-sort-wrap label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
#browse-sort {
  font-family: inherit;
  font-size: 0.92rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper, #fdfaf0);
  color: inherit;
}
.browse-count {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 50%), 1fr));
  gap: clamp(1.1rem, 2vw, 1.6rem);
}
.browse-tile {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.browse-tile[hidden] { display: none; }
.browse-tile-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.browse-tile-priceline {
  margin-top: auto;
}
.browse-tile-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.85rem;
  background: var(--ink);
  transition: box-shadow var(--t-base);
}
.browse-tile-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.browse-tile-meta {
  text-align: left;
}
.browse-tile-series {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep, #8a6d26);
  margin-bottom: 0.25rem;
}
.browse-tile-title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.22;
  margin-bottom: 0.1rem;
  /* Clamp to 2 lines so price+badge row sits at the same Y across tiles */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.44em; /* 2 lines × 1.22 line-height */
}
.browse-tile-byline {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
}
.browse-tile-priceline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.45rem;
}
.browse-tile-price {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold-deep, #8a6d26);
}
.browse-tile-price.comingsoon, .browse-tile-price.preorder {
  font-style: italic;
  font-weight: 500;
}
.browse-badge {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.browse-badge-avail {
  background: rgba(94, 138, 47, 0.14);
  color: #4a6b27;
}
.browse-badge-pre {
  background: rgba(154, 109, 42, 0.16);
  color: var(--gold-deep, #8a6d26);
}
.browse-empty {
  text-align: center;
  padding: 3rem 0;
  color: var(--ink-soft);
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 1.1rem;
}
.browse-empty p { margin-bottom: 1rem; }

/* ---- Pacific Trilogy band on the Rapallo Line series page --- */
.series-pacific-band {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}
.series-pacific-band .series-feature-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(20,15,5,0.18);
}
.series-pacific-grid {
  padding-top: clamp(0.5rem, 2vw, 1.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.series-pacific-grid .section-head {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.series-pacific-grid .section-head h2 {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 500;
  margin: 0.2rem 0 0.4rem;
}
/* Pacific Trilogy grid: only 3 books, so override the auto-fill main
   grid to a centered three-column row (collapses to fewer columns on
   narrow viewports via auto-fit). Both heading text and the tiles
   themselves end up centered on the page. */
.series-pacific-grid .book-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 260px));
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}
.series-pacific-grid .book-tile {
  text-align: center;
}

/* ============================================================
   REDESIGN: clean imprint home + author landing as launch pad
   ============================================================ */

/* ---- Preorder status styling --------------------------------- */
/* Tile-level: preorder books read as live (warm gold) rather than
   muted/italic the way coming-soon does, since they're an active CTA. */
.book-tile .book-price.preorder {
  color: var(--gold-deep, #8a6d26);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Book-detail buy box, preorder variant — same shape as the live
   buy box but with a slightly distinct background tone so the
   reader registers that this is a pre-release. */
.book-detail .buy-box.preorder {
  background: var(--paper-warm);
  border-color: var(--rule);
}
.book-detail .buy-box.preorder .price { color: var(--gold-deep, #8a6d26); }

/* ---- Home page: imprint-focused layout ----------------------- */

/* Hero on the new home page — denser top padding because there's no
   banner above it, but otherwise inherits the .hero styling. */
.home-hero {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.home-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 500;
  margin-bottom: 0.6rem;
}
.home-hero .tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink-soft);
  max-width: 55ch;
  margin: 0 auto 1.5rem;
}

/* Roster section on the home page (author cards) */
.home-roster {
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
}

/* Author grid on the home page — distinct from the /authors/ index. */
.author-grid-home {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 1.5rem;
}
.author-grid-home.solo {
  /* Single author: one large centred card. */
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}
.author-card-home {
  display: block;
  padding: 2.4rem 2.2rem;
  background: var(--surface, #fffaf0);
  border: 1px solid var(--rule, #e4dcc6);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
  text-align: center;
}
.author-card-home:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(60,50,30,0.14);
}
.author-card-home .author-card-name {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.author-card-home .author-card-genre {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep, #8a6d26);
  margin-bottom: 1rem;
}
.author-card-home .author-card-tag {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 auto 1rem;
  max-width: 50ch;
}
.author-card-home .author-card-series {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.05rem;
  color: var(--ink, #2a2a2a);
  margin: 0.4rem auto 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule, #e4dcc6);
  max-width: 40ch;
}
.author-card-home .author-card-cta {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--gold-deep, #8a6d26);
  text-transform: uppercase;
}

/* Solo author card — give it more breathing room */
.author-card-home.solo {
  padding: 3rem 2.6rem;
}

/* Portrait thumb large variant for solo author card on home */
.portrait-thumb-wrap.lg {
  width: 160px;
  height: 200px;
  aspect-ratio: 4 / 5;
  margin: 0 auto 1.4rem;
  border-radius: 8px;
  border: 1px solid var(--rule, #e4dcc6);
  overflow: hidden;
  background: #1a1a1a;
}

/* The house section — three editorial pillars */
.home-house {
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
  border-top: 1px solid var(--rule-soft);
  margin-top: clamp(1rem, 3vw, 2rem);
}
.home-house-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: 1.5rem;
}
.home-house-card {
  padding: 1.4rem 0.2rem;
}
.home-house-card h3 {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  color: var(--ink, #2a2a2a);
}
.home-house-card p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0;
}
.home-house-more {
  text-align: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ---- Author landing page: launch-pad variant ----------------- */

/* The author landing's feature banner — same treatment as the
   former home-feature-banner, sitting between the page title and
   the portrait/bio block. */
.author-launch-banner {
  display: block;
  width: 100%;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(20,15,5,0.18);
  transition: opacity 200ms ease;
}
.author-launch-banner:hover {
  opacity: 0.94;
}
.author-launch-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(320px, 60vh, 720px);
  object-fit: cover;
  object-position: center 40%;
}

/* "Available now on Amazon" tagline on the author landing — same
   display-type pattern as the (now retired) home-launch-tagline. */
.author-launch-tagline {
  text-align: center;
  padding: clamp(1rem, 3vw, 1.8rem) 0;
}
.author-launch-tagline p {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.4rem, 3.8vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--ink, #2a2a2a);
}
.author-launch-tagline strong {
  color: var(--gold-deep, #8a6d26);
  font-weight: 600;
}

/* Per-series block on the author landing — light section spacing
   between series so a two-series author (Frank with RL + ROF)
   reads as a clear stack. */
.author-series-block {
  padding: clamp(2rem, 4vw, 3rem) var(--gutter);
  border-top: 1px solid var(--rule-soft);
}
.author-series-block:first-of-type {
  border-top: none;
}
.author-series-block .section-head h2 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color 160ms ease;
}
.author-series-block .section-head h2 a:hover {
  border-bottom-color: var(--gold, #b8932f);
}

/* ============================================================
   NEWSLETTER PAGE — editorial monthly dispatch
   ============================================================ */

.nl-masthead {
  background: var(--surface);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 2px solid var(--ink);
  text-align: center;
}
.nl-issue-mark {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.nl-imprint-headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 500;
  margin: 0 0 0.8rem;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.nl-imprint-deck {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  max-width: 56ch;
  margin: 0 auto 1.3rem;
  line-height: 1.5;
}
.nl-imprint-stats {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--rule-soft);
}
.nl-imprint-stats .dot { color: var(--rule); }

/* --- Mailing-list signup card (top of /newsletter/) --- */
.nl-signup {
  padding: clamp(2rem, 4vw, 3rem) var(--gutter) 0;
  max-width: 760px;
  margin: 0 auto;
}
.nl-signup-card {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.nl-signup-meta {
  text-align: center;
  margin-bottom: 1.3rem;
}
.nl-signup-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  margin: 0.4rem 0 0.6rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.nl-signup-deck {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
  max-width: 50ch;
  margin: 0 auto;
}
.nl-signup-form {
  display: flex;
  gap: 0.5rem;
  max-width: 480px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.nl-signup-form input[type="email"] {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  min-height: 44px;
}
.nl-signup-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.nl-signup-form .btn {
  flex-shrink: 0;
}
.nl-signup-status {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 0.8rem;
  min-height: 1.2em;
}
@media (max-width: 480px) {
  .nl-signup-form { flex-direction: column; }
  .nl-signup-form .btn { width: 100%; }
}

/* --- Editor's Note (the letter at the top of every issue) --- */
.nl-editors-note {
  padding: clamp(2.5rem, 4.5vw, 4rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
  max-width: 700px;
  margin: 0 auto;
  font-family: var(--font-serif);
}
.nl-editors-headline {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 500;
  font-style: italic;
  margin: 0.4rem 0 1.5rem;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.nl-editors-note p {
  font-size: 1.12rem;
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0 0 1.3rem;
}
.nl-editors-note p a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.nl-editors-note p a:hover { color: var(--accent-deep); }
.nl-editors-note p em { color: var(--ink); font-style: italic; }
.nl-editors-note p strong { color: var(--ink); font-weight: 600; }
.nl-editors-sign {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  margin-top: 1.8rem;
  border-top: 1px solid var(--rule-soft);
  padding-top: 1.4rem;
}

/* --- Editor's Pick card (featured book of the month) --- */
.nl-featured {
  padding: clamp(2rem, 4vw, 3rem) var(--gutter);
  max-width: 1000px;
  margin: 0 auto;
}
.nl-featured-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
@media (max-width: 640px) {
  .nl-featured-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.nl-featured-cover {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--ink);
  background-image: none;
  background-size: auto;
  max-width: 220px;
  margin: 0 auto;
}
.nl-featured-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-featured-meta { min-width: 0; }
.nl-featured-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 500;
  line-height: 1.02;
  margin: 0.3rem 0 0.4rem;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.nl-featured-series {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.nl-featured-blurb {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
.nl-featured-note {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.nl-featured-cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (max-width: 640px) {
  .nl-featured-cta { justify-content: center; }
}

/* --- Narrative bridges between sections --- */
.nl-narrative-bridge {
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) 0;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.nl-narrative-bridge p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.nl-narrative-spotlight p {
  color: var(--ink);
}

.nl-section {
  padding: clamp(3rem, 5vw, 4.5rem) var(--gutter);
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid var(--rule-soft);
}
.nl-section-head {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto clamp(1.8rem, 3vw, 2.5rem);
}
.nl-eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.nl-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 500;
  margin: 0.2rem 0 0.6rem;
  letter-spacing: -0.018em;
  line-height: 1.05;
  color: var(--ink);
}
.nl-section-deck {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.5;
}
.nl-section-foot {
  text-align: center;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
}

/* --- Available Now book cards (newsletter-specific richer layout) --- */
.nl-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
}
.nl-book-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 1.1rem;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1rem;
  align-items: flex-start;
}
.nl-book-cover {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-sm);
  background-image: none;
  background-size: auto;
}
.nl-book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-book-meta { min-width: 0; }
.nl-book-series {
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.nl-book-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.18;
  margin: 0 0 0.2rem;
  letter-spacing: -0.005em;
}
.nl-book-title a {
  color: var(--ink);
  background: none;
  background-size: 0 0;
}
.nl-book-title a:hover { color: var(--accent); }
.nl-book-byline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 0.7rem;
}
.nl-book-priceline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.55rem;
  flex-wrap: wrap;
}
.nl-book-price {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.nl-book-priceline .btn {
  padding: 0.55rem 1rem;
  font-size: 0.7rem;
  min-height: 36px;
}

/* --- Coming Soon list --- */
.nl-coming-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  max-width: 760px;
  margin: 0 auto;
}
.nl-coming-row {
  display: grid;
  grid-template-columns: 64px 44px 1fr;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  align-items: center;
  border-top: 1px solid var(--rule-soft);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--t-fast);
}
.nl-coming-row:first-child { border-top: none; }
.nl-coming-row:hover { background: var(--paper-warm); }
.nl-coming-date {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.005em;
  text-align: center;
  white-space: nowrap;
}
.nl-coming-cover {
  width: 44px;
  aspect-ratio: 2 / 3;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ink);
}
.nl-coming-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-coming-meta { min-width: 0; }
.nl-coming-series {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.nl-coming-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.nl-coming-byline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* --- Series Spotlight --- */
.nl-spotlight {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.nl-spotlight-banner {
  margin: 0 calc(-1 * var(--gutter)) clamp(1.5rem, 3vw, 2rem);
  overflow: hidden;
}
.nl-spotlight-banner img {
  width: 100%;
  height: auto;
  display: block;
}
.nl-spotlight-pitch {
  max-width: 60ch;
  margin: 0 auto clamp(1.5rem, 3vw, 2.2rem);
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.nl-spotlight-byline {
  font-family: var(--font-display);
  font-style: italic;
  text-align: right;
  color: var(--ink);
  margin: 0.6rem 0 0;
}

/* --- Closer --- */
.nl-closer {
  padding: clamp(3rem, 5vw, 4.5rem) var(--gutter);
  text-align: center;
  border-top: 2px solid var(--ink);
  max-width: 760px;
  margin: 0 auto;
}
.nl-closer p {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.nl-signoff {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  margin-top: 1.5rem;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .nl-book-card {
    grid-template-columns: 80px 1fr;
    padding: 0.9rem;
  }
  .nl-coming-row {
    grid-template-columns: 50px 40px 1fr;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
  }
  .nl-coming-date { font-size: 0.85rem; }
  .nl-coming-title { font-size: 0.95rem; }
}

/* ============================================================
   HOME PAGE — quiet closing about link
   ============================================================ */
.home-about-foot {
  padding: clamp(1.5rem, 3vw, 2.2rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.home-about-foot a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
  background: none;
  background-size: 0 0;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.12rem;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.home-about-foot a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ============================================================
   AUTHORS — index page + per-author landing
   ============================================================ */

/* --- /authors/ index page --- */
.authors-grid-wrap {
  padding: clamp(2rem, 4vw, 3rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.authors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.2rem);
}
.authors-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-image: none;
  background-size: auto;
  transition: transform var(--t-base), border-color var(--t-fast);
}
.authors-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.authors-card-logo {
  aspect-ratio: 1 / 1;
  background: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 2.5vw, 1.6rem);
}
.authors-card-logo img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  display: block;
  object-fit: contain;
}
.authors-card-meta {
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.authors-card-genre {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.authors-card-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.018em;
}
.authors-card-tag {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin: 0;
  line-height: 1.5;
}
.authors-card-series {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink);
}
.authors-card-series li {
  padding: 0.3rem 0;
  border-top: 1px solid var(--rule-soft);
}
.authors-card-series li:first-child { border-top: none; }
.authors-card-pill {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  margin-top: 0.4rem;
}
.authors-card-pill--live {
  background: var(--emerald-soft);
  color: var(--emerald);
}
.authors-card-pill--dev {
  background: var(--paper-warm);
  color: var(--ink-soft);
  border: 1px dashed var(--rule);
}

/* --- per-author page --- */
.author-page-title {
  padding: 1.5rem 0 0;
  border-bottom: none;
  text-align: left;
}
.author-page-title .breadcrumbs {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.author-hero-v2 {
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  max-width: 1000px;
  margin: 0 auto;
}
.author-hero-v2-grid {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 720px) {
  .author-hero-v2-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.author-hero-logo {
  background: #0a0a0a;
  border-radius: var(--r-md);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  max-width: 280px;
  margin: 0 auto;
}
.author-hero-logo img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  display: block;
  object-fit: contain;
}
.author-hero-meta { min-width: 0; }
.author-hero-meta .eyebrow {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.author-hero-name {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 500;
  margin: 0 0 0.6rem;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.author-hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
  line-height: 1.5;
}
.author-hero-bio {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

.author-in-dev {
  padding: clamp(2rem, 4vw, 3rem) var(--gutter);
  max-width: 760px;
  margin: 0 auto;
}
.author-in-dev-card {
  background: var(--surface);
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
  padding: clamp(2rem, 4vw, 2.6rem);
  text-align: center;
}
.author-in-dev-card .eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.author-in-dev-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 500;
  margin: 0 0 1rem;
  letter-spacing: -0.015em;
}
.author-in-dev-card p {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}
.author-in-dev-card p:last-child { margin-bottom: 0; }

/* ============================================================
   PROCESS PAGE — short editorial transparency statement
   ============================================================ */
.process-page {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.process-block {
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 3vw, 2.8rem);
  border-bottom: 1px solid var(--rule-soft);
}
.process-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.process-block h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 500;
  margin: 0 0 1rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.process-block p {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0;
}

/* ============================================================
   MOBILE — consolidated responsive pass
   ============================================================ */

/* Tablet + below — tighten section padding and typography. */
@media (max-width: 900px) {
  .home-store-section,
  .home-author-spotlight,
  .hero-featured {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .home-store-section .section-head h2 {
    font-size: clamp(1.7rem, 5.5vw, 2.4rem);
  }
}

/* Phone — comprehensive ≤ 640px treatment. */
@media (max-width: 640px) {
  /* Body type slightly smaller */
  html, body { font-size: 17px; }

  /* Header — make the brand text wrap into a tighter chip */
  .site-header .brand { font-size: 0.95rem; gap: 0.5rem; }
  .site-header .brand-logo { width: 38px; height: 38px; }
  .site-header .inner { padding: 0.55rem var(--gutter); }

  /* Release banner — keep it slim, hide the byline & label divider */
  .release-banner-inner { gap: 0.55rem; padding: 0.45rem var(--gutter); min-height: 34px; }
  .release-banner-label {
    font-size: 0.6rem;
    padding-right: 0.5rem;
    border-right-color: transparent;
  }
  .release-banner-title { font-size: 0.9rem; }
  .release-banner-date { font-size: 0.66rem; padding: 0.12rem 0.45rem; }

  /* Dual featured hero — stack the two cards vertically */
  .hero-featured {
    padding-top: clamp(2rem, 6vw, 3rem);
    padding-bottom: clamp(2rem, 5vw, 3rem);
  }
  .hero-featured-dual-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hero-featured-headline {
    font-size: clamp(1.9rem, 7vw, 2.6rem);
  }
  .hero-featured-deck {
    font-size: 1rem;
  }
  .hero-feature-card {
    grid-template-columns: minmax(110px, 130px) 1fr;
    gap: 1.1rem;
    text-align: left;
  }
  .hero-feature-title { font-size: 1.3rem; }
  .hero-feature-cta-row { gap: 0.35rem; }
  .hero-feature-cta-row .btn {
    padding: 0.55rem 0.9rem;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
  }
  .hero-featured-stats {
    font-size: 0.72rem;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
    text-align: center;
  }
  .hero-featured-stats .dot { display: none; }

  /* Section heads — reduce the big magazine type */
  .home-store-section { padding: 3rem var(--gutter); }
  .home-store-section .section-head {
    margin-bottom: 1.5rem;
    padding-bottom: 0.9rem;
  }
  .home-store-section .section-head h2 {
    font-size: 1.7rem;
  }
  .home-store-section .section-head .kicker-line {
    font-size: 0.95rem;
  }

  /* Author spotlights — tighter on mobile */
  .home-author-spotlight {
    padding: 3rem 0 2.5rem;
  }
  .home-author-spotlight-header {
    gap: 1rem;
    margin-bottom: 1.8rem;
    padding-bottom: 1.5rem;
  }
  .home-author-meta .home-author-name { font-size: 2rem; }
  .home-author-meta .home-author-tag { font-size: 0.95rem; }

  /* Per-series sub-header inside author block */
  .home-series-spotlight-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding-bottom: 0.6rem;
  }
  .home-series-spotlight-title { font-size: 1.3rem; }
  .home-series-spotlight-era { font-size: 0.65rem; }

  /* Book tiles — let the grid show 2 covers per row on phones */
  .book-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
  }
  .book-tile .book-title { font-size: 0.88rem; }
  .book-tile .book-vol { font-size: 0.6rem; margin-top: 0.5rem; }
  .book-tile .book-price { font-size: 0.78rem; padding-top: 0.25rem; }

  /* Release calendar rows — tighter, single-line title */
  .cal-month-head { padding: 0.85rem 1rem; }
  .cal-month-name { font-size: 1.15rem; }
  .cal-row { padding: 0.65rem 0.9rem; gap: 0.7rem; }
  .cal-day-pill { width: 40px; height: 40px; }
  .cal-day-num { font-size: 1.1rem; }
  .cal-row-cover { width: 44px; }
  .cal-row-title { font-size: 0.98rem; }
  .cal-row-byline { font-size: 0.82rem; }
  .cal-row-series { font-size: 0.62rem; letter-spacing: 0.13em; }
  .cal-price { font-size: 0.85rem; }

  /* Page title (browse, series, etc.) — smaller h1 */
  .page-title { padding: 2.5rem 0 1.8rem; }
  .page-title h1 { font-size: clamp(1.9rem, 6vw, 2.4rem); }
  .page-title .page-tag { font-size: 0.98rem; }

  /* Browse toolbar — drop sticky positioning on phones (it eats
     too much of the viewport), tighten chip wrapping */
  .browse-toolbar {
    position: static;
    padding: 0.9rem 1rem;
    margin-bottom: 1.5rem;
  }
  .browse-filter-row { gap: 0.5rem; margin-bottom: 0.7rem; padding-bottom: 0.7rem; }
  .filter-group { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .filter-label { width: auto; font-size: 0.68rem; }
  .filter-chip { font-size: 0.74rem; padding: 0.32rem 0.7rem; }
  .browse-controls-row { gap: 0.6rem; }
  .browse-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
  }
  .browse-tile-title { font-size: 0.88rem; }
  .browse-tile-byline { font-size: 0.78rem; }
  .browse-tile-priceline { padding-top: 0.35rem; }

  /* Book detail page — single column */
  .book-detail {
    grid-template-columns: 1fr;
    padding: 2rem 0;
    gap: 1.8rem;
  }
  .book-detail .cover-col img {
    max-width: 220px;
    margin: 0 auto;
  }
  .book-detail .meta-col h1 { font-size: clamp(1.9rem, 6vw, 2.4rem); }
  .book-detail .buy-box {
    padding: 1rem 1.1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }
  .book-detail .buy-box .price { font-size: 1.5rem; }
  .book-detail .buy-box .btn { width: 100%; justify-content: center; }

  /* Buttons — minimum 44px touch target */
  .btn { min-height: 44px; padding: 0.6rem 1.2rem; }

  /* Footer — single column, more padding */
  .site-footer.site-footer--minimal { padding: 1.6rem var(--gutter); }
  .site-footer.site-footer--minimal .fine-print { font-size: 0.74rem; }

  /* Pacific Trilogy band — let banner image fill on phones */
  .series-pacific-band { padding-top: 1.8rem; padding-bottom: 0.5rem; }
  .series-pacific-grid { padding-top: 0.5rem; }
  .series-pacific-grid .book-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }
}

/* Very narrow phones — last-mile fixes. */
@media (max-width: 420px) {
  /* Hide the brand text, keep just the logo */
  .site-header .brand-text { display: none; }

  /* Featured cards stack the cover above the meta */
  .hero-feature-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-feature-cover { margin: 0 auto; max-width: 160px; }

  /* Release banner — kill the label, just show the cycling title */
  .release-banner-label { display: none; }
}