/* =========================================================
   大学东路6号 · 清远市第一中学青春回忆录
   Design system: paper, pine green, vermilion, old gold
   ========================================================= */

:root {
  --green-950: #082F4A;
  --green-900: #0D4F82;
  --green-800: #0F5D92;
  --green-700: #176DA8;
  --green-600: #2C7FB2;
  --green-500: #5A99BC;
  --cream: #FFFFFF;
  --paper: #F8FBFD;
  --paper-2: #EEF5FA;
  --paper-3: #DDECF6;
  --ink: #18344A;
  --ink-soft: #3E5A6E;
  --muted: #6C8495;
  --red: #176DA8;
  --red-dark: #0D4F82;
  --gold: #5A99BC;
  --line: #C9DCE9;
  --line-strong: #A9C6D9;
  --white: #FFFFFF;
  --shadow-sm: 0 6px 18px -14px rgba(9, 30, 45, .22);
  --shadow: 0 24px 60px -34px rgba(9, 30, 45, .28);
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --container: 1240px;
  --header-h: 78px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

img, svg { max-width: 100%; }
img { display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
figure { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .01em;
}

.icon {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.container {
  width: min(var(--container), calc(100% - 64px));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--green-900);
  color: var(--paper);
  transform: translateY(-150%);
  transition: transform .2s;
}
.skip-link:focus { transform: none; }

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.13'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 300;
  background: transparent;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--red);
  transition: width .08s linear;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--header-h);
  transition: background .35s var(--ease), box-shadow .35s, border-color .35s, transform .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid,
.site-header.is-scrolled {
  background: rgba(250, 246, 236, .92);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-bottom-color: var(--line);
}
.site-header.is-scrolled { box-shadow: 0 12px 40px -28px rgba(24, 52, 74, .5); }
.site-header.is-hidden { transform: translateY(-100%); }

.header-inner {
  width: min(var(--container), calc(100% - 64px));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand__mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  box-shadow: 0 6px 14px -6px rgba(23, 109, 168, .55);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong {
  font-family: var(--serif);
  font-size: 1.16rem;
  letter-spacing: .08em;
  font-weight: 700;
}
.brand__text small {
  margin-top: 5px;
  color: var(--muted);
  font-size: .64rem;
  letter-spacing: .1em;
  white-space: nowrap;
}

.main-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.main-nav a {
  position: relative;
  padding: 8px 0;
  font-size: .86rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
  transition: color .2s;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width .25s var(--ease), left .25s var(--ease);
}
.main-nav a:hover, .main-nav a.is-active { color: var(--ink); }
.main-nav a:hover::after, .main-nav a.is-active::after { width: 100%; left: 0; }

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: 6px; }

.icon-button {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  transition: background .2s, border-color .2s, transform .2s;
}
.icon-button:hover { background: rgba(24, 52, 74, .06); border-color: var(--line); }
.icon-button:active { transform: scale(.94); }
.icon-button .icon { width: 20px; height: 20px; }

.edit-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .1em;
  transition: background .2s, color .2s, border-color .2s;
}
.edit-link .icon { width: 14px; height: 14px; }
.edit-link:hover { background: var(--green-900); border-color: var(--green-900); color: var(--paper); }

.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.menu-button span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform .3s; }

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid var(--green-900);
  border-radius: 999px;
  background: var(--green-900);
  color: var(--paper);
  font-size: .9rem;
  letter-spacing: .08em;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.button:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(23, 109, 168, .7); }
.button:active { transform: translateY(0); }
.button .icon { width: 17px; height: 17px; }
.button--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button--ghost:hover { background: var(--green-900); color: var(--paper); border-color: var(--green-900); }
.button--light { background: var(--paper); color: var(--green-900); border-color: var(--paper); }
.button--light:hover { background: var(--gold); border-color: var(--gold); color: var(--green-950); }
.button--outline-light { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, .38); }
.button--outline-light:hover { background: var(--paper); color: var(--green-900); border-color: var(--paper); }
.button--small { min-height: 40px; padding: 0 18px; font-size: .8rem; }
.button--block { width: 100%; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  transition: color .2s, border-color .2s, gap .2s;
}
.text-link:hover { color: var(--red); border-color: var(--red); gap: 12px; }

/* ---------- Shared type ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--red);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; }

.section { padding: 110px 0; position: relative; }
.section--tight { padding: 78px 0; }
.section--dark { background: var(--green-900); color: var(--cream); }
.section--paper2 { background: var(--paper-2); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 54px;
}
.section-head__left { max-width: 720px; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); letter-spacing: -.02em; }
.section-head__note { max-width: 340px; color: var(--muted); font-size: .9rem; line-height: 1.8; }
.section--dark .section-head__note { color: rgba(255, 255, 255, .62); }
.section--dark .eyebrow { color: var(--gold); }

.section-number {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--muted);
}
.section--dark .section-number { color: rgba(255, 255, 255, .45); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  width: 48vw;
  height: 48vw;
  right: -8vw;
  top: 8vh;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(23, 109, 168, .13), rgba(23, 109, 168, 0) 66%);
  z-index: -1;
}
.hero__ghost {
  position: absolute;
  right: -4vw;
  bottom: -18vh;
  z-index: -1;
  font-family: var(--serif);
  font-size: 68vw;
  line-height: .72;
  color: transparent;
  -webkit-text-stroke: 1px rgba(24, 52, 74, .07);
  user-select: none;
  pointer-events: none;
}
.hero__inner {
  width: min(var(--container), calc(100% - 64px));
  margin: auto;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  align-items: center;
  gap: 54px;
  padding: 52px 0 64px;
}
.hero__copy { position: relative; z-index: 2; }
.hero__copy .eyebrow { margin-bottom: 34px; animation: rise .9s .05s var(--ease) both; }

.hero__title {
  font-size: clamp(4.2rem, 9.6vw, 9rem);
  line-height: .94;
  letter-spacing: -.045em;
  margin: 0 0 32px;
  animation: rise 1s .12s var(--ease) both;
}
.hero__title .line { display: block; }
.hero__title .num {
  display: flex;
  align-items: baseline;
  color: var(--red);
  font-size: 1.13em;
  letter-spacing: -.06em;
  margin-top: .02em;
}
.hero__title .num small {
  font-family: var(--sans);
  font-size: .16em;
  font-weight: 500;
  letter-spacing: .26em;
  color: var(--ink);
  margin-left: .5em;
  transform: translateY(-.9em);
}
.hero__intro {
  max-width: 33em;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.35vw, 1.13rem);
  line-height: 1.95;
  animation: rise 1s .22s var(--ease) both;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
  animation: rise 1s .3s var(--ease) both;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 46px 0 0;
  animation: rise 1s .38s var(--ease) both;
}
.hero__meta div {
  padding: 0 22px;
  border-left: 1px solid var(--line);
  line-height: 1.4;
}
.hero__meta div:first-child { padding-left: 0; border-left: 0; }
.hero__meta dt { color: var(--muted); font-size: .64rem; letter-spacing: .14em; }
.hero__meta dd { margin: 3px 0 0; font-family: var(--serif); font-size: 1.05rem; }

.hero__visual {
  position: relative;
  min-height: 540px;
  animation: rise 1.1s .25s var(--ease) both;
}
.hero__visual::before {
  content: "";
  position: absolute;
  inset: 8% 6% 10% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 153, 188, .2), transparent 68%);
  filter: blur(10px);
}

.student-card {
  position: absolute;
  z-index: 3;
  left: 7%;
  top: 6%;
  width: min(340px, 70%);
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
  transform: rotate(-6deg);
  overflow: hidden;
  transition: transform .6s var(--ease);
}
.student-card:hover { transform: rotate(-3deg) translateY(-6px); }
.student-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--green-900);
  color: var(--cream);
  font-size: .62rem;
  letter-spacing: .18em;
}
.student-card__top span:last-child { color: var(--gold); font-family: var(--mono); }
.student-card__photo {
  margin: 12px 12px 0;
  border: 1px solid var(--line-strong);
  background: var(--paper-2);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.student-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.student-card__body { padding: 14px 18px 16px; }
.student-card__name {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: .16em;
  margin-bottom: 10px;
}
.student-card__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px dashed var(--line);
  font-size: .7rem;
}
.student-card__row dt { color: var(--muted); letter-spacing: .08em; }
.student-card__row dd { margin: 0; text-align: right; }
.student-card__code {
  margin-top: 12px;
  height: 26px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 3px, var(--ink) 3px 4px, transparent 4px 7px);
  opacity: .6;
}
.student-card__stamp {
  position: absolute;
  right: 14px;
  bottom: 46px;
  width: 70px;
  height: 70px;
  border: 2px solid rgba(23, 109, 168, .55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(23, 109, 168, .7);
  font-family: var(--serif);
  font-size: .58rem;
  line-height: 1.3;
  text-align: center;
  letter-spacing: .1em;
  transform: rotate(-14deg);
}

.polaroid {
  position: absolute;
  z-index: 4;
  right: -2%;
  bottom: 2%;
  width: min(286px, 58%);
  padding: 10px 10px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: rotate(5deg);
  transition: transform .6s var(--ease);
}
.polaroid:hover { transform: rotate(2deg) translateY(-6px); }
.polaroid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid figcaption {
  padding: 10px 6px 0;
  font-family: "Kaiti SC", "KaiTi", var(--serif);
  font-size: .82rem;
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: .06em;
}

.hero-stamp {
  position: absolute;
  z-index: 2;
  left: 2%;
  bottom: 10%;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  transform: rotate(10deg);
  color: var(--green-700);
  background: rgba(250, 246, 236, .6);
  backdrop-filter: blur(3px);
}
.hero-stamp::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed var(--line-strong);
  border-radius: 50%;
}
.hero-stamp__inner { text-align: center; font-family: var(--serif); line-height: 1.35; }
.hero-stamp__inner strong { display: block; font-size: 1.45rem; letter-spacing: .1em; }
.hero-stamp__inner span { font-size: .55rem; letter-spacing: .18em; }

.hero__scroll {
  position: absolute;
  left: 28px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: .62rem;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--line-strong), transparent);
  animation: scrollLine 2.2s ease-in-out infinite;
}

.hero__side-note {
  position: absolute;
  right: max(26px, calc((100vw - var(--container)) / 2));
  bottom: 36px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  writing-mode: vertical-rl;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .4; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* ---------- Marquee ---------- */

.marquee {
  background: var(--green-900);
  color: var(--cream);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 0; padding: 16px 0; }
.marquee__group span {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding: 0 26px;
  font-family: var(--serif);
  font-size: .9rem;
  letter-spacing: .2em;
  white-space: nowrap;
}
.marquee__group span::after { content: "✳"; color: var(--gold); font-size: .72rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Intro ---------- */

.intro-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.intro-quote {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.4;
  letter-spacing: -.02em;
  padding-top: 14px;
}
.intro-quote::before {
  content: "“";
  position: absolute;
  left: -0.62em;
  top: -0.28em;
  font-size: 2.5em;
  color: rgba(23, 109, 168, .18);
  font-family: Georgia, serif;
}
.intro-quote em { font-style: normal; color: var(--red); }
.intro-sign {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .1em;
}
.intro-sign::before { content: ""; width: 38px; height: 1px; background: var(--line-strong); }
.intro-body { max-width: 600px; color: var(--ink-soft); font-size: 1rem; line-height: 2; }
.intro-body p:first-child::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 3.4em;
  line-height: .86;
  padding: .08em .14em 0 0;
  color: var(--red);
}
.intro-body p + p { margin-top: 1.3em; }
.intro-facts {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.intro-facts div { padding: 18px 16px 0 0; }
.intro-facts dt { font-family: var(--serif); font-size: 1.8rem; color: var(--green-700); }
.intro-facts dd { margin: 2px 0 0; color: var(--muted); font-size: .68rem; letter-spacing: .1em; }

/* ---------- Categories ---------- */

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 228px;
  padding: 26px 26px 22px;
  background: var(--paper);
  transition: background .35s var(--ease), color .35s;
  overflow: hidden;
}
.category-card::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(90, 153, 188, .18);
  transform: scale(0);
  transition: transform .5s var(--ease);
}
.category-card:hover { background: var(--green-900); color: var(--cream); }
.category-card:hover::after { transform: scale(1); }
.category-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: auto; }
.category-card__num { font-family: var(--mono); font-size: .62rem; color: var(--muted); letter-spacing: .16em; }
.category-card:hover .category-card__num { color: rgba(255, 255, 255, .55); }
.category-card__icon { width: 34px; height: 34px; color: var(--red); transition: color .3s, transform .3s var(--ease); }
.category-card:hover .category-card__icon { color: var(--gold); transform: translateY(-3px); }
.category-card__name { margin-top: 30px; font-family: var(--serif); font-size: 1.5rem; letter-spacing: .06em; }
.category-card__desc { margin: 9px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.7; transition: color .3s; }
.category-card:hover .category-card__desc { color: rgba(255, 255, 255, .65); }
.category-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--muted);
  transition: color .3s, border-color .3s;
}
.category-card:hover .category-card__foot { color: rgba(255, 255, 255, .65); border-color: rgba(255, 255, 255, .18); }
.category-card__arrow { transition: transform .3s var(--ease); }
.category-card:hover .category-card__arrow { transform: translateX(5px); color: var(--gold); }

/* ---------- Memory cards ---------- */

.memory-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s, border-color .3s;
  overflow: hidden;
}
.memory-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.memory-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}
.memory-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.memory-card:hover .memory-card__media img { transform: scale(1.045); }
.memory-card__tag {
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(250, 246, 236, .92);
  border: 1px solid rgba(24, 52, 74, .12);
  border-radius: 999px;
  color: var(--ink);
  font-size: .64rem;
  letter-spacing: .1em;
  backdrop-filter: blur(6px);
}
.memory-card__tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.memory-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; }
.memory-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: .64rem;
  letter-spacing: .1em;
}
.memory-card__meta span + span::before { content: "·"; margin-right: 12px; }
.memory-card__title { margin: 10px 0 8px; font-size: 1.36rem; line-height: 1.45; letter-spacing: .01em; transition: color .25s; }
.memory-card:hover .memory-card__title { color: var(--red); }
.memory-card__excerpt {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.memory-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--muted);
}
.memory-card__more { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); transition: gap .2s, color .2s; }
.memory-card:hover .memory-card__more { gap: 10px; color: var(--red); }
.memory-card__more .icon { width: 14px; height: 14px; }

.memory-card--featured { border-color: var(--line-strong); }
.memory-card--featured .memory-card__media { aspect-ratio: 16 / 10; }
.memory-card--featured .memory-card__body { padding: 28px; }
.memory-card--featured .memory-card__title { font-size: clamp(1.65rem, 2.4vw, 2.25rem); line-height: 1.35; }
.memory-card--featured .memory-card__excerpt { font-size: .92rem; -webkit-line-clamp: 2; }

/* ---------- Home featured ---------- */

.featured-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 22px;
  align-items: stretch;
}
.featured-side { display: grid; grid-template-rows: 1fr 1fr; gap: 22px; }
.featured-side .memory-card { flex-direction: row; }
.featured-side .memory-card__media { width: 42%; flex: none; aspect-ratio: auto; }
.featured-side .memory-card__body { width: 58%; padding: 20px 22px; }
.featured-side .memory-card__title { font-size: 1.2rem; }
.featured-side .memory-card__excerpt { -webkit-line-clamp: 2; }

/* ---------- Timeline preview ---------- */

.timeline-preview { background: var(--green-900); color: var(--cream); overflow: hidden; }
.timeline-preview .section-head h2 { color: var(--cream); }
.timeline-strip {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) transparent;
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.timeline-strip__item {
  position: relative;
  flex: 1 0 190px;
  padding: 30px 24px 26px;
  border-left: 1px solid rgba(255, 255, 255, .14);
  transition: background .3s;
}
.timeline-strip__item:first-child { border-left: 0; }
.timeline-strip__item:hover { background: rgba(255, 255, 255, .06); }
.timeline-strip__item::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 24px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.timeline-strip__year { display: block; font-family: var(--serif); font-size: 2rem; letter-spacing: .04em; }
.timeline-strip__label { display: block; margin-top: 7px; color: rgba(255, 255, 255, .55); font-size: .68rem; letter-spacing: .12em; }
.timeline-strip__count { display: block; margin-top: 22px; color: var(--gold); font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; }

/* ---------- Gallery preview ---------- */

.gallery-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: center;
}
.gallery-strip__item {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.gallery-strip__item:nth-child(odd) { aspect-ratio: 3 / 4; transform: translateY(18px); }
.gallery-strip__item:nth-child(even) { aspect-ratio: 4 / 5; }
.gallery-strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .4s; }
.gallery-strip__item:hover img { transform: scale(1.06); filter: saturate(1.1); }
.gallery-strip__item span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 12px 10px;
  background: linear-gradient(transparent, rgba(11, 36, 28, .72));
  color: var(--cream);
  font-size: .66rem;
  letter-spacing: .08em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.gallery-strip__item:hover span { opacity: 1; transform: none; }

/* ---------- CTA ---------- */

.cta {
  position: relative;
  background: var(--red);
  color: var(--cream);
  overflow: hidden;
}
.cta::before {
  content: "6";
  position: absolute;
  right: -2vw;
  bottom: -22vh;
  font-family: var(--serif);
  font-size: 46vw;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .14);
}
.cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 50px;
  align-items: center;
  padding: 92px 0;
}
.cta .eyebrow { color: rgba(255, 255, 255, .72); }
.cta h2 { margin: 18px 0 16px; font-size: clamp(2.4rem, 5.4vw, 4.8rem); line-height: 1.16; letter-spacing: -.03em; }
.cta p { max-width: 36em; color: rgba(255, 255, 255, .72); }
.cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; justify-self: end; }
.cta__note { font-size: .68rem; letter-spacing: .1em; color: rgba(255, 255, 255, .55) !important; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--green-950);
  color: var(--cream);
  padding: 78px 0 28px;
}
.footer-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footer-kicker { margin: 0 0 12px; color: rgba(255, 255, 255, .4); font-family: var(--mono); font-size: .58rem; letter-spacing: .2em; }
.footer-title { margin: 0; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.6rem); letter-spacing: .02em; line-height: 1; }
.footer-title span { color: var(--gold); }
.footer-sub { margin: 14px 0 0; color: rgba(255, 255, 255, .5); font-size: .76rem; letter-spacing: .12em; }
.footer-col h3 { margin: 0 0 16px; color: rgba(255, 255, 255, .42); font-family: var(--sans); font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.footer-col a { display: block; margin: 9px 0; color: rgba(255, 255, 255, .8); font-size: .8rem; transition: color .2s, transform .2s; }
.footer-col a:hover { color: var(--gold); transform: translateX(3px); }
.footer-col--address p { margin: 0 0 6px; color: rgba(255, 255, 255, .78); font-size: .8rem; line-height: 1.8; }
.footer-coord { color: rgba(255, 255, 255, .35) !important; font-family: var(--mono); font-size: .62rem !important; letter-spacing: .1em; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 22px;
  color: rgba(255, 255, 255, .38);
  font-size: .64rem;
  letter-spacing: .06em;
}
.footer-bottom p { margin: 0; }
.footer-made { color: rgba(255, 255, 255, .5); }

/* ---------- Boot / empty ---------- */

.boot-screen {
  min-height: 70vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .12em;
}
.boot-screen img { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; transform: scale(.96); } }

.empty-state {
  padding: 80px 20px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  background: rgba(250, 246, 236, .5);
}
.empty-state .icon { width: 38px; height: 38px; color: var(--muted); margin-bottom: 16px; }
.empty-state h3 { font-size: 1.5rem; margin-bottom: 8px; }
.empty-state p { color: var(--muted); font-size: .86rem; }


/* =========================================================
   Inner pages
   ========================================================= */

.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 76px) 0 58px;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  right: -10vw;
  top: -12vw;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 153, 188, .16), transparent 65%);
  pointer-events: none;
}
.page-hero__inner { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.page-hero__copy { max-width: 780px; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .1em;
}
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .icon { width: 12px; height: 12px; }
.page-hero h1 { font-size: clamp(2.8rem, 6.6vw, 5.6rem); line-height: 1.05; letter-spacing: -.035em; }
.page-hero h1 em { font-style: normal; color: var(--red); }
.page-hero__lead { max-width: 560px; margin: 22px 0 0; color: var(--muted); font-size: .95rem; line-height: 1.9; }
.page-hero__aside {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 8px;
  color: var(--muted);
  font-size: .66rem;
  letter-spacing: .14em;
}
.page-hero__count {
  font-family: var(--serif);
  font-size: 3.8rem;
  line-height: 1;
  color: var(--green-700);
}
.page-hero__count span { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; color: var(--muted); }

.page-rule { height: 1px; background: var(--line); }

/* ---------- Archive ---------- */

.archive-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 26px 0 22px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.archive-search {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.archive-search .icon { width: 22px; height: 22px; color: var(--muted); flex: none; }
.archive-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 8px 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  letter-spacing: .02em;
}
.archive-search input::placeholder { color: rgba(24, 52, 74, .3); }
.archive-search__clear {
  border: 0;
  background: transparent;
  padding: 6px;
  color: var(--muted);
  display: none;
}
.archive-search__clear.is-visible { display: inline-flex; }
.archive-search__clear:hover { color: var(--red); }
.archive-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .08em;
}
.archive-sort select {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  padding: 8px 30px 8px 13px;
  font-size: .72rem;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23142B21' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.archive-sort select:focus { border-color: var(--green-700); }

.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: .72rem;
  letter-spacing: .06em;
  transition: background .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--line-strong); background: rgba(24, 52, 74, .04); }
.chip.is-active { background: var(--green-900); border-color: var(--green-900); color: var(--paper); }
.chip__count { color: var(--muted); font-size: .62rem; }
.chip.is-active .chip__count { color: rgba(255, 255, 255, .55); }

.archive-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 6px 0 26px;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .08em;
}
.archive-meta strong { color: var(--ink); font-weight: 500; }

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-bottom: 20px;
}
.archive-grid .memory-card__title { font-size: 1.3rem; }

.load-more-wrap { display: flex; justify-content: center; padding: 34px 0 10px; }

/* ---------- Timeline page ---------- */

.timeline-page { padding-bottom: 100px; }
.school-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  background: var(--line);
  margin-bottom: 76px;
}
.school-line__item { background: var(--paper); padding: 22px 20px; }
.school-line__year { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--red); }
.school-line__title { display: block; margin-top: 6px; font-size: .78rem; }
.school-line__text { display: block; margin-top: 6px; color: var(--muted); font-size: .68rem; line-height: 1.7; }

.timeline-list { position: relative; }
.timeline-year {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.timeline-year__side { position: sticky; top: calc(var(--header-h) + 30px); align-self: start; }
.timeline-year__num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 6vw, 5.2rem);
  line-height: 1;
  color: var(--green-700);
  letter-spacing: -.04em;
}
.timeline-year__label { display: block; margin-top: 8px; color: var(--muted); font-size: .64rem; letter-spacing: .16em; }
.timeline-year__entries { position: relative; padding-left: 34px; }
.timeline-year__entries::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line-strong);
}
.timeline-entry {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 20px;
  padding: 18px 0;
}
.timeline-entry::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 28px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}
.timeline-entry__date { color: var(--muted); font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; padding-top: 3px; }
.timeline-entry__body { min-width: 0; }
.timeline-entry__cat { color: var(--red); font-size: .62rem; letter-spacing: .12em; }
.timeline-entry__title { margin: 4px 0 5px; font-size: 1.36rem; transition: color .2s; }
.timeline-entry:hover .timeline-entry__title { color: var(--red); }
.timeline-entry__excerpt { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.8; }
.timeline-entry__arrow { opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; color: var(--red); }
.timeline-entry:hover .timeline-entry__arrow { opacity: 1; transform: none; }

/* ---------- Gallery ---------- */

.gallery-page { padding-bottom: 100px; }
.gallery-grid { columns: 3; column-gap: 18px; }
.gallery-item {
  break-inside: avoid;
  margin: 0 0 18px;
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
  text-align: left;
}
.gallery-item img { width: 100%; height: auto; transition: transform .8s var(--ease), filter .5s; }
.gallery-item:hover img { transform: scale(1.04); filter: saturate(1.08); }
.gallery-item__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: .68rem;
  letter-spacing: .05em;
}
.gallery-item__caption span:last-child { color: var(--muted); font-family: var(--mono); font-size: .58rem; }

/* ---------- Article ---------- */

.article-page { padding-bottom: 90px; }
.article-hero { padding: calc(var(--header-h) + 64px) 0 0; }
.article-head { max-width: 900px; margin: 0 auto; text-align: center; }
.article-head .breadcrumb { justify-content: center; }
.article-head__cat { display: inline-flex; align-items: center; gap: 7px; color: var(--red); font-size: .68rem; letter-spacing: .14em; }
.article-head__cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.article-title { margin: 18px 0 20px; font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.28; letter-spacing: -.02em; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .08em;
}
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-meta .icon { width: 13px; height: 13px; }

.article-cover {
  max-width: 1080px;
  margin: 44px auto 0;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 8.6;
  overflow: hidden;
  background: var(--paper-2);
}
.article-cover img { width: 100%; height: 100%; object-fit: cover; }

.article-layout {
  display: grid;
  grid-template-columns: 160px minmax(0, 720px) 160px;
  justify-content: center;
  gap: 40px;
  margin-top: 56px;
}
.article-aside { padding-top: 8px; color: var(--muted); font-size: .64rem; letter-spacing: .1em; }
.article-aside__label { display: block; margin-bottom: 8px; color: var(--ink-soft); }
.article-aside--right { text-align: right; }
.article-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--muted);
  font-size: .66rem;
  letter-spacing: .08em;
  transition: color .2s;
}
.article-share:hover { color: var(--red); }
.article-share .icon { width: 14px; height: 14px; }

.article-body {
  min-width: 0;
  color: var(--ink-soft);
  font-size: 1.06rem;
  line-height: 2.05;
  letter-spacing: .01em;
}
.article-body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 3.6em;
  line-height: .84;
  padding: .08em .16em 0 0;
  color: var(--red);
}
.article-body p { margin: 0 0 1.55em; }
.article-body h2 { margin: 2.2em 0 .8em; font-size: 1.7rem; color: var(--ink); }
.article-body h3 { margin: 1.8em 0 .7em; font-size: 1.35rem; color: var(--ink); }
.article-body blockquote {
  margin: 1.9em 0;
  padding: 8px 0 8px 24px;
  border-left: 2px solid var(--red);
  color: var(--green-700);
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.9;
}
.article-body ul, .article-body ol { margin: 0 0 1.5em; padding-left: 1.4em; }
.article-body li { margin: .35em 0; }
.article-body img { width: 100%; margin: 1.8em 0; border: 1px solid var(--line); }
.article-body hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }
.article-body a { color: var(--red); border-bottom: 1px solid rgba(23, 109, 168, .35); }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body code { padding: 2px 5px; background: var(--paper-2); font-family: var(--mono); font-size: .86em; }
.article-body .image-caption { margin: -1.2em 0 1.8em; color: var(--muted); font-size: .7rem; text-align: center; }

.article-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }
.article-tags span { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .66rem; }

.article-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 34px; }
.article-gallery figure { border: 1px solid var(--line); }
.article-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.article-gallery figcaption { padding: 8px 10px; background: var(--paper); color: var(--muted); font-size: .64rem; }

.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 70px;
  padding-top: 26px;
  border-top: 1px solid var(--line-strong);
}
.article-nav a { padding: 18px 20px; border: 1px solid var(--line); transition: background .2s, border-color .2s; }
.article-nav a:hover { background: var(--paper-2); border-color: var(--line-strong); }
.article-nav small { display: block; color: var(--muted); font-size: .62rem; letter-spacing: .1em; margin-bottom: 4px; }
.article-nav strong { font-family: var(--serif); font-size: 1rem; font-weight: 500; }
.article-nav .is-next { text-align: right; }

.article-end { display: flex; justify-content: center; margin-top: 46px; }
.article-end .seal-end { width: 58px; height: 58px; opacity: .5; }

/* ---------- About ---------- */

.about-page { padding-bottom: 100px; }
.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: calc(var(--header-h) + 64px) 0 70px;
}
.about-hero-grid h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.12; letter-spacing: -.03em; }
.about-hero-grid h1 em { font-style: normal; color: var(--red); }
.about-hero-grid p { margin-top: 24px; max-width: 33em; color: var(--muted); line-height: 1.95; }
.about-hero-art { position: relative; border: 1px solid var(--line); transform: rotate(1.5deg); box-shadow: var(--shadow-sm); }
.about-hero-art img { width: 100%; }
.about-hero-art figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  background: rgba(250, 246, 236, .9);
  font-family: "Kaiti SC", "KaiTi", var(--serif);
  font-size: .7rem;
  color: var(--muted);
}
.about-section { padding: 54px 0; border-top: 1px solid var(--line); }
.about-section__grid { display: grid; grid-template-columns: 220px 1fr; gap: 50px; }
.about-section h2 { font-size: 1.7rem; }
.about-section__label { color: var(--muted); font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; }
.about-prose { max-width: 680px; color: var(--ink-soft); line-height: 2; }
.about-prose p + p { margin-top: 1.2em; }

.fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 26px; }
.fact { background: var(--paper); padding: 24px 20px; }
.fact strong { display: block; font-family: var(--serif); font-size: 1.9rem; color: var(--green-700); }
.fact span { display: block; margin-top: 4px; color: var(--muted); font-size: .68rem; letter-spacing: .06em; }

.privacy-box { padding: 28px; background: var(--paper-2); border-left: 3px solid var(--red); }
.privacy-box h3 { margin-bottom: 10px; font-size: 1.15rem; }
.privacy-box p { color: var(--muted); font-size: .84rem; line-height: 1.9; }

.about-note { display: flex; align-items: flex-start; gap: 14px; padding: 22px 0; color: var(--muted); font-size: .78rem; line-height: 1.8; }
.about-note .icon { width: 18px; height: 18px; color: var(--gold); margin-top: 2px; }

/* =========================================================
   Search overlay
   ========================================================= */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  padding: 10vh 24px 24px;
  background: rgba(11, 36, 28, .68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-y: auto;
}
.search-overlay[hidden] { display: none; }
.search-panel {
  width: min(860px, 100%);
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .5);
  animation: searchIn .35s var(--ease) both;
}
@keyframes searchIn { from { opacity: 0; transform: translateY(-14px) scale(.99); } to { opacity: 1; transform: none; } }
.search-bar { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.search-bar > .icon { width: 24px; height: 24px; color: var(--muted); flex: none; }
.search-bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: .02em;
}
.search-bar input::placeholder { color: rgba(24, 52, 74, .28); }
.search-clear { border: 0; background: transparent; padding: 4px; color: var(--muted); }
.search-clear:hover { color: var(--red); }
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--paper-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .6rem;
  line-height: 1;
}
.search-esc { flex: none; }
.search-meta { padding: 13px 24px; color: var(--muted); font-size: .66rem; letter-spacing: .08em; border-bottom: 1px solid var(--line); }
.search-results { max-height: 54vh; overflow-y: auto; overscroll-behavior: contain; }
.search-result {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px 24px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  transition: background .15s;
}
.search-result:hover, .search-result.is-active { background: var(--paper-2); }
.search-result__thumb { width: 64px; height: 52px; object-fit: cover; border: 1px solid var(--line); background: var(--paper-2); }
.search-result__cat { color: var(--red); font-size: .58rem; letter-spacing: .12em; }
.search-result__title { margin: 2px 0 3px; font-family: var(--serif); font-size: 1.02rem; line-height: 1.4; }
.search-result__snippet { color: var(--muted); font-size: .7rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.search-result mark { background: rgba(90, 153, 188, .35); color: var(--ink); padding: 0 1px; }
.search-result__arrow { color: var(--muted); }
.search-empty { padding: 58px 24px; text-align: center; }
.search-empty .icon { width: 34px; height: 34px; color: var(--muted); margin-bottom: 12px; }
.search-empty h3 { font-size: 1.25rem; margin-bottom: 6px; }
.search-empty p { color: var(--muted); font-size: .78rem; }
.search-tips { display: flex; gap: 20px; padding: 12px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .6rem; letter-spacing: .06em; }
.search-tips span { display: inline-flex; align-items: center; gap: 5px; }

/* =========================================================
   Lightbox
   ========================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 30, 45, .92);
  padding: 40px 80px;
}
.lightbox[hidden] { display: none; }
.lightbox__figure { max-width: min(1200px, 88vw); max-height: 86vh; display: flex; flex-direction: column; align-items: center; }
.lightbox__figure img { max-width: 100%; max-height: 78vh; object-fit: contain; border: 1px solid rgba(255, 255, 255, .15); }
.lightbox__figure figcaption { margin-top: 14px; color: rgba(255, 255, 255, .7); font-size: .76rem; letter-spacing: .08em; text-align: center; }
.lightbox__close, .lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: var(--cream);
  border-radius: 50%;
  transition: background .2s, border-color .2s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }
.lightbox__close { top: 24px; right: 24px; width: 44px; height: 44px; }
.lightbox__nav { top: 50%; width: 48px; height: 48px; transform: translateY(-50%); }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }
.lightbox__count { position: absolute; left: 24px; bottom: 22px; color: rgba(255, 255, 255, .45); font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; }

/* =========================================================
   Mobile menu / toast
   ========================================================= */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 30px;
  background: var(--green-900);
  color: var(--cream);
  overflow-y: auto;
  animation: menuIn .4s var(--ease) both;
}
.mobile-menu[hidden] { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.mobile-menu__label { font-size: .66rem; letter-spacing: .2em; color: rgba(255, 255, 255, .5); }
.mobile-menu .icon-button { color: var(--cream); }
.mobile-nav { display: flex; flex-direction: column; margin: 12px 0 30px; }
.mobile-nav a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--serif);
  font-size: 1.55rem;
  letter-spacing: .06em;
}
.mobile-nav a span { font-family: var(--mono); font-size: .58rem; color: var(--gold); letter-spacing: .1em; }
.mobile-nav a:active { color: var(--gold); }
.mobile-menu__foot { margin-top: auto; }
.mobile-menu__foot p { margin: 22px 0 0; color: rgba(255, 255, 255, .35); font-size: .64rem; letter-spacing: .12em; }
.mobile-menu__edit { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; color: rgba(255, 255, 255, .62); font-size: .74rem; }
.mobile-menu__edit .icon { width: 14px; height: 14px; }

.toast-stack { position: fixed; left: 50%; bottom: 26px; z-index: 800; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  background: var(--green-950);
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: var(--shadow-sm);
  font-size: .76rem;
  letter-spacing: .04em;
  animation: toastIn .3s var(--ease) both;
}
.toast.is-error { background: var(--red-dark); }
.toast .icon { width: 14px; height: 14px; color: var(--gold); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* =========================================================
   Reveal + page transitions
   ========================================================= */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

.page-enter { animation: pageIn .5s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.noscript { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: 14px; background: var(--red); color: var(--cream); text-align: center; font-size: .8rem; }


/* =========================================================
   Admin
   ========================================================= */

body.is-admin { background: #EFE6D5; }
body.is-admin .site-header,
body.is-admin .site-footer,
body.is-admin .paper-grain { display: none; }
body.is-admin .reading-progress { display: none; }

.admin-shell { min-height: 100vh; display: flex; flex-direction: column; }

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 64px;
  padding: 0 26px;
  background: var(--green-950);
  color: var(--cream);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.admin-topbar__brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: .95rem; letter-spacing: .08em; }
.admin-topbar__brand img { width: 30px; height: 30px; border-radius: 5px; }
.admin-topbar__tag { padding: 3px 8px; border: 1px solid rgba(90, 153, 188, .45); border-radius: 3px; color: var(--gold); font-family: var(--mono); font-size: .54rem; letter-spacing: .14em; }
.admin-topbar__spacer { flex: 1; }
.admin-topbar__link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: rgba(255, 255, 255, .72); font-size: .72rem; transition: color .2s; cursor: pointer; }
.admin-topbar__link:hover { color: var(--gold); }
.admin-topbar__link .icon { width: 14px; height: 14px; }

.admin-login {
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: calc(100vh - 64px);
}
.admin-login__art {
  position: relative;
  background: var(--green-900);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 48px;
}
.admin-login__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .68; }
.admin-login__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(11, 36, 28, .85)); }
.admin-login__art-text { position: relative; z-index: 1; color: var(--cream); }
.admin-login__art-text p { margin: 0 0 10px; color: var(--gold); font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; }
.admin-login__art-text h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.admin-login__art-text span { display: block; margin-top: 12px; color: rgba(255, 255, 255, .55); font-size: .76rem; }
.admin-login__form-wrap { display: grid; place-items: center; padding: 40px; }
.admin-login__card { width: min(390px, 100%); }
.admin-login__seal { width: 52px; height: 52px; border-radius: 8px; margin-bottom: 26px; }
.admin-login__card h1 { font-size: 2rem; margin-bottom: 8px; }
.admin-login__card > p { color: var(--muted); font-size: .82rem; line-height: 1.8; margin-bottom: 30px; }
.admin-login__hint { margin-top: 20px; color: var(--muted); font-size: .66rem; line-height: 1.8; }
.admin-login__error { margin-top: 12px; color: var(--red); font-size: .74rem; }

.admin-body { flex: 1; display: grid; grid-template-columns: 218px 1fr; min-height: calc(100vh - 64px); }
.admin-sidebar { background: var(--paper-2); border-right: 1px solid var(--line); padding: 26px 16px; }
.admin-sidebar__label { padding: 0 10px; margin-bottom: 10px; color: var(--muted); font-family: var(--mono); font-size: .56rem; letter-spacing: .16em; }
.admin-nav { display: flex; flex-direction: column; gap: 3px; margin-bottom: 30px; }
.admin-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--ink-soft);
  font-size: .8rem;
  transition: background .2s, color .2s;
}
.admin-nav button .icon { width: 17px; height: 17px; color: var(--muted); }
.admin-nav button:hover { background: rgba(24, 52, 74, .05); }
.admin-nav button.is-active { background: var(--green-900); color: var(--cream); }
.admin-nav button.is-active .icon { color: var(--gold); }
.admin-sidebar__foot { padding: 14px 10px 0; border-top: 1px solid var(--line); }
.admin-sidebar__foot button { display: flex; align-items: center; gap: 7px; border: 0; background: transparent; padding: 4px 0; color: var(--muted); font-size: .7rem; }
.admin-sidebar__foot button:hover { color: var(--red); }
.admin-sidebar__foot .icon { width: 14px; height: 14px; }

.admin-main { padding: 32px 36px 70px; min-width: 0; }
.admin-main__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.admin-main__head h1 { font-size: 1.8rem; }
.admin-main__head p { margin: 4px 0 0; color: var(--muted); font-size: .74rem; }
.admin-main__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.admin-stat { padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); }
.admin-stat span { display: block; color: var(--muted); font-size: .6rem; letter-spacing: .12em; }
.admin-stat strong { display: block; margin-top: 4px; font-family: var(--serif); font-size: 1.9rem; font-weight: 500; color: var(--green-700); }

.admin-panel { background: var(--paper); border: 1px solid var(--line); }
.admin-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.admin-panel__head h2 { font-size: 1rem; }
.admin-panel__head span { color: var(--muted); font-size: .68rem; }
.admin-panel__tools { display: flex; align-items: center; gap: 10px; }
.admin-search { width: 220px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--white); font-size: .72rem; outline: none; }
.admin-search:focus { border-color: var(--green-700); }
.admin-list { display: flex; flex-direction: column; }
.admin-row {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  transition: background .2s;
}
.admin-row:last-child { border-bottom: 0; }
.admin-row:hover { background: rgba(24, 52, 74, .025); }
.admin-row__thumb { width: 78px; height: 56px; object-fit: cover; border: 1px solid var(--line); background: var(--paper-2); }
.admin-row__thumb[src$="logo.svg"] { object-fit: contain; padding: 7px; }
.admin-row__body { min-width: 0; }
.admin-row__title { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: .98rem; }
.admin-row__badge { padding: 2px 6px; border: 1px solid rgba(23, 109, 168, .35); border-radius: 3px; color: var(--red); font-family: var(--sans); font-size: .52rem; letter-spacing: .08em; }
.admin-row__meta { margin-top: 3px; color: var(--muted); font-size: .62rem; letter-spacing: .04em; }
.admin-row__actions { display: flex; gap: 4px; }
.admin-row__actions button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 4px; }
.admin-row__actions button:hover { border-color: var(--line); background: var(--paper-2); color: var(--ink); }
.admin-row__actions button.is-danger:hover { color: var(--red); border-color: rgba(23, 109, 168, .3); }
.admin-row__actions .icon { width: 15px; height: 15px; }

.admin-empty { padding: 60px 20px; text-align: center; color: var(--muted); font-size: .8rem; }

.admin-form { padding: 24px; max-width: 820px; }
.admin-field { margin-bottom: 18px; }
.admin-field label { display: block; margin-bottom: 6px; color: var(--ink-soft); font-size: .7rem; letter-spacing: .06em; }
.admin-field label span { color: var(--muted); font-size: .62rem; }
.admin-field input[type="text"], .admin-field input[type="password"], .admin-field input[type="date"], .admin-field input[type="url"], .admin-field textarea, .admin-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--white);
  outline: none;
  font-size: .84rem;
  transition: border-color .2s, box-shadow .2s;
}
.admin-field input:focus, .admin-field textarea:focus, .admin-field select:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(23, 109, 168, .1); }
.admin-field textarea { resize: vertical; min-height: 120px; line-height: 1.8; }
.admin-field textarea.is-body { min-height: 320px; font-family: var(--serif); font-size: .92rem; }
.admin-field__hint { margin: 5px 0 0; color: var(--muted); font-size: .62rem; line-height: 1.6; }
.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.admin-check { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink-soft); }
.admin-check input { width: 15px; height: 15px; accent-color: var(--green-700); }

.admin-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; padding: 6px; border: 1px solid var(--line); background: var(--paper-2); }
.admin-toolbar button { padding: 4px 8px; border: 1px solid transparent; background: transparent; color: var(--ink-soft); font-size: .66rem; border-radius: 3px; }
.admin-toolbar button:hover { background: var(--paper); border-color: var(--line); }

.image-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.image-picker__item { position: relative; width: 120px; height: 86px; border: 1px solid var(--line); background: var(--paper-2); overflow: hidden; }
.image-picker__item img { width: 100%; height: 100%; object-fit: cover; }
.image-picker__item button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(11, 36, 28, .8); color: var(--cream); display: grid; place-items: center; font-size: .7rem; }
.image-picker__add { width: 120px; height: 86px; border: 1px dashed var(--line-strong); background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: .6rem; }
.image-picker__add:hover { border-color: var(--green-700); color: var(--green-700); }

.admin-actions { display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); margin-top: 10px; }
.admin-actions__spacer { flex: 1; }
.admin-danger { color: var(--red); border-color: rgba(23, 109, 168, .35); }
.admin-danger:hover { background: var(--red); border-color: var(--red); color: var(--paper); }

.admin-editor {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: #EFE6D5;
  overflow: hidden;
  animation: editorIn .3s var(--ease) both;
}
@keyframes editorIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.admin-editor__top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.admin-editor__top h2 { font-size: 1.1rem; }
.admin-editor__top .admin-topbar__spacer { flex: 1; }
.admin-editor__body { flex: 1; overflow-y: auto; padding: 24px; }
.admin-editor__inner { max-width: 880px; margin: 0 auto; }
.admin-editor__foot { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 14px 24px; background: rgba(250, 246, 236, .96); border-top: 1px solid var(--line); backdrop-filter: blur(8px); }

.admin-login .admin-field input { height: 48px; }
.admin-login .button { width: 100%; margin-top: 4px; }

.admin-placeholder { padding: 70px 24px; text-align: center; color: var(--muted); font-size: .8rem; border: 1px dashed var(--line-strong); }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1180px) {
  .container, .header-inner, .hero__inner { width: min(var(--container), calc(100% - 48px)); }
  .hero__title { font-size: clamp(4rem, 10.4vw, 7.4rem); }
  .hero__visual { min-height: 500px; }
  .main-nav { gap: 22px; }
  .article-layout { grid-template-columns: 120px minmax(0, 680px) 120px; gap: 26px; }
}

@media (max-width: 1024px) {
  :root { --header-h: 70px; }
  .main-nav, .edit-link span { display: none; }
  .edit-link { width: 40px; height: 40px; padding: 0; border-color: transparent; justify-content: center; }
  .edit-link:hover { background: rgba(24, 52, 74, .06); color: var(--ink); border-color: var(--line); }
  .menu-button { display: flex; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 36px); }
  .hero__inner { grid-template-columns: 1fr; gap: 10px; padding: 34px 0 70px; }
  .hero__copy { max-width: 760px; }
  .hero__title { font-size: clamp(4rem, 13vw, 8rem); }
  .hero__visual { min-height: 480px; width: min(560px, 100%); margin: 20px auto 0; }
  .hero__ghost { font-size: 92vw; right: -22vw; bottom: 4vh; opacity: .7; }
  .hero__scroll, .hero__side-note { display: none; }
  .intro-grid { grid-template-columns: 1fr; gap: 46px; }
  .intro-quote { max-width: 760px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-grid { grid-template-columns: 1fr; }
  .featured-side { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .featured-side .memory-card { flex-direction: column; }
  .featured-side .memory-card__media { width: 100%; aspect-ratio: 4 / 3; }
  .featured-side .memory-card__body { width: 100%; }
  .archive-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { columns: 2; }
  .cta__inner { grid-template-columns: 1fr; gap: 30px; padding: 74px 0; }
  .cta__actions { justify-self: start; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .footer-main { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer-col--address { grid-column: 1 / -1; }
  .about-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-hero-art { max-width: 620px; }
  .article-layout { grid-template-columns: 1fr; max-width: 760px; gap: 0; }
  .article-aside { display: flex; align-items: center; justify-content: space-between; padding: 0 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
  .article-aside--right { display: none; }
  .article-aside__label { margin: 0; }
  .about-section__grid { grid-template-columns: 170px 1fr; gap: 30px; }
  .school-line { grid-template-columns: repeat(2, 1fr); }
  .admin-body { grid-template-columns: 1fr; }
  .admin-sidebar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .admin-sidebar__label, .admin-sidebar__foot { display: none; }
  .admin-nav { flex-direction: row; margin: 0; gap: 4px; }
  .admin-nav button { white-space: nowrap; }
  .admin-main { padding: 24px 20px 60px; }
}

@media (max-width: 760px) {
  .container, .header-inner, .hero__inner { width: calc(100% - 36px); }
  .section { padding: 74px 0; }
  .section--tight { padding: 54px 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 34px; }
  .section-head__note { max-width: 100%; }
  .brand__text small { display: none; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__text strong { font-size: 1.02rem; }
  .header-actions { gap: 2px; margin-left: auto; }
  .icon-button { width: 36px; height: 36px; }
  .edit-link { display: none; }
  .hero__title { font-size: clamp(3.6rem, 18vw, 6rem); }
  .hero__copy .eyebrow { margin-bottom: 24px; }
  .hero__intro { font-size: .95rem; }
  .hero__actions { margin-top: 28px; }
  .hero__actions .button { flex: 1; min-width: 0; padding: 0 16px; }
  .hero__meta { margin-top: 32px; }
  .hero__meta div { padding: 0 14px; }
  .hero__meta dd { font-size: .92rem; }
  .hero__visual { min-height: 400px; margin-top: 10px; }
  .student-card { width: 72%; left: 2%; top: 0; }
  .student-card__name { font-size: 1.1rem; }
  .polaroid { width: 52%; right: 0; bottom: 4%; }
  .hero-stamp { width: 88px; height: 88px; bottom: 12%; }
  .hero-stamp__inner strong { font-size: 1.1rem; }
  .intro-quote { font-size: clamp(1.9rem, 7vw, 2.7rem); }
  .intro-quote::before { left: -0.4em; }
  .intro-facts div { padding-right: 10px; }
  .intro-facts dt { font-size: 1.4rem; }
  .category-card { min-height: 200px; padding: 20px; }
  .category-card__name { font-size: 1.25rem; margin-top: 24px; }
  .category-card__desc { font-size: .68rem; }
  .featured-side { grid-template-columns: 1fr; }
  .featured-side .memory-card { flex-direction: row; }
  .featured-side .memory-card__media { width: 38%; aspect-ratio: auto; }
  .featured-side .memory-card__body { width: 62%; }
  .timeline-strip__item { flex-basis: 150px; padding: 24px 18px; }
  .timeline-strip__year { font-size: 1.6rem; }
  .gallery-strip { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 14px; scroll-snap-type: x mandatory; }
  .gallery-strip__item { flex: 0 0 62%; aspect-ratio: 4 / 5 !important; transform: none !important; scroll-snap-align: start; }
  .cta h2 { font-size: clamp(2rem, 9vw, 3rem); }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 30px; padding-bottom: 36px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col--address { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
  .page-hero { padding-top: calc(var(--header-h) + 46px); }
  .page-hero__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .page-hero__aside { flex-direction: row; align-items: baseline; gap: 10px; }
  .page-hero__count { font-size: 2.6rem; }
  .page-hero h1 { font-size: clamp(2.4rem, 11vw, 4rem); }
  .archive-toolbar { flex-wrap: wrap; gap: 10px; }
  .archive-search { flex-basis: 100%; }
  .archive-sort { margin-left: auto; }
  .archive-grid { grid-template-columns: 1fr; gap: 18px; }
  .gallery-grid { columns: 2; column-gap: 10px; }
  .gallery-item { margin-bottom: 10px; }
  .gallery-item__caption { padding: 8px 9px; font-size: .6rem; }
  .gallery-item__caption span:last-child { display: none; }
  .timeline-year { grid-template-columns: 1fr; gap: 16px; padding: 30px 0; }
  .timeline-year__side { position: static; display: flex; align-items: baseline; gap: 12px; }
  .timeline-year__num { font-size: 3rem; }
  .timeline-year__label { margin: 0; }
  .timeline-year__entries { padding-left: 22px; }
  .timeline-year__entries::before { left: 2px; }
  .timeline-entry { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .timeline-entry::before { left: -25px; top: 22px; }
  .timeline-entry__date { padding: 0; }
  .timeline-entry__title { font-size: 1.18rem; }
  .article-hero { padding-top: calc(var(--header-h) + 40px); }
  .article-head { text-align: left; }
  .article-head .breadcrumb, .article-meta { justify-content: flex-start; }
  .article-title { font-size: clamp(1.8rem, 7.4vw, 2.7rem); }
  .article-cover { margin-top: 28px; aspect-ratio: 4 / 3; }
  .article-layout { margin-top: 32px; }
  .article-body { font-size: 1rem; line-height: 1.95; }
  .article-body > p:first-of-type::first-letter { font-size: 3.2em; }
  .article-gallery { grid-template-columns: 1fr; }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav .is-next { text-align: left; }
  .about-hero-grid { padding-top: calc(var(--header-h) + 40px); }
  .about-section__grid { grid-template-columns: 1fr; gap: 14px; }
  .fact-grid { grid-template-columns: 1fr 1fr; }
  .search-overlay { padding: 0; background: var(--paper); }
  .search-panel { width: 100%; min-height: 100vh; border: 0; box-shadow: none; }
  .search-bar { padding: 16px 18px; position: sticky; top: 0; background: var(--paper); z-index: 2; }
  .search-bar input { font-size: 1.1rem; }
  .search-esc { display: none; }
  .search-results { max-height: none; }
  .search-result { padding: 12px 18px; grid-template-columns: 52px 1fr; }
  .search-result__thumb { width: 52px; height: 44px; }
  .search-result__arrow { display: none; }
  .search-meta, .search-tips { padding-left: 18px; padding-right: 18px; }
  .search-tips { position: fixed; bottom: 0; left: 0; right: 0; background: var(--paper); }
  .lightbox { padding: 20px; }
  .lightbox__nav { width: 38px; height: 38px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__close { top: 10px; right: 10px; }
  .lightbox__figure { max-width: 100%; }
  .admin-login { grid-template-columns: 1fr; }
  .admin-login__art { display: none; }
  .admin-login__form-wrap { padding: 28px 22px; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .admin-main__head { flex-direction: column; align-items: flex-start; }
  .admin-row { grid-template-columns: 56px 1fr auto; gap: 10px; padding: 10px 12px; }
  .admin-row__thumb { width: 56px; height: 44px; }
  .admin-row__actions button { width: 28px; height: 28px; }
  .admin-grid-2, .admin-grid-3 { grid-template-columns: 1fr; }
  .admin-editor__body { padding: 16px; }
  .admin-form { padding: 16px; }
}

@media (max-width: 480px) {
  .container, .header-inner, .hero__inner { width: calc(100% - 28px); }
  .hero__title { font-size: 20vw; }
  .hero__title .num small { font-size: .14em; }
  .hero__meta div { padding: 0 10px; }
  .hero__meta dt { font-size: .56rem; }
  .hero__meta dd { font-size: .82rem; }
  .hero__visual { min-height: 350px; }
  .student-card { width: 76%; }
  .polaroid { width: 48%; }
  .hero-stamp { display: none; }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .category-card { min-height: 172px; padding: 16px; }
  .category-card__icon { width: 26px; height: 26px; }
  .category-card__name { font-size: 1.1rem; }
  .category-card__desc { display: none; }
  .category-card__foot { margin-top: 16px; font-size: .6rem; }
  .memory-card--featured .memory-card__body { padding: 20px; }
  .memory-card--featured .memory-card__title { font-size: 1.45rem; }
  .featured-side .memory-card__media { width: 34%; }
  .featured-side .memory-card__body { width: 66%; padding: 16px; }
  .featured-side .memory-card__title { font-size: 1.02rem; }
  .featured-side .memory-card__excerpt { display: none; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-col--address { grid-column: auto; }
  .fact-grid { grid-template-columns: 1fr; }
  .admin-stats { grid-template-columns: 1fr; }
}

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


/* =========================================================
   Memoir wall additions (2026 content)
   ========================================================= */

.category-grid { grid-template-columns: repeat(3, 1fr); }

.memory-card__media--text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 132px;
  min-height: 0;
  padding: 18px 20px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  background: linear-gradient(155deg, color-mix(in srgb, var(--cat-color) 16%, var(--paper)) 0%, var(--paper) 72%);
}
.memory-card__quote {
  position: absolute;
  right: 12px;
  top: -26px;
  font-family: Georgia, var(--serif);
  font-size: 7rem;
  line-height: 1;
  color: var(--cat-color);
  opacity: .13;
  pointer-events: none;
}
.memory-card__glyph {
  position: absolute;
  right: 12px;
  bottom: 2px;
  z-index: 0;
  color: var(--cat-color);
  font-family: var(--serif);
  font-size: 5.2rem;
  line-height: 1;
  opacity: .10;
  pointer-events: none;
}
.memory-card--featured .memory-card__glyph { font-size: 7.5rem; bottom: 14px; right: 22px; opacity: .09; }
.featured-side .memory-card__glyph { font-size: 3.4rem; bottom: 8px; right: 10px; }
.memory-card__catmark {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--cat-color) 36%, transparent);
  border-radius: 999px;
  color: var(--cat-color);
  font-size: .6rem;
  letter-spacing: .14em;
}
.memory-card__stamp {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  color: color-mix(in srgb, var(--cat-color) 55%, var(--muted));
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .16em;
}
.memory-card--featured .memory-card__media--text { height: 300px; min-height: 0; aspect-ratio: auto; }
.memory-card--featured .memory-card__quote { font-size: 13rem; top: -34px; }
.featured-side .memory-card__media--text { width: 42%; height: auto; min-height: 100%; aspect-ratio: auto; align-self: stretch; }
.featured-side .memory-card__quote { font-size: 6rem; }

.chapter-list { border-top: 1px solid var(--line-strong); }
.chapter-block { padding: 46px 0 54px; border-bottom: 1px solid var(--line); }
.chapter-block__head { display: grid; grid-template-columns: 112px 1fr auto; align-items: end; gap: 22px; }
.chapter-block__num {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 6vw, 5.4rem);
  line-height: .78;
  letter-spacing: -.05em;
  color: var(--red);
}
.chapter-block__kicker { display: block; margin-bottom: 8px; color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .18em; }
.chapter-block__title h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); letter-spacing: -.02em; }
.chapter-block__count { align-self: center; color: var(--muted); font-size: .68rem; letter-spacing: .1em; white-space: nowrap; }
.chapter-block__question { margin: 16px 0 28px 134px; color: var(--muted); font-family: var(--serif); font-size: 1.02rem; line-height: 1.8; }
.chapter-block__grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 48px; margin-left: 134px; }
.chapter-block__samples { border-top: 1px solid var(--line); }
.chapter-sample { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); transition: padding .25s var(--ease), background .25s; }
.chapter-sample:hover { padding-left: 8px; background: rgba(24, 52, 74, .025); }
.chapter-sample img, .chapter-sample__mark { width: 88px; height: 66px; object-fit: cover; border: 1px solid var(--line); background: var(--paper-2); }
.chapter-sample__mark { display: grid; place-items: center; color: var(--red); font-family: Georgia, var(--serif); font-size: 2.4rem; line-height: 1; }
.chapter-sample__body { min-width: 0; }
.chapter-sample__body strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--serif); font-size: 1.04rem; font-weight: 600; }
.chapter-sample__body small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; color: var(--muted); font-size: .7rem; line-height: 1.6; }
.chapter-block__aside { padding-top: 18px; }
.chapter-block__aside p { color: var(--muted); font-size: .84rem; line-height: 1.9; }
.chapter-block__aside .text-link { margin-top: 10px; }

.article-empty { padding: 26px 0 40px; color: var(--muted); font-family: var(--serif); font-size: 1.1rem; text-align: center; }

.image-picker__item { height: auto; overflow: hidden; }
.image-picker__item img { height: 86px; }
.image-caption-input {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--white);
  padding: 4px 5px;
  font-size: .58rem;
  outline: none;
}
.image-caption-input:focus { background: var(--paper-2); }

@media (max-width: 1024px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .chapter-block__head { grid-template-columns: 80px 1fr auto; }
  .chapter-block__question { margin-left: 102px; }
  .chapter-block__grid { margin-left: 102px; gap: 30px; }
}

@media (max-width: 760px) {
  .memory-card__media--text { height: 116px; }
  .chapter-block { padding: 34px 0 40px; }
  .chapter-block__head { grid-template-columns: 58px 1fr; gap: 14px; }
  .chapter-block__num { font-size: 3rem; }
  .chapter-block__count { grid-column: 2; justify-self: start; align-self: start; }
  .chapter-block__question { margin: 12px 0 22px; font-size: .9rem; }
  .chapter-block__grid { grid-template-columns: 1fr; margin-left: 0; gap: 20px; }
  .chapter-sample { grid-template-columns: 68px 1fr; gap: 12px; }
  .chapter-sample img, .chapter-sample__mark { width: 68px; height: 54px; }
  .chapter-block__aside { padding-top: 0; border-top: 1px solid var(--line); padding-top: 16px; }
}

@media (max-width: 480px) {
  .category-grid { grid-template-columns: 1fr 1fr; }
  .memory-card__media--text { height: 104px; padding: 14px 16px; }
  .memory-card__stamp { display: none; }
  .featured-side .memory-card__media--text { width: 34%; }
}


/* search result text placeholder */
.search-result__thumb--text {
  display: grid;
  place-items: center;
  color: var(--c);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 14%, var(--paper)), var(--paper));
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }


/* mobile admin compaction */
@media (max-width: 640px) {
  .admin-topbar { height: 56px; padding: 0 12px; gap: 8px; }
  .admin-topbar__brand { font-size: .82rem; gap: 6px; white-space: nowrap; }
  .admin-topbar__brand img { width: 26px; height: 26px; }
  .admin-topbar__tag { display: none; }
  .admin-topbar__link { font-size: .62rem; gap: 3px; white-space: nowrap; }
  .admin-topbar__link .icon { width: 12px; height: 12px; }
  .admin-main { padding: 18px 12px 60px; }
  .admin-main__head h1 { font-size: 1.5rem; }
  .admin-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .admin-stat { padding: 14px 12px; }
  .admin-stat strong { font-size: 1.5rem; }
  .admin-panel__head { flex-wrap: wrap; }
  .admin-panel__tools { width: 100%; }
  .admin-search { flex: 1; width: auto; min-width: 0; }
  .admin-sidebar { padding: 6px 10px; }
  .admin-nav button { padding: 8px 9px; font-size: .72rem; }
}


/* =========================================================
   UI pass: design-engineering refinement
   ========================================================= */

:root {
  --muted: #5F6055;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --dur-overlay: 320ms;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}

html { color-scheme: light; }
body { caret-color: var(--red); }
* { scrollbar-width: thin; scrollbar-color: rgba(23, 109, 168, .32) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(23, 109, 168, .3); border: 3px solid var(--paper); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(23, 109, 168, .5); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { text-underline-offset: .18em; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.search-bar input::placeholder,
.archive-search input::placeholder,
.admin-search::placeholder,
.admin-field input::placeholder,
.admin-field textarea::placeholder { color: #6F6F62; opacity: 1; }

/* ---------- Hero: real photographs, one authored entrance ---------- */

.hero { padding-top: calc(var(--header-h) + 22px); }
.hero__title {
  font-size: clamp(3.8rem, 8.6vw, 7.6rem);
  letter-spacing: -.035em;
  margin-bottom: 18px;
  animation: rise 700ms 60ms var(--ease-out) both;
}
.hero__sub {
  margin: 0;
  color: var(--muted);
  font-size: .74rem;
  letter-spacing: .16em;
  animation: rise 700ms 120ms var(--ease-out) both;
}
.hero__intro {
  margin-top: 24px;
  max-width: 35em;
  animation: rise 700ms 180ms var(--ease-out) both;
}
.hero__actions { margin-top: 30px; animation: rise 700ms 240ms var(--ease-out) both; }
.hero__meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 34px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  animation: rise 700ms 300ms var(--ease-out) both;
}
.hero__meta-line span { padding: 0 16px; border-left: 1px solid var(--line); line-height: 1.6; }
.hero__meta-line span:first-child { padding-left: 0; border-left: 0; }

.hero__visual { min-height: 610px; }
.student-card.hero-photo--1 { left: 0; top: 20px; width: min(340px, 72%); z-index: 3; }
.polaroid--track { right: -4%; top: -14px; bottom: auto; width: min(300px, 56%); z-index: 5; }
.polaroid--court { left: 2%; right: auto; bottom: -10px; width: min(210px, 40%); z-index: 6; }

.hero-photo--1 { --rot: -4deg; }
.hero-photo--2 { --rot: 4.5deg; }
.hero-photo--3 { --rot: -3deg; }
.hero-photo {
  opacity: 1;
  transform: rotate(var(--rot));
  animation: photoIn 760ms var(--ease-out) backwards;
}
.hero-photo--1 { animation-delay: 80ms; }
.hero-photo--2 { animation-delay: 220ms; }
.hero-photo--3 { animation-delay: 340ms; }
@keyframes photoIn {
  from { opacity: 0; transform: translateY(18px) scale(.965) rotate(var(--rot)); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rot)); }
}
.student-card.hero-photo--1:hover { transform: rotate(-1.5deg) translateY(-4px); }
.polaroid--track:hover { transform: rotate(2.5deg) translateY(-4px); }
.polaroid--court:hover { transform: rotate(-1deg) translateY(-4px); }
.student-card__photo img, .polaroid img { filter: saturate(1.02) contrast(1.01); }

.address-strip {
  background: var(--green-900);
  color: var(--cream);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.address-strip .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.address-strip span {
  padding: 15px 24px;
  border-left: 1px solid rgba(255, 255, 255, .16);
  font-size: .67rem;
  letter-spacing: .16em;
  white-space: nowrap;
}
.address-strip span:first-child { border-left: 0; padding-left: 0; }
.address-strip span:nth-child(2) { color: var(--gold); }

/* ---------- Chapter index: a table of contents, not cards ---------- */

.chapter-index__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 34px;
}
.chapter-index__head h2 { font-size: clamp(2.5rem, 5vw, 4.4rem); letter-spacing: -.035em; }
.chapter-index__head p { max-width: 310px; color: var(--muted); font-size: .84rem; line-height: 1.9; }
.chapter-index { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); }
.chapter-index__item {
  display: grid;
  grid-template-columns: 64px 1fr auto 24px;
  align-items: center;
  gap: 18px;
  padding: 24px 18px;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.chapter-index__item:nth-child(odd) { border-right: 1px solid var(--line); }
.chapter-index__item:hover { background: var(--green-900); color: var(--cream); }
.chapter-index__num {
  font-family: var(--serif);
  font-size: 2.15rem;
  line-height: 1;
  color: var(--red);
  transition: color var(--dur-base) var(--ease-out);
}
.chapter-index__item:hover .chapter-index__num { color: var(--gold); }
.chapter-index__body { min-width: 0; }
.chapter-index__body strong { display: block; font-family: var(--serif); font-size: 1.32rem; font-weight: 600; letter-spacing: .02em; }
.chapter-index__body small { display: block; margin-top: 4px; color: var(--muted); font-size: .72rem; line-height: 1.7; transition: color var(--dur-base); }
.chapter-index__item:hover .chapter-index__body small { color: rgba(255, 255, 255, .65); }
.chapter-index__meta { color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; transition: color var(--dur-base); }
.chapter-index__item:hover .chapter-index__meta { color: rgba(255, 255, 255, .55); }
.chapter-index__arrow { color: var(--muted); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base); }
.chapter-index__item:hover .chapter-index__arrow { transform: translateX(4px); color: var(--gold); }

/* ---------- Featured: quote, photo, note ---------- */

.memory-card--quote .memory-card__body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 34px;
}
.memory-card__pull {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 18px 0;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.35vw, 2.05rem);
  line-height: 1.58;
  letter-spacing: -.01em;
  color: var(--ink);
}
.memory-card--quote .memory-card__foot {
  align-items: flex-end;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.memory-card--quote .memory-card__title { margin: 0; font-size: 1.2rem; line-height: 1.5; }
.memory-card--quote:hover .memory-card__pull { color: var(--green-700); }
.memory-card--plain .memory-card__body { padding: 24px; }
.memory-card--plain .memory-card__title { margin-top: 12px; }
.memory-card--plain .memory-card__excerpt { -webkit-line-clamp: 4; }
.featured-side .memory-card--plain .memory-card__body { padding: 22px; }
.featured-side .memory-card--plain .memory-card__excerpt { -webkit-line-clamp: 3; }

/* ---------- Archive: index list + card view ---------- */

.archive-view {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.archive-view button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.archive-view button:hover { color: var(--ink); }
.archive-view button.is-active { background: var(--green-900); color: var(--paper); }
.archive-view .icon { width: 15px; height: 15px; }

.memory-list { border-top: 1px solid var(--line-strong); }
.memory-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 104px 54px;
  align-items: center;
  gap: 18px;
  padding: 15px 8px;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-base) var(--ease-out);
}
.memory-row:hover { background: var(--paper-2); }
.memory-row__index { color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.memory-row__body { min-width: 0; }
.memory-row__meta { display: block; color: var(--red); font-size: .6rem; letter-spacing: .1em; }
.memory-row__title { display: block; margin: 3px 0 3px; font-family: var(--serif); font-size: 1.18rem; font-weight: 600; line-height: 1.45; transition: color var(--dur-fast) ease; }
.memory-row:hover .memory-row__title { color: var(--red); }
.memory-row__excerpt { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: .76rem; line-height: 1.65; }
.memory-row__thumb { width: 104px; height: 72px; object-fit: cover; border: 1px solid var(--line); background: var(--paper-2); }
.memory-row__glyph {
  width: 104px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--c);
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 12%, var(--paper)), var(--paper));
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
  opacity: .8;
}
.memory-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; color: var(--muted); font-size: .58rem; letter-spacing: .06em; }
.memory-row__side .icon { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out), color var(--dur-base); }
.memory-row:hover .memory-row__side .icon { transform: translateX(3px); color: var(--red); }

/* ---------- About: photo-led, no decorative labels ---------- */

.about-hero-art { transform: rotate(1deg); }
.about-hero-art img { aspect-ratio: 4 / 3; object-fit: cover; }
.about-preface-title { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); line-height: 1.8; }
.about-source { margin-top: 16px; color: var(--muted); font-size: .78rem; line-height: 1.8; }
.privacy-box { padding: 26px; border: 1px solid var(--line); background: var(--paper-2); }
.privacy-box h3 { margin-bottom: 10px; }
.article-body blockquote { border-left: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; }

/* ---------- Footer contrast + numerals ---------- */

.footer-kicker, .footer-col h3 { color: rgba(255, 255, 255, .62); }
.footer-bottom { color: rgba(255, 255, 255, .58); }
.footer-coord { color: rgba(255, 255, 255, .52) !important; }
.hero__meta-line, .chapter-index__meta, .memory-row__index, .memory-row__side,
.timeline-strip__count, .admin-stat strong, .page-hero__count, .article-meta { font-variant-numeric: tabular-nums; }

/* ---------- Motion tokens applied ---------- */

.button {
  transition: background var(--dur-base) ease, color var(--dur-base) ease,
              border-color var(--dur-base) ease, transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: scale(.97); }
.icon-button { transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.icon-button:active { transform: scale(.94); }
.edit-link { transition: background var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease; }
.memory-card {
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease,
              border-color var(--dur-base) ease;
}
.memory-card:hover { transform: translateY(-3px); }
.memory-card__media img { transition: transform 320ms var(--ease-out); }
.memory-card:hover .memory-card__media img { transform: scale(1.02); }
.chip { transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.gallery-item img { transition: transform 320ms var(--ease-out), filter 320ms ease; }
.gallery-item:hover img { transform: scale(1.015); }
.main-nav a::after { transition: width var(--dur-base) var(--ease-out), left var(--dur-base) var(--ease-out); }
.page-enter { animation: pageIn 220ms var(--ease-out) both; }
.search-panel { animation: searchIn 200ms var(--ease-out) both; }
.mobile-menu { animation: menuIn 280ms var(--ease-drawer) both; }
.toast { animation: toastIn 220ms var(--ease-out) both; }
.lightbox { opacity: 0; transition: opacity 180ms ease; }
.lightbox.is-open { opacity: 1; }
.lightbox__figure { transform: scale(.975); transition: transform 220ms var(--ease-out); }
.lightbox.is-open .lightbox__figure { transform: scale(1); }
.lightbox__close, .lightbox__nav { transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, opacity 160ms ease; }

@media (hover: none) {
  .memory-card:hover { transform: none; }
  .memory-card:hover .memory-card__media img { transform: none; }
  .button:hover { transform: none; }
  .gallery-item:hover img { transform: none; }
}

/* ---------- Responsive refinements ---------- */

@media (max-width: 1180px) {
  .hero__visual { min-height: 570px; }
  .student-card.hero-photo--1 { width: min(320px, 72%); }
  .polaroid--track { width: min(280px, 56%); }
}

@media (max-width: 1024px) {
  .hero__visual { min-height: 540px; }
  .chapter-index__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .chapter-index__head p { max-width: 100%; }
  .chapter-index__item { grid-template-columns: 54px 1fr auto 20px; gap: 14px; padding: 20px 14px; }
  .chapter-index__body strong { font-size: 1.18rem; }
}

@media (max-width: 760px) {
  .hero__title { font-size: clamp(3.4rem, 17vw, 5.4rem); }
  .hero__sub { font-size: .66rem; letter-spacing: .12em; }
  .hero__meta-line { gap: 6px 0; margin-top: 26px; }
  .hero__meta-line span { padding: 0 10px; font-size: .64rem; }
  .hero__visual { min-height: 470px; }
  .student-card.hero-photo--1 { width: 76%; left: 0; top: 0; }
  .polaroid--track { width: 50%; right: -2%; top: -8px; }
  .polaroid--court { display: none; }
  .address-strip .container { grid-template-columns: 1fr 1fr; }
  .address-strip span { padding: 12px 14px; font-size: .6rem; }
  .address-strip span:nth-child(odd) { border-left: 0; padding-left: 0; }
  .chapter-index { grid-template-columns: 1fr; }
  .chapter-index__item:nth-child(odd) { border-right: 0; }
  .chapter-index__item { grid-template-columns: 48px 1fr auto 18px; padding: 18px 4px; }
  .chapter-index__num { font-size: 1.8rem; }
  .chapter-index__body small { font-size: .68rem; }
  .memory-row { grid-template-columns: 36px minmax(0, 1fr) 72px; gap: 12px; padding: 13px 2px; }
  .memory-row__thumb, .memory-row__glyph { width: 72px; height: 56px; }
  .memory-row__glyph { font-size: 1.6rem; }
  .memory-row__side { display: none; }
  .memory-row__excerpt { -webkit-line-clamp: 2; }
  .memory-row__title { font-size: 1.04rem; }
  .archive-view button { width: 28px; height: 28px; }
  .memory-card__pull { font-size: 1.35rem; }
  .memory-card--quote .memory-card__body { padding: 24px; }
}

@media (max-width: 480px) {
  .hero__visual { min-height: 410px; }
  .student-card.hero-photo--1 { width: 80%; }
  .polaroid--track { width: 46%; }
  .hero__meta-line span { padding: 0 8px; }
  .chapter-index__meta { display: none; }
  .address-strip .container { grid-template-columns: 1fr; }
  .address-strip span { border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none; opacity: 1; transform: rotate(var(--rot)); }
  .hero__title, .hero__sub, .hero__intro, .hero__actions, .hero__meta-line { animation: none; }
  .page-enter, .search-panel, .mobile-menu, .toast { animation: none; }
  .lightbox, .lightbox__figure { transition: none; }
}


/* focus visibility for borderless inputs */
.search-bar:focus-within, .archive-search:focus-within { box-shadow: inset 0 -2px 0 var(--red); }
.search-bar input:focus-visible, .archive-search input:focus-visible { outline: none; }
.memory-row:active { background: var(--paper-3); }
.archive-view button:active { transform: scale(.94); }
.memory-card:active { transform: scale(.995); }

@media (max-width: 760px) {
  .archive-toolbar { align-items: center; }
  .archive-view { margin-left: auto; }
  .archive-sort { margin-left: 0; }
  .memory-row__excerpt { -webkit-line-clamp: 2; }
}

.memory-row--note { grid-template-columns: 46px minmax(0, 1fr) 54px; }
.memory-row__blank { display: none; }
@media (max-width: 760px) {
  .memory-row--note { grid-template-columns: 36px minmax(0, 1fr); }
}

.student-card, .polaroid { transition: transform var(--dur-slow) var(--ease-out); }

@media (max-width: 760px) {
  .polaroid--track { right: 0; }
}
@media (max-width: 480px) {
  .address-strip .container { grid-template-columns: 1fr 1fr; }
  .address-strip span { padding: 11px 12px; font-size: .6rem; }
  .address-strip span:nth-child(odd) { border-left: 0; padding-left: 12px; }
  .address-strip span:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .16); }
}

.paper-grain { opacity: .13; }
.student-card__top { font-size: .67rem; }
.memory-card__meta, .memory-card__foot { font-size: .68rem; }
.memory-card__tag { font-size: .66rem; }
.memory-row__index { font-size: .64rem; }
.memory-row__meta { font-size: .66rem; }
.memory-row__side { font-size: .64rem; }
.chapter-index__meta { font-size: .66rem; }
.search-result__cat { font-size: .64rem; }
.search-result__snippet { font-size: .74rem; }
.search-meta, .search-tips { font-size: .68rem; }
.article-meta { font-size: .72rem; }
.footer-kicker { font-size: .62rem; }
.footer-bottom { font-size: .66rem; }


/* ---------- Campus page ---------- */

.campus-page { padding-bottom: 100px; }
.campus-lead { margin-top: 10px; border: 1px solid var(--line); background: var(--paper-2); }
.campus-lead img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.campus-lead figcaption { display: flex; gap: 18px; padding: 16px 20px; background: var(--paper); color: var(--muted); font-size: .8rem; line-height: 1.8; }
.campus-lead figcaption span { flex: none; color: var(--red); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; padding-top: 3px; }
.campus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.campus-grid figure { border: 1px solid var(--line); background: var(--paper); }
.campus-grid__wide { grid-column: 1 / -1; }
.campus-grid img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.campus-grid__wide img { aspect-ratio: 16 / 8.4; }
.campus-grid figcaption { padding: 12px 14px; color: var(--muted); font-size: .72rem; line-height: 1.7; }
.campus-grid figcaption span { margin-right: 8px; color: var(--red); font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; }
.campus-buildings { display: grid; grid-template-columns: 220px 1fr; gap: 50px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line-strong); }
.campus-buildings h2 { font-size: 1.8rem; }
.campus-buildings__group { display: grid; grid-template-columns: 106px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.campus-buildings__group span { color: var(--muted); font-size: .68rem; letter-spacing: .06em; padding-top: 4px; }
.campus-buildings__group p { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.campus-buildings__group em { font-style: normal; font-family: var(--serif); font-size: 1.05rem; }
.campus-buildings__note { margin-top: 20px; color: var(--muted); font-size: .8rem; line-height: 1.8; }
.campus-credit { margin-top: 42px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; line-height: 1.8; }

.campus-teaser { background: var(--paper-2); }
.campus-teaser__inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.campus-teaser__copy h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.15; letter-spacing: -.03em; }
.campus-teaser__copy p { max-width: 30em; margin-top: 18px; color: var(--muted); font-size: .9rem; line-height: 1.95; }
.campus-teaser__copy .text-link { margin-top: 24px; }
.campus-teaser__media { margin: 0; padding: 10px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.campus-teaser__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.campus-teaser__media figcaption { padding: 10px 4px 2px; color: var(--muted); font-family: "Kaiti SC", "KaiTi", var(--serif); font-size: .74rem; letter-spacing: .04em; }

@media (max-width: 1024px) {
  .campus-teaser__inner { grid-template-columns: 1fr; gap: 30px; }
  .campus-buildings { grid-template-columns: 160px 1fr; gap: 30px; }
}

@media (max-width: 760px) {
  .campus-grid { grid-template-columns: 1fr; }
  .campus-grid__wide { grid-column: auto; }
  .campus-grid__wide img, .campus-grid img { aspect-ratio: 4 / 3; }
  .campus-buildings { grid-template-columns: 1fr; gap: 14px; margin-top: 42px; padding-top: 28px; }
  .campus-buildings__group { grid-template-columns: 1fr; gap: 6px; }
  .campus-lead figcaption { flex-direction: column; gap: 6px; padding: 14px; font-size: .74rem; }
  .campus-teaser__copy h2 { font-size: clamp(2rem, 9vw, 3rem); }
}


/* =========================================================
   Palette + photographic atmosphere pass
   ========================================================= */

:root {
  --green-950: #082F4A;
  --green-900: #0D4F82;
  --green-800: #0F5D92;
  --green-700: #176DA8;
  --green-600: #2C7FB2;
  --green-500: #5A99BC;
  --cream: #FFFFFF;
  --paper: #F8FBFD;
  --paper-2: #EEF5FA;
  --paper-3: #DDECF6;
  --ink: #18344A;
  --ink-soft: #3E5A6E;
  --muted: #6C8495;
  --red: #176DA8;
  --red-dark: #0D4F82;
  --gold: #5A99BC;
  --line: rgba(24, 52, 74, .14);
  --line-strong: rgba(24, 52, 74, .27);
  --white: #FFFFFF;
}

body { background: var(--paper); }
.paper-grain { opacity: .07; }

.site-header.is-solid,
.site-header.is-scrolled { background: rgba(248, 251, 253, .94); }

.hero {
  background:
    linear-gradient(90deg, rgba(248, 251, 253, .995) 0%, rgba(248, 251, 253, .975) 45%, rgba(248, 251, 253, .76) 78%, rgba(248, 251, 253, .48) 100%),
    url('/assets/campus/ambient-hero.jpg') center / cover no-repeat;
}
.hero::before { display: none; }
.hero__ghost { -webkit-text-stroke-color: rgba(24, 52, 74, .055); }
.hero__title .num { color: var(--red); }

.page-hero {
  background:
    linear-gradient(90deg, rgba(248, 251, 253, .99) 0%, rgba(248, 251, 253, .93) 55%, rgba(248, 251, 253, .8) 100%),
    url('/assets/campus/ambient-page.jpg') center / cover no-repeat;
}
.page-hero::before { display: none; }

.section--paper2 { background: var(--paper-2); }

.timeline-preview {
  background:
    linear-gradient(rgba(20, 52, 53, .94), rgba(20, 52, 53, .97)),
    url('/assets/campus/ambient-hero.jpg') center / cover no-repeat;
}

.campus-teaser {
  background:
    linear-gradient(rgba(233, 234, 228, .93), rgba(233, 234, 228, .96)),
    url('/assets/campus/ambient-page.jpg') center / cover no-repeat;
}

.brand__mark { border-radius: 0; box-shadow: none; }
.admin-topbar__brand img, .admin-login__seal { border-radius: 0; box-shadow: none; }
.seal-end { border-radius: 0; }

.student-card__stamp { display: none; }

.search-result mark { background: rgba(23, 109, 168, .18); color: var(--ink); }

@media (max-width: 1024px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(248, 251, 253, .98) 0%, rgba(248, 251, 253, .92) 52%, rgba(248, 251, 253, .78) 100%),
      url('/assets/campus/ambient-hero.jpg') center / cover no-repeat;
  }
  .page-hero {
    background:
      linear-gradient(180deg, rgba(248, 251, 253, .97) 0%, rgba(248, 251, 253, .88) 100%),
      url('/assets/campus/ambient-page.jpg') center / cover no-repeat;
  }
}

@media (max-width: 760px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(248, 251, 253, .99) 0%, rgba(248, 251, 253, .94) 60%, rgba(248, 251, 253, .86) 100%),
      url('/assets/campus/ambient-hero.jpg') center / cover no-repeat;
  }
  .page-hero {
    background:
      linear-gradient(180deg, rgba(248, 251, 253, .98) 0%, rgba(248, 251, 253, .92) 100%),
      url('/assets/campus/ambient-page.jpg') center / cover no-repeat;
  }
}

/* global background: the same campus aerial, heavily veiled */
body {
  background:
    linear-gradient(rgba(248, 251, 253, .965), rgba(248, 251, 253, .975)),
    url('/assets/campus/ambient-hero.jpg') center / cover fixed no-repeat;
}
@media (max-width: 760px) {
  body { background-attachment: scroll; }
}


/* =========================================================
   Documentary pass: sharp photo, flat paper, less UI
   ========================================================= */

body { background: var(--paper); }
.paper-grain { opacity: .045; }

.hero {
  min-height: auto;
  padding: calc(var(--header-h) + 46px) 0 34px;
  display: block;
  background: var(--paper);
  overflow: visible;
}
.hero::before { display: none; }
.hero__inner {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto;
  padding: 0;
}
.hero__kicker {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .09em;
  color: var(--muted);
}
.hero__title {
  margin: 0 0 26px;
  font-size: clamp(3.4rem, 6.2vw, 5.6rem);
  line-height: 1.03;
  letter-spacing: -.045em;
  animation: none;
}
.hero__title .line { display: block; }
.hero__title .num {
  display: inline;
  color: var(--red);
  font-size: 1.12em;
  letter-spacing: -.05em;
  margin-right: .02em;
}
.hero__title .num small { display: none; }
.hero__intro {
  max-width: 31em;
  margin: 0;
  font-size: 1rem;
  line-height: 1.95;
  color: var(--ink-soft);
  animation: none;
}
.hero__actions {
  margin-top: 28px;
  gap: 24px;
  align-items: center;
  animation: none;
}
.hero__meta-line {
  margin-top: 36px;
  animation: none;
}
.hero__photo {
  margin: 0;
  min-width: 0;
  animation: none;
}
.hero__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line);
}
.hero__photo figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .02em;
}

.page-hero { background: var(--paper); }
.page-hero::before { display: none; }
.timeline-preview { background: var(--green-900); }
.campus-teaser { background: var(--paper-2); }

.button { border-radius: 2px; }
.button--ghost { border-radius: 2px; }

.article-end { border-top: 1px solid var(--line); padding-top: 20px; }
.article-end span {
  font-family: var(--serif);
  font-size: .9rem;
  letter-spacing: .08em;
  color: var(--muted);
}

.footer-kicker { letter-spacing: .1em; font-size: .66rem; }
.admin-login__art-text p { letter-spacing: .1em; }

@media (max-width: 980px) {
  .hero { padding-top: calc(var(--header-h) + 32px); }
  .hero__inner { grid-template-columns: 1fr; gap: 34px; }
  .hero__title { font-size: clamp(3.2rem, 11vw, 4.8rem); }
  .hero__photo img { aspect-ratio: 4 / 3; }
}

@media (max-width: 760px) {
  .hero { padding-top: calc(var(--header-h) + 26px); padding-bottom: 26px; }
  .hero__inner { width: min(var(--container), calc(100% - 32px)); }
  .hero__title { font-size: clamp(3rem, 13vw, 4.2rem); }
  .hero__actions { gap: 18px; }
  .hero__meta-line span { padding: 0 10px; }
}

/* tone down poster-scale headings */
.section-head h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.intro-quote { font-size: clamp(2rem, 3.3vw, 2.9rem); line-height: 1.48; }
.page-hero h1 { font-size: clamp(2.7rem, 5.6vw, 4.8rem); }
.page-hero__count { font-size: 3.4rem; }
.chapter-index__head h2 { font-size: clamp(2.3rem, 4.3vw, 3.8rem); }
.edit-link { border-radius: 2px; }
.brand__text strong { font-size: 1.08rem; }


/* book-contents chapter list */
.chapter-section { background: var(--paper-2); }
.chapter-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 26px;
}
.chapter-intro__kicker {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--red);
}
.chapter-intro h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}
.chapter-intro__note {
  max-width: 360px;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.9;
}
.chapter-list { border-top: 1px solid var(--line-strong); }
.chapter-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto 24px;
  gap: 20px;
  align-items: center;
  padding: 19px 4px;
  border-bottom: 1px solid var(--line);
  transition: background .18s ease, padding .18s ease;
}
.chapter-row:hover {
  padding-left: 14px;
  padding-right: 14px;
  background: rgba(248, 251, 253, .62);
}
.chapter-row__num {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--red);
}
.chapter-row__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chapter-row__main strong { font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; }
.chapter-row__main small { color: var(--muted); font-size: .77rem; line-height: 1.6; }
.chapter-row__count { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.chapter-row__count i { font-style: normal; font-size: .62rem; margin-left: 2px; }
.chapter-row__arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--muted);
  transition: transform .18s ease, color .18s ease;
}
.chapter-row__arrow .icon { width: 16px; height: 16px; }
.chapter-row:hover .chapter-row__arrow { transform: translateX(4px); color: var(--red); }

@media (max-width: 760px) {
  .chapter-intro { display: block; margin-bottom: 20px; }
  .chapter-intro__note { max-width: 100%; margin-top: 10px; font-size: .8rem; }
  .chapter-row {
    grid-template-columns: 30px minmax(0, 1fr) auto 16px;
    gap: 10px;
    padding: 15px 0;
  }
  .chapter-row:hover { padding-left: 0; padding-right: 0; background: transparent; }
  .chapter-row__num { font-size: 1.08rem; }
  .chapter-row__main { gap: 3px; }
  .chapter-row__main strong { font-size: 1rem; }
  .chapter-row__main small { font-size: .72rem; line-height: 1.55; }
  .chapter-row__count { font-size: .66rem; }
  .chapter-row__arrow .icon { width: 14px; height: 14px; }
}


/* remove decorative drop caps */
.intro-body p:first-child::first-letter,
.article-body > p:first-of-type::first-letter {
  float: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  color: inherit;
}

@media (max-width: 760px) {
  .page-hero { padding-top: calc(var(--header-h) + 28px); padding-bottom: 24px; }
  .page-hero h1 { font-size: clamp(2.2rem, 9.5vw, 3.1rem); line-height: 1.08; }
  .page-hero__lead { margin-top: 14px; font-size: .88rem; line-height: 1.8; }
  .page-hero__aside { margin-top: 10px; gap: 6px; }
  .page-hero__count { font-size: 2rem; }

  .archive-toolbar { padding: 14px 0 12px; gap: 8px; }
  .archive-search { gap: 8px; }
  .archive-search .icon { width: 18px; height: 18px; }
  .archive-search input { font-size: 1.02rem; padding: 6px 0; }
  .archive-search input::placeholder { font-size: .92rem; }
  .archive-view { height: 38px; }
  .archive-sort select { border-radius: 2px; padding-top: 7px; padding-bottom: 7px; }
  .filter-bar { flex-wrap: wrap; overflow: visible; gap: 6px; padding: 10px 0 12px; }
  .chip { border-radius: 2px; font-size: .7rem; padding: 6px 9px; }
  .archive-meta { font-size: .64rem; line-height: 1.7; }

  .article-title { font-size: clamp(2rem, 8.5vw, 2.7rem); }
}


/* wide editorial layout + school emblem */
:root { --container: 2400px; }

.site-header.is-solid,
.site-header.is-scrolled {
  background: rgba(248, 251, 253, .94);
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -26px rgba(24, 52, 74, .35); }

.brand__mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}
.brand { gap: 11px; }
.admin-topbar__brand img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 0;
}

.hero__title { font-size: clamp(3.6rem, 5.8vw, 6.2rem); }
.page-hero h1 { font-size: clamp(2.9rem, 5.4vw, 5.2rem); }

.admin-row__thumb[src$="school-emblem.png"] { object-fit: contain; padding: 7px; }

@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; gap: 34px; }
  .hero__title { font-size: clamp(3.2rem, 10vw, 4.8rem); }
}

@media (max-width: 760px) {
  .brand__mark { width: 34px; height: 34px; }
  .page-hero h1 { font-size: clamp(2.2rem, 9.5vw, 3.1rem); }
}

@media (max-width: 760px) {
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__actions .text-link { align-self: flex-start; }
}


/* reader comments / margin notes */
.article-comments {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}
.article-comments h2 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--muted);
}
.article-comments h2 span { color: var(--red); font-size: .68rem; }
.article-comments ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.article-comments li {
  position: relative;
  padding-left: 17px;
  font-size: .88rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.article-comments li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
}
@media (max-width: 760px) {
  .article-comments { margin-top: 32px; }
  .article-comments li { font-size: .84rem; }
}


/* editor identity, login and people database */
.admin-who {
  padding: 0 14px;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.admin-identity {
  margin: 4px 0 16px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.admin-identity__who {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.admin-identity__who span { color: var(--muted); font-size: .68rem; letter-spacing: .06em; }
.admin-identity__who strong { font-size: .92rem; font-weight: 600; }
.admin-identity .admin-check { margin: 2px 0 8px; }
.admin-identity p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.7; }

.people-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}
.people-stats > div {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
}
.people-stats > div:last-child { border-right: 0; }
.people-stats span { display: block; color: var(--muted); font-size: .68rem; letter-spacing: .06em; }
.people-stats strong { display: block; margin-top: 4px; font-family: var(--serif); font-size: 1.9rem; font-weight: 500; line-height: 1.1; }
.people-stats__date { font-size: 1rem !important; font-family: var(--sans) !important; padding-top: 8px; }
.people-columns { display: grid; grid-template-columns: .8fr 1.2fr; }
.people-section { padding: 22px; border-right: 1px solid var(--line); min-width: 0; }
.people-section:last-child { border-right: 0; }
.people-section .admin-panel__head { padding: 0 0 12px; }
.people-list, .people-edits { display: flex; flex-direction: column; }
.people-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.people-row:last-child { border-bottom: 0; }
.people-row__who { display: flex; flex-direction: column; gap: 3px; }
.people-row__who strong { font-size: .92rem; font-weight: 600; }
.people-row__who span { color: var(--muted); font-size: .72rem; }
.people-row__meta { display: flex; flex-direction: column; gap: 3px; text-align: right; color: var(--muted); font-size: .66rem; white-space: nowrap; }
.edit-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.edit-row:last-child { border-bottom: 0; }
.edit-row__action {
  display: inline-flex;
  justify-content: center;
  padding: 3px 0;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.4;
}
.edit-row__action--create { color: var(--green-700); border-color: rgba(23, 109, 168, .35); }
.edit-row__action--delete { color: var(--red); border-color: rgba(23, 109, 168, .3); }
.edit-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.edit-row__body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; font-weight: 500; }
.edit-row__body span { color: var(--muted); font-size: .66rem; }
.edit-row time { color: var(--muted); font-size: .62rem; white-space: nowrap; }

@media (max-width: 900px) {
  .people-columns { grid-template-columns: 1fr; }
  .people-section { border-right: 0; border-bottom: 1px solid var(--line); }
  .people-section:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
  .admin-who { display: none; }
  .people-stats { grid-template-columns: 1fr 1fr; }
  .people-stats > div:nth-child(2) { border-right: 0; }
  .people-stats > div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .people-section { padding: 16px; }
}


/* three-year vertical timeline */
.year-section { background: var(--paper); }
.year-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-strong);
}
.year-kicker {
  margin: 0 0 10px;
  color: var(--red);
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .12em;
}
.year-head h2 {
  margin: 0;
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}
.year-head__note { max-width: 370px; margin: 0 0 5px; color: var(--muted); font-size: .84rem; line-height: 1.9; }
.year-timeline { position: relative; padding: 46px 0 24px; }
.year-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line-strong);
}
.year-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
  align-items: center;
  padding: 28px 0;
}
.year-entry__text { padding-right: 54px; }
.year-entry:nth-child(even) .year-entry__text { grid-column: 3; grid-row: 1; padding-right: 0; padding-left: 54px; }
.year-entry__marker {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--green-700);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .06em;
}
.year-entry__range {
  margin: 0 0 8px;
  color: var(--red);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .08em;
}
.year-entry__text h3 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.year-entry__desc { max-width: 32em; margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.95; }
.year-entry__quote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 32em;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--serif);
  font-size: .82rem;
  line-height: 1.7;
}
.year-entry__quote .icon { flex: none; width: 14px; height: 14px; margin-top: 4px; }
.year-entry__quote:hover { color: var(--red); }
.year-entry__photo {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.year-entry:nth-child(even) .year-entry__photo { grid-column: 1; grid-row: 1; }
.year-entry__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.year-entry:hover .year-entry__photo img { transform: scale(1.035); }
.year-entry__photo figcaption { padding: 10px 13px; color: var(--muted); font-family: var(--kaiti); font-size: .72rem; letter-spacing: .03em; }
.year-foot { display: flex; justify-content: flex-end; padding-top: 18px; border-top: 1px solid var(--line); }

/* a small, non-blocking hero reveal */
.hero__photo { animation: hero-photo-in 900ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hero-photo-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__photo { animation: none; }
  .year-entry__photo img { transition: none; }
}

@media (max-width: 900px) {
  .year-head { display: block; }
  .year-head__note { max-width: 100%; margin-top: 12px; }
  .year-timeline::before { left: 10px; }
  .year-entry { grid-template-columns: 22px minmax(0, 1fr); padding: 0 0 38px; }
  .year-entry__marker { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; width: 21px; height: 21px; margin-top: 5px; border: 0; background: transparent; color: var(--red); font-size: .54rem; }
  .year-entry__marker::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--red); transform: translate(-1px, 0); display: none; }
  .year-entry__text, .year-entry:nth-child(even) .year-entry__text { grid-column: 2; grid-row: 1; padding: 0 0 0 14px; }
  .year-entry__photo, .year-entry:nth-child(even) .year-entry__photo { grid-column: 2; grid-row: 2; margin: 16px 0 0 14px; }
  .year-entry__text h3 { font-size: 2rem; }
  .year-entry__desc { font-size: .88rem; }
  .year-entry__photo img { aspect-ratio: 16 / 10; }
  .year-foot { justify-content: flex-start; }
}

.year-entry__text { max-width: 30em; margin-left: auto; padding-right: 54px; }
.year-entry:nth-child(even) .year-entry__text { margin-left: 0; margin-right: auto; padding-right: 0; padding-left: 54px; }
@media (max-width: 900px) {
  .year-entry__text, .year-entry:nth-child(even) .year-entry__text { max-width: none; margin: 0; padding: 0 0 0 14px; }
  .year-entry__marker {
    width: 7px;
    height: 7px;
    margin: 9px 0 0 7px;
    border: 0;
    border-radius: 50%;
    background: var(--red);
    color: transparent;
    font-size: 0;
  }
  .year-entry__marker span { display: none; }
  .year-entry__marker::before { display: none; }
}

/* no glass surfaces */
.site-header.is-solid,
.site-header.is-scrolled {
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}


/* anonymous reader comments */
.reader-comments {
  max-width: 760px;
  margin: 58px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
}
.reader-comments__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.reader-comments__head h2 { margin: 0; font-family: var(--sans); font-size: .76rem; font-weight: 500; letter-spacing: .12em; }
.reader-comments__head span { color: var(--muted); font-size: .68rem; }
.reader-comment-list { margin-top: 16px; }
.reader-comment-empty { margin: 0; padding: 18px 0; color: var(--muted); font-size: .82rem; }
.reader-comment { padding: 16px 0; border-bottom: 1px solid var(--line); }
.reader-comment__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.reader-comment__head strong { font-family: var(--sans); font-size: .78rem; font-weight: 600; }
.reader-comment__head time { color: var(--muted); font-size: .64rem; white-space: nowrap; }
.reader-comment p { margin: 7px 0 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.reader-comment-form { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.reader-comment-form__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.reader-comment-form__top label { color: var(--muted); font-size: .7rem; }
.reader-comment-form__top input { width: 180px; height: 32px; padding: 0 9px; border: 1px solid var(--line); background: var(--paper); font-size: .76rem; }
.reader-comment-form textarea { width: 100%; min-height: 82px; padding: 10px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: .88rem; line-height: 1.75; resize: vertical; }
.reader-comment-form textarea:focus, .reader-comment-form__top input:focus { outline: none; border-color: var(--green-700); }
.reader-comment-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }
.reader-comment-form__foot > span { color: var(--muted); font-size: .66rem; line-height: 1.6; }
.reader-comment-form__foot .button { flex: none; }
.reader-comment-error { margin: 10px 0 0; color: var(--red); font-size: .72rem; }
.reader-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
@media (max-width: 760px) {
  .reader-comments { margin-top: 38px; padding-top: 22px; }
  .reader-comment-form__foot { align-items: flex-start; flex-direction: column; }
  .reader-comment-form__foot .button { width: 100%; }
  .reader-comment-form__top input { width: 100%; flex: 1; }
}

.admin-reader-comments { display: flex; flex-direction: column; }
.admin-reader-comment { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.admin-reader-comment:last-child { border-bottom: 0; }
.admin-reader-comment__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.admin-reader-comment__head strong { font-size: .82rem; font-weight: 600; }
.admin-reader-comment__head time { color: var(--muted); font-size: .64rem; }
.admin-reader-comment p { margin: 8px 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-reader-comment__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-reader-comment__foot a { color: var(--muted); font-size: .66rem; }
.admin-reader-comment__foot a:hover { color: var(--red); }
.admin-reader-comment__foot button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--muted); font-size: .66rem; }
.admin-reader-comment__foot button:hover { color: var(--red); }
.admin-reader-comment__foot .icon { width: 13px; height: 13px; }

.article-comments__note { margin: -4px 0 12px; color: var(--muted); font-size: .68rem; line-height: 1.7; }

.chapter-foot { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* hide editor entry from readers */
.edit-link, .mobile-menu__edit, .footer-admin { display: none; }
body.is-authenticated .edit-link { display: inline-flex; }
body.is-authenticated .mobile-menu__edit { display: flex; }
body.is-authenticated .footer-admin { display: block; }

.memory-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.memory-card--quote .memory-card__title { -webkit-line-clamp: 2; }

/* three-cohort switch */
.cohort-switch {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto;
  padding-top: calc(var(--header-h) + 18px);
}
.cohort-switch__label {
  margin-right: 8px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .12em;
}
.cohort-switch a {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
  transition: background .18s, color .18s, border-color .18s;
}
.cohort-switch a:hover { color: var(--ink); border-color: var(--line-strong); }
.cohort-switch a.is-active { color: var(--cream); background: var(--green-900); border-color: var(--green-900); }
.cohort-switch small { font-family: var(--mono); font-size: .58rem; opacity: .62; }
.cohort-switch + .hero { padding-top: 18px; }
.cohort-switch + .page-hero { padding-top: 24px; }
@media (max-width: 760px) {
  .cohort-switch { width: calc(100% - 32px); padding-top: calc(var(--header-h) + 10px); gap: 4px; flex-wrap: wrap; }
  .cohort-switch__label { width: 100%; margin-bottom: 2px; }
  .cohort-switch a { padding: 4px 7px; font-size: .68rem; }
}

/* large editorial edition index */
.cohort-switch {
  align-items: flex-end;
  gap: 0;
  padding-top: calc(var(--header-h) + 20px);
  padding-bottom: 0;
  border-bottom: 1px solid var(--line-strong);
}
.cohort-switch__label {
  width: 48px;
  padding-bottom: 18px;
  margin-right: 0;
}
.cohort-switch__items { display: flex; align-items: flex-end; flex: 1; min-width: 0; }
.cohort-switch a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 30px 15px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
}
.cohort-switch a:first-child { border-left: 0; padding-left: 0; }
.cohort-switch a:hover { border-color: var(--line); background: transparent; }
.cohort-switch__year {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.7vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  transition: color .18s;
}
.cohort-switch__suffix { margin-left: -3px; color: var(--muted); font-size: .72rem; }
.cohort-switch a small {
  margin-left: 6px;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .02em;
}
.cohort-switch a:hover .cohort-switch__year,
.cohort-switch a.is-active .cohort-switch__year { color: var(--red); }
.cohort-switch a.is-active { background: transparent; color: var(--ink); border-color: var(--line); }
.cohort-switch a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--red);
}
.cohort-switch a:first-child.is-active::after { left: 0; }
.cohort-switch__aside {
  margin-left: auto;
  padding-bottom: 17px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .03em;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .cohort-switch { display: block; padding-top: calc(var(--header-h) + 10px); border-bottom: 0; }
  .cohort-switch__label, .cohort-switch__aside { display: none; }
  .cohort-switch__items { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line-strong); }
  .cohort-switch a { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 5px; padding: 10px 0 12px 14px; }
  .cohort-switch a:first-child { padding-left: 0; }
  .cohort-switch__year { font-size: 1.55rem; }
  .cohort-switch__suffix { font-size: .64rem; }
  .cohort-switch a small { grid-column: 1 / -1; margin-left: 0; font-size: .64rem; }
}

/* editorial article: single measure, no side rails */
.article-head { max-width: 720px; text-align: left; }
.article-head .breadcrumb { justify-content: flex-start; }
.article-title { margin-top: 22px; }
.article-meta { justify-content: flex-start; gap: 24px; font-size: .72rem; letter-spacing: 0; }
.article-meta span { display: inline; }
.article-main { width: min(720px, calc(100% - 32px)); margin: 56px auto 0; }
.article-body { width: 100%; }
.article-utility { display: flex; justify-content: flex-end; margin-top: 24px; }
.article-utility .article-share { color: var(--muted); font-size: .7rem; }
.article-gallery, .article-tags, .reader-comments, .article-nav {
  width: min(720px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}
.article-gallery { margin-top: 44px; }
.article-tags { border: 0; padding: 0; margin-top: 36px; gap: 0; }
.article-tags span { padding: 0; border: 0; border-radius: 0; color: var(--muted); font-size: .72rem; }
.article-tags span + span::before { content: "/"; margin: 0 9px 0 2px; color: var(--line-strong); }
.article-comments { margin-top: 44px; }
.article-comments h2 { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.article-comments h2 span { margin-left: 8px; color: var(--muted); font-family: var(--sans); font-size: .68rem; }
.article-comments li { font-size: .9rem; line-height: 1.9; }

/* reader comments: a notebook, not a form panel */
.reader-comments { margin-top: 62px; padding: 0; border: 0; }
.reader-comments__head { padding-top: 22px; border-top: 1px solid var(--line-strong); }
.reader-comments__head h2 { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; letter-spacing: 0; }
.reader-comments__head span { color: var(--muted); font-size: .68rem; }
.reader-comment-list { margin-top: 6px; }
.reader-comment { padding: 18px 0; border-bottom: 1px solid var(--line); }
.reader-comment p { font-size: .92rem; line-height: 1.9; }
.reader-comment-form { margin-top: 26px; padding-top: 0; border-top: 0; }
.reader-comment-form textarea {
  width: 100%;
  min-height: 94px;
  padding: 10px 0 14px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  line-height: 1.8;
  resize: vertical;
}
.reader-comment-form textarea:focus { outline: none; border-bottom-color: var(--red); }
.reader-comment-form__foot { margin-top: 12px; padding: 0; border: 0; }
.reader-comment-form__foot input {
  width: 200px;
  height: 34px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .8rem;
}
.reader-comment-form__foot input:focus { outline: none; border-bottom-color: var(--red); }
.reader-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--red);
  font: inherit;
  font-size: .78rem;
  letter-spacing: .04em;
  cursor: pointer;
}
.reader-submit:hover { color: var(--ink); }
.reader-submit .icon { width: 14px; height: 14px; }
.reader-submit:disabled { opacity: .5; }
.reader-comment-error { margin: 10px 0 0; color: var(--red); font-size: .72rem; }

.article-nav { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.article-nav a { padding: 22px 0; border: 0; }
.article-nav a + a { padding-left: 24px; border-left: 1px solid var(--line); }
.article-nav a:hover { background: transparent; border-color: var(--line); }
@media (max-width: 760px) {
  .article-head { text-align: left; }
  .article-meta { gap: 12px 18px; }
  .article-main { margin-top: 38px; }
  .reader-comments__head h2 { font-size: 1.2rem; }
}

/* archived comments: no bullet dots, use rules */
.article-comments ul { gap: 0; }
.article-comments li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.article-comments li:last-child { border-bottom: 0; }
.article-comments li::before { display: none; }

/* home: let the answers lead */
.hero__intro {
  max-width: none;
  font-size: .82rem;
  line-height: 1.8;
  color: var(--muted);
  letter-spacing: .02em;
}
.hero__quote {
  max-width: 27em;
  margin: 20px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.75;
}
.hero__quote--source { display: block; width: fit-content; }
.hero__quote--source span { text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color .2s ease; }
.hero__quote--source:hover span { text-decoration-line: underline; text-decoration-color: #8CB1CA; }
.hero__quote--source small { display: block; margin-top: 2px; color: #6B8AA0; font-family: var(--sans); font-size: .62rem; letter-spacing: .04em; }
.hero__quote--source small .icon { width: 12px; height: 12px; margin-left: 4px; vertical-align: -2px; }
.hero__quote--source:focus-visible { outline: 2px solid #176DA8; outline-offset: 4px; }
.hero__actions { margin-top: 26px; }

.home-answers { padding: 68px 0 0; }
.home-index { padding: 68px 0 0; }
.home-photos { padding: 68px 0 0; }
.home-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .09em;
}
.home-label span:last-child { letter-spacing: 0; color: var(--muted); }
.answer-list { display: block; }
.answer-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 24px;
  gap: 28px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.answer-row__cat {
  padding-top: 4px;
  color: var(--red);
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .04em;
}
.answer-row__text { display: block; min-width: 0; }
.answer-row__text strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 500;
  line-height: 1.45;
}
.answer-row__text > span {
  display: block;
  max-width: 900px;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.9;
}
.answer-row__text > .answer-row__raw {
  max-width: 980px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.55vw, 1.32rem);
  line-height: 1.8;
}
.answer-row__arrow {
  padding-top: 9px;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .18s, transform .18s, color .18s;
}
.answer-row:hover .answer-row__arrow { opacity: 1; transform: translateX(0); color: var(--red); }
.home-more { margin-top: 16px; }
.home-more .text-link { font-size: .76rem; }

.question-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 44px;
}
.question-index a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .88rem;
}
.question-index a:hover { color: var(--red); }
.question-index small { color: var(--muted); font-family: var(--mono); font-size: .64rem; }

.home-photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.home-photo-strip a { display: block; overflow: hidden; background: var(--paper-2); }
.home-photo-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: opacity .2s; }
.home-photo-strip a:hover img { opacity: .86; }

.home-foot {
  margin-top: 48px;
  padding: 30px 0 64px;
  border-top: 1px solid var(--line-strong);
}
.home-foot .container { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.home-foot p { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 1.15rem; }
.home-foot__links { display: flex; gap: 24px; }
.home-foot__links a { color: var(--muted); font-size: .72rem; }
.home-foot__links a:hover { color: var(--red); }

@media (max-width: 760px) {
  .home-answers, .home-index, .home-photos { padding-top: 48px; }
  .answer-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .answer-row__cat { padding-top: 0; }
  .answer-row__arrow { display: none; }
  .answer-row__text > span { font-size: .9rem; line-height: 1.85; }
  .question-index { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
  .home-photo-strip { grid-template-columns: repeat(2, 1fr); }
  .home-foot .container { display: block; }
  .home-foot__links { margin-top: 14px; }
}

/* archive headers for photos / places */
.archive-head { padding: 26px 0 0; }
.archive-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-strong);
}
.archive-head h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}
.archive-head__row > span { color: var(--muted); font-size: .7rem; white-space: nowrap; }

/* contact sheet */
.gallery-contact .gallery-grid {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin-top: 28px;
}
.gallery-contact .gallery-item {
  margin: 0;
  border: 0;
  background: var(--paper-2);
}
.gallery-contact .gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.gallery-contact .gallery-item__caption { display: none; }
.gallery-contact .gallery-item:hover img { transform: none; filter: saturate(1.04) brightness(.97); }
.gallery-contact .load-more-wrap { margin-top: 28px; }

/* campus as a place index */
.campus-archive .campus-lead {
  max-width: 1080px;
  margin: 34px auto 0;
}
.campus-archive .campus-lead img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.campus-archive .campus-lead figcaption { padding-top: 9px; color: var(--muted); font-size: .7rem; }
.location-list { margin-top: 54px; border-top: 1px solid var(--line-strong); }
.location-row {
  display: grid;
  grid-template-columns: 42px 128px minmax(0, 1fr) 64px;
  gap: 24px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.location-row__num { color: var(--muted); font-family: var(--mono); font-size: .64rem; padding-top: 4px; }
.location-row__name { color: var(--ink); font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; }
.location-row__quote { max-width: 980px; color: var(--ink-soft); font-size: .9rem; line-height: 1.85; }
.location-row__count { color: var(--muted); font-family: var(--mono); font-size: .64rem; text-align: right; white-space: nowrap; padding-top: 5px; }
.location-row:hover .location-row__name { color: var(--red); }
.location-row--empty { cursor: default; }
.location-row--empty .location-row__name,
.location-row--empty:hover .location-row__name { color: var(--muted); }
.campus-names {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 24px;
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.campus-names > span { color: var(--muted); font-size: .68rem; }
.campus-names p { margin: 0; max-width: 1000px; color: var(--ink-soft); font-size: .82rem; line-height: 2; }
.campus-names em { margin-right: 18px; font-style: normal; white-space: nowrap; }
.campus-credit { margin-top: 54px; color: var(--muted); font-size: .64rem; line-height: 1.8; }

@media (max-width: 900px) {
  .gallery-contact .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .archive-head { padding-top: 18px; }
  .archive-head__row { margin-top: 26px; }
  .gallery-contact .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .location-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 18px 0; }
  .location-row__name { grid-column: 2; font-size: 1.1rem; }
  .location-row__quote { grid-column: 2 / -1; margin-top: 4px; font-size: .86rem; }
  .location-row__count { grid-column: 3; grid-row: 1; text-align: right; }
  .location-row__num { grid-row: 1; }
  .campus-names { grid-template-columns: 1fr; gap: 8px; }
}

/* make "补一页" clearly visible, still secondary */
.home-foot .container { align-items: center; }
.home-foot__call { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.home-foot__edit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .84rem;
  letter-spacing: .01em;
  transition: border-color .18s, color .18s;
}
.home-foot__edit .icon { width: 14px; height: 14px; color: var(--red); }
.home-foot__edit:hover { color: var(--red); border-color: var(--red); }
.home-foot__about { color: var(--muted); font-size: .72rem; }
.home-foot__about:hover { color: var(--red); }
@media (max-width: 760px) {
  .home-foot__call { display: block; }
  .home-foot__edit { margin-top: 10px; font-size: 1rem; }
  .home-foot__about { display: inline-block; margin-top: 14px; }
}

/* school profile: official facts, not a promo page */
.school-page { padding: 48px 0 84px; }
.school-intro { max-width: 960px; }
.school-intro p {
  max-width: 880px;
  margin: 0 0 1.2em;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.95;
}
.school-intro p:first-of-type {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  line-height: 1.75;
}
.school-facts {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
  padding: 14px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .7rem;
}
.school-facts span { padding: 0 18px; border-left: 1px solid var(--line); }
.school-facts span:first-child { padding-left: 0; border-left: 0; }
.school-section { margin-top: 66px; }
.school-history { border-top: 1px solid var(--line-strong); }
.school-history__row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.school-history__row > span { color: var(--red); font-family: var(--mono); font-size: .72rem; padding-top: 2px; }
.school-history__row p { margin: 0; max-width: 960px; color: var(--ink-soft); font-size: .92rem; line-height: 1.85; }
.school-culture { max-width: 1050px; }
.school-motto {
  margin: 10px 0 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.25;
  letter-spacing: -.03em;
}
.school-culture__line { margin: 0; color: var(--muted); font-size: .82rem; letter-spacing: .18em; }
.school-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.school-gallery figure { margin: 0; border: 1px solid var(--line); background: var(--paper-2); }
.school-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.school-gallery figcaption { padding: 9px 10px; color: var(--muted); font-size: .66rem; line-height: 1.6; }
.school-honors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.school-honors li { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .86rem; line-height: 1.7; }
.school-source { max-width: 1040px; margin: 52px 0 0; color: var(--muted); font-size: .64rem; line-height: 1.9; }
.school-more { margin-top: 20px; }
@media (max-width: 900px) {
  .school-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .school-page { padding-top: 32px; }
  .school-section { margin-top: 48px; }
  .school-history__row { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; }
  .school-gallery { grid-template-columns: 1fr; }
  .school-honors { grid-template-columns: 1fr; }
  .school-facts span { padding: 4px 12px 4px 0; border-left: 0; }
}

.archive-head--plain { padding-top: calc(var(--header-h) + 34px); }
@media (max-width: 760px) {
  .archive-head--plain { padding-top: calc(var(--header-h) + 24px); }
}

@media (max-width: 760px) {
  .archive-head--plain h1 { font-size: 2rem; line-height: 1.2; }
}

/* overview: data as an archive index, not dashboard cards */
.overview-page { padding: 42px 0 84px; }
.overview-lead {
  max-width: 760px;
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.8;
}
.overview-section { margin-top: 62px; }
.cohort-bars { border-top: 1px solid var(--line-strong); }
.cohort-bar {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 70px 64px;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.cohort-bar__year { color: var(--ink); font-family: var(--serif); font-size: 1.05rem; }
.cohort-bar__track { height: 8px; background: var(--paper-2); border: 1px solid var(--line); }
.cohort-bar__track i { display: block; height: 100%; background: var(--ink); }
.cohort-bar:nth-child(2) .cohort-bar__track i { background: var(--green-700); }
.cohort-bar:nth-child(3) .cohort-bar__track i { background: var(--red); }
.cohort-bar__count { color: var(--ink-soft); font-family: var(--mono); font-size: .7rem; text-align: right; }
.cohort-bar__photo { color: var(--muted); font-size: .68rem; text-align: right; }

.question-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.question-col { min-width: 0; padding: 22px 28px 0; border-left: 1px solid var(--line); }
.question-col:first-child { padding-left: 0; border-left: 0; }
.question-col:last-child { padding-right: 0; }
.question-col h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 500;
}
.question-col h3 span { color: var(--muted); font-family: var(--sans); font-size: .64rem; }
.question-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.question-row__label { color: var(--ink-soft); font-size: .76rem; line-height: 1.5; }
.question-row__count { color: var(--muted); font-family: var(--mono); font-size: .62rem; }
.question-row__bar { grid-column: 1 / -1; height: 3px; margin-top: 6px; background: var(--paper-2); }
.question-row__bar i { display: block; height: 100%; background: var(--ink-soft); }
.question-col:nth-child(2) .question-row__bar i { background: var(--green-700); }
.question-col:nth-child(3) .question-row__bar i { background: var(--red); }

.length-bars { border-top: 1px solid var(--line-strong); }
.length-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 44px;
  gap: 20px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.length-row__year { color: var(--ink); font-family: var(--serif); font-size: 1rem; }
.length-row__bar { display: flex; height: 10px; background: var(--paper-2); }
.length-row__total { color: var(--muted); font-family: var(--mono); font-size: .64rem; text-align: right; }
.length-seg { display: block; height: 100%; }
.length-seg--0 { background: #d9d5c7; }
.length-seg--1 { background: #b7b3a2; }
.length-seg--2 { background: #7d9187; }
.length-seg--3 { background: #2f5b57; }
.length-seg--4 { background: #176DA8; }
.length-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; color: var(--muted); font-size: .64rem; }
.length-legend span { display: inline-flex; align-items: center; gap: 6px; }
.length-legend i { width: 8px; height: 8px; }

.term-list { border-top: 1px solid var(--line-strong); }
.term-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 52px;
  gap: 20px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.term-row__name { color: var(--ink); font-size: .86rem; }
.term-row__bar { height: 4px; background: var(--paper-2); }
.term-row__bar i { display: block; height: 100%; background: var(--red); }
.term-row__count { color: var(--muted); font-family: var(--mono); font-size: .62rem; text-align: right; }

.overview-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 68px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.overview-facts > div { padding: 20px 24px; border-left: 1px solid var(--line); }
.overview-facts > div:first-child { padding-left: 0; border-left: 0; }
.overview-facts strong {
  display: block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
}
.overview-facts span { display: block; margin-top: 6px; color: var(--muted); font-size: .68rem; line-height: 1.6; }
.overview-facts a { color: var(--red); border-bottom: 1px solid rgba(166,75,59,.4); }
.overview-note { max-width: 900px; margin-top: 36px; color: var(--muted); font-size: .64rem; line-height: 1.9; }

@media (max-width: 900px) {
  .question-columns { grid-template-columns: 1fr; }
  .question-col { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .question-col:first-child { padding-top: 0; border-top: 0; }
  .overview-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .overview-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .overview-page { padding-top: 30px; }
  .overview-section { margin-top: 46px; }
  .cohort-bar { grid-template-columns: 68px minmax(0, 1fr) 58px 54px; gap: 10px; }
  .cohort-bar__year { font-size: .95rem; }
  .cohort-bar__count, .cohort-bar__photo { font-size: .6rem; }
  .length-row { grid-template-columns: 68px minmax(0, 1fr) 34px; gap: 10px; }
  .term-row { grid-template-columns: 76px minmax(0, 1fr) 42px; gap: 12px; }
}

/* school-blue interaction pass */
::selection { background: #DDECF6; color: #18344A; }
.lightbox { background: rgba(9, 30, 45, .92); }
.lightbox__figure img { border-color: rgba(255, 255, 255, .16); }
.lightbox__figure figcaption,
.lightbox__count { color: rgba(255, 255, 255, .68); }
.lightbox__close,
.lightbox__nav { border-color: rgba(255, 255, 255, .3); color: #FFFFFF; }
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .52); }
.search-result mark { background: #DDECF6; color: #18344A; padding: 0 2px; }
.button:hover {
  background: var(--green-900);
  border-color: var(--green-900);
  transform: none;
  box-shadow: none;
}
.button--ghost:hover { background: #EEF5FA; color: var(--green-900); border-color: var(--line-strong); }
.hero__photo img { filter: saturate(.88) contrast(.98); }
.cohort-switch a.is-active::after { background: var(--green-700); }
.cohort-switch a:hover .cohort-switch__year,
.cohort-switch a.is-active .cohort-switch__year { color: var(--green-700); }
.site-header .main-nav a::after { background: var(--green-700); }
.edit-link:hover { background: #EEF5FA; }

/* overview, second pass: dot census, chapter fore-edge, page-length spines, word index */
.cohort-dots-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}
.cohort-dots__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.cohort-dots__head span:first-child { color: var(--ink); font-family: var(--serif); font-size: 1.05rem; }
.cohort-dots__head span:not(:first-child) { color: var(--muted); font-family: var(--mono); font-size: .62rem; }
.cohort-dots__field { display: grid; grid-template-columns: repeat(40, 4px); gap: 3px; align-content: start; }
.cohort-dots__field i { width: 4px; height: 4px; background: var(--ink); }
.cohort-dots:nth-child(2) .cohort-dots__field i { background: var(--green-700); }
.cohort-dots:nth-child(3) .cohort-dots__field i { background: var(--green-900); }

.chapter-strips { border-top: 1px solid var(--line-strong); }
.chapter-strip-row { padding: 21px 0; border-bottom: 1px solid var(--line); }
.chapter-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.chapter-strip-head span:first-child { color: var(--ink); font-family: var(--serif); font-size: 1.05rem; }
.chapter-strip-head span:last-child { color: var(--muted); font-family: var(--mono); font-size: .62rem; }
.chapter-strip { display: flex; gap: 1px; height: 18px; margin-top: 12px; background: var(--paper-2); }
.chapter-seg { display: block; height: 100%; min-width: 1px; }
.chapter-seg--0 { background: #0D4F82; }
.chapter-seg--1 { background: #176DA8; }
.chapter-seg--2 { background: #3C7CA6; }
.chapter-seg--3 { background: #5A99BC; }
.chapter-seg--4 { background: #2C7FB2; }
.chapter-seg--5 { background: #8FB3C8; }
.chapter-strip-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: 10px; }
.chapter-index__item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .7rem; }
.chapter-index__item b { color: var(--muted); font-family: var(--mono); font-size: .58rem; font-weight: 400; }

.length-hists {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}
.length-hist__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.length-hist__head span:first-child { color: var(--ink); font-family: var(--serif); font-size: 1.05rem; }
.length-hist__head span:last-child { color: var(--muted); font-family: var(--mono); font-size: .6rem; }
.length-hist__bars { display: flex; align-items: flex-end; gap: 8px; height: 116px; margin-top: 22px; }
.length-hist__bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.length-hist__bar i { display: block; width: 100%; min-height: 1px; }
.length-hist__bar b { position: absolute; top: -16px; left: 0; right: 0; color: var(--muted); font-family: var(--mono); font-size: .54rem; font-weight: 400; text-align: center; }
.length-hist__labels { display: flex; gap: 8px; margin-top: 7px; color: var(--muted); font-size: .53rem; }
.length-hist__labels span { flex: 1; text-align: center; }
.length-seg--0 { background: #DDECF6; }
.length-seg--1 { background: #A9C6D9; }
.length-seg--2 { background: #5A99BC; }
.length-seg--3 { background: #176DA8; }
.length-seg--4 { background: #0D4F82; }

.word-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; border-top: 1px solid var(--line-strong); }
.word-entry { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.word-entry__word { color: var(--ink); font-family: var(--serif); font-size: calc(.9rem * var(--s)); line-height: 1.2; }
.word-entry__count { color: var(--muted); font-family: var(--mono); font-size: .56rem; }

.overview-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 48px;
  margin-top: 62px;
  padding: 18px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.overview-facts > div { display: flex; align-items: baseline; gap: 9px; padding: 0; border: 0; }
.overview-facts strong { display: inline; color: var(--ink); font-family: var(--serif); font-size: 1.35rem; font-weight: 400; line-height: 1; }
.overview-facts span { display: inline; margin: 0; color: var(--muted); font-size: .66rem; }

@media (max-width: 900px) {
  .cohort-dots-grid, .length-hists { grid-template-columns: 1fr; gap: 28px; }
  .cohort-dots__field { grid-template-columns: repeat(40, 4px); }
  .chapter-strip-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .word-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cohort-dots__field { grid-template-columns: repeat(40, 4px); gap: 2px; }
  .cohort-dots__field i { width: 4px; height: 4px; }
  .chapter-strip-index { grid-template-columns: 1fr; }
  .length-hist__bars { height: 92px; }
  .word-index { grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .overview-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
}

.article-random { margin: 18px 0 -8px; color: var(--green-700); font-size: .66rem; letter-spacing: .06em; }
.article-random span { margin-left: 10px; color: var(--muted); letter-spacing: 0; }

/* restrained motion: reading, not page performance */
.hero__photo { animation: hero-photo-in 160ms ease-out both; }
@keyframes hero-photo-in { from { opacity: 0; } to { opacity: 1; } }
.page-enter { animation: pageIn 160ms var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .hero__photo, .page-enter { animation: none; }
}

/* edition index: fill both sides, grow the active year, leave the archive open */
.cohort-switch {
  width: 100%;
  padding-left: clamp(24px, 4vw, 64px);
  padding-right: clamp(24px, 4vw, 64px);
}
.cohort-switch__items { display: flex; }
.cohort-switch a { flex: 1; min-width: 0; }
.cohort-switch a small { margin-left: auto; }
.cohort-switch__year { transition: transform 160ms var(--ease-out), color 160ms ease; transform-origin: left bottom; }
.cohort-switch a.is-active .cohort-switch__year { transform: scale(1.06); }
.cohort-switch__continues {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
  color: var(--green-700);
  font-family: var(--serif);
  font-size: .64rem;
  font-style: normal;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .cohort-switch { padding-left: 16px; padding-right: 16px; }
  .cohort-switch__items { display: grid; }
  .cohort-switch a { flex: none; }
  .cohort-switch a small { margin-left: 0; }
  .cohort-switch__continues { grid-column: 1 / -1; margin: 2px 0 0; padding: 0; border-left: 0; font-size: .56rem; }
}

/* quieter card interaction */
.memory-card:hover { transform: none; box-shadow: none; border-color: var(--line-strong); }
.memory-card:hover .memory-card__media img { transform: scale(1.01); }
.memory-card:hover .memory-card__title { color: var(--green-700); }
.gallery-item:hover img { transform: scale(1.02); }

/* edition index: four-part ledger, not stretched table cells */
.cohort-switch {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 210px;
  align-items: stretch;
  gap: 0;
  padding: calc(var(--header-h) + 18px) clamp(24px, 4vw, 64px) 0;
  border-bottom: 1px solid var(--line-strong);
}
.cohort-switch__label { align-self: start; padding-top: 22px; }
.cohort-switch__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
.cohort-switch a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
  padding: 14px 24px 16px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
}
.cohort-switch__items a:first-child { border-left: 0; padding-left: 0; }
.cohort-switch a:hover { background: #F4F9FC; }
.cohort-switch a.is-active { background: var(--paper-2); }
.cohort-switch a small { margin: 0; color: var(--muted); font-family: var(--sans); font-size: .62rem; letter-spacing: 0; }
.cohort-switch__line { display: flex; align-items: baseline; gap: 3px; }
.cohort-switch__year { font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
.cohort-switch a.is-active .cohort-switch__year { transform: scale(1.06); }
.cohort-switch a.is-active::after { left: 0; right: 0; bottom: -1px; height: 2px; background: var(--green-700); }
.cohort-switch__open {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  padding: 14px 0 16px 22px;
  border-left: 1px solid var(--line);
  color: var(--muted);
}
.cohort-switch__open > span { color: var(--green-700); font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; }
.cohort-switch__open small { color: var(--muted); font-size: .58rem; line-height: 1.5; }
.cohort-switch__open:hover { background: var(--paper-2); }
.cohort-switch__open:hover > span { color: var(--green-900); }
@media (max-width: 760px) {
  .cohort-switch { display: block; padding: calc(var(--header-h) + 10px) 16px 0; border-bottom: 0; }
  .cohort-switch__label { display: none; }
  .cohort-switch__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line-strong); }
  .cohort-switch a { padding: 9px 8px 11px; border-left: 1px solid var(--line); }
  .cohort-switch a:first-child { padding-left: 0; border-left: 0; }
  .cohort-switch__year { font-size: 1.55rem; }
  .cohort-switch a small { font-size: .54rem; }
  .cohort-switch__open { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0 11px; border-left: 0; border-top: 1px solid var(--line); }
  .cohort-switch__open > span { font-size: .95rem; }
  .cohort-switch__open small { font-size: .55rem; }
}

/* compact edition index with a long open rule */
.cohort-switch {
  display: flex;
  align-items: flex-end;
  gap: 0;
  width: 100%;
  padding: calc(var(--header-h) + 20px) clamp(24px, 4vw, 64px) 0;
  border-bottom: 0;
}
.cohort-switch__label { align-self: flex-end; width: 42px; padding-bottom: 15px; }
.cohort-switch__items { display: flex; align-items: flex-end; gap: 34px; flex: 0 0 auto; }
.cohort-switch a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 0 0 12px;
  border: 0;
  background: transparent;
}
.cohort-switch__items a:first-child { padding-left: 0; }
.cohort-switch a:hover { background: transparent; }
.cohort-switch a.is-active { background: transparent; }
.cohort-switch a small { margin: 0; color: var(--muted); font-family: var(--sans); font-size: .6rem; letter-spacing: 0; }
.cohort-switch__line { display: flex; align-items: baseline; gap: 3px; }
.cohort-switch__year { font-size: clamp(1.9rem, 2.5vw, 2.5rem); }
.cohort-switch a.is-active .cohort-switch__year { transform: scale(1.06); }
.cohort-switch a.is-active::after { left: 0; right: 0; bottom: 0; height: 2px; background: var(--green-700); }
.cohort-switch__rule { flex: 1; height: 1px; margin: 0 28px 15px; background: var(--line); }

.cohort-switch a.cohort-switch__open {
  display: flex;
  flex: 0 0 188px;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  padding: 0 0 12px;
  border: 0;
  background: transparent;
  text-align: right;
}
.cohort-switch__open > span { color: var(--green-700); font-family: var(--serif); font-size: 1.12rem; line-height: 1.2; }
.cohort-switch__open small { color: var(--muted); font-size: .57rem; line-height: 1.5; }
.cohort-switch__open:hover { background: transparent; }
.cohort-switch__open:hover > span { color: var(--green-900); }

@media (max-width: 760px) {
  .cohort-switch { display: block; padding: calc(var(--header-h) + 10px) 16px 0; }
  .cohort-switch__label { display: none; }
  .cohort-switch__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--line-strong); }
  .cohort-switch a { padding: 9px 8px 11px; border-left: 1px solid var(--line); }
  .cohort-switch__items a:first-child { padding-left: 0; border-left: 0; }
  .cohort-switch__year { font-size: 1.55rem; }
  .cohort-switch a small { font-size: .54rem; }
  .cohort-switch a.is-active::after { bottom: -1px; }
  .cohort-switch__rule { display: none; }
  .cohort-switch a.cohort-switch__open { flex: none; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0 11px; border-top: 1px solid var(--line); text-align: left; }
  .cohort-switch__open > span { font-size: .95rem; }
  .cohort-switch__open small { font-size: .55rem; }
}

/* Figma-like precision pass: rows are ledger lines, not cards */
.answer-row {
  grid-template-columns: 34px 100px minmax(0, 1fr) 24px;
  gap: 20px;
  margin: 0 -12px;
  padding: 26px 12px;
  transition: background 140ms ease;
}
.answer-row__index {
  padding-top: 5px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .02em;
  transition: color 140ms ease;
}
.answer-row__text { transition: transform 140ms var(--ease-out); }
.answer-row:hover { background: #F4F9FC; }
.answer-row:hover .answer-row__index { color: var(--green-700); }
.answer-row:hover .answer-row__text { transform: translateX(3px); }
.answer-row:hover .answer-row__arrow { opacity: 1; transform: translateX(0); color: var(--green-700); }
.question-index a { transition: color 140ms ease, padding-left 140ms var(--ease-out); }
.question-index a:hover { padding-left: 4px; color: var(--green-700); }
.question-index a:hover small { color: var(--green-700); }
@media (max-width: 760px) {
  .answer-row {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px 10px;
    margin: 0 -8px;
    padding: 22px 8px;
  }
  .answer-row__index { grid-column: 1; grid-row: 1; padding-top: 0; }
  .answer-row__cat { grid-column: 2; grid-row: 1; padding-top: 0; }
  .answer-row__text { grid-column: 1 / -1; grid-row: 2; }
  .answer-row__arrow { display: none; }
}

/* QZ memory brand */
.brand__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--green-700);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--green-700);
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: -.12em;
  line-height: 1;
  position: relative;
}
.brand__mark::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 5px;
  height: 5px;
  background: var(--green-700);
  border-radius: 50%;
}
.brand__text strong {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.24rem;
  font-weight: 400;
  letter-spacing: -.055em;
  text-transform: lowercase;
}
.footer-title--brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--serif);
  letter-spacing: -.05em;
}
.footer-title--brand em {
  color: rgba(255, 255, 255, .62);
  font-size: .52em;
  font-style: italic;
  letter-spacing: 0;
}

/* active edition: scale the line, not the year glyph */
.cohort-switch__line { transition: transform 180ms var(--ease-out), color 180ms ease; transform-origin: left bottom; }
.cohort-switch__year { color: var(--ink); transform: none; transition: color 180ms ease; }
.cohort-switch a:hover .cohort-switch__line { transform: scale(1.03); }
.cohort-switch a.is-active .cohort-switch__line { transform: scale(1.06); }
.cohort-switch a.is-active .cohort-switch__year { transform: none; }

/* intro: a quiet cover, then the archive */
.qz-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--green-900);
  color: #FFFFFF;
  transition: opacity 680ms var(--ease-out), transform 760ms var(--ease-out);
}
.qz-intro.is-leaving { opacity: 0; transform: scale(1.012); pointer-events: none; }
.qz-intro__bg {
  position: absolute;
  inset: -36px;
  background: url('/assets/campus/aerial.jpg') center / cover no-repeat;
  filter: blur(22px) saturate(.68) brightness(.78);
  transform: scale(1.04);
}
.qz-intro__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 29, 47, .46) 0%, rgba(6, 29, 47, .78) 100%);
}
.qz-intro__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px;
  animation: intro-in 620ms var(--ease-out) both;
}
.qz-intro__kicker {
  margin: 0;
  color: rgba(255, 255, 255, .58);
  font-size: .68rem;
  letter-spacing: .16em;
}
.qz-intro__wordmark {
  display: flex;
  align-items: baseline;
  gap: .12em;
  margin: 24px 0 18px;
  font-family: var(--serif);
  line-height: .85;
  letter-spacing: -.075em;
}
.qz-intro__wordmark span { color: #FFFFFF; font-size: clamp(5rem, 13vw, 10rem); font-weight: 400; }
.qz-intro__wordmark em {
  color: #DDECF6;
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  font-style: italic;
  letter-spacing: .01em;
}
.qz-intro__meta { margin: 0; color: rgba(255, 255, 255, .58); font-size: .68rem; letter-spacing: .08em; }
.qz-intro__enter {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-top: 38px;
  padding: 13px 22px;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 0;
  background: transparent;
  color: #FFFFFF;
  font-size: .82rem;
  letter-spacing: .08em;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.qz-intro__enter:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--green-900); }
.qz-intro__enter span { font-family: var(--sans); }
.qz-intro__fine { margin: 64px 0 0; color: rgba(255, 255, 255, .38); font-size: .58rem; letter-spacing: .06em; }
@keyframes intro-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
body.is-intro { overflow: hidden; }
body.is-intro #app { opacity: 0; transform: translateY(10px); }
#app { transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
@media (max-width: 760px) {
  .brand__mark { width: 34px; height: 34px; font-size: .9rem; }
  .brand__text strong { font-size: 1.08rem; }
  .qz-intro__inner { padding: 24px; }
  .qz-intro__wordmark { flex-direction: column; align-items: center; gap: 12px; margin: 26px 0 20px; }
  .qz-intro__wordmark span { font-size: clamp(5.2rem, 23vw, 8rem); }
  .qz-intro__wordmark em { font-size: 1.55rem; }
  .qz-intro__fine { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .qz-intro, .qz-intro__inner, #app { transition: none; animation: none; }
}

.qz-intro__wordmark { margin-bottom: 34px; }
@media (max-width: 760px) {
  .qz-intro__wordmark { margin-bottom: 26px; }
}

.qz-intro__wordmark { margin-bottom: 54px; }
@media (max-width: 760px) {
  .qz-intro__wordmark { margin-bottom: 38px; }
}

/* cover: paper plate + campus plate, then a split reveal */
.qz-cover {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: minmax(0, 56%) minmax(0, 44%);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  transition: none;
}
.qz-cover.is-leaving { opacity: 1; transform: none; pointer-events: none; }
.qz-cover__paper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 44px clamp(28px, 5.5vw, 92px) 28px;
  background: var(--paper);
  border-right: 1px solid var(--line-strong);
  transition: transform 900ms cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
.qz-cover__photo {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--paper-2);
  transition: transform 900ms cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
.qz-cover.is-leaving .qz-cover__paper { transform: translateX(-102%); }
.qz-cover.is-leaving .qz-cover__photo { transform: translateX(102%); }
.qz-cover__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(.9) contrast(.98);
}
.qz-cover__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 32, 48, 0) 52%, rgba(8, 32, 48, .52) 100%);
  pointer-events: none;
}
.qz-cover__photo figcaption {
  position: absolute;
  z-index: 1;
  left: 28px;
  right: 28px;
  bottom: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255, 255, 255, .82);
  font-size: .64rem;
  letter-spacing: .04em;
}
.qz-cover__top { display: flex; align-items: center; gap: 12px; }
.qz-cover__top img { width: 38px; height: 38px; object-fit: contain; }
.qz-cover__top span { display: flex; flex-direction: column; line-height: 1.2; }
.qz-cover__top strong { font-family: var(--serif); font-size: .92rem; font-weight: 500; letter-spacing: .06em; }
.qz-cover__top small { margin-top: 3px; color: var(--muted); font-size: .62rem; letter-spacing: .08em; }
.qz-cover__main { max-width: 760px; }
.qz-cover__kicker {
  margin: 0 0 18px;
  color: var(--green-700);
  font-size: .68rem;
  letter-spacing: .13em;
}
.qz-cover__wordmark {
  display: flex;
  align-items: baseline;
  gap: .1em;
  margin: 0 0 22px;
  font-family: var(--serif);
  line-height: .82;
  letter-spacing: -.085em;
}
.qz-cover__wordmark span { color: var(--ink); font-size: clamp(5.2rem, 10vw, 9.5rem); font-weight: 400; }
.qz-cover__wordmark em { color: var(--green-700); font-size: clamp(1.3rem, 2.7vw, 2.4rem); font-style: italic; letter-spacing: 0; }
.qz-cover__meta { margin: 0; color: var(--muted); font-size: .72rem; letter-spacing: .03em; }
.qz-cover__enter {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-top: 38px;
  padding: 13px 20px;
  border: 1px solid var(--green-700);
  border-radius: 0;
  background: var(--green-700);
  color: #FFFFFF;
  font-size: .78rem;
  letter-spacing: .08em;
  transition: background 180ms ease, border-color 180ms ease;
}
.qz-cover__enter:hover { background: var(--green-900); border-color: var(--green-900); }
.qz-cover__fine {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: .58rem;
  letter-spacing: .06em;
}
body.is-intro #app { opacity: 0; transform: scale(.995); }
#app { transition: opacity 820ms var(--ease-out), transform 820ms var(--ease-out); }
@media (max-width: 760px) {
  .qz-cover { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 33vh; }
  .qz-cover__paper { padding: 24px 24px 20px; border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .qz-cover__main { padding: 20px 0; }
  .qz-cover__kicker { margin-bottom: 12px; font-size: .6rem; }
  .qz-cover__wordmark { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
  .qz-cover__wordmark span { font-size: clamp(4rem, 20vw, 6.5rem); }
  .qz-cover__wordmark em { font-size: 1.25rem; }
  .qz-cover__meta { font-size: .62rem; }
  .qz-cover__enter { margin-top: 24px; padding: 12px 16px; font-size: .72rem; }
  .qz-cover__fine { font-size: .53rem; }
  .qz-cover__photo figcaption { left: 16px; right: 16px; bottom: 12px; font-size: .55rem; }
  .qz-cover.is-leaving .qz-cover__paper { transform: translateX(-102%); }
  .qz-cover.is-leaving .qz-cover__photo { transform: translateX(102%); }
}
@media (prefers-reduced-motion: reduce) {
  .qz-cover__paper, .qz-cover__photo, #app { transition: none; }
}

.qz-cover { place-items: stretch; }
.qz-cover__main { margin: auto 0; }
@media (max-width: 760px) {
  .qz-cover__main { margin: 0; }
}

/* cover typography breathing room */
.qz-cover__wordmark { margin-bottom: 38px; }
@media (max-width: 760px) {
  .qz-cover__paper { justify-content: flex-start; }
  .qz-cover__main { margin: 52px 0 0; }
  .qz-cover__fine { margin-top: auto; padding-top: 24px; }
  .qz-cover__wordmark { margin-bottom: 24px; }
}

/* use the supplied logo */
img.brand__mark {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
img.brand__mark::after { display: none; }
.brand__text strong {
  color: var(--green-700);
  font-family: var(--sans);
  font-size: 1.02rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: none;
}
.footer-logo { display: block; width: 220px; height: auto; margin: 12px 0 14px; }

.qz-cover__logo {
  display: block;
  width: clamp(230px, 27vw, 360px);
  height: auto;
  margin: 0 0 26px;
}
.qz-cover__wordmark { display: none; }

/* smoother cover lift: one sheet, layered parallax */
.qz-cover {
  will-change: transform;
  transition: transform 1120ms cubic-bezier(.76, 0, .24, 1);
}
.qz-cover.is-leaving {
  opacity: 1;
  transform: translateY(-101%);
  pointer-events: none;
}
.qz-cover__paper, .qz-cover__photo { transform: none; transition: none; }
.qz-cover.is-leaving .qz-cover__paper,
.qz-cover.is-leaving .qz-cover__photo { transform: none; }
.qz-cover__main { transition: opacity 420ms ease, transform 520ms var(--ease-out); }
.qz-cover.is-leaving .qz-cover__main { opacity: 0; transform: translateY(-14px); }
.qz-cover__photo img { transition: transform 1240ms cubic-bezier(.22, 1, .36, 1); }
.qz-cover.is-leaving .qz-cover__photo img { transform: scale(1.045) translateY(2.5%); }
body.is-intro #app { opacity: 0; transform: scale(.992); }
#app { transition: opacity 980ms var(--ease-out), transform 1080ms var(--ease-out); }

@media (max-width: 760px) {
  img.brand__mark { width: 34px; height: 34px; }
  .brand__text strong { font-size: .98rem; }
  .footer-logo { width: 180px; }
  .qz-cover__logo { width: clamp(210px, 58vw, 270px); margin-bottom: 20px; }
  .qz-cover.is-leaving .qz-cover__main { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .qz-cover, .qz-cover__main, .qz-cover__photo img, #app { transition: none; }
}

/* Full-bleed campus cover. The photograph stays legible behind a white veil. */
.qz-cover {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  background: #F8FBFD;
  color: #0D4F82;
  opacity: 1;
  transform: none;
  transition: opacity 820ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover.is-leaving {
  opacity: 0;
  transform: none;
}
.qz-cover__photo {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  transform: none;
  transition: none;
}
.qz-cover__photo::after { content: none; }
.qz-cover__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  filter: blur(4.5px) saturate(.8);
  transform: scale(1.035);
  transition: filter 940ms cubic-bezier(.22, 1, .36, 1), transform 940ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover.is-leaving .qz-cover__photo img {
  filter: blur(1px) saturate(.88);
  transform: scale(1.065);
}
.qz-cover__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(248, 251, 253, .52);
  transition: opacity 820ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover.is-leaving .qz-cover__veil { opacity: .3; }
.qz-cover__main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(34px, 5vw, 54px);
  width: min(100% - 40px, 700px);
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: center;
  transition: opacity 400ms ease, transform 520ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover.is-leaving .qz-cover__main { opacity: 0; transform: translateY(-12px); }
.qz-cover__logo { width: min(28vw, 270px); height: auto; margin: 0; }
.qz-cover__enter {
  justify-content: center;
  gap: 30px;
  min-width: 148px;
  min-height: 52px;
  margin: 0;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid #0D4F82;
  border-radius: 0;
  background: transparent;
  color: #0D4F82;
  font-size: 14px;
  letter-spacing: .08em;
  transition: color 220ms ease, border-color 220ms ease;
}
.qz-cover__enter:hover { background: transparent; border-color: #176DA8; color: #176DA8; transform: none; }
.qz-cover__enter span { transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
.qz-cover__enter:hover span { transform: translateX(5px); }
.qz-cover__enter:active span { transform: translateX(2px); }
.qz-cover__enter:focus-visible { outline: 3px solid #176DA8; outline-offset: 4px; }
.qz-cover__enter.is-initial-focus:focus-visible { outline: none; }
body.is-intro #app { opacity: 0; transform: translateY(8px); }
#app { transition: opacity 820ms cubic-bezier(.22, 1, .36, 1), transform 820ms cubic-bezier(.22, 1, .36, 1); }
@media (max-width: 760px) {
  .qz-cover { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .qz-cover__photo img { object-position: 70% center; }
  .qz-cover__main { gap: 22px; margin: 0; padding: 0; }
  .qz-cover__logo { width: min(62vw, 235px); margin: 0; }
  .qz-cover__enter { min-height: 46px; margin: 0; }
}
@media (max-height: 500px) {
  .qz-cover__main { gap: 12px; }
  .qz-cover__logo { width: min(27vh, 165px); }
}
@media (prefers-reduced-motion: reduce) {
  .qz-cover, .qz-cover__photo img, .qz-cover__veil, .qz-cover__main, #app { transition: none; }
}

/* Cover lettering and hand-off into the memoir. */
.qz-cover__lettermark {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 34px);
  width: min(90vw, 700px);
  color: #0D4F82;
  user-select: none;
}
.qz-cover__mark-frame {
  position: relative;
  display: block;
  width: clamp(48px, 5vw, 58px);
  height: clamp(86px, 8vw, 104px);
  flex: none;
  overflow: hidden;
  transition: opacity 420ms ease, filter 500ms ease, transform 560ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  transform: translate(-50%, -50%);
}
.qz-cover__type {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: .65em;
  white-space: nowrap;
  line-height: 1;
}
.qz-cover__letters {
  position: relative;
  font-family: Baskerville, 'Baskerville Old Face', 'Times New Roman', serif;
  font-size: clamp(4.5rem, 7.7vw, 6.5rem);
  font-weight: 400;
  letter-spacing: 0;
  padding-right: 0;
  text-shadow: 0 2px 18px rgba(255, 255, 255, .34);
  transition: transform 560ms cubic-bezier(.22, 1, .36, 1), filter 500ms ease, opacity 420ms ease;
}
.qz-cover__memory {
  position: relative;
  margin-top: 0;
  padding: 0;
  font-family: Baskerville, 'Baskerville Old Face', Georgia, serif;
  font-size: clamp(4.5rem, 7.7vw, 6.5rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 0 2px 18px rgba(255, 255, 255, .34);
  transition: transform 620ms cubic-bezier(.22, 1, .36, 1), filter 500ms ease, opacity 460ms ease;
}
.qz-cover__memory::after { content: none; }
.qz-cover.is-leaving { transition: opacity 590ms ease 290ms; }
.qz-cover.is-leaving .qz-cover__mark-frame { opacity: 0; filter: blur(9px); transform: translate(-19px, -7px) scale(1.04); }
.qz-cover.is-leaving .qz-cover__letters { opacity: 0; filter: blur(11px); transform: translate(-13px, -21px) scale(1.07); }
.qz-cover.is-leaving .qz-cover__memory { opacity: 0; filter: blur(9px); transform: translate(17px, 10px); }
.qz-cover.is-leaving .qz-cover__main { opacity: 1; transform: none; }
.qz-cover.is-leaving .qz-cover__enter { opacity: 0; filter: blur(5px); transform: translateY(10px); transition: opacity 300ms ease, filter 350ms ease, transform 350ms ease; }
.footer-bottom { align-items: flex-start; }
.footer-bottom__notes { display: grid; gap: 7px; text-align: left; }
.footer-bottom__notes a { color: rgba(255, 255, 255, .75); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom__notes a:hover { color: #FFFFFF; }
.privacy-box a, .about-note a { color: #176DA8; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .qz-cover__lettermark { width: min(94vw, 420px); gap: 14px; }
  .qz-cover__mark-frame { width: clamp(30px, 8vw, 42px); height: clamp(54px, 14vw, 75px); }
  .qz-cover__letters, .qz-cover__memory { font-size: clamp(2.8rem, 11.5vw, 3.7rem); }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .qz-cover__mark-frame, .qz-cover__letters, .qz-cover__memory, .qz-cover.is-leaving, .qz-cover.is-leaving .qz-cover__enter { transition: none; }
}

/* Year selection: keep the index in place and move one shared rule. */
.page-enter { position: relative; }
.cohort-switch__items { position: relative; }
.cohort-switch__items a.is-active::after { opacity: 0; }
.cohort-switch__indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 2;
  height: 2px;
  background: #176DA8;
  opacity: 0;
  pointer-events: none;
}
.cohort-switch__indicator.is-ready {
  opacity: 1;
  transition: transform 560ms cubic-bezier(.22, 1, .36, 1), width 560ms cubic-bezier(.22, 1, .36, 1);
}
.cohort-switch__line, .cohort-switch__year {
  transition: transform 400ms cubic-bezier(.22, 1, .36, 1), color 400ms ease;
}
.cohort-switch + .cohort-home-content .hero { padding-top: 18px; }
.article-media-note {
  margin: 20px 0;
  padding: 14px 17px;
  border-left: 2px solid #176DA8;
  background: #F2F7FA;
  color: #436178;
  font-size: .82rem;
  line-height: 1.8;
}
@media (prefers-reduced-motion: reduce) {
  .cohort-switch__indicator.is-ready, .cohort-switch__line, .cohort-switch__year { transition: none; }
}

/* Campus: photographs lead, memories remain the way in. */
.campus-head { padding: 20px 0 14px; }
.campus-redesign { padding-bottom: 68px; }
.campus-redesign .campus-lead {
  position: relative;
  width: 100vw;
  height: min(53svh, 560px);
  min-height: 320px;
  margin: 0 0 0 calc(50% - 50vw);
  overflow: hidden;
  border: 0;
  background: #DDECF6;
}
.campus-redesign .campus-lead img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 48%;
  border: 0;
}
.campus-redesign .campus-lead figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 9px;
  padding: clamp(26px, 5vw, 80px);
  background: linear-gradient(0deg, rgba(8, 37, 57, .72), rgba(8, 37, 57, 0) 62%);
  color: #FFFFFF;
}
.campus-redesign .campus-lead figcaption span,
.campus-redesign .campus-lead figcaption p {
  margin: 0;
  color: rgba(255, 255, 255, .94);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
}
.campus-redesign .campus-lead h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(42px, 4.7vw, 68px);
  font-weight: 500;
  line-height: 1.12;
  color: #FFFFFF;
}
.campus-places { padding-top: 68px; }
.campus-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #AFC8D9;
}
.campus-section-head span { display: block; margin-bottom: 8px; color: #176DA8; font-size: 11px; }
.campus-section-head h2 { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.3; }
.campus-section-head p { margin: 0 0 3px; color: var(--muted); font-size: 12px; }
.campus-place-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 46px; margin-top: 24px; }
.campus-place { display: block; min-width: 0; color: inherit; }
.campus-place__media { display: block; aspect-ratio: 1.75; overflow: hidden; background: #EEF5FA; }
.campus-place__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 450ms cubic-bezier(.22, 1, .36, 1); }
.campus-place:hover .campus-place__media img { transform: scale(1.025); }
.campus-place__body { display: block; padding-top: 16px; }
.campus-place__top { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.campus-place__num { color: var(--muted); font-size: 11px; }
.campus-place__top strong { color: var(--ink); font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.3; }
.campus-place__count { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.campus-place__quote { display: -webkit-box; min-height: 3.4em; margin-top: 10px; overflow: hidden; color: var(--ink-soft); font-size: 14px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.campus-place__action { display: inline-flex; align-items: center; gap: 8px; margin-top: 17px; padding-bottom: 5px; border-bottom: 1px solid #BDD2E1; color: #0D4F82; font-size: 12px; }
.campus-place__action .icon { width: 14px; height: 14px; transition: transform 180ms ease; }
.campus-place:hover .campus-place__action .icon { transform: translateX(3px); }
.campus-place:focus-visible { outline: 2px solid #176DA8; outline-offset: 5px; }
.campus-more { margin-top: 94px; }
.campus-redesign .location-list { margin-top: 8px; border-top: 0; }
.campus-redesign .location-row { grid-template-columns: 32px 116px minmax(0, 1fr) 68px 20px; gap: 22px; align-items: center; padding: 23px 0; }
.campus-redesign .location-row__num, .campus-redesign .location-row__count { font-family: var(--sans); font-size: 11px; }
.campus-redesign .location-row__name { font-size: 20px; }
.campus-redesign .location-row__quote { display: -webkit-box; overflow: hidden; color: var(--ink-soft); font-size: 14px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.campus-redesign .location-row__arrow { color: #176DA8; opacity: 0; transform: translateX(-5px); transition: opacity 180ms ease, transform 180ms ease; }
.campus-redesign .location-row:hover .location-row__arrow,
.campus-redesign .location-row:focus-visible .location-row__arrow { opacity: 1; transform: none; }
.campus-redesign .location-row:hover .location-row__name { color: #176DA8; }
.campus-redesign .location-row:focus-visible { outline: 2px solid #176DA8; outline-offset: 3px; }
.campus-redesign .campus-names { display: block; margin-top: 76px; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.campus-redesign .campus-names summary { display: flex; align-items: center; gap: 14px; padding: 19px 0; color: var(--ink); font-family: var(--serif); font-size: 19px; cursor: pointer; list-style: none; }
.campus-redesign .campus-names summary::-webkit-details-marker { display: none; }
.campus-redesign .campus-names summary::after { content: "+"; margin-left: auto; color: #176DA8; font-family: var(--sans); font-size: 22px; line-height: 1; }
.campus-redesign .campus-names[open] summary::after { content: "−"; }
.campus-redesign .campus-names summary span { color: var(--muted); font-family: var(--sans); font-size: 11px; }
.campus-redesign .campus-names p { display: flex; flex-wrap: wrap; gap: 4px 23px; margin: 0; padding: 0 0 24px; color: var(--ink-soft); font-size: 14px; }
.campus-redesign .campus-names em { margin: 0; }
.campus-redesign .campus-credit { margin-top: 35px; padding: 0; border: 0; }
@media (max-width: 760px) {
  .campus-head { padding: 13px 0 12px; }
  .campus-redesign .campus-lead { height: 42svh; min-height: 280px; }
  .campus-redesign .campus-lead img { object-position: 52% center; }
  .campus-redesign .campus-lead figcaption { padding: 24px 18px; }
  .campus-redesign .campus-lead figcaption span,
  .campus-redesign .campus-lead figcaption p { font-size: 11px; }
  .campus-places { padding-top: 45px; }
  .campus-section-head h2 { font-size: 24px; }
  .campus-place-grid { grid-template-columns: 1fr; gap: 39px; margin-top: 19px; }
  .campus-place__media { aspect-ratio: 1.5; }
  .campus-place__top strong { font-size: 21px; }
  .campus-more { margin-top: 72px; }
  .campus-redesign .location-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 7px 10px; padding: 20px 0; }
  .campus-redesign .location-row__num { grid-column: 1; grid-row: 1; }
  .campus-redesign .location-row__name { grid-column: 2; grid-row: 1; font-size: 18px; }
  .campus-redesign .location-row__count { grid-column: 3; grid-row: 1; }
  .campus-redesign .location-row__quote { grid-column: 2 / -1; grid-row: 2; margin: 3px 0 0; font-size: 13px; }
  .campus-redesign .location-row__arrow { display: none; }
  .campus-redesign .campus-names { margin-top: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .campus-place__media img, .campus-place__action .icon, .campus-redesign .location-row__arrow { transition: none; }
}

/* Overview: readable editorial visualisations with direct paths to the source memories. */
.overview-section--words { margin-top: 50px; }
.overview-viz-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 28px 0 22px; }
.overview-viz-head__number { color: #176DA8; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; }
.overview-viz-head h2 { margin: 7px 0 8px; color: var(--ink); font-family: var(--serif); font-size: clamp(1.8rem, 3.2vw, 3rem); font-weight: 400; line-height: 1.2; }
.overview-viz-head p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.7; }
.overview-year-tabs { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid #C9DCE9; background: #F2F7FB; white-space: nowrap; }
.overview-year-tabs button { min-width: 82px; min-height: 36px; padding: 7px 12px; border: 0; background: transparent; color: #54728A; font-family: var(--sans); font-size: .72rem; cursor: pointer; transition: background .2s ease, color .2s ease; }
.overview-year-tabs button:hover { color: #0D4F82; }
.overview-year-tabs button[aria-pressed="true"] { background: #FFFFFF; color: #0D4F82; box-shadow: 0 1px 5px rgba(13, 79, 130, .12); }
.overview-year-tabs button:focus-visible, .overview-word-cloud__term:focus-visible, .overview-word-rank__row:focus-visible, .overview-place-cell:focus-visible { outline: 2px solid #176DA8; outline-offset: 2px; }
.overview-words__panel { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(250px, .9fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; padding: 30px 0 28px; border-top: 1px solid #BFD4E2; border-bottom: 1px solid #DCE8EF; }
.overview-words__panel[hidden] { display: none; }
.overview-word-cloud { display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; justify-content: center; gap: 7px 20px; min-height: 344px; padding: 18px 20px; overflow: hidden; background: radial-gradient(ellipse at center, #F8FBFD 0, #F1F7FB 70%, #EBF4F9 100%); }
.overview-word-cloud__term { display: inline-block; color: #0D4F82; font-family: var(--serif); font-size: calc(clamp(1rem, 1.6vw, 1.2rem) * var(--weight)); line-height: 1.15; white-space: nowrap; transition: transform .22s cubic-bezier(.22, 1, .36, 1), color .22s ease; }
.overview-word-cloud__term:hover { color: #176DA8; transform: translateY(-3px); }
.overview-word-cloud__term[style*="--tone:1"] { color: #216A9A; }
.overview-word-cloud__term[style*="--tone:2"] { color: #3E7FA8; }
.overview-word-cloud__term[style*="--tone:3"] { color: #627F92; }
.overview-word-cloud__term[style*="--tone:4"] { color: #315A77; }
.overview-word-rank { min-width: 0; padding-top: 2px; }
.overview-word-rank__head { display: flex; justify-content: space-between; margin: 0 0 9px; color: #59778D; font-size: .68rem; }
.overview-word-rank__head span { color: var(--muted); }
.overview-word-rank__row { display: grid; grid-template-columns: 23px minmax(48px, auto) minmax(20px, 1fr) 32px; gap: 10px; align-items: center; min-height: 37px; border-bottom: 1px solid #DCE8EF; color: #18344A; }
.overview-word-rank__row:hover .overview-word-rank__name { color: #176DA8; }
.overview-word-rank__num { color: #9BB4C4; font-family: var(--mono); font-size: .55rem; }
.overview-word-rank__name { font-size: .82rem; white-space: nowrap; }
.overview-word-rank__bar { height: 3px; background: #E7F0F6; }
.overview-word-rank__bar i { display: block; height: 100%; background: #176DA8; }
.overview-word-rank__row strong { color: #5D7D93; font-family: var(--mono); font-size: .58rem; font-weight: 400; text-align: right; }
.overview-place-matrix { margin-top: 22px; border-top: 1px solid #BFD4E2; }
.overview-place-row { display: grid; grid-template-columns: minmax(104px, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; min-height: 48px; padding: 6px 0; border-bottom: 1px solid #DCE8EF; }
.overview-place-row--head { min-height: 36px; align-items: center; color: #6A8597; font-size: .68rem; }
.overview-place-row--head span:not(:first-child) { text-align: center; }
.overview-place-row__name { display: flex; align-items: center; color: #18344A; font-family: var(--serif); font-size: 1.1rem; }
.overview-place-cell { display: grid; place-items: center; min-width: 0; border: 1px solid rgba(23, 109, 168, .12); background: rgba(23, 109, 168, var(--heat)); color: #0D4F82; font-family: var(--mono); font-size: .75rem; transition: transform .22s ease, border-color .22s ease; }
.overview-place-cell.is-deep { color: #FFFFFF; }
a.overview-place-cell:hover { z-index: 1; border-color: #0D4F82; transform: scale(1.025); }
.overview-page .cohort-dots { display: block; color: inherit; }
.overview-page .cohort-dots:hover .cohort-dots__head span:first-child,
.overview-page .chapter-index__item:hover { color: #176DA8; }
.overview-page .cohort-dots:focus-visible,
.overview-page .chapter-index__item:focus-visible { outline: 2px solid #176DA8; outline-offset: 3px; }
@media (max-width: 900px) {
  .overview-viz-head { align-items: flex-start; flex-direction: column; }
  .overview-words__panel { grid-template-columns: 1fr; gap: 24px; }
  .overview-word-cloud { min-height: 280px; }
}
@media (max-width: 760px) {
  .overview-section--words { margin-top: 40px; }
  .overview-viz-head { margin: 23px 0 17px; }
  .overview-year-tabs { width: 100%; }
  .overview-year-tabs button { min-width: 0; flex: 1; }
  .overview-words__panel { padding-top: 14px; }
  .overview-word-cloud { min-height: 260px; padding: 17px 10px; gap: 6px 13px; }
  .overview-word-cloud__term { font-size: calc(.94rem * var(--weight)); }
  .overview-place-row { grid-template-columns: 76px repeat(3, minmax(0, 1fr)); gap: 5px; min-height: 45px; }
  .overview-place-row__name { font-size: .92rem; }
  .overview-place-cell { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .overview-year-tabs button, .overview-word-cloud__term, .overview-place-cell { transition: none; }
}

/* Gallery lightbox: keep the photo, and give the words a place to land. */
.lightbox { padding: 32px 80px 70px; }
.lightbox__figure {
  width: min(1120px, 90vw);
  max-width: min(1120px, 90vw);
  max-height: calc(100vh - 82px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.lightbox__figure > img {
  max-width: 100%;
  max-height: min(70vh, 720px);
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, .16);
}
.lightbox__caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 15px 2px 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  color: #FFFFFF;
  text-align: left;
}
.lightbox__caption[hidden] { display: none; }
.lightbox__copy { min-width: 0; }
.lightbox__eyebrow {
  margin: 0 0 5px;
  color: rgba(255, 255, 255, .48);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .08em;
}
.lightbox__eyebrow[hidden] { display: none; }
.lightbox__title {
  margin: 0 0 5px;
  color: #FFFFFF;
  font-family: var(--serif);
  font-size: clamp(.98rem, 1.35vw, 1.18rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .01em;
}
.lightbox__title[hidden] { display: none; }
.lightbox__text {
  display: -webkit-box;
  overflow: hidden;
  max-width: 780px;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
  line-height: 1.8;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.lightbox__text[hidden] { display: none; }
.lightbox__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .34);
  color: #FFFFFF;
  font-size: .7rem;
  letter-spacing: .04em;
  white-space: nowrap;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease;
}
.lightbox__link:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .58); }
.lightbox__link[hidden] { display: none; }
.lightbox__link span { font-family: var(--sans); }

@media (max-width: 760px) {
  .lightbox { padding: 52px 12px 50px; }
  .lightbox__figure { width: 100%; max-width: 100%; max-height: calc(100vh - 92px); }
  .lightbox__figure > img { max-height: 58vh; }
  .lightbox__caption { grid-template-columns: 1fr; align-items: start; gap: 10px; padding-top: 11px; }
  .lightbox__title { font-size: 1rem; }
  .lightbox__text { font-size: .76rem; line-height: 1.7; -webkit-line-clamp: 3; }
  .lightbox__link { justify-self: start; min-height: 32px; padding: 6px 10px; font-size: .68rem; }
  .lightbox__count { left: 16px; bottom: 13px; }
}

/* Lightbox: centered caption, image zoom, save */
.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: min(70vh, 720px);
  overflow: hidden;
  overscroll-behavior: contain;
}
.lightbox__stage > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(70vh, 720px);
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, .16);
  cursor: zoom-in;
}
.lightbox__stage.is-zoomed {
  align-items: flex-start;
  justify-content: flex-start;
  overflow: auto;
}
.lightbox__stage.is-zoomed > img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
.lightbox__figure .lightbox__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 15px 2px 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  color: #FFFFFF;
  text-align: center;
}
.lightbox__copy { max-width: 820px; text-align: center; }
.lightbox__eyebrow {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, .55);
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .02em;
}
.lightbox__title {
  margin: 0 0 6px;
  color: #FFFFFF;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.45vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.lightbox__text {
  display: -webkit-box;
  overflow: hidden;
  max-width: 820px;
  margin: 0 auto;
  color: rgba(255, 255, 255, .74);
  font-size: .84rem;
  line-height: 1.8;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.lightbox__link { align-self: center; }
.lightbox__tools {
  position: absolute;
  right: 24px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.lightbox__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(9, 30, 45, .35);
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.lightbox__tool:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .56); }

@media (max-width: 760px) {
  .lightbox__stage { max-height: 58vh; }
  .lightbox__stage > img { max-height: 58vh; }
  .lightbox__figure .lightbox__caption { gap: 10px; padding-top: 11px; }
  .lightbox__eyebrow { font-size: .68rem; }
  .lightbox__title { font-size: 1.02rem; }
  .lightbox__text { font-size: .8rem; line-height: 1.7; -webkit-line-clamp: 3; }
  .lightbox__tools { right: 12px; bottom: 10px; }
  .lightbox__tool { min-height: 32px; padding: 5px 9px; font-size: .7rem; }
}

/* Declutter: remove decorative micro-labels, raise remaining functional text */
.hero__kicker,
.cohort-switch__label,
.home-answers .home-label,
.home-index .home-label,
.home-photos .home-label,
.footer-kicker,
.overview-viz-head__number,
.campus-section-head > div > span { display: none !important; }

.brand__text small { font-size: .7rem; letter-spacing: .02em; }
.cohort-switch a small { font-size: .72rem; letter-spacing: 0; }
.cohort-switch__open small { font-size: .72rem; letter-spacing: 0; }
.answer-row__index { font-size: .66rem; }
.answer-row__cat { font-size: .75rem; letter-spacing: .01em; }
.question-index a small { font-size: .72rem; }
.home-label { font-size: .74rem; letter-spacing: .02em; }
.gallery-item__caption { font-size: .75rem; }
.breadcrumb { font-size: .74rem; letter-spacing: .01em; }
.footer-col h3 { font-size: .74rem; letter-spacing: .04em; text-transform: none; }
.footer-col a, .footer-col p { font-size: .78rem; line-height: 1.8; }
.footer-sub { font-size: .8rem; letter-spacing: .02em; }
.footer-bottom__notes p { font-size: .78rem; line-height: 1.8; }
.overview-viz-head p { font-size: .82rem; }
.overview-word-rank__num { font-size: .66rem; }
.overview-word-rank__row strong { font-size: .7rem; }
.overview-place-row--head { font-size: .74rem; }

/* Keep lightbox tools away from the Netlify badge in the bottom-right. */
.lightbox__tools { top: 24px; left: 24px; right: auto; bottom: auto; }
@media (max-width: 760px) {
  .lightbox__tools { top: 12px; left: 12px; right: auto; bottom: auto; }
  .answer-row__index { font-size: .7rem; }
  .cohort-switch__open { font-size: .8rem; }
}

/* One-line "补一页" instead of a stack of microcopy. */
.cohort-switch__open {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--green-700);
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.2;
}
.cohort-switch__open .icon { width: 15px; height: 15px; }
.cohort-switch__open:hover { color: var(--green-900); }
@media (max-width: 760px) {
  .cohort-switch__open { padding: 0; border-left: 0; font-size: .92rem; }
}

.cohort-switch a.cohort-switch__open {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 0 12px;
  text-align: right;
}
@media (max-width: 760px) {
  .cohort-switch a.cohort-switch__open { padding: 0; }
}

/* Tools sit above the counter, clear of the Netlify badge and header. */
.lightbox__tools { top: auto; left: 24px; right: auto; bottom: 46px; }
@media (max-width: 760px) {
  .lightbox__tools { top: auto; left: 12px; right: auto; bottom: 42px; }
}

/* Overview: headings carry the page; drop repeated labels and explainer lines. */
.overview-page .home-label,
.overview-viz-head p { display: none !important; }
.overview-page .overview-lead { margin-bottom: 42px; }
.school-page .home-label {
  padding-bottom: 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: .02em;
}
.school-page .home-label span:last-child { font-size: .8rem; letter-spacing: 0; }

.hero__intro { font-size: .84rem; }
.hero figcaption { font-size: .76rem; }
.answer-row__index { font-size: .7rem; }

/* Editorial pass: one masthead line, one ledger line, content first. */
.site-header {
  background: rgba(248, 251, 253, .84);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
  border-bottom-color: var(--line);
}
.home-answers .answer-list { border-top: 1px solid var(--line-strong); }
.home-index .question-index { border-top: 1px solid var(--line-strong); }
.home-photos .home-photo-strip { margin-top: 0; }
.answer-row { padding-top: 30px; padding-bottom: 30px; }
.answer-row__text strong { font-size: clamp(1.22rem, 1.65vw, 1.55rem); }
.answer-row__text > span { font-size: 1rem; line-height: 1.86; }
.question-index a { padding: 15px 0; font-size: .92rem; }
.footer-logo { width: 190px; }

/* Home hero: give the copy air, let the cohort quote carry the page. */
.hero__copy {
  justify-self: start;
  max-width: 640px;
  padding-left: clamp(0px, 4.5vw, 72px);
}
.hero__quote,
.hero__quote--source {
  max-width: 23em;
  margin: 26px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.4vw, 2.15rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -.018em;
}
.hero__quote--source span { text-decoration-thickness: 1px; }
.hero__quote--source:hover span { text-decoration-color: #8CB1CA; }
.hero__actions { margin-top: 34px; }
@media (max-width: 1080px) {
  .hero__copy { max-width: none; padding-left: 0; }
  .hero__quote, .hero__quote--source { max-width: 26em; font-size: clamp(1.35rem, 2.8vw, 1.9rem); }
}
@media (max-width: 760px) {
  .hero__quote, .hero__quote--source { margin-top: 20px; font-size: 1.32rem; line-height: 1.7; }
  .hero__actions { margin-top: 26px; }
}

.hero__copy { padding-left: clamp(0px, 3vw, 48px); }
.hero__quote, .hero__quote--source { text-wrap: balance; }
@media (max-width: 1080px) {
  .hero__copy { padding-left: clamp(0px, 3vw, 42px); }
}
@media (max-width: 760px) {
  .hero__copy { padding-left: 0; }
}

@media (min-width: 901px) and (max-width: 1080px) {
  .hero__inner { grid-template-columns: .95fr 1.05fr; gap: 32px; }
  .hero__copy { padding-left: clamp(0px, 2vw, 24px); }
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 34px; }
  .hero__copy { padding-left: 0; }
}

/* P0: controls live under the photograph, not around the overlay. */
#nl-badge-frame { display: none !important; visibility: hidden !important; }
.lightbox__stage,
.lightbox__stage > img { max-height: min(64vh, 650px); }
.lightbox__figure .lightbox__caption { gap: 10px; padding-top: 14px; }
.lightbox__eyebrow { color: rgba(255, 255, 255, .64); font-size: .72rem; }
.lightbox__text { color: rgba(255, 255, 255, .86); font-size: .86rem; }
.lightbox__link { color: #FFFFFF; border-color: rgba(255, 255, 255, .48); }
.lightbox__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 2px;
}
.lightbox__tools {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  inset: auto;
}
.lightbox__tool { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .42); }
.lightbox__count {
  position: static;
  color: rgba(255, 255, 255, .64);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
}
@media (max-width: 760px) {
  .lightbox__stage, .lightbox__stage > img { max-height: 54vh; }
  .lightbox__figure .lightbox__caption { gap: 9px; padding-top: 11px; }
  .lightbox__tools { inset: auto; }
}

/* P0: keep the campus visible; the primary action is a real button. */
.qz-cover__veil { background: rgba(248, 251, 253, .38); }
.qz-cover__cover__enter { min-height: 48px; }
.qz-cover__enter { min-height: 48px; padding: 13px 22px; font-size: .86rem; }

/* P0: count belongs to its own question, not a separate right gutter. */
.question-index a { justify-content: flex-start; gap: 9px; }
.question-index a > span { min-width: 0; }
.question-index small { flex: none; margin-left: 0; }

/* P0: primary actions look like actions. */
.home-foot__edit {
  min-height: 44px;
  padding: 10px 18px;
  border-color: var(--green-700);
  background: var(--green-700);
  color: #FFFFFF;
  font-size: .84rem;
}
.home-foot__edit .icon { color: #FFFFFF; }
.home-foot__edit:hover { border-color: var(--green-900); background: var(--green-900); color: #FFFFFF; }
.cohort-switch a.cohort-switch__open {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  color: var(--green-700);
}
.cohort-switch a.cohort-switch__open:hover { border-color: var(--green-700); color: var(--green-900); background: #FFFFFF; }

/* P0: the comment form should read as a form at a glance. */
.reader-comment-form textarea {
  min-height: 112px;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  background: #FFFFFF;
  font-size: .95rem;
  line-height: 1.8;
}
.reader-comment-form textarea:focus {
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(23, 109, 168, .10);
}
.reader-comment-form__foot { align-items: center; gap: 12px; }
.reader-comment-form__foot input {
  width: 220px;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  background: #FFFFFF;
  font-size: .82rem;
}
.reader-comment-form__foot input:focus {
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(23, 109, 168, .10);
}
.reader-submit {
  min-height: 42px;
  margin-left: auto;
  padding: 0 17px;
  border: 1px solid var(--green-700);
  background: var(--green-700);
  color: #FFFFFF;
  font-size: .82rem;
  letter-spacing: .02em;
}
.reader-submit:hover { background: var(--green-900); border-color: var(--green-900); color: #FFFFFF; }
.reader-comment__head strong { font-size: .82rem; }
.reader-comment__head time { font-size: .7rem; }
@media (max-width: 760px) {
  .reader-comment-form__foot { flex-wrap: wrap; }
  .reader-comment-form__foot input { width: 100%; }
  .reader-submit { width: 100%; justify-content: center; margin-left: 0; }
}

.answer-row { grid-template-columns: 56px 100px minmax(0, 1fr) 24px; }
.answer-row__index { white-space: nowrap; }
@media (max-width: 760px) {
  .answer-row { grid-template-columns: 48px minmax(0, 1fr); }
}

/* P0: the splash action is a filled button, not a line of text. */
.qz-cover__enter {
  min-width: 168px;
  min-height: 50px;
  padding: 13px 24px;
  border: 1px solid #0D4F82;
  background: #0D4F82;
  color: #FFFFFF;
  font-size: .88rem;
  letter-spacing: .04em;
}
.qz-cover__enter:hover {
  border-color: #176DA8;
  background: #176DA8;
  color: #FFFFFF;
  transform: none;
}
.qz-cover__enter span { transition: none; }

/* Keep the lightbox frame stable while the original photo decodes. */
.lightbox__stage {
  min-height: min(64vh, 650px);
  background: rgba(255, 255, 255, .055);
}
.lightbox__stage > img { background: #0B2638; }
.about-hero-art { background: #EEF5FA; }
.about-hero-art img { background: #EEF5FA; }
@media (max-width: 760px) {
  .lightbox__stage { min-height: 54vh; }
}

.lightbox__stage,
.lightbox__stage > img { max-height: min(58vh, 650px); }
.lightbox__stage { min-height: min(58vh, 650px); }
@media (max-width: 760px) {
  .lightbox__stage, .lightbox__stage > img { max-height: 50vh; }
  .lightbox__stage { min-height: 50vh; }
}

.memory-row { grid-template-columns: minmax(0, 1fr) 104px 54px; }
.memory-row--note { grid-template-columns: minmax(0, 1fr) 54px; }
@media (max-width: 760px) {
  .memory-row { grid-template-columns: minmax(0, 1fr) 72px; }
}

/* School facts read as a compact data band, and the address stays on one line. */
.nowrap { white-space: nowrap; }
.school-facts {
  gap: 8px;
  margin-top: 24px;
  padding: 0;
  border: 0;
  font-size: .74rem;
}
.school-facts span {
  padding: 7px 11px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-soft);
}

.overview-legend {
  display: inline-block;
  margin-top: 5px;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.6;
}

.lightbox__stage.is-loaded { min-height: 0; }

.campus-place--empty .campus-place__media { border: 1px dashed var(--line-strong); background: var(--paper-2); }
.campus-place--empty .campus-place__media img { opacity: .45; filter: grayscale(.35); }
.campus-place--empty .campus-place__action { color: var(--muted); border-bottom-style: dashed; }

/* Sound archive: a quiet record shelf, not a streaming app. */
.radio-page { max-width: 1120px; padding-bottom: 110px; }
.radio-lead {
  max-width: 760px;
  margin: 0 0 48px;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.9;
}
.radio-list { border-top: 1px solid var(--line-strong); }
.radio-track {
  display: grid;
  grid-template-columns: 64px 42px minmax(0, 1fr) auto 40px;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 18px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease;
}
.radio-track:hover, .radio-track.is-active { background: #F2F8FC; }
.radio-track__cover { display: block; width: 64px; height: 64px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.radio-track__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.radio-track__mark { display: grid; place-items: center; height: 100%; color: var(--green-700); font-family: var(--serif); font-size: 1.5rem; }
.radio-track__num { color: var(--muted); font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; }
.radio-track__body { display: block; min-width: 0; }
.radio-track__title { display: flex; align-items: baseline; gap: 10px; }
.radio-track__title strong { font-family: var(--serif); font-size: 1.28rem; font-weight: 500; line-height: 1.4; }
.radio-track__title em { padding: 2px 7px; border: 1px solid var(--line-strong); color: var(--muted); font-family: var(--sans); font-size: .64rem; font-style: normal; white-space: nowrap; }
.radio-track__artist { display: block; margin-top: 3px; color: var(--green-700); font-family: var(--sans); font-size: .78rem; }
.radio-track__credit { display: block; margin-top: 4px; color: var(--muted); font-size: .74rem; line-height: 1.6; }
.radio-track__note { display: block; margin-top: 3px; color: var(--ink-soft); font-size: .78rem; line-height: 1.65; }
.radio-track__time { color: var(--muted); font-family: var(--mono); font-size: .72rem; }
.radio-track__play { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); color: var(--green-700); }
.radio-track__play .icon { width: 14px; height: 14px; }
.radio-track__play:hover, .radio-track.is-playing .radio-track__play { background: var(--green-700); border-color: var(--green-700); color: #FFFFFF; }
.radio-track:focus-visible { outline: 2px solid var(--green-700); outline-offset: -2px; }
.radio-submit { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.radio-submit h2 { margin: 0 0 9px; font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 500; }
.radio-submit p { max-width: 660px; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.85; }
.radio-submit .button { flex: none; }
.radio-footnote { margin: 22px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.8; }

/* Persistent mini player */
.mini-player {
  position: fixed;
  right: 24px;
  bottom: 20px;
  z-index: 650;
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(440px, calc(100vw - 32px));
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  background: rgba(248, 251, 253, .96);
  box-shadow: 0 18px 42px -24px rgba(24, 52, 74, .55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.mini-player[hidden] { display: none; }
.mini-player.is-visible { opacity: 1; transform: translateY(0); }
.mini-player__cover { flex: none; width: 52px; height: 52px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.mini-player__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mini-player__body { flex: 1; min-width: 0; }
.mini-player__line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mini-player__line a { overflow: hidden; color: var(--ink); font-family: var(--serif); font-size: .92rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mini-player__line span { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.mini-player__timeline { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--muted); font-family: var(--mono); font-size: .55rem; }
.mini-player__timeline input { flex: 1; min-width: 40px; height: 12px; margin: 0; accent-color: var(--green-700); cursor: pointer; }
.mini-player__controls { display: flex; align-items: center; gap: 2px; flex: none; }
.mini-player__button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; }
.mini-player__button:hover { color: var(--green-700); }
.mini-player__button .icon { width: 15px; height: 15px; }
.mini-player__button--play { width: 34px; height: 34px; border: 1px solid var(--green-700); background: var(--green-700); color: #FFFFFF; }
.mini-player__button--play:hover { background: var(--green-900); color: #FFFFFF; }
.mini-player__button--close { width: 24px; margin-left: 2px; color: var(--muted); }
.mini-player__button--close .icon { width: 13px; height: 13px; }
.radio-button.is-active { color: var(--green-700); background: var(--paper-2); }

@media (max-width: 760px) {
  .radio-page { padding-bottom: 90px; }
  .radio-track { grid-template-columns: 52px minmax(0, 1fr) 34px; gap: 12px; padding: 15px 4px; }
  .radio-track__cover { width: 52px; height: 52px; }
  .radio-track__num { display: none; }
  .radio-track__time { grid-column: 2; grid-row: 2; font-size: .66rem; }
  .radio-track__play { grid-column: 3; grid-row: 1; width: 32px; height: 32px; }
  .radio-track__title strong { font-size: 1.1rem; }
  .radio-track__credit { font-size: .7rem; }
  .radio-submit { display: block; margin-top: 54px; }
  .radio-submit .button { margin-top: 18px; }
  .mini-player { right: 0; bottom: 0; width: 100%; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); border-left: 0; border-right: 0; border-bottom: 0; }
  .mini-player__cover { width: 46px; height: 46px; }
  .mini-player__controls { gap: 0; }
  .mini-player__button--close { display: none; }
}

@media (max-width: 760px) {
  .mini-player__button--close { display: grid; width: 22px; }
  .mini-player__body { min-width: 0; }
}

.radio-submit { display: block; }
.radio-submit .button { margin-top: 18px; }

.radio-track--empty {
  grid-template-columns: 64px minmax(0, 1fr) auto 40px;
  color: var(--muted);
  text-decoration: none;
}
.radio-track--empty .radio-track__cover { border-style: dashed; background: transparent; }
.radio-track--empty .radio-track__mark { color: var(--muted); font-family: var(--sans); font-size: 1.2rem; }
.radio-track--empty .radio-track__title strong { color: var(--ink-soft); }
.radio-track--empty .radio-track__play { color: var(--muted); border-style: dashed; }
.radio-track--empty:hover { background: #F8FBFD; }
@media (max-width: 760px) {
  .radio-track--empty { grid-template-columns: 52px minmax(0, 1fr) 32px; }
  .radio-track--empty .radio-track__time { display: none; }
}

/* Header music entry: icon + explicit label. */
.radio-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  white-space: nowrap;
}
.radio-button:hover { border-color: var(--green-700); color: var(--green-700); }
.radio-button .icon { width: 17px; height: 17px; }
.radio-label { font-family: var(--sans); font-size: .74rem; letter-spacing: .02em; }
.radio-button.is-active { border-color: var(--green-700); background: #EEF5FA; color: var(--green-700); }
@media (max-width: 760px) {
  .radio-button { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; }
  .radio-label { display: none; }
}

/* Sound archive search */
.radio-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
}
.radio-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 380px;
  height: 38px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
}
.radio-search .icon { width: 16px; height: 16px; flex: none; }
.radio-search input { width: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .86rem; outline: none; }
.radio-search input::placeholder { color: var(--muted); }
.radio-filters { display: flex; align-items: center; gap: 4px; }
.radio-filters button { padding: 6px 9px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .74rem; cursor: pointer; }
.radio-filters button:hover { color: var(--green-700); }
.radio-filters button[aria-pressed="true"] { background: #EEF5FA; color: var(--green-700); }
.radio-result-count { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: .68rem; white-space: nowrap; }
.radio-empty { margin: 28px 0; color: var(--muted); font-size: .86rem; }
.radio-empty[hidden], .radio-track[hidden] { display: none; }
@media (max-width: 760px) {
  .radio-toolbar { flex-wrap: wrap; gap: 10px; }
  .radio-search { max-width: none; flex-basis: 100%; }
  .radio-result-count { margin-left: 0; }
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (max-width: 760px) {
  .radio-button {
    width: auto;
    height: 40px;
    padding: 0 9px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
  }
  .radio-label { display: inline; font-size: .68rem; }
}

/* Submission page */
.radio-submit-page { max-width: 1120px; padding-bottom: 110px; }
.radio-submit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(36px, 6vw, 82px); align-items: start; }
.radio-submit-main .radio-lead { margin-bottom: 32px; }
.radio-form { display: grid; gap: 18px; max-width: 720px; }
.radio-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.radio-form label { display: grid; gap: 7px; color: var(--muted); font-family: var(--sans); font-size: .74rem; }
.radio-form input,
.radio-form select,
.radio-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  line-height: 1.6;
}
.radio-form textarea { min-height: 112px; resize: vertical; }
.radio-form input::placeholder, .radio-form textarea::placeholder { color: #8BA2B2; }
.radio-form input:focus, .radio-form select:focus, .radio-form textarea:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(23, 109, 168, .10); }
.radio-check { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-soft); font-size: .78rem; line-height: 1.7; }
.radio-check input { width: 16px; min-height: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--green-700); }
.radio-form__actions { display: flex; align-items: center; gap: 20px; margin-top: 4px; }
.radio-form__actions .text-link { font-size: .78rem; }
.radio-submit-output { margin-top: 38px; padding: 22px; border: 1px solid var(--line-strong); background: var(--paper-2); }
.radio-submit-output[hidden] { display: none; }
.radio-submit-output h2 { margin: 0 0 7px; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.radio-submit-output p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.8; }
.radio-submit-output pre { overflow: auto; max-height: 340px; margin: 16px 0; padding: 14px; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink-soft); font-family: var(--sans); font-size: .8rem; line-height: 1.8; white-space: pre-wrap; }
.radio-submit-output__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-submit-aside { padding: 4px 0 0 24px; border-left: 1px solid var(--line-strong); }
.radio-submit-aside h2 { margin: 0 0 16px; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }
.radio-submit-aside ul { margin: 0 0 24px; padding: 0; list-style: none; }
.radio-submit-aside li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .78rem; line-height: 1.7; }
.radio-submit-aside li:last-child { border-bottom: 0; }
.radio-submit-aside p { margin: 0 0 12px; color: var(--muted); font-size: .78rem; line-height: 1.8; }
.radio-submit-aside a { color: var(--green-700); }
.radio-submit-aside__small { font-size: .7rem !important; }
@media (max-width: 860px) {
  .radio-submit-grid { grid-template-columns: 1fr; gap: 42px; }
  .radio-submit-aside { padding: 26px 0 0; border-left: 0; border-top: 1px solid var(--line-strong); }
}
@media (max-width: 760px) {
  .radio-submit-page { padding-bottom: 80px; }
  .radio-form__row { grid-template-columns: 1fr; gap: 18px; }
  .radio-form__actions { align-items: flex-start; flex-direction: column; gap: 14px; }
}

/* Cohort switch motion, adapted from the prototype:
   magnetic drift + digit flip + count slide, without changing the layout. */
.cohort-switch a { --mx: 0px; --my: 0px; }
.cohort-switch__digit { display: inline-block; transform-origin: 50% 65%; will-change: transform, opacity; }
.cohort-switch__year { transition: transform 180ms cubic-bezier(.22, 1, .36, 1); }
.cohort-switch a:hover .cohort-switch__year,
.cohort-switch a.is-active:hover .cohort-switch__year {
  transform: translate(var(--mx), var(--my));
}
.cohort-switch a.is-cohort-morph .cohort-switch__digit {
  animation: cohortDigitFlip 360ms cubic-bezier(.22, 1, .36, 1) both;
}
.cohort-switch a.is-cohort-morph .cohort-switch__digit:nth-child(1) { animation-delay: 0ms; }
.cohort-switch a.is-cohort-morph .cohort-switch__digit:nth-child(2) { animation-delay: 25ms; }
.cohort-switch a.is-cohort-morph .cohort-switch__digit:nth-child(3) { animation-delay: 50ms; }
.cohort-switch a.is-cohort-morph .cohort-switch__digit:nth-child(4) { animation-delay: 75ms; }
.cohort-switch a.is-cohort-morph small {
  animation: cohortCountIn 320ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes cohortDigitFlip {
  0% { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
  35% { opacity: .25; transform: translateY(10%) rotateX(-12deg); filter: blur(1.5px); }
  36% { opacity: .25; transform: translateY(-12%) rotateX(12deg); filter: blur(1.5px); }
  100% { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
}
@keyframes cohortCountIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cohort-switch__digit, .cohort-switch a.is-cohort-morph small { animation: none; }
  .cohort-switch__year { transition: none; }
}

.cohort-switch__line,
.cohort-switch__year,
.cohort-switch__digit { white-space: nowrap; }

/* Home composition: one line, one quieter year index. */
@media (min-width: 1081px) {
  .hero__copy { padding-left: clamp(48px, 7vw, 140px); }
}
.hero__title { white-space: nowrap; font-size: clamp(2.9rem, 4.8vw, 4.8rem); }
.hero__title .line { display: block; }
@media (max-width: 1080px) and (min-width: 901px) {
  .hero__title { font-size: clamp(2.6rem, 6.4vw, 4rem); }
}
@media (max-width: 900px) {
  .hero__title { font-size: clamp(2.6rem, 7.4vw, 4.2rem); }
}
@media (max-width: 420px) {
  .hero__title { font-size: clamp(2.3rem, 10vw, 2.9rem); }
}
/* years are a calm index, not a scaled poster */
.cohort-switch__year { font-size: clamp(2rem, 2.6vw, 2.8rem); }
.cohort-switch a.is-active .cohort-switch__line,
.cohort-switch a.is-active .cohort-switch__year,
.cohort-switch a:hover .cohort-switch__line,
.cohort-switch a:hover .cohort-switch__year { transform: none; }
@media (max-width: 760px) {
  .cohort-switch__items { gap: 20px; }
  .cohort-switch__year { font-size: 2rem; }
}

@media (max-width: 760px) {
  .cohort-switch a.cohort-switch__open {
    width: max-content;
    margin: 10px 0 0 auto;
    padding: 7px 12px;
    border: 1px solid var(--line-strong);
  }
}

.hero__quote, .hero__quote--source { text-wrap: wrap; }

.hero__quote, .hero__quote--source { text-wrap: pretty; }

@media (max-width: 1080px) and (min-width: 901px) {
  .hero__quote, .hero__quote--source { font-size: 1.6rem; line-height: 1.7; max-width: 24em; }
}

@media (max-width: 1080px) and (min-width: 901px) {
  .hero__quote, .hero__quote--source { font-size: 1.5rem; }
}

.reader-comment__head { flex-wrap: wrap; gap: 4px 14px; }
.reader-comment__head time { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .reader-comment__head time { flex-basis: 100%; font-size: .68rem; }
}

/* Overview data wall: one answer = one dot, laid out as three census bands. */
.overview-page .cohort-dots-grid {
  display: block;
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}
.overview-page .cohort-dots {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  align-items: start;
  gap: 26px;
  padding: 18px 0 22px;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.overview-page .cohort-dots:first-child { border-top: 0; }
.overview-page .cohort-dots__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
}
.overview-page .cohort-dots__head span:first-child { font-size: 1.35rem; }
.overview-page .cohort-dots__head span:not(:first-child) {
  color: var(--muted);
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: 0;
}
.overview-page .cohort-dots__field {
  display: grid;
  grid-template-columns: repeat(auto-fill, 6px);
  gap: 4px;
  width: 100%;
  align-content: start;
}
.overview-page .cohort-dots__field i { width: 6px; height: 6px; background: #7FAAC5; }
.overview-page .cohort-dots:nth-child(2) .cohort-dots__field i { background: #3F83AE; }
.overview-page .cohort-dots:nth-child(3) .cohort-dots__field i { background: #0D4F82; }
.overview-page .cohort-dots:hover .cohort-dots__field i { background: #176DA8; }
.overview-page .cohort-dots:hover .cohort-dots__head span:first-child { color: #176DA8; }

/* Places as a field of counted bubbles. */
.overview-place-bubbles {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(10px, 2.2vw, 30px);
  margin-top: 24px;
  padding: 44px 12px 20px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.place-bubble {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
}
.place-bubble__disc {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  width: var(--size);
  height: var(--size);
  border: 1px solid #BDD6E5;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #FFFFFF 0, #E8F3F9 62%, #D7E8F2 100%);
  color: #0D4F82;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), border-color 220ms ease;
}
.place-bubble__disc strong { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.8rem); font-weight: 500; }
.place-bubble__disc small { color: var(--muted); font-size: .58rem; }
.place-bubble__name { font-family: var(--serif); font-size: 1rem; white-space: nowrap; }
.place-bubble__split { display: flex; width: 68%; height: 4px; background: var(--line); }
.place-bubble__seg:nth-child(1) { background: #9BC5DC; }
.place-bubble__seg:nth-child(2) { background: #4D91B7; }
.place-bubble__seg:nth-child(3) { background: #0D4F82; }
.place-bubble:hover .place-bubble__disc { transform: translateY(-4px); border-color: #176DA8; }
.place-bubble:focus-visible { outline: 2px solid #176DA8; outline-offset: 4px; }
@media (max-width: 760px) {
  .overview-page .cohort-dots { grid-template-columns: 1fr; gap: 10px; }
  .overview-page .cohort-dots__head { flex-direction: row; align-items: baseline; gap: 10px; }
  .overview-page .cohort-dots__field { grid-template-columns: repeat(auto-fill, 4px); gap: 3px; }
  .overview-page .cohort-dots__field i { width: 4px; height: 4px; }
  .overview-place-bubbles { align-items: center; flex-wrap: wrap; justify-content: center; padding: 28px 0 18px; overflow: visible; }
  .place-bubble__disc { width: calc(var(--size) * .78); height: calc(var(--size) * .78); }
}

/* Overview masthead: numbers before charts. */
.overview-census {
  display: grid;
  grid-template-columns: 1.55fr repeat(3, 1fr);
  margin: 24px 0 6px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.overview-census > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-height: 120px;
  padding: 18px 0 16px 20px;
  border-left: 1px solid var(--line);
}
.overview-census > div:first-child { padding-left: 0; border-left: 0; }
.overview-census strong {
  color: var(--green-900);
  font-family: var(--serif);
  font-size: clamp(2rem, 3.3vw, 3.2rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.035em;
}
.overview-census__main strong { font-size: clamp(3rem, 5.3vw, 5.2rem); }
.overview-census span { color: var(--muted); font-family: var(--sans); font-size: .74rem; }
@media (max-width: 760px) {
  .overview-census { grid-template-columns: 1fr 1fr; }
  .overview-census > div { min-height: 96px; padding-left: 14px; }
  .overview-census > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .overview-census__main strong { font-size: 3rem; }
}

/* Larger chapter strips: the distribution should be readable before the index. */
.overview-page .chapter-strip-row { padding: 25px 0 20px; }
.overview-page .chapter-strip-head span:first-child { font-size: 1.25rem; }
.overview-page .chapter-strip { height: 26px; gap: 2px; margin-top: 14px; }
.overview-page .chapter-strip-index { margin-top: 13px; gap: 0 30px; }
.overview-page .chapter-index__item { padding: 8px 0; font-size: .78rem; }
.overview-page .chapter-index__item b { font-size: .68rem; }
.overview-page .chapter-seg { transition: filter .2s ease; }
.overview-page .chapter-seg:hover { filter: brightness(1.16); }

/* Larger length profiles. */
.overview-page .length-hist__bars { height: 160px; margin-top: 26px; }
.overview-page .length-hist__bar b { top: -19px; font-size: .62rem; }
.overview-page .length-hist__labels { font-size: .6rem; margin-top: 9px; }
.overview-page .length-hist__head span:first-child { font-size: 1.25rem; }
.overview-page .length-hists { gap: 36px; }
@media (max-width: 760px) {
  .overview-page .length-hist__bars { height: 120px; }
}

.overview-legend--places { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.legend-cohort { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); }
.legend-cohort::before { content: ""; width: 6px; height: 6px; background: #9BC5DC; }
.legend-cohort--1::before { background: #4D91B7; }
.legend-cohort--2::before { background: #0D4F82; }

.chapter-index__name { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.chapter-index__swatch { display: inline-block; width: 7px; height: 7px; flex: none; }

.overview-page .cohort-dots:hover .cohort-dots__field i { background: #7FAAC5; }
.overview-page .cohort-dots:nth-child(2):hover .cohort-dots__field i { background: #3F83AE; }
.overview-page .cohort-dots:nth-child(3):hover .cohort-dots__field i { background: #0D4F82; }

.overview-word-cloud {
  background: #F7FAFC;
  border: 1px solid #DCE8EF;
  padding: 26px 24px;
}

/* UI polish: tighten inner-page openers under the cohort strip. */
.cohort-switch + .page-hero { padding-top: 48px; }
@media (max-width: 760px) {
  .cohort-switch + .page-hero { padding-top: 22px; padding-bottom: 22px; }
  .cohort-switch + .page-hero .page-hero__aside { display: none; }
  /* Keep category chips in one swipeable row instead of four stacked rows. */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -16px;
    padding-right: 16px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .filter-bar .chip { scroll-snap-align: start; }
  /* Four school facts read as a 2×2 data block, not four loose buttons. */
  .school-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 22px;
  }
  .school-facts span {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    background: var(--paper-2);
  }
  /* Reading time and arrow belong on one line. */
  .memory-row__side { flex-direction: row; align-items: center; gap: 8px; }
}

.memory-row__side {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .filter-bar {
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
}

@media (max-width: 760px) {
  .overview-page { padding-top: 26px; }
  .overview-census { margin-top: 16px; }
  .radio-page .radio-lead { margin-bottom: 30px; }
}

/* Card view: do not stretch text-only cards to the height of a photo card. */
.archive-grid { align-items: start; }
.archive-grid .memory-card__media--text {
  aspect-ratio: auto;
  height: 132px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(145deg, #173B58 0%, #24516F 100%);
  box-shadow: inset 3px 0 0 var(--cat-color);
}
.archive-grid .memory-card__media--text .memory-card__glyph {
  color: #F5F0E5;
  opacity: .09;
}
.archive-grid .memory-card__media--text .memory-card__quote { color: #F5F0E5; opacity: .08; }
.archive-grid .memory-card__media--text .memory-card__catmark {
  color: #F5F0E5;
  border-color: rgba(245, 240, 229, .38);
}
.archive-grid .memory-card__media--text .memory-card__stamp { color: rgba(245, 240, 229, .55); }

/* Very small phones: keep the header and three-cohort strip intact. */
@media (max-width: 360px) {
  .radio-button {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
  }
  .radio-label { display: none; }
  .header-actions { gap: 4px; }
  .cohort-switch__items { gap: 12px; }
  .cohort-switch__year { font-size: 1.75rem; }
  .cohort-switch a { padding-left: 6px; padding-right: 6px; }
  .cohort-switch a small {
    font-size: .46rem;
    letter-spacing: -.02em;
    white-space: nowrap;
  }
}
/* Lightbox arrows need a solid backing over dark photos. */
@media (max-width: 760px) {
  .lightbox__nav {
    width: 42px;
    height: 42px;
    background: rgba(8, 24, 38, .58);
    border-color: rgba(255, 255, 255, .45);
  }
  .lightbox__nav--prev { left: 10px; }
  .lightbox__nav--next { right: 10px; }
}

/* Cover transition: lift the sheet instead of dissolving it. */
.qz-cover {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 0 0 rgba(8, 32, 48, 0);
  transition:
    transform 1180ms cubic-bezier(.76, 0, .24, 1),
    box-shadow 1180ms cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
.qz-cover.is-leaving {
  opacity: 1;
  transform: translateY(-101%);
  box-shadow: 0 70px 130px rgba(8, 32, 48, .24);
}
.qz-cover__photo img {
  transition:
    filter 1380ms cubic-bezier(.22, 1, .36, 1),
    transform 1380ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover.is-leaving .qz-cover__photo img {
  filter: blur(0) saturate(.92) contrast(1);
  transform: scale(1.075) translateY(5%);
}
.qz-cover.is-leaving .qz-cover__veil { opacity: .12; }
.qz-cover__main {
  transition: opacity 360ms ease, transform 460ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover.is-leaving .qz-cover__main {
  opacity: 0;
  transform: translateY(-22px);
}
/* The archive is already painted underneath; the sheet reveals it. */
body.is-intro #app { opacity: 1; transform: none; }
#app { transition: none; }

/* A quieter entrance so the cover does not simply pop in. */
.qz-cover__main { animation: coverMainIn 900ms cubic-bezier(.22, 1, .36, 1) 80ms both; }
.qz-cover__photo img { animation: coverPhotoIn 1500ms cubic-bezier(.22, 1, .36, 1) both; }
.qz-cover__veil { animation: coverVeilIn 1100ms ease both; }
@keyframes coverMainIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes coverPhotoIn {
  from { filter: blur(8px) saturate(.65); transform: scale(1.09); }
  to { filter: blur(4.5px) saturate(.8); transform: scale(1.035); }
}
@keyframes coverVeilIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .qz-cover, .qz-cover__main, .qz-cover__photo img, .qz-cover__veil, #app {
    transition: none !important;
    animation: none !important;
  }
}

.qz-cover.is-leaving .qz-cover__main,
.qz-cover.is-leaving .qz-cover__photo img,
.qz-cover.is-leaving .qz-cover__veil { animation: none; }

.qz-cover.is-leaving {
  opacity: 1;
  transform: translateY(-101%);
  transition:
    transform 1180ms cubic-bezier(.76, 0, .24, 1),
    box-shadow 1180ms cubic-bezier(.76, 0, .24, 1);
}
.qz-cover.is-leaving .qz-cover__main {
  opacity: 1;
  transform: none;
}

.qz-cover,
.qz-cover.is-leaving {
  transition:
    transform 1280ms cubic-bezier(.65, 0, .35, 1),
    box-shadow 1280ms cubic-bezier(.65, 0, .35, 1);
}
.qz-cover.is-leaving .qz-cover__mark-frame { transition-duration: 760ms; }
.qz-cover.is-leaving .qz-cover__letters { transition-duration: 820ms; }
.qz-cover.is-leaving .qz-cover__memory { transition-duration: 760ms; }
.qz-cover.is-leaving .qz-cover__enter { transition-duration: 460ms; }

.qz-cover.is-leaving {
  transform: translateY(101%);
  box-shadow: 0 -70px 130px rgba(8, 32, 48, .24);
}

/* Final hand-off: a slow dissolve with a slight rise, no hard sliding edge. */
.qz-cover {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 1080ms cubic-bezier(.4, 0, .2, 1) 140ms,
    transform 1360ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover.is-leaving {
  opacity: 0;
  transform: translateY(-2%) scale(1.02);
  box-shadow: none;
}
body.is-intro #app { opacity: 0; transform: translateY(18px); }
#app {
  transition:
    opacity 1080ms cubic-bezier(.4, 0, .2, 1) 180ms,
    transform 1200ms cubic-bezier(.22, 1, .36, 1) 180ms;
}

.qz-cover.is-leaving {
  transition:
    opacity 1080ms cubic-bezier(.4, 0, .2, 1) 140ms,
    transform 1360ms cubic-bezier(.22, 1, .36, 1);
}

/* Final hand-off: let the cover resolve to paper, then lift the paper. */
.qz-cover {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 760ms cubic-bezier(.4, 0, .2, 1) 330ms,
    transform 1300ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover.is-leaving {
  opacity: 0;
  transform: translateY(-1.5%);
  box-shadow: none;
  transition:
    opacity 760ms cubic-bezier(.4, 0, .2, 1) 330ms,
    transform 1300ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover__veil {
  background: rgba(248, 251, 253, .52);
  transition: opacity 300ms ease, background-color 300ms ease;
}
.qz-cover.is-leaving .qz-cover__veil {
  opacity: 1;
  background: #F8FBFD;
}
.qz-cover__photo img {
  transition: filter 1200ms cubic-bezier(.22, 1, .36, 1), transform 1400ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover.is-leaving .qz-cover__photo img {
  filter: blur(2px) saturate(.8);
  transform: scale(1.045);
}
.qz-cover.is-leaving .qz-cover__main { opacity: 1; transform: none; }
body.is-intro #app { opacity: 0; transform: translateY(12px); }
#app {
  transition:
    opacity 780ms cubic-bezier(.4, 0, .2, 1) 360ms,
    transform 900ms cubic-bezier(.22, 1, .36, 1) 360ms;
}

/* Final hand-off: a slow paper dissolve; no white flash, no hard edge. */
.qz-cover {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 1040ms cubic-bezier(.4, 0, .2, 1),
    transform 1400ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover.is-leaving {
  opacity: 0;
  transform: scale(1.025);
  box-shadow: none;
  transition:
    opacity 1040ms cubic-bezier(.4, 0, .2, 1),
    transform 1400ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover__veil {
  background: rgba(248, 251, 253, .52);
  opacity: .52;
  transition: none;
}
.qz-cover.is-leaving .qz-cover__veil { opacity: .52; background: rgba(248, 251, 253, .52); }
.qz-cover.is-leaving .qz-cover__photo img {
  filter: blur(2.5px) saturate(.82);
  transform: scale(1.055);
}
.qz-cover.is-leaving .qz-cover__main { opacity: 1; transform: none; }
body.is-intro #app { opacity: 0; transform: translateY(14px); }
#app {
  transition:
    opacity 920ms cubic-bezier(.4, 0, .2, 1) 520ms,
    transform 1050ms cubic-bezier(.22, 1, .36, 1) 520ms;
}

body.is-intro .site-header {
  opacity: 0;
  transform: translateY(-8px);
}
.site-header {
  transition:
    opacity 880ms cubic-bezier(.4, 0, .2, 1) 380ms,
    transform 980ms cubic-bezier(.22, 1, .36, 1) 380ms;
}

.qz-cover,
.qz-cover.is-leaving {
  transition:
    opacity 980ms cubic-bezier(.4, 0, .2, 1),
    transform 1400ms cubic-bezier(.22, 1, .36, 1);
}
#app {
  transition:
    opacity 920ms cubic-bezier(.4, 0, .2, 1) 300ms,
    transform 1050ms cubic-bezier(.22, 1, .36, 1) 300ms;
}
body.is-intro .site-header { opacity: 0; transform: translateY(-8px); }
.site-header {
  transition:
    opacity 860ms cubic-bezier(.4, 0, .2, 1) 280ms,
    transform 960ms cubic-bezier(.22, 1, .36, 1) 280ms;
}

@media (prefers-reduced-motion: reduce) {
  body.is-intro .site-header { opacity: 1; transform: none; }
  .site-header { transition: none; }
  .qz-cover, .qz-cover.is-leaving, #app { transition: none; }
}

/* Compact cohort index: three years, one active summary. */
.cohort-switch { align-items: flex-end; }
.cohort-switch__items { gap: clamp(18px, 2.2vw, 32px); }
.cohort-switch a { padding: 2px 0 10px; }
.cohort-switch a small { display: none; }
.cohort-switch__line { display: block; }
.cohort-switch__year {
  font-size: clamp(1.9rem, 2.45vw, 2.65rem);
  line-height: 1;
  letter-spacing: -.025em;
}
.cohort-switch__detail {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 250px;
  margin-left: clamp(20px, 3.4vw, 52px);
  padding-bottom: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.cohort-switch__detail strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
}
.cohort-switch__detail span {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: 0;
}
.cohort-switch__rule { margin: 0 22px 11px; }
@media (max-width: 760px) {
  .cohort-switch__items { align-items: end; }
  .cohort-switch a { padding: 9px 8px 11px; }
  .cohort-switch__year { font-size: 2rem; }
  .cohort-switch__detail {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-width: 0;
    margin: 10px 0 0;
    padding: 11px 0 0;
    border-top: 1px solid var(--line);
  }
  .cohort-switch__detail strong { font-size: .95rem; }
  .cohort-switch__detail span { font-size: .7rem; }
  .cohort-switch__rule { display: none; }
}

/* Prevent the new cohort's hero photo from replaying its entrance fade. */
.page-enter.is-switching-cohort .hero__photo { animation: none; opacity: 1; transform: none; }

/* Hold the cover for a beat before the dissolve; then let the page rise. */
.qz-cover,
.qz-cover.is-leaving {
  transition:
    opacity 1160ms cubic-bezier(.4, 0, .2, 1) 220ms,
    transform 1540ms cubic-bezier(.22, 1, .36, 1);
}
#app {
  transition:
    opacity 960ms cubic-bezier(.4, 0, .2, 1) 520ms,
    transform 1080ms cubic-bezier(.22, 1, .36, 1) 520ms;
}
body.is-intro .site-header { opacity: 0; transform: translateY(-8px); }
.site-header {
  transition:
    opacity 900ms cubic-bezier(.4, 0, .2, 1) 480ms,
    transform 1000ms cubic-bezier(.22, 1, .36, 1) 480ms;
}

.qz-cover.is-leaving {
  transform: scale(1.06) translateY(-1%);
}

/* A real cover turn: the sheet rotates from the left edge, revealing the page beneath. */
.qz-cover {
  opacity: 1;
  transform-origin: 0% 50%;
  transform: perspective(1800px) rotateY(0deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 1520ms cubic-bezier(.64, 0, .3, 1);
}
.qz-cover.is-leaving {
  opacity: 1;
  transform: perspective(1800px) rotateY(-106deg);
  box-shadow: 28px 0 70px rgba(8, 32, 48, .22);
}
.qz-cover.is-leaving .qz-cover__main {
  opacity: 0;
  transform: translateY(-12px) scale(.99);
  transition: opacity 260ms ease, transform 380ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover.is-leaving .qz-cover__photo img {
  filter: blur(1.5px) saturate(.9);
  transform: scale(1.035);
}
body.is-intro #app { opacity: 1; transform: none; }
#app { transition: none; }
body.is-intro .site-header { opacity: 1; transform: none; }
.site-header { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .qz-cover, .qz-cover.is-leaving { transition: none; transform: none; opacity: 0; }
}

/* Cover opening: two photographic panels part from the centre. */
.qz-cover {
  opacity: 1;
  transform: none;
  background: var(--paper);
  overflow: hidden;
  transition: none;
}
.qz-cover.is-leaving {
  opacity: 1;
  transform: none;
  background: transparent;
  box-shadow: none;
  transition: none;
}
.qz-cover__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
}
.qz-cover__half {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  will-change: transform;
  transition: transform 1180ms cubic-bezier(.64, 0, .3, 1);
}
.qz-cover__half--left { clip-path: inset(0 50% 0 0); }
.qz-cover__half--right { clip-path: inset(0 0 0 50%); }
.qz-cover.is-leaving .qz-cover__half--left { transform: translateX(-101%); }
.qz-cover.is-leaving .qz-cover__half--right { transform: translateX(101%); }
.qz-cover.is-leaving .qz-cover__half {
  animation: none;
  filter: blur(1.5px) saturate(.88);
}
.qz-cover__veil {
  transition: opacity 320ms ease;
}
.qz-cover.is-leaving .qz-cover__veil { opacity: 0; }
.qz-cover.is-leaving .qz-cover__main {
  animation: none;
  opacity: 0;
  transform: translateY(-12px) scale(.99);
  transition: opacity 320ms ease, transform 440ms cubic-bezier(.22, 1, .36, 1);
}
body.is-intro #app { opacity: 1; transform: none; }
#app { transition: none; }
body.is-intro .site-header { opacity: 1; transform: none; }
.site-header { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .qz-cover.is-leaving { opacity: 0; }
  .qz-cover__half { transition: none; }
}

.qz-cover.is-leaving .qz-cover__photo .qz-cover__half--left { transform: translateX(-101%) !important; }
.qz-cover.is-leaving .qz-cover__photo .qz-cover__half--right { transform: translateX(101%) !important; }

.qz-cover__half {
  animation: none !important;
  transform: translateX(0);
  transition: transform 1180ms cubic-bezier(.64, 0, .3, 1) !important;
}

.qz-cover__half--left { box-shadow: inset -34px 0 50px rgba(8, 32, 48, .18); }
.qz-cover__half--right { box-shadow: inset 34px 0 50px rgba(8, 32, 48, .18); }
.qz-cover.is-leaving .qz-cover__half { transition-delay: 90ms; }

.qz-cover.is-leaving .qz-cover__half {
  transition: transform 1180ms cubic-bezier(.64, 0, .3, 1) 90ms !important;
}

.qz-cover__half--left, .qz-cover__half--right { box-shadow: none; }
.qz-cover.is-leaving .qz-cover__half--left { box-shadow: inset -34px 0 50px rgba(8, 32, 48, .18); }
.qz-cover.is-leaving .qz-cover__half--right { box-shadow: inset 34px 0 50px rgba(8, 32, 48, .18); }

/* The hero photo must never replay an entrance fade during cohort switches. */
.hero__photo { animation: none !important; opacity: 1; transform: none; }

@media (max-width: 760px) {
  .qz-cover__half--left { clip-path: inset(0 0 50% 0); }
  .qz-cover__half--right { clip-path: inset(50% 0 0 0); }
  .qz-cover.is-leaving .qz-cover__photo .qz-cover__half--left {
    transform: translateY(-101%) !important;
  }
  .qz-cover.is-leaving .qz-cover__photo .qz-cover__half--right {
    transform: translateY(101%) !important;
  }
  .qz-cover.is-leaving .qz-cover__half--left {
    box-shadow: inset 0 -34px 50px rgba(8, 32, 48, .18);
  }
  .qz-cover.is-leaving .qz-cover__half--right {
    box-shadow: inset 0 34px 50px rgba(8, 32, 48, .18);
  }
}

/* Restore the cover to a single photographic sheet with a slow paper dissolve. */
.qz-cover {
  opacity: 1;
  transform: scale(1);
  transform-origin: center;
  background: var(--paper);
  box-shadow: none;
  transition:
    opacity 1160ms cubic-bezier(.4, 0, .2, 1) 220ms,
    transform 1540ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover.is-leaving {
  opacity: 0;
  transform: scale(1.06) translateY(-1%);
  background: var(--paper);
  box-shadow: none;
  transition:
    opacity 1160ms cubic-bezier(.4, 0, .2, 1) 220ms,
    transform 1540ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover__photo { position: absolute; inset: 0; background: transparent; }
.qz-cover__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  clip-path: none;
  animation: none !important;
  transition: filter 1380ms cubic-bezier(.22, 1, .36, 1), transform 1540ms cubic-bezier(.22, 1, .36, 1);
}
.qz-cover.is-leaving .qz-cover__photo img {
  filter: blur(2.5px) saturate(.85);
  transform: scale(1.055);
}
.qz-cover__veil {
  background: rgba(248, 251, 253, .52);
  opacity: .52;
}
.qz-cover.is-leaving .qz-cover__veil { opacity: .52; background: rgba(248, 251, 253, .52); }
.qz-cover.is-leaving .qz-cover__main {
  animation: none;
  opacity: 1;
  transform: none;
}
body.is-intro #app { opacity: 0; transform: translateY(14px); }
#app {
  transition:
    opacity 960ms cubic-bezier(.4, 0, .2, 1) 520ms,
    transform 1080ms cubic-bezier(.22, 1, .36, 1) 520ms;
}
body.is-intro .site-header { opacity: 0; transform: translateY(-8px); }
.site-header {
  transition:
    opacity 900ms cubic-bezier(.4, 0, .2, 1) 480ms,
    transform 1000ms cubic-bezier(.22, 1, .36, 1) 480ms;
}
@media (prefers-reduced-motion: reduce) {
  .qz-cover, .qz-cover.is-leaving, #app, .site-header { transition: none; }
  body.is-intro #app, body.is-intro .site-header { opacity: 1; transform: none; }
}

/* Header slogan: a quiet line between the wordmark and the index. */
.site-motto {
  max-width: 330px;
  margin-left: clamp(24px, 4vw, 64px);
  padding-left: 20px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--serif);
  font-size: .82rem;
  line-height: 1.5;
  letter-spacing: .035em;
  white-space: nowrap;
}
@media (max-width: 1180px) { .site-motto { display: none; } }

/* Year buttons: a sliding highlight instead of a flat underline only. */
.cohort-switch a {
  position: relative;
  z-index: 1;
  border-radius: 2px;
  transition: background-color 220ms ease, color 220ms ease, transform 120ms ease;
}
.cohort-switch a:hover { background: #F3F9FC; }
.cohort-switch a:active { transform: translateY(1px) scale(.985); }
.cohort-switch a.is-active { background: transparent; }
.cohort-switch__indicator {
  top: 0;
  bottom: auto;
  z-index: 0;
  height: 100%;
  background: #EDF6FB;
  border-radius: 2px;
  opacity: 0;
}
.cohort-switch__indicator::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #176DA8;
}
.cohort-switch__indicator.is-ready { opacity: 1; }
.cohort-switch__detail.is-updating { animation: cohortDetailIn 300ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes cohortDetailIn {
  from { opacity: .35; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 760px) {
  .cohort-switch a { padding: 7px 6px 9px; }
}

@media (max-width: 1300px) { .site-motto { display: none; } }

/* Question mosaic: tile area is answer count. */
.chapter-mosaic-row {
  padding: 25px 0 20px;
  border-bottom: 1px solid var(--line);
}
.chapter-mosaic-band {
  display: flex;
  gap: 2px;
  margin-top: 13px;
  overflow: hidden;
  background: var(--paper-2);
}
.chapter-mosaic-band .chapter-seg {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
  padding: 7px 8px;
  overflow: hidden;
}
.chapter-mosaic-band .chapter-seg span {
  overflow: hidden;
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: .68rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chapter-mosaic-band .chapter-seg b {
  color: rgba(255, 255, 255, .62);
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 400;
}
.chapter-mosaic-band .chapter-seg--5 span { color: #173A52; }
.chapter-mosaic-band .chapter-seg--5 b { color: rgba(23, 58, 82, .65); }
@media (max-width: 760px) {
  .chapter-mosaic-band .chapter-seg span,
  .chapter-mosaic-band .chapter-seg b { display: none; }
}

.chapter-mosaic-band { height: var(--band-h, 120px); }
@media (max-width: 760px) {
  .chapter-mosaic-band { height: calc(var(--band-h, 120px) * .72); }
}