/* ==========================================================================
   Sunrise Story — home page
   The page reads as one day in Sunrise Bay: sunrise over the sea, the beach,
   the open water, the garden road, sunset with the locals, then dusk.
   ========================================================================== */

/* ---------- Hero: sunrise over the bay ---------- */
.hero {
    --focus: #fff;
    --hero-min: max(100svh, 700px);
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: var(--hero-min);
    padding: calc(var(--header-h) + 32px) 20px clamp(110px, 17vh, 190px);
    background: #3d87f0;
    overflow: hidden;
}
/* The painted backdrop keeps its aspect ratio so the sun can sit exactly on the horizon.
   It is sized from its height: at least as tall as the hero, and tall enough to span the screen width. */
.hero-art {
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 0;
    height: max(100%, calc(100vw / 1.7757));
    aspect-ratio: 2557 / 1440;
    transform: translateX(var(--art-shift, -50%));
}
.hero-art-img { width: 100%; height: 100%; }
.hero-sky {
    position: absolute;
    inset: 0 0 auto 0;
    height: 41.5%;
    overflow: hidden;
}
.hero-sun {
    position: absolute;
    left: 31%;
    bottom: 0;
    width: 10.5%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fffbe6 0 46%, #ffeaa3 62%, #ffd874 70%);
    box-shadow: 0 0 0 1.2vw rgba(255, 233, 160, 0.28), 0 0 5vw 2.6vw rgba(255, 214, 120, 0.5), 0 0 12vw 7vw rgba(255, 190, 110, 0.22);
    transform: translate(-50%, 48%);
    animation: sun-rise 3.4s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
/* Light on the water beneath the sun */
.hero-glint {
    position: absolute;
    left: 31%;
    top: 41.9%;
    width: 9%;
    height: 20%;
    transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, rgba(255, 246, 205, 0.95) 0 2px, transparent 2px 7px);
    -webkit-mask: radial-gradient(ellipse 50% 100% at 50% 0, #000 12%, transparent 100%);
    mask: radial-gradient(ellipse 50% 100% at 50% 0, #000 12%, transparent 100%);
    mix-blend-mode: screen;
    animation: glint-in 2.4s ease-out 1.4s both;
}
/* Dawn colours that lift as the sun comes up */
.hero-dawn {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(64, 44, 128, 0.72) 0%,
        rgba(196, 84, 110, 0.6) 30%,
        rgba(255, 150, 96, 0.55) 41%,
        rgba(132, 70, 132, 0.5) 52%,
        rgba(60, 44, 118, 0.4) 78%,
        rgba(254, 241, 225, 0) 89%);
    mix-blend-mode: multiply;
    opacity: 0;
    animation: dawn-lift 3.6s ease-out both;
}
@keyframes sun-rise { from { transform: translate(-50%, 104%); } }
@keyframes glint-in { from { opacity: 0; } }
@keyframes dawn-lift { from { opacity: 1; } to { opacity: 0; } }

.hero-content {
    display: grid;
    justify-items: center;
    gap: 18px;
    width: min(100%, 720px);
    text-align: center;
}
.hero-content > * { animation: hero-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-content > :nth-child(1) { animation-delay: 0.35s; }
.hero-content > :nth-child(2) { animation-delay: 0.6s; }
.hero-content > :nth-child(3) { animation-delay: 0.78s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(22px); } }

.hero-content > * { min-width: 0; max-width: 100%; }
.hero-title { display: grid; justify-items: center; gap: 10px; width: 100%; }
.hero-logo {
    width: min(92vw, 705px);
    max-width: 100%;
    filter: drop-shadow(0 5px 0 rgba(8, 58, 122, 0.5)) drop-shadow(0 16px 26px rgba(8, 50, 110, 0.35));
}
.hero-tagline {
    font-size: clamp(1.75rem, 1.15rem + 2.7vw, 2.9rem);
    color: #fff;
    text-shadow: 0 3px 0 rgba(8, 58, 122, 0.62), 0 8px 22px rgba(8, 50, 110, 0.4);
}
.hero-card {
    width: min(100%, 680px);
    padding: 18px clamp(16px, 4vw, 28px) 16px;
    background: rgba(255, 250, 243, 0.92);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: 0 var(--lift) 0 var(--ink);
}
@supports (backdrop-filter: blur(8px)) {
    .hero-card { background: rgba(255, 250, 243, 0.93); backdrop-filter: blur(10px); }
}
.hero-lead { font-weight: 500; }
.release {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 26px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 2px dashed rgba(20, 50, 79, 0.28);
}
.release-when { display: grid; line-height: 1.25; }
@media (min-width: 760px) {
    .release { flex-wrap: nowrap; }
    .release-when { text-align: left; }
}
.release-label { font-weight: 600; color: var(--ink-soft); }
.release-date {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.375rem, 7vw, 1.875rem);
    line-height: 1.15;
    color: var(--ember);
    white-space: nowrap;
}
.countdown {
    display: grid;
    grid-template-columns: repeat(4, 64px);
    gap: 8px;
}
.countdown-cell {
    display: grid;
    padding: 5px 2px 4px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 12px;
    line-height: 1.15;
}
.countdown-value { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.countdown-unit { font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; }

@media (max-width: 640px) {
    .hero { --art-shift: -56%; padding-bottom: 120px; }
    .hero-actions { width: 100%; flex-direction: column; }
    .countdown { grid-template-columns: repeat(4, minmax(0, 64px)); width: 100%; justify-content: center; }
    .countdown-unit { font-size: 0.6875rem; }
}

/* ---------- Sand: trailer + introduction ---------- */
.chapter--first .chapter-body { margin-top: -1px; }
#trailer { padding-top: clamp(24px, 4vw, 56px); }

.trailer {
    position: relative;
    max-width: 980px;
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    background: var(--ink);
}
.trailer-poster {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ink);
    text-decoration: none;
}
.trailer-poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.trailer-poster:hover img { transform: scale(1.03); }
.trailer-poster:focus-visible { outline-offset: -8px; --focus: #fff; }
.trailer-play {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(72px, 10vw, 104px);
    aspect-ratio: 1;
    padding-left: 5%;
    background: var(--sun);
    border: var(--line) solid var(--ink);
    border-radius: 50%;
    box-shadow: 0 var(--lift) 0 var(--ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.trailer-play .icon { width: 36%; height: 36%; }
.trailer-poster:hover .trailer-play { transform: translateY(-3px) scale(1.05); box-shadow: 0 9px 0 var(--ink); }
.trailer-label {
    position: absolute;
    left: 50%;
    bottom: clamp(12px, 3vw, 26px);
    transform: translateX(-50%);
    padding: 4px 16px;
    background: var(--paper);
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.0625rem;
    white-space: nowrap;
}
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer-note {
    margin-top: 22px;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

.about {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}
.scene-frame { aspect-ratio: 16 / 9; transform: rotate(-1.2deg); }
.scene-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.22s ease;
}
.scene-frame img.is-swapping { opacity: 0; }
.scene-selector {
    position: relative;
    z-index: 1;
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: -24px auto 0;
    padding: 5px;
    gap: 4px;
    background: var(--paper);
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    box-shadow: 0 5px 0 var(--ink);
}
.scene-selector button {
    padding: 5px clamp(10px, 2.4vw, 20px) 3px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.4;
    transition: background-color 0.15s ease;
}
.scene-selector button:hover { background: var(--sand-deep); }
.scene-selector button[aria-pressed="true"] { background: var(--sun); }

.about-lead { margin-top: 16px; font-size: var(--text-lg); font-weight: 500; }
.about-more { margin-top: 12px; }
.pillars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
    margin-top: 22px;
    font-weight: 600;
}
.pillars li { display: flex; align-items: baseline; gap: 10px; }
.pillars li::before {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    background: var(--sun);
    border: 2px solid var(--ink);
    border-radius: 50%;
    transform: translateY(1px);
}
.platforms-label {
    margin-top: 30px;
    font-size: 1.25rem;
    font-weight: 700;
}
.platforms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.platform {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.6);
    border: 2px dashed rgba(20, 50, 79, 0.4);
    border-radius: var(--radius-md);
    text-decoration: none;
}
.platform .icon { width: 26px; height: 26px; }
.platform-info { display: grid; line-height: 1.3; }
.platform-name { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
.platform-sub { font-size: 0.875rem; color: var(--ink-soft); }
.platform--live {
    background: var(--sun);
    border: var(--line) solid var(--ink);
    box-shadow: 0 5px 0 var(--ink);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.platform--live .platform-sub { color: var(--ink); }
.platform--live:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.platform--live:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }

@media (max-width: 900px) {
    .about { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .pillars, .platforms { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
    .scene-selector { gap: 0; }
    .scene-selector button { padding-inline: 9px; font-size: 0.9375rem; }
}

/* ---------- Sea: features ---------- */
.features { display: grid; gap: clamp(56px, 8vw, 112px); }
.feature {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5.5vw, 80px);
}
.feature-shot { --tilt: -1.4deg; aspect-ratio: 16 / 9; transform: rotate(var(--tilt)); }
.feature-shot img { width: 100%; height: 100%; object-fit: cover; }
.feature:nth-child(even) .feature-shot { --tilt: 1.4deg; order: 2; }
.feature-text p { margin-top: 14px; font-size: var(--text-lg); color: rgba(255, 255, 255, 0.92); }

/* Screenshots are set down like stickers as they scroll into view */
.js .feature-shot {
    opacity: 0;
    transform: rotate(calc(var(--tilt) * 4)) translateY(36px) scale(0.94);
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
.js .feature-shot.is-visible { opacity: 1; transform: rotate(var(--tilt)); }

@media (max-width: 820px) {
    .feature { grid-template-columns: minmax(0, 1fr); }
    .feature:nth-child(even) .feature-shot { order: 0; }
}

/* ---------- Sand: gallery of polaroids ---------- */
.gallery-grid {
    --per-row: 4;
    --gap-x: clamp(18px, 2.4vw, 34px);
    position: relative;
    left: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(30px, 3.6vw, 48px) var(--gap-x);
    width: min(100vw - var(--gutter) * 2, 1340px);
    padding-top: 14px;
    transform: translateX(-50%);
}
.gallery-grid .polaroid {
    --tilt: -2deg;
    flex: 0 0 calc((100% - var(--gap-x) * (var(--per-row) - 1)) / var(--per-row));
    aspect-ratio: auto;
    padding: 12px 12px 0;
    background: #fffdf8;
    border: 1px solid rgba(20, 50, 79, 0.14);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(20, 50, 79, 0.2), 0 16px 22px -12px rgba(20, 50, 79, 0.5);
    transform: rotate(var(--tilt));
    transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1.25), box-shadow 0.24s ease;
}
/* A strip of tape holding each photo to the page */
.gallery-grid .polaroid::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 50%;
    width: 34%;
    max-width: 104px;
    height: 26px;
    background: rgba(255, 208, 92, 0.8);
    box-shadow: 0 1px 2px rgba(20, 50, 79, 0.22);
    transform: translateX(-50%) rotate(var(--tape, -4deg));
}
.gallery-grid .polaroid img {
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 2px;
    outline: 1px solid rgba(20, 50, 79, 0.12);
    outline-offset: -1px;
}
.gallery-grid .polaroid .gallery-caption {
    position: static;
    display: block;
    max-width: none;
    padding: 9px 2px 13px;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--font-hand);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.15;
    text-align: center;
}
.gallery-grid .polaroid:nth-child(7n + 1) { --tilt: -2.6deg; --tape: 3deg; }
.gallery-grid .polaroid:nth-child(7n + 2) { --tilt: 1.8deg; --tape: -5deg; }
.gallery-grid .polaroid:nth-child(7n + 3) { --tilt: -1.2deg; --tape: 2deg; }
.gallery-grid .polaroid:nth-child(7n + 4) { --tilt: 2.8deg; --tape: -2deg; }
.gallery-grid .polaroid:nth-child(7n + 5) { --tilt: 2.2deg; --tape: 4deg; }
.gallery-grid .polaroid:nth-child(7n + 6) { --tilt: -2deg; --tape: -3deg; }
.gallery-grid .polaroid:nth-child(7n + 7) { --tilt: 1.4deg; --tape: 5deg; }
/* Picking a photo up straightens it */
.gallery-grid .polaroid:hover,
.gallery-grid .polaroid:focus-visible {
    z-index: 2;
    transform: rotate(0deg) translateY(-8px) scale(1.06);
    box-shadow: 0 2px 3px rgba(20, 50, 79, 0.2), 0 30px 34px -16px rgba(20, 50, 79, 0.55);
}
.gallery-grid .polaroid:focus-visible { border-radius: 4px; outline-offset: 5px; }

@media (max-width: 1199px) {
    .gallery-grid { --per-row: 3; }
}
@media (max-width: 760px) {
    .gallery-grid { --per-row: 2; }
    .gallery-grid .polaroid { padding: 9px 9px 0; }
    .gallery-grid .polaroid .gallery-caption { font-size: 1.3125rem; padding: 7px 2px 10px; }
}
@media (max-width: 460px) {
    .gallery-grid { --gap-x: 14px; row-gap: 26px; }
    .gallery-grid .polaroid { padding: 7px 7px 0; }
    .gallery-grid .polaroid::before { top: -10px; height: 20px; }
    .gallery-grid .polaroid .gallery-caption { font-size: 1.1875rem; padding: 6px 1px 9px; }
}

/* ---------- Garden: roadmap ---------- */
.chapter--garden .chapter-body { background: linear-gradient(180deg, var(--grass) 0%, var(--grass-deep) 100%); }
.chapter--garden { --chapter-ink-soft: #2c4a3c; }
.chapter--garden { --edge-h: 40px; }
.chapter--garden .chapter-body { padding-bottom: clamp(40px, 5.5vw, 76px); }
.edge--grass { --edge-shape: var(--shape-grass); --edge-color: var(--grass); --edge-tile: 96px; }

.stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background: var(--paper);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: 0 var(--lift) 0 var(--ink);
    overflow: hidden;
}
.stats li {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 2px;
    padding: 20px 10px 18px;
    text-align: center;
    border-left: 2px dashed rgba(20, 50, 79, 0.25);
}
.stats li:first-child { border-left: 0; }
.stats .icon { width: 24px; height: 24px; color: var(--leaf); }
.stat-value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.125rem, 1.6rem + 1.7vw, 3rem);
    line-height: 1.1;
}
.stat-label { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }

.journey { margin-top: clamp(40px, 6vw, 72px); }
.stops {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);
}
.stop {
    position: relative;
    padding: 20px 20px 22px;
    background: var(--paper);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: 0 var(--lift) 0 var(--ink);
}
/* Signpost down to the road */
.stop::after {
    content: "";
    position: absolute;
    left: 38px;
    top: calc(100% + var(--lift));
    width: 6px;
    height: 44px;
    background: var(--ink);
    border-radius: 0 0 3px 3px;
}
.stop-date {
    display: inline-block;
    padding: 3px 12px 2px;
    background: var(--sea);
    color: #fff;
    border: 2px solid var(--ink);
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.5;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.stop.is-reached .stop-date { background: var(--sun); color: var(--ink); }
.stop-title { margin-top: 12px; font-size: 1.5rem; }
.stop-desc { display: grid; gap: 8px; margin-top: 10px; font-size: var(--text-sm); line-height: 1.55; }

.road {
    position: relative;
    height: 92px;
    margin: 36px calc(50% - 50vw) 0;
    background:
        repeating-linear-gradient(90deg, #ffd95e 0 38px, transparent 38px 76px) left center / 100% 5px no-repeat,
        #5d6875;
    border-block: 6px solid #e6e9ee;
    box-shadow: 0 6px 0 rgba(20, 50, 79, 0.25);
}
.road-rider {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 136px;
    max-width: none;
    image-rendering: pixelated;
    transform: translateX(var(--ride, 12vw));
    will-change: transform;
}

@media (max-width: 1000px) {
    .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats li:nth-child(4) { border-left: 0; }
    .stats li:nth-child(n + 4) { border-top: 2px dashed rgba(20, 50, 79, 0.25); }
    .stops { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
    .stop::after { display: none; }
}
@media (max-width: 600px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats li { border-left: 0; border-top: 2px dashed rgba(20, 50, 79, 0.25); }
    .stats li:nth-child(even) { border-left: 2px dashed rgba(20, 50, 79, 0.25); }
    .stats li:nth-child(-n + 2) { border-top: 0; }
    .stops { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Sunset: community + locals ---------- */
.chapter--sunset .chapter-body {
    padding-bottom: 0;
    background: linear-gradient(180deg, #ffe3ae 0%, #ffc793 42%, #ffa487 80%, #f48d8c 100%);
}
.chapter--sunset { --chapter-ink-soft: #4a3f55; }
.edge--hills { --edge-shape: var(--shape-hills); --edge-color: #ffe3ae; --edge-tile: 100%; }

.voices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 36px);
    max-width: 1000px;
    margin-inline: auto;
}
.voice {
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 3vw, 32px);
    background: var(--paper);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: 0 var(--lift) 0 var(--ink);
    transform: rotate(-1deg);
}
.voice:nth-child(even) { transform: rotate(1deg); }
.voice-stars { display: flex; gap: 4px; color: var(--sun-deep); }
.voice-stars .icon { width: 20px; height: 20px; stroke: var(--ink); stroke-width: 28px; paint-order: stroke; }
.voice blockquote { margin-top: 14px; font-size: var(--text-lg); font-weight: 500; line-height: 1.55; }
.voice figcaption { display: grid; margin-top: auto; padding-top: 20px; line-height: 1.35; }
.voice-name { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }
.voice-role { font-size: var(--text-sm); color: var(--ink-soft); }

.locals { padding-top: clamp(8px, 2vw, 24px); }
.locals .section-head { margin-bottom: clamp(24px, 3vw, 36px); }
.locals-img { width: min(100%, 1240px); margin: clamp(28px, 4vw, 48px) auto 0; }

/* The game's pixel-art lanterns hung on its pixel-art rope across the top of the section (built by site.js).
   Lantern sheets are grids of 64px cells: one row per colour; columns are unlit, lit, glow.
   The lantern bodies use a copy enlarged 6x with hard pixel edges and are drawn at 3x with normal
   smoothing, so each art pixel stays a clean square and the swaying edges stay smooth. */
.lanterns {
    --s: 3;               /* whole-number scale shared by rope and lanterns */
    position: relative;
    height: calc(46px * var(--s) + 14px);
    margin-bottom: clamp(0px, 1vw, 12px);
}
/* Without scripting the strip stays empty, so it takes no room (it keeps its width for site.js to measure). */
.lanterns:empty { height: 0; margin: 0; }
.lanterns:empty::after { display: none; }
/* The rope: one sagging length repeated across the page. It never rotates, so it keeps hard pixel edges.
   It is drawn in front of the lanterns, whose caps tuck in behind it, and lets the pointer through to them. */
.lanterns::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 0 auto 0;
    height: calc(10px * var(--s));
    background: url("../lantern_rope.png") repeat-x var(--rope-x, 50%) 0 / calc(302px * var(--s)) calc(10px * var(--s));
    image-rendering: pixelated;
    pointer-events: none;
}
.lantern {
    position: absolute;
    isolation: isolate;
    /* left and top are set by site.js so each lantern meets the rope */
    width: calc(24px * var(--s));
    height: calc(36px * var(--s));
    margin-left: calc(-12px * var(--s));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* swing from the middle of the rope, which crosses the lantern's cap */
    transform-origin: 50% calc(3.5px * var(--s));
    animation: lantern-sway var(--t, 3.8s) ease-in-out var(--d, 0s) infinite alternate;
    will-change: transform;
}
@keyframes lantern-sway {
    from { transform: rotate(calc(var(--a, 5deg) * -1)); }
    to { transform: rotate(var(--a, 5deg)); }
}
.lantern::before,
.lantern::after,
.lantern-glow {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
}
.lantern::before,
.lantern::after {
    inset: 0;
    background-image: url("../lanterns_spritesheet_6x.png");
    background-size: calc(128px * var(--s)) calc(320px * var(--s));
}
.lantern::before { background-position: calc(-20px * var(--s)) calc((var(--row) * -64px - 14px) * var(--s)); }
.lantern::after {
    background-position: calc(-84px * var(--s)) calc((var(--row) * -64px - 14px) * var(--s));
    opacity: 0;
    transition: opacity 0.18s ease;
}
.lantern-glow {
    z-index: -1;
    left: calc(-20px * var(--s));
    top: calc(-14px * var(--s));
    width: calc(64px * var(--s));
    height: calc(64px * var(--s));
    background-image: url("../lanterns_spritesheet.png");
    background-size: calc(192px * var(--s)) calc(320px * var(--s));
    background-position: calc(-128px * var(--s)) calc(var(--row) * -64px * var(--s));
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.25s ease, transform 0.35s ease;
    pointer-events: none;
}
.lantern.is-lit::after { opacity: 1; }
.lantern.is-lit .lantern-glow { opacity: 1; transform: scale(1.5); animation: lantern-flicker 1.9s ease-in-out 0.35s infinite alternate; }
@media (hover: hover) {
    .lantern:hover::after { opacity: 1; }
    .lantern:hover .lantern-glow { opacity: 1; transform: scale(1.5); animation: lantern-flicker 1.9s ease-in-out 0.35s infinite alternate; }
}
@keyframes lantern-flicker {
    from { opacity: 1; }
    to { opacity: 0.78; }
}
/* Character picker: a row of small prints, then one polaroid with a postcard beside it */
.cast { max-width: 980px; }
.cast-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 34px;
    padding-top: 6px;
}
.cast-tab {
    --tilt: 0deg;
    width: 68px;
    padding: 4px 4px 13px;
    background: #fffdf8;
    border: 1px solid rgba(20, 50, 79, 0.16);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(20, 50, 79, 0.22), 0 9px 12px -7px rgba(20, 50, 79, 0.55);
    transform: rotate(var(--tilt));
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1.25), background-color 0.15s ease, box-shadow 0.2s ease;
}
.cast-thumb {
    display: block;
    aspect-ratio: 1;
    background: linear-gradient(180deg, #ffe7a6 0%, #ffbd84 100%);
    border-radius: 2px;
    overflow: hidden;
}
.cast-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.3);
    transform-origin: 50% 12%;
}
.cast-tab:hover { transform: rotate(0deg) translateY(-4px); }
.cast-tab[aria-selected="true"] {
    background: var(--sun);
    border-color: var(--ink);
    transform: rotate(0deg) translateY(-7px) scale(1.14);
    box-shadow: 0 1px 2px rgba(20, 50, 79, 0.22), 0 16px 16px -9px rgba(20, 50, 79, 0.6);
}
.cast-tab:focus-visible { border-radius: 3px; }

.cast-panels { display: grid; gap: 34px; }
.cast-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px 30px;
    text-align: left;
}
/* With scripting on, the cards share one spot so the page does not jump between characters. */
.js .cast-card { grid-area: 1 / 1; transition: opacity 0.25s ease, visibility 0s 0.25s; }
.js .cast-card:not(.is-active) { visibility: hidden; opacity: 0; }
.js .cast-card.is-active { transition: opacity 0.25s ease; }
.js .cast-card.is-active .cast-polaroid { animation: photo-drop 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2); }
@keyframes photo-drop {
    from { transform: rotate(-10deg) translateY(-16px) scale(1.05); }
}

.cast-polaroid {
    position: relative;
    z-index: 1;
    flex: 0 0 304px;
    margin: 0;
    padding: 13px 13px 0;
    background: #fffdf8;
    border: 1px solid rgba(20, 50, 79, 0.14);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(20, 50, 79, 0.2), 0 20px 26px -14px rgba(20, 50, 79, 0.55);
    transform: rotate(-3deg);
}
.cast-polaroid::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    width: 104px;
    height: 28px;
    background: rgba(255, 208, 92, 0.82);
    box-shadow: 0 1px 2px rgba(20, 50, 79, 0.22);
    transform: translateX(-50%) rotate(4deg);
}
.cast-polaroid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 0;
    background: linear-gradient(180deg, #ffe7a6 0%, #ffbd84 100%);
    border-radius: 2px;
    outline: 1px solid rgba(20, 50, 79, 0.12);
    outline-offset: -1px;
}
.cast-polaroid figcaption {
    padding: 8px 2px 13px;
    font-family: var(--font-hand);
    font-size: 1.875rem;
    line-height: 1.15;
    text-align: center;
}

/* The note beside the photo is a postcard: airmail stripe, lotus stamp, a nón lá resting on the corner */
.cast-note {
    position: relative;
    flex: 1 1 0;
    max-width: 560px;
    margin-left: -24px;
    padding: 40px 36px 40px 56px;
    background: var(--paper);
    border: 1px solid rgba(20, 50, 79, 0.14);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(20, 50, 79, 0.18), 0 20px 26px -16px rgba(20, 50, 79, 0.5);
    transform: rotate(1.2deg);
}
.cast-note::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 9px;
    border-radius: 5px 5px 0 0;
    background: repeating-linear-gradient(135deg, #de4666 0 12px, transparent 12px 24px, var(--sea) 24px 36px, transparent 36px 48px);
}
.cast-note h3 { padding-right: 92px; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.625rem); }
.cast-role {
    margin-top: 2px;
    padding-right: 92px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1875rem;
    line-height: 1.3;
    color: var(--ember);
}
.cast-bio { margin-top: 14px; font-size: var(--text-lg); line-height: 1.6; }
.cast-stamp {
    position: absolute;
    top: 26px;
    right: 24px;
    width: 62px;
    height: 76px;
    transform: rotate(5deg);
    filter: drop-shadow(0 2px 2px rgba(20, 50, 79, 0.28));
}
.cast-postmark {
    position: absolute;
    z-index: 1;
    top: 50px;
    right: 44px;
    width: 104px;
    height: 60px;
    opacity: 0.32;
    transform: rotate(-13deg);
}
.cast-hat {
    position: absolute;
    right: -30px;
    bottom: -40px;
    width: 122px;
    height: 102px;
    transform: rotate(14deg);
    filter: drop-shadow(0 8px 6px rgba(20, 50, 79, 0.28));
}
.cast-more {
    max-width: 46rem;
    margin: 30px auto 0;
    text-align: center;
    color: var(--chapter-ink-soft);
}

@media (max-width: 800px) {
    .cast-tabs { gap: 12px 9px; }
    .cast-tab { width: 60px; }
    .cast-card { flex-direction: column; justify-content: flex-start; padding: 12px 0 34px; }
    .cast-polaroid { flex: none; width: min(74vw, 270px); }
    .cast-polaroid figcaption { font-size: 1.625rem; }
    .cast-note { flex: none; width: 100%; max-width: 460px; margin: -18px 0 0; padding: 44px 22px 40px; transform: rotate(0.8deg); }
    .cast-stamp { top: 24px; right: 16px; width: 52px; height: 64px; }
    .cast-postmark { top: 42px; right: 32px; width: 88px; height: 51px; }
    .cast-note h3, .cast-role { padding-right: 76px; }
    .cast-hat { right: -8px; bottom: -34px; width: 96px; height: 80px; }
}

@media (max-width: 760px) {
    .voices { grid-template-columns: minmax(0, 1fr); }
    /* Let the line-up run wider than the screen so faces stay a readable size */
    .locals picture { display: block; overflow: hidden; }
    .locals-img { width: 150%; max-width: none; margin-left: -25%; }
}

/* ---------- Dusk: FAQ + closing call ---------- */
.chapter--dusk { --chapter-ink: #fff; --chapter-ink-soft: rgba(255, 255, 255, 0.88); --focus: var(--sun); }
.chapter--dusk .chapter-body {
    padding-bottom: 0;
    background: linear-gradient(180deg, var(--dusk-top) 0%, #2d4f80 45%, var(--dusk) 100%);
}
.edge--dusk { --edge-shape: var(--shape-wave); --edge-color: var(--dusk-top); --edge-tile: 560px; }
.edge--dusk .edge-back { --edge-shape: var(--shape-wave-offset); --edge-color: #8a5f9e; opacity: 0.85; }
/* First stars, kept to the strip of open sky above the questions */
.chapter--dusk .chapter-body::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 5%;
    width: 4px;
    height: 4px;
    background: #fff;
    opacity: 0.85;
    box-shadow:
        11vw 22px 0 #fff, 24vw 6px 0 #ffe9a8, 39vw 30px 0 #fff, 55vw 12px 0 #fff,
        68vw 34px 0 #ffe9a8, 81vw 4px 0 #fff, 90vw 26px 0 #fff;
    pointer-events: none;
}

.faq {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: clamp(24px, 5vw, 72px);
}
.faq .section-head { position: sticky; top: calc(var(--header-h) + 48px); margin-bottom: 0; }
.faq-list { display: grid; gap: 12px; }
.faq-item {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.32);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
}
.faq-item[open] { background: rgba(255, 255, 255, 0.17); border-color: rgba(255, 255, 255, 0.6); }
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.3;
    cursor: pointer;
    list-style: none;
    border-radius: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { width: 18px; height: 18px; color: var(--sun); transition: transform 0.2s ease; }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-answer { padding: 0 20px 20px; color: rgba(255, 255, 255, 0.92); }

.closing {
    display: grid;
    justify-items: center;
    gap: 22px;
    padding-block: clamp(24px, 5vw, 64px) clamp(64px, 8vw, 104px);
    text-align: center;
}
.closing-logo { position: relative; width: min(74vw, 420px); }
/* The lighthouse in the logo keeps its lamp on */
.closing-beam {
    position: absolute;
    left: 73.7%;
    top: 26%;
    width: 62%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 226, 130, 0.95) 0 5%, rgba(255, 214, 110, 0.5) 16%, rgba(255, 200, 90, 0.16) 40%, rgba(255, 200, 90, 0) 66%);
    animation: lamp 3.6s ease-in-out infinite alternate;
}
@keyframes lamp { from { opacity: 0.45; transform: translate(-50%, -50%) scale(0.86); } }
.closing-logo img { position: relative; }
.closing h2 { max-width: 20ch; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; margin-top: 6px; }

@media (max-width: 860px) {
    .faq { grid-template-columns: minmax(0, 1fr); }
    .faq .section-head { position: static; }
}
@media (max-width: 520px) {
    .closing-actions { width: 100%; flex-direction: column; }
}

/* ---------- Ambient sound button ---------- */
.audio-fab {
    position: fixed;
    right: clamp(12px, 2vw, 24px);
    bottom: clamp(12px, 2vw, 24px);
    z-index: 40;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    background: var(--paper);
    border: var(--line) solid var(--ink);
    border-radius: 50%;
    box-shadow: 0 5px 0 var(--ink);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.audio-fab:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.audio-fab:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.audio-fab .icon { width: 22px; height: 22px; }
.audio-fab .icon-on, .audio-fab.playing .icon-off { display: none; }
.audio-fab.playing { background: var(--sun); }
.audio-fab.playing .icon-on { display: block; }
.audio-status {
    position: fixed;
    right: clamp(12px, 2vw, 24px);
    bottom: calc(clamp(12px, 2vw, 24px) + 66px);
    z-index: 40;
    max-width: min(280px, calc(100vw - 24px));
    padding: 8px 12px;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 12px;
    font-size: var(--text-sm);
    font-weight: 600;
}
.audio-status:empty { display: none; }

/* ---------- Reduced motion: everything settles in its final place ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-dawn { display: none; }
    .edge--sea .edge-back { animation: none; }
    .js .feature-shot { opacity: 1; transform: rotate(var(--tilt)); }
    .closing-beam { animation: none; }
    .lantern, .lantern .lantern-glow { animation: none !important; }
    .js .cast-card.is-active .cast-polaroid { animation: none; }
}