@font-face {
  font-family: 'APL386';
  src: url('./assets/fonts/apl386-subset.woff') format('woff');
  font-display: swap;
  unicode-range: U+2190, U+2349, U+236C, U+2375, U+237A, U+233D, U+00A8, U+2308, U+2373, U+22C4;
}

:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-hero: clamp(3rem, 1rem + 6vw, 6.5rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  /* Paper, night ink and lamp gold, taken from the illustrations */
  --color-bg: oklch(0.975 0.014 85);
  --color-surface: oklch(0.955 0.02 82);
  --color-night: oklch(0.24 0.06 268);
  --color-text: oklch(0.25 0.045 265);
  --color-text-muted: oklch(0.45 0.035 262);
  --color-primary: oklch(0.42 0.11 262);
  --color-gold: oklch(0.72 0.13 78);
  --color-gold-deep: oklch(0.5 0.1 70);
  --color-border: oklch(0.3 0.04 265 / 0.14);
  --color-on-night: oklch(0.95 0.02 85);

  --font-display: 'Zodiak', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-apl: 'APL386', 'Source Serif 4', serif;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 180ms var(--ease);
  --shadow-image: 0 18px 40px -22px oklch(0.24 0.06 268 / 0.55);
}

body { font-family: var(--font-body); }
.apl { font-family: var(--font-apl); font-style: normal; }
p .apl, li .apl { font-size: 1.2em; line-height: 1; }

.skip-link {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-16));
  background: var(--color-night); color: var(--color-on-night);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 100;
}
.skip-link:focus { top: var(--space-4); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: oklch(0.975 0.014 85 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  max-width: 72rem; margin-inline: auto;
  padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-10));
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500;
  color: var(--color-night); text-decoration: none; letter-spacing: 0.01em;
}
.site-nav { display: flex; gap: var(--space-1); }
.site-nav a {
  font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  min-height: 44px; display: inline-flex; align-items: center;
}
.site-nav a:hover { color: var(--color-night); background: var(--color-surface); }
.site-nav a[aria-current='page'] { color: var(--color-night); box-shadow: inset 0 -2px 0 var(--color-gold); border-radius: 0; }

/* Hero */
.hero { position: relative; background: var(--color-night); color: var(--color-on-night); overflow: hidden; }
.hero__image { width: 100%; height: clamp(16rem, 58vh, 40rem); object-fit: cover; object-position: center 40%; }
.hero__veil { display: none; }
.hero__text {
  max-width: 72rem; margin-inline: auto;
  padding: var(--space-10) clamp(var(--space-4), 4vw, var(--space-10));
}
.kicker { font-size: var(--text-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); }
.hero h1 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-hero);
  line-height: 1; margin-top: var(--space-2);
  display: flex; align-items: baseline; gap: 0.25em; flex-wrap: wrap;
}
.hero h1 .apl { color: var(--color-gold); font-size: 0.85em; }
.hero__sub { font-size: var(--text-lg); margin-top: var(--space-3); color: oklch(0.9 0.02 85); }

/* Page head (songs) */
.page-head {
  max-width: 72rem; margin-inline: auto;
  padding: clamp(var(--space-12), 8vw, var(--space-24)) clamp(var(--space-4), 4vw, var(--space-10)) var(--space-8);
}
.page-head h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); color: var(--color-night); margin-top: var(--space-2); }
.page-head .kicker { color: var(--color-gold-deep); }

/* Chapter */
.chapter {
  max-width: 40rem; margin-inline: auto;
  padding: clamp(var(--space-12), 7vw, var(--space-20)) clamp(var(--space-4), 5vw, var(--space-6));
}
.chapter__label { font-size: var(--text-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold-deep); }
.chapter h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); color: var(--color-night); margin: var(--space-1) 0 var(--space-10); }
.chapter p { font-size: var(--text-base); line-height: 1.75; margin-bottom: var(--space-5); }
.chapter p.first::first-letter {
  font-family: var(--font-display); float: left; font-size: 3.4em; line-height: 0.85;
  padding-right: var(--space-2); padding-top: 0.06em; color: var(--color-night);
}
.chapter .glyph-moment {
  font-family: var(--font-apl); font-size: clamp(4rem, 3rem + 6vw, 7rem);
  line-height: 1; text-align: center; color: var(--color-gold-deep);
  margin: var(--space-10) 0 var(--space-8);
}
.chapter__end { text-align: center; color: var(--color-gold-deep); letter-spacing: 0.6em; margin-top: var(--space-10); }

/* Figures that break out of the text column */
.plate { margin: var(--space-12) calc(50% - min(46vw, 36rem)); }
.plate img { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-image); }

/* Song */
.song-band { background: var(--color-night); color: var(--color-on-night); }
.song-band__inner {
  max-width: 48rem; margin-inline: auto;
  padding: clamp(var(--space-12), 7vw, var(--space-20)) clamp(var(--space-4), 5vw, var(--space-6));
}
.song-band .kicker { color: var(--color-gold); }
.song-band h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); margin: var(--space-2) 0 var(--space-6); }
audio { width: 100%; min-height: 44px; border-radius: var(--radius-md); }
.song-film { margin: var(--space-10) 0 0; }
.song-film video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; background: #000; border-radius: var(--radius-md); }
.song-film figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-on-night); opacity: .85; }

/* Animator note */
.note {
  max-width: 72rem; margin-inline: auto;
  padding: clamp(var(--space-12), 8vw, var(--space-24)) clamp(var(--space-4), 4vw, var(--space-10));
}
.note__head { max-width: 44rem; }
.note__head .kicker { color: var(--color-gold-deep); }
.note h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); color: var(--color-night); margin: var(--space-2) 0 var(--space-4); }
.note__intro { color: var(--color-text-muted); }
.boards { display: grid; gap: var(--space-6); margin: var(--space-10) 0 var(--space-12); }
.boards a { display: block; border-radius: var(--radius-md); }
.boards img { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-image); }
.boards figcaption { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
.note__body { display: grid; gap: var(--space-12); grid-template-columns: 1fr; }
.scenes h3, .differences h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); color: var(--color-night); margin: var(--space-8) 0 var(--space-3); }
.scenes h3:first-child, .differences h3:first-child { margin-top: 0; }
.scenes p { margin-bottom: var(--space-4); line-height: 1.7; }
.scenes .sung { font-style: italic; }
.differences { align-self: start; }
.differences__card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: clamp(var(--space-5), 3vw, var(--space-8));
}
.differences ol { padding-left: var(--space-5); display: grid; gap: var(--space-4); }
.differences li { line-height: 1.6; }
.differences li strong { color: var(--color-night); }
.glyph-pair { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.glyph-pair div { display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--space-3); align-items: start; }
.glyph-pair .big { font-family: var(--font-apl); font-size: 2.4rem; line-height: 1; color: var(--color-gold-deep); text-align: center; }
code, .code { font-family: var(--font-apl); background: oklch(0.3 0.04 265 / 0.07); padding: 0.05em 0.35em; border-radius: var(--radius-sm); white-space: nowrap; }

@media (min-width: 60rem) {
  .boards { grid-template-columns: 1fr 1fr; }
  .note__body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* Songs page */
.songs { max-width: 72rem; margin-inline: auto; padding: 0 clamp(var(--space-4), 4vw, var(--space-10)) clamp(var(--space-16), 8vw, var(--space-24)); display: grid; gap: var(--space-6); }
.song {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  display: grid; gap: var(--space-4);
}
.song h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); color: var(--color-night); }
.song--featured { border-top: none; padding-top: 0; gap: var(--space-6); }
.song--featured img { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-image); }
.song__row { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) {
  .song__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); }
.site-footer__inner {
  max-width: 72rem; margin-inline: auto;
  padding: var(--space-10) clamp(var(--space-4), 4vw, var(--space-10));
  display: grid; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted);
}
.site-footer strong { color: var(--color-night); font-weight: 600; }
.site-footer a { color: var(--color-primary); }

/* Songs with a portrait image */
.song--pictured { display: grid; gap: var(--space-6); align-items: center; }
.song--pictured img { width: 100%; max-width: 26rem; justify-self: center; border-radius: var(--radius-md); box-shadow: var(--shadow-image); }
.song--pictured .song__row { grid-template-columns: 1fr; }
@media (min-width: 52rem) {
  .song--pictured { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(var(--space-8), 5vw, var(--space-16)); }
  .song--pictured img { max-width: 100%; max-height: 38rem; width: auto; height: auto; justify-self: start; }
  .song--pictured:nth-of-type(odd) img { order: 2; justify-self: end; }
}
.song--pictured { padding-top: clamp(var(--space-8), 5vw, var(--space-12)); }

/* Animator essentials */
.essentials { max-width: 44rem; margin-inline: auto; display: grid; gap: var(--space-6); }
.essentials h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); color: var(--color-night); }
.essentials ol { display: grid; gap: var(--space-5); padding-left: 1.4em; }
.essentials li { line-height: 1.65; }
.essentials li::marker { color: var(--color-lamp-ink, #8a5a12); font-weight: 600; }
.essentials__close { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.4; color: var(--color-night); border-left: 3px solid currentColor; padding-left: var(--space-5); margin-block: var(--space-4); }
.essentials .glyph-pair { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.copyright { color: var(--color-text-muted); font-size: var(--text-xs); }
.essentials .differences__card { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid oklch(0.62 0.13 70); border-radius: var(--radius-lg); padding: clamp(var(--space-5), 3vw, var(--space-8)); }
.essentials .differences__card ol { margin-top: var(--space-4); }

/* Chapter 2: quiet watercolor world */
.quiet-hero {
  background: radial-gradient(ellipse at 50% 38%, oklch(0.97 0.05 88) 0%, var(--color-bg) 62%);
  text-align: center;
  padding: clamp(var(--space-16), 10vw, var(--space-32)) clamp(var(--space-4), 4vw, var(--space-10)) clamp(var(--space-12), 7vw, var(--space-20));
  border-bottom: 1px solid var(--color-border);
}
.quiet-hero__glyph {
  font-size: clamp(6rem, 4rem + 9vw, 11rem); line-height: 1; color: var(--color-gold-deep);
  text-shadow: 0 0 40px oklch(0.85 0.12 85 / 0.7);
  margin-bottom: var(--space-8);
}
.quiet-hero .kicker { color: var(--color-gold-deep); }
.quiet-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-hero); line-height: 1.02; color: var(--color-night); margin-top: var(--space-3); text-wrap: balance; }
.quiet-hero__sub { font-size: var(--text-lg); color: var(--color-text-muted); margin-top: var(--space-4); font-style: italic; }
.chapter__subtitle { font-style: italic; color: var(--color-text-muted); margin-top: calc(-1 * var(--space-8)); margin-bottom: var(--space-10); }
.chapter .code-line { text-align: center; margin: var(--space-6) 0 var(--space-8); }
.chapter .code-line code { font-size: 1.15em; padding: 0.3em 0.8em; background: oklch(0.72 0.13 78 / 0.12); color: var(--color-night); white-space: pre-wrap; }
.song-band--dawn { background: linear-gradient(180deg, oklch(0.32 0.07 268), oklch(0.26 0.06 268)); }
.world-card { background: oklch(0.97 0.035 88); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(var(--space-5), 3vw, var(--space-8)); }
.world-card h3 { margin-bottom: var(--space-3); }
.world-card p { line-height: 1.65; }
.statement { border-left: 3px solid var(--color-gold); padding: var(--space-2) 0 var(--space-2) var(--space-6); display: grid; gap: var(--space-4); }
.statement p { line-height: 1.7; }
.statement footer { font-size: var(--text-sm); color: var(--color-text-muted); }
.glyph-compare { display: flex; gap: var(--space-6); margin-top: var(--space-4); flex-wrap: wrap; }
.glyph-compare figure { display: grid; justify-items: center; gap: var(--space-2); }
.glyph-compare img, .glyph-compare__true { width: 110px; height: 110px; border-radius: var(--radius-md); }
.glyph-compare__true { display: grid; place-items: center; font-size: 4.5rem; line-height: 1; color: var(--color-gold-deep); background: oklch(0.96 0.04 85); border: 1px solid var(--color-border); }
.glyph-compare figcaption { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
.glyph-pair .big { white-space: nowrap; }
.quiet-hero p, .quiet-hero h1 { margin-inline: auto; }
.glyph-compare .glyph-compare__true { font-size: 4.5rem; line-height: 1; }

/* Movements */
.movements { max-width: 1040px; margin: 0 auto; padding: 0 clamp(var(--space-4), 4vw, var(--space-10)) var(--space-20); }
.movement { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(var(--space-6), 5vw, var(--space-16)); align-items: center; }
.movement__video { display: block; width: 100%; height: auto; aspect-ratio: 834 / 1112; background: #fbf8ee; border-radius: var(--radius-md); box-shadow: 0 10px 40px oklch(0.3 0.03 80 / 0.12); }
.movement h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); margin-top: var(--space-2); }
.movement__quote { font-style: italic; color: var(--color-text-muted); margin-top: var(--space-4); max-width: 36ch; }
.movement__credit { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-6); }
.movement__credit a { display: inline-block; margin-top: var(--space-2); }
@media (max-width: 720px) { .movement { grid-template-columns: 1fr; } .movement__video { max-width: 420px; margin: 0 auto; } }
.movement__credit a { color: var(--color-primary); }
.site-nav a { white-space: nowrap; }
@media (max-width: 520px) {
  .site-header__inner { flex-wrap: wrap; row-gap: var(--space-1); }
  .site-nav { flex-wrap: wrap; gap: 0; }
  .site-nav { margin-inline: calc(-1 * var(--space-2)); }
  .site-nav a { padding-inline: 0.4rem; font-size: 0.8125rem; }
}
.movements { display: grid; gap: clamp(var(--space-16), 9vw, var(--space-24)); }
.movement--wide { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); }
.movement--wide .movement__video { aspect-ratio: 1112 / 834; }
@media (max-width: 720px) { .movement--wide { grid-template-columns: 1fr; } .movement--wide .movement__video { max-width: 100%; } }

/* Movements notebook note */
.movements-note { max-width: 38rem; margin-top: var(--space-6); }
.movements-note h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); color: var(--color-night); margin-bottom: var(--space-2); }
.movements-note p { line-height: 1.7; color: var(--color-text); }


.site-footer .support { margin-top: var(--space-4, 1rem); }