/* Still I Sing: one page, lit like the cover. Night umber at the top, morning sage at the bottom. */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-opsz.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-italic.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* The cover's fade, read from the printed book, darkest first */
  --night: #1d130d;
  --umber-deep: #2e1d14;
  --umber: #4a2f22;
  --umber-warm: #6a4630;
  --ochre: #c79a52;
  --ochre-pale: #d2bb8a;
  --sage: #bfc4b0;
  --mist: #d6d9ca;

  /* Panel and ink */
  --rust: #8c4026;          /* the cover's panel, taken a shade deeper so gold text passes contrast */
  --gold: #ecc066;          /* foil */
  --gold-pale: #f3d595;     /* small foil type on rust */
  --cream: #efe8da;         /* long reading on dark */
  --cream-soft: #d9cdb6;
  --ink: #2b1c15;           /* long reading on light */

  --display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --text: "Literata", Georgia, "Times New Roman", serif;

  --gutter: clamp(1rem, 4.5vw, 3rem);
  --wrap: 72rem;
  --read: 36rem;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .05 0 0 0 0 .03 0.7 0 0 0 -.28'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .98 0 0 0 0 .93 0 0 0 0 .82 0.6 0 0 0 -.26'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23a)'/%3E%3Crect width='240' height='240' filter='url(%23b)'/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--night);
}

body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: var(--text);
  font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.3125rem); /* 19px to 21px */
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
cite { font-style: italic; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--gold);
  color: var(--ink);
  font-size: 1rem;
}
.skip:focus { top: 1rem; }

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

/* ---------- The rust panel with its gold double rule (the author bio) ---------- */

.plate {
  position: relative;
  background-color: var(--rust);
  background-image: var(--grain);
  background-size: 240px 240px;
  color: var(--gold);
  box-shadow:
    inset 0 0 0 7px var(--rust),
    inset 0 0 0 8px var(--gold),
    inset 0 0 0 11px var(--rust),
    inset 0 0 0 11.75px rgb(236 192 102 / 0.75);
  padding: clamp(2rem, 6vw, 3.25rem) clamp(1.5rem, 5vw, 3rem);
}

/* ---------- Hero: deepest night, the panel lit like foil ---------- */

.hero {
  background-color: var(--night);
  background-image: var(--grain), linear-gradient(to bottom, var(--night) 0%, var(--umber-deep) 100%);
  background-size: 240px 240px, 100% 100%;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 5vw, 3.5rem);
}

.hero__grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: center;
}

/* The book carries the cover panel, so the hero's lettering sits straight on the night ground. */
.hero__mast {
  max-width: 30rem;
}

.plate__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(3.4rem, 13.5vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 60;
  color: var(--gold);
}

.plate__sub {
  max-width: 24rem;
  margin-top: clamp(1.1rem, 3vw, 1.5rem);
  font-family: var(--display);
  font-variation-settings: "opsz" 11;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-pale);
}
.hero__mast::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin-top: clamp(1.5rem, 4vw, 2rem);
  background: var(--gold);
  opacity: 0.7;
}

.hero__author {
  margin-top: clamp(1.75rem, 4vw, 2.25rem);
  font-family: var(--display);
  font-variation-settings: "opsz" 48;
  font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.35rem);
  line-height: 1.15;
  color: var(--gold);
}

.hero__launch {
  margin-top: 0.5rem;
  color: var(--cream-soft);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.hero__launch [data-launch] { color: var(--cream); }

.hero__actions { margin-top: 1.5rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.7rem 1.6rem;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}
.button:hover { background: var(--gold-pale); }

.hero__photo {
  margin: 0;
}
.hero__photo {
  justify-self: center;
  width: min(72vw, 22rem);
}
.hero__photo img {
  width: 100%;
  border-radius: 1px 3px 3px 1px;
  box-shadow: 0 1px 1px rgba(20, 12, 8, .35), 0 18px 40px -12px rgba(20, 12, 8, .7), inset 3px 0 4px -2px rgba(255, 245, 225, .25);
}

@media (min-width: 760px) {
  .hero__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
  .hero__photo { justify-self: center; }
}

/* ---------- The question and the reading column: umber, cream type ---------- */

.question {
  position: relative;
  background-color: var(--umber-deep);
  background-image: var(--grain), linear-gradient(to bottom, var(--umber-deep) 0%, var(--umber) 100%);
  background-size: 240px 240px, 100% 100%;
  padding-block: clamp(3rem, 7vw, 5rem) clamp(3rem, 7vw, 5rem);
  overflow-x: clip;
}

.question__line {
  max-width: 17ch;
  font-family: var(--display);
  font-variation-settings: "opsz" 48;
  font-weight: 500;
  font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--cream);
  text-wrap: balance;
}

/* Swallow band. Resting positions are the static design (reduced motion, no JS).
   With motion, JS adds .is-flying when the band comes into view: the swallow flies
   in from the left once, lands, then .is-resting keeps it gliding with a slow
   wingbeat while the notes drift up. Transforms and opacity only. */
.swallow {
  position: relative;
  height: clamp(6rem, 13vw, 9rem);
  margin-block: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.75rem);
  pointer-events: none;
}
.swallow svg { position: absolute; fill: var(--gold); transform-origin: 50% 50%; }
.swallow__fly {
  position: absolute;
  right: 4%;
  top: 0.5rem;
  width: clamp(5rem, 11vw, 7.75rem);
  aspect-ratio: 120 / 70;
}
.swallow__bird {
  position: static !important;
  width: 100%;
  height: auto;
  transform: rotate(-8deg);
  overflow: visible;
}
.swallow__wing { transform-box: view-box; }
.swallow__wing--up { transform-origin: 70px 33px; }
.swallow__wing--down { transform-origin: 82px 38px; }
.swallow__note { width: clamp(0.85rem, 1.6vw, 1.1rem); height: auto; }
.swallow__note:nth-of-type(1) { right: calc(4% + clamp(5.25rem, 12vw, 8.5rem)); top: 3.4rem; rotate: -12deg; }
.swallow__note:nth-of-type(2) { right: calc(4% + clamp(7.25rem, 17vw, 11.5rem)); top: 1.7rem; rotate: 6deg; opacity: 0.85; }
.swallow__note:nth-of-type(3) { right: calc(4% + clamp(9.25rem, 22vw, 14.5rem)); top: 4rem; rotate: -4deg; opacity: 0.7; }

/* waiting just off the left edge until the band is reached */
.js-sing .swallow:not(.is-flying) .swallow__fly { opacity: 0; }
.js-sing .swallow:not(.is-flying) .swallow__note { opacity: 0; }

/* in flight: quick wingbeats */
.is-flying:not(.is-resting) .swallow__wing--up { animation: flap-up .32s ease-in-out infinite alternate; }
.is-flying:not(.is-resting) .swallow__wing--down { animation: flap-down .32s ease-in-out infinite alternate; }
@keyframes flap-up { from { transform: rotate(0); } to { transform: rotate(-26deg) scaleY(.7); } }
@keyframes flap-down { from { transform: rotate(0); } to { transform: rotate(22deg) scaleY(.75); } }

/* resting: riding the air, a slow beat every few seconds */
.is-resting .swallow__glide { animation: glide 5.5s ease-in-out infinite; transform-origin: 60px 35px; transform-box: view-box; }
@keyframes glide {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  30% { transform: translate(2px, -5px) rotate(-2.5deg); }
  65% { transform: translate(-1px, 3px) rotate(1.5deg); }
}
.is-resting .swallow__wing--up { animation: beat-up 5.5s ease-in-out infinite; }
.is-resting .swallow__wing--down { animation: beat-down 5.5s ease-in-out infinite; }
@keyframes beat-up { 0%, 18%, 38%, 100% { transform: rotate(0); } 24%, 32% { transform: rotate(-22deg) scaleY(.75); } 28% { transform: rotate(4deg); } }
@keyframes beat-down { 0%, 18%, 38%, 100% { transform: rotate(0); } 24%, 32% { transform: rotate(18deg) scaleY(.8); } 28% { transform: rotate(-3deg); } }

/* notes keep rising off the bird's song, one after another */
.is-resting .swallow__note { animation: note-rise 6s ease-in-out infinite; }
.is-resting .swallow__note:nth-of-type(2) { animation-delay: 2s; }
.is-resting .swallow__note:nth-of-type(3) { animation-delay: 4s; }
@keyframes note-rise {
  0% { translate: 0 0; opacity: 0; }
  15% { opacity: .9; }
  70% { opacity: .6; }
  100% { translate: -1.2rem -2.6rem; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .swallow * { animation: none !important; }
}

.reading p {
  max-width: var(--read);
  color: var(--cream);
}

@media (min-width: 960px) {
  .reading { padding-left: calc(var(--gutter) + 28%); }
}

/* ---------- Walking beside: warmer brown, the light beginning to come ---------- */

.beside {
  background-color: var(--umber);
  background-image: var(--grain), linear-gradient(to bottom, var(--umber) 0%, var(--umber-warm) 100%);
  background-size: 240px 240px, 100% 100%;
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5.5rem);
}

.beside__inner {
  display: grid;
  gap: 1.5rem;
  border-top: 1px solid rgb(236 192 102 / 0.45);
  padding-top: clamp(2.5rem, 6vw, 3.5rem);
}

.beside h2 {
  max-width: 20ch;
  font-family: var(--display);
  font-variation-settings: "opsz" 48;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.15;
  color: var(--gold);
  text-wrap: balance;
}

.beside__body { max-width: var(--read); color: var(--cream); }

.textlink {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--cream);
  font-weight: 600;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
}
.textlink:hover { color: var(--gold-pale); }

@media (min-width: 900px) {
  .beside__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--read));
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
}

/* ---------- Carla: dawn arrives, the panel returns ---------- */

.author {
  background-color: var(--ochre);
  background-image:
    var(--grain),
    linear-gradient(to bottom,
      var(--umber-warm) 0%,
      #a87a42 16%,
      var(--ochre) 30%,
      var(--ochre-pale) 55%,
      var(--sage) 82%,
      var(--mist) 100%);
  background-size: 240px 240px, 100% 100%;
  padding-block: clamp(4.5rem, 11vw, 8rem) clamp(3.5rem, 8vw, 5.5rem);
}

.author__inner {
  display: grid;
  gap: 2rem;
  justify-items: center;
}

.author__photo { margin: 0; max-width: 18rem; }
.author__photo img {
  display: block; width: 100%; height: auto;
  border: 1px solid rgb(236 192 102 / .7);
  padding: .5rem;
  background: rgb(140 64 38 / .9);
  box-shadow: 0 24px 50px -26px rgba(29, 19, 13, .7);
}

.plate--bio {
  max-width: 42rem;
  color: var(--cream);
  padding: clamp(2.5rem, 7vw, 4rem) clamp(1.75rem, 6vw, 4rem);
}

.plate__kicker {
  margin-bottom: 1rem;
  font-family: var(--display);
  font-variation-settings: "opsz" 11;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-pale);
}

.plate__heading {
  margin-bottom: 1.5rem;
  font-family: var(--display);
  font-variation-settings: "opsz" 48;
  font-weight: 500;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.6rem);
  line-height: 1.15;
  color: var(--gold);
  text-wrap: balance;
}

@media (min-width: 900px) {
  .author__inner:has(.author__photo:not([hidden])) {
    grid-template-columns: 18rem minmax(0, 42rem);
    justify-content: center;
    align-items: center;
  }
}

/* ---------- Footer: morning mist ---------- */

.foot {
  background-color: var(--mist);
  background-image: var(--grain), linear-gradient(to bottom, var(--mist), #dfe0d3);
  background-size: 240px 240px, 100% 100%;
  color: var(--ink);
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2.5rem, 6vw, 3.5rem);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.foot__inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.35rem;
}

.foot__bird {
  width: 3rem;
  height: auto;
  fill: var(--rust);
  margin-bottom: 0.75rem;
  transform: rotate(-8deg);
}

.foot__title { font-family: var(--display); font-variation-settings: "opsz" 24; font-size: 1.2rem; }
.foot a {
  display: inline-block;
  padding-block: 0.6rem;
  color: var(--rust);
  font-weight: 600;
  text-decoration-color: currentColor;
}

/* ---------- Short landscape phones ---------- */

@media (max-height: 500px) and (orientation: landscape) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plate__title { font-size: 3.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}

/* ---------- hero intro on load: the lettering glows up like foil catching light, the book follows ---------- */
@media (prefers-reduced-motion: no-preference) {
  .intro .plate__title-art { animation: sing-foil 1.6s ease .2s both; }
  .intro .plate__sub { animation: sing-fade 1s ease .9s both; }
  .intro .hero__mast::after { animation: sing-rule .9s cubic-bezier(.2, .7, .2, 1) 1.1s both; }
  .intro .hero__author { animation: sing-up .9s cubic-bezier(.2, .7, .2, 1) 1.3s both; }
  .intro .hero__launch { animation: sing-up .9s cubic-bezier(.2, .7, .2, 1) 1.45s both; }
  .intro .hero__actions { animation: sing-up .9s cubic-bezier(.2, .7, .2, 1) 1.6s both; }
  .intro .hero__photo { animation: sing-up 1.4s cubic-bezier(.2, .7, .2, 1) .6s both; }
}
@keyframes sing-rule { from { transform: scaleX(0); transform-origin: left; } to { transform: none; transform-origin: left; } }
@keyframes sing-foil {
  0% { opacity: 0; filter: brightness(.6); }
  60% { opacity: 1; filter: brightness(1.25); }
  100% { opacity: 1; filter: none; }
}
@keyframes sing-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sing-up { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

/* ---------- the cover's own lettering and engraved swallow, printed in gold foil ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.plate__title-art {
  display: block;
  width: 100%;
  aspect-ratio: 2474 / 673;
  background: linear-gradient(180deg, #f6d68a 0%, var(--gold) 45%, #c99a3f 100%);
  -webkit-mask: url("../images/title-art-800.png") center / contain no-repeat;
  mask: url("../images/title-art-800.png") center / contain no-repeat;
}
@media (min-resolution: 2dppx) {
  .plate__title-art { -webkit-mask-image: url("../images/title-art-1400.png"); mask-image: url("../images/title-art-1400.png"); }
}
.hero__photo img { box-shadow: none; border-radius: 0; filter: drop-shadow(0 22px 34px rgba(10, 6, 4, .55)); }
.hero__photo { width: min(66vw, 21rem); }
@media (min-width: 760px) { .hero__photo { width: min(36vw, 24rem); } }
@media (max-height: 500px) and (orientation: landscape) { .hero__photo { width: min(52vh, 15rem); } }