/* ============================================================================
   Grandmother — Mildred Dolores Orr
   Colour + type tokens inherited from homemovies.silverwulf.org
   ========================================================================= */

:root {
  /* --- palette (locked; matches the family's home-movie archive) --- */
  --mahogany: #1c1714;
  --oak: #251e19;
  --film-black: #0b0907;
  --leather: #3d332b;
  --wood-grain: #4a3f35;
  --parchment: #e8dfd4;
  --faded-ink: #9c8b7a;
  --brass: #c9a962;
  --brass-light: #d4b872;
  --brass-dark: #b8953f;
  --crimson: #8b2635;
  --crimson-light: #a8333f;

  /* --- type --- */
  --font-display: "Cinzel", "Trajan Pro", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, serif;
  --font-heading: "Cormorant Garamond", "EB Garamond", Garamond,
    "Times New Roman", Georgia, serif;
  --font-body: "Crimson Pro", "Crimson Text", "Iowan Old Style", Georgia,
    "Times New Roman", serif;

  /* --- rhythm --- */
  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-gap: clamp(5rem, 13vh, 9rem);

  color-scheme: dark;
}

/* ============================================================================
   Reset / base
   ========================================================================= */

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

html {
  /* NOTE: never set overflow-x here — it breaks position: sticky on the nav. */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background-color: var(--mahogany);
  /* A very soft projector-light warmth. No decorative gradients beyond this. */
  background-image: radial-gradient(
    120% 70% at 50% -10%,
    rgba(201, 169, 98, 0.07) 0%,
    rgba(201, 169, 98, 0) 62%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 1.1875rem; /* 19px floor — she and her children will read this */
  line-height: 1.75;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 48rem) {
  body {
    font-size: 1.25rem; /* 20px */
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 1.35em;
}

a {
  color: var(--brass-light);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(201, 169, 98, 0.5);
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

a:hover {
  color: var(--parchment);
  text-decoration-color: var(--crimson-light);
}

:focus-visible {
  outline: 2px solid var(--brass-light);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--crimson);
  color: var(--parchment);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -6rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--oak);
  color: var(--parchment);
  border: 1px solid var(--brass);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0.5rem;
}

/* ============================================================================
   Layout helpers
   ========================================================================= */

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

.wrap--narrow {
  max-width: 44rem;
}

.section {
  padding-block: var(--section-gap);
  position: relative;
}

.section--life,
.section--children {
  background: linear-gradient(
    180deg,
    rgba(11, 9, 7, 0) 0%,
    rgba(11, 9, 7, 0.55) 12%,
    rgba(11, 9, 7, 0.55) 88%,
    rgba(11, 9, 7, 0) 100%
  );
}

/* --- ornamental brass rules --------------------------------------------- */

.rule {
  margin: clamp(2.5rem, 6vw, 4rem) auto;
  text-align: center;
  line-height: 1;
  border: 0;
}

.rule--ornament {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  max-width: 22rem;
}

.rule--ornament::before,
.rule--ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(201, 169, 98, 0) 0%,
    rgba(201, 169, 98, 0.55) 100%
  );
}

.rule--ornament::after {
  background: linear-gradient(
    270deg,
    rgba(201, 169, 98, 0) 0%,
    rgba(201, 169, 98, 0.55) 100%
  );
}

.rule--ornament span {
  color: var(--brass);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

/* ============================================================================
   Top navigation
   ========================================================================= */

.topnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 9, 7, 0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(201, 169, 98, 0.22);
}

.topnav__list {
  list-style: none;
  margin: 0 auto;
  padding: 0.7rem var(--gutter);
  max-width: 62rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem clamp(1rem, 4vw, 2.5rem);
}

.topnav a {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  text-decoration: none;
  padding: 0.35rem 0.15rem;
  display: inline-block;
  border-bottom: 1px solid transparent;
}

.topnav a:hover {
  color: var(--brass-light);
  border-bottom-color: var(--crimson-light);
}

@media (min-width: 40rem) {
  .topnav a {
    font-size: 0.8rem;
  }
}

/* On a phone the four links wrap to three lines. Pinned, that would eat an
   eighth of the screen for the whole scroll — so on narrow screens the nav
   sits at the top and scrolls away like a title page. */
@media (max-width: 39.99rem) {
  .topnav {
    position: static;
    backdrop-filter: none;
  }

  html {
    scroll-padding-top: 1rem;
  }
}

/* ============================================================================
   Hero
   ========================================================================= */

.hero {
  padding-block: clamp(3.5rem, 10vh, 7rem) var(--section-gap);
}

.hero__inner {
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

@media (min-width: 56rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  }
}

/* --- the portrait, in an old album mount --- */

.hero__portrait {
  margin: 0;
  position: relative;
}

.hero__portrait img {
  width: 100%;
  border: 1px solid rgba(201, 169, 98, 0.4);
  padding: clamp(0.5rem, 1.6vw, 0.9rem);
  background: var(--film-black);
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(11, 9, 7, 0.9);
  /* the faintest warm cast, like a print that has sat in a box */
  filter: sepia(0.12) saturate(0.94) contrast(1.02);
}

.hero__portrait figcaption {
  margin-top: 1rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--faded-ink);
  text-align: center;
}

/* --- the names --- */

.hero__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 7.2vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: 0.012em;
  color: var(--parchment);
  margin-bottom: 0.5rem;
}

.hero__alias {
  font-family: var(--font-heading);
  line-height: 1.15;
  margin: 0;
}

.hero__alias--first {
  font-size: clamp(1.5rem, 4.6vw, 2.15rem);
  color: var(--brass);
  letter-spacing: 0.04em;
  margin-top: 0.35rem;
}

.hero__alias--second {
  font-size: clamp(1.15rem, 3.4vw, 1.55rem);
  font-style: italic;
  color: var(--faded-ink);
  margin-top: 0.25rem;
}

.hero__years {
  margin: 1.35rem 0 0;
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.32em;
  color: var(--brass-dark);
}

.hero .rule--ornament {
  margin-inline: 0;
  max-width: 17rem;
}

.hero__blurb {
  font-family: var(--font-heading);
  font-size: clamp(1.12rem, 2.4vw, 1.32rem);
  line-height: 1.65;
  color: var(--parchment);
  max-width: 30rem;
  margin-bottom: 0;
}

/* ============================================================================
   Section headings
   ========================================================================= */

.section__head {
  text-align: center;
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}

.section__eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin-bottom: 0.9rem;
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 5.4vw, 2.9rem);
  letter-spacing: 0.045em;
  color: var(--parchment);
  margin-bottom: 1rem;
}

.section__lede {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.08rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--parchment);
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: 0;
}

/* ============================================================================
   The Record — tracks
   ========================================================================= */

.tracklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}

.track {
  background: linear-gradient(
    170deg,
    rgba(37, 30, 25, 0.95) 0%,
    rgba(28, 23, 20, 0.95) 100%
  );
  border: 1px solid rgba(61, 51, 43, 0.9);
  border-top-color: rgba(201, 169, 98, 0.3);
  padding: clamp(1.6rem, 4.5vw, 3rem);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
}

.track__head {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1.6rem;
}

.track__num {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  color: var(--brass-dark);
  margin: 0;
}

.track__title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 4.2vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--parchment);
  margin: 0;
}

.track__style {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--faded-ink);
  margin: 0.15rem 0 0;
}

/* --- scripture epigraph --- */

.scripture {
  margin: 0 0 1.5rem;
  padding: 0.55rem 0 0.55rem clamp(1rem, 3vw, 1.6rem);
  border-left: 1px solid var(--crimson);
}

.scripture p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--parchment);
  margin: 0 0 0.5rem;
  max-width: 40rem;
}

.scripture cite {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

.scripture--captions p {
  font-style: normal;
}

.track__note {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--parchment);
  max-width: 40rem;
  margin-bottom: 1.75rem;
}

/* --- the player --- */

.player {
  margin-bottom: 1.5rem;
}

.player__audio {
  width: 100%;
  height: 2.75rem;
  display: block;
  border-radius: 2px;
  background: var(--film-black);
  border: 1px solid rgba(201, 169, 98, 0.28);
  color-scheme: dark;
}

.player__audio::-webkit-media-controls-panel {
  background: var(--film-black);
}

.player--pending .player__audio {
  display: none;
}

.player__pending {
  margin: 0;
  padding: 0.85rem 1.1rem;
  border: 1px dashed rgba(201, 169, 98, 0.4);
  background: rgba(11, 9, 7, 0.5);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--parchment);
}

/* --- lyrics disclosure --- */

.lyrics {
  border-top: 1px solid rgba(61, 51, 43, 0.9);
  padding-top: 1.25rem;
}

.lyrics__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  padding: 0.55rem 0.2rem;
  transition: color 0.25s ease;
}

.lyrics__toggle::-webkit-details-marker {
  display: none;
}

.lyrics__toggle:hover {
  color: var(--brass-light);
}

.lyrics__toggle-mark {
  width: 0.75rem;
  height: 0.75rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.18em) rotate(45deg);
  transition: transform 0.3s ease;
}

.lyrics[open] .lyrics__toggle-mark {
  transform: translateY(0.1em) rotate(225deg);
}

.lyrics[open] .lyrics__toggle-text::after {
  content: " — close";
  letter-spacing: 0.24em;
}

.lyrics__body {
  padding-top: 1.5rem;
  max-width: var(--measure);
}

/* --- the stanzas: the heart of the site --------------------------------- */

.stanza {
  margin-bottom: 2.35rem;
}

.stanza:last-child {
  margin-bottom: 0;
}

.stanza__label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin: 0 0 0.7rem;
}

.stanza__lines {
  font-family: var(--font-body);
  font-size: 1.19rem;
  line-height: 1.85;
  color: var(--parchment);
  margin: 0;
  hanging-punctuation: first;
}

/* One sung line per block, with a hanging indent — so a long line that wraps
   on a phone is visibly a continuation and never reads as a new line. */
.stanza__lines .line {
  display: block;
  padding-left: 1.5em;
  text-indent: -1.5em;
}

@media (min-width: 48rem) {
  .stanza__lines {
    font-size: 1.28rem;
  }
}

/* The chorus sits a half-step in and reads a shade warmer. */
.stanza--chorus {
  padding-left: clamp(0.9rem, 2.5vw, 1.5rem);
  border-left: 1px solid rgba(201, 169, 98, 0.35);
}

.stanza--chorus .stanza__lines,
.stanza--bridge .stanza__lines,
.stanza--outro .stanza__lines {
  font-family: var(--font-heading);
  font-size: 1.28rem;
  line-height: 1.72;
}

@media (min-width: 48rem) {
  .stanza--chorus .stanza__lines,
  .stanza--bridge .stanza__lines,
  .stanza--outro .stanza__lines {
    font-size: 1.4rem;
  }
}

.stanza--outro .stanza__lines {
  font-style: italic;
}

/* ============================================================================
   Her Life
   ========================================================================= */

.movement {
  max-width: 40rem;
  margin-inline: auto;
}

.movement__place {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin: 0 0 0.6rem;
}

.movement__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  letter-spacing: 0.035em;
  color: var(--brass);
  margin: 0 0 1.75rem;
}

.prose p {
  font-size: 1.1875rem;
  line-height: 1.8;
  color: var(--parchment);
}

@media (min-width: 48rem) {
  .prose p {
    font-size: 1.26rem;
  }
}

.prose em {
  font-style: italic;
  color: var(--brass-light);
}

/* drop cap on the opening paragraph of each movement */
.prose__open::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  margin-top: 0.06em;
  color: var(--brass);
}

/* --- the pull-quote: signed, but never numbered --- */

.pullquote {
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
  padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
  border-top: 1px solid rgba(201, 169, 98, 0.45);
  border-bottom: 1px solid rgba(201, 169, 98, 0.45);
  background: rgba(11, 9, 7, 0.45);
}

.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 2.25rem);
  line-height: 1.32;
  letter-spacing: 0.03em;
  color: var(--brass-light);
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

.pullquote cite {
  display: block;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.02rem, 2.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--parchment);
  max-width: 26rem;
  margin-inline: auto;
}

/* ============================================================================
   The Photographs
   ========================================================================= */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.gallery__status {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--faded-ink);
  margin: 0;
  padding: 2rem 0;
}

.photo {
  margin: 0;
}

.photo__button {
  display: block;
  width: 100%;
  padding: clamp(0.4rem, 1.2vw, 0.65rem);
  background: var(--film-black);
  border: 1px solid rgba(61, 51, 43, 0.9);
  cursor: zoom-in;
  transition: border-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
}

.photo__button:hover,
.photo__button:focus-visible {
  border-color: rgba(201, 169, 98, 0.65);
  transform: translateY(-2px);
  box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.5);
}

.photo__button img {
  width: 100%;
  aspect-ratio: 4 / 3;
  /* `contain`, never `cover`: these are family photographs and a crop can
     cut somebody's face off. Each print is matted inside a uniform window
     the way it would sit on an album page. */
  object-fit: contain;
  filter: sepia(0.1) saturate(0.95);
  background: #000000;
}

.photo figcaption {
  margin-top: 0.8rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--parchment);
}

.photo__year {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  color: var(--brass-dark);
  margin-bottom: 0.3rem;
}

/* --- lightbox --- */

.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--parchment);
  max-width: min(94vw, 60rem);
  max-height: 94vh;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(11, 9, 7, 0.975);
}

.lightbox__figure {
  margin: 0;
  padding: clamp(0.5rem, 1.5vw, 0.9rem);
  background: var(--film-black);
  border: 1px solid rgba(201, 169, 98, 0.45);
}

.lightbox__figure img {
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  background: var(--oak);
}

.lightbox__caption {
  margin-top: 0.9rem;
  padding: 0 0.4rem 0.3rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--parchment);
  text-align: center;
}

.lightbox__closeform {
  margin: 0;
  display: flex;
  justify-content: flex-end;
}

.lightbox__close {
  appearance: none;
  background: var(--oak);
  color: var(--brass-light);
  border: 1px solid rgba(201, 169, 98, 0.45);
  font-size: 1.6rem;
  line-height: 1;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.lightbox__close:hover {
  background: var(--leather);
  color: var(--parchment);
}

/* ============================================================================
   Her Children
   ========================================================================= */

.children {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  display: grid;
  gap: clamp(0.9rem, 3vw, 1.5rem);
}

.children__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 7.5vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: 0.09em;
  color: var(--parchment);
}

.children__after {
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  color: var(--parchment);
  margin: 0;
}

/* ============================================================================
   Colophon
   ========================================================================= */

.colophon {
  padding-block: clamp(3rem, 8vh, 5rem) clamp(4rem, 10vh, 6rem);
  background: var(--film-black);
  border-top: 1px solid rgba(61, 51, 43, 0.8);
  text-align: center;
}

.colophon__made {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  letter-spacing: 0.06em;
  color: var(--brass);
  margin-bottom: 1.5rem;
}

.colophon__line {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--parchment);
  max-width: 32rem;
  margin-inline: auto;
}

.colophon__line--quiet {
  font-size: 1.02rem;
  color: var(--faded-ink);
  margin-bottom: 0;
}

.colophon__line--quiet a {
  color: var(--brass);
}

/* ============================================================================
   Motion — restrained. Fade and rise, nothing that jumps.
   ========================================================================= */

/* Hiding happens ONLY when JS is present to un-hide it. The `js` class is
   set synchronously in <head>, so there is no flash either way. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   Print — somebody will want the lyrics on paper.
   ========================================================================= */

@media print {
  :root {
    --parchment: #111111;
    --faded-ink: #4a4a4a;
    --brass: #6b5a44;
    --brass-light: #6b5a44;
    --brass-dark: #6b5a44;
  }

  html,
  body {
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 11.5pt;
    line-height: 1.5;
  }

  body {
    background-image: none !important;
  }

  .topnav,
  .skip-link,
  .player,
  .lightbox,
  .rule,
  .lyrics__toggle,
  .gallery,
  .hero__blurb,
  .section__lede {
    display: none !important;
  }

  /* Every lyric sheet prints, open or closed. */
  .lyrics,
  .lyrics__body,
  details .lyrics__body {
    display: block !important;
    border: 0 !important;
    padding-top: 0 !important;
    max-width: none !important;
  }

  .reveal,
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero,
  .section {
    padding-block: 0 !important;
  }

  .hero__portrait {
    max-width: 3.2in;
  }

  .hero__portrait img {
    border: 1px solid #999 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .hero__name,
  .section__title,
  .movement__title,
  .children__name,
  .colophon__made {
    color: #111111 !important;
  }

  .hero__alias--first,
  .track__num,
  .stanza__label,
  .movement__place,
  .section__eyebrow,
  .scripture cite {
    color: #6b5a44 !important;
  }

  .hero__alias--second,
  .track__style,
  .hero__portrait figcaption {
    color: #555555 !important;
  }

  .track {
    background: none !important;
    border: 0 !important;
    border-top: 1pt solid #b8953f !important;
    box-shadow: none !important;
    padding: 0.35in 0 0 !important;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  .track + .track {
    break-before: page;
    page-break-before: always;
  }

  .stanza {
    break-inside: avoid-page;
    page-break-inside: avoid;
    margin-bottom: 0.22in;
  }

  /* On paper every stanza sets in the sturdy body face at one size. The
     screen's lighter Cormorant chorus and italic outro go thin and grey at
     11.5pt, which is exactly wrong for the people reading this. */
  .stanza__lines,
  .stanza--chorus .stanza__lines,
  .stanza--bridge .stanza__lines,
  .stanza--outro .stanza__lines {
    font-family: var(--font-body) !important;
    font-style: normal !important;
    font-size: 11.5pt !important;
    line-height: 1.5 !important;
    color: #111111 !important;
  }

  .stanza--chorus {
    border-left: 1pt solid #b8953f !important;
  }

  .stanza__lines .line {
    display: block;
    padding-left: 1.5em;
    text-indent: -1.5em;
  }

  .scripture {
    border-left: 1pt solid #8b2635 !important;
  }

  .scripture p,
  .pullquote p,
  .prose p,
  .track__note,
  .children__after,
  .colophon__line {
    color: #111111 !important;
  }

  .pullquote {
    background: none !important;
    border-color: #b8953f !important;
  }

  .section--life,
  .section--children,
  .colophon {
    background: none !important;
    border: 0 !important;
  }

  a {
    color: #111111 !important;
    text-decoration: none !important;
  }

  .colophon__line--quiet a::after {
    content: " (homemovies.silverwulf.org)";
    color: #555555;
  }
}


/* ── album sleeve ───────────────────────────────────────── */
.sleeve{
  margin: 0 auto clamp(3rem, 7vw, 5.5rem);
  max-width: 420px;
  text-align: center;
}
.sleeve__art{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(11, 9, 7, .72),
    0 6px 12px rgba(11, 9, 7, .55),
    0 16px 26px rgba(11, 9, 7, .42);
}
.sleeve__cap{
  margin-top: 1.35rem;
  font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--parchment);
  letter-spacing: .02em;
}
.sleeve__cap em{ font-style: italic; }
.sleeve__sub{
  display: inline-block;
  margin-top: .45rem;
  font-size: .86rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faded-ink);
}
@media (max-width: 640px){ .sleeve{ max-width: 88vw; } }
@media print{ .sleeve{ display: none; } }

/* ══ the projector gate ═══════════════════════════════════════════
   This family's world is projected light. The hero is not a photo on
   a page; it is a frame held in a gate with a lamp behind it.        */
.gate{
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--film-black);
  isolation: isolate;
  --weave-x: 0px; --weave-y: 0px; --drift: 0px;
}
.gate__weave{
  transform: translate3d(var(--weave-x), calc(var(--weave-y) + var(--drift)), 0) scale(1.035);
  will-change: transform;
}
.gate__img{ display:block; width:100%; height:auto; }

/* the lamp: hot at the centre, falling off to the frame edge */
.gate__glow{
  position:absolute; inset:-8%;
  pointer-events:none; z-index:2;
  background:
    radial-gradient(58% 50% at 50% 42%, rgba(255,242,214,.16) 0%, rgba(255,242,214,0) 62%),
    radial-gradient(120% 96% at 50% 46%, rgba(11,9,7,0) 44%, rgba(11,9,7,.62) 100%);
  mix-blend-mode: screen;
  transform: translate3d(0, var(--glow-drift, 0px), 0);
  will-change: transform;
}
/* emulsion grain, moving on its own clock */
.gate__grain{
  position:absolute; inset:-40%;
  pointer-events:none; z-index:3; opacity:.20;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>");
  animation: gate-grain 1.05s steps(3) infinite;
}
@keyframes gate-grain{
  0%{transform:translate3d(0,0,0)} 33%{transform:translate3d(-3%,2%,0)}
  66%{transform:translate3d(2%,-3%,0)} 100%{transform:translate3d(0,0,0)}
}
/* lamp flicker — luminance only, never position */
.gate__flicker{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  background:rgba(255,244,222,.05); mix-blend-mode:screen;
  animation: gate-flicker 4.3s ease-in-out infinite;
}
@keyframes gate-flicker{
  0%,100%{opacity:.34} 18%{opacity:.62} 24%{opacity:.28}
  47%{opacity:.55} 52%{opacity:.40} 78%{opacity:.66}
}
.gate__sprockets{
  position:absolute; top:0; bottom:0; width:14px; z-index:5; pointer-events:none;
  background:
    linear-gradient(180deg, var(--film-black), var(--film-black)),
    repeating-linear-gradient(180deg,
      rgba(232,223,212,.90) 0 11px, rgba(0,0,0,0) 11px 30px);
  background-blend-mode: normal;
  -webkit-mask: repeating-linear-gradient(180deg,#000 0 11px, transparent 11px 30px);
          mask: repeating-linear-gradient(180deg,#000 0 11px, transparent 11px 30px);
  opacity:.16;
}
.gate__sprockets--l{ left:0 }
.gate__sprockets--r{ right:0 }

/* the strike: the lamp coming up to speed. Starts VISIBLE, then settles. */
@media (prefers-reduced-motion: no-preference){
  .gate[data-struck="0"] .gate__weave{ animation: gate-strike 1150ms cubic-bezier(.16,1,.3,1) both; }
  .gate[data-struck="0"] .gate__flicker{ animation: gate-strike-lamp 1150ms ease-out both, gate-flicker 4.3s ease-in-out 1150ms infinite; }
}
@keyframes gate-strike{
  0%  { filter: brightness(1.5) contrast(.78); transform: translate3d(0,0,0) scale(1.075); }
  22% { filter: brightness(.72) contrast(1.2); }
  38% { filter: brightness(1.22) contrast(.92); }
  100%{ filter: none; transform: translate3d(0,0,0) scale(1.035); }
}
@keyframes gate-strike-lamp{
  0%{opacity:.95} 20%{opacity:.15} 40%{opacity:.8} 100%{opacity:.34}
}
@media (max-width: 640px){ .gate__sprockets{ width:9px } }

@media (prefers-reduced-motion: reduce){
  .gate__grain{ animation:none; opacity:.14 }
  .gate__flicker{ animation:none; opacity:.34 }
  .gate__weave{ transform: scale(1.035); }
  .gate__glow{ transform:none }
}

/* ── phone: her name belongs in the first frame, not below the fold ──
   The gate is the hero's voice, but the page is about a person; on a
   narrow screen the portrait yields so the name arrives first.        */
@media (max-width: 40rem){
  .hero__inner{ gap: 1.6rem; }
  .hero__portrait{ max-width: 17rem; margin-inline: auto; }
  .hero__portrait figcaption{ margin-top: .7rem; }
  .hero__name{ margin-top: 0; }
}
@media (max-width: 26rem){
  .hero__portrait{ max-width: 14.5rem; }
  .hero__inner{ gap: 1.25rem; }
}