/* 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);
  --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);
  --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; the glow is a drop-shadow on .doors, which follows that same clipped outline. */
.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; animation: doorglow 3.2s ease-in-out infinite; transition: filter .6s; }
.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 (1.1s), so the painted doors never show behind them */
  transition: opacity .3s 1.1s; }
@keyframes doorglow { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 6px var(--gold-glow)); } }
.leaf { position: absolute; inset: 0; background-image: var(--img); background-repeat: no-repeat; transition: transform 1.1s cubic-bezier(.6,0,.3,1), filter 1.1s; backface-visibility: hidden; }
.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:hover, .doors:focus-visible { animation: none; filter: drop-shadow(0 0 8px var(--gold-glow)); }
.doors:hover .leaf, .doors:focus-visible .leaf { filter: brightness(1.15); }
.doors:focus-visible { outline: none; }
.doors.is-open { animation: none; filter: drop-shadow(0 0 4px var(--gold-hi)) drop-shadow(0 0 22px var(--gold-glow)); }
.doors.is-open .leaf:first-child { transform: rotateY(-105deg); filter: brightness(.5); }
.doors.is-open .leaf:last-child { transform: rotateY(105deg); filter: brightness(.5); }
.doors.is-open .portal::before { opacity: 1; transition: opacity .9s .15s; }

/* 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); }
@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(3rem, 8vw, 6rem) 0; }
.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: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.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: 820px) { .book-main, .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; } }