/* =========================================================================
   molioweb — "The Reel"
   Warm-editorial identity, cinematic delivery. Cream paper for the chrome,
   a deep warm-black stage for the photographs, gold + dusty-mauve accents.
   ========================================================================= */

:root {
    /* palette */
    --paper:      #F4EEE3;
    --paper-2:    #ECE3D4;
    --paper-3:    #E3D7C2;
    --ink:        #29271F;
    --ink-2:      #5E594C;
    --ink-3:      #8C8576;
    --olive:      #6F6E4A;
    --mauve:      #A07C7C;
    --mauve-soft: #C6ADAB;
    --gold:       #C6A256;
    --gold-soft:  #E6CE97;
    --line:       #D9CFBD;
    --dark:       #131110;
    --dark-2:     #0C0B0A;
    --shadow-rgb: 41 39 31;

    /* type */
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --pixel: "Press Start 2P", "Courier New", ui-monospace, monospace;

    /* motion */
    --ease-out:    cubic-bezier(.22, .61, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-fast: 160ms;
    --dur:      240ms;
    --dur-slow: 460ms;

    --pad:  clamp(20px, 5vw, 92px);
    --maxw: 1720px;
    --maxw-book: 1180px;
    --gut: clamp(12px, 1.4vw, 22px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
::selection { background: var(--mauve-soft); color: var(--ink); }

/* ---- Atmosphere -------------------------------------------------------- */
.grain, .vignette { position: fixed; inset: 0; pointer-events: none; z-index: 9000; }
.grain {
    opacity: .05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette { background: radial-gradient(120% 120% at 50% 38%, transparent 52%, rgb(var(--shadow-rgb) / .12) 100%); z-index: 8999; }
@media (prefers-reduced-motion: no-preference) { .grain { animation: grainShift 7s steps(6) infinite; } }
@keyframes grainShift {
    0%,100% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); }
    40% { transform: translate(3%,-4%); } 60% { transform: translate(-3%,-2%); } 80% { transform: translate(2%,4%); }
}

/* ---- Type helpers ------------------------------------------------------ */
.eyebrow { font-weight: 500; font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-3); }
.amp { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--mauve); }

/* =========================================================================
   LOGIN GATE
   ========================================================================= */
.gate { min-height: 100svh; display: grid; place-items: center; padding: var(--pad); position: relative; overflow: hidden; }
.gate__amp {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%);
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: min(78vh, 64vw); line-height: 1;
    background: linear-gradient(135deg, var(--mauve), var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    opacity: .09; user-select: none; pointer-events: none;
}
.gate__card { position: relative; width: min(420px, 100%); text-align: center; }
.gate__names { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.05; margin: 0 0 .9rem; letter-spacing: -.01em; }
.gate__names .amp { font-size: .9em; margin: 0 .12em; }
.gate__lead { color: var(--ink-2); font-size: .98rem; margin: 0 0 2.4rem; }
.field { position: relative; margin: 0 auto 1.5rem; max-width: 320px; }
.field input {
    width: 100%; padding: .7rem .2rem; text-align: center; font-family: var(--sans);
    font-size: 1.05rem; letter-spacing: .06em; color: var(--ink); background: transparent;
    border: 0; border-bottom: 1.5px solid var(--line); outline: none;
    transition: border-color var(--dur) var(--ease-out);
}
.field input::placeholder { color: var(--ink-3); letter-spacing: .2em; }
.field input:focus { border-color: var(--mauve); }
.btn {
    display: inline-flex; align-items: center; gap: .55em; padding: .82rem 2rem;
    font-weight: 500; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--paper); background: var(--ink); border-radius: 100px;
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out);
    will-change: transform;
}
.btn:hover { background: var(--olive); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .5; cursor: default; }
.btn--ghost { color: var(--ink); background: transparent; border: 1.5px solid var(--line); }
.btn--ghost:hover { background: transparent; border-color: var(--mauve); color: var(--olive); }
.gate__error { min-height: 1.2em; margin-top: 1.3rem; font-size: .85rem; color: var(--mauve); opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.gate__error.show { opacity: 1; }
.gate.shake .gate__card { animation: shake .42s var(--ease-in-out); }
@keyframes shake { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-8px)} 40%,60%{transform:translateX(8px)} }
.gate__eyebrow, .gate__names, .gate__lead, .field, .gate__actions { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: no-preference) {
    .gate__eyebrow { animation: riseIn var(--dur-slow) var(--ease-out) 0s   forwards; }
    .gate__names   { animation: riseIn var(--dur-slow) var(--ease-out) .07s forwards; }
    .gate__lead    { animation: riseIn var(--dur-slow) var(--ease-out) .16s forwards; }
    .field         { animation: riseIn var(--dur-slow) var(--ease-out) .24s forwards; }
    .gate__actions { animation: riseIn var(--dur-slow) var(--ease-out) .32s forwards; }
}
@media (prefers-reduced-motion: reduce) {
    .gate__eyebrow,.gate__names,.gate__lead,.field,.gate__actions { opacity: 1; transform: none; }
}
@keyframes riseIn { to { opacity: 1; transform: none; } }

/* =========================================================================
   HEADER
   ========================================================================= */
.topbar {
    position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center;
    justify-content: space-between; padding: 1.1rem var(--pad);
    transform: translateY(-100%);
    transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
    color: #fff;
}
.topbar.show { transform: translateY(0); background: rgb(244 238 227 / .9); backdrop-filter: blur(12px); color: var(--ink); }
.topbar__mono { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .02em; }
.topbar__link { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: inherit; opacity: .85; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }
.topbar__link:hover { opacity: 1; border-color: var(--gold); }
.topbar__chapter { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--serif); font-style: italic; font-size: .95rem; color: inherit; opacity: 0; transition: opacity .25s var(--ease-out); white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.topbar__chapter.show { opacity: .85; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; background: var(--dark); }
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background-color: var(--paper-3); }

/* ambient crossfading Ken Burns layers — hero background + featured reel */
.ambient-layer { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.04); transition: opacity 1.6s var(--ease-in-out); will-change: opacity, transform; }
.ambient-layer.on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .ambient-layer.on { animation: ambientKB var(--akb, 12s) ease-out forwards; } }
@keyframes ambientKB { from { transform: scale(1.04); } to { transform: scale(1.17); } }
@media (prefers-reduced-motion: reduce) { .ambient-layer { transition: opacity .4s ease; transform: none; } }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgb(12 11 10 / .42) 0%, rgb(12 11 10 / .12) 28%, transparent 50%, rgb(12 11 10 / .68) 100%); }
.hero__inner { padding: var(--pad); color: #fff; max-width: 1180px; position: relative; }
.hero__inner::before {
    content: ""; position: absolute; inset: -18% -10%; z-index: -1;
    background: radial-gradient(60% 55% at 50% 48%, rgb(20 16 12 / .45), transparent 70%);
    filter: blur(8px);
}
.hero__eyebrow { color: rgb(255 255 255 / .86); margin-bottom: 1.7rem; opacity: 0; display: inline-flex; align-items: center; gap: 1rem; }
.hero__eyebrow::before, .hero__eyebrow::after { content: ""; height: 1px; width: clamp(20px, 6vw, 64px); background: linear-gradient(90deg, transparent, var(--gold-soft)); }
.hero__eyebrow::after { background: linear-gradient(90deg, var(--gold-soft), transparent); }
.hero__names { font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; font-size: clamp(3.6rem, 14vw, 12rem); line-height: .9; letter-spacing: -.02em; margin: 0; text-shadow: 0 4px 60px rgb(12 11 10 / .5); }
.hero__names .name { display: inline-block; }
.hero__names .amp {
    display: block; font-size: .56em; margin: .02em 0;
    background: linear-gradient(135deg, var(--gold-soft), var(--mauve-soft) 55%, var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 24px rgb(198 162 86 / .35));
}
.hero__tagline { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 2.4vw, 1.8rem); color: rgb(255 255 255 / .94); margin: 1.8rem 0 0; opacity: 0; }
.hero__names .char { display: inline-block; opacity: 0; transform: translateY(.5em); }
@media (prefers-reduced-motion: no-preference) {
    .hero.ready .hero__names .char { animation: charRise .85s var(--ease-out) forwards; }
    .hero.ready .hero__eyebrow { animation: riseIn var(--dur-slow) var(--ease-out) .1s forwards; }
    .hero.ready .hero__tagline { animation: riseIn var(--dur-slow) var(--ease-out) 1.15s forwards; }
    .hero.ready .scrollcue { animation: riseIn var(--dur-slow) var(--ease-out) 1.45s forwards; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__names .char, .hero__eyebrow, .hero__tagline, .scrollcue { opacity: 1 !important; transform: none !important; }
}
@keyframes charRise { to { opacity: 1; transform: none; } }
.scrollcue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 1; display: grid; justify-items: center; gap: .6rem; color: rgb(255 255 255 / .82); opacity: 0; }
.scrollcue .eyebrow { color: inherit; font-size: .62rem; }
.scrollcue__line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--gold-soft), transparent); }
@media (prefers-reduced-motion: no-preference) { .scrollcue__line { animation: cuePulse 2.4s var(--ease-in-out) infinite; transform-origin: top; } }
@keyframes cuePulse { 0%,100%{transform:scaleY(.4);opacity:.35} 50%{transform:scaleY(1);opacity:1} }

/* =========================================================================
   FEATURED REEL — auto-playing band of starred photos (under the hero)
   ========================================================================= */
.reel { position: relative; height: clamp(58vh, 84vh, 920px); overflow: hidden; background: var(--dark-2); isolation: isolate; cursor: pointer; }
.reel[hidden] { display: none; }
.reel__layers { position: absolute; inset: 0; z-index: 0; }
.reel__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(120% 100% at 50% 50%, transparent 52%, rgb(12 11 10 / .5) 100%),
                linear-gradient(to bottom, rgb(12 11 10 / .32) 0%, transparent 26%, transparent 70%, rgb(12 11 10 / .5) 100%); }
.reel__open { position: absolute; left: 50%; bottom: clamp(22px, 5vh, 54px); transform: translateX(-50%); z-index: 2;
    display: inline-flex; align-items: center; gap: .6rem; color: #fff; background: rgb(255 255 255 / .1); backdrop-filter: blur(8px);
    border: 1px solid rgb(255 255 255 / .26); border-radius: 100px; padding: .58rem 1.4rem;
    font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; transition: background .24s var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.reel:hover .reel__open { background: rgb(255 255 255 / .2); }
.reel__open:active { transform: translateX(-50%) scale(.96); }
.reel__open svg { width: 13px; height: 13px; fill: currentColor; }

/* =========================================================================
   THE FILM — cinematic Ken Burns slideshow
   ========================================================================= */
.film {
    position: fixed; inset: 0; z-index: 300; overflow: hidden;
    background: radial-gradient(120% 120% at 50% 30%, #1b1815, var(--dark-2));
    isolation: isolate;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .34s var(--ease-out), visibility 0s linear .34s;
}
.film[hidden] { display: block; }   /* visibility is controlled by .open, not the attribute */
.film.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .34s var(--ease-out); }
.film__track { position: absolute; inset: 0; z-index: 1; }

/* ambient colour-bleed: the stage glows with the current photo's own light */
.film__ambient {
    position: absolute; inset: -10%; z-index: 0; background-size: cover; background-position: center;
    filter: blur(40px) brightness(.45); transform: scale(1.22) translateZ(0); opacity: 0;
    transition: opacity 1.1s var(--ease-in-out);
}
.film__ambient.show { opacity: .35; }
@media (max-width: 680px) { .film__ambient { filter: blur(24px) brightness(.45); } }

/* room-title flash on open */
.film__roomtitle {
    position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; text-align: center; padding: var(--pad);
    color: #fff; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2rem, 6vw, 4rem);
    pointer-events: none; opacity: 0; text-shadow: 0 2px 30px rgb(0 0 0 / .55);
}
.film__roomtitle.flash { animation: roomFlash 1.6s var(--ease-in-out) forwards; }
@keyframes roomFlash { 0% { opacity: 0; transform: translateY(12px); } 22% { opacity: 1; transform: none; } 68% { opacity: 1; } 100% { opacity: 0; } }

/* close + idle auto-hide chrome */
.film__close {
    position: absolute; top: clamp(16px, 3vw, 28px); left: clamp(16px, 4vw, 44px); z-index: 9;
    width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff;
    background: rgb(255 255 255 / .08); backdrop-filter: blur(6px);
    transition: background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.film__close:hover { background: rgb(198 162 86 / .5); }
.film__close:active { transform: scale(.92); }
.film__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.film.chrome-hidden .film__nav,
.film.chrome-hidden .film__controls,
.film.chrome-hidden .film__close,
.film.chrome-hidden .filmstrip,
.film.chrome-hidden .film__caption,
.film.chrome-hidden .film__counter { opacity: 0 !important; pointer-events: none; transition: opacity .3s var(--ease-out); }

/* FLIP flight clone (lift off the page) */
.flip-clone {
    position: fixed; z-index: 320; overflow: hidden; border-radius: 2px;
    background-size: cover; background-position: center; box-shadow: 0 30px 80px rgb(0 0 0 / .5);
    will-change: transform; pointer-events: none;
}

.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease-in-out), visibility 0s linear 1.1s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease-in-out); z-index: 2; }

.slide__img { position: absolute; inset: -5%; width: 110%; height: 110%; background-size: cover; background-position: center; will-change: transform; transform: scale(1.04); }
.slide.is-active .slide__img.kb0 { animation: kb0 var(--kb,7000ms) var(--ease-in-out) forwards; }
.slide.is-active .slide__img.kb1 { animation: kb1 var(--kb,7000ms) var(--ease-in-out) forwards; }
.slide.is-active .slide__img.kb2 { animation: kb2 var(--kb,7000ms) var(--ease-in-out) forwards; }
.slide.is-active .slide__img.kb3 { animation: kb3 var(--kb,7000ms) var(--ease-in-out) forwards; }
.slide.is-active .slide__img.kb4 { animation: kb4 var(--kb,7000ms) var(--ease-in-out) forwards; }
.slide.is-active .slide__img.kb5 { animation: kb5 var(--kb,7000ms) var(--ease-in-out) forwards; }
@keyframes kb0 { from{transform:scale(1.03) translate(0,0)}      to{transform:scale(1.15) translate(-2%,-1.5%)} }
@keyframes kb1 { from{transform:scale(1.15) translate(1.5%,1%)}  to{transform:scale(1.03) translate(0,0)} }
@keyframes kb2 { from{transform:scale(1.05) translate(1.5%,0)}   to{transform:scale(1.16) translate(-1.5%,-2%)} }
@keyframes kb3 { from{transform:scale(1.16) translate(-2%,1.5%)} to{transform:scale(1.04) translate(0,0)} }
@keyframes kb4 { from{transform:scale(1.04) translate(0,-1%)}    to{transform:scale(1.14) translate(2%,1.5%)} }
@keyframes kb5 { from{transform:scale(1.14) translate(-1.5%,-1%)}to{transform:scale(1.05) translate(1%,1.5%)} }
@media (prefers-reduced-motion: reduce) { .slide__img { animation: none !important; transform: scale(1.02) !important; } }

.film__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(130% 100% at 50% 40%, transparent 58%, rgb(12 11 10 / .5) 100%),
                linear-gradient(to top, rgb(12 11 10 / .72) 0%, transparent 32%); }

/* chapter title cards */
.slide--chapter .slide__img { filter: brightness(.4) saturate(.85); }
.slide__card { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; text-align: center; color: #fff; padding: var(--pad); }
.slide__num { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2.6rem, 7vw, 5rem);
    background: linear-gradient(135deg, var(--gold-soft), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.slide__ctitle { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 6vw, 4.2rem); margin: .4rem 0 0; letter-spacing: -.01em; }
.slide__csub { font-family: var(--serif); font-style: italic; color: rgb(255 255 255 / .8); font-size: clamp(1rem, 2vw, 1.4rem); margin-top: .6rem; }

/* progress */
.film__progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 6; background: rgb(255 255 255 / .12); }
.film__progress-bar { height: 100%; transform-origin: left; transform: scaleX(0);
    background: linear-gradient(90deg, var(--gold), var(--mauve-soft)); }
.film__progress-bar.run { animation: fill var(--kb,7000ms) linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* caption + counter */
.film__counter { position: absolute; top: clamp(18px, 3vw, 30px); left: clamp(18px, 4vw, 44px); z-index: 6;
    color: var(--gold-soft); font-size: .74rem; letter-spacing: .28em; font-variant-numeric: tabular-nums; }
.film__caption { position: absolute; left: 0; right: 0; bottom: clamp(120px, 16vh, 180px); z-index: 6; text-align: center;
    color: rgb(255 255 255 / .94); font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2.4vw, 1.7rem);
    padding: 0 var(--pad); pointer-events: none; text-shadow: 0 2px 24px rgb(0 0 0 / .5);
    opacity: 0; transition: opacity .8s var(--ease-out); }
.film__caption.show { opacity: 1; }

/* nav arrows */
.film__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 7; width: 60px; height: 60px;
    display: grid; place-items: center; border-radius: 50%; color: #fff;
    background: rgb(255 255 255 / .07); backdrop-filter: blur(6px);
    transition: background var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    opacity: 0; }
.film:hover .film__nav, .film:focus-within .film__nav { opacity: .9; }
.film__nav:hover { background: rgb(198 162 86 / .55); }
.film__nav:active { transform: translateY(-50%) scale(.92); }
.film__nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.film__nav--prev { left: clamp(12px, 3vw, 38px); }
.film__nav--next { right: clamp(12px, 3vw, 38px); }
@media (hover: none) { .film__nav { opacity: .8; } }

/* play / download controls */
.film__controls { position: absolute; top: clamp(16px, 3vw, 28px); right: clamp(16px, 4vw, 44px); z-index: 7; display: flex; gap: .6rem; }
.film__controls button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
    color: #fff; background: rgb(255 255 255 / .08); backdrop-filter: blur(6px);
    transition: background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.film__controls button:hover { background: rgb(198 162 86 / .5); }
.film__controls button:active { transform: scale(.92); }
.film__controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* filmstrip */
.filmstrip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; gap: 10px;
    padding: 16px clamp(14px, 4vw, 44px) 20px; overflow-x: auto; scrollbar-width: none;
    background: linear-gradient(to top, rgb(12 11 10 / .82), transparent);
    -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.filmstrip::-webkit-scrollbar { display: none; }
.filmstrip__thumb { position: relative; flex: 0 0 auto; width: 78px; height: 54px; border-radius: 6px; overflow: hidden;
    background-size: cover; background-position: center; opacity: .5; filter: saturate(.8);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
    outline: none; }
.filmstrip__thumb:hover { opacity: .85; transform: translateY(-2px); }
.filmstrip__thumb.is-active { opacity: 1; transform: translateY(-4px); box-shadow: 0 0 0 2px var(--gold), 0 8px 22px rgb(0 0 0 / .5); filter: none; }
.filmstrip__thumb--chapter { display: grid; place-items: center; color: var(--gold-soft); font-family: var(--serif); font-style: italic; background: #211d18; }
@media (max-width: 680px) { .filmstrip__thumb { width: 60px; height: 42px; } .film__caption { bottom: clamp(96px, 14vh, 140px); } }

/* =========================================================================
   THE BOOK — cream-paper categorized grid
   ========================================================================= */
.book { max-width: var(--maxw-book); margin: 0 auto; padding: clamp(18px, 3vw, 36px) var(--pad) clamp(56px, 8vw, 110px); }
.book .loading, .book .empty { display: block; height: auto; color: var(--ink-3); padding: clamp(60px, 14vw, 160px) 1rem; }

.chapter { content-visibility: auto; }
.chapter__plate { text-align: center; margin: clamp(54px, 11vh, 150px) auto clamp(26px, 4vw, 50px); opacity: 0; transform: translateY(16px); }
.chapter:first-child .chapter__plate { margin-top: clamp(24px, 5vw, 60px); }
.chapter__plate.in { opacity: 1; transform: none; transition: opacity .56s var(--ease-out), transform .56s var(--ease-out); }
.chapter__num {
    font-family: var(--serif); font-style: italic; font-weight: 300; line-height: 1; font-size: clamp(2.4rem, 7vw, 5rem);
    background: linear-gradient(135deg, var(--gold-soft), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1px 0 rgb(255 255 255 / .5)) drop-shadow(0 -1px 1px rgb(41 39 31 / .16));
}
.chapter__title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 5vw, 3.4rem); margin: .3rem 0 0; letter-spacing: -.01em; }
.chapter__sub { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: clamp(1rem, 2vw, 1.3rem); margin-top: .4rem; }
.chapter__rule { display: flex; align-items: center; gap: 1.1rem; max-width: 540px; margin: 1.5rem auto 0; }
.chapter__rule::before, .chapter__rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.chapter__count { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.rows { display: flex; flex-direction: column; gap: var(--gut); }
.row { display: flex; gap: var(--gut); }

.leaf {
    position: relative; flex: 0 0 auto; box-sizing: border-box; display: block; padding: 10px; cursor: zoom-in;
    background: var(--paper); border: 1px solid rgb(41 39 31 / .12); border-radius: 3px;
    box-shadow: inset 0 -1px 0 rgb(255 255 255 / .5), 0 1px 2px rgb(var(--shadow-rgb) / .08), 0 10px 24px rgb(var(--shadow-rgb) / .07);
}
.leaf__reveal { display: block; position: relative; width: 100%; height: 100%; opacity: 0; transform: translateY(14px) scale(.985); }
.leaf.in .leaf__reveal { opacity: 1; transform: none; transition: opacity .52s var(--ease-out), transform .52s var(--ease-out); }
.leaf__box { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 2px; background-size: cover; background-position: center; }
.leaf img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .52s var(--ease-out); }
.leaf img.loaded { opacity: 1; }
.leaf__under { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.leaf__cap { position: absolute; left: 12px; right: 12px; bottom: 14px; color: #fff; font-family: var(--serif); font-style: italic; font-size: .95rem; text-shadow: 0 1px 10px rgb(0 0 0 / .6); opacity: 0; transform: translateY(6px); pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
    .leaf { transition: transform .24s var(--ease-out), box-shadow .24s var(--ease-out), border-color .24s var(--ease-out); will-change: transform; }
    .leaf:hover { transform: translateY(-4px) scale(1.012); border-color: rgb(41 39 31 / .26);
        box-shadow: inset 0 -1px 0 rgb(255 255 255 / .5), 0 4px 10px rgb(var(--shadow-rgb) / .12), 0 18px 40px rgb(var(--shadow-rgb) / .12); }
    .leaf:hover .leaf__box img.loaded { transform: scale(1.03); transition: transform .5s var(--ease-out); }
    .leaf:hover .leaf__under { transform: scaleX(1); transition: transform .3s var(--ease-out); }
    .leaf:hover .leaf__cap { opacity: 1; transform: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
}
.leaf:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; }
@media (max-width: 680px) { .row { flex-direction: column; } }

/* sticky spine index (wide desktop only) */
.book__rail {
    position: fixed; top: 50%; left: max(14px, calc(50vw - var(--maxw-book) / 2 - 64px));
    transform: translateY(-50%) translateX(-12px); z-index: 90; display: none; flex-direction: column; gap: .85rem;
    opacity: 0; transition: opacity .24s var(--ease-out), transform .24s var(--ease-out);
}
.book__rail.show { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (min-width: 1300px) { .book__rail { display: flex; } }
.book__rail-marker { position: absolute; left: -12px; top: 0; width: 2px; height: 16px; background: var(--gold); transition: transform .28s var(--ease-in-out); }
.book__rail-item { display: inline-flex; align-items: baseline; gap: .5rem; background: none; text-align: left; cursor: pointer; font-size: .7rem; letter-spacing: .06em; color: var(--ink-3); max-width: 156px; transition: color .24s var(--ease-out); }
.book__rail-item .rn { font-family: var(--serif); font-style: italic; font-size: .9rem; }
.book__rail-item .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book__rail-item:hover { color: var(--ink-2); }
.book__rail-item.is-active { color: var(--ink); }

/* play-all pill */
.book__playall {
    position: fixed; right: clamp(16px, 4vw, 40px); bottom: clamp(16px, 4vw, 32px); z-index: 95;
    display: inline-flex; align-items: center; gap: .55rem; padding: .72rem 1.3rem; border-radius: 100px;
    font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); background: var(--ink);
    box-shadow: 0 10px 30px rgb(var(--shadow-rgb) / .26); opacity: 0; transform: translateY(12px);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), background .24s var(--ease-out);
}
.book__playall[hidden] { display: none; }
.book__playall.show { opacity: 1; transform: none; }
.book__playall:hover { background: var(--olive); }
.book__playall:active { transform: scale(.96); }
.book__playall svg { width: 13px; height: 13px; fill: currentColor; }
#playAll.is-loading { pointer-events: none; opacity: .6; }

/* "See all from this part" — at the end of a capped category */
.see-all {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    margin: clamp(20px, 3vw, 38px) auto 0; padding: .85rem 1.7rem; cursor: pointer;
    font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.05rem; color: var(--ink-2);
    background: transparent; border: 1px solid var(--line); border-radius: 3px;
    opacity: 0; transform: translateY(8px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), color .24s var(--ease-out), border-color .24s var(--ease-out), background .24s var(--ease-out);
}
.see-all.in { opacity: 1; transform: none; }
.see-all:hover { color: var(--ink); border-color: var(--mauve); background: rgb(var(--shadow-rgb) / .03); }
.see-all:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; }
.see-all__star { font-family: var(--sans); font-style: normal; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); opacity: .9; }
.see-all.is-loading { pointer-events: none; opacity: .55; }
.see-all.is-loading::after { content: ''; width: 14px; height: 14px; margin-top: .25rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: seeAllSpin .7s linear infinite; }
@keyframes seeAllSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .see-all { opacity: 1; transform: none; transition: none; } .see-all.is-loading::after { animation: none; } }

@media (prefers-reduced-motion: reduce) {
    .leaf__reveal { opacity: 1 !important; transform: none !important; }
    .chapter__plate { opacity: 1 !important; transform: none !important; }
    .leaf img { transition: opacity .2s linear; }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { text-align: center; padding: clamp(64px, 11vw, 150px) var(--pad); border-top: 1px solid var(--line); background: var(--paper-2); }
.footer__amp { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(4.5rem, 13vw, 9rem); line-height: .8;
    background: linear-gradient(135deg, var(--mauve), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer__names { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.2rem); margin: .9rem 0 .2rem; }
.footer__meta { color: var(--ink-2); font-size: .92rem; }
.footer__note { margin-top: 2.6rem; color: var(--ink-3); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
.footer__leave { margin-top: 1.6rem; }
.footer__leave a { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.footer__leave a:hover { color: var(--ink); border-color: var(--mauve); }

/* language switcher (works over both the cream gate and the dark hero) */
.langswitch {
    position: fixed; top: clamp(14px, 2.4vw, 24px); right: clamp(14px, 3vw, 40px); z-index: 120;
    display: flex; gap: .15rem; align-items: center;
    background: rgb(244 238 227 / .82); backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-radius: 100px; padding: .28rem .3rem;
    box-shadow: 0 6px 22px rgb(12 11 10 / .18);
}
.lang {
    font-size: .68rem; font-weight: 600; letter-spacing: .1em; line-height: 1;
    color: var(--ink-2); padding: .3rem .56rem; border-radius: 100px;
    transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.lang:hover { color: var(--ink); }
.lang.is-active { color: var(--paper); background: var(--ink); }

/* states */
.loading, .empty { display: grid; place-content: center; height: 100%; text-align: center; color: rgb(244 238 227 / .6); font-family: var(--serif); font-style: italic; font-size: 1.2rem; padding: 2rem; }
.demo-flag { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 200; background: rgb(41 39 31 / .9); color: var(--paper); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; padding: .5rem 1rem; border-radius: 100px; }
.noscript { text-align: center; padding: 4rem var(--pad); font-family: var(--serif); font-style: italic; color: var(--ink-2); }

/* =========================================================================
   PRELOADER — "Fusion": Monique vs Elio → fight cloud → Molio + hearts (geek/arcade)
   ========================================================================= */
.preloader { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; overflow: hidden; background: var(--paper);
    transition: opacity .7s var(--ease-out), visibility 0s linear .7s; }
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.pre__stage { position: relative; width: min(94vw, 780px); height: min(58vh, 440px); display: grid; place-items: center; }
.is-fight .pre__stage, .pre__stage.is-fight { animation: preShake .5s linear infinite; }
@keyframes preShake { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-3px,2px)} 50%{transform:translate(3px,-2px)} 75%{transform:translate(-2px,-3px)} }

.pre__flash { position: absolute; inset: -20%; z-index: 6; opacity: 0; pointer-events: none;
    background: radial-gradient(circle at 50% 50%, var(--gold-soft), var(--mauve-soft) 45%, transparent 70%); }
.pre__flash.go { animation: preFlash .5s var(--ease-out); }
@keyframes preFlash { 0%{opacity:0;transform:scale(.2)} 30%{opacity:.95} 100%{opacity:0;transform:scale(1.5)} }

/* fighters */
.pre__row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(2px, 3vw, 26px); }
.pre__fighter { position: relative; display: grid; justify-items: center; gap: .55rem; opacity: 0; }
.pre__fighter--a { transform: translateX(-150%); }
.pre__fighter--b { transform: translateX(150%); }
.is-vs .pre__fighter { opacity: 1; transition: transform .55s var(--ease-out), opacity .4s; }
.is-vs .pre__fighter--a, .is-vs .pre__fighter--b { transform: translateX(0); }
.is-fight .pre__fighter { transition: transform .35s var(--ease-in-out), opacity .3s ease .15s; opacity: 0; }
.is-fight .pre__fighter--a { transform: translateX(55%); }
.is-fight .pre__fighter--b { transform: translateX(-55%); }
.pre__name { font-family: var(--pixel); font-size: clamp(.7rem, 3vw, 1.4rem); color: var(--ink); line-height: 1.5; }
.pre__p { font-family: var(--pixel); font-size: .5rem; letter-spacing: .12em; color: var(--mauve); }
.pre__hp { width: clamp(64px, 22vw, 150px); height: 11px; border: 2px solid var(--ink); background: var(--paper-2); padding: 1px; }
.pre__hp i { display: block; height: 100%; width: 100%; background: var(--olive); }
.is-fight .pre__hp i { animation: preHp 1s var(--ease-out) forwards; }
@keyframes preHp { to { width: 14%; background: var(--mauve); } }

/* VS */
.pre__vs { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%) scale(0);
    font-family: var(--pixel); font-size: clamp(1.3rem, 6vw, 2.8rem); color: var(--mauve); text-shadow: 3px 3px 0 var(--gold); }
.is-vs .pre__vs { animation: vsZap .5s var(--ease-out) forwards; }
.is-fight .pre__vs { animation: none; opacity: 0; transition: opacity .25s var(--ease-in); }
@keyframes vsZap { 0%{transform:translate(-50%,-50%) scale(0) rotate(-20deg);opacity:0} 60%{transform:translate(-50%,-50%) scale(1.3) rotate(7deg);opacity:1} 100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1} }

/* fight cloud (Sims-style scuffle) */
.pre__cloud { position: absolute; left: 50%; top: 50%; z-index: 5; pointer-events: none;
    width: clamp(200px, 46vw, 380px); height: clamp(200px, 46vw, 380px);
    transform: translate(-50%, -50%) scale(0); transition: transform .3s var(--ease-out); }
.is-fight .pre__cloud { transform: translate(-50%, -50%) scale(1); }
.is-fusion .pre__cloud { transform: translate(-50%, -50%) scale(0); transition: transform .35s var(--ease-in); }
.pre__cloud-spin { position: absolute; inset: 0; }
.is-fight .pre__cloud-spin { animation: cloudSpin 2.4s linear infinite; }
@keyframes cloudSpin { to { transform: rotate(360deg); } }
.puff { position: absolute; border-radius: 50%; opacity: .92;
    background: radial-gradient(circle at 36% 34%, var(--paper) 0%, var(--paper-3) 68%, transparent 100%);
    animation: puffPulse .5s ease-in-out infinite alternate; }
@keyframes puffPulse { to { transform: scale(1.14); } }
.bam { position: absolute; font-family: var(--pixel); font-size: clamp(.7rem, 2.8vw, 1.3rem); color: var(--gold);
    text-shadow: 2px 2px 0 var(--ink); opacity: 0; transform: rotate(var(--r, -8deg)); }
.is-fight .bam { animation: bamPop .8s var(--ease-out) infinite; }
@keyframes bamPop { 0%{opacity:0;transform:scale(.4) rotate(var(--r,-8deg))} 30%{opacity:1;transform:scale(1.1) rotate(var(--r,-8deg))} 65%{opacity:1} 100%{opacity:0;transform:scale(1.25) rotate(var(--r,-8deg))} }

/* caption FIGHT! / FUSION! */
.pre__caption { position: absolute; bottom: clamp(16px, 7vh, 54px); left: 50%; z-index: 7; transform: translateX(-50%);
    font-family: var(--pixel); font-size: clamp(.9rem, 4vw, 1.9rem); color: var(--mauve); text-shadow: 3px 3px 0 var(--gold); opacity: 0; }
.pre__caption.pop { animation: capPop .5s var(--ease-out) forwards; }
@keyframes capPop { 0%{opacity:0;transform:translateX(-50%) scale(.5)} 45%{opacity:1;transform:translateX(-50%) scale(1.18)} 100%{opacity:1;transform:translateX(-50%) scale(1)} }

/* MOLIO result (geek → elegant serif) */
.pre__molio { position: absolute; left: 50%; top: 50%; z-index: 8; transform: translate(-50%, -50%); display: flex;
    font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; font-size: clamp(3rem, 13vw, 7.5rem); color: var(--ink); letter-spacing: -.02em; }
.pre__molio span { display: inline-block; opacity: 0; transform: translateY(.4em) scale(.6); }
.is-molio .pre__molio span { animation: molioLetter .5s var(--ease-out) forwards; }
.is-molio .pre__molio span:nth-child(1){animation-delay:0s}
.is-molio .pre__molio span:nth-child(2){animation-delay:.07s}
.is-molio .pre__molio span:nth-child(3){animation-delay:.14s}
.is-molio .pre__molio span:nth-child(4){animation-delay:.21s}
.is-molio .pre__molio span:nth-child(5){animation-delay:.28s}
@keyframes molioLetter { to { opacity: 1; transform: none; } }

/* floating pixel hearts */
.pre__hearts { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.pre__heart { position: absolute; bottom: 32%; width: calc(14px * var(--s, 1)); color: var(--mauve);
    filter: drop-shadow(0 1px 0 var(--gold-soft)); animation: heartFloat var(--d, 1800ms) var(--ease-out) forwards; }
.pre__heart svg { display: block; width: 100%; height: auto; }
@keyframes heartFloat { 0%{opacity:0;transform:translateY(0) scale(.4)} 18%{opacity:1} 100%{opacity:0;transform:translate(var(--dx,0), -170px) scale(1)} }

@media (prefers-reduced-motion: reduce) {
    .pre__stage { animation: none !important; }
    .pre__row, .pre__vs, .pre__cloud, .pre__caption, .pre__flash { display: none; }
    .pre__molio span { opacity: 1; transform: none; }
}

/* =========================================================================
   "MONIQUE'S MODE" — pink theme (#ef426f) + toggle
   ========================================================================= */
.mq {
    position: fixed; top: clamp(56px, 8.5vw, 70px); right: clamp(14px, 3vw, 40px); z-index: 119;
    display: inline-flex; align-items: center; gap: .42rem; padding: .34rem .72rem .34rem .6rem; border-radius: 100px;
    background: rgb(244 238 227 / .82); backdrop-filter: blur(10px); border: 1px solid var(--line);
    box-shadow: 0 6px 22px rgb(var(--shadow-rgb) / .18);
    font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
    transition: background .24s var(--ease-out), color .24s var(--ease-out), border-color .24s var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.mq:hover { color: var(--ink); }
.mq:active { transform: scale(.96); }
.mq__heart { color: #ef426f; font-size: .82rem; line-height: 1; transition: transform .24s var(--ease-out); }
.mq:hover .mq__heart { transform: scale(1.2); }
.mq[aria-pressed="true"] { background: #ef426f; color: #fff; border-color: #ef426f; }
.mq[aria-pressed="true"] .mq__heart { color: #fff; transform: scale(1.18); }
@media (max-width: 560px) { .mq__label { display: none; } .mq { padding: .4rem; } }

html.monique {
    --paper:      #FCDCE8;
    --paper-2:    #F9C0D7;
    --paper-3:    #F4A4C4;
    --ink:        #4A0E2A;
    --ink-2:      #8A2B54;
    --ink-3:      #C2698C;
    --olive:      #D81B60;
    --mauve:      #EF426F;
    --mauve-soft: #FF8FB6;
    --gold:       #EF426F;
    --gold-soft:  #FF77A6;
    --line:       #F3AFCC;
    --dark:       #2E0717;
    --dark-2:     #1C0410;
    --shadow-rgb: 120 20 60;
}
html.monique ::selection { background: #ff8fb6; color: #4a0e2a; }

/* flashy pink burst when toggling Monique mode */
.mq-flash { position: fixed; inset: 0; z-index: 9600; pointer-events: none;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #ff8ec0 0%, #ef426f 46%, #d81b60 100%);
    clip-path: circle(0px at var(--x, 50%) var(--y, 50%)); opacity: 1;
    transition: clip-path .52s cubic-bezier(.5, 0, .15, 1), opacity .34s ease .44s; }
.mq-flash.go { clip-path: circle(var(--r, 150vmax) at var(--x, 50%) var(--y, 50%)); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mq-flash { display: none; } }
html.monique body { background: var(--paper); }
html.monique .film { background: radial-gradient(120% 120% at 50% 30%, #3c0e20, var(--dark-2)); }
html.monique .hero { background: var(--dark); }
html.monique .leaf { border-color: rgb(69 17 42 / .14); }
html.monique .topbar.show, html.monique .langswitch { background: rgb(252 236 241 / .9); }
html.monique .mq { background: rgb(252 236 241 / .9); }
html.monique .mq[aria-pressed="true"] { background: #ef426f; color: #fff; }