/* ───────────────────────────────────────────────────────────
   Love and Limerence
   typography: Fraunces (display), Newsreader (body),
               JetBrains Mono (system)
   palette:    flesh-paper, aubergine-ink, dusty lavender
   ─────────────────────────────────────────────────────────── */

:root {
  --paper: #ece2d7;
  --paper-warm: #e8d8c9;
  --paper-cool: #ddd4d6;
  --ink: #2a1d2a;
  --ink-soft: #3d2c3d;
  --muted: #7a6168;
  --lavender: #8a6e8a;
  --lavender-deep: #6a4f6a;
  --rose: #b89c8c;
  --blush: #e4c9c4;
  --green-faint: #8a9a82;

  --display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --body: "Newsreader", "EB Garamond", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --typewriter: "Special Elite", "Courier New", "American Typewriter", monospace;

  --base: 18px;
  --baseline: 28px;

  --measure: 60ch;
  --gutter: 24px;

  --ease: cubic-bezier(.2,.6,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  font-family: var(--body);
  font-size: var(--base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(184,156,140,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 100%, rgba(138,110,138,0.12) 0%, transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "onum";
  min-height: 100vh;
  overflow-x: hidden;
}

::selection {
  background: var(--lavender);
  color: var(--paper);
}

/* ── Slow page entrance ── */
@keyframes paper-in {
  from { opacity: 0; filter: blur(4px); }
  to   { opacity: 1; filter: blur(0); }
}
main {
  animation: paper-in 1.6s var(--ease) both;
}

/* ── View transition (chamber → chamber) ── */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 1.1s;
  animation-timing-function: var(--ease);
}
::view-transition-old(root) {
  animation-name: dissolve-out;
}
::view-transition-new(root) {
  animation-name: dissolve-in;
}
@keyframes dissolve-out {
  to { opacity: 0; filter: blur(8px); }
}
@keyframes dissolve-in {
  from { opacity: 0; filter: blur(8px); }
}

/* ── Top-bar: minimal threshold marker ── */
.lal-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 28px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 50;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.lal-bar a, .lal-bar button {
  pointer-events: auto;
  background: none;
  border: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: color .3s var(--ease);
}
.lal-bar a:hover, .lal-bar button:hover { color: var(--ink); }
.lal-bar .l { justify-self: start; }
.lal-bar .c { justify-self: center; }
.lal-bar .r { justify-self: end; }

/* ── Index pin (always available) ── */
.idx-pin {
  position: fixed;
  bottom: 96px;
  right: 24px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.idx-pin-toggle {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.idx-pin-toggle:hover { background: var(--ink); color: var(--paper); }
.idx-pin-list {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 16px 18px;
  max-height: 60vh;
  overflow-y: auto;
}
.idx-pin.open .idx-pin-list { display: flex; }
.idx-pin-list a {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  transition: color .2s var(--ease);
}
.idx-pin-list a:hover { color: var(--lavender); }
.idx-pin-list a .num {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-right: 8px;
  text-transform: uppercase;
}

/* ── Chamber container ── */
.chamber {
  min-height: 100vh;
  padding: 120px 32px 200px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.chamber-inner {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* ── Threshold (figure name + Barthes definition) ── */
.threshold {
  grid-column: 1 / -1;
  padding: 80px 0 40px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
.threshold-num {
  grid-column: 1 / 3;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 14px;
}
.threshold-fig {
  grid-column: 3 / 13;
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(54px, 11vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.threshold-fig .amp {
  font-style: normal;
  color: var(--lavender);
}
.threshold-fr {
  grid-column: 3 / 13;
  margin-top: 14px;
  font-family: var(--body);
  font-style: italic;
  font-size: 17px;
  color: var(--lavender-deep);
  letter-spacing: 0.01em;
}
.threshold-def {
  grid-column: 3 / 11;
  margin-top: 56px;
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 56ch;
  font-feature-settings: "kern", "liga", "onum";
}
.threshold-def em { color: var(--ink); }
.threshold-cite {
  grid-column: 3 / 11;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Slow reveal (text appears after a beat) ── */
.slow-reveal {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(6px);
  transition: opacity 1.4s var(--ease), filter 1.4s var(--ease), transform 1.4s var(--ease);
}
.slow-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ── Generic content blocks ── */
.block {
  grid-column: 3 / 11;
  margin-top: 40px;
}
.block-wide  { grid-column: 2 / 12; }
.block-full  { grid-column: 1 / -1; }
.block-half-l { grid-column: 2 / 7; }
.block-half-r { grid-column: 7 / 12; }
.block-narrow { grid-column: 4 / 10; }

.contributor-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.contributor-meta .dot { color: var(--lavender); }

.piece-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 28px;
  font-variation-settings: "opsz" 60, "SOFT" 50;
}

.prose p {
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 1.25em;
  font-feature-settings: "kern", "liga", "onum";
}
.prose p:first-letter {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.6em;
  line-height: 1;
  padding-right: 4px;
  color: var(--ink);
}
.prose .es {
  color: var(--lavender-deep);
  font-style: italic;
}

.poem {
  font-family: var(--body);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-line;
  letter-spacing: 0.005em;
}
.poem .stanza { margin-bottom: 1.4em; }

.figure-img {
  width: 100%;
  height: auto;
  display: block;
  filter: contrast(0.96) saturate(0.92);
}
.figure-img.bleed { width: 100%; }
.figure-img.dim { opacity: 0.85; mix-blend-mode: multiply; }

figcaption {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 18px;
}

/* ──────────────────────────────────────────────
   Spread — for tu jamón's body of work
   poem text + collage in intimate proximity
   ────────────────────────────────────────────── */
.spread {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin: 64px 0;
}
.spread.right-image { grid-template-columns: 1fr 1fr; }
.spread.left-image  { grid-template-columns: 1fr 1fr; }
.spread-text { font-family: var(--body); }
.spread-text .poem {
  font-size: 19px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  color: var(--ink);
}
/* Asymmetric spread variants */
.spread.asymm-text  { grid-template-columns: 1.5fr 1fr; }
.spread.asymm-image { grid-template-columns: 1fr 1.5fr; }
.spread.staggered .spread-image { transform: translateY(48px); }
.spread.staggered .spread-text  { transform: translateY(-12px); }
@media (max-width: 720px) {
  .spread.staggered .spread-image,
  .spread.staggered .spread-text { transform: none; }
}
.spread-image { margin: 0; }
.spread-image img {
  width: 100%;
  height: auto;
  display: block;
  filter: contrast(0.96) saturate(0.95);
  mix-blend-mode: multiply;
}

/* ── Contrast tiers ── */

/* SOFT — collage blends into the cream paper; reduced presence */
.spread-image.soft img,
.full-collage.soft img {
  opacity: 0.72;
  filter: contrast(0.86) saturate(0.74) brightness(1.06);
  mix-blend-mode: multiply;
}

/* BRIGHT — full presence but blended, not hot. Tuned for the
   pre-blended cream/lavender versions of your-eye, duration, waiting. */
.spread-image.bright img,
.full-collage.bright img,
.duration-aside.bright img {
  opacity: 0.88;
  filter: contrast(0.96) saturate(0.86) brightness(1.02);
  mix-blend-mode: multiply;
}

.poem-bridge {
  grid-column: 1 / -1;
  margin: 48px auto;
  font-family: var(--body);
  font-size: 21px;
  line-height: 1.65;
  white-space: pre-line;
  color: var(--ink);
  text-align: left;
  max-width: 56ch;
}
.poem-bridge.center { text-align: center; }

.poem-section-title {
  grid-column: 1 / -1;
  font-family: var(--typewriter);
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  margin: 80px 0 50px;
  font-weight: 400;
}
.poem-section-title .small {
  display: block;
  font-family: var(--mono);
  font-size: 0.22em;
  letter-spacing: 0.4em;
  color: var(--lavender-deep);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.full-collage {
  grid-column: 1 / -1;
  margin: 48px 0;
  text-align: center;
}
.full-collage img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
  filter: contrast(0.96) saturate(0.95);
  margin: 0 auto;
}
/* Three different beats. Sizes capped so they stay below native
   resolution on retina (most collages are 2048px native). */
.full-collage.scale-medium img { max-height: 65vh; max-width: 70%; }
.full-collage.scale-full   img { max-height: 75vh; max-width: 68%; }
.full-collage.scale-small  img { max-height: 50vh; max-width: 50%; }
.full-collage.scale-narrow img { max-height: 60vh; max-width: 40%; }

/* Paper-blend: darken blend mode + soft radial fade.
   For collages with stark white/paper edges. Darken eats any pixel
   lighter than the cream background, so anti-aliased edges and
   white margins dissolve completely. */
.full-collage.paper-blend img {
  mix-blend-mode: darken;
  filter: contrast(1.08) saturate(0.92) brightness(1.02);
  -webkit-mask-image: radial-gradient(ellipse 110% 105% at center, black 70%, transparent 100%);
          mask-image: radial-gradient(ellipse 110% 105% at center, black 70%, transparent 100%);
  opacity: 1;
}
@media (max-width: 720px) {
  .full-collage.scale-medium img,
  .full-collage.scale-full   img,
  .full-collage.scale-small  img,
  .full-collage.scale-narrow img { max-height: 70vh; max-width: 92%; }
}

/* ── Per-line poem styling: variable line-heights, em-dash, body-parts ── */
.poem .line {
  display: block;
  line-height: 1.7;
}
.poem .stanza {
  margin: 0 0 1.4em 0;
}
.poem .stanza .line:first-child { line-height: 1.85; }
.poem .stanza .line:last-child  { line-height: 2.0; padding-bottom: 0.05em; }
.poem .stanza:last-child { margin-bottom: 0; }

/* Punctum stanzas — single anchor lines that carry the stanza's weight */
.poem .stanza.punctum {
  margin: 1.6em 0 1.8em;
  padding-left: 0.6em;
}
.poem .stanza.punctum .line {
  font-style: italic;
  font-size: 1.08em;
  letter-spacing: 0.015em;
  color: var(--lavender-deep);
  line-height: 1.7;
}
.poem .line.punctum {
  font-style: italic;
  font-size: 1.06em;
  letter-spacing: 0.02em;
  color: var(--lavender-deep);
}

/* Em-dash that ends a line — let it breathe */
.poem .emdash {
  color: var(--lavender);
  letter-spacing: 0.18em;
  margin-left: 0.04em;
  margin-right: -0.18em;
  font-style: normal;
}

/* ── Breath: animated gaps that replace em-dashes.
   Each variant pulses width on a different cycle so the four breaths
   on the page never sync up — the page feels like several quiet
   inhales/exhales happening at once. ── */
.poem .breath {
  display: inline-block;
  vertical-align: baseline;
  white-space: pre;
  width: 0.5em;
}

/* Pull — between two words, both drift apart and come back. */
@keyframes breath-pull {
  0%, 100% { width: 0.6em; }
  50%      { width: 2.4em; }
}
.poem .breath.breath-pull { animation: breath-pull 11s ease-in-out infinite; width: 0.6em; }

/* Reach — at the end of a line; the line trails outward in a long arc. */
@keyframes breath-reach {
  0%, 100% { width: 0.4em; }
  50%      { width: 1.8em; }
}
.poem .breath.breath-reach { animation: breath-reach 13s ease-in-out infinite; width: 0.4em; }

/* Trail-quick — short held pause at end of line. */
@keyframes breath-trail-quick {
  0%, 100% { width: 0.4em; }
  50%      { width: 1.4em; }
}
.poem .breath.breath-trail-quick { animation: breath-trail-quick 8s ease-in-out infinite; width: 0.4em; animation-delay: -3s; }

/* Trail-held — longer held pause at end of line. */
@keyframes breath-trail-held {
  0%, 100% { width: 0.4em; }
  50%      { width: 2.0em; }
}
.poem .breath.breath-trail-held { animation: breath-trail-held 15s ease-in-out infinite; width: 0.4em; animation-delay: -6s; }

/* Punctum stanzas with .breathe — letter-spacing slowly opens out
   so the line itself stretches like an inhale, then settles. */
@keyframes punctum-breathe {
  0%, 100% { letter-spacing: 0.015em; }
  50%      { letter-spacing: 0.16em; }
}
.poem .stanza.punctum.breathe .line {
  animation: punctum-breathe 14s ease-in-out infinite;
  display: inline-block;
}

/* Spacious stanzas — looser line-height so reading feels less held. */
.poem .stanza.spacious { margin-bottom: 1.8em; }
.poem .stanza.spacious .line { line-height: 2.0; }

/* Crooked text — letters with very slight rotation + subtle WONK.
   Used on "crooked ones again". Tuned subtle so it whispers the
   theme rather than performing it. */
.crooked-text {
  font-variation-settings: "opsz" 60, "SOFT" 70, "WONK" 0.4;
  font-style: italic;
  display: inline-block;
}
.crooked-text > span {
  display: inline-block;
  transform-origin: 50% 80%;
}
.crooked-text > span:nth-child(1) { transform: rotate(-1.2deg) translateY(0.4px); }
.crooked-text > span:nth-child(2) { transform: rotate(0.8deg)  translateY(-0.4px); }
.crooked-text > span:nth-child(3) { transform: rotate(-0.6deg) translateY(0.2px); }
.crooked-text > span:nth-child(4) { transform: rotate(1deg)    translateY(-0.2px); }
.crooked-text > span:nth-child(5) { transform: rotate(-0.8deg) translateY(0.6px); }
.crooked-text > span:nth-child(6) { transform: rotate(0.4deg)  translateY(-0.2px); }
.crooked-text > span:nth-child(7) { transform: rotate(-1deg)   translateY(0.2px); }

/* Wavy line under the crooked-line — broken staff beneath the word. */
.crooked-line {
  position: relative;
  display: inline-block;
}
.crooked-line::after {
  content: "";
  position: absolute;
  left: 22%; right: -4%;
  bottom: -10px;
  height: 5px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 5' preserveAspectRatio='none'><path d='M0,2.5 Q5,0.5 10,2.5 T20,2.5 T30,2.5 T40,2.5 T50,2.5 T60,2.5' stroke='%237a6168' stroke-width='0.6' fill='none' opacity='0.55'/></svg>");
  background-repeat: repeat-x;
  background-size: 60px 5px;
  pointer-events: none;
}

/* humming — a soft vertical hum, like a held tone. */
@keyframes humming {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.6px); }
}
.humming {
  display: inline-block;
  animation: humming 4.5s ease-in-out infinite;
}

/* turning — slow rotational sway, two variants for paired repetition.
   The first leans one way, the second the other, so "i am already turning
   / am already turning" reads as a body that's already turned both ways. */
@keyframes turning-a {
  0%, 100% { transform: rotate(-1.4deg); }
  50%      { transform: rotate(1.2deg); }
}
@keyframes turning-b {
  0%, 100% { transform: rotate(1.1deg); }
  50%      { transform: rotate(-1.6deg); }
}
.poem .line.turning-a {
  display: inline-block;
  transform-origin: left center;
  animation: turning-a 9s ease-in-out infinite;
}
.poem .line.turning-b {
  display: inline-block;
  transform-origin: left center;
  animation: turning-b 11s ease-in-out infinite;
  animation-delay: -2s;
}

@media (prefers-reduced-motion: reduce) {
  .humming { animation: none !important; }
  .poem .line.turning-a, .poem .line.turning-b { animation: none !important; transform: none; }
}

/* word-breathe — single word with very subtle letter-spacing pulse. */
@keyframes word-breathe {
  0%, 100% { letter-spacing: 0.005em; }
  50%      { letter-spacing: 0.07em; }
}
.word-breathe {
  display: inline-block;
  animation: word-breathe 13s ease-in-out infinite;
  animation-delay: -4s;
}

/* Metallic — the word "metallic" gets a slow shine pass + a tiny drift.
   Gradient passes from ink through lavender and back; clipped to the
   text glyphs. Subtle suggestion of metal catching light. */
.metallic {
  display: inline-block;
  background: linear-gradient(
    105deg,
    var(--ink) 0%,
    var(--ink) 38%,
    var(--lavender) 50%,
    var(--ink) 62%,
    var(--ink) 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation:
    metallic-shine 11s ease-in-out infinite,
    metallic-drift 14s ease-in-out infinite;
}
@keyframes metallic-shine {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0 0; }
}
@keyframes metallic-drift {
  0%, 100% { transform: translateX(0) translateY(0); }
  50%      { transform: translateX(1.2px) translateY(-0.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .word-breathe { animation: none !important; letter-spacing: 0.005em; }
  .metallic {
    animation: none !important;
    background: none;
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .poem .breath { animation: none !important; width: 1em !important; }
  .poem .stanza.punctum.breathe .line { animation: none !important; letter-spacing: 0.015em; }
}

/* Body-part words highlighted as anchors */
.poem .bodypart {
  font-style: italic;
  color: var(--lavender-deep);
}

/* Lines that end without punctuation — hold a beat after them */
.poem .line.no-punct::after {
  content: "";
  display: inline-block;
  width: 1.4em;
}

/* ── Bridge stanza with marginalia collage ── */
.bridge-with-margin {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 40px;
  align-items: start;
  margin: 64px auto;
  max-width: 720px;
}
.bridge-with-margin .poem-bridge {
  margin: 0;
  max-width: none;
}
.bridge-margin .margin-collage img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  filter: contrast(0.95) saturate(0.9);
  opacity: 0.92;
}
@media (max-width: 720px) {
  .bridge-with-margin {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .bridge-margin .margin-collage img { max-width: 50%; }
}

/* ── Poem with collage as background ── */
.poem-with-bg {
  grid-column: 1 / -1;
  position: relative;
  margin: 80px 0;
  padding: 64px 24px;
  display: grid;
  place-items: center;
  min-height: 60vh;
}
.poem-bg-image {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.poem-bg-image img {
  width: auto;
  max-width: 70%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.22;
  mix-blend-mode: multiply;
  filter: contrast(0.9) saturate(0.85);
}
.poem-foreground {
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .poem-with-bg { padding: 40px 16px; min-height: 50vh; }
  .poem-bg-image img { max-width: 95%; opacity: 0.18; }
}

/* ── Held silence before the close ── */
.held-silence {
  grid-column: 1 / -1;
  min-height: 240px;
}
@media (max-width: 720px) {
  .held-silence { min-height: 140px; }
}

/* Final stanza on tu jamón gets a touch more breathing */
.final-stanza {
  margin-top: 0;
}
.final-stanza .stanza {
  margin-bottom: 1.8em;
}

/* Duration aside — small, right-aligned, off-center; reads as a marginal
   punctuation between the close of Limerence and the Waiting bridge. */
.duration-aside {
  grid-column: 1 / -1;
  margin: 64px 0 32px;
  display: flex;
  justify-content: flex-end;
}
.duration-aside img {
  width: 36%;
  max-height: 50vh;
  object-fit: contain;
  display: block;
  filter: contrast(0.96) saturate(0.95);
  mix-blend-mode: multiply;
}
@media (max-width: 720px) {
  .duration-aside { justify-content: center; }
  .duration-aside img { width: 70%; max-height: 40vh; }
}

/* ── Sheet-music atmosphere (tu jamón page only) ── */

/* Stave lines: 5-line groupings repeated down the viewport.
   Fixed positioning so the staves stay still while the work scrolls
   past them — like the page is sitting on music paper. Default mesh
   runs through the full page; .gutters-only confines to side margins. */
.staves {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  /* Five thin lines per staff, then a wide gap, then another staff. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 7px,
    rgba(61, 44, 61, 0.10) 7px,
    rgba(61, 44, 61, 0.10) 8px,
    transparent 8px,
    transparent 15px,
    rgba(61, 44, 61, 0.10) 15px,
    rgba(61, 44, 61, 0.10) 16px,
    transparent 16px,
    transparent 23px,
    rgba(61, 44, 61, 0.10) 23px,
    rgba(61, 44, 61, 0.10) 24px,
    transparent 24px,
    transparent 31px,
    rgba(61, 44, 61, 0.10) 31px,
    rgba(61, 44, 61, 0.10) 32px,
    transparent 32px,
    transparent 39px,
    rgba(61, 44, 61, 0.10) 39px,
    rgba(61, 44, 61, 0.10) 40px,
    transparent 40px,
    transparent 200px /* gap between staves */
  );
  background-size: 100% 240px;
  background-repeat: repeat;
}

/* Annotation marks — italic serif text, scattered like dynamic markings.
   Default: full mesh (atmospheric, runs across viewport).
   .gutters-only modifier confines them to side margins. */
.annotations {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

/* Gutters-only modifier — staves and annotations confined to left/right
   side gutters via mask, so text in the central column reads cleanly.
   Used on Sam's page; tu jamón's stays full-mesh. */
.staves.gutters-only,
.annotations.gutters-only {
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right,
    black 0%, black 13%,
    transparent 19%,
    transparent 81%,
    black 87%, black 100%
  );
          mask-image: linear-gradient(to right,
    black 0%, black 13%,
    transparent 19%,
    transparent 81%,
    black 87%, black 100%
  );
}
.ann {
  position: absolute;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0.30;
  letter-spacing: 0.01em;
  font-variation-settings: "opsz" 14, "SOFT" 50, "WONK" 0;
}
.ann i { font-style: italic; }
.ann.sym {
  font-family: serif;
  font-style: normal;
  font-size: 16px;
  opacity: 0.34;
  line-height: 1;
}
.ann.clef {
  font-family: serif;
  font-style: normal;
  font-size: 38px;
  opacity: 0.16;
  line-height: 1;
}

/* The whole swarm breathes together — one animation across the layer
   instead of per-mark, so compositor cost is constant regardless of count. */
@keyframes swarm-breath {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}
/* Note: animation kept for tu jamón's annotation density even though
   masking confines them to gutters. */
.annotations { animation: swarm-breath 14s ease-in-out infinite; }

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

@media (max-width: 720px) {
  /* Hide half the swarm on mobile so it doesn't crowd small screens */
  .ann:nth-child(2n) { display: none; }
  .ann { font-size: 10px; }
  .ann.sym { font-size: 14px; }
  .ann.clef { font-size: 28px; }
}

/* Drifting birds — drift across the full viewport (no mask). */
.birds {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* ── Page edge arrows — fixed left/right navigation between contributors.
   Subtle by default, brightens on hover. Hidden on touch devices since
   swipe handles it. */
.page-edge {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-soft);
  text-decoration: none;
  background: transparent;
  border-radius: 999px;
  opacity: 0.32;
  transition: opacity 0.35s ease, color 0.35s ease, background 0.35s ease, transform 0.35s ease;
  pointer-events: auto;
  user-select: none;
}
.page-edge:hover,
.page-edge:focus-visible {
  opacity: 1;
  color: var(--lavender-deep);
  background: rgba(255, 255, 255, 0.55);
  outline: none;
}
.page-edge-l {
  left: 14px;
}
.page-edge-r {
  right: 14px;
}
.page-edge-arrow {
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
}
.page-edge-name {
  font-style: italic;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.4s ease, opacity 0.35s ease 0.05s;
}
.page-edge:hover .page-edge-name,
.page-edge:focus-visible .page-edge-name {
  max-width: 200px;
  opacity: 1;
}
@media (max-width: 900px) {
  .page-edge-name { display: none; }
  .page-edge-l { left: 6px; }
  .page-edge-r { right: 6px; }
  .page-edge { padding: 12px 12px; }
}
@media (max-width: 720px) {
  .page-edge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-edge,
  .page-edge-name { transition: none; }
}

/* ── Nele — every capacity to choose. Long declarative lines preserved
   exactly as written, each as its own logical line with hanging indent
   so any unavoidable wrap reads as a continuation, not a new line.
   Title block follows the zine's standard work-head pattern so it
   reads in sync with the rest of the contributors. */
/* Back to the zine's serif register (Fraunces title + Newsreader body),
   now left-aligned per the screenshot. Hanging indent so any long line
   that wraps reads as a continuation, not a new line. */
.nele-poem {
  margin: 80px auto;
  max-width: 940px;
  padding: 0 16px;
}
.nele-poem-head {
  text-align: left;
  margin-bottom: 56px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.nele-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.nele-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4.8vw, 52px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 96, "SOFT" 50;
}
.nele-meta {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.nele-body {
  font-family: var(--body);
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.78;
  color: var(--ink);
  letter-spacing: 0.005em;
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
.nele-stanza {
  margin: 0 0 2em;
}
.nele-stanza:last-child {
  margin-bottom: 0;
}
.nele-line {
  display: block;
  padding-left: 1.4em;
  text-indent: -1.4em;
}
@media (max-width: 720px) {
  .nele-poem {
    margin: 56px auto;
  }
  .nele-poem-head {
    margin-bottom: 40px;
  }
  .nele-body {
    font-size: 17px;
    line-height: 1.72;
  }
  .nele-stanza {
    margin-bottom: 1.7em;
  }
  .nele-line {
    padding-left: 1.2em;
    text-indent: -1.2em;
  }
}

/* ── Eliza — side-by-side: Loop (left) + Psycho-Location drawing (right).
   The drawing is portrait, so cap its height so it doesn't tower over
   the prose column on tall viewports. */
.eliza-spread {
  align-items: center;
  margin: 56px 0 0;
}
.eliza-spread .spread-text {
  align-self: center;
}
.eliza-prose p {
  line-height: 1.78;
  font-size: clamp(17px, 1.55vw, 19px);
}
.eliza-prose p + p {
  margin-top: 1.2em;
}
.eliza-spread-image {
  display: flex;
  justify-content: center;
}
.eliza-spread-image img {
  max-height: 82vh;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: contrast(1.02) saturate(0.92);
}
@media (max-width: 900px) {
  .eliza-spread-image img { max-height: 74vh; }
}
@media (max-width: 720px) {
  .eliza-spread {
    gap: 40px;
  }
  .eliza-spread-image img { max-height: 64vh; }
}

/* ── Numbered fragment (Marie / mazarine.mirror) — the white space
   is part of the poem. Big quiet roman numeral as the only title,
   then a centered body block with white-space:pre-line so every
   newline and every &nbsp; in the source renders exactly. */
.poem-fragment {
  max-width: 680px;
  margin: 110px auto 0;
  padding: 0 12px;
}
.poem-fragment-num {
  font-family: var(--body);
  font-size: clamp(17px, 1.55vw, 20px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.3;
  text-align: left;
  text-transform: lowercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  margin: 0 0 36px;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.poem-fragment-body {
  font-family: var(--body);
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 2.05;
  color: var(--ink);
  white-space: pre-line;
  text-align: left;
  letter-spacing: 0.012em;
  margin: 0;
}
@media (max-width: 720px) {
  .poem-fragment {
    margin-top: 80px;
  }
  .poem-fragment-num {
    margin-bottom: 44px;
  }
  .poem-fragment-body {
    line-height: 1.95;
    font-size: 17px;
  }
}

/* ── Editorial poem block (Jared) — left-aligned editorial layout.
   Heavy uppercase italic title flush left; serif body in a wider
   measure so the long poetic lines fit on one visual row each.
   Per-line hanging indent so any unavoidable wrap reads as a
   continuation, not a new poem-line. */
.poem-work {
  margin: 110px auto 0;
  max-width: 760px;
  text-align: left;
  border: none !important;
  padding-top: 0 !important;
}
.poem-work .work-num {
  display: none;  /* no roman numeral — title carries the section */
}
.poem-work .work-title {
  max-width: none;
  margin: 0 0 44px;
  font-family: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(28px, 4.4vw, 50px);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: left;
}
.poem-work .work-title i,
.poem-work .work-title em {
  font-style: italic;
}
.poem-work .poem-body {
  max-width: 100%;
  margin: 0;
  font-family: var(--body);
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.62;
  color: var(--ink);
  text-align: left;
  letter-spacing: 0.005em;
}
.poem-work .poem-body .poem-stanza {
  margin: 0 0 1.6em;
}
.poem-work .poem-body .poem-stanza:last-child {
  margin-bottom: 0;
}
.poem-work .poem-body .poem-line {
  display: block;
  padding-left: 1.4em;
  text-indent: -1.4em;
}
.poem-work .poem-body em,
.poem-work .poem-body i {
  color: var(--ink);
  font-style: italic;
}
.poem-work .poem-body .poem-coda {
  margin-top: 2.4em;
}
@media (max-width: 820px) {
  .poem-work {
    max-width: none;
  }
}
@media (max-width: 720px) {
  .poem-work {
    margin-top: 80px;
  }
  .poem-work .work-title {
    margin-bottom: 32px;
  }
  .poem-work .poem-body {
    line-height: 1.6;
  }
  .poem-work .poem-body .poem-stanza {
    margin-bottom: 1.4em;
  }
}

/* ── Sam's page — responsive sizing for the named bridge segments ── */
.sam-opening {
  margin: 80px auto 0;
  font-style: italic;
  font-size: clamp(17px, 2.4vw, 22px);
  line-height: 1.7;
  max-width: 52ch;
}
.sam-punctum {
  margin: 0 auto;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.05;
  color: var(--lavender-deep);
  font-variation-settings: "opsz" 96, "SOFT" 60;
  padding: 0 12px;
}
.sam-realization {
  margin: 0 auto;
  max-width: 44ch;
  font-style: italic;
  font-size: clamp(18px, 2.6vw, 24px);
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 0 12px;
}
.sam-closing {
  margin: 0 auto;
  max-width: 50ch;
  font-style: italic;
  font-size: clamp(17px, 2.3vw, 21px);
  line-height: 1.7;
  color: var(--ink);
  padding: 0 12px;
}
@media (max-width: 720px) {
  .sam-opening, .sam-realization, .sam-closing {
    margin-left: 16px;
    margin-right: 16px;
  }
  .sam-punctum {
    line-height: 1.1;
  }
}

/* Prose pair — two paragraphs side-by-side, staggered like birds in flight. */
.prose-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  margin: 60px 0;
}
.prose-pair-l, .prose-pair-r {
  font-family: var(--body);
}
.prose-pair-l { transform: translateY(0); }
.prose-pair-r { transform: translateY(72px); }
.prose-pair p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 720px) {
  .prose-pair {
    grid-template-columns: 1fr;
    gap: 36px;
    margin: 36px 0;
  }
  .prose-pair-l, .prose-pair-r { transform: none; }
}
.bird {
  position: absolute;
  display: block;
  color: var(--ink-soft);
  opacity: 0;
  will-change: transform, opacity;
}
.bird svg { display: block; }

@keyframes bird-drift-rt {
  0%   { transform: translate3d(-12vw, 0, 0) rotate(-4deg); opacity: 0; }
  10%  { opacity: 0.34; }
  50%  { transform: translate3d(48vw, -3vh, 0) rotate(2deg); }
  90%  { opacity: 0.34; }
  100% { transform: translate3d(112vw, 1vh, 0) rotate(6deg); opacity: 0; }
}
@keyframes bird-drift-lt {
  0%   { transform: translate3d(112vw, 0, 0) rotate(4deg); opacity: 0; }
  10%  { opacity: 0.30; }
  50%  { transform: translate3d(50vw, 4vh, 0) rotate(-2deg); }
  90%  { opacity: 0.30; }
  100% { transform: translate3d(-12vw, -2vh, 0) rotate(-6deg); opacity: 0; }
}

/* Birds in pairs — each pair shares speed and direction; one leads
   the other by 4–7 seconds. Different pairs at different speeds and
   directions so the flock as a whole still feels varied. */

/* Birds paired close as couples — partner trails leader by ~2 seconds,
   so the two are almost wing-to-wing as they drift. */

/* Pair 1 — drift right, 95s */
.bird-1  { animation: bird-drift-rt  95s linear infinite; animation-delay: -10s; }
.bird-2  { animation: bird-drift-rt  95s linear infinite; animation-delay: -12s; }

/* Pair 2 — drift left, 110s */
.bird-3  { animation: bird-drift-lt 110s linear infinite; animation-delay: -42s; }
.bird-4  { animation: bird-drift-lt 110s linear infinite; animation-delay: -44s; }

/* Pair 3 — drift right, 105s */
.bird-5  { animation: bird-drift-rt 105s linear infinite; animation-delay: -65s; }
.bird-6  { animation: bird-drift-rt 105s linear infinite; animation-delay: -67s; }

/* Pair 4 — drift left, 120s */
.bird-7  { animation: bird-drift-lt 120s linear infinite; animation-delay: -25s; }
.bird-8  { animation: bird-drift-lt 120s linear infinite; animation-delay: -27s; }

/* Pair 5 — drift right, 100s */
.bird-9  { animation: bird-drift-rt 100s linear infinite; animation-delay: -80s; }
.bird-10 { animation: bird-drift-rt 100s linear infinite; animation-delay: -82s; }

/* Pair 6 — drift left, 95s */
.bird-11 { animation: bird-drift-lt  95s linear infinite; animation-delay: -12s; }
.bird-12 { animation: bird-drift-lt  95s linear infinite; animation-delay: -14s; }

/* Pair 7 — drift right, 115s */
.bird-13 { animation: bird-drift-rt 115s linear infinite; animation-delay: -55s; }
.bird-14 { animation: bird-drift-rt 115s linear infinite; animation-delay: -57s; }

/* Pair 8 — drift left, 108s */
.bird-15 { animation: bird-drift-lt 108s linear infinite; animation-delay: -38s; }
.bird-16 { animation: bird-drift-lt 108s linear infinite; animation-delay: -40s; }

/* Pair 9 — drift right, 100s */
.bird-17 { animation: bird-drift-rt 100s linear infinite; animation-delay: -22s; }
.bird-18 { animation: bird-drift-rt 100s linear infinite; animation-delay: -24s; }

/* Pair 10 — drift left, 125s */
.bird-19 { animation: bird-drift-lt 125s linear infinite; animation-delay: -70s; }
.bird-20 { animation: bird-drift-lt 125s linear infinite; animation-delay: -72s; }

@media (prefers-reduced-motion: reduce) {
  .bird { animation: none !important; opacity: 0; }
}

@media (max-width: 720px) {
  .ann { font-size: 11px; opacity: 0.28; }
  .ann.clef { font-size: 26px; }
  /* On mobile keep four pairs total — drop six pairs to lighten compositor load */
  .bird-3, .bird-4, .bird-7, .bird-8, .bird-11, .bird-12, .bird-13, .bird-14, .bird-19, .bird-20,
  .bird-15, .bird-16 { display: none; }
  .staves {
    background-size: 100% 200px;
  }
}

.section-rest {
  grid-column: 1 / -1;
  text-align: center;
  margin: 56px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.6em;
  color: var(--lavender);
  opacity: 0.55;
}

@media (max-width: 720px) {
  .spread { grid-template-columns: 1fr; gap: 32px; margin: 60px 0; }
  .spread-text .poem { font-size: 17px; }
  .poem-bridge { font-size: 18px; }
  .poem-section-title { margin: 60px 0 36px; }
}

/* ── Inline audio (within a chamber) ── */
.audio-inline {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--ink);
}
.audio-inline:hover {
  background: var(--ink);
  color: var(--paper);
}
.audio-inline:hover .audio-inline-meta { color: var(--blush); }
.audio-inline .play-glyph {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid currentColor;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 10px;
}
.audio-inline-title {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.2;
}
.audio-inline-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* ── Page-end transition: next contributor link, right-aligned ── */
.transition-out {
  grid-column: 1 / -1;
  margin-top: 200px;
  padding-top: 60px;
  border-top: 1px solid rgba(42,29,42,0.18);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.3s var(--ease);
  text-align: right;
}
.transition-out:hover { color: var(--lavender-deep); }
.transition-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
/* .transition-link is on the same <a> as .transition-out — no extra layout */
.transition-next-fig {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1;
  color: var(--lavender);
  transition: color .35s var(--ease), letter-spacing .35s var(--ease);
  display: inline-block;
  font-variation-settings: "opsz" 144;
}
.transition-out:hover .transition-next-fig {
  color: var(--ink);
  letter-spacing: 0.005em;
}
.transition-arrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-left: 12px;
  text-transform: lowercase;
}

/* ── Persistent footer player (drone bar) ── */
.drone {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--paper);
  border-top: 1px solid rgba(42,29,42,0.15);
  padding: 14px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  z-index: 40;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  backdrop-filter: blur(6px);
  background: rgba(236,226,215,0.92);
}
.drone-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.drone-c { display: flex; align-items: center; gap: 12px; }
.drone-r { display: flex; align-items: center; gap: 14px; justify-content: flex-end; min-width: 0; }
.drone-now {
  font-family: var(--body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drone-fig {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.drone-btn {
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  width: 30px; height: 30px;
  border-radius: 999px;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 10px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.drone-btn:hover { background: var(--ink); color: var(--paper); }
.drone-prog {
  flex: 1;
  height: 1px;
  background: rgba(42,29,42,0.2);
  position: relative;
  cursor: pointer;
  min-width: 80px;
}
.drone-prog-fill {
  position: absolute; inset: 0;
  width: 0%;
  background: var(--lavender);
  transition: width .1s linear;
}
.drone-time { font-size: 9px; color: var(--muted); white-space: nowrap; }

/* ── Index page (figures) ── */
.figures-stack {
  max-width: 1100px;
  margin: 0 auto;
  padding: 140px 32px 200px;
}
.figures-intro {
  font-family: var(--body);
  font-style: italic;
  font-size: 18px;
  color: var(--lavender-deep);
  max-width: 50ch;
  margin-bottom: 80px;
  line-height: 1.6;
}
.fig-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 28px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid rgba(42,29,42,0.1);
  text-decoration: none;
  color: var(--ink);
  transition: padding .35s var(--ease), color .25s var(--ease);
}
.fig-row:hover {
  padding-left: 24px;
  color: var(--lavender-deep);
}
.fig-row .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.fig-row .name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
.fig-row .blurb {
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  text-align: right;
  max-width: 36ch;
  line-height: 1.45;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.fig-row:hover .blurb { opacity: 1; }

/* ───────────────────────────────────────────────
   Landing — Contributor / Work Index
   ─────────────────────────────────────────────── */

.lal-hero {
  padding: 120px 32px 40px;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
.lal-hero-mark {
  grid-column: 1 / 4;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 22px;
}
.lal-hero-title {
  grid-column: 4 / 13;
  font-family: var(--typewriter);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-transform: lowercase;
}
.lal-hero-title .conj {
  display: block;
  font-family: var(--typewriter);
  font-weight: 400;
  font-size: 0.62em;
  letter-spacing: -0.02em;
  color: var(--lavender-deep);
  text-transform: lowercase;
  margin: -0.05em 0 -0.05em 0.18em;
  line-height: 1;
}
.lal-hero-title .word { display: block; }
.lal-hero-sub {
  grid-column: 4 / 11;
  margin-top: 32px;
  font-family: var(--body);
  font-style: italic;
  font-size: 18px;
  color: var(--lavender-deep);
  line-height: 1.6;
  max-width: 50ch;
}
.lal-hero-meta {
  grid-column: 4 / 13;
  margin-top: 28px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.lal-hero-meta a { color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }
.lal-hero-meta a:hover { color: var(--lavender); }

/* ── Two-column index ── */
.lal-index {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 32px 200px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: start;
}

/* Sticky preview pane (left on desktop) */
.lal-preview {
  position: sticky;
  top: 80px;
  align-self: start;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 40px 0 0;
}
.lal-preview-frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--paper-warm);
  border: 1px solid rgba(42,29,42,0.1);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  transition: opacity .35s var(--ease);
}
.lal-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 8%;
  mix-blend-mode: multiply;
  transition: opacity .35s var(--ease);
}
.lal-preview-frame .placeholder {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: 56px;
  color: var(--lavender);
  opacity: 0.55;
  text-align: center;
  line-height: 1;
  padding: 24px;
}
.lal-preview-meta {
  margin-top: 22px;
  min-height: 100px;
}
.lal-preview-by {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  transition: color .25s var(--ease);
}
.lal-preview-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 14px;
  transition: color .25s var(--ease);
  font-variation-settings: "opsz" 60, "SOFT" 50;
}
.lal-preview-desc {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 42ch;
  transition: color .25s var(--ease);
}
.lal-preview-cta {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lavender-deep);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.lal-index.has-preview .lal-preview-cta { opacity: 1; }

/* Right column — list of works grouped by contributor */
.lal-list { padding-top: 40px; }
.lal-list-group {
  margin-bottom: 64px;
}
.lal-list-group-head {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(42,29,42,0.18);
}
.lal-list-group-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}
.lal-list-group-name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  text-decoration: none;
  transition: color .2s var(--ease);
}
.lal-list-group-name:hover { color: var(--lavender-deep); }
.lal-list-group-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.lal-list-bio {
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 48ch;
}
.lal-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(42,29,42,0.08);
  text-decoration: none;
  color: var(--ink);
  transition: padding .3s var(--ease), color .25s var(--ease), background .25s var(--ease);
  cursor: pointer;
}
.lal-row:hover {
  padding-left: 18px;
  color: var(--lavender-deep);
}
.lal-row.is-active { color: var(--lavender-deep); padding-left: 18px; }
.lal-row .num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
}
.lal-row .title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  font-variation-settings: "opsz" 60, "SOFT" 40;
}
.lal-row .medium {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Contributor (single) page ── */
.contributor-bio {
  font-family: var(--body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 60px;
}

.work {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  margin-top: 200px;
  padding-top: 100px;
  border-top: none;
  position: relative;
}
.work:first-of-type { padding-top: 0; margin-top: 80px; }
/* a single centered · floats above each work as a quiet pause mark */
.work + .work::before {
  content: "·";
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.5em;
  color: var(--lavender);
  opacity: 0.5;
}
.work-num {
  grid-column: 1 / 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 10px;
}
.work-title {
  grid-column: 3 / 11;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 90, "SOFT" 70;
  margin-bottom: 14px;
}
.work-meta {
  grid-column: 3 / 11;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 36px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.work-body { grid-column: 3 / 11; }
.work-img-wide { grid-column: 2 / 12; }
.work-img-narrow { grid-column: 4 / 10; }
.work-img-full { grid-column: 1 / -1; }

/* ── Layout variants for .work — break the rigid left-aligned grid ── */

/* Indent right — content shifts toward the right side of the page */
.work.indent .work-num    { grid-column: 2 / 4; }
.work.indent .work-title  { grid-column: 4 / 12; }
.work.indent .work-meta   { grid-column: 4 / 12; }
.work.indent .work-body   { grid-column: 4 / 12; }

/* Narrow — tighter central column for prose intimacy or short pieces.
   Avoid for poems with long lines — use indent or default instead. */
.work.narrow .work-num    { grid-column: 2 / 4; }
.work.narrow .work-title  { grid-column: 3 / 10; }
.work.narrow .work-meta   { grid-column: 3 / 10; }
.work.narrow .work-body   { grid-column: 3 / 10; }

/* Wide — expansive column for long-line poems that need room */
.work.wide .work-num    { grid-column: 1 / 3; }
.work.wide .work-title  { grid-column: 3 / 13; }
.work.wide .work-meta   { grid-column: 3 / 13; }
.work.wide .work-body   { grid-column: 3 / 13; }

/* Hero — work-num + title centered, body in centered column.
   Body max-width set wider (72ch) so poems with long lines aren't forced
   to wrap. Override via inline style for individual works that need more. */
.work.hero .work-num    { grid-column: 1 / -1; padding-top: 0; margin-bottom: 12px; text-align: center; }
.work.hero .work-title  { grid-column: 1 / -1; text-align: center; max-width: none; }
.work.hero .work-meta   { grid-column: 1 / -1; justify-content: center; }
.work.hero .work-body   { grid-column: 1 / -1; max-width: 72ch; margin: 0 auto; }

/* Right-aligned — work-num pushed to right, title right-aligned,
   body in a column on the right side */
.work.right .work-num    { grid-column: 10 / 12; padding-top: 10px; text-align: right; }
.work.right .work-title  { grid-column: 3 / 12; text-align: right; }
.work.right .work-meta   { grid-column: 3 / 12; justify-content: flex-end; }
.work.right .work-body   { grid-column: 4 / 12; }

@media (max-width: 720px) {
  .work.indent .work-num,    .work.indent .work-title,
  .work.indent .work-meta,   .work.indent .work-body,
  .work.narrow .work-num,    .work.narrow .work-title,
  .work.narrow .work-meta,   .work.narrow .work-body,
  .work.wide .work-num,      .work.wide .work-title,
  .work.wide .work-meta,     .work.wide .work-body,
  .work.hero .work-num,      .work.hero .work-title,
  .work.hero .work-meta,     .work.hero .work-body,
  .work.right .work-num,     .work.right .work-title,
  .work.right .work-meta,    .work.right .work-body {
    grid-column: 1 / -1;
    text-align: left;
    justify-content: flex-start;
    margin: 0 0 1em 0;
  }
  .work.hero .work-meta { justify-content: flex-start; }
}

/* Held silence variant for between works on contributor pages */
.work-rest {
  grid-column: 1 / -1;
  min-height: 80px;
}
.work-rest.long { min-height: 200px; }

/* Forthcoming marker — for works whose text isn't yet cleared
   for publication. Sits where the body would, quiet but visible. */
.forthcoming-mark {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lavender-deep);
  border-left: 2px solid var(--lavender);
  padding: 12px 0 12px 16px;
  margin: 0;
  opacity: 0.85;
}

/* Listen-link — quiet outbound link to a streaming track */
.listen-link {
  margin: 18px 0 0 0;
  padding: 0 0 0 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.listen-link a {
  color: var(--lavender-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 110, 138, 0.25);
  padding-bottom: 1px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.listen-link a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ── Helpers for multi-movement poems ── */

/* Movement opener — sets a tinted italic header above each section
   without breaking pre-line whitespace flow. */
.poem .movement-opener {
  display: block;
  font-style: italic;
  color: var(--lavender-deep);
  margin-bottom: 0.4em;
  font-size: 1.05em;
}

/* Inline poem-rest separator — works inside any container. */
.poem-rest {
  display: block;
  text-align: center;
  margin: 56px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.6em;
  color: var(--lavender);
  opacity: 0.55;
}
.poem-rest.larger { font-size: 13px; margin: 72px 0; opacity: 0.65; }

/* ── Persistent contributor nav — prev/next arrows in top bar ── */
.lal-bar .nav-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 0 8px;
  transition: color 0.2s var(--ease);
  pointer-events: auto;
}
.lal-bar .nav-arrow:hover { color: var(--ink); }
.lal-bar .nav-arrow .arrow { font-size: 14px; line-height: 1; }
.lal-bar .nav-arrow .nav-name {
  font-family: var(--body);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  opacity: 0.75;
}
.lal-bar .nav-arrow:hover .nav-name { opacity: 1; }
.lal-bar .nav-c {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}
.lal-bar .nav-c .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 720px) {
  .lal-bar .nav-arrow .nav-name { display: none; }
  .lal-bar .nav-c { gap: 8px; }
  .lal-bar .nav-c .label { font-size: 9px; }
}

/* ── Colophon ── */
.col-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
.col-h {
  grid-column: 1 / 5;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.col-c {
  grid-column: 5 / 13;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 50px;
}
.col-c em { color: var(--ink); }

/* ── Responsive ── */
@media (max-width: 720px) {
  .chamber { padding: 100px 20px 200px; }
  .threshold-num { grid-column: 1 / -1; margin-bottom: 12px; }
  .threshold-fig { grid-column: 1 / -1; font-size: clamp(46px, 14vw, 96px); }
  .threshold-fr  { grid-column: 1 / -1; }
  .threshold-def { grid-column: 1 / -1; font-size: 17px; }
  .threshold-cite { grid-column: 1 / -1; }

  .block, .block-wide, .block-narrow,
  .block-half-l, .block-half-r { grid-column: 1 / -1; }

  .transition-label { grid-column: 1 / -1; padding-top: 0; margin-bottom: 14px; }
  .transition-link  { grid-column: 1 / -1; }

  .col-h { grid-column: 1 / -1; margin-bottom: 8px; }
  .col-c { grid-column: 1 / -1; }

  .fig-row { grid-template-columns: 40px 1fr; gap: 18px; }
  .fig-row .blurb { display: none; }

  .lal-hero { padding: 80px 20px 24px; }
  .lal-hero-mark { grid-column: 1 / -1; padding-top: 0; margin-bottom: 18px; }
  .lal-hero-title {
    grid-column: 1 / -1;
    font-size: clamp(30px, 9.4vw, 56px);
    line-height: 0.98;
    letter-spacing: -0.01em;
  }
  .lal-hero-title .conj {
    font-size: 0.62em;
    margin: 0.02em 0 0.02em 0.18em;
  }
  .lal-hero-sub { grid-column: 1 / -1; font-size: 15px; margin-top: 24px; }
  .lal-hero-meta { grid-column: 1 / -1; gap: 14px 18px; margin-top: 22px; }

  .lal-index {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 30px 20px 200px;
  }
  .lal-preview { display: none; }

  .lal-list { padding-top: 0; }
  .lal-list-group-head { grid-template-columns: 30px 1fr; }
  .lal-list-group-tag { grid-column: 1 / -1; padding-top: 4px; }
  .lal-list-group-name { font-size: 32px; }
  .lal-row { grid-template-columns: 28px 1fr; }
  .lal-row .medium { grid-column: 2; padding-top: 4px; font-size: 8px; }
  .lal-row .title { font-size: 19px; }

  .work { grid-template-columns: repeat(6, 1fr); margin-top: 70px; padding-top: 40px; }
  .work-num { grid-column: 1 / -1; padding-top: 0; margin-bottom: 6px; }
  .work-title { grid-column: 1 / -1; font-size: clamp(28px, 8vw, 44px); }
  .work-meta { grid-column: 1 / -1; gap: 14px; }
  .work-body { grid-column: 1 / -1; }
  .work-img-wide, .work-img-narrow { grid-column: 1 / -1; }

  .lal-bar { padding: 14px 18px; font-size: 9px; }
  .lal-bar .c { display: none; }

  .idx-pin { right: 16px; bottom: 88px; }

  .drone {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px 14px;
    padding: 10px 16px;
  }
  .drone-c { grid-column: 1 / -1; grid-row: 2; }
  .drone-r { display: none; }
}