:root {
  color-scheme: dark;
  --ink: #090a0d;
  --ink-soft: #0f1015;
  --ink-violet: #15121c;
  --paper: #eee6d6;
  --paper-soft: #b9b2a7;
  --muted: #86817b;
  --gold: #c79a57;
  --gold-bright: #e0b873;
  --violet: #68506f;
  --line: rgba(199, 154, 87, .22);
  --line-soft: rgba(238, 230, 214, .1);
  --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1240px;
  --gutter: clamp(1.25rem, 3vw, 3rem);
  --section-space: clamp(4.5rem, 6.5vw, 6.75rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 1rem; line-height: 1.65; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: .98; letter-spacing: -.025em; }
p { color: var(--paper-soft); }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 5px; }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; background: var(--paper); color: var(--ink); transition: top .2s ease; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-header { position: relative; z-index: 30; width: min(100%, var(--max)); min-height: 4.875rem; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .72rem; font-family: var(--serif); font-size: 1rem; letter-spacing: .01em; }
.brand-mark { width: auto; height: 2.125rem; object-fit: contain; filter: drop-shadow(0 0 8px rgba(224, 184, 115, .13)); }
.primary-nav { display: flex; gap: clamp(.78rem, 1.45vw, 1.55rem); align-items: center; }
.primary-nav a, .submenu-toggle { position: relative; color: var(--paper-soft); font-size: .68rem; letter-spacing: .085em; text-transform: uppercase; }
.primary-nav > a::after, .nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.55rem; height: 1px; background: var(--gold); transition: right .25s ease; }
.primary-nav a:hover, .primary-nav a[aria-current="page"], .nav-group:hover .nav-link, .nav-group.menu-open .nav-link { color: var(--paper); }
.primary-nav > a:hover::after, .primary-nav > a[aria-current="page"]::after, .nav-link:hover::after, .nav-link[aria-current="page"]::after, .nav-group:hover .nav-link::after, .nav-group.menu-open .nav-link::after { right: 0; }
.nav-group { position: relative; display: inline-flex; align-items: center; gap: .25rem; }
.submenu-toggle { width: .92rem; height: 1.25rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.submenu-toggle::after { content: ""; position: absolute; left: .18rem; top: .4rem; width: .34rem; height: .34rem; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg); transition: transform .2s ease; }
.submenu-toggle[aria-expanded="true"]::after, .nav-group:hover .submenu-toggle::after { transform: translateY(.12rem) rotate(225deg); }
.nav-menu { position: absolute; top: calc(100% + 1.35rem); left: 50%; display: none; width: max-content; min-width: 14.5rem; max-width: min(22rem, calc(100vw - 2rem)); padding: .8rem 0; border: 1px solid var(--line); background: rgba(9,10,13,.98); box-shadow: 0 1.5rem 3rem rgba(0,0,0,.32); transform: translateX(-50%); }
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -1.4rem; height: 1.4rem; }
.nav-menu a { display: block; padding: .58rem 1rem; color: var(--paper-soft); font-size: .63rem; letter-spacing: .095em; line-height: 1.35; }
.nav-menu a::after { display: none; }
.nav-menu a:hover { background: rgba(199,154,87,.08); color: var(--paper); }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.menu-open .nav-menu { display: block; }
.nav-toggle { display: none; background: transparent; border: 0; padding: .5rem 0 .5rem .75rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.nav-toggle i, .nav-toggle i::after { display: block; width: 1.5rem; height: 1px; background: var(--gold); content: ""; transition: transform .25s ease; }
.nav-toggle i { margin-left: .65rem; }
.nav-toggle i::after { transform: translateY(.42rem); }
.nav-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] i::after { transform: rotate(-90deg); }

.hero { position: relative; isolation: isolate; max-width: var(--max); min-height: min(760px, 82vh); margin: 0 auto; padding: clamp(3.5rem, 5.5vw, 5rem) var(--gutter); display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(270px, .72fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; border-bottom: 1px solid var(--line); overflow: hidden; background: #07080b; }
.hero::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(7,8,11,.96) 0%, rgba(7,8,11,.86) 37%, rgba(7,8,11,.45) 66%, rgba(7,8,11,.82) 100%), linear-gradient(180deg, rgba(7,8,11,.42) 0%, rgba(7,8,11,.18) 42%, rgba(7,8,11,.72) 100%), radial-gradient(circle at 70% 46%, rgba(199,154,87,.12), transparent 33%), radial-gradient(circle at 56% 30%, rgba(104,80,111,.22), transparent 40%); pointer-events: none; }
.hero::after { content: ""; position: absolute; z-index: 2; inset: 0; background: radial-gradient(ellipse at center, transparent 28%, rgba(7,8,11,.28) 62%, rgba(7,8,11,.74) 100%), linear-gradient(115deg, transparent 0 58%, rgba(199,154,87,.045), transparent 78%); pointer-events: none; }
.hero-media-bg { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: #07080b; }
.hero-sigil-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; opacity: 0; filter: saturate(.9) contrast(1.05) brightness(.72); transition: opacity 1.2s ease; }
.hero-video-ready .hero-sigil-video { opacity: .62; }
.hero-copy { position: relative; z-index: 3; max-width: 720px; }
.hero h1 { max-width: none; margin-bottom: 1.15rem; font-size: clamp(3.5rem, 5vw, 4.55rem); }
.tagline { margin-bottom: 1.55rem; color: var(--gold-bright); font-family: var(--serif); font-size: clamp(1.4rem, 1.85vw, 1.75rem); letter-spacing: .015em; }
.hero-statement { max-width: 36rem; margin-bottom: 2rem; font-size: clamp(1rem, 1.25vw, 1.125rem); }
.text-link { display: inline-flex; gap: 1rem; align-items: center; color: var(--paper); font-size: .77rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.text-link span { color: var(--gold); font-size: 1.1rem; transition: transform .2s ease; }
.text-link:hover span { transform: translateX(.35rem); }
.hero-sigil { position: absolute; z-index: 0; top: 50%; right: clamp(2rem, 7vw, 6rem); width: min(34vw, 430px); pointer-events: none; filter: saturate(.84) sepia(.12) drop-shadow(0 0 32px rgba(199, 154, 87, .12)); transform: translateY(-50%); transition: opacity .8s ease; }
.hero-sigil[data-reveal] { opacity: .3; }
.hero-video-ready .hero-sigil[data-reveal] { opacity: 0; }
.hero-sigil::before { content: ""; position: absolute; inset: 16% 2%; border-radius: 50%; background: radial-gradient(circle, rgba(199, 154, 87, .15), transparent 68%); filter: blur(22px); }
.hero-sigil img { position: relative; display: block; width: 100%; height: auto; }

.home-page main > section { position: relative; }
.home-page main > section:not(:last-child)::after { content: ""; position: absolute; z-index: 4; left: 50%; bottom: -4px; width: 7px; height: 7px; border: 1px solid rgba(199, 154, 87, .75); background: var(--ink); transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 0 5px var(--ink); }

.section { max-width: var(--max); margin: 0 auto; padding: var(--section-space) var(--gutter); border-bottom: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: minmax(180px, .58fr) 1.42fr; gap: 3rem; margin-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.section-heading > div { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.section-heading p:not(.section-number) { max-width: 20rem; margin-bottom: .4rem; }
.section h2, .reader-callout h2, .contact-band h2 { margin: 0; font-size: clamp(3.25rem, 4.3vw, 4rem); }
.section-number { color: var(--gold); font-family: var(--sans); font-size: .68rem; letter-spacing: .16em; }
.section-number::after { content: ""; display: inline-block; width: clamp(2.5rem, 7vw, 7rem); height: 1px; margin: 0 0 .25rem .85rem; background: var(--gold); opacity: .6; }
.world-filters { display: flex; flex-wrap: wrap; gap: .65rem; margin: clamp(-1rem, -1vw, -.4rem) 0 clamp(1.7rem, 3vw, 2.5rem); }
.world-filter { min-height: 2.45rem; padding: .62rem .9rem; border: 1px solid rgba(199,154,87,.18); color: var(--muted); background: rgba(0,0,0,.12); cursor: pointer; font-size: .62rem; font-weight: 600; letter-spacing: .12em; line-height: 1.25; text-transform: uppercase; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.world-filter:hover, .world-filter.is-active { border-color: rgba(199,154,87,.48); color: var(--paper); background: rgba(199,154,87,.08); }
.world-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 2rem); align-items: start; }
.world-card { grid-column: span 4; border-top: 1px solid var(--line-soft); padding-top: 1rem; }
.world-card.is-filtered-out, .editorial-item.is-filtered-out { display: none !important; }
.world-card[hidden] { display: none; }
.world-card-tall { grid-row: span 2; }
.world-card-wide { grid-column: span 6; }
.world-card:nth-child(2), .world-card:nth-child(5) { margin-top: clamp(1.5rem, 3.5vw, 3.5rem); }
.art-frame { position: relative; min-height: 220px; margin-bottom: 1.1rem; overflow: hidden; background: var(--ink-soft); border: 1px solid var(--line); }
.world-card-tall .art-frame { min-height: 420px; }
.world-card-wide .art-frame { min-height: 245px; }
.art-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.world-cover-link { position: absolute; inset: 0; display: block; }
.world-cover-link:focus-visible { outline-offset: -6px; }
.world-cover-link img { transition: transform .35s ease, filter .35s ease; }
.world-cover-link:hover img { transform: scale(1.018); filter: saturate(1.02) brightness(1.04); }
.art-jinx img { object-position: 50% 45%; }
.art-dust img { object-position: 50% 50%; }
.art-stoic img { object-position: 50% 52%; }
.art-unspoken img { object-position: 50% 50%; }
.art-army img { object-position: 50% 48%; }
.art-xstoryz img { object-position: 50% 50%; }
.art-frame::before, .art-frame::after, .art-frame span::before, .art-frame span::after { content: ""; position: absolute; }
.art-frame::after { z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(9,10,13,.02) 40%, rgba(9,10,13,.26) 100%), linear-gradient(140deg, transparent 25%, rgba(199,154,87,.045), transparent 70%); }
.art-jinx { background: radial-gradient(circle at 70% 20%, rgba(107, 77, 116, .25), transparent 28%), #101014; }
.art-jinx::before { width: 42%; aspect-ratio: .68; left: 29%; bottom: -2px; border: 1px solid var(--violet); border-radius: 50% 50% 0 0; }
.art-jinx span::before { width: 22%; height: 42%; left: 39%; bottom: 0; border: 1px solid var(--gold); border-bottom: 0; }
.art-dust { background: radial-gradient(circle at center, rgba(199,154,87,.2), transparent 56%), #0e0f13; }
.art-dust::before { inset: 18%; border: 1px dotted var(--gold); border-radius: 50%; box-shadow: 22px -31px 0 -1px rgba(199,154,87,.25), -34px 19px 0 -1px rgba(199,154,87,.18); }
.art-stoic { background: linear-gradient(125deg, rgba(96,73,104,.22), transparent 42%), #101015; }
.art-stoic::before { width: 48%; height: 1px; left: 26%; top: 42%; background: var(--gold); box-shadow: 0 18px 0 rgba(199,154,87,.55), 0 36px 0 rgba(199,154,87,.28); transform: rotate(-7deg); }
.art-unspoken { background: radial-gradient(ellipse at 30% 50%, rgba(103,77,112,.3), transparent 36%), #0e0e12; }
.art-unspoken::before { width: 120px; height: 150px; left: calc(50% - 60px); top: calc(50% - 75px); border: 1px solid var(--gold); border-radius: 48% 48% 42% 42%; opacity: .7; }
.art-unspoken span::before { width: 70px; height: 1px; left: calc(50% - 35px); top: 50%; background: var(--violet); transform: rotate(-24deg); }
.art-army { background: linear-gradient(155deg, rgba(199,154,87,.1), transparent 55%), #101014; }
.art-army::before, .art-army span::before { width: 1px; height: 48%; top: 25%; background: var(--gold); }
.art-army::before { left: 43%; transform: rotate(35deg); box-shadow: 18px 0 0 rgba(199,154,87,.5); }
.art-army span::before { right: 43%; transform: rotate(-35deg); box-shadow: -18px 0 0 rgba(199,154,87,.5); }
.art-xstoryz { background: linear-gradient(135deg, rgba(87,65,95,.35), transparent 50%), #0e0e12; }
.art-xstoryz::before { inset: 18% 25%; border: 1px solid var(--violet); box-shadow: inset 0 0 0 22px #0e0e12, inset 0 0 0 23px rgba(199,154,87,.35); transform: perspective(400px) rotateY(-14deg); }
.card-copy { min-width: 0; min-height: 9.75rem; padding: 0 0 2.25rem; display: flex; flex-direction: column; align-items: flex-start; }
.card-copy p { margin: 0 0 .42rem; color: var(--gold); font-size: .64rem; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.card-copy h3 { width: 100%; max-width: 100%; margin: 0; padding-bottom: .08em; font-size: clamp(1.5rem, 2vw, 2.2rem); line-height: 1.15; overflow-wrap: break-word; text-wrap: balance; }
.status-tag { display: inline-flex; align-items: center; gap: .55rem; margin-top: .82rem; font-size: .63rem; font-weight: 600; letter-spacing: .105em; line-height: 1.4; text-transform: uppercase; }
.status-tag::before { content: ""; flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 36%, transparent); }
.status-available { color: #aead76; }
.status-development { color: var(--gold); }
.status-coming { color: #9b819d; }
.button-link { display: flex; width: fit-content; align-items: center; gap: 1.5rem; margin: 3rem 0 0 auto; padding: .8rem 1.15rem; border: 1px solid var(--line); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; transition: background .2s ease, border-color .2s ease; }
.button-link:hover { background: rgba(199,154,87,.08); border-color: var(--gold); }

.music-strip { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(3rem, 6vw, 6rem); background: linear-gradient(105deg, var(--ink), var(--ink-violet) 52%, var(--ink)); }
.music-intro h2 { margin: 1.25rem 0 1.5rem; }
.music-intro > p:not(.section-number) { max-width: 25rem; }
.music-list, .legacy-list { margin: 0; padding: 0; list-style: none; }
.music-list li { min-height: 4.2rem; display: grid; grid-template-columns: 2.75rem 1fr 3.5rem; align-items: center; border-bottom: 1px solid var(--line-soft); }
.music-list li:first-child { border-top: 1px solid var(--line-soft); }
.music-list span { color: var(--gold); font-size: .64rem; }
.music-list strong { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.85rem); font-weight: 400; }
.music-list i { width: 100%; height: 24px; opacity: .45; background: repeating-linear-gradient(90deg, transparent 0 6px, var(--gold) 7px 8px); clip-path: polygon(0 45%, 7% 42%, 14% 56%, 21% 22%, 28% 67%, 35% 35%, 42% 75%, 49% 13%, 56% 62%, 63% 43%, 70% 78%, 77% 27%, 84% 55%, 91% 39%, 100% 48%, 100% 52%, 91% 61%, 84% 45%, 77% 73%, 70% 22%, 63% 57%, 56% 38%, 49% 87%, 42% 25%, 35% 65%, 28% 33%, 21% 78%, 14% 44%, 7% 58%, 0 55%); }

.reader-callout { max-width: var(--max); margin: 0 auto; padding: var(--section-space) var(--gutter); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 6vw, 6rem); background: radial-gradient(circle at 82% 40%, rgba(91,64,102,.28), transparent 33%), var(--ink-violet); border-bottom: 1px solid var(--line); }
.reader-callout h2 { margin-top: 1.25rem; }
.reader-copy > p { max-width: 43rem; font-size: clamp(1rem, 1.35vw, 1.125rem); }
.launch-notice { max-width: 30rem; margin-top: 1.75rem; padding: 1.05rem 0 0; border-top: 1px solid var(--line-soft); }
.launch-notice span { display: block; margin-bottom: .35rem; color: var(--gold); font-size: .66rem; font-weight: 700; letter-spacing: .13em; line-height: 1.35; text-transform: uppercase; }
.launch-notice p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.archive-preview { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 6vw, 6rem); }
.archive-intro h2 { margin: 1.25rem 0 1.75rem; }
.archive-intro > p:not(.section-number) { max-width: 38rem; }
.archive-intro .text-link { margin-top: 1rem; }
.legacy-list { counter-reset: legacy; }
.legacy-list li { min-height: 4.35rem; display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line-soft); }
.legacy-list li:first-child { border-top: 1px solid var(--line-soft); }
.legacy-list span { color: var(--gold); font-size: .64rem; }
.legacy-list strong { font-family: var(--serif); font-size: clamp(1.2rem, 1.7vw, 1.55rem); font-weight: 400; }

.contact-band { max-width: var(--max); margin: 0 auto; padding: var(--section-space) var(--gutter); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 6vw, 6rem); border-bottom: 1px solid var(--line); }
.contact-band h2 { margin-top: 1.25rem; max-width: 9ch; }
.contact-list { display: flex; flex-direction: column; font-style: normal; }
.contact-list a, .contact-list p { display: grid; grid-template-columns: minmax(8rem, .45fr) 1fr; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line-soft); color: var(--paper); overflow-wrap: anywhere; }
.contact-list a:first-child, .contact-list p:first-child { border-top: 1px solid var(--line-soft); }
.contact-list a:hover { color: var(--gold-bright); }
.contact-list span { color: var(--muted); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }

.site-footer { max-width: var(--max); margin: 0 auto; padding: 2.35rem var(--gutter); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.35rem; }
.footer-sigil { width: 5.25rem; height: 5.25rem; object-fit: cover; opacity: .82; }
.footer-identity { display: grid; gap: .2rem; }
.footer-brand { width: fit-content; font-family: var(--serif); font-size: 1.08rem; letter-spacing: .01em; }
.site-footer p { margin: 0; color: var(--paper-soft); }
.footer-identity p { font-family: var(--serif); font-size: .88rem; font-style: italic; letter-spacing: .02em; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem .92rem; margin-top: .5rem; }
.footer-links a { color: var(--muted); font-size: .64rem; font-weight: 600; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--gold-bright); }
.footer-contact { margin-top: .45rem !important; color: var(--paper-soft) !important; font-family: var(--sans) !important; font-size: .68rem !important; font-style: normal !important; letter-spacing: .04em !important; overflow-wrap: anywhere; }
.footer-note { justify-self: end; font-family: var(--sans) !important; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }

/* Interior pages */
.page-hero { max-width: var(--max); min-height: 430px; margin: 0 auto; padding: clamp(4rem, 6.5vw, 6.5rem) var(--gutter); display: grid; grid-template-columns: .95fr 1.05fr; align-items: end; gap: clamp(3rem, 6vw, 6rem); border-bottom: 1px solid var(--line); background: radial-gradient(circle at 80% 25%, rgba(91,64,102,.2), transparent 28%); }
.page-hero h1 { margin: 0; max-width: 9ch; font-size: clamp(3.5rem, 6.5vw, 6rem); }
.page-hero-text { position: relative; z-index: 2; min-width: 0; }
.page-hero-copy { max-width: 34rem; padding-bottom: .7rem; }
.page-hero-copy p:first-child { margin-bottom: 1.2rem; color: var(--gold); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; }
.page-hero-copy p:last-child { margin-bottom: 0; font-size: clamp(1.05rem, 1.55vw, 1.3rem); }
.visual-hero { position: relative; isolation: isolate; min-height: clamp(390px, 42vw, 520px); padding-top: clamp(3rem, 5.3vw, 5.5rem); padding-bottom: clamp(3rem, 5.3vw, 5.5rem); grid-template-columns: minmax(0, .72fr) minmax(360px, 1.28fr); align-items: center; gap: clamp(1.75rem, 4vw, 4.5rem); overflow: hidden; background: linear-gradient(100deg, rgba(9,10,13,.96) 0%, rgba(9,10,13,.9) 34%, rgba(16,13,20,.72) 62%, rgba(9,10,13,.98) 100%); }
.visual-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(9,10,13,.98) 0%, rgba(9,10,13,.9) 38%, rgba(9,10,13,.18) 68%, rgba(9,10,13,.76) 100%), radial-gradient(circle at 76% 45%, rgba(199,154,87,.12), transparent 33%), radial-gradient(circle at 58% 18%, rgba(104,80,111,.22), transparent 34%); pointer-events: none; }
.visual-hero::after { content: ""; position: absolute; z-index: 1; inset: 0; border-bottom: 1px solid rgba(199,154,87,.12); background-image: linear-gradient(115deg, transparent 0 58%, rgba(199,154,87,.05), transparent 78%), url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"); opacity: .34; mix-blend-mode: screen; pointer-events: none; }
.visual-hero .page-hero-copy { margin-top: 1.1rem; padding-bottom: 0; }
.page-hero-media { position: relative; z-index: 0; width: min(100%, 760px); justify-self: end; aspect-ratio: 16 / 9; min-height: 250px; overflow: hidden; border: 1px solid rgba(199,154,87,.18); box-shadow: -2.2rem 2.5rem 5rem rgba(0,0,0,.34), inset 0 0 0 1px rgba(238,230,214,.035); background: var(--ink-soft); }
.page-hero-media::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, rgba(9,10,13,.54) 0%, rgba(9,10,13,.12) 34%, transparent 62%), linear-gradient(180deg, rgba(9,10,13,.15), transparent 42%, rgba(9,10,13,.46)); pointer-events: none; }
.page-hero-media::after { content: ""; position: absolute; z-index: 3; inset: 0; box-shadow: inset 0 0 4.5rem rgba(0,0,0,.52), inset 0 0 0 1px rgba(238,230,214,.03); pointer-events: none; }
.page-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 66% 50%); filter: saturate(.92) contrast(1.05); }
.page-hero--stories { --hero-focus: 68% 50%; }
.page-hero--music { --hero-focus: 58% 48%; }
.page-hero--watch { --hero-focus: 62% 48%; }
.page-hero--reader-circle { --hero-focus: 58% 54%; }
.page-hero--jai-simon-archives { --hero-focus: 60% 52%; }
.page-hero--about-joseph { --hero-focus: 58% 54%; }
.content-section { max-width: var(--max); margin: 0 auto; padding: var(--section-space) var(--gutter); border-bottom: 1px solid var(--line); }
.content-section h2 { margin-bottom: clamp(2rem, 4vw, 3.75rem); font-size: clamp(2.75rem, 4.3vw, 4rem); }
.editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 3rem); }
.editorial-item { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.editorial-item:nth-child(2) { margin-top: 3rem; }
.editorial-item:nth-child(3) { margin-top: 6rem; }
.editorial-item h3 { margin: .8rem 0; font-size: clamp(1.65rem, 2.4vw, 2.5rem); }
.editorial-item p { max-width: 29rem; }
.item-index { color: var(--gold); font-size: .64rem; letter-spacing: .14em; }
.media-frame { position: relative; min-height: 225px; margin-bottom: 1.2rem; overflow: hidden; border: 1px solid var(--line-soft); background: linear-gradient(145deg, rgba(97,73,106,.22), transparent 45%), var(--ink-soft); }
.media-frame::before { content: ""; position: absolute; inset: 20%; border: 1px solid var(--line); transform: rotate(8deg); }
.media-frame::after { content: ""; position: absolute; inset: 30%; border: 1px solid var(--violet); transform: rotate(-10deg); }
.archive-index h2 { margin-bottom: clamp(1.8rem, 3.2vw, 3rem); }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.8rem, 1.4vw, 1.25rem); }
.category-grid a { min-height: 9.25rem; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; border-top: 1px solid var(--line); background: linear-gradient(145deg, rgba(104,80,111,.12), transparent 64%); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.category-grid a:hover, .category-grid a.is-active { border-color: var(--gold); background: rgba(199,154,87,.07); transform: translateY(-2px); }
.category-grid span { color: var(--paper); font-family: var(--serif); font-size: clamp(1.25rem, 1.55vw, 1.55rem); line-height: 1.08; }
.category-grid p { margin: 1rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.story-gallery .editorial-item { scroll-margin-top: 5.5rem; }
.editorial-art { position: relative; min-height: 245px; margin-bottom: 1.2rem; overflow: hidden; border: 1px solid var(--line-soft); background: var(--ink-soft); }
.editorial-art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.archive-note { max-width: 42rem; margin: 0; color: var(--paper-soft); font-size: clamp(1rem, 1.35vw, 1.16rem); }
.note-panel { max-width: var(--max); margin: 0 auto; padding: clamp(2.75rem, 4.5vw, 4.5rem) var(--gutter); display: grid; grid-template-columns: .7fr 1.3fr; gap: 3rem; background: var(--ink-violet); border-bottom: 1px solid var(--line); }
.note-panel h2 { margin: 0; font-size: clamp(2.2rem, 3.4vw, 3.25rem); }
.note-panel p { max-width: 47rem; margin: 0; }
.archive-intro-note { padding-top: clamp(3.75rem, 5.4vw, 5.75rem); padding-bottom: clamp(3.75rem, 5.4vw, 5.75rem); }
.archive-quote { max-width: 740px; margin: 0; }
.archive-eyebrow { margin: 0 0 1rem; color: var(--gold); font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
.archive-quote h2, .archive-quote p:not(.archive-eyebrow) { max-width: 100%; margin: 0; color: var(--paper); font-family: var(--serif); font-size: clamp(1.375rem, 1.75vw, 1.6rem); font-weight: 400; letter-spacing: 0; line-height: 1.58; }
.archive-quote h2 { margin-bottom: .85rem; }
.archive-bookshelf { background: radial-gradient(circle at 78% 18%, rgba(104,80,111,.12), transparent 28%), linear-gradient(180deg, rgba(199,154,87,.025), transparent 18%), var(--ink); }
.archive-section-heading { display: grid; grid-template-columns: minmax(0, .95fr) minmax(16rem, .55fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2.25rem, 4vw, 3.75rem); }
.archive-section-heading h2 { margin: 0; max-width: 12ch; }
.archive-section-heading p { max-width: 24rem; margin: 0 0 .55rem; color: var(--paper-soft); font-size: clamp(1rem, 1.3vw, 1.12rem); }
.archive-book-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2.35vw, 2rem); }
.archive-book-card { position: relative; min-width: 0; min-height: 100%; padding: clamp(1rem, 1.7vw, 1.35rem); display: flex; flex-direction: column; border: 1px solid rgba(199,154,87,.18); background: linear-gradient(145deg, rgba(238,230,214,.035), transparent 28%), linear-gradient(180deg, rgba(17,16,22,.88), rgba(9,10,13,.96)); box-shadow: 0 1.4rem 3rem rgba(0,0,0,.24); }
.archive-book-card::before { content: ""; position: absolute; inset: 0; border-top: 1px solid rgba(224,184,115,.2); background: radial-gradient(circle at 80% 8%, rgba(199,154,87,.08), transparent 24%); pointer-events: none; }
.archive-cover-frame { --cover-inset: clamp(.7rem, 1.4vw, 1rem); position: relative; z-index: 1; height: clamp(300px, 31vw, 405px); overflow: hidden; border: 1px solid rgba(238,230,214,.09); background: radial-gradient(circle at 50% 18%, rgba(199,154,87,.08), transparent 38%), #090a0d; }
.archive-cover-frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 2.6rem rgba(0,0,0,.38), inset 0 0 0 1px rgba(224,184,115,.06); pointer-events: none; }
.archive-cover-frame img { position: absolute; inset: var(--cover-inset); display: block; width: calc(100% - (var(--cover-inset) * 2)); height: calc(100% - (var(--cover-inset) * 2)); object-fit: contain; object-position: center; filter: saturate(.96) contrast(1.02); }
.archive-book-copy { position: relative; z-index: 1; flex: 1 1 auto; padding-top: 1.15rem; }
.archive-label { margin: 0 0 .65rem; color: var(--gold); font-size: .62rem; font-weight: 600; letter-spacing: .16em; line-height: 1.35; text-transform: uppercase; }
.archive-book-copy h3 { min-height: 3.55em; margin: 0 0 .75rem; padding-bottom: .08em; font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.18; overflow-wrap: anywhere; letter-spacing: 0; }
.archive-book-copy p:not(.archive-label) { margin: 0; color: var(--muted); font-size: .78rem; letter-spacing: .06em; line-height: 1.45; text-transform: uppercase; }
.archive-actions { position: relative; z-index: 1; min-height: 3.1rem; margin-top: 1.15rem; padding-top: .95rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; border-top: 1px solid var(--line-soft); }
.archive-actions a { min-width: 0; padding: .72rem .55rem; display: grid; place-items: center; border: 1px solid rgba(199,154,87,.18); color: var(--muted); font-size: .6rem; font-weight: 600; letter-spacing: .12em; line-height: 1.3; text-align: center; text-transform: uppercase; background: rgba(0,0,0,.14); }
.archive-actions a:hover { border-color: rgba(199,154,87,.42); color: var(--paper); background: rgba(199,154,87,.08); }
.archive-coming-soon { min-width: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .58rem; font-weight: 600; letter-spacing: .11em; line-height: 1.35; text-align: center; text-transform: uppercase; }

.legal-content { max-width: 880px; }
.legal-content h2 { margin: 2.8rem 0 .9rem; font-size: clamp(1.9rem, 3vw, 2.65rem); line-height: 1.08; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p { max-width: 48rem; }
.legal-date { margin-bottom: 2.2rem; color: var(--gold); font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.legal-note { margin-top: 3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.legal-note p { margin: 0; color: var(--paper-soft); }

/* The Eternal Lighthouse */
.lighthouse-page {
  --haven-ink: #050912;
  --haven-deep: #07111d;
  --haven-blue: #0b1828;
  --haven-fog: #b5bfbd;
  --haven-gold: #d6ad62;
  background:
    radial-gradient(circle at 18% 4%, rgba(37, 69, 93, .24), transparent 34rem),
    radial-gradient(circle at 84% 13%, rgba(214, 173, 98, .08), transparent 25rem),
    linear-gradient(180deg, var(--haven-ink), #07101a 44%, #05080e);
}
.lighthouse-page::before { opacity: .05; }
.lighthouse-header { border-color: rgba(214,173,98,.18); }
.lighthouse-hero {
  position: relative;
  isolation: isolate;
  max-width: var(--max);
  min-height: min(860px, calc(100vh - 5rem));
  margin: 0 auto;
  padding: clamp(1.35rem, 2vw, 2rem) var(--gutter) clamp(4rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6.5rem);
  overflow: hidden;
  border-bottom: 1px solid rgba(214,173,98,.18);
  background:
    linear-gradient(90deg, rgba(5,9,18,.9), rgba(7,17,29,.74) 46%, rgba(5,9,18,.96)),
    radial-gradient(circle at 17% 54%, rgba(214,173,98,.11), transparent 26rem),
    radial-gradient(circle at 84% 34%, rgba(93,116,130,.14), transparent 32rem);
}
.lighthouse-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,9,18,.2), rgba(5,9,18,.94)),
    repeating-linear-gradient(105deg, rgba(255,255,255,.028) 0 1px, transparent 1px 14px);
  opacity: .8;
  pointer-events: none;
}
.lighthouse-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 64% 22%, rgba(210,225,230,.36), transparent 31rem);
  pointer-events: none;
}
.lighthouse-hero.lightning-flash::after { animation: lightningPulse .48s ease-out; }
.lighthouse-weather, .lighthouse-weather span {
  position: absolute;
  inset: -18%;
  pointer-events: none;
}
.lighthouse-weather {
  z-index: -1;
  background:
    radial-gradient(ellipse at 72% 30%, rgba(214,173,98,.11), transparent 20rem),
    radial-gradient(ellipse at 20% 63%, rgba(177,195,198,.11), transparent 24rem),
    linear-gradient(180deg, transparent 0 58%, rgba(123,145,151,.13));
  filter: blur(.2px);
}
.lighthouse-weather span {
  opacity: .28;
  background:
    linear-gradient(100deg, transparent 0 36%, rgba(191,204,203,.12) 48%, transparent 62%),
    repeating-linear-gradient(102deg, transparent 0 18px, rgba(208,218,217,.08) 19px 20px, transparent 21px 42px);
  animation: havenFog 22s linear infinite;
}
.lighthouse-back-link {
  position: absolute;
  z-index: 2;
  top: clamp(1rem, 1.8vw, 1.55rem);
  left: var(--gutter);
  color: var(--haven-gold);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
}
.lighthouse-back-link::before { content: ""; display: inline-block; width: 1.7rem; height: 1px; margin: 0 .7rem .22rem 0; background: currentColor; opacity: .72; }
.lighthouse-book-wrap {
  perspective: 1200px;
  justify-self: center;
  width: min(100%, 430px);
  padding: clamp(2.4rem, 5vw, 4.5rem) 0;
}
.lighthouse-book {
  position: relative;
  width: min(72vw, 360px);
  aspect-ratio: 1122 / 1402;
  margin: 0 auto;
  transform: rotateY(-13deg) rotateX(2deg) rotateZ(-1deg);
  transform-style: preserve-3d;
  filter: drop-shadow(2rem 2.5rem 3.5rem rgba(0,0,0,.52));
}
.lighthouse-book::before {
  content: "";
  position: absolute;
  inset: -2.5% -3.5% -3.5% -6%;
  z-index: -3;
  border-radius: 2px 8px 8px 2px;
  background: radial-gradient(circle at 82% 18%, rgba(214,173,98,.22), transparent 34%), rgba(6,9,13,.76);
  filter: blur(18px);
  transform: translateZ(-42px);
}
.lighthouse-book img {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px 7px 7px 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 1px rgba(214,173,98,.18);
}
.lighthouse-book::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: 2px 7px 7px 2px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.42), transparent 10%, transparent 78%, rgba(214,173,98,.13)),
    linear-gradient(115deg, transparent 42%, rgba(255,238,189,.1) 49%, transparent 56%);
  pointer-events: none;
}
.lighthouse-book-spine {
  position: absolute;
  z-index: 1;
  top: 1.1%;
  bottom: 1.1%;
  left: -7.2%;
  width: 8.2%;
  border-radius: 5px 0 0 5px;
  background:
    linear-gradient(90deg, rgba(2,4,9,.9), rgba(16,24,36,.98) 45%, rgba(7,10,16,.94)),
    linear-gradient(180deg, rgba(214,173,98,.12), transparent 30%, rgba(214,173,98,.08));
  transform: rotateY(-82deg);
  transform-origin: right center;
  box-shadow: inset -1px 0 0 rgba(214,173,98,.18);
}
.lighthouse-book-pages {
  position: absolute;
  z-index: 0;
  top: 2.1%;
  right: -8%;
  bottom: 1.9%;
  width: 10%;
  border-radius: 0 7px 7px 0;
  background:
    repeating-linear-gradient(180deg, rgba(236,231,213,.72) 0 1px, rgba(125,119,105,.4) 1px 3px),
    linear-gradient(90deg, rgba(93,84,70,.72), rgba(238,230,214,.9));
  transform: rotateY(72deg);
  transform-origin: left center;
}
.lighthouse-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 690px;
  padding-top: 3rem;
}
.lighthouse-hero-copy h1 {
  max-width: 10ch;
  margin: 0 0 1.15rem;
  color: #f2eadb;
  font-size: clamp(3.3rem, 6vw, 6.45rem);
  letter-spacing: 0;
  text-shadow: 0 0 28px rgba(214,173,98,.08);
}
.lighthouse-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0 0 1.45rem;
  padding: 0;
  list-style: none;
}
.lighthouse-tags li {
  padding: .43rem .62rem;
  border: 1px solid rgba(214,173,98,.24);
  color: #d9d0bd;
  background: rgba(7,17,29,.62);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.25;
  text-transform: uppercase;
}
.lighthouse-hook {
  max-width: 34rem;
  margin-bottom: 1rem;
  color: var(--haven-gold);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.72rem);
  line-height: 1.32;
}
.lighthouse-description {
  max-width: 42rem;
  margin-bottom: 1.7rem;
  color: rgba(238,230,214,.78);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.72;
}
.lighthouse-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1rem;
}
.lighthouse-button {
  min-height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .82rem 1.15rem;
  border: 1px solid rgba(214,173,98,.34);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.lighthouse-button:hover { transform: translateY(-2px); }
.lighthouse-button-primary { background: var(--haven-gold); color: #070b12; border-color: var(--haven-gold); }
.lighthouse-button-secondary { color: #eee6d6; background: rgba(255,255,255,.025); }
.lighthouse-button-secondary:hover { border-color: rgba(214,173,98,.72); background: rgba(214,173,98,.08); }
.experience-control {
  width: min(100%, 28rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: stretch;
}
.experience-toggle, .experience-mute {
  border: 1px solid rgba(181,191,189,.17);
  background: rgba(6,12,20,.7);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.experience-toggle {
  min-width: 0;
  padding: .78rem .9rem;
  display: grid;
  gap: .18rem;
  text-align: left;
}
.experience-toggle:hover, .experience-mute:hover { border-color: rgba(214,173,98,.46); background: rgba(214,173,98,.07); }
.experience-main {
  color: #f0e7d5;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.3;
  text-transform: uppercase;
}
.experience-sub {
  color: rgba(181,191,189,.72);
  font-size: .78rem;
  line-height: 1.45;
}
.experience-control.is-active .experience-toggle { border-color: rgba(214,173,98,.42); background: rgba(214,173,98,.09); }
.experience-mute {
  position: relative;
  width: 2.9rem;
  min-height: 2.9rem;
}
.experience-mute::before, .experience-mute::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.experience-mute::before {
  left: .78rem;
  width: .92rem;
  height: .82rem;
  background: currentColor;
  color: var(--haven-gold);
  clip-path: polygon(0 32%, 34% 32%, 76% 0, 76% 100%, 34% 68%, 0 68%);
}
.experience-mute::after {
  right: .7rem;
  width: .42rem;
  height: .78rem;
  border: solid var(--haven-gold);
  border-width: 1px 1px 1px 0;
  border-radius: 0 100% 100% 0;
}
.experience-mute.is-muted::after {
  right: .8rem;
  width: .9rem;
  height: 1px;
  border: 0;
  background: var(--haven-gold);
  transform: translateY(-50%) rotate(-42deg);
}
.lighthouse-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(4.25rem, 6.4vw, 6.4rem) var(--gutter);
  border-bottom: 1px solid rgba(214,173,98,.16);
}
.lighthouse-section h2, .havenlight-copy h2, .lighthouse-final h2 {
  margin: 0 0 1.4rem;
  color: #efe7d8;
  font-size: clamp(2.55rem, 4.5vw, 4.35rem);
  letter-spacing: 0;
}
.lighthouse-section > p:not(.section-number), .havenlight-copy p:not(.section-number), .lighthouse-final p {
  max-width: 58rem;
  color: rgba(238,230,214,.76);
  font-size: clamp(1.06rem, 1.45vw, 1.22rem);
  line-height: 1.72;
}
.lighthouse-story {
  display: grid;
  grid-template-columns: minmax(7rem, .32fr) minmax(0, 1.68fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}
.lighthouse-story h2 { grid-column: 2; }
.lighthouse-story > p:last-child { grid-column: 2; margin: 0; }
.lighthouse-section-heading {
  display: grid;
  grid-template-columns: minmax(7rem, .35fr) minmax(0, 1.65fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.lighthouse-section-heading h2 { margin: 0; max-width: 12ch; }
.character-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}
.character-card {
  position: relative;
  min-width: 0;
  min-height: clamp(440px, 40vw, 560px);
  padding: clamp(1.25rem, 2.2vw, 1.65rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(214,173,98,.18);
  background: #07101a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 1.5rem 4rem rgba(0,0,0,.2);
}
.character-card::before, .character-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.character-card::before {
  background:
    linear-gradient(180deg, rgba(3,7,13,.2), rgba(3,7,13,.48) 42%, rgba(3,7,13,.9)),
    linear-gradient(105deg, rgba(4,11,22,.8), rgba(4,11,22,.12) 48%, rgba(4,11,22,.74));
}
.character-card::after {
  background:
    radial-gradient(circle at 50% 18%, rgba(181,191,189,.15), transparent 34%),
    linear-gradient(0deg, rgba(214,173,98,.16), transparent 38%);
  mix-blend-mode: screen;
  opacity: .62;
}
.character-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) brightness(.68) contrast(1.04);
}
.character-card:nth-child(1) img { object-position: center center; }
.character-card:nth-child(2) img { object-position: center 26%; }
.character-card:nth-child(3) img { object-position: center 28%; }
.character-card:nth-child(4) img { object-position: center 24%; }
.character-card h3 {
  margin: 0 0 .35rem;
  color: #efe7d8;
  font-size: clamp(1.55rem, 2.25vw, 2.15rem);
  letter-spacing: 0;
  text-shadow: 0 2px 1rem rgba(0,0,0,.66);
}
.character-subtitle {
  margin: 0 0 .7rem;
  color: var(--haven-gold);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.45vw, 1.25rem);
  line-height: 1.25;
  text-shadow: 0 2px 1rem rgba(0,0,0,.72);
}
.character-card p {
  max-width: 24rem;
  margin: 0;
  color: rgba(238,230,214,.8);
  text-shadow: 0 2px .9rem rgba(0,0,0,.72);
}
.character-card p:not(.character-subtitle) {
  font-size: .98rem;
  line-height: 1.6;
}
.havenlight-town {
  position: relative;
  isolation: isolate;
  max-width: var(--max);
  min-height: clamp(440px, 48vw, 610px);
  margin: 0 auto;
  padding: clamp(4.5rem, 8vw, 7rem) var(--gutter);
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid rgba(214,173,98,.16);
  background: #050912;
}
.havenlight-scene {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,9,18,.98), rgba(5,9,18,.74) 46%, rgba(5,9,18,.38) 78%, rgba(5,9,18,.84)),
    linear-gradient(180deg, rgba(5,9,18,.08), rgba(5,9,18,.52) 52%, rgba(5,9,18,.96)),
    radial-gradient(ellipse at 80% 34%, rgba(214,173,98,.18), transparent 24rem),
    radial-gradient(ellipse at 34% 65%, rgba(119,143,151,.24), transparent 32rem),
    linear-gradient(180deg, #071522, #050912 68%);
}
.havenlight-scene::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(68%, 52rem);
  background:
    linear-gradient(90deg, rgba(5,9,18,.92), rgba(5,9,18,.18) 38%, rgba(5,9,18,.62) 100%),
    linear-gradient(180deg, rgba(5,9,18,.14), rgba(5,9,18,.15) 46%, rgba(5,9,18,.86)),
    url("../assets/images/eternal-lighthouse/havenlight-cinematic-lighthouse.png") center 38% / cover no-repeat;
  opacity: .86;
  filter: saturate(.82) brightness(.82) contrast(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
  mask-image: linear-gradient(90deg, transparent, #000 22%);
}
.havenlight-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 73% 31%, rgba(214,173,98,.16), transparent 13rem),
    linear-gradient(90deg, rgba(5,9,18,.18), rgba(5,9,18,.36) 66%, rgba(5,9,18,.92)),
    linear-gradient(180deg, transparent 42%, rgba(5,9,18,.82));
  opacity: .8;
}
.havenlight-scene span {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(181,191,189,.12), transparent),
    repeating-linear-gradient(0deg, transparent 0 5.5rem, rgba(214,173,98,.13) 5.55rem 5.65rem, transparent 5.7rem 8rem);
  opacity: .28;
  transform: translateX(-10%);
  animation: havenFog 28s linear infinite;
}
.havenlight-scene i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background:
    radial-gradient(ellipse at 18% 72%, rgba(214,173,98,.4), transparent 1.8rem),
    radial-gradient(ellipse at 29% 64%, rgba(214,173,98,.33), transparent 1.35rem),
    radial-gradient(ellipse at 49% 73%, rgba(214,173,98,.32), transparent 1.7rem),
    linear-gradient(180deg, transparent, rgba(2,5,9,.84));
}
.havenlight-copy {
  width: min(100%, 46rem);
  padding: clamp(1.25rem, 3vw, 2rem) 0 0;
}
.archive-origin {
  display: grid;
  grid-template-columns: minmax(7rem, .32fr) minmax(0, 1.68fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}
.archive-origin h2, .archive-origin > p:last-child { grid-column: 2; }
.media-feature-grid {
  display: grid;
  grid-template-columns: minmax(15rem, .78fr) minmax(0, 1.22fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: start;
}
.trailer-archive-card, .theme-listening-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(214,173,98,.18);
  background:
    linear-gradient(145deg, rgba(214,173,98,.08), transparent 34%),
    linear-gradient(180deg, rgba(11,24,40,.78), rgba(5,9,18,.95));
}
.trailer-archive-card {
  min-height: 12rem;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.trailer-archive-card span, .theme-eyebrow {
  width: fit-content;
  margin-bottom: 1.4rem;
  color: var(--haven-gold);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.trailer-archive-card h3, .theme-listening-card h3 {
  margin: 0;
  color: #efe7d8;
  font-size: clamp(1.65rem, 2.6vw, 2.6rem);
  letter-spacing: 0;
}
.trailer-archive-card p {
  max-width: 18rem;
  margin: .75rem 0 0;
  color: rgba(238,230,214,.7);
  font-size: .96rem;
  line-height: 1.55;
}
.theme-listening-card {
  min-height: 22rem;
  display: grid;
  grid-template-columns: minmax(12rem, .52fr) minmax(0, 1fr);
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 1.5rem 4rem rgba(0,0,0,.2);
}
.theme-listening-card::before, .theme-listening-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.theme-listening-card::before {
  background:
    radial-gradient(ellipse at 22% 22%, rgba(214,173,98,.24), transparent 16rem),
    linear-gradient(120deg, rgba(11,24,40,.42), rgba(5,9,18,.86));
}
.theme-listening-card::after {
  background:
    linear-gradient(90deg, transparent, rgba(238,230,214,.06), transparent),
    repeating-linear-gradient(0deg, transparent 0 4.6rem, rgba(214,173,98,.08) 4.65rem 4.7rem, transparent 4.75rem 7.1rem);
  opacity: .22;
}
.theme-cover-wrap {
  padding: clamp(1rem, 2vw, 1.35rem);
  display: grid;
  align-items: center;
}
.theme-cover-wrap img {
  width: min(100%, 14rem);
  height: auto;
  max-height: 22rem;
  justify-self: center;
  object-fit: cover;
  border: 1px solid rgba(214,173,98,.26);
  box-shadow: 0 1.2rem 3.5rem rgba(0,0,0,.36), 0 0 2.25rem rgba(214,173,98,.11);
}
.theme-player-panel {
  min-width: 0;
  padding: clamp(1.35rem, 3vw, 2.25rem) clamp(1.2rem, 3vw, 2.35rem) clamp(1.3rem, 2.5vw, 2rem) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.theme-eyebrow { margin-bottom: 1rem; }
.theme-artist {
  margin: .45rem 0 0;
  color: var(--haven-gold);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.25;
}
.theme-support {
  margin: .65rem 0 0;
  color: rgba(238,230,214,.78);
  line-height: 1.55;
}
.theme-archive-note {
  margin: .45rem 0 1.35rem;
  color: rgba(181,191,189,.68);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.theme-player-controls {
  display: grid;
  grid-template-columns: 3.65rem minmax(0, 1fr) 2.45rem;
  gap: .9rem;
  align-items: center;
}
.theme-play-toggle, .theme-mute-toggle {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214,173,98,.34);
  color: #f1e4c7;
  background: rgba(214,173,98,.08);
  cursor: pointer;
}
.theme-play-toggle:hover, .theme-mute-toggle:hover {
  border-color: rgba(214,173,98,.52);
  background: rgba(214,173,98,.13);
}
.theme-play-toggle:focus-visible, .theme-mute-toggle:focus-visible, .theme-progress:focus-visible {
  outline: 2px solid rgba(214,173,98,.72);
  outline-offset: 3px;
}
.theme-play-toggle {
  width: 3.65rem;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 2rem rgba(214,173,98,.11);
}
.theme-play-icon {
  width: 0;
  height: 0;
  margin-left: .2rem;
  border-top: .55rem solid transparent;
  border-bottom: .55rem solid transparent;
  border-left: .82rem solid currentColor;
}
.theme-listening-card.is-playing .theme-play-icon {
  width: .9rem;
  height: 1.05rem;
  margin-left: 0;
  border: 0;
  background: linear-gradient(90deg, currentColor 0 .28rem, transparent .28rem .62rem, currentColor .62rem 100%);
}
.theme-progress-wrap { min-width: 0; }
.theme-progress {
  width: 100%;
  accent-color: var(--haven-gold);
  cursor: pointer;
}
.theme-time {
  margin-top: .28rem;
  display: flex;
  justify-content: space-between;
  color: rgba(238,230,214,.62);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.theme-mute-toggle {
  width: 2.45rem;
  aspect-ratio: 1;
}
.theme-mute-toggle span {
  position: relative;
  width: 1.1rem;
  height: .85rem;
  border-left: .34rem solid currentColor;
}
.theme-mute-toggle span::before {
  content: "";
  position: absolute;
  left: -.08rem;
  top: .12rem;
  width: .62rem;
  height: .62rem;
  border: .18rem solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}
.theme-mute-toggle.is-muted::after {
  content: "";
  position: absolute;
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  transform: rotate(-38deg);
}
.theme-storm-note, .theme-status {
  min-height: 1.2rem;
  margin: .8rem 0 0;
  color: rgba(214,173,98,.82);
  font-size: .82rem;
  line-height: 1.45;
}
.theme-status:empty { margin-top: 0; }
.lighthouse-final {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(4.25rem, 6.5vw, 6.5rem) var(--gutter);
  position: relative;
  border-bottom: 1px solid rgba(214,173,98,.16);
  background:
    radial-gradient(circle at 78% 18%, rgba(214,173,98,.13), transparent 24rem),
    linear-gradient(180deg, rgba(11,24,40,.32), transparent);
}
.lighthouse-final .lighthouse-back-link {
  position: static;
  display: inline-flex;
  margin-bottom: 2rem;
}
.lighthouse-final p {
  margin-bottom: 1.7rem;
  color: var(--haven-gold);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}
@keyframes havenFog {
  0% { transform: translate3d(-8%, 0, 0); }
  100% { transform: translate3d(8%, 0, 0); }
}
@keyframes lightningPulse {
  0%, 100% { opacity: 0; }
  12% { opacity: .55; }
  24% { opacity: .08; }
  38% { opacity: .28; }
}
.simple-list { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.simple-list li { padding: 1.35rem 1rem 1.35rem 0; border-bottom: 1px solid var(--line-soft); font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.7rem); }
.simple-list li:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.simple-list li:nth-child(even) { padding-left: 2rem; }
.about-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(290px, .82fr); align-items: center; gap: clamp(3rem, 7vw, 7rem); }
.author-photo-frame { position: relative; width: min(100%, 430px); margin: 0; justify-self: end; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid rgba(199,154,87,.34); background: var(--ink-soft); box-shadow: 0 2rem 4rem rgba(0,0,0,.38), inset 0 0 0 1px rgba(238,230,214,.04); }
.author-photo-frame::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(9,10,13,.04), transparent 42%, rgba(9,10,13,.28)), linear-gradient(90deg, rgba(9,10,13,.2), transparent 22%, transparent 78%, rgba(9,10,13,.22)); pointer-events: none; }
.author-photo-frame::after { content: ""; position: absolute; z-index: 2; inset: 0; box-shadow: inset 0 0 3.5rem rgba(0,0,0,.36), inset 0 0 0 1px rgba(224,184,115,.08); pointer-events: none; }
.author-photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(.96) contrast(1.02); }
.about-copy h2 { margin-bottom: 2rem; }
.about-copy p { max-width: 48rem; font-size: 1rem; }
.about-copy .byline-rule { margin: 2.25rem 0; padding: 1.2rem 0; border-block: 1px solid var(--line-soft); color: var(--paper); font-family: var(--serif); font-size: 1.3rem; }

[data-reveal] { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .site-header { min-height: 4.75rem; }
  .nav-toggle { display: flex; align-items: center; }
  .primary-nav { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 1px); display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 0; border-bottom: 1px solid var(--line); background: rgba(9,10,13,.98); }
  .primary-nav.is-open { display: flex; }
  .primary-nav > a { padding: .9rem 0; }
  .nav-group { display: grid; grid-template-columns: 1fr 2.75rem; gap: 0; border-bottom: 1px solid var(--line-soft); }
  .nav-group .nav-link { padding: .9rem 0; }
  .submenu-toggle { width: 2.75rem; height: 2.75rem; justify-self: end; }
  .submenu-toggle::after { left: auto; right: .45rem; top: 1.1rem; }
  .nav-menu { position: static; grid-column: 1 / -1; width: auto; min-width: 0; max-width: none; padding: 0 0 .75rem 1rem; border: 0; border-left: 1px solid var(--line); background: transparent; box-shadow: none; transform: none; }
  .nav-menu::before { display: none; }
  .nav-menu a { padding: .42rem 0; }
  .nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { display: none; }
  .nav-group.menu-open .nav-menu { display: block; }
  .hero { min-height: 620px; grid-template-columns: 1fr .58fr; }
  .hero-sigil { right: clamp(1rem, 4vw, 2rem); width: min(42vw, 340px); transform: translate(4%, -50%); }
  .section-heading, .music-strip, .reader-callout, .archive-preview, .contact-band, .page-hero, .note-panel, .about-layout { grid-template-columns: 1fr; }
  .section-heading > div { align-items: start; flex-direction: column; }
  .world-card { grid-column: span 6; }
  .world-card-wide { grid-column: span 6; }
  .world-card:nth-child(2), .world-card:nth-child(5) { margin-top: 0; }
  .archive-preview, .contact-band { gap: 3rem; }
  .author-photo-frame { justify-self: start; width: min(100%, 390px); }
  .site-footer { grid-template-columns: auto 1fr; }
  .footer-note { grid-column: 2; justify-self: start; }
  .page-hero { min-height: 380px; align-items: start; }
  .visual-hero { min-height: auto; gap: 1.5rem; }
  .page-hero-media { order: -1; width: 100%; min-height: 220px; justify-self: stretch; box-shadow: 0 1.6rem 3.25rem rgba(0,0,0,.32); }
  .page-hero-copy { padding: 0; }
  .editorial-item:nth-child(2), .editorial-item:nth-child(3) { margin-top: 0; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .archive-section-heading { grid-template-columns: 1fr; gap: 1rem; }
  .archive-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-cover-frame { height: clamp(270px, 48vw, 380px); }
}

@media (max-width: 680px) {
  :root { --gutter: 1.25rem; --section-space: 3.75rem; }
  .brand { font-size: 1rem; }
  .brand-mark { height: 2rem; }
  .hero { display: block; min-height: auto; padding-top: 4rem; padding-bottom: 3.25rem; }
  .hero h1 { font-size: clamp(2.9rem, 13vw, 4.25rem); line-height: 1; }
  .tagline { font-size: clamp(1.25rem, 6vw, 1.6rem); }
  .hero-statement { font-size: 1rem; }
  .hero-sigil[data-reveal] { top: 58%; right: -12vw; width: min(74vw, 360px); margin: 0; opacity: .24; transform: translateY(-50%); }
  .section-heading { gap: 1.5rem; margin-bottom: 2.5rem; }
  .section h2, .reader-callout h2, .contact-band h2 { font-size: clamp(2.65rem, 12vw, 3.5rem); }
  .world-grid { gap: 2rem 1rem; }
  .world-card, .world-card-wide { grid-column: 1 / -1; }
  .world-card-tall .art-frame { min-height: 320px; }
  .art-frame, .world-card-wide .art-frame { min-height: 220px; }
  .card-copy { min-height: 0; padding-bottom: 2rem; }
  .music-list li { grid-template-columns: 2.5rem 1fr 2.5rem; }
  .contact-list a, .contact-list p { grid-template-columns: 1fr; gap: .35rem; }
  .site-footer { display: grid; grid-template-columns: auto 1fr; align-items: center; }
  .footer-sigil { width: 4.5rem; height: 4.5rem; }
  .footer-links { gap: .45rem .8rem; }
  .footer-note { grid-column: 1 / -1; }
  .page-hero { min-height: 380px; }
  .visual-hero { padding-top: 2rem; padding-bottom: 3.25rem; }
  .page-hero h1 { font-size: clamp(3rem, 15vw, 4.75rem); overflow-wrap: anywhere; }
  .page-hero-media { min-height: 175px; aspect-ratio: 16 / 10; }
  .page-hero-media::before { background: linear-gradient(180deg, rgba(9,10,13,.05), rgba(9,10,13,.18) 42%, rgba(9,10,13,.66)); }
  .archive-quote h2, .archive-quote p:not(.archive-eyebrow) { font-size: clamp(1.125rem, 5vw, 1.25rem); line-height: 1.6; }
  .editorial-grid { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: 1fr; }
  .archive-book-grid { gap: 1rem; }
  .archive-book-card { padding: .8rem; }
  .archive-cover-frame { --cover-inset: .55rem; height: clamp(220px, 64vw, 330px); }
  .archive-book-copy h3 { min-height: auto; font-size: clamp(1.08rem, 5.6vw, 1.45rem); }
  .archive-book-copy p:not(.archive-label) { font-size: .66rem; }
  .archive-actions { grid-template-columns: 1fr; gap: .45rem; }
  .archive-actions a { padding: .58rem .4rem; font-size: .56rem; }
  .archive-coming-soon { min-height: 2rem; font-size: .54rem; }
  .simple-list { grid-template-columns: 1fr; }
  .simple-list li:nth-child(odd) { border-right: 0; }
  .simple-list li:nth-child(even) { padding-left: 0; }
  .author-photo-frame { width: min(100%, 340px); justify-self: center; }
}

@media (max-width: 460px) {
  .archive-book-grid { grid-template-columns: 1fr; }
  .archive-cover-frame { height: min(390px, 112vw); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-media-bg { display: none; }
  .hero-video-ready .hero-sigil[data-reveal] { opacity: .3; }
}

@media (max-width: 980px) {
  .lighthouse-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-top: 3.75rem;
  }
  .lighthouse-book-wrap {
    order: 0;
    width: min(100%, 380px);
    padding: 1.25rem 0 0;
  }
  .lighthouse-book { width: min(62vw, 330px); }
  .lighthouse-hero-copy {
    order: 1;
    max-width: 760px;
    padding-top: 1rem;
  }
  .lighthouse-story, .archive-origin, .lighthouse-section-heading {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .lighthouse-story h2, .lighthouse-story > p:last-child, .archive-origin h2, .archive-origin > p:last-child {
    grid-column: auto;
  }
  .character-card { min-height: 430px; }
}

@media (max-width: 680px) {
  .lighthouse-hero {
    padding-top: 3.5rem;
    padding-bottom: 3.75rem;
  }
  .lighthouse-back-link {
    top: 1rem;
    font-size: .62rem;
  }
  .lighthouse-book-wrap {
    width: min(100%, 310px);
    padding-top: .8rem;
  }
  .lighthouse-book { width: min(76vw, 280px); }
  .lighthouse-hero-copy h1 {
    max-width: 9ch;
    font-size: clamp(3rem, 14vw, 4.4rem);
  }
  .lighthouse-tags { gap: .45rem; }
  .lighthouse-tags li { font-size: .58rem; }
  .lighthouse-actions, .experience-control, .media-feature-grid {
    grid-template-columns: 1fr;
  }
  .lighthouse-actions {
    display: grid;
  }
  .lighthouse-button { width: 100%; }
  .experience-mute {
    width: 100%;
    min-height: 2.5rem;
  }
  .experience-mute::before { left: calc(50% - .85rem); }
  .experience-mute::after { right: calc(50% - .88rem); }
  .experience-mute.is-muted::after { right: calc(50% - 1rem); }
  .lighthouse-section, .lighthouse-final {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }
  .lighthouse-section h2, .havenlight-copy h2, .lighthouse-final h2 {
    font-size: clamp(2.5rem, 12vw, 3.45rem);
  }
  .lighthouse-section > p:not(.section-number), .havenlight-copy p:not(.section-number), .lighthouse-final p {
    font-size: 1rem;
  }
  .character-grid { grid-template-columns: 1fr; }
  .character-card { min-height: 390px; }
  .theme-listening-card {
    grid-template-columns: 1fr;
  }
  .theme-cover-wrap {
    min-height: auto;
    padding-bottom: .2rem;
  }
  .theme-cover-wrap img {
    width: min(100%, 16rem);
    max-height: 21rem;
  }
  .theme-player-panel {
    padding: 0 clamp(1.1rem, 5vw, 1.5rem) clamp(1.35rem, 5vw, 1.65rem);
  }
  .theme-player-controls {
    grid-template-columns: 3.4rem minmax(0, 1fr) 2.3rem;
    gap: .72rem;
  }
  .theme-play-toggle { width: 3.4rem; }
  .theme-mute-toggle { width: 2.3rem; }
  .havenlight-town {
    min-height: 470px;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .havenlight-scene::before {
    width: 100%;
    opacity: .76;
    background-position: 0 0, 0 0, 100% center;
    background-size: auto, auto, auto 100%;
    filter: saturate(.82) brightness(1.04) contrast(1.06);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .havenlight-scene::after {
    background:
      linear-gradient(180deg, rgba(5,9,18,.42), rgba(5,9,18,.76) 48%, rgba(5,9,18,.96)),
      linear-gradient(90deg, rgba(5,9,18,.82), rgba(5,9,18,.34) 70%, rgba(5,9,18,.76));
  }
}

@media (max-width: 420px) {
  .lighthouse-hero-copy h1 { font-size: clamp(2.75rem, 13vw, 3.55rem); }
  .lighthouse-hook { font-size: 1.2rem; }
  .lighthouse-description { font-size: .98rem; }
  .trailer-archive-card { min-height: 10.5rem; }
  .theme-listening-card h3 { font-size: 1.72rem; }
}