/* ============================================================
   IN OTHER VOICES — the light counterpart.

   The main page is a cathedral at night: black ground, gold
   leaf, stained glass lit from behind. This page is the same
   room at ten in the morning. Paper instead of stone, sunlight
   instead of candlelight, dust instead of sparks.

   Every layer here answers a layer over in style.css:
     bg-gradient  → warm paper wash
     bg-vignette  → bloom (light at the edges, not dark)
     bg-particles → dust in a sunbeam, not embers in the dark
     mouse-light  → a warm patch of sun that follows the pointer
   ============================================================ */

/* ========== CUSTOM FONTS ========== */
@font-face {
  font-family: 'CCSBjork';
  src: url('../assets/fonts/CCSBjork-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CCSBjork';
  src: url('../assets/fonts/CCSBjork.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CCSBjork';
  src: url('../assets/fonts/CCSBjork-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hermissoul';
  src: url('../assets/fonts/Hermissoul-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ========== RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Paper stack — warm, never clinical white */
  --paper:      #f7f2e8;
  --paper-deep: #ece2d0;
  --paper-warm: #fdf9f1;

  /* Ink — a brown-black, as if iron gall on rag paper */
  --ink:      #2f2820;
  --ink-soft: rgba(47, 40, 32, 0.70);
  --ink-faint: rgba(47, 40, 32, 0.62);
  --rule:     rgba(47, 40, 32, 0.14);

  /* Accent — the gold of the night page, burnt down until it
     holds its own against paper. 4.9:1 on --paper. */
  --accent:      #9c5f28;
  --accent-deep: #7a4718;
  --accent-soft: rgba(156, 95, 40, 0.12);

  /* Per-song colour world, overwritten per sheet from JS */
  --song-accent: #8f5545;

  /* One column width for statement and sheets, so their edges agree */
  --measure: 640px;      /* running text */
  --measure-wide: 780px; /* sheets, which break out of the column */
  --measure-strip: 1000px; /* the picture strip */

  /* Same easings as the night page — the two must move alike */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

html, body { width: 100%; max-width: 100%; }
html { scroll-behavior: auto; }

body {
  font-family: 'EB Garamond', serif;
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== ATMOSPHERIC LIGHT STACK ========== */
.bg-wash, .bg-bloom, .bg-shafts, .bg-paper-tooth,
.bg-sun, .bg-dust {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}

/* Slow warm wash — the sun crossing the room over two minutes */
.bg-wash {
  background:
    radial-gradient(ellipse at 18% 8%,  #fffaf0 0%, transparent 58%),
    radial-gradient(ellipse at 84% 88%, #f2ece0 0%, transparent 55%),
    var(--paper);
  background-size: 200% 200%;
  animation: washDrift 120s ease-in-out infinite alternate;
}
@keyframes washDrift {
  0%   { background-position:   0%   0%, 100% 100%; }
  50%  { background-position:  20%  30%,  70%  80%; }
  100% { background-position:  40%  60%,  30%  20%; }
}

/* Bloom — the night page darkens its edges; this one overexposes
   them, the way a bright window eats its own frame. */
.bg-bloom {
  background: radial-gradient(ellipse at 50% 45%,
    transparent 32%,
    rgba(255, 252, 244, 0.55) 78%,
    rgba(255, 253, 248, 0.85) 100%);
}

/* Light shafts — sun through a tall window, falling across paper */
.bg-shafts {
  background: repeating-linear-gradient(
    102deg,
    rgba(226, 211, 184, 0.58)  0px,
    rgba(230, 216, 191, 0.34) 30px,
    rgba(255, 255, 255, 0)    62px,
    rgba(255, 255, 255, 0)   104px,
    rgba(230, 216, 191, 0.34) 148px,
    rgba(226, 211, 184, 0.58) 290px
  );
  opacity: 0.55;
  /* Multiply, not screen: on paper a sunbeam reads as everything
     around it being slightly in shade, never as added white. */
  mix-blend-mode: multiply;
  animation: shaftsDrift 90s ease-in-out infinite alternate;
}
@keyframes shaftsDrift {
  0%   { transform: translate3d(-3%, -1%, 0) scale(1.06); opacity: 0.42; }
  100% { transform: translate3d( 3%,  1%, 0) scale(1.10); opacity: 0.62; }
}

/* The tooth of the paper itself */
.bg-paper-tooth {
  opacity: 0.22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='11'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.48  0 0 0 0 0.38  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23t)'/></svg>");
  background-size: 200px 200px;
}

/* Sun patch following the pointer — the night page's lantern,
   turned inside out: it warms the paper instead of lighting the dark. */
.bg-sun {
  background: radial-gradient(circle 480px at var(--mx, 50%) var(--my, 40%),
    rgba(255, 236, 190, 0.55) 0%,
    rgba(255, 242, 214, 0.22) 30%,
    transparent 62%);
  mix-blend-mode: multiply;
  transition: background 0.12s linear;
}

.bg-dust { opacity: 0.85; }

/* Everything above the atmosphere */
.page, .modal { position: relative; z-index: 1; }
/* Nothing may make the page wider than the screen */
.page { max-width: 100vw; overflow-x: hidden; }
.modal { z-index: 1000; }

/* ========== INTERACTION BASE ========== */
button { background: none; border: none; cursor: pointer; color: inherit; font: inherit; }
a { color: inherit; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  a, button { transition: color .3s var(--ease-out), opacity .3s var(--ease-out); }
}
.footer-link:active, .modal-close:active, .sheet-listen:active { transform: scale(0.97); }

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4 {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-weight: 400;
}

/* ========== LANGUAGE ==========
   German is where this page rests. The switch has to be visible enough
   that an English reader finds it without hunting, which rules out the
   dimmed EN|DE whisper the page used to carry. */
.lang-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: rgba(255, 252, 245, 0.7);
}

.lang-btn {
  padding: 0.34rem 0.72rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  border-radius: 1px;
  white-space: nowrap;
  transition: background .35s var(--ease-out), color .35s var(--ease-out);
}
.lang-btn.is-active { background: var(--accent); color: #fdf9f1; }
@media (hover: hover) and (pointer: fine) {
  .lang-btn:not(.is-active):hover { background: var(--accent-soft); color: var(--accent-deep); }
}
.lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

html[lang="de"] .lang-en { display: none !important; }
html[lang="en"] .lang-de { display: none !important; }

/* ========== HERO ========== */
.hero {
  position: relative;
  min-height: 64vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7.5rem 1.5rem 2rem;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 4;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 3.5vh, 2.6rem);
  max-width: 100%;
}

.hero-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.72rem, 1.6vw, 0.85rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  animation-name: riseIn;
  animation-duration: 1.4s;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: forwards;
  animation-delay: .2s;
}

.hero-title {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 7.4vw, 5.6rem);
  font-weight: 300;
  --track: 0.11em;
  letter-spacing: var(--track);
  line-height: 1.14;
  margin: 0;
  position: relative;
  display: inline-block;
  max-width: 100%;
  opacity: 0;
  /* Watercolour on paper — the night page's stained glass, washed out
     and darkened until it reads as pigment rather than light. */
  background-image: linear-gradient(
    110deg,
    #a9702f 0%,
    #9c5f28 16%,
    #8f4a3e 34%,
    #6b6450 50%,
    #4f6f73 66%,
    #4a6288 84%,
    #74558a 100%
  );
  background-size: 180% 100%;
  background-position: 12% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: titleRise 2.6s cubic-bezier(.22,.61,.36,1) forwards .35s,
             titleWash 24s ease-in-out infinite alternate 3s;
}

/* The bloom behind the letters — sun caught in the paper fibres */
.hero-title::before {
  content: '';
  position: absolute;
  inset: -34% -10%;
  background: radial-gradient(ellipse at center,
    rgba(255, 233, 186, 0.55) 0%,
    rgba(255, 224, 196, 0.22) 38%,
    transparent 72%);
  filter: blur(26px);
  z-index: -1;
  opacity: 0;
  animation: bloomBreathe 8s ease-in-out infinite alternate 2s;
}

@keyframes titleRise {
  from { opacity: 0; transform: translateY(26px); letter-spacing: 0.28em; }
  to   { opacity: 1; transform: translateY(0);    letter-spacing: var(--track); }
}
@keyframes titleWash {
  0%   { background-position:  12% 50%; }
  50%  { background-position:  88% 50%; }
  100% { background-position:  45% 50%; }
}
@keyframes bloomBreathe {
  0%   { opacity: 0.5;  transform: scale(0.95); }
  100% { opacity: 0.92; transform: scale(1.08); }
}
/* Tracking that reads as elegant at 5rem only wastes width at 2rem. The
   animation lands on var(--track), so one keyframe block serves both.
   (A second @keyframes nested in a media query looked tidier and quietly
   broke every animation that followed it.) */
@media (max-width: 560px) {
  .hero-title { --track: 0.05em; }
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The rule — the night page has a gold lozenge; here it is an open
   circle, the same mark left unfilled, as a borrowed thing is. */
.hero-rule {
  width: clamp(180px, 32vw, 320px);
  height: 12px;
  opacity: 0;
  animation-name: riseIn;
  animation-duration: 1.2s;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: forwards;
  animation-delay: .75s;
}

.hero-sub {
  font-family: 'Hermissoul', 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34ch;
  text-wrap: balance;
  opacity: 0;
  animation-name: riseIn;
  animation-duration: 1.2s;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: forwards;
  animation-delay: 1s;
}





/* ========== STATEMENT ========== */
.statement {
  padding: clamp(2rem, 5vh, 3.5rem) 1.5rem clamp(3rem, 8vh, 5rem);
}
.statement-inner {
  max-width: var(--measure);
  margin: 0 auto;
  text-align: left;
}
.statement p {
  margin-bottom: 1.6rem;
  color: var(--ink-soft);
}
.statement p:last-child { margin-bottom: 0; }


/* ========== SECTION TITLE ========== */
.section-title {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 300;
  line-height: 1.35;   /* wide-set capitals want a little air, not a full line */
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  margin-bottom: clamp(2.5rem, 7vh, 4.5rem);
}

/* ========== THE SHEETS ========== */
.covers { padding: 0 1.5rem clamp(2.5rem, 7vh, 5rem); }

.sheet-list {
  list-style: none;
  max-width: var(--measure-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vh, 4rem);
}

/* Each cover is a sheet of paper laid on the page — lifted just
   enough to cast a shadow, never enough to look like a card. */
.sheet {
  position: relative;
  background: linear-gradient(168deg, var(--paper-warm) 0%, var(--paper) 62%, var(--paper-deep) 100%);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: clamp(2.2rem, 5vw, 3rem) clamp(1.6rem, 4vw, 2.8rem) clamp(2.4rem, 5vw, 3rem);
  box-shadow:
    0 1px 2px rgba(47, 40, 32, 0.05),
    0 12px 34px rgba(47, 40, 32, 0.07);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.sheet.is-visible { opacity: 1; transform: translateY(0); }

/* The song's own colour, bleeding into the paper from the top edge */
.sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: radial-gradient(ellipse at 50% 0%,
    color-mix(in oklab, var(--song-accent) 16%, transparent) 0%,
    transparent 62%);
  pointer-events: none;
}

.sheet-inner {
  position: relative;
  display: grid;
  grid-template-columns: clamp(150px, 26vw, 240px) minmax(0, 1fr);
  gap: clamp(1.4rem, 3.5vw, 2.6rem);
  align-items: center;
}
.sheet--textonly .sheet-inner { grid-template-columns: minmax(0, 1fr); }

.sheet-body { min-width: 0; }

.sheet-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.75rem;
  letter-spacing: 0.34em;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.sheet-title {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 4.2vw, 2.35rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 0.9rem;
  text-wrap: balance;
}

.sheet-origin {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.sheet-origin .by {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--ink-faint);
  margin-right: 0.4rem;
}
.sheet-origin .who {
  color: var(--song-accent);
  border-bottom: 1px solid color-mix(in oklab, var(--song-accent) 34%, transparent);
  padding-bottom: 1px;
}
.sheet-work {
  display: block;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

.sheet-note {
  font-family: 'Hermissoul', 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 1.4rem;
  padding-left: 1.1rem;
  border-left: 1px solid color-mix(in oklab, var(--song-accent) 30%, transparent);
}

/* Status — 'soon' is a held breath, not a countdown */
.sheet-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sheet-status::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--song-accent);
  opacity: 0.75;
  animation: statusBreathe 3.4s ease-in-out infinite;
}
@keyframes statusBreathe {
  0%, 100% { opacity: 0.3;  transform: scale(0.85); }
  50%      { opacity: 0.95; transform: scale(1.15); }
}

.sheet-listen {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
  padding: 0.6rem 1.3rem;
  border: 1px solid color-mix(in oklab, var(--song-accent) 40%, transparent);
  border-radius: 2px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--song-accent);
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sheet-listen:hover {
    background: color-mix(in oklab, var(--song-accent) 8%, transparent);
    border-color: var(--song-accent);
  }
}

@media (max-width: 620px) {
  .sheet-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .sheet-body { text-align: center; }
  .sheet-note {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid color-mix(in oklab, var(--song-accent) 30%, transparent);
    padding-top: 1.1rem;
  }
}

/* ========== MORE TO COME ========== */

/* ========== FOOTER ========== */
.footer {
  padding: clamp(3rem, 8vh, 5rem) 1.5rem 3rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 auto;
}
.footer p + p { margin-top: 0.5rem; }
.footer a, .footer-link {
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 0 .15rem;
}
@media (hover: hover) and (pointer: fine) {
  .footer a:hover, .footer-link:hover { color: var(--accent); }
}

/* ========== MODALS ========== */
.modal {
  position: fixed; inset: 0;
  background: rgba(247, 242, 232, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  animation: modalFade .35s var(--ease-out) forwards;
  overflow-y: auto;
}
@keyframes modalFade { to { opacity: 1; } }
.modal[hidden] { display: none; }
.modal-inner {
  position: relative;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  box-shadow: 0 20px 60px rgba(47, 40, 32, 0.12);
  border-radius: 2px;
  max-width: 640px;
  width: 100%;
  max-height: 84vh;
  overflow-y: auto;
  padding: clamp(2rem, 5vw, 3rem);
}
.modal-inner h3 {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
}
.modal-inner h4 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; color: var(--accent); }
.modal-inner p { font-size: 0.95rem; margin-bottom: 1rem; line-height: 1.7; color: var(--ink-soft); }
.modal-inner a { color: var(--accent); border-bottom: 1px solid var(--accent-soft); }
.modal-close {
  position: absolute;
  top: 1rem; right: 1.2rem;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--ink-faint);
}
@media (hover: hover) and (pointer: fine) {
  .modal-close:hover { color: var(--accent); }
}

/* ========== REVEAL ========== */
.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.fade-in.is-visible { opacity: 1; transform: translateY(0); }

/* ========== REDUCED MOTION ==========
   Drop everything that drifts, breathes or draws itself. The page
   must still arrive fully formed, never stuck mid-animation. */
@media (prefers-reduced-motion: reduce) {
  * { animation-delay: 0.01ms !important; transition-delay: 0.01ms !important; }
  /* Nothing fades in here either, so nothing can fail to arrive. */
  .hero-title, .hero-eyebrow, .hero-rule, .hero-sub, .moon-menu,
  .fade-in, .band, .craft-figure, .craft-text, .sheet, .sc-inner, .sc-tile,
  .word, [data-words] .word {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .bg-wash, .bg-shafts, .hero-title, .hero-title::before,
  .sheet-status::before, 
  .hero-eyebrow, .hero-rule, .hero-sub, 
  .hero-title {
    opacity: 1;
    background-position: 45% 50%;
    letter-spacing: 0.11em;
  }
  .hero-title::before { opacity: 0.7; }
  .fade-in, .sheet {
    transition-duration: .01s;
  }
  .bg-dust { display: none; }
}

/* ============================================================
   COVER ART
   The drawing that used to stand here was a stand-in for a picture
   that did not exist yet. Now it does.
   ============================================================ */
.sheet-art {
  position: relative;
  aspect-ratio: 1;
  border-radius: 2px;
  overflow: hidden;
  /* A cover is a printed thing laid on the sheet: it casts its own
     small shadow rather than sitting flush with the paper. */
  box-shadow:
    0 1px 2px rgba(47, 40, 32, 0.10),
    0 10px 26px rgba(47, 40, 32, 0.16);
}
.sheet-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  opacity: 0;
  transition: transform 1.6s var(--ease-out), opacity 1.2s var(--ease-out);
}
.sheet.is-visible .sheet-art img { transform: scale(1); opacity: 1; }

/* A breath of the song's colour along the top edge of the artwork */
.sheet-art-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--song-accent) 22%, transparent) 0%,
    transparent 45%);
  mix-blend-mode: soft-light;
}

/* ============================================================
   BY HAND — the picture strip
   Text and photograph take turns leading. Each row arrives from the
   side its picture sits on, so the page reads as a hand laying things
   down one after another.
   ============================================================ */
.craft {
  padding: clamp(2rem, 6vh, 4rem) 1.5rem clamp(1.5rem, 4vh, 3rem);
}

.craft-row {
  max-width: var(--measure-strip);
  margin: 0 auto clamp(3rem, 8vh, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4.5vw, 3.4rem);
  align-items: center;
}
.craft-row:last-child { margin-bottom: 0; }
.craft-row--flip .craft-figure { order: 2; }

.craft-figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(47, 40, 32, 0.06),
    0 14px 40px rgba(47, 40, 32, 0.10);
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
.craft-row--flip .craft-figure { transform: translateX(36px); }
.craft-row.is-visible .craft-figure { opacity: 1; transform: translateX(0); }

.craft-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 2s var(--ease-out);
}
.craft-row.is-visible .craft-figure img { transform: scale(1); }

.craft-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease-out) .15s, transform 1.2s var(--ease-out) .15s;
}
.craft-row.is-visible .craft-text { opacity: 1; transform: translateY(0); }

.craft-text p {
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  line-height: 1.82;
  color: var(--ink-soft);
  max-width: 40ch;
}

@media (max-width: 760px) {
  .craft-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  /* On one column the picture always leads, whichever side it took above */
  .craft-row--flip .craft-figure { order: 0; }
  .craft-figure, .craft-row--flip .craft-figure { transform: translateY(28px); }
  .craft-row.is-visible .craft-figure { transform: translateY(0); }
  .craft-text p { max-width: none; }
}

/* ============================================================
   BANDS — a photograph across the whole width, breathing slowly
   ============================================================ */
.band {
  position: relative;
  width: 100%;
  margin: clamp(2rem, 7vh, 5rem) 0;
  overflow: hidden;
  opacity: 0;
  /* The movement belongs to the frame, never to the photograph. A scale on
     the image itself crops it — a head can sit outside the frame for as long
     as the transition lasts, and for good if the reveal never fires. */
  transform: translateY(26px);
  transition: opacity 1.3s var(--ease-out), transform 1.3s var(--ease-out);
}
.band.is-visible { opacity: 1; transform: none; }

.band img {
  width: 100%;
  height: auto;
  display: block;
}

/* The photographs are dark; the page is not. Fade their edges into the
   paper so a band reads as an opening in the page, not a pasted block. */
.band-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--paper) 0%,
    rgba(247, 242, 232, 0) 7%,
    rgba(247, 242, 232, 0) 93%,
    var(--paper) 100%);
}

/* ============================================================
   WORDS — a line arriving one word at a time
   ============================================================ */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.32em);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
[data-words].is-lit .word { opacity: 1; transform: translateY(0); }
/* Without JS no word is ever wrapped, so the text simply stands there. */


@media (prefers-reduced-motion: reduce) {
  .word { transition: none; opacity: 1; transform: none; }
  .craft-figure, .craft-text, .band, .sheet-art img, .craft-figure img {
    transition-duration: .01s;
    transform: none;
    opacity: 1;
  }
  .band { transform: none; opacity: 1; }
}



/* ============================================================
   MOON MENU — the same four phases, drawn for paper.
   ============================================================ */
.moon-menu {
  opacity: 0;
  /* Same reasoning as on the night page: the menu arrives early. */
  animation-name: riseIn;
  animation-duration: 1.1s;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: forwards;
  animation-delay: .55s;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.4rem, 5vw, 3.6rem);
  margin: 0 auto;
  padding: 0.5rem 0;
}

.moon-orb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem;
  -webkit-tap-highlight-color: transparent;
}

.moon-disc {
  display: block;
  width: clamp(64px, 10vw, 116px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* On paper a moon casts a shadow rather than a glow */
  filter: drop-shadow(0 3px 10px rgba(47, 40, 32, 0.16));
  transition: filter .6s var(--ease-out), transform .6s var(--ease-out);
  animation: moonDrift 11s ease-in-out infinite alternate;
}
.moon-disc svg { width: 100%; height: 100%; display: block; }

.moon-orb:nth-child(1) .moon-disc { animation-duration: 11s;   animation-delay: 0s; }
.moon-orb:nth-child(2) .moon-disc { animation-duration: 13.5s; animation-delay: -3s; }
.moon-orb:nth-child(3) .moon-disc { animation-duration: 9.5s;  animation-delay: -6s; }
.moon-orb:nth-child(4) .moon-disc { animation-duration: 15s;   animation-delay: -1.5s; }

@keyframes moonDrift {
  0%   { transform: translate3d(0, -5px, 0); }
  100% { transform: translate3d(0,  6px, 0); }
}

.moon-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.72rem, 1.5vw, 0.9rem);
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--ink-soft);
  transition: color .4s var(--ease-out);
  max-width: 16ch;
  line-height: 1.35;
  text-wrap: balance;
  min-height: 2.7em;
}

@media (hover: hover) and (pointer: fine) {
  .moon-orb:hover .moon-disc {
    filter: drop-shadow(0 6px 18px rgba(47, 40, 32, 0.26));
    transform: scale(1.07);
  }
  .moon-orb:hover .moon-name { color: var(--ink); }
}
.moon-orb:active .moon-disc { transform: scale(0.97); }
.moon-orb:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.moon-orb[aria-current="page"] .moon-name { color: var(--ink); }

/* ---------- Language switch, always in reach ---------- */
.lang-toggle {
  position: fixed;
  top: 1.2rem; right: 1.2rem;
  z-index: 210;
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: rgba(253, 249, 241, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------- The small bar ---------- */
.moon-mini {
  position: fixed;
  top: 1.2rem; left: 1.2rem;
  z-index: 205;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.2rem);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: rgba(253, 249, 241, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.moon-mini.is-shown { opacity: 1; transform: none; pointer-events: auto; }

.moon-mini-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color .35s var(--ease-out);
}
.moon-mini-item svg { width: 14px; height: 14px; color: var(--accent); opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .moon-mini-item:hover { color: var(--ink); }
}
.moon-mini-item[aria-current="page"] { color: var(--ink); }

@media (max-width: 700px) {
  .moon-mini { gap: 0.55rem; padding: 0.35rem 0.5rem; }
  .moon-mini-item span { display: none; }
  .moon-mini-item svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .moon-disc { animation: none; }
}

/* Forced visible by the safety net when a hero animation never ran */
.is-forced-visible { opacity: 1 !important; transform: none !important; }

/* ============================================================
   LOW POWER — see the note in style.css. Same bargain: decoration
   goes, content stays.
   ============================================================ */
.low-power .lang-toggle,
.low-power .moon-mini,
.low-power .modal {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.low-power .lang-toggle,
.low-power .moon-mini { background: rgba(253, 249, 241, 0.97); }
.low-power .modal { background: rgba(247, 242, 232, 0.97); }

/* The paper texture and the sunbeams are both blend-mode layers over the
   whole viewport; the pointer sun repaints on every move. */
.low-power .bg-paper-tooth,
.low-power .bg-sun,
.low-power .bg-dust { display: none; }
.low-power .bg-shafts { mix-blend-mode: normal; opacity: 0.28; animation: none; }
.low-power .sheet-art-glow { mix-blend-mode: normal; opacity: 0.5; }

.low-power .hero-title::before { display: none; }
.low-power .moon-disc { filter: none; }

/* The moons keep drifting here too: a transform on five small elements
   is composited on the GPU. Only a stated preference for reduced motion
   stills them. */
.low-power .bg-wash,
.low-power .hero-title,
.low-power .sheet-status::before { animation: none; }

.low-power .sheet-art,
.low-power .craft-figure,
.low-power .sheet { box-shadow: none; }

.low-power .moon-orb .moon-disc,
.low-power .moon-orb[aria-current="page"] .moon-disc {
  filter: none;
  transition: none;
}

/* ============================================================
   THE FOLD — story and words, kept out of the way until asked for.
   A sheet with neither has no button, so nothing ever opens empty.
   ============================================================ */
.sheet-more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.6rem;
  padding: 0.55rem 1.1rem 0.55rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--song-accent);
  transition: color .35s var(--ease-out);
}
.sheet-more svg {
  width: 17px; height: 17px;
  transition: transform .5s var(--ease-out);
}
.sheet.is-open .sheet-more svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .sheet-more:hover { color: var(--ink); }
}
.sheet-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sheet-fold {
  overflow: hidden;
  max-height: 0;
  transition: max-height .55s var(--ease-out);
}
.sheet-fold[hidden] { display: none; }

.fold-part { padding-top: 1.6rem; }
.fold-part + .fold-part {
  margin-top: 1.6rem;
  border-top: 1px solid var(--rule);
}

.fold-head {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}

.fold-text p {
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
  max-width: 54ch;
}
.fold-text p:last-child { margin-bottom: 0; }

/* Who played what. A definition list is the honest markup for a credit
   roll: every role is a term and every person the answer to it. Two
   columns where there is room, stacked where there is not. */
.fold-credits {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: 0.5rem 1.8rem;
  max-width: 54ch;
  margin: 0;
}
.fold-credits dt {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.6;
  padding-top: 0.18em;      /* sits level with the larger name beside it */
}
.fold-credits dd {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* The rights note is small print and looks it, but small print that
   nobody can read protects nobody. Set apart by space, not by a line. */
.fold-rights {
  margin-top: 1.8rem;
  max-width: 54ch;
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--ink-faint);
}

/* A phone has no room for two columns: the role sits above the name. */
@media (max-width: 560px) {
  .fold-credits { grid-template-columns: 1fr; gap: 0.15rem; }
  .fold-credits dd { margin-bottom: 0.95rem; }
  .fold-credits dd:last-of-type { margin-bottom: 0; }
}

/* A long lyric scrolls inside its own sheet rather than stretching the page */
.fold-lyrics {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 1rem;
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--ink-soft);
  mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
.fold-lyrics::-webkit-scrollbar { width: 3px; }
.fold-lyrics::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--song-accent) 40%, transparent);
  border-radius: 3px;
}
.fold-line { display: block; }
.fold-break { display: block; height: 0.9em; }

@media (prefers-reduced-motion: reduce) {
  .sheet-fold, .sheet-more svg { transition: none; }
}
.low-power .fold-lyrics { mask-image: none; -webkit-mask-image: none; }

/* The image notice, on paper */
.footer-note {
  max-width: 62ch;
  margin: 2.4rem auto 0;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}



/* ============================================================
   READ ON
   A long text does not have to arrive all at once. Two paragraphs
   stand, the rest waits behind a mark that is meant to be seen: a rule
   running out to both sides, the word in the middle of the page.
   ============================================================ */
.read-more {
  position: relative;
  display: block;
  width: 100%;
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding: 0 0 0.4rem;
  text-align: center;
  color: var(--accent);
}

/* The rule the label sits on */
.read-more-line {
  display: block;
  height: 1px;
  margin-bottom: 1.4rem;
  background: linear-gradient(90deg,
    transparent, color-mix(in oklab, var(--accent) 40%, transparent) 50%, transparent);
  transition: background .5s var(--ease-out);
}

.read-more-label {
  display: block;
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 300;
  letter-spacing: 0.2em;
  line-height: 1.2;
  transition: color .4s var(--ease-out), letter-spacing .5s var(--ease-out);
}

.read-more-arrow {
  width: 24px; height: 24px;
  margin-top: 0.5rem;
  transition: transform .6s var(--ease-out);
  animation: readNudge 3.6s ease-in-out infinite;
}
@keyframes readNudge {
  0%, 82%, 100% { transform: translateY(0); }
  90%           { transform: translateY(4px); }
}

@media (hover: hover) and (pointer: fine) {
  .read-more:hover .read-more-label { color: var(--accent-deep); letter-spacing: 0.26em; }
  .read-more:hover .read-more-line {
    background: linear-gradient(90deg,
      transparent, color-mix(in oklab, var(--accent) 70%, transparent) 50%, transparent);
  }
  .read-more:hover .read-more-arrow { transform: translateY(3px); }
}
.read-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Open: the arrow turns, the nudge stops, the word changes in the markup */
.read-more.is-open .read-more-arrow {
  transform: rotate(180deg);
  animation: none;
}

/* The folded half */
.read-rest {
  overflow: hidden;
  max-height: 0;
  transition: max-height .7s var(--ease-out);
}
.read-rest[hidden] { display: none; }
.read-rest > p:first-child { padding-top: 1.6rem; }

@media (prefers-reduced-motion: reduce) {
  .read-more-arrow { animation: none; }
  .read-rest { transition: none; }
}
.low-power .read-more-arrow { animation: none; }


/* ============================================================
   CHANNELS — the same block, on paper. See the note in style.css.
   ============================================================ */
.social { padding: clamp(2.5rem, 6vh, 4.5rem) 1.5rem; }

.sc-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.sc-inner.is-visible { opacity: 1; transform: none; }

.sc-head {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(1.8rem, 4vh, 2.6rem);
}

.sc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.6rem, 2.5vw, 1.4rem);
  max-width: 500px;
  margin: 0 auto;
}

.sc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: clamp(1.4rem, 3.5vw, 2rem) 1rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: linear-gradient(168deg, var(--paper-warm), var(--paper));
  box-shadow: 0 4px 16px rgba(47, 40, 32, 0.06);
  transition: border-color .45s var(--ease-out),
              box-shadow .45s var(--ease-out),
              transform .45s var(--ease-out);
}

.sc-mark {
  display: block;
  width: clamp(30px, 5vw, 36px);
  height: clamp(30px, 5vw, 36px);
  color: var(--accent);
  transition: color .45s var(--ease-out), transform .5s var(--ease-out);
}
.sc-mark svg { width: 100%; height: 100%; display: block; }

.sc-name {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.sc-handle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

@media (hover: hover) and (pointer: fine) {
  .sc-card:hover {
    border-color: color-mix(in oklab, var(--accent) 45%, transparent);
    box-shadow: 0 10px 28px rgba(47, 40, 32, 0.12);
    transform: translateY(-3px);
  }
  .sc-card:hover .sc-mark { transform: scale(1.08); }
  .sc-card--instagram:hover .sc-mark { color: #c25a86; }
  .sc-card--youtube:hover .sc-mark { color: #d33; }
}
.sc-card:active { transform: translateY(-1px); }
.sc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sc-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 2vw, 1.1rem);
  margin-bottom: clamp(1.6rem, 4vh, 2.4rem);
}

.sc-tile {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 3px;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  box-shadow: 0 6px 20px rgba(47, 40, 32, 0.08);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--ease-out) var(--tile-delay, 0s),
              transform .9s var(--ease-out) var(--tile-delay, 0s),
              border-color .4s var(--ease-out);
}
.sc-inner.is-visible .sc-tile { opacity: 1; transform: none; }

.sc-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sc-tile:hover { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
  .sc-tile:hover img { transform: scale(1.05); }
  .sc-tile:hover .sc-play { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}
.sc-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sc-tile--bare {
  background: radial-gradient(ellipse at 50% 40%, rgba(156, 95, 40, 0.08), transparent 70%),
              var(--paper-deep);
}

.sc-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(36px, 6.5vw, 50px);
  height: clamp(36px, 6.5vw, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(253, 249, 241, 0.85);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  color: var(--accent-deep);
  opacity: 0.9;
  transition: transform .5s var(--ease-out), opacity .4s var(--ease-out);
}
.sc-play svg { width: 45%; height: 45%; margin-left: 8%; }

.sc-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 0.7rem 0.7rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.78rem;
  color: #fdf9f1;
  text-align: left;
  background: linear-gradient(180deg, transparent, rgba(47, 40, 32, 0.75));
}

@media (max-width: 540px) {
  .sc-tiles { gap: 0.45rem; }
  .sc-caption { font-size: 0.7rem; padding: 1.2rem 0.5rem 0.5rem; }
  .sc-head { font-size: 1.15rem; letter-spacing: 0.18em; margin-bottom: 1.2rem; }
  .sc-card { padding: 1rem 0.5rem; gap: 0.35rem; }
  .sc-mark { width: 26px; height: 26px; }
  .sc-name { font-size: 0.95rem; }
  .sc-handle { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-inner, .sc-tile { opacity: 1; transform: none; transition: none; }
}
.low-power .sc-card, .low-power .sc-tile { box-shadow: none; }


/* Skip link — off screen until a keyboard reaches it, then it lands
   where it can be read. Anyone tabbing in gets past the menu in one
   keystroke instead of five moons. */
.skip-link {
  position: fixed;
  top: 0.6rem; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 300;
  padding: 0.6rem 1.4rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  border-radius: 2px;
  transition: transform .25s var(--ease-out);
  background: var(--paper-warm);
  color: var(--ink);
  border: 1px solid var(--accent);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ============================================================
   THE HERO FILM
   Cloth moving in the light, behind the title and the moons.

   Two layers: a still frame that is always there, and a video that
   fades in over it once it has decided to load and has something to
   show. That way the hero is never a blank rectangle waiting.
   ============================================================ */
.hero { position: relative; overflow: hidden; }

.hero-film {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-film img,
.hero-film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-film-video {
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.hero-film-video.is-playing { opacity: 1; }

/* The cloth is bright and the words sit on top of it. This lifts the
   paper back over the film enough to read, and fades the whole thing
   into the page at the bottom edge so the hero has no seam. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* A soft pool of light under the words, and only there. Everywhere
       else the cloth keeps its folds. */
    radial-gradient(ellipse 52% 30% at 50% 30%,
      rgba(250, 246, 238, 0.74) 0%,
      rgba(250, 246, 238, 0.42) 52%,
      rgba(250, 246, 238, 0.12) 76%,
      transparent 90%),
    /* A second, smaller pool for the row of moons */
    radial-gradient(ellipse 46% 16% at 50% 68%,
      rgba(250, 246, 238, 0.5) 0%,
      rgba(250, 246, 238, 0.2) 60%,
      transparent 85%),
    /* The barest wash overall, and a proper landing into the page */
    linear-gradient(180deg,
      rgba(247, 242, 232, 0.16) 0%,
      rgba(247, 242, 232, 0.08) 46%,
      rgba(247, 242, 232, 0.5) 82%,
      var(--paper) 100%);
}

/* The cloth is soft by nature; a touch more contrast lets the folds read
   as folds. One filter on one element, and only where the film plays at
   all — the frugal mode never gets this far. */
/* The still frame gets the same treatment, so the hero looks the same
   whether the film plays or not. */
.hero-film-video,
.hero-film-still { filter: contrast(1.12) saturate(1.06); }

.hero-content { position: relative; z-index: 2; }

/* Without the film the hero keeps its old paper ground */
.hero-film[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-film-video { display: none; }
}
.low-power .hero-film-video { display: none; }

/* Five moons must stay one row: an orb is as wide as its label, and five
   labels the width of "Datenschutz" do not fit a phone. */
@media (max-width: 620px) {
  .moon-menu { gap: 0.45rem; }
  .moon-disc { width: clamp(44px, 12vw, 58px); }
  .moon-name {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    max-width: 9ch;
    min-height: 2.4em;
  }
  .moon-orb { gap: 0.45rem; padding: 0.2rem; }
}
@media (max-width: 380px) {
  .moon-menu { gap: 0.3rem; }
  .moon-name { font-size: 0.55rem; max-width: 8ch; }
}


/* A way out of the modal that does not depend on spotting the × in the
   corner: a named button and the other pages, at the end of the text
   where the reader actually is. */
.modal-foot {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
}

.modal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.1rem 0.5rem 0.9rem;
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 2px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out);
}
.modal-back svg { width: 17px; height: 10px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .modal-back:hover { background: var(--accent-soft); border-color: var(--accent); }
}

.modal-links {
  margin: 0 !important;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.modal-links a { color: var(--ink); border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  .modal-links a:hover { color: var(--accent); }
}

@media (max-width: 520px) {
  .modal-foot { flex-direction: column; align-items: flex-start; }
}

/* The back button carries .modal-close so the existing handler shuts the
   window on it — but not its absolute corner position. */
.modal-back { position: static; font-size: 0.85rem; line-height: 1; }

/* The footer sits outside <main> so it counts as contentinfo. That took
   away the stacking context it used to inherit, and the fixed background
   layers — position:fixed with z-index 0 — began painting over it. A
   static element loses that contest every time. */
.footer { position: relative; z-index: 1; }

/* A portrait hero shows only the middle of a 16:9 frame, and the middle
   of this one is its calmest part. On a narrow screen the frame shifts
   left, where the folds and the shaft of light are. */
@media (max-width: 700px) {
  .hero-film img,
  .hero-film video { object-position: 30% center; }
}

/* Same reasoning as the song list: on a large display the sheets sat in a
   narrow column with emptiness on both sides. Below 1500px nothing changes. */
@media (min-width: 1500px) {
  :root { --measure: 700px; --measure-wide: 880px; --measure-strip: 1140px; }
  .sheet-inner { grid-template-columns: clamp(200px, 20vw, 280px) minmax(0, 1fr); }
  .sheet-title { font-size: 2.7rem; }
  .sheet-origin { font-size: 1.1rem; }
  .craft-text p { font-size: 1.26rem; }
}
@media (min-width: 2000px) {
  :root { --measure: 760px; --measure-wide: 980px; --measure-strip: 1280px; }
  .sheet-title { font-size: 3rem; }
}