/* ========== BINDER ==========
   A three-ring binder rebuilt from photographs of the physical one.
   All lengths derive from --s (px per inch), set by binder.js from the viewport. */

@property --a { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

.binder-stage {
    --s: 60px;
    --drop: rgba(74,54,28,0.38); /* warm shadow that sits on the beige */
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 56px 0 66px; /* Cover link above, HUD below */
    background: radial-gradient(120% 90% at 50% 40%, #F0E1CC 0%, #E8D9C4 55%, #DBC9B0 100%);
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

/* ---------- text frames: each has the page to itself, then leaves; the binder comes in after the last ---------- */
.binder-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(100vw - 40px, 20em); /* lines are broken in the markup; long ones wrap balanced */
    margin: 0;
    text-align: center;
    text-wrap: balance;
    font: 700 clamp(26px, 4.4vw, 60px)/1.12 'Inter Tight', sans-serif;
    letter-spacing: -0.02em;
    color: #232323;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s 0.45s;
    z-index: 45;
    pointer-events: none;
}
.binder-heading.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.binder-heading.on.leaving { opacity: 0; transform: translate(-50%, calc(-50% - 0.25em)); }
.binder-heading .w { /* each word's transition-delay is set inline */
    display: inline-block;
    transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.7s ease;
}
.binder-heading.pre .w { opacity: 0; transform: translateY(0.4em); filter: blur(6px); transition: none; }
/* trailing ellipsis: dots arrive one by one (--d is set inline), then keep pulsing in turn */
.binder-heading .dot { display: inline-block; opacity: 0; }
.binder-heading.on:not(.pre) .dot {
    animation: dotIn 0.45s ease var(--d) forwards, dotPulse 1.5s ease-in-out calc(var(--d) + 1100ms) infinite;
}
@keyframes dotIn { from { opacity: 0; transform: translateY(0.12em); } to { opacity: 1; transform: none; } }
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
/* ---------- drawn scenes: a frame like the text ones, holding an SVG ---------- */
.binder-scene {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(100vw - 32px, 1100px, 78dvh * 1.95); /* 1.95 = the drawing's aspect */
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s 0.45s;
    z-index: 45;
    pointer-events: none;
}
.binder-scene.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.binder-scene.on.leaving { opacity: 0; transform: translate(-50%, calc(-50% - 10px)); }
.binder-scene svg { display: block; width: 100%; height: auto; overflow: visible; font-family: 'Inter Tight', sans-serif; }
.binder-scene text { font-size: 46px; text-anchor: middle; dominant-baseline: central; fill: #111; }
.binder-scene .group { fill: rgba(247,244,237,0.6); } /* translucent, so where two groups overlap reads lighter */
.binder-scene .nicole circle { fill: #000; }
.binder-scene .nicole text { fill: #fff; }
.binder-scene .husband circle, .binder-scene .mutual circle { fill: #7B7B7B; }
.binder-scene .extra { fill: #7B7B7B; fill-opacity: 0.55; }
.binder-scene .husband text { font-size: 42px; }
.binder-scene .niket circle, .binder-scene .kathleen circle, .binder-scene .garrett circle { fill: #EC615F; } /* his side, in his red */
.binder-scene .niket text { font-weight: 800; }
.binder-scene .late text { font-size: 33px; }
.binder-scene .link path { fill: none; stroke: #222; stroke-width: 1.6px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.binder-scene .arc { stroke-dasharray: 1; stroke-dashoffset: 1; }
.binder-scene .head, .binder-scene .link text, .binder-scene .note { opacity: 0; }
.binder-scene .note, .binder-scene .link text { font-size: 34px; fill: #4a4438; } /* relationship labels share one quiet style */

/* a line of text paired with the drawing; it grows upward from the top of the drawing's box */
.scene-header {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 96%; /* the groups' circles top out at 87%: the rest is breathing room */
    margin: 0;
    text-align: center;
    text-wrap: balance;
    font: 700 clamp(20px, 2.6vw, 36px)/1.15 'Inter Tight', sans-serif;
    letter-spacing: -0.02em;
    color: #232323;
}
.scene-header .line {
    display: block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.scene-header .line + .line { margin-top: 0.35em; }
.binder-scene.has-header .scene-header .line {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease var(--ld), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--ld);
}

/* Where everything sits. Each .pos is drawn around 0,0 and placed here, so moving from the
   introductions to the two groups (.overlap) is one transform transition per person. */
.binder-scene .pos, .binder-scene .zoom { transition: transform 1.2s cubic-bezier(0.65, 0, 0.2, 1), opacity 0.7s ease; }
.binder-scene .zoom { transform-origin: 965px 545px; transform: translateX(155px); } /* the introductions are three people wide: centre them */
.binder-scene.overlap .zoom { transform: translate(0, 50px) scale(0.9); } /* makes room for the header above */
.binder-scene .couple   { transform: translate(653px, 545px); }
.binder-scene .nicole   { transform: translate(538px, 541px); }
.binder-scene .husband  { transform: translate(757px, 541px); }
.binder-scene .niket    { transform: translate(1141px, 545px); }
.binder-scene .mutual   { transform: translate(730px, 720px); } /* joins in the second state */
.binder-scene .theirs   { transform: translate(1140px, 545px); }
.binder-scene .kathleen { transform: translate(1240px, 450px); }
.binder-scene .garrett  { transform: translate(1240px, 640px); }
.binder-scene.overlap .couple  { transform: translate(790px, 545px) scale(1.06); }
.binder-scene.overlap .nicole  { transform: translate(600px, 545px) scale(0.757); }
.binder-scene.overlap .husband { transform: translate(730px, 370px) scale(0.757); }
.binder-scene.overlap .niket   { transform: translate(965px, 545px) scale(0.833); } /* into the overlap */

/* introductions: the order people are met in; --t is when each arrives */
.binder-scene .cast { opacity: 0; transform-origin: 0 0; }
.binder-scene .couple { --t: 0.1s; }
.binder-scene .nicole { --t: 0.5s; }
.binder-scene .husband { --t: 1.1s; }
.binder-scene .married { --t: 1.7s; }
.binder-scene .niket { --t: 2.2s; }
.binder-scene .work { --t: 2.5s; } /* right behind Niket */
.binder-scene.on:not(.pre) .cast { animation: castIn 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.15) var(--t) forwards; }
.binder-scene.on:not(.pre) .arc { animation: arcDraw 0.8s cubic-bezier(0.6, 0, 0.2, 1) var(--t) forwards; }
.binder-scene.on:not(.pre) .head { animation: fadeUp 0.3s ease calc(var(--t) + 0.7s) forwards; }
.binder-scene.on:not(.pre) .link text { animation: fadeUp 0.6s ease calc(var(--t) + 0.1s) forwards; } /* the words lead, the arrow draws under them */
.binder-scene.on:not(.pre) .note { animation: fadeUp 0.6s ease var(--t) forwards; }

/* The two groups, told in three beats (the states add up):
   .overlap      Nicole's group forms; Niket drifts to its edge, out of focus
   .niket-focus  the group recedes and Niket has the attention
   .friends      his group arrives around him, and everything is back in focus */
.binder-scene.overlap .niket { opacity: 0.3; }
.binder-scene.niket-focus .niket { opacity: 1; }
.binder-scene.niket-focus:not(.friends) :is(.couple, .nicole, .husband, .mutual, .crowd) { opacity: 0.4; }
/* Everyone is drawn around their own 0,0, so that is the origin to scale from. */
.binder-scene .niket .halo { fill: none; stroke: #EC615F; stroke-width: 2px; vector-effect: non-scaling-stroke; opacity: 0; transform-origin: 0 0; }
.binder-scene.niket-focus .halo { animation: ringOut 1.5s ease-out 0.35s 2; }
@keyframes ringOut { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.55); } }

/* the arrows and notes let go, people move (above), and the rest arrive at --t2 */
.binder-scene .intro-only { transition: opacity 0.45s ease; }
.binder-scene.overlap .intro-only { opacity: 0; }
.binder-scene .late {
    opacity: 0;
    transform: scale(0.82);
    transform-origin: 0 0;
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
.binder-scene.overlap .mutual .late,
.binder-scene.overlap .extra,
.binder-scene.friends .late { opacity: 1; transform: none; transition-delay: var(--t2); }
.binder-scene .mutual { --t2: 0.9s; }
.binder-scene .theirs { --t2: 0.2s; }
.binder-scene .kathleen { --t2: 0.9s; }
.binder-scene .garrett { --t2: 1.3s; }
@keyframes castIn { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }
@keyframes arcDraw { to { stroke-dashoffset: 0; } }
@keyframes fadeUp { from { opacity: 0; } to { opacity: 1; } }

/* ---------- section navigation: every section by name (index.html builds it from SECTIONS).
   One bar along the bottom, all the way through. The binder's chip sits in it: hidden until the
   binder is open, then it stands in for the binder's own name at the end of the row. ---------- */
.section-nav {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: max(16px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto; /* a phone can't fit them all: the row scrolls */
    scrollbar-width: none;
    z-index: 46;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav > :first-child { margin-left: auto; } /* centred, and still scrollable from its first item when it overflows */
.section-nav > :last-child, .section-nav > .binder-hud { margin-right: auto; } /* the row's last item (or the chip, alone) ends it */
.section-nav > button {
    flex: none;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: none;
    padding: 8px 11px;
    font: 500 13px/1 'Inter Tight', sans-serif;
    letter-spacing: 0.02em;
    color: rgba(35,35,35,0.42);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.section-nav > button:hover { color: #232323; }
.section-nav > button[aria-current] { color: #232323; background: rgba(35,35,35,0.07); }
.section-nav .sep { flex: none; width: 1px; height: 14px; margin: 0 8px; background: rgba(35,35,35,0.2); } /* the story | the evidence */
.section-nav .binder-hud { position: static; translate: none; flex: none; margin: 0 auto; max-width: none; }
/* while the binder is open its chip is the whole bar, centred; the section names come back once it is closed */
.binder-stage:not([data-binder]) .section-nav .binder-hud,
.binder-stage[data-binder] .section-nav > :not(.binder-hud) { display: none; }
@media (max-width: 767px) {
    .section-nav > button { padding: 8px 9px; font-size: 12px; }
}
/* a small phone can't fit the row: the story's sections on one line, the evidence's on the next */
@media (max-width: 480px) {
    .section-nav { flex-wrap: wrap; justify-content: center; row-gap: 0; overflow: visible; }
    .section-nav > :first-child, .section-nav > :last-child { margin-left: 0; margin-right: 0; }
    .section-nav > .binder-hud { margin: 0 auto; }
    .section-nav .sep:first-of-type { flex-basis: 100%; width: auto; height: 0; margin: 0; background: none; } /* the first divider becomes the line break */
    .binder-stage:not([data-binder]) .ev-tl { --nav: 128px; }
}
.binder-stage.intro .book { animation: none; } /* a finished entrance would otherwise hold it visible */
.binder-stage.intro .book,
.binder-stage.intro .binder-hud { opacity: 0; pointer-events: none; }
.binder-hud { transition: opacity 0.6s ease 0.5s; }
.binder-stage.intro .binder-hud { transition: none; }

/* Phone held upright: one page at a time. binder.js rebuilds the binder with single-sided
   leaves and sizes it for one page; here the book is held so the right-hand page is centred.
   Turned leaves go off to the left, out of view. */
@media (max-width: 767px) and (orientation: portrait) {
    /* the spread is wider than the screen now: centre it by hand, the grid would start it at the left edge */
    .book { justify-self: start; margin-left: calc(50vw - var(--s) * 11.3); transform-origin: calc(var(--s) * 11.3) 50%; } /* the origin: the middle of the screen */
    .book:not(.closed) { transform: translateX(calc(var(--s) * -5.3)); }
    /* closed, it sits a little smaller, a margin either side of it (spine and all); opened, it grows to the page's width in place */
    .binder-stage .book.closed { transform: translateX(calc(var(--s) * -5.3)); scale: 0.82; }
}

/* Phone held upright: suggest turning it for the full spread. We can only ask —
   a page can't rotate the device, and rotation lock wins. */
.turn-hint {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 62px);
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 500 12px/1 'Inter Tight', sans-serif;
    color: rgba(35,35,35,0.5);
    transition: opacity 0.6s ease 0.9s;
    pointer-events: none;
}
.turn-hint svg { width: 16px; height: 16px; }
.binder-stage.intro .turn-hint { opacity: 0; transition: none; }
@media (max-width: 767px) and (orientation: portrait) and (hover: none) {
    .turn-hint { display: flex; }
}

/* Phone on its side: give the binder the whole height. */
@media (orientation: landscape) and (max-height: 500px) {
    .binder-stage { padding: 8px 0 58px; }
    .scene-header { font-size: 16px; } /* three lines have to fit above the drawing */
    .binder-hud { bottom: max(6px, env(safe-area-inset-bottom)); padding: 3px; }
    .binder-hud button { height: 30px; }
}

.book {
    position: relative;
    width: calc(var(--s) * 22.6);
    height: calc(var(--s) * 11.75);
    perspective: calc(var(--s) * 85);
    perspective-origin: 50% 45%;
    transition: transform 0.9s cubic-bezier(0.45, 0, 0.2, 1), scale 0.9s cubic-bezier(0.45, 0, 0.2, 1);
}
/* closed: only the right half exists visually, so centre it */
.book.closed { transform: translateX(calc(var(--s) * -5.65)); }
.book.enter { animation: binderEnter 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
@keyframes binderEnter {
    from { opacity: 0; translate: 0 18vh; rotate: -3deg; }
    to   { opacity: 1; translate: 0 0; rotate: 0deg; }
}

/* ---------- boards, spine, rings ---------- */
.board, .spine {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(135deg, #f4f3ef 0%, #e9e8e3 60%, #dddcd6 100%);
}
.board {
    left: calc(50% + var(--s) * 0.7);
    width: calc(var(--s) * 10.6);
    border-radius: calc(var(--s) * 0.12);
    box-shadow: 0 calc(var(--s) * 0.5) calc(var(--s) * 1.2) var(--drop),
                inset 0 0 0 calc(var(--s) * 0.06) rgba(0,0,0,0.035);
}
.board::after { /* inside pocket seam */
    content: '';
    position: absolute;
    inset: 32% 0 0 0;
    border-top: 1px solid rgba(0,0,0,0.07);
    background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0));
    border-radius: inherit;
}
.spine {
    left: calc(50% - var(--s) * 0.7);
    width: calc(var(--s) * 1.4);
    background: linear-gradient(90deg, #d4d3cd 0%, #ecebe6 22%, #e4e3de 78%, #cfcec8 100%);
    box-shadow: 0 calc(var(--s) * 0.5) calc(var(--s) * 1.2) var(--drop);
}
/* Closed, we see the spine's outside: the same vinyl as the cover, rounded where it
   wraps, creased at the hinge, with a label in its clear pocket. (.rings-hidden is
   the closed half of the cover's flip.) */
.book.rings-hidden .spine {
    border-radius: calc(var(--s) * 0.22) 0 0 calc(var(--s) * 0.22);
    background:
        linear-gradient(90deg, transparent 58%, rgba(60,45,25,0.10) 66%, rgba(60,45,25,0.22) 72%),
        linear-gradient(90deg, #d2d0c8 0%, #efeee9 9%, #f7f6f2 30%, #f1f0eb 60%, #e6e5df 100%);
    box-shadow: inset calc(var(--s) * 0.05) 0 calc(var(--s) * 0.06) rgba(255,255,255,0.7),
                inset 0 0 0 calc(var(--s) * 0.02) rgba(0,0,0,0.04),
                inset calc(var(--s) * -0.06) 0 calc(var(--s) * 0.08) rgba(0,0,0,0.08); /* the hinge's fold, on the spine's inner edge */
}
.spine-label {
    position: absolute;
    top: calc(var(--s) * 0.3); /* same margins as the cover's pocket */
    bottom: calc(var(--s) * 0.3);
    left: calc(var(--s) * 0.17); /* centred on the part of the spine the cover leaves showing */
    width: calc(var(--s) * 0.66);
    padding: calc(var(--s) * 0.55) 0;
    border-radius: calc(var(--s) * 0.04);
    background: linear-gradient(100deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0.05) 100%), #fbfaf8;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07), 0 0 0 calc(var(--s) * 0.03) rgba(255,255,255,0.35), 0 1px calc(var(--s) * 0.05) rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    writing-mode: vertical-rl; /* reads top to bottom, like a shelved binder */
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.book.rings-hidden .spine-label { opacity: 1; }
.spine-label .case { font-size: calc(var(--s) * 0.27); letter-spacing: 0.08em; color: #222; }
.spine-label .case small { font-size: 0.55em; letter-spacing: 0.18em; color: #777; margin-bottom: 0.9em; }
.spine-label .eyes { font-size: calc(var(--s) * 0.145); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #c0392b; }
.plate {
    position: absolute;
    left: 50%;
    top: 4.5%;
    width: calc(var(--s) * 0.62);
    height: 91%;
    translate: -50% 0;
    border-radius: calc(var(--s) * 0.3);
    background: linear-gradient(90deg, #8d8f93 0%, #f2f3f5 28%, #c9cbcf 52%, #fafafa 70%, #85878b 100%);
    box-shadow: 0 1px 3px rgba(0,0,0,0.45);
    z-index: 2900;
}
.plate::before, .plate::after { /* rivets */
    content: '';
    position: absolute;
    left: 50%;
    width: calc(var(--s) * 0.26);
    aspect-ratio: 1;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #9a9ca0 60%, #6d6f73);
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.plate::before { top: 1.2%; }
.plate::after { bottom: 1.2%; }

.ring {
    position: absolute;
    left: 50%;
    width: calc(var(--s) * 1.75);
    height: calc(var(--s) * 0.2);
    translate: -50% -50%;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 14%, rgba(255,255,255,0.0) 50%, rgba(0,0,0,0) 86%, rgba(0,0,0,0.35) 100%),
        linear-gradient(180deg, #fdfdfd 0%, #c4c6ca 35%, #808287 62%, #d9dadd 100%);
    box-shadow: 0 calc(var(--s) * 0.09) calc(var(--s) * 0.12) rgba(0,0,0,0.4);
    z-index: 3000;
    transition: opacity 0.15s;
}
.book.rings-hidden .ring, .book.rings-hidden .plate { opacity: 0; }

/* ---------- leaves ---------- */
.leaf {
    --a: 0deg;
    --d: 0;
    position: absolute;
    left: 50%;
    top: calc(var(--s) * 0.25);
    width: calc(var(--s) * 9.6);
    height: calc(var(--s) * 11.25);
    transform-origin: 0 50%;
    transform: rotateY(var(--a)) translateX(calc(var(--d) * 0.4px)) skewY(calc(sin(var(--a)) * 1.6deg));
    transform-style: preserve-3d;
    transition: --a 0.9s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    cursor: pointer;
    pointer-events: none;
}
.leaf.dragging { transition: none; cursor: grabbing; }
/* deep in a stack (binder.js depths): the face that can't be seen isn't painted; deeper still, nothing is */
.leaf.deep-front .face.front, .leaf.deep-back .face.back { visibility: hidden; }
.leaf.far { visibility: hidden; }
.leaf.cover {
    top: 0;
    width: calc(var(--s) * 11.3);
    height: 100%;
}

.face {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--s) * 0.35);
    right: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: auto;
}
.face.back { transform: rotateY(180deg); }
.leaf.cover .face { left: calc(var(--s) * 0.3); }

/* sheet protector */
.sleeve {
    border-radius: calc(var(--s) * 0.05);
    background: linear-gradient(115deg, rgba(255,255,255,0.30), rgba(255,255,255,0.12) 40%, rgba(255,255,255,0.26));
    box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 1px calc(var(--s) * 0.08) rgba(0,0,0,0.28);
}
.strip { /* punched binding edge */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--s) * 0.7);
    background:
        radial-gradient(circle at 50% calc(var(--s) * 1.35), rgba(30,30,30,0.75) 0 calc(var(--s) * 0.13), transparent calc(var(--s) * 0.145)),
        radial-gradient(circle at 50% calc(var(--s) * 5.625), rgba(30,30,30,0.75) 0 calc(var(--s) * 0.13), transparent calc(var(--s) * 0.145)),
        radial-gradient(circle at 50% calc(var(--s) * 9.9), rgba(30,30,30,0.75) 0 calc(var(--s) * 0.13), transparent calc(var(--s) * 0.145)),
        repeating-linear-gradient(180deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 3px),
        rgba(250,250,250,0.92);
    border-right: 1px solid rgba(0,0,0,0.08);
}
.face.back .strip { left: auto; right: 0; border-right: 0; border-left: 1px solid rgba(0,0,0,0.08); }

.sheet {
    position: absolute;
    top: calc(var(--s) * 0.125);
    left: calc(var(--s) * 0.7);
    width: calc(var(--s) * 8.5);
    height: calc(var(--s) * 11);
    background: #fbfbfa;
    overflow: hidden;
    box-shadow: 0 0 calc(var(--s) * 0.05) rgba(0,0,0,0.25);
}
.face.back .sheet { left: auto; right: calc(var(--s) * 0.7); }
.sheet img { display: block; width: 100%; height: 100%; object-fit: fill; -webkit-user-drag: none; pointer-events: none; }
.sheet img.ghost { transform: scaleX(-1); opacity: 0.09; filter: grayscale(1) blur(0.6px); }
.sheet img:not([src]) { visibility: hidden; }

/* gloss + gutter shadow, and the shading that follows the turn */
.gloss {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0) 9%),
        linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 55%);
}
.face.back .gloss { transform: scaleX(-1); }
.shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 55%, rgba(255,255,255,0.25) 100%);
    opacity: calc(sin(var(--a)) * -0.55);
}
.face.back .shade { transform: scaleX(-1); }

/* translucent plastic dividers */
.leaf.divider .face {
    border-radius: calc(var(--s) * 0.06);
    background:
        linear-gradient(112deg, rgba(255,255,255,0) 28%, rgba(255,255,255,0.22) 41%, rgba(255,255,255,0) 56%),
        color-mix(in srgb, var(--c) 80%, transparent);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 1px calc(var(--s) * 0.08) rgba(0,0,0,0.25);
}
.leaf.divider .strip { background:
        radial-gradient(circle at 50% calc(var(--s) * 1.35), rgba(30,30,30,0.7) 0 calc(var(--s) * 0.13), transparent calc(var(--s) * 0.145)),
        radial-gradient(circle at 50% calc(var(--s) * 5.625), rgba(30,30,30,0.7) 0 calc(var(--s) * 0.13), transparent calc(var(--s) * 0.145)),
        radial-gradient(circle at 50% calc(var(--s) * 9.9), rgba(30,30,30,0.7) 0 calc(var(--s) * 0.13), transparent calc(var(--s) * 0.145));
    border: 0;
}
.tab {
    position: absolute;
    right: calc(var(--s) * -0.5);
    top: calc(var(--s) * (0.35 + var(--t) * 1.32));
    width: calc(var(--s) * 0.52);
    height: calc(var(--s) * 1.68);
    border: 0;
    padding: 0;
    border-radius: 0 calc(var(--s) * 0.14) calc(var(--s) * 0.14) 0;
    background: color-mix(in srgb, var(--c) 86%, transparent);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 1px 1px 3px rgba(0,0,0,0.3);
    color: rgba(0,0,0,0.62);
    font: 700 calc(var(--s) * 0.26)/1 'Inter Tight', sans-serif;
    cursor: pointer;
    pointer-events: auto;
    transition: filter 0.2s, translate 0.2s;
}
/* The start note sits inside the cover on desktop and on Section A on mobile. */
.leaf .sticky {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: calc(var(--s) * 3);
    height: calc(var(--s) * 3);
    padding: calc(var(--s) * 0.5) calc(var(--s) * 0.3);
    box-sizing: border-box;
    background: linear-gradient(#c8b0e2, #d6bef0 12%);
    box-shadow: 0 calc(var(--s) * 0.06) calc(var(--s) * 0.18) rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.15);
    rotate: -2.5deg;
    font: 500 calc(var(--s) * 0.5)/1.15 'Caveat', cursive;
    color: #2c1c42;
    pointer-events: none;
}
.mobile-start-note { display: none; }
.leaf .response-note {
    top: calc(var(--s) * 0.8);
    left: auto;
    right: calc(var(--s) * 0.35);
    translate: none;
    width: calc(var(--s) * 2.55);
    height: auto;
    min-height: calc(var(--s) * 2.1);
    padding: calc(var(--s) * 0.22);
    font-size: calc(var(--s) * 0.27);
    rotate: 2deg;
    z-index: 1;
}
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) {
    .leaf.cover .sticky { display: none; }
    .leaf.divider .mobile-start-note {
        display: block;
        top: calc(var(--s) * 0.3);
        translate: -50% 0;
    }
}
/* a minor section's tab: shorter, narrower, quieter */
.leaf.minor .tab {
    right: calc(var(--s) * -0.34);
    width: calc(var(--s) * 0.36);
    height: calc(var(--s) * 0.62);
    font-size: calc(var(--s) * 0.18);
    background: color-mix(in srgb, var(--c) 62%, transparent);
    color: rgba(0,0,0,0.5);
}
.face.back .tab { right: auto; left: calc(var(--s) * -0.5); border-radius: calc(var(--s) * 0.14) 0 0 calc(var(--s) * 0.14); }
.tab:hover { filter: brightness(1.12); translate: calc(var(--s) * 0.06) 0; }
.face.back .tab:hover { translate: calc(var(--s) * -0.06) 0; }
.tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- cover ---------- */
.leaf.cover .face {
    border-radius: calc(var(--s) * 0.12);
    background: linear-gradient(135deg, #fbfaf7 0%, #f1f0eb 55%, #e3e2dc 100%);
    box-shadow: inset 0 0 0 calc(var(--s) * 0.06) rgba(0,0,0,0.035);
}
.leaf.cover .face.front { box-shadow: inset 0 0 0 calc(var(--s) * 0.06) rgba(0,0,0,0.035), 0 calc(var(--s) * 0.4) calc(var(--s) * 1) var(--drop); }
.book.rings-hidden .leaf.cover .face.front { clip-path: inset(-200% -200% -200% 0); } /* closed: no shadow onto the spine at its left */
.leaf.cover .face.back { box-shadow: inset 0 0 0 calc(var(--s) * 0.06) rgba(0,0,0,0.035), 0 calc(var(--s) * 0.5) calc(var(--s) * 1.2) var(--drop); }
.overlay-pocket { /* clear view-cover with the printed insert behind it */
    position: absolute;
    inset: calc(var(--s) * 0.3) calc(var(--s) * 0.3) calc(var(--s) * 0.3) calc(var(--s) * 0.35);
    border-radius: calc(var(--s) * 0.05);
    background: linear-gradient(118deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.15) 32%, rgba(255,255,255,0.55) 47%, rgba(255,255,255,0.1) 62%), #f7f6f4;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    display: grid;
    place-items: center;
}
.insert {
    white-space: nowrap;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
    translate: 0 calc(var(--s) * -0.9);
}
.insert .date { font-size: calc(var(--s) * 0.17); color: #666; }
.insert .place { font-size: calc(var(--s) * 0.17); color: #666; font-style: italic; margin-top: calc(var(--s) * 0.08); }
.insert .judge { font-size: calc(var(--s) * 0.24); color: #444; margin-top: calc(var(--s) * 0.3); }
.insert .title { font-size: calc(var(--s) * 0.42); margin-top: calc(var(--s) * 0.32); }
.inside-pocket {
    position: absolute;
    inset: 30% 0 0 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0));
    border-radius: inherit;
}

/* ---------- HUD ---------- */
.binder-hud {
    position: absolute;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    translate: -50% 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255,252,246,0.66);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px rgba(74,54,28,0.12), 0 6px 22px rgba(74,54,28,0.14);
    color: rgba(35,35,35,0.78);
    font: 500 13px/1 'Inter Tight', sans-serif;
    z-index: 40;
    max-width: calc(100vw - 24px);
}
.binder-hud button {
    appearance: none;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    height: 32px;
    min-width: 32px;
    padding: 0 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.binder-hud button:hover:not(:disabled) { background: rgba(35,35,35,0.08); color: #232323; }
.binder-hud button:disabled { opacity: 0.3; cursor: default; }
.binder-hud .where {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.binder-hud .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, #b9a88c); flex: none; }
.binder-hud .count { color: rgba(35,35,35,0.45); font-variant-numeric: tabular-nums; }

/* ---------- reader (zoom) ---------- */
.binder-reader {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    background: rgba(12,12,12,0.92);
    overflow: auto;
    padding: 24px;
    cursor: zoom-out;
}
.binder-reader.open { display: block; }
.binder-reader .pages {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: flex-start;
    min-height: 100%;
    width: max-content;
    min-width: 100%;
}
.binder-reader img {
    display: block;
    height: calc(100dvh - 48px);
    width: auto;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    cursor: zoom-in;
}
.binder-reader.big img { height: auto; width: min(1100px, 100vw - 48px); cursor: zoom-out; }
.binder-reader.big .pages { flex-direction: column; align-items: center; width: auto; }

@media (max-width: 767px) {
    .binder-reader { padding: 12px; }
    .binder-reader .pages { flex-direction: column; align-items: center; width: auto; gap: 12px; }
    .binder-reader img { height: auto; width: calc(100vw - 24px); }
    .binder-reader.big img { width: 200vw; }
    .binder-reader.big .pages { align-items: flex-start; width: max-content; }
}

@media (prefers-reduced-motion: reduce) {
    .leaf { transition-duration: 0.01s !important; }
    .book, .book.enter { transition: none; animation: none; }
    .binder-heading, .binder-heading .w { transition: none; }
    .binder-heading .dot { animation: none !important; opacity: 1; }
    .binder-scene, .binder-scene * { transition: none !important; animation: none !important; }
    .binder-scene .cast, .binder-scene .head, .binder-scene .link text, .binder-scene .note { opacity: 1; }
    .binder-scene .arc { stroke-dashoffset: 0; }
}