/* ============================================================
   OXFORD TIMELINE — STYLES
   Editorial manuscript aesthetic, cream paper, Oxford blue,
   oxblood and aged gold accents. Display Fraunces, body EB
   Garamond, monospace JetBrains Mono.
   ============================================================ */

:root {
  /* paper */
  --paper:        #f1e9d6;
  --paper-deep:   #e6dcc1;
  --paper-edge:   #d9cba8;
  --paper-fold:   #c9b98e;

  /* ink */
  --ink:          #1a1410;
  --ink-soft:     #3a2f24;
  --ink-mute:     #6a5a48;
  --ink-faint:    #9b8a72;

  /* signal colours */
  --oxford:       #002147;
  --oxford-deep:  #001633;
  --oxblood:      #5c1f26;
  --gold:         #9d7e2c;
  --gold-bright:  #c79a3a;
  --forest:       #2e4a2b;
  --plum:         #4a2545;
  --rust:         #7b3128;
  --lapis:        #1b3d7a;
  --sage:         #6a7a5d;
  --bronze:       #7a4f2d;

  /* sizing */
  --measure:      62ch;
  --gutter:       clamp(1.2rem, 2.6vw, 2.4rem);
  --page:        1280px;

  /* type */
  --serif:        "EB Garamond", "Adobe Caslon Pro", Georgia, serif;
  --display:      "Fraunces", "EB Garamond", Georgia, serif;
  --mono:         "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { margin: 0; padding: 0; }

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 20% 5%, rgba(157, 126, 44, 0.07), transparent 55%),
    radial-gradient(ellipse at 85% 70%, rgba(92, 31, 38, 0.06), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 33, 71, 0.05), transparent 60%);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  font-feature-settings: "kern", "liga", "onum", "calt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain overlay simulating laid paper */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(26, 20, 16, 0.02) 3px 4px);
  mix-blend-mode: multiply;
}

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

a { color: var(--oxblood); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--oxford); }

button { font: inherit; cursor: pointer; }

/* ----------------------------------------------------------
   MASTHEAD
   ---------------------------------------------------------- */

.masthead {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(1.4rem, 2vw, 2rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  text-align: center;
  border-bottom: 1px solid var(--paper-edge);
  isolation: isolate;
}

.masthead::before,
.masthead::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--ink-mute);
  opacity: 0.6;
}
.masthead::before { top: 80px; }
.masthead::after  { top: 84px; border-top-style: solid; }

.masthead__rule {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0.85rem 0;
}
.masthead__rule--top { border-bottom: 0.5px solid var(--ink-mute); }
.masthead__rule--bot { border-top: 0.5px solid var(--ink-mute); margin-top: 3rem;}
.rule-mid { letter-spacing: 0.22em; }
.rule-side { font-style: italic; text-transform: none; letter-spacing: 0.08em;}

.masthead__crest {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink);
  opacity: 0.85;
  display: none;
}

.masthead__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 2.5rem 0 0.3rem;
}

.masthead__title {
  margin: 0.5rem 0 0;
  font-family: var(--display);
  font-weight: 360;
  font-style: normal;
  line-height: 0.93;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.title-l1 {
  display: block;
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 320;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.title-l2 {
  display: block;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-style: italic;
  font-family: var(--serif);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0.6rem 0;
}
.title-l2 .amp {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.6em;
  vertical-align: -0.1em;
  color: var(--oxblood);
  margin-right: 0.2em;
  font-variation-settings: "opsz" 144, "WONK" 1;
}
.title-l2 em {
  font-style: italic;
  color: var(--oxford);
}
.title-l3 {
  display: block;
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 320;
  font-style: italic;
  color: var(--oxford);
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
}

.masthead__fleuron {
  display: block;
  margin: 1.6rem auto 1rem;
  color: var(--oxblood);
}

.masthead__subtitle {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 38ch;
  line-height: 1.5;
}

.masthead__motto {
  margin: 1.4rem 0 0.4rem;
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.masthead__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 760px;
  margin: 2.5rem auto 0;
  border-top: 0.5px solid var(--ink-mute);
  border-bottom: 0.5px solid var(--ink-mute);
}
.stat {
  padding: 1.2rem 0.5rem;
  text-align: center;
}
.stat--mid {
  border-left: 0.5px solid var(--ink-mute);
  border-right: 0.5px solid var(--ink-mute);
}
.stat dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.4rem;
}
.stat dd {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 320;
  font-style: italic;
  color: var(--oxblood);
  margin: 0;
  line-height: 1;
  font-variation-settings: "opsz" 96, "WONK" 1;
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 3rem;
  padding: 0.7rem 1.3rem;
  background: transparent;
  border: 0.5px solid var(--ink);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.scroll-cue:hover { background: var(--ink); color: var(--paper); }
.scroll-cue svg { transition: transform 0.3s ease; }
.scroll-cue:hover svg { transform: translateY(3px); }

/* ----------------------------------------------------------
   PROLOGUE
   ---------------------------------------------------------- */

.prologue {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  border-bottom: 1px solid var(--paper-edge);
}

.prologue__col--main { font-size: 1.08rem; }

.prologue__byline {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1rem;
  position: relative;
  padding-left: 1.8rem;
}
.prologue__byline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.2rem;
  height: 0.5px;
  background: var(--ink-mute);
}

.prologue__lead { font-size: 1.18rem; line-height: 1.5; }
.prologue p { margin: 0 0 1rem; max-width: 56ch; }

.drop-cap {
  float: left;
  font-family: var(--display);
  font-size: 5.2rem;
  line-height: 0.85;
  padding: 0.45rem 0.6rem 0 0;
  font-weight: 320;
  font-style: italic;
  color: var(--oxblood);
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
}

.small-caps {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-feature-settings: "smcp";
}

.prologue__col--note {
  border-left: 0.5px solid var(--ink-mute);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-style: italic;
}
.margin-note__title {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 0.6rem;
}
.legend {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  font-style: normal;
}
.legend li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.55rem 0;
  border-top: 0.5px solid var(--paper-edge);
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.legend li:last-child { border-bottom: 0.5px solid var(--paper-edge); }
.dot {
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 0.45rem;
  display: inline-block;
}
.dot--college { background: var(--oxford); }
.dot--pph     { background: var(--oxblood); }
.dot--society { background: var(--gold); }

/* ----------------------------------------------------------
   FILTER STRIP (sticky)
   ---------------------------------------------------------- */

.filter-strip {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: rgba(241, 233, 214, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 0.5px solid var(--ink-mute);
  border-top: 0.5px solid var(--ink-mute);
}
.filter-strip__inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.filter-strip__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.filter-buttons {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.filter-btn {
  background: transparent;
  border: 0.5px solid transparent;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 0.95rem;
  padding: 0.4rem 0.85rem;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
  border-radius: 0;
}
.filter-btn em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  vertical-align: super;
  margin-left: 0.25rem;
}
.filter-btn:hover { color: var(--oxford); }
.filter-btn.is-active {
  background: var(--ink);
  color: var(--paper);
}
.filter-btn.is-active em { color: var(--paper-edge); }

.filter-strip__century {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.century-value {
  color: var(--oxblood);
  font-style: italic;
  text-transform: none;
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------
   CHRONICLE
   ---------------------------------------------------------- */

.chronicle {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem);
  position: relative;
}

/* Vertical timeline thread */
.chronicle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gutter) + 6rem);
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0,
    var(--ink-mute) 60px,
    var(--ink-mute) calc(100% - 60px),
    transparent 100%);
  opacity: 0.4;
  pointer-events: none;
}

/* Era */
.era {
  padding: clamp(3rem, 5vw, 5rem) 0 1rem;
  position: relative;
}

.era-header {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 2rem;
  align-items: baseline;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 0.5px solid var(--ink-mute);
  position: relative;
}

.era-roman {
  font-family: var(--display);
  font-size: clamp(4rem, 7vw, 6rem);
  font-style: italic;
  font-weight: 320;
  line-height: 1;
  color: var(--oxblood);
  text-align: center;
  font-variation-settings: "opsz" 144, "WONK" 1, "SOFT" 80;
  position: relative;
  z-index: 2;
  background: var(--paper);
  padding: 0.2rem 0;
}

.era-title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 360;
  font-variation-settings: "opsz" 96, "SOFT" 40;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.05;
}

.era-dates {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-top: 0.6rem;
}

.era-head-text { min-width: 0; }

.era-blurb {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0.8rem 0 0;
  line-height: 1.5;
}

.era.is-empty { display: none; }
.era-entries { position: relative; }

.year-note {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.5em;
  color: var(--gold);
  vertical-align: super;
  margin-left: 0.1em;
  cursor: help;
  text-decoration: underline dotted;
}

/* Entry */
.entry {
  display: grid;
  grid-template-columns: 5rem 1fr minmax(0, 16rem);
  gap: 2rem;
  padding: 2rem 0;
  border-top: 0.5px solid var(--paper-edge);
  position: relative;
  align-items: flex-start;
  transition: opacity 0.45s ease, transform 0.45s ease;
  opacity: 0;
  transform: translateY(20px);
}
.entry:first-of-type { border-top: none; }
.entry.is-revealed {
  opacity: 1;
  transform: none;
}
.entry.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  pointer-events: none;
}

.entry__year {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 320;
  color: var(--ink);
  font-variation-settings: "opsz" 96, "WONK" 1, "SOFT" 80;
  text-align: right;
  position: relative;
  padding-right: 1.8rem;
  line-height: 1;
}
.entry__year::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  right: -0.3rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink);
  z-index: 2;
}
.entry__year-roman {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-top: 0.4rem;
  padding-right: 0.4rem;
}

.entry__body { padding-right: 1rem; }

.entry__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0 0 0.4rem;
  font-variation-settings: "opsz" 72, "SOFT" 30;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.entry__name .ampersand {
  font-style: italic;
  color: var(--oxblood);
  font-variation-settings: "opsz" 144, "WONK" 1;
  font-weight: 320;
}

.entry__meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0.2rem 0 1rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 0.5px solid currentColor;
}
.badge::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.badge--college { color: var(--oxford); }
.badge--pph     { color: var(--oxblood); }
.badge--society { color: var(--bronze); }

.motto {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.motto::before { content: "“"; margin-right: 0.1em; }
.motto::after  { content: "”"; margin-left: 0.1em; }

.entry__desc {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 0.9rem;
  max-width: 52ch;
}
.entry__desc strong {
  font-weight: 500;
  color: var(--oxblood);
  font-style: italic;
}

.entry__alumni {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.4;
  border-top: 0.5px solid var(--paper-edge);
  padding-top: 0.6rem;
  margin-top: 0.4rem;
  max-width: 52ch;
}
.alumni-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-style: normal;
  display: inline-block;
  margin-right: 0.6rem;
}
.entry__alumni span.alum {
  color: var(--ink);
  font-style: normal;
}
.entry__alumni .sep {
  margin: 0 0.35rem;
  color: var(--paper-edge);
}

/* Plate */
.entry__plate {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper-deep);
  border: 0.5px solid var(--ink);
  overflow: hidden;
  isolation: isolate;
  --plate-sky: var(--paper);
  --plate-ink: var(--oxford);
  color: var(--plate-ink);
}

.entry__plate svg.plate-art {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--plate-sky);
}

.entry__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255, 245, 220, 0.0) 60%, rgba(0, 0, 0, 0.08) 100%);
  pointer-events: none;
}

.entry__plate-frame {
  position: absolute;
  inset: 6px;
  border: 0.5px solid currentColor;
  pointer-events: none;
  z-index: 2;
}
.entry__plate-frame::before,
.entry__plate-frame::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 0.5px solid currentColor;
}
.entry__plate-frame::before { top: -4px; left: -4px; border-right: none; border-bottom: none; }
.entry__plate-frame::after { bottom: -4px; right: -4px; border-left: none; border-top: none; }

.entry__plate-caption {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--plate-sky);
  z-index: 3;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

/* Feature entry — granted wider treatment */
.entry--feature {
  grid-template-columns: 5rem 1fr minmax(0, 20rem);
  border-top: 1px double var(--ink-mute);
  border-bottom: 1px double var(--ink-mute);
  padding: 3rem 0;
  margin: 1.5rem 0;
  background-image:
    linear-gradient(rgba(157, 126, 44, 0.04), rgba(157, 126, 44, 0.04));
}
.entry--feature + .entry { border-top: none; }
.entry--feature .entry__name {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-variation-settings: "opsz" 144, "SOFT" 40;
  margin-bottom: 0.6rem;
  line-height: 1;
}
.entry--feature .entry__desc {
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 60ch;
}
.entry--feature .entry__year {
  font-size: clamp(2rem, 3vw, 2.6rem);
}
.entry--feature .feature-pull {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--oxblood);
  border-left: 2px solid var(--gold);
  padding-left: 1rem;
  margin: 0 0 1.2rem;
  font-variation-settings: "opsz" 60, "SOFT" 40, "WONK" 1;
  max-width: 38ch;
}
.entry--feature .entry__plate { aspect-ratio: 4 / 5; }

/* Plate color palettes (assigned via data-palette) */
.palette-oxford   { --plate-sky: #e6dcc1; --plate-ink: #002147; }
.palette-oxblood  { --plate-sky: #efe5cc; --plate-ink: #5c1f26; }
.palette-forest   { --plate-sky: #ebe0c5; --plate-ink: #2e4a2b; }
.palette-plum     { --plate-sky: #ece1c8; --plate-ink: #4a2545; }
.palette-rust     { --plate-sky: #f0e6cd; --plate-ink: #7b3128; }
.palette-lapis    { --plate-sky: #e8ddc4; --plate-ink: #1b3d7a; }
.palette-bronze   { --plate-sky: #ece2cb; --plate-ink: #7a4f2d; }
.palette-sage     { --plate-sky: #ebe2cc; --plate-ink: #4a5a3a; }
.palette-gold     { --plate-sky: #2a2418; --plate-ink: #c79a3a; }
.palette-ink      { --plate-sky: #efe5cc; --plate-ink: #1a1410; }
.palette-night    { --plate-sky: #0f1424; --plate-ink: #c79a3a; }
.palette-slate    { --plate-sky: #ebe1c8; --plate-ink: #3a4856; }

/* ----------------------------------------------------------
   COLOPHON
   ---------------------------------------------------------- */

.colophon {
  border-top: 4px double var(--ink-mute);
  padding: clamp(3rem, 5vw, 5rem) var(--gutter) 4rem;
  text-align: center;
}
.colophon__inner { max-width: 56ch; margin: 0 auto; }
.colophon__fleuron { color: var(--oxblood); margin: 0 auto 1.5rem; display: block; }
.colophon__finis {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--ink-soft);
  letter-spacing: 0.2em;
  margin: 0 0 1.2rem;
  font-variation-settings: "opsz" 96, "WONK" 1;
}
.colophon__credit {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-mute);
  line-height: 1.55;
  margin: 0 0 1rem;
}
.colophon__credit em { font-weight: 500; font-style: italic; color: var(--ink-soft); }
.colophon__edit {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 1.5rem 0 0;
}
.colophon__edit a {
  color: var(--oxblood);
  text-transform: none;
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0;
  margin-left: 0.6rem;
  font-style: italic;
}
.colophon__copyright {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 2rem 0 0;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .entry {
    grid-template-columns: 4.5rem 1fr;
    gap: 1.4rem;
  }
  .entry__plate {
    grid-column: 2;
    max-width: 280px;
    margin-top: 0.6rem;
  }
  .entry--feature .entry__body {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .entry--feature .entry__body > .entry__plate {
    max-width: 320px;
  }
  .chronicle::before { left: calc(var(--gutter) + 5.3rem); }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .prologue {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .prologue__col--note {
    border-left: none;
    border-top: 0.5px solid var(--ink-mute);
    padding-left: 0;
    padding-top: 1.5rem;
  }
  .filter-strip__inner { padding: 0.7rem var(--gutter); }
  .filter-strip__century { display: none; }
  .entry {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.8rem 0;
  }
  .entry__year {
    text-align: left;
    padding-right: 0;
    font-size: 1.6rem;
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
  }
  .entry__year::after { display: none; }
  .entry__year-roman {
    display: inline;
    margin-top: 0;
  }
  .entry__plate {
    max-width: 100%;
    aspect-ratio: 16 / 11;
  }
  .chronicle::before { display: none; }
  .era-header {
    grid-template-columns: 4rem 1fr;
    gap: 1.2rem;
  }
  .era-roman { font-size: 3rem; }
  .era-blurb { grid-column: 1 / -1; }
  .masthead__rule { font-size: 9px; letter-spacing: 0.14em; }
  .masthead__rule .rule-mid { display: none; }
  .masthead__stats { grid-template-columns: 1fr; }
  .stat--mid { border: none; border-top: 0.5px solid var(--ink-mute); border-bottom: 0.5px solid var(--ink-mute); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .entry { opacity: 1; transform: none; }
}