/* =========================================================
   v23 — HISTORY / French Revolution scroll experience
   ========================================================= */

.history-page {
  --history-paper: #d7ccb6;
  --history-paper-soft: rgba(215, 204, 182, .76);
  --history-line: rgba(215, 204, 182, .24);
  --history-red: #74251f;
  --history-deep-red: #4e1714;
  background: #0e0e0d;
}

.history-main {
  position: relative;
  background:
    radial-gradient(circle at 15% 12%, rgba(116,37,31,.07), transparent 28rem),
    #0e0e0d;
  overflow: clip;
}

.history-main h1,
.history-main h2,
.history-main .history-event__hook,
.history-main .history-event__closing,
.history-main .history-story-bridge__title,
.history-main .history-outro h2,
.history-main .history-bridge__year,
.history-main .history-ideal-words,
.history-main .history-event__question {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

.history-year-indicator {
  position: fixed;
  z-index: 32;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  display: grid;
  justify-items: center;
  gap: 6px;
  pointer-events: none;
  color: rgba(224,216,198,.78);
  transition: opacity .3s ease;
}

.history-year-indicator__label {
  writing-mode: vertical-rl;
  color: rgba(224,216,198,.28);
  font-size: .46rem;
  letter-spacing: .18em;
}

.history-year-indicator strong {
  writing-mode: vertical-rl;
  font-family: "Bodoni 72", "Didot", "Bodoni MT", "Times New Roman", serif;
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: .04em;
  font-weight: 400;
}

.history-year-indicator__date {
  writing-mode: vertical-rl;
  min-height: 34px;
  color: rgba(224,216,198,.36);
  font-size: .48rem;
  letter-spacing: .04em;
}

.history-year-indicator__line {
  position: relative;
  display: block;
  width: 1px;
  height: 82px;
  overflow: hidden;
  background: rgba(224,216,198,.14);
}

.history-year-indicator__line i {
  position: absolute;
  inset: 0;
  transform: scaleY(0);
  transform-origin: top;
  background: rgba(151,50,43,.8);
}

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

.history-intro {
  position: relative;
  min-height: 160svh;
  display: grid;
  align-items: center;
  isolation: isolate;
  padding: calc(var(--header-h) + 52px) 10vw 18svh;
}

.history-intro::after {
  content: "1789";
  position: absolute;
  z-index: -1;
  right: -5vw;
  bottom: 7svh;
  font-family: "Bodoni 72", "Didot", "Times New Roman", serif;
  font-size: clamp(9rem, 46vw, 18rem);
  line-height: .7;
  letter-spacing: -.07em;
  color: rgba(224,216,198,.035);
  pointer-events: none;
}

.history-intro__flag {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(14,14,13,.7), rgba(14,14,13,.96) 76%, #0e0e0d),
    url("../assets/hero-flag.jpg") center 24% / cover no-repeat;
  filter: saturate(.48) contrast(1.03);
  opacity: .46;
}

.history-intro__inner {
  width: min(650px, 100%);
  margin-inline: auto;
}

.history-intro__eyebrow,
.history-intro__en {
  margin: 0;
  color: rgba(224,216,198,.45);
  font-size: .62rem;
  letter-spacing: .14em;
}

.history-intro__en {
  margin-top: 9vh;
  font-family: "Bodoni 72", "Didot", "Times New Roman", serif;
  letter-spacing: .24em;
}

.history-intro h1 {
  margin: .2rem 0 5.5rem;
  font-size: clamp(2rem, 10vw, 4.4rem);
  line-height: 1.35;
  letter-spacing: .06em;
  font-weight: 500;
}

.history-intro__lead,
.history-intro__names,
.history-intro__robespierre,
.history-intro__guide {
  max-width: 34em;
  color: rgba(224,216,198,.68);
  font-size: clamp(.82rem, 3.9vw, 1rem);
  line-height: 2.2;
}

.history-intro__lead p {
  margin: 0 0 .9rem;
}

.history-intro__lead p:first-child {
  color: var(--history-paper);
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: 1.12em;
}

.history-intro__names {
  margin: 4.5rem 0 0;
}

.history-intro__robespierre {
  margin: 7rem 0 0;
}

.history-intro__name {
  margin: 1.7rem 0 0;
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: clamp(1.2rem, 6vw, 1.75rem);
  letter-spacing: .05em;
}

.history-intro__guide {
  margin: 5rem 0 0;
  color: rgba(224,216,198,.46);
}

.history-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 4svh;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(224,216,198,.28);
}

.history-scroll-cue span {
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, rgba(224,216,198,.5), transparent);
}

.history-scroll-cue small {
  font-size: .48rem;
  letter-spacing: .18em;
}

/* ----- Event common ----- */

.history-event {
  position: relative;
  min-height: 165svh;
  border-top: 1px solid rgba(224,216,198,.055);
}

.history-event__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  align-items: end;
  isolation: isolate;
  background: #0c0c0b;
}

.history-event__sticky::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8,8,8,.08) 0%, rgba(8,8,8,.18) 36%, rgba(8,8,8,.8) 80%, #0c0c0b 100%),
    linear-gradient(to right, rgba(8,8,8,.18), transparent 52%, rgba(8,8,8,.12));
}

.history-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background: #111;
}

.history-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .66;
  filter: saturate(.55) sepia(.16) contrast(1.06) brightness(.75);
  transform: scale(1.045);
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1), opacity .9s ease;
}

.history-event.is-current .history-art img,
.history-event.is-seen .history-art img {
  transform: scale(1.005);
}

.history-art__shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 36%, transparent, rgba(7,7,7,.25) 55%, rgba(7,7,7,.62));
}

.history-art-credit {
  position: absolute;
  z-index: 5;
  left: 18px;
  bottom: 14px;
  max-width: calc(100% - 75px);
  color: rgba(224,216,198,.25);
  font-size: .48rem;
  line-height: 1.45;
  letter-spacing: .015em;
}

.history-event__content {
  position: relative;
  z-index: 4;
  width: min(640px, calc(100% - 58px));
  margin: 0 auto;
  padding: 28svh 0 calc(10svh + 48px);
  opacity: .48;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}

.history-event.is-seen .history-event__content,
.history-event.is-current .history-event__content {
  opacity: 1;
  transform: none;
}

.history-event__content--left {
  margin-left: 8vw;
  margin-right: auto;
}

.history-event__content--right {
  margin-left: auto;
  margin-right: 7vw;
}

.history-event__content--center {
  margin-inline: auto;
  text-align: center;
}

.history-event__date {
  margin: 0 0 .25rem;
  color: rgba(224,216,198,.46);
  font-family: "Bodoni 72", "Didot", "Times New Roman", serif;
  font-size: .72rem;
  letter-spacing: .13em;
}

.history-event h2 {
  margin: 0 0 2.4rem;
  font-size: clamp(1.55rem, 7.7vw, 3rem);
  line-height: 1.35;
  letter-spacing: .045em;
  font-weight: 500;
}

.history-event__hook {
  margin: 0 0 2.6rem;
  color: var(--history-paper);
  font-size: clamp(1.15rem, 5.8vw, 2rem);
  line-height: 1.8;
  letter-spacing: .04em;
}

.history-event__text {
  max-width: 34em;
  color: rgba(224,216,198,.72);
  font-size: clamp(.78rem, 3.6vw, .96rem);
  line-height: 2.05;
}

.history-event__text p {
  margin: 0 0 1.1rem;
}

.history-event__text strong {
  color: rgba(224,216,198,.94);
  font-weight: 500;
}

.history-event__closing {
  margin: 4rem 0 0;
  color: rgba(224,216,198,.9);
  font-size: clamp(1.02rem, 5vw, 1.6rem);
  line-height: 2;
  letter-spacing: .04em;
}

.history-event__closing strong {
  font-weight: 500;
  color: var(--history-paper);
}

.history-event__closing--large {
  margin-top: 5rem;
  font-size: clamp(1.25rem, 6.1vw, 2.1rem);
}

.history-event__question {
  margin: 4rem 0;
  padding-left: 1.2rem;
  border-left: 1px solid rgba(148,47,40,.65);
  color: var(--history-paper);
  font-size: clamp(1.04rem, 5vw, 1.5rem);
  line-height: 1.8;
}

.history-person-note {
  max-width: 31em;
  margin: 4rem 0 0;
  padding: 1.2rem 0 0 1rem;
  border-top: 1px solid rgba(224,216,198,.14);
  color: rgba(224,216,198,.58);
}

.history-person-note > span {
  display: block;
  margin-bottom: .65rem;
  color: rgba(224,216,198,.37);
  font-family: "Bodoni 72", "Didot", "Times New Roman", serif;
  font-size: .59rem;
  letter-spacing: .16em;
}

.history-person-note p {
  margin: 0;
  font-size: .76rem;
  line-height: 1.95;
}

.history-person-note--strong {
  border-top-color: rgba(148,47,40,.42);
}

.history-person-note--strong > span {
  color: rgba(193,91,82,.72);
}

.history-candidate-note {
  position: absolute;
  z-index: 5;
  right: 58px;
  bottom: 14px;
  margin: 0;
  max-width: 52vw;
  text-align: right;
  color: rgba(224,216,198,.18);
  font-size: .44rem;
  line-height: 1.45;
}

/* ----- Historical image variations ----- */

.history-event--image .history-art--wide img {
  object-position: 50% 42%;
}

.history-event--march .history-art--march img {
  object-position: 52% 38%;
}

.history-event--document .history-event__sticky::after,
.history-event--republic .history-event__sticky::after,
.history-event--marie .history-event__sticky::after {
  background:
    linear-gradient(to bottom, rgba(8,8,8,.26), rgba(8,8,8,.45) 48%, rgba(8,8,8,.92) 91%),
    linear-gradient(to right, rgba(8,8,8,.94) 0%, rgba(8,8,8,.58) 44%, rgba(8,8,8,.18) 100%);
}

.history-art--document {
  left: 28vw;
  background: #161511;
}

.history-art--document img {
  object-fit: contain;
  object-position: 80% center;
  opacity: .48;
  filter: saturate(.62) sepia(.1) contrast(1.02) brightness(.68);
}

.history-ideal-words {
  display: grid;
  gap: .15rem;
  margin: 3.4rem 0;
  color: var(--history-paper);
  font-size: clamp(2rem, 12vw, 4.8rem);
  line-height: 1.1;
  letter-spacing: .06em;
}

.history-art--republic {
  left: 30vw;
}

.history-art--republic img {
  object-fit: contain;
  object-position: 78% center;
  opacity: .42;
  filter: sepia(.35) saturate(.56) contrast(1.05) brightness(.78);
}

.history-art--marie {
  left: 43vw;
  background: #d8d0c3;
}

.history-art--marie img {
  object-fit: contain;
  object-position: 64% center;
  opacity: .74;
  filter: grayscale(.35) sepia(.28) contrast(.95) brightness(.75);
}

/* ----- Graphic interludes ----- */

.history-event--graphic .history-event__sticky,
.history-event--night .history-event__sticky,
.history-event--trial .history-event__sticky,
.history-event--execution .history-event__sticky {
  background:
    radial-gradient(circle at 55% 44%, rgba(120,39,33,.11), transparent 32rem),
    #0b0b0a;
}

.history-graphic,
.history-night-road,
.history-trial-graphic,
.history-guillotine-scene {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
}

.history-graphic--bastille {
  background:
    linear-gradient(to top, rgba(88,31,27,.16), transparent 50%),
    radial-gradient(circle at 22% 70%, rgba(207,173,123,.07), transparent 20rem);
}

.history-bastille-type {
  position: absolute;
  left: -2vw;
  top: 16vh;
  font-family: "Bodoni 72", "Didot", "Times New Roman", serif;
  font-size: clamp(8rem, 42vw, 19rem);
  line-height: .62;
  letter-spacing: -.04em;
  color: rgba(224,216,198,.045);
}

.history-bastille-wall {
  position: absolute;
  left: 7vw;
  bottom: 15vh;
  width: min(55vw, 380px);
  height: 38vh;
  opacity: .55;
  border-bottom: 2px solid rgba(224,216,198,.12);
  background:
    linear-gradient(90deg, transparent 4%, rgba(224,216,198,.075) 4% 20%, transparent 20% 25%, rgba(224,216,198,.075) 25% 48%, transparent 48% 54%, rgba(224,216,198,.075) 54% 78%, transparent 78%),
    linear-gradient(to bottom, transparent 15%, rgba(224,216,198,.055) 15% 17%, transparent 17% 42%, rgba(224,216,198,.055) 42% 44%, transparent 44%);
  clip-path: polygon(0 13%, 8% 13%, 8% 0, 24% 0, 24% 13%, 38% 13%, 38% 2%, 54% 2%, 54% 13%, 68% 13%, 68% 0, 84% 0, 84% 13%, 100% 13%, 100% 100%, 0 100%);
}

.history-smoke {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(195,185,165,.11), transparent 68%);
  filter: blur(8px);
  animation: history-smoke 11s ease-in-out infinite alternate;
}

.history-smoke--1 { width: 34vw; height: 26vw; left: 0; bottom: 25vh; }
.history-smoke--2 { width: 42vw; height: 31vw; left: 18vw; bottom: 14vh; animation-delay: -4s; }
.history-smoke--3 { width: 30vw; height: 24vw; left: 39vw; bottom: 31vh; animation-delay: -7s; }

@keyframes history-smoke {
  from { transform: translate3d(-8px, 6px, 0) scale(.96); opacity: .55; }
  to { transform: translate3d(15px, -16px, 0) scale(1.08); opacity: .82; }
}

.history-night-road {
  background:
    radial-gradient(circle at 27% 18%, rgba(205,211,202,.08), transparent 15rem),
    linear-gradient(to bottom, #0c1115 0%, #080b0d 60%, #0b0b0a 61%);
}

.history-night-moon {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  left: 18vw;
  top: 19vh;
  background: rgba(218,216,204,.14);
  box-shadow: 0 0 45px rgba(218,216,204,.055);
}

.history-night-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 31vh;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(224,216,198,.14) 18%, rgba(224,216,198,.05) 70%, transparent);
}

.history-carriage {
  position: absolute;
  left: 8vw;
  bottom: 26vh;
  width: 82px;
  height: 44px;
  border: 1px solid rgba(224,216,198,.13);
  transform: skewX(-4deg);
  animation: history-carriage 18s linear infinite;
}

.history-carriage::before,
.history-carriage::after {
  content: "";
  position: absolute;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(224,216,198,.14);
  border-radius: 50%;
  bottom: -12px;
}

.history-carriage::before { left: 8px; }
.history-carriage::after { right: 8px; }

.history-carriage i {
  position: absolute;
  width: 54px;
  height: 1px;
  left: 100%;
  top: 26px;
  background: rgba(224,216,198,.12);
}

.history-carriage b {
  position: absolute;
  width: 20px;
  height: 16px;
  left: calc(100% + 45px);
  top: 17px;
  border-radius: 50% 70% 45% 45%;
  border-top: 1px solid rgba(224,216,198,.12);
}

@keyframes history-carriage {
  from { transform: translateX(-12vw) skewX(-4deg); opacity: 0; }
  10%, 82% { opacity: .8; }
  to { transform: translateX(88vw) skewX(-4deg); opacity: 0; }
}

.history-graphic--tuileries {
  background:
    radial-gradient(circle at 32% 73%, rgba(126,37,31,.19), transparent 28rem),
    #0a0a09;
}

.history-palace {
  position: absolute;
  left: 3vw;
  bottom: 18vh;
  width: 65vw;
  height: 34vh;
  border-top: 1px solid rgba(224,216,198,.12);
  border-bottom: 1px solid rgba(224,216,198,.1);
  background:
    repeating-linear-gradient(90deg, rgba(224,216,198,.06) 0 1px, transparent 1px 9vw),
    repeating-linear-gradient(0deg, transparent 0 8vh, rgba(224,216,198,.045) 8vh calc(8vh + 1px));
  clip-path: polygon(0 16%, 18% 16%, 18% 6%, 28% 6%, 28% 16%, 70% 16%, 70% 0, 85% 0, 85% 16%, 100% 16%, 100% 100%, 0 100%);
}

.history-red-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22vh;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(131,38,31,.8), rgba(131,38,31,.24), transparent);
  box-shadow: 0 0 16px rgba(131,38,31,.32);
}

.history-crowd {
  position: absolute;
  bottom: 16vh;
  height: 7vh;
  background: repeating-radial-gradient(circle at 8px 7px, rgba(224,216,198,.11) 0 2px, transparent 3px 11px);
  filter: blur(.2px);
}

.history-crowd--1 { left: 0; width: 45vw; }
.history-crowd--2 { left: 38vw; width: 38vw; opacity: .65; }

/* ----- Bridges ----- */

.history-bridge {
  position: relative;
  min-height: 125svh;
  display: grid;
  align-items: center;
  padding: 18svh 10vw;
  overflow: hidden;
  border-top: 1px solid rgba(224,216,198,.055);
  border-bottom: 1px solid rgba(224,216,198,.055);
}

.history-bridge::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(116,37,31,.1), transparent 42%);
}

.history-bridge__inner {
  position: relative;
  width: min(650px, 100%);
  margin-inline: auto;
}

.history-bridge__year {
  position: absolute;
  z-index: -1;
  right: -10vw;
  top: -12vh;
  margin: 0;
  color: rgba(224,216,198,.035);
  font-family: "Bodoni 72", "Didot", serif;
  font-size: clamp(8rem, 42vw, 17rem);
  line-height: .8;
}

.history-bridge__eyebrow {
  margin: 0 0 1rem;
  color: rgba(224,216,198,.34);
  font-size: .56rem;
  letter-spacing: .17em;
}

.history-bridge h2 {
  margin: 0 0 4rem;
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: clamp(1.65rem, 8vw, 3.2rem);
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: .04em;
}

.history-bridge__text,
.history-bridge__note {
  max-width: 36em;
  color: rgba(224,216,198,.7);
  font-size: clamp(.8rem, 3.8vw, .98rem);
  line-height: 2.1;
}

.history-bridge__text p {
  margin: 0 0 1.2rem;
}

.history-bridge__text strong {
  color: var(--history-paper);
  font-weight: 500;
}

.history-bridge__closing {
  margin: 4rem 0 0;
  color: rgba(224,216,198,.86);
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: clamp(1rem, 5vw, 1.4rem);
  line-height: 2;
}

.history-bridge--deep {
  min-height: 150svh;
  background:
    radial-gradient(circle at 80% 30%, rgba(116,37,31,.16), transparent 24rem),
    #0a0909;
}

.history-bridge__note {
  margin: 5rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(224,216,198,.12);
  color: rgba(224,216,198,.5);
  font-size: .76rem;
}

/* ----- 1792 story connection ----- */

.history-story-bridge {
  position: relative;
  min-height: 160svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.history-story-bridge__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(to bottom, #0c0c0b 0%, rgba(11,11,10,.76) 22%, rgba(11,11,10,.76) 68%, #0a0a09 100%),
    url("../assets/thermidor-visual.png") 52% center / cover no-repeat;
  filter: saturate(.58) contrast(1.08) brightness(.65);
  opacity: .56;
}

.history-story-bridge::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0 28%, rgba(0,0,0,.58) 77%);
}

.history-story-bridge__inner {
  width: min(660px, calc(100% - 56px));
  margin-inline: auto;
  padding: 24svh 0;
  text-align: center;
}

.history-story-bridge__year {
  margin: 0;
  font-family: "Bodoni 72", "Didot", serif;
  font-size: clamp(6rem, 34vw, 14rem);
  line-height: .8;
  letter-spacing: -.04em;
  color: rgba(224,216,198,.84);
}

.history-story-bridge__place {
  margin: 1.5rem 0 0;
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: 1.1rem;
}

.history-story-bridge__copy {
  margin: 7rem 0 0;
  color: rgba(224,216,198,.77);
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: clamp(1.05rem, 5vw, 1.55rem);
  line-height: 2;
}

.history-story-bridge__copy--small {
  margin-top: 7rem;
  font-size: clamp(.86rem, 4vw, 1.1rem);
}

.history-story-bridge__title {
  margin: 8rem 0 0;
  color: var(--history-paper);
  font-size: clamp(1.5rem, 7.6vw, 2.8rem);
  line-height: 1.8;
  letter-spacing: .05em;
}

.history-story-bridge__link {
  display: inline-block;
  margin-top: 4rem;
  padding: .85rem 1.35rem;
  border: 1px solid rgba(224,216,198,.28);
  color: rgba(224,216,198,.72);
  font-size: .72rem;
  letter-spacing: .06em;
}

/* ----- Trial / execution ----- */

.history-trial-graphic span {
  position: absolute;
  left: -3vw;
  top: 21vh;
  color: rgba(224,216,198,.035);
  font-family: "Bodoni 72", "Didot", serif;
  font-size: clamp(5.5rem, 25vw, 12rem);
  line-height: .8;
  letter-spacing: -.03em;
}

.history-trial-graphic i {
  position: absolute;
  left: 14vw;
  top: 49vh;
  width: 52vw;
  height: 1px;
  background: linear-gradient(to right, rgba(224,216,198,.12), transparent);
}

.history-guillotine-scene {
  opacity: .68;
}

.history-guillotine-frame,
.history-guillotine-top,
.history-guillotine-blade {
  position: absolute;
  display: block;
}

.history-guillotine-frame {
  top: 13vh;
  bottom: 12vh;
  width: 5px;
  background: linear-gradient(to bottom, rgba(224,216,198,.24), rgba(224,216,198,.055));
}

.history-guillotine-frame--left { left: 19vw; }
.history-guillotine-frame--right { left: 48vw; }

.history-guillotine-top {
  left: 17vw;
  top: 14vh;
  width: 34vw;
  height: 7px;
  background: rgba(224,216,198,.18);
}

.history-guillotine-blade {
  left: 21vw;
  top: 31vh;
  width: 25vw;
  height: 15vh;
  border-top: 1px solid rgba(187,180,164,.2);
  background: linear-gradient(145deg, rgba(183,178,165,.12) 0 52%, transparent 53%);
  transform: translateY(-4vh);
  transition: transform 1.4s ease;
}

.history-event--execution.is-current .history-guillotine-blade {
  transform: translateY(1vh);
}

.history-event--execution .history-event__sticky::after {
  background: radial-gradient(circle at 50% 40%, transparent, rgba(8,8,8,.5) 48%, #080807 88%);
}

.history-event__text--narrow {
  margin-inline: auto;
  max-width: 27em;
}

/* ----- Marie Antoinette / Outro ----- */

.history-event--marie {
  min-height: 190svh;
}

.history-event--marie .history-event__sticky::after {
  background:
    linear-gradient(to right, #0b0b0a 0%, rgba(11,11,10,.93) 34%, rgba(11,11,10,.45) 62%, rgba(11,11,10,.52) 100%),
    linear-gradient(to bottom, transparent 0 56%, #0b0b0a 92%);
}

.history-outro {
  position: relative;
  min-height: 145svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(to bottom, #0b0b0a, #090908 55%, #0c0b0a);
}

.history-outro__guillotine {
  position: absolute;
  right: -8vw;
  top: 12vh;
  width: 45vw;
  height: 82vh;
  opacity: .08;
  background: url("../assets/guillotine.svg") center / contain no-repeat;
  filter: brightness(2) grayscale(1);
}

.history-outro__inner {
  width: min(560px, calc(100% - 60px));
  text-align: center;
}

.history-outro__inner > p:first-child {
  margin: 0 0 5rem;
  color: rgba(224,216,198,.36);
  font-size: .88rem;
}

.history-outro h2 {
  margin: 0;
  color: var(--history-paper);
  font-size: clamp(2rem, 10vw, 4rem);
  line-height: 1.65;
  letter-spacing: .06em;
  font-weight: 500;
}

.history-outro__note {
  margin: 7rem 0 0;
  color: rgba(224,216,198,.42);
  font-size: .78rem;
}

.history-outro__links {
  margin-top: 5rem;
  display: grid;
  gap: .7rem;
}

.history-outro__links a {
  padding: .9rem 1rem;
  border: 1px solid rgba(224,216,198,.17);
  color: rgba(224,216,198,.66);
  font-size: .72rem;
}

/* ----- Desktop ----- */

@media (min-width: 760px) {
  .history-year-indicator {
    right: 26px;
    width: 58px;
  }

  .history-intro {
    padding-inline: 12vw;
  }

  .history-event {
    min-height: 150svh;
  }

  .history-event__content {
    width: min(690px, 56vw);
    padding-bottom: 13svh;
  }

  .history-event__content--left {
    margin-left: 9vw;
  }

  .history-event__content--right {
    margin-right: 10vw;
  }

  .history-event h2 {
    font-size: clamp(2.3rem, 4vw, 3.8rem);
  }

  .history-event__hook {
    font-size: clamp(1.5rem, 2.7vw, 2.3rem);
  }

  .history-event__text {
    font-size: .93rem;
  }

  .history-art--document {
    left: 44vw;
  }

  .history-art--republic {
    left: 50vw;
  }

  .history-art--marie {
    left: 55vw;
  }

  .history-bastille-wall {
    left: 8vw;
    width: 37vw;
  }

  .history-palace {
    width: 54vw;
  }

  .history-story-bridge__inner {
    width: min(760px, 70vw);
  }

  .history-outro__links {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-art img,
  .history-event__content,
  .history-guillotine-blade {
    transition: none !important;
  }

  .history-smoke,
  .history-carriage {
    animation: none !important;
  }
}


/* =========================================================
   v24 — HISTORY revisions
   ========================================================= */
.history-page .history-singleline {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: visible;
  letter-spacing: .015em;
}

.history-page .history-event__closing > span {
  display: block;
  margin-top: .35rem;
}

.history-page .history-ideal-words {
  display: block;
  margin: 3.2rem 0;
  font-size: clamp(1.8rem, 9.5vw, 4rem);
  line-height: 1.1;
  letter-spacing: .045em;
}

.history-art--bastille img {
  object-position: 48% 48%;
}

.history-art--varennes img {
  object-position: 46% 48%;
  filter: saturate(.54) sepia(.12) contrast(1.06) brightness(.58);
}

.history-art--tuileries img {
  object-position: 47% 47%;
  filter: saturate(.62) sepia(.08) contrast(1.07) brightness(.58);
}

.history-art--trial img {
  object-position: 50% 48%;
  filter: grayscale(.3) sepia(.17) contrast(1.08) brightness(.62);
}

.history-art--execution img {
  object-position: 50% 45%;
  filter: saturate(.56) sepia(.08) contrast(1.08) brightness(.55);
}

.history-event--bastille .history-event__sticky::after,
.history-event--varennes .history-event__sticky::after,
.history-event--tuileries .history-event__sticky::after,
.history-event--trial .history-event__sticky::after,
.history-event--execution .history-event__sticky::after {
  background:
    linear-gradient(to bottom, rgba(8,8,8,.23), rgba(8,8,8,.42) 45%, rgba(8,8,8,.9) 94%),
    linear-gradient(to right, rgba(7,7,7,.78), rgba(7,7,7,.22) 58%, rgba(7,7,7,.48));
}

.history-event--bastille .history-event__content--right,
.history-event--tuileries .history-event__content--right,
.history-event--trial .history-event__content--right {
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
}

.history-bridge--image {
  isolation: isolate;
  background: #090908;
}

.history-bridge--image::before {
  z-index: -1;
  background: linear-gradient(110deg, rgba(116,37,31,.12), transparent 42%);
}

.history-bridge__art {
  position: absolute;
  z-index: -3;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.history-bridge__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
  opacity: .52;
  filter: grayscale(.15) sepia(.12) saturate(.58) contrast(1.08) brightness(.62);
  transform: scale(1.035);
}

.history-bridge__art > span {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(8,8,8,.38), rgba(8,8,8,.58) 60%, rgba(8,8,8,.93)),
    linear-gradient(to right, rgba(8,8,8,.9), rgba(8,8,8,.42) 62%, rgba(8,8,8,.74));
}

.history-bridge__art--portrait img {
  object-position: 72% 34%;
  opacity: .44;
  filter: grayscale(.18) sepia(.08) saturate(.63) contrast(1.04) brightness(.62);
}

.history-bridge__credit {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 10px;
  margin: 0;
  max-width: 70vw;
  color: rgba(224,216,198,.22);
  font-size: .42rem;
  line-height: 1.35;
  text-align: right;
}

.history-story-bridge__year {
  font-size: clamp(4.2rem, 22vw, 8.2rem);
  line-height: .84;
}

.history-story-bridge__copy {
  margin-top: 5.5rem;
}

.history-story-bridge__copy--small {
  margin-top: 6rem;
  font-size: clamp(.84rem, 3.9vw, 1.06rem);
}

.history-story-bridge__copy--small strong {
  color: rgba(224,216,198,.95);
  font-weight: 500;
}

.history-story-bridge__augustin {
  margin: 1.25rem 0 0;
  color: var(--history-paper);
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(2rem, 10vw, 4.4rem);
  line-height: 1.2;
  letter-spacing: .06em;
  text-shadow: 0 3px 26px rgba(0,0,0,.62);
}

.history-story-bridge__augustin span {
  display: inline-block;
  margin-right: .55em;
  color: rgba(224,216,198,.5);
  font-size: .34em;
  letter-spacing: .08em;
  vertical-align: middle;
}

.history-story-bridge__copy--after {
  margin-top: 1.35rem;
  font-size: clamp(.9rem, 4.2vw, 1.15rem);
}

.history-outro h2 {
  font-size: clamp(1.2rem, 5.7vw, 2rem);
  line-height: 1.45;
}

.history-outro__links--single {
  display: flex;
  justify-content: center;
}

.history-outro__links--single a {
  min-width: 13rem;
  text-align: center;
}

@media (max-width: 759px) {
  .history-event__content {
    width: min(640px, calc(100% - 44px));
  }

  .history-event__content--left,
  .history-event__content--right {
    margin-left: 22px;
    margin-right: 22px;
  }

  .history-event__hook {
    font-size: clamp(1rem, 5.2vw, 1.55rem);
  }

  .history-event__closing {
    font-size: clamp(.92rem, 4.5vw, 1.35rem);
  }

  .history-event__question {
    font-size: clamp(.92rem, 4.4vw, 1.25rem);
  }

  .history-story-bridge__inner {
    width: min(660px, calc(100% - 44px));
  }

  .history-bridge {
    padding-left: 24px;
    padding-right: 24px;
  }

  .history-bridge__art img {
    object-position: 50% center;
  }

  .history-bridge__art--portrait img {
    object-position: 70% 30%;
  }
}


/* =========================================================
   v25 — HISTORY mobile typography / 1792 bridge / outro
   ========================================================= */

/* The 1792 date remains a visual marker, but no longer dominates the screen. */
.history-story-bridge__year {
  font-size: clamp(3.8rem, 18vw, 6.6rem);
}

/* Augustin is emphasized as part of the sentence rather than as a giant title. */
.history-story-bridge__augustin {
  margin: 1.15rem 0 0;
  color: var(--history-paper);
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.35rem, 6.2vw, 2.05rem);
  line-height: 1.55;
  letter-spacing: .045em;
  text-shadow: 0 3px 24px rgba(0,0,0,.58);
}

.history-story-bridge__augustin span {
  margin-right: .22em;
  font-size: .62em;
  vertical-align: .08em;
}

/* A little more narrative before the final line. */
.history-outro {
  min-height: 170svh;
}

.history-outro__inner {
  width: min(620px, calc(100% - 48px));
}

.history-outro__epilogue {
  margin: 0 auto 6.5rem;
  color: rgba(224,216,198,.68);
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(.82rem, 3.7vw, 1rem);
  line-height: 2.15;
  letter-spacing: .025em;
}

.history-outro__epilogue p {
  margin: 0 0 2.1rem;
}

.history-outro__epilogue .history-outro__brothers {
  margin-top: 3.2rem;
  color: rgba(224,216,198,.88);
}

.history-outro__lead {
  margin: 0 0 1.4rem;
  color: rgba(224,216,198,.46);
  font-size: .82rem;
}

.history-outro h2 {
  margin-top: 0;
}

@media (max-width: 759px) {
  #rights .history-ideal-words {
    margin: 1.55rem 0;
    font-size: clamp(1.35rem, 6.8vw, 1.8rem);
  }

  #rights .history-event__closing > span {
    margin-top: .2rem;
  }

  .history-story-bridge__copy {
    margin-top: 4.4rem;
  }

  .history-story-bridge__copy--small {
    margin-top: 4.8rem;
  }

  .history-story-bridge__augustin {
    font-size: clamp(1.3rem, 6vw, 1.7rem);
  }

  .history-story-bridge__copy--after {
    margin-top: .65rem;
  }

  .history-outro__epilogue {
    margin-bottom: 5rem;
    font-size: clamp(.76rem, 3.45vw, .9rem);
    line-height: 2.05;
  }

  .history-outro__epilogue p {
    margin-bottom: 1.65rem;
  }

  .history-outro__epilogue .history-outro__brothers {
    margin-top: 2.6rem;
  }
}


/* =========================================================
   v26 — HISTORY typography consistency / wrapping fixes
   ========================================================= */

/* Body copy must always remain inside the viewport. */
.history-page .history-event__text,
.history-page .history-event__text p,
.history-page .history-bridge__text,
.history-page .history-bridge__text p,
.history-page .history-bridge__closing,
.history-page .history-outro__epilogue,
.history-page .history-outro__epilogue p {
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Only short dramatic phrases use the one-line fitting treatment.
   Normal prose is always allowed to wrap. */
.history-page .history-event__text .history-singleline,
.history-page .history-bridge__text .history-singleline {
  white-space: normal;
}

/* Remove the now-unused lead spacing at the ending. */
.history-outro__lead {
  display: none;
}

@media (max-width: 759px) {
  /*
   * v25 had a compact type scale only on the first three events.
   * Apply exactly the same scale to ALL history-event scenes so
   * Versailles and everything after it no longer jumps larger.
   */
  .history-page .history-event__content {
    width: calc(100% - 44px);
    max-width: 640px;
    padding-top: 9svh;
    padding-bottom: calc(6svh + 42px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .history-page .history-event__content--left,
  .history-page .history-event__content--right,
  .history-page .history-event__content--center {
    margin-left: auto;
    margin-right: auto;
  }

  .history-page .history-ideal-words {
    margin: 1.55rem 0;
    font-size: clamp(1.35rem, 6.8vw, 1.8rem);
  }

  /*
   * Bridge sections use the same body scale as history-event sections.
   * They keep their different layouts, but the reading size is consistent.
   */
  /* Do not force normal prose to stay on one line on narrow screens. */
  .history-page .history-event__closing:not(.history-singleline) span,
  .history-page .history-event__closing:not(.history-singleline) strong,
  .history-page .history-bridge__closing {
    white-space: normal;
  }

  /* Long copy should wrap cleanly before it ever reaches the edge. */
  .history-page .history-event__text p,
  .history-page .history-event__closing:not(.history-singleline),
  .history-page .history-event__question,
  .history-page .history-bridge__text p,
  .history-page .history-bridge__closing {
    padding-right: .08em;
  }

  /* Ending: final phrase follows the epilogue directly. */
  .history-page .history-outro__epilogue {
    margin-bottom: 3.4rem;
  }
}


/* =========================================================
   v27 — restore the v25 reading scale while keeping wrapping
   ========================================================= */

/*
 * v26 made every mobile scene use the unusually compact scale that had
 * originally been applied only to the first few events. Restore the
 * earlier, more comfortable v25 scale across the full HISTORY page.
 * Keep the tighter layout/wrapping safeguards introduced in v26.
 */
@media (max-width: 759px) {
  .history-page .history-event__date {
    font-size: .72rem;
  }

  .history-page .history-event__content h2 {
    font-size: clamp(1.55rem, 7.7vw, 2.25rem);
    line-height: 1.35;
  }

  .history-page .history-event__hook {
    font-size: clamp(1rem, 5.2vw, 1.55rem);
    line-height: 1.7;
  }

  .history-page .history-event__text {
    font-size: clamp(.78rem, 3.6vw, .96rem);
    line-height: 2.0;
  }

  .history-page .history-event__text p {
    margin-bottom: .9rem;
  }

  .history-page .history-event__closing {
    font-size: clamp(.92rem, 4.5vw, 1.35rem);
    line-height: 1.85;
  }

  .history-page .history-event__closing--large {
    font-size: clamp(1rem, 4.8vw, 1.45rem);
  }

  .history-page .history-event__question {
    font-size: clamp(.92rem, 4.4vw, 1.25rem);
    line-height: 1.75;
  }

  .history-page .history-bridge h2 {
    font-size: clamp(1.55rem, 7.6vw, 2.2rem);
    line-height: 1.5;
  }

  .history-page .history-bridge__text,
  .history-page .history-bridge__note {
    font-size: clamp(.8rem, 3.8vw, .98rem);
    line-height: 2.0;
  }

  .history-page .history-bridge__text p {
    margin-bottom: .9rem;
  }

  .history-page .history-bridge__closing {
    font-size: clamp(1rem, 5vw, 1.4rem);
    line-height: 1.85;
  }

  .history-page .history-outro__epilogue {
    font-size: clamp(.82rem, 3.7vw, 1rem);
    line-height: 2.1;
  }

  /*
   * The WAR bridge was the remaining overflow case.
   * Never fit its prose as a single line: give each paragraph the full
   * available width and allow Japanese text to wrap at any necessary point.
   */
  #war .history-bridge__inner,
  #war .history-bridge__text,
  #war .history-bridge__text p,
  #war .history-bridge__closing {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: normal !important;
  }

  #war .history-bridge__text p,
  #war .history-bridge__closing {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /*
   * Keep the title dramatic, but if a particularly narrow phone cannot fit
   * it, wrapping is preferable to horizontal overflow.
   */
  #war h2.history-singleline {
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
}

/* The 1793 bridge is no longer a Robespierre portrait feature. */
#committee .history-bridge__art--portrait img {
  object-position: 50% 35%;
  filter: grayscale(.28) contrast(1.04) brightness(.62);
}


/* =========================================================
   v30 — definitive HISTORY mobile typography
   ========================================================= */

@media (max-width: 759px) {
  /*
   * Single source of truth for all normal history events.
   * No event-specific title/body font sizes should be added above this.
   */
  .history-page .history-event__date {
    font-size: .72rem;
  }

  .history-page .history-event__content h2 {
    margin-bottom: 1.15rem;
    font-size: clamp(1.55rem, 7.7vw, 2.25rem);
    line-height: 1.35;
  }

  .history-page .history-event__hook {
    margin-bottom: 1.25rem;
    font-size: clamp(1rem, 5.2vw, 1.55rem);
    line-height: 1.7;
  }

  .history-page .history-event__text {
    width: 100%;
    max-width: none;
    font-size: clamp(.78rem, 3.6vw, .96rem);
    line-height: 2;
  }

  .history-page .history-event__text p {
    width: 100%;
    max-width: 100%;
    margin-bottom: .9rem;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .history-page .history-event__closing {
    max-width: 100%;
    margin-top: 1.65rem;
    font-size: clamp(.92rem, 4.5vw, 1.35rem);
    line-height: 1.85;
  }

  .history-page .history-event__closing--large {
    font-size: clamp(1rem, 4.8vw, 1.45rem);
  }

  .history-page .history-event__question {
    max-width: 100%;
    margin-top: 1.65rem;
    margin-bottom: 1.65rem;
    font-size: clamp(.92rem, 4.4vw, 1.25rem);
    line-height: 1.75;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Explicitly guarantee that the first event uses exactly the common scale. */
  #estates-general .history-event__date,
  #estates-general .history-event__content h2,
  #estates-general .history-event__hook,
  #estates-general .history-event__text,
  #estates-general .history-event__closing {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}


/* =========================================================
   v31 — HISTORY mobile right-overflow root fix
   ========================================================= */

@media (max-width: 759px) {
  /*
   * The fixed year indicator occupies approximately the rightmost 56px:
   *   right: 12px + width: 44px
   *
   * Previous text columns stopped only 22px from the viewport edge,
   * so roughly 34px of the reading area sat underneath the indicator.
   * Reserve a true reading gutter instead of shrinking the font.
   */
  .history-page {
    --history-reading-left: 22px;
    --history-reading-right: max(64px, calc(56px + env(safe-area-inset-right, 0px)));
  }

  /* Normal history events */
  .history-page .history-event__content,
  .history-page .history-event__content--left,
  .history-page .history-event__content--right,
  .history-page .history-event__content--center {
    width: auto;
    max-width: none;
    margin-left: var(--history-reading-left);
    margin-right: var(--history-reading-right);
    padding-left: 0;
    padding-right: 0;
  }

  /* Intro copy must also stay clear of the fixed year indicator. */
  .history-page .history-intro {
    padding-left: 24px;
    padding-right: var(--history-reading-right);
  }

  .history-page .history-intro__inner {
    width: 100%;
    max-width: 650px;
  }

  /* Interstitial bridge sections, including 「革命の外にも、敵がいた。」 */
  .history-page .history-bridge {
    padding-left: 24px;
    padding-right: var(--history-reading-right);
  }

  .history-page .history-bridge__inner {
    width: 100%;
    max-width: 650px;
  }

  /* 1792 story connection */
  .history-page .history-story-bridge__inner {
    width: auto;
    max-width: none;
    margin-left: var(--history-reading-left);
    margin-right: var(--history-reading-right);
  }

  /* Final epilogue */
  .history-page .history-outro__inner {
    width: auto;
    max-width: none;
    margin-left: 24px;
    margin-right: var(--history-reading-right);
  }

  /*
   * Long prose always wraps inside the newly reserved reading width.
   * Do not compensate by reducing type size.
   */
  .history-page .history-event__text,
  .history-page .history-event__text p,
  .history-page .history-event__closing:not(.history-singleline),
  .history-page .history-event__question,
  .history-page .history-bridge__text,
  .history-page .history-bridge__text p,
  .history-page .history-bridge__closing,
  .history-page .history-story-bridge__copy,
  .history-page .history-story-bridge__augustin,
  .history-page .history-outro__epilogue,
  .history-page .history-outro__epilogue p {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /*
   * Keep the year marker readable but slightly tighten its footprint.
   * This is secondary to reserving the reading gutter above.
   */
  .history-page .history-year-indicator {
    right: 8px;
    width: 40px;
  }
}


/* =========================================================
   v33 — fixed HISTORY reading column on mobile
   ========================================================= */

@media (max-width: 759px) {
  /*
   * Use one explicit reading width for every event.
   *
   * Year indicator:
   *   right: 8px
   *   width: 40px
   * => its left edge is 48px from the viewport right edge.
   *
   * Keep only a 3px visual gap before it, so prose may use the
   * screen almost all the way to the year indicator.
   */
  .history-page {
    --history-reading-left: 22px;
    --history-reading-right: calc(51px + env(safe-area-inset-right, 0px));
    --history-reading-width:
      calc(100vw - var(--history-reading-left) - var(--history-reading-right));
  }

  /*
   * Normal event columns: explicit identical width.
   * Content length, closing phrase length, left/right alignment classes,
   * etc. can no longer affect the reading-column width.
   */
  .history-page .history-event__content,
  .history-page .history-event__content--left,
  .history-page .history-event__content--right,
  .history-page .history-event__content--center {
    width: var(--history-reading-width);
    min-width: 0;
    max-width: var(--history-reading-width);
    margin-left: var(--history-reading-left);
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  /*
   * Every textual child occupies the same column.
   * This also removes the old 34em visual-width variation.
   */
  .history-page .history-event__date,
  .history-page .history-event__content h2,
  .history-page .history-event__hook,
  .history-page .history-event__text,
  .history-page .history-event__text p,
  .history-page .history-event__closing,
  .history-page .history-event__question,
  .history-page .history-ideal-words {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /*
   * Dramatic one-line phrases also measure against the fixed column.
   * Inline <strong>/<span> cases become block-level only inside HISTORY,
   * so their clientWidth is the reading width rather than intrinsic text width.
   */
  .history-page [data-history-singleline] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .history-page strong[data-history-singleline],
  .history-page span[data-history-singleline] {
    display: block;
  }

  /*
   * Ordinary prose wraps inside the fixed column.
   */
  .history-page .history-event__text,
  .history-page .history-event__text p,
  .history-page .history-event__closing:not(.history-singleline),
  .history-page .history-event__question {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /*
   * Interstitial bridge sections use the same left/right reading limits.
   */
  .history-page .history-bridge {
    padding-left: var(--history-reading-left);
    padding-right: var(--history-reading-right);
    box-sizing: border-box;
  }

  .history-page .history-bridge__inner {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
  }

  .history-page .history-bridge h2,
  .history-page .history-bridge__text,
  .history-page .history-bridge__closing,
  .history-page .history-bridge__note {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /*
   * 1792 transition and ending use the exact same reading column too.
   */
  .history-page .history-story-bridge__inner,
  .history-page .history-outro__inner {
    width: var(--history-reading-width);
    min-width: 0;
    max-width: var(--history-reading-width);
    margin-left: var(--history-reading-left);
    margin-right: 0;
    box-sizing: border-box;
  }

  .history-page .history-story-bridge__copy,
  .history-page .history-story-bridge__augustin,
  .history-page .history-outro__epilogue,
  .history-page .history-outro h2,
  .history-page .history-outro__links {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}


/* =========================================================
   v34 — natural HISTORY wrapping / quieter closing text
   ========================================================= */

@media (max-width: 759px) {
  /*
   * HISTORY no longer forces dramatic phrases onto one line.
   * Keep the fixed reading column from v33 and allow natural wrapping.
   */
  .history-page .history-event__hook,
  .history-page .history-event__closing,
  .history-page .history-event__question,
  .history-page .history-ideal-words,
  .history-page .history-bridge h2,
  .history-page .history-bridge__closing,
  .history-page .history-outro h2 {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /*
   * Closing lines remain emphasized, but are a little quieter than before.
   */
  .history-page .history-event__closing {
    font-size: clamp(.84rem, 4vw, 1.12rem);
    line-height: 1.8;
  }

  .history-page .history-event__closing--large {
    font-size: clamp(.9rem, 4.25vw, 1.2rem);
  }
}


/* =========================================================
   v35 — center 1792 bridge / outro on the HISTORY reading area
   ========================================================= */

@media (max-width: 759px) {
  /*
   * These two full-screen sections originally used:
   *   display: grid;
   *   place-items: center;
   *
   * That centers their inner block on the full viewport, while normal
   * HISTORY events are positioned inside the reading column that excludes
   * the fixed year indicator.
   *
   * Keep vertical centering, but anchor horizontal placement to the same
   * reading-column left edge as the normal event blocks.
   */
  .history-page .history-story-bridge,
  .history-page .history-outro {
    place-items: center start;
  }

  .history-page .history-story-bridge__inner,
  .history-page .history-outro__inner {
    width: var(--history-reading-width);
    min-width: 0;
    max-width: var(--history-reading-width);
    margin-left: var(--history-reading-left);
    margin-right: 0;
    box-sizing: border-box;
    text-align: center;
  }

  /*
   * Center all centered child copy relative to that fixed reading column,
   * not relative to the viewport.
   */
  .history-page .history-story-bridge__year,
  .history-page .history-story-bridge__copy,
  .history-page .history-story-bridge__augustin,
  .history-page .history-outro__epilogue,
  .history-page .history-outro h2,
  .history-page .history-outro__links {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}

/* =========================================================
   2026-09-11 Readability pass
   Increase explanatory copy and small labels; keep large
   timeline years/titles unchanged.
   ========================================================= */

.history-nav__label,
.history-era,
.history-date,
.history-caption,
.history-source,
.history-credit { font-size: .66rem; }

.history-event__lead,
.history-event__text,
.history-bridge__text,
.history-story-bridge__text,
.history-outro__text { font-size: clamp(.9rem, 4vw, 1.06rem); line-height: 2.1; }

.history-event__meta,
.history-event__note { font-size: .8rem; line-height: 1.8; }

@media (max-width: 759px) {
  .history-event__lead,
  .history-event__text,
  .history-bridge__text,
  .history-story-bridge__text,
  .history-outro__text { font-size: clamp(.88rem, 4vw, 1rem); }
}

@media (min-width: 760px) {
  .history-event__lead,
  .history-event__text,
  .history-bridge__text,
  .history-story-bridge__text,
  .history-outro__text { font-size: 1rem; }
}


/* 2026-09-11 readability refinement 2 */
.history-year-indicator__label,
.history-year-indicator__date,
.history-event__date,
.history-event__eyebrow,
.history-bridge__label,
.history-story-bridge__eyebrow,
.history-outro__eyebrow { color: rgba(224,216,198,.62); }