/* ============================================================================
   styles.css — the Edward H. Crane memorial
   A pamphlet/monograph for the web: two inks on laid paper, a scholarly margin,
   one accent (oxblood) reserved for a few deliberate moments. Mobile-first.
   Content is fully visible without JS. Depends on tokens.css + fonts.css.
   ========================================================================== */

:root {
  /* derived: the life section's content block = margin rubric + reading measure */
  --content-w: calc(var(--rubric-w) + 3rem + var(--measure));
  --rail-w: 4.5rem;        /* collapsed width of the left navigation rail */
  --rail-w-open: 22rem;    /* expanded width on hover / focus */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(125% 80% at 50% -12%, rgba(255, 252, 244, 0.5), transparent 60%),
    radial-gradient(110% 60% at 50% 112%, rgba(34, 29, 23, 0.05), transparent 60%);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "onum" 1, "liga" 1, "kern" 1;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, blockquote, figure, ol, ul, cite { margin: 0; }
ol, ul { padding: 0; }
a { color: inherit; }
em { font-style: italic; }
strong { font-weight: 400; }            /* no faux bold — we have no bold serif */
.prose strong { font-style: italic; }  /* emphasis in running prose via italic */
::selection { background: var(--select); }
::-moz-selection { background: var(--select); }
:where(section[id]) { scroll-margin-top: 5rem; }
main#top { scroll-margin-top: 0; }

/* ---- Small caps utility (real smcp + c2sc; only ever on the serif) -------- */
.sc {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1, "liga" 1, "kern" 1;
  letter-spacing: 0.04em;
}

/* ---- Helpers -------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 46rem; }

/* ---- Ornament: flanked fleuron (reliable, real glyph) --------------------- */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.8rem, 2vw, 1.3rem);
  margin: clamp(1.5rem, 4vh, 2.5rem) auto;
}
.ornament::before, .ornament::after {
  content: ""; height: 1px; width: clamp(2.5rem, 12vw, 6rem);
  background: var(--rule-strong);
}
.ornament__mark { color: var(--oxblood); font-size: 1.15rem; line-height: 1; }

/* ---- Focus (visible, keyboard-friendly) ----------------------------------- */
:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; border-radius: 1px; }
a:focus-visible { outline-offset: 4px; }

/* ---- Skip link ------------------------------------------------------------ */
.skip-link {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; border-radius: 2px;
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

/* ---- Masthead ------------------------------------------------------------- */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.masthead.is-stuck { background: var(--paper); border-bottom-color: var(--rule); }
.masthead__nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--page-max); margin-inline: auto;
  padding: 0.8rem var(--gutter);
}
.masthead__home { font-size: 1.05rem; text-decoration: none; color: var(--ink); }
.masthead__index { display: flex; gap: clamp(0.9rem, 2.4vw, 1.9rem); list-style: none; }
.masthead__index a {
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-soft); padding: 0.5rem 0;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.masthead__index a:hover { color: var(--ink); }
.masthead__index a[aria-current="location"],
.masthead__index a[aria-current="page"] { color: var(--oxblood); border-bottom-color: var(--oxblood); }
@media (max-width: 40em) { .masthead { display: none; } } /* mobile uses the sticky .mobile-nav instead */

/* ---- Mobile-only section nav (sticky beneath the hero) -------------------- */
.mobile-nav { display: none; }
@media (max-width: 40em) {
  .mobile-nav {
    display: flex; gap: 1.6rem;
    position: sticky; top: 0; z-index: 49;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 0.7rem var(--gutter);
  }
  .mobile-nav::-webkit-scrollbar { display: none; }
  .mobile-nav a {
    flex: 0 0 auto;
    font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
    color: var(--ink-soft); padding: 0.2rem 0;
  }
  .mobile-nav a[aria-current="location"],
  .mobile-nav a[aria-current="page"] { color: var(--oxblood); }
  .mobile-nav__home {
    font-family: var(--serif) !important; text-transform: none !important;
    letter-spacing: 0.05em !important; color: var(--ink) !important;
    padding-right: 0.4rem; border-right: 1px solid var(--rule);
  }
}

/* ---- Hero: an engraved title page ----------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center;
  padding: clamp(5rem, 20vh, 11rem) var(--gutter) 5rem;
}
.hero__plate { width: 100%; max-width: 62rem; margin-block: auto; }
.hero__kicker {
  font-size: var(--fs-small); color: var(--oxblood);
  letter-spacing: 0.18em; margin-bottom: clamp(1.5rem, 4vh, 2.6rem);
}
.hero__name {
  font-weight: 400; font-size: var(--fs-hero); line-height: 0.98;
  letter-spacing: -0.01em; margin-bottom: clamp(0.9rem, 2.6vh, 1.6rem);
  text-rendering: geometricPrecision;
}
.hero__years {
  font-size: clamp(1.25rem, 1rem + 1.3vw, 1.9rem);
  color: var(--oxblood); letter-spacing: 0.06em; margin-bottom: 0.55rem;
  font-variant-numeric: lining-nums;
}
.hero__years-dash { margin: 0 0.28em; }
.hero__dates { font-size: var(--fs-small); color: var(--ink-soft); letter-spacing: 0.04em; }
.hero__dates .sc { font-feature-settings: "smcp" 1, "c2sc" 1, "lnum" 1, "tnum" 1, "kern" 1; }
.hero__dash { color: var(--oxblood); margin: 0 0.45em; }
.hero__ornament { margin-block: clamp(1.6rem, 4.5vh, 2.6rem); }
.hero__line {
  font-style: italic; font-size: var(--fs-lead); line-height: var(--lh-lead);
  max-width: 34rem; margin-inline: auto; text-wrap: balance;
}
.hero__scroll {
  position: absolute; bottom: clamp(1.1rem, 4vh, 2.2rem); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.55rem; min-height: 44px; padding: 0.4rem 1rem;
  text-decoration: none; color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease);
}
.hero__scroll:hover { color: var(--ink); }
.hero__scroll-label { font-size: var(--fs-small); letter-spacing: 0.12em; }
.hero__scroll-mark { width: 1px; height: 2rem; background: linear-gradient(var(--ink-soft), transparent); }
@media (max-height: 600px) { .hero__scroll { display: none; } } /* avoid overlap on short screens */

@media (max-width: 30em) {
  :root { --fs-hero: clamp(2rem, 7vw + 0.5rem, 2.6rem); }
  .hero__dates { font-size: 0.82rem; letter-spacing: 0.02em; }
  .hero { padding-inline: var(--s-5); }
}

/* ---- Section scaffolding -------------------------------------------------- */
.section { padding-block: var(--section-y); position: relative; }
.section--chronology, .section--closing { background: var(--paper-deep); }

.section__head {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  text-align: center; max-width: 40rem;
  margin: 0 auto clamp(2.2rem, 5vh, 3.6rem);
}
.eyebrow {
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft);
}
.section__title {
  font-weight: 400; font-size: var(--fs-h2); line-height: 1.1;
  letter-spacing: 0.01em; max-width: 22ch; text-wrap: pretty;
}

/* ---- Portrait (ready for a real photograph — see the figure in index.html) - */
.portrait { max-width: 22rem; margin: 0 auto clamp(2.5rem, 6vh, 4rem); }
.portrait img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule-strong);
  filter: grayscale(1) sepia(0.18) contrast(1.02) brightness(1.02); /* warm archival duotone */
}
.portrait__caption {
  margin-top: var(--s-3); text-align: center;
  font-family: var(--sans); font-size: var(--fs-meta); letter-spacing: 0.05em; color: var(--ink-soft);
}
.portrait__credit { display: block; margin-top: 0.2rem; }

/* ---- Spread: rubric (margin apparatus) + prose ---------------------------- */
.spread { max-width: var(--measure); margin: 0 auto var(--s-8); }
.spread:last-child { margin-bottom: 0; }
.rubric { margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.rubric__era { font-size: 1.05rem; color: var(--ink-soft); letter-spacing: 0; margin-bottom: 0.4rem; }
.rubric__meta {
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; line-height: 1.5;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.rubric__source { font-family: var(--sans); font-size: var(--fs-meta); line-height: 1.5; color: var(--ink-soft); }
.cite { font-style: italic; }

.prose { font-size: var(--fs-body); }
.prose p { max-width: var(--measure); margin-bottom: var(--s-5); text-wrap: pretty; hanging-punctuation: first; }
.prose p:last-child { margin-bottom: 0; }
.dropcap::first-letter {
  font-size: 2.9em; line-height: 0.86; float: left;
  margin: 0.02em 0.09em 0 -0.04em; color: var(--oxblood); font-style: normal;
}

@media (min-width: 64em) {
  .spread {
    display: grid; align-items: start;
    grid-template-columns: var(--rubric-w) minmax(0, var(--measure));
    gap: clamp(1.5rem, 4vw, 3rem);
    max-width: var(--content-w);
  }
  .rubric { text-align: right; border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
}
@media (max-width: 63.99em) {
  /* On narrow screens the margin note becomes a left-ruled annotation — read as
     scholarly apparatus, not a section header. */
  .rubric__source { display: none; }
  .rubric {
    margin-bottom: var(--s-4); padding: 0 0 0 var(--s-4);
    border-bottom: 0; border-left: 2px solid var(--oxblood);
  }
  .rubric__era { font-size: 0.92rem; color: var(--oxblood); margin-bottom: 0.15rem; }
  .rubric__meta { margin-bottom: 0; font-size: 0.72rem; }
}

/* ---- Chronology ----------------------------------------------------------- */
.chrono { max-width: 46rem; margin-inline: auto; list-style: none; }
.chrono__item {
  display: grid; grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2rem); align-items: baseline;
  padding: var(--s-4) 0; border-top: 1px solid var(--rule);
}
.chrono__item:last-child { border-bottom: 1px solid var(--rule); }
.chrono__item--major { border-top-color: var(--rule-strong); }
.chrono__year {
  font-size: 1.35rem; color: var(--ink-soft); letter-spacing: 0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.chrono__item--major .chrono__year { color: var(--oxblood); }
.chrono__item--major .chrono__event { font-style: italic; }
.chrono__event { font-size: var(--fs-body); max-width: 40rem; }
@media (max-width: 30em) { .chrono__item { grid-template-columns: 3.75rem 1fr; } }

/* ---- In his own words: epigraphs ------------------------------------------ */
.epigraphs {
  max-width: 46rem; margin-inline: auto;
  display: flex; flex-direction: column; gap: clamp(2.5rem, 7vh, 4.5rem);
}
.epigraph { text-align: center; }
.epigraph__text { font-size: var(--fs-quote); line-height: var(--lh-quote); text-wrap: balance; }
.epigraph--feature { padding-block: clamp(1.6rem, 4.5vh, 2.6rem); border-block: 1px solid var(--rule-strong); }
.epigraph--feature .epigraph__text { font-size: clamp(2rem, 1.45rem + 2.4vw, 3.2rem); line-height: 1.18; }
.epigraph__source {
  display: block; margin-top: var(--s-4); font-style: normal;
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.epigraph__source .cite {
  text-transform: none; letter-spacing: 0; font-family: var(--serif);
  font-weight: 400; font-size: 1rem; color: var(--ink-soft);
}

/* ---- Remembrances --------------------------------------------------------- */
.tributes { display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 4vw, 2.8rem); max-width: 56rem; margin-inline: auto; }
.tribute { padding-top: var(--s-5); border-top: 1px solid var(--rule-strong); }
.tribute__quote p { font-style: italic; font-size: 1.32rem; line-height: 1.45; margin-bottom: var(--s-4); }
.tribute__by {
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.tribute__role { display: block; margin-top: 0.25rem; color: var(--ink-soft); letter-spacing: 0.08em; }
@media (min-width: 52em) { .tributes { grid-template-columns: repeat(3, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); } }

/* ---- Closing -------------------------------------------------------------- */
.section--closing { text-align: center; }
.closing__line {
  font-size: var(--fs-quote); line-height: 1.3; max-width: 32rem;
  margin: var(--s-6) auto; text-wrap: balance;
}
.closing__name { display: block; font-size: 1.1rem; letter-spacing: 0.10em; color: var(--oxblood); }

/* ---- Colophon ------------------------------------------------------------- */
.colophon { background: var(--paper-deep); border-top: 1px solid var(--rule); padding-block: clamp(2.5rem, 6vh, 4rem); }
.colophon__note {
  font-style: italic; font-size: var(--fs-small); color: var(--ink-soft);
  max-width: 40rem; margin: 0 auto var(--s-4); text-align: center;
}
.colophon__set {
  display: block; text-align: center; font-size: var(--fs-small);
  letter-spacing: 0.16em; color: var(--ink-soft);
  max-width: 26rem; margin: 0 auto; padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

/* ---- Motion: scroll reveal (only when JS is on) --------------------------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Hero load sequence */
.js .hero [data-rise] { opacity: 0; transform: translateY(16px); animation: rise var(--dur) var(--ease) forwards; }
.js .hero__kicker[data-rise] { animation-delay: 0.10s; }
.js .hero__name[data-rise]   { animation-delay: 0.24s; }
.js .hero__years[data-rise]  { animation-delay: 0.42s; }
.js .hero__dates[data-rise]  { animation-delay: 0.55s; }
.js .hero__ornament[data-rise] { animation-delay: 0.70s; }
.js .hero__line[data-rise]   { animation-delay: 0.85s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .hero [data-rise] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .skip-link, .masthead { transition: none; }
}

/* ===========================================================================
   SUBPAGES — Works (a reader) and Quotes (a commonplace book)
   Reuses all tokens, type, masthead, motion, and footer above.
   ========================================================================= */

/* ---- Shared subpage header ------------------------------------------------ */
.page-head {
  max-width: 46rem; margin-inline: auto; text-align: center;
  padding: clamp(6rem, 14vh, 9rem) var(--gutter) clamp(2rem, 5vh, 3rem);
}
.page-head__title {
  font-weight: 400; font-size: clamp(2.6rem, 1.9rem + 3vw, 4.5rem);
  line-height: 1.02; letter-spacing: -0.005em; text-rendering: geometricPrecision;
}
.page-head__lead {
  font-style: italic; font-size: var(--fs-lead); line-height: var(--lh-lead);
  color: var(--ink-soft); max-width: 34rem; margin: var(--s-4) auto 0; text-wrap: balance;
}
.page-head .ornament { margin-top: clamp(1.4rem, 4vh, 2.2rem); }

/* ---- Quotes: the commonplace book ----------------------------------------- */
.sayings { max-width: 44rem; margin-inline: auto; padding: 0 var(--gutter) var(--section-y); }
.saying { text-align: center; padding-block: clamp(2.6rem, 7vh, 5rem); }
.saying + .saying { border-top: 1px solid var(--rule); }
.saying__text { font-size: var(--fs-quote); line-height: 1.3; text-wrap: balance; }
.saying--feature .saying__text { font-size: clamp(2rem, 1.45rem + 2.4vw, 3.2rem); line-height: 1.16; }
.saying__source {
  display: block; margin-top: var(--s-5); font-style: normal;
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.saying__source .cite {
  text-transform: none; letter-spacing: 0; font-family: var(--serif);
  font-weight: 400; font-size: 1rem; color: var(--ink-soft);
}

/* ---- Works: the annotated reader ------------------------------------------ */
.reader { max-width: 52rem; margin-inline: auto; padding: 0 var(--gutter) var(--section-y); }
.reader__note {
  text-align: center; font-style: italic; font-size: var(--fs-small);
  color: var(--ink-soft); max-width: 40rem; margin: 0 auto clamp(2.5rem, 6vh, 4rem);
}
.reader__group { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.reader__group-title {
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--oxblood);
  margin-bottom: var(--s-4); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule-strong);
}
.work {
  display: grid; grid-template-columns: 4rem 1fr; gap: clamp(1rem, 3vw, 1.8rem);
  align-items: baseline; padding: var(--s-4) 0; border-top: 1px solid var(--rule);
}
.work:first-of-type { border-top: 0; }
.work__year {
  font-size: 1.05rem; color: var(--ink-soft);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.01em;
}
.work__title { font-size: 1.2rem; line-height: 1.25; }
.work__title a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.work__title a:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); }
.work__meta {
  font-family: var(--sans); font-size: var(--fs-meta); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 0.25rem;
}
.work__desc { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 0.35rem; max-width: 42rem; }
.work__tag { font-style: italic; color: var(--oxblood); }

/* ---- Return-to-memorial link (subpage footer) ----------------------------- */
.return { text-align: center; padding-bottom: var(--s-7); }
.return a {
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast);
}
.return a:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); }
@media (max-width: 30em) { .work { grid-template-columns: 3.25rem 1fr; } }

/* ===========================================================================
   LEFT NAVIGATION RAIL — translucent; expands on hover AND keyboard focus
   (CSS-only; real links; reduced-motion-safe; becomes a top bar on mobile)
   ========================================================================= */
.rail {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--rail-w);
  display: flex; flex-direction: column; align-items: stretch;
  padding-block: clamp(1rem, 3vh, 2rem);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border-right: 1px solid var(--rule);
  overflow: hidden;
  transition: width var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.rail:hover, .rail:focus-within { width: var(--rail-w-open); box-shadow: 0 0 50px rgba(34, 29, 23, 0.10); }

.rail__home { display: flex; align-items: center; min-height: 48px; text-decoration: none; margin-bottom: clamp(1rem, 4vh, 2.5rem); }
.rail__home-mark { flex: 0 0 var(--rail-w); text-align: center; font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.12em; color: var(--oxblood); }

.rail__list { list-style: none; margin: auto 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.rail__list a {
  display: flex; align-items: center; min-height: 48px; position: relative;
  text-decoration: none; color: var(--ink-soft); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.rail__list a:hover { color: var(--ink); }
.rail__num { flex: 0 0 var(--rail-w); text-align: center; font-family: var(--serif); font-size: 1rem; letter-spacing: 0.04em; color: var(--ink-soft); transition: color var(--dur-fast) var(--ease); }
.rail__label { font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.rail:hover .rail__label, .rail:focus-within .rail__label { opacity: 1; }
.rail__list a[aria-current="page"], .rail__list a[aria-current="page"] .rail__num { color: var(--oxblood); }
.rail__list a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 1.6rem; background: var(--oxblood); }

/* On desktop, content clears the collapsed rail; the rail overlays only while
   expanded — an intentional, momentary hover/focus state. */
@media (min-width: 48.01em) { body { padding-left: var(--rail-w); } }

/* Reduced motion: keep the expand on hover/focus, drop the animation. */
@media (prefers-reduced-motion: reduce) {
  .rail, .rail__label, .rail__num, .rail__list a { transition: none; }
}

/* Mobile: the rail degrades to a sticky top bar with labels always shown. */
@media (max-width: 48em) {
  .rail {
    position: sticky; inset: 0 0 auto 0; width: auto; height: auto;
    flex-direction: row; align-items: center;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 0.55rem var(--gutter); gap: 0 clamp(0.8rem, 3vw, 1.6rem);
    border-right: 0; border-bottom: 1px solid var(--rule);
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail:hover, .rail:focus-within { width: auto; box-shadow: none; }
  .rail__home { margin: 0; min-height: auto; }
  .rail__home-mark { flex: 0 0 auto; }
  .rail__list { flex-direction: row; margin: 0; gap: clamp(0.8rem, 3vw, 1.6rem); }
  .rail__list a { min-height: auto; }
  .rail__num { display: none; }
  .rail__label { opacity: 1; }
  .rail__list a[aria-current="page"]::before { display: none; }
}

/* ---- Landing (dedication) page -------------------------------------------- */
.landing {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(3.5rem, 9vh, 7rem) var(--gutter);
  max-width: 60rem; margin-inline: auto;
}
.landing__name { font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: clamp(2rem, 6vh, 3.5rem); }
.landing__quote { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem); line-height: 1.18; max-width: 18ch; margin: 0 auto; text-wrap: balance; }
.landing__attrib { display: block; margin-top: var(--s-5); font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); font-style: normal; }
.landing__attrib .cite { text-transform: none; letter-spacing: 0; font-family: var(--serif); font-size: 1rem; font-style: italic; }
.landing__photo { width: min(17rem, 70%); margin: clamp(2.5rem, 7vh, 4.5rem) auto 0; }
.landing__dedication { font-style: italic; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink); max-width: 32rem; margin: clamp(2.5rem, 7vh, 4.5rem) auto 0; text-wrap: pretty; }
.landing__sign { display: block; margin-top: var(--s-4); font-style: normal; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--oxblood); }

/* ---- Landing, redesigned: quote + years (left), figure (right) ------------ */
.lede {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(18rem, 30rem) 1fr; align-items: stretch;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 0 0 0 clamp(1.5rem, 5vw, 4rem);   /* no right/top/bottom padding: the figure bleeds to the edges */
}
.lede__col { align-self: center; padding-block: clamp(3rem, 8vh, 5rem); max-width: 30rem; }
.lede__kicker { font-family: var(--serif); font-size: var(--fs-small); color: var(--oxblood); letter-spacing: 0.18em; margin-bottom: clamp(0.9rem, 3vh, 1.5rem); }
.lede__name { font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem); line-height: 1.1; letter-spacing: 0.005em; }
.lede__years { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); color: var(--oxblood); letter-spacing: 0.05em; line-height: 1; margin: 0.4rem 0 clamp(1.4rem, 4vh, 2.4rem); font-variant-numeric: lining-nums; }
.lede__quote { font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.2rem); line-height: 1.28; text-wrap: balance; max-width: 22ch; }
.lede__attrib { display: block; margin-top: var(--s-4); font-style: normal; font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.lede__attrib .cite { text-transform: none; letter-spacing: 0; font-family: var(--serif); font-style: italic; font-size: 1rem; }
.lede__figure { align-self: stretch; min-height: 100svh; overflow: hidden; }
.lede__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.04); }
.lede__cue {
  position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 2rem); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft); transition: color var(--dur-fast) var(--ease);
}
.lede__cue:hover { color: var(--oxblood); }

.dedication { background: var(--paper-deep); border-top: 1px solid var(--rule); padding-block: clamp(4rem, 14vh, 9rem); }
.dedication .wrap--narrow { text-align: center; }
.dedication__text { font-style: italic; font-size: var(--fs-quote); line-height: 1.4; color: var(--ink); max-width: 34rem; margin: 0 auto; text-wrap: pretty; }
.dedication__sign { display: block; margin-top: var(--s-5); font-style: normal; font-size: 1.1rem; letter-spacing: 0.05em; color: var(--oxblood); }

@media (max-width: 48em) {
  /* Side padding lives on the text column so the portrait can run edge to edge. */
  .lede { grid-template-columns: 1fr; min-height: auto; align-items: start; gap: clamp(1.5rem, 5vh, 2.5rem); padding: clamp(2rem, 6vh, 3rem) 0; }
  .lede__col { align-self: start; padding-block: 0; padding-inline: clamp(1.25rem, 5vw, 2rem); }
  .lede__figure { min-height: auto; overflow: visible; display: block; }
  .lede__figure img { width: 100%; height: auto; max-width: none; object-fit: contain; margin-inline: 0; }
  .lede__cue { display: none; }
}

/* ---- Photo / figure treatment (global B&W) -------------------------------- */
.photo, .photo--frame { margin: 0; }
.photo img, .photo--frame .photo__ph {
  width: 100%; display: block;
  filter: grayscale(1) contrast(1.04) brightness(1.01);  /* archival black & white */
}
.photo figcaption, .photo__caption {
  margin-top: var(--s-3); font-family: var(--sans); font-size: var(--fs-meta);
  letter-spacing: 0.05em; color: var(--ink-soft); text-align: center;
}
.photo__credit { display: block; margin-top: 0.15rem; }
.photo img { border: 1px solid var(--rule-strong); }
/* Placeholder frame used until a real B&W photograph is supplied. */
.photo__ph {
  aspect-ratio: 3 / 2; background: var(--paper-raised);
  border: 1px solid var(--rule-strong); position: relative;
  display: flex; align-items: center; justify-content: center; filter: none;
}
.photo__ph::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--rule); }
.photo__ph span { font-family: var(--sans); font-size: var(--fs-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

/* ---- Legacy (researched, cited prose) ------------------------------------- */
.legacy { max-width: 44rem; margin-inline: auto; padding: 0 var(--gutter) var(--section-y); }
.legacy__intro { font-style: italic; color: var(--ink-soft); font-size: var(--fs-small); max-width: 40rem; margin: 0 auto clamp(2.5rem, 6vh, 4rem); text-align: center; }
.legacy__group { margin-bottom: clamp(2.5rem, 7vh, 4.5rem); }
.legacy__h { font-size: var(--fs-h3); font-weight: 400; line-height: 1.2; margin-bottom: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule-strong); }
.legacy p { margin-bottom: var(--s-5); text-wrap: pretty; }
.legacy p:last-child { margin-bottom: 0; }
.legacy__sources { font-family: var(--sans); font-size: var(--fs-meta); letter-spacing: 0.04em; line-height: 1.5; color: var(--ink-soft); margin-top: var(--s-4); }
.note { background: var(--paper-deep); border-left: 3px solid var(--oxblood); padding: var(--s-5); margin: var(--s-7) auto 0; max-width: 44rem; }
.note__title { font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oxblood); margin-bottom: var(--s-3); }
.note ul { margin: 0; padding-left: 1.1rem; }
.note li { font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: 0.5rem; }
.note li:last-child { margin-bottom: 0; }
/* Bold category lead-ins for the kinds of fights his work shaped */
.fight-label { display: block; font-family: var(--sans); font-weight: 600; font-size: var(--fs-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--oxblood); margin-bottom: 0.4rem; }
.memory-coda { max-width: 40rem; margin: clamp(2.5rem, 6vh, 4rem) auto 0; text-align: center; }

/* ---- Landing photo gallery (scroll-snap + arrow control) ------------------ */
.gallery { border-top: 1px solid var(--rule); background: var(--paper); padding-block: clamp(3.5rem, 10vh, 6rem); text-align: center; }
.gallery .ornament { margin-bottom: var(--s-4); }
.gallery__title { font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 clamp(1.75rem, 5vh, 2.75rem); }
.gallery__viewport { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(0.5rem, 2.5vw, 1.75rem); max-width: 56rem; margin-inline: auto; }
.gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; list-style: none; margin: 0; padding: 0; -ms-overflow-style: none; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
.gallery__figure { margin: 0; }
.gallery__figure img {
  display: block; width: 100%; height: clamp(20rem, 56vh, 34rem);
  object-fit: contain; background: var(--paper-deep);
  border: 1px solid var(--rule-strong);
  filter: grayscale(1) contrast(1.04) brightness(1.01);  /* archival black & white */
}
.gallery__cap { margin-top: var(--s-3); font-family: var(--sans); font-size: var(--fs-meta); letter-spacing: 0.05em; color: var(--ink-soft); }
.gallery__arrow {
  display: none; width: clamp(2.5rem, 6vw, 3.25rem); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
  font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.js .gallery__arrow { display: inline-flex; }   /* arrows are a JS enhancement */
.gallery__arrow:hover { color: var(--oxblood); border-color: var(--oxblood); }
.gallery__arrow:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.gallery__arrow[aria-disabled="true"] { opacity: 0.28; pointer-events: none; }
.gallery__count { margin-top: var(--s-4); font-family: var(--sans); font-size: var(--fs-meta); letter-spacing: 0.14em; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .gallery__track { scroll-behavior: auto; } }