/* =========================================================================
   Athena S.C. Grace — site styles, "Gothic Celestial" (design v8)
   Built from the art in Athena's Website folder: the moon-cornered square frame on every band,
   the orbiting crescent over the city skyline, her title lettering, the lily spray, the round moon
   portrait frame, the glowing quote ring, the moonlit lake and the lily crescent divider.
   Colours and fonts live in the :root block below. Motion lives in fx.js.
   ========================================================================= */
@font-face { font-family: "Astra Remnant"; font-weight: 400; font-display: swap; src: url("/assets/fonts/astra-remnant.woff2?v=d90f3cbf6a") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 400; font-display: swap; src: url("/assets/fonts/cinzel-latin-400-normal.woff2?v=63126eeda8") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 400; font-display: swap; src: url("/assets/fonts/eb-garamond-latin-400-normal.woff2?v=005abdc3a2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/eb-garamond-latin-400-italic.woff2?v=985f75b879") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-500-italic.woff2?v=9b8a16c996") format("woff2"); }

:root {
  color-scheme: dark;
  --ink: #060309;
  --plum: 120, 44, 120;
  --magenta: 196, 72, 160;
  --crimson: 190, 22, 58;
  --gold: #e3bf86;
  --gold-hi: #fbe8c4;
  --gold-lo: #9e7745;
  --text: #f1e9df;
  --text-2: #d8cbc6;
  --muted: #9c8c99;
  --line: rgba(227, 191, 134, .62);
  --line-soft: rgba(227, 191, 134, .25);

  --f-display: "Astra Remnant", "Cormorant Garamond", Georgia, serif;
  --f-caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-body: "EB Garamond", Garamond, "Palatino Linotype", Georgia, serif;
  --f-italic: "Cormorant Garamond", "EB Garamond", Georgia, serif;

  --step--1: .76rem;
  --step-0: 1.12rem;
  --step-2: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
  --step-3: clamp(2.6rem, 1.2rem + 4.6vw, 5.4rem);
  --gold-grad: linear-gradient(174deg, var(--gold-hi) 8%, var(--gold) 42%, var(--gold-lo) 74%, #f0d6a6 96%);

  /* each picture is embedded once and reused through these */
  --i-skyline: url("/assets/img/ui/skyline.webp?v=38329f5f5b");
  --i-orbit: url("/assets/img/ui/moon-orbit.webp?v=d092c8ed12");
  --i-dial: url("/assets/img/ui/dial.webp?v=4f62033b87");
  --i-smoke: url("/assets/img/ui/purple-smoke.webp?v=c7faa56d5a");
  --i-nebula: url("/assets/img/ui/nebula-frame.webp?v=c2ddc736c9");
  --i-lake: url("/assets/img/ui/moon-lake.webp?v=47d56b3209");
  --i-lilies: url("/assets/img/ui/lilies.webp?v=7b401edf99");
  --i-letters: url("/assets/img/ui/hero-lettering.webp?v=ba9c1486d0");
  --i-rose: url("/assets/img/ui/rose.webp?v=d412f84e2d");
  --i-divider: url("/assets/img/ui/divider.webp?v=9d07d3c13b");
  --i-fullmoon: url("/assets/img/ui/o-full-moon.webp?v=9bce78a3e8");
  --i-cres: url("/assets/img/ui/o-cres-marble.webp?v=922489b881");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); font: 400 var(--step-0)/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; background: var(--ink); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--ink); }
.backdrop { position: fixed; inset: 0; z-index: -3; pointer-events: none; background: url("/assets/img/ui/marble.webp?v=43b0c5a869") center / cover no-repeat; opacity: .22; }
.backdrop::after { content: ""; position: absolute; inset: 0; background: url("/assets/img/ui/vignette.webp?v=efbc6d4245") center / cover no-repeat; mix-blend-mode: multiply; }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.petal-src { display: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.art { position: absolute; pointer-events: none; background: center / contain no-repeat; }
.smoke { -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent); mask-image: radial-gradient(closest-side, #000 45%, transparent); }
.page { max-width: 1480px; margin-inline: auto; padding: 10px max(8px, env(safe-area-inset-right, 0px)) 14px max(8px, env(safe-area-inset-left, 0px)); display: grid; gap: 8px; }

/* ---------- type ---------- */
.display { font-family: var(--f-display); font-weight: 400; line-height: 1.02; margin: 0; text-wrap: balance; font-feature-settings: "swsh" 1, "ss07" 1; }
.caps { font-family: var(--f-caps); text-transform: uppercase; letter-spacing: .26em; font-size: var(--step--1); line-height: 1.9; margin: 0; }
.caps b { font-weight: 400; color: var(--gold); margin-inline: .7em; }
.rule { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--gold); }
.rule::before, .rule::after { content: ""; height: 1px; flex: 1; max-width: 240px; background: linear-gradient(90deg, transparent, var(--line)); }
.rule::after { transform: scaleX(-1); }
.echo { position: relative; display: inline-block; isolation: isolate; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.echo::before, .echo::after { content: attr(data-echo); position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; animation: ripple 5.5s cubic-bezier(.2, .6, .3, 1) infinite; }
.echo::after { animation-delay: -2.75s; }
@keyframes ripple { 0% { transform: translate(0, 0); opacity: .28; filter: blur(0); } 100% { transform: translate(.12em, -.4em); opacity: 0; filter: blur(3px); } }

/* ---------- the moon-cornered frame from the Website folder square frame ---------- */
.framed { --fc: clamp(56px, 5.4vw, 80px); position: relative; isolation: isolate; overflow: clip; }
.framed::before { content: ""; position: absolute; inset: calc(var(--fc) * .2); z-index: -5; background: var(--panel, rgba(6, 3, 9, .78)); }
.framed::after { content: ""; position: absolute; inset: 0; z-index: 12; pointer-events: none;
  background:
    url("/assets/img/ui/f-tl.webp?v=b9a2d60da6") left top / var(--fc) no-repeat,
    url("/assets/img/ui/f-tr.webp?v=5c3e80f5ca") right top / var(--fc) no-repeat,
    url("/assets/img/ui/f-bl.webp?v=c841f87d5b") left bottom / var(--fc) no-repeat,
    url("/assets/img/ui/f-br.webp?v=dfed17fb8e") right bottom / var(--fc) no-repeat,
    url("/assets/img/ui/f-mt.webp?v=9b3f08bfd3") center top / auto var(--fc) no-repeat,
    url("/assets/img/ui/f-mb.webp?v=b89ca25c40") center bottom / auto var(--fc) no-repeat,
    url("/assets/img/ui/f-h.webp?v=8f63148e49") center top / calc(100% - var(--fc) * 1.5) var(--fc) no-repeat,
    url("/assets/img/ui/f-hb.webp?v=cc25aec13d") center bottom / calc(100% - var(--fc) * 1.5) var(--fc) no-repeat,
    url("/assets/img/ui/f-v.webp?v=38b983e9dc") left center / var(--fc) calc(100% - var(--fc) * 1.5) no-repeat,
    url("/assets/img/ui/f-vr.webp?v=abef2a975a") right center / var(--fc) calc(100% - var(--fc) * 1.5) no-repeat;
  filter: drop-shadow(0 0 4px rgba(227, 191, 134, .3)); }
.framed.no-mid::after { background-size: var(--fc), var(--fc), var(--fc), var(--fc), 0 0, 0 0,
  calc(100% - var(--fc) * 1.5) var(--fc), calc(100% - var(--fc) * 1.5) var(--fc), var(--fc) calc(100% - var(--fc) * 1.5), var(--fc) calc(100% - var(--fc) * 1.5); }
.seam { position: relative; z-index: 20; height: clamp(54px, 7vw, 100px); margin: calc(clamp(54px, 7vw, 100px) / -2 - 4px) auto; width: min(76%, 820px); pointer-events: none;
  background: var(--i-divider) center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(6, 3, 9, .9)) drop-shadow(0 0 12px rgba(var(--magenta), .35)); }
.vwords { position: absolute; z-index: 8; top: 50%; translate: 0 -50%; display: grid; gap: 6px; justify-items: center; text-align: center;
  font: 400 .7rem/1.65 var(--f-caps); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 0 10px #000, 0 0 2px #000; }
.vwords img { width: 24px; margin: 6px auto; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .35; transform: scale(.75) rotate(20deg); } }

/* ---------- buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .8em; padding: 1.05em 1.7em; font: 400 .72rem/1 var(--f-caps); letter-spacing: .24em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; color: var(--gold-hi); background: rgba(6, 3, 9, .72); border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 3px rgba(6, 3, 9, .8), inset 0 0 0 4px var(--line-soft); transition: transform .25s, box-shadow .25s, background .25s; }
.btn svg { width: 1.3em; height: 1.3em; transition: transform .25s; }
.btn:hover { transform: translateY(-2px); background: rgba(50, 20, 50, .82); box-shadow: inset 0 0 0 3px rgba(6, 3, 9, .8), inset 0 0 0 4px var(--line-soft), 0 0 28px -4px rgba(227, 191, 134, .6); }
.btn:hover svg { transform: translateX(3px); }
.btn-plum { border-color: #b78ad8; }
.btn-gold { color: #2a1218; background: var(--gold-grad); border-color: var(--gold-hi); box-shadow: inset 0 0 0 3px rgba(255, 245, 225, .25), 0 10px 40px -14px rgba(227, 191, 134, .9); }
.btn-gold:hover { background: var(--gold-grad); }
.btn-gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%); transform: translateX(-120%); animation: shimmer 5s ease-in-out infinite; }
@keyframes shimmer { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* ---------- shared motion ---------- */
@keyframes spin { to { rotate: 360deg; } }
@keyframes breathe { 50% { scale: 1.06; opacity: .8; } }
@keyframes drift { to { translate: -4% 3%; rotate: 4deg; } }
@keyframes sway { 50% { rotate: 3deg; } }
@keyframes bob { 50% { translate: 0 -10px; } }

/* ---------- header ---------- */
.site-header { --fc: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 112px; padding-inline: 70px; --panel: rgba(6, 3, 9, .85); }
.site-header ul { display: flex; gap: clamp(16px, 3.4vw, 52px); list-style: none; margin: 0; padding: 0; }
.site-header ul.l { justify-content: flex-start; padding-left: 4%; } .site-header ul.r { justify-content: flex-end; padding-right: 4%; }
.site-header ul a { position: relative; text-decoration: none; font: 400 .72rem/1 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); transition: color .2s; }
.site-header ul a::after { content: ""; position: absolute; left: -6px; right: -6px; top: calc(100% + 9px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0; transition: opacity .2s; }
.site-header ul a:hover, .site-header ul a[aria-current] { color: var(--gold-hi); }
.site-header ul a:hover::after, .site-header ul a[aria-current]::after { opacity: 1; }
.plaque { position: relative; display: grid; justify-items: center; align-content: center; text-decoration: none; padding: 22px clamp(20px, 2.4vw, 40px) 18px; margin-block: 11px; align-self: stretch;
  border-inline: 1px solid var(--line); box-shadow: inset 4px 0 0 -3px var(--line-soft), inset -4px 0 0 -3px var(--line-soft); }
.plaque .name { display: block; width: clamp(240px, 26vw, 380px); aspect-ratio: 1000 / 219; background: url("/assets/img/ui/name-lettering.webp?v=6be15b7a28") center / contain no-repeat; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .8)); transition: filter .3s; }
.plaque:hover .name { filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .8)) drop-shadow(0 0 14px rgba(255, 214, 160, .45)); }
.topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 2px 22px 0; }
.topline p { margin: 0; font: 400 .62rem/1 var(--f-caps); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.topline .socials a { width: 30px; height: 30px; } .topline .socials svg { width: 15px; height: 15px; }

/* ---------- hero ---------- */
.hero { min-height: clamp(560px, 46vw, 700px); display: grid; grid-template-columns: 46% 1fr; --panel: radial-gradient(70% 90% at 64% 30%, rgba(var(--plum), .35), transparent 70%), rgba(6, 3, 9, .55); }
.hero .nebula { inset: -6% -4% 10% 0; background: var(--i-nebula) center / 100% 100% no-repeat; mix-blend-mode: screen; opacity: .85; z-index: -3; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.hero .smoke { width: 40%; aspect-ratio: 1122 / 1402; background-image: var(--i-smoke); mix-blend-mode: screen; opacity: .5; z-index: -2; animation: drift 28s ease-in-out infinite alternate; }
.hero .smoke.a { right: 6%; top: -40%; } .hero .smoke.b { left: -14%; top: -10%; opacity: .45; animation-duration: 36s; }
.hero .orbit { left: 47%; top: 3%; width: 30%; aspect-ratio: 1000 / 1014; background-image: var(--i-orbit); z-index: -1; filter: drop-shadow(0 0 30px rgba(255, 214, 160, .35)); animation: breathe 7s ease-in-out infinite; }
.hero .orbit::after { content: ""; position: absolute; inset: -14%; background: var(--i-dial) center / contain no-repeat; opacity: .18; animation: spin 180s linear infinite; }
.hero .city { left: 36%; right: 6%; bottom: 17%; aspect-ratio: 2172 / 498; background-image: var(--i-skyline); background-size: 100% auto; background-position: center bottom; z-index: 1; filter: drop-shadow(0 -4px 24px rgba(var(--magenta), .3)); }
.hero .water { left: 36%; right: 6%; bottom: calc(17% - 12.5%); height: 12.5%; z-index: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 95%); mask-image: linear-gradient(180deg, #000, transparent 95%); }
.hero .water::before { content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 2172 / 498; background: var(--i-skyline) center bottom / 100% auto no-repeat; transform: scaleY(-1); opacity: .5; filter: blur(1px) saturate(1.3); animation: waver 5s ease-in-out infinite; }
.hero .water::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(6, 3, 9, .35) 5px 7px), linear-gradient(90deg, transparent 20%, rgba(255, 214, 160, .12) 60%, transparent 80%); animation: lap 6s linear infinite; }
@keyframes waver { 50% { transform: scaleY(-1) skewX(1.2deg) translateX(-.5%); filter: blur(1.8px) saturate(1.3); } }
@keyframes lap { to { background-position: 0 28px, 0 0; } }
.hero .pillar { right: calc(var(--fc) * .2); top: calc(var(--fc) * .2); bottom: calc(var(--fc) * .2); width: 9%; z-index: 2; background: linear-gradient(90deg, rgba(6, 3, 9, .2), rgba(6, 3, 9, .85) 30%); border-left: 1px solid var(--line-soft); }
.hero .vwords { right: 1.6%; width: 7%; z-index: 9; top: 42%; }
.hero .lily-r { right: 0; bottom: 0; width: 15%; aspect-ratio: 760 / 949; background-image: var(--i-lilies); z-index: 10; transform: scaleX(-1); transform-origin: bottom center; filter: drop-shadow(0 0 18px rgba(var(--magenta), .4)); animation: lsway 10s ease-in-out infinite; }
@keyframes lsway { 50% { rotate: -2deg; } }
.hero-copy { position: relative; z-index: 9; display: grid; gap: 22px; justify-items: start; align-content: center; padding: calc(var(--fc) * .9) 0 calc(var(--fc) * 1.1) calc(var(--fc) * 1.15); }
.hero h1 { margin: 0; width: min(100%, 560px); }
.letters { position: relative; display: block; aspect-ratio: 1300 / 841; isolation: isolate; }
.letters i { position: absolute; inset: 0; background: var(--i-letters) center / contain no-repeat; }
.letters i:first-child { filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .9)); }
.letters i.ghost { z-index: -1; opacity: 0; filter: hue-rotate(-30deg) saturate(.8) blur(.5px); animation: letter-echo 6s cubic-bezier(.2, .6, .3, 1) infinite; }
.letters i.ghost:nth-child(3) { animation-delay: -3s; }
@keyframes letter-echo { 0% { transform: translate(0, 0); opacity: .35; } 100% { transform: translate(2.5%, -6%); opacity: 0; filter: hue-rotate(-30deg) saturate(.8) blur(3px); } }
.hero .caps { color: var(--text); text-shadow: 0 0 10px #000; padding-left: 4%; }
.hero .btns { padding-left: 4%; }
#petals { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 11; pointer-events: none; }

/* ---------- featured series ---------- */
.series { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; min-height: 560px; padding: calc(var(--fc) * 1) calc(var(--fc) * 2.1) calc(var(--fc) * 1) calc(var(--fc) * 1.2);
  --panel: radial-gradient(50% 80% at 72% 50%, rgba(var(--plum), .5), transparent 70%), rgba(6, 3, 9, .74); }
.series .smoke { left: -12%; bottom: -60%; width: 46%; aspect-ratio: 1122 / 1402; background-image: var(--i-smoke); opacity: .55; mix-blend-mode: screen; z-index: -1; animation: drift 30s ease-in-out infinite alternate; }
.series .cres { left: calc(var(--fc) * .9); top: 30%; width: clamp(60px, 6vw, 92px); aspect-ratio: 149 / 171; background-image: var(--i-cres); filter: drop-shadow(0 0 20px rgba(255, 214, 160, .5)); animation: bob 6s ease-in-out infinite; }
.series-copy { position: relative; z-index: 3; display: grid; gap: 16px; justify-items: center; text-align: center; min-width: 0; padding-left: clamp(40px, 6vw, 90px); }
.series h2 { margin: 0; display: grid; justify-items: center; gap: .12em; font-family: var(--f-caps); font-weight: 400; text-transform: uppercase; line-height: 1; }
.series h2 .t1, .series h2 .t3 { font-size: clamp(2.4rem, 1.2rem + 4vw, 4.8rem); letter-spacing: .08em; }
.series h2 .t2 { display: flex; align-items: center; gap: .8em; font-size: clamp(.8rem, .6rem + .6vw, 1.15rem); letter-spacing: .5em; color: var(--gold); }
.series h2 .t2::before, .series h2 .t2::after { content: ""; width: clamp(40px, 6vw, 90px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.series h2 .t2::after { transform: scaleX(-1); }
.metal { background: linear-gradient(180deg, #fff4dc 0%, #f1d29c 28%, #b8894e 52%, #e9c992 70%, #fff0cf 86%, #9b6d3c 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #5a3a1c) drop-shadow(0 2px 0 #3a2410) drop-shadow(0 6px 14px rgba(0, 0, 0, .85)) drop-shadow(0 0 18px rgba(255, 200, 130, .25)); }
.series .caps { color: var(--text); }
.series p.desc { margin: 0; max-width: 54ch; font: italic 400 1.16rem/1.6 var(--f-body); color: var(--text-2); }
.book-stage { position: relative; z-index: 3; justify-self: center; width: min(100%, 330px); perspective: 1400px; }
.book-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--crimson), .4), rgba(var(--magenta), .15) 55%, transparent); animation: breathe 6s ease-in-out infinite; }
.book-stage .ring { left: 50%; top: 46%; width: 160%; aspect-ratio: 1; translate: -50% -50%; background-image: var(--i-dial); opacity: .22; z-index: -1; animation: spin 200s linear infinite; }
.book { transform: rotateY(-10deg); transition: transform .2s ease-out; animation: float 7s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes float { 50% { translate: 0 -12px; } }
.book img { width: 100%; height: auto; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .8)) drop-shadow(0 0 40px rgba(var(--crimson), .35)); }
.series .vwords { right: calc(var(--fc) * .7); }
.series .float-rose { width: var(--s, 120px); aspect-ratio: 560 / 696; background-image: var(--i-rose); z-index: 2; opacity: var(--o, .9); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(var(--crimson), .35));
  animation: rose-float var(--d, 11s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
.series .float-rose.purple { background-image: url("/assets/img/ui/purple-roses.webp?v=4f8d08677f"); aspect-ratio: 560 / 707; }
@keyframes rose-float { 0%, 100% { translate: 0 0; rotate: var(--r0, -6deg); } 50% { translate: var(--dx, 8px) -18px; rotate: var(--r1, 6deg); } }
#petals2 { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.series .chime { right: calc(var(--fc) * .95); top: calc(var(--fc) * .2); width: 30px; aspect-ratio: 62 / 254; background-image: url("/assets/img/ui/o-dangle-1.webp?v=a13866758b"); transform-origin: top center; animation: sway 7s ease-in-out infinite; }

/* ---------- more worlds ---------- */
.worlds { padding: calc(var(--fc) * .7) calc(var(--fc) * .8) calc(var(--fc) * .8); --panel: rgba(6, 3, 9, .7); }
.worlds h2 { margin-bottom: 20px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.tile { --fc: clamp(40px, 3.6vw, 56px); display: grid; align-content: end; justify-items: center; text-align: center; aspect-ratio: 1.3; padding: 0 12% 9%; text-decoration: none; --panel: #0b060c; }
.tile .scene { position: absolute; inset: calc(var(--fc) * .2); z-index: -4; overflow: hidden; }
:where(.tile .scene) > span { position: absolute; pointer-events: none; background-position: center; background-size: contain; background-repeat: no-repeat; transition: transform 1s ease; }
.tile .scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(6, 3, 9, .55) 62%, rgba(6, 3, 9, .95)); }
.tile:hover .scene > span { transform: scale(1.06); }
.tile:hover::after { filter: drop-shadow(0 0 10px rgba(255, 214, 160, .7)); }
.tile h3 { margin: 0; font: 400 clamp(1rem, .8rem + .9vw, 1.5rem)/1.1 var(--f-caps); letter-spacing: .07em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 2px 12px #000; }
.tile .caps { font-size: .58rem; color: var(--text-2); margin-top: 4px; letter-spacing: .2em; line-height: 1.6; }
.tile .go { margin-top: 10px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; color: var(--gold-hi); background: rgba(6, 3, 9, .6); transition: transform .3s; }
.tile:hover .go { transform: translateX(4px); }
.tile .go svg { width: 13px; height: 13px; }
.s-smoke { inset: -20%; background-image: var(--i-smoke) !important; background-size: cover !important; opacity: .7; }
.s-city { left: -30%; right: -40%; bottom: 18%; aspect-ratio: 2172 / 498; background-image: var(--i-skyline) !important; background-size: 100% auto !important; }
.s-moon { width: 42%; aspect-ratio: 1; }
.s-red { filter: hue-rotate(-55deg) saturate(1.8) brightness(.95); }
.s-dial { inset: -10% 5%; background-image: var(--i-dial) !important; opacity: .6; animation: spin 90s linear infinite; }
.s-nebula { inset: -10% -30%; background-image: var(--i-nebula) !important; background-size: 100% 100% !important; mix-blend-mode: screen; }
.cast-title { margin: clamp(30px, 3.4vw, 46px) 0 22px; }
.cast { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 30px); }
.cast a { display: grid; justify-items: center; gap: 8px; text-align: center; text-decoration: none; }
.cast .pic { position: relative; width: min(100%, 150px); aspect-ratio: 1; border-radius: 50%; background-position: center 20%; background-size: cover; background-repeat: no-repeat; border: 1px solid var(--gold);
  box-shadow: 0 0 0 5px rgba(6, 3, 9, .85), 0 0 0 6px var(--line-soft), 0 10px 30px -8px rgba(var(--magenta), .6); filter: saturate(.85) brightness(.9); transition: transform .4s, filter .4s, box-shadow .4s; }
.cast .pic::after { content: ""; position: absolute; left: 50%; top: -14px; width: 26px; height: 26px; translate: -50% 0; background: var(--i-cres) center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(255, 214, 160, .7)); }
.cast a:hover .pic { transform: translateY(-6px) rotate(-2deg); filter: none; box-shadow: 0 0 0 5px rgba(6, 3, 9, .85), 0 0 0 6px var(--gold), 0 14px 36px -8px rgba(var(--magenta), .8); }
.cast b { font: 400 .8rem/1.3 var(--f-caps); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); margin-top: 6px; }
.cast small { font: italic 400 .98rem/1.35 var(--f-body); color: var(--text-2); max-width: 22ch; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: .95fr 1.2fr .7fr; align-items: center; gap: clamp(20px, 3vw, 48px); padding: calc(var(--fc) * .8) calc(var(--fc) * 1.2);
  --panel: radial-gradient(40% 80% at 20% 55%, rgba(var(--plum), .5), transparent 70%), rgba(6, 3, 9, .74); }
.portrait { position: relative; justify-self: center; width: min(100%, 430px); aspect-ratio: 1; }
.portrait::before { content: ""; position: absolute; left: 18%; top: 14.5%; width: 64.5%; height: 64.5%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 50% 40%, rgba(var(--magenta), .55), rgba(60, 20, 80, .85) 55%, #12081a); box-shadow: 0 0 60px rgba(var(--magenta), .45); }
/* the cut-out photo twice: once clipped to the circle, once above it showing only the top half,
   so her hair and shoulders break out over the frame */
.portrait .clip { position: absolute; left: 17.75%; top: 14.5%; width: 64.5%; height: 64.5%; border-radius: 50%; overflow: hidden; z-index: 1; }
.portrait .ring { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgba(227, 191, 134, .35)); }
.portrait .halo { inset: -6%; background-image: var(--i-dial); opacity: .2; animation: spin 150s linear infinite reverse; }
.portrait .lilies { left: -16%; bottom: -10%; width: 44%; aspect-ratio: 760 / 949; background-image: var(--i-lilies); z-index: 4; transform: scaleX(-1); filter: drop-shadow(0 0 16px rgba(var(--magenta), .4)); }
.about-copy { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.about h2 { font-size: var(--step-2); padding-bottom: .05em; }
.about-copy .caps { color: var(--text); }
.about-copy p.body { margin: 0; color: var(--text-2); max-width: 56ch; }
.quote { position: relative; margin: 0; justify-self: center; width: min(100%, 300px); aspect-ratio: 700 / 711; display: grid; place-content: center; text-align: center; padding: 17% 21% 24%;
  font: italic 500 1.18rem/1.35 var(--f-italic); color: var(--gold-hi); }
.quote::before { content: ""; position: absolute; inset: 0; background: url("/assets/img/ui/glow-ring.webp?v=34785986f6") center / contain no-repeat; animation: breathe 7s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255, 214, 160, .3)); }
.quote .q { display: block; font: 400 2.6rem/.5 var(--f-display); color: var(--gold); margin-bottom: 10px; }

/* ---------- newsletter ---------- */
.join { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(14px, 2.2vw, 34px); min-height: 280px;
  padding: calc(var(--fc) * .75) calc(var(--fc) * 1.05) calc(var(--fc) * .75) 30%;
  --panel: linear-gradient(90deg, rgba(40, 14, 50, .5), rgba(6, 3, 9, .78) 55%); }
.join .lake { position: absolute; left: calc(var(--fc) * .2); top: calc(var(--fc) * .2); bottom: calc(var(--fc) * .2); width: 50%; z-index: -1; background: var(--i-lake) 30% 60% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent); mask-image: linear-gradient(90deg, #000 40%, transparent); }
.join .lake::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8%; height: 28%; background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(6, 3, 9, .3) 5px 7px); animation: lap 6s linear infinite; }
.join-copy { display: grid; gap: 10px; justify-items: center; text-align: center; min-width: 0; }
.join h2 { font-size: var(--step-2); padding-bottom: .05em; }
.join-copy .caps { color: var(--text); }
.join-form { display: grid; gap: 16px; min-width: 0; }
.signup { display: flex; border: 1px solid var(--gold); background: rgba(6, 3, 9, .8); box-shadow: 0 0 40px -14px rgba(227, 191, 134, .5); }
.signup input { flex: 1; min-width: 0; font: 400 1.02rem var(--f-body); color: var(--text); background: transparent; border: 0; padding: .95em 1.1em; }
.signup input::placeholder { color: var(--muted); }
.signup input:focus { outline: none; }
.signup:focus-within { box-shadow: 0 0 0 3px rgba(227, 191, 134, .3); }
.signup .btn { box-shadow: none; border-width: 0 0 0 1px; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 10px 26px; }
.perks li { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-2); line-height: 1.2; }
.perks svg { width: 24px; height: 24px; flex: none; color: var(--gold); }
.form-status { margin: 0; min-height: 1.3em; color: var(--gold-hi); font-style: italic; }

/* ---------- footer ---------- */
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px 30px; padding: calc(var(--fc) * .9) calc(var(--fc) * 1.1) calc(var(--fc) * .6); --panel: rgba(6, 3, 9, .86); }
.site-footer .left { display: flex; align-items: center; gap: 18px; }
.site-footer .left .moon { width: 70px; aspect-ratio: 246 / 222; background: url("/assets/img/ui/o-cres-orbit.webp?v=f9e2fefc65") center / contain no-repeat; flex: none; animation: breathe 7s ease-in-out infinite; }
.site-footer .taglines { margin: 0; white-space: nowrap; font: 400 .68rem/1.9 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.site-footer .mid { display: grid; justify-items: center; gap: 16px; }
.site-footer .mid .plaque .name { width: clamp(220px, 22vw, 320px); }
.site-footer nav ul { max-width: 560px; margin-inline: auto !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; list-style: none; margin: 0; padding: 0; }
.site-footer nav a { text-decoration: none; font: 400 .68rem/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.site-footer nav a:hover { color: var(--gold-hi); }
.site-footer .right { display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.socials { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.socials a { display: grid; place-items: center; width: 34px; height: 34px; color: var(--text-2); transition: color .2s, transform .2s; }
.socials a:hover { color: var(--gold-hi); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer .genres { margin: 0; font: 400 .64rem/1.7 var(--f-caps); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.legal { grid-column: 1 / -1; text-align: center; font-size: .8rem; color: var(--muted); margin: 0; }
.legal a { color: var(--muted); }

.spark { position: fixed; z-index: 50; pointer-events: none; color: var(--gold-hi); line-height: 1; translate: -50% -50%; animation: spark .9s ease-out forwards; text-shadow: 0 0 8px var(--gold); }
@keyframes spark { to { opacity: 0; transform: translateY(18px) scale(.3) rotate(90deg); } }

/* ---------- smaller screens ---------- */
@media (max-width: 1150px) {
  .cast { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .site-header { padding-inline: 50px; }
  .site-header ul { gap: 22px; }
  .site-header ul a { font-size: .64rem; letter-spacing: .16em; }
  .about { grid-template-columns: .95fr 1.1fr; }
  .quote { grid-column: 1 / -1; }
  .join { grid-template-columns: 1fr; padding-left: 36%; }
  .join-copy { justify-items: start; text-align: left; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .series { padding-right: calc(var(--fc) * 1.5); }
  .series .vwords, .series .chime { display: none; }
}
@media (max-width: 860px) {
  .site-header { grid-template-columns: 1fr; padding: 14px 40px 26px; justify-items: center; gap: 14px; }
  .site-header ul { padding: 0 !important; justify-content: center !important; gap: 22px; }
  .site-header ul.l li:first-child { display: none; }
  .site-header ul.r { order: 3; } .site-header ul.l { order: 2; }
  .plaque { order: 1; border: 0; box-shadow: none; padding: 8px 0 0; margin-block: 0; }
  .site-header { min-height: 0; gap: 10px; }
  .topline { justify-content: center; } .topline p { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { justify-items: center; text-align: center; padding: 34px 30px 0; }
  .hero .caps, .hero .btns { padding-left: 0; justify-content: center; }
  .hero .scene-m { position: relative; height: 78vw; }
  .hero .orbit { left: 30%; top: auto; bottom: 34vw; width: 46%; }
  .hero .city, .hero .water { left: -10%; right: -10%; }
  .hero .city { bottom: 13vw; } .hero .water { bottom: 2vw; height: 11vw; }
  .hero .pillar, .hero .vwords { display: none; }
  .hero .lily-r { width: 24%; }
  .hero .nebula { inset: 0 -30% 0 -30%; }
  .series { grid-template-columns: 1fr; padding: 60px 34px; }
  .series-copy { padding-left: 0; }
  .series .cres { display: none; }
  .book-stage { order: -1; width: min(60%, 260px); margin-bottom: 20px; }
  .about { grid-template-columns: 1fr; padding: 60px 34px; }
  .portrait { width: min(86%, 340px); }
  .join { grid-template-columns: 1fr; padding: 46vw 0 50px; justify-items: stretch; }
  .join-copy { justify-items: center; text-align: center; }
  .join .lake { left: 12px; right: 12px; top: 12px; bottom: auto; width: auto; height: 50vw; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
  .join-copy, .join-form { padding: 0 30px; }
  .perks { grid-template-columns: repeat(2, auto); justify-content: start; }
  .site-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .site-footer .left { flex-direction: column; }
  .site-footer .right { flex-direction: column; }
  .site-footer .genres { text-align: center; }
}
@media (min-width: 861px) { .hero .scene-m { display: contents; } }
@media (max-width: 560px) {
  .site-header ul { gap: 14px; }
  .site-header ul a { font-size: .6rem; letter-spacing: .14em; }
  .tiles { grid-template-columns: 1fr; }
  .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .series .float-rose { opacity: .45; }
  .signup { flex-direction: column; }
  .signup .btn { border-width: 1px 0 0; justify-content: center; }
  .hero .caps, .join-copy .caps, .about-copy .caps { letter-spacing: .16em; font-size: .68rem; }
  .caps br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .echo::before { opacity: .2; transform: translate(.05em, -.18em); }
  .letters i.ghost:nth-child(2) { opacity: .2; transform: translate(1.2%, -3%); }
}

/* =========================================================================
   The rest of the site: shared pieces for every page
   ========================================================================= */
.stack { display: grid; gap: 8px; }
.skip { position: absolute; left: 14px; top: -80px; z-index: 60; padding: 12px 18px; background: var(--ink); border: 1px solid var(--gold); color: var(--gold-hi);
  font: 400 .7rem/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 14px; }
.hp { display: none !important; }
.orn-div { width: min(70%, 300px); margin-inline: auto; filter: drop-shadow(0 0 6px rgba(227, 191, 134, .35)); }
.plaque.bare { border: 0; box-shadow: none; }
.topline .tools { display: flex; align-items: center; gap: 8px; }
.topline .tools > a { font: 400 .62rem/1 var(--f-caps); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); text-decoration: none; margin-right: 6px; }
.topline .tools > a:hover { color: var(--gold-hi); }
.search-btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--text-2); cursor: pointer; transition: color .2s, transform .2s; }
.search-btn svg { width: 15px; height: 15px; }
.search-btn:hover { color: var(--gold-hi); transform: translateY(-2px); }
html:not(.js) [data-search-open] { display: none; }
.tools-rule { width: 1px; height: 16px; background: var(--line-soft); }

/* floating roses: five spots, each with its own size, pace and sway */
.fr1 { left: 5%; top: 7%; --s: clamp(60px, 6vw, 90px); --d: 12s; --o: .75; }
.fr2 { left: 4%; bottom: 6%; --s: clamp(90px, 10vw, 150px); --d: 14s; --dl: -4s; --o: .8; }
.fr3 { right: 30%; bottom: 7%; --s: clamp(70px, 7.5vw, 110px); --d: 10s; --dl: -2s; --r0: 8deg; --r1: -4deg; }
.fr4 { right: 6%; top: 9%; --s: clamp(50px, 5vw, 76px); --d: 13s; --dl: -7s; --o: .7; --dx: -10px; }
.fr5 { left: 52%; bottom: 4%; --s: clamp(54px, 5vw, 80px); --d: 15s; --dl: -9s; --o: .6; }
.float-rose { width: var(--s, 120px); aspect-ratio: 560 / 696; background-image: url("/assets/img/ui/rose.webp?v=d412f84e2d"); z-index: 2; opacity: var(--o, .9);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(var(--crimson), .35)); animation: rose-float var(--d, 11s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
.float-rose.purple { background-image: url("/assets/img/ui/purple-roses.webp?v=4f8d08677f"); aspect-ratio: 560 / 707; }

/* the cast portraits */
.cast i { font: 400 .6rem/1 var(--f-caps); font-style: normal; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-top: 8px; }

/* tile scenes: the picture behind each tile */
.sc-lake { inset: 0; background-image: url("/assets/img/ui/moon-lake.webp?v=47d56b3209"); background-size: cover !important; background-position: 30% 50% !important; }
.sc-moons { inset: -10% 0; background-image: url("/assets/img/ui/moons-stars.webp?v=b6579eda33"); background-size: cover !important; opacity: .9; }
.sc-orbit { left: 30%; top: 0; width: 42%; aspect-ratio: 1; background-image: url("/assets/img/ui/moon-orbit.webp?v=d092c8ed12"); }
.sc-fullmoon { left: 32%; top: 10%; width: 36%; aspect-ratio: 233 / 253; background-image: url("/assets/img/ui/o-full-moon.webp?v=9bce78a3e8"); filter: drop-shadow(0 0 24px rgba(255, 214, 160, .5)); animation: breathe 7s ease-in-out infinite; }
.sc-rose { left: 30%; top: 4%; width: 40%; aspect-ratio: 560 / 696; background-image: url("/assets/img/ui/rose.webp?v=d412f84e2d"); animation: rose-float 12s ease-in-out infinite; }
.sc-proses { left: 8%; top: 16%; width: 34%; aspect-ratio: 560 / 707; background-image: url("/assets/img/ui/purple-roses.webp?v=4f8d08677f"); animation: rose-float 14s ease-in-out infinite; animation-delay: -5s; }
.tiles.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile.tall { aspect-ratio: .98; }
.tile p.d { margin: 6px 0 0; font: italic 400 1.02rem/1.35 var(--f-body); color: var(--text-2); text-shadow: 0 1px 8px #000; }
.badge { display: inline-block; margin-top: 12px; padding: .55em 1em; border: 1px solid var(--line); font: 400 .56rem/1 var(--f-caps); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); background: rgba(6, 3, 9, .7); }
a.tile .badge { color: var(--gold-hi); border-color: var(--gold); }

/* ---------- page banners ---------- */
.banner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(20px, 3vw, 50px); min-height: clamp(400px, 34vw, 520px);
  padding: calc(var(--fc) * .8) calc(var(--fc) * 1.2); --panel: radial-gradient(60% 90% at 72% 40%, rgba(var(--plum), .4), transparent 70%), rgba(6, 3, 9, .6); }
.banner .nebula { inset: -6% 0 10% 0; background: url("/assets/img/ui/nebula-frame.webp?v=c2ddc736c9") center / 100% 100% no-repeat; mix-blend-mode: screen; opacity: .7; z-index: -3;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.banner .smoke { width: 38%; aspect-ratio: 1122 / 1402; background-image: url("/assets/img/ui/purple-smoke.webp?v=c7faa56d5a"); mix-blend-mode: screen; opacity: .45; z-index: -2; left: -10%; top: -20%; animation: drift 30s ease-in-out infinite alternate; }
.banner-copy { position: relative; z-index: 9; display: grid; gap: 16px; justify-items: center; text-align: center; min-width: 0; }
.banner .caps { color: var(--text); }
.page-title { margin: 0; display: grid; justify-items: center; font: 400 clamp(2.2rem, 1rem + 3.8vw, 4.4rem)/1.08 var(--f-caps); letter-spacing: .07em; text-transform: uppercase; text-wrap: balance; }
.page-title .small { display: flex; align-items: center; gap: .8em; font-size: .26em; letter-spacing: .5em; color: var(--gold); margin-block: .25em; }
.page-title .small::before, .page-title .small::after { content: ""; width: clamp(40px, 6vw, 90px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.page-title .small::after { transform: scaleX(-1); }
.echo.metal { background: linear-gradient(180deg, #fff4dc 0%, #f1d29c 28%, #b8894e 52%, #e9c992 70%, #fff0cf 86%, #9b6d3c 100%); -webkit-background-clip: text; background-clip: text; }
.banner .intro { margin: 0; max-width: 46ch; font: italic 400 1.22rem/1.55 var(--f-body); color: var(--text-2); }
.banner .btns { justify-content: center; }
.banner canvas.petals { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 11; pointer-events: none; }
.banner-art { position: relative; z-index: 3; justify-self: center; width: min(100%, 420px); aspect-ratio: 1; }

/* moon and city */
.ba-city { width: min(100%, 600px); aspect-ratio: 1.3; }
.ba-city .orbit { left: 24%; top: 0; width: 52%; aspect-ratio: 1000 / 1014; background-image: url("/assets/img/ui/moon-orbit.webp?v=d092c8ed12"); filter: drop-shadow(0 0 30px rgba(255, 214, 160, .35)); animation: breathe 7s ease-in-out infinite; }
.ba-city .orbit::after { content: ""; position: absolute; inset: -14%; background: url("/assets/img/ui/dial.webp?v=4f62033b87") center / contain no-repeat; opacity: .18; animation: spin 180s linear infinite; }
.ba-city .city { left: 0; right: 0; bottom: 20%; aspect-ratio: 2172 / 498; background-image: url("/assets/img/ui/skyline.webp?v=38329f5f5b"); background-size: 100% auto; background-position: center bottom; filter: drop-shadow(0 -4px 24px rgba(var(--magenta), .3)); }
.ba-city .water { left: 0; right: 0; bottom: 4%; height: 16%; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000, transparent 95%); mask-image: linear-gradient(180deg, #000, transparent 95%); }
.ba-city .water::before { content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 2172 / 498; background: url("/assets/img/ui/skyline.webp?v=38329f5f5b") center bottom / 100% auto no-repeat; transform: scaleY(-1); opacity: .5; filter: blur(1px) saturate(1.3); animation: waver 5s ease-in-out infinite; }
.ba-city .water::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(6, 3, 9, .35) 5px 7px), linear-gradient(90deg, transparent 20%, rgba(255, 214, 160, .12) 60%, transparent 80%); animation: lap 6s linear infinite; }
.ba-city .lily { right: -8%; bottom: -8%; width: 30%; aspect-ratio: 760 / 949; background-image: url("/assets/img/ui/lilies.webp?v=7b401edf99"); transform: scaleX(-1); filter: drop-shadow(0 0 18px rgba(var(--magenta), .4)); animation: lsway 10s ease-in-out infinite; }

/* a picture set inside the round moon frame */
.ba-ring .halo { inset: -6%; background-image: url("/assets/img/ui/dial.webp?v=4f62033b87"); opacity: .2; animation: spin 150s linear infinite reverse; }
.ba-ring .disc { position: absolute; left: 17.75%; top: 14.5%; width: 64.5%; height: 64.5%; border-radius: 50%; overflow: hidden; background: #12081a center / cover no-repeat; box-shadow: 0 0 60px rgba(var(--magenta), .45); }
.ba-ring .ring { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgba(227, 191, 134, .35)); }
.ba-ring .lily { left: -14%; bottom: -8%; width: 42%; aspect-ratio: 760 / 949; background-image: url("/assets/img/ui/lilies.webp?v=7b401edf99"); transform: scaleX(-1); filter: drop-shadow(0 0 16px rgba(var(--magenta), .4)); animation: lsway 10s ease-in-out infinite; }
.ba-ring .moon { right: 2%; top: 4%; width: 18%; aspect-ratio: 149 / 171; background-image: url("/assets/img/ui/o-cres-marble.webp?v=922489b881"); filter: drop-shadow(0 0 16px rgba(255, 214, 160, .55)); animation: bob 6s ease-in-out infinite; }
.ba-ring .d-files { background-image: url("/assets/img/ui/case-folders.svg?v=a237bf0cfa"); background-size: 82%; background-color: #1a0d22; }
.ba-ring .d-moons { background-image: url("/assets/img/ui/moons-stars.webp?v=b6579eda33"); background-position: 50% 40%; }
.ba-ring .d-lake { background-image: url("/assets/img/ui/moon-lake.webp?v=47d56b3209"); background-position: 30% 50%; }
.ba-ring .d-nebula { background-image: url("/assets/img/ui/nebula-frame.webp?v=c2ddc736c9"); background-size: 260%; background-position: 50% 30%; }
.ba-ring .d-nebula::after { content: ""; position: absolute; left: 32%; top: 26%; width: 36%; aspect-ratio: 233 / 253; background: url("/assets/img/ui/o-full-moon.webp?v=9bce78a3e8") center / contain no-repeat; filter: drop-shadow(0 0 24px rgba(255, 214, 160, .6)); animation: breathe 7s ease-in-out infinite; }

/* the hardcover */
.ba-book { aspect-ratio: auto; width: min(100%, 320px); }
.ba-book .book-stage { width: 100%; }

/* the quote ring (About banner) */
.ba-quote { aspect-ratio: auto; display: grid; place-items: center; }
.ba-quote .quote { width: min(100%, 360px); font-size: 1.3rem; }

/* ---------- bands and section heads ---------- */
.band { padding: calc(var(--fc) * .9) calc(var(--fc) * 1.15); --panel: rgba(6, 3, 9, .74); }
.band.glow-l { --panel: radial-gradient(40% 80% at 16% 50%, rgba(var(--plum), .45), transparent 70%), rgba(6, 3, 9, .74); }
.band.glow-r { --panel: radial-gradient(40% 80% at 84% 50%, rgba(var(--plum), .45), transparent 70%), rgba(6, 3, 9, .74); }
.band.glow-c { --panel: radial-gradient(50% 70% at 50% 40%, rgba(var(--plum), .4), transparent 70%), rgba(6, 3, 9, .74); }
.sec-head { position: relative; z-index: 3; display: grid; justify-items: center; text-align: center; gap: 12px; margin-bottom: clamp(26px, 3vw, 42px); }
.sec-head h2 { font-size: var(--step-2); padding-bottom: .05em; font-feature-settings: normal; }
.sec-head .caps { color: var(--text); }
.lede { margin: 0; max-width: 58ch; font: italic 400 1.2rem/1.6 var(--f-body); color: var(--text-2); }
.note { position: relative; z-index: 3; margin: clamp(24px, 3vw, 36px) auto 0; text-align: center; font: italic 400 1.08rem/1.5 var(--f-body); color: var(--text-2); }
.note a, .prose a { color: var(--gold-hi); text-decoration-color: var(--line); text-underline-offset: 3px; }
.note a:hover, .prose a:hover { color: #fff; }
.prose { position: relative; z-index: 3; }
.prose p { margin: 0 0 1em; color: var(--text-2); max-width: 64ch; }
.prose.narrow { max-width: 720px; margin-inline: auto; }
.prose h3 { margin: 1.6em 0 .5em; font: 400 .86rem/1.3 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
.prose .fine { font-style: italic; color: var(--muted); }
.band .float-rose { z-index: 1; }

/* ---------- books: First Echoes ---------- */
.fe { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 70px); align-items: center; }
.fe-photo { --fc: clamp(44px, 4vw, 64px); aspect-ratio: 900 / 750; --panel: #0b060c; }
.fe-photo img { position: absolute; inset: calc(var(--fc) * .2); z-index: -4; width: calc(100% - var(--fc) * .4); height: calc(100% - var(--fc) * .4); object-fit: cover; object-position: 50% 30%; }
.fe-info { position: relative; z-index: 3; display: grid; gap: 16px; justify-items: start; min-width: 0; }
.fe-info .caps { color: var(--gold); }
.fe-title { margin: 0; font: 400 clamp(2.2rem, 1.2rem + 3vw, 3.8rem)/1 var(--f-caps); letter-spacing: .06em; text-transform: uppercase; }
.blurb p { margin: 0 0 .8em; color: var(--text-2); max-width: 58ch; }
.blurb p:first-child { font: italic 400 1.26rem/1.5 var(--f-body); color: var(--gold-hi); }
.blurb p:last-child { margin: 0; font: italic 500 1.3rem/1.35 var(--f-italic); color: var(--gold); }
.meta { margin: 4px 0 6px; display: grid; gap: 8px; width: min(100%, 520px); }
.meta div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 14px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.meta dt { font: 400 .62rem/1.4 var(--f-caps); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.meta dd { margin: 0; color: var(--text); }
.meta a { color: var(--gold-hi); text-decoration-color: var(--line); text-underline-offset: 3px; }

/* the series in order */
.volumes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 30px); position: relative; z-index: 3; }
.vol { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; }
.vol .arch { position: relative; width: min(100%, 200px); aspect-ratio: 3 / 4.2; margin-bottom: 10px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line);
  border-radius: 999px 999px 6px 6px; background: radial-gradient(circle at 50% 38%, rgba(var(--plum), .6), #0b060c 72%);
  box-shadow: 0 0 0 5px rgba(6, 3, 9, .85), 0 0 0 6px var(--line-soft), 0 14px 34px -10px rgba(var(--magenta), .5); transition: transform .4s, box-shadow .4s; }
.vol .arch::before { content: ""; position: absolute; top: 9%; left: 50%; translate: -50% 0; width: 20%; aspect-ratio: 149 / 171; background: url("/assets/img/ui/o-cres-marble.webp?v=922489b881") center / contain no-repeat; opacity: .8; }
.vol .arch img { width: 76%; height: auto; margin-top: 14%; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .8)); }
.vol .rn { font: 400 clamp(1.8rem, 1rem + 2vw, 3rem)/1 var(--f-caps); }
.vol.first .arch { border-color: var(--gold); }
.vol:hover .arch { transform: translateY(-5px); box-shadow: 0 0 0 5px rgba(6, 3, 9, .85), 0 0 0 6px var(--gold), 0 18px 40px -10px rgba(var(--magenta), .7); }
.vol .num { margin: 0; font: 400 .6rem/1 var(--f-caps); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.vol h3 { margin: 0; font: 400 clamp(.82rem, .7rem + .3vw, 1rem)/1.3 var(--f-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); }
.vol .status { font: italic 400 .98rem/1.3 var(--f-body); color: var(--muted); }
.vol a.status { color: var(--gold-hi); text-decoration-color: var(--line); text-underline-offset: 3px; }

/* ---------- character files index ---------- */
.files { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); position: relative; z-index: 3; }
.file-card a { display: grid; justify-items: center; gap: 8px; text-align: center; text-decoration: none; }
.file-card .arch { position: relative; width: 100%; margin-bottom: 12px; }
.file-card .arch::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -16px; width: 30px; aspect-ratio: 149 / 171; translate: -50% 0; background: url("/assets/img/ui/o-cres-marble.webp?v=922489b881") center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(255, 214, 160, .7)); }
.file-card .ph { display: block; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--gold); border-radius: 999px 999px 8px 8px;
  box-shadow: 0 0 0 5px rgba(6, 3, 9, .85), 0 0 0 6px var(--line-soft), 0 16px 40px -12px rgba(var(--magenta), .6); transition: box-shadow .4s, transform .4s; }
.file-card .ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.9); transition: transform 1.2s ease, filter .4s; }
.file-card a:hover .ph { transform: translateY(-6px); box-shadow: 0 0 0 5px rgba(6, 3, 9, .85), 0 0 0 6px var(--gold), 0 20px 44px -10px rgba(var(--magenta), .8); }
.file-card a:hover .ph img { transform: scale(1.05); filter: none; }
.file-card i { font: 400 .6rem/1 var(--f-caps); font-style: normal; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.file-card b { font: 400 .86rem/1.3 var(--f-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); }
.file-card small { font: italic 400 1rem/1.35 var(--f-body); color: var(--text-2); max-width: 24ch; }
.file-card .open { display: inline-flex; align-items: center; gap: .6em; margin-top: 4px; font: 400 .6rem/1 var(--f-caps); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.file-card .open svg { width: 1.4em; height: 1.4em; transition: transform .25s; }
.file-card a:hover .open svg { transform: translateX(4px); }

/* ---------- about ---------- */
.about-page { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.about-page .about-copy p.body + p.body { margin-top: -4px; }
.themes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 0; position: relative; z-index: 3; }
.themes li { display: flex; align-items: center; font: 400 clamp(.78rem, .7rem + .3vw, .96rem)/1.3 var(--f-caps); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.themes li + li::before { content: ""; width: 24px; aspect-ratio: 143 / 159; margin: 0 20px; background: url("/assets/img/ui/o-cres-gold.webp?v=69628258b3") center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(255, 214, 160, .6)); }
.bio { position: relative; z-index: 3; max-width: 660px; margin: clamp(28px, 3vw, 40px) auto 0; padding: 26px 30px; text-align: center; border: 1px solid var(--line); background: rgba(6, 3, 9, .65);
  box-shadow: inset 0 0 0 4px rgba(6, 3, 9, .8), inset 0 0 0 5px var(--line-soft); }
.bio h3 { margin: 0 0 10px; font: 400 .64rem/1.4 var(--f-caps); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.bio p { margin: 0; font: italic 400 1.12rem/1.55 var(--f-body); color: var(--text-2); }
.bio .btns { justify-content: center; margin-top: 18px; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.contact-aside { position: relative; z-index: 3; display: grid; gap: 14px; justify-items: start; min-width: 0; }
.contact-aside h2 { font-size: var(--step-2); padding-bottom: .05em; }
.contact-aside p { margin: 0; color: var(--text-2); max-width: 44ch; }
.contact-aside .socials a { border: 1px solid var(--line-soft); border-radius: 50%; width: 42px; height: 42px; }
.contact-aside .lake-pic { width: 100%; aspect-ratio: 1400 / 605; margin-top: 10px; background: url("/assets/img/ui/moon-lake.webp?v=47d56b3209") 30% 50% / cover no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent); }
.contact-form { --fc: clamp(44px, 4vw, 64px); position: relative; z-index: 3; display: grid; gap: 18px; padding: calc(var(--fc) * .8) calc(var(--fc) * .85); --panel: rgba(12, 6, 14, .92); }
.field { display: grid; gap: 6px; min-width: 0; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field label { font: 400 .62rem/1.4 var(--f-caps); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.field input, .field select, .field textarea { width: 100%; font: 400 1.04rem/1.4 var(--f-body); color: var(--text); background: rgba(6, 3, 9, .85); border: 1px solid var(--line-soft); border-radius: 0; padding: .8em 1em; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 9em; }
.field select option { background: #12081a; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227, 191, 134, .2); }
.contact-form .btn { justify-self: start; }
.form-note { margin: 0; min-height: 1.3em; color: var(--gold-hi); font-style: italic; }

/* ---------- search ---------- */
.search-dialog { width: min(640px, calc(100vw - 28px)); max-height: min(78vh, 640px); margin: 9vh auto auto; padding: 0; color: var(--text); border: 1px solid var(--gold);
  background: radial-gradient(80% 60% at 50% 0, rgba(var(--plum), .35), transparent 70%), #0b060d; box-shadow: inset 0 0 0 4px rgba(6, 3, 9, .9), inset 0 0 0 5px var(--line-soft), 0 30px 90px rgba(0, 0, 0, .7); }
.search-dialog::backdrop { background: rgba(4, 2, 6, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.search-form { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 22px; border-bottom: 1px solid var(--line-soft); }
.search-glass { width: 17px; height: 17px; flex: none; color: var(--gold); }
.search-form input { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: none; font: 400 1.2rem var(--f-body); color: var(--text); }
.search-form input::placeholder { color: var(--muted); }
.search-form input:focus { outline: none; }
.search-form input::-webkit-search-cancel-button { display: none; }
.search-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--text-2); cursor: pointer; }
.search-close svg { width: 16px; height: 16px; }
.search-close:hover { color: var(--gold-hi); }
.search-status { margin: 0; padding: 12px 22px 0; font: 400 .62rem/1.4 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.search-status:empty { display: none; }
.search-results { list-style: none; margin: 0; padding: 6px 10px 14px; }
.search-results a { display: block; padding: 12px; text-decoration: none; border-bottom: 1px solid rgba(227, 191, 134, .12); transition: background-color .2s; }
.search-results li:last-child a { border-bottom: 0; }
.search-results a:hover, .search-results a:focus-visible { background: rgba(227, 191, 134, .08); outline: none; }
.search-results .r-title { display: block; font: 400 .84rem/1.4 var(--f-caps); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); }
.search-results .r-text { display: block; margin-top: 4px; font-size: .98rem; line-height: 1.45; color: var(--text-2); }
.search-results mark { background: rgba(227, 191, 134, .25); color: #fff; padding: 0 1px; }

/* ---------- smaller screens, for the pieces above ---------- */
@media (max-width: 1150px) {
  .volumes { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .files { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-page { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
@media (max-width: 860px) {
  .topline { flex-wrap: wrap; }
  .banner { grid-template-columns: 1fr; padding: 56px 30px 50px; min-height: 0; }
  .banner-art { order: -1; width: min(78%, 340px); }
  .ba-city { width: min(100%, 460px); }
  .ba-book { width: min(56%, 240px); }
  .band { padding: 56px 30px; }
  .fe, .contact { grid-template-columns: 1fr; }
  .fe-info { justify-items: center; text-align: center; }
  .meta div { text-align: left; }
  .tiles.cols-3 { grid-template-columns: 1fr; }
  .tile.tall { aspect-ratio: 1.3; }
  .files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-page { grid-template-columns: 1fr; }
  .contact-aside { justify-items: center; text-align: center; }
}
@media (max-width: 560px) {
  .volumes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row { grid-template-columns: 1fr; }
  .themes { flex-direction: column; }
  .themes li + li::before { display: none; }
  .banner .caps { letter-spacing: .16em; font-size: .68rem; }
  .page-title .small { letter-spacing: .3em; }
  .banner { padding: 50px 22px 44px; }
  .band { padding: 50px 22px; }
}
.center-caps { position: relative; z-index: 3; text-align: center; color: var(--text); margin: -14px 0 26px; }
@media (max-width: 860px) {
  .site-header .plaque { order: 1; }
  .site-header .nav-l { order: 2; }
  .site-header .nav-r { order: 3; margin-top: -4px; }
}

/* keep every band inside the page width, and the sign-up box inside its frame */
.page { grid-template-columns: minmax(0, 1fr); }
.site-header { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.join-form { grid-template-columns: minmax(0, 1fr); }
.signup input { width: 100%; }
@media (max-width: 1320px) and (min-width: 1151px) {
  .join { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding-left: 27%; }
  .signup .btn { padding-inline: 1.2em; letter-spacing: .18em; }
}
@media (max-width: 1000px) {
  .site-header { grid-template-columns: 1fr; padding: 14px 40px 26px; justify-items: center; gap: 10px; min-height: 0; }
  .site-header ul { padding: 0 !important; justify-content: center !important; gap: 22px; }
  .site-header ul.l li:first-child { display: none; }
  .site-header .plaque { order: 1; border: 0; box-shadow: none; padding: 8px 0 0; margin-block: 0; }
  .site-header .nav-l { order: 2; }
  .site-header .nav-r { order: 3; margin-top: -4px; }
}
@media (max-width: 1150px) and (min-width: 861px) {
  .hero .vwords, .hero .pillar { display: none; }
}
@media (max-width: 1320px) and (min-width: 1151px) {
  .join-copy .caps br { display: none; }
}

/* ---------- cover placeholder: blank space + "coming soon" until the cover reveal ---------- */
.fe-photo .fe-bg { position: absolute; inset: calc(var(--fc) * .2); z-index: -4; background: url("/assets/img/ui/moon-lake.webp?v=47d56b3209") 30% 50% / cover no-repeat; filter: brightness(.7) saturate(1.1); }
.portrait .mark { position: absolute; inset: -3%; background: url("/assets/img/ui/author-mark.webp?v=ebaac5739e") center / cover no-repeat; animation: breathe 9s ease-in-out infinite; }
/* about page: the long story keeps the monogram in view, plus the little "Where it starts" heading */
.about-copy .about-sub { margin: 14px 0 0; font: 400 .86rem/1.3 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hi); }
.about-copy p.hello { font-style: italic; color: var(--gold-hi); }
.bio p + p { margin-top: .7em; }
@media (min-width: 1001px) { .about-page { align-items: start; } .about-page .portrait { position: sticky; top: 40px; } }
/* Cover placeholder: an empty space with a quiet "coming soon" until the reveal */
.soon { aspect-ratio: 2 / 3; margin: 0; display: grid; align-content: center; justify-items: center; gap: .5em; text-align: center; }
.soon-k { font: 400 clamp(11px, .85vw, 13px)/1.4 var(--f-caps); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 0 6px #000, 0 0 14px rgba(0, 0, 0, .9); }
.soon-t { font: italic 400 clamp(30px, 3vw, 42px)/1.1 var(--f-body); color: var(--gold-hi); text-shadow: 0 0 10px rgba(0, 0, 0, .9), 0 0 24px rgba(227, 191, 134, .45); }
.fe-photo .fe-veil { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; }
.fe-photo .soon { aspect-ratio: auto; padding: 1.4em 2.4em; background: radial-gradient(closest-side, rgba(8, 4, 10, .72), transparent); }

/* About heading: plain H (the swash H read as a crossed-out letter) */
.about-copy h2.display { font-feature-settings: normal; }
/* Athena's everyday photos in the round author frame */
.portrait .me { position: absolute; inset: 0; background: center / cover no-repeat; }
.portrait .me-1 { background-image: url("/assets/img/ui/author-photo-1.webp?v=8690f4e225"); background-position: 50% 0; }
.portrait .me-2 { background-image: url("/assets/img/ui/author-photo-2.webp?v=c32f670b87"); background-position: 50% 40%; }

/* ---------- no faces for now (Athena, 2026-11-03): symbol medallions and folders ---------- */
.cast .pic.sym { display: grid; place-items: center; color: var(--gold-hi); background: radial-gradient(circle at 50% 40%, #3b1a46, #12081a 72%); }
.cast .pic.sym svg { width: 44%; height: 44%; filter: drop-shadow(0 0 8px rgba(255, 214, 160, .45)); transition: transform .4s ease; }
.cast a:hover .pic.sym svg { transform: scale(1.08); }
.files .arch.folder { position: relative; display: grid; place-items: center; color: var(--gold-hi); border-radius: 4px !important;
  background: radial-gradient(80% 60% at 50% 40%, rgba(122, 47, 134, .45), transparent 70%), linear-gradient(160deg, #2d1437, #160a1c 75%);
  box-shadow: inset 0 0 0 6px #160a1c, inset 0 0 0 7px rgba(227, 191, 134, .4); }
.files .arch.folder svg { width: 42%; height: auto; filter: drop-shadow(0 0 10px rgba(255, 214, 160, .45)); transition: transform .4s ease; }
.files a:hover .arch.folder svg { transform: scale(1.07) rotate(-3deg); }
.files .f-tab { position: absolute; left: 14%; top: -1px; padding: 6px 14px 5px; font: 400 .58rem/1 var(--f-caps); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-hi);
  background: #3a1b45; border: 1px solid rgba(227, 191, 134, .55); border-top: 0; border-radius: 0 0 5px 5px; }
.files .f-lines { position: absolute; left: 18%; right: 18%; bottom: 14%; height: 20px; background: repeating-linear-gradient(180deg, rgba(227, 191, 134, .3) 0 1px, transparent 1px 7px); }
.sc-files { inset: 4% 8%; background-image: url("/assets/img/ui/case-folders.svg?v=a237bf0cfa"); }

/* ==========================================================================================
   Refresh (2026-11-03): between Athena's Gothic Celestial mockup and v8.
   Three frame weights: the full moon border on the hero and page banners only, thin gold rules with
   corner crescents on every other band, the crescent-and-lily divider between them.
   ========================================================================================== */
:root { --i-cres-tl: url("/assets/img/ui/cres-tl.webp?v=2af595fe76"); --i-cres-tr: url("/assets/img/ui/cres-tr.webp?v=e18c30de10");
  --i-cres-bl: url("/assets/img/ui/cres-bl.webp?v=f82606f557"); --i-cres-br: url("/assets/img/ui/cres-br.webp?v=9bc6f14400"); }

/* light bands: atmosphere runs edge to edge, a double gold rule top and bottom, a crescent in each corner */
.site-header, .series, .worlds, .about, .join, .site-footer, .band, .cf-band { --cs: clamp(38px, 3.4vw, 54px); }
.site-header.framed::before, .series.framed::before, .worlds.framed::before, .about.framed::before, .join.framed::before,
.site-footer.framed::before, .band.framed::before, .cf-band.framed::before { inset: 0; }
.site-header.framed::after, .series.framed::after, .worlds.framed::after, .about.framed::after, .join.framed::after,
.site-footer.framed::after, .band.framed::after, .cf-band.framed::after {
  background:
    var(--i-cres-tl) left 6px top 6px / var(--cs) no-repeat,
    var(--i-cres-tr) right 6px top 6px / var(--cs) no-repeat,
    var(--i-cres-bl) left 6px bottom 6px / var(--cs) no-repeat,
    var(--i-cres-br) right 6px bottom 6px / var(--cs) no-repeat,
    linear-gradient(90deg, transparent, var(--gold) 7%, var(--gold-hi) 50%, var(--gold) 93%, transparent) center top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(227, 191, 134, .3) 9%, rgba(227, 191, 134, .3) 91%, transparent) center 5px / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--gold) 7%, var(--gold-hi) 50%, var(--gold) 93%, transparent) center bottom / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(227, 191, 134, .3) 9%, rgba(227, 191, 134, .3) 91%, transparent) center calc(100% - 5px) / 100% 1px no-repeat;
  filter: drop-shadow(0 0 6px rgba(227, 191, 134, .25)); }

/* header: one slim bar, the name in its cartouche, a single rule under it */
.site-header { min-height: 96px; padding-inline: clamp(40px, 5vw, 70px); --panel: linear-gradient(180deg, rgba(20, 8, 26, .9), rgba(6, 3, 9, .82)); }
.site-header.framed::after { background:
    linear-gradient(90deg, transparent, var(--gold) 7%, var(--gold-hi) 50%, var(--gold) 93%, transparent) center bottom / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(227, 191, 134, .3) 9%, rgba(227, 191, 134, .3) 91%, transparent) center calc(100% - 5px) / 100% 1px no-repeat,
    var(--i-cres-tl) left 4px center / auto 70% no-repeat, var(--i-cres-tr) right 4px center / auto 70% no-repeat; }
.site-header .plaque { margin-block: 0; }

/* ---------- hero: the moon and city at the mockup's scale, the water running the full width ---------- */
@media (min-width: 1200px) {
.hero { min-height: clamp(580px, 50vw, 760px); grid-template-columns: 44% 1fr; }
.hero .orbit { left: 43%; top: -3%; width: 40%; }
.hero .orbit i { position: absolute; width: var(--z, 22px); aspect-ratio: 1; translate: -50% -50%; background: url("/assets/img/ui/o-star-burst.webp?v=a8cf65b931") center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 230, 190, .9)); animation: twinkle var(--t, 3.4s) ease-in-out infinite var(--dl, 0s); }
.hero .orbit i:nth-child(1) { left: 92%; top: 30%; --z: 30px; }
.hero .orbit i:nth-child(2) { left: 14%; top: 22%; --z: 20px; --dl: -1.2s; }
.hero .orbit i:nth-child(3) { left: 50%; top: 3%; --z: 26px; --dl: -2.1s; --t: 4.2s; }
.hero .orbit i:nth-child(4) { left: 6%; top: 60%; --z: 16px; --dl: -.6s; }
.hero .orbit i:nth-child(5) { left: 86%; top: 76%; --z: 18px; --dl: -2.8s; --t: 3s; }
.hero .city { left: 30%; right: 8%; bottom: 15%; }
.hero .water { left: calc(var(--fc) * .2); right: calc(var(--fc) * .2); bottom: calc(15% - 13%); height: 13%; }
.hero .water::before { left: 31%; right: 8.5%; width: auto; }
}
.hero .chain-l, .hero .chain-r { top: calc(var(--fc) * .55); width: clamp(54px, 5.4vw, 84px); aspect-ratio: 400 / 608; z-index: 11; transform-origin: top center; animation: sway 8s ease-in-out infinite; }
.hero .chain-l { left: calc(var(--fc) * .45); background-image: url("/assets/img/ui/pendant-l.webp?v=4f0a4394bc"); }
.hero .chain-r { right: calc(var(--fc) * .45 + 9%); background-image: url("/assets/img/ui/pendant.webp?v=401788ec6d"); animation-delay: -3s; }

/* ---------- featured series: the mockup's nebula, title left and book right, petals kept off the words ---------- */
.series { --panel: linear-gradient(90deg, rgba(6, 3, 9, .86) 0%, rgba(6, 3, 9, .55) 48%, rgba(6, 3, 9, .2) 100%), var(--i-nebula) 70% 50% / cover no-repeat, #0b0510; }
.series-copy { z-index: 6; }
.series-copy p.desc, .series-copy .caps { text-shadow: 0 0 14px #06030a, 0 0 4px #06030a; }
#petals2 { z-index: 4; -webkit-mask-image: linear-gradient(90deg, #000 0 6%, transparent 14% 52%, #000 64%); mask-image: linear-gradient(90deg, #000 0 6%, transparent 14% 52%, #000 64%); }
@media (min-width: 1200px) {
.series .fr1 { left: 2.5%; top: 6%; }
.series .fr2 { left: 1.5%; bottom: 4%; }
.series .fr3 { left: auto; right: 34%; bottom: 5%; }
.series .fr4 { right: 4%; top: 8%; }
.series .fr5 { left: auto; right: 30%; top: 5%; bottom: auto; }
}

/* ---------- step inside: each scene fills its card, the title sits low, lighter frames ---------- */
.worlds { --panel: radial-gradient(60% 80% at 50% 0%, rgba(var(--plum), .35), transparent 70%), rgba(6, 3, 9, .72); }
.tile.framed::after { background:
    var(--i-cres-tl) left 4px top 4px / 28px no-repeat, var(--i-cres-tr) right 4px top 4px / 28px no-repeat,
    var(--i-cres-bl) left 4px bottom 4px / 28px no-repeat, var(--i-cres-br) right 4px bottom 4px / 28px no-repeat;
  filter: none; }
.tile { aspect-ratio: 1.15; padding: 0 10% 8%; border: 1px solid rgba(227, 191, 134, .7); box-shadow: inset 0 0 0 4px rgba(6, 3, 9, .9), inset 0 0 0 5px rgba(227, 191, 134, .35); }
.tile.framed::before { inset: 0; }
.tile .scene { inset: 0; background: var(--i-nebula) 50% 40% / cover no-repeat; }
.tile .scene::after { background: linear-gradient(180deg, transparent 38%, rgba(6, 3, 9, .5) 64%, rgba(6, 3, 9, .96)); }
.tile .sc-rose { left: 22%; top: 2%; width: 56%; }
.tile .sc-files { inset: 2% 14% 34%; background-size: contain; }
.tile .sc-orbit { left: 18%; top: -6%; width: 64%; }
.tile .s-dial { inset: -14% -4%; opacity: .75; }
.tile h3 { font-size: clamp(1.05rem, .8rem + 1vw, 1.6rem); }

/* ---------- about: the heart of the house, so the portrait gets the room ---------- */
@media (min-width: 1200px) { .about { grid-template-columns: 1.15fr 1.25fr .62fr; padding-block: calc(var(--fc) * 1); } }
.about { --panel: radial-gradient(46% 90% at 22% 55%, rgba(var(--plum), .6), transparent 72%), rgba(6, 3, 9, .74); }
.about .portrait { width: min(100%, 540px); }
.about .portrait .lilies { width: 50%; left: -14%; bottom: -12%; }
.about .portrait::after { content: ""; position: absolute; right: -2%; top: 4%; width: 13%; aspect-ratio: 400 / 608; z-index: 4; background: url("/assets/img/ui/pendant.webp?v=401788ec6d") center / contain no-repeat; transform-origin: top center; animation: sway 8s ease-in-out infinite; }

/* ---------- newsletter: the lake runs further across ---------- */
.join .lake { left: 0; top: 0; bottom: 0; width: 62%; }

/* ---------- footer: end on a moonlit landscape, not an empty box ---------- */
.site-footer { position: relative; padding-bottom: clamp(120px, 12vw, 190px); --panel: rgba(6, 3, 9, .86); }
.site-footer .legal { position: relative; z-index: 2; }
.site-footer::before { background:
    linear-gradient(180deg, #06030a 0%, #06030a 52%, rgba(6, 3, 9, .55) 70%, rgba(6, 3, 9, .2) 84%, rgba(6, 3, 9, .6) 100%),
    var(--i-lake) 50% 100% / 100% auto no-repeat, #06030a; }

@media (max-width: 759.98px) {
  .hero .chain-l, .hero .chain-r { display: none; }
  .about .portrait::after { display: none; }
  .tile { aspect-ratio: 1.3; }
  .site-header.framed::after { background:
    linear-gradient(90deg, transparent, var(--gold) 7%, var(--gold-hi) 50%, var(--gold) 93%, transparent) center bottom / 100% 1px no-repeat,
    var(--i-cres-tl) left 4px top 8px / 30px no-repeat, var(--i-cres-tr) right 4px top 8px / 30px no-repeat; }
}
.files .arch.folder { aspect-ratio: 3 / 4; transition: transform .4s ease, box-shadow .4s ease; }
.files a:hover .arch.folder { transform: translateY(-6px); box-shadow: inset 0 0 0 6px #160a1c, inset 0 0 0 7px rgba(227, 191, 134, .4), 0 20px 44px -10px rgba(var(--magenta), .8); }
.file-card .arch.folder::before { display: none; }
@media (max-width: 1199.98px) {
  .site-header.framed::after { background:
    linear-gradient(90deg, transparent, var(--gold) 7%, var(--gold-hi) 50%, var(--gold) 93%, transparent) center bottom / 100% 1px no-repeat,
    var(--i-cres-tl) left 4px top 8px / 34px no-repeat, var(--i-cres-tr) right 4px top 8px / 34px no-repeat; }
}
@media (min-width: 760px) and (max-width: 1199.98px) {
  .about .quote { width: 300px; padding: 51px 62px 70px; }
}

/* ---------- about, take two (Athena 2026-11-04: "look more like the mockup"): the photo melts into the night,
   a thin gold orbit circles it, sparkles and lilies around it, and the quote floats free on the nebula ---------- */
.about:not(.about-page) { --panel: radial-gradient(40% 90% at 18% 50%, rgba(var(--plum), .55), transparent 72%),
    linear-gradient(90deg, rgba(6, 3, 9, .92) 0 58%, rgba(6, 3, 9, .45) 74%, rgba(6, 3, 9, 0) 88%),
    url("/assets/img/ui/purple-smoke.webp?v=c7faa56d5a") right -4% center / auto 125% no-repeat, rgba(6, 3, 9, .8); }
.about .portrait { width: min(100%, 560px); aspect-ratio: .94; }
.about .portrait .ring, .about .portrait::after { display: none; }
.about .portrait .clip { inset: 0; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 50%, rgba(0, 0, 0, .5) 76%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 50%, rgba(0, 0, 0, .5) 76%, transparent 100%); }
.about .portrait .me-2 { background-position: 50% 24%; background-size: cover; filter: saturate(1.08) contrast(1.06) brightness(.94); }
.about .portrait .clip::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply;
  background: radial-gradient(ellipse 50% 55% at 46% 46%, transparent 40%, rgba(70, 24, 84, .75) 100%), linear-gradient(200deg, rgba(90, 30, 110, .55), transparent 45%); }
/* the orbit: two thin gold circles, broken where her face is so they read as passing behind her */
.about .portrait::before { left: 9%; top: 3%; width: 82%; height: auto; aspect-ratio: 1; z-index: 3; background: none; border-radius: 50%;
  border: 1.5px solid rgba(240, 206, 150, .85); box-shadow: 0 0 14px rgba(240, 206, 150, .45), inset 0 0 14px rgba(240, 206, 150, .25);
  -webkit-mask-image: conic-gradient(from -40deg, transparent 0 62deg, #000 80deg 330deg, transparent 350deg);
  mask-image: conic-gradient(from -40deg, transparent 0 62deg, #000 80deg 330deg, transparent 350deg); }
.about .portrait .halo { inset: 0; opacity: 1; animation: none; z-index: 4; background:
    url("/assets/img/ui/o-star-burst.webp?v=a8cf65b931") 86% 7% / 34px no-repeat, url("/assets/img/ui/o-star-burst.webp?v=a8cf65b931") 8% 30% / 22px no-repeat,
    url("/assets/img/ui/o-star-burst.webp?v=a8cf65b931") 93% 58% / 18px no-repeat, url("/assets/img/ui/o-star-burst.webp?v=a8cf65b931") 30% 94% / 16px no-repeat,
    url("/assets/img/ui/o-cres-gold.webp?v=69628258b3") 50% 0 / 20px no-repeat,
    radial-gradient(circle at 80% 20%, rgba(255, 214, 160, .9) 0 1.5px, transparent 2.5px), radial-gradient(circle at 15% 60%, rgba(255, 214, 160, .8) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 88%, rgba(255, 214, 160, .8) 0 1.5px, transparent 2.5px), radial-gradient(circle at 96% 38%, rgba(255, 214, 160, .7) 0 1px, transparent 2px); }
.about .portrait .halo::before { content: ""; position: absolute; left: 13%; top: 8%; width: 74%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(240, 206, 150, .35); -webkit-mask-image: conic-gradient(from 150deg, #000 0 200deg, transparent 230deg);
  mask-image: conic-gradient(from 150deg, #000 0 200deg, transparent 230deg); animation: spin 120s linear infinite; }
.about .portrait .lilies { left: -6%; bottom: -4%; width: 36%; z-index: 5; }
/* heading gets the crescent-and-star rule above it */
.about:not(.about-page) .about-copy::before { content: ""; justify-self: stretch; height: 26px; margin-bottom: -4px; opacity: .9;
  background: url("/assets/img/ui/o-div-c.webp?v=cc674fac41") left center / auto 100% no-repeat, linear-gradient(90deg, rgba(227, 191, 134, .6), transparent) 120px center / calc(100% - 120px) 1px no-repeat; }
/* the quote floats on the smoke, framed by two thin arcs and a crescent underneath */
.about:not(.about-page) .quote { aspect-ratio: auto; width: min(100%, 290px); padding: 54px 30px 70px; font-size: clamp(1.3rem, 1rem + .7vw, 1.6rem); line-height: 1.4;
  text-shadow: 0 0 16px #06030a, 0 0 4px #06030a; }
.about:not(.about-page) .quote::before { inset: -2% -6%; background: none; border-radius: 50%; animation: none;
  border-left: 1.5px solid rgba(240, 206, 150, .8); border-right: 1.5px solid rgba(240, 206, 150, .8);
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 26%, #000 74%, transparent 96%); mask-image: linear-gradient(180deg, transparent 4%, #000 26%, #000 74%, transparent 96%); }
.about:not(.about-page) .quote::after { content: ""; position: absolute; left: calc(50% - 13px); bottom: 14px; width: 26px; aspect-ratio: 143 / 159;
  background: url("/assets/img/ui/o-cres-gold.webp?v=69628258b3") center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(255, 214, 160, .6)); }
.about:not(.about-page) .quote .q { font-size: 3.4rem; }
@media (min-width: 760px) {
  /* the photo bleeds off the band's left edge, like the mockup */
  .about .portrait { justify-self: start; margin-left: calc(var(--fc) * -1.05); margin-block: calc(var(--fc) * -.55); }
}
@media (min-width: 760px) and (max-width: 1199.98px) {
  .about:not(.about-page) .quote { width: min(100%, 420px); padding: 40px 50px 64px; }
}
@media (max-width: 759.98px) {
  .about .portrait { width: min(100%, 380px); }
  .about:not(.about-page) .quote { padding: 40px 26px 62px; }
}
@media (max-width: 1199.98px) {
  .about:not(.about-page) { --panel: radial-gradient(50% 60% at 22% 30%, rgba(var(--plum), .55), transparent 72%),
    linear-gradient(180deg, rgba(6, 3, 9, .9) 0 62%, rgba(6, 3, 9, .35) 86%), url("/assets/img/ui/purple-smoke.webp?v=c7faa56d5a") right -10% bottom -10% / auto 70% no-repeat, rgba(6, 3, 9, .8); }
}

/* ---------- about, take three (Athena 2026-11-04, her "Celestial About Athena" mockup): the portrait sits in a clean circle
   inside a thin glowing gold orbit, a crescent on top, stars on the ring, lilies and purple smoke at the lower left ---------- */
.portrait .me-3 { background-image: url("/assets/img/ui/author-photo-3.webp?v=39be1a2247"); background-position: 50% 30%; }
.portrait .me-4 { background-image: url("/assets/img/ui/author-photo-4.webp?v=69cc4b5108"); background-position: 50% 28%; }
.about .portrait { aspect-ratio: 1; width: min(100%, 540px); justify-self: center; margin: 0; }
.about .portrait .clip { left: 12%; top: 12%; width: 76%; height: 76%; border-radius: 50%; -webkit-mask-image: none; mask-image: none;
  box-shadow: 0 0 40px rgba(var(--magenta), .35); }
.about .portrait .me-3, .about .portrait .me-4 { background-size: cover; filter: none; }
.about .portrait .clip::after { mix-blend-mode: normal; background: radial-gradient(circle at 50% 46%, transparent 58%, rgba(12, 5, 16, .35) 80%, rgba(12, 5, 16, .75) 100%); }
.about .portrait::before { left: 8%; top: 8%; width: 84%; -webkit-mask-image: none; mask-image: none;
  border: 1.5px solid rgba(244, 208, 150, .95); box-shadow: 0 0 12px rgba(255, 200, 130, .7), 0 0 30px rgba(255, 190, 120, .3), inset 0 0 12px rgba(255, 200, 130, .4); }
.about .portrait .halo { background:
    url("/assets/img/ui/o-cres-gold.webp?v=69628258b3") 50% 0 / 9% no-repeat,
    url("/assets/img/ui/o-star-burst.webp?v=a8cf65b931") 21% 14% / 7% no-repeat, url("/assets/img/ui/o-star-burst.webp?v=a8cf65b931") 83% 17% / 6% no-repeat,
    url("/assets/img/ui/o-star-burst.webp?v=a8cf65b931") 97% 52% / 7.5% no-repeat, url("/assets/img/ui/o-star-burst.webp?v=a8cf65b931") 4% 46% / 5% no-repeat,
    url("/assets/img/ui/o-star-burst.webp?v=a8cf65b931") 84% 86% / 5.5% no-repeat, url("/assets/img/ui/o-star-burst.webp?v=a8cf65b931") 42% 98% / 5% no-repeat,
    radial-gradient(circle at 70% 4%, rgba(255, 214, 160, .9) 0 1.5px, transparent 2.5px), radial-gradient(circle at 10% 70%, rgba(255, 214, 160, .8) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 93% 30%, rgba(255, 214, 160, .8) 0 1.5px, transparent 2.5px), radial-gradient(circle at 64% 97%, rgba(255, 214, 160, .7) 0 1px, transparent 2px); }
.about .portrait .halo::before { left: 4%; top: 4%; width: 92%; border-color: rgba(240, 206, 150, .4); }
.about .portrait::after { display: block; content: ""; position: absolute; left: -16%; bottom: -14%; width: 80%; height: 70%; top: auto; right: auto; z-index: 0; aspect-ratio: auto;
  background: url("/assets/img/ui/purple-smoke.webp?v=c7faa56d5a") center / cover no-repeat; opacity: .75; animation: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); }
.about .portrait .lilies { left: -4%; bottom: 0; width: 34%; }
@media (min-width: 760px) { .about .portrait { justify-self: center; margin: 0; } }
@media (max-width: 759.98px) { .about .portrait { width: min(100%, 360px); } }
.about .portrait { width: min(100%, 600px); }
.about .portrait .clip { left: 8.6%; top: 8.6%; width: 82.8%; height: 82.8%; box-shadow: none; }
.about .portrait .lilies { left: -7%; bottom: -5%; width: 42%; }
@media (min-width: 1200px) { .about:not(.about-page) { grid-template-columns: 1.3fr 1.2fr .6fr; } }

/* Athena 2026-11-04: the nebula runs in from both sides now, black through the middle so the words stay easy to read */
@media (min-width: 1200px) {
  .about:not(.about-page) { --panel:
    linear-gradient(90deg, rgba(6, 3, 9, .15) 0, rgba(6, 3, 9, .5) 28%, rgba(6, 3, 9, .95) 41%, rgba(6, 3, 9, .95) 73%, rgba(6, 3, 9, .45) 81%, rgba(6, 3, 9, 0) 90%),
    url("/assets/img/ui/purple-smoke-l.webp?v=284e8d5ae2") left -4% center / auto 125% no-repeat,
    url("/assets/img/ui/purple-smoke.webp?v=c7faa56d5a") right -4% center / auto 125% no-repeat, #06030a; }
}
@media (max-width: 1199.98px) {
  .about:not(.about-page) { --panel:
    radial-gradient(ellipse 62% 48% at 72% 36%, rgba(6, 3, 9, .95) 55%, rgba(6, 3, 9, .5) 80%, rgba(6, 3, 9, 0) 100%),
    url("/assets/img/ui/purple-smoke-l.webp?v=284e8d5ae2") left -16% top -6% / auto 72% no-repeat,
    url("/assets/img/ui/purple-smoke.webp?v=c7faa56d5a") right -10% bottom -10% / auto 70% no-repeat, #06030a; }
}
@media (max-width: 759.98px) {
  .about:not(.about-page) { --panel:
    linear-gradient(180deg, rgba(6, 3, 9, 0) 0, rgba(6, 3, 9, 0) 18%, rgba(6, 3, 9, .95) 30%, rgba(6, 3, 9, .95) 84%, rgba(6, 3, 9, .3) 100%),
    url("/assets/img/ui/purple-smoke-l.webp?v=284e8d5ae2") left -30% top -2% / 110% auto no-repeat,
    url("/assets/img/ui/purple-smoke.webp?v=c7faa56d5a") right -30% bottom -4% / 110% auto no-repeat, #06030a; }
}

/* Nov 4: Athena asked for the corner crescents gone from every section (too much). The gold double rules stay.
   To bring them back, delete this rule. */
:root { --i-cres-tl: none; --i-cres-tr: none; --i-cres-bl: none; --i-cres-br: none; }

/* Nov 4: one lake at the end, not two. The newsletter band keeps the moon lake; the footer becomes a quiet starfield
   crowned by the gold crescent divider (in place of the medallion seam). */
.seam:has(+ .site-footer) { height: clamp(70px, 8vw, 118px); width: min(70%, 560px); margin-block: calc(clamp(70px, 8vw, 118px) / -2 + 6px) calc(clamp(70px, 8vw, 118px) / -2 - 10px);
  background-image: url("/assets/img/ui/cres-divider.webp?v=458cdbe1e1"); filter: drop-shadow(0 0 10px rgba(6, 3, 9, .95)) drop-shadow(0 0 14px rgba(255, 214, 160, .35)); }
.site-footer { padding-bottom: calc(var(--fc) * .7); }
.site-footer::before { background:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 240, 215, .9), transparent 60%),
    radial-gradient(1px 1px at 27% 68%, rgba(255, 240, 215, .7), transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 34%, rgba(255, 230, 190, .85), transparent 60%),
    radial-gradient(1px 1px at 58% 78%, rgba(255, 240, 215, .6), transparent 60%),
    radial-gradient(1.5px 1.5px at 73% 18%, rgba(255, 230, 190, .9), transparent 60%),
    radial-gradient(1px 1px at 86% 58%, rgba(255, 240, 215, .7), transparent 60%),
    radial-gradient(1px 1px at 94% 30%, rgba(255, 240, 215, .55), transparent 60%),
    radial-gradient(1px 1px at 5% 80%, rgba(255, 240, 215, .55), transparent 60%),
    radial-gradient(70% 120% at 50% 120%, rgba(var(--plum), .4), transparent 70%),
    #06030a; background-size: 340px 220px, 340px 220px, 340px 220px, 340px 220px, 340px 220px, 340px 220px, 340px 220px, 340px 220px, 100% 100%, auto; }

/* ---------- newsletter pop-up (Nov 4): a small dark card with the double gold rule; a bottom panel on phones ---------- */
.nl-pop { width: min(92vw, 520px); max-height: none; padding: 46px 44px 30px; margin: auto; border: 1px solid var(--gold); color: var(--text); text-align: center; overflow: visible;
  background: radial-gradient(80% 60% at 50% 0%, rgba(var(--plum), .55), transparent 70%), url("/assets/img/ui/purple-smoke.webp?v=c7faa56d5a") right -38% bottom -62% / 62% auto no-repeat, #0a0510;
  box-shadow: inset 0 0 0 4px #0a0510, inset 0 0 0 5px rgba(227, 191, 134, .35), 0 30px 80px -20px #000, 0 0 60px -20px rgba(var(--magenta), .6); }
.nl-pop::backdrop { background: rgba(6, 3, 9, .62); backdrop-filter: blur(2px); }
.nl-pop::before { content: ""; position: absolute; left: 50%; top: -34px; translate: -50% 0; width: min(64%, 300px); aspect-ratio: 1100 / 367;
  background: url("/assets/img/ui/cres-divider.webp?v=458cdbe1e1") center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(6, 3, 9, .95)) drop-shadow(0 0 14px rgba(255, 214, 160, .35)); pointer-events: none; }
.nl-pop .kick { margin: 0 0 6px; color: var(--gold-hi); letter-spacing: .32em; font-size: .68rem; }
.nl-pop h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nl-pop:focus { outline: none; }
.nl-pop .pop-line { margin: 0 auto 22px; max-width: 42ch; text-wrap: pretty; font-style: italic; line-height: 1.6; color: var(--text); }
.nl-pop .signup { display: grid; gap: 12px; }
.nl-pop .btn { justify-content: center; }
.nl-pop .form-status { min-height: 1.2em; margin: 10px 0 0; font-size: .9rem; }
.nl-pop .pop-x { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--gold-hi); cursor: pointer; }
.nl-pop .pop-x svg { width: 18px; height: 18px; }
.nl-pop .pop-later { margin-top: 6px; border: 0; background: none; color: var(--text-2); font: 400 .66rem/1 var(--f-caps); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; padding: 8px; }
.nl-pop .pop-x:hover, .nl-pop .pop-later:hover { color: var(--gold-hi); }
.nl-pop.in { animation: pop-in .5s cubic-bezier(.2, .7, .3, 1); }
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (max-width: 759.98px) {
  .nl-pop { width: 100%; max-width: 100%; margin: auto 0 0; padding: 40px 22px calc(18px + env(safe-area-inset-bottom)); border-width: 1px 0 0; }
  .nl-pop::backdrop { background: rgba(6, 3, 9, .35); backdrop-filter: none; }
  .nl-pop::before { top: -26px; width: 56%; }
  .nl-pop h2 { font-size: 1.8rem; margin-bottom: 10px; }
  .nl-pop .pop-line { font-size: .95rem; margin-bottom: 16px; }
  .nl-pop.in { animation: pop-up .45s cubic-bezier(.2, .7, .3, 1); }
  @keyframes pop-up { from { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) { .nl-pop.in { animation: none; } }

/* ---------- About page (Nov 4, critique fix 10): the homepage's orbit portrait, with one of her lines under it;
   on wide screens both stay beside the story while it scrolls ---------- */
.about-page .about-side { display: grid; gap: clamp(28px, 4vw, 56px); justify-items: center; align-content: start; min-width: 0; }
.about-page .portrait { position: relative; top: auto; width: min(100%, 520px); }
.about-page .pull { position: relative; margin: 0; width: min(100%, 380px); padding: 34px 26px 58px; text-align: center;
  font: italic 400 clamp(1.3rem, 1rem + .8vw, 1.7rem)/1.4 var(--f-body); color: var(--gold-hi); text-shadow: 0 0 18px rgba(6, 3, 9, .9); }
.about-page .pull p { margin: 0; }
.about-page .pull::before { content: ""; position: absolute; inset: 0 8%; height: 22px; background: url("/assets/img/ui/o-div-c.webp?v=cc674fac41") center top / contain no-repeat; opacity: .9; }
.about-page .pull::after { content: ""; position: absolute; left: calc(50% - 12px); bottom: 12px; width: 24px; aspect-ratio: 143 / 159;
  background: url("/assets/img/ui/o-cres-gold.webp?v=69628258b3") center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(255, 214, 160, .6)); }
.about-page .btns { flex-wrap: nowrap; }
@media (min-width: 1001px) { .about-page .about-side { position: sticky; top: 40px; } }
@media (max-width: 1000px) { .about-page .pull { display: none; } .about-page .btns { flex-wrap: wrap; } }
@media (max-width: 759.98px) { .about-page .portrait { width: min(100%, 360px); } }

/* ---------- Nov 4 (critique fix 9): each book arch gets its own moon phase, filling to full by Book Five; teaser lines on World tiles ---------- */
.vol .arch::before { filter: drop-shadow(0 0 8px rgba(255, 214, 160, .55)); opacity: .95; }
#book-two .arch::before { aspect-ratio: 1; width: 22%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1cf'/%3E%3Cstop offset='.5' stop-color='%23e3bf86'/%3E%3Cstop offset='1' stop-color='%23a87a3e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='40' fill='rgba(20,8,26,.6)' stroke='%23e3bf86' stroke-width='1.6'/%3E%3Cpath d='M50,10 A40,40 0 0 1 50,90 A0.00,40 0 0 0 50,10 Z' fill='url(%23g)'/%3E%3C/svg%3E"); }
#book-three .arch::before { aspect-ratio: 1; width: 22%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1cf'/%3E%3Cstop offset='.5' stop-color='%23e3bf86'/%3E%3Cstop offset='1' stop-color='%23a87a3e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='40' fill='rgba(20,8,26,.6)' stroke='%23e3bf86' stroke-width='1.6'/%3E%3Cpath d='M50,10 A40,40 0 0 1 50,90 A17.60,40 0 0 1 50,10 Z' fill='url(%23g)'/%3E%3C/svg%3E"); }
#book-four .arch::before { aspect-ratio: 1; width: 22%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1cf'/%3E%3Cstop offset='.5' stop-color='%23e3bf86'/%3E%3Cstop offset='1' stop-color='%23a87a3e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='40' fill='rgba(20,8,26,.6)' stroke='%23e3bf86' stroke-width='1.6'/%3E%3Cpath d='M50,10 A40,40 0 0 1 50,90 A32.00,40 0 0 1 50,10 Z' fill='url(%23g)'/%3E%3C/svg%3E"); }
#book-five .arch::before { aspect-ratio: 233 / 253; width: 30%; top: 6%; background-image: url("/assets/img/ui/o-full-moon.webp?v=9bce78a3e8"); }
.tile .tease { margin: 12px auto 0; max-width: 30ch; font: italic 400 .98rem/1.4 var(--f-body); color: var(--gold-hi); text-shadow: 0 0 12px #06030a, 0 0 3px #06030a; }
@media (max-width: 759.98px) { .tile, .tile.tall { aspect-ratio: auto; min-height: 255px; } .tile:has(.tease) { min-height: 330px; } }

/* ---------- Nov 4 (critique fix 8, Athena keeps them): the small word lists, bigger and more deliberate ---------- */
.hero .caps .pair { display: block; white-space: nowrap; }
.vwords { font-size: .8rem; line-height: 1.9; letter-spacing: .34em; color: #f6e2b8; gap: 8px;
  text-shadow: 0 0 12px #06030a, 0 0 4px #06030a, 0 0 18px rgba(227, 191, 134, .35); }
.vwords::before, .vwords::after { content: ""; justify-self: center; width: 1px; height: 46px; background: linear-gradient(180deg, transparent, var(--gold) 50%, transparent); }
.vwords img { width: 22px; margin: 10px auto; filter: drop-shadow(0 0 6px rgba(255, 214, 160, .8)); }
.hero .vwords { width: 8.5%; right: 1%; }
.site-footer .taglines { font-size: .76rem; letter-spacing: .24em; color: var(--text); }
.site-footer .genres { font-size: .74rem; line-height: 1.95; letter-spacing: .3em; color: var(--gold-hi); padding-left: 16px;
  border-left: 1px solid; border-image: linear-gradient(180deg, transparent, var(--gold), transparent) 1; text-shadow: 0 0 12px rgba(227, 191, 134, .3); }
@media (max-width: 759.98px) { .site-footer .genres { padding-left: 0; border-left: 0; } }

/* ---------- Nov 4, Nova's polish notes (via Athena) ---------- */
/* phone and small tablet: say what the series is before the cover-reveal dial */
@media (max-width: 860px) { .series .book-stage { order: 0; margin: 28px auto 0; } }
/* the cast row wraps centered, so a last odd file (Preston) sits in the middle instead of alone on the left */
@media (max-width: 1150px) {
  .cast { display: flex; flex-wrap: wrap; justify-content: center; }
  .cast li { flex: 0 0 calc((100% - 2 * clamp(12px, 2vw, 30px)) / 3); }
}
@media (max-width: 560px) { .cast li { flex-basis: calc((100% - clamp(12px, 2vw, 30px)) / 2); } }
/* the smallest text, a size up and a touch brighter */
.cast small { font-size: 1.06rem; color: var(--text); }
.cast b { font-size: .86rem; }
.cast i { font-size: .66rem; }
/* gateway cards: bigger subtitles on a soft dark veil right behind the words; the art itself stays as bright as it is */
.worlds .tile .caps { position: relative; font-size: .68rem; letter-spacing: .18em; color: var(--text); margin-top: 6px; padding: .5em 1.2em;
  background: radial-gradient(closest-side, rgba(6, 3, 9, .78), rgba(6, 3, 9, .45) 60%, transparent); text-shadow: 0 0 8px #06030a, 0 0 2px #06030a; }
.worlds .tile h3 { text-shadow: 0 0 14px #06030a, 0 0 4px #06030a, 0 2px 12px #000; }
.tile p.d { color: var(--text); text-shadow: 0 0 10px #06030a, 0 0 3px #06030a; }
/* footer: no more little gold ants on a phone */
.site-footer nav a { font-size: .76rem; }
.site-footer .legal { font-size: .86rem; color: var(--text-2); }
@media (max-width: 759.98px) {
  .site-footer nav a { font-size: .82rem; letter-spacing: .16em; }
  .site-footer .taglines { font-size: .82rem; }
  .site-footer .genres { font-size: .8rem; }
  .site-footer .legal { font-size: .9rem; }
}