/* ==========================================================================
   SITE POLISH (weave/site-polish): one layer over styles.css and polish.css for the browseable pages (home, posts,
   the Codex). Loaded last. It holds the tokens (series colours, the two families, one type scale), the one pill
   system, focus rings, and the post page's reading polish. The site bar styles itself (SiteNav.astro).
   ========================================================================== */
:root {
  --c-gold: #f5c66a;
  --c-crimson: #ec4d63;
  --c-violet: #b98aff;
  --c-teal: #46c2b4;
  --c-green: #4fd39a;
  /* each series' colour: the only thing that varies between pills */
  --series-esmeralda: var(--c-crimson);
  --series-pirates: var(--c-teal);
  --series-kindred: var(--c-gold);
  --series-cosmic: var(--c-violet);
  --cat-ai-alchemy: var(--c-green);
  --cat-spirit-summoning: var(--c-violet);
  --cat-cosmic-economics: var(--c-gold);
  --cat-visual-sorcery: var(--c-crimson);
  /* the two families the site already loads */
  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Crimson Text', Georgia, serif;
  /* one type scale (about a 1.25 ratio, fluid at the top) */
  --fs-xs: 0.72rem;
  --fs-sm: 0.86rem;
  --fs-base: 1.1875rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.4rem, 1.15rem + 1vw, 1.75rem);
  --fs-2xl: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem);
  --fs-3xl: clamp(2.1rem, 1.4rem + 3.4vw, 3.4rem);
  --fs-4xl: clamp(2.6rem, 1.5rem + 5.6vw, 5rem);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- THE PILL: one shape, one hover, one focus; --pill is the only variation ---------- */
html body :is(.nav-btn, .category-btn, .post-category, .post-tag, .modal-tags .tag, .article-tag, .category-badge,
  .share-btn, footer p a, .blog-footer a, .lens-callout-link, .pill) {
  --pill-c: var(--pill, var(--c-gold));
  --pill-h: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: var(--pill-h);
  height: auto;
  padding: 0 1.1em !important;
  margin: 0;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--pill-c) 42%, transparent) !important;
  background: color-mix(in srgb, var(--pill-c) 9%, rgba(12, 5, 22, 0.6)) !important;
  color: color-mix(in srgb, var(--pill-c) 50%, #fff) !important;
  font-family: var(--font-display) !important;
  font-weight: 600;
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.14em !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none !important;
  white-space: nowrap;
  box-shadow: none;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  overflow: visible;
  opacity: 1 !important;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease,
    transform 0.2s var(--ease-out) !important;
}
html body :is(.nav-btn, .category-btn, .post-category, .post-tag, .modal-tags .tag, .article-tag, .category-badge,
  .share-btn, footer p a, .blog-footer a, .lens-callout-link, .pill)::before,
html body :is(.nav-btn, .category-btn, .share-btn, .lens-callout-link, .pill)::after { content: none !important; }
html body :is(.nav-btn, .category-btn, .post-category, .post-tag, .modal-tags .tag, .article-tag, .category-badge,
  .share-btn, footer p a, .blog-footer a, .lens-callout-link, .pill):hover {
  background: color-mix(in srgb, var(--pill-c) 18%, rgba(12, 5, 22, 0.6)) !important;
  border-color: color-mix(in srgb, var(--pill-c) 72%, transparent) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px -12px var(--pill-c), inset 0 0 0 1px color-mix(in srgb, var(--pill-c) 14%, transparent);
  transform: translateY(-1px);
}
html body :is(.nav-btn, .category-btn, .post-category, .post-tag, .modal-tags .tag, .article-tag, .category-badge,
  .share-btn, footer p a, .blog-footer a, .lens-callout-link, .pill):focus-visible {
  outline: 2px solid var(--pill-c) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--pill-c) 18%, transparent);
}
html body :is(.nav-btn.active, .category-btn.active, .pill[aria-current='page'], .pill.active) {
  background: color-mix(in srgb, var(--pill-c) 26%, rgba(12, 5, 22, 0.6)) !important;
  border-color: var(--pill-c) !important;
  color: #fff !important;
  box-shadow: 0 0 22px -8px var(--pill-c), inset 0 0 0 1px color-mix(in srgb, var(--pill-c) 30%, transparent);
}
/* small pills (tags): same shape, a step down */
html body :is(.post-tag, .modal-tags .tag, .article-tag) {
  --pill-h: 28px;
  --pill: var(--c-violet);
  padding: 0 0.8em !important;
  letter-spacing: 0.06em !important;
  text-transform: none;
  font-size: 0.7rem !important;
  cursor: default;
}
html body .category-badge { --pill-h: 30px; cursor: default; }
/* the colours */
.nav-btn[data-series='esmeralda'] { --pill: var(--series-esmeralda); }
.nav-btn[data-series='pirates'] { --pill: var(--series-pirates); }
.nav-btn[data-series='kindred'] { --pill: var(--series-kindred); }
.nav-btn[data-series='cosmic'] { --pill: var(--series-cosmic); }
.ai-alchemy, [data-cat='ai-alchemy'], .category-btn[onclick*='AI Alchemy'] { --pill: var(--cat-ai-alchemy); }
.spirit-summoning, [data-cat='spirit-summoning'], .category-btn[onclick*='Spirit Summoning'] { --pill: var(--cat-spirit-summoning); }
.cosmic-economics, [data-cat='cosmic-economics'], .category-btn[onclick*='Cosmic Economics'] { --pill: var(--cat-cosmic-economics); }
.visual-sorcery, [data-cat='visual-sorcery'], .category-btn[onclick*='Visual Sorcery'] { --pill: var(--cat-visual-sorcery); }
.lens-callout-link, .share-btn { --pill: var(--c-crimson); }
.share-btn.copy { --pill: var(--c-violet); }

/* generic keyboard focus for the rest of the page */
html body a:focus-visible, html body button:focus-visible, html body [tabindex]:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- HOME: the series switcher (one row of series pills) ---------- */
html body nav.series-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding: 1.25rem 1rem 2.75rem;
  max-width: 1100px;
  margin: 0 auto;
}
html body nav.series-switch .nav-btn { --pill-h: 40px; padding: 0 1.3em !important; }
/* ---------- HOME, PHONES: the series title is the switcher (round 3: SeriesPager.astro, scripts/series-pager.js) ----------
   On a phone the pill row steps aside (the Grimoire has the site bar); each book series' title carries a previous and a
   next arrow (they wrap around) and a dot per series under it, and a sideways swipe on the title block switches series.
   Wider screens keep the pill row: the wrapper is display: contents there and the controls hide. */
html body .series-header .series-pager { display: contents; }
html body .series-header .series-pager :is(.sp-arrow, .sp-dots) { display: none !important; }
.sp-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) {
  html body nav.series-switch { display: none; }
  html body main.content { padding-top: 2.4rem; }
  /* the book series run edge to edge, so a swiped title and its books slide off the screen's edge, not 16px short of it */
  html body main.content > .series-section:not(#cosmic) { margin-inline: -1rem; padding-inline: 1rem; }
  /* a vertical drag on the title block scrolls the page; a sideways one is the swipe (the browser never pans on it) */
  html body .series-section .series-header { margin-bottom: 2.6rem; touch-action: pan-y pinch-zoom; }
  /* the pager switch slides sideways instead of the section's rise-and-fade */
  html body .series-section.sp-swapped { animation: none; }
  html body .series-header .series-pager {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas: 'prev title next' 'dots dots dots';
    align-items: center;
    column-gap: 6px;
    margin: 0 -4px;   /* the arrows sit 12px in from the screen's edge, their focus ring inside the section's clip */
  }
  html body .series-header .series-pager .series-title {
    grid-area: title;
    display: grid;
    align-content: center;
    min-height: 2.4em;   /* two lines, whichever series: the arrows and dots never jump between series */
    margin: 0;
    padding: 0;
    font-size: clamp(1.1rem, 10vw - 13px, 1.75rem);   /* "Pirates, Wizards" fits one line between the arrows down to 320px */
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-wrap: balance;
  }
  html body .series-header .series-pager .series-title::before,
  html body .series-header .series-pager .series-title::after { content: none; }
  html body .series-header .series-pager .sp-arrow {
    --pill-h: 44px;
    display: inline-flex !important;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 50% !important;
    position: relative;
    z-index: 2;   /* a swiped title slides under the arrows, never over them */
    -webkit-tap-highlight-color: transparent;
  }
  html body .series-header .series-pager .sp-prev { grid-area: prev; }
  html body .series-header .series-pager .sp-next { grid-area: next; }
  html body .series-pager .sp-arrow svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  html body .series-header .series-pager .sp-dots { grid-area: dots; display: flex !important; justify-content: center; margin-top: 0.2rem; }
  html body .series-pager .sp-dot {
    --pill-c: var(--pill, var(--c-gold));
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html body .series-pager .sp-dot span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pill-c) 38%, rgba(255, 255, 255, 0.14));
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }
  html body .series-pager .sp-dot:hover span { background: color-mix(in srgb, var(--pill-c) 70%, rgba(255, 255, 255, 0.2)); }
  html body .series-pager .sp-dot[aria-current='true'] span { width: 22px; background: var(--pill-c); box-shadow: 0 0 12px -1px var(--pill-c); }
  html body .series-pager .sp-dot:focus-visible { outline: none; }
  html body .series-pager .sp-dot:focus-visible span { outline: 2px solid var(--pill-c); outline-offset: 4px; }
}

/* the name in the home's header: on a narrow phone (360px) "ALEJANDRO" at 2.8rem ran past the edge and lost its O */
@media (max-width: 400px) { html body .author-name { font-size: clamp(2.2rem, 11.4vw, 2.8rem); } }

/* ---------- POSTS: the reading page on the site's own type ---------- */
html body .blog-post-article { padding-top: 2.75rem !important; }
html body .article-header { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 3rem !important; }
html body .article-title { margin-top: 0 !important; }
html body .post-meta-bar {
  background: none !important;
  border: 0 !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0 !important;
  gap: 0.85rem !important;
  margin: 0 auto 2.25rem !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: auto;
}
html body .post-meta-bar :is(.post-date, .read-time) {
  font-family: var(--font-display);
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cdbfe0 !important;
  text-shadow: 0 1px 2px rgba(7, 2, 13, 0.9), 0 0 14px rgba(7, 2, 13, 0.85) !important;
}
html body .post-meta-bar .read-time::before { content: '\00B7'; margin-right: 0.85rem; color: rgba(245, 198, 106, 0.6); }
html body .article-title {
  font-family: var(--font-display) !important;
  font-size: var(--fs-3xl) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.12 !important;
  text-wrap: balance;
  margin-bottom: 1.1rem !important;
}
html body .article-subtitle {
  font-family: var(--font-body) !important;
  font-style: italic;
  font-size: var(--fs-lg) !important;
  line-height: 1.5 !important;
  text-wrap: pretty;
}
html body .article-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
html body .article-content {
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  line-height: 1.75 !important;
}
html body .article-content p, html body .article-content li { font-size: 1em !important; line-height: inherit; text-wrap: pretty; }
html body .article-content :is(h1, h2, h3) {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-wrap: balance;
}
html body .article-content h2 { font-size: var(--fs-2xl) !important; margin: 2.6rem 0 1.1rem !important; }
html body .article-content h3 { font-size: var(--fs-xl) !important; margin: 2rem 0 0.9rem !important; }
html body .share-title { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: #a796bd; }
html body .share-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
@media (max-width: 768px) {
  html body .blog-post-article { padding-left: 12px !important; padding-right: 12px !important; }
  html body .article-content { padding: 1.6rem 1.25rem !important; border-radius: 16px !important; }
}

/* ---------- FOOTERS: one row of pills ---------- */
html body :is(footer, .blog-footer) p:has(a) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem; }
html body :is(footer, .blog-footer) .footer-sep { display: none; }

/* ---------- THE LIGHT SWEEP: a slow, faint band of light across hero art (transform only, so it stays on the
   compositor). .fx-sweep runs it idly every ~11 s; .fx-sweep-hover runs it once per hover. ---------- */
.fx-sweep, .fx-sweep-hover { position: relative; overflow: hidden; isolation: isolate; }
.fx-sweep::after, .fx-sweep-hover::after {
  content: '';
  position: absolute;
  inset: -10% -40%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 236, 214, 0.07) 45%, rgba(255, 250, 240, 0.16) 50%,
    rgba(255, 236, 214, 0.07) 55%, transparent 62%);
  mix-blend-mode: screen;
  transform: translate3d(-75%, 0, 0);
  will-change: transform;
}
.fx-sweep::after { animation: fx-sweep 11s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
@keyframes fx-sweep { 0%, 66% { transform: translate3d(-75%, 0, 0); } 96%, 100% { transform: translate3d(75%, 0, 0); } }
.fx-sweep-hover::after { transition: transform 0s; }
.fx-sweep-hover:hover::after, .fx-sweep-hover:focus-within::after {
  transform: translate3d(75%, 0, 0);
  transition: transform 1.1s cubic-bezier(0.45, 0, 0.25, 1);
}
@media (prefers-reduced-motion: reduce) {
  .fx-sweep::after { animation: none; transform: translate3d(-75%, 0, 0); }
  .fx-sweep-hover:hover::after, .fx-sweep-hover:focus-within::after { transition: none; transform: translate3d(-75%, 0, 0); }
}

/* ==========================================================================
   TIER 2: the home as a hub, the post page's reading polish
   ========================================================================== */
#esmeralda { --pill: var(--series-esmeralda); }
#pirates { --pill: var(--series-pirates); }
#kindred { --pill: var(--series-kindred); }
#cosmic { --pill: var(--series-cosmic); }

/* ---------- book cards: the real actions, a soft sweep on hover ---------- */
html body .book-info { height: auto !important; flex-direction: column; gap: 0.55rem; overflow: visible; }
html body .book-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0; position: relative; z-index: 102; }
html body .pill.pill-sm { --pill-h: 30px; padding: 0 0.95em !important; font-size: 0.66rem !important; letter-spacing: 0.14em !important; }
@media (pointer: coarse) { html body .pill.pill-sm { --pill-h: 36px; } }   /* a finger's target on a phone */
html body .pill.pill-play { --pill: var(--c-crimson); }
html body .book-cover-wrapper::after {
  inset: -10% -40%;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 236, 214, 0.08) 45%, rgba(255, 250, 240, 0.2) 50%,
    rgba(255, 236, 214, 0.08) 55%, transparent 62%);
  mix-blend-mode: screen;
  transform: translate3d(-75%, 0, 0);
  transition: transform 0s;
  pointer-events: none;
}
html body .book-card:hover .book-cover-wrapper::after, html body .book-card:focus-within .book-cover-wrapper::after {
  transform: translate3d(75%, 0, 0);
  transition: transform 1.1s cubic-bezier(0.45, 0, 0.25, 1);
}

/* ---------- the hub strips ---------- */
.hub-strip { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.hub-latest { margin-top: 4.5rem; }
.hub-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.hub-title {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); letter-spacing: 0.06em;
  color: #f3e6c8;
}
.hub-more { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: #c9b9e6; text-decoration: none; white-space: nowrap; }
.hub-more:hover { color: #fff; }
.latest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.latest-card {
  --pill-c: var(--pill, var(--c-violet));
  display: flex; flex-direction: column; text-decoration: none; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(22, 8, 38, 0.9), rgba(10, 4, 18, 0.95));
  border: 1px solid color-mix(in srgb, var(--pill-c) 22%, transparent);
  box-shadow: 0 24px 50px -30px #000;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}
.latest-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pill-c) 60%, transparent); box-shadow: 0 26px 50px -28px #000, 0 0 30px -16px var(--pill-c); }
.latest-art { display: block; aspect-ratio: 16 / 7; overflow: hidden; }
.latest-art img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.82); transition: transform 0.9s var(--ease-out); }
.latest-card:hover .latest-art img { transform: scale(1.05); }
.latest-body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem 1.15rem 1.2rem; }
.latest-cat { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--pill-c) 70%, #fff); }
.latest-title { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.3; color: #fff; text-wrap: balance; }
.latest-meta { font-family: var(--font-body); font-style: italic; font-size: 0.98rem; color: #a99bbf; }
.hub-play { margin-top: 3rem; }
.play-banner {
  display: block; position: relative; min-height: 220px; border-radius: 20px; overflow: hidden; text-decoration: none;
  border: 1px solid rgba(236, 77, 99, 0.3); box-shadow: 0 30px 60px -34px #000;
}
.play-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; z-index: -1; filter: brightness(0.62) saturate(1.05); transition: transform 1.2s var(--ease-out); }
.play-banner::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(8, 2, 14, 0.92) 0%, rgba(8, 2, 14, 0.6) 55%, rgba(8, 2, 14, 0.15) 100%); }
.play-banner:hover .play-art { transform: scale(1.04); }
.play-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; padding: 2rem 2.2rem; max-width: 34rem; }
.play-kick { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.22em; text-transform: uppercase; color: #ff9aab; }
.play-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); line-height: 1.15; color: #fff; }
.play-line { font-family: var(--font-body); font-size: 1.1rem; color: #ddd0ee; }
html body .pill.play-cta { --pill: var(--c-crimson); margin-top: 0.4rem; }
/* the Grimoire tab carries its own list and game callout: the strips step aside there */
body:has(#cosmic.active) :is(.hub-latest, .hub-play) { display: none; }
@media (max-width: 760px) {
  .latest-grid { grid-template-columns: 1fr; gap: 0.7rem; }
  .latest-card { flex-direction: row; align-items: stretch; }
  .latest-art { flex: 0 0 34%; aspect-ratio: auto; min-height: 104px; }
  .latest-body { padding: 0.8rem 0.95rem; gap: 0.3rem; }
  .latest-title { font-size: 0.98rem; }
  .play-body { padding: 1.5rem 1.3rem; }
  .play-banner { min-height: 240px; }
}

/* ---------- POST: the hero art band behind the title ---------- */
html body .post-hero-art {
  position: absolute; left: 50%; top: -2.75rem; z-index: -1; width: 100vw; max-width: 1680px; height: clamp(380px, 64vh, 640px);
  transform: translateX(-50%); pointer-events: none; opacity: 0.5; overflow: hidden;
  -webkit-mask-image: radial-gradient(110% 85% at 50% 18%, #000 30%, transparent 78%);
  mask-image: radial-gradient(110% 85% at 50% 18%, #000 30%, transparent 78%);
}
html body .post-hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.85) saturate(1.05); }
@media (max-width: 640px) { html body .post-hero-art { opacity: 0.42; height: 70vh; } }

/* ---------- POST: the reading progress bar (scroll-driven where the browser can, a few lines of JS elsewhere) ---------- */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 8001; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(var(--read, 0));
  background: linear-gradient(90deg, color-mix(in srgb, var(--pill, var(--c-gold)) 40%, transparent), var(--c-gold) 70%, #fff);
  box-shadow: 0 0 10px rgba(245, 198, 106, 0.55);
}
@supports (animation-timeline: scroll()) {
  .read-progress { animation: read-progress linear both; animation-timeline: scroll(root block); }
  @keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- POST: drop cap, lead-ins, ornamented pull quotes ---------- */
html body .article-content > p:first-of-type::first-letter {
  float: left; font-family: var(--font-display); font-weight: 600; font-size: 3.6em; line-height: 0.82;
  padding: 0.06em 0.08em 0 0; margin: 0.04em 0.06em 0 0;
  color: var(--c-gold);
  background: linear-gradient(160deg, #fff 0%, var(--c-gold) 50%, #c47f2a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html body .article-content strong.lead-in {
  font-family: var(--font-display); font-weight: 600; font-size: 0.84em; letter-spacing: 0.05em;
  color: var(--c-gold) !important;
}
html body .article-content blockquote {
  position: relative; max-width: 34em; margin: 2.8rem auto !important; padding: 2.3rem 0.5rem 1.9rem !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; text-align: center;
  font-family: var(--font-body); font-style: italic; font-size: 1.3em; line-height: 1.5; color: #efe3ff !important;
}
html body .article-content blockquote p { margin: 0 !important; font-size: 1em !important; }
html body .article-content blockquote::before {
  content: '\2766'; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(300px, 80%); height: 1.4rem; line-height: 1.4rem; font-size: 1.05rem; font-style: normal; opacity: 0.9;
  font-family: Georgia, serif; color: var(--c-gold);
  background: linear-gradient(90deg, transparent 0, rgba(245, 198, 106, 0.55) 32%, transparent 43%, transparent 57%, rgba(245, 198, 106, 0.55) 68%, transparent 100%) center / 100% 1px no-repeat;
}
html body .article-content blockquote::after {
  content: ''; position: absolute; bottom: 0.5rem; left: 50%; width: 46px; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(245, 198, 106, 0.7), transparent);
}

/* ---------- POST: next and previous cards with art ---------- */
.post-turn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 3.5rem 0 1rem; }
.turn-card {
  --pill-c: var(--pill, var(--c-violet));
  position: relative; display: block; min-height: 200px; border-radius: 16px; overflow: hidden; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--pill-c) 28%, transparent); box-shadow: 0 24px 50px -28px #000;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease;
}
.turn-card.next:only-child { grid-column: 2; }
.turn-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(0.7); transition: transform 0.9s var(--ease-out); }
.turn-card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(7, 2, 13, 0.96) 12%, rgba(7, 2, 13, 0.6) 58%, rgba(7, 2, 13, 0.2) 100%); }
.turn-body { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.45rem; min-height: 200px; padding: 1.2rem 1.3rem; box-sizing: border-box; }
.turn-card.next .turn-body { align-items: flex-end; text-align: right; }
.turn-dir { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--pill-c) 65%, #fff); }
.turn-title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.28; color: #fff; text-wrap: balance; }
.turn-meta { font-family: var(--font-body); font-style: italic; font-size: 0.98rem; color: #c3b5d8; }
.turn-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pill-c) 65%, transparent); }
.turn-card:hover .turn-art { transform: scale(1.05); }
.turn-card:focus-visible { outline: 2px solid var(--pill-c); outline-offset: 3px; }
@media (max-width: 640px) {
  .post-turn { grid-template-columns: 1fr; }
  .turn-card.next:only-child { grid-column: auto; }
  .turn-card, .turn-body { min-height: 150px; }
}

/* ---------- PAGE TRANSITIONS: the browser's own cross-document View Transitions ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-group(*) { animation-duration: 0.4s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .latest-card, .turn-card, .play-art, .latest-art img, .turn-art { transition: none !important; }
}

/* ---------- FIXER (critic C9, C10) ---------- */
/* the active Faviana pill: the series' crimson with gold letters (gold alone mixed into the dark read as brown) */
html body nav.series-switch .nav-btn[data-series='kindred'].active {
  background: color-mix(in srgb, var(--c-crimson) 30%, rgba(12, 5, 22, 0.7)) !important;
  border-color: color-mix(in srgb, var(--c-gold) 75%, transparent) !important;
  color: var(--c-gold) !important;
  box-shadow: 0 0 22px -8px var(--c-crimson), inset 0 0 0 1px color-mix(in srgb, var(--c-crimson) 35%, transparent);
}
/* "Book 1" is a label, not a button: plain small caps, never the pill's shape */
html body .book-number {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #b3a2c4;
}
@media (max-width: 640px) {
  /* the series' status reads as one quiet line of small caps on a phone, never a pill wrapped onto two lines */
  html body .series-status {
    display: block;
    padding: 0 16px !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    text-wrap: balance;
  }
}
/* the pill shine, kept where it means something: one sweep on hover or focus of the active series pill and of the
   Play banner's call to action (the idle sweep lives on the art) */
html body :is(nav.series-switch .nav-btn.active, .pill.play-cta) { position: relative; overflow: hidden !important; isolation: isolate; }
html body :is(nav.series-switch .nav-btn.active, .pill.play-cta)::after {
  content: '' !important;
  position: absolute;
  inset: 0 -60%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 244, 222, 0.24) 50%, transparent 62%);
  transform: translate3d(-80%, 0, 0);
  transition: transform 0s;
}
html body nav.series-switch .nav-btn.active:is(:hover, :focus-visible)::after,
html body .play-banner:is(:hover, :focus-visible) .pill.play-cta::after {
  transform: translate3d(80%, 0, 0);
  transition: transform 0.9s cubic-bezier(0.45, 0, 0.25, 1);
}
@media (prefers-reduced-motion: reduce) {
  html body nav.series-switch .nav-btn.active:is(:hover, :focus-visible)::after,
  html body .play-banner:is(:hover, :focus-visible) .pill.play-cta::after { transition: none; transform: translate3d(-80%, 0, 0); }
}

/* ---------- FIXER (critic C12): "More from the Grimoire" in the same dress as the next/previous and Latest cards ---------- */
html body .related-card {
  --pill-c: var(--pill, var(--c-violet));
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(22, 8, 38, 0.9), rgba(10, 4, 18, 0.95)) !important;
  border: 1px solid color-mix(in srgb, var(--pill-c) 22%, transparent) !important;
  box-shadow: 0 24px 50px -30px #000 !important;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease !important;
}
html body .related-card::before { content: none !important; }
html body .related-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--pill-c) 60%, transparent) !important;
  box-shadow: 0 26px 50px -28px #000, 0 0 30px -16px var(--pill-c) !important;
}
.related-art { display: block; aspect-ratio: 16 / 7; overflow: hidden; }
.related-art img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.82); transition: transform 0.9s var(--ease-out); }
.related-card:hover .related-art img { transform: scale(1.05); }
.related-body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem 1.2rem 1.3rem; }
html body .related-card .related-category {
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: 0.66rem !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pill-c) 70%, #fff) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
html body .related-card .related-card-title { margin: 0 !important; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem !important; line-height: 1.3; color: #fff; text-wrap: balance; }
html body .related-card .related-preview { margin: 0 !important; font-family: var(--font-body); font-size: 1rem !important; line-height: 1.5; color: #a99bbf; }

/* THE MEET LINE: one slim line under each series header naming its leads, each a link to their Codex entry */
html body .series-header .series-meet { margin: .7rem 0 0; font-size: 1rem; letter-spacing: .02em; color: #b9b0d4; }
html body .series-header .series-meet a { color: var(--meet, #c9b3ff); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--meet, #c9b3ff) 35%, transparent);
  transition: border-color .2s ease, color .2s ease; }
html body .series-header .series-meet a:hover, html body .series-header .series-meet a:focus-visible { border-bottom-color: var(--meet, #c9b3ff); color: #fff; }