/* =========================================================================
   SUKHDEV THAPAR — A DIGITAL HISTORICAL ARCHIVE
   Design system: "Archive Reimagined"
   Ground: aged ivory paper. Ink typography. Copper + vermilion, used sparingly.
   ========================================================================= */

/* ---------- 1. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- 2. TOKENS ---------- */
:root {
  /* Palette */
  --ink:        #151515;
  --ink-soft:   #393735;
  --paper:      #F1EBDD;
  --paper-2:    #E8E1D1;
  --paper-3:    #DED6C3;
  --stone:      #B8B0A1;
  --copper:     #8A654A;
  --vermilion:  #9B2F24;

  /* Semantic */
  --bg:            var(--paper);
  --fg:            var(--ink);
  --fg-muted:      var(--ink-soft);
  --fg-faint:      #6C665E;
  --rule:          rgba(21, 21, 21, .16);
  --rule-strong:   rgba(21, 21, 21, .38);
  --surface:       var(--paper-2);
  --surface-deep:  var(--paper-3);

  /* Type */
  --display: "Bodoni Moda", "Didot", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-mega:  clamp(3.2rem, 13vw, 11rem);
  --t-xxl:   clamp(2.6rem, 7.4vw, 6rem);
  --t-xl:    clamp(2rem, 4.6vw, 3.5rem);
  --t-lg:    clamp(1.5rem, 2.9vw, 2.25rem);
  --t-md:    clamp(1.16rem, 1.5vw, 1.34rem);
  --t-base:  clamp(1.02rem, 1.06vw, 1.115rem);
  --t-sm:    .875rem;
  --t-xs:    .74rem;
  --t-label: .69rem;

  /* Space */
  --s-1: .35rem;  --s-2: .7rem;   --s-3: 1.1rem;  --s-4: 1.6rem;
  --s-5: 2.4rem;  --s-6: 3.4rem;  --s-7: 5rem;    --s-8: 7rem;
  --s-9: clamp(4.5rem, 11vw, 10.5rem);

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 68ch;
  --shell: 1640px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .55s;

  --nav-h: 58px;
}

/* Ink-inverted context (Martyrdom, Trial header, dark bands) */
.on-ink {
  --bg: var(--ink);
  --fg: var(--paper);
  --fg-muted: #B9B2A5;
  --fg-faint: #8B857B;
  --rule: rgba(241, 235, 221, .18);
  --rule-strong: rgba(241, 235, 221, .42);
  --surface: #1D1D1C;
  --surface-deep: #232322;
  background: var(--bg);
  color: var(--fg);
}

/* ---------- 3. BASE ---------- */
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* Paper grain — very subtle, sits above the background, below content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}
main, header, footer { position: relative; z-index: 1; }

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

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

.skip-link {
  position: absolute; left: var(--s-3); top: -100px;
  z-index: 999; padding: .7rem 1.1rem;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }

/* ---------- 4. TYPE PRIMITIVES ---------- */
.display, h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: -.015em; }
h4, h5, h6 { font-family: var(--sans); font-weight: 600; line-height: 1.25; }

.t-mega { font-size: var(--t-mega); line-height: .86; letter-spacing: -.035em; }
.t-xxl  { font-size: var(--t-xxl);  line-height: .95; letter-spacing: -.028em; }
.t-xl   { font-size: var(--t-xl);   line-height: 1.04; letter-spacing: -.02em; }
.t-lg   { font-size: var(--t-lg);   line-height: 1.14; }

/* Small caps metadata label */
.label {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 500;
  display: inline-block;
}
.label--copper { color: var(--copper); }
.label--verm   { color: var(--vermilion); }

.meta {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .09em;
  color: var(--fg-faint);
  line-height: 1.6;
}

.lede {
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 46ch;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.05em; }
.prose p { color: var(--fg-muted); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose h3 {
  font-size: var(--t-lg);
  margin: 2.2em 0 .55em;
  color: var(--fg);
}
.prose h4 {
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  margin: 2em 0 .5em; color: var(--fg);
}
.prose ul { margin: 1.1em 0; }
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .55em;
  color: var(--fg-muted);
}
.prose ul li::before {
  content: "";
  position: absolute; left: 0; top: .78em;
  width: .62rem; height: 1px; background: var(--copper);
}

/* Drop cap — used on the Life page only */
.dropcap::first-letter {
  font-family: var(--display);
  float: left;
  font-size: 4.6em;
  line-height: .78;
  padding: .06em .1em 0 0;
  color: var(--vermilion);
  font-weight: 500;
}

/* ---------- 5. LAYOUT ---------- */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--tight { max-width: 1120px; }
.section { padding-block: var(--s-9); }
.section--sm { padding-block: var(--s-7); }
.rule { height: 1px; background: var(--rule); border: 0; }
.rule--strong { background: var(--rule-strong); }

/* Section header: numbered editorial marker */
.sec-head {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--s-3);
  margin-bottom: var(--s-6);
}
.sec-head__num {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  color: var(--vermilion);
  padding-top: .45rem;
}
.sec-head__title { font-size: var(--t-xl); font-family: var(--display); letter-spacing: -.02em; }
.sec-head__sub { margin-top: var(--s-2); color: var(--fg-faint); max-width: 52ch; font-size: var(--t-sm); }

/* ---------- 6. IMAGE PLATES ----------
   Rule: historical portraits are never cropped. Every plate uses
   object-fit: contain inside an aspect-aware, padded frame.        */
.plate {
  position: relative;
  background: var(--surface-deep);
  padding: clamp(.6rem, 1.4vw, 1.1rem);
  border: 1px solid var(--rule);
}
.plate__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #CFC6B2;
  overflow: hidden;
}
.on-ink .plate__frame { background: #262624; }
.plate__frame picture { display: block; width: 100%; height: 100%; }
.plate__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* never crops a face */
  object-position: center;
  /* Archival monochrome treatment — presentation only, image is unmodified */
  filter: grayscale(1) contrast(1.04) brightness(1.02) sepia(.14);
  transition: filter 1.1s var(--ease), transform 1.1s var(--ease);
  transform: scale(1.008);
}
.plate:hover .plate__frame img,
.plate:focus-within .plate__frame img { filter: grayscale(.82) contrast(1.06) sepia(.1); transform: scale(1); }
.plate--duo .plate__frame img { filter: grayscale(1) contrast(1.08) sepia(.26) brightness(1.03); }
.plate--true .plate__frame img { filter: none; transform: none; }

.plate__caption {
  margin-top: var(--s-2);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem var(--s-3);
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--fg-faint);
  letter-spacing: .06em;
}
.plate__caption b { color: var(--fg-muted); font-weight: 500; }

/* Aspect helpers */
.ar-1-1   .plate__frame { aspect-ratio: 1 / 1; }
.ar-4-5   .plate__frame { aspect-ratio: 4 / 5; }
.ar-3-4   .plate__frame { aspect-ratio: 3 / 4; }
.ar-4-3   .plate__frame { aspect-ratio: 4 / 3; }
.ar-3-2   .plate__frame { aspect-ratio: 3 / 2; }
.ar-16-9  .plate__frame { aspect-ratio: 16 / 9; }

/* Corner registration marks on featured plates */
.plate--marks::before, .plate--marks::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border: 1px solid var(--rule-strong);
  pointer-events: none;
}
.plate--marks::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.plate--marks::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ---------- 7. NOTES / STAMPS / BOXES ---------- */
.note {
  border-left: 2px solid var(--copper);
  padding: .1rem 0 .1rem var(--s-3);
  font-size: var(--t-sm);
  color: var(--fg-faint);
  line-height: 1.62;
}
.note__k {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: .3rem;
}

.callout {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: clamp(1.1rem, 2.4vw, 1.9rem);
}
.callout--verm { border-left: 3px solid var(--vermilion); }

.stamp {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vermilion);
  border: 1px solid currentColor;
  padding: .34rem .7rem;
  transform: rotate(-1.6deg);
  opacity: .9;
}
.stamp--ink { color: var(--fg-faint); }
.stamp--copper { color: var(--copper); }

/* Evidence tags: separates fact from interpretation */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .26rem .55rem;
  border: 1px solid var(--rule-strong);
  color: var(--fg-muted);
  white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; flex: none; }
.tag--fact::before      { background: var(--copper); }
.tag--interp::before    { background: var(--stone); }
.tag--disputed::before  { background: var(--vermilion); }

/* ---------- 8. LINKS ---------- */
.link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--rule-strong);
  transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.link:hover { color: var(--vermilion); border-color: var(--vermilion); gap: 1rem; }
.link__arw { transition: transform .3s var(--ease); }
.link:hover .link__arw { transform: translateX(3px); }

.tlink {
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(var(--copper), var(--copper));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .35s var(--ease), color .35s var(--ease);
  padding-bottom: 1px;
  font-weight: 500;
}
.tlink:hover { color: var(--vermilion); background-image: linear-gradient(var(--vermilion), var(--vermilion)); }

/* Onward navigation pair at the foot of every page */
.onward {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.onward__a {
  background: var(--bg);
  padding: var(--s-5) var(--s-4);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: background .35s var(--ease);
}
.onward__a:hover { background: var(--surface); }
.onward__a .label { color: var(--vermilion); }
.onward__t { font-family: var(--display); font-size: var(--t-lg); }
.onward__d { font-size: var(--t-sm); color: var(--fg-faint); max-width: 40ch; }

/* =========================================================================
   9. NAVIGATION — top only. No side drawer, no footer link columns.
   ========================================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(241, 235, 221, .93);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav__bar {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.nav__mark {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  text-decoration: none;
  flex: none;
}
.nav__mark b {
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
}
.nav__mark span {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .2em;
  color: var(--vermilion);
}
.nav__links { display: flex; align-items: center; gap: clamp(.5rem, 1.35vw, 1.5rem); }
.nav__link {
  position: relative;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-muted);
  padding: .45rem 0;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: .1rem;
  height: 1px; width: 100%;
  background: var(--vermilion);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s var(--ease);
}
.nav__link:hover { color: var(--fg); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--vermilion); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  background: none;
  border: 1px solid var(--rule-strong);
  padding: .4rem .7rem;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--fg);
}
.nav__toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; width: 13px; }
.nav__toggle-bars i { display: block; height: 1px; background: currentColor; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* Scroll progress hairline under the top bar */
.nav__progress {
  height: 2px;
  background: var(--vermilion);
  width: 0%;
  transition: width .12s linear;
}

@media (max-width: 1180px) {
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule-strong);
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s var(--ease);
  }
  .nav__links[data-open="true"] { max-height: 78vh; overflow-y: auto; }
  .nav__link {
    padding: 1rem var(--gutter);
    border-top: 1px solid var(--rule);
    font-size: var(--t-xs);
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { background: var(--surface); }
  .nav__toggle { display: inline-flex; }
}

/* =========================================================================
   10. FOOTER
   ========================================================================= */
.foot {
  background: var(--ink);
  color: var(--paper);
  --fg-faint: #8B857B;
  --rule: rgba(241, 235, 221, .16);
  padding-top: var(--s-7);
  position: relative;
  z-index: 1;
}
.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--s-6) var(--s-5);
  align-items: start;
  padding-bottom: var(--s-6);
}
.foot__word {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  line-height: .94;
  letter-spacing: -.03em;
}
.foot__word span { display: block; color: var(--stone); }
.foot__line { margin-top: var(--s-3); color: #A79F92; max-width: 42ch; font-size: var(--t-sm); }
.foot__contact { display: grid; gap: var(--s-3); }
.foot__row { display: grid; gap: .25rem; }
.foot__row .label { color: #8B857B; }
.foot__row a {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  text-decoration: none;
  color: var(--paper);
  width: fit-content;
  border-bottom: 1px solid rgba(241,235,221,.28);
  padding-bottom: 2px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
  word-break: break-word;
}
.foot__row a:hover { color: #E2A88C; border-color: #E2A88C; }

.foot__social { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: var(--s-2); }
.foot__soc {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(241,235,221,.24);
  color: #9E978B;
  background: none;
  cursor: not-allowed;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.foot__soc svg { width: 15px; height: 15px; fill: currentColor; }
.foot__soc:hover { color: var(--paper); border-color: rgba(241,235,221,.5); }
.foot__soc-note { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; color: #7C766D; margin-top: .55rem; max-width: 36ch; line-height: 1.7; }

.foot__bar {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .07em;
  color: #8B857B;
}
.foot__bar a { color: #C6BFB2; text-decoration: none; border-bottom: 1px solid rgba(241,235,221,.3); }
.foot__bar a:hover { color: var(--paper); border-color: var(--paper); }
@media (max-width: 860px) { .foot__top { grid-template-columns: 1fr; } }

/* =========================================================================
   11. PAGE MASTHEADS — each page announces itself differently
   ========================================================================= */
.mast { padding-block: clamp(3.2rem, 8vw, 6.5rem) var(--s-6); }
.mast__crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-faint);
  margin-bottom: var(--s-4);
}
.mast__crumb a { text-decoration: none; color: var(--fg-faint); border-bottom: 1px solid transparent; }
.mast__crumb a:hover { color: var(--vermilion); border-color: var(--vermilion); }
.mast__crumb i { font-style: normal; color: var(--stone); }
.mast__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-5); align-items: end; }
.mast__title { font-size: var(--t-xxl); }
.mast__meta { display: grid; gap: var(--s-2); padding-bottom: .4rem; }
.mast__meta dl { display: grid; grid-template-columns: 8.5rem 1fr; gap: .3rem var(--s-3); font-family: var(--mono); font-size: var(--t-xs); }
.mast__meta dt { color: var(--fg-faint); letter-spacing: .13em; text-transform: uppercase; }
.mast__meta dd { color: var(--fg-muted); }
@media (max-width: 900px) { .mast__grid { grid-template-columns: 1fr; align-items: start; } }

/* =========================================================================
   12. REVEAL MOTION
   ========================================================================= */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal][data-reveal="slow"] { transition-duration: 1.25s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .plate__frame img { transform: none !important; }
  .hscroll { scroll-behavior: auto; }
}

/* =========================================================================
   13. HOME — asymmetric opening: index rail / portrait plate / masthead
   ========================================================================= */
.opening {
  display: grid;
  grid-template-columns: minmax(120px, 168px) minmax(0, 1.02fr) minmax(0, 1.28fr);
  gap: clamp(1.4rem, 3.2vw, 3.4rem);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 4.6rem) clamp(3rem, 7vw, 6rem);
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
}
.rail { display: grid; gap: .1rem; border-top: 1px solid var(--rule-strong); padding-top: var(--s-3); align-self: stretch; align-content: start; }
.rail__k {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding: .52rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: .5rem;
}
.rail__k b { color: var(--fg); font-weight: 500; }
.rail__k:first-child { color: var(--vermilion); }

.opening__type { display: grid; gap: var(--s-3); }
.opening__title {
  font-family: var(--display);
  font-size: clamp(3rem, 8.6vw, 8.2rem);
  line-height: .84;
  letter-spacing: -.04em;
  font-weight: 500;
}
.opening__title span { display: block; }
.opening__title span:last-child { color: var(--copper); font-style: italic; font-weight: 400; }
.opening__claim {
  font-family: var(--display);
  font-size: clamp(1.18rem, 2.05vw, 1.72rem);
  line-height: 1.32;
  font-style: italic;
  color: var(--fg);
  max-width: 26ch;
  border-left: 2px solid var(--vermilion);
  padding-left: var(--s-3);
}
.opening__intro { font-size: var(--t-sm); color: var(--fg-muted); max-width: 44ch; }
.opening__actions { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-2); }

.openfile {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint);
}
.openfile__bar { position: relative; width: 74px; height: 1px; background: var(--rule-strong); overflow: hidden; }
.openfile__bar::after {
  content: ""; position: absolute; inset: 0;
  background: var(--vermilion);
  transform-origin: left;
  animation: sweep 3.4s var(--ease) infinite;
}
@keyframes sweep { 0% { transform: scaleX(0); } 55% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

@media (max-width: 1080px) {
  .opening { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); min-height: 0; }
  .opening__portrait { order: -1; max-width: 460px; }
  .rail { order: 3; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); display: grid; }
  .rail__k { border-bottom: 1px solid var(--rule); }
}

/* Split editorial block (Home §02) */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.6rem, 4vw, 4.5rem);
  align-items: start;
}
.split--tilt { align-items: center; }

/* Chronology — home §03 & §07 */
.chron { border-top: 1px solid var(--rule-strong); }
.chron__row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--s-3) var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
  align-items: start;
  transition: background .35s var(--ease), padding-left .35s var(--ease);
}
.chron__row:hover { background: var(--surface); }
.chron__yr {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--fg);
}
.chron__where { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--vermilion); padding-top: .5rem; }
.chron__body h3 { font-size: var(--t-md); font-family: var(--sans); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.chron__body p { margin-top: .45rem; color: var(--fg-muted); font-size: var(--t-sm); max-width: 62ch; }
.chron__why { margin-top: .7rem; }
@media (max-width: 780px) {
  .chron__row { grid-template-columns: 1fr; gap: var(--s-2); }
  .chron__where { padding-top: 0; }
}

/* Network cards — home §04 */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.people__c { background: var(--bg); padding: var(--s-4); display: grid; gap: .5rem; align-content: start; }
.people__c h3 { font-family: var(--display); font-size: 1.42rem; letter-spacing: -.01em; }
.people__c .meta { letter-spacing: .14em; text-transform: uppercase; }
.people__c p { font-size: var(--t-sm); color: var(--fg-muted); }
.people__c--self { background: var(--surface-deep); }

/* Big statistic / anchor numerals */
.anchors { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-5) var(--s-4); }
.anchor__n {
  font-family: var(--display);
  font-size: clamp(2.7rem, 6vw, 4.6rem);
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--fg);
}
.anchor__n em { font-style: normal; color: var(--vermilion); }
.anchor__l { margin-top: .5rem; font-size: var(--t-sm); color: var(--fg-muted); max-width: 30ch; }

/* Closing */
.closing { text-align: left; }
.closing__q {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -.025em;
  max-width: 20ch;
}
.closing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }

/* =========================================================================
   14. LIFE — long-form magazine with marginalia
   ========================================================================= */
.article { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, var(--measure)) ; gap: clamp(1.4rem, 4vw, 4.5rem); align-items: start; }
.article__margin { position: sticky; top: calc(var(--nav-h) + 1.6rem); display: grid; gap: var(--s-4); }
.article__body { min-width: 0; }
.era {
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--s-3);
  margin-top: var(--s-7);
}
.era:first-of-type { margin-top: 0; }
.era__yr {
  font-family: var(--display);
  font-size: clamp(3.4rem, 9vw, 7rem);
  line-height: .84;
  letter-spacing: -.045em;
  color: var(--stone);
  display: block;
  margin-bottom: .1em;
}
.era__t { font-size: var(--t-xl); margin-bottom: var(--s-3); }
@media (max-width: 1000px) {
  .article { grid-template-columns: 1fr; }
  .article__margin { position: static; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* =========================================================================
   15. REVOLUTIONARY JOURNEY — horizontal chronology strip
   ========================================================================= */
.hscroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 340px);
  gap: 1px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  background: var(--rule);
  border: 1px solid var(--rule);
  padding: 0;
  overscroll-behavior-x: contain;
}
.hscroll::-webkit-scrollbar { height: 5px; }
.hscroll::-webkit-scrollbar-track { background: var(--surface); }
.hscroll::-webkit-scrollbar-thumb { background: var(--stone); }
.station {
  background: var(--bg);
  scroll-snap-align: start;
  padding: var(--s-4);
  display: grid;
  gap: var(--s-2);
  align-content: start;
  min-height: 340px;
}
.station__n { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .2em; color: var(--vermilion); }
.station__yr { font-family: var(--display); font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; }
.station h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: .02em; line-height: 1.35; }
.station p { font-size: var(--t-sm); color: var(--fg-muted); }
.hscroll-ui { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); flex-wrap: wrap; }
.hbtn {
  width: 40px; height: 40px;
  border: 1px solid var(--rule-strong);
  background: none; cursor: pointer;
  display: grid; place-items: center;
  font-family: var(--mono);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.hbtn:hover { background: var(--ink); color: var(--paper); }
.hbtn:disabled { opacity: .3; cursor: default; }
.hbtn:disabled:hover { background: none; color: inherit; }
@media (max-width: 720px) {
  .hscroll { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; scroll-snap-type: none; }
  .station { min-height: 0; }
  .hscroll-ui { display: none; }
}

/* =========================================================================
   16. HSRA — network visualisation
   ========================================================================= */
.netwrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: var(--s-5); align-items: start; }
.net { background: var(--surface); border: 1px solid var(--rule); position: relative; }
.net svg { width: 100%; height: auto; display: block; }
.net .edge { stroke: var(--stone); stroke-width: 1; }
.net .edge--key { stroke: var(--copper); stroke-width: 1.6; stroke-dasharray: 3 3; }
.net .node { cursor: pointer; }
.net .node circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; transition: fill .3s var(--ease), stroke .3s var(--ease); }
.net .node text { font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: .09em; fill: var(--ink-soft); text-anchor: middle; text-transform: uppercase; pointer-events: none; }
.net .node:hover circle, .net .node:focus circle { fill: var(--copper); stroke: var(--copper); }
.net .node[aria-pressed="true"] circle { fill: var(--vermilion); stroke: var(--vermilion); }
.net .node[aria-pressed="true"] text { fill: var(--ink); font-weight: 600; }
.net .node--self circle { fill: var(--ink); stroke: var(--ink); }
.net .node--self text { fill: var(--paper); }
.net .node--self:hover circle { fill: var(--vermilion); stroke: var(--vermilion); }
.netpanel { border: 1px solid var(--rule); background: var(--bg); padding: var(--s-4); min-height: 260px; }
.netpanel h3 { font-family: var(--display); font-size: var(--t-lg); margin-bottom: .3rem; }
.netpanel p { font-size: var(--t-sm); color: var(--fg-muted); margin-top: .7rem; }
@media (max-width: 960px) { .netwrap { grid-template-columns: 1fr; } }

/* =========================================================================
   17. BHAGAT SINGH — dual comparative ledger with a shared date spine
   ========================================================================= */
.ledger { border-top: 1px solid var(--rule-strong); }
.ledger__head, .ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 9.5rem) minmax(0, 1fr);
  gap: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.ledger__head { padding-block: var(--s-2); background: var(--surface-deep); }
.ledger__head span { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; padding-inline: var(--s-3); }
.ledger__head span:nth-child(2) { text-align: center; color: var(--vermilion); }
.ledger__row { padding-block: var(--s-4); align-items: start; }
.ledger__row:hover { background: var(--surface); }
.ledger__c { padding-inline: var(--s-3); font-size: var(--t-sm); color: var(--fg-muted); }
.ledger__c h3 { font-family: var(--sans); font-size: .97rem; font-weight: 700; color: var(--fg); margin-bottom: .35rem; line-height: 1.35; }
.ledger__spine {
  text-align: center;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--fg);
  border-inline: 1px solid var(--rule);
  padding-inline: .6rem;
  align-self: stretch;
  display: grid; place-content: center start;
  justify-items: center;
}
.ledger__spine b { display: block; font-family: var(--display); font-size: 1.35rem; letter-spacing: -.01em; }
@media (max-width: 900px) {
  .ledger__head { display: none; }
  .ledger__row { grid-template-columns: 1fr; padding-block: var(--s-4); }
  .ledger__spine { border: 0; border-bottom: 1px solid var(--rule); padding: 0 var(--s-3) .6rem; justify-items: start; text-align: left; }
  .ledger__c::before {
    content: attr(data-who);
    display: block;
    font-family: var(--mono); font-size: var(--t-label);
    letter-spacing: .2em; text-transform: uppercase; color: var(--vermilion);
    margin-bottom: .4rem;
  }
}

/* =========================================================================
   18. RAJGURU — layered strata
   ========================================================================= */
.strata { display: grid; gap: var(--s-5); }
.stratum {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: clamp(1.3rem, 3vw, 2.4rem);
  position: relative;
}
.stratum:nth-child(1) { margin-right: clamp(0rem, 9vw, 8rem); }
.stratum:nth-child(2) { margin-left: clamp(0rem, 5vw, 4.5rem); background: var(--bg); }
.stratum:nth-child(3) { margin-right: clamp(0rem, 4vw, 3.5rem); background: var(--surface-deep); }
.stratum:nth-child(4) { margin-left: clamp(0rem, 10vw, 9rem); background: var(--bg); }
.stratum__i { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: .85; color: var(--stone); letter-spacing: -.04em; }
.stratum h3 { font-size: var(--t-lg); margin-bottom: .6rem; }
.stratum p { color: var(--fg-muted); font-size: var(--t-sm); max-width: 62ch; }
.stratum p + p { margin-top: .8em; }
@media (max-width: 760px) {
  .stratum { grid-template-columns: 1fr; margin: 0 !important; }
}

/* =========================================================================
   19. ASSEMBLY — newspaper composition
   ========================================================================= */
.gazette { border: 1px solid var(--rule-strong); background: var(--surface); padding: clamp(1.1rem, 3vw, 2.6rem); }
.gazette__mast {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--s-2) var(--s-4);
  border-bottom: 3px double var(--rule-strong);
  padding-bottom: var(--s-2);
}
.gazette__mast b { font-family: var(--display); font-size: clamp(1.3rem, 3.2vw, 2.1rem); letter-spacing: .02em; }
.gazette__hed {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: var(--s-4) 0 var(--s-2);
  max-width: 22ch;
}
.gazette__dek { font-size: var(--t-md); color: var(--fg-muted); max-width: 56ch; border-bottom: 1px solid var(--rule); padding-bottom: var(--s-3); }
.cols { column-count: 3; column-gap: clamp(1.2rem, 3vw, 2.6rem); column-rule: 1px solid var(--rule); margin-top: var(--s-4); }
.cols p { margin-bottom: 1em; color: var(--fg-muted); font-size: .96rem; break-inside: avoid-column; }
.cols h3 { font-family: var(--sans); font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 1.4em 0 .5em; break-after: avoid; }
.cols p:first-of-type::first-letter { font-family: var(--display); font-size: 3.1em; float: left; line-height: .8; padding: .04em .09em 0 0; color: var(--vermilion); }
@media (max-width: 1000px) { .cols { column-count: 2; } }
@media (max-width: 660px) { .cols { column-count: 1; } }

.correction {
  border: 1px solid var(--vermilion);
  border-left-width: 3px;
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-5);
  background: var(--bg);
}
.correction h3 { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .22em; text-transform: uppercase; color: var(--vermilion); margin-bottom: .55rem; }
.correction p { font-size: var(--t-sm); color: var(--fg-muted); max-width: 68ch; }

/* =========================================================================
   20. TRIAL — case file / docket
   ========================================================================= */
.docket { border: 1px solid var(--rule-strong); background: var(--surface); }
.docket__hd {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule);
  border-bottom: 1px solid var(--rule-strong);
}
.docket__f { background: var(--surface-deep); padding: var(--s-3); }
.docket__f dt { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: .35rem; }
.docket__f dd { font-size: .93rem; color: var(--fg); font-weight: 500; line-height: 1.4; }
.docket__bd { padding: clamp(1.2rem, 3vw, 2.4rem); }

.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tbl caption { text-align: left; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); padding-bottom: var(--s-2); }
.tbl th, .tbl td { text-align: left; padding: .68rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl th { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); font-weight: 500; border-bottom-color: var(--rule-strong); }
.tbl td { color: var(--fg-muted); }
.tbl td:first-child { color: var(--fg); font-weight: 500; }
.tbl tr:hover td { background: var(--surface-deep); }
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.phase { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--s-3) var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.phase:first-of-type { border-top: 1px solid var(--rule-strong); }
.phase__d { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; color: var(--vermilion); text-transform: uppercase; padding-top: .2rem; }
.phase h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 700; margin-bottom: .4rem; }
.phase p { font-size: var(--t-sm); color: var(--fg-muted); max-width: 66ch; }
@media (max-width: 720px) { .phase { grid-template-columns: 1fr; gap: var(--s-2); } }

/* =========================================================================
   21. MARTYRDOM — quiet, monumental
   ========================================================================= */
.monument { min-height: 76vh; min-height: 76svh; display: grid; align-content: center; gap: var(--s-5); padding-block: var(--s-8); }
.monument__d {
  font-family: var(--display);
  font-size: clamp(3.4rem, 12vw, 10rem);
  line-height: .84;
  letter-spacing: -.045em;
  font-weight: 400;
}
.monument__r { width: 92px; height: 1px; background: var(--vermilion); }
.monument__l { font-size: var(--t-md); color: var(--fg-muted); max-width: 44ch; }
.quiet { display: grid; gap: var(--s-5); max-width: 74ch; }
.quiet__p { font-size: clamp(1.06rem, 1.35vw, 1.22rem); line-height: 1.72; color: var(--fg-muted); }
.hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.hours__c { background: var(--bg); padding: var(--s-4); display: grid; gap: .45rem; align-content: start; }
.hours__t { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .18em; color: var(--vermilion); text-transform: uppercase; }
.hours__c p { font-size: var(--t-sm); color: var(--fg-muted); }

/* =========================================================================
   22. LEGACY — museum wall labels
   ========================================================================= */
.walls { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: var(--s-5) var(--s-4); }
.wall { display: grid; gap: var(--s-2); align-content: start; border-top: 1px solid var(--rule-strong); padding-top: var(--s-3); }
.wall__n { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .2em; color: var(--copper); }
.wall h3 { font-family: var(--display); font-size: 1.5rem; line-height: 1.15; }
.wall p { font-size: var(--t-sm); color: var(--fg-muted); }

/* =========================================================================
   23. ARCHIVE — contact sheet
   ========================================================================= */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .16em; text-transform: uppercase;
  padding: .5rem .85rem;
  border: 1px solid var(--rule-strong);
  background: none; cursor: pointer; color: var(--fg-muted);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.frame { display: grid; gap: .1rem; align-content: start; }
.frame[hidden] { display: none; }
.frame__id {
  display: flex; justify-content: space-between; gap: .5rem;
  text-transform: uppercase;
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .16em; color: var(--fg-faint);
  border-bottom: 1px solid var(--rule); padding-bottom: .4rem; margin-bottom: .6rem;
}
.frame__id b { color: var(--vermilion); font-weight: 500; }
.frame__t { font-family: var(--sans); font-size: .95rem; font-weight: 600; margin-top: .7rem; line-height: 1.35; }
.frame__c { font-size: var(--t-sm); color: var(--fg-muted); margin-top: .3rem; }
.frame__m { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; color: var(--fg-faint); margin-top: .5rem; line-height: 1.75; }

/* =========================================================================
   24. CONTACT
   ========================================================================= */
.contact { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.6rem, 5vw, 5rem); align-items: start; }
.card {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  padding: clamp(1.3rem, 3vw, 2.3rem);
  display: grid;
  gap: var(--s-4);
}
.card__row { display: grid; gap: .35rem; }
.card__row a {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.6vw, 1.95rem);
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 3px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
  word-break: break-word;
}
.card__row a:hover { color: var(--vermilion); border-color: var(--vermilion); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

/* Utility */
.stack   { display: grid; gap: var(--s-4); }
.stack-2 { display: grid; gap: var(--s-2); }
.stack-5 { display: grid; gap: var(--s-5); }
.flexrow { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); }
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
.narrow { max-width: 62ch; }
.center-x { margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ar-8-9 .plate__frame { aspect-ratio: 8 / 9; }
.ar-5-4 .plate__frame { aspect-ratio: 5 / 4; }

/* =========================================================================
   25. RAJGURU — two dossiers converging
   ========================================================================= */
.dossiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); align-items: start; }
.dossier { border: 1px solid var(--rule-strong); background: var(--surface); display: grid; align-content: start; }
.dossier:nth-child(2) { background: var(--bg); margin-top: clamp(0rem, 4vw, 3.4rem); }
.dossier__hd { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); padding: var(--s-3); border-bottom: 1px solid var(--rule-strong); background: var(--surface-deep); }
.dossier__hd .label { color: var(--vermilion); }
.dossier__bd { padding: clamp(1.1rem, 2.6vw, 2rem); display: grid; gap: var(--s-3); }
.dossier__nm { font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.02; letter-spacing: -.025em; }
.dossier dl { display: grid; grid-template-columns: 7.5rem 1fr; gap: .35rem var(--s-3); font-family: var(--mono); font-size: var(--t-xs); border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.dossier dt { color: var(--fg-faint); letter-spacing: .12em; text-transform: uppercase; }
.dossier dd { color: var(--fg-muted); }
.dossier p { font-size: var(--t-sm); color: var(--fg-muted); }

.converge { display: grid; gap: var(--s-4); justify-items: center; text-align: center; padding-block: var(--s-7); }
.converge svg { width: min(100%, 620px); height: auto; }
.converge svg .cline { fill: none; stroke: var(--stone); stroke-width: 1.4; }
.converge svg .cline--join { stroke: var(--vermilion); stroke-width: 2; }
.converge svg text { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .16em; fill: var(--fg-faint); text-anchor: middle; }
.converge__t { font-family: var(--display); font-size: var(--t-xl); max-width: 22ch; }

body.page-ink { background: var(--ink); }
body.page-ink .nav { background: rgba(21, 21, 21, .9); background: color-mix(in srgb, #151515 88%, transparent); border-bottom-color: rgba(241,235,221,.16); }
body.page-ink .nav__mark b, body.page-ink .nav__toggle { color: var(--paper); }
body.page-ink .nav__link { color: #9E978B; }
body.page-ink .nav__link:hover { color: var(--paper); }
body.page-ink .nav__link[aria-current="page"] { color: #E2A88C; }
body.page-ink .nav__toggle { border-color: rgba(241,235,221,.3); }
@media (max-width: 1180px) { body.page-ink .nav__links { background: #151515; } body.page-ink .nav__link { border-top-color: rgba(241,235,221,.14); } body.page-ink .nav__link[aria-current="page"] { background: #1D1D1C; } }

/* =========================================================================
   26. SMALL-SCREEN DIAGRAM LEGIBILITY
   Both SVG diagrams keep a minimum width and pan inside their own box,
   so labels stay readable and the page itself never scrolls sideways.
   ========================================================================= */
@media (max-width: 720px) {
  .net { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .net svg { min-width: 700px; }
  .netpanel { min-height: 0; }
}
@media (max-width: 620px) {
  .converge { overflow-x: auto; -webkit-overflow-scrolling: touch; justify-items: start; }
  .converge svg { min-width: 480px; }
  .converge__t { text-align: left; }
}
.diagram-hint { display: none; }
@media (max-width: 720px) { .diagram-hint { display: block; } }

/* =========================================================================
   27. RENDERING CORRECTIONS
   ========================================================================= */

/* (a) Never upscale a low-resolution archival source beyond legibility.
       Each plate declares the largest width its image can carry.          */
.plate { max-width: var(--plate-max, 100%); }

/* (b) Hairline grids: draw the rules on the cells, not as a container
       background showing through. An incomplete final row can no longer
       leave a bare grey block at any viewport width.                      */
.people, .hours, .onward, .docket__hd { background: transparent; border: 0; }
.people__c, .hours__c, .onward__a, .docket__f { box-shadow: 0 0 0 1px var(--rule); }
.onward { border-block: 0; }

/* (c) Six people cards must resolve to 3 + 3, never 5 + 1. */
.people { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.hours  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
@media (min-width: 1080px) { .people--six { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .hours { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
   28. NARROW-VIEWPORT CORRECTIONS (verified at 320 / 360 / 390 / 430)
   ========================================================================= */

/* The wordmark and the Index button must coexist at 320px. */
@media (max-width: 430px) {
  :root { --nav-h: 52px; }
  .nav__bar { gap: var(--s-2); }
  .nav__mark { flex: 0 1 auto; min-width: 0; }
  .nav__mark b { font-size: .92rem; }
  .nav__mark span { display: none; }
  .nav__toggle { padding: .34rem .5rem; letter-spacing: .12em; flex: none; }
}

/* Numbered section headers stack, so long titles get the full measure. */
@media (max-width: 560px) {
  .sec-head { grid-template-columns: 1fr; gap: var(--s-2); }
  .sec-head__num { padding-top: 0; }
  .mast__meta dl, .dossier dl { grid-template-columns: 1fr; gap: .1rem; }
  .mast__meta dd, .dossier dd { margin-bottom: .5rem; }
}

/* Last-resort guard: no single long word may push the page sideways. */
h1, h2, h3, .opening__title, .monument__d, .era__yr, .foot__word { overflow-wrap: break-word; }

/* The index rail: give the year and its label room, and never let two
   separate entries run together into one unreadable line. */
@media (max-width: 1080px) {
  .rail { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: var(--s-4); row-gap: 0; }
}
@media (max-width: 560px) {
  .rail { grid-template-columns: repeat(2, 1fr); }
  .openfile { display: none; }
}