/* ========================================================================
   Frank Harold Publishing — public store
   Design: literary-imprint. Cream paper, forest-green ink, gold accents.
   Distinct from the private reader (which is navy-modernist).
   ======================================================================== */

@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&display=swap');

:root {
  /* paper + ink */
  --paper:         #f5efe3;
  --paper-warm:    #ebe1cc;
  --paper-deep:    #e2d5b8;
  --ink:           #1d2a24;
  --ink-soft:      #3a4c42;
  --muted:         #6e7a6f;
  --rule:          #d4c9ae;
  --rule-soft:     #e4dbc3;

  /* brand */
  --gold:          #9a6d2a;
  --gold-deep:     #6b4a18;
  --gold-soft:     #c49a50;
  --burgundy:      #5a2a26;
  --forest:        #2d4236;
  --forest-deep:   #1d2a24;

  /* series accents (muted to sit on paper) */
  --ga-accent:     #3c5a6e; /* navy-ish, space-opera */
  --rl-accent:     #5a6430; /* olive, wartime */
  --rof-accent:    #8c3a26; /* brick-red, medieval */
  --sotr-accent:   #8b6023; /* bronze, republican */

  /* 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;          /* max content width */
  --shell-wide:    84rem;          /* grid sections */
  --gutter:        clamp(1.25rem, 4vw, 2.25rem);

  /* radius + shadow */
  --r-sm:          4px;
  --r-md:          8px;
  --r-lg:          14px;
  --shadow-sm:     0 1px 2px rgba(29,42,36,0.08);
  --shadow-md:     0 6px 18px rgba(29,42,36,0.12);
  --shadow-lg:     0 18px 42px rgba(29,42,36,0.22);
}

* { 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;
  text-rendering: optimizeLegibility;
}

/* subtle paper texture using layered gradients — no images needed */
body {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(196, 154, 80, 0.05), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(90, 42, 38, 0.04), transparent 60%),
    var(--paper);
  min-height: 100vh;
}

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

a {
  color: var(--burgundy);
  text-decoration: none;
  background-image: linear-gradient(var(--gold-soft), var(--gold-soft));
  background-position: 0 1.05em;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.2s ease, color 0.15s ease;
}
a:hover { background-size: 100% 1px; color: var(--gold-deep); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--forest-deep);
  letter-spacing: 0.002em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }

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: linear-gradient(to right, transparent, var(--rule), transparent);
  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 --------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(1.1) blur(10px);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  background: rgba(245, 239, 227, 0.92);
  border-bottom: 1px solid var(--rule-soft);
}
.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--shell-wide);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  gap: 1.25rem;
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--forest-deep);
  background: none; /* override the link underline */
  background-size: 0% 0%;
  text-transform: uppercase;
}
.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: 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}
.site-nav a {
  color: var(--ink-soft);
  background: none;
  background-size: 0% 0%;
  padding: 0.25rem 0;
  letter-spacing: 0.02em;
}
.site-nav a:hover { color: var(--gold-deep); }
.site-nav a.current {
  color: var(--forest-deep);
  border-bottom: 1px solid var(--gold);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.4rem 0.7rem;
  font: inherit;
  cursor: pointer;
  color: var(--ink-soft);
}

@media (max-width: 680px) {
  .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-soft);
    padding: 0.5rem 0;
    box-shadow: var(--shadow-md);
  }
  .site-nav.open a {
    padding: 0.75rem var(--gutter);
    border-bottom: 1px solid var(--rule-soft);
  }
  .nav-toggle { display: inline-block; }
  .site-header .brand-text { display: none; }
}

/* ---- 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;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.72rem 1.4rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s;
  background-image: none;
  background-size: auto;
}
.btn:hover { background-size: auto; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn.primary {
  background: var(--forest-deep);
  color: var(--paper);
  border-color: var(--forest-deep);
}
.btn.primary:hover { background: var(--forest); color: #fff; }

.btn.gold {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.btn.gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); }

.btn.ghost {
  background: transparent;
  color: var(--forest-deep);
  border-color: var(--forest-deep);
}
.btn.ghost:hover { background: var(--forest-deep); color: var(--paper); }

.btn.subtle {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule);
}
.btn.subtle:hover { background: var(--paper-warm); border-color: var(--ink-soft); color: var(--ink); }

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

section {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
section.bleed {
  background: var(--paper-warm);
  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(180px, 50%), 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
.book-tile {
  display: block;
  color: inherit;
  background-image: none;
  background-size: auto;
}
.book-tile:hover {
  color: inherit;
  background-size: auto;
}
.book-tile .cover-wrap {
  aspect-ratio: 2 / 3;
  background: var(--paper-warm);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.book-tile:hover .cover-wrap {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.book-tile img {
  width: 100%; height: 100%; object-fit: cover;
}
.book-tile .book-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--forest-deep);
  margin-top: 0.6rem;
  line-height: 1.2;
}
.book-tile .book-vol {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}
.book-tile .book-price {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--gold-deep);
  letter-spacing: 0.06em;
  margin-top: 0.15rem;
}
.book-tile .book-price.comingsoon {
  color: var(--muted);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ---- 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.78rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--series-accent, var(--gold));
  margin-bottom: 0.8rem;
}
.book-detail .meta-col h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.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: 2rem 0 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.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(--forest-deep);
  color: #d9c89a;
  font-family: var(--font-serif);
  padding: clamp(2.5rem, 6vw, 4rem) 0 2rem;
}
.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(3rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  text-align: center;
  border-bottom: 1px solid var(--rule-soft);
}
.page-title .eyebrow {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.page-title h1 {
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  font-weight: 500;
  max-width: 20ch;
  margin: 0 auto 0.8rem;
}
.page-title .page-tag {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto;
}

/* ---- 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: author-grouped series sections --------------- */
.home-author-section {
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter);
  border-top: 1px solid var(--rule-soft);
}
.home-author-section:first-of-type {
  border-top: none;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.home-author-header {
  text-align: center;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.home-author-header .eyebrow {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep, #8a6d26);
  margin-bottom: 0.4rem;
}
.home-author-header .home-author-name {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 500;
  margin: 0.1rem 0 0.5rem;
}
.home-author-header .home-author-tag {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.55;
}

/* ---- 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: linear-gradient(180deg, rgba(154,109,42,0.06) 0%, var(--paper-warm) 100%);
  border-color: rgba(154,109,42,0.3);
}
.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);
}