/* ==========================================================
   文革非十年 · Not Ten Years — site styles
   Colours and paper are taken from the cover itself:
   deep red felt paper torn open over a white inner sheet.
   ========================================================== */

:root {
  --red: #7d0305;          /* cover paper, mean of the red sheets */
  --red-ink: #820403;      /* 非 on the cover */
  --red-deep: #4c0204;
  --cream: #dbccba;        /* cover inner paper */
  --cream-hi: #f2e3c8;     /* title lettering on the cover */
  --ink: #1b1613;
  --ink-soft: #4b4039;
  --muted: #86786c;
  --night: #15110f;

  --font-zh: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --font-en: "EB Garamond", "Noto Serif TC", "Times New Roman", serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4.5vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --bg-red: var(--red) url("../img/paper-red.webp") 0 0 / 560px;
  --bg-cream: var(--cream) url("../img/paper-cream.webp") 0 0 / 560px;
  --bg-night: var(--night);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  background: var(--bg-cream);
  color: var(--ink);
  font-family: var(--font-zh);
  font-size: clamp(1.02rem, .55vw + .88rem, 1.22rem);
  line-height: 1.95;
  line-break: strict;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

:lang(en) { font-family: var(--font-en); }
html:lang(en) body { line-height: 1.6; }
:lang(zh) { font-family: var(--font-zh); }
html:lang(en) body { font-size: clamp(1.08rem, .6vw + .92rem, 1.3rem); }

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 900; }
p { margin: 0 0 1em; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--cream);
  padding: 8px 14px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.bg-red   { background: var(--bg-red);   color: var(--cream-hi); --section-bg: var(--bg-red); }
.bg-cream { background: var(--bg-cream); color: var(--ink);      --section-bg: var(--bg-cream); }
.bg-night { background: var(--bg-night); color: var(--cream);    --section-bg: var(--bg-night); }

section { position: relative; }

/* ---------- type ---------- */

.eyebrow {
  display: flex; align-items: center; gap: .8em;
  margin-bottom: 1.4em;
  font-size: .82rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
}
.eyebrow::before {
  content: ""; width: 2.4em; height: 1px; background: currentColor;
}
.eyebrow--light { color: rgba(242, 227, 200, .78); }

.display {
  font-size: clamp(2.1rem, 5.6vw, 4.8rem);
  line-height: 1.22;
  letter-spacing: .02em;
  margin-bottom: .7em;
  text-wrap: balance;
}
:lang(en) .display, .display:lang(en) { letter-spacing: -.005em; line-height: 1.08; font-weight: 600; }
.display--sm { font-size: clamp(1.7rem, 3.8vw, 3.2rem); }

.lede {
  max-width: 34em;
  font-size: clamp(1.08rem, .8vw + .9rem, 1.4rem);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---------- reveal on scroll ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; }

.reveal-lines .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.reveal-lines .ln > span { display: inline-block; }
.js .reveal-lines .ln > span {
  transform: translateY(105%);
  transition: transform 1.2s var(--ease);
}
.js .reveal-lines .ln:nth-child(2) > span { transition-delay: .12s; }
.js .reveal-lines .ln:nth-child(3) > span { transition-delay: .24s; }
.js .reveal-lines.is-in .ln > span { transform: none; }

/* ---------- header ---------- */

.progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 60;
  background: var(--red);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: clamp(14px, 3vw, 36px);
  padding: 14px var(--gutter);
  color: var(--cream-hi);
  transition: background-color .45s, color .45s, box-shadow .45s, backdrop-filter .45s;
}
.site-header:not(.is-solid) { text-shadow: 0 1px 8px rgba(60, 0, 0, .55); }
.site-header.is-solid {
  background-color: rgba(219, 204, 186, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(27, 22, 19, .08);
}
.brand {
  font-weight: 900; font-size: 1.05rem; letter-spacing: .28em;
  text-decoration: none; margin-right: auto;
}
.nav { display: flex; gap: clamp(14px, 2.4vw, 32px); font-size: .95rem; letter-spacing: .12em; }
.nav a, .lang-switch { text-decoration: none; position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.lang-switch {
  font-size: .8rem; letter-spacing: .18em; font-weight: 600;
  border: 1px solid currentColor; border-radius: 999px;
  padding: .28em .95em .22em;
  transition: background-color .3s, color .3s;
}
.lang-switch:hover { color: var(--red); background: var(--cream-hi); border-color: var(--cream-hi); }
.site-header.is-solid .lang-switch:hover { color: var(--cream-hi); background: var(--red); border-color: var(--red); }

.menu-btn {
  display: none; align-items: center; gap: 10px;
  border: 0; background: none; cursor: pointer; padding: 6px 0;
  font-size: .82rem; letter-spacing: .2em; color: inherit;
}
.menu-btn__icon { position: relative; width: 20px; height: 10px; }
.menu-btn__icon i {
  position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.menu-btn__icon i:first-child { top: 0; }
.menu-btn__icon i:last-child { top: 8.5px; }
.menu-open .menu-btn__icon i { top: 4.25px; }
.menu-open .menu-btn__icon i:first-child { transform: rotate(45deg); }
.menu-open .menu-btn__icon i:last-child { transform: rotate(-45deg); }

@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; }
  .menu-open .site-header { background-color: rgba(219, 204, 186, .98); color: var(--ink); text-shadow: none; }
  .menu-open .nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 6px var(--gutter) 22px;
    background: var(--bg-cream);
    box-shadow: 0 24px 40px rgba(20, 8, 4, .22);
  }
  .menu-open .nav a { padding: 14px 0; font-size: 1.1rem; border-bottom: 1px solid rgba(27, 22, 19, .1); }
  .menu-open .nav a::after { display: none; }
}

/* ==========================================================
   1 · HERO — the cover itself, torn open
   The red sheets and the inner paper are cut from the cover
   art by tools/build_hero.py. main.js sizes every layer like
   background-size: cover, lines the title up with the cover,
   and pulls the sheets apart.
   ========================================================== */

.hero { height: 100vh; height: 100svh; }
.js .hero { height: calc(100svh + 62vh); }
.hero__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-red);                  /* shown while the art loads */
  --art-size: cover;
  --art-pos: 54.7% 40%;
}
.hero__paper { position: absolute; inset: 0; background: var(--bg-cream); }
.hero__layer {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-size: var(--art-size);
  background-position: var(--art-pos);
}
.hero__base { background-image: url("../hero/base-1717.webp"); }
.hero__sheet { will-change: transform; }
.hero__sheet--left  { background-image: url("../hero/sheet-left-1717.webp"); }
.hero__sheet--right { background-image: url("../hero/sheet-right-1717.webp"); }
@media (max-width: 760px) {
  .hero__base { background-image: url("../hero/base-1100.webp"); }
  .hero__sheet--left  { background-image: url("../hero/sheet-left-1100.webp"); }
  .hero__sheet--right { background-image: url("../hero/sheet-right-1100.webp"); }
}
/* the sheet mirrored beyond the artwork's outer edge, so the paper continues
   seamlessly while the sheets are pushed together for the opening move */
.hero__sheet::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 100%;
  background-image: inherit;
  background-repeat: no-repeat;
  background-size: var(--art-size);
  background-position: var(--art-pos);
  transform: scaleX(-1);
}
.hero__sheet--left::before  { right: 100%; }
.hero__sheet--right::before { left: 100%; }
.js .hero:not(.is-ready) .hero__paper,
.js .hero:not(.is-ready) .hero__layer { visibility: hidden; }

.hero__title {
  position: absolute; inset: 0; margin: 0; z-index: 3;
  pointer-events: none;
  color: var(--cream-hi);
  font-weight: 600;
}
.hero__word {
  position: absolute; top: 50%; left: calc(var(--x) * 100%);
  font-size: calc(var(--fs) * 150vw);        /* without JS: art is 1.5 × viewport width tall */
  line-height: 1; white-space: nowrap;
  transform: translate(-50%, -50%);
  will-change: transform;
}
html:not(.js) .hero__word[data-anchor="right"] { transform: translate(-100%, -50%); }
html:not(.js) .hero__word[data-anchor="left"]  { transform: translate(0, -50%); }
.js .hero__word { transform: none; }
.hero__word .ch { display: block; }
.hero__word--mid { color: var(--red-ink); }
.hero__title--zh .hero__word { font-family: var(--font-zh); font-weight: 700; }
.hero__title--en .hero__word {
  font-family: "Times New Roman", Tinos, Times, serif;
  font-weight: 400; text-transform: uppercase; letter-spacing: .005em;
}
/* tracking matched to the English cover */
.hero__title .hero__word--small { line-height: 1.27; text-align: right; letter-spacing: -.03em; }
.hero__title .hero__word--big { line-height: .88; letter-spacing: .05em; }
.hero__title--en .hero__word--mid { letter-spacing: -.015em; }

.js .hero .ch {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(.18em);
  transition: opacity 1.3s var(--ease), filter 1.3s var(--ease), transform 1.3s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .hero.is-open .ch { opacity: 1; filter: none; transform: none; }

.hero__meta {
  position: absolute; bottom: clamp(26px, 6vh, 64px); margin: 0;
  color: rgba(242, 227, 200, .9);
  text-decoration: none;
  transition: opacity 1.2s var(--ease) .7s;
}
.hero__meta--left {
  left: var(--gutter);
  font-size: clamp(.72rem, 1vw, .92rem); letter-spacing: .16em; line-height: 1.5;
  text-transform: uppercase;
}
.hero__meta--right {
  right: var(--gutter);
  font-size: clamp(1.05rem, 1.7vw, 1.55rem); font-weight: 600; letter-spacing: .2em; line-height: 1.2;
  color: var(--cream-hi);
  padding-bottom: .15em;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
  transition: opacity 1.2s var(--ease) .7s, background-size .5s var(--ease);
}
.hero__meta--right:lang(en) { font-family: "Times New Roman", Tinos, Times, serif; font-weight: 400; letter-spacing: .03em; }
.hero__meta--right:hover, .hero__meta--right:focus-visible { background-size: 100% 1px; background-position: 0 100%; }
.js .hero:not(.is-open) .hero__meta { opacity: 0; }

.hero__cue {
  position: absolute; left: var(--cue-x, 54.7%); bottom: 16px; z-index: 3;
  width: 1px; height: 54px; overflow: hidden;
  background: rgba(125, 3, 5, .18);
}
.hero__cue span {
  position: absolute; left: 0; top: 0; width: 1px; height: 100%;
  background: var(--red);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* ==========================================================
   2 · QUESTION + TIMELINE
   ========================================================== */

.question { padding-top: clamp(40px, 10vh, 120px); }
.question .display { color: var(--ink); }
.question .display .ln:last-child span { color: var(--red); }

.timeline { position: relative; }
.js .timeline { height: 420vh; }
.timeline__stage {
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 60px 40px;
}
.js .timeline__stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: 64px 20px; overflow-x: clip; }

.timeline__captions { position: relative; min-height: 2.6em; margin-bottom: clamp(6px, 2vh, 24px); }
.timeline__caption {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 0;
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.8rem);
  font-weight: 600;
  color: var(--ink-soft);
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.timeline__caption.is-active { opacity: 1; transform: none; }
html:not(.js) .timeline__caption { position: static; opacity: 1; transform: none; }

.timeline__track { position: relative; height: 340px; }
.tl-axis {
  position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: 50%;
  height: 1px; background: var(--ink);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tl-origin, .tl-trace, .tl-future {
  position: absolute; top: 50%; left: 0; width: 0;
  opacity: 0;
}
.tl-origin { height: 3px; margin-top: -1px; background: linear-gradient(90deg, rgba(125, 3, 5, 0), rgba(125, 3, 5, .55)); }
.tl-trace { height: 3px; margin-top: -1px; background: repeating-linear-gradient(90deg, var(--red) 0 10px, transparent 10px 17px); }
.tl-future {
  right: calc(var(--gutter) * -1); width: auto;
  height: 2px; margin-top: -.5px;
  background: repeating-linear-gradient(90deg, rgba(125, 3, 5, .55) 0 5px, transparent 5px 13px);
  -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 92%);
  mask-image: linear-gradient(90deg, #000 35%, transparent 92%);
}

.tl-decade {
  position: absolute; top: 50%; left: 0; width: 0;
  height: 8px; margin-top: -4px;
  background: var(--red);
}
html:not(.js) .tl-decade { left: 66.7%; width: 24.7%; }
.tl-decade__label {
  position: absolute; left: 50%; bottom: 20px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 900; line-height: 1;
  color: var(--ink);
}
.tl-decade__label:lang(en) { font-weight: 600; letter-spacing: .02em; }
.tl-non {
  display: inline-block; color: var(--red);
  opacity: 0; transform: scale(1.9) rotate(-10deg);
  transition: opacity .45s var(--ease), transform .55s cubic-bezier(.3, 1.6, .5, 1);
  margin-right: .06em;
}
.timeline.is-not .tl-non, html:not(.js) .tl-non { opacity: 1; transform: none; }

.tl-mark {
  position: absolute; top: 0; bottom: 0; left: calc(var(--pos) * 100%); width: 0;
}
.js .tl-mark { left: 0; }
html:not(.js) .tl-post, html:not(.js) .tl-span { display: none; }
.tl-dot {
  position: absolute; left: -5px; top: 50%; margin-top: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--ink);
}
.js .tl-mark[data-to] .tl-dot { display: none; }
.tl-span {
  position: absolute; top: 50%; left: 0;
  height: 6px; margin-top: -3px; width: 2px;
  transform: translateX(-50%);
  background: var(--ink); border-radius: 3px;
}
.tl-mark--fixed .tl-dot { background: var(--red); border-color: var(--red); }
.tl-stem { position: absolute; left: 0; width: 1px; background: var(--ink); opacity: .35; }
.tl-label {
  position: absolute; left: 0; transform: translateX(-50%);
  white-space: nowrap; text-align: center; line-height: 1.3;
}
.tl-year { display: block; font-size: .82rem; letter-spacing: .08em; color: var(--muted); font-variant-numeric: lining-nums; }
.tl-mark--fixed .tl-year { font-size: 1rem; font-weight: 600; color: var(--red); }
.tl-name { display: block; font-size: clamp(.92rem, 1.2vw, 1.08rem); font-weight: 600; }
.tl-short { display: none; }

[data-lane^="a"] .tl-stem { bottom: 50%; }
[data-lane^="b"] .tl-stem { top: 50%; }
[data-lane$="1"] .tl-stem { height: 22px; }
[data-lane$="2"] .tl-stem { height: 70px; }
[data-lane$="3"] .tl-stem { height: 118px; }
[data-lane$="4"] .tl-stem { height: 166px; }
[data-lane="a1"] .tl-label { bottom: calc(50% + 26px); }
[data-lane="a2"] .tl-label { bottom: calc(50% + 74px); }
[data-lane="a3"] .tl-label { bottom: calc(50% + 122px); }
[data-lane="b1"] .tl-label { top: calc(50% + 26px); }
[data-lane="b2"] .tl-label { top: calc(50% + 74px); }
[data-lane="b3"] .tl-label { top: calc(50% + 122px); }
[data-lane="a4"] .tl-label { bottom: calc(50% + 170px); }
[data-lane="b4"] .tl-label { top: calc(50% + 170px); }

/* after 1976: on to today, and on past it */
.tl-mark--now .tl-dot { background: var(--red); border-color: var(--red); }
.tl-mark--now .tl-dot::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid var(--red);
  animation: now-pulse 2.4s var(--ease) infinite;
}
@keyframes now-pulse { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.tl-mark--now .tl-name { color: var(--red); font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 900; letter-spacing: .1em; }
.tl-mark--now .tl-name:lang(en) { letter-spacing: .02em; }
.tl-mark--note .tl-stem { opacity: .2; }
.tl-mark--note .tl-name { font-weight: 400; color: var(--ink-soft); font-size: clamp(.95rem, 1.3vw, 1.15rem); }
.tl-mark--note .tl-name:lang(en) { font-style: italic; }
.tl-mark--q .tl-label { top: 50%; margin-top: -.62em; line-height: 1; }
.tl-mark--q .tl-name {
  font-family: var(--font-en); font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 500;
  color: var(--red); line-height: 1; padding: 0 .12em;
  background: var(--bg-cream);
}

/* the problems it revealed — steps down towards a line */
.aftermath { --step: clamp(12px, 4.6vw, 76px); padding-block: clamp(30px, 6vh, 70px) clamp(120px, 18vh, 200px); }
.aftermath__lead {
  max-width: 31em; margin-bottom: 1.8em;
  font-size: clamp(1.12rem, 1.8vw, 1.5rem); color: var(--ink-soft);
  text-wrap: pretty;
}
.aftermath__turn {
  max-width: 22em; margin-bottom: 1.3em;
  font-size: clamp(1.35rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1.5;
  text-wrap: balance;
}
.aftermath__steps { list-style: none; margin: 0; padding: 0; }
.aftermath__steps li {
  margin-left: calc(var(--i) * var(--step));
  padding: .32em 0 .32em .9em;
  border-left: 2px solid rgba(125, 3, 5, .35);
  font-size: clamp(1.2rem, 2.35vw, 2rem); font-weight: 600; line-height: 1.45;
}
.aftermath__steps li + li { margin-top: .12em; }
.aftermath__steps b, .aftermath__turn b { color: var(--red); font-weight: 900; }
.aftermath__steps li:lang(en) { font-weight: 500; }
.aftermath__steps b:lang(en), :lang(en) .aftermath__steps b { font-weight: 700; }
.aftermath__cross {
  margin: 1.4em 0 .7em calc(4 * var(--step));
  font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: var(--ink-soft);
  text-wrap: pretty;
}
.aftermath__rule { height: 2px; background: var(--red); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
.js .aftermath__rule.reveal {
  opacity: 1; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.8s var(--ease) .15s;
}
.js .aftermath__rule.reveal.is-in { transform: scaleX(1); }
.aftermath__end {
  max-width: 21em; margin-top: 1.3em;
  font-size: clamp(1.45rem, 3.1vw, 2.6rem); font-weight: 700; line-height: 1.45;
  text-wrap: balance;
}
.aftermath__end:lang(en), :lang(en) .aftermath__end { font-weight: 600; line-height: 1.25; }
.aftermath__end em { font-style: normal; color: var(--red); }

@media (max-width: 720px) {
  .timeline__track { height: 470px; }
  .tl-name .tl-full { display: none; }
  .tl-name .tl-short { display: inline; }
  .tl-decade__label:lang(en) { font-size: 1.1rem; }
  .tl-label { white-space: normal; width: max-content; max-width: 7.2em; }
  .tl-name { font-size: .84rem; line-height: 1.25; }
  .tl-year { font-size: .7rem; }
  [data-lane$="2"] .tl-stem { height: 74px; }
  [data-lane$="3"] .tl-stem { height: 126px; }
  [data-lane="a2"] .tl-label { bottom: calc(50% + 78px); }
  [data-lane="a3"] .tl-label { bottom: calc(50% + 130px); }
  [data-lane="b2"] .tl-label { top: calc(50% + 78px); }
  [data-lane="b3"] .tl-label { top: calc(50% + 130px); }
  [data-lane$="4"] .tl-stem { height: 178px; }
  [data-lane="a4"] .tl-label { bottom: calc(50% + 182px); }
  [data-lane="b4"] .tl-label { top: calc(50% + 182px); }
  .aftermath__steps li { padding-left: .7em; }
}

/* ==========================================================
   torn edges — a strip cut from the cover's own tear
   (assets/hero/edge.webp: 160 px tall, the red paper above
   row 60 always overlaps the red section itself)
   ========================================================== */

.bg-red.has-tear { z-index: 2; }
.tear-edge {
  --edge-h: 120px;
  position: absolute; left: 0; right: 0; height: var(--edge-h);
  pointer-events: none;
  background: url("../hero/edge.webp") repeat-x;
  background-size: auto 100%;
  background-position-x: var(--edge-x, 0px);
  filter: drop-shadow(0 0 3px rgba(40, 0, 0, .3));
}
.tear-edge--bottom { top: calc(100% - var(--edge-h) * .375); }
.tear-edge--top { bottom: calc(100% - var(--edge-h) * .375); transform: scaleY(-1); }
.book    > .tear-edge--top    { --edge-x: -200px; }
.book    > .tear-edge--bottom { --edge-x: -1500px; }
.street  > .tear-edge--top    { --edge-x: -2700px; }
.street  > .tear-edge--bottom { --edge-x: -900px; }
.closing > .tear-edge--top    { --edge-x: -2100px; }
.closing > .tear-edge--bottom { --edge-x: -3300px; }
@media (max-width: 720px) { .tear-edge { --edge-h: 84px; } }

/* ==========================================================
   3 · BOOK
   ========================================================== */

.book { padding-block: clamp(90px, 14vh, 160px) clamp(90px, 12vh, 130px); overflow-x: clip; }
.book__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 7vw, 110px); align-items: center;
}
.book__text p { max-width: 30em; color: rgba(242, 227, 200, .9); text-wrap: pretty; }
.book__text a { color: var(--cream-hi); text-underline-offset: .25em; text-decoration-thickness: 1px; }
.book__asks { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); margin: 1.6em 0 1.4em; }
.book__text .book__ask { display: flex; flex-direction: column; margin: 0; max-width: none; line-height: 1.05; color: var(--cream-hi); }
.book__ask > span:not(.book__ask-who) { font-family: var(--font-en); font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 600; letter-spacing: .04em; }
.book__ask-who { font-size: .78rem; letter-spacing: .2em; margin-bottom: .6em; color: rgba(242, 227, 200, .7); }
.book__text .book__ask--past { color: rgba(242, 227, 200, .38); }
.book__ask-arrow { font-size: clamp(1.4rem, 2.4vw, 2rem); color: rgba(242, 227, 200, .6); padding-top: 1em; }
.book__text .display { color: var(--cream-hi); font-size: clamp(2rem, 4.1vw, 3.6rem); }

.book__visual { display: flex; justify-content: center; padding-block: 20px 50px; }
.book3d {
  --w: min(360px, 62vw);
  --d: calc(var(--w) * .11);
  width: var(--w); aspect-ratio: 2 / 3;
  perspective: 1800px;
  position: relative;
  animation: float 7s ease-in-out infinite;
}
.book3d::after {                             /* floor shadow */
  content: ""; position: absolute; left: 6%; right: 2%; bottom: -44px; height: 30px;
  background: radial-gradient(ellipse at center, rgba(20, 0, 0, .55), transparent 70%);
  filter: blur(6px); z-index: -1;
}
.book3d__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(var(--ry, -28deg)) rotateX(var(--rx, 3deg));
  transition: transform .8s var(--ease);
}
.book3d__front, .book3d__back, .book3d__pages { position: absolute; }
.book3d__front {
  inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: translateZ(calc(var(--d) / 2));
  border-radius: 1px 4px 4px 1px;
  box-shadow: inset 4px 0 10px rgba(0, 0, 0, .2);
}
.book3d__back {
  inset: 0; background: var(--red-deep);
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}
.book3d__pages {
  top: 1.2%; right: 0; width: var(--d); height: 97.6%;
  transform: translateX(calc(var(--d) / 2)) rotateY(90deg);
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 18%, transparent 82%, rgba(0,0,0,.22)),
    repeating-linear-gradient(90deg, #f3ece0 0 2px, #ddd3c2 2px 3px);
}
@keyframes float { 50% { transform: translateY(-12px); } }

.marquee { margin-top: clamp(70px, 12vh, 140px); user-select: none; }
.marquee__row { overflow: hidden; padding-block: .06em; }
.marquee__track {
  display: flex; align-items: center; width: max-content;
  font-size: clamp(2.6rem, 8vw, 7rem); font-weight: 900; line-height: 1.25;
  white-space: nowrap;
  animation: marquee 60s linear infinite;
}
.marquee__row--rev .marquee__track { animation-direction: reverse; animation-duration: 52s; }
.marquee__track span { padding-inline: .35em; color: var(--cream-hi); }
.marquee__track span.o { color: rgba(242, 227, 200, .26); }
.marquee__track i { font-style: normal; color: rgba(242, 227, 200, .3); font-weight: 400; }
:lang(en) .marquee__track { font-size: clamp(2.2rem, 6.5vw, 5.8rem); font-weight: 500; font-style: italic; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee__caption {
  margin-top: clamp(30px, 6vh, 60px);
  text-align: center;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: rgba(242, 227, 200, .8);
}

/* ==========================================================
   4 · WHAT THE BOOK ASKS
   The author's sentence, written onto manuscript paper as the
   reader scrolls (main.js sets --ink on each character or word
   and draws the grid and the red-pen marks in an SVG).
   Without JS it is simply the sentence, with the same marks.
   ========================================================== */

.concerns { padding-block: clamp(110px, 18vh, 200px); }
.manuscript {
  position: relative;
  margin-top: clamp(8px, 2vh, 20px);
  padding: clamp(22px, 4.2vw, 60px);
  background: linear-gradient(rgba(255, 251, 242, .55), rgba(255, 251, 242, .55)), var(--bg-cream);
  box-shadow: 0 34px 60px -28px rgba(60, 20, 10, .45), 0 2px 5px rgba(60, 20, 10, .12);
}
.manuscript__text {
  position: relative; margin: 0;
  font-size: clamp(1.45rem, 2.9vw, 2.5rem); line-height: 1.75; font-weight: 600;
  text-wrap: pretty;
}
.manuscript__text:lang(en) { font-weight: 500; line-height: 1.55; font-size: clamp(1.45rem, 2.7vw, 2.35rem); }
.manuscript__text [data-mark="red"] { color: var(--red); }
.manuscript__text [data-mark="grey"] { color: var(--muted); }
.manuscript__text [data-mark="title"] { font-style: italic; }
.manuscript__text [data-mark="line"] {
  text-decoration: underline 2px var(--red);
  text-underline-offset: .32em; text-decoration-skip-ink: none;
}

.manuscript__text.is-set .u {
  opacity: var(--ink, 0);
  transform: translateY(calc((1 - var(--ink, 0)) * .12em));
}
.manuscript__text.is-set .u[data-m="grey"] { color: var(--muted); opacity: calc(var(--ink, 0) * .62); }
.manuscript__text.is-set .u[data-m="red"] { color: var(--red); }
.manuscript__text.is-set .u[data-m="title"] { font-style: italic; }
.manuscript__text:lang(en).is-set .u { display: inline-block; }
.manuscript__lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.manuscript__lines .grid { fill: none; stroke: rgba(125, 3, 5, .3); stroke-width: 1; shape-rendering: crispEdges; }
.manuscript__lines .rule { fill: none; stroke: rgba(27, 22, 19, .12); stroke-width: 1; shape-rendering: crispEdges; }
.manuscript__lines .pen {
  fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1;
}

/* Chinese: one character to a square, as on 稿紙 */
.manuscript.is-grid .manuscript__text {
  width: calc(var(--cols) * var(--cell));
  margin-inline: auto;
  font-size: var(--cell); line-height: calc(var(--cell) * 1.25);
}
.manuscript.is-grid .u {
  display: inline-flex; width: 1em; height: 1em;
  align-items: center; justify-content: center; vertical-align: top;
  font-size: .78em;
  width: calc(1em / .78); height: calc(1em / .78);
}
.manuscript.is-grid .u.is-hang { width: 0; justify-content: flex-start; }

/* English: ruled paper with a red margin line */
.manuscript.is-ruled { padding-left: clamp(44px, 7vw, 96px); }
.manuscript.is-ruled::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: clamp(26px, 4.4vw, 62px); width: 1px;
  background: rgba(125, 3, 5, .45);
}

/* ==========================================================
   5 · STREET & POSTERS
   ========================================================== */

.street { padding-block: clamp(100px, 16vh, 180px); text-align: center; overflow-x: clip; }
.street .display { color: var(--cream-hi); margin-bottom: .35em; }
.street__line { font-size: clamp(1.2rem, 2vw, 1.6rem); color: rgba(242, 227, 200, .82); margin-bottom: clamp(50px, 9vh, 100px); }
.street__lead { display: block; letter-spacing: .3em; }
.rotator {
  display: inline-grid; margin-top: .2em;
  font-size: clamp(2.2rem, 6vw, 4.6rem); font-weight: 900; line-height: 1.3;
  color: var(--cream-hi);
}
.rotator > span {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(.45em); filter: blur(4px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
}
.rotator > span.is-active { opacity: 1; transform: none; filter: none; }
.rotator > span.is-leaving { opacity: 0; transform: translateY(-.45em); }
html:not(.js) .rotator { display: inline; font-size: inherit; }
html:not(.js) .rotator > span { opacity: 1; transform: none; filter: none; }
html:not(.js) .rotator > span + span::before { content: "、"; }

.posters {
  display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;
  gap: clamp(22px, 4vw, 56px);
}
.poster {
  position: relative; margin: 0;
  padding: clamp(24px, 3vw, 38px) clamp(20px, 2.6vw, 32px);
  background: var(--bg-cream);
  color: var(--ink);
  box-shadow: 0 18px 40px rgba(30, 0, 0, .35), 0 2px 0 rgba(0, 0, 0, .06);
  transform: rotate(var(--r, 0deg));
}
.poster:nth-child(2) { margin-top: clamp(0px, 6vw, 70px); }
.poster:nth-child(3) { margin-top: clamp(0px, 2vw, 24px); }
.poster::before, .poster::after {            /* paste marks */
  content: ""; position: absolute; width: 58px; height: 18px;
  background: rgba(242, 227, 200, .55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.poster::before { top: -8px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.poster::after  { bottom: -8px; left: 50%; transform: translateX(-50%) rotate(2deg); }
.poster p {
  margin: 0;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: clamp(1.15rem, 1.75vw, 1.6rem);
  font-weight: 900; line-height: 1.65; letter-spacing: .08em;
  text-align: start;
}
.poster p:lang(en), :lang(en) .poster p {
  writing-mode: horizontal-tb; white-space: normal;
  width: min(15ch, 70vw);
  font-size: clamp(1.35rem, 2.1vw, 1.85rem); font-weight: 600;
  letter-spacing: 0; line-height: 1.22; text-align: left;
}
.js .poster.reveal { opacity: 0; transform: rotate(calc(var(--r, 0deg) + 5deg)) scale(1.12) translateY(-10px); }
.js .poster.reveal.is-in { opacity: 1; transform: rotate(var(--r, 0deg)); transition-duration: .9s, .9s; transition-timing-function: cubic-bezier(.3, 1.25, .5, 1); }

/* ==========================================================
   6 · TRAILER
   ========================================================== */

.trailer { padding-block: clamp(90px, 14vh, 150px) clamp(60px, 9vh, 110px); }
.trailer__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: clamp(24px, 4vh, 40px); }
.trailer__head .display { margin: 0; }

.tabs { display: inline-flex; padding: 4px; border: 1px solid rgba(27, 22, 19, .2); border-radius: 999px; }
.tab {
  border: 0; background: none; cursor: pointer;
  padding: .45em 1.3em; border-radius: 999px;
  font-size: .95rem; letter-spacing: .12em;
  color: var(--ink-soft);
  transition: background-color .35s, color .35s;
}
.tab[aria-selected="true"] { background: var(--red); color: var(--cream-hi); }
.tab:not([aria-selected="true"]):hover { color: var(--ink); }

.player {
  position: relative; aspect-ratio: 16 / 9;
  background: #000; overflow: hidden;
  box-shadow: 0 34px 70px rgba(60, 20, 10, .32), 0 3px 8px rgba(0, 0, 0, .18);
}
.bg-night .player { box-shadow: 0 40px 90px rgba(0, 0, 0, .55); }
.player iframe, .player__facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__facade { display: block; cursor: pointer; padding: 0; background: radial-gradient(ellipse at center, #3a0a0c, #000 75%); }
.player__facade img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .6s, transform 1.2s var(--ease); }
.player__facade:hover img { opacity: 1; transform: scale(1.025); }
.player__btn {
  position: absolute; left: 50%; top: 50%;
  width: clamp(64px, 9vw, 96px); aspect-ratio: 1;
  margin: calc(clamp(64px, 9vw, 96px) / -2) 0 0 calc(clamp(64px, 9vw, 96px) / -2);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(158, 16, 21, .6);
  animation: pulse 2.4s infinite;
  transition: transform .4s var(--ease);
}
.player__btn::after {
  content: ""; position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent var(--cream-hi);
}
.player__facade:hover .player__btn { transform: scale(1.08); }
@keyframes pulse { 70% { box-shadow: 0 0 0 26px rgba(158, 16, 21, 0); } 100% { box-shadow: 0 0 0 0 rgba(158, 16, 21, 0); } }

.trailer__link { margin: 18px 0 0; font-size: .92rem; letter-spacing: .08em; color: var(--ink-soft); }
.trailer__link a { text-decoration: none; border-bottom: 1px solid rgba(27, 22, 19, .3); }
.trailer__link a:hover { color: var(--red); border-color: var(--red); }
.bg-night .trailer__link { color: rgba(219, 204, 186, .6); }
.bg-night .trailer__link a { border-color: rgba(219, 204, 186, .3); }
.bg-night .trailer__link a:hover { color: var(--cream-hi); border-color: var(--cream-hi); }

/* ==========================================================
   7 · LECTURE SERIES  ·  8 · ANIMATED SERIES
   ========================================================== */

.media-head {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap;
  gap: 16px 40px; margin-bottom: clamp(28px, 5vh, 48px);
}
.media-head .display { margin: 0; color: var(--cream-hi); }
.media-head__side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 25em; }
.tabs--dark { border-color: rgba(219, 204, 186, .25); }
.tabs--dark .tab { color: rgba(219, 204, 186, .7); }
.tabs--dark .tab:not([aria-selected="true"]):hover { color: var(--cream-hi); }
.media-head__lede { max-width: 25em; margin: 0; color: rgba(219, 204, 186, .78); font-size: clamp(1rem, 1.2vw, 1.15rem); }

.lectures { padding-block: clamp(120px, 17vh, 180px) clamp(50px, 8vh, 90px); }
.lectures__body {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(16px, 2.4vw, 32px); align-items: stretch;
}
.lecture-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer; overflow: hidden; background: #000;
}
.lecture-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; }
.lecture-poster:hover img { transform: scale(1.02); filter: brightness(1.05); }
.lecture-poster .player__btn { left: 4%; top: auto; bottom: 7%; margin: 0; }
.lecture-poster:hover .player__btn { transform: scale(1.08); }
.is-pending .lecture-poster { cursor: default; }
.is-pending .lecture-poster .player__btn { display: none; }

.lectures__index { position: relative; min-height: 240px; }
.lectures__list {
  position: absolute; inset: 0;
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(219, 204, 186, .3) transparent;
  border-top: 1px solid rgba(219, 204, 186, .14);
}
.lectures__list button {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 14px;
  border: 0; border-bottom: 1px solid rgba(219, 204, 186, .1);
  background: none; cursor: pointer; text-align: left;
  color: rgba(219, 204, 186, .72);
  transition: background-color .3s, color .3s;
}
.lectures__list button:hover { color: var(--cream-hi); background: rgba(219, 204, 186, .06); }
.lectures__list button[aria-current="true"] { color: var(--cream-hi); background: rgba(125, 3, 5, .6); }
.lectures__list img { flex: 0 0 auto; width: 72px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; opacity: .7; transition: opacity .3s; }
.lectures__list button:hover img, .lectures__list button[aria-current="true"] img { opacity: 1; }
.media-head__lede a { color: var(--cream-hi); text-underline-offset: .25em; }
.lectures__no { font-family: var(--font-en); font-size: .95rem; font-variant-numeric: lining-nums tabular-nums; opacity: .7; }
.lectures__title { font-size: .98rem; line-height: 1.5; }

.animation { padding-block: clamp(40px, 7vh, 80px) clamp(110px, 16vh, 170px); }
.ep-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; overflow: hidden; text-align: left; cursor: default;
  color: rgba(219, 204, 186, .5);
  background: linear-gradient(160deg, #241314, #0f0908 65%);
}
.ep-poster > * { position: absolute; }
.ep-poster__series { left: 6%; top: 8%; font-size: clamp(.68rem, 1vw, .86rem); letter-spacing: .24em; }
.ep-poster__title { left: 6%; top: 17%; font-size: clamp(1.3rem, 2.6vw, 2.3rem); font-weight: 900; letter-spacing: .06em; }
.ep-poster__title:lang(en), :lang(en) > .ep-poster__title { font-weight: 600; letter-spacing: .01em; }
.ep-poster__no {
  left: 4.5%; bottom: -.08em; line-height: 1;
  font-family: var(--font-en); font-weight: 500; font-size: clamp(6rem, 19vw, 16rem); letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1px rgba(219, 204, 186, .22);
}
.ep-poster__tag {
  right: 5%; top: 8%; padding: .28em .9em;
  border: 1px solid currentColor; font-size: .78rem; letter-spacing: .2em;
}
.ep-poster .player__btn { display: none; left: auto; top: auto; right: 6%; bottom: 10%; margin: 0; }
.is-lit .ep-poster { background: var(--bg-red); color: var(--cream-hi); }
/* the series cover art: full colour on lit episodes, dimmed on the rest */
.ep-poster .ep-poster__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) brightness(.28); transition: filter .6s; }
.is-lit .ep-poster .ep-poster__cover { filter: none; }
.ep-poster:has(.ep-poster__cover) { color: var(--cream-hi); }
.ep-poster:has(.ep-poster__cover) .ep-poster__series,
.ep-poster:has(.ep-poster__cover) .ep-poster__no { display: none; }
.ep-poster:has(.ep-poster__cover) .ep-poster__title {
  top: auto; left: 0; right: 0; bottom: 0; padding: 2.4em 6% 5%;
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
}
.ep-poster:has(.ep-poster__cover) .ep-poster__tag { background: rgba(0, 0, 0, .55); }
.is-lit .ep-poster::before { z-index: 0; }
.ep-poster:has(.ep-poster__cover)::before { display: none; }
.ep-poster:has(.ep-poster__cover) .player__btn { right: 5%; bottom: 7%; }
.is-lit .ep-poster::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 28% 38%, transparent 25%, rgba(18, 0, 0, .55)); }
.is-lit .ep-poster__no { -webkit-text-stroke-color: rgba(242, 227, 200, .6); }
.is-playable .ep-poster { cursor: pointer; }
.is-playable .ep-poster .player__btn { display: block; }
.ep__list button:not(.is-lit) { color: rgba(219, 204, 186, .34); }
.ep__list button[aria-current="true"]:not(.is-lit) { background: rgba(219, 204, 186, .07); color: rgba(219, 204, 186, .6); }
.ep__list button.is-lit .ep__no { color: var(--cream-hi); opacity: 1; }
.ep__list .ep__no { min-width: 3.4em; }
.ep__tag { margin-left: auto; font-size: .7rem; letter-spacing: .16em; color: var(--cream-hi); }
.ep__tag:not(:empty) { padding: .1em .6em; border: 1px solid rgba(242, 227, 200, .45); }


@media (max-width: 860px) {
  .lectures__body { grid-template-columns: 1fr; }
  .lectures__index { min-height: 0; }
  .lectures__list { position: static; max-height: 340px; }
}

/* ==========================================================
   7 · EDITIONS
   ========================================================== */

.editions { padding-block: clamp(100px, 16vh, 180px); overflow-x: clip; }
.showcase { margin-top: clamp(40px, 7vh, 80px); }
.showcase__stage {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(30px, 6vw, 90px); align-items: center;
}
.showcase__coverwrap { perspective: 1400px; display: flex; justify-content: center; }
.showcase__cover {
  width: min(380px, 68vw); height: auto; aspect-ratio: 2 / 3;
  box-shadow: 0 34px 70px rgba(60, 10, 0, .38), 0 4px 10px rgba(0, 0, 0, .2);
  transition: transform .32s cubic-bezier(.5, 0, .75, 0), opacity .32s;
}
.showcase.is-flipping .showcase__cover { transform: rotateY(-90deg) scale(.96); opacity: .4; }
.showcase.is-landing .showcase__cover { transition: transform .5s cubic-bezier(.2, .8, .3, 1.1), opacity .4s; }

.showcase__info > * { transition: opacity .3s, transform .45s var(--ease); }
.showcase.is-flipping .showcase__info > * { opacity: 0; transform: translateY(10px); }
.showcase__native { font-size: .9rem; letter-spacing: .3em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: .6em; }
.showcase__title { font-size: clamp(1.8rem, 3.6vw, 3.1rem); font-weight: 900; line-height: 1.2; margin-bottom: .6em; text-wrap: balance; }
.showcase__title:lang(en), .showcase__title:lang(es), .showcase__title:lang(fr), .showcase__title:lang(de) { font-weight: 500; font-style: italic; line-height: 1.12; }
.showcase__status {
  display: inline-block; margin: 0;
  padding: .3em 1em; border: 1px solid var(--red); color: var(--red);
  font-size: .88rem; letter-spacing: .24em;
}

.showcase__thumbs {
  display: flex; justify-content: center; gap: clamp(8px, 1.4vw, 18px);
  margin-top: clamp(40px, 7vh, 70px);
  padding-bottom: 8px;
}
.showcase__thumbs button {
  flex: 0 0 auto; width: clamp(62px, 8vw, 104px);
  border: 0; padding: 0; background: none; cursor: pointer;
  text-align: center;
}
.showcase__thumbs img {
  width: 100%; height: auto; aspect-ratio: 2 / 3;
  box-shadow: 0 8px 18px rgba(60, 10, 0, .22);
  transition: transform .5s var(--ease), box-shadow .5s, outline-color .3s;
  outline: 2px solid transparent; outline-offset: 4px;
}
.showcase__thumbs span { display: block; margin-top: .7em; font-size: .82rem; letter-spacing: .12em; color: var(--muted); transition: color .3s; }
.showcase__thumbs button:hover img { transform: translateY(-6px); }
.showcase__thumbs [aria-selected="true"] img { transform: translateY(-10px); outline-color: var(--red); box-shadow: 0 16px 26px rgba(60, 10, 0, .3); }
.showcase__thumbs [aria-selected="true"] span { color: var(--red); font-weight: 600; }

/* thumbs fan out when first seen */
.js .showcase__thumbs button {
  opacity: 0;
  transform: translateX(calc((3 - var(--i)) * 70%)) translateY(40px) rotate(calc((var(--i) - 3) * 6deg));
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--i) * .06s);
}
.js .showcase.is-in .showcase__thumbs button { opacity: 1; transform: none; }

/* ==========================================================
   8 · CLOSING
   ========================================================== */

.closing { padding-block: clamp(120px, 20vh, 220px); text-align: center; overflow-x: clip; }
.closing__inner { max-width: 980px; }
.closing__pre, .closing__post { color: rgba(242, 227, 200, .82); font-size: clamp(1.02rem, 1.4vw, 1.25rem); }
.closing__big { color: var(--cream-hi); margin-block: .6em .9em; font-size: clamp(1.9rem, 5vw, 4.2rem); }
.closing__post { margin-bottom: 3em; }

.stamp {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: .7em 1.6em .6em;
  border: 3px double var(--cream-hi);
  color: var(--cream-hi);
  transform: rotate(-6deg);
}
.stamp span { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; letter-spacing: .3em; line-height: 1.1; margin-right: -.3em; }
.stamp small { font-size: .78rem; letter-spacing: .4em; text-transform: uppercase; margin-top: .4em; margin-right: -.4em; }
.stamp:lang(en) span, :lang(en) .stamp span { letter-spacing: .12em; margin-right: -.12em; font-weight: 600; text-transform: uppercase; }
.js .stamp.reveal { opacity: 0; transform: rotate(-16deg) scale(1.9); }
.js .stamp.reveal.is-in {
  opacity: 1; transform: rotate(-6deg) scale(1);
  transition: opacity .25s ease-out .25s, transform .45s cubic-bezier(.3, 1.5, .55, 1) .25s;
}

/* ==========================================================
   9 · CONTACT & FOOTER
   ========================================================== */

.contact { padding-block: clamp(100px, 16vh, 170px); }
.contact__email { font-size: clamp(1.6rem, 5.4vw, 4rem); line-height: 1.2; margin-bottom: .5em; overflow-wrap: anywhere; }
.contact__email a {
  text-decoration: none; color: var(--red);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .6s var(--ease);
}
.contact__email a:hover { background-size: 100% 2px; }
.copy {
  cursor: pointer; border: 1px solid var(--ink); background: none;
  padding: .5em 1.3em; border-radius: 999px;
  font-size: .9rem; letter-spacing: .14em;
  transition: background-color .3s, color .3s;
}
.copy:hover, .copy.is-done { background: var(--ink); color: var(--cream); }
.contact__meta { display: flex; flex-wrap: wrap; gap: 20px clamp(30px, 6vw, 90px); margin: clamp(40px, 7vh, 70px) 0 0; padding-top: 30px; border-top: 1px solid rgba(27, 22, 19, .18); }
.contact__meta dt { font-size: .8rem; letter-spacing: .3em; color: var(--muted); text-transform: uppercase; }
.contact__meta dd { margin: .3em 0 0; font-weight: 600; line-height: 1.6; }
.author-link { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .2em .9em; text-decoration: none; transition: color .3s; }
.author-link__go {
  font-size: .78rem; letter-spacing: .14em; font-weight: 600; color: var(--red);
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: letter-spacing .4s var(--ease);
}
.author-link:hover { color: var(--red); }
.author-link:hover .author-link__go { letter-spacing: .22em; }

.site-footer { padding-block: 40px; font-size: .88rem; color: rgba(219, 204, 186, .6); }
.site-footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 30px; }
.site-footer p { margin: 0; }
.site-footer__title { color: var(--cream); letter-spacing: .12em; font-weight: 600; }
.site-footer a { text-decoration: none; border-bottom: 1px solid rgba(219, 204, 186, .25); }
.site-footer a:hover { color: var(--cream-hi); }

.lang-toast {
  position: fixed; left: 50%; bottom: 18px; z-index: 70;
  display: flex; align-items: center; gap: 6px;
  transform: translateX(-50%);
  padding: 6px 6px 6px 18px;
  background: var(--ink); color: var(--cream);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  font-size: .92rem; white-space: nowrap;
  animation: toast .6s var(--ease) both 1.6s;
}
.lang-toast[hidden] { display: none; }
.lang-toast a { text-decoration: none; }
.lang-toast button { border: 0; background: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; line-height: 1; color: inherit; }
.lang-toast button:hover { background: rgba(219, 204, 186, .14); }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 20px); } }

/* ==========================================================
   responsive
   ========================================================== */

@media (max-width: 860px) {
  .book__grid, .showcase__stage { grid-template-columns: 1fr; }
  .book__visual { order: -1; }
  .showcase__info { text-align: center; }
  .showcase__thumbs { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 4px 8px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .showcase__thumbs::-webkit-scrollbar { display: none; }
  .showcase__thumbs button { scroll-snap-align: center; }
  .poster:nth-child(n) { margin-top: 0; }
}

@media (max-width: 560px) {
  .brand { letter-spacing: .16em; white-space: nowrap; font-size: .95rem; }
  .lang-switch, .menu-btn { white-space: nowrap; flex-shrink: 0; }
  .site-header { gap: 12px; }
  .hero__meta--left { font-size: .6rem; letter-spacing: .1em; max-width: 28vw; }
  .hero__meta--left br { display: none; }
}

/* ==========================================================
   reduced motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero { height: 100vh; height: 100svh; }
  .js .timeline { height: auto; }
  .js .timeline__stage { position: relative; height: auto; }
  .timeline__caption { position: static; opacity: 1; transform: none; margin-bottom: .3em; }
  .tl-mark--now .tl-dot::after { animation: none; }
  .js .reveal, .js .reveal-lines .ln > span, .js .poster.reveal, .js .stamp.reveal { transform: none; transition: opacity .6s; }
  .js .poster.reveal, .js .poster.reveal.is-in { transform: rotate(var(--r, 0deg)); }
  .js .stamp.reveal, .js .stamp.reveal.is-in { transform: rotate(-6deg); }
  .marquee__track, .book3d, .hero__cue span, .player__btn { animation: none; }
  .marquee__row { overflow-x: auto; }
  .js .showcase__thumbs button { transform: none; transition: opacity .6s; }
}