/* Elke Stevens — Asterion Quest. Desktop: the page is a 1585x992 "stage" scaled to fit the window
   (all sizes in cqw = 1% of stage width) so the live text sits exactly where the mockups put it.
   Below 1100px: a normal flowing layout with the artwork as a banner. */

@font-face { font-family: "Cinzel"; src: url(../fonts/cinzel.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(../fonts/libre-caslon-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(../fonts/libre-caslon-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --red: #d4181f;
  --bronze: #c98f68;
  --ink: #f1ebe6;
  --soft: #cdc3bb;
  --mute: #9d948d;
  --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --caps: "Cinzel", "Trajan Pro", Georgia, serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { background: #000; color: var(--ink); font-family: var(--serif); -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ornament: thin red line with a diamond */
.orn { display: block; position: relative; height: 1px; width: 12rem; margin: 1.2rem auto;
  background: linear-gradient(90deg, transparent, var(--red) 30%, var(--red) 70%, transparent); }
.orn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; background: var(--red); transform: translate(-50%, -50%) rotate(45deg); }

/* ---------- mobile / tablet (default) ---------- */
.viewport { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #000; }
.stage { position: relative; width: 100%; }
.bg { position: absolute; left: 0; top: 0; width: 100%; height: 125vw; background-size: 200% auto; background-repeat: no-repeat;
  background-position: var(--mx, 50%) 0; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.page-home { --mx: 26%; --hero: calc(94vw - 66px); }
.page-quest { --mx: 11%; --hero: calc(112vw - 66px); }
.page-world { --mx: 12%; --hero: calc(90vw - 66px); }
.page-series { --mx: 86%; --hero: calc(100vw - 66px); }
.page-about { --mx: 92%; --hero: 6vw; }
.page-legal { --mx: 92%; --hero: 4vw; }

.top { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
.menu-btn { font: 500 .8rem var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); background: rgba(0,0,0,.45);
  border: 1px solid rgba(201,143,104,.55); padding: .6rem 1rem; cursor: pointer; }
.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: rgba(5,5,5,.97); border-top: 1px solid #3a1210;
  border-bottom: 1px solid #3a1210; padding: .4rem 16px 1rem; flex-direction: column; }
.nav.open { display: flex; }
.nav a { font: 500 .95rem var(--caps); letter-spacing: .16em; text-transform: uppercase; padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.nav a.active { color: var(--red); }
.social { display: flex; gap: 18px; color: var(--bronze); }
.social svg { width: 24px; height: 24px; display: block; }
.social a:hover { color: var(--ink); }

main { position: relative; z-index: 2; padding: 0 20px 4.5rem; }
main::before { content: ""; display: block; height: var(--hero, 50vw); }
.col, .tagline, .titleblock { text-align: left; }
.label, .col p.label { font: 500 .8rem var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 0; }
.h-big { font: 400 2.1rem/1.15 var(--serif); margin: .4rem 0 1.2rem; }
.col p { font-size: 1.02rem; line-height: 1.7; color: var(--soft); margin-bottom: 1rem; }
.col .orn { margin-left: 0; margin-right: 0; width: 9rem; }
hr.short { width: 4.5rem; height: 1px; border: 0; background: #6b2f2c; margin: 1.4rem 0; }
.draft { color: var(--mute); }

.tagline { text-align: center; }
.tagline p { font: 400 1rem var(--caps); letter-spacing: .24em; text-transform: uppercase; color: #ddd3cc; }
.titleblock { text-align: center; margin-top: 1.2rem; }
.lockup { margin: 0; line-height: 0; }
.lockup img { display: block; width: min(92vw, 560px); height: auto; margin: 0 auto; }
.series { font: 400 .9rem var(--caps); letter-spacing: .3em; text-transform: uppercase; color: #cfc6bf; margin-top: .4rem; }
.book { font: 400 .85rem var(--caps); letter-spacing: .3em; text-transform: uppercase; color: var(--red); margin-top: .5rem; }
.cta { display: inline-block; position: relative; font: 500 .85rem var(--caps); letter-spacing: .2em; text-transform: uppercase; padding: 1.4rem 0 1rem; margin-top: 1rem; color: var(--ink); }
.cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #a8312f 30%, #a8312f 70%, transparent); }
.cta i { font-style: normal; color: var(--red); margin-left: .4rem; display: inline-block; }
.cta:hover, .cta:focus-visible { color: #fff; text-shadow: 0 0 16px rgba(212, 24, 31, .75); }
.cta:hover::after, .cta:focus-visible::after { background: linear-gradient(90deg, transparent, var(--red) 20%, var(--red) 80%, transparent); }
.cta:hover i { transform: translateX(5px); }
.social a:hover, .social a:focus-visible { color: #ffd9c2; filter: drop-shadow(0 0 7px rgba(212, 24, 31, .85)); }
.nav a:hover, .nav a:focus-visible { color: #fff; text-shadow: 0 0 14px rgba(212, 24, 31, .85); }
.nav a.active:hover { color: var(--red); }
.bgvideo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.bgvideo.on { opacity: 1; }
.glow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .6s ease; mix-blend-mode: screen;
  background: radial-gradient(circle 280px at var(--gx, 50%) var(--gy, 50%), rgba(212, 24, 31, .20), rgba(212, 24, 31, .07) 45%, transparent 72%); }
.glow.on { opacity: 1; }
.sparks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.5rem; }
.btn-buy { display: inline-flex; align-items: center; justify-content: center; font: 500 .78rem var(--caps); letter-spacing: .18em; text-transform: uppercase;
  padding: .9rem 1.4rem; color: #fff; background: var(--red); border: 1px solid var(--red); }
.btn-buy:hover, .btn-buy:focus-visible { background: #ee2a31; border-color: #ee2a31; box-shadow: 0 0 20px rgba(212, 24, 31, .6); }
.btn-ghost { background: rgba(0, 0, 0, .4); color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: rgba(212, 24, 31, .2); border-color: #ee2a31; box-shadow: 0 0 16px rgba(212, 24, 31, .45); }
.page-legal .bg { background-image: none !important; background: radial-gradient(90% 60% at 20% 0%, #2c0a0c 0%, #0b0606 55%, #050505 100%); -webkit-mask-image: none; mask-image: none; height: 100%; }
.col-legal .h-big { font-size: 1.75rem; overflow-wrap: anywhere; hyphens: auto; }
.col-legal h2 { font: 500 .8rem var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin: 2rem 0 .6rem; }
.col-legal p { margin-bottom: .9rem; }
.col-legal a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(212, 24, 31, .6); }
.col-legal a:hover { color: #fff; }
.todo { color: #e8a33d; border-bottom: 1px dashed #e8a33d; }

.h-quest span { display: block; font: 400 1.9rem/1.2 var(--serif); }
.h-quest .l2 { font-size: 1.6rem; }
.caps { font: 400 .85rem var(--caps) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--mute) !important; margin: .9rem 0 0; }
.lead { font-size: 1.15rem !important; color: #efe8e2 !important; margin-top: 0; }
.red { font: 400 1rem var(--serif); letter-spacing: .06em; text-transform: uppercase; color: var(--red) !important; margin: 1.4rem 0 .8rem; }
.blurb { color: #b9afa7 !important; }
.h-series span { display: block; font: 400 2.3rem/1.2 var(--serif); }
.h-series .red { color: var(--red) !important; font-size: inherit; letter-spacing: 0; text-transform: none; margin: 0; }
.intro { margin-top: 1.4rem; }
.quote { font-size: 1.2rem !important; color: #e9e1da !important; }
.crest { position: absolute; top: -66px; left: 0; right: 0; z-index: 3; text-align: center; pointer-events: none; }
.crest p { margin: 0; font-family: var(--caps); text-transform: uppercase; color: #efe7df; }
.crest-top { position: absolute; left: 0; right: 0; top: 47vw; font-size: 2.6vw; letter-spacing: .3em; }
.crest-main { position: absolute; left: 0; right: 0; top: 60vw; font-size: 3.7vw; letter-spacing: .07em; }
.portrait { width: 62vw; max-width: 330px; margin: 0 auto 1.8rem; aspect-ratio: 316/436; box-shadow: 0 0 40px rgba(0,0,0,.6), 0 0 0 1px rgba(201,143,104,.3); position: relative; z-index: 2; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.page-about main { display: flex; flex-direction: column; }
.page-about .portrait { order: -1; }

.foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: center; gap: 1.4rem; padding: .7rem 1rem;
  font: 400 .65rem var(--caps); letter-spacing: .18em; text-transform: uppercase; color: #7d746d; }
.foot a:hover { color: var(--ink); }

/* ---------- tablets: readable column ---------- */
@media (min-width: 700px) and (max-width: 1099px) {
  main { max-width: 700px; margin: 0 auto; }
  .col .h-big, .col-legal .h-big { font-size: 2.3rem; }
}

/* ---------- desktop: scaled stage ---------- */
@media (min-width: 1100px) {
  .viewport { position: fixed; inset: 0; min-height: 0; }
  .stage { position: absolute; left: 50%; top: 50%; width: min(100vw, 159.8vh); aspect-ratio: 1585 / 992; transform: translate(-50%, -50%); container-type: inline-size; }
  .bg { height: 100%; background-size: 100% 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
  .top { position: absolute; left: 0; right: 0; top: 0; padding: 0; height: 6cqw; }
  .menu-btn { display: none; }
  .nav { display: flex; flex-direction: row; position: absolute; left: 48.8cqw; top: 1.5cqw; transform: translateX(-50%); gap: 4.4cqw; white-space: nowrap; background: none; border: 0; padding: 0; }
  .nav a { font-size: max(11px, .95cqw); letter-spacing: .14em; padding: 0 0 .95cqw; border: 0; position: relative; }
  .nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--red), transparent); transition: left .35s ease, right .35s ease; }
  .nav a:hover::after, .nav a:focus-visible::after { left: -.6cqw; right: -.6cqw; }
  .nav a.active::after { content: ""; position: absolute; left: -.6cqw; right: -.6cqw; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--red), transparent); }
  .nav a.active::before { content: ""; position: absolute; left: 50%; bottom: -.22cqw; width: .45cqw; height: .45cqw; background: var(--red); transform: translateX(-50%) rotate(45deg); }
  .social { position: absolute; right: 2.4cqw; top: 1.1cqw; gap: 1.7cqw; }
  .social svg { width: 1.7cqw; height: 1.7cqw; min-width: 16px; min-height: 16px; }

  main { position: absolute; inset: 0; padding: 0; pointer-events: none; z-index: 2; }
  main::before { display: none; }
  main a { pointer-events: auto; }
  .col, .tagline, .titleblock, .crest, .portrait { position: absolute; }
  .orn { width: 6.6cqw; margin: 1.4cqw auto; }
  .orn::after { width: .5cqw; height: .5cqw; }
  .col .orn { margin-left: 0; width: 11cqw; }
  .label, .col p.label { font-size: max(10px, 1.15cqw); letter-spacing: .16em; margin-bottom: 0; }
  .h-big { font-size: 4.1cqw; margin: 0 0 2.6cqw; }
  .col p { font-size: 1.45cqw; line-height: 1.56; margin-bottom: 1.6cqw; }
  hr.short { width: 6.3cqw; margin: 2.4cqw 0; }

  /* Home */
  .tagline { left: 4.6cqw; top: 14.4cqw; width: 23.5cqw; text-align: center; }
  .tagline p { font-size: 1.25cqw; letter-spacing: .22em; white-space: nowrap; }
  .tagline .orn { margin: 1.5cqw auto; width: 5.4cqw; }
  .titleblock { left: 52.5cqw; top: 17cqw; width: 43cqw; margin: 0; }
  .lockup img { width: 37cqw; }
  .titleblock .orn { width: 11cqw; margin: .8cqw auto 2.9cqw; }
  .series { font-size: 1.55cqw; margin-top: 0; }
  .book { font-size: 1.4cqw; margin-top: .8cqw; }
  .cta { font-size: 1.3cqw; padding: 1.4cqw 0 1.2cqw; margin-top: 2.6cqw; }
  .cta::after { left: -1cqw; right: -1cqw; }

  /* Asterion Quest */
  .col-quest { left: 51.5cqw; top: 7.4cqw; width: 44cqw; }
  .h-quest { margin-top: .6cqw; }
  .h-quest span { font-size: 3.5cqw; line-height: 1.16; }
  .h-quest .l2 { font-size: 3cqw; }
  .caps { font-size: 1.45cqw !important; margin: 1.4cqw 0 0 !important; }
  .col-quest .orn { margin: 2.4cqw 0 2.4cqw; width: 13cqw; }
  .lead { font-size: 1.75cqw !important; line-height: 1.55 !important; margin: 0 !important; }
  .red { font-size: 1.5cqw; margin: 2.6cqw 0 1.4cqw !important; }
  .blurb { font-size: 1.3cqw !important; line-height: 1.85 !important; }
  .col-quest .cta { margin-top: 2.4cqw; font-size: 1.25cqw; }
  .col-quest .cta::after { left: 0; right: 0; }
  .buy-row { margin-top: 1.5cqw; gap: .9cqw; }
  .btn-buy { font-size: max(10px, .82cqw); padding: .7cqw 1.2cqw; }

  /* The World */
  .col-world { left: 54.8cqw; top: 11.2cqw; width: 34.5cqw; }
  .col-world .h-big { font-size: 3.6cqw; }
  .col-world p { font-size: 1.36cqw; margin-bottom: 1.4cqw; }
  .col-world .orn:first-of-type { margin-top: .9cqw; margin-bottom: 2.8cqw; }
  .col-world .orn:last-child { margin: 3cqw auto 0; width: 21cqw; }
  .col-world p:not(.label) { color: var(--soft); letter-spacing: .015em; }

  /* The Series */
  .col-series { left: 7.5cqw; top: 11cqw; width: 40cqw; }
  .col-series .orn { margin-top: .9cqw; margin-bottom: 2.4cqw; }
  .h-series span { font-size: 3.7cqw; line-height: 1.24; }
  .intro { width: 27cqw; font-size: 1.4cqw !important; line-height: 1.68 !important; margin-top: 3cqw; }
  .quote { font-size: 1.75cqw !important; }
  .crest { left: 68cqw; top: 0; width: 0; height: 0; transform: none; }
  .crest p { position: absolute; left: 0; right: auto; top: 0; transform: translate(-50%, -50%); white-space: nowrap; }
  .crest .crest-top { font-size: 1.3cqw; letter-spacing: .28em; top: 24.6cqw; }
  .crest .crest-main { font-size: 1.95cqw; letter-spacing: .07em; top: 30.2cqw; }

  /* About */
  .col-about { left: 7.7cqw; top: 8.2cqw; width: 41cqw; }
  .col-about .h-big { margin: .8cqw 0 0; }
  .col-about p { font-size: 1.38cqw; line-height: 1.62; margin-bottom: 1.5cqw; }
  .portrait { left: 60.4cqw; top: 17.7cqw; width: 20cqw; height: 27.5cqw; margin: 0; aspect-ratio: auto; box-shadow: 0 0 3cqw rgba(0,0,0,.6), 0 0 0 1px rgba(201,143,104,.3); }
  .page-about main { display: block; }

  /* legal pages: ordinary scrolling page (long text), not the fixed stage */
  .page-legal .viewport { position: relative; inset: auto; min-height: 100vh; overflow: visible; }
  .page-legal .stage { position: relative; left: auto; top: auto; width: 100%; aspect-ratio: auto; transform: none; container-type: normal; min-height: 100vh; }
  .page-legal .bg { height: 100%; -webkit-mask-image: none; mask-image: none; background-image: none !important; background: radial-gradient(90% 60% at 20% 0%, #2c0a0c 0%, #0b0606 55%, #050505 100%); }
  .page-legal .top { position: relative; height: auto; padding: 22px 40px; display: flex; align-items: center; justify-content: space-between; }
  .page-legal .nav { position: static; transform: none; gap: 3rem; }
  .page-legal .nav a { font-size: .85rem; padding-bottom: .7rem; }
  .page-legal .nav a::after { left: 50%; right: 50%; }
  .page-legal .nav a:hover::after { left: -8px; right: -8px; }
  .page-legal .social { position: static; gap: 20px; }
  .page-legal .social svg { width: 22px; height: 22px; }
  .page-legal main { position: relative; inset: auto; pointer-events: auto; padding: 1rem 40px 7rem; }
  .page-legal .col-legal { position: relative; left: auto; top: auto; width: min(820px, 100%); margin: 0 auto; }
  .page-legal .col-legal .label { font-size: .8rem; }
  .page-legal .col-legal .h-big { font-size: 2.6rem; margin: .5rem 0 1.4rem; }
  .page-legal .col-legal p { font-size: 1.02rem; line-height: 1.72; margin-bottom: .9rem; }
  .page-legal .sparks { display: none; }

  .foot { position: absolute; bottom: 0; font-size: 10px; padding: .45rem 1rem .5rem; }
}
@media (min-width: 1100px) and (min-resolution: 2dppx) { .foot { font-size: 10px; } }
/* motion: only for people who have not asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .cta, .nav a, .social a { transition: color .25s ease, text-shadow .25s ease, filter .25s ease; }
  .btn-buy { transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
  .cta i { transition: transform .25s ease; }
  .bg { animation: fadein 1.4s ease both; }
  main > * { animation: rise 1s cubic-bezier(.2, .7, .2, 1) both; }
  main > *:nth-child(2) { animation-delay: .18s; }
  main > *:nth-child(3) { animation-delay: .32s; }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}