/* The Lightforged Chronicles: series site. Every colour is a token. */
:root {
  --night: #0f0d0b;
  --night-2: #1a1612;
  --night-3: #2a241d;
  --night-veil: rgba(15, 13, 11, 0.78);
  --night-veil-soft: rgba(15, 13, 11, 0.45);
  --night-text: #efe6d2;
  --night-muted: #cbbd9f;
  --gold-hi: #fbe8a6;
  --gold: #e0b453;
  --gold-deep: #b07a22;
  --gold-edge: #8e5d16;
  --gold-glow: rgba(251, 232, 166, 0.55);
  --gold-glow-soft: rgba(224, 180, 83, 0.22);
  --banner-lit: rgba(255, 214, 90, 0.3);
  --row-hover: rgba(224, 180, 83, 0.08);
  --row-live: rgba(224, 180, 83, 0.18);
  --light-core: #fffaf0;
  --parchment: #e8d8bb;
  --parchment-light: #f2e7d0;
  --parchment-deep: #d9c29b;
  --parchment-edge: #c4a97c;
  --ink: #3b2a18;
  --ink-soft: #5a442c;
  --link: #7a4c0c;
  --shadow: rgba(0, 0, 0, 0.45);
  --shadow-soft: rgba(59, 42, 24, 0.14);
  --display: 'Cinzel', 'Times New Roman', serif;
  --body: 'EB Garamond', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--night); color: var(--night-text); font: 400 1.2rem/1.6 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-hi); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; z-index: 50; background: var(--gold-hi); color: var(--night); padding: .5rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* ---------- The stage: one full-screen viewport the scenes take turns filling ---------- */
.stage { position: relative; height: 100svh; min-height: 540px; overflow: hidden; background: var(--night); container-type: size; isolation: isolate; }
.scene { position: absolute; inset: 0; display: grid; place-items: center; visibility: hidden; overflow: hidden; }
.scene.is-active, .scene.is-leaving { visibility: visible; }
.scene.is-leaving { z-index: 2; pointer-events: none; }
/* Blurred copy of the painting fills whatever the picture itself doesn't cover */
.scene::before { content: ""; position: absolute; inset: -40px; background: var(--bg) center / cover no-repeat; filter: blur(28px) brightness(.45); }
/* Centred absolutely so a picture wider than the screen overflows evenly on both sides */
.scene-box { position: absolute; left: 50%; top: 50%; translate: -50% -50%; aspect-ratio: var(--ar); width: max(100cqw, 100cqh * var(--ar)); max-width: none; will-change: transform; }
.scene[data-fit="contain"] .scene-box { top: calc(50% - 2.4rem); width: min(100cqw - 32px, (100cqh - 12.5rem) * var(--ar)); }
.scene-box > img { width: 100%; height: 100%; object-fit: cover; }
.scene-title:focus { outline: none; }

/* Top bar: title, breadcrumbs, buy link */
.hud { position: absolute; inset: 0 0 auto 0; z-index: 5; display: flex; align-items: center; gap: 1rem; padding: .8rem clamp(16px, 3vw, 2rem); background: linear-gradient(var(--night-veil), transparent); pointer-events: none; }
.hud > * { pointer-events: auto; }
.crumbs { display: flex; flex-wrap: wrap; gap: .2rem .5rem; list-style: none; margin: 0; padding: 0; font: 500 .82rem/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.crumbs li + li::before { content: "›"; margin-right: .5rem; color: var(--gold); }
.crumbs button { background: none; border: 0; padding: .2rem 0; cursor: pointer; color: var(--night-muted); text-transform: inherit; letter-spacing: inherit; }
.crumbs button:hover { color: var(--gold-hi); }
.crumbs [aria-current] { color: var(--gold-hi); }
.stage[data-scene="gate"] .crumbs { visibility: hidden; }
.hud .buy { margin-left: auto; white-space: nowrap; }

.btn { display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.3em; border: 1px solid var(--gold); border-radius: 2px; background: linear-gradient(var(--gold-hi), var(--gold) 55%, var(--gold-deep)); color: var(--night); font: 600 .85rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: 0 0 18px var(--gold-glow-soft); }
.btn:hover { box-shadow: 0 0 26px var(--gold-glow); }
.btn-ghost { background: var(--night-veil); color: var(--gold-hi); }
.btn-ghost:hover { background: var(--night); }

/* Gate title */
.gate-title { position: absolute; z-index: 3; top: clamp(3.5rem, 8cqh, 6rem); left: 50%; translate: -50% 0; width: min(560px, 80cqw); margin: 0; text-align: center; pointer-events: none; transition: opacity .6s; }
.gate-title img { width: 100%; filter: drop-shadow(0 0 3px var(--night)) drop-shadow(0 2px 18px var(--night)); }
#scene-gate::after { content: ""; position: absolute; inset: 0 0 auto; height: 45%; z-index: 1; background: linear-gradient(var(--night-veil), transparent); pointer-events: none; }
.gate-hint { position: absolute; z-index: 3; bottom: clamp(1.2rem, 5cqh, 3rem); left: 50%; translate: -50% 0; margin: 0; padding: .55rem 1.2rem; border-radius: 99px; background: var(--night-veil); font: 500 .85rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); text-align: center; pointer-events: none; animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; } }
.doors.is-open ~ .gate-title, .stage:has(.doors.is-open) .gate-title, .stage:has(.doors.is-open) .gate-hint { opacity: 0; }

/* The Prime Beacon is positioned so the centre of its doors (--cxn, a 0-1 fraction of the painting's width)
   sits on the centre of the screen, in line with the title and the "Open the doors" hint. The minimum width
   keeps the painting covering the right-hand edge once it's shifted. */
#scene-gate .scene-box { translate: calc(var(--cxn) * -100%) -50%; width: max(50cqw / (1 - var(--cxn)), 100cqh * var(--ar)); }

/* The doors: two leaves cut from the painting swing inward and light pours through.
   .portal is clipped to the door outline traced from the painting (--clip), so the light fills exactly the door frame.
   .halo is a blurred, door-shaped light behind the portal, so its glow shows only around the frame.
   Everything that animates is a transform or an opacity (no animated filters), so it stays on the GPU and runs smoothly. */
.doors { position: absolute; left: calc(var(--x) - var(--w) / 2); top: calc(var(--y) - var(--h) / 2); width: var(--w); height: var(--h); padding: 0; border: 0; background: none; cursor: pointer; z-index: 2; }
.doors:focus-visible { outline: none; }
.halo { position: absolute; inset: -30%; filter: blur(8px); opacity: 0; pointer-events: none; animation: doorpulse 3.2s ease-in-out infinite; transition: opacity .5s; will-change: opacity; }
.halo i { position: absolute; inset: 23.077%; clip-path: var(--clip); background: var(--gold-hi); }
@keyframes doorpulse { 50% { opacity: .5; } }
.doors:hover .halo, .doors:focus-visible .halo { animation: none; opacity: .85; }
.doors.is-open .halo { animation: none; opacity: 1; }
.portal { position: absolute; inset: 0; perspective: 900px; clip-path: var(--clip); }
.portal::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 62%, var(--light-core), var(--gold-hi) 55%, var(--gold) 100%); opacity: 0;
  /* closing: the light stays until both leaves are shut (0.9s), so the painted doors never show behind them */
  transition: opacity .3s .9s; }
/* closing timing lives on the base rule, opening timing on .is-open */
.leaf { position: absolute; inset: 0; background-image: var(--img); background-repeat: no-repeat; backface-visibility: hidden; will-change: transform; transition: transform .9s cubic-bezier(.45,0,.25,1); }
.leaf::after { content: ""; position: absolute; inset: 0; background: var(--night); opacity: 0; transition: opacity .9s; }
.leaf:first-child { clip-path: var(--clip-l); transform-origin: var(--hinge-l) 50%; }
.leaf:last-child { clip-path: var(--clip-r); transform-origin: var(--hinge-r) 50%; }
.doors.is-open .leaf { transition: transform 1.25s cubic-bezier(.3,.1,.2,1); }
.doors.is-open .leaf::after { opacity: .5; transition: opacity 1.25s; }
.doors.is-open .leaf:first-child { transform: rotateY(-105deg); }
.doors.is-open .leaf:last-child { transform: rotateY(105deg); }
.doors.is-open .portal::before { opacity: 1; transition: opacity .5s .05s; }

/* A burst of the doors' light that fills the screen while the camera flies through, covering the change of scene */
.flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 66%, var(--light-core), var(--gold-hi) 35%, var(--gold) 75%, var(--gold-deep)); will-change: opacity; }

/* Hotspots */
.hot { position: absolute; left: calc(var(--x) - var(--w, 6%) / 2); top: calc(var(--y) - var(--h, 6%) / 2); width: var(--w, 6%); height: var(--h, 6%); padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; z-index: 2; }
.hot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px transparent, 0 0 0 0 var(--gold-glow); transition: box-shadow .3s, background .3s; animation: pulse 2.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 1px var(--gold-glow-soft), 0 0 22px 2px var(--gold-glow-soft); } }
.hot:hover::before, .hot:focus-visible::before { animation: none; background: var(--gold-glow-soft); box-shadow: inset 0 0 0 1px var(--gold-hi), 0 0 30px 6px var(--gold-glow); }
.hot .tag { position: absolute; left: 50%; top: 100%; translate: -50% .5rem; padding: .35rem .75rem; border-radius: 2px; background: var(--night-veil); color: var(--gold-hi); font: 600 .78rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .25s; pointer-events: none; }
.hot.tag-up .tag { top: auto; bottom: 100%; translate: -50% -.5rem; }
.hot:hover .tag, .hot:focus-visible .tag, .hot.tag-show .tag { opacity: 1; }
.hot.pin { width: 2.6rem; height: 2.6rem; left: calc(var(--x) - 1.3rem); top: calc(var(--y) - 1.3rem); border-radius: 50%; }
.hot.pin::before { inset: .55rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--night-veil-soft), 0 0 18px 4px var(--gold-glow); }
.hot.pin:hover::before, .hot.pin:focus-visible::before { background: var(--gold-hi); }
/* Map pins: a steady gold dot with a ring that expands and fades. All rings share one clock (see syncPulses in journey.js). */
.hot.pin::before { animation: none; }
.hot.pin::after { content: ""; position: absolute; inset: .55rem; border-radius: 50%; border: 2px solid var(--gold-hi); pointer-events: none; animation: pinring 2.4s ease-out infinite; }
@keyframes pinring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@media (hover: none) { .hot.pin .tag, .hot[data-go] .tag { opacity: 1; } }

/* Banners: everything is clipped to the outline traced from the painting (--clip). .shape is the click area
   and the yellow highlight; .glow is a blurred, banner-shaped light behind it, so the glow hugs the banner's edges. */
/* z-index: auto so the button isn't its own stacking context and the screen blend lightens the painting itself */
.hot.banner { border-radius: 0; pointer-events: none; z-index: auto; }
.hot.banner .shape, .hot.banner .glow { mix-blend-mode: screen; }
.hot.banner::before { content: none; }
.hot.banner:focus-visible { outline: none; }
.hot.banner .shape { position: absolute; inset: 0; clip-path: var(--clip); }
.hot.banner .glow i { position: absolute; inset: 16.667%; clip-path: var(--clip); }
.hot.banner .shape { pointer-events: auto; background: transparent; transition: background .3s; }
.hot.banner .glow { position: absolute; inset: -25%; filter: blur(6px); -webkit-mask: var(--ring) center / 100% 100% no-repeat; mask: var(--ring) center / 100% 100% no-repeat; opacity: 0; animation: bannerglow 2.8s ease-in-out infinite; transition: opacity .3s; }
.hot.banner .glow i { background: var(--gold-hi); }
@keyframes bannerglow { 50% { opacity: .45; } }
.hot.banner:hover .glow, .hot.banner:focus-visible .glow { animation: none; opacity: 1; }
.hot.banner:hover .shape, .hot.banner:focus-visible .shape { background: var(--banner-lit); }

/* Scene captions and the "About" panels */
.scene-caption { position: absolute; z-index: 3; bottom: clamp(1rem, 4cqh, 2.5rem); left: 50%; translate: -50% 0; width: min(780px, calc(100% - 32px)); margin: 0; padding: .7rem 1.3rem; background: var(--night-veil); border: 1px solid var(--gold-edge); text-align: center; font-size: 1.1rem; }
.scene-caption .tip { display: block; margin-top: .3rem; font: 500 .75rem/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.about { position: absolute; z-index: 3; right: clamp(16px, 4cqw, 3.5rem); top: 50%; translate: 0 -45%; width: min(420px, calc(100% - 32px)); max-height: calc(100% - 8rem); overflow: auto; padding: 1.6rem 1.7rem; background: var(--night-veil); border: 1px solid var(--gold-edge); box-shadow: 0 10px 50px var(--shadow); backdrop-filter: blur(6px); }
.about h2 { margin: 0 0 .7rem; font: 600 1.6rem/1.15 var(--display); color: var(--gold-hi); }
.about .eyebrow { margin: 0 0 .3rem; font: 600 .75rem/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.about p { margin: 0 0 .9rem; }
.about .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
/* Phones (portrait stage): wide paintings fill the height and pan sideways; cities sit above their panel */
@container (aspect-ratio < 1) {
  .about { top: auto; bottom: 1rem; right: 50%; translate: 50% 0; max-height: 44cqh; padding: 1.2rem 1.3rem; }
  .about h2 { font-size: 1.35rem; }
  .scene[data-fit="contain"] { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .scene[data-fit="contain"] .scene-box { left: 0; top: 4rem; translate: none; width: auto; height: calc(100cqh - 13rem); }
  #scene-map .scene-box { height: min(calc(100cqh - 13rem), 52cqh); top: 6rem; }
  .scene[data-fit="contain"] .scene-caption { position: sticky; left: 16px; translate: none; align-self: end; justify-self: start; width: calc(100cqw - 32px); margin-bottom: 1rem; }
  .scene:not([data-fit]):not(#scene-gate) .scene-box { top: 3.5rem; translate: -50% 0; width: auto; height: 56cqh; }
}
@container (width < 640px) {
  .crumbs li:not(:nth-last-child(2)) { display: none; }
  .crumbs li + li::before { content: none; }
  .crumbs button::before { content: "‹ "; color: var(--gold); }
}

/* ---------- Below the stage ---------- */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--gold-edge); border-block: 1px solid var(--gold-edge); }
.paths a { display: block; padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1rem, 4vw, 3rem); background: var(--night-2); color: var(--night-text); text-decoration: none; text-align: center; font: 500 clamp(1.05rem, 2.2vw, 1.45rem)/1.35 var(--display); letter-spacing: .03em; transition: background .3s, color .3s; }
.paths a:hover, .paths a:focus-visible { background: var(--night-3); color: var(--gold-hi); }
.paths a span { display: block; margin-top: .4rem; font: italic 400 1.05rem/1.4 var(--body); letter-spacing: 0; color: var(--night-muted); }
@media (max-width: 640px) { .paths { grid-template-columns: 1fr; } }

.book { background: radial-gradient(ellipse at 50% 0, var(--parchment-light), var(--parchment) 55%, var(--parchment-deep)); color: var(--ink); padding: clamp(2rem, 4.5vw, 3.25rem) 0 clamp(3rem, 8vw, 6rem); }
.book a { color: var(--link); }
.book .eyebrow { margin: 0 0 .4rem; font: 600 .8rem/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.book h1, .book h2 { margin: 0 0 1rem; font: 600 clamp(2rem, 5vw, 3.2rem)/1.05 var(--display); color: var(--ink); }
.book h3 { margin: 0 0 .5rem; font: 600 1.35rem/1.2 var(--display); color: var(--ink); }
.book-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 430px); grid-template-areas: "head buy" "copy buy"; column-gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.book-head { grid-area: head; }
.book-copy { grid-area: copy; }
/* The cover and the buy box stay in view while the reader works through the description */
.book-buy { grid-area: buy; position: sticky; top: 1.25rem; }
.book-main .beat { font-style: italic; margin: .3rem 0; }
.formats { margin-top: 2rem; padding: 1.4rem 1.5rem; border: 1px solid var(--parchment-edge); background: var(--parchment-light); }
.formats p { margin: 0 0 .9rem; font-weight: 500; }
.format-list { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.format-list li { display: flex; flex-direction: column; align-items: center; min-width: 9rem; padding: .7rem 1rem; border: 1px solid var(--gold-edge); background: var(--parchment); font: 600 .85rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.format-list small { margin-top: .25rem; font: italic 400 .95rem/1.2 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.extras { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); margin-top: clamp(3rem, 7vw, 5rem); }
.extra { display: grid; grid-template-columns: 9rem 1fr; gap: 1.2rem; align-items: center; padding: 1.2rem; border: 1px solid var(--parchment-edge); background: var(--parchment-light); }
.extra img { box-shadow: 0 6px 20px var(--shadow); }
.extra p { margin: 0 0 .5rem; }
.extra .soon { font: italic 400 1rem/1.2 var(--body); color: var(--ink-soft); }
@media (max-width: 900px) {
  .book-main { grid-template-columns: 1fr; grid-template-areas: "head" "buy" "copy"; }
  .book-buy { position: static; max-width: 520px; }
}
@media (max-width: 820px) { .extras { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .extra { grid-template-columns: 6.5rem 1fr; } }

.site-footer { padding: 2.5rem 0; background: var(--night); color: var(--night-muted); font-size: 1rem; text-align: center; }
.site-footer a { color: var(--gold-hi); }
.site-footer p { margin: .3rem 0; }

/* ---------- Loresheet dialogs ---------- */
dialog.lore { width: min(560px, calc(100% - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: 0; border: 1px solid var(--gold-edge); background: var(--parchment); color: var(--ink); box-shadow: 0 20px 80px var(--shadow); overflow: auto; }
dialog.lore::backdrop { background: var(--night-veil); backdrop-filter: blur(3px); }
dialog.lore[open] { animation: rise .45s cubic-bezier(.2,.7,.2,1); }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.96); } }
dialog.lore img { width: 100%; }
dialog.lore .close { position: sticky; top: .6rem; float: right; margin: .6rem .6rem -3rem 0; z-index: 1; width: 2.4rem; height: 2.4rem; border: 1px solid var(--gold-edge); border-radius: 50%; background: var(--parchment-light); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
dialog.lore details { padding: 0 1.4rem 1.4rem; }
dialog.lore summary { cursor: pointer; padding: .9rem 0; font: 600 .8rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--link); }
dialog.lore details p { margin: 0 0 .7rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}
.swipe { display: none; }
@container (aspect-ratio < 1) { .swipe { display: inline; } }

/* IndieReader praise beside the book; the same quote appears under the hero */
.praise { margin: 0 0 1.6rem; padding: 1rem 1.2rem 1rem 1.4rem; border-left: 3px solid var(--gold-deep); background: var(--parchment-light); }
.praise blockquote { margin: 0; }
.praise blockquote p { margin: 0; font: italic 400 1.25rem/1.45 var(--body); color: var(--ink); }
.praise figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-top: .6rem; }
.praise .source { font: 600 .82rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.praise .source::before { content: "— "; }
.praise a { font-size: 1rem; }

/* Coming soon */
.book .extras-title { margin: clamp(3rem, 7vw, 5rem) 0 1.2rem; font: 600 clamp(1.6rem, 3.5vw, 2.2rem)/1.15 var(--display); }
.extras-title .eyebrow { display: block; margin-bottom: .3rem; }
.extras-title + .extras { margin-top: 0; }
.extra-wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.3fr) 1fr; }
.extra-wide .eyebrow { margin: 0 0 .2rem; }
@media (max-width: 640px) { .extra-wide { grid-template-columns: 1fr; } }

/* Buy box: every format on one list, the featured one (direct from the author) first */
.buybox { margin-top: 1rem; padding: 1.1rem 1.25rem 1.2rem; background: var(--parchment-light); border: 1px solid var(--gold-edge); box-shadow: 0 10px 30px var(--shadow-soft); }
.buybox h2, .buybox h3 { margin: 0 0 .4rem; font: 600 1.35rem/1.2 var(--display); color: var(--ink); }
.buy-list { margin: 0; padding: 0; list-style: none; }
.buy-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; margin: 0 -.6rem; padding: .7rem .6rem; border-top: 1px solid var(--parchment-deep); transition: background .2s, box-shadow .2s; }
.buy-row:first-child { border-top: 0; }
.buy-row.is-featured { margin: .2rem -.6rem .1rem; padding: .75rem .6rem; border: 1px solid var(--gold-deep); background: var(--parchment); }
.buy-row.is-featured + .buy-row { border-top: 0; }
.buy-name { display: block; font: 600 .85rem/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.buy-detail { display: block; font-size: .98rem; line-height: 1.35; color: var(--ink-soft); }
.buy-soon { flex: none; font: italic 400 1rem/1.2 var(--body); color: var(--ink-soft); white-space: nowrap; }
.buy-row .btn { flex: none; padding: .65em 1em; font-size: .74rem; white-space: nowrap; }
.buy-price { margin-left: .35em; font-weight: 700; }
.buy-more { display: inline-block; margin-top: .9rem; font: 600 .78rem/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.btn-small { padding: .6em 1em; font-size: .74rem; }
.book .praise + .praise { margin-top: -.6rem; }
.bandcamp { display: block; width: 100%; height: 120px; border: 0; }

/* /end-of-equinox/: the purchase page */
.page-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; padding: .9rem clamp(16px, 3vw, 2rem); background: var(--night); font: 500 .8rem/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.page-bar a { color: var(--night-muted); text-decoration: none; }
.page-bar a:hover { color: var(--gold-hi); }
.page-bar .page-bar-home { color: var(--gold-hi); font-weight: 600; }
.book .byline { margin: -.4rem 0 1.4rem; font: italic 400 1.25rem/1.3 var(--body); color: var(--ink-soft); }
.book .details-title { margin: 2.4rem 0 .8rem; font-size: 1.5rem; }
.details { display: grid; grid-template-columns: max-content 1fr; align-items: baseline; gap: .45rem 2rem; margin: 0; }
.details dt { font: 600 .78rem/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.details dd { margin: 0; }
.listen { padding: clamp(2.5rem, 6vw, 4rem) 0; background: var(--parchment-light); color: var(--ink); border-top: 1px solid var(--parchment-edge); }
.listen .wrap { max-width: 760px; }
.listen .eyebrow { margin: 0 0 .3rem; font: 600 .8rem/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.listen h2 { margin: 0 0 .6rem; font: 600 clamp(1.6rem, 3.5vw, 2.2rem)/1.15 var(--display); }
.listen p { margin: 0 0 1.2rem; }
.explore-cta { padding: clamp(2.5rem, 6vw, 4rem) 0; background: var(--night-2); text-align: center; }
.explore-cta h2 { margin: 0 0 .6rem; font: 600 clamp(1.5rem, 3.2vw, 2rem)/1.2 var(--display); color: var(--gold-hi); }
.explore-cta p { margin: 0 auto 1.4rem; max-width: 560px; color: var(--night-text); }
.buy-row > div { flex: 1 1 10rem; min-width: 0; }

/* Buy rows on hover: a row that can be bought is one big target (the button's link covers the row), with a gold
   accent bar, a warm tint and a glowing button; a "Coming soon" row only tints faintly and keeps the normal cursor. */
.buy-row:hover { background: var(--row-hover); }
.buy-row:has(a):hover, .buy-row:has(a):focus-within { background: var(--row-live); box-shadow: inset 3px 0 0 var(--gold-deep); }
.buy-row:has(a) .btn::after { content: ""; position: absolute; inset: 0; }
.buy-row:has(a):hover .btn, .buy-row:has(a):focus-within .btn { box-shadow: 0 0 22px var(--gold-glow); }
.buy-row.is-featured:hover { background: var(--parchment-deep); }

/* Secondary button on parchment */
.btn-ghost-light { background: transparent; color: var(--ink); border-color: var(--gold-deep); box-shadow: none; }
.btn-ghost-light:hover { background: var(--parchment-light); box-shadow: 0 0 18px var(--gold-glow-soft); }
.read-cta { margin: .4rem 0 0; text-align: center; }

/* Footer social links */
.site-footer .social { margin-bottom: .8rem; font: 500 .82rem/1.4 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.site-footer .social a { text-decoration: none; }
.site-footer .social a:hover { text-decoration: underline; }

/* /read-the-prologue/: the free preview, set for long-form reading */
.reader { background: radial-gradient(ellipse at 50% 0, var(--parchment-light), var(--parchment) 60%); color: var(--ink); padding: clamp(2rem, 6vw, 4rem) 16px clamp(3rem, 8vw, 5rem); }
.reader > * { max-width: 680px; margin-inline: auto; }
.reader a:not(.btn) { color: var(--link); }
.reader-head { text-align: center; padding-bottom: 2rem; border-bottom: 1px solid var(--parchment-edge); margin-bottom: 2.5rem; }
.reader-head .eyebrow { margin: 0 0 .5rem; font: 600 .78rem/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.reader-head h1 { margin: 0; font: 600 clamp(2.2rem, 6vw, 3.4rem)/1.05 var(--display); }
.reader-head .byline { margin: .4rem 0 1rem; font: italic 400 1.25rem/1.3 var(--body); color: var(--ink-soft); }
.reader-intro { margin: 0 auto 1rem; max-width: 34em; }
.reader-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; margin: 0 0 1.4rem; font: 600 .78rem/1.4 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.chapter { margin-bottom: 3.5rem; scroll-margin-top: 1rem; }
.chapter .chapter-label { margin: 0 0 .2rem; text-align: center; font: 600 .8rem/1.3 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.chapter h2 { margin: 0 0 1.8rem; text-align: center; font: 600 clamp(1.5rem, 4vw, 2rem)/1.2 var(--display); }
.chapter h2::after { content: ""; display: block; width: 4rem; height: 1px; margin: 1rem auto 0; background: var(--gold-deep); }
.chapter p { margin: 0; font-size: 1.2rem; line-height: 1.75; text-indent: 1.5em; hyphens: auto; }
.chapter h2 + p { text-indent: 0; }
.chapter h2 + p::first-letter { float: left; margin: .08em .1em 0 0; font: 600 3.3em/.85 var(--display); color: var(--gold-edge); }
.reader-end { text-align: center; padding-top: 2rem; border-top: 1px solid var(--parchment-edge); }
.reader-end h2 { margin: 0 0 .4rem; font: 600 1.6rem/1.2 var(--display); }
.reader-end .btn { margin: .3rem; }