/* Dolly Parton — an homage
   Literary catalog, not a souvenir shop. */

:root {
  --paper: #f3eee3;
  --paper-warm: #ebe4d4;
  --paper-deep: #e2d8c4;
  --ink: #161310;
  --ink-soft: #3a322b;
  --ink-mute: #5c534a;
  --balsam: #1c342b;
  --balsam-deep: #12241e;
  --balsam-mid: #2a4a3d;
  --tobacco: #6b4433;
  --tobacco-deep: #4a2e22;
  --rose: #8f5552;
  --rose-soft: #d4a8a3;
  --gold: #6e5340;
  --gold-line: #b59d62;
  --gold-soft: #c4b07a;
  --rule: color-mix(in srgb, var(--gold-line) 70%, transparent);

  /* Library roles — keep all three, do not mix:
     Fraunces  = display only (titles, big numbers, one lead line)
     Newsreader = reading text (bio, excerpts, quotes)
     Figtree   = labels (nav, kickers, bylines, buttons) */
  --serif-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --serif-text: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --measure: 38rem;
  --measure-narrow: 28rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --header-h: 2.9rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 0.75rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-text);
  font-size: 1.125rem;
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

::selection {
  background: color-mix(in srgb, var(--rose) 42%, var(--paper));
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

a {
  color: var(--tobacco);
  text-decoration-color: color-mix(in srgb, var(--gold) 70%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--balsam);
  text-decoration-color: var(--rose);
}

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

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* ——— Skip ——— */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -5rem;
  z-index: 100;
  background: var(--balsam);
  color: var(--paper);
  padding: 0.5rem 0.9rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  text-decoration: none;
}

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

/* ——— Header ——— */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}

.wordmark {
  font-family: var(--serif-display);
  font-size: 1.15rem;
  font-weight: 360;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.wordmark span {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: 0.55rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  font-variant: small-caps;
  text-transform: lowercase;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

.site-nav ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav li {
  display: flex;
  align-items: center;
}

.site-nav li:not(:last-child)::after {
  content: "·";
  margin: 0 0.7rem;
  color: var(--gold);
  font-weight: 400;
  pointer-events: none;
}

.site-nav a {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-variant: small-caps;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--ink-mute);
}

.site-nav a:hover,
.site-nav a[aria-current="true"] {
  color: var(--ink);
}

.site-nav a[aria-current="true"] {
  box-shadow: inset 0 -1px 0 var(--rose);
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.75rem var(--gutter) 1.1rem;
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul {
    flex-direction: column;
    gap: 0.65rem;
  }
  .site-nav li:not(:last-child)::after { display: none; }
}

/* ——— Shared section chrome ——— */
.section {
  padding: clamp(3.5rem, 8vw, 7rem) var(--gutter);
  position: relative;
}

.section-kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.85rem;
}

.section h2 {
  font-family: var(--serif-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
}

.section h2 em {
  font-style: italic;
  font-weight: 360;
}

.thesis {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.35;
  color: var(--tobacco);
  max-width: 28rem;
  margin: 0 0 1.75rem;
}

.prose {
  max-width: var(--measure);
}

.prose.narrow { max-width: var(--measure-narrow); }

.caption {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-mute);
  margin: 0.7rem 0 0;
  max-width: 28rem;
}

.caption strong {
  color: var(--ink-soft);
  font-weight: 600;
}

.caption-follow { margin-top: 1.1rem; }

.img-restrained {
  filter: sepia(0.28) saturate(0.45) contrast(1.04);
}

.img-color {
  filter: none;
}

figure { margin: 0; }

/* ——— Portrait ——— */
.portrait {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  min-height: 0;
  padding-top: clamp(3.5rem, 8vw, 7rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.portrait-copy .eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.25rem;
}

.portrait .portrait-title {
  font-family: var(--serif-display);
  font-optical-sizing: auto;
  font-weight: 360;
  font-size: clamp(3.4rem, 9vw, 7.4rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  margin: 0 0 0.35em;
}

.portrait .portrait-title .given {
  display: block;
  font-style: italic;
  font-weight: 300;
}

.portrait .portrait-title .family {
  display: block;
  font-style: normal;
  font-weight: 500;
}

.portrait .lede {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.35;
  color: var(--tobacco);
  max-width: 22rem;
  margin: 0 0 2rem;
}

.portrait .bio {
  max-width: 34rem;
}

.portrait .bio p:first-of-type::first-letter {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 3.15em;
  float: left;
  line-height: 0.78;
  padding: 0.12em 0.12em 0 0;
  color: var(--balsam);
}

.quiet-date {
  margin-top: 2.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  max-width: 28rem;
}

.quiet-date time {
  color: var(--ink-soft);
  font-weight: 600;
}

.portrait-figure {
  position: relative;
}

.portrait-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  background: var(--paper-deep);
}

.portrait-figure figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

@media (max-width: 860px) {
  .portrait {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .portrait .portrait-title { font-size: clamp(3.2rem, 16vw, 5.2rem); }
}

/* ——— Songs ——— */
.songs-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.song-list {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.song-list li {
  padding: 1.35rem 0 1.4rem;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.6rem 1rem;
}

.song-year {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  padding-top: 0.45rem;
}

.song-list h3 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  margin: 0 0 0.4rem;
}

.song-list p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  max-width: 36rem;
}

.honors {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.honors h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}

.honors ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}

.honors li {
  break-inside: avoid;
  font-size: 0.98rem;
  padding: 0.28rem 0;
  color: var(--ink-soft);
}

.honors li strong {
  font-family: var(--serif-display);
  font-weight: 500;
  color: var(--ink);
}

.songs-aside {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}

.pair-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 40% 20%;
  background: var(--paper-deep);
}

.inset-1971 {
  margin-top: 1.5rem;
  max-width: 16rem;
}

.inset-1971 img {
  width: 100%;
  aspect-ratio: 420 / 370;
  object-fit: cover;
}

@media (max-width: 860px) {
  .songs-layout { grid-template-columns: 1fr; }
  .songs-aside { position: static; }
  .honors ul { columns: 1; }
}

/* ——— Library (moral center) ——— */
.library {
  background: var(--balsam);
  color: var(--paper);
}

.library .section-kicker { color: var(--gold-soft); }
.library h2 { color: var(--paper); }
.library .thesis { color: var(--rose-soft); }
.library a { color: var(--gold-soft); text-decoration-color: var(--rose-soft); }
.library a:hover { color: var(--paper); }

.library-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.stat-block {
  margin: 0;
}

.stat-block .num {
  font-family: var(--serif-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(3.6rem, 9vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  color: var(--paper);
  display: block;
}

.stat-block .num-label {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-soft);
  max-width: 18rem;
}

.library-facts {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  max-width: 36rem;
}

.library-facts li {
  border-top: 1px solid color-mix(in srgb, var(--gold-soft) 40%, transparent);
  padding-top: 0.7rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}

.library-facts strong {
  display: block;
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--paper);
  margin-bottom: 0.15rem;
}

.library-quote {
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--gold-soft) 35%, transparent);
  max-width: 36rem;
}

.library-quote blockquote {
  margin: 0;
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.35;
}

.library-quote figcaption {
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

@media (max-width: 760px) {
  .library-grid { grid-template-columns: 1fr; }
  .library-facts { grid-template-columns: 1fr; }
}

/* ——— Homecoming ——— */
.homecoming-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}

.impact {
  background: var(--paper-warm);
  padding: 1.6rem 1.5rem 1.7rem;
  border-top: 2px solid var(--gold);
}

.impact h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin: 0 0 1rem;
}

.impact dl {
  margin: 0;
}

.impact div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
}

.impact div:last-child { border-bottom: 0; }

.impact dt {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--tobacco);
  white-space: nowrap;
}

.impact dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  align-self: center;
}

@media (max-width: 800px) {
  .homecoming-layout { grid-template-columns: 1fr; }
}

/* ——— Kindness ——— */
.kindness-list {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.kindness-list > li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}

.kindness-list > li:last-of-type { border-bottom: 1px solid var(--rule); }

.kind-year {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 0.35rem;
}

.kindness-list h3 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin: 0 0 0.45rem;
  line-height: 1.15;
}

.kindness-list p {
  margin: 0;
  max-width: 40rem;
  color: var(--ink-soft);
}

.kindness-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11.5rem;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  margin-top: 2.75rem;
}

.carte {
  justify-self: end;
}

.carte img {
  width: 100%;
  aspect-ratio: 174 / 344;
  object-fit: cover;
  object-position: center 15%;
  background: var(--paper-deep);
  box-shadow: 0 0 0 1px var(--gold);
}

@media (max-width: 720px) {
  .kindness-list > li { grid-template-columns: 1fr; gap: 0.35rem; }
  .kindness-visual { grid-template-columns: 1fr; }
  .carte { max-width: 10rem; justify-self: start; }
}

/* ——— In her voice ——— */
.voices-of-hers {
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
}

.quote-stack {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.quote-stack > li {
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
}

.quote-stack > li:last-child { border-bottom: 1px solid var(--rule); }

.quote-stack blockquote {
  margin: 0;
  max-width: 42rem;
}

.quote-stack blockquote p {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.quote-stack figcaption {
  margin-top: 0.85rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.quote-stack figcaption a {
  color: inherit;
  text-decoration-color: var(--rule);
}

/* Official family record — quiet, not a card */
.family-record {
  margin: 0.9rem 0 0;
  max-width: 28rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0.015em;
  color: var(--ink-mute);
}

.family-record a {
  display: inline;
  color: var(--ink-soft);
  text-decoration-color: color-mix(in srgb, var(--gold) 45%, transparent);
}

.family-record a:hover {
  color: var(--balsam);
  text-decoration-color: var(--rose);
}

.family-record span {
  display: block;
  margin-top: 0.28rem;
}

/* ——— Notes: a room of people talking ——— */

.voices {
  padding: clamp(2.1rem, 5.2vw, 4.4rem) var(--gutter) clamp(4.5rem, 9vw, 8rem);
  background:
    radial-gradient(88% 52% at 8% 0%, color-mix(in srgb, var(--rose) 10%, transparent), transparent 56%),
    radial-gradient(60% 36% at 100% 8%, color-mix(in srgb, var(--gold-line) 16%, transparent), transparent 48%),
    var(--paper);
}

.voices-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  max-width: 46rem;
  margin-bottom: clamp(1.6rem, 3.6vw, 2.5rem);
}

.voices-head .section-kicker {
  margin: 0 0 0.35rem;
}

.voices-head h1 {
  font-family: var(--serif-display);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 360;
  font-size: clamp(2.35rem, 5.6vw, 3.9rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
}

/* Lead letter — the first voice in the room */
.lead-letter {
  --speak: 1;
  max-width: 44rem;
  margin: 0 0 clamp(2rem, 4.5vw, 3.2rem);
}

.voices-enhanced #voices-static,
.voices-enhanced .voices-fallback {
  display: none;
}

#voices-static[hidden] {
  display: none !important;
}

#voices-mount:empty {
  display: none;
}


.lead-letter--brief {
  max-width: 34rem;
  padding-top: 0.4rem;
}

.lead-eyebrow {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 1.15rem;
}

.lead-opening .lead-graf {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.55rem, 3.15vw, 2.35rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.72em;
  white-space: pre-wrap;
}

.lead-opening .lead-graf:first-child {
  font-size: clamp(2.15rem, 5.6vw, 3.85rem);
  line-height: 1.12;
  letter-spacing: -0.032em;
}

.lead-letter--brief .lead-opening .lead-graf,
.lead-letter--brief .lead-opening .lead-graf:first-child {
  font-size: clamp(2.7rem, 7.4vw, 5.35rem);
  line-height: 1.06;
  letter-spacing: -0.034em;
  margin-bottom: 0;
  max-width: 16ch;
}

.lead-continue {
  display: inline-block;
  margin: 0.35rem 0 1.15rem;
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--rose);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--rose) 35%, transparent);
}

.lead-continue:hover {
  color: var(--tobacco);
  border-bottom-color: var(--tobacco);
}

.lead-rest {
  max-width: 36rem;
}

.lead-rest .lead-graf {
  font-family: var(--serif-text);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.65vw, 1.24rem);
  line-height: 1.66;
  letter-spacing: 0.002em;
  color: var(--ink-soft);
  margin: 0 0 0.95em;
}

.lead-media {
  margin: 1.35rem 0 0;
}

.lead-media--letter {
  max-width: 12.5rem;
}

.lead-media--letter img {
  width: 100%;
  height: auto;
  background: var(--paper-warm);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
}

.lead-play,
.note-play {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tobacco);
  text-decoration-color: color-mix(in srgb, var(--gold) 50%, transparent);
}

.lead-play:hover,
.note-play:hover {
  color: var(--balsam);
  text-decoration-color: var(--rose);
}

.lead-still,
.note-still {
  display: block;
  max-width: 13.5rem;
  margin: 1rem 0 0;
}

.lead-still img,
.note-still img {
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: sepia(0.16) saturate(0.72);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 32%, transparent);
}

.lead-foot,
.note-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.45rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
}

.voice-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28rem 0.5rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.voice-byline cite {
  font-style: normal;
  font-weight: 600;
}

.voice-byline cite a {
  color: var(--tobacco);
  text-decoration-color: color-mix(in srgb, var(--gold) 50%, transparent);
}

.voice-byline .handle {
  color: var(--rose);
  text-decoration-color: color-mix(in srgb, var(--rose) 38%, transparent);
}

.voice-byline a:hover {
  color: var(--balsam);
  text-decoration-color: var(--balsam);
}

.voice-share {
  appearance: none;
  display: inline;
  margin: 0;
  padding: 0.12rem 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
}

.voice-share:hover {
  color: var(--tobacco);
}

.voice-share:focus {
  outline: none;
}

.voice-share:focus-visible {
  outline: 1px dotted color-mix(in srgb, currentColor 45%, transparent);
  outline-offset: 3px;
  color: var(--tobacco);
}

/* Who is here — a gathering, not a menu */
.who-is-here {
  max-width: 44rem;
  margin: 0 0 clamp(1.8rem, 4vw, 2.8rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  line-height: 1.7;
  color: var(--ink-mute);
}

.who-is-here .who-label {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-right: 0.7rem;
  white-space: nowrap;
}

.who-is-here a {
  color: var(--tobacco);
  text-decoration: none;
}

.who-is-here a:hover {
  color: var(--rose);
}

.who-is-here .who-sep {
  color: color-mix(in srgb, var(--gold) 70%, var(--ink-mute));
  padding: 0 0.28rem;
}

/* River kicker */
.river-kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 clamp(0.6rem, 2vw, 1.1rem);
}

.river-kicker::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}

.river-kicker p {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* The river */
.voice-river {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.note {
  position: relative;
  padding: clamp(1.55rem, 3.4vw, 2.45rem) 0;
  max-width: 40rem;
  opacity: 0;
  transform: translateY(1.05rem);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--arrive, 0ms);
}

.note.is-in,
.voices:not(.voices-enhanced) .note {
  opacity: 1;
  transform: none;
}

.note-paper { margin: 0; }

.note-text {
  margin: 0;
}

.note {
  --note-size: clamp(1.18rem, 2.1vw, 1.52rem);
  --speak: 1;
}

.note-text p,
.note-text.tribute-verbatim {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 360;
  font-size: calc(var(--note-size) * var(--speak));
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  white-space: pre-wrap;
}

.note--brief {
  padding-top: clamp(2.1rem, 4.8vw, 3.5rem);
  padding-bottom: clamp(2.1rem, 4.8vw, 3.5rem);
}

.note--brief {
  --note-size: clamp(1.7rem, 3.5vw, 2.4rem);
}

.note--brief .note-text,
.note--brief .note-text p {
  font-size: calc(var(--note-size) * var(--speak));
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 26rem;
}

.note--long {
  padding-top: clamp(2.3rem, 5vw, 3.6rem);
  padding-bottom: clamp(2.4rem, 5vw, 3.8rem);
  max-width: 36rem;
}

.note--long .note-paper {
  background: color-mix(in srgb, var(--paper-warm) 88%, var(--paper));
  padding: clamp(1.45rem, 3vw, 2rem) clamp(1.3rem, 3vw, 1.85rem) 1.45rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent);
}

.note--long {
  --note-size: clamp(1.08rem, 1.6vw, 1.2rem);
}

.note--long .note-text,
.note--long .note-text p {
  font-family: var(--serif-text);
  font-style: normal;
  font-weight: 400;
  font-size: calc(var(--note-size) * var(--speak));
  line-height: 1.66;
  letter-spacing: 0.002em;
  color: var(--ink-soft);
  max-width: 32rem;
}

.note--shift {
  margin-left: clamp(1.25rem, 9vw, 5.5rem);
}

.note--shift-end {
  margin-left: auto;
  margin-right: clamp(0rem, 5vw, 2.5rem);
  max-width: 34rem;
}

.note--letter .note-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7.2rem, 11rem);
  gap: 1.15rem 1.5rem;
  align-items: start;
}

.note-media--letter {
  max-width: 11rem;
}

.note-media--letter img {
  width: 100%;
  height: auto;
  background: var(--paper-warm);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
}

.note--video .note-text,
.note--video .note-text p {
  max-width: 32rem;
}

.note--lead-echo {
  /* if a long lead is also placed in the river for Continue */
}

.note.is-arrived {
  animation: voice-arrive 1.6s var(--ease);
}

@keyframes voice-arrive {
  from { background-color: color-mix(in srgb, var(--gold-line) 18%, transparent); }
  to { background-color: transparent; }
}

.note:nth-child(1) { --arrive: 0ms; }
.note:nth-child(2) { --arrive: 50ms; }
.note:nth-child(3) { --arrive: 90ms; }
.note:nth-child(4) { --arrive: 120ms; }
.note:nth-child(5) { --arrive: 150ms; }

@media (max-width: 720px) {
  .note--shift,
  .note--shift-end {
    margin-left: 0;
    margin-right: 0;
  }
  .note--letter .note-body {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .note.is-arrived { animation: none; }
}

@media print {
  .note { opacity: 1 !important; transform: none !important; }
}


/* No-JS fallback list */
.voices-fallback .tribute {
  padding: 1.6rem 0;
  border-top: 1px solid var(--rule);
  max-width: 38rem;
  list-style: none;
}
.voices-fallback .tribute-verbatim {
  white-space: pre-wrap;
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.4;
  margin: 0;
}
.voices-fallback figcaption {
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.voices-fallback {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ——— Close / donate ——— */
.close {
  text-align: center;
  padding-top: clamp(4rem, 8vw, 6.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.close h2 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin: 0 0 0.75rem;
}

.close .prose {
  margin-inline: auto;
  text-align: left;
}

.close .center-measure {
  margin-inline: auto;
  max-width: 28rem;
}

.donate {
  display: inline-block;
  margin-top: 1.75rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--balsam);
  padding: 0.95rem 1.5rem;
  border: 1px solid var(--balsam);
}

.donate:hover {
  background: var(--balsam-deep);
  color: var(--paper);
  text-decoration: none;
}

/* ——— Credits ——— */
.colophon {
  padding: 2.5rem var(--gutter) 3.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-mute);
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.55;
}

.colophon h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}

.colophon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.75rem 2.5rem;
}

.colophon ul {
  margin: 0.4rem 0 0;
  padding: 0 0 0 1.1rem;
}

.colophon li { margin: 0.3rem 0; }

.colophon p { margin: 0 0 0.6em; }

/* ——— Footer rule ——— */
.site-end {
  padding: 1.1rem var(--gutter) 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-top: 1px solid var(--rule);
}

.site-end a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}
.site-end a:hover { color: var(--ink); }


/* Print */
@media print {
  .site-header, .nav-toggle, .donate, .skip-link { display: none !important; }
  body { background: white; }
  body::before { display: none; }
  .library { background: white; color: black; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .section { padding: 1.5rem 0; break-inside: avoid; }
  .portrait { min-height: 0; display: block; }
  .songs-aside { position: static; }
  .note { opacity: 1 !important; transform: none !important; }
}


.voices.is-shot-river .lead-letter {
  display: none;
}
.voices.is-shot-river .note {
  opacity: 1 !important;
  transform: none !important;
}


/* ——— Home opening: a few loved notes, then the homage ——— */

.voices--home {
  padding: clamp(2.2rem, 5.2vw, 4.2rem) var(--gutter) clamp(3.2rem, 7vw, 5.4rem);
  background:
    radial-gradient(88% 52% at 8% 0%, color-mix(in srgb, var(--rose) 10%, transparent), transparent 56%),
    radial-gradient(60% 36% at 100% 8%, color-mix(in srgb, var(--gold-line) 16%, transparent), transparent 48%),
    var(--paper);
}

.voices--home .voices-head {
  max-width: 40rem;
  margin-bottom: clamp(1.4rem, 3.2vw, 2.2rem);
}

.voices--home .voices-head h1 {
  font-style: italic;
  font-weight: 360;
}

.voices-enhanced #notes-static,
.notes-band.voices-enhanced #notes-static,
.voices-enhanced #voices-static {
  display: none !important;
}

#notes-static[hidden],
#voices-static[hidden],
#voices-fallback[hidden] {
  display: none !important;
}

#notes-mount:empty {
  display: none;
}

.home-notes {
  display: flex;
  flex-direction: column;
  gap: clamp(2.1rem, 4.6vw, 3.4rem);
  max-width: 42rem;
}

.home-note {
  margin: 0;
}

.home-opening .home-graf,
.home-text,
.home-text p {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  line-height: 1.34;
  letter-spacing: -0.016em;
  color: var(--ink);
  margin: 0 0 0.72em;
  white-space: pre-wrap;
}

.home-opening .home-graf:first-child {
  font-size: clamp(1.7rem, 3.4vw, 2.45rem);
  line-height: 1.18;
  letter-spacing: -0.024em;
}

.home-note--first .home-opening .home-graf:first-child {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  line-height: 1.14;
}

.home-text,
.home-text p {
  margin: 0;
  max-width: 38rem;
}

.home-note--brief .home-text,
.home-note--brief .home-text p {
  font-size: clamp(1.55rem, 2.8vw, 2.05rem);
  line-height: 1.22;
  max-width: 28rem;
}

.home-continue {
  display: inline-block;
  margin: 0.15rem 0 0;
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--rose);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--rose) 35%, transparent);
}

.home-continue:hover {
  color: var(--tobacco);
  border-bottom-color: var(--tobacco);
}

.home-media--letter {
  margin: 1.15rem 0 0;
  max-width: 13.5rem;
}

.home-media--letter img {
  width: 100%;
  height: auto;
  background: var(--paper-warm);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
}

.home-video {
  margin-top: 1rem;
}

.home-note .note-foot,
.home-note .lead-foot {
  margin-top: 1.15rem;
}

.all-notes {
  margin: clamp(2.2rem, 5vw, 3.4rem) 0 0;
  padding-top: 1.05rem;
  border-top: 1px solid var(--rule);
  max-width: 42rem;
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 360;
  font-size: 1.05rem;
}

.all-notes a {
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}

.all-notes a:hover {
  color: var(--tobacco);
  border-bottom-color: var(--tobacco);
}

/* Quiet Love mark — not a contest banner */
.note-actions {
  display: flex;
  align-items: baseline;
  gap: 1.05rem;
}

.note-love {
  appearance: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  padding: 0.12rem 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
}

.note-love .love-count {
  font-weight: 400;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink-mute) 62%, transparent);
}

.note-love:hover,
.note-love:hover .love-count {
  color: var(--rose);
}

.note-love[aria-pressed="true"] {
  color: var(--rose);
}

.note-love[aria-pressed="true"] .love-count {
  color: color-mix(in srgb, var(--rose) 70%, var(--ink-mute));
}

.note-love:focus {
  outline: none;
}

.note-love:focus-visible {
  outline: 1px dotted color-mix(in srgb, currentColor 45%, transparent);
  outline-offset: 3px;
}

.page-notes .site-nav a[href="notes.html"] {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--rose);
}

/* ——— Gathering: warm paper, a room after the singing ——— */

.voices--gathering,
.voices.voices--gathering {
  overflow: visible;
  padding: clamp(2.4rem, 5.5vw, 4.2rem) var(--gutter) clamp(5rem, 10vw, 8.5rem);
  background:
    radial-gradient(80% 48% at 4% 0%, color-mix(in srgb, var(--rose) 8%, transparent), transparent 62%),
    radial-gradient(46% 32% at 100% 6%, color-mix(in srgb, var(--gold-line) 12%, transparent), transparent 54%),
    #efe8da;
  color: #2a211c;
}

.voices--gathering .voices-head {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 4.5vw, 3.2rem);
}

.voices--gathering .voices-head h1 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  letter-spacing: -0.028em;
  color: #2a211c;
}

.voices--gathering .section-kicker {
  color: var(--tobacco);
}

.voices--gathering .lead-letter {
  max-width: 38rem;
  margin: 0 0 clamp(2.6rem, 6vw, 4rem);
}

.voices--gathering .lead-opening .lead-graf {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.38;
  letter-spacing: -0.014em;
  color: #2a211c;
  margin: 0 0 0.85em;
}

.voices--gathering .lead-opening .lead-graf:first-child,
.voices--gathering .lead-letter--long .lead-opening .lead-graf:first-child {
  font-size: clamp(1.7rem, 3.3vw, 2.35rem);
  line-height: 1.22;
  letter-spacing: -0.022em;
  color: #241c17;
}

.voices--gathering .lead-continue {
  color: var(--tobacco);
  border-bottom-color: color-mix(in srgb, var(--tobacco) 30%, transparent);
}

.voices--gathering .lead-rest .lead-graf {
  font-family: var(--serif-text);
  font-style: normal;
  font-size: clamp(1.05rem, 1.55vw, 1.16rem);
  line-height: 1.7;
  color: #4a4038;
}

.voices--gathering .who-is-here {
  max-width: 44rem;
  margin: 0 0 clamp(2.4rem, 5vw, 3.6rem);
  padding: 1.15rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.7vw, 1.14rem);
  line-height: 1.85;
  color: #6a5b50;
}

.voices--gathering .who-is-here .who-label {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a6554;
  margin-right: 0.65rem;
}

.voices--gathering .who-is-here a {
  color: #6b4433;
  text-decoration: none;
}

.voices--gathering .who-is-here a:hover {
  color: #3d2c24;
}

.voices--gathering .river-kicker {
  height: 0;
  margin: 0 0 clamp(1.2rem, 3vw, 2rem);
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}

.voices--gathering .river-kicker::after,
.voices--gathering .river-kicker p { display: none; }

.voices--gathering .voice-river {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.voices--gathering .note {
  position: relative;
  padding: clamp(2.4rem, 5.6vw, 4.4rem) 0;
  max-width: 38rem;
  opacity: 1;
  transform: none;
  will-change: auto;
  transition: opacity 0.8s ease;
}

.voices--gathering .note-text,
.voices--gathering .note-text p,
.voices--gathering .note-text.tribute-verbatim {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.16rem, 1.95vw, 1.42rem);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: #322820;
  margin: 0;
  white-space: pre-wrap;
  transition: font-size 0.8s ease, color 0.8s ease;
}

.voices--gathering .note--mid .note-text,
.voices--gathering .note--mid .note-text p {
  font-size: clamp(1.32rem, 2.4vw, 1.7rem);
  line-height: 1.34;
  max-width: 30rem;
}

.voices--gathering .note--brief {
  padding-top: clamp(2.8rem, 6.2vw, 5rem);
  padding-bottom: clamp(2.8rem, 6.2vw, 5rem);
}

.voices--gathering .note--brief .note-text,
.voices--gathering .note--brief .note-text p {
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -0.022em;
  max-width: 22rem;
  color: #2a211c;
}

.voices--gathering .note--huge {
  margin-left: auto;
  margin-right: clamp(0.5rem, 10vw, 6rem);
  max-width: 28rem;
}

.voices--gathering .note--huge .note-text,
.voices--gathering .note--huge .note-text p {
  font-size: clamp(2rem, 4.4vw, 3.15rem);
  line-height: 1.12;
  max-width: 14ch;
  color: #241c17;
}

.voices--gathering .note--long {
  max-width: 32rem;
  padding-top: clamp(2.6rem, 5.5vw, 4.2rem);
  padding-bottom: clamp(2.8rem, 5.8vw, 4.6rem);
}

.voices--gathering .note--long .note-paper {
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.voices--gathering .note--long .note-text,
.voices--gathering .note--long .note-text p {
  font-family: var(--serif-text);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.02rem, 1.45vw, 1.12rem);
  line-height: 1.72;
  letter-spacing: 0.002em;
  color: #5a4e44;
  max-width: 30rem;
}

.voices--gathering .note--shift {
  margin-left: clamp(1.8rem, 12vw, 7.5rem);
}

.voices--gathering .note--shift-end {
  margin-left: auto;
  margin-right: clamp(0.4rem, 8vw, 4.5rem);
}

.voices--gathering .note:nth-child(7) {
  margin-left: clamp(0.8rem, 7vw, 3.6rem);
}

.voices--gathering .note:nth-child(11) {
  max-width: 30rem;
  margin-left: clamp(2.2rem, 14vw, 8rem);
}

.voices--gathering .note-foot,
.voices--gathering .lead-foot {
  border-top-color: color-mix(in srgb, var(--gold) 26%, transparent);
}

.voices--gathering .voice-byline { color: #6e6056; }
.voices--gathering .voice-byline cite a { color: #6b4433; }
.voices--gathering .voice-byline .handle { color: #8f5552; }
.voices--gathering .voice-share { color: #6e6056; }
.voices--gathering .voice-share:hover,
.voices--gathering .voice-share:focus-visible { color: #6b4433; }

/* Linger: type a little larger, ink a little blacker. Neighbors recede. No bounce. */
.voices--gathering .voice-river:has(.note:hover) .note:not(:hover),
.voices--gathering .voice-river:has(.note.is-lingering) .note:not(.is-lingering):not(:hover) {
  opacity: 0.65;
  filter: none;
}

.voices--gathering .note:hover,
.voices--gathering .note.is-lingering,
.voices--gathering .note.is-in:hover,
.voices--gathering .note.is-in.is-lingering {
  opacity: 1;
  transform: none;
  z-index: 4;
}

.voices--gathering .note:hover .note-text,
.voices--gathering .note:hover .note-text p,
.voices--gathering .note.is-lingering .note-text,
.voices--gathering .note.is-lingering .note-text p {
  font-size: clamp(1.24rem, 2.1vw, 1.52rem);
  color: #16110e;
}

.voices--gathering .note--brief:hover .note-text,
.voices--gathering .note--brief:hover .note-text p,
.voices--gathering .note--brief.is-lingering .note-text,
.voices--gathering .note--brief.is-lingering .note-text p {
  font-size: clamp(1.85rem, 3.7vw, 2.55rem);
  color: #16110e;
}

.voices--gathering .note--huge:hover .note-text,
.voices--gathering .note--huge:hover .note-text p,
.voices--gathering .note--huge.is-lingering .note-text,
.voices--gathering .note--huge.is-lingering .note-text p {
  font-size: clamp(2.15rem, 4.7vw, 3.35rem);
  color: #140f0c;
}

.voices--gathering .note--long:hover .note-text,
.voices--gathering .note--long:hover .note-text p,
.voices--gathering .note--long.is-lingering .note-text,
.voices--gathering .note--long.is-lingering .note-text p {
  font-size: clamp(1.06rem, 1.52vw, 1.16rem);
  color: #2a211c;
}

.voices--gathering .note--mid:hover .note-text,
.voices--gathering .note--mid:hover .note-text p,
.voices--gathering .note--mid.is-lingering .note-text,
.voices--gathering .note--mid.is-lingering .note-text p {
  font-size: clamp(1.42rem, 2.55vw, 1.82rem);
  color: #16110e;
}

@media (prefers-reduced-motion: reduce) {
  .voices--gathering .note,
  .voices--gathering .note-text,
  .voices--gathering .note-text p {
    transition: none;
  }
}

@media (max-width: 720px) {
  .voices--gathering .note--shift,
  .voices--gathering .note--shift-end,
  .voices--gathering .note--huge,
  .voices--gathering .note:nth-child(7),
  .voices--gathering .note:nth-child(11) {
    margin-left: 0;
    margin-right: 0;
  }
}

#voices-fallback[hidden] { display: none !important; }
.lead-rest[hidden] { display: none !important; }

.voices--gathering .voices-head[hidden],
.voices--gathering .lead-letter[hidden],
.voices--gathering .who-is-here[hidden],
.voices--gathering .river-kicker[hidden] {
  display: none !important;
}

.voices--gathering button.lead-continue,
.voices--gathering .lead-continue {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tobacco) 32%, transparent);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0.08rem;
  margin: 0.35rem 0 1.15rem;
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--tobacco);
  cursor: pointer;
}
.voices--gathering button.lead-continue:hover {
  color: #3d2c24;
  border-bottom-color: #3d2c24;
}


/* ——— Gathering media: objects in the river, not postage stamps ——— */

.voices--gathering.is-shot {
  padding-top: 1.15rem;
  padding-bottom: 2rem;
}

.voices--gathering .note--letter {
  max-width: min(36rem, 100%);
}

.voices--gathering .note--letter .note-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.05rem;
}

.voices--gathering .note--letter .note-text,
.voices--gathering .note--letter .note-text p,
.voices--gathering .note--letter.is-lingering .note-text,
.voices--gathering .note--letter.is-lingering .note-text p,
.voices--gathering .note--letter:hover .note-text,
.voices--gathering .note--letter:hover .note-text p {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.38;
  letter-spacing: -0.01em;
  max-width: 28rem;
  color: #3a322b;
}

.voices--gathering .note-media--letter {
  max-width: min(26rem, 92vw);
  width: min(26rem, 92vw);
}

.voices--gathering .note-media--letter img {
  display: block;
  width: 100%;
  height: auto;
  background: #f7f1e6;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent),
    0 18px 40px color-mix(in srgb, #2a1c14 10%, transparent);
}

.voices--gathering .note--window {
  max-width: min(34rem, 100%);
}

.voices--gathering .note--window .note-text,
.voices--gathering .note--window .note-text p,
.voices--gathering .note--caption .note-text,
.voices--gathering .note--caption .note-text p,
.voices--gathering .note--window.is-lingering .note-text,
.voices--gathering .note--window.is-lingering .note-text p,
.voices--gathering .note--window:hover .note-text,
.voices--gathering .note--window:hover .note-text p {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.28;
  max-width: 26rem;
  color: #2a211c;
}

.voices--gathering .note-window {
  position: relative;
  display: block;
  margin-top: 1.05rem;
  max-width: min(28rem, 92vw);
  width: min(28rem, 92vw);
  text-decoration: none;
  background: #efe6d4;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent),
    0 14px 36px color-mix(in srgb, #2a1c14 9%, transparent);
}

.voices--gathering .note--gervais .note-window {
  max-width: min(30rem, 94vw);
  width: min(30rem, 94vw);
}

.voices--gathering .note--advice .note-window {
  max-width: min(26.5rem, 90vw);
  width: min(26.5rem, 90vw);
}

.voices--gathering .note--austin .note-window {
  max-width: min(22.5rem, 84vw);
  width: min(22.5rem, 84vw);
}

.voices--gathering .note--austin .note-window img {
  height: 22.5rem;
  object-fit: cover;
  object-position: center 12%;
}

.voices--gathering .note-window {
  max-width: min(22rem, 90vw);
  width: min(22rem, 90vw);
}

.voices--gathering .note-window img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 18.5rem;
  object-fit: cover;
  object-position: center 16%;
  filter: sepia(0.14) saturate(0.78) brightness(0.94);
}

.voices--gathering .note--austin .note-window img {
  height: 18.5rem;
}

.voices--gathering .note-actions {
  gap: 0.95rem;
}

.voices--gathering .note-love {
  color: #6e6056;
}

.voices--gathering .note-love .love-count {
  color: color-mix(in srgb, #6e6056 58%, transparent);
}

.voices--gathering .note-love:hover,
.voices--gathering .note-love[aria-pressed="true"] {
  color: #8f5552;
}

.voices--gathering .note-window-play {
  display: block;
  padding: 0.62rem 0.85rem 0.7rem;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b4433;
  background: color-mix(in srgb, #f3eee3 88%, #ebe4d4);
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}

.voices--gathering .note-window:hover .note-window-play {
  color: #241c17;
}

.voices--gathering .note--playframe {
  max-width: min(30rem, 100%);
}

.voices--gathering .note--playframe-wide {
  max-width: min(34rem, 100%);
}

.voices--gathering .note--playframe-soft .note-playframe {
  min-height: 6.2rem;
}

.voices--gathering .note-playframe {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1rem;
  min-height: 7.2rem;
  max-width: 19.5rem;
  padding: 1.15rem 1.25rem;
  text-decoration: none;
  color: #4a3428;
  background: color-mix(in srgb, #e7decd 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 26%, transparent);
}

.voices--gathering .note--playframe-wide .note-playframe {
  max-width: 24rem;
  min-height: 8rem;
}

.voices--gathering .note-playframe-mark {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid color-mix(in srgb, var(--tobacco) 45%, transparent);
  border-radius: 50%;
  position: relative;
}

.voices--gathering .note-playframe-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.32rem 0 0.32rem 0.5rem;
  border-color: transparent transparent transparent #6b4433;
  transform: translate(-40%, -50%);
}

.voices--gathering .note-playframe-label {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.voices--gathering .note-playframe:hover {
  color: #241c17;
  background: color-mix(in srgb, #efe6d4 82%, transparent);
}

.voices--gathering .note--fragment {
  max-width: 11.5rem;
  margin-left: clamp(3rem, 18vw, 11rem);
  padding-top: clamp(2.8rem, 6vw, 4.4rem);
  padding-bottom: clamp(2.8rem, 6vw, 4.4rem);
}

.voices--gathering .river-fragment {
  margin: 0;
}

.voices--gathering .river-fragment img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.22) saturate(0.55) brightness(0.92);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 24%, transparent);
}

.voices--gathering .river-fragment figcaption {
  margin-top: 0.45rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a6554;
}

@media (max-width: 720px) {
  .voices--gathering .note-media--letter,
  .voices--gathering .note-window,
  .voices--gathering .note--gervais .note-window,
  .voices--gathering .note--advice .note-window,
  .voices--gathering .note--austin .note-window {
    width: 100%;
    max-width: 100%;
  }
  .voices--gathering .note--fragment {
    margin-left: 0;
    max-width: 9.5rem;
  }
}


/* ——— Home Notes strip: balsam after cream Portrait, before Songs ——— */

.notes-band {
  padding: 0.7rem var(--gutter) 0.8rem;
  background: var(--balsam);
  color: var(--paper);
  border-top: 0;
  border-bottom: 0;
}

.notes-band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.4rem;
}

.notes-band-head .section-kicker {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.notes-band .all-notes {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.notes-band .all-notes a {
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 0;
}

.notes-band .all-notes a:hover {
  color: var(--paper);
}

.notes-band-cards,
#notes-mount .notes-band-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem 1.35rem;
}

.band-note {
  min-width: 0;
  margin: 0;
  padding: 0;
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.band-note-text,
.band-note-text p,
.band-note-text .tribute-verbatim,
.band-note .tribute-verbatim {
  font-family: var(--serif-text);
  font-style: normal;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.38;
  letter-spacing: 0;
  color: var(--paper);
  margin: 0;
  display: block;
  overflow: hidden;
  white-space: normal;
  -webkit-line-clamp: unset;
}

.notes-band .note-foot,
.notes-band .lead-foot {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 0.85rem;
}

.notes-band .voice-byline,
.notes-band .voice-byline cite,
.notes-band .voice-byline cite a {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-soft);
  text-decoration: none;
}

.notes-band .voice-byline {
  margin: 0;
}

.notes-band .voice-byline cite a:hover {
  color: var(--paper);
}

.notes-band .note-actions {
  gap: 0.7rem;
}

.notes-band .voice-share,
.notes-band .note-love,
.notes-band .note-love .love-count {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 72%, transparent);
}

.notes-band .voice-share:hover,
.notes-band .note-love:hover,
.notes-band .note-love:hover .love-count,
.notes-band .note-love[aria-pressed="true"],
.notes-band .note-love[aria-pressed="true"] .love-count {
  color: var(--rose-soft);
}

.notes-band .voice-share:focus-visible,
.notes-band .note-love:focus-visible {
  outline-color: var(--gold-soft);
}

@media (max-width: 720px) {
  .notes-band-cards,
  #notes-mount .notes-band-cards {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}


.notes-band--balsam {
  background: var(--balsam);
  border-bottom: 1px solid color-mix(in srgb, var(--gold-line) 35%, transparent);
  color: var(--paper);
}
.notes-band--balsam .section-kicker {
  color: var(--gold-soft);
}
.notes-band--balsam .all-notes a {
  color: var(--paper);
  border-bottom-color: color-mix(in srgb, var(--gold-soft) 50%, transparent);
}
.notes-band--balsam .all-notes a:hover {
  color: var(--gold-soft);
  border-bottom-color: var(--gold-soft);
}
.notes-band--balsam .band-note {
  border-top-color: color-mix(in srgb, var(--paper) 22%, transparent);
}
.notes-band--balsam .band-note-text,
.notes-band--balsam .band-note-text p,
.notes-band--balsam .tribute-verbatim {
  font-family: var(--serif-text);
  font-style: italic;
  color: var(--paper);
}
.notes-band--balsam .voice-byline,
.notes-band--balsam .voice-byline a,
.notes-band--balsam .note-actions button {
  color: color-mix(in srgb, var(--paper) 78%, var(--gold-soft));
}
.notes-band--balsam .voice-byline a:hover,
.notes-band--balsam .note-actions button:hover {
  color: var(--paper);
}

/* ——— Notes wall (home): a gift of paper and photographs ——— */

.page-notes {
  --header-h: 2.45rem;
  background: #f3eee3;
}

.page-notes .site-header {
  background: color-mix(in srgb, #f3eee3 92%, transparent);
  border-bottom-color: color-mix(in srgb, var(--gold) 20%, transparent);
}

.page-notes .site-nav a[href="index.html"][aria-current="true"],
.page-notes .site-nav a[href="index.html"] {
  color: var(--ink);
}

.page-notes .site-nav a[aria-current="true"] {
  box-shadow: inset 0 -1px 0 var(--rose);
}

.notes-gift {
  position: relative;
  padding: 0.55rem 0 0;
  background: #f3eee3;
}

.notes-gift-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.notes-gift-head {
  display: none;
}

.voices-enhanced #notes-static,
.notes-gift.voices-enhanced #notes-static {
  display: none !important;
}

#notes-mount:empty {
  display: none;
}

/* Four uneven columns — a board, not a catalog grid */
.notes-wall,
#notes-mount.notes-wall,
#notes-static.notes-wall {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem 0.35rem;
  padding: 0.35rem clamp(0.7rem, 2vw, 1.6rem) 4.5rem;
  background: #f3eee3;
  overflow: visible;
}

.notes-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  flex: 1 1 0;
  overflow: visible;
}

.notes-col--a { flex: 1.16 1 0; padding-top: 0.15rem; }
.notes-col--b { flex: 1.02 1 0; padding-top: 1.15rem; }
.notes-col--c { flex: 0.96 1 0; padding-top: 0.45rem; }
.notes-col--d { flex: 1.1 1 0; padding-top: 0.85rem; }

/* Sheets of paper / prints on the wall */
.tile {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0.42rem -0.28rem 0.18rem;
  padding: 1.05rem 1.1rem 0.75rem;
  background: var(--sheet, #f6f0e4);
  color: var(--ink);
  overflow: visible;
  transform: rotate(var(--tilt, 0deg)) scale(1);
  transform-origin: 50% 46%;
  box-shadow:
    0 1px 1px color-mix(in srgb, #2a1c14 6%, transparent),
    0 8px 22px color-mix(in srgb, #2a1c14 8%, transparent),
    0 18px 34px color-mix(in srgb, #2a1c14 5%, transparent);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    z-index 0s;
}

.notes-col--a .tile:nth-child(odd) { margin-left: -0.15rem; margin-right: 0.2rem; }
.notes-col--b .tile:nth-child(even) { margin-left: -0.45rem; }
.notes-col--c .tile { margin-left: -0.2rem; margin-right: -0.15rem; }
.notes-col--d .tile:nth-child(3n) { margin-left: -0.35rem; }

.tile--xl { z-index: 2; }
.tile--lg { z-index: 2; }

.tile--paper-cream { --sheet: #f6f0e4; }
.tile--paper-warm { --sheet: #f3eee3; }
.tile--paper-deep { --sheet: #efe6d4; }
.tile--paper-tobacco { --sheet: #e6d5bc; }
.tile--paper-rose { --sheet: #ead8d4; }

.tile--balsam {
  --sheet: var(--balsam);
  background: var(--balsam);
  color: var(--paper);
}

.tile:hover,
.tile.is-lingering,
.tile:focus-within {
  z-index: 14;
  transform: rotate(var(--tilt, 0deg)) scale(1.035);
  box-shadow:
    0 2px 2px color-mix(in srgb, #2a1c14 8%, transparent),
    0 14px 30px color-mix(in srgb, #2a1c14 13%, transparent),
    0 32px 54px color-mix(in srgb, #2a1c14 9%, transparent);
}

/* Letters — one voice, Newsreader, no Fraunces first-line */
.tile-letter,
.tile-text {
  margin: 0;
  flex: 1 1 auto;
}

.tile-letter p,
.tile-letter .tribute-verbatim,
.tile--text .tribute-verbatim {
  font-family: var(--serif-text);
  font-style: normal;
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.58;
  letter-spacing: 0.006em;
  color: var(--ink-soft);
  margin: 0 0 0.7em;
  white-space: pre-wrap;
}

.tile-letter p:last-child,
.tile-letter .tribute-verbatim:last-child {
  margin-bottom: 0;
}

.tile--xl.tile--text .tile-letter p,
.tile--xl.tile--text .tribute-verbatim {
  font-size: 1.02rem;
  line-height: 1.6;
}

.tile--lg.tile--text .tile-letter p,
.tile--lg.tile--text .tribute-verbatim {
  font-size: 1rem;
}

/* Short quotes: the whole sheet is the line */
.tile--quote {
  padding: 1.25rem 1.15rem 0.9rem;
  justify-content: center;
}

.tile-quote {
  margin: 0;
}

.tile-quote .tribute-verbatim,
.tile--quote .tile-letter p,
.tile--quote .tribute-verbatim {
  font-family: var(--serif-text);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.22rem, 1.7vw, 1.48rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  white-space: pre-wrap;
}

.tile--quote.tile--sm .tribute-verbatim {
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
}

.tile--balsam .tile-quote .tribute-verbatim,
.tile--balsam .tribute-verbatim {
  color: var(--paper);
  font-size: clamp(1.2rem, 1.65vw, 1.42rem);
}

.tile--balsam .voice-byline,
.tile--balsam .voice-byline cite a,
.tile--balsam .voice-byline .handle,
.tile--balsam .love-mark {
  color: color-mix(in srgb, var(--paper) 78%, var(--gold-soft));
}

.tile--balsam .voice-byline cite a:hover,
.tile--balsam .voice-byline .handle:hover {
  color: var(--paper);
}

.tile--balsam .note-actions button,
.tile--balsam .note-love .love-count {
  color: color-mix(in srgb, var(--paper) 70%, var(--gold-soft));
}

.tile--balsam .note-love:hover,
.tile--balsam .note-love[aria-pressed="true"],
.tile--balsam .voice-share:hover {
  color: var(--rose-soft);
}

/* Robert's ledger — Fraunces on the numbers only */
.tile-stats {
  margin: 0;
}

.tile-stats p {
  margin: 0 0 0.28em;
  font-family: var(--serif-text);
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.tile-stats .tile-num {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.22em;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-right: 0.15em;
}

.tile-stats .tile-stats-end {
  margin-top: 0.65em;
  font-style: italic;
  color: var(--ink);
}

/* Photographs as objects */
.tile--image,
.tile--photo,
.tile--letter,
.tile--portrait {
  padding: 0.42rem 0.42rem 0.5rem;
  background: #f7f2e8;
  --sheet: #f7f2e8;
}

.tile-print,
.tile-cover {
  position: relative;
  display: block;
  text-decoration: none;
  background: #d8cfc0;
  overflow: hidden;
}

.tile-print img,
.tile-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.1) saturate(0.86) contrast(1.03);
}

.tile--letter .tile-print,
.tile--letter .tile-cover {
  aspect-ratio: 3 / 4;
  background: #f7f1e6;
}

.tile--letter .tile-print img,
.tile--letter .tile-cover img {
  object-position: top center;
  filter: none;
}

.tile--photo.tile--portrait .tile-print,
.tile--photo.tile--md .tile-print {
  aspect-ratio: 4 / 5;
}

.tile--photo.tile--landscape .tile-print {
  aspect-ratio: 3 / 2;
}

.tile--photo.tile--square .tile-print {
  aspect-ratio: 1;
}

.tile--portrait .tile-print {
  aspect-ratio: 4 / 5;
}

.tile--portrait .tile-print img {
  object-position: 50% 18%;
  filter: sepia(0.22) saturate(0.5) contrast(1.04);
}

.tile-play {
  position: absolute;
  left: 0.55rem;
  bottom: 0.5rem;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f3eee3;
  background: none;
  text-shadow: 0 1px 3px rgba(20, 12, 8, 0.55);
}

.tile-print:hover .tile-play,
.tile-cover:hover .tile-play {
  color: #fff;
}

.tile-caption,
.tile-caption.tribute-verbatim {
  margin: 0;
  padding: 0.42rem 0.35rem 0.05rem;
  font-family: var(--serif-text);
  font-style: italic;
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--ink-mute);
  max-height: 3.4em;
  overflow: hidden;
  white-space: pre-wrap;
}

.tile--portrait .tile-caption {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tile--image .tile-foot,
.tile--photo .tile-foot,
.tile--letter .tile-foot,
.tile--portrait .tile-foot {
  margin-top: 0.15rem;
  padding: 0.28rem 0.3rem 0.15rem;
  border-top: 0;
}

/* Quiet chrome */
.tile-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 0.7rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 0;
}

.tile .voice-byline {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.tile .voice-byline cite a,
.tile .voice-byline .handle {
  text-decoration: none;
}

.tile .voice-byline cite a:hover,
.tile .voice-byline .handle:hover {
  text-decoration: underline;
}

.tile .note-actions {
  gap: 0.65rem;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.tile .love-mark {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ink-mute) 70%, transparent);
  opacity: 1;
}

.tile .note-love .love-label {
  display: inline;
}

.tile:hover .note-actions,
.tile.is-lingering .note-actions,
.tile:focus-within .note-actions {
  opacity: 1;
}

.tile .voice-share,
.tile .note-love,
.tile .note-love .love-count {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

/* Play-without-still: a small paper scrap, not a card */
.tile--play {
  padding: 0.95rem 1rem 0.75rem;
}

.tile--play .tile-playframe {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.7rem 0 0.15rem;
  padding: 0.55rem 0.65rem;
  text-decoration: none;
  color: var(--tobacco);
  background: color-mix(in srgb, var(--paper) 40%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 26%, transparent);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tile-playframe-mark {
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--tobacco) 45%, transparent);
  border-radius: 50%;
  position: relative;
}

.tile-playframe-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  border-style: solid;
  border-width: 0.24rem 0 0.24rem 0.38rem;
  border-color: transparent transparent transparent var(--tobacco);
  transform: translate(-40%, -50%);
}

.page-notes .colophon {
  background: #f3eee3;
}

@media (max-width: 1040px) {
  .notes-col--a,
  .notes-col--b,
  .notes-col--c,
  .notes-col--d {
    padding-top: 0.4rem;
    flex: 1 1 0;
  }
}

@media (max-width: 860px) {
  .notes-wall,
  #notes-mount.notes-wall,
  #notes-static.notes-wall {
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    padding: 0.4rem 0.7rem 3rem;
  }
  .notes-col {
    flex: 1 1 calc(50% - 0.4rem);
    padding-top: 0.2rem;
  }
  .tile {
    margin: 0.45rem 0.1rem;
  }
}

@media (max-width: 560px) {
  .notes-wall,
  #notes-mount.notes-wall,
  #notes-static.notes-wall {
    flex-direction: column;
    padding: 0.3rem 0.85rem 2.5rem;
  }
  .notes-col {
    flex: 1 1 auto;
    width: 100%;
  }
  .tile {
    margin: 0.55rem 0.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile,
  .tile:hover,
  .tile.is-lingering,
  .tile:focus-within {
    transition: none;
    transform: none;
  }
}

@media print {
  .tile {
    break-inside: avoid;
    box-shadow: none !important;
    transform: none !important;
  }
}