/* ============================================================
   mycelium.lu  ·  Katy Fox, Ph.D.   (static5)

   Palette (146b "Wildebeest"):
     clay   #DCC6BF  ground (also the original hero colour)
     navy   #153653  ink, and the indigo of the dyed section
     red    #C63E45  accent: the thread, numerals, hovers
   Edges are cut, never rounded, like katagami stencils.
   Type: Baskervville (closest free cut to the original
   site's Mrs Eaves) for display, Karla for text and UI.
   Both self-hosted in assets/fonts.
   ============================================================ */

/* ── FONTS: self-hosted (no requests to Google, GDPR-friendly).
   Latin subset of the variable fonts, which covers everything on
   the page including the Luxembourgish "Äerdschëff". ─────────── */

@font-face {
  font-family: "Baskervville";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/baskervville-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baskervville";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/baskervville-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/karla-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --clay:       #dcc6bf;
  --clay-light: #e8dad5;
  --clay-deep:  #cfb5ad;
  --navy:       #153653;
  --navy-deep:  #0e2740;
  --navy-soft:  #34495f;   /* body copy on clay, 5.8:1 */
  --red:        #c63e45;
  --red-deep:   #a8323a;   /* red for small text on clay */
  --paper:      #f3ebe8;   /* text on navy */

  --font-display: "Baskervville", "Libre Baskerville", Georgia, serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1rem, 5vw, 4.5rem);
  --measure: 62ch;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--clay);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* paper grain, fixed so it never repaints on scroll */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

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

a { color: var(--navy); text-decoration: none; }

p a, li a {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 0.25s var(--ease);
}
p a:hover, li a:hover { color: var(--red-deep); }

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── NAV ── floats over the hero ──────────────────────────── */

.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.4rem var(--gutter);
  max-width: 1280px;
  margin: 0 auto;
}

.nav__brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  text-align: center;
}

.nav__links {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  list-style: none;
}
.nav__links--left { justify-content: flex-end; }
.nav__links--right { justify-content: flex-start; }

.nav__links a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-soft);
  transition: color 0.25s var(--ease);
}
.nav__links a:hover { color: var(--red-deep); }

/* ── HERO (shared) ────────────────────────────────────────── */
/* Measured from the original: 52px, weight 600, tracking 1em,
   line-height 1, white, lowercase, overhanging the portrait. */

:root {
  --poem-size: clamp(1.6rem, 3.1vw, 3.25rem);
  --poem-tracking: 1em;
  --poem-leading: 1;
  --hero-w: min(600px, 72vw);
  --hero-h: min(80vh, 800px, 96vw);
  --hm-h: min(74vh, 800px, 96vw);
  --hm-y: 53%;
}

.hero {
  position: relative;
  z-index: 1;
  background: var(--clay);
  overflow: clip;
}

.hero__poem {
  position: absolute;
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--poem-size);
  line-height: var(--poem-leading);
  letter-spacing: var(--poem-tracking);
  color: #fff;
  text-align: center;
  text-transform: lowercase;
  white-space: nowrap;
  pointer-events: none;
}

/* each original line is its own span: block on wide screens
   (reproduces the original breaks), inline on small ones */
.hero__poem .l { display: block; }

/* ── HERO · ORIGINAL ── image scrolls with the page, the poem
   rises faster across it (main.js). Static without JS. ───── */

.hero--classic {
  padding: calc(4.6rem + 3vh) 0 clamp(3rem, 9vh, 6rem);
}

.hero--classic .hero__stage {
  position: relative;
  width: var(--hero-w);
  height: var(--hero-h);
  margin: 0 auto;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.hero--classic .hero__poem {
  top: 11%;
  /* wider than the portrait, so centre it by transform;
     the scroll motion uses the separate `translate` property */
  left: 50%;
  right: auto;
  margin: 0;
  transform: translateX(-50%);
  will-change: translate;
}

/* ── HERO · REIMAGINED ── see hero-motion.js ─────────────── */

.hero--motion {
  height: 100vh;
  height: 100svh;
  min-height: 560px;
}

.hm--live.hero--motion { height: 210vh; }

.hm__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.hm__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hm__mycel { will-change: opacity, transform; }

.hm__figure {
  position: absolute;
  left: 50%;
  top: var(--hm-y);
  width: var(--hero-w);
  height: var(--hm-h);
  transform: translate(-50%, -50%);
  will-change: transform;
}

.hm__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* The stencil cut: two clay panels part from the middle. The photo
   itself is painted at once (never clipped or transparent), so it
   counts as the Largest Contentful Paint as soon as it loads.
   --cover goes 1 -> 0, driven by hero-motion.js. */
@property --cover {
  syntax: "<number>";
  inherits: true;   /* the two panels (pseudo-elements) must see it */
  initial-value: 0;
}
.hm__figure::before,
.hm__figure::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  height: calc(50% + 1px);
  background: var(--clay);
  transform: scaleY(var(--cover));
  pointer-events: none;
}
.hm__figure::before { top: -1px; transform-origin: top; }
.hm__figure::after { bottom: -1px; transform-origin: bottom; }

.js .hero--motion .hm__figure { --cover: 1; }

.hm__thread { pointer-events: none; z-index: 2; }

/* no flash before hero-motion.js splits the letters; if the
   script never runs, a CSS failsafe reveals everything at 2.5s */
.js .hero--motion:not(.hm--live) .hero__poem {
  opacity: 0;
  animation: hmFailsafe 0.6s 2.5s forwards;
}
.js .hero--motion:not(.hm--live) .hm__figure {
  animation: hmUncover 1.2s 2.5s var(--ease) forwards;
}
@keyframes hmFailsafe { to { opacity: 1; } }
@keyframes hmUncover { to { --cover: 0; } }

.hero--motion .hero__poem { top: calc(var(--hm-y) - var(--hm-h) * 0.39); z-index: 3; }

.hm--live .hero__poem .ch {
  display: inline-block;
  will-change: transform, opacity;
  opacity: 0;
}
.hm--live .hero__poem .w { white-space: nowrap; }

.hm__cap {
  position: absolute;
  z-index: 4;
  bottom: clamp(1rem, 3vh, 2rem);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-soft);
  transition: opacity 1.2s var(--ease);
}
/* fades in after the intro; visible from the start without JS */
.hm--live .hm__cap { opacity: 0; }
.hm--live.hm--ready .hm__cap { opacity: 1; }
.hm__cap--l { left: var(--gutter); }
.hm__cap a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 62, 69, 0.45);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hm__cap a:hover { color: var(--red-deep); border-color: var(--red); }
.hm__cap--r { right: var(--gutter); text-align: right; }
.hm__cap em {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1em;
  color: var(--red-deep);
}

/* ── MAIN rides over the hero ─────────────────────────────── */

main { position: relative; z-index: 2; background: var(--clay); }

/* the thread: a dashed stitch on the page's central axis */
.thread {
  width: 0;
  height: clamp(4.5rem, 11vh, 8rem);
  margin: 0 auto;
  border-left: 1px dashed var(--navy);
  opacity: 0.55;
  transform-origin: top;
}
.js .thread { transform: scaleY(0); transition: transform 1.4s var(--ease); }
.js .thread.in { transform: none; }

/* ── SECTION HEADS: a numeral knotted on the thread ───────── */

section { padding: clamp(3.5rem, 8vh, 6rem) 0; }

.sec-head { text-align: center; margin-bottom: clamp(2rem, 5vh, 3.2rem); }

.sec-num {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--red-deep);
  margin-bottom: 0.9rem;
}
.sec-num::before,
.sec-num::after {
  content: "";
  width: 2.2rem;
  border-top: 1px solid currentColor;
  opacity: 0.6;
}

.sec-head h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }

/* ── INTRO ────────────────────────────────────────────────── */

.intro { text-align: center; padding-top: 0; }

.intro .thread { margin-bottom: clamp(2.5rem, 6vh, 4rem); }

.intro__name {
  font-family: var(--font-display);
  line-height: 1.1;
  font-size: clamp(2.7rem, 5.4vw, 4.6rem);
  margin-bottom: 0.4rem;
}

.intro__role {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-bottom: 2.4rem;
}

.statement {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.7vw, 2.3rem);
  line-height: 1.45;
  max-width: 32ch;
  margin: 0 auto 2.8rem;
}
.statement em { color: var(--red-deep); }

/* ── BUTTONS / LINKS ──────────────────────────────────────── */

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }

.btn {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--navy);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.15s var(--ease);
}
.btn:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--navy); color: var(--paper); }

.textlink {
  display: inline-block;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--red);
  padding-bottom: 2px;
  transition: color 0.25s var(--ease);
}
.textlink:hover { color: var(--red-deep); }
.textlink + .textlink { margin-left: 1.6rem; }

/* ── WRITING + SPEAKING: balanced on the central seam ─────── */

.strands { padding-top: 0; }

.strands__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--gutter) * 2);
}
.strands__grid::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.4rem;
  bottom: 0.4rem;
  border-left: 1px dashed var(--navy);
  opacity: 0.55;
}

.strand { max-width: 44ch; }
.strand--writing { justify-self: end; text-align: right; }
.strand--speaking { justify-self: start; }
.strand h3 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); margin-bottom: 1.1rem; }
.strand p { margin-bottom: 1.1rem; color: var(--navy-soft); }
.strand p:last-of-type { margin-bottom: 1.6rem; }

/* ── GRAPHIC RECORDING ────────────────────────────────────── */

.lead {
  max-width: var(--measure);
  margin: 0 auto clamp(2.5rem, 6vh, 4.5rem);
}
.lead p { margin-bottom: 1.1rem; color: var(--navy-soft); }
.lead p strong { color: var(--navy); }

.lead p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.1em;
  line-height: 0.82;
  padding: 0.08em 0.12em 0 0;
  color: var(--red);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.4rem, 2.4vw, 2.2rem) clamp(0.8rem, 1.6vw, 1.4rem);
}

.gallery figure { display: flex; flex-direction: column; }

.gallery .frame {
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--navy);
  background: var(--clay-deep);
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.gallery figure:hover img { transform: scale(1.03); }

figcaption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--navy-soft);
}
figcaption b {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--red-deep);
  margin-right: 0.35em;
}

.g-1 { grid-column: span 7; } .g-1 .frame { aspect-ratio: 16 / 8; }
.g-2 { grid-column: span 5; } .g-2 .frame { aspect-ratio: 4 / 3.05; }
.g-3 { grid-column: span 5; } .g-3 .frame { aspect-ratio: 16 / 10.7; }
.g-4 { grid-column: span 7; } .g-4 .frame { aspect-ratio: 16 / 9; }
.g-5 { grid-column: span 8; } .g-5 .frame { aspect-ratio: 16 / 7; }
.g-6 { grid-column: span 4; } .g-6 .frame { aspect-ratio: 4 / 3.5; }

/* ── KATAZOME: the section about indigo dyeing is itself dyed ── */

.art {
  background: var(--navy);
  color: var(--paper);
  padding: clamp(2.5rem, 7vh, 5rem) 0 clamp(4rem, 10vh, 7rem);
}

/* the whole cloth, uncropped, laid out on the dyed ground */
.art__cloth {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.art__cloth img {
  width: 100%;
  height: auto;
  aspect-ratio: 980 / 365;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}
.art__cloth figcaption { color: rgba(243, 235, 232, 0.8); }
.art__cloth figcaption b { color: #f2a7aa; }

.art .sec-head { margin-top: clamp(3rem, 7vh, 5rem); }
.art .sec-num { color: #f2a7aa; }
.art__text { max-width: var(--measure); margin: 0 auto; }
.art p { margin-bottom: 1.1rem; color: var(--paper); opacity: 0.92; }

.art__terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2.2rem;
  list-style: none;
  margin: 2.6rem auto 0;
  padding-top: 1.8rem;
  border-top: 1px dashed rgba(243, 235, 232, 0.4);
  max-width: var(--measure);
  font-size: 0.86rem;
}
.art__terms li { text-align: center; }
.art__terms span {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: #f2a7aa;
}

/* ── PUBLICATIONS (on the page) ───────────────────────────── */

.pubs { background: var(--clay-light); }

.pubs__lede {
  text-align: center;
  color: var(--navy-soft);
  max-width: 52ch;
  margin: -1rem auto 2.2rem;
}

.pubs__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 0.4rem;
  max-width: 980px;
  margin: 0 auto clamp(2rem, 5vh, 3rem);
  padding: 0.6rem 0;
  border-top: 1px solid var(--navy);
  border-bottom: 1px solid var(--navy);
}

.pubs__tab {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-soft);
  background: none;
  border: 0;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.pubs__tab sup {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9em;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 0.15em;
  color: var(--red-deep);
}
.pubs__tab:hover { color: var(--navy); }
.pubs__tab[aria-selected="true"] { background: var(--navy); color: var(--paper); }
.pubs__tab[aria-selected="true"] sup { color: #f2a7aa; }

.pubs__panel { max-width: 880px; margin: 0 auto; }

.pub-section h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  margin-bottom: 1.4rem;
  text-align: center;
}
.pub-section > p {
  color: var(--navy-soft);
  max-width: 60ch;
  margin: -0.4rem auto 1.6rem;
  text-align: center;
  font-style: italic;
}

.pub-year {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem 2rem;
  padding: 1rem 0;
  border-top: 1px dashed rgba(21, 54, 83, 0.35);
}

.pub-year__label {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--red-deep);
  line-height: 1.5;
}

.pub-year ul { list-style: none; }
.pub-year li { margin-bottom: 0.8rem; }
.pub-year li:last-child { margin-bottom: 0; }
.pub-year em { font-family: var(--font-display); font-size: 1.04em; }

.pub-note {
  border: 1px solid var(--navy);
  padding: 1.4rem 1.6rem;
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
}

.pubs__pdf { text-align: center; margin-top: clamp(2rem, 5vh, 3rem); }

.js .pub-section { animation: pubIn 0.6s var(--ease); }
@keyframes pubIn { from { opacity: 0; transform: translateY(10px); } }

/* ── FOOTER / CONTACT ─────────────────────────────────────── */

.footer {
  position: relative;
  z-index: 2;
  background: var(--clay);
  padding: 0 0 2.5rem;
  text-align: center;
}
.footer .thread { margin-bottom: clamp(2.5rem, 6vh, 4rem); }

.footer__call {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 4.6vw, 3.8rem);
  line-height: 1.2;
  max-width: 18ch;
  margin: 0 auto 1.6rem;
}

.footer__mail {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  border-bottom: 1px solid var(--red);
  transition: color 0.25s var(--ease);
}
.footer__mail:hover { color: var(--red-deep); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin: clamp(3rem, 8vh, 5rem) 0 3.5rem;
  padding-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--navy);
}

.footer__col h3 {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-bottom: 0.9rem;
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 0.4rem; }
.footer__col a { text-decoration: none; }

.footer__legal { font-size: 0.8rem; color: var(--navy-soft); }

/* the maker's mark: a watermark, lighter than the ground itself */
.footer__credit {
  margin-top: 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.62);
}
.footer__credit a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.footer__credit a:hover { color: var(--navy-soft); }

/* ── REVEALS (JS only; without JS everything stays visible) ── */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* ── REDUCED MOTION ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js .thread { opacity: 1; transform: none; transition: none; }
  .js .thread { opacity: 0.55; }
  .gallery figure:hover img { transform: none; }
  .js .pub-section { animation: none; }
  .hm--live.hero--motion { height: 100vh; height: 100svh; }
  .hm__cap--r { display: none; }
}

/* ── MOBILE ───────────────────────────────────────────────── */

@media (max-width: 880px) {
  .nav {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 0.35rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .nav__brand { order: -1; }
  .nav__links--left, .nav__links--right { justify-content: center; flex-wrap: wrap; }

  /* the original phone setting (32px / 1.5) overflowed a 390px
     screen; same tracking, scaled so every line stays readable */
  :root {
    --poem-size: clamp(1.15rem, 5.6vw, 2rem);
    --poem-leading: 1.35;
    --hero-w: 78vw;
    --hero-h: min(104vw, 74vh);
  }
  .hero__poem {
    width: auto;
    left: 2vw;
    right: 2vw;
    white-space: normal;
  }
  .hero__poem .l { display: inline; }
  .hero--classic { padding-top: 8.4rem; }
  .hero--classic .hero__poem { left: calc(50% - 48vw); right: auto; width: 96vw; transform: none; top: 7%; }
  :root { --hm-y: 53%; --hm-h: min(104vw, 62vh); }

  .thread { height: 3.5rem; }

  .strands__grid { display: block; }
  .strands__grid::before { display: none; }
  .strand, .strand--writing { max-width: none; text-align: left; }
  .strand--speaking { margin-top: 3rem; }

  .gallery { grid-template-columns: 1fr; }
  .g-1, .g-2, .g-3, .g-4, .g-5, .g-6 { grid-column: auto; }

  .footer__cols { display: block; }
  .footer__col { margin-bottom: 2rem; }

  .pub-year { grid-template-columns: 1fr; gap: 0.3rem; }

  .hm__cap--r { display: none; }
  .hm__cap--l { left: 0; right: 0; text-align: center; }
}