@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Bungee&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: auto;
  background: #ffffff;
  color: #171717;
  font-family: "JetBrains Mono", monospace;
}

button,
input,
textarea,
select {
  font: inherit;
}

a {
  color: inherit;
}

/* =========================================================
   ZG UNIVERSAL PAGE HERO
   LIGHT = DEFAULT
   DARK = CONTROLLED GLOBALLY BY:
   html[data-theme="dark"]
========================================================= */
.zg-hero {
  --hero-compass-angle: 0deg;
  --hero-pointer-x: 0;
  --hero-pointer-y: 0;
  --dial-sector-radius: 180px;
  --hero-section-count: 1;
  --hero-sector-step: 360deg;
  --hero-bg: #ffffff;
  --hero-ink: #171717;
  --hero-muted: rgba(23, 23, 23, 0.55);
  --hero-soft: rgba(23, 23, 23, 0.38);
  --hero-faint: rgba(23, 23, 23, 0.18);
  --hero-grid: rgba(23, 23, 23, 0.055);
  --hero-axis: rgba(23, 23, 23, 0.52);
  --hero-tick: rgba(23, 23, 23, 0.72);
  --hero-point-bg: #ffffff;
  --hero-point-active-bg: #171717;
  --hero-point-active-ring: #ffffff;
  --hero-yellow: #fedd00;
  position: relative;
  width: 100%;
  min-height: calc(100vh - 110px);
  min-height: 760px;
  font-family: "JetBrains Mono", monospace;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-ink);
  opacity: 0;
  transition: opacity 550ms ease, background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}

/* =========================================================
   GLOBAL DARK THEME
========================================================= */
html[data-theme=dark] .zg-hero {
  --hero-bg: #171717;
  --hero-ink: #ffffff;
  --hero-muted: rgba(255, 255, 255, 0.58);
  --hero-soft: rgba(255, 255, 255, 0.38);
  --hero-faint: rgba(255, 255, 255, 0.18);
  --hero-grid: rgba(255, 255, 255, 0.07);
  --hero-axis: rgba(255, 255, 255, 0.5);
  --hero-tick: rgba(255, 255, 255, 0.72);
  --hero-point-bg: #171717;
  --hero-point-active-bg: #ffffff;
  --hero-point-active-ring: #171717;
}

.zg-hero.is-visible {
  opacity: 1;
}

/* =========================================================
   COLUMN GRID
========================================================= */
.zg-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(12.5% - 1px), var(--hero-grid) calc(12.5% - 1px), var(--hero-grid) 12.5%);
}

/* =========================================================
   INTRO
========================================================= */
.zg-hero__intro {
  position: absolute;
  top: clamp(72px, 8vh, 96px);
  left: clamp(28px, 3vw, 52px);
  z-index: 10;
  width: min(340px, 28vw);
}

.zg-hero__intro p {
  margin: 0;
  color: var(--hero-ink);
  font-size: clamp(12px, 1vw, 17px);
  line-height: 1.62;
  letter-spacing: -0.025em;
  transition: color 300ms ease;
}

/* =========================================================
   TOP-RIGHT META
========================================================= */
.zg-hero__meta {
  position: absolute;
  top: clamp(34px, 5vh, 58px);
  right: clamp(28px, 3vw, 52px);
  z-index: 10;
  display: grid;
  gap: 8px;
  min-width: 180px;
  color: var(--hero-ink);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.25;
  transition: color 300ms ease;
}

.zg-hero__meta span:first-child {
  font-weight: 700;
}

/* =========================================================
   HORIZONTAL AXIS
========================================================= */
.zg-hero__axis {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 2;
  height: 1px;
  background: var(--hero-axis);
  transition: background-color 300ms ease;
}

/* =========================================================
   REGISTER
========================================================= */
.zg-hero__register {
  position: absolute;
  top: calc(50% + 18px);
  left: clamp(28px, 3vw, 52px);
  z-index: 5;
  display: flex;
  gap: clamp(36px, 6vw, 105px);
  color: var(--hero-ink);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 300ms ease;
}

/* =========================================================
   DIAL
========================================================= */
.zg-hero__dial {
  position: absolute;
  top: 50%;
  left: 76%;
  z-index: 20;
  width: clamp(330px, 31vw, 550px);
  aspect-ratio: 1;
  border: 0;
  color: var(--hero-ink);
  transform: translate(-50%, -50%) translate(calc(var(--hero-pointer-x) * 3px), calc(var(--hero-pointer-y) * 3px));
  transition: transform 180ms ease-out, color 300ms ease;
}

/* =========================================================
   TICK RING
========================================================= */
.zg-hero__ticks {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  pointer-events: none;
}

.zg-hero__tick {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 11px;
  background: var(--hero-tick);
  transform-origin: center var(--tick-radius);
  transform: translateX(-50%) rotate(var(--tick-angle));
  transition: background-color 300ms ease;
}

.zg-hero__tick:nth-child(6n+1) {
  height: 18px;
  background: var(--hero-ink);
}

/* =========================================================
   COMPASS NEEDLE
========================================================= */
.zg-hero__compass {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: rotate(var(--hero-compass-angle));
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* MAIN NEEDLE */
.zg-hero__compass-needle {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: calc(var(--dial-sector-radius) - 48px);
  background: linear-gradient(to top, var(--hero-soft) 0%, var(--hero-soft) 68%, var(--hero-yellow) 68%, var(--hero-yellow) 100%);
  opacity: 0.78;
  transform: translateX(-50%) translateY(-100%);
  transform-origin: center bottom;
}

/* POINTER HEAD */
.zg-hero__compass-tip {
  position: absolute;
  left: 50%;
  bottom: calc(var(--dial-sector-radius) - 43px);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 12px solid var(--hero-yellow);
  transform: translateX(-50%);
  filter: drop-shadow(0 0 4px rgba(254, 221, 0, 0.28));
}

/* small central origin */
.zg-hero__compass::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hero-yellow);
  transform: translate(-50%, -50%);
}

/* =========================================================
   INNER CIRCLE
========================================================= */
.zg-hero__dial-inner {
  position: absolute;
  inset: 25%;
  border: 1px dashed var(--hero-faint);
  border-radius: 50%;
  pointer-events: none;
  transition: border-color 300ms ease;
}

/* =========================================================
   PAGE INDEX LABEL
========================================================= */
.zg-hero__dial-caption {
  position: absolute;
  top: -20%;
  left: 50%;
  z-index: 5;
  color: var(--hero-ink);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.16em;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  transition: color 300ms ease;
}

/* =========================================================
   CENTER CROSSHAIR
========================================================= */
.zg-hero__crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: 15px;
  height: 15px;
  border: 1px solid var(--hero-soft);
  border-radius: 50%;
  background: var(--hero-bg);
  transform: translate(-50%, -50%);
  transition: border-color 300ms ease, background-color 300ms ease;
}

.zg-hero__crosshair::before,
.zg-hero__crosshair::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--hero-soft);
  transform: translate(-50%, -50%);
  transition: background-color 300ms ease;
}

.zg-hero__crosshair::before {
  width: 25px;
  height: 1px;
}

.zg-hero__crosshair::after {
  width: 1px;
  height: 25px;
}

/* =========================================================
   DIAL TEXT
========================================================= */
.zg-hero__dial-display {
  position: absolute;
  top: 66%;
  left: 50%;
  z-index: 8;
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 150px;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.zg-hero__dial-display small {
  margin: 0;
  color: var(--hero-soft);
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  transition: color 300ms ease;
}

.zg-hero__dial-display strong {
  max-width: 145px;
  margin: 0;
  color: var(--hero-ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 300ms ease;
}

.zg-hero__dial-display span {
  max-width: 135px;
  margin: 0;
  color: var(--hero-muted);
  font-size: 5px;
  line-height: 1.35;
  transition: color 300ms ease;
}

/* =========================================================
   DYNAMIC SECTION DIVIDERS

   One radial divider is generated for every configured chapter.
   The same compass therefore becomes 3-part, 4-part, 5-part, etc.
   without changing its visual language.
========================================================= */
.zg-hero__sector-line {
  --sector-angle: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 1px;
  height: var(--dial-sector-radius);
  background: linear-gradient(to top, var(--hero-faint) 0%, var(--hero-faint) 72%, transparent 100%);
  pointer-events: none;
  transform: translate(-50%, -100%) rotate(var(--sector-angle));
  transform-origin: 50% 100%;
  transition: background 300ms ease;
}

/* =========================================================
   NAVIGATION POINTS
========================================================= */
.zg-hero__dial-sections {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.zg-hero__dial-section {
  --sector-angle: 0deg;
  --sector-counter-angle: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--hero-point-bg);
  color: var(--hero-soft);
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%) rotate(var(--sector-angle)) translateY(calc(var(--dial-sector-radius) * -1)) rotate(var(--sector-counter-angle));
  transition: color 180ms ease, background-color 300ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.zg-hero__dial-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.zg-hero__dial-section:hover,
.zg-hero__dial-section:focus-visible {
  color: var(--hero-ink);
  border-color: var(--hero-muted);
  outline: none;
}

.zg-hero__dial-section.is-active {
  background: var(--hero-point-active-bg);
  color: var(--hero-yellow);
  border-color: var(--hero-point-active-bg);
  box-shadow: 0 0 0 4px var(--hero-point-active-ring);
}

/* =========================================================
   COORDINATES
========================================================= */
.zg-hero__coordinates {
  position: absolute;
  left: clamp(28px, 3vw, 52px);
  bottom: calc(clamp(105px, 17vh, 190px) + 34px);
  z-index: 8;
  color: var(--hero-muted);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: color 300ms ease;
}

/* =========================================================
   ACTION
========================================================= */
.zg-hero__action {
  position: absolute;
  right: clamp(28px, 3vw, 52px);
  bottom: 11%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  width: min(250px, 21vw);
  padding: 11px 0;
  border-top: 1px solid var(--hero-muted);
  color: var(--hero-ink);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 300ms ease, border-color 300ms ease;
}

.zg-hero__action span:last-child {
  font-size: 17px;
  transition: transform 200ms ease, color 200ms ease;
}

.zg-hero__action:hover span:last-child,
.zg-hero__action:focus-visible span:last-child {
  color: var(--hero-yellow);
  transform: translate(5px, 5px);
}

/* =========================================================
   LARGE PAGE TITLE
========================================================= */
.zg-hero__title-wrap {
  position: absolute;
  right: clamp(20px, 2vw, 36px);
  bottom: 0;
  left: clamp(20px, 2vw, 36px);
  z-index: 3;
  display: flex;
  align-items: flex-end;
  height: clamp(105px, 17vh, 190px);
  overflow: hidden;
  pointer-events: none;
  transition: transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
}

.zg-hero:not(.is-visible) .zg-hero__title-wrap {
  transform: translateY(18px);
}

.zg-hero__title-wrap h1 {
  display: block;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin: 0;
  color: var(--hero-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(100px, 16vw, 300px);
  font-weight: 400;
  line-height: 0.72;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 300ms ease;
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 900px) {
  .zg-hero__dial {
    left: 72%;
    width: 390px;
  }
  .zg-hero__intro {
    width: 285px;
  }
  .zg-hero__title-wrap {
    height: 150px;
  }
  .zg-hero__coordinates {
    bottom: 184px;
  }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 620px) {
  .zg-hero {
    min-height: 720px;
  }
  .zg-hero__intro {
    top: 60px;
    left: 20px;
    width: 54%;
  }
  .zg-hero__intro p {
    font-size: 10px;
  }
  .zg-hero__meta {
    top: 26px;
    right: 20px;
    min-width: auto;
    font-size: 8px;
    text-align: right;
  }
  .zg-hero__register {
    left: 20px;
    gap: 15px;
    font-size: 5px;
  }
  .zg-hero__dial {
    left: 73%;
    width: 280px;
  }
  .zg-hero__dial-display {
    top: 68%;
    width: 120px;
  }
  .zg-hero__dial-display strong {
    font-size: 7px;
  }
  .zg-hero__coordinates {
    display: none;
  }
  .zg-hero__action {
    right: 20px;
    bottom: 15%;
    width: 190px;
  }
  .zg-hero__title-wrap {
    right: 14px;
    left: 14px;
    height: 105px;
  }
  .zg-hero__title-wrap h1 {
    font-size: 100px;
  }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .zg-hero,
  .zg-hero * {
    transition-duration: 0.01ms !important;
  }
  .zg-hero__dial {
    transform: translate(-50%, -50%) !important;
  }
}
/* =========================================================
   EDITOR'S NOTE
========================================================= */
.editors-note {
  --editors-bg: #ffffff;
  --editors-ink: #171717;
  --editors-muted: rgba(23, 23, 23, 0.58);
  --editors-line: rgba(23, 23, 23, 0.2);
  --editors-number: rgba(23, 23, 23, 0.12);
  --editors-deck: rgba(23, 23, 23, 0.67);
  --editors-link-line: rgba(23, 23, 23, 0.5);
  --editors-graphic-bg: #f3f3f1;
  --editors-ticker-pretop: rgba(23, 23, 23, 0.025);
  --editors-ticker-upper: rgba(23, 23, 23, 0.04);
  --editors-ticker-top: rgba(23, 23, 23, 0.04);
  --editors-ticker-zero: rgba(23, 23, 23, 0.06);
  --editors-ticker-one: rgba(23, 23, 23, 0.11);
  --editors-ticker-two: rgba(23, 23, 23, 0.27);
  --editors-ticker-three: rgba(23, 23, 23, 0.52);
  --editors-ticker-four: #171717;
  width: 100%;
  background: var(--editors-bg);
  color: var(--editors-ink);
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
  padding: clamp(72px, 9vw, 150px) 0;
  border-bottom: 1px solid var(--editors-line);
  border-top: 1px solid var(--editors-line);
}

html[data-theme=dark] .editors-note {
  --editors-bg: #171717;
  --editors-ink: #ffffff;
  --editors-muted: rgba(255, 255, 255, 0.58);
  --editors-line: rgba(255, 255, 255, 0.2);
  --editors-number: rgba(255, 255, 255, 0.12);
  --editors-deck: rgba(255, 255, 255, 0.68);
  --editors-link-line: rgba(255, 255, 255, 0.5);
  --editors-graphic-bg: #202020;
  --editors-ticker-pretop: rgba(255, 255, 255, 0.025);
  --editors-ticker-upper: rgba(255, 255, 255, 0.04);
  --editors-ticker-top: rgba(255, 255, 255, 0.04);
  --editors-ticker-zero: rgba(255, 255, 255, 0.07);
  --editors-ticker-one: rgba(255, 255, 255, 0.12);
  --editors-ticker-two: rgba(255, 255, 255, 0.3);
  --editors-ticker-three: rgba(255, 255, 255, 0.58);
  --editors-ticker-four: #ffffff;
}

/* =========================================================
   META
========================================================= */
.editors-note__meta {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 20px;
  width: 100%;
  padding: 0 clamp(18px, 4vw, 68px) 17px;
  border-bottom: 1px solid var(--editors-line);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.editors-note__meta span:nth-child(2),
.editors-note__meta time {
  color: var(--editors-muted);
}

/* =========================================================
   ARTICLE
========================================================= */
.editors-note__article {
  display: grid;
  grid-template-columns: minmax(90px, 0.55fr) minmax(320px, 1.5fr) minmax(320px, 1fr);
  width: 100%;
  min-height: 560px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--editors-line);
}

/* =========================================================
   SECTION LABEL
========================================================= */
.editors-note__number {
  padding: 30px 20px 30px clamp(18px, 4vw, 68px);
  color: var(--editors-number);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(28px, 3vw, 64px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

/* =========================================================
   CONTENT
========================================================= */
.editors-note__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px clamp(28px, 4vw, 76px);
  border-right: 1px solid var(--editors-line);
  border-left: 1px solid var(--editors-line);
}

.editors-note__kicker {
  margin: 0 0 22px;
  color: var(--editors-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.editors-note__content h2 {
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(34px, 4.5vw, 74px);
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.editors-note__deck {
  max-width: 680px;
  margin: 28px 0 0;
  color: var(--editors-deck);
  font-size: 12px;
  line-height: 1.85;
  text-align: justify;
}

/* =========================================================
   ARTICLE LINK
========================================================= */
.editors-note__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: min(100%, 275px);
  margin-top: 44px;
  padding: 14px 0;
  border-top: 1px solid var(--editors-link-line);
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.editors-note__link span:last-child {
  transition: transform 220ms ease;
}

.editors-note__link:hover span:last-child,
.editors-note__link:focus-visible span:last-child {
  transform: translateX(6px);
}

/* =========================================================
   GRAPHIC
========================================================= */
.editors-note__graphic {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--editors-graphic-bg);
  transition: background-color 300ms ease;
}

/* =========================================================
   POSTER
========================================================= */
.editors-note-poster {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--editors-graphic-bg);
  transition: background-color 300ms ease;
}

/* =========================================================
   LARGE EDITORIAL TYPOGRAPHY
========================================================= */
.editors-note-poster__notes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 104px;
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 12px 0 0;
  overflow: hidden;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(46px, 5.4vw, 98px);
  line-height: 0.85;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

/* =========================================================
   TICKERS
========================================================= */
.editors-note-poster__ticker {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  white-space: nowrap;
}
.editors-note-poster__ticker span {
  display: block;
  padding-right: 0.28em;
}

/* =========================================================
   TICKER LEVELS
========================================================= */
.editors-note-poster__ticker--pretop {
  color: var(--editors-ticker-pretop);
  animation: editors-note-billboard-right 25s linear infinite;
}

.editors-note-poster__ticker--upper {
  color: var(--editors-ticker-upper);
  animation: editors-note-billboard-left 22s linear infinite;
}

.editors-note-poster__ticker--top {
  color: var(--editors-ticker-top);
  animation: editors-note-billboard-left 23s linear infinite;
}

.editors-note-poster__ticker--zero {
  color: var(--editors-ticker-zero);
  animation: editors-note-billboard-right 21s linear infinite;
}

.editors-note-poster__ticker--one {
  color: var(--editors-ticker-one);
  animation: editors-note-billboard-left 13s linear infinite;
}

.editors-note-poster__ticker--two {
  color: var(--editors-ticker-two);
  animation: editors-note-billboard-right 17s linear infinite;
}

.editors-note-poster__ticker--three {
  color: var(--editors-ticker-three);
  animation: editors-note-billboard-left 15s linear infinite;
}

.editors-note-poster__ticker--four {
  color: var(--editors-ticker-four);
  animation: editors-note-billboard-right 19s linear infinite;
}

/* =========================================================
   YELLOW CUT
========================================================= */
.editors-note-poster__rule {
  position: absolute;
  right: 0;
  bottom: 82px;
  left: 0;
  z-index: 10;
  height: 5px;
  background: var(--yellow);
}

/* =========================================================
   BOTTOM REGISTER
========================================================= */
.editors-note-poster__meta {
  position: absolute;
  right: 24px;
  bottom: 28px;
  left: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* =========================================================
   REVEAL
========================================================= */
.editors-note.reveal-on-scroll {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.editors-note.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes editors-note-billboard-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-25%);
  }
}
@keyframes editors-note-billboard-right {
  from {
    transform: translateX(-25%);
  }
  to {
    transform: translateX(0);
  }
}
/* =========================================================
   1180
========================================================= */
@media (max-width: 1180px) {
  .editors-note__article {
    grid-template-columns: 110px minmax(0, 1.45fr) minmax(280px, 0.75fr);
  }
}
/* =========================================================
   860
========================================================= */
@media (max-width: 860px) {
  .editors-note__article {
    grid-template-columns: 90px minmax(0, 1fr);
  }
  .editors-note__graphic {
    grid-column: 1/-1;
    min-height: 380px;
    border-top: 1px solid var(--editors-line);
  }
  .editors-note-poster__notes {
    font-size: clamp(60px, 11vw, 118px);
  }
  .editors-note-poster__meta {
    right: 22px;
    left: 22px;
  }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 620px) {
  .editors-note {
    padding-right: 16px;
    padding-left: 16px;
  }
  .editors-note__meta {
    grid-template-columns: 1fr auto;
    padding-right: 0;
    padding-left: 0;
  }
  .editors-note__meta span:nth-child(2) {
    display: none;
  }
  .editors-note__article {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .editors-note__number {
    padding: 30px 0 10px;
  }
  .editors-note__content {
    padding: 42px 0 54px;
    border-right: 0;
    border-left: 0;
  }
  .editors-note__graphic {
    min-height: 320px;
  }
  .editors-note-poster__notes {
    right: -3%;
    left: 19%;
    padding: 20px 0;
    font-size: clamp(64px, 21vw, 105px);
    line-height: 0.76;
  }
  .editors-note-poster__rule {
    bottom: 66px;
    left: 19%;
    height: 4px;
  }
  .editors-note-poster__meta {
    right: 18px;
    bottom: 20px;
    left: 19%;
  }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .editors-note,
  .editors-note * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .editors-note.reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}
/* =========================================================
   MOST READ / TOP 3
========================================================= */
.archive-index {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  --top3-bg: #ffffff;
  --top3-panel: #ffffff;
  --top3-ink: #171717;
  --top3-muted: rgba(23, 23, 23, 0.62);
  --top3-soft: rgba(23, 23, 23, 0.16);
  --top3-grid: rgba(23, 23, 23, 0.055);
  --top3-line: rgba(23, 23, 23, 0.2);
  --top3-line-strong: rgba(23, 23, 23, 0.42);
  --top3-hover-bg: var(--yellow);
  --top3-hover-ink: #171717;
  min-height: 520px;
  overflow: hidden;
  border-top: 1px solid var(--top3-line);
  border-bottom: 1px solid var(--top3-line);
  background: var(--top3-bg);
  color: var(--top3-ink);
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}

.archive-index__heading {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(52px, 6vw, 96px) clamp(28px, 5vw, 82px);
  overflow: hidden;
  border-right: 1px solid var(--top3-line);
  background: linear-gradient(to right, var(--top3-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--top3-grid) 1px, transparent 1px), var(--top3-panel);
  background-size: 34px 34px;
}
.archive-index__heading::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 34%;
  background: var(--yellow);
}
.archive-index__heading::after {
  content: "";
  position: absolute;
  right: clamp(28px, 4vw, 64px);
  bottom: clamp(34px, 4vw, 58px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--top3-ink);
}
.archive-index__heading .section-label {
  position: relative;
  z-index: 2;
  color: var(--top3-muted);
}

.archive-index__score {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-top: clamp(56px, 8vw, 120px);
}
.archive-index__score span {
  margin-bottom: 3px;
  font-family: "JetBrains Mono", monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.archive-index__score strong {
  display: block;
  margin-left: -0.07em;
  color: var(--top3-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(108px, 13vw, 220px);
  font-weight: 400;
  line-height: 0.72;
  letter-spacing: -0.09em;
}

.archive-index__heading-meta {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: 15px;
  border-top: 1px solid var(--top3-line-strong);
  color: var(--top3-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.archive-index__heading-meta span:last-child {
  text-align: right;
}

.archive-index__years {
  display: grid;
  grid-template-rows: repeat(3, minmax(150px, 1fr));
  min-width: 0;
  background: var(--top3-bg);
}
.archive-index__years .most-read-row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(72px, 8vw, 130px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  min-width: 0;
  min-height: 160px;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 4vw, 64px);
  overflow: hidden;
  border-bottom: 1px solid var(--top3-line);
  background: var(--top3-bg);
  color: var(--top3-ink);
  text-decoration: none;
  transition: background 260ms ease, padding-left 260ms ease;
}
.archive-index__years .most-read-row:last-child {
  border-bottom: 0;
}
.archive-index__years .most-read-row::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.archive-index__years .most-read-row:hover, .archive-index__years .most-read-row:focus-visible {
  background: var(--top3-hover-bg);
  color: var(--top3-hover-ink);
  outline: none;
}
.archive-index__years .most-read-row:hover::after, .archive-index__years .most-read-row:focus-visible::after {
  transform: scaleX(1);
}
.archive-index__years .most-read-row:hover .most-read-row__rank, .archive-index__years .most-read-row:focus-visible .most-read-row__rank {
  color: var(--top3-hover-ink);
  transform: translateX(6px);
}
.archive-index__years .most-read-row:hover .most-read-row__title, .archive-index__years .most-read-row:focus-visible .most-read-row__title {
  transform: translateX(8px);
}
.archive-index__years .most-read-row:hover .most-read-row__arrow, .archive-index__years .most-read-row:focus-visible .most-read-row__arrow {
  transform: translate(6px, -6px);
}

.most-read-row__rank {
  color: var(--top3-soft);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(50px, 5vw, 88px);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.07em;
  transition: color 220ms ease, transform 260ms ease;
}

.most-read-row__content {
  min-width: 0;
}

.most-read-row__title {
  display: block;
  max-width: 760px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(20px, 2vw, 34px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  transition: transform 260ms ease;
}

.most-read-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--top3-line);
  color: var(--top3-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.most-read-row__views {
  color: var(--top3-ink);
}

.most-read-row__arrow {
  align-self: center;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.archive-index__years .most-read-row:hover .most-read-row__meta,
.archive-index__years .most-read-row:focus-visible .most-read-row__meta {
  border-top-color: rgba(23, 23, 23, 0.24);
  color: rgba(23, 23, 23, 0.66);
}

.archive-index__years .most-read-row:hover .most-read-row__views,
.archive-index__years .most-read-row:focus-visible .most-read-row__views,
.archive-index__years .most-read-row:hover .most-read-row__arrow,
.archive-index__years .most-read-row:focus-visible .most-read-row__arrow {
  color: var(--top3-hover-ink);
}

/* =========================================================
   DARK THEME
========================================================= */
html[data-theme=dark] .archive-index {
  --top3-bg: #171717;
  --top3-panel: #171717;
  --top3-ink: #ffffff;
  --top3-muted: rgba(255, 255, 255, 0.62);
  --top3-soft: rgba(255, 255, 255, 0.18);
  --top3-grid: rgba(255, 255, 255, 0.07);
  --top3-line: rgba(255, 255, 255, 0.2);
  --top3-line-strong: rgba(255, 255, 255, 0.42);
}

.archive-index.reveal-on-scroll {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.archive-index.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 860px) {
  .archive-index {
    grid-template-columns: 1fr;
  }
  .archive-index__heading {
    min-height: 360px;
    border-right: 0;
    border-bottom: 1px solid var(--top3-ink);
  }
  .archive-index__score {
    padding-top: 50px;
  }
  .archive-index__score strong {
    font-size: clamp(100px, 25vw, 180px);
  }
}
@media (max-width: 620px) {
  .archive-index__heading {
    min-height: 300px;
    padding: 38px 18px;
  }
  .archive-index__heading-meta {
    margin-top: 36px;
  }
  .archive-index__years {
    grid-template-rows: none;
  }
  .archive-index__years .most-read-row {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 150px;
    padding: 26px 18px;
  }
  .most-read-row__rank {
    font-size: 46px;
  }
  .most-read-row__title {
    font-size: clamp(18px, 5.5vw, 26px);
  }
  .most-read-row__meta {
    flex-direction: column;
    gap: 5px;
    margin-top: 13px;
  }
}
.posts-section {
  --ink: #171717;
  --muted-ink: rgba(23, 23, 23, 0.58);
  --line: rgba(23, 23, 23, 0.2);
  --blog-section-bg: #ffffff;
  --blog-card-bg: #ffffff;
  --blog-visual-bg: #f8f8f6;
  --blog-grid-line: rgba(23, 23, 23, 0.055);
  --blog-placeholder: rgba(23, 23, 23, 0.38);
  --blog-hover-bg: rgba(254, 221, 0, 0.12);
  width: 100%;
  padding: clamp(72px, 9vw, 150px) 0;
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  background: var(--blog-section-bg);
  color: var(--ink);
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}

html[data-theme=dark] .posts-section {
  --ink: #ffffff;
  --muted-ink: rgba(255, 255, 255, 0.58);
  --line: rgba(255, 255, 255, 0.2);
  --blog-section-bg: #171717;
  --blog-card-bg: #171717;
  --blog-visual-bg: #1d1d1d;
  --blog-grid-line: rgba(255, 255, 255, 0.07);
  --blog-placeholder: rgba(255, 255, 255, 0.38);
  --blog-hover-bg: rgba(254, 221, 0, 0.12);
}

.posts-section__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  align-items: end;
  gap: 60px;
  width: 100%;
  margin-bottom: 54px;
  padding-right: clamp(18px, 4vw, 68px);
  padding-left: clamp(18px, 4vw, 68px);
}
.posts-section__heading h2 {
  margin: 18px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(44px, 6vw, 104px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}
.posts-section__heading > p {
  max-width: 100%;
  margin: 0;
  color: var(--muted-ink);
  font-size: 12px;
  line-height: 1.8;
  text-align: justify;
}

.blog-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  width: 100%;
  margin-bottom: 35px;
  padding: 18px clamp(18px, 4vw, 68px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-ink);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.filter-button span {
  opacity: 0.55;
}
.filter-button:hover, .filter-button:focus-visible, .filter-button.active {
  border-color: var(--line);
  background: var(--blog-card-bg);
  color: var(--ink);
}
.filter-button.active {
  box-shadow: inset 3px 0 0 var(--yellow);
}

.search-control {
  display: grid;
  flex: 0 0 auto;
  gap: 7px;
  width: min(100%, 285px);
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.search-control input {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: 11px;
}
.search-control input::-moz-placeholder {
  color: var(--blog-placeholder);
}
.search-control input::placeholder {
  color: var(--blog-placeholder);
}
.search-control input:focus {
  border-bottom-color: var(--yellow);
  box-shadow: 0 1px 0 var(--yellow);
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  border-top: 1px solid var(--line);
  border-left: 0;
}

.post-card {
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--blog-card-bg);
  transition: opacity 260ms ease, transform 260ms ease, background-color 300ms ease, border-color 300ms ease;
}
.post-card.is-hidden {
  display: none;
}

.post-card__link {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  text-decoration: none;
}
.post-card__link:hover .post-card__visual, .post-card__link:focus-visible .post-card__visual {
  background-color: var(--blog-hover-bg);
}
.post-card__link:hover .post-card__action b, .post-card__link:focus-visible .post-card__action b {
  transform: translate(4px, -4px);
}

.post-card__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(230px, 24vw, 390px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background-color: var(--blog-visual-bg);
  background-image: linear-gradient(to right, var(--blog-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--blog-grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  transition: background-color 280ms ease;
  aspect-ratio: 4/3;
}
.post-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.post-card__visual > .visual-word {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(38px, 4.7vw, 78px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  transform: rotate(-8deg);
}

.post-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(24px, 2.5vw, 40px);
}

.post-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.post-card h3 {
  margin: 28px 0 18px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(24px, 2.4vw, 40px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.post-card p {
  margin: 0;
  color: var(--muted-ink);
  font-size: 10px;
  line-height: 1.75;
}

.post-card__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: 34px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.post-card__action b {
  font-size: 15px;
  transition: transform 220ms ease;
}

.no-results {
  margin: 0;
  padding: 70px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--muted-ink);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .posts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .posts-section__heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .blog-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .search-control {
    width: 100%;
  }
}
@media (max-width: 620px) {
  .posts-section__heading {
    padding-right: 16px;
    padding-left: 16px;
  }
  .blog-controls {
    padding-right: 16px;
    padding-left: 16px;
  }
  .posts-grid {
    grid-template-columns: 1fr;
  }
  .filter-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .filter-button {
    justify-content: space-between;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}
/* =========================================================
   BLOG CHAPTER DIVIDERS
   Same visual system used on Family / Politics.
========================================================= */
.blog-chapter-divider {
  --blog-divider-bg: #ffffff;
  --blog-divider-ink: #171717;
  --blog-divider-muted: rgba(23, 23, 23, 0.42);
  --blog-divider-line: rgba(23, 23, 23, 0.22);
  --blog-divider-border: rgba(23, 23, 23, 0.14);
  --blog-divider-tick: rgba(23, 23, 23, 0.34);
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(60px, 1fr) max-content;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  width: 100%;
  min-height: 52px;
  padding: 0 clamp(24px, 5vw, 82px);
  overflow: hidden;
  background: var(--blog-divider-bg);
  color: var(--blog-divider-ink);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

.blog-chapter-divider__from {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--blog-divider-muted);
  white-space: nowrap;
}

.blog-chapter-divider__to {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--blog-divider-ink);
  font-size: inherit;
  font-weight: 700;
  white-space: nowrap;
}

.blog-chapter-divider__to::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  background: #fedd00;
  vertical-align: 1px;
}

.blog-chapter-divider__line {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: var(--blog-divider-line);
}

.blog-chapter-divider__line i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: clamp(38px, 5vw, 76px);
  height: 1px;
  background: #fedd00;
  animation: blog-divider-signal 5.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.blog-chapter-divider::before,
.blog-chapter-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 9px;
  background: var(--blog-divider-tick);
  transform: translateY(-50%);
}

.blog-chapter-divider::before {
  left: clamp(12px, 2vw, 32px);
}

.blog-chapter-divider::after {
  right: clamp(12px, 2vw, 32px);
}

html[data-theme=dark] .blog-chapter-divider {
  --blog-divider-bg: #171717;
  --blog-divider-ink: #ffffff;
  --blog-divider-muted: rgba(255, 255, 255, 0.46);
  --blog-divider-line: rgba(255, 255, 255, 0.22);
  --blog-divider-border: rgba(255, 255, 255, 0.16);
  --blog-divider-tick: rgba(255, 255, 255, 0.38);
}

@media (hover: hover) {
  .blog-chapter-divider__to {
    transition: color 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .blog-chapter-divider:hover .blog-chapter-divider__to {
    transform: translateX(3px);
  }
  .blog-chapter-divider:hover .blog-chapter-divider__line i {
    animation-duration: 2.8s;
  }
}
@keyframes blog-divider-signal {
  0% {
    left: 0;
    transform: translateX(-110%);
  }
  42% {
    left: 100%;
    transform: translateX(0);
  }
  58% {
    left: 100%;
    transform: translateX(0);
  }
  100% {
    left: 0;
    transform: translateX(-110%);
  }
}
@media (max-width: 820px) {
  .blog-chapter-divider {
    min-height: 48px;
    padding: 0 24px;
    gap: 14px;
    font-size: 6px;
  }
  .blog-chapter-divider::before,
  .blog-chapter-divider::after {
    display: none;
  }
  .blog-chapter-divider__to::before {
    width: 4px;
    height: 4px;
    margin-right: 7px;
  }
}
@media (max-width: 560px) {
  .blog-chapter-divider {
    grid-template-columns: max-content minmax(24px, 1fr) max-content;
    min-height: 44px;
    padding: 0 16px;
    gap: 9px;
    font-size: 5.5px;
    letter-spacing: 0.11em;
  }
  .blog-chapter-divider__from {
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .blog-chapter-divider__to {
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .blog-chapter-divider__to::before {
    display: none;
  }
  .blog-chapter-divider__line i {
    width: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blog-chapter-divider__line i {
    left: 50%;
    animation: none;
    transform: translateX(-50%);
  }
  .blog-chapter-divider__to {
    transition: none;
  }
}
/* =========================================================
   BLOG MAIN — SHARED PAGE SHELL
========================================================= */
:root {
  --paper: #ffffff;
  --ink: #171717;
  --muted-ink: rgba(23, 23, 23, 0.58);
  --soft-ink: rgba(23, 23, 23, 0.08);
  --line: rgba(23, 23, 23, 0.2);
  --yellow: #fedd00;
}

html {
  scroll-behavior: smooth;
}

.blog-page {
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(to right, transparent calc(50% - 0.5px), rgba(23, 23, 23, 0.0055) 50%, transparent calc(50% + 0.5px)), var(--paper);
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
}

.blog-page button,
.blog-page input {
  font: inherit;
}

.blog-page a {
  color: inherit;
}

.blog-page ::-moz-selection {
  background: var(--yellow);
  color: var(--ink);
}

.blog-page ::selection {
  background: var(--yellow);
  color: var(--ink);
}

.section-label {
  margin: 0;
  color: var(--muted-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--ink);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* =========================================================
   POLITICS / 01 / DISSIDENT
   Standalone component — light + dark
========================================================= */
.politics-dissident {
  position: relative;
  display: grid;
  grid-template-columns: 130px minmax(0, 0.9fr) minmax(360px, 1.1fr);
  -moz-column-gap: clamp(32px, 5vw, 90px);
       column-gap: clamp(32px, 5vw, 90px);
  row-gap: clamp(50px, 6vw, 90px);
  padding: clamp(90px, 11vw, 175px) clamp(22px, 4vw, 70px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  color: #171717;
  scroll-margin-top: 90px;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

.politics-dissident__rail {
  grid-row: 1/5;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding-top: 6px;
}
.politics-dissident__rail span {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(44px, 5vw, 78px);
  line-height: 1;
}
.politics-dissident__rail strong {
  color: var(--muted-ink);
  font-size: 8px;
  letter-spacing: 0.15em;
  writing-mode: vertical-rl;
  text-transform: uppercase;
}
.politics-dissident__rail i {
  width: 1px;
  flex: 1;
  min-height: 100px;
  margin: 10px 0 0 7px;
  background: linear-gradient(var(--yellow), rgba(23, 23, 23, 0.22));
}

.politics-dissident__intro {
  align-self: start;
}
.politics-dissident__intro h2 {
  margin: 20px 0 28px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(42px, 3.4vw, 88px);
  font-weight: 400;
  line-height: 0.91;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.politics-dissident__intro > p:last-child {
  max-width: 660px;
  margin: 0;
  color: rgba(23, 23, 23, 0.7);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.85;
  text-align: justify;
}

.politics-dissident__visual {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  border: 1px solid rgba(23, 23, 23, 0.17);
  background: var(--paper);
}

.dissent-visual {
  --security-red: #8f241d;
  --document-paper: #ffffff;
  isolation: isolate;
  min-height: 540px;
  background: white;
}
.dissent-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0.28;
  background: repeating-radial-gradient(circle at 18% 28%, rgba(23, 23, 23, 0.28) 0 0.6px, transparent 0.8px 5px), linear-gradient(90deg, rgba(23, 23, 23, 0.09), transparent 13%, transparent 84%, rgba(23, 23, 23, 0.08));
  mix-blend-mode: multiply;
}
.dissent-visual::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 9;
  border: 1px solid rgba(23, 23, 23, 0.17);
  pointer-events: none;
}
.dissent-visual .dissent-searchlight {
  position: absolute;
  top: -32%;
  left: -44%;
  z-index: 7;
  width: 82%;
  height: 170%;
  pointer-events: none;
  opacity: 0;
  transform: rotate(13deg);
  transform-origin: 50% 0;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 202, 0.05) 26%, rgba(255, 248, 202, 0.56) 50%, rgba(255, 248, 202, 0.05) 74%, transparent);
  filter: blur(10px);
  mix-blend-mode: screen;
}
.dissent-visual .dissent-scanline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  z-index: 10;
  width: 2px;
  pointer-events: none;
  opacity: 0;
  background: var(--yellow);
  box-shadow: 0 0 14px rgba(254, 221, 0, 0.72), 0 0 34px rgba(254, 221, 0, 0.26);
}
.dissent-visual .dissent-dossier {
  position: absolute;
  inset: clamp(28px, 6%, 46px) clamp(26px, 6%, 54px);
  z-index: 3;
}
.dissent-visual .dissent-dossier .dissent-dossier__cover {
  position: absolute;
  top: 8%;
  right: 18%;
  bottom: 7%;
  left: 2%;
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid rgba(23, 23, 23, 0.17);
  background: white;
  box-shadow: 21px 23px 0 rgba(23, 23, 23, 0.1), 0 16px 34px rgba(23, 23, 23, 0.18);
  transform: rotate(-3.6deg);
  transform-origin: 52% 58%;
}
.dissent-visual .dissent-dossier .dissent-dossier__cover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 43%;
  height: 26px;
  border: 1px solid rgba(23, 23, 23, 0.17);
  border-bottom: 0;
  background: white;
  transform: translateY(calc(-100% + 1px));
}
.dissent-visual .dissent-dossier .dissent-dossier__cover::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(23, 23, 23, 0.26);
  pointer-events: none;
}
.dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__heading {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  max-width: 66%;
  padding-bottom: 18px;
  border-bottom: 2px solid rgba(23, 23, 23, 0.62);
  color: rgba(23, 23, 23, 0.82);
}
.dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__heading span {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__heading strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(19px, 2.2vw, 34px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__record {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  width: min(58%, 330px);
  margin: 28px 0 0;
}
.dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__record div {
  display: grid;
  grid-template-columns: minmax(82px, 0.7fr) 1.3fr;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(23, 23, 23, 0.26);
}
.dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__record dt,
.dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__record dd {
  margin: 0;
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__record dt {
  color: rgba(23, 23, 23, 0.55);
}
.dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__record dd {
  font-weight: 800;
}
.dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__tab {
  position: absolute;
  right: -1px;
  bottom: 11%;
  z-index: 2;
  padding: 11px 18px;
  border: 1px solid rgba(23, 23, 23, 0.74);
  border-right: 0;
  background: rgba(23, 23, 23, 0.9);
  color: #efe9d8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__stamp {
  position: absolute;
  right: 7%;
  bottom: 12%;
  z-index: 4;
  padding: 9px 13px 8px;
  border: 3px double rgba(143, 36, 29, 0.88);
  color: rgba(143, 36, 29, 0.92);
  font-size: clamp(9px, 0.9vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(-11deg);
  filter: contrast(1.08);
}
.dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__stamp::after {
  content: "";
  position: absolute;
  inset: -4px;
  background: repeating-linear-gradient(17deg, transparent 0 4px, rgba(200, 185, 143, 0.88) 4px 5px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.dissent-visual .dissent-dossier .samizdat-document {
  position: absolute;
  top: 4%;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: min(62%, 430px);
  min-height: 82%;
  padding: clamp(22px, 2.7vw, 38px);
  border: 1px solid rgba(23, 23, 23, 0.17);
  background: linear-gradient(96deg, rgba(23, 23, 23, 0.05), transparent 12%, transparent 88%, rgba(23, 23, 23, 0.08)), repeating-linear-gradient(0deg, rgba(23, 23, 23, 0.027) 0, rgba(23, 23, 23, 0.027) 1px, transparent 1px, transparent 4px), var(--document-paper);
  box-shadow: 17px 20px 0 rgba(23, 23, 23, 0.09), 0 17px 32px #f2f2f2;
  transform: rotate(4.2deg);
  transform-origin: 45% 48%;
}
.dissent-visual .dissent-dossier .samizdat-document::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24px;
  width: 1px;
  background: rgba(143, 36, 29, 0.22);
}
.dissent-visual .dissent-dossier .samizdat-document::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(23, 23, 23, 0.09);
  pointer-events: none;
}
.dissent-visual .dissent-dossier .samizdat-document .samizdat-document__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(23, 23, 23, 0.52);
  font-size: 7px;
  line-height: 1.35;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.dissent-visual .dissent-dossier .samizdat-document .samizdat-document__meta strong {
  text-align: right;
}
.dissent-visual .dissent-dossier .samizdat-document .samizdat-document__georgian {
  margin: 20px 0 7px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(18px, 2vw, 31px);
  line-height: 1;
}
.dissent-visual .dissent-dossier .samizdat-document h3 {
  max-width: 92%;
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(28px, 2.2vw, 50px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.dissent-visual .dissent-dossier .samizdat-document .samizdat-document__text {
  position: relative;
  display: grid;
  gap: 11px;
  margin-top: clamp(18px, 2.2vw, 28px);
  padding-top: 15px;
  border-top: 1px solid rgba(23, 23, 23, 0.28);
}
.dissent-visual .dissent-dossier .samizdat-document .samizdat-document__text p {
  position: relative;
  margin: 0;
  color: rgba(23, 23, 23, 0.76);
  font-family: "Courier Prime", monospace;
  font-size: clamp(7px, 0.64vw, 9px);
  line-height: 1.55;
  letter-spacing: 0.035em;
}
.dissent-visual .dissent-dossier .samizdat-document .samizdat-document__text .document-redaction {
  position: absolute;
  z-index: 3;
  display: block;
  height: 11px;
  background: rgba(18, 18, 18, 0.98);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.11) inset;
  transform-origin: left;
}
.dissent-visual .dissent-dossier .samizdat-document .samizdat-document__text .document-redaction--one {
  top: 29px;
  right: 4%;
  width: 47%;
}
.dissent-visual .dissent-dossier .samizdat-document .samizdat-document__text .document-redaction--two {
  bottom: 16px;
  left: 11%;
  width: 64%;
}
.dissent-visual .dissent-dossier .samizdat-document .samizdat-document__footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(23, 23, 23, 0.34);
  font-size: 7px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.dissent-visual .dissent-dossier .samizdat-document .samizdat-document__footer strong {
  color: var(--security-red);
  text-align: right;
}
.dissent-visual .dissent-dossier .samizdat-document .samizdat-document__stamp {
  position: absolute;
  right: 7%;
  bottom: 16%;
  z-index: 12;
  padding: 12px 17px 10px;
  border: 5px double #a51f18;
  background: rgba(255, 255, 255, 0.68);
  color: #a51f18;
  box-shadow: 0 0 0 2px rgba(165, 31, 24, 0.16), 0 4px 12px rgba(23, 23, 23, 0.16);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(12px, 1.25vw, 19px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-8deg);
}
.dissent-visual .dissent-dossier .samizdat-document .samizdat-document__stamp::after {
  content: "";
  position: absolute;
  inset: -5px;
  background: repeating-linear-gradient(-13deg, transparent 0 8px, rgba(255, 255, 255, 0.45) 8px 9px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.dissent-visual .dissent-dossier .dissent-evidence-slip {
  position: absolute;
  right: auto;
  bottom: 2%;
  left: 1%;
  z-index: 7;
  display: grid;
  gap: 5px;
  width: min(34%, 220px);
  padding: 14px 17px;
  border: 1px solid rgba(23, 23, 23, 0.86);
  border-left: 6px solid var(--security-red);
  background: white;
  box-shadow: 9px 10px 0 #f2f2f2;
  transform: rotate(1.8deg);
}
.dissent-visual .dissent-dossier .dissent-evidence-slip span,
.dissent-visual .dissent-dossier .dissent-evidence-slip small {
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dissent-visual .dissent-dossier .dissent-evidence-slip strong {
  font-size: clamp(9px, 1vw, 13px);
  letter-spacing: 0.08em;
}
.dissent-visual .dissent-dossier .dissent-evidence-slip small {
  color: rgba(23, 23, 23, 0.6);
}
.dissent-visual .dissent-dust {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
}
.dissent-visual .dissent-dust i {
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(23, 23, 23, 0.36);
  opacity: 0;
}
.dissent-visual .dissent-dust i:nth-child(1) {
  top: 18%;
  left: 14%;
}
.dissent-visual .dissent-dust i:nth-child(2) {
  top: 42%;
  left: 7%;
}
.dissent-visual .dissent-dust i:nth-child(3) {
  top: 72%;
  left: 22%;
}
.dissent-visual .dissent-dust i:nth-child(4) {
  top: 26%;
  right: 17%;
}
.dissent-visual .dissent-dust i:nth-child(5) {
  top: 58%;
  right: 9%;
}
.dissent-visual .dissent-dust i:nth-child(6) {
  right: 29%;
  bottom: 9%;
}
.dissent-visual.is-dissent-ready .dissent-dossier__cover,
.dissent-visual.is-dissent-ready .samizdat-document,
.dissent-visual.is-dissent-ready .dissent-evidence-slip,
.dissent-visual.is-dissent-ready .dissent-dossier__stamp,
.dissent-visual.is-dissent-ready .samizdat-document__stamp {
  opacity: 0;
}
.dissent-visual.is-dissent-ready .dissent-dossier__cover {
  transform: translate3d(-34px, 20px, 0) rotate(-8deg) scale(0.96);
}
.dissent-visual.is-dissent-ready .samizdat-document {
  transform: translate3d(52px, -22px, 0) rotate(11deg) scale(0.94);
}
.dissent-visual.is-dissent-ready .dissent-evidence-slip {
  transform: translate3d(40px, 18px, 0) rotate(8deg);
}
.dissent-visual.is-dissent-ready .samizdat-document__text p {
  clip-path: inset(0 100% 0 0);
}
.dissent-visual.is-dissent-ready .document-redaction {
  transform: scaleX(0);
}
.dissent-visual.is-dissent-active .dissent-dossier__cover {
  animation: dissent-dossier-enter 760ms cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}
.dissent-visual.is-dissent-active .samizdat-document {
  animation: dissent-document-enter 920ms 260ms cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}
.dissent-visual.is-dissent-active .samizdat-document__text p {
  animation: dissent-line-reveal 520ms ease forwards;
}
.dissent-visual.is-dissent-active .samizdat-document__text p:nth-of-type(1) {
  animation-delay: 920ms;
}
.dissent-visual.is-dissent-active .samizdat-document__text p:nth-of-type(2) {
  animation-delay: 1080ms;
}
.dissent-visual.is-dissent-active .samizdat-document__text p:nth-of-type(3) {
  animation-delay: 1240ms;
}
.dissent-visual.is-dissent-active .samizdat-document__text .document-redaction--one {
  animation: dissent-redaction-slam 240ms 1510ms ease-out forwards;
}
.dissent-visual.is-dissent-active .samizdat-document__text .document-redaction--two {
  animation: dissent-redaction-slam 260ms 1660ms ease-out forwards;
}
.dissent-visual.is-dissent-active .dissent-evidence-slip {
  animation: dissent-slip-enter 560ms 1370ms cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}
.dissent-visual.is-dissent-active .samizdat-document__stamp {
  animation: dissent-stamp-hit 340ms 1950ms cubic-bezier(0.14, 0.78, 0.24, 1.18) forwards;
}
.dissent-visual.is-dissent-active .dissent-dossier__stamp {
  animation: dissent-security-stamp-hit 330ms 2220ms cubic-bezier(0.14, 0.78, 0.24, 1.18) forwards;
}
.dissent-visual.is-dissent-active .dissent-searchlight {
  animation: dissent-searchlight-sweep 5.4s 2350ms ease-in-out infinite;
}
.dissent-visual.is-dissent-active .dissent-scanline {
  animation: dissent-scanline-pass 4.1s 2450ms ease-in-out infinite;
}
.dissent-visual.is-dissent-active .dissent-dust i {
  animation: dissent-dust-rise 6.2s 2250ms ease-in-out infinite;
}
.dissent-visual.is-dissent-active .dissent-dust i:nth-child(2) {
  animation-delay: 2950ms;
}
.dissent-visual.is-dissent-active .dissent-dust i:nth-child(3) {
  animation-delay: 3450ms;
}
.dissent-visual.is-dissent-active .dissent-dust i:nth-child(4) {
  animation-delay: 2700ms;
}
.dissent-visual.is-dissent-active .dissent-dust i:nth-child(5) {
  animation-delay: 3900ms;
}
.dissent-visual.is-dissent-active .dissent-dust i:nth-child(6) {
  animation-delay: 3200ms;
}
@media (max-width: 760px) {
  .dissent-visual {
    min-height: 500px;
  }
  .dissent-visual .dissent-dossier {
    inset: 34px 22px 28px;
  }
  .dissent-visual .dissent-dossier .dissent-dossier__cover {
    top: 12%;
    right: 10%;
    bottom: 8%;
    left: 0;
    padding: 24px 20px;
  }
  .dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__heading {
    max-width: 72%;
  }
  .dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__record {
    width: 62%;
  }
  .dissent-visual .dissent-dossier .dissent-dossier__cover .dissent-dossier__record div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .dissent-visual .dissent-dossier .samizdat-document {
    top: 8%;
    right: -2%;
    width: 70%;
    min-height: 79%;
    padding: 21px 18px 20px 28px;
  }
  .dissent-visual .dissent-dossier .samizdat-document .samizdat-document__meta strong {
    display: none;
  }
  .dissent-visual .dissent-dossier .samizdat-document .samizdat-document__text {
    gap: 9px;
  }
  .dissent-visual .dissent-dossier .samizdat-document .samizdat-document__text p {
    font-size: 7px;
  }
  .dissent-visual .dissent-dossier .samizdat-document .samizdat-document__text .document-redaction--one {
    top: 26px;
  }
  .dissent-visual .dissent-dossier .dissent-evidence-slip {
    right: auto;
    bottom: 2%;
    left: 1%;
    width: 45%;
  }
}

.politics-dissident__events {
  grid-column: 2/4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}

.politics-dissident__event {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 24px;
  min-height: 210px;
  padding: 28px 28px 34px;
  border-bottom: 1px solid var(--line);
}
.politics-dissident__event:nth-child(odd) {
  border-right: 1px solid var(--line);
}
.politics-dissident__event time {
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.politics-dissident__event h3 {
  margin: 0 0 16px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(19px, 2vw, 31px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.politics-dissident__event p {
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: 11px;
  line-height: 1.75;
  text-align: justify;
}

.politics-dissident__archive-link {
  grid-column: 2/4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 20px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}
.politics-dissident__archive-link span:last-child {
  font-size: 18px;
  transition: transform 220ms ease;
}
.politics-dissident__archive-link:hover span:last-child, .politics-dissident__archive-link:focus-visible span:last-child {
  transform: translate(4px, -4px);
}

/* =========================================================
   POLITICS ANIMATION KEYFRAMES
   ========================================================= */
/* =========================================================
   REVEAL
========================================================= */
.politics-dissident .reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.politics-dissident .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

html[data-theme=dark] {
  /* -------------------------------------------------------
     NUMBERED CHAPTER SHELLS
  ------------------------------------------------------- */
}
html[data-theme=dark] .politics-dissident {
  border-top-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
  background: #171717;
  color: #ffffff;
}
html[data-theme=dark] .politics-dissident__rail {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}
html[data-theme=dark] .politics-dissident__rail strong {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme=dark] .politics-dissident__rail i {
  background: linear-gradient(var(--yellow), rgba(255, 255, 255, 0.22));
}
html[data-theme=dark] .politics-dissident__intro .section-label {
  color: rgba(255, 255, 255, 0.56);
}
html[data-theme=dark] .politics-dissident__intro h2 {
  color: #ffffff;
}
html[data-theme=dark] .politics-dissident__intro > p:last-child {
  color: rgba(255, 255, 255, 0.7);
}
html[data-theme=dark] {
  /* -------------------------------------------------------
     CHRONOLOGY / EVENT CARDS
  ------------------------------------------------------- */
}
html[data-theme=dark] .politics-dissident__events {
  border-top-color: rgba(255, 255, 255, 0.72);
}
html[data-theme=dark] .politics-dissident__event {
  border-bottom-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
html[data-theme=dark] .politics-dissident__event:nth-child(odd) {
  border-right-color: rgba(255, 255, 255, 0.2);
}
html[data-theme=dark] .politics-dissident__event time {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme=dark] .politics-dissident__event h3 {
  color: #ffffff;
}
html[data-theme=dark] .politics-dissident__event p {
  color: rgba(255, 255, 255, 0.68);
}
html[data-theme=dark] .politics-dissident__archive-link {
  border-top-color: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.72);
  color: #ffffff;
}
html[data-theme=dark] .politics-dissident__archive-link:hover, html[data-theme=dark] .politics-dissident__archive-link:focus-visible {
  color: var(--yellow);
}
html[data-theme=dark] {
  /* -------------------------------------------------------
     SHARED ANIMATION FRAME
  ------------------------------------------------------- */
}
html[data-theme=dark] .politics-dissident__visual {
  border-color: rgba(255, 255, 255, 0.22);
  background: #0b0b0b;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}
html[data-theme=dark] {
  /* -------------------------------------------------------
     01 — DISSIDENCE

     The files and samizdat pages deliberately remain paper-
     coloured. The surrounding security/archive workspace turns
     dark so the animation reads as an illuminated evidence file.
  ------------------------------------------------------- */
}
html[data-theme=dark] .dissent-visual {
  background: #090909;
}
html[data-theme=dark] .dissent-visual::before {
  opacity: 0.24;
  background: repeating-radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.19) 0 0.6px, transparent 0.8px 5px), linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 13%, transparent 84%, rgba(255, 255, 255, 0.045));
  mix-blend-mode: screen;
}
html[data-theme=dark] .dissent-visual::after {
  border-color: rgba(255, 255, 255, 0.2);
}
html[data-theme=dark] .dissent-visual .dissent-dossier {
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.3));
}

@keyframes dissent-dossier-enter {
  0% {
    opacity: 0;
    transform: translate3d(-34px, 20px, 0) rotate(-8deg) scale(0.96);
  }
  68% {
    opacity: 1;
    transform: translate3d(4px, -2px, 0) rotate(-2.6deg) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-3.6deg) scale(1);
  }
}
@keyframes dissent-document-enter {
  0% {
    opacity: 0;
    transform: translate3d(52px, -22px, 0) rotate(11deg) scale(0.94);
  }
  72% {
    opacity: 1;
    transform: translate3d(-4px, 3px, 0) rotate(3.3deg) scale(1.012);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(4.2deg) scale(1);
  }
}
@keyframes dissent-slip-enter {
  0% {
    opacity: 0;
    transform: translate3d(40px, 18px, 0) rotate(8deg);
  }
  76% {
    opacity: 1;
    transform: translate3d(-3px, -2px, 0) rotate(0.8deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(1.8deg);
  }
}
@keyframes dissent-line-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes dissent-redaction-slam {
  0% {
    transform: scaleX(0);
  }
  72% {
    transform: scaleX(1.06);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes dissent-stamp-hit {
  0% {
    opacity: 0;
    transform: translate3d(18px, -30px, 0) rotate(-18deg) scale(1.9);
  }
  68% {
    opacity: 1;
    transform: translate3d(-2px, 2px, 0) rotate(-7deg) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-8deg) scale(1);
  }
}
@keyframes dissent-security-stamp-hit {
  0% {
    opacity: 0;
    transform: translate3d(-18px, -26px, 0) rotate(-20deg) scale(1.8);
  }
  70% {
    opacity: 1;
    transform: translate3d(2px, 2px, 0) rotate(-10deg) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-11deg) scale(1);
  }
}
@keyframes dissent-searchlight-sweep {
  0%, 16% {
    left: -52%;
    opacity: 0;
  }
  28% {
    opacity: 0.55;
  }
  67% {
    opacity: 0.3;
  }
  84%, 100% {
    left: 88%;
    opacity: 0;
  }
}
@keyframes dissent-scanline-pass {
  0%, 18% {
    left: -4px;
    opacity: 0;
  }
  25% {
    opacity: 0.82;
  }
  76% {
    opacity: 0.62;
  }
  84%, 100% {
    left: calc(100% + 4px);
    opacity: 0;
  }
}
@keyframes dissent-dust-rise {
  0%, 100% {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.7);
  }
  28% {
    opacity: 0.42;
  }
  70% {
    opacity: 0.16;
  }
  88% {
    opacity: 0;
    transform: translate3d(12px, -24px, 0) scale(1.15);
  }
}
@keyframes april-scene-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes april-item-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes april-crowd-rise {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes april-crowd-pressure {
  from {
    opacity: 1;
    transform: translateY(0) translateX(0) scaleX(1);
  }
  to {
    opacity: 0.58;
    transform: translateY(0) translateX(-4%) scaleX(0.94);
  }
}
@keyframes april-security-advance {
  from {
    opacity: 0;
    transform: translateX(145%);
  }
  35% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes april-night-fall {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.74;
  }
}
@keyframes april-memorial-enter {
  from {
    opacity: 0;
    transform: translateY(13px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes april-caption-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes april-candle-flicker {
  from {
    opacity: 0.76;
    transform: translateX(-50%) rotate(-6deg) scaleY(0.88);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) rotate(7deg) scaleY(1.12);
  }
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1180px) {
  .politics-dissident {
    grid-template-columns: 90px minmax(0, 1fr);
  }
  .politics-dissident__intro,
  .politics-dissident__visual,
  .politics-dissident__events,
  .politics-dissident__archive-link {
    grid-column: 2;
  }
  .politics-dissident__visual {
    min-height: 540px;
  }
}
@media (max-width: 860px) {
  .politics-dissident {
    grid-template-columns: 1fr;
  }
  .politics-dissident__rail {
    grid-row: auto;
    grid-column: 1;
    flex-direction: row;
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 22px;
  }
  .politics-dissident__rail strong {
    writing-mode: initial;
  }
  .politics-dissident__rail i {
    min-height: 1px;
    height: 1px;
    flex: 1;
    margin: 0;
    background: linear-gradient(to right, var(--yellow), transparent);
  }
  .politics-dissident__intro,
  .politics-dissident__visual,
  .politics-dissident__events,
  .politics-dissident__archive-link {
    grid-column: 1;
  }
  .politics-dissident__events {
    grid-template-columns: 1fr;
  }
  .politics-dissident__event:nth-child(odd) {
    border-right: 0;
  }
}
@media (max-width: 620px) {
  .politics-dissident {
    padding-right: 18px;
    padding-left: 18px;
  }
  .politics-dissident__visual {
    min-height: 430px;
  }
  .politics-dissident__event {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .politics-dissident .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* =========================================================
   POLITICS / 02 / NATIONAL MOVEMENT
   Standalone component — light + dark
========================================================= */
.politics-movement {
  position: relative;
  display: grid;
  grid-template-columns: 130px minmax(0, 0.9fr) minmax(360px, 1.1fr);
  -moz-column-gap: clamp(32px, 5vw, 90px);
       column-gap: clamp(32px, 5vw, 90px);
  row-gap: clamp(50px, 6vw, 90px);
  padding: clamp(90px, 11vw, 175px) clamp(22px, 4vw, 70px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  color: #171717;
  scroll-margin-top: 90px;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

.politics-movement__rail {
  grid-row: 1/5;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding-top: 6px;
}
.politics-movement__rail span {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(44px, 5vw, 78px);
  line-height: 1;
}
.politics-movement__rail strong {
  color: var(--muted-ink);
  font-size: 8px;
  letter-spacing: 0.15em;
  writing-mode: vertical-rl;
  text-transform: uppercase;
}
.politics-movement__rail i {
  width: 1px;
  flex: 1;
  min-height: 100px;
  margin: 10px 0 0 7px;
  background: linear-gradient(var(--yellow), rgba(23, 23, 23, 0.22));
}

.politics-movement__intro {
  align-self: start;
}
.politics-movement__intro h2 {
  margin: 20px 0 28px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(42px, 3.4vw, 88px);
  font-weight: 400;
  line-height: 0.91;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.politics-movement__intro > p:last-child {
  max-width: 660px;
  margin: 0;
  color: rgba(23, 23, 23, 0.7);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.85;
  text-align: justify;
}

.politics-movement__visual {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(23, 23, 23, 0.17);
  background: #ffffff;
}

.movement-visual {
  --movement-night: #171717;
  isolation: isolate;
  min-height: 560px;
  container-type: inline-size;
  background: white;
}
.movement-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0.6;
  background: repeating-radial-gradient(circle at 20% 30%, rgba(23, 23, 23, 0.12) 0 0.5px, transparent 0.8px 5px), linear-gradient(90deg, rgba(23, 23, 23, 0.06), transparent 15%, transparent 86%, rgba(23, 23, 23, 0.06));
  mix-blend-mode: multiply;
}
.movement-visual::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 11;
  border: 1px solid rgba(23, 23, 23, 0.14);
  pointer-events: none;
}
.movement-visual .movement-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.6;
  background-image: linear-gradient(rgba(23, 23, 23, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 23, 23, 0.09) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.22) 62%, transparent);
          mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.22) 62%, transparent);
}
.movement-visual .april-1989-scene {
  position: absolute;
  top: 7%;
  right: 5%;
  bottom: 8%;
  left: 5%;
  z-index: 2;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--movement-night);
  box-shadow: 10px 10px 0 rgba(254, 221, 0, 0.82), 0 24px 60px rgba(23, 23, 23, 0.16);
}
.movement-visual .april-1989-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.18;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 5px, rgba(255, 255, 255, 0.08) 6px);
}
.movement-visual .april-1989-scene::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  height: 4px;
  background: var(--yellow);
}
.movement-visual .april-1989-scene .april-1989-scene__header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  color: white;
  font-size: clamp(6px, 1.1cqi, 9px);
  letter-spacing: 0.13em;
}
.movement-visual .april-1989-scene .april-1989-scene__header span {
  color: rgba(255, 255, 255, 0.58);
}
.movement-visual .april-1989-scene .april-1989-scene__header strong {
  color: var(--yellow);
}
.movement-visual .april-1989-scene .april-night {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.74;
  background: radial-gradient(circle at 24% 72%, rgba(254, 221, 0, 0.13), transparent 19%), linear-gradient(105deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.86));
}
.movement-visual .april-1989-scene .april-crowd {
  position: absolute;
  bottom: 11%;
  left: 5%;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  -moz-column-gap: clamp(6px, 1cqi, 11px);
       column-gap: clamp(6px, 1cqi, 11px);
  row-gap: 10px;
  align-items: end;
  width: 46%;
  opacity: 0.76;
  transform-origin: left bottom;
}
.movement-visual .april-1989-scene {
  /* =========================================================
  BASE HUMAN FIGURE
  ========================================================= */
}
.movement-visual .april-1989-scene .april-person {
  position: relative;
  display: block;
  justify-self: center;
  width: 30px;
  height: 66px;
  background: none !important;
  transform-origin: center bottom;
}
.movement-visual .april-1989-scene .april-person span {
  position: absolute;
  display: block;
}
.movement-visual .april-1989-scene {
  /* =========================================================
  HEAD
  ========================================================= */
}
.movement-visual .april-1989-scene .april-person__head {
  top: 7px;
  left: 50%;
  z-index: 4;
  width: 12px;
  height: 14px;
  border-radius: 46% 46% 48% 48%;
  background: #e1d8ca;
  transform: translateX(-50%);
}
.movement-visual .april-1989-scene {
  /* =========================================================
  WOMAN
  ========================================================= */
}
.movement-visual .april-1989-scene .april-person--woman .april-person__hair {
  top: 3px;
  left: 50%;
  z-index: 3;
  width: 19px;
  height: 27px;
  border-radius: 50% 50% 34% 34%;
  background: #66615b;
  transform: translateX(-50%);
}
.movement-visual .april-1989-scene .april-person--woman .april-person__hair::after {
  content: "";
  position: absolute;
  top: 12px;
  right: -2px;
  width: 5px;
  height: 18px;
  border-radius: 0 0 5px 5px;
  background: inherit;
}
.movement-visual .april-1989-scene .april-person--woman .april-person__body {
  top: 23px;
  left: 50%;
  z-index: 2;
  width: 17px;
  height: 19px;
  border-radius: 4px 4px 1px 1px;
  background: #e8e5df;
  transform: translateX(-50%);
  /* actual skirt */
}
.movement-visual .april-1989-scene .april-person--woman .april-person__body::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 26px;
  height: 22px;
  background: #e8e5df;
  clip-path: polygon(29% 0, 71% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
}
.movement-visual .april-1989-scene .april-person--woman .april-person__arm {
  top: 26px;
  width: 5px;
  height: 25px;
  border-radius: 3px;
  background: #ddd9d2;
  transform-origin: top center;
}
.movement-visual .april-1989-scene .april-person--woman .april-person__arm--left {
  left: 5px;
  transform: rotate(10deg);
}
.movement-visual .april-1989-scene .april-person--woman .april-person__arm--right {
  right: 5px;
  transform: rotate(-10deg);
}
.movement-visual .april-1989-scene .april-person--woman .april-person__leg {
  top: 55px;
  z-index: 1;
  width: 4px;
  height: 10px;
  background: #cbc7c0;
}
.movement-visual .april-1989-scene .april-person--woman .april-person__leg--left {
  left: 10px;
}
.movement-visual .april-1989-scene .april-person--woman .april-person__leg--right {
  right: 10px;
}
.movement-visual .april-1989-scene {
  /* =========================================================
  MAN
  ========================================================= */
}
.movement-visual .april-1989-scene .april-person--man .april-person__body {
  top: 22px;
  left: 50%;
  width: 20px;
  height: 25px;
  border-radius: 4px 4px 2px 2px;
  background: #dedbd5;
  transform: translateX(-50%);
}
.movement-visual .april-1989-scene .april-person--man .april-person__arm {
  top: 25px;
  width: 5px;
  height: 27px;
  border-radius: 3px;
  background: #d5d2cc;
  transform-origin: top center;
}
.movement-visual .april-1989-scene .april-person--man .april-person__arm--left {
  left: 3px;
  transform: rotate(9deg);
}
.movement-visual .april-1989-scene .april-person--man .april-person__arm--right {
  right: 3px;
  transform: rotate(-9deg);
}
.movement-visual .april-1989-scene .april-person--man .april-person__leg {
  top: 45px;
  width: 6px;
  height: 20px;
  border-radius: 0 0 2px 2px;
  background: #bdbbb6;
}
.movement-visual .april-1989-scene .april-person--man .april-person__leg--left {
  left: 8px;
  transform: rotate(3deg);
}
.movement-visual .april-1989-scene .april-person--man .april-person__leg--right {
  right: 8px;
  transform: rotate(-3deg);
}
.movement-visual .april-1989-scene {
  /* =========================================================
  NATURAL VARIATION
  ========================================================= */
}
.movement-visual .april-1989-scene .april-person--woman {
  transform: scale(1);
}
.movement-visual .april-1989-scene .april-person--man:nth-child(3n) {
  transform: scale(0.94);
}
.movement-visual .april-1989-scene .april-person--man:nth-child(4n) {
  transform: scale(1.04);
}
.movement-visual .april-1989-scene .april-person--man:nth-child(5n) {
  transform: scale(0.97);
}
.movement-visual .april-1989-scene .april-security-line {
  position: absolute;
  right: 3%;
  bottom: 10%;
  z-index: 5;
  width: 44%;
  height: 118px;
  opacity: 1;
}
.movement-visual .april-1989-scene {
  /* =========================================================
  APC / ARMORED VEHICLE
  ========================================================= */
}
.movement-visual .april-1989-scene .april-apc {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 136px;
  height: 82px;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.34));
}
.movement-visual .april-1989-scene .april-apc .april-apc__body {
  position: absolute;
  right: 0;
  bottom: 18px;
  width: 120px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #5a615d;
}
.movement-visual .april-1989-scene .april-apc .april-apc__turret {
  position: absolute;
  right: 42px;
  bottom: 48px;
  width: 38px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9px 9px 4px 4px;
  background: #67706a;
}
.movement-visual .april-1989-scene .april-apc .april-apc__barrel {
  position: absolute;
  right: 75px;
  bottom: 54px;
  width: 52px;
  height: 4px;
  background: #1b1b1b;
  transform: rotate(-2deg);
  transform-origin: right center;
}
.movement-visual .april-1989-scene .april-apc .april-apc__track {
  position: absolute;
  right: 8px;
  bottom: 0;
  width: 108px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: #242424;
}
.movement-visual .april-1989-scene .april-apc .april-apc__soviet-star {
  position: absolute;
  right: 36px;
  bottom: 28px;
  z-index: 4;
  width: 20px;
  height: 20px;
  background: #a62020;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%);
}
.movement-visual .april-1989-scene {
  /* =========================================================
  SOLDIERS
  ========================================================= */
}
.movement-visual .april-1989-scene .april-soldier {
  position: absolute;
  bottom: 0;
  width: 34px;
  height: 88px;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.28));
}
.movement-visual .april-1989-scene .april-soldier span {
  position: absolute;
  display: block;
}
.movement-visual .april-1989-scene .april-soldier .april-soldier__soviet-patch {
  position: absolute;
  top: 27px;
  left: 11px;
  z-index: 5;
  width: 7px;
  height: 7px;
  background: #a62020;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.movement-visual .april-1989-scene .april-soldier .april-soldier__helmet {
  top: 1px;
  left: 8px;
  width: 18px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px 10px 5px 5px;
  background: #8e958f;
}
.movement-visual .april-1989-scene .april-soldier .april-soldier__head {
  top: 8px;
  left: 11px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d8d4cc;
}
.movement-visual .april-1989-scene .april-soldier .april-soldier__torso {
  top: 20px;
  left: 8px;
  width: 18px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #5f685f;
}
.movement-visual .april-1989-scene .april-soldier .april-soldier__arm {
  top: 25px;
  width: 14px;
  height: 4px;
  background: #677068;
  transform-origin: left center;
}
.movement-visual .april-1989-scene .april-soldier .april-soldier__arm--rear {
  left: 1px;
  transform: rotate(144deg);
}
.movement-visual .april-1989-scene .april-soldier .april-soldier__arm--front {
  left: 18px;
  transform: rotate(12deg);
}
.movement-visual .april-1989-scene .april-soldier .april-soldier__leg {
  top: 44px;
  width: 5px;
  height: 31px;
  background: #444;
  transform-origin: top center;
}
.movement-visual .april-1989-scene .april-soldier .april-soldier__leg--left {
  left: 12px;
  transform: rotate(6deg);
}
.movement-visual .april-1989-scene .april-soldier .april-soldier__leg--right {
  left: 19px;
  transform: rotate(-5deg);
}
.movement-visual .april-1989-scene .april-soldier .april-soldier__rifle {
  top: 28px;
  left: 18px;
  width: 30px;
  height: 3px;
  background: #171717;
  transform: rotate(11deg);
  transform-origin: left center;
}
.movement-visual .april-1989-scene .april-soldier .april-soldier__rifle::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -4px;
  width: 11px;
  height: 8px;
  background: #171717;
}
.movement-visual .april-1989-scene .april-soldier .april-soldier__rifle::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -1px;
  width: 6px;
  height: 5px;
  background: #171717;
}
.movement-visual .april-1989-scene .april-soldier--1 {
  right: 300px;
  transform: scale(0.95);
}
.movement-visual .april-1989-scene .april-soldier--2 {
  right: 270px;
  transform: scale(1);
}
.movement-visual .april-1989-scene .april-soldier--3 {
  right: 240px;
  transform: scale(0.97);
}
.movement-visual .april-1989-scene .april-soldier--4 {
  right: 210px;
  transform: scale(0.93);
}
.movement-visual .april-1989-scene .april-soldier--5 {
  right: 180px;
  transform: scale(0.98);
}
.movement-visual .april-1989-scene .april-soldier--6 {
  right: 150px;
  transform: scale(0.95);
}
.movement-visual .april-1989-scene .april-soldier--7 {
  right: 120px;
  transform: scale(0.98);
}
.movement-visual .april-1989-scene .april-memorial {
  position: absolute;
  right: 5%;
  bottom: 5%;
  left: 5%;
  z-index: 7;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  color: white;
}
.movement-visual .april-1989-scene .april-memorial .april-memorial__candles {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.movement-visual .april-1989-scene .april-memorial .april-memorial__candles i {
  position: relative;
  display: block;
  width: 3px;
  height: 26px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 10px rgba(254, 221, 0, 0.28);
}
.movement-visual .april-1989-scene .april-memorial .april-memorial__candles i::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  width: 7px;
  height: 11px;
  border-radius: 60% 40% 55% 45%;
  background: var(--yellow);
  box-shadow: 0 0 9px rgba(254, 221, 0, 0.9), 0 0 18px rgba(254, 221, 0, 0.46);
  transform: translateX(-50%) rotate(5deg);
  transform-origin: center bottom;
}
.movement-visual .april-1989-scene .april-memorial .april-memorial__candles i:nth-child(2) {
  height: 19px;
}
.movement-visual .april-1989-scene .april-memorial .april-memorial__candles i:nth-child(3) {
  height: 31px;
}
.movement-visual .april-1989-scene .april-memorial .april-memorial__candles i:nth-child(4) {
  height: 22px;
}
.movement-visual .april-1989-scene .april-memorial .april-memorial__candles i:nth-child(5) {
  height: 28px;
}
.movement-visual .april-1989-scene .april-memorial > span {
  max-width: 210px;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(5px, 1cqi, 8px);
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-align: right;
}
.movement-visual .april-1989-scene .april-1989-caption {
  position: absolute;
  top: 13%;
  right: 7%;
  left: 3%;
  z-index: 7;
  display: grid;
  gap: 10px;
  color: white;
}
.movement-visual .april-1989-scene .april-1989-caption small {
  color: var(--yellow);
  font-size: clamp(6px, 1.1cqi, 9px);
  font-weight: 800;
  letter-spacing: 0.15em;
}
.movement-visual .april-1989-scene .april-1989-caption strong {
  max-width: 500px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(20px, 4.5cqi, 43px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.movement-visual .movement-referendum {
  position: absolute;
  top: 16%;
  right: 7%;
  z-index: 13;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 16px;
  width: min(34%, 320px);
  min-height: 170px;
  padding: clamp(15px, 2cqi, 23px);
  border: 1px solid var(--ink);
  background: white;
  box-shadow: 8px 8px 0 rgba(254, 221, 0, 0.9);
  transform: rotate(-1.4deg);
}
.movement-visual .movement-referendum .movement-referendum__meta {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(5px, 1.9cqi, 9px);
  letter-spacing: 0.12em;
}
.movement-visual .movement-referendum .movement-referendum__meta span {
  color: black;
}
.movement-visual .movement-referendum > p {
  align-self: center;
  margin: 0;
  color: black;
  font-size: clamp(6px, 5.05cqi, 10px);
  line-height: 1.55;
  text-align: justify;
}
.movement-visual .movement-referendum .movement-referendum__mark {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  align-self: center;
  width: clamp(124px, 14cqi, 170px);
  min-height: clamp(116px, 13cqi, 150px);
  padding: 18px 12px 16px;
  border: 2px solid var(--ink);
  background: linear-gradient(180deg, #fedd00 0%, #f5d400 100%);
  box-shadow: 10px 10px 0 rgba(23, 23, 23, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transform: rotate(-4deg);
  /* black archive tab */
}
.movement-visual .movement-referendum .movement-referendum__mark::before {
  content: "REFERENDUM";
  position: absolute;
  top: -11px;
  left: 12px;
  padding: 4px 8px 3px;
  background: #171717;
  color: #ffffff;
  font-size: clamp(4px, 1.72cqi, 10px);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}
.movement-visual .movement-referendum .movement-referendum__mark {
  /* small bottom registration line */
}
.movement-visual .movement-referendum .movement-referendum__mark::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 10px;
  left: 12px;
  height: 1px;
  background: rgba(23, 23, 23, 0.22);
}
.movement-visual .movement-referendum .movement-referendum__mark small {
  color: rgba(23, 23, 23, 0.72);
  font-size: clamp(5px, 2.82cqi, 10px);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}
.movement-visual .movement-referendum .movement-referendum__mark span {
  color: #171717;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(30px, 4.5cqi, 52px);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.movement-visual .movement-referendum .movement-referendum__mark strong {
  max-width: 100px;
  color: #171717;
  font-size: clamp(6px, 4.95cqi, 10px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}
.movement-visual .movement-referendum .movement-referendum__mark em {
  color: black;
  font-style: normal;
  font-size: clamp(5px, 0.8cqi, 7px);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.movement-visual {
  /*
    JavaScript adds is-movement-ready before the scene enters.
    These are the starting positions.
  */
}
.movement-visual.is-movement-ready .april-1989-scene {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
}
.movement-visual.is-movement-ready .april-1989-scene .april-1989-scene__header {
  opacity: 0;
  transform: translateY(-10px);
}
.movement-visual.is-movement-ready .april-1989-scene .april-night {
  opacity: 0;
}
.movement-visual.is-movement-ready .april-1989-scene .april-crowd {
  opacity: 0;
  transform: translateY(30px);
}
.movement-visual.is-movement-ready .april-1989-scene .april-security-line {
  opacity: 0;
  transform: translateX(145%);
}
.movement-visual.is-movement-ready .april-1989-scene .april-memorial {
  opacity: 0;
  transform: translateY(13px);
}
.movement-visual.is-movement-ready .april-1989-scene .april-1989-caption {
  opacity: 0;
  transform: translateY(-10px);
}
.movement-visual.is-movement-ready .movement-referendum {
  opacity: 0;
  transform: translateX(34px) rotate(2deg);
}
.movement-visual.is-movement-ready .movement-referendum .movement-referendum__mark {
  opacity: 0;
  transform: scale(1.45) rotate(-14deg);
}
.movement-visual {
  /*
    JavaScript adds is-movement-active when the visual
    reaches the viewport.
  */
}
.movement-visual.is-movement-active .april-1989-scene {
  animation: april-scene-enter 720ms 100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.movement-visual.is-movement-active .april-1989-scene .april-1989-scene__header {
  animation: april-item-enter 480ms 620ms ease forwards;
}
.movement-visual.is-movement-active .april-1989-scene .april-crowd {
  animation: april-crowd-rise 900ms 820ms cubic-bezier(0.22, 1, 0.36, 1) forwards, april-crowd-pressure 820ms 2700ms ease-in-out forwards;
}
.movement-visual.is-movement-active .april-1989-scene .april-security-line {
  animation: april-security-advance 820ms 2250ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.movement-visual.is-movement-active .april-1989-scene .april-night {
  animation: april-night-fall 900ms 2480ms ease forwards;
}
.movement-visual.is-movement-active .april-1989-scene .april-memorial {
  animation: april-memorial-enter 720ms 3500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.movement-visual.is-movement-active .april-1989-scene .april-memorial .april-memorial__candles i::before {
  animation: april-candle-flicker 900ms 4100ms ease-in-out infinite alternate;
}
.movement-visual.is-movement-active .april-1989-scene .april-1989-caption {
  animation: april-caption-enter 680ms 3720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.movement-visual.is-movement-active .movement-referendum {
  animation: movement-referendum-enter 760ms 5850ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.movement-visual.is-movement-active .movement-referendum .movement-referendum__mark {
  animation: movement-referendum-stamp 560ms 6520ms cubic-bezier(0.2, 1.35, 0.35, 1) forwards;
}

.politics-movement__events {
  grid-column: 2/4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}

.politics-movement__event {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 24px;
  min-height: 210px;
  padding: 28px 28px 34px;
  border-bottom: 1px solid var(--line);
}
.politics-movement__event:nth-child(odd) {
  border-right: 1px solid var(--line);
}
.politics-movement__event time {
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.politics-movement__event h3 {
  margin: 0 0 16px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(19px, 2vw, 31px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.politics-movement__event p {
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: 11px;
  line-height: 1.75;
  text-align: justify;
}

.politics-movement__archive-link {
  grid-column: 2/4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 20px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}
.politics-movement__archive-link span:last-child {
  font-size: 18px;
  transition: transform 220ms ease;
}
.politics-movement__archive-link:hover span:last-child, .politics-movement__archive-link:focus-visible span:last-child {
  transform: translate(4px, -4px);
}

.politics-movement .reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.politics-movement .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   DARK VERSION
========================================================= */
html[data-theme=dark] .politics-movement {
  border-top-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
  background: #171717;
  color: #ffffff;
}
html[data-theme=dark] .politics-movement__rail {
  color: #ffffff;
}
html[data-theme=dark] .politics-movement__rail strong {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme=dark] .politics-movement__rail i {
  background: linear-gradient(var(--yellow), rgba(255, 255, 255, 0.22));
}
html[data-theme=dark] .politics-movement__intro .section-label {
  color: rgba(255, 255, 255, 0.56);
}
html[data-theme=dark] .politics-movement__intro h2 {
  color: #ffffff;
}
html[data-theme=dark] .politics-movement__intro > p:last-child {
  color: rgba(255, 255, 255, 0.7);
}
html[data-theme=dark] .politics-movement__events {
  border-top-color: rgba(255, 255, 255, 0.72);
}
html[data-theme=dark] .politics-movement__event {
  border-bottom-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
html[data-theme=dark] .politics-movement__event:nth-child(odd) {
  border-right-color: rgba(255, 255, 255, 0.2);
}
html[data-theme=dark] .politics-movement__event time {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme=dark] .politics-movement__event h3 {
  color: #ffffff;
}
html[data-theme=dark] .politics-movement__event p {
  color: rgba(255, 255, 255, 0.68);
}
html[data-theme=dark] .politics-movement__archive-link {
  border-top-color: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.72);
  color: #ffffff;
}
html[data-theme=dark] .politics-movement__archive-link:hover, html[data-theme=dark] .politics-movement__archive-link:focus-visible {
  color: var(--yellow);
}
html[data-theme=dark] .politics-movement__visual {
  border-color: rgba(255, 255, 255, 0.22);
  background: #090909;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}
html[data-theme=dark] .movement-visual {
  background: #090909;
}
html[data-theme=dark] .movement-visual::before {
  background: repeating-radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.12) 0 0.5px, transparent 0.8px 5px), linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 15%, transparent 86%, rgba(255, 255, 255, 0.045));
  mix-blend-mode: screen;
}
html[data-theme=dark] .movement-visual::after {
  border-color: rgba(255, 255, 255, 0.18);
}
html[data-theme=dark] .movement-visual .movement-grid {
  opacity: 0.5;
  background-image: linear-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px);
}
html[data-theme=dark] .movement-visual .april-1989-scene {
  border-color: rgba(255, 255, 255, 0.68);
  box-shadow: 10px 10px 0 rgba(254, 221, 0, 0.84), 0 28px 70px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   ANIMATION KEYFRAMES
========================================================= */
@keyframes april-scene-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes april-item-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes april-crowd-rise {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes april-crowd-pressure {
  from {
    opacity: 1;
    transform: translateY(0) translateX(0) scaleX(1);
  }
  to {
    opacity: 0.58;
    transform: translateY(0) translateX(-4%) scaleX(0.94);
  }
}
@keyframes april-security-advance {
  from {
    opacity: 0;
    transform: translateX(145%);
  }
  35% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes april-night-fall {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.74;
  }
}
@keyframes april-memorial-enter {
  from {
    opacity: 0;
    transform: translateY(13px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes april-caption-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes april-candle-flicker {
  from {
    opacity: 0.76;
    transform: translateX(-50%) rotate(-6deg) scaleY(0.88);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) rotate(7deg) scaleY(1.12);
  }
}
@keyframes movement-referendum-enter {
  from {
    opacity: 0;
    transform: translateX(34px) rotate(2deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(-1.4deg);
  }
}
@keyframes movement-referendum-stamp {
  from {
    opacity: 0;
    transform: scale(1.45) rotate(-14deg);
  }
  62% {
    opacity: 1;
    transform: scale(0.92) rotate(-3deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(-4deg);
  }
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1180px) {
  .politics-movement {
    grid-template-columns: 90px minmax(0, 1fr);
  }
  .politics-movement__intro,
  .politics-movement__visual,
  .politics-movement__events,
  .politics-movement__archive-link {
    grid-column: 2;
  }
  .politics-movement__visual {
    min-height: 540px;
  }
}
@media (max-width: 860px) {
  .politics-movement {
    grid-template-columns: 1fr;
  }
  .politics-movement__rail {
    grid-row: auto;
    grid-column: 1;
    flex-direction: row;
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 22px;
  }
  .politics-movement__rail strong {
    writing-mode: initial;
  }
  .politics-movement__rail i {
    min-height: 1px;
    height: 1px;
    flex: 1;
    margin: 0;
    background: linear-gradient(to right, var(--yellow), transparent);
  }
  .politics-movement__intro,
  .politics-movement__visual,
  .politics-movement__events,
  .politics-movement__archive-link {
    grid-column: 1;
  }
  .politics-movement__events {
    grid-template-columns: 1fr;
  }
  .politics-movement__event:nth-child(odd) {
    border-right: 0;
  }
}
@media (max-width: 620px) {
  .politics-movement {
    padding-right: 18px;
    padding-left: 18px;
  }
  .politics-movement__visual {
    min-height: 820px;
  }
  .politics-movement__event {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .movement-visual {
    min-height: 820px;
  }
  .movement-visual .april-1989-scene {
    top: 3%;
    right: 4%;
    bottom: auto;
    left: 4%;
    height: 39%;
  }
  .movement-visual .april-1989-scene .april-1989-caption {
    top: 18%;
  }
  .movement-visual .april-1989-scene .april-1989-caption strong {
    font-size: clamp(22px, 7cqi, 38px);
  }
  .movement-visual .april-1989-scene .april-crowd {
    right: 25%;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 3px;
  }
  .movement-visual .april-1989-scene .april-crowd i {
    width: min(100%, 16px);
  }
  .movement-visual .april-1989-scene .april-security-line {
    gap: 2px;
  }
  .movement-visual .april-1989-scene .april-security-line i {
    width: 14px;
  }
  .movement-visual .movement-referendum {
    top: 45%;
    right: 4%;
    left: 4%;
    width: auto;
    min-height: 130px;
    padding: 15px;
    transform: rotate(-0.7deg);
  }
  .movement-visual .movement-referendum .movement-referendum__mark {
    width: 78px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .politics-movement .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .movement-visual.is-movement-ready .april-1989-scene {
    opacity: 1 !important;
    transform: none !important;
  }
  .movement-visual.is-movement-ready .april-1989-scene .april-1989-scene__header {
    opacity: 1 !important;
    transform: none !important;
  }
  .movement-visual.is-movement-ready .april-1989-scene .april-night {
    opacity: 0.74 !important;
  }
  .movement-visual.is-movement-ready .april-1989-scene .april-crowd {
    opacity: 0.58 !important;
    transform: translateX(-4%) scaleX(0.94) !important;
  }
  .movement-visual.is-movement-ready .april-1989-scene .april-security-line {
    opacity: 1 !important;
    transform: none !important;
  }
  .movement-visual.is-movement-ready .april-1989-scene .april-memorial,
  .movement-visual.is-movement-ready .april-1989-scene .april-1989-caption {
    opacity: 1 !important;
    transform: none !important;
  }
  .movement-visual.is-movement-ready .movement-referendum {
    opacity: 1 !important;
    transform: rotate(-1.4deg) !important;
  }
  .movement-visual.is-movement-ready .movement-referendum .movement-referendum__mark {
    opacity: 1 !important;
    transform: rotate(-4deg) !important;
  }
  .movement-visual.is-movement-ready * {
    animation: none !important;
  }
}
/* =========================================================
   POLITICS / 03 / PRESIDENCY & OVERTHROW
   Standalone component — light + dark
========================================================= */
.politics-presidency {
  position: relative;
  display: grid;
  grid-template-columns: 130px minmax(0, 0.9fr) minmax(360px, 1.1fr);
  -moz-column-gap: clamp(32px, 5vw, 90px);
       column-gap: clamp(32px, 5vw, 90px);
  row-gap: clamp(50px, 6vw, 90px);
  padding: clamp(90px, 11vw, 175px) clamp(22px, 4vw, 70px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  color: #171717;
  scroll-margin-top: 90px;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

.politics-presidency__rail {
  grid-row: 1/5;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding-top: 6px;
}
.politics-presidency__rail span {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(44px, 5vw, 78px);
  line-height: 1;
}
.politics-presidency__rail strong {
  color: var(--muted-ink);
  font-size: 8px;
  letter-spacing: 0.15em;
  writing-mode: vertical-rl;
  text-transform: uppercase;
}
.politics-presidency__rail i {
  width: 1px;
  flex: 1;
  min-height: 100px;
  margin: 10px 0 0 7px;
  background: linear-gradient(var(--yellow), rgba(23, 23, 23, 0.22));
}

.politics-presidency__intro {
  align-self: start;
}
.politics-presidency__intro h2 {
  margin: 20px 0 28px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(42px, 3.4vw, 88px);
  font-weight: 400;
  line-height: 0.91;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.politics-presidency__intro > p:last-child {
  max-width: 660px;
  margin: 0;
  color: rgba(23, 23, 23, 0.7);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.85;
  text-align: justify;
}

.politics-presidency__visual {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(23, 23, 23, 0.17);
  background: #ffffff;
}

.presidency-visual {
  isolation: isolate;
  min-height: 560px;
  overflow: hidden;
  container-type: inline-size;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.98), transparent 60%), linear-gradient(180deg, #ffffff 0%, #faf9f6 58%, #efebe4 100%);
}
.presidency-visual .presidency-scene-header {
  position: absolute;
  top: 22px;
  right: 26px;
  left: 26px;
  z-index: 22;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(23, 23, 23, 0.34);
  color: #171717;
  font-size: clamp(7px, 2.2cqi, 10px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.presidency-visual .presidency-scene-header strong {
  color: rgba(23, 23, 23, 0.56);
  font: inherit;
  text-align: right;
}
.presidency-visual .presidency-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.presidency-visual .presidency-scene .presidency-skywash {
  fill: url(#presidency-skywash-fill);
}
.presidency-visual .presidency-scene .presidency-grid {
  fill: url(#presidency-grid);
  opacity: 0.32;
}
.presidency-visual .presidency-scene .presidency-haze {
  fill: rgba(255, 255, 255, 0.86);
}
.presidency-visual .presidency-scene .parliament-building-svg {
  transform-box: fill-box;
  transform-origin: center bottom;
  filter: drop-shadow(0 14px 16px rgba(23, 23, 23, 0.12));
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-body-svg,
.presidency-visual .presidency-scene .parliament-building-svg .parliament-cornice-svg,
.presidency-visual .presidency-scene .parliament-building-svg .parliament-portico-svg rect,
.presidency-visual .presidency-scene .parliament-building-svg .parliament-portico-svg path {
  fill: url(#presidency-stone-fill);
  stroke: #171717;
  stroke-width: 2;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-shadow-band-svg {
  fill: rgba(23, 23, 23, 0.06);
  stroke: none;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-portico-svg line,
.presidency-visual .presidency-scene .parliament-building-svg .parliament-steps-svg line {
  stroke: #171717;
  stroke-width: 2;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-windows-svg rect {
  fill: rgba(23, 23, 23, 0.14);
  stroke: #171717;
  stroke-width: 1.5;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-windows-svg rect:nth-child(2), .presidency-visual .presidency-scene .parliament-building-svg .parliament-windows-svg rect:nth-child(5), .presidency-visual .presidency-scene .parliament-building-svg .parliament-windows-svg rect:nth-child(8), .presidency-visual .presidency-scene .parliament-building-svg .parliament-windows-svg rect:nth-child(10) {
  fill: rgba(23, 23, 23, 0.74);
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-assembly-svg {
  transform-box: fill-box;
  transform-origin: center;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flagpole-svg {
  stroke: #171717;
  stroke-width: 2;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-old-svg,
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-new-group-svg,
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-russia-svg,
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-eu-svg,
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-usa-svg {
  transform-box: fill-box;
}
.presidency-visual .presidency-scene .parliament-building-svg {
  /* Shared outline */
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-outline-svg {
  fill: none;
  stroke: #171717;
  stroke-width: 1.6;
}
.presidency-visual .presidency-scene .parliament-building-svg {
  /* Old Georgian flag */
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-old-svg {
  transform-origin: 301px 118px;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-old-red-svg {
  fill: #7b1f2a;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-old-black-svg {
  fill: #171717;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-old-white-svg {
  fill: #f7f7f4;
}
.presidency-visual .presidency-scene .parliament-building-svg {
  /* New three-flag group */
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-new-group-svg {
  transform-origin: center;
}
.presidency-visual .presidency-scene .parliament-building-svg {
  /* Russia */
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-russia-svg {
  transform-origin: 277px 123px;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-russia-white-svg {
  fill: #f8f8f6;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-russia-blue-svg {
  fill: #1e51a4;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-russia-red-svg {
  fill: #b52d34;
}
.presidency-visual .presidency-scene .parliament-building-svg {
  /* EU */
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-eu-svg {
  transform-origin: 301px 120px;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-eu-field-svg {
  fill: #1d4ea6;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-eu-star-svg {
  fill: var(--yellow);
}
.presidency-visual .presidency-scene .parliament-building-svg {
  /* USA */
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-usa-svg {
  transform-origin: 325px 124px;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-usa-field-svg {
  fill: #f8f8f6;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-usa-canton-svg {
  fill: #21468b;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-usa-star-svg {
  fill: #ffffff;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-flag-usa-stripe-svg {
  stroke: #c7343d;
  stroke-width: 1.5;
  stroke-linecap: square;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-impact-core-svg {
  fill: var(--yellow);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-impact-lines-svg line {
  stroke: var(--yellow);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.presidency-visual .presidency-scene .parliament-building-svg .parliament-damage-svg {
  fill: none;
  stroke: #171717;
  stroke-width: 5;
  stroke-linecap: square;
  stroke-linejoin: bevel;
  stroke-dasharray: 190;
  stroke-dashoffset: 0;
}
.presidency-visual .presidency-scene .rustaveli-street-svg .street-surface-svg {
  fill: url(#presidency-street-fill);
  stroke: #171717;
  stroke-width: 2;
}
.presidency-visual .presidency-scene .rustaveli-street-svg .street-perspective-svg {
  fill: none;
  stroke: rgba(23, 23, 23, 0.34);
  stroke-width: 2;
}
.presidency-visual .presidency-scene .rustaveli-street-svg .street-dash-svg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 7;
  stroke-dasharray: 18 15;
  stroke-linecap: butt;
}
.presidency-visual .presidency-scene {
  /* =========================================================
  EVACUATION
  ========================================================= */
}
.presidency-visual .presidency-scene .presidency-evacuation-svg {
  pointer-events: none;
}
.presidency-visual .presidency-scene .evacuee-svg .evacuee-svg__motion {
  transform-box: fill-box;
  transform-origin: center;
}
.presidency-visual .presidency-scene .evacuee-svg .evacuee-svg__motion circle {
  fill: #171717;
  stroke: none;
}
.presidency-visual .presidency-scene .evacuee-svg .evacuee-svg__motion line {
  stroke: #171717;
  stroke-width: 3;
  stroke-linecap: round;
}
.presidency-visual .presidency-scene .evacuation-bus-svg {
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 12px 9px rgba(23, 23, 23, 0.24));
}
.presidency-visual .presidency-scene .evacuation-bus-svg .evacuation-bus-svg__body,
.presidency-visual .presidency-scene .evacuation-bus-svg .evacuation-bus-svg__front {
  fill: #3a3935;
  stroke: #171717;
  stroke-width: 2.5;
}
.presidency-visual .presidency-scene .evacuation-bus-svg .evacuation-bus-svg__roof {
  fill: #4a4843;
  stroke: #171717;
  stroke-width: 2.5;
}
.presidency-visual .presidency-scene .evacuation-bus-svg .evacuation-bus-svg__windshield,
.presidency-visual .presidency-scene .evacuation-bus-svg .evacuation-bus-svg__windows rect {
  fill: #e7e4dc;
  stroke: #171717;
  stroke-width: 1.5;
}
.presidency-visual .presidency-scene .evacuation-bus-svg .evacuation-bus-svg__door {
  fill: #2b2b29;
  stroke: #171717;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: right center;
}
.presidency-visual .presidency-scene .evacuation-bus-svg .evacuation-bus-svg__beltline {
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 2;
}
.presidency-visual .presidency-scene .evacuation-bus-svg .evacuation-bus-svg__stripe {
  stroke: var(--yellow);
  stroke-width: 4;
}
.presidency-visual .presidency-scene .evacuation-bus-svg .evacuation-bus-svg__wheel {
  fill: #171717;
  stroke: #555;
  stroke-width: 3;
}
.presidency-visual .presidency-scene .evacuation-bus-svg .evacuation-bus-svg__hub {
  fill: #8b8b87;
  stroke: #171717;
  stroke-width: 2;
}
.presidency-visual .presidency-scene .evacuation-bus-svg .evacuation-bus-svg__lamp {
  fill: var(--yellow);
  stroke: #171717;
  stroke-width: 1.2;
}
.presidency-visual .presidency-scene .evacuation-car-svg {
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 8px 7px rgba(23, 23, 23, 0.2));
}
.presidency-visual .presidency-scene .evacuation-car-svg .evacuation-car-svg__body {
  fill: #242424;
  stroke: #171717;
  stroke-width: 2.5;
}
.presidency-visual .presidency-scene .evacuation-car-svg .evacuation-car-svg__glass {
  fill: #d9d8d3;
  stroke: #171717;
  stroke-width: 1.5;
}
.presidency-visual .presidency-scene .evacuation-car-svg .evacuation-car-svg__stripe {
  stroke: rgba(255, 255, 255, 0.68);
  stroke-width: 2;
}
.presidency-visual .presidency-scene .evacuation-car-svg .evacuation-car-svg__wheel {
  fill: #171717;
  stroke: #747474;
  stroke-width: 3;
}
.presidency-visual .presidency-scene .street-barricade-svg {
  --entry-x: 0px;
  --barricade-angle: 0deg;
  transform-box: fill-box;
  transform-origin: center;
}
.presidency-visual .presidency-scene .street-barricade-svg rect {
  fill: url(#barricade-stripes);
  stroke: #171717;
  stroke-width: 2;
}
.presidency-visual .presidency-scene .street-barricade-svg line {
  stroke: #171717;
  stroke-width: 4;
}
.presidency-visual .presidency-scene .street-barricade-svg--left {
  --entry-x: -180px;
  --barricade-angle: -5deg;
  transform: rotate(var(--barricade-angle));
}
.presidency-visual .presidency-scene .street-barricade-svg--right {
  --entry-x: 180px;
  --barricade-angle: 5deg;
  transform: rotate(var(--barricade-angle));
}
.presidency-visual .presidency-scene .presidency-tank-svg {
  transform-box: fill-box;
  transform-origin: center bottom;
  filter: drop-shadow(0 14px 10px rgba(23, 23, 23, 0.3));
}
.presidency-visual .presidency-scene .presidency-tank-svg rect,
.presidency-visual .presidency-scene .presidency-tank-svg circle,
.presidency-visual .presidency-scene .presidency-tank-svg path {
  stroke: #171717;
  stroke-width: 3;
}
.presidency-visual .presidency-scene .presidency-tank-svg .tank-track-svg {
  fill: #252525;
}
.presidency-visual .presidency-scene .presidency-tank-svg circle {
  fill: #4a4a4a;
  stroke: #b7b7b7;
  stroke-width: 4;
}
.presidency-visual .presidency-scene .presidency-tank-svg .tank-body-svg,
.presidency-visual .presidency-scene .presidency-tank-svg .tank-turret-svg path,
.presidency-visual .presidency-scene .presidency-tank-svg .tank-turret-svg rect {
  fill: #585652;
}
.presidency-visual .presidency-scene .presidency-tank-svg .tank-turret-svg {
  transform-box: fill-box;
  transform-origin: center;
}
.presidency-visual .presidency-scene .presidency-shell-trace-svg {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 70;
  stroke-dashoffset: 0;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(254, 221, 0, 0.85));
}
.presidency-visual .presidency-scene .battle-flash-svg {
  fill: var(--yellow);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 18px rgba(254, 221, 0, 0.96));
}
.presidency-visual .presidency-scene .battle-impact-ring-svg {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 14px rgba(254, 221, 0, 0.84));
}
.presidency-visual .presidency-scene .battle-embers-svg circle {
  fill: var(--yellow);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 10px rgba(254, 221, 0, 0.84));
}
.presidency-visual .presidency-scene .battle-smoke-svg circle {
  fill: rgba(78, 78, 78, 0.62);
  stroke: rgba(23, 23, 23, 0.24);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.28;
}
.presidency-visual .presidency-conflict-record {
  position: absolute;
  right: 3%;
  bottom: 3%;
  left: 3%;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1.6cqi, 18px);
  padding: 10px 14px;
  border: 1px solid #171717;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 7px 7px 0 rgba(254, 221, 0, 0.76);
  font-size: clamp(6px, 3.1cqi, 9px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.presidency-visual .presidency-conflict-record small {
  color: var(--yellow);
  font-size: 1.45em;
}
.presidency-visual .presidency-conflict-record strong,
.presidency-visual .presidency-conflict-record b {
  font: inherit;
}
.presidency-visual.is-presidency-ready .presidency-scene-header {
  opacity: 0;
  transform: translateY(-14px);
}
.presidency-visual.is-presidency-ready .presidency-conflict-record {
  opacity: 0;
  transform: translateY(18px);
}
.presidency-visual.is-presidency-ready .parliament-building-svg {
  opacity: 0;
  transform: translateY(34px) scaleY(0.95);
}
.presidency-visual.is-presidency-ready .parliament-building-svg .parliament-damage-svg {
  stroke-dashoffset: 190;
}
.presidency-visual.is-presidency-ready .parliament-building-svg .parliament-impact-core-svg {
  opacity: 0;
  transform: scale(0.4);
}
.presidency-visual.is-presidency-ready .parliament-building-svg .parliament-impact-lines-svg line {
  opacity: 0;
  transform: scale(0.35);
}
.presidency-visual.is-presidency-ready .street-barricade-svg {
  opacity: 0;
  transform: translateX(var(--entry-x)) rotate(var(--barricade-angle));
}
.presidency-visual.is-presidency-ready .presidency-tank-svg {
  opacity: 0;
  transform: translateX(240px);
}
.presidency-visual.is-presidency-ready .presidency-shell-trace-svg {
  opacity: 0;
  stroke-dashoffset: 70;
}
.presidency-visual.is-presidency-ready .battle-flash-svg {
  opacity: 0;
  transform: scale(0.32) rotate(0deg);
}
.presidency-visual.is-presidency-ready .battle-impact-ring-svg {
  opacity: 0;
  transform: scale(0.28);
}
.presidency-visual.is-presidency-ready .battle-smoke-svg circle {
  opacity: 0;
  transform: translateY(48px) scale(0.66);
}
.presidency-visual.is-presidency-ready .battle-embers-svg circle {
  opacity: 0;
  transform: translate(0, 0) scale(0.4);
}
.presidency-visual.is-presidency-ready .evacuation-bus-svg {
  opacity: 0;
  transform: translateX(-300px);
}
.presidency-visual.is-presidency-ready .evacuation-car-svg {
  opacity: 0;
  transform: translateX(-360px);
}
.presidency-visual.is-presidency-ready .evacuee-svg__motion {
  opacity: 0;
}
.presidency-visual.is-presidency-ready .parliament-flag-old-svg {
  opacity: 1;
}
.presidency-visual.is-presidency-ready .parliament-flag-new-group-svg {
  opacity: 0;
  transform: translateY(-8px);
}
.presidency-visual.is-presidency-active .presidency-scene-header {
  animation: presidency-header-enter 560ms 100ms ease forwards;
}
.presidency-visual.is-presidency-active .parliament-building-svg {
  animation: presidency-building-enter 920ms 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.presidency-visual.is-presidency-active .parliament-building-svg .parliament-damage-svg--one {
  animation: presidency-damage-draw 430ms 3560ms ease forwards;
}
.presidency-visual.is-presidency-active .parliament-building-svg .parliament-damage-svg--two {
  animation: presidency-damage-draw 520ms 3700ms ease forwards;
}
.presidency-visual.is-presidency-active .parliament-building-svg .parliament-damage-svg--three {
  animation: presidency-damage-draw 460ms 3880ms ease forwards;
}
.presidency-visual.is-presidency-active .parliament-building-svg .parliament-impact-core-svg {
  animation: presidency-impact-core 620ms 3430ms ease-out forwards;
}
.presidency-visual.is-presidency-active .parliament-building-svg .parliament-impact-lines-svg line {
  animation: presidency-impact-lines 520ms 3440ms ease-out forwards;
}
.presidency-visual.is-presidency-active .street-barricade-svg--left {
  animation: presidency-barricade-enter 700ms 1570ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.presidency-visual.is-presidency-active .street-barricade-svg--right {
  animation: presidency-barricade-enter 700ms 1730ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.presidency-visual.is-presidency-active .presidency-tank-svg {
  animation: presidency-tank-enter 1450ms 2210ms cubic-bezier(0.16, 0.84, 0.28, 1) forwards;
}
.presidency-visual.is-presidency-active .presidency-tank-svg .tank-turret-svg {
  animation: presidency-turret-recoil 620ms 3380ms ease-out;
}
.presidency-visual.is-presidency-active .presidency-shell-trace-svg {
  animation: presidency-shell-trace 260ms 3400ms linear forwards;
}
.presidency-visual.is-presidency-active .battle-flash-svg {
  animation: presidency-battle-flash 620ms 3430ms ease-out forwards;
}
.presidency-visual.is-presidency-active .battle-impact-ring-svg {
  animation: presidency-impact-ring 760ms 3440ms ease-out forwards;
}
.presidency-visual.is-presidency-active .battle-smoke-svg circle:nth-child(1) {
  animation: presidency-smoke-rise 3200ms 3520ms ease-out infinite;
}
.presidency-visual.is-presidency-active .battle-smoke-svg circle:nth-child(2) {
  animation: presidency-smoke-rise 3600ms 3680ms ease-out infinite;
}
.presidency-visual.is-presidency-active .battle-smoke-svg circle:nth-child(3) {
  animation: presidency-smoke-rise 3900ms 3840ms ease-out infinite;
}
.presidency-visual.is-presidency-active .battle-smoke-svg circle:nth-child(4) {
  animation: presidency-smoke-rise 4200ms 4000ms ease-out infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(1) {
  animation: presidency-ember-drift-one 1600ms 3480ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(2) {
  animation: presidency-ember-drift-two 1450ms 3520ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(3) {
  animation: presidency-ember-drift-three 1550ms 3560ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(4) {
  animation: presidency-ember-drift-two 1500ms 3600ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(5) {
  animation: presidency-ember-drift-one 1700ms 3640ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(6) {
  animation: presidency-ember-drift-three 1400ms 3680ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(7) {
  animation: presidency-ember-drift-one 1520ms 3500ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(8) {
  animation: presidency-ember-drift-two 1650ms 3540ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(9) {
  animation: presidency-ember-drift-three 1480ms 3580ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(10) {
  animation: presidency-ember-drift-one 1740ms 3620ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(11) {
  animation: presidency-ember-drift-two 1570ms 3660ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(12) {
  animation: presidency-ember-drift-three 1630ms 3700ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(13) {
  animation: presidency-ember-drift-one 1460ms 3510ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(14) {
  animation: presidency-ember-drift-three 1720ms 3535ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(15) {
  animation: presidency-ember-drift-two 1510ms 3575ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(16) {
  animation: presidency-ember-drift-one 1680ms 3610ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(17) {
  animation: presidency-ember-drift-three 1430ms 3650ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(18) {
  animation: presidency-ember-drift-two 1760ms 3690ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(19) {
  animation: presidency-ember-drift-three 1490ms 3495ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(20) {
  animation: presidency-ember-drift-one 1620ms 3530ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(21) {
  animation: presidency-ember-drift-two 1540ms 3565ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(22) {
  animation: presidency-ember-drift-three 1710ms 3605ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(23) {
  animation: presidency-ember-drift-one 1470ms 3645ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(24) {
  animation: presidency-ember-drift-two 1660ms 3685ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(25) {
  animation: presidency-ember-drift-three 1580ms 3515ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(26) {
  animation: presidency-ember-drift-one 1730ms 3555ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(27) {
  animation: presidency-ember-drift-two 1440ms 3595ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(28) {
  animation: presidency-ember-drift-three 1690ms 3635ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(29) {
  animation: presidency-ember-drift-one 1530ms 3675ms linear infinite;
}
.presidency-visual.is-presidency-active .battle-embers-svg circle:nth-child(30) {
  animation: presidency-ember-drift-two 1750ms 3715ms linear infinite;
}
.presidency-visual.is-presidency-active .presidency-conflict-record {
  animation: presidency-record-enter 720ms 10100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.presidency-visual.is-presidency-active .evacuation-bus-svg {
  animation: presidency-evacuation-bus 5000ms 5000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.presidency-visual.is-presidency-active .evacuation-bus-svg .evacuation-bus-svg__door {
  animation: presidency-bus-door 2200ms 5950ms ease-in-out forwards;
}
.presidency-visual.is-presidency-active .evacuation-car-svg {
  animation: presidency-evacuation-car 4750ms 5350ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.presidency-visual.is-presidency-active .evacuee-svg--1 .evacuee-svg__motion {
  animation: presidency-evacuee-board 1100ms 6100ms ease-in-out forwards;
}
.presidency-visual.is-presidency-active .evacuee-svg--2 .evacuee-svg__motion {
  animation: presidency-evacuee-board 1100ms 6320ms ease-in-out forwards;
}
.presidency-visual.is-presidency-active .evacuee-svg--3 .evacuee-svg__motion {
  animation: presidency-evacuee-board 1100ms 6540ms ease-in-out forwards;
}
.presidency-visual.is-presidency-active .evacuee-svg--4 .evacuee-svg__motion {
  animation: presidency-evacuee-board 1100ms 6760ms ease-in-out forwards;
}
.presidency-visual.is-presidency-active .evacuee-svg--5 .evacuee-svg__motion {
  animation: presidency-evacuee-board 1100ms 6980ms ease-in-out forwards;
}
.presidency-visual.is-presidency-active .evacuee-svg--6 .evacuee-svg__motion {
  animation: presidency-evacuee-board 1100ms 7200ms ease-in-out forwards;
}
.presidency-visual.is-presidency-active .parliament-flag-old-svg {
  animation: presidency-flag-wave 2400ms 1000ms ease-in-out infinite, presidency-old-flag-lower 520ms 4620ms ease-out forwards;
}
.presidency-visual.is-presidency-active .parliament-flag-new-group-svg {
  animation: presidency-new-flags-raise 620ms 5320ms ease-out forwards;
}
.presidency-visual.is-presidency-active .parliament-flag-russia-svg {
  animation: presidency-flag-wave-left 2400ms 6020ms ease-in-out infinite;
}
.presidency-visual.is-presidency-active .parliament-flag-eu-svg {
  animation: presidency-flag-wave-center 2300ms 6140ms ease-in-out infinite;
}
.presidency-visual.is-presidency-active .parliament-flag-usa-svg {
  animation: presidency-flag-wave-right 2500ms 6260ms ease-in-out infinite;
}

/* =========================================================
   CHRONOLOGY
========================================================= */
.politics-presidency__events {
  grid-column: 2/4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #171717;
}

.politics-presidency__event {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 24px;
  min-height: 210px;
  padding: 28px 28px 34px;
  border-bottom: 1px solid var(--line);
}
.politics-presidency__event:nth-child(odd) {
  border-right: 1px solid var(--line);
}
.politics-presidency__event time {
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.politics-presidency__event h3 {
  margin: 0 0 16px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(19px, 2vw, 31px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.politics-presidency__event p {
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: 11px;
  line-height: 1.75;
  text-align: justify;
}

.politics-presidency__archive-link {
  grid-column: 2/4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 20px 0;
  border-top: 1px solid #171717;
  border-bottom: 1px solid #171717;
  color: #171717;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}
.politics-presidency__archive-link span:last-child {
  font-size: 18px;
  transition: transform 220ms ease;
}
.politics-presidency__archive-link:hover, .politics-presidency__archive-link:focus-visible {
  color: #171717;
}
.politics-presidency__archive-link:hover span:last-child, .politics-presidency__archive-link:focus-visible span:last-child {
  transform: translate(4px, -4px);
}

/* =========================================================
   DARK VERSION
========================================================= */
html[data-theme=dark] .politics-presidency {
  border-top-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
  background: #171717;
  color: #ffffff;
}
html[data-theme=dark] .politics-presidency__rail {
  color: #ffffff;
}
html[data-theme=dark] .politics-presidency__rail strong {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme=dark] .politics-presidency__rail i {
  background: linear-gradient(var(--yellow), rgba(255, 255, 255, 0.22));
}
html[data-theme=dark] .politics-presidency__intro .section-label {
  color: rgba(255, 255, 255, 0.56);
}
html[data-theme=dark] .politics-presidency__intro h2 {
  color: #ffffff;
}
html[data-theme=dark] .politics-presidency__intro > p:last-child {
  color: rgba(255, 255, 255, 0.7);
}
html[data-theme=dark] .politics-presidency__events {
  border-top-color: rgba(255, 255, 255, 0.72);
}
html[data-theme=dark] .politics-presidency__event {
  border-bottom-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
html[data-theme=dark] .politics-presidency__event:nth-child(odd) {
  border-right-color: rgba(255, 255, 255, 0.2);
}
html[data-theme=dark] .politics-presidency__event time {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme=dark] .politics-presidency__event h3 {
  color: #ffffff;
}
html[data-theme=dark] .politics-presidency__event p {
  color: rgba(255, 255, 255, 0.68);
}
html[data-theme=dark] .politics-presidency__archive-link {
  border-top-color: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.72);
  color: #ffffff;
}
html[data-theme=dark] .politics-presidency__archive-link:hover, html[data-theme=dark] .politics-presidency__archive-link:focus-visible {
  color: var(--yellow);
}
html[data-theme=dark] .politics-presidency__visual {
  border-color: rgba(255, 255, 255, 0.22);
  background: #0b0b0b;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}
html[data-theme=dark] {
  /*
    The illustrated siege scene retains its historical/material palette.
    The surrounding register, border and museum workspace become dark.
  */
}
html[data-theme=dark] .presidency-visual {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1180px) {
  .politics-presidency {
    grid-template-columns: 90px minmax(0, 1fr);
  }
  .politics-presidency__intro,
  .politics-presidency__visual {
    grid-column: 2;
  }
  .politics-presidency__events,
  .politics-presidency__archive-link {
    grid-column: 2;
  }
}
@media (max-width: 760px) {
  .politics-presidency {
    grid-template-columns: 1fr;
    row-gap: 34px;
    padding: 76px 18px;
  }
  .politics-presidency__rail {
    grid-row: auto;
    grid-column: 1;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--line);
  }
  .politics-presidency__rail strong {
    writing-mode: initial;
  }
  .politics-presidency__rail i {
    width: auto;
    height: 1px;
    min-height: 0;
    flex: 1;
    margin: 0;
    background: linear-gradient(to right, var(--yellow), transparent);
  }
  .politics-presidency__intro,
  .politics-presidency__visual,
  .politics-presidency__events,
  .politics-presidency__archive-link {
    grid-column: 1;
  }
  .politics-presidency__events {
    grid-template-columns: 1fr;
  }
  .politics-presidency__event {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .politics-presidency__event:nth-child(odd) {
    border-right: 0;
  }
  .politics-presidency__visual,
  .presidency-visual {
    min-height: clamp(330px, 78vw, 440px);
  }
  .presidency-visual .presidency-scene-header {
    top: 14px;
    right: 14px;
    left: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding-bottom: 7px;
    font-size: 6px;
  }
  .presidency-visual .presidency-scene-header strong {
    text-align: left;
  }
  .presidency-visual .presidency-conflict-record {
    right: 14px;
    bottom: 14px;
    left: 14px;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 8px 9px;
    font-size: 6px;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .politics-presidency *,
  .politics-presidency *::before,
  .politics-presidency *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
}
@keyframes presidency-header-enter {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes presidency-building-enter {
  from {
    opacity: 0;
    transform: translateY(34px) scaleY(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
@keyframes presidency-barricade-enter {
  from {
    opacity: 0;
    transform: translateX(var(--entry-x)) rotate(var(--barricade-angle));
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(var(--barricade-angle));
  }
}
@keyframes presidency-tank-enter {
  0% {
    opacity: 0;
    transform: translateX(145%);
  }
  16% {
    opacity: 1;
  }
  74% {
    transform: translateX(-4%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes presidency-turret-recoil {
  0%, 100% {
    transform: translateX(0);
  }
  36% {
    transform: translateX(10px);
  }
  68% {
    transform: translateX(-3px);
  }
}
@keyframes presidency-shell-trace {
  0% {
    opacity: 0;
    stroke-dashoffset: 70;
  }
  18% {
    opacity: 1;
  }
  72% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes presidency-battle-flash {
  0%, 100% {
    opacity: 0;
    transform: scale(0.35) rotate(0deg);
  }
  22% {
    opacity: 1;
    transform: scale(1.18) rotate(16deg);
  }
  48% {
    opacity: 0.72;
    transform: scale(0.82) rotate(-12deg);
  }
}
@keyframes presidency-impact-ring {
  0% {
    opacity: 0;
    transform: scale(0.28);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2.45);
  }
}
@keyframes presidency-impact-core {
  0% {
    opacity: 0;
    transform: scale(0.36);
  }
  28% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(0.74);
  }
}
@keyframes presidency-impact-lines {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes presidency-damage-draw {
  from {
    opacity: 0;
    stroke-dashoffset: 190;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}
@keyframes presidency-smoke-rise {
  0% {
    opacity: 0;
    transform: translateY(44px) translateX(0) scale(0.64);
  }
  18% {
    opacity: 0.44;
  }
  72% {
    opacity: 0.22;
  }
  100% {
    opacity: 0;
    transform: translateY(-94px) translateX(18px) scale(1.44);
  }
}
@keyframes presidency-ember-drift-one {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(28px, -34px) scale(1.1);
  }
}
@keyframes presidency-ember-drift-two {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.45);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-20px, -28px) scale(0.95);
  }
}
@keyframes presidency-ember-drift-three {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(12px, -42px) scale(1.15);
  }
}
@keyframes presidency-record-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes presidency-evacuation-bus {
  0% {
    opacity: 0;
    transform: translateX(-300px);
  }
  8% {
    opacity: 1;
  }
  23% {
    opacity: 1;
    transform: translateX(0);
  }
  68% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-360px);
  }
}
@keyframes presidency-evacuation-car {
  0% {
    opacity: 0;
    transform: translateX(-360px);
  }
  10% {
    opacity: 1;
  }
  27% {
    opacity: 1;
    transform: translateX(0);
  }
  69% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-390px);
  }
}
@keyframes presidency-bus-door {
  0%, 10% {
    transform: scaleX(1);
  }
  22% {
    transform: scaleX(0.16);
  }
  /*
   * Keep the door open while people board.
   */
  76% {
    transform: scaleX(0.16);
  }
  90%, 100% {
    transform: scaleX(1);
  }
}
@keyframes presidency-evacuee-board {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.9);
  }
  12% {
    opacity: 1;
  }
  48% {
    opacity: 1;
    transform: translate(-55px, 25px) scale(1);
  }
  78% {
    opacity: 1;
    transform: translate(-94px, 48px) scale(0.94);
  }
  92% {
    opacity: 1;
    transform: translate(-112px, 53px) scale(0.78);
  }
  100% {
    opacity: 0;
    transform: translate(-121px, 53px) scale(0.65);
  }
}
@keyframes presidency-flag-wave {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(-1.5deg) translateY(-0.5px);
  }
  50% {
    transform: rotate(1.2deg) translateY(0.4px);
  }
  75% {
    transform: rotate(-0.8deg) translateY(-0.2px);
  }
}
@keyframes presidency-old-flag-lower {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
}
@keyframes presidency-new-flags-raise {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes presidency-flag-wave-left {
  0%, 100% {
    transform: rotate(-0.8deg);
  }
  50% {
    transform: rotate(1.5deg);
  }
}
@keyframes presidency-flag-wave-center {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-1.3deg);
  }
}
@keyframes presidency-flag-wave-right {
  0%, 100% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(-1.4deg);
  }
}
/* =========================================================
   POLITICS — CORE PAGE STYLES

   Chapter-specific styles now live in:

   /Politics/1-dissident/_dissident.scss
   /Politics/2-national-movement/_national-movement.scss
   /Politics/3-presidency/_presidency.scss

   This file controls only:
   1. Politics page shell
   2. Shared chapter dividers
   3. Light / dark divider treatment
========================================================= */
/* =========================================================
   PAGE SHELL
========================================================= */
.politics-page {
  --politics-page-bg: #ffffff;
  --politics-page-ink: #171717;
  --politics-page-grid: rgba(23, 23, 23, 0.01);
  min-height: 100vh;
  background: linear-gradient(to right, transparent calc(50% - 0.5px), var(--politics-page-grid) 50%, transparent calc(50% + 0.5px)), var(--politics-page-bg);
  color: var(--politics-page-ink);
  transition: background-color 240ms ease, color 240ms ease;
}

/* =========================================================
   CHAPTER DIVIDERS

   Same structural language as Family:
   previous section / moving signal / next section
========================================================= */
.politics-chapter-divider {
  --politics-divider-bg: #ffffff;
  --politics-divider-ink: #171717;
  --politics-divider-muted: rgba(23, 23, 23, 0.42);
  --politics-divider-line: rgba(23, 23, 23, 0.22);
  --politics-divider-tick: rgba(23, 23, 23, 0.34);
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(60px, 1fr) max-content;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  width: 100%;
  min-height: 52px;
  padding: 0 clamp(24px, 5vw, 82px);
  overflow: hidden;
  background: var(--politics-divider-bg);
  color: var(--politics-divider-ink);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color 220ms ease, color 220ms ease;
}

/* =========================================================
   LEFT / PREVIOUS LABEL
========================================================= */
.politics-chapter-divider__from {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--politics-divider-muted);
  white-space: nowrap;
  transition: color 220ms ease;
}

/* =========================================================
   RIGHT / NEXT LABEL
========================================================= */
.politics-chapter-divider__to {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--politics-divider-ink);
  font-size: inherit;
  font-weight: 700;
  white-space: nowrap;
  transition: color 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* yellow registration point */
.politics-chapter-divider__to::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  background: #fedd00;
  vertical-align: 1px;
}

/* =========================================================
   CENTRAL SIGNAL LINE
========================================================= */
.politics-chapter-divider__line {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: var(--politics-divider-line);
}

/* moving yellow signal */
.politics-chapter-divider__line i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: clamp(38px, 5vw, 76px);
  height: 1px;
  background: #fedd00;
  animation: politics-divider-signal 5.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* =========================================================
   EDGE REGISTRATION TICKS
========================================================= */
.politics-chapter-divider::before,
.politics-chapter-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 9px;
  background: var(--politics-divider-tick);
  transform: translateY(-50%);
}

.politics-chapter-divider::before {
  left: clamp(12px, 2vw, 32px);
}

.politics-chapter-divider::after {
  right: clamp(12px, 2vw, 32px);
}

/* =========================================================
   DARK VERSION
========================================================= */
html[data-theme=dark] .politics-page {
  --politics-page-bg: #171717;
  --politics-page-ink: #ffffff;
  --politics-page-grid: rgba(255, 255, 255, 0.018);
}
html[data-theme=dark] .politics-chapter-divider {
  --politics-divider-bg: #171717;
  --politics-divider-ink: #ffffff;
  --politics-divider-muted: rgba(255, 255, 255, 0.46);
  --politics-divider-line: rgba(255, 255, 255, 0.22);
  --politics-divider-tick: rgba(255, 255, 255, 0.38);
}

/* =========================================================
   HOVER
========================================================= */
@media (hover: hover) {
  .politics-chapter-divider:hover .politics-chapter-divider__to {
    transform: translateX(3px);
  }
  .politics-chapter-divider:hover .politics-chapter-divider__line i {
    animation-duration: 2.8s;
  }
}
/* =========================================================
   DIVIDER SIGNAL ANIMATION
========================================================= */
@keyframes politics-divider-signal {
  0% {
    left: 0;
    transform: translateX(-110%);
  }
  42% {
    left: 100%;
    transform: translateX(0);
  }
  58% {
    left: 100%;
    transform: translateX(0);
  }
  100% {
    left: 0;
    transform: translateX(-110%);
  }
}
/* =========================================================
   RESPONSIVE — TABLET
========================================================= */
@media (max-width: 820px) {
  .politics-chapter-divider {
    min-height: 48px;
    padding: 0 24px;
    gap: 14px;
    font-size: 6px;
  }
  .politics-chapter-divider::before,
  .politics-chapter-divider::after {
    display: none;
  }
  .politics-chapter-divider__to::before {
    width: 4px;
    height: 4px;
    margin-right: 7px;
  }
}
/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */
@media (max-width: 560px) {
  .politics-chapter-divider {
    grid-template-columns: max-content minmax(24px, 1fr) max-content;
    min-height: 44px;
    padding: 0 16px;
    gap: 9px;
    font-size: 5.5px;
    letter-spacing: 0.11em;
  }
  .politics-chapter-divider__from {
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .politics-chapter-divider__to {
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .politics-chapter-divider__to::before {
    display: none;
  }
  .politics-chapter-divider__line i {
    width: 30px;
  }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .politics-chapter-divider__line i {
    left: 50%;
    animation: none;
    transform: translateX(-50%);
  }
  .politics-chapter-divider__to,
  .politics-chapter-divider__from,
  .politics-page {
    transition: none;
  }
}
.works-page {
  --works-progress: 0;
  --works-angle: 0deg;
  --works-angle-small: 0deg;
  min-height: 100vh;
  background: linear-gradient(to right, transparent calc(50% - 0.5px), rgba(23, 23, 23, 0.05) 50%, transparent calc(50% + 0.5px)), var(--paper);
}

.works-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  min-height: calc(100vh - var(--header-height));
  border-bottom: 1px solid var(--line);
}

.works-hero__copy {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(68px, 8vw, 132px) clamp(24px, 5vw, 84px);
  border-right: 1px solid var(--line);
}
.works-hero__copy::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 10%;
  width: 1px;
  height: 34%;
  background: var(--yellow);
}
.works-hero__copy h1 {
  max-width: 790px;
  margin: 24px 0 30px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(50px, 4.2vw, 116px);
  font-weight: 400;
  line-height: 0.87;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.works-hero__description {
  max-width: 620px;
  margin: 0;
  color: rgba(23, 23, 23, 0.72);
  font-size: clamp(12px, 1.15vw, 17px);
  line-height: 1.85;
  text-align: justify;
}

.works-hero__visual {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background: radial-gradient(circle at 54% 48%, rgba(254, 221, 0, 0.2), transparent 18%), linear-gradient(140deg, rgba(23, 23, 23, 0.012), rgba(23, 23, 23, 0.075));
}

.works-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(23, 23, 23, 0.085) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.085) 1px, transparent 1px);
  background-size: clamp(36px, 4vw, 72px) clamp(36px, 4vw, 72px);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 82%);
          mask-image: radial-gradient(circle at center, black, transparent 82%);
}

.works-orbit {
  position: absolute;
  top: 50%;
  left: 55%;
  border: 1px solid rgba(23, 23, 23, 0.3);
  border-radius: 50%;
}
.works-orbit::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
}

.works-orbit--outer {
  width: min(52vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(calc(-14deg + var(--works-angle)));
  animation: works-orbit 26s linear infinite;
}
.works-orbit--outer::before {
  top: 16%;
  left: 8%;
}

.works-orbit--inner {
  width: min(33vw, 490px);
  aspect-ratio: 1;
  border-color: rgba(23, 23, 23, 0.18);
  transform: translate(-50%, -50%) rotate(calc(34deg - var(--works-angle-small)));
  animation: works-orbit-reverse 18s linear infinite;
}
.works-orbit--inner::before {
  right: 7%;
  bottom: 18%;
  width: 14px;
  height: 14px;
  background: var(--yellow);
  box-shadow: 0 0 25px rgba(254, 221, 0, 0.72);
}

.book-object {
  position: absolute;
  top: 50%;
  left: 54%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  width: clamp(220px, 23vw, 380px);
  min-height: clamp(300px, 32vw, 490px);
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 26px 80px rgba(23, 23, 23, 0.12);
}
.book-object small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.book-object strong {
  margin-top: 26px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(28px, 3.2vw, 55px);
  font-weight: 400;
  line-height: 0.93;
  letter-spacing: -0.05em;
}
.book-object i {
  display: block;
  height: 1px;
  margin-top: 20px;
  background: rgba(23, 23, 23, 0.24);
}
.book-object b {
  margin-top: auto;
  padding-top: 36px;
  color: var(--muted-ink);
  font-size: 9px;
  letter-spacing: 0.16em;
}

.book-object--rear {
  transform: translate(-65%, -53%) rotate(-10deg);
  animation: book-drift-rear 8s ease-in-out infinite alternate;
}
.book-object--rear strong {
  color: rgba(23, 23, 23, 0.62);
}

.book-object--front {
  transform: translate(-37%, -46%) rotate(5deg);
  animation: book-drift-front 7s ease-in-out infinite alternate;
}
.book-object--front::after {
  content: "";
  position: absolute;
  top: 0;
  right: 24px;
  width: 8px;
  height: 42%;
  background: var(--yellow);
}

.hero-term {
  position: absolute;
  z-index: 6;
  padding: 11px 13px;
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--yellow);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.hero-term--one {
  top: 16%;
  left: 8%;
}

.hero-term--two {
  right: 8%;
  bottom: 16%;
}

.hero-term--three {
  top: 20%;
  right: 6%;
}

.hero-term--four {
  bottom: 14%;
  left: 11%;
}

.works-cross {
  position: absolute;
  z-index: 2;
  background: var(--yellow);
  opacity: 0.75;
}

.works-cross--vertical {
  top: 18%;
  right: 23%;
  width: 9px;
  height: 58%;
}

.works-cross--horizontal {
  top: 45%;
  right: 12%;
  width: 34%;
  height: 9px;
}

.works-hero__index {
  position: absolute;
  right: clamp(20px, 3vw, 52px);
  bottom: 20px;
  z-index: 7;
  display: flex;
  gap: 20px;
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.works-hero__index span:first-child {
  color: var(--ink);
}

.works-introduction,
.works-catalogue,
.reading-paths {
  padding: clamp(82px, 10vw, 154px) clamp(20px, 4vw, 70px);
  border-bottom: 1px solid var(--line);
}

.works-introduction__heading,
.works-catalogue__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(270px, 0.6fr);
  gap: clamp(40px, 8vw, 140px);
  align-items: end;
  margin-bottom: clamp(56px, 7vw, 102px);
}
.works-introduction__heading h2,
.works-catalogue__heading h2 {
  max-width: 980px;
  margin: 20px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(38px, 5vw, 84px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.works-introduction__heading > p,
.works-catalogue__heading > p {
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: 12px;
  line-height: 1.85;
  text-align: justify;
}

.discipline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.discipline-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: clamp(28px, 3vw, 48px);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  transition: background 220ms ease, transform 220ms ease;
}
.discipline-card > span {
  color: var(--muted-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.discipline-card h3 {
  max-width: 320px;
  margin: 54px 0 22px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(25px, 2.4vw, 42px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.discipline-card p {
  max-width: 420px;
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: 11px;
  line-height: 1.8;
  text-align: justify;
}
.discipline-card b {
  margin-top: auto;
  padding-top: 34px;
  color: var(--muted-ink);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.discipline-card::after {
  content: "+";
  position: absolute;
  top: 25px;
  right: 28px;
  color: var(--yellow);
  font-family: "Archivo Black", sans-serif;
  font-size: 34px;
}
.discipline-card:hover {
  background: rgba(254, 221, 0, 0.09);
  transform: translateY(-4px);
}

.featured-work {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: 760px;
  border-bottom: 1px solid var(--line);
}

.featured-work__visual {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: linear-gradient(to right, rgba(23, 23, 23, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.07) 1px, transparent 1px), rgba(23, 23, 23, 0.025);
  background-size: 54px 54px;
}

.featured-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.featured-ring--one {
  width: min(47vw, 620px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(18deg);
  animation: featured-spin 24s linear infinite;
}
.featured-ring--one::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 22%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--yellow);
}

.featured-ring--two {
  width: min(30vw, 390px);
  aspect-ratio: 1;
  border-color: rgba(23, 23, 23, 0.28);
  transform: translate(-50%, -50%) rotate(-28deg);
}

.featured-symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(170px, 18vw, 270px);
  aspect-ratio: 1;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 16px 16px 0 var(--yellow), 0 28px 80px rgba(23, 23, 23, 0.12);
  transform: translate(-50%, -50%);
}
.featured-symbol span {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(70px, 9vw, 142px);
  line-height: 1;
}
.featured-symbol small {
  position: absolute;
  bottom: 22%;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.featured-axis {
  position: absolute;
  background: rgba(23, 23, 23, 0.36);
}

.featured-axis--vertical {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.featured-axis--horizontal {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
}

.featured-work__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(60px, 7vw, 112px);
}
.featured-work__content h2 {
  max-width: 720px;
  margin: 24px 0 30px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(39px, 4.5vw, 76px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.featured-work__content h2 em {
  font-style: normal;
  color: rgba(23, 23, 23, 0.56);
}
.featured-work__content > p:not(.section-label) {
  max-width: 650px;
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: 12px;
  line-height: 1.9;
}

.featured-work__meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 62px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.works-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(30px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(42px, 5vw, 72px);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ink);
}

.works-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.works-filter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: rgba(23, 23, 23, 0.64);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.works-filter span {
  color: var(--muted-ink);
}
.works-filter:hover, .works-filter:focus-visible, .works-filter.active {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}
.works-filter.active span {
  color: var(--yellow);
}

.works-search {
  display: grid;
  gap: 10px;
}
.works-search > span {
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.works-search input {
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: 11px;
}
.works-search input::-moz-placeholder {
  color: rgba(23, 23, 23, 0.42);
}
.works-search input::placeholder {
  color: rgba(23, 23, 23, 0.42);
}
.works-search input:focus {
  border-bottom-color: var(--yellow);
}

.works-grid-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.work-card {
  min-width: 0;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.work-card.is-hidden {
  display: none;
}

.work-card__link {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: inherit;
  text-decoration: none;
  background: var(--paper);
  transition: background 220ms ease, transform 220ms ease;
}
.work-card__link:hover, .work-card__link:focus-visible {
  background: rgba(254, 221, 0, 0.08);
  transform: translateY(-4px);
}

.work-card__visual {
  position: relative;
  min-height: clamp(245px, 24vw, 360px);
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
  background: rgba(23, 23, 23, 0.035);
}

.work-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(25px, 2.5vw, 40px);
}
.work-card__content h3 {
  margin: 42px 0 18px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(23px, 2.2vw, 38px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.work-card__content h3 em {
  font-style: normal;
}
.work-card__content p {
  margin: 0;
  color: rgba(23, 23, 23, 0.66);
  font-size: 11px;
  line-height: 1.8;
}

.work-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.work-card__action {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: 36px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.work-card__action b {
  color: var(--yellow);
  font-size: 15px;
}

.work-card__visual--american {
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, transparent 0 14%, rgba(23, 23, 23, 0.08) 14% 14.5%, transparent 14.5%), var(--paper);
}
.work-card__visual--american strong {
  position: relative;
  z-index: 2;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(34px, 4vw, 65px);
  line-height: 0.88;
  letter-spacing: -0.06em;
}

.american-star {
  position: absolute;
  top: 15%;
  right: 15%;
  color: var(--yellow);
  font-size: clamp(44px, 5vw, 80px);
}

.american-line {
  position: absolute;
  left: 14%;
  height: 1px;
  background: var(--ink);
}

.american-line--one {
  top: 28%;
  width: 72%;
}

.american-line--two {
  bottom: 24%;
  width: 52%;
}

.work-card__visual--century {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12%;
  background: var(--ink);
  color: white;
}
.work-card__visual--century > span {
  color: var(--yellow);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(80px, 10vw, 150px);
  line-height: 0.72;
}
.work-card__visual--century strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(24px, 3vw, 47px);
  line-height: 0.9;
}
.work-card__visual--century i {
  height: 1px;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.28);
}
.work-card__visual--century b {
  margin-top: 24px;
  font-size: 8px;
  letter-spacing: 0.16em;
}

.work-card__visual--panther {
  background: radial-gradient(circle at 18% 25%, transparent 0 13px, var(--ink) 14px 18px, transparent 19px), radial-gradient(circle at 62% 18%, transparent 0 20px, var(--ink) 21px 25px, transparent 26px), radial-gradient(circle at 78% 72%, transparent 0 16px, var(--ink) 17px 21px, transparent 22px), radial-gradient(circle at 32% 76%, transparent 0 24px, var(--ink) 25px 29px, transparent 30px), var(--yellow);
}
.work-card__visual--panther strong {
  position: absolute;
  right: 8%;
  bottom: 8%;
  padding: 10px 12px;
  background: var(--paper);
  font-size: 9px;
  letter-spacing: 0.16em;
}

.panther-spot {
  position: absolute;
  border: 1px solid rgba(23, 23, 23, 0.65);
  border-radius: 50%;
}

.panther-spot--one {
  top: 16%;
  left: 12%;
  width: 90px;
  height: 55px;
  transform: rotate(24deg);
}

.panther-spot--two {
  top: 46%;
  left: 43%;
  width: 120px;
  height: 70px;
  transform: rotate(-18deg);
}

.panther-spot--three {
  top: 11%;
  right: 8%;
  width: 70px;
  height: 100px;
  transform: rotate(15deg);
}

.panther-spot--four {
  bottom: 6%;
  left: 9%;
  width: 85px;
  height: 85px;
}

.work-card__visual--fables {
  background: linear-gradient(to bottom, #f4f2ec 0 66%, var(--ink) 66% 67%, var(--paper) 67%);
}
.work-card__visual--fables strong {
  position: absolute;
  right: 8%;
  bottom: 8%;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(38px, 5vw, 74px);
  letter-spacing: -0.05em;
}

.fable-moon {
  position: absolute;
  top: 16%;
  left: 18%;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 40px rgba(254, 221, 0, 0.38);
}

.fable-bird {
  position: absolute;
  top: 37%;
  left: 45%;
  width: 74px;
  height: 26px;
  border-top: 3px solid var(--ink);
  border-radius: 50%;
  transform: rotate(-9deg);
}
.fable-bird::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 35px;
  width: 65px;
  height: 23px;
  border-top: 3px solid var(--ink);
  border-radius: 50%;
  transform: rotate(18deg);
}

.fable-ground {
  position: absolute;
  right: 0;
  bottom: 32%;
  left: 0;
  height: 1px;
  background: var(--ink);
}

.work-card__visual--mission {
  background: radial-gradient(circle at center, rgba(254, 221, 0, 0.8), transparent 21%), var(--ink);
}
.work-card__visual--mission strong {
  position: absolute;
  right: 7%;
  bottom: 7%;
  color: white;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(37px, 5vw, 72px);
  letter-spacing: -0.05em;
}

.mission-light {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  border: 1px solid var(--yellow);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(254, 221, 0, 0.08), 0 0 80px rgba(254, 221, 0, 0.35);
  transform: translate(-50%, -50%);
}

.mission-cross {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--yellow);
  transform: translate(-50%, -50%);
}

.mission-cross--vertical {
  width: 8px;
  height: 56%;
}

.mission-cross--horizontal {
  width: 42%;
  height: 8px;
}

.work-card__visual--tropology {
  background: var(--paper);
}
.work-card__visual--tropology strong {
  position: absolute;
  right: 8%;
  bottom: 8%;
  font-size: 9px;
  letter-spacing: 0.16em;
}

.tropology-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.tropology-ring--one {
  width: 66%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.tropology-ring--two {
  width: 43%;
  aspect-ratio: 1;
  border-color: var(--yellow);
  transform: translate(-50%, -50%) rotate(28deg);
}

.tropology-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(80px, 10vw, 150px);
  transform: translate(-50%, -50%);
}

.work-card__visual--essays {
  background: linear-gradient(145deg, rgba(23, 23, 23, 0.03), rgba(23, 23, 23, 0.1));
}
.work-card__visual--essays strong {
  position: absolute;
  right: 8%;
  bottom: 8%;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(38px, 5vw, 72px);
  letter-spacing: -0.05em;
}

.essay-sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  height: 62%;
  border: 1px solid var(--ink);
  background: repeating-linear-gradient(to bottom, transparent 0 20px, rgba(23, 23, 23, 0.14) 20px 21px), var(--paper);
}

.essay-sheet--one {
  transform: translate(-72%, -58%) rotate(-10deg);
}

.essay-sheet--two {
  transform: translate(-42%, -52%) rotate(3deg);
}

.essay-sheet--three {
  border-color: var(--yellow);
  transform: translate(-18%, -45%) rotate(12deg);
}

.works-no-results {
  margin: 38px 0 0;
  padding: 25px;
  border: 1px solid var(--ink);
  background: rgba(254, 221, 0, 0.08);
  font-size: 11px;
}

.reading-paths__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 58px;
}
.reading-paths__heading h2 {
  margin: 20px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(42px, 5vw, 84px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.reading-paths__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.reading-path {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: clamp(30px, 3vw, 52px);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  color: inherit;
  text-decoration: none;
  transition: background 220ms ease, color 220ms ease;
}
.reading-path > span {
  color: var(--muted-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.reading-path h3 {
  max-width: 350px;
  margin: 58px 0 22px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(28px, 2.8vw, 48px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.reading-path p {
  max-width: 410px;
  margin: 0;
  color: rgba(23, 23, 23, 0.66);
  font-size: 11px;
  line-height: 1.8;
}
.reading-path b {
  margin-top: auto;
  padding-top: 36px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.reading-path:hover, .reading-path:focus-visible {
  background: var(--ink);
  color: white;
}
.reading-path:hover > span,
.reading-path:hover p, .reading-path:focus-visible > span,
.reading-path:focus-visible p {
  color: rgba(255, 255, 255, 0.65);
}
.reading-path:hover b, .reading-path:focus-visible b {
  color: var(--yellow);
}

.works-archive {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 0.25fr) minmax(0, 0.9fr) minmax(300px, 0.85fr);
  gap: clamp(35px, 7vw, 120px);
  align-items: center;
  min-height: 620px;
  padding: clamp(80px, 9vw, 145px) clamp(20px, 4vw, 70px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  color: white;
}
.works-archive::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 62%;
  width: 1px;
  background: var(--yellow);
}

.works-archive__index {
  color: var(--yellow);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(72px, 10vw, 165px);
  line-height: 0.8;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.works-archive__copy {
  position: relative;
  z-index: 2;
}
.works-archive__copy .section-label {
  color: rgba(255, 255, 255, 0.48);
}
.works-archive__copy h2 {
  max-width: 720px;
  margin: 24px 0 30px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(42px, 5vw, 86px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.works-archive__copy p:last-child {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  line-height: 1.9;
}

.works-archive__links {
  position: relative;
  z-index: 2;
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.works-archive__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 23px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
}
.works-archive__links a b {
  color: var(--yellow);
  font-size: 17px;
  transition: transform 180ms ease;
}
.works-archive__links a:hover b, .works-archive__links a:focus-visible b {
  transform: translate(4px, -4px);
}

@keyframes works-orbit {
  to {
    rotate: 360deg;
  }
}
@keyframes works-orbit-reverse {
  to {
    rotate: -360deg;
  }
}
@keyframes book-drift-rear {
  to {
    transform: translate(-66%, -56%) rotate(-7deg);
  }
}
@keyframes book-drift-front {
  to {
    transform: translate(-35%, -49%) rotate(3deg);
  }
}
@keyframes featured-spin {
  to {
    rotate: 360deg;
  }
}
@media (max-width: 1180px) {
  .works-hero__copy h1 {
    font-size: clamp(48px, 6.6vw, 86px);
  }
  .discipline-grid,
  .works-grid-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .works-archive {
    grid-template-columns: 100px minmax(0, 1fr);
  }
  .works-archive::after {
    display: none;
  }
  .works-archive__links {
    grid-column: 2;
  }
}
@media (max-width: 860px) {
  .works-hero {
    grid-template-columns: 1fr;
  }
  .works-hero__copy {
    min-height: 640px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .works-hero__visual {
    min-height: 620px;
  }
  .works-orbit--outer {
    width: min(92vw, 680px);
  }
  .works-orbit--inner {
    width: min(62vw, 450px);
  }
  .works-introduction__heading,
  .works-catalogue__heading {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .featured-work {
    grid-template-columns: 1fr;
  }
  .featured-work__visual {
    min-height: 620px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .featured-ring--one {
    width: min(82vw, 590px);
  }
  .featured-ring--two {
    width: min(56vw, 390px);
  }
  .featured-work__content {
    min-height: 650px;
  }
  .works-controls {
    grid-template-columns: 1fr;
  }
  .reading-paths__grid {
    grid-template-columns: 1fr;
  }
  .reading-path {
    min-height: 330px;
  }
  .works-archive {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .works-archive__index {
    writing-mode: horizontal-tb;
    transform: none;
  }
  .works-archive__links {
    grid-column: auto;
  }
}
@media (max-width: 620px) {
  .works-hero__copy {
    min-height: 590px;
    padding: 72px 20px;
  }
  .works-hero__copy h1 {
    font-size: clamp(47px, 14vw, 72px);
  }
  .works-hero__visual {
    min-height: 550px;
  }
  .book-object {
    width: 215px;
    min-height: 300px;
    padding: 22px;
  }
  .hero-term--three,
  .hero-term--four {
    display: none;
  }
  .works-hero__index {
    right: 16px;
    left: 16px;
    justify-content: space-between;
  }
  .works-introduction,
  .works-catalogue,
  .reading-paths,
  .works-archive {
    padding-right: 16px;
    padding-left: 16px;
  }
  .discipline-grid,
  .works-grid-list {
    grid-template-columns: 1fr;
  }
  .discipline-card {
    min-height: 330px;
  }
  .featured-work__visual {
    min-height: 500px;
  }
  .featured-symbol {
    width: 165px;
  }
  .featured-work__content {
    min-height: auto;
    padding: 72px 20px;
  }
  .featured-work__meta {
    margin-bottom: 44px;
  }
  .works-filter-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .works-filter {
    justify-content: space-between;
  }
  .work-card__visual {
    min-height: 300px;
  }
  .reading-paths__heading {
    display: block;
  }
  .works-archive__index {
    font-size: 72px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .works-orbit,
  .book-object,
  .featured-ring {
    animation: none !important;
  }
}
/* =========================================================
   CHILDHOOD SECTION
   ========================================================= */
.family-childhood {
  position: relative;
  display: grid;
  grid-template-columns: minmax(90px, 0.12fr) minmax(0, 0.88fr);
  padding: clamp(82px, 10vw, 160px) clamp(20px, 5vw, 84px);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  background: #ffffff;
  color: #171717;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

.family-childhood__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding-top: 6px;
}
.family-childhood__rail span {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(44px, 5vw, 78px);
  line-height: 1;
}
.family-childhood__rail strong {
  font-size: 8px;
  letter-spacing: 0.15em;
  writing-mode: vertical-rl;
  text-transform: uppercase;
}
.family-childhood__rail i {
  width: 1px;
  flex: 1;
  min-height: 100px;
  margin: 10px 0 0 7px;
  background: linear-gradient(var(--yellow), rgba(23, 23, 23, 0.22));
}

.family-childhood__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: clamp(38px, 8vw, 132px);
  align-items: end;
}
.family-childhood__intro .section-label {
  grid-column: 1/-1;
}
.family-childhood__intro h2 {
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(40px, 5.4vw, 92px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.058em;
  text-transform: uppercase;
}
.family-childhood__intro > p:last-child {
  margin: 0;
  color: rgba(23, 23, 23, 0.7);
  font-size: 12px;
  line-height: 1.9;
  text-align: justify;
}

/* =========================================================
   DIGITAL READING ROOM
   ========================================================= */
.literary-library {
  position: relative;
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(250px, 0.3fr) minmax(0, 0.7fr);
  min-height: clamp(590px, 53vw, 790px);
  margin-top: clamp(62px, 8vw, 120px);
  overflow: hidden;
  border: 1px solid var(--ink);
  background: radial-gradient(circle at 68% 48%, rgba(254, 221, 0, 0.15), transparent 28%), linear-gradient(to right, rgba(23, 23, 23, 0.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.055) 1px, transparent 1px), rgba(23, 23, 23, 0.018);
  background-size: auto, 48px 48px, 48px 48px, auto;
  isolation: isolate;
}
.literary-library:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 5px;
}
.literary-library {
  /* =======================================================
     CATALOGUE
     ======================================================= */
}
.literary-library__catalog {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-width: 0;
  container-type: inline-size;
  border-right: 1px solid var(--ink);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 45%), var(--ink);
  color: white;
}
.literary-library__catalog-header {
  padding: clamp(30px, 4vw, 58px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.literary-library__catalog-header > span {
  color: var(--yellow);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.literary-library__catalog-header h3 {
  margin: 20px 0 24px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(26px, 7cqi, 46px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.literary-library__catalog-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 10px;
  line-height: 1.8;
  text-align: justify;
}
.literary-library__work-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.literary-library__work-button {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  padding: 24px clamp(22px, 3vw, 42px);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: white;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease;
}
.literary-library__work-button > span {
  color: rgba(255, 255, 255, 0.38);
  font-family: "Archivo Black", sans-serif;
  font-size: 24px;
  line-height: 1;
}
.literary-library__work-button > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.literary-library__work-button strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(15px, 1.3vw, 21px);
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
}
.literary-library__work-button small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.literary-library__work-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  transform: translateY(-50%);
}
.literary-library__work-button:hover, .literary-library__work-button:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}
.literary-library__work-button:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: -4px;
}
.literary-library__work-button.is-active {
  background: var(--yellow);
  color: var(--ink);
}
.literary-library__work-button.is-active > span,
.literary-library__work-button.is-active small {
  color: rgba(23, 23, 23, 0.64);
}
.literary-library__work-button.is-active::after {
  background: var(--ink);
}
.literary-library {
  /* =======================================================
     READER
     ======================================================= */
}
.literary-library__reader {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.52);
}
.literary-library__reader.is-full-view {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  overflow: hidden;
  background: #f3f1e9;
}
.literary-library__reader.is-full-view .literary-library__reader-header {
  position: relative;
  z-index: 3;
  padding: clamp(18px, 2vw, 30px);
}
.literary-library__reader.is-full-view .literary-library__book-stage {
  min-height: 0;
  padding: clamp(12px, 2vw, 28px);
  overflow: auto;
}
.literary-library__reader.is-full-view .literary-library__book {
  width: min(100%, 1280px);
  max-width: 1280px;
}
.literary-library__reader.is-full-view .literary-library__controls {
  position: relative;
  z-index: 3;
  padding: 16px clamp(20px, 2vw, 32px);
}
.literary-library__reader-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 30px;
  padding: clamp(24px, 3vw, 42px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
}
.literary-library__reader-header > div:first-child {
  flex: 1 1 280px;
  min-width: 0;
}
.literary-library__reader-header > div:first-child > span {
  display: block;
  margin-bottom: 11px;
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.literary-library__reader-header h4 {
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(24px, 2.8vw, 46px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.literary-library__metadata {
  display: flex;
  flex: 0 0 auto;
  gap: clamp(20px, 3vw, 46px);
  margin: 0;
}
.literary-library__metadata div {
  display: grid;
  gap: 5px;
}
.literary-library__metadata dt {
  color: var(--muted-ink);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.literary-library__metadata dd {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
}
.literary-library__reader-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
.literary-library__toc-button, .literary-library__fullscreen-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  padding: 10px 15px;
  border: 1px solid rgba(23, 23, 23, 0.24);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.literary-library__toc-button span:first-child, .literary-library__fullscreen-button span:first-child {
  font-size: 17px;
  line-height: 1;
}
.literary-library__toc-button:hover:not(:disabled), .literary-library__fullscreen-button:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}
.literary-library__toc-button:focus-visible, .literary-library__fullscreen-button:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}
.literary-library__toc-button:disabled, .literary-library__fullscreen-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.literary-library__toc-button[aria-expanded=true], .literary-library__fullscreen-button[aria-pressed=true] {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}
.literary-library {
  /* =======================================================
     TABLE OF CONTENTS
     ======================================================= */
}
.literary-library__toc-panel {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-left: 1px solid var(--ink);
  background: linear-gradient(to right, rgba(23, 23, 23, 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.035) 1px, transparent 1px), #f5f3eb;
  background-size: 42px 42px, 42px 42px, auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease, visibility 0s linear 350ms;
}
.literary-library__toc-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease, visibility 0s;
}
.literary-library__toc-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(28px, 4vw, 54px);
  border-bottom: 1px solid var(--ink);
  background: rgba(255, 255, 255, 0.86);
}
.literary-library__toc-header > div {
  display: grid;
  gap: 12px;
}
.literary-library__toc-header span {
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.literary-library__toc-header h4 {
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(34px, 4vw, 68px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.literary-library__toc-header > button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.literary-library__toc-header > button:hover, .literary-library__toc-header > button:focus-visible {
  background: var(--ink);
  color: white;
}
.literary-library__toc-header > button:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}
.literary-library__toc-list {
  min-height: 0;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.58);
}
.literary-library__toc-item {
  --toc-depth: 0;
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 21px clamp(24px, 3vw, 42px) 21px calc(clamp(24px, 3vw, 42px) + var(--toc-depth) * 26px);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms ease, padding-left 180ms ease;
}
.literary-library__toc-item > span {
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 700;
}
.literary-library__toc-item strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}
.literary-library__toc-item small {
  color: var(--muted-ink);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.literary-library__toc-item[data-toc-level="1"] strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(18px, 2vw, 29px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.literary-library__toc-item[data-toc-level="2"] strong {
  font-size: 11px;
}
.literary-library__toc-item:hover, .literary-library__toc-item:focus-visible {
  background: rgba(254, 221, 0, 0.18);
}
.literary-library__toc-item:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: -3px;
}
.literary-library__toc-item.is-active {
  background: var(--yellow);
}
.literary-library__toc-item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--ink);
}
.literary-library__toc-empty {
  margin: 0;
  padding: 40px;
  color: var(--muted-ink);
  font-size: 9px;
  line-height: 1.7;
  text-transform: uppercase;
}
.literary-library {
  /* =======================================================
     BOOK
     ======================================================= */
}
.literary-library__book-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(10px, 3vw, 26px);
  overflow: hidden;
  perspective: 1900px;
}
.literary-library__book-stage::before {
  content: "";
  position: absolute;
  right: 10%;
  bottom: 7%;
  left: 10%;
  height: 15%;
  border-radius: 50%;
  background: rgba(23, 23, 23, 0.17);
  filter: blur(28px);
  transform: scaleY(0.55);
}
.literary-library__book {
  position: relative;
  z-index: 2;
  width: min(100%, 1100px);
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  transform-style: preserve-3d;
  animation: literary-book-breathe 7s ease-in-out infinite;
}
.literary-library__spread {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 10px;
  box-shadow: 0 30px 55px rgba(23, 23, 23, 0.2), 0 6px 0 rgba(23, 23, 23, 0.1);
}
.literary-library__page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(28px, 3.5vw, 56px);
  overflow: hidden;
  border: 1px solid rgba(23, 23, 23, 0.34);
  background: linear-gradient(to right, rgba(23, 23, 23, 0.018) 1px, transparent 1px), #fffdf5;
  background-size: 26px 100%;
}
.literary-library__page--left {
  border-radius: 10px 0 0 10px;
}
.literary-library__page--left::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42px;
  background: linear-gradient(to left, rgba(23, 23, 23, 0.12), transparent);
  pointer-events: none;
}
.literary-library__page--right {
  border-left: 0;
  border-radius: 0 10px 10px 0;
}
.literary-library__page--right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42px;
  background: linear-gradient(to right, rgba(23, 23, 23, 0.12), transparent);
  pointer-events: none;
}
.literary-library__page.is-empty {
  background: linear-gradient(to right, rgba(23, 23, 23, 0.018) 1px, transparent 1px), rgba(255, 253, 245, 0.72);
}
.literary-library__running-title {
  position: relative;
  z-index: 2;
  display: block;
  min-height: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(23, 23, 23, 0.2);
  color: var(--muted-ink);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.literary-library__page-body {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  padding: clamp(22px, 3vw, 40px) 2px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.literary-library__page-body > small {
  display: block;
  margin-bottom: 13px;
  color: var(--muted-ink);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.literary-library__page-body h5 {
  margin: 0 0 24px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(19px, 2vw, 31px);
  font-weight: 400;
  line-height: 1.02;
  text-transform: uppercase;
}
.literary-library__page-body h5[data-heading-level="1"] {
  font-size: clamp(24px, 2.6vw, 38px);
}
.literary-library__page-body h5[data-heading-level="2"] {
  font-size: clamp(20px, 2.2vw, 32px);
}
.literary-library__page-body h5[data-heading-level="3"] {
  font-size: clamp(18px, 1.8vw, 27px);
}
.literary-library__page-body p {
  margin: 0 0 17px;
  color: rgba(23, 23, 23, 0.78);
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(9px, 0.82vw, 12px);
  line-height: 1.9;
  text-align: justify;
}
.literary-library__page-number {
  position: relative;
  z-index: 2;
  display: block;
  padding-top: 12px;
  border-top: 1px solid rgba(23, 23, 23, 0.2);
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 700;
}
.literary-library__page--left .literary-library__page-number {
  text-align: left;
}
.literary-library__page--right .literary-library__page-number {
  text-align: right;
}
.literary-library__spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 8;
  width: 2px;
  background: rgba(23, 23, 23, 0.32);
  box-shadow: -10px 0 20px rgba(23, 23, 23, 0.12), 10px 0 20px rgba(23, 23, 23, 0.12);
  transform: translateX(-50%);
  pointer-events: none;
}
.literary-library__turning-page {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 12;
  width: 50%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  transform-origin: left center;
}
.literary-library__turning-page.is-turning-next {
  opacity: 1;
  animation: literary-page-next 700ms cubic-bezier(0.55, 0.08, 0.25, 1) forwards;
}
.literary-library__turning-page.is-turning-previous {
  left: 0;
  opacity: 1;
  transform-origin: right center;
  animation: literary-page-previous 700ms cubic-bezier(0.55, 0.08, 0.25, 1) forwards;
}
.literary-library__turning-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(28px, 3.5vw, 56px);
  overflow: hidden;
  border: 1px solid rgba(23, 23, 23, 0.35);
  background: #fffdf5;
  backface-visibility: hidden;
}
.literary-library__turning-face > span {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(23, 23, 23, 0.2);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.literary-library__turning-face p {
  margin: 0;
  color: rgba(23, 23, 23, 0.7);
  font-size: 10px;
  line-height: 1.9;
  text-align: justify;
}
.literary-library__turning-face--back {
  align-items: center;
  justify-content: center;
  background: #f5f0df;
  transform: rotateY(180deg);
}
.literary-library__turning-face--back > span {
  border: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(18px, 2vw, 30px);
  text-align: center;
}
.literary-library {
  /* =======================================================
     CONTROLS
     ======================================================= */
}
.literary-library__controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 25px;
  padding: 20px clamp(24px, 3vw, 42px);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
}
.literary-library__controls button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: -moz-max-content;
  width: max-content;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}
.literary-library__controls button:last-child {
  justify-self: end;
}
.literary-library__controls button:hover, .literary-library__controls button:focus-visible {
  border-color: var(--yellow);
  color: rgba(23, 23, 23, 0.6);
}
.literary-library__controls button:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 5px;
}
.literary-library__controls button:disabled {
  border-color: rgba(23, 23, 23, 0.18);
  color: rgba(23, 23, 23, 0.28);
  cursor: not-allowed;
}
.literary-library__controls > div {
  display: grid;
  gap: 5px;
  text-align: center;
}
.literary-library__controls > div strong {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.literary-library__controls > div small {
  color: var(--muted-ink);
  font-size: 7px;
  letter-spacing: 0.09em;
}
.literary-library__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   CHILDHOOD FACTS
   ========================================================= */
.childhood-facts {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 30px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.childhood-fact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  min-height: 300px;
  padding: 28px;
  border-right: 1px solid var(--line);
}
.childhood-fact > span {
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
}
.childhood-fact > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.childhood-fact h3 {
  height: 102px;
  margin: 0 0 18px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
}
.childhood-fact p {
  margin: 30px 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: 11px;
  line-height: 1.8;
  text-align: justify;
}
.childhood-fact:last-child {
  border-right: 0;
}

.childhood-fact__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin-top: auto;
  padding: 18px 0 4px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 200ms ease, border-color 200ms ease;
}
.childhood-fact__link span:last-child {
  font-size: 16px;
  transition: transform 200ms ease;
}
.childhood-fact__link:hover, .childhood-fact__link:focus-visible {
  color: var(--ink);
  border-color: var(--yellow);
}
.childhood-fact__link:hover span:last-child, .childhood-fact__link:focus-visible span:last-child {
  transform: translate(4px, -4px);
}
.childhood-fact__link:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 6px;
}

/* =========================================================
   FULL VIEW
   ========================================================= */
body.book-full-view-open {
  overflow: hidden;
}
body.book-full-view-open .literary-library {
  z-index: 10000;
  overflow: visible;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes literary-book-breathe {
  0%, 100% {
    transform: translateY(0) rotateX(0.6deg);
  }
  50% {
    transform: translateY(-5px) rotateX(0deg);
  }
}
@keyframes literary-page-next {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-180deg);
  }
}
@keyframes literary-page-previous {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}
/* =========================================================
   DARK THEME
   Linked directly to the Header theme switch.
   ========================================================= */
html[data-theme=dark] .family-childhood {
  background: #171717;
  color: #ffffff;
  border-top-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
html[data-theme=dark] .family-childhood__rail {
  color: #ffffff;
}
html[data-theme=dark] .family-childhood__rail i {
  background: linear-gradient(var(--yellow), rgba(255, 255, 255, 0.22));
}
html[data-theme=dark] .family-childhood__intro .section-label {
  color: rgba(255, 255, 255, 0.56);
}
html[data-theme=dark] .family-childhood__intro h2 {
  color: #ffffff;
}
html[data-theme=dark] .family-childhood__intro > p:last-child {
  color: rgba(255, 255, 255, 0.7);
}
html[data-theme=dark] .literary-library {
  border-color: rgba(255, 255, 255, 0.72);
  background: radial-gradient(circle at 68% 48%, rgba(254, 221, 0, 0.12), transparent 28%), linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px), #111111;
  color: #ffffff;
}
html[data-theme=dark] .literary-library__catalog {
  border-right-color: rgba(255, 255, 255, 0.34);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 45%), #080808;
  color: #ffffff;
}
html[data-theme=dark] .literary-library__catalog-header {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
html[data-theme=dark] .literary-library__catalog-header > span {
  color: var(--yellow);
}
html[data-theme=dark] .literary-library__catalog-header h3 {
  color: #ffffff;
}
html[data-theme=dark] .literary-library__catalog-header p {
  color: rgba(255, 255, 255, 0.64);
}
html[data-theme=dark] .literary-library__work-button {
  border-bottom-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
html[data-theme=dark] .literary-library__work-button > span {
  color: rgba(255, 255, 255, 0.38);
}
html[data-theme=dark] .literary-library__work-button small {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme=dark] .literary-library__work-button:hover, html[data-theme=dark] .literary-library__work-button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme=dark] .literary-library__work-button.is-active {
  background: var(--yellow);
  color: #171717;
}
html[data-theme=dark] .literary-library__work-button.is-active > span,
html[data-theme=dark] .literary-library__work-button.is-active small {
  color: rgba(23, 23, 23, 0.64);
}
html[data-theme=dark] .literary-library__work-button.is-active::after {
  background: #171717;
}
html[data-theme=dark] .literary-library__reader {
  background: rgba(8, 8, 8, 0.7);
}
html[data-theme=dark] .literary-library__reader.is-full-view {
  background: #111111;
}
html[data-theme=dark] .literary-library__reader-header {
  border-bottom-color: rgba(255, 255, 255, 0.18);
  background: rgba(23, 23, 23, 0.92);
}
html[data-theme=dark] .literary-library__reader-header > div:first-child > span {
  color: rgba(255, 255, 255, 0.56);
}
html[data-theme=dark] .literary-library__reader-header h4 {
  color: #ffffff;
}
html[data-theme=dark] .literary-library__metadata dt {
  color: rgba(255, 255, 255, 0.56);
}
html[data-theme=dark] .literary-library__metadata dd {
  color: #ffffff;
}
html[data-theme=dark] .literary-library__toc-button, html[data-theme=dark] .literary-library__fullscreen-button {
  border-color: rgba(255, 255, 255, 0.34);
  background: transparent;
  color: #ffffff;
}
html[data-theme=dark] .literary-library__toc-button:hover:not(:disabled), html[data-theme=dark] .literary-library__fullscreen-button:hover:not(:disabled) {
  border-color: #ffffff;
  background: #ffffff;
  color: #171717;
}
html[data-theme=dark] .literary-library__toc-button[aria-expanded=true], html[data-theme=dark] .literary-library__fullscreen-button[aria-pressed=true] {
  border-color: #ffffff;
  background: #ffffff;
  color: #171717;
}
html[data-theme=dark] .literary-library__toc-panel {
  border-left-color: rgba(255, 255, 255, 0.34);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px), #111111;
  color: #ffffff;
}
html[data-theme=dark] .literary-library__toc-header {
  border-bottom-color: rgba(255, 255, 255, 0.34);
  background: rgba(23, 23, 23, 0.96);
}
html[data-theme=dark] .literary-library__toc-header span {
  color: rgba(255, 255, 255, 0.56);
}
html[data-theme=dark] .literary-library__toc-header h4 {
  color: #ffffff;
}
html[data-theme=dark] .literary-library__toc-header > button {
  border-color: rgba(255, 255, 255, 0.72);
  background: transparent;
  color: #ffffff;
}
html[data-theme=dark] .literary-library__toc-header > button:hover, html[data-theme=dark] .literary-library__toc-header > button:focus-visible {
  background: #ffffff;
  color: #171717;
}
html[data-theme=dark] .literary-library__toc-list {
  background: rgba(8, 8, 8, 0.6);
}
html[data-theme=dark] .literary-library__toc-item {
  border-bottom-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
html[data-theme=dark] .literary-library__toc-item > span,
html[data-theme=dark] .literary-library__toc-item small {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme=dark] .literary-library__toc-item:hover, html[data-theme=dark] .literary-library__toc-item:focus-visible {
  background: rgba(254, 221, 0, 0.12);
}
html[data-theme=dark] .literary-library__toc-item.is-active {
  background: var(--yellow);
  color: #171717;
}
html[data-theme=dark] .literary-library__toc-item.is-active > span,
html[data-theme=dark] .literary-library__toc-item.is-active small {
  color: rgba(23, 23, 23, 0.62);
}
html[data-theme=dark] .literary-library__toc-item.is-active::before {
  background: #171717;
}
html[data-theme=dark] .literary-library__toc-empty {
  color: rgba(255, 255, 255, 0.56);
}
html[data-theme=dark] .literary-library__book-stage::before {
  background: rgba(0, 0, 0, 0.62);
}
html[data-theme=dark] .literary-library__spread {
  box-shadow: 0 30px 55px rgba(0, 0, 0, 0.58), 0 6px 0 rgba(0, 0, 0, 0.34);
}
html[data-theme=dark] .literary-library__page {
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px), #1b1b1b;
  color: #ffffff;
}
html[data-theme=dark] .literary-library__page--left::after {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.52), transparent);
}
html[data-theme=dark] .literary-library__page--right::after {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.52), transparent);
}
html[data-theme=dark] .literary-library__page.is-empty {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px), rgba(27, 27, 27, 0.82);
}
html[data-theme=dark] .literary-library__running-title {
  border-bottom-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme=dark] .literary-library__page-body > small {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme=dark] .literary-library__page-body h5 {
  color: #ffffff;
}
html[data-theme=dark] .literary-library__page-body p {
  color: rgba(255, 255, 255, 0.78);
}
html[data-theme=dark] .literary-library__page-number {
  border-top-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme=dark] .literary-library__spine {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: -10px 0 20px rgba(0, 0, 0, 0.38), 10px 0 20px rgba(0, 0, 0, 0.38);
}
html[data-theme=dark] .literary-library__turning-face {
  border-color: rgba(255, 255, 255, 0.28);
  background: #1b1b1b;
  color: #ffffff;
}
html[data-theme=dark] .literary-library__turning-face > span {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
html[data-theme=dark] .literary-library__turning-face p {
  color: rgba(255, 255, 255, 0.72);
}
html[data-theme=dark] .literary-library__turning-face--back {
  background: #111111;
}
html[data-theme=dark] .literary-library__turning-face--back > span {
  color: #ffffff;
}
html[data-theme=dark] .literary-library__controls {
  border-top-color: rgba(255, 255, 255, 0.18);
  background: rgba(23, 23, 23, 0.94);
}
html[data-theme=dark] .literary-library__controls button {
  border-bottom-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}
html[data-theme=dark] .literary-library__controls button:hover, html[data-theme=dark] .literary-library__controls button:focus-visible {
  border-color: var(--yellow);
  color: rgba(255, 255, 255, 0.65);
}
html[data-theme=dark] .literary-library__controls button:disabled {
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.28);
}
html[data-theme=dark] .literary-library__controls > div strong {
  color: #ffffff;
}
html[data-theme=dark] .literary-library__controls > div small {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme=dark] .childhood-facts {
  border-top-color: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.72);
}
html[data-theme=dark] .childhood-fact {
  border-right-color: rgba(255, 255, 255, 0.18);
}
html[data-theme=dark] .childhood-fact > span {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme=dark] .childhood-fact h3 {
  color: #ffffff;
}
html[data-theme=dark] .childhood-fact p {
  color: rgba(255, 255, 255, 0.68);
}
html[data-theme=dark] .childhood-fact__link {
  border-top-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
html[data-theme=dark] .childhood-fact__link:hover, html[data-theme=dark] .childhood-fact__link:focus-visible {
  border-color: var(--yellow);
  color: #ffffff;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
  .childhood-facts {
    grid-template-columns: 1fr;
  }
  .childhood-facts > * {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .childhood-facts > *:last-child {
    border-bottom: 0;
  }
  html[data-theme=dark] .childhood-facts > * {
    border-bottom-color: rgba(255, 255, 255, 0.18);
  }
}
@media (max-width: 1050px) {
  .literary-library {
    grid-template-columns: minmax(220px, 0.34fr) minmax(0, 0.66fr);
  }
  .literary-library__book-stage {
    padding: 34px;
  }
  .literary-library__page, .literary-library__turning-face {
    padding: 28px;
  }
}
@media (max-width: 860px) {
  .family-childhood {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .family-childhood__intro {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .family-childhood__rail strong {
    display: none;
  }
  .literary-library,
  .childhood-facts {
    grid-column: 2;
  }
}
@media (max-width: 760px) {
  .literary-library {
    grid-template-columns: 1fr;
  }
  .literary-library__catalog {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .literary-library__work-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 310px;
  }
  .literary-library__work-button {
    border-right: 1px solid rgba(255, 255, 255, 0.16);
  }
  .literary-library__reader-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .literary-library__reader-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .literary-library__book-stage {
    min-height: 620px;
    padding: 32px 18px;
  }
  .literary-library__book {
    width: min(100%, 470px);
    aspect-ratio: 0.76;
  }
  .literary-library__spread {
    grid-template-columns: 1fr;
  }
  .literary-library__page--left {
    border-radius: 10px;
  }
  .literary-library__page--right, .literary-library__spine {
    display: none;
  }
  .literary-library__turning-page {
    left: 0;
    width: 100%;
    transform-origin: left center;
  }
  .literary-library__turning-page.is-turning-previous {
    left: 0;
    transform-origin: right center;
  }
  .literary-library__toc-item {
    padding-left: calc(18px + var(--toc-depth) * 17px);
    padding-right: 18px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }
  html[data-theme=dark] .literary-library__catalog {
    border-bottom-color: rgba(255, 255, 255, 0.34);
  }
}
@media (max-width: 620px) {
  .family-childhood {
    display: block;
    padding-right: 16px;
    padding-left: 16px;
  }
  .family-childhood__rail {
    flex-direction: row;
    align-items: center;
    margin-bottom: 34px;
  }
  .family-childhood__rail span {
    font-size: 42px;
  }
  .family-childhood__rail i {
    width: auto;
    height: 1px;
    min-height: 0;
    flex: 1;
    margin: 0;
  }
  .childhood-fact {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .literary-library__work-list {
    grid-template-columns: 1fr;
  }
  .literary-library__reader-header {
    padding: 24px 18px;
  }
  .literary-library__metadata {
    width: 100%;
    justify-content: space-between;
  }
  .literary-library__book-stage {
    min-height: 570px;
    padding: 24px 12px;
  }
  .literary-library__page, .literary-library__turning-face {
    padding: 25px 20px;
  }
  .literary-library__controls {
    grid-template-columns: 1fr 1fr;
  }
  .literary-library__controls > div {
    grid-column: 1/-1;
    grid-row: 1;
  }
  .literary-library__controls button {
    grid-row: 2;
  }
  .literary-library__controls button:last-child {
    justify-self: end;
  }
  .literary-library__toc-header {
    padding: 24px 18px;
  }
  .literary-library__toc-item {
    grid-template-columns: 26px minmax(0, 1fr);
  }
  .literary-library__toc-item small {
    grid-column: 2;
  }
}
/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .literary-library__book,
  .literary-library__turning-page {
    animation: none !important;
  }
}
/* =========================================================
   SCHOOL YEARS
   ========================================================= */
.family-school {
  --school-bg: #ffffff;
  --school-ink: #171717;
  --school-muted: rgba(23, 23, 23, 0.56);
  --school-copy: rgba(23, 23, 23, 0.7);
  --school-line: rgba(23, 23, 23, 0.2);
  --school-line-strong: rgba(23, 23, 23, 0.7);
  position: relative;
  display: grid;
  grid-template-columns: minmax(90px, 0.12fr) minmax(0, 0.88fr);
  padding: clamp(82px, 10vw, 160px) clamp(20px, 5vw, 84px);
  border-bottom: 1px solid var(--school-line);
  border-top: 1px solid var(--school-line);
  background: var(--school-bg);
  color: var(--school-ink);
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

/* =========================================================
   CHAPTER RAIL
   ========================================================= */
.family-school__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding-top: 6px;
}
.family-school__rail span {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(44px, 5vw, 78px);
  line-height: 1;
}
.family-school__rail strong {
  font-size: 8px;
  letter-spacing: 0.15em;
  writing-mode: vertical-rl;
  text-transform: uppercase;
}
.family-school__rail i {
  width: 1px;
  flex: 1;
  min-height: 100px;
  margin: 10px 0 0 7px;
  background: linear-gradient(var(--yellow), var(--school-line));
}

/* =========================================================
   CHAPTER INTRODUCTION
   ========================================================= */
.family-school__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: clamp(38px, 8vw, 132px);
  align-items: end;
}
.family-school__intro .section-label {
  grid-column: 1/-1;
  color: var(--school-muted);
}
.family-school__intro h2 {
  margin: 0;
  color: var(--school-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(40px, 5.4vw, 92px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.058em;
  text-transform: uppercase;
}
.family-school__intro > p:last-child {
  margin: 0;
  color: var(--school-copy);
  font-size: 12px;
  line-height: 1.9;
  text-align: justify;
}

/* =========================================================
   SCHOOL YEARS COLLAGE

   The image itself is the entire visual.
   It keeps its natural aspect ratio, so it is never cropped.
   ========================================================= */
.school-collage {
  position: relative;
  grid-column: 2;
  width: 100%;
  margin-top: clamp(64px, 8vw, 120px);
  border-top: 1px solid var(--school-line-strong);
  border-bottom: 1px solid var(--school-line-strong);
  background: transparent;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

.school-collage.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.school-collage__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center center;
     object-position: center center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* =========================================================
   DETAILED TIMELINE
   ========================================================= */
.school-timeline {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 30px;
  border-top: 1px solid var(--school-ink);
  border-bottom: 1px solid var(--school-ink);
}

.school-event {
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: 27px;
  border-right: 1px solid var(--school-line);
  color: var(--school-ink);
}
.school-event:last-child {
  border-right: 0;
}
.school-event time {
  display: block;
  margin-bottom: 46px;
  color: var(--school-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
}
.school-event > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.school-event h3 {
  min-height: 102px;
  margin: 0 0 18px;
  color: var(--school-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
}
.school-event p {
  margin: 24px 0;
  color: var(--school-copy);
  font-size: 10px;
  line-height: 1.8;
  text-align: justify;
}

/* =========================================================
   TIMELINE LINKS
   ========================================================= */
.school-event__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin-top: auto;
  padding: 18px 0 4px;
  border-top: 1px solid var(--school-line);
  color: var(--school-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 200ms ease, color 200ms ease;
}
.school-event__link span:last-child {
  font-size: 16px;
  transition: transform 200ms ease;
}
.school-event__link:hover, .school-event__link:focus-visible {
  border-color: var(--yellow);
}
.school-event__link:hover span:last-child, .school-event__link:focus-visible span:last-child {
  transform: translate(4px, -4px);
}
.school-event__link:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 6px;
}

/* =========================================================
   DARK THEME
   ========================================================= */
html[data-theme=dark] .family-school {
  --school-bg: #171717;
  --school-ink: #ffffff;
  --school-muted: rgba(255, 255, 255, 0.52);
  --school-copy: rgba(255, 255, 255, 0.7);
  --school-line: rgba(255, 255, 255, 0.18);
  --school-line-strong: rgba(255, 255, 255, 0.7);
}

/* =========================================================
   RESPONSIVE — 1180
   ========================================================= */
@media (max-width: 1180px) {
  .school-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .school-timeline .school-event:nth-child(2) {
    border-right: 0;
  }
  .school-timeline .school-event:nth-child(-n+2) {
    border-bottom: 1px solid var(--school-line);
  }
}
/* =========================================================
   RESPONSIVE — 860
   ========================================================= */
@media (max-width: 860px) {
  .family-school {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .family-school__intro {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .family-school__rail strong {
    display: none;
  }
  .school-collage,
  .school-timeline {
    grid-column: 2;
  }
}
/* =========================================================
   RESPONSIVE — 620
   ========================================================= */
@media (max-width: 620px) {
  .family-school {
    display: block;
    padding-right: 16px;
    padding-left: 16px;
  }
  .family-school__rail {
    flex-direction: row;
    align-items: center;
    margin-bottom: 34px;
  }
  .family-school__rail span {
    font-size: 42px;
  }
  .family-school__rail i {
    width: auto;
    height: 1px;
    min-height: 0;
    flex: 1;
    margin: 0;
  }
  .school-collage,
  .school-timeline {
    grid-column: auto;
  }
  .school-collage {
    margin-top: 54px;
  }
  .school-timeline {
    grid-template-columns: 1fr;
  }
  .school-timeline .school-event {
    border-right: 0;
    border-bottom: 1px solid var(--school-line);
  }
  .school-timeline .school-event:last-child {
    border-bottom: 0;
  }
}
/* =========================================================
   RESPONSIVE — 480
   ========================================================= */
@media (max-width: 480px) {
  .family-school {
    padding-top: 72px;
    padding-bottom: 90px;
  }
  .family-school__intro h2 {
    font-size: clamp(36px, 11vw, 54px);
  }
  .family-school__intro > p:last-child {
    font-size: 11px;
    line-height: 1.8;
  }
  .school-collage {
    margin-top: 46px;
  }
  .school-event {
    min-height: 0;
    padding: 24px 18px;
  }
  .school-event h3 {
    min-height: 0;
  }
}
/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .school-collage {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* =========================================================
   MARRIAGES
   ========================================================= */
.family-marriages {
  /* LIGHT VERSION */
  --marriage-bg: #ffffff;
  --marriage-card: #ffffff;
  --marriage-ink: #171717;
  --marriage-muted: rgba(23, 23, 23, 0.56);
  --marriage-copy: rgba(23, 23, 23, 0.68);
  --marriage-line: rgba(23, 23, 23, 0.2);
  --marriage-line-strong: #171717;
  --marriage-grid: rgba(23, 23, 23, 0.09);
  --marriage-portrait-bg: rgba(23, 23, 23, 0.035);
  position: relative;
  display: grid;
  grid-template-columns: minmax(90px, 0.12fr) minmax(0, 0.88fr);
  padding: clamp(82px, 10vw, 160px) clamp(20px, 5vw, 84px);
  border-bottom: 1px solid var(--marriage-line);
  border-top: 1px solid var(--marriage-line);
  background: var(--marriage-bg);
  color: var(--marriage-ink);
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

/* =========================================================
   CHAPTER RAIL
   ========================================================= */
.family-marriages__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding-top: 6px;
  color: var(--marriage-ink);
}
.family-marriages__rail span {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(44px, 5vw, 78px);
  line-height: 1;
}
.family-marriages__rail strong {
  font-size: 8px;
  letter-spacing: 0.15em;
  writing-mode: vertical-rl;
  text-transform: uppercase;
}
.family-marriages__rail i {
  width: 1px;
  flex: 1;
  min-height: 100px;
  margin: 10px 0 0 7px;
  background: linear-gradient(var(--yellow), var(--marriage-line));
}

/* =========================================================
   INTRO
   ========================================================= */
.family-marriages__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: clamp(38px, 8vw, 132px);
  align-items: end;
}
.family-marriages__intro .section-label {
  grid-column: 1/-1;
  color: var(--marriage-muted);
}
.family-marriages__intro h2 {
  margin: 0;
  color: var(--marriage-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(40px, 5.4vw, 92px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.058em;
  text-transform: uppercase;
}
.family-marriages__intro > p:last-child {
  margin: 0;
  color: var(--marriage-copy);
  font-size: 12px;
  line-height: 1.9;
  text-align: justify;
}

/* =========================================================
   MARRIAGE LEDGER
   ========================================================= */
.marriage-ledger {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(64px, 8vw, 120px);
}

/* =========================================================
   RECORD
   ========================================================= */
.marriage-record {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(0, 1.3fr);
  min-height: 570px;
  overflow: hidden;
  border: 1px solid var(--marriage-line-strong);
  background: var(--marriage-card);
  color: var(--marriage-ink);
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

/* =========================================================
   ROMAN NUMBER
   ========================================================= */
.marriage-record__number {
  position: absolute;
  top: 17px;
  left: 18px;
  z-index: 5;
  color: var(--marriage-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: 26px;
  transition: color 240ms ease;
}

/* =========================================================
   PORTRAIT
   ========================================================= */
.marriage-record__portrait {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--marriage-line-strong);
  background: linear-gradient(to right, var(--marriage-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--marriage-grid) 1px, transparent 1px), var(--marriage-portrait-bg);
  background-size: 34px 34px;
  transition: background-color 240ms ease, border-color 240ms ease;
}
.marriage-record__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent 68%, rgba(23, 23, 23, 0.05));
  pointer-events: none;
}
.marriage-record__portrait i {
  position: absolute;
  right: 20%;
  bottom: 8%;
  left: 20%;
  z-index: 3;
  height: 1px;
  background: var(--yellow);
}

/* =========================================================
   SECOND PORTRAIT
   ========================================================= */
.marriage-record__portrait--second {
  background: radial-gradient(circle at 50% 45%, rgba(254, 221, 0, 0.22), transparent 32%), linear-gradient(to right, var(--marriage-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--marriage-grid) 1px, transparent 1px), var(--marriage-portrait-bg);
  background-size: auto, 34px 34px, 34px 34px, auto;
}

/* =========================================================
   IMAGE
   ========================================================= */
.marriage-record__image {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  transition: filter 240ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Very subtle image movement only on actual interaction */
.marriage-record:hover .marriage-record__image {
  transform: scale(1.015);
}

/* =========================================================
   COPY
   ========================================================= */
.marriage-record__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(32px, 4vw, 58px);
  color: var(--marriage-ink);
}
.marriage-record__copy .section-label {
  color: var(--marriage-muted);
}
.marriage-record__copy h3 {
  margin: 22px 0 28px;
  color: var(--marriage-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(31px, 3.2vw, 55px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
.marriage-record__copy .marriage-record__name--long {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: clamp(24px, 2.4vw, 40px);
  line-height: 1;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: manual;
}
.marriage-record__copy > p:not(.section-label) {
  margin: 40px 0;
  color: var(--marriage-copy);
  font-size: 11px;
  line-height: 1.85;
  text-align: justify;
}
.marriage-record__copy dl {
  display: grid;
  gap: 17px;
  margin: auto 0 0;
  padding: 10px 0;
  border-top: 1px solid var(--marriage-line);
}
.marriage-record__copy dl div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
}
.marriage-record__copy dt {
  color: var(--marriage-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.marriage-record__copy dd {
  margin: 0;
  color: var(--marriage-ink);
  font-size: 9px;
  line-height: 1.6;
}

/* =========================================================
   RECORD LINK
   ========================================================= */
.marriage-record__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin-top: 24px;
  padding: 18px 0 4px;
  border-top: 1px solid var(--marriage-line);
  color: var(--marriage-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 200ms ease, border-color 200ms ease;
}
.marriage-record__link span:last-child {
  font-size: 16px;
  transition: transform 200ms ease;
}
.marriage-record__link:hover, .marriage-record__link:focus-visible {
  color: var(--marriage-ink);
  border-color: var(--yellow);
}
.marriage-record__link:hover span:last-child, .marriage-record__link:focus-visible span:last-child {
  transform: translate(4px, -4px);
}
.marriage-record__link:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 6px;
}

/* =========================================================
   DARK VERSION
   Connected directly to Header switch
   ========================================================= */
html[data-theme=dark] .family-marriages {
  --marriage-bg: #171717;
  --marriage-card: #171717;
  --marriage-ink: #ffffff;
  --marriage-muted: rgba(255, 255, 255, 0.52);
  --marriage-copy: rgba(255, 255, 255, 0.7);
  --marriage-line: rgba(255, 255, 255, 0.18);
  --marriage-line-strong: rgba(255, 255, 255, 0.72);
  --marriage-grid: rgba(255, 255, 255, 0.075);
  --marriage-portrait-bg: #111111;
}
html[data-theme=dark] .marriage-record__portrait::after {
  background: linear-gradient(to bottom, transparent 62%, rgba(0, 0, 0, 0.25));
}
html[data-theme=dark] .marriage-record__portrait--second {
  background: radial-gradient(circle at 50% 45%, rgba(254, 221, 0, 0.14), transparent 32%), linear-gradient(to right, var(--marriage-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--marriage-grid) 1px, transparent 1px), var(--marriage-portrait-bg);
  background-size: auto, 34px 34px, 34px 34px, auto;
}
html[data-theme=dark] .marriage-record__image {
  filter: brightness(0.88) contrast(1.06);
}
html[data-theme=dark] .marriage-record:hover .marriage-record__image {
  filter: brightness(0.95) contrast(1.04);
}

/* =========================================================
   RESPONSIVE — 1180
   ========================================================= */
@media (max-width: 1180px) {
  .marriage-ledger {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   RESPONSIVE — 860
   ========================================================= */
@media (max-width: 860px) {
  .family-marriages {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .family-marriages__intro {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .family-marriages__rail strong {
    display: none;
  }
  .marriage-ledger {
    grid-column: 2;
  }
  .marriage-record {
    grid-template-columns: minmax(130px, 0.55fr) minmax(0, 1.45fr);
  }
}
/* =========================================================
   RESPONSIVE — 620
   ========================================================= */
@media (max-width: 620px) {
  .family-marriages {
    display: block;
    padding-right: 16px;
    padding-left: 16px;
  }
  .family-marriages__rail {
    flex-direction: row;
    align-items: center;
    margin-bottom: 34px;
  }
  .family-marriages__rail span {
    font-size: 42px;
  }
  .family-marriages__rail i {
    width: auto;
    height: 1px;
    min-height: 0;
    flex: 1;
    margin: 0;
  }
  .marriage-record {
    grid-template-columns: 1fr;
  }
  .marriage-record__portrait {
    min-height: 340px;
    border-right: 0;
    border-bottom: 1px solid var(--marriage-line-strong);
  }
  .marriage-record__copy dl div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .marriage-record__image,
  .marriage-record__link span:last-child {
    transition: none !important;
  }
  .marriage-record:hover .marriage-record__image {
    transform: none;
  }
}
/* =========================================================
   CHILDREN SECTION
   ========================================================= */
.family-children {
  --children-bg: #ffffff;
  --children-ink: #171717;
  --children-muted: rgba(23, 23, 23, 0.42);
  --children-muted-strong: rgba(23, 23, 23, 0.56);
  --children-copy: rgba(23, 23, 23, 0.7);
  --children-line: rgba(23, 23, 23, 0.2);
  --children-line-soft: rgba(23, 23, 23, 0.09);
  --children-line-strong: rgba(23, 23, 23, 0.46);
  --children-panel: #ffffff;
  --children-panel-soft: #f2f2ef;
  --children-grid: rgba(23, 23, 23, 0.045);
  --children-grey-one: #ecece8;
  --children-grey-two: #d8d8d4;
  --children-shadow: rgba(23, 23, 23, 0.08);
  --children-photo-line: rgba(255, 255, 255, 0.7);
  --children-node-stroke: #ffffff;
  position: relative;
  display: grid;
  grid-template-columns: minmax(90px, 0.12fr) minmax(0, 0.88fr);
  padding: clamp(82px, 10vw, 160px) clamp(20px, 5vw, 84px);
  border-bottom: 1px solid var(--children-line);
  border-top: 1px solid var(--children-line);
  background: var(--children-bg);
  color: var(--children-ink);
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

/* =========================================================
   CHAPTER RAIL — UNCHANGED STRUCTURE
   ========================================================= */
.family-children__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding-top: 6px;
  color: var(--children-ink);
}
.family-children__rail span {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(44px, 5vw, 78px);
  line-height: 1;
}
.family-children__rail strong {
  font-size: 8px;
  letter-spacing: 0.15em;
  writing-mode: vertical-rl;
  text-transform: uppercase;
}
.family-children__rail i {
  width: 1px;
  flex: 1;
  min-height: 100px;
  margin: 10px 0 0 7px;
  background: linear-gradient(var(--yellow), var(--children-line));
}

/* =========================================================
   INTRO — UNCHANGED STRUCTURE
   ========================================================= */
.family-children__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: clamp(38px, 8vw, 132px);
  align-items: end;
}
.family-children__intro .section-label {
  grid-column: 1/-1;
  color: var(--children-muted-strong);
}
.family-children__intro h2 {
  margin: 0;
  color: var(--children-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(40px, 5.4vw, 92px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.058em;
  text-transform: uppercase;
}
.family-children__intro > p:last-child {
  margin: 0;
  color: var(--children-copy);
  font-size: 12px;
  line-height: 1.9;
  text-align: justify;
}

/* =========================================================
   FAMILY LINEAGE REGISTER
   ========================================================= */
.family-lineage {
  position: relative;
  grid-column: 2;
  min-height: clamp(650px, 53vw, 810px);
  margin-top: clamp(64px, 8vw, 120px);
  overflow: hidden;
  border: 1px solid var(--children-line);
  background: var(--children-panel);
  color: var(--children-ink);
  isolation: isolate;
}
.family-lineage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: linear-gradient(to right, var(--children-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--children-grid) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black 12%, black 88%, transparent 100%);
}
.family-lineage::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 40;
  height: 6px;
  background: linear-gradient(to right, var(--children-ink) 0 61%, var(--yellow) 61% 78%, var(--children-grey-two) 78% 90%, var(--children-grey-one) 90% 100%);
}

/* =========================================================
   REGISTER HEADER
   ========================================================= */
.family-lineage__header {
  position: absolute;
  top: clamp(27px, 3vw, 40px);
  right: clamp(28px, 3.5vw, 50px);
  left: clamp(28px, 3.5vw, 50px);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--children-line);
  color: var(--children-muted);
  font-size: clamp(7px, 0.58vw, 9px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.family-lineage__header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.family-lineage__header > div i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 5px rgba(254, 221, 0, 0.12);
  animation: lineage-header-status 1.8s ease-in-out infinite;
}
.family-lineage__header > div strong {
  color: var(--children-ink);
}

/* =========================================================
   MOVING ARCHIVE TICKER
   ========================================================= */
.family-lineage__ticker {
  position: absolute;
  top: 96px;
  right: 0;
  left: 0;
  z-index: -1;
  display: flex;
  width: -moz-max-content;
  width: max-content;
  color: var(--children-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(70px, 8.2vw, 138px);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.065em;
  opacity: 0.025;
  white-space: nowrap;
  pointer-events: none;
  animation: lineage-ticker 28s linear infinite;
}
.family-lineage__ticker span {
  padding-right: 0.22em;
}

/* =========================================================
   STAGE
   ========================================================= */
.family-lineage__stage {
  position: absolute;
  top: clamp(100px, 10vw, 132px);
  right: clamp(28px, 3.5vw, 50px);
  bottom: clamp(74px, 7vw, 94px);
  left: clamp(28px, 3.5vw, 50px);
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) minmax(360px, 1.35fr);
  gap: clamp(90px, 10vw, 170px);
  align-items: stretch;
}

/* =========================================================
   SOURCE / ZVIAD
   ========================================================= */
.family-lineage__source {
  position: relative;
  z-index: 8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.family-lineage__source-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 13px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--children-line);
  color: var(--children-muted);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.family-lineage__source-meta strong {
  color: var(--children-ink);
}

.family-lineage__source-portrait {
  position: relative;
  width: min(100%, 310px);
  margin: 0 auto 0 0;
}

.family-lineage__source-backplate {
  position: absolute;
  top: 14px;
  right: -15px;
  bottom: 42px;
  left: 15px;
  z-index: -1;
  background: var(--yellow);
  transform: translate3d(calc(var(--lineage-parallax-x, 0px) * -0.25), calc(var(--lineage-parallax-y, 0px) * -0.25), 0);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.family-lineage__source-image {
  position: relative;
  width: 100%;
  aspect-ratio: 0.77;
  overflow: hidden;
  border: 1px solid var(--children-line-strong);
  background: var(--children-panel-soft);
  box-shadow: 18px 20px 42px var(--children-shadow);
  transform: translate3d(calc(var(--lineage-parallax-x, 0px) * 0.18), calc(var(--lineage-parallax-y, 0px) * 0.18), 0);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.family-lineage__source-image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  filter: grayscale(1) contrast(1.06);
  transform: scale(1.025);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease;
}

.family-lineage:hover .family-lineage__source-image img {
  transform: scale(1.055);
  filter: grayscale(0.86) contrast(1.04);
}

.family-lineage__source-scan {
  position: absolute;
  top: -4%;
  right: 0;
  left: 0;
  z-index: 6;
  height: 2px;
  background: var(--yellow);
  box-shadow: 0 0 10px rgba(254, 221, 0, 0.65), 0 10px 28px rgba(254, 221, 0, 0.12);
  opacity: 0;
  animation: lineage-source-scan 6.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.family-lineage__corner {
  position: absolute;
  z-index: 7;
  width: 26px;
  height: 26px;
  pointer-events: none;
}

.family-lineage__corner--tl {
  top: 10px;
  left: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.82);
  border-left: 1px solid rgba(255, 255, 255, 0.82);
}

.family-lineage__corner--br {
  right: 10px;
  bottom: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.82);
}

.family-lineage__source-portrait figcaption {
  display: grid;
  gap: 4px;
  padding-top: 11px;
}
.family-lineage__source-portrait figcaption small {
  color: var(--children-muted);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.family-lineage__source-portrait figcaption strong {
  color: var(--children-ink);
  font-size: clamp(9px, 0.78vw, 12px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.family-lineage__source-code {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 15px;
  width: min(100%, 310px);
  margin-top: clamp(24px, 3vw, 42px);
  padding-left: 12px;
  border-left: 2px solid var(--yellow);
}
.family-lineage__source-code span,
.family-lineage__source-code small {
  color: var(--children-muted);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.family-lineage__source-code strong {
  grid-row: 1/3;
  grid-column: 2;
  align-self: center;
  justify-self: end;
  color: var(--children-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(27px, 3vw, 46px);
  font-weight: 400;
  line-height: 0.9;
}

/* =========================================================
   LINEAGE PATHS
   ========================================================= */
.family-lineage__paths {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.family-lineage__trunk,
.family-lineage__bus,
.family-lineage__path {
  fill: none;
  stroke: var(--children-line);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.family-lineage__trunk {
  stroke: var(--children-ink);
  stroke-width: 1.5;
}

.family-lineage__bus {
  stroke-dasharray: 2 7;
}

.family-lineage__path {
  stroke-dasharray: 7 9;
  stroke-dashoffset: 0;
  transition: stroke 380ms ease, stroke-width 380ms ease, opacity 380ms ease;
  animation: lineage-path-flow 1.2s linear infinite;
  opacity: 0.42;
}

.family-lineage__path.is-active {
  stroke: var(--yellow);
  stroke-width: 2.3;
  opacity: 1;
}

.family-lineage__origin-node,
.family-lineage__junction-node,
.family-lineage__record-node {
  vector-effect: non-scaling-stroke;
}

.family-lineage__origin-node {
  fill: var(--children-ink);
  stroke: var(--children-node-stroke);
  stroke-width: 3;
  animation: lineage-origin-pulse 2.7s ease-in-out infinite;
}

.family-lineage__junction-node {
  fill: var(--children-panel);
  stroke: var(--children-ink);
  stroke-width: 1.4;
}

.family-lineage__record-node {
  fill: var(--children-grey-two);
  stroke: var(--children-node-stroke);
  stroke-width: 3;
  transition: fill 320ms ease, r 320ms ease;
}

.family-lineage__record-node.is-active {
  fill: var(--yellow);
  r: 9px;
}

/* =========================================================
   THREE DESCENDANT RECORDS
   ========================================================= */
.family-lineage__records {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  min-width: 0;
  padding: 4px 0;
}

.family-lineage__record {
  position: relative;
  display: grid;
  grid-template-columns: clamp(92px, 9vw, 132px) minmax(0, 1fr) 18px;
  gap: clamp(14px, 1.8vw, 28px);
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: 12px 14px 12px 12px;
  border: 1px solid var(--children-line-soft);
  background: color-mix(in srgb, var(--children-panel) 94%, transparent);
  color: var(--children-ink);
  opacity: 0.56;
  transform: translateX(0) scale(0.985);
  transform-origin: left center;
  transition: opacity 500ms ease, transform 650ms cubic-bezier(0.16, 1, 0.3, 1), border-color 420ms ease, background-color 420ms ease, box-shadow 500ms ease;
}
.family-lineage__record::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 3px;
  background: transparent;
  transition: background-color 320ms ease;
}
.family-lineage__record::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--children-line-soft) 18%, transparent);
  transform: scaleX(0.45);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.family-lineage__record.is-active {
  z-index: 3;
  border-color: var(--children-line-strong);
  background: var(--children-panel);
  box-shadow: 16px 18px 40px var(--children-shadow);
  opacity: 1;
  transform: translateX(10px) scale(1);
}
.family-lineage__record.is-active::before {
  background: var(--yellow);
}
.family-lineage__record.is-active::after {
  transform: scaleX(1);
}

.family-lineage__record-index {
  position: absolute;
  top: 9px;
  right: 12px;
  color: var(--children-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(26px, 2.6vw, 42px);
  line-height: 1;
  opacity: 0.08;
  transition: opacity 350ms ease, color 350ms ease;
}

.family-lineage__record.is-active .family-lineage__record-index {
  color: var(--yellow);
  opacity: 0.55;
}

.family-lineage__record-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 0.88;
  overflow: hidden;
  border: 1px solid var(--children-line-strong);
  background: var(--children-panel-soft);
}
.family-lineage__record-photo img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  filter: grayscale(1) contrast(1.04);
  transform: scale(1.02);
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease;
}
.family-lineage__record-photo span {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  height: 1px;
  background: var(--children-photo-line);
}

.family-lineage__record.is-active .family-lineage__record-photo img {
  transform: scale(1.075);
  filter: grayscale(0.74) contrast(1.04);
}

.family-lineage__record figcaption {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding-right: 28px;
}
.family-lineage__record figcaption small,
.family-lineage__record figcaption span {
  color: var(--children-muted);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.family-lineage__record figcaption strong {
  color: var(--children-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(18px, 2vw, 31px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.family-lineage__record figcaption span {
  max-width: 260px;
  margin-top: 3px;
  line-height: 1.55;
}

.family-lineage__record-status {
  width: 8px;
  height: 8px;
  justify-self: end;
  border: 1px solid var(--children-line-strong);
  border-radius: 50%;
  background: var(--children-panel);
  transition: background-color 320ms ease, border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}

.family-lineage__record.is-active .family-lineage__record-status {
  border-color: var(--yellow);
  background: var(--yellow);
  box-shadow: 0 0 0 7px rgba(254, 221, 0, 0.12);
  transform: scale(1.08);
}

/* =========================================================
   ACTIVE RECORD COUNTER
   ========================================================= */
.family-lineage__active-record {
  position: absolute;
  right: 0;
  bottom: -2px;
  z-index: 15;
  display: grid;
  justify-items: end;
  gap: 3px;
  color: var(--children-muted);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.family-lineage__active-record strong {
  color: var(--children-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(22px, 2.6vw, 38px);
  font-weight: 400;
  line-height: 0.9;
}
.family-lineage__active-record b {
  color: var(--yellow);
  font-weight: inherit;
}

.family-lineage__coordinates {
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 15;
  display: flex;
  gap: 16px;
  color: var(--children-muted);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* =========================================================
   REGISTER FOOTER
   ========================================================= */
.family-lineage__footer {
  position: absolute;
  right: clamp(28px, 3.5vw, 50px);
  bottom: clamp(21px, 2.5vw, 31px);
  left: clamp(28px, 3.5vw, 50px);
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--children-line);
  color: var(--children-muted);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.family-lineage__footer > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.family-lineage__footer > div i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  animation: lineage-footer-status 1.8s ease-in-out infinite;
}
.family-lineage__footer strong {
  color: var(--children-ink);
}

/* =========================================================
   CHILD CARDS
   ========================================================= */
.children-grid {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 30px;
  border-top: 1px solid var(--children-ink);
  border-bottom: 1px solid var(--children-ink);
}

.child-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 30px;
  border-right: 1px solid var(--children-line);
  background: transparent;
  color: var(--children-ink);
  transition: background-color 200ms ease, color 200ms ease;
}
.child-card:last-child {
  border-right: 0;
}
.child-card .section-label {
  color: var(--children-muted-strong);
}
.child-card h3 {
  margin-top: 40px;
  color: var(--children-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(25px, 2.5vw, 42px);
  font-weight: 400;
  line-height: 0.96;
  text-transform: uppercase;
}
.child-card > p:not(.section-label) {
  margin: 20px 0;
  color: var(--children-copy);
  font-size: 11px;
  line-height: 1.8;
  text-align: justify;
}

.child-card__index {
  position: absolute;
  top: 22px;
  right: 24px;
  color: var(--children-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: 46px;
  opacity: 0.11;
}

.child-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin-top: auto;
  padding: 18px 0 4px;
  border-top: 1px solid var(--children-line);
  color: var(--children-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 200ms ease, border-color 200ms ease;
}
.child-card__link span:last-child {
  font-size: 16px;
  transition: transform 200ms ease;
}
.child-card__link:hover, .child-card__link:focus-visible {
  color: var(--children-ink);
  border-color: var(--yellow);
}
.child-card__link:hover span:last-child, .child-card__link:focus-visible span:last-child {
  transform: translate(4px, -4px);
}
.child-card__link:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 6px;
}

/* =========================================================
   DARK THEME
   ========================================================= */
html[data-theme=dark] .family-children {
  --children-bg: #171717;
  --children-ink: #ffffff;
  --children-muted: rgba(255, 255, 255, 0.42);
  --children-muted-strong: rgba(255, 255, 255, 0.56);
  --children-copy: rgba(255, 255, 255, 0.7);
  --children-line: rgba(255, 255, 255, 0.18);
  --children-line-soft: rgba(255, 255, 255, 0.095);
  --children-line-strong: rgba(255, 255, 255, 0.42);
  --children-panel: #111111;
  --children-panel-soft: #1b1b1b;
  --children-grid: rgba(255, 255, 255, 0.04);
  --children-grey-one: #555555;
  --children-grey-two: #787878;
  --children-shadow: rgba(0, 0, 0, 0.48);
  --children-photo-line: rgba(255, 255, 255, 0.42);
  --children-node-stroke: #171717;
}
html[data-theme=dark] .family-lineage__source-image img {
  filter: grayscale(1) contrast(1.08) brightness(0.83);
}
html[data-theme=dark] .family-lineage:hover .family-lineage__source-image img {
  filter: grayscale(0.84) contrast(1.05) brightness(0.91);
}
html[data-theme=dark] .family-lineage__record-photo img {
  filter: grayscale(1) contrast(1.06) brightness(0.84);
}
html[data-theme=dark] .family-lineage__record.is-active .family-lineage__record-photo img {
  filter: grayscale(0.72) contrast(1.04) brightness(0.94);
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes lineage-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes lineage-path-flow {
  to {
    stroke-dashoffset: -16;
  }
}
@keyframes lineage-origin-pulse {
  0%, 100% {
    r: 7px;
    opacity: 0.72;
  }
  50% {
    r: 10px;
    opacity: 1;
  }
}
@keyframes lineage-source-scan {
  0%, 14% {
    top: -4%;
    opacity: 0;
  }
  22% {
    opacity: 0.95;
  }
  72% {
    opacity: 0.95;
  }
  82%, 100% {
    top: 104%;
    opacity: 0;
  }
}
@keyframes lineage-header-status {
  0%, 100% {
    opacity: 0.42;
  }
  50% {
    opacity: 1;
  }
}
@keyframes lineage-footer-status {
  0%, 100% {
    opacity: 0.38;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}
/* =========================================================
   RESPONSIVE — 1180
   ========================================================= */
@media (max-width: 1180px) {
  .children-grid {
    grid-template-columns: 1fr;
  }
  .children-grid > * {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--children-line);
  }
  .children-grid > *:last-child {
    border-bottom: 0;
  }
  .family-lineage__stage {
    grid-template-columns: minmax(210px, 0.78fr) minmax(340px, 1.22fr);
    gap: 78px;
  }
}
/* =========================================================
   RESPONSIVE — 1000
   ========================================================= */
@media (max-width: 1000px) {
  .family-lineage {
    min-height: 760px;
  }
  .family-lineage__stage {
    grid-template-columns: minmax(190px, 0.72fr) minmax(320px, 1.28fr);
    gap: 55px;
  }
  .family-lineage__source-portrait,
  .family-lineage__source-code {
    width: min(100%, 250px);
  }
  .family-lineage__record {
    grid-template-columns: 92px minmax(0, 1fr) 14px;
  }
}
/* =========================================================
   RESPONSIVE — 860
   ========================================================= */
@media (max-width: 860px) {
  .family-children {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .family-children__intro {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .family-children__rail strong {
    display: none;
  }
  .family-lineage,
  .children-grid {
    grid-column: 2;
  }
  .family-lineage {
    min-height: 920px;
  }
  .family-lineage__stage {
    top: 105px;
    bottom: 76px;
    grid-template-columns: 1fr;
    grid-template-rows: 320px 1fr;
    gap: 34px;
  }
  .family-lineage__source {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0 30px;
    align-items: center;
  }
  .family-lineage__source-meta {
    grid-column: 1/-1;
  }
  .family-lineage__source-portrait {
    width: 200px;
  }
  .family-lineage__source-code {
    width: 100%;
    margin-top: 0;
  }
  .family-lineage__paths {
    display: none;
  }
  .family-lineage__records {
    gap: 10px;
  }
  .family-lineage__record.is-active {
    transform: translateX(6px) scale(1);
  }
}
/* =========================================================
   RESPONSIVE — 720
   ========================================================= */
@media (max-width: 720px) {
  .family-lineage {
    min-height: 980px;
  }
  .family-lineage__header {
    right: 20px;
    left: 20px;
  }
  .family-lineage__header > span {
    display: none;
  }
  .family-lineage__header > div {
    margin-left: auto;
  }
  .family-lineage__stage {
    right: 20px;
    left: 20px;
    grid-template-rows: 330px 1fr;
  }
  .family-lineage__source {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 0 22px;
  }
  .family-lineage__source-portrait {
    width: 170px;
  }
  .family-lineage__source-code strong {
    font-size: 27px;
  }
  .family-lineage__record {
    grid-template-columns: 82px minmax(0, 1fr) 12px;
    gap: 13px;
  }
  .family-lineage__record figcaption strong {
    font-size: clamp(16px, 4vw, 24px);
  }
  .family-lineage__record figcaption span {
    display: none;
  }
  .family-lineage__coordinates {
    display: none;
  }
  .family-lineage__active-record {
    bottom: -1px;
  }
  .family-lineage__footer {
    right: 20px;
    left: 20px;
    grid-template-columns: 1fr auto;
  }
  .family-lineage__footer > div {
    display: none;
  }
}
/* =========================================================
   RESPONSIVE — 620
   ========================================================= */
@media (max-width: 620px) {
  .family-children {
    display: block;
    padding-right: 16px;
    padding-left: 16px;
  }
  .family-children__rail {
    flex-direction: row;
    align-items: center;
    margin-bottom: 34px;
  }
  .family-children__rail span {
    font-size: 42px;
  }
  .family-children__rail i {
    width: auto;
    height: 1px;
    min-height: 0;
    flex: 1;
    margin: 0;
  }
  .family-lineage {
    margin-top: 54px;
  }
}
/* =========================================================
   RESPONSIVE — 520
   ========================================================= */
@media (max-width: 520px) {
  .family-lineage {
    min-height: 1030px;
  }
  .family-lineage__ticker {
    font-size: 100px;
  }
  .family-lineage__stage {
    top: 96px;
    grid-template-rows: 355px 1fr;
  }
  .family-lineage__source {
    display: block;
  }
  .family-lineage__source-meta {
    margin-bottom: 10px;
  }
  .family-lineage__source-portrait {
    width: 155px;
    margin-right: auto;
    margin-left: auto;
  }
  .family-lineage__source-code {
    margin-top: 19px;
  }
  .family-lineage__record {
    grid-template-columns: 72px minmax(0, 1fr) 10px;
    padding: 9px 10px 9px 9px;
  }
  .family-lineage__record-index {
    font-size: 27px;
  }
  .family-lineage__record figcaption {
    padding-right: 16px;
  }
}
/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .family-lineage__ticker,
  .family-lineage__path,
  .family-lineage__origin-node,
  .family-lineage__source-scan,
  .family-lineage__header i,
  .family-lineage__footer i {
    animation: none !important;
  }
  .family-lineage__source-backplate,
  .family-lineage__source-image,
  .family-lineage__record,
  .family-lineage__record-photo img {
    transition: none !important;
  }
}
/* =========================================================
   FAMILY ARCHIVE
   ========================================================= */
.family-archive {
  /* =======================================================
     LIGHT THEME
     ======================================================= */
  --family-archive-bg: #ffffff;
  --family-archive-ink: #171717;
  --family-archive-muted: rgba(23, 23, 23, 0.56);
  --family-archive-copy: rgba(23, 23, 23, 0.68);
  --family-archive-line: rgba(23, 23, 23, 0.2);
  --family-archive-line-strong: #171717;
  --family-archive-visual-bg: #ffffff;
  --family-archive-visual-grid: rgba(23, 23, 23, 0.08);
  --family-archive-photo-bg: #ffffff;
  --family-archive-photo-ink: #171717;
  --family-archive-photo-border: rgba(255, 255, 255, 0.75);
  --family-archive-photo-shadow: rgba(0, 0, 0, 0.35);
  display: grid;
  grid-template-columns: 31.5% 1fr calc(25% - 1px);
  align-items: stretch;
  min-height: 650px;
  border-top: 1px solid var(--family-archive-line);
  border-bottom: 1px solid var(--family-archive-line);
  background: var(--family-archive-bg);
  color: var(--family-archive-ink);
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

/* =========================================================
   VISUAL / PHOTOGRAPHS
   ========================================================= */
.family-archive__visual {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  border-right: 1px solid var(--family-archive-line-strong);
  background: linear-gradient(to right, var(--family-archive-visual-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--family-archive-visual-grid) 1px, transparent 1px), radial-gradient(circle at 50% 45%, rgba(254, 221, 0, 0.15), transparent 40%), var(--family-archive-visual-bg);
  background-size: 40px 40px, 40px 40px, auto, auto;
  transition: background-color 240ms ease, border-color 240ms ease;
}

/* =========================================================
   ARCHIVE PHOTOGRAPH
   ========================================================= */
.archive-photo {
  --rotation: 0deg;
  position: absolute;
  z-index: 3;
  width: clamp(125px, 14vw, 220px);
  margin: 0;
  padding: 9px 9px 28px;
  border: 1px solid var(--family-archive-photo-border);
  background: var(--family-archive-photo-bg);
  box-shadow: 0 18px 34px var(--family-archive-photo-shadow), 7px 7px 0 rgba(254, 221, 0, 0.7);
  transform: rotate(var(--rotation));
  transition: transform 300ms ease, box-shadow 300ms ease, background-color 240ms ease, border-color 240ms ease, z-index 0s 300ms;
}
.archive-photo::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  z-index: 5;
  width: 52px;
  height: 18px;
  background: rgba(254, 221, 0, 0.78);
  transform: translateX(-50%) rotate(-2deg);
}
.archive-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 0.82;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: filter 240ms ease;
}
.archive-photo figcaption {
  position: absolute;
  right: 9px;
  bottom: 9px;
  left: 9px;
  overflow: hidden;
  color: var(--family-archive-photo-ink);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 240ms ease;
}
.archive-photo:hover {
  z-index: 20;
  transform: translateY(-10px) rotate(var(--rotation)) scale(1.05);
  box-shadow: 0 26px 48px rgba(0, 0, 0, 0.48), 10px 10px 0 var(--yellow);
  transition-delay: 0s;
}

/* =========================================================
   INDIVIDUAL PHOTOGRAPHS
   ========================================================= */
.archive-photo--one {
  --rotation: -9deg;
  top: 9%;
  left: 8%;
  width: clamp(145px, 17vw, 255px);
}

.archive-photo--two {
  --rotation: 7deg;
  top: 13%;
  right: 7%;
  width: clamp(130px, 15vw, 225px);
}

.archive-photo--three {
  --rotation: 3deg;
  top: 35%;
  left: 34%;
  z-index: 7;
  width: clamp(155px, 18vw, 275px);
}

.archive-photo--four {
  --rotation: -5deg;
  bottom: 7%;
  left: 6%;
  width: clamp(125px, 14vw, 210px);
}

.archive-photo--five {
  --rotation: 10deg;
  right: 8%;
  bottom: 6%;
  width: clamp(135px, 15vw, 225px);
}

/* =========================================================
   ARCHIVE THREADS
   ========================================================= */
.archive-thread {
  position: absolute;
  z-index: 1;
  display: block;
  background: var(--yellow);
  opacity: 0.7;
}

.archive-thread--one {
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
}

.archive-thread--two {
  top: 50%;
  right: 7%;
  left: 7%;
  height: 1px;
}

/* =========================================================
   COPY
   ========================================================= */
.family-archive__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(54px, 7vw, 110px);
  border-right: 1px solid var(--family-archive-line);
  background: var(--family-archive-bg);
  color: var(--family-archive-ink);
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}
.family-archive__copy .section-label {
  color: var(--family-archive-muted);
}
.family-archive__copy h2 {
  margin: 22px 0 30px;
  color: var(--family-archive-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(38px, 3.7vw, 78px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.052em;
  text-transform: uppercase;
}
.family-archive__copy > p:last-child {
  margin: 0;
  color: var(--family-archive-copy);
  font-size: 11px;
  line-height: 1.85;
  text-align: justify;
}

/* =========================================================
   LINKS
   ========================================================= */
.family-archive__links {
  display: flex;
  flex-direction: column;
  background: var(--family-archive-bg);
  transition: background-color 240ms ease;
}
.family-archive__links a {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 150px;
  padding: 28px;
  border-bottom: 1px solid var(--family-archive-line);
  background: transparent;
  color: var(--family-archive-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(18px, 1.8vw, 29px);
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.family-archive__links a:last-child {
  border-bottom: 0;
}
.family-archive__links a b {
  color: inherit;
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  transition: transform 180ms ease;
}
.family-archive__links a:hover, .family-archive__links a:focus-visible {
  background: var(--yellow);
  color: #171717;
}
.family-archive__links a:hover b, .family-archive__links a:focus-visible b {
  transform: translate(5px, -5px);
}
.family-archive__links a:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: -3px;
}

/* =========================================================
   DARK THEME
   Linked directly to Header switch
   ========================================================= */
html[data-theme=dark] .family-archive {
  --family-archive-bg: #171717;
  --family-archive-ink: #ffffff;
  --family-archive-muted: rgba(255, 255, 255, 0.52);
  --family-archive-copy: rgba(255, 255, 255, 0.7);
  --family-archive-line: rgba(255, 255, 255, 0.18);
  --family-archive-line-strong: rgba(255, 255, 255, 0.72);
  --family-archive-visual-bg: #0d0d0d;
  --family-archive-visual-grid: rgba(255, 255, 255, 0.075);
  /*
    Keep the photographs as physical white prints.
    This gives the dark version contrast rather than
    simply making everything black.
  */
  --family-archive-photo-bg: #f4f4f1;
  --family-archive-photo-ink: #171717;
  --family-archive-photo-border: rgba(255, 255, 255, 0.42);
  --family-archive-photo-shadow: rgba(0, 0, 0, 0.68);
}
html[data-theme=dark] .family-archive__visual {
  background: linear-gradient(to right, var(--family-archive-visual-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--family-archive-visual-grid) 1px, transparent 1px), radial-gradient(circle at 50% 45%, rgba(254, 221, 0, 0.11), transparent 40%), var(--family-archive-visual-bg);
  background-size: 40px 40px, 40px 40px, auto, auto;
}
html[data-theme=dark] .archive-photo img {
  filter: brightness(0.9) contrast(1.05);
}
html[data-theme=dark] .archive-photo:hover img {
  filter: brightness(0.98) contrast(1.03);
}
html[data-theme=dark] .family-archive__links a:hover, html[data-theme=dark] .family-archive__links a:focus-visible {
  color: #171717;
}

/* =========================================================
   RESPONSIVE — 1180
   ========================================================= */
@media (max-width: 1180px) {
  .family-archive {
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  }
  .family-archive__copy {
    border-right: 0;
  }
  .family-archive__links {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--family-archive-line);
  }
  .family-archive__links a {
    border-right: 1px solid var(--family-archive-line);
    border-bottom: 0;
  }
  .family-archive__links a:last-child {
    border-right: 0;
  }
}
/* =========================================================
   RESPONSIVE — 860
   ========================================================= */
@media (max-width: 860px) {
  .family-archive {
    grid-template-columns: 1fr;
  }
  .family-archive__visual {
    min-height: 680px;
    border-right: 0;
    border-bottom: 1px solid var(--family-archive-line-strong);
  }
  .family-archive__links {
    grid-column: auto;
  }
}
/* =========================================================
   RESPONSIVE — 620
   ========================================================= */
@media (max-width: 620px) {
  .family-archive__visual {
    min-height: 620px;
  }
  .archive-photo {
    padding: 6px 6px 23px;
  }
  .archive-photo::before {
    width: 38px;
    height: 13px;
  }
  .archive-photo figcaption {
    right: 6px;
    bottom: 7px;
    left: 6px;
    font-size: 5px;
  }
  .archive-photo--one {
    top: 7%;
    left: 5%;
    width: 145px;
  }
  .archive-photo--two {
    top: 10%;
    right: 4%;
    width: 125px;
  }
  .archive-photo--three {
    top: 35%;
    left: 50%;
    width: 165px;
    transform: translateX(-50%) rotate(var(--rotation));
  }
  .archive-photo--three:hover {
    transform: translateX(-50%) translateY(-8px) rotate(var(--rotation)) scale(1.04);
  }
  .archive-photo--four {
    bottom: 6%;
    left: 4%;
    width: 120px;
  }
  .archive-photo--five {
    right: 4%;
    bottom: 7%;
    width: 130px;
  }
  .family-archive__links {
    grid-template-columns: 1fr;
  }
  .family-archive__links a {
    border-right: 0;
    border-bottom: 1px solid var(--family-archive-line);
  }
  .family-archive__links a:last-child {
    border-bottom: 0;
  }
}
/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .archive-photo,
  .archive-photo img,
  .family-archive__links a,
  .family-archive__links a b {
    transition: none !important;
  }
}
/* =========================================================
   FAMILY CHAPTER DIVIDERS
========================================================= */
.family-chapter-divider {
  /* =======================================================
     LIGHT THEME
  ======================================================= */
  --family-divider-bg: #ffffff;
  --family-divider-ink: #171717;
  --family-divider-muted: rgba(23, 23, 23, 0.42);
  --family-divider-line: rgba(23, 23, 23, 0.22);
  --family-divider-border: rgba(23, 23, 23, 0.14);
  --family-divider-tick: rgba(23, 23, 23, 0.34);
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(60px, 1fr) max-content;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  width: 100%;
  min-height: 52px;
  padding: 0 clamp(24px, 5vw, 82px);
  overflow: hidden;
  background: var(--family-divider-bg);
  color: var(--family-divider-ink);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

/* =========================================================
   HEADER / FOOTER BOUNDARY VERSION
========================================================= */
.family-chapter-divider--boundary {
  min-height: 44px;
  font-size: 6px;
  letter-spacing: 0.18em;
}

/* =========================================================
   PREVIOUS / LEFT LABEL
========================================================= */
.family-chapter-divider__from {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--family-divider-muted);
  white-space: nowrap;
}

/* =========================================================
   NEXT / RIGHT LABEL
========================================================= */
.family-chapter-divider__to {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--family-divider-ink);
  font-size: inherit;
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
   YELLOW DESTINATION MARK
========================================================= */
.family-chapter-divider__to::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  background: #fedd00;
  vertical-align: 1px;
}

/* =========================================================
   CENTRAL LINE
========================================================= */
.family-chapter-divider__line {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: var(--family-divider-line);
}

/* =========================================================
   MOVING YELLOW SIGNAL
========================================================= */
.family-chapter-divider__line i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: clamp(38px, 5vw, 76px);
  height: 1px;
  background: #fedd00;
  animation: family-divider-signal 5.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* boundary signal slightly smaller */
.family-chapter-divider--boundary .family-chapter-divider__line i {
  width: clamp(28px, 4vw, 58px);
  animation-duration: 7s;
}

/* =========================================================
   REGISTRATION TICKS
========================================================= */
.family-chapter-divider::before,
.family-chapter-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 9px;
  background: var(--family-divider-tick);
  transform: translateY(-50%);
}

.family-chapter-divider::before {
  left: clamp(12px, 2vw, 32px);
}

.family-chapter-divider::after {
  right: clamp(12px, 2vw, 32px);
}

/* =========================================================
   DARK THEME
========================================================= */
html[data-theme=dark] .family-chapter-divider {
  --family-divider-bg: #171717;
  --family-divider-ink: #ffffff;
  --family-divider-muted: rgba(255, 255, 255, 0.46);
  --family-divider-line: rgba(255, 255, 255, 0.22);
  --family-divider-border: rgba(255, 255, 255, 0.16);
  --family-divider-tick: rgba(255, 255, 255, 0.38);
}

/* =========================================================
   HOVER
========================================================= */
@media (hover: hover) {
  .family-chapter-divider__to {
    transition: color 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .family-chapter-divider:hover .family-chapter-divider__to {
    transform: translateX(3px);
  }
  .family-chapter-divider:hover .family-chapter-divider__line i {
    animation-duration: 2.8s;
  }
  .family-chapter-divider--boundary:hover .family-chapter-divider__line i {
    animation-duration: 4s;
  }
}
/* =========================================================
   SIGNAL ANIMATION
========================================================= */
@keyframes family-divider-signal {
  0% {
    left: 0;
    transform: translateX(-110%);
  }
  42% {
    left: 100%;
    transform: translateX(0);
  }
  58% {
    left: 100%;
    transform: translateX(0);
  }
  100% {
    left: 0;
    transform: translateX(-110%);
  }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 820px) {
  .family-chapter-divider {
    min-height: 48px;
    padding: 0 24px;
    gap: 14px;
    font-size: 6px;
  }
  .family-chapter-divider--boundary {
    min-height: 42px;
    font-size: 5.5px;
  }
  .family-chapter-divider::before,
  .family-chapter-divider::after {
    display: none;
  }
  .family-chapter-divider__to::before {
    width: 4px;
    height: 4px;
    margin-right: 7px;
  }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 560px) {
  .family-chapter-divider {
    grid-template-columns: max-content minmax(24px, 1fr) max-content;
    min-height: 44px;
    padding: 0 16px;
    gap: 9px;
    font-size: 5.5px;
    letter-spacing: 0.11em;
  }
  .family-chapter-divider--boundary {
    min-height: 40px;
    font-size: 5px;
  }
  .family-chapter-divider__from {
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .family-chapter-divider__to {
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .family-chapter-divider--boundary .family-chapter-divider__from {
    max-width: 125px;
  }
  .family-chapter-divider--boundary .family-chapter-divider__to {
    max-width: 105px;
  }
  .family-chapter-divider__to::before {
    display: none;
  }
  .family-chapter-divider__line i {
    width: 30px;
  }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .family-chapter-divider__line i {
    left: 50%;
    animation: none;
    transform: translateX(-50%);
  }
  .family-chapter-divider__to {
    transition: none;
  }
}
/* =========================================================
   ARCHIVE
   Section components
========================================================= */
/* =========================================================
   ARCHIVE / DIGITAL RAIN
   Section 01
========================================================= */
.archive-digital-rain {
  /* =======================================================
     LIGHT THEME
  ======================================================= */
  --digital-rain-bg: #ffffff;
  --digital-rain-ink: #171717;
  --digital-rain-muted: rgba(23, 23, 23, 0.58);
  --digital-rain-description: rgba(23, 23, 23, 0.72);
  --digital-rain-line: rgba(23, 23, 23, 0.2);
  --digital-rain-link-line: rgba(23, 23, 23, 0.28);
  --digital-rain-visual-border: rgba(23, 23, 23, 0.12);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  width: 100%;
  min-height: calc(100vh - var(--header-height, 90px));
  background: var(--digital-rain-bg);
  color: var(--digital-rain-ink);
  font-family: "JetBrains Mono", monospace;
  transition: background-color 220ms ease, color 220ms ease;
}

/* =========================================================
   DARK THEME
========================================================= */
html[data-theme=dark] .archive-digital-rain {
  --digital-rain-bg: #171717;
  --digital-rain-ink: #ffffff;
  --digital-rain-muted: rgba(255, 255, 255, 0.5);
  --digital-rain-description: rgba(255, 255, 255, 0.72);
  --digital-rain-line: rgba(255, 255, 255, 0.2);
  --digital-rain-link-line: rgba(255, 255, 255, 0.28);
  --digital-rain-visual-border: rgba(255, 255, 255, 0.15);
}

/* =========================================================
   COPY
========================================================= */
.archive-digital-rain__copy {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(68px, 8vw, 132px) clamp(24px, 5vw, 84px);
  border-right: 1px solid var(--digital-rain-line);
  transition: border-color 220ms ease;
}

/* =========================================================
   YELLOW REGISTRATION LINE
========================================================= */
.archive-digital-rain__copy::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 10%;
  width: 1px;
  height: 34%;
  background: #fedd00;
}

/* =========================================================
   LABEL
========================================================= */
.archive-digital-rain .section-label {
  margin: 0;
  color: var(--digital-rain-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 220ms ease;
}

/* =========================================================
   TITLE
========================================================= */
.archive-digital-rain__copy h2 {
  max-width: 850px;
  margin: 24px 0 30px;
  color: var(--digital-rain-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(52px, 4.2vw, 116px);
  font-weight: 400;
  line-height: 0.87;
  letter-spacing: -0.066em;
  text-transform: uppercase;
  transition: color 220ms ease;
}

/* =========================================================
   DESCRIPTION
========================================================= */
.archive-digital-rain__description {
  max-width: 650px;
  margin: 0;
  color: var(--digital-rain-description);
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(12px, 1.15vw, 17px);
  line-height: 1.85;
  text-align: justify;
  transition: color 220ms ease;
}

/* =========================================================
   LINK
========================================================= */
.archive-digital-rain__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 215px;
  margin-top: 32px;
  padding-top: 10px;
  border-top: 1px solid var(--digital-rain-link-line);
  color: var(--digital-rain-ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 180ms ease, color 220ms ease;
}

.archive-digital-rain__link span:last-child {
  font-size: 17px;
  transition: transform 200ms ease, color 200ms ease;
}

.archive-digital-rain__link:hover,
.archive-digital-rain__link:focus-visible {
  border-top-color: #fedd00;
  outline: none;
}

.archive-digital-rain__link:hover span:last-child,
.archive-digital-rain__link:focus-visible span:last-child {
  color: #fedd00;
  transform: translate(4px, 4px);
}

/* =========================================================
   DIGITAL RAIN VISUAL

   The archival terminal remains dark in BOTH themes.
========================================================= */
.archive-digital-rain__visual {
  position: relative;
  min-width: 0;
  min-height: clamp(360px, 42vw, 560px);
  overflow: hidden;
  border: 1px solid var(--digital-rain-visual-border);
  background: radial-gradient(circle at 50% 18%, rgba(254, 221, 0, 0.14) 0%, rgba(254, 221, 0, 0.04) 26%, transparent 52%), linear-gradient(180deg, #0d0c07 0%, #050505 100%);
  transition: border-color 220ms ease;
}

/* =========================================================
   CANVAS
========================================================= */
.archive-digital-rain__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* =========================================================
   GRID OVERLAY
========================================================= */
.archive-digital-rain__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image: linear-gradient(rgba(254, 221, 0, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(254, 221, 0, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* =========================================================
   VEIL
========================================================= */
.archive-digital-rain__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(4, 8, 5, 0.08) 0%, rgba(4, 8, 5, 0.18) 18%, rgba(4, 8, 5, 0.28) 100%);
}

/* =========================================================
   TOP REGISTER
========================================================= */
.archive-digital-rain__top {
  position: absolute;
  top: 18px;
  right: 20px;
  left: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(254, 221, 0, 0.76);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
}

/* =========================================================
   BOTTOM REGISTER
========================================================= */
.archive-digital-rain__bottom {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: rgba(254, 221, 0, 0.62);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
}

/* =========================================================
   RESPONSIVE — 860
========================================================= */
@media (max-width: 860px) {
  .archive-digital-rain {
    grid-template-columns: 1fr;
  }
  .archive-digital-rain__copy {
    min-height: 680px;
    border-right: 0;
    border-bottom: 1px solid var(--digital-rain-line);
  }
  .archive-digital-rain__copy::after {
    right: auto;
    bottom: -1px;
    left: 10%;
    width: 34%;
    height: 1px;
  }
  .archive-digital-rain__visual {
    min-height: 680px;
  }
}
/* =========================================================
   RESPONSIVE — 720
========================================================= */
@media (max-width: 720px) {
  .archive-digital-rain__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}
/* =========================================================
   RESPONSIVE — 620
========================================================= */
@media (max-width: 620px) {
  .archive-digital-rain__copy {
    min-height: 620px;
    padding-right: 20px;
    padding-left: 20px;
  }
  .archive-digital-rain__copy h2 {
    font-size: clamp(46px, 15vw, 72px);
  }
  .archive-digital-rain__visual {
    min-height: 560px;
  }
  .archive-digital-rain__top,
  .archive-digital-rain__bottom {
    right: 16px;
    left: 16px;
    font-size: 9px;
  }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .archive-digital-rain,
  .archive-digital-rain * {
    transition-duration: 0.01ms !important;
  }
}
/* =========================================================
   ARCHIVE / COLLECTION MAP
   Section 02
========================================================= */
.collection-map {
  /* =======================================================
     LIGHT THEME
  ======================================================= */
  --collection-bg: #ffffff;
  --collection-ink: #171717;
  --collection-muted: rgba(23, 23, 23, 0.58);
  --collection-copy: rgba(23, 23, 23, 0.68);
  --collection-line: rgba(23, 23, 23, 0.2);
  --collection-line-medium: rgba(23, 23, 23, 0.32);
  --collection-line-strong: rgba(23, 23, 23, 0.72);
  --collection-grid-bg: #ffffff;
  --collection-tile-bg: rgba(255, 255, 255, 0.7);
  --collection-tile-hover-bg: #ffffff;
  --collection-tile-gradient: rgba(23, 23, 23, 0.025);
  --collection-corner: rgba(23, 23, 23, 0.25);
  --collection-corner-hover: rgba(23, 23, 23, 0.55);
  --collection-number-bg: rgba(255, 255, 255, 0.82);
  --collection-number-border: rgba(23, 23, 23, 0.17);
  --collection-device-bg: #ffffff;
  --collection-device-ink: #171717;
  --collection-device-muted: rgba(23, 23, 23, 0.34);
  --collection-device-line: rgba(23, 23, 23, 0.14);
  width: 100%;
  padding: clamp(76px, 9vw, 150px) clamp(20px, 5vw, 84px);
  background: var(--collection-bg);
  color: var(--collection-ink);
  font-family: "JetBrains Mono", monospace;
  transition: background-color 220ms ease, color 220ms ease;
  /* =======================================================
     HEADING
  ======================================================= */
}
.collection-map__heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: end;
  gap: clamp(40px, 7vw, 120px);
  margin-bottom: clamp(52px, 6vw, 92px);
  padding-bottom: clamp(28px, 3vw, 42px);
  border-bottom: 1px solid var(--collection-line-medium);
}
.collection-map__heading::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: clamp(90px, 12vw, 180px);
  height: 3px;
  background: #fedd00;
}
.collection-map__heading h2 {
  max-width: 740px;
  margin: 20px 0 0;
  color: var(--collection-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(38px, 4vw, 82px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  transition: color 220ms ease;
}
.collection-map__heading > p {
  position: relative;
  margin: 0;
  padding-left: clamp(18px, 2vw, 30px);
  border-left: 1px solid var(--collection-line);
  color: var(--collection-copy);
  font-size: clamp(11px, 1vw, 15px);
  line-height: 1.8;
  text-align: justify;
  transition: color 220ms ease, border-color 220ms ease;
}
.collection-map {
  /* =======================================================
     SECTION LABEL
  ======================================================= */
}
.collection-map .section-label {
  color: var(--collection-muted);
  transition: color 220ms ease;
}
.collection-map {
  /* =======================================================
     GRID
  ======================================================= */
}
.collection-map__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--collection-line-strong);
  background: var(--collection-grid-bg);
  box-shadow: 0 0 0 4px var(--collection-bg), 0 0 0 5px var(--collection-line);
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  /* yellow registration mark */
}
.collection-map__grid::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 10;
  width: clamp(48px, 6vw, 90px);
  height: 4px;
  background: #fedd00;
  pointer-events: none;
}
.collection-map__grid {
  /* lower-right registration mark */
}
.collection-map__grid::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 10;
  width: clamp(32px, 4vw, 58px);
  height: 4px;
  background: var(--collection-ink);
  pointer-events: none;
  transition: background-color 220ms ease;
}
.collection-map {
  /* =======================================================
     COLLECTION TILE
  ======================================================= */
}
.collection-map .collection-tile {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 460px;
  padding: clamp(22px, 3vw, 44px);
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--collection-line);
  border-bottom: 1px solid var(--collection-line);
  background: linear-gradient(135deg, var(--collection-tile-gradient) 0%, transparent 35%), var(--collection-tile-bg);
  color: var(--collection-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 260ms ease, box-shadow 260ms ease, color 220ms ease, border-color 220ms ease;
  /* yellow interaction line */
}
.collection-map .collection-tile::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 4;
  height: 3px;
  background: #fedd00;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}
.collection-map .collection-tile {
  /* archival corner */
}
.collection-map .collection-tile::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 3;
  width: 14px;
  height: 14px;
  border-top: 1px solid var(--collection-corner);
  border-left: 1px solid var(--collection-corner);
  pointer-events: none;
  transition: width 260ms ease, height 260ms ease, border-color 260ms ease;
}
.collection-map .collection-tile:nth-child(2n) {
  border-right: 0;
}
.collection-map .collection-tile:nth-last-child(-n+2) {
  border-bottom: 0;
}
.collection-map .collection-tile:hover, .collection-map .collection-tile:focus-visible {
  z-index: 2;
  background: linear-gradient(135deg, rgba(254, 221, 0, 0.055) 0%, transparent 32%), var(--collection-tile-hover-bg);
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--collection-line-strong);
}
.collection-map .collection-tile:hover::after, .collection-map .collection-tile:focus-visible::after {
  transform: scaleX(1);
}
.collection-map .collection-tile:hover::before, .collection-map .collection-tile:focus-visible::before {
  width: 22px;
  height: 22px;
  border-color: var(--collection-corner-hover);
}
.collection-map .collection-tile h3 {
  margin: 0 0 16px;
  color: var(--collection-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(21px, 2vw, 32px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  transition: color 220ms ease;
}
.collection-map .collection-tile p {
  margin: 0;
  color: var(--collection-copy);
  font-size: 11px;
  line-height: 1.75;
  transition: color 220ms ease;
}
.collection-map .collection-tile {
  /* =====================================================
     NUMBER
  ===================================================== */
}
.collection-map .collection-tile__number {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid var(--collection-number-border);
  background: var(--collection-number-bg);
  color: var(--collection-muted);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.14em;
  transition: border-color 220ms ease, background-color 220ms ease, color 220ms ease;
}
.collection-map .collection-tile:hover .collection-map .collection-tile__number, .collection-map .collection-tile:focus-visible .collection-map .collection-tile__number {
  border-color: var(--collection-line-strong);
  background: var(--collection-tile-hover-bg);
  color: var(--collection-ink);
}
.collection-map .collection-tile {
  /* =====================================================
     EXPLORE COLLECTION
  ===================================================== */
}
.collection-map .collection-tile__action {
  position: relative;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--collection-line-medium);
  color: var(--collection-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: border-color 220ms ease, color 220ms ease;
}
.collection-map .collection-tile__action::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 44px;
  height: 1px;
  background: #fedd00;
  transition: width 240ms ease;
}
.collection-map .collection-tile__action span {
  transition: letter-spacing 220ms ease;
}
.collection-map .collection-tile__action i {
  display: inline-block;
  color: var(--collection-ink);
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  transform: translate(0, 0);
  transition: color 220ms ease, transform 220ms ease;
}
.collection-map .collection-tile__action:hover::before {
  width: 76px;
}
.collection-map .collection-tile__action:hover i {
  color: #fedd00;
  transform: translate(6px, -5px);
}
.collection-map .collection-tile:hover .collection-map .collection-tile__action, .collection-map .collection-tile:focus-visible .collection-map .collection-tile__action {
  border-top-color: var(--collection-line-strong);
}
.collection-map .collection-tile:hover .collection-map .collection-tile__action::before, .collection-map .collection-tile:focus-visible .collection-map .collection-tile__action::before {
  width: 76px;
}
.collection-map .collection-tile:hover .collection-map .collection-tile__action i, .collection-map .collection-tile:focus-visible .collection-map .collection-tile__action i {
  color: #fedd00;
  transform: translate(6px, -5px);
}
.collection-map .collection-tile {
  /* =====================================================
     ANIMATION CONTAINER
  ===================================================== */
}
.collection-map .collection-tile__icon {
  position: relative;
  width: 100%;
  max-width: 230px;
  height: 170px;
  margin: 20px auto 44px;
  /* ===================================================
     01 — DOCUMENTS
  =================================================== */
}
.collection-map .collection-tile__icon--documents {
  display: grid;
  place-items: center;
}
.collection-map .collection-tile__icon--documents .archive-document-machine {
  position: relative;
  width: 210px;
  height: 145px;
  overflow: hidden;
  border: 1px solid var(--collection-device-ink);
  background: var(--collection-device-bg);
  color: var(--collection-device-ink);
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.collection-map .collection-tile__icon--documents .archive-document-machine__top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-bottom: 1px solid var(--collection-device-ink);
  background: var(--collection-tile-gradient);
}
.collection-map .collection-tile__icon--documents .archive-document-machine__top i {
  display: block;
  width: 4px;
  height: 4px;
  background: var(--collection-device-ink);
}
.collection-map .collection-tile__icon--documents .archive-document-machine__viewport {
  position: absolute;
  top: 20px;
  right: 17px;
  bottom: 25px;
  left: 17px;
  overflow: hidden;
  border-right: 1px solid var(--collection-device-line);
  border-left: 1px solid var(--collection-device-line);
}
.collection-map .collection-tile__icon--documents .archive-document-machine__paper {
  position: absolute;
  top: 10px;
  right: 15px;
  left: 15px;
  height: 118px;
  border: 1px solid var(--collection-device-ink);
  background: var(--collection-device-bg);
  color: var(--collection-device-ink);
  animation: document-feed 4.8s ease-in-out infinite;
}
.collection-map .collection-tile__icon--documents .archive-document-machine__paper > b {
  position: absolute;
  top: 10px;
  left: 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.collection-map .collection-tile__icon--documents .archive-document-machine__paper .archive-document-line {
  position: absolute;
  left: 11px;
  display: block;
  height: 1px;
  background: var(--collection-device-muted);
}
.collection-map .collection-tile__icon--documents .archive-document-machine__paper .archive-document-line--title {
  top: 29px;
  width: 47%;
  height: 2px;
  background: var(--collection-device-ink);
}
.collection-map .collection-tile__icon--documents .archive-document-machine__paper .archive-document-line--one {
  top: 48px;
  width: 74%;
}
.collection-map .collection-tile__icon--documents .archive-document-machine__paper .archive-document-line--two {
  top: 61px;
  width: 62%;
}
.collection-map .collection-tile__icon--documents .archive-document-machine__paper .archive-document-line--three {
  top: 74px;
  width: 78%;
}
.collection-map .collection-tile__icon--documents .archive-document-machine__paper .archive-document-line--four {
  top: 87px;
  width: 54%;
}
.collection-map .collection-tile__icon--documents .archive-document-machine__paper .archive-document-line--five {
  top: 100px;
  width: 68%;
}
.collection-map .collection-tile__icon--documents .archive-document-machine__scan {
  position: absolute;
  top: 8px;
  right: 6px;
  left: 6px;
  z-index: 5;
  height: 2px;
  background: #fedd00;
  opacity: 0;
  animation: document-scan 4.8s ease-in-out infinite;
}
.collection-map .collection-tile__icon--documents .archive-document-machine__status {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 25px;
  padding: 0 8px;
  border-top: 1px solid var(--collection-device-ink);
  background: var(--collection-device-bg);
  color: var(--collection-device-ink);
}
.collection-map .collection-tile__icon--documents .archive-document-machine__status i {
  width: 5px;
  height: 5px;
  background: #fedd00;
  animation: document-status 1.2s steps(1) infinite;
}
.collection-map .collection-tile__icon--documents .archive-document-machine__status b {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}
.collection-map .collection-tile__icon {
  /* ===================================================
     02 — PHOTOS
  =================================================== */
}
.collection-map .collection-tile__icon--photos {
  display: grid;
  place-items: center;
}
.collection-map .collection-tile__icon--photos .photo-camera {
  position: relative;
  width: 210px;
  height: 145px;
  overflow: hidden;
  border: 1px solid var(--collection-device-ink);
  background: #171717;
}
.collection-map .collection-tile__icon--photos .photo-camera__scene {
  position: absolute;
  top: 11px;
  right: 11px;
  bottom: 28px;
  left: 11px;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(254, 221, 0, 0.12) 0 58%, rgba(255, 255, 255, 0.06) 58%), #171717;
}
.collection-map .collection-tile__icon--photos .photo-camera__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  background: #fedd00;
  opacity: 0;
  pointer-events: none;
  animation: photo-exposure 4.8s linear infinite;
}
.collection-map .collection-tile__icon--photos .photo-camera__scene .photo-scene__sun {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 6;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fedd00;
  animation: photo-record-light 1.4s ease-in-out infinite;
}
.collection-map .collection-tile__icon--photos .photo-camera__scene .photo-scene__sun::after {
  content: "REC";
  position: absolute;
  top: 50%;
  right: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  transform: translateY(-50%);
}
.collection-map .collection-tile__icon--photos .photo-camera__scene .photo-scene__subject {
  position: absolute;
  bottom: 31px;
  left: 50%;
  width: 26px;
  height: 38px;
  fill: grey;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  transform: translateX(-50%);
}
.collection-map .collection-tile__icon--photos .photo-camera__scene .photo-focus-box {
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: 5;
  width: 56px;
  height: 56px;
  color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(currentColor, currentColor) left top/15px 1px no-repeat, linear-gradient(currentColor, currentColor) left top/1px 15px no-repeat, linear-gradient(currentColor, currentColor) right top/15px 1px no-repeat, linear-gradient(currentColor, currentColor) right top/1px 15px no-repeat, linear-gradient(currentColor, currentColor) left bottom/15px 1px no-repeat, linear-gradient(currentColor, currentColor) left bottom/1px 15px no-repeat, linear-gradient(currentColor, currentColor) right bottom/15px 1px no-repeat, linear-gradient(currentColor, currentColor) right bottom/1px 15px no-repeat;
  transform: translate(-50%, -50%) scale(1.16);
  animation: photo-focus-box 4.8s ease-in-out infinite;
}
.collection-map .collection-tile__icon--photos .photo-camera__scene .photo-capture-frame {
  position: absolute;
  inset: 7px;
  z-index: 8;
  border: 1px solid transparent;
  pointer-events: none;
  animation: photo-capture 4.8s ease-in-out infinite;
}
.collection-map .collection-tile__icon--photos .photo-camera__meta {
  position: absolute;
  right: 11px;
  bottom: 0;
  left: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  color: #ffffff;
  font-size: 10px;
  letter-spacing: 0.16em;
}
.collection-map .collection-tile__icon--photos .photo-camera__meta b {
  font-size: inherit;
  font-weight: 700;
}
.collection-map .collection-tile__icon--photos .photo-camera__meta i {
  color: #fedd00;
  font-style: normal;
  font-weight: 700;
}
.collection-map .collection-tile__icon {
  /* ===================================================
     03 — VIDEO
  =================================================== */
}
.collection-map .collection-tile__icon--video {
  display: grid;
  place-items: center;
}
.collection-map .collection-tile__icon--video .film-window {
  position: relative;
  width: 190px;
  height: 112px;
  overflow: hidden;
  border: 1px solid var(--collection-device-ink);
  background: #171717;
}
.collection-map .collection-tile__icon--video .film-window .film-strip {
  position: absolute;
  top: 13px;
  left: 0;
  display: flex;
  width: -moz-max-content;
  width: max-content;
  height: 86px;
  animation: archive-film-run 6s linear infinite;
}
.collection-map .collection-tile__icon--video .film-window .film-strip > span {
  position: relative;
  display: block;
  width: 78px;
  height: 86px;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(to bottom, transparent 0 8px, rgba(254, 221, 0, 0.85) 8px 10px, transparent 10px), rgba(255, 255, 255, 0.05);
}
.collection-map .collection-tile__icon--video .film-window .film-strip > span::before, .collection-map .collection-tile__icon--video .film-window .film-strip > span::after {
  content: "";
  position: absolute;
  left: 7px;
  width: 9px;
  height: 6px;
  background: #ffffff;
  box-shadow: 19px 0 #ffffff, 38px 0 #ffffff, 57px 0 #ffffff;
}
.collection-map .collection-tile__icon--video .film-window .film-strip > span::before {
  top: -10px;
}
.collection-map .collection-tile__icon--video .film-window .film-strip > span::after {
  bottom: -10px;
}
.collection-map .collection-tile__icon--video .film-window .film-strip > span i {
  position: absolute;
  top: 17px;
  right: 12px;
  bottom: 15px;
  left: 12px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  background: radial-gradient(circle at 62% 37%, #fedd00 0 5px, transparent 6px), linear-gradient(140deg, transparent 0 43%, rgba(255, 255, 255, 0.24) 44% 61%, transparent 62%);
}
.collection-map .collection-tile__icon--video .film-window .film-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fedd00;
  box-shadow: 0 0 12px rgba(254, 221, 0, 0.8);
  animation: archive-film-scan 2.7s ease-in-out infinite;
}
.collection-map .collection-tile__icon--video .film-reel {
  position: absolute;
  z-index: 4;
  display: block;
  width: 42px;
  height: 42px;
  border: 1px solid var(--collection-device-ink);
  border-radius: 50%;
  background: var(--collection-device-bg);
  animation: archive-reel-spin 3s linear infinite;
}
.collection-map .collection-tile__icon--video .film-reel--one {
  top: 3px;
  left: 7px;
}
.collection-map .collection-tile__icon--video .film-reel--two {
  right: 7px;
  bottom: 2px;
  animation-direction: reverse;
}
.collection-map .collection-tile__icon--video .film-reel i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 14px;
  background: var(--collection-device-ink);
  transform-origin: 50% 0;
}
.collection-map .collection-tile__icon--video .film-reel i:nth-child(1) {
  transform: rotate(0deg) translate(-50%, -3px);
}
.collection-map .collection-tile__icon--video .film-reel i:nth-child(2) {
  transform: rotate(120deg) translate(-50%, -3px);
}
.collection-map .collection-tile__icon--video .film-reel i:nth-child(3) {
  transform: rotate(240deg) translate(-50%, -3px);
}
.collection-map .collection-tile__icon {
  /* ===================================================
     04 — AUDIO
  =================================================== */
}
.collection-map .collection-tile__icon--audio {
  display: grid;
  place-items: center;
}
.collection-map .collection-tile__icon--audio .tape-machine {
  position: relative;
  width: 190px;
  height: 126px;
  border: 1px solid var(--collection-device-ink);
  background: linear-gradient(to bottom, var(--collection-device-line) 0 1px, transparent 1px), var(--collection-device-bg);
  background-size: 100% 14px;
  transition: background-color 220ms ease, border-color 220ms ease;
}
.collection-map .collection-tile__icon--audio .tape-machine .tape-reel {
  position: absolute;
  top: 15px;
  width: 53px;
  height: 53px;
  border: 1px solid var(--collection-device-ink);
  border-radius: 50%;
  background: var(--collection-device-bg);
  animation: archive-tape-spin 3.3s linear infinite;
}
.collection-map .collection-tile__icon--audio .tape-machine .tape-reel--left {
  left: 22px;
}
.collection-map .collection-tile__icon--audio .tape-machine .tape-reel--right {
  right: 22px;
  animation-direction: reverse;
}
.collection-map .collection-tile__icon--audio .tape-machine .tape-reel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fedd00;
  transform: translate(-50%, -50%);
}
.collection-map .collection-tile__icon--audio .tape-machine .tape-reel i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 16px;
  background: var(--collection-device-ink);
  transform-origin: 50% 0;
}
.collection-map .collection-tile__icon--audio .tape-machine .tape-reel i:nth-child(1) {
  transform: rotate(0deg) translate(-50%, 4px);
}
.collection-map .collection-tile__icon--audio .tape-machine .tape-reel i:nth-child(2) {
  transform: rotate(120deg) translate(-50%, 4px);
}
.collection-map .collection-tile__icon--audio .tape-machine .tape-reel i:nth-child(3) {
  transform: rotate(240deg) translate(-50%, 4px);
}
.collection-map .collection-tile__icon--audio .tape-machine .tape-line {
  position: absolute;
  top: 41px;
  left: 72px;
  width: 46px;
  height: 1px;
  background: var(--collection-device-ink);
}
.collection-map .collection-tile__icon--audio .tape-machine .audio-wave {
  position: absolute;
  right: 15px;
  bottom: 12px;
  left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 31px;
  border-top: 1px solid var(--collection-device-line);
}
.collection-map .collection-tile__icon--audio .tape-machine .audio-wave i {
  width: 2px;
  background: var(--collection-device-ink);
  animation: archive-audio-wave 1.25s ease-in-out infinite alternate;
}
.collection-map .collection-tile__icon--audio .tape-machine .audio-wave i:nth-child(1) {
  height: 6px;
}
.collection-map .collection-tile__icon--audio .tape-machine .audio-wave i:nth-child(2) {
  height: 15px;
  animation-delay: -0.1s;
}
.collection-map .collection-tile__icon--audio .tape-machine .audio-wave i:nth-child(3) {
  height: 23px;
  animation-delay: -0.45s;
}
.collection-map .collection-tile__icon--audio .tape-machine .audio-wave i:nth-child(4) {
  height: 10px;
  animation-delay: -0.7s;
}
.collection-map .collection-tile__icon--audio .tape-machine .audio-wave i:nth-child(5) {
  height: 27px;
  background: #fedd00;
  animation-delay: -0.2s;
}
.collection-map .collection-tile__icon--audio .tape-machine .audio-wave i:nth-child(6) {
  height: 16px;
  animation-delay: -0.6s;
}
.collection-map .collection-tile__icon--audio .tape-machine .audio-wave i:nth-child(7) {
  height: 8px;
  animation-delay: -0.9s;
}
.collection-map .collection-tile__icon--audio .tape-machine .audio-wave i:nth-child(8) {
  height: 21px;
  animation-delay: -0.3s;
}
.collection-map .collection-tile__icon--audio .tape-machine .audio-wave i:nth-child(9) {
  height: 13px;
  animation-delay: -0.8s;
}
.collection-map .collection-tile__icon--audio .tape-machine .audio-wave i:nth-child(10) {
  height: 25px;
  background: #fedd00;
  animation-delay: -0.5s;
}
.collection-map .collection-tile__icon--audio .tape-machine .audio-wave i:nth-child(11) {
  height: 17px;
  animation-delay: -0.15s;
}
.collection-map .collection-tile__icon--audio .tape-machine .audio-wave i:nth-child(12) {
  height: 7px;
  animation-delay: -0.65s;
}

/* =========================================================
   DARK THEME
========================================================= */
html[data-theme=dark] .collection-map {
  --collection-bg: #171717;
  --collection-ink: #ffffff;
  --collection-muted: rgba(255, 255, 255, 0.48);
  --collection-copy: rgba(255, 255, 255, 0.68);
  --collection-line: rgba(255, 255, 255, 0.18);
  --collection-line-medium: rgba(255, 255, 255, 0.3);
  --collection-line-strong: rgba(255, 255, 255, 0.7);
  --collection-grid-bg: #171717;
  --collection-tile-bg: rgba(23, 23, 23, 0.82);
  --collection-tile-hover-bg: #1d1d1d;
  --collection-tile-gradient: rgba(255, 255, 255, 0.025);
  --collection-corner: rgba(255, 255, 255, 0.25);
  --collection-corner-hover: rgba(255, 255, 255, 0.58);
  --collection-number-bg: rgba(23, 23, 23, 0.88);
  --collection-number-border: rgba(255, 255, 255, 0.18);
  --collection-device-bg: #171717;
  --collection-device-ink: #ffffff;
  --collection-device-muted: rgba(255, 255, 255, 0.35);
  --collection-device-line: rgba(255, 255, 255, 0.15);
}

/* =========================================================
   REVEAL
========================================================= */
.collection-map .reveal-on-scroll {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.collection-map .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   DOCUMENT ANIMATIONS
========================================================= */
@keyframes document-feed {
  0%, 14%, 100% {
    transform: translateY(38px);
  }
  27%, 72% {
    transform: translateY(0);
  }
  88% {
    transform: translateY(-48px);
  }
}
@keyframes document-scan {
  0%, 28%, 76%, 100% {
    top: 8px;
    opacity: 0;
  }
  34% {
    opacity: 1;
  }
  67% {
    top: calc(100% - 10px);
    opacity: 1;
  }
  73% {
    opacity: 0;
  }
}
@keyframes document-status {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0.25;
  }
}
/* =========================================================
   PHOTO ANIMATIONS
========================================================= */
@keyframes photo-record-light {
  0%, 100% {
    opacity: 0.35;
    box-shadow: 0 0 0 rgba(254, 221, 0, 0);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 5px rgba(254, 221, 0, 0.9), 0 0 11px rgba(254, 221, 0, 0.45);
  }
}
@keyframes photo-focus-box {
  0%, 15%, 100% {
    color: rgba(255, 255, 255, 0.48);
    transform: translate(-50%, -50%) scale(0.8);
  }
  30% {
    color: rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -50%) scale(1.07);
  }
  40%, 68% {
    color: #fedd00;
    transform: translate(-50%, -50%) scale(1);
  }
  78% {
    color: rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%) scale(1.06);
  }
}
@keyframes photo-capture {
  0%, 48%, 64%, 100% {
    border-color: transparent;
  }
  52%, 59% {
    border-color: #fedd00;
  }
}
@keyframes photo-exposure {
  0%, 53%, 100% {
    opacity: 0;
  }
  55% {
    opacity: 0.32;
  }
  57% {
    opacity: 0;
  }
}
/* =========================================================
   VIDEO / AUDIO ANIMATIONS
========================================================= */
@keyframes archive-film-run {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-234px);
  }
}
@keyframes archive-film-scan {
  0%, 100% {
    left: 7%;
    opacity: 0.25;
  }
  50% {
    left: 92%;
    opacity: 1;
  }
}
@keyframes archive-reel-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes archive-tape-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes archive-audio-wave {
  from {
    transform: scaleY(0.35);
  }
  to {
    transform: scaleY(1);
  }
}
/* =========================================================
   RESPONSIVE — 860
========================================================= */
@media (max-width: 860px) {
  .collection-map__heading {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   RESPONSIVE — 620
========================================================= */
@media (max-width: 620px) {
  .collection-map {
    padding-right: 18px;
    padding-left: 18px;
  }
  .collection-map__grid {
    grid-template-columns: 1fr;
  }
  .collection-map .collection-tile {
    min-height: 350px;
    border-right: 0;
    border-bottom: 1px solid var(--collection-line);
  }
  .collection-map .collection-tile:nth-last-child(1) {
    border-bottom: 0;
  }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .collection-map *,
  .collection-map *::before,
  .collection-map *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .collection-map .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}
/* =========================================================
   ARCHIVE / RESEARCH CATALOGUE
   Section 03
========================================================= */
.archive-search {
  /* =======================================================
     LIGHT THEME
  ======================================================= */
  --search-bg: #ffffff;
  --search-ink: #171717;
  --search-muted: rgba(23, 23, 23, 0.58);
  --search-copy: rgba(23, 23, 23, 0.68);
  --search-description: rgba(23, 23, 23, 0.67);
  --search-line: rgba(23, 23, 23, 0.2);
  --search-line-soft: rgba(23, 23, 23, 0.15);
  --search-line-medium: rgba(23, 23, 23, 0.3);
  --search-line-strong: rgba(23, 23, 23, 0.72);
  --search-panel-bg: #ffffff;
  --search-panel-soft: rgba(23, 23, 23, 0.028);
  --search-frame: rgba(23, 23, 23, 0.78);
  --search-frame-soft: rgba(23, 23, 23, 0.13);
  --search-control-bg: #ffffff;
  --search-control-hover: #ffffff;
  --search-active-bg: #171717;
  --search-active-ink: #ffffff;
  --search-placeholder: rgba(23, 23, 23, 0.36);
  --search-grid-line: rgba(23, 23, 23, 0.035);
  --search-record-bg: rgba(255, 255, 255, 0.82);
  --search-record-expanded: #ffffff;
  --search-record-visual-line: rgba(23, 23, 23, 0.06);
  --search-record-visual-bg: rgba(23, 23, 23, 0.02);
  --search-paper: #ffffff;
  --search-paper-ink: #171717;
  --search-paper-line: rgba(23, 23, 23, 0.18);
  width: 100%;
  padding: clamp(76px, 9vw, 150px) clamp(20px, 5vw, 84px);
  background: var(--search-bg);
  color: var(--search-ink);
  font-family: "JetBrains Mono", monospace;
  transition: background-color 220ms ease, color 220ms ease;
  /* =======================================================
     INTRO
  ======================================================= */
}
.archive-search__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: end;
  gap: clamp(40px, 7vw, 120px);
  margin-bottom: clamp(48px, 6vw, 90px);
}
.archive-search__intro h2 {
  max-width: 740px;
  margin: 20px 0 0;
  color: var(--search-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(38px, 4vw, 82px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  transition: color 220ms ease;
}
.archive-search__intro > p {
  margin: 0;
  color: var(--search-copy);
  font-size: clamp(11px, 1vw, 15px);
  line-height: 1.8;
  text-align: justify;
  transition: color 220ms ease;
}
.archive-search {
  /* =======================================================
     SECTION LABEL
  ======================================================= */
}
.archive-search .section-label {
  color: var(--search-muted);
  transition: color 220ms ease;
}
.archive-search {
  /* =======================================================
     WORKSPACE
  ======================================================= */
}
.archive-search .archive-workspace {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  border: 0;
  background: var(--search-panel-bg);
  box-shadow: inset 0 0 0 1px var(--search-frame), 0 0 0 5px var(--search-bg), 0 0 0 6px var(--search-frame-soft);
  transition: background-color 220ms ease, box-shadow 220ms ease;
  /* calibration rail */
}
.archive-search .archive-workspace::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 22px;
  z-index: 20;
  width: 150px;
  height: 7px;
  background: linear-gradient(to right, var(--search-ink) 0 47%, #fedd00 47% 72%, #d8d8d4 72% 86%, #ecece8 86% 100%);
  pointer-events: none;
}
.archive-search .archive-workspace {
  /* registration corner */
}
.archive-search .archive-workspace::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -8px;
  z-index: 20;
  width: 36px;
  height: 36px;
  border-right: 2px solid var(--search-ink);
  border-bottom: 2px solid var(--search-ink);
  pointer-events: none;
  transition: border-color 220ms ease;
}
.archive-search .archive-workspace {
  /* =====================================================
     SEARCH / FILTER COMMON
  ===================================================== */
}
.archive-search .archive-workspace__search, .archive-search .archive-workspace__filters {
  position: relative;
  padding: clamp(30px, 3.5vw, 52px);
  background: linear-gradient(to bottom, var(--search-panel-soft), transparent 42px), var(--search-panel-bg);
  transition: background-color 220ms ease;
}
.archive-search .archive-workspace {
  /* =====================================================
     SEARCH
  ===================================================== */
}
.archive-search .archive-workspace__search::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 0;
  bottom: 20px;
  width: 4px;
  background: linear-gradient(to right, var(--search-line) 0 1px, transparent 1px 3px, #fedd00 3px 4px);
  pointer-events: none;
}
.archive-search .archive-workspace__search label {
  display: block;
  max-width: 430px;
  margin-bottom: 18px;
  color: var(--search-muted);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.archive-search .archive-workspace {
  /* =====================================================
     FILTERS
  ===================================================== */
}
.archive-search .archive-workspace__filters > p {
  position: relative;
  margin: 0 0 18px;
  padding-left: 14px;
  color: var(--search-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.archive-search .archive-workspace__filters > p::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  background: #fedd00;
  transform: translateY(-50%);
}
.archive-search .archive-workspace {
  /* =====================================================
     CLEAR
  ===================================================== */
}
.archive-search .archive-workspace__clear {
  grid-column: 1/-1;
  display: flex;
  justify-content: flex-end;
  padding: 24px 30px;
  border-top: 1px solid var(--search-line);
  background: var(--search-panel-bg);
  transition: background-color 220ms ease, border-color 220ms ease;
}
.archive-search .archive-workspace__clear .archive-clear-all {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  min-width: 215px;
  padding: 13px 16px;
  border: 1px solid var(--search-line-medium);
  background: transparent;
  color: var(--search-ink);
  font: inherit;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.archive-search .archive-workspace__clear .archive-clear-all i {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  transition: transform 180ms ease;
}
.archive-search .archive-workspace__clear .archive-clear-all:hover, .archive-search .archive-workspace__clear .archive-clear-all:focus-visible {
  border-color: var(--search-ink);
  background: var(--search-ink);
  color: var(--search-bg);
  outline: none;
}
.archive-search .archive-workspace__clear .archive-clear-all:hover i, .archive-search .archive-workspace__clear .archive-clear-all:focus-visible i {
  color: #fedd00;
  transform: rotate(90deg);
}
.archive-search {
  /* =======================================================
     SEARCH FIELD
  ======================================================= */
}
.archive-search .archive-search-field {
  position: relative;
  padding-left: 15px;
}
.archive-search .archive-search-field::before {
  content: "";
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--search-ink) 0 55%, #fedd00 55% 100%);
}
.archive-search .archive-search-field input {
  width: 100%;
  min-height: 64px;
  padding: 16px 50px 16px 12px;
  border: 0;
  border-bottom: 1px solid var(--search-line-strong);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--search-ink);
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(13px, 1.2vw, 17px);
  transition: color 220ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.archive-search .archive-search-field input::-moz-placeholder {
  color: var(--search-placeholder);
}
.archive-search .archive-search-field input::placeholder {
  color: var(--search-placeholder);
}
.archive-search .archive-search-field input:focus {
  border-bottom-color: #fedd00;
  box-shadow: 0 1px 0 #fedd00;
}
.archive-search .archive-search-field > span {
  position: absolute;
  right: 2px;
  bottom: 16px;
  color: var(--search-ink);
  font-size: 25px;
  transition: color 220ms ease;
}
.archive-search {
  /* =======================================================
     FILTER LIST
  ======================================================= */
}
.archive-search .archive-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.archive-search .archive-filter-list .archive-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 138px;
  padding: 12px 14px 12px 18px;
  border: 1px solid var(--search-line);
  background: var(--search-control-bg);
  color: var(--search-ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.archive-search .archive-filter-list .archive-filter::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;
  width: 3px;
  background: var(--search-line);
  transition: background 180ms ease;
}
.archive-search .archive-filter-list .archive-filter span {
  color: var(--search-muted);
  font-weight: 500;
  transition: color 180ms ease;
}
.archive-search .archive-filter-list .archive-filter:hover, .archive-search .archive-filter-list .archive-filter:focus-visible {
  z-index: 2;
  outline: 0;
  background: var(--search-control-hover);
  box-shadow: inset 0 0 0 1px var(--search-ink);
  transform: translateY(-2px);
}
.archive-search .archive-filter-list .archive-filter:hover::before, .archive-search .archive-filter-list .archive-filter:focus-visible::before {
  background: #fedd00;
}
.archive-search .archive-filter-list .archive-filter.active {
  background: var(--search-active-bg);
  color: var(--search-active-ink);
  box-shadow: inset 0 0 0 1px var(--search-active-bg);
}
.archive-search .archive-filter-list .archive-filter.active::before {
  background: #fedd00;
}
.archive-search .archive-filter-list .archive-filter.active span {
  color: #fedd00;
}
.archive-search {
  /* =======================================================
     DATE EXPLORER
  ======================================================= */
}
.archive-search .date-explorer {
  position: relative;
  grid-column: 1/-1;
  padding: clamp(34px, 4.5vw, 64px);
  background: linear-gradient(to right, var(--search-grid-line) 1px, transparent 1px), var(--search-panel-bg);
  background-size: 10% 100%;
  transition: background-color 220ms ease;
  /* horizontal rail */
}
.archive-search .date-explorer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(to bottom, var(--search-ink) 0 1px, transparent 1px 3px, var(--search-line-medium) 3px 4px, transparent 4px);
}
.archive-search .date-explorer {
  /* yellow calibration mark */
}
.archive-search .date-explorer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  width: 90px;
  height: 5px;
  background: #fedd00;
}
.archive-search .date-explorer {
  /* =====================================================
     HEADING
  ===================================================== */
}
.archive-search .date-explorer__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
.archive-search .date-explorer__heading p {
  margin: 0 0 8px;
  color: var(--search-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.archive-search .date-explorer__heading h3 {
  margin: 0;
  color: var(--search-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(24px, 2.6vw, 42px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.archive-search .date-explorer__heading button {
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--search-line-medium);
  background: transparent;
  color: var(--search-ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}
.archive-search .date-explorer__heading button:hover, .archive-search .date-explorer__heading button:focus-visible {
  border-bottom-color: #fedd00;
  color: var(--search-muted);
  outline: none;
}
.archive-search .date-explorer {
  /* =====================================================
     READOUT
  ===================================================== */
}
.archive-search .date-explorer__readout {
  display: grid;
  grid-template-columns: auto auto auto minmax(180px, 1fr);
  align-items: end;
  gap: clamp(20px, 3vw, 46px);
  margin-top: clamp(38px, 4vw, 60px);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--search-line);
}
.archive-search .date-explorer__readout > div {
  display: grid;
  gap: 6px;
}
.archive-search .date-explorer__readout > div small {
  color: var(--search-muted);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.archive-search .date-explorer__readout > div output {
  color: var(--search-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.055em;
}
.archive-search .date-explorer__readout > span {
  align-self: end;
  padding-bottom: 4px;
  color: #fedd00;
  font-size: clamp(24px, 3vw, 44px);
}
.archive-search .date-explorer__readout > p {
  justify-self: end;
  max-width: 320px;
  margin: 0;
  color: var(--search-muted);
  font-size: 8px;
  line-height: 1.65;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}
.archive-search {
  /* =======================================================
     DATE SCALE
  ======================================================= */
}
.archive-search .date-scale {
  position: relative;
  height: 105px;
  margin: clamp(36px, 5vw, 62px) 22px 0;
}
.archive-search .date-scale__track {
  position: absolute;
  top: 24px;
  right: 0;
  left: 0;
  height: 5px;
}
.archive-search .date-scale__base, .archive-search .date-scale__fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.archive-search .date-scale__base {
  background: var(--search-line);
}
.archive-search .date-scale__fill {
  background: #fedd00;
}
.archive-search .date-scale {
  /* =====================================================
     RANGE INPUTS
  ===================================================== */
}
.archive-search .date-scale__input {
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 34px;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  pointer-events: none;
}
.archive-search .date-scale__input::-webkit-slider-runnable-track {
  height: 5px;
  background: transparent;
}
.archive-search .date-scale__input::-moz-range-track {
  height: 5px;
  background: transparent;
}
.archive-search .date-scale__input::-webkit-slider-thumb {
  width: 18px;
  height: 28px;
  margin-top: -12px;
  -webkit-appearance: none;
          appearance: none;
  border: 1px solid var(--search-ink);
  border-radius: 0;
  background: var(--search-panel-bg);
  box-shadow: inset 0 0 0 4px var(--search-panel-bg), inset 0 0 0 5px #fedd00;
  cursor: ew-resize;
  pointer-events: auto;
}
.archive-search .date-scale__input::-moz-range-thumb {
  width: 18px;
  height: 28px;
  border: 1px solid var(--search-ink);
  border-radius: 0;
  background: var(--search-panel-bg);
  box-shadow: inset 0 0 0 4px var(--search-panel-bg), inset 0 0 0 5px #fedd00;
  cursor: ew-resize;
  pointer-events: auto;
}
.archive-search .date-scale {
  /* =====================================================
     TICKS
  ===================================================== */
}
.archive-search .date-scale__ticks {
  position: absolute;
  top: 46px;
  right: 0;
  left: 0;
  height: 45px;
}
.archive-search .date-scale__ticks > span {
  position: absolute;
  left: var(--tick-position);
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--search-muted);
  font-size: 7px;
  transform: translateX(-50%);
}
.archive-search .date-scale__ticks > span i {
  display: block;
  width: 1px;
  height: 10px;
  background: var(--search-line-medium);
}
.archive-search .date-scale__ticks > span b {
  font-weight: 700;
  letter-spacing: 0.09em;
}
.archive-search {
  /* =======================================================
     DATE PRESETS
  ======================================================= */
}
.archive-search .date-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 8px;
  border-top: 1px solid var(--search-line);
  border-left: 1px solid var(--search-line);
}
.archive-search .date-presets button {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 92px;
  padding: 18px;
  border: 0;
  border-right: 1px solid var(--search-line);
  border-bottom: 1px solid var(--search-line);
  background: var(--search-control-bg);
  color: var(--search-ink);
  font-family: "JetBrains Mono", monospace;
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.archive-search .date-presets button span {
  color: var(--search-muted);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  transition: color 180ms ease;
}
.archive-search .date-presets button b {
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.archive-search .date-presets button::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 5px;
  height: 5px;
  background: var(--search-line);
}
.archive-search .date-presets button:hover, .archive-search .date-presets button:focus-visible, .archive-search .date-presets button.active {
  background: var(--search-active-bg);
  color: var(--search-active-ink);
  outline: none;
}
.archive-search .date-presets button:hover span, .archive-search .date-presets button:focus-visible span, .archive-search .date-presets button.active span {
  color: #fedd00;
}
.archive-search .date-presets button:hover::after, .archive-search .date-presets button:focus-visible::after, .archive-search .date-presets button.active::after {
  background: #fedd00;
}
.archive-search {
  /* =======================================================
     RESULTS HEADING
  ======================================================= */
}
.archive-search .archive-results-heading {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin: clamp(60px, 8vw, 120px) 0 28px;
  padding-top: 24px;
}
.archive-search .archive-results-heading::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(to right, var(--search-ink) 0 64px, #fedd00 64px 108px, transparent 108px) left top/100% 2px no-repeat, linear-gradient(to right, var(--search-line), var(--search-line)) left bottom/100% 1px no-repeat;
}
.archive-search .archive-results-heading h3 {
  margin: 12px 0 0;
  color: var(--search-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.archive-search .archive-results-heading > p {
  margin: 0;
  color: var(--search-muted);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-align: right;
  text-transform: uppercase;
}
.archive-search {
  /* =======================================================
     RECORDS
  ======================================================= */
}
.archive-search .archive-records {
  position: relative;
  border-top: 1px solid var(--search-ink);
}
.archive-search .archive-records .archive-record {
  position: relative;
  display: grid;
  grid-template-columns: minmax(130px, 0.22fr) minmax(180px, 0.38fr) minmax(0, 1fr);
  min-height: 360px;
  border-bottom: 1px solid var(--search-line);
  background: var(--search-record-bg);
  color: var(--search-ink);
  transition: opacity 220ms ease, transform 220ms ease, background 300ms ease, box-shadow 300ms ease, color 220ms ease;
}
.archive-search .archive-records .archive-record.is-hidden {
  display: none;
}
.archive-search .archive-records .archive-record.is-focused {
  background: rgba(254, 221, 0, 0.11);
  box-shadow: inset 5px 0 0 #fedd00;
}
.archive-search .archive-records .archive-record.is-expanded {
  background: var(--search-record-expanded);
}
.archive-search .archive-records .archive-record {
  /* ===================================================
     INDEX
  =================================================== */
}
.archive-search .archive-records .archive-record__index {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(22px, 3vw, 42px);
  border-right: 1px solid var(--search-line);
}
.archive-search .archive-records .archive-record__index span {
  color: var(--search-muted);
  font-size: 8px;
  letter-spacing: 0.13em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.archive-search .archive-records .archive-record__index strong {
  color: var(--search-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(30px, 3.5vw, 56px);
  font-weight: 400;
  letter-spacing: -0.05em;
}
.archive-search .archive-records .archive-record {
  /* ===================================================
     VISUAL
  =================================================== */
}
.archive-search .archive-records .archive-record__visual {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--search-line);
  background: linear-gradient(to right, var(--search-record-visual-line) 1px, transparent 1px), linear-gradient(to bottom, var(--search-record-visual-line) 1px, transparent 1px), var(--search-record-visual-bg);
  background-size: 32px 32px;
}
.archive-search .archive-records .archive-record {
  /* ===================================================
     CONTENT
  =================================================== */
}
.archive-search .archive-records .archive-record__content {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 60px);
}
.archive-search .archive-records .archive-record__content h4 {
  max-width: 780px;
  margin: 20px 0 18px;
  color: var(--search-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(25px, 3vw, 46px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.archive-search .archive-records .archive-record__content > p {
  max-width: 760px;
  margin: 0;
  color: var(--search-description);
  font-size: 10px;
  line-height: 1.8;
}
.archive-search .archive-records .archive-record__content > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.archive-search .archive-records .archive-record__content > ul li {
  padding: 7px 9px;
  border: 1px solid var(--search-line);
  color: var(--search-muted);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.archive-search .archive-records .archive-record {
  /* ===================================================
     META
  =================================================== */
}
.archive-search .archive-records .archive-record__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--search-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.archive-search .archive-records .archive-record {
  /* ===================================================
     DETAILS
  =================================================== */
}
.archive-search .archive-records .archive-record__details {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--search-line);
}
.archive-search .archive-records .archive-record__details dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--search-line-soft);
  border-left: 1px solid var(--search-line-soft);
}
.archive-search .archive-records .archive-record__details dl > div {
  padding: 14px;
  border-right: 1px solid var(--search-line-soft);
  border-bottom: 1px solid var(--search-line-soft);
}
.archive-search .archive-records .archive-record__details dl dt {
  margin: 0 0 7px;
  color: var(--search-muted);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.archive-search .archive-records .archive-record__details dl dd {
  margin: 0;
  color: var(--search-ink);
  font-size: 9px;
  line-height: 1.6;
}
.archive-search .archive-records .archive-record__file-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.archive-search .archive-records .archive-record__file-link:hover, .archive-search .archive-records .archive-record__file-link:focus-visible {
  background: #fedd00;
  color: #171717;
  outline: none;
}
.archive-search {
  /* =======================================================
     RECORD TOGGLE
  ======================================================= */
}
.archive-search .record-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  width: min(100%, 285px);
  margin-top: auto;
  padding: 30px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--search-line-medium);
  background: transparent;
  color: var(--search-ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
}
.archive-search .record-toggle span {
  font-size: 17px;
  font-weight: 400;
  transition: color 180ms ease, transform 180ms ease;
}
.archive-search .record-toggle:hover, .archive-search .record-toggle:focus-visible {
  border-bottom-color: #fedd00;
  outline: none;
}
.archive-search .record-toggle:hover span, .archive-search .record-toggle:focus-visible span {
  color: #fedd00;
  transform: rotate(90deg);
}
.archive-search {
  /* =======================================================
     STATUS
  ======================================================= */
}
.archive-search .status {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  padding: 6px 8px;
  border: 1px solid var(--search-line);
  color: var(--search-muted);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.archive-search .status--digitized {
  border-color: var(--search-line-medium);
  color: var(--search-ink);
}
.archive-search .status--metadata {
  border-style: dashed;
}
.archive-search {
  /* =======================================================
     GENERATED RECORD VISUALS
  ======================================================= */
}
.archive-search .archive-record__visual {
  /* DOCUMENT / LETTER / LEAFLET */
}
.archive-search .archive-record__visual--report, .archive-search .archive-record__visual--letter, .archive-search .archive-record__visual--leaflet {
  display: grid;
  place-items: center;
}
.archive-search .archive-record__visual--report span, .archive-search .archive-record__visual--letter span, .archive-search .archive-record__visual--leaflet span {
  position: absolute;
  display: block;
  background: var(--search-paper-line);
}
.archive-search .archive-record__visual {
  /* =====================================================
     REPORT
  ===================================================== */
}
.archive-search .archive-record__visual--report::before {
  content: "";
  width: 55%;
  height: 68%;
  border: 1px solid var(--search-paper-ink);
  background: var(--search-paper);
  box-shadow: 13px 13px 0 var(--search-line-soft);
}
.archive-search .archive-record__visual--report span {
  left: 28%;
  width: 38%;
  height: 1px;
}
.archive-search .archive-record__visual--report span:nth-child(1) {
  top: 36%;
}
.archive-search .archive-record__visual--report span:nth-child(2) {
  top: 43%;
}
.archive-search .archive-record__visual--report span:nth-child(3) {
  top: 50%;
}
.archive-search .archive-record__visual--report span:nth-child(4) {
  top: 57%;
}
.archive-search .archive-record__visual--report i {
  position: absolute;
  top: 25%;
  left: 28%;
  color: #fedd00;
  font-family: "Archivo Black", sans-serif;
  font-size: 26px;
  font-style: normal;
}
.archive-search .archive-record__visual {
  /* =====================================================
     LETTER
  ===================================================== */
}
.archive-search .archive-record__visual--letter::before {
  content: "";
  width: 62%;
  height: 55%;
  border: 1px solid var(--search-paper-ink);
  background: var(--search-paper);
  transform: rotate(-4deg);
}
.archive-search .archive-record__visual--letter span {
  left: 26%;
  width: 44%;
  height: 1px;
}
.archive-search .archive-record__visual--letter span:nth-child(1) {
  top: 43%;
}
.archive-search .archive-record__visual--letter span:nth-child(2) {
  top: 50%;
}
.archive-search .archive-record__visual--letter span:nth-child(3) {
  top: 57%;
}
.archive-search .archive-record__visual {
  /* =====================================================
     LEAFLET
  ===================================================== */
}
.archive-search .archive-record__visual--leaflet::before {
  content: "";
  width: 58%;
  height: 67%;
  border: 1px solid var(--search-paper-ink);
  background: var(--search-paper);
  transform: rotate(3deg);
}
.archive-search .archive-record__visual--leaflet span {
  left: 27%;
  width: 42%;
  height: 2px;
}
.archive-search .archive-record__visual--leaflet span:nth-child(1) {
  top: 36%;
  background: var(--search-paper-ink);
}
.archive-search .archive-record__visual--leaflet span:nth-child(2) {
  top: 46%;
}
.archive-search .archive-record__visual--leaflet span:nth-child(3) {
  top: 53%;
}
.archive-search .archive-record__visual--leaflet i {
  position: absolute;
  right: 27%;
  bottom: 26%;
  width: 25px;
  height: 4px;
  background: #fedd00;
}
.archive-search .archive-record__visual {
  /* =====================================================
     PHOTOGRAPH
  ===================================================== */
}
.archive-search .archive-record__visual--photograph {
  display: grid;
  place-items: center;
}
.archive-search .archive-record__visual--photograph::before {
  content: "";
  width: 68%;
  height: 60%;
  border: 8px solid var(--search-paper);
  outline: 1px solid var(--search-line-medium);
  background: radial-gradient(circle at 66% 29%, #fedd00 0 6px, transparent 7px), linear-gradient(145deg, transparent 0 45%, var(--search-line-medium) 46% 60%, transparent 61%), var(--search-record-visual-bg);
  transform: rotate(-3deg);
}
.archive-search .archive-record__visual--photograph span,
.archive-search .archive-record__visual--photograph i,
.archive-search .archive-record__visual--photograph b {
  display: none;
}
.archive-search .archive-record__visual {
  /* =====================================================
     VIDEO
     Deliberately stays dark in both themes.
  ===================================================== */
}
.archive-search .archive-record__visual--broadcast {
  display: grid;
  place-items: center;
}
.archive-search .archive-record__visual--broadcast::before {
  content: "";
  width: 68%;
  height: 48%;
  border: 7px solid #171717;
  background: linear-gradient(135deg, transparent 0 45%, rgba(254, 221, 0, 0.85) 46% 53%, transparent 54%), #252525;
}
.archive-search .archive-record__visual--broadcast span {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 19px solid #ffffff;
}
.archive-search .archive-record__visual--broadcast i,
.archive-search .archive-record__visual--broadcast b {
  display: none;
}
.archive-search .archive-record__visual {
  /* =====================================================
     AUDIO
  ===================================================== */
}
.archive-search .archive-record__visual--audio {
  display: grid;
  place-items: center;
}
.archive-search .archive-record__visual--audio > div {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 62%;
  height: 80px;
}
.archive-search .archive-record__visual--audio > div i {
  flex: 1;
  height: 30%;
  background: var(--search-paper-ink);
  animation: archive-search-wave 1.25s ease-in-out infinite alternate;
}
.archive-search .archive-record__visual--audio > div i:nth-child(2n) {
  height: 72%;
}
.archive-search .archive-record__visual--audio > div i:nth-child(3n) {
  height: 95%;
  background: #fedd00;
}
.archive-search .archive-record__visual--audio > span {
  position: absolute;
  top: 20%;
  right: 18%;
  width: 34px;
  height: 34px;
  border: 1px solid var(--search-paper-ink);
  border-radius: 50%;
}
.archive-search {
  /* =======================================================
     EMPTY STATE
  ======================================================= */
}
.archive-search .archive-no-results {
  margin: 0;
  padding: clamp(52px, 7vw, 90px) 20px;
  border-top: 1px solid var(--search-line);
  border-bottom: 1px solid var(--search-line);
  color: var(--search-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.archive-search {
  /* =======================================================
     REVEAL
  ======================================================= */
}
.archive-search .reveal-on-scroll {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.archive-search .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   DARK THEME
========================================================= */
html[data-theme=dark] .archive-search {
  --search-bg: #171717;
  --search-ink: #ffffff;
  --search-muted: rgba(255, 255, 255, 0.48);
  --search-copy: rgba(255, 255, 255, 0.68);
  --search-description: rgba(255, 255, 255, 0.67);
  --search-line: rgba(255, 255, 255, 0.18);
  --search-line-soft: rgba(255, 255, 255, 0.14);
  --search-line-medium: rgba(255, 255, 255, 0.32);
  --search-line-strong: rgba(255, 255, 255, 0.7);
  --search-panel-bg: #171717;
  --search-panel-soft: rgba(255, 255, 255, 0.025);
  --search-frame: rgba(255, 255, 255, 0.72);
  --search-frame-soft: rgba(255, 255, 255, 0.12);
  --search-control-bg: #171717;
  --search-control-hover: #202020;
  --search-active-bg: #ffffff;
  --search-active-ink: #171717;
  --search-placeholder: rgba(255, 255, 255, 0.35);
  --search-grid-line: rgba(255, 255, 255, 0.035);
  --search-record-bg: rgba(23, 23, 23, 0.88);
  --search-record-expanded: #1d1d1d;
  --search-record-visual-line: rgba(255, 255, 255, 0.06);
  --search-record-visual-bg: rgba(255, 255, 255, 0.025);
  --search-paper: #171717;
  --search-paper-ink: #ffffff;
  --search-paper-line: rgba(255, 255, 255, 0.2);
}
html[data-theme=dark] .archive-search .archive-workspace::before {
  background: linear-gradient(to right, #ffffff 0 47%, #fedd00 47% 72%, #777777 72% 86%, #3b3b3b 86% 100%);
}
html[data-theme=dark] .archive-search .archive-clear-all:hover, html[data-theme=dark] .archive-search .archive-clear-all:focus-visible {
  background: #ffffff;
  color: #171717;
}
html[data-theme=dark] .archive-search .archive-record__file-link:hover, html[data-theme=dark] .archive-search .archive-record__file-link:focus-visible {
  color: #171717;
}

/* =========================================================
   WAVE
========================================================= */
@keyframes archive-search-wave {
  from {
    transform: scaleY(0.4);
  }
  to {
    transform: scaleY(1);
  }
}
/* =========================================================
   RESPONSIVE — 1180
========================================================= */
@media (max-width: 1180px) {
  .archive-search .archive-records .archive-record {
    grid-template-columns: 110px minmax(180px, 0.34fr) minmax(0, 1fr);
  }
}
/* =========================================================
   RESPONSIVE — 860
========================================================= */
@media (max-width: 860px) {
  .archive-search__intro {
    grid-template-columns: 1fr;
  }
  .archive-search .archive-workspace {
    grid-template-columns: 1fr;
  }
  .archive-search .archive-workspace__search::after {
    top: auto;
    right: 20px;
    bottom: 0;
    left: 20px;
    width: auto;
    height: 4px;
    background: linear-gradient(to bottom, var(--search-line) 0 1px, transparent 1px 3px, #fedd00 3px 4px);
  }
  .archive-search .date-explorer__readout {
    grid-template-columns: auto auto auto;
  }
  .archive-search .date-explorer__readout > p {
    grid-column: 1/-1;
    justify-self: start;
    text-align: left;
  }
  .archive-search .date-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .archive-search .archive-records .archive-record {
    grid-template-columns: 90px minmax(0, 1fr);
  }
  .archive-search .archive-records .archive-record__index {
    grid-row: 1/span 2;
  }
  .archive-search .archive-records .archive-record__visual {
    min-height: 290px;
    border-right: 0;
    border-bottom: 1px solid var(--search-line);
  }
  .archive-search .archive-records .archive-record__content {
    grid-column: 2;
  }
  .archive-search .archive-records .archive-record__details dl {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   RESPONSIVE — 620
========================================================= */
@media (max-width: 620px) {
  .archive-search {
    padding-right: 18px;
    padding-left: 18px;
  }
  .archive-search .archive-workspace {
    box-shadow: inset 0 0 0 1px var(--search-frame), 0 0 0 3px var(--search-bg), 0 0 0 4px var(--search-frame-soft);
  }
  .archive-search .archive-workspace::before {
    left: 14px;
    width: 112px;
  }
  .archive-search .archive-workspace__search, .archive-search .archive-workspace__filters {
    padding-right: 18px;
    padding-left: 18px;
  }
  .archive-search .archive-workspace__clear {
    padding: 20px 16px;
  }
  .archive-search .archive-workspace__clear .archive-clear-all {
    width: 100%;
  }
  .archive-search .archive-filter-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .archive-search .archive-filter-list .archive-filter {
    min-width: 0;
  }
  .archive-search .date-explorer {
    padding-right: 18px;
    padding-left: 18px;
  }
  .archive-search .date-explorer::after {
    left: 18px;
    width: 58px;
  }
  .archive-search .date-explorer__heading {
    display: grid;
  }
  .archive-search .date-explorer__readout {
    gap: 12px;
  }
  .archive-search .date-explorer__readout output {
    font-size: 44px;
  }
  .archive-search .date-scale {
    margin-right: 0;
    margin-left: 0;
  }
  .archive-search .date-scale__ticks > span:nth-child(2), .archive-search .date-scale__ticks > span:nth-child(4), .archive-search .date-scale__ticks > span:nth-child(6) {
    display: none;
  }
  .archive-search .date-presets {
    grid-template-columns: 1fr;
  }
  .archive-search .archive-results-heading {
    display: grid;
    align-items: start;
  }
  .archive-search .archive-results-heading > p {
    text-align: left;
  }
  .archive-search .archive-records .archive-record {
    grid-template-columns: 1fr;
  }
  .archive-search .archive-records .archive-record__index {
    grid-row: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 18px;
    border-right: 0;
    border-bottom: 1px solid var(--search-line);
  }
  .archive-search .archive-records .archive-record__index span {
    writing-mode: initial;
    transform: none;
  }
  .archive-search .archive-records .archive-record__visual, .archive-search .archive-records .archive-record__content {
    grid-column: 1;
  }
  .archive-search .archive-records .archive-record__meta {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .archive-search *,
  .archive-search *::before,
  .archive-search *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .archive-search .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}
/* =========================================================
   SECTION BOUNDARIES

   Universal Section-Divider now owns the visible
   top and bottom borders between major sections.
========================================================= */
.archive-digital-rain,
.collection-map,
.archive-search {
  border-bottom: 0;
}

.about-page {
  --about-progress: 0;
  --about-angle: 0deg;
  --about-angle-reverse: 0deg;
  min-height: 100vh;
  background: linear-gradient(to right, transparent calc(50% - 0.5px), rgba(23, 23, 23, 0.05) 50%, transparent calc(50% + 0.5px)), var(--paper);
}

/* ---------------------------------
   HERO
--------------------------------- */
.about-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  min-height: calc(100vh - var(--header-height));
  border-bottom: 1px solid var(--line);
}

.about-hero__copy {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(68px, 8vw, 132px) clamp(24px, 5vw, 84px);
  border-right: 1px solid var(--line);
}
.about-hero__copy::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 10%;
  width: 1px;
  height: 36%;
  background: var(--yellow);
}
.about-hero__copy h1 {
  max-width: 880px;
  margin: 24px 0 30px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(54px, 6.5vw, 122px);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.068em;
  text-transform: uppercase;
}

.about-hero__description {
  max-width: 660px;
  margin: 0;
  color: rgba(23, 23, 23, 0.72);
  font-size: clamp(12px, 1.15vw, 17px);
  line-height: 1.85;
}

.about-hero__visual {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  background: radial-gradient(circle at 53% 49%, rgba(254, 221, 0, 0.21), transparent 19%), linear-gradient(137deg, rgba(23, 23, 23, 0.01), rgba(23, 23, 23, 0.075));
}

.about-hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(23, 23, 23, 0.085) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.085) 1px, transparent 1px);
  background-size: clamp(36px, 4.4vw, 76px) clamp(36px, 4.4vw, 76px);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 83%);
          mask-image: radial-gradient(circle at center, black, transparent 83%);
}

.about-orbit {
  position: absolute;
  top: 50%;
  left: 53%;
  border: 1px solid rgba(23, 23, 23, 0.23);
  border-radius: 50%;
}
.about-orbit::before, .about-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.about-orbit--outer {
  width: min(57vw, 850px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(calc(-15deg + var(--about-angle)));
  animation: about-orbit 36s linear infinite;
}
.about-orbit--outer::before {
  top: 12%;
  left: 15%;
  width: 10px;
  height: 10px;
  background: var(--ink);
}
.about-orbit--outer::after {
  right: 6%;
  bottom: 29%;
  width: 6px;
  height: 6px;
  background: var(--yellow);
  box-shadow: 0 0 24px rgba(254, 221, 0, 0.85);
}

.about-orbit--inner {
  width: min(36vw, 540px);
  aspect-ratio: 1;
  border-style: dashed;
  border-color: rgba(23, 23, 23, 0.17);
  transform: translate(-50%, -50%) rotate(calc(28deg - var(--about-angle-reverse)));
  animation: about-orbit-reverse 25s linear infinite;
}
.about-orbit--inner::before {
  right: 10%;
  bottom: 15%;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink);
  background: white;
}

.museum-core {
  position: absolute;
  top: 50%;
  left: 53%;
  z-index: 5;
  width: clamp(250px, 29vw, 455px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.museum-core__halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: rgba(254, 221, 0, 0.32);
  filter: blur(24px);
  animation: museum-halo 4.5s ease-in-out infinite alternate;
}

.museum-core__frame {
  position: absolute;
  inset: 12%;
  display: flex;
  flex-direction: column;
  padding: clamp(23px, 3vw, 45px);
  border: 1px solid var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 16px 16px 0 rgba(254, 221, 0, 0.7), -8px -8px 0 rgba(255, 255, 255, 0.78);
  transform: rotate(-2.4deg);
  animation: museum-core-drift 7.5s ease-in-out infinite alternate;
}
.museum-core__frame small {
  font-size: clamp(7px, 0.7vw, 10px);
  font-weight: 700;
  letter-spacing: 0.17em;
}
.museum-core__frame strong {
  margin: auto 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(29px, 3.4vw, 58px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.055em;
}
.museum-core__frame > span {
  display: block;
  height: 1px;
  margin-top: 12px;
  background: rgba(23, 23, 23, 0.24);
}
.museum-core__frame b {
  margin-top: 20px;
  font-size: clamp(6px, 0.62vw, 9px);
  font-weight: 700;
  letter-spacing: 0.14em;
}

.museum-node {
  position: absolute;
  z-index: 7;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-width: 105px;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  background: white;
  box-shadow: 5px 5px 0 rgba(254, 221, 0, 0.82);
  font-size: clamp(6px, 0.65vw, 9px);
  letter-spacing: 0.13em;
  animation: museum-node-float 6s ease-in-out infinite alternate;
}
.museum-node span {
  color: var(--muted-ink);
}
.museum-node b {
  font-weight: 700;
}

.museum-node--family {
  top: 15%;
  left: 8%;
}

.museum-node--politics {
  top: 18%;
  right: 7%;
  animation-delay: -1.4s;
}

.museum-node--works {
  right: 5%;
  bottom: 16%;
  animation-delay: -2.8s;
}

.museum-node--archive {
  bottom: 12%;
  left: 10%;
  animation-delay: -3.9s;
}

.museum-node--blog {
  top: 47%;
  right: 2.5%;
  animation-delay: -4.8s;
}

.museum-line {
  position: absolute;
  z-index: 2;
  height: 1px;
  background: rgba(23, 23, 23, 0.34);
  transform-origin: left;
}
.museum-line::after {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yellow);
}

.museum-line--one {
  top: 30%;
  left: 20%;
  width: 29%;
  transform: rotate(20deg);
}

.museum-line--two {
  top: 34%;
  left: 55%;
  width: 30%;
  transform: rotate(-17deg);
}

.museum-line--three {
  top: 62%;
  left: 54%;
  width: 30%;
  transform: rotate(19deg);
}

.museum-line--four {
  top: 66%;
  left: 20%;
  width: 30%;
  transform: rotate(-17deg);
}

.about-hero__index {
  position: absolute;
  right: clamp(20px, 3vw, 52px);
  bottom: 20px;
  z-index: 8;
  display: flex;
  gap: 22px;
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.about-hero__index span:first-child {
  color: var(--ink);
}

/* ---------------------------------
   SHARED SECTION STRUCTURE
--------------------------------- */
.project-mission,
.why-digital,
.museum-scope,
.methodology,
.editorial-principles,
.roadmap,
.project-credit {
  padding: clamp(82px, 10vw, 154px) clamp(20px, 4vw, 70px);
  border-bottom: 1px solid var(--line);
}

.project-mission__heading,
.museum-scope__heading,
.editorial-principles__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(270px, 0.6fr);
  gap: clamp(40px, 8vw, 140px);
  align-items: end;
  margin-bottom: clamp(56px, 7vw, 104px);
}
.project-mission__heading h2,
.museum-scope__heading h2,
.editorial-principles__heading h2 {
  max-width: 1100px;
  margin: 20px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(39px, 5.2vw, 88px);
  font-weight: 400;
  line-height: 0.93;
  letter-spacing: -0.058em;
  text-transform: uppercase;
}
.project-mission__heading > p,
.project-mission__heading > a,
.museum-scope__heading > p,
.museum-scope__heading > a,
.editorial-principles__heading > p,
.editorial-principles__heading > a {
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: 12px;
  line-height: 1.85;
}

/* ---------------------------------
   MISSION
--------------------------------- */
.mission-statement {
  position: relative;
  display: grid;
  grid-template-columns: minmax(100px, 0.28fr) minmax(0, 1.2fr) minmax(260px, 0.52fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: start;
  padding: clamp(36px, 5vw, 74px);
  border: 1px solid var(--ink);
  background: linear-gradient(to right, transparent 49.9%, rgba(23, 23, 23, 0.05) 50%, transparent 50.1%), white;
  box-shadow: 12px 12px 0 var(--yellow);
}
.mission-statement::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18%;
  width: 28%;
  height: 4px;
  background: var(--yellow);
}
.mission-statement blockquote {
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(27px, 3.3vw, 57px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.mission-statement > p {
  margin: 0;
  color: rgba(23, 23, 23, 0.7);
  font-size: 12px;
  line-height: 1.9;
}

.mission-statement__index {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(34px, 4vw, 66px);
  letter-spacing: -0.05em;
}

/* ---------------------------------
   WHY DIGITAL
--------------------------------- */
.why-digital {
  background: rgba(23, 23, 23, 0.025);
}

.why-digital__heading {
  max-width: 1080px;
  margin-bottom: clamp(56px, 7vw, 104px);
}
.why-digital__heading h2 {
  margin: 20px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(40px, 5.4vw, 91px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.058em;
  text-transform: uppercase;
}

.why-digital__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.reason-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: clamp(27px, 3vw, 46px);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: white;
  transition: background 240ms ease, transform 240ms ease;
}
.reason-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 5px;
  background: var(--yellow);
  transition: width 300ms ease;
}
.reason-card:hover {
  background: rgba(254, 221, 0, 0.065);
  transform: translateY(-4px);
}
.reason-card:hover::after {
  width: 100%;
}
.reason-card > span {
  color: var(--muted-ink);
  font-size: 10px;
  letter-spacing: 0.15em;
}
.reason-card h3 {
  margin: 70px 0 24px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(23px, 2.2vw, 38px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.reason-card p {
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: 11px;
  line-height: 1.85;
}
.reason-card b {
  margin-top: auto;
  padding-top: 34px;
  color: var(--muted-ink);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------------------------------
   SCOPE MAP
--------------------------------- */
.scope-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.scope-entry {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  min-height: 205px;
  padding: clamp(27px, 3vw, 48px);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: white;
  text-decoration: none;
  transition: background 220ms ease, color 220ms ease;
}
.scope-entry::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--yellow);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 260ms ease;
}
.scope-entry:hover, .scope-entry:focus-visible {
  background: var(--ink);
  color: white;
}
.scope-entry:hover::before, .scope-entry:focus-visible::before {
  transform: scaleY(1);
}
.scope-entry:hover p,
.scope-entry:hover > span, .scope-entry:focus-visible p,
.scope-entry:focus-visible > span {
  color: rgba(255, 255, 255, 0.65);
}
.scope-entry > span {
  align-self: start;
  color: var(--muted-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(31px, 3.4vw, 55px);
  letter-spacing: -0.05em;
}
.scope-entry h3 {
  margin: 0 0 14px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(25px, 2.5vw, 42px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.042em;
  text-transform: uppercase;
}
.scope-entry p {
  max-width: 600px;
  margin: 0;
  color: rgba(23, 23, 23, 0.65);
  font-size: 11px;
  line-height: 1.75;
}
.scope-entry > b {
  font-size: 9px;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

/* ---------------------------------
   METHODOLOGY
--------------------------------- */
.methodology {
  background: var(--ink);
  color: white;
}

.methodology__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.45fr);
  gap: clamp(44px, 8vw, 150px);
  align-items: end;
  margin-bottom: clamp(66px, 8vw, 118px);
}
.methodology__intro .section-label {
  grid-column: 1/-1;
  color: rgba(255, 255, 255, 0.48);
}
.methodology__intro h2 {
  max-width: 1000px;
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(42px, 5.5vw, 94px);
  font-weight: 400;
  line-height: 0.91;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}
.methodology__intro > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  line-height: 1.9;
}

.methodology__layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.34fr) minmax(0, 1fr);
  gap: clamp(38px, 7vw, 120px);
}

.methodology-rail {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  padding-left: 32px;
}

.methodology-rail__line {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 8px;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
}
.methodology-rail__line span {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 0;
  background: var(--yellow);
  transition: height 420ms ease;
}

.methodology-step {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 12px 14px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  text-align: left;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.methodology-step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -28px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: var(--ink);
  transform: translateY(-50%);
}
.methodology-step span {
  font-size: 9px;
  letter-spacing: 0.14em;
}
.methodology-step b {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.methodology-step:hover, .methodology-step:focus-visible, .methodology-step.active {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.05);
  color: white;
}
.methodology-step.active::before {
  border-color: var(--yellow);
  background: var(--yellow);
  box-shadow: 0 0 18px rgba(254, 221, 0, 0.65);
}

.methodology-panels {
  min-width: 0;
}

.methodology-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.56fr) minmax(0, 0.44fr);
  gap: clamp(35px, 6vw, 92px);
  align-items: center;
  min-height: 530px;
  padding: clamp(30px, 4vw, 62px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.035);
  animation: method-panel-in 360ms ease both;
}
.methodology-panel[hidden] {
  display: none;
}
.methodology-panel h3 {
  margin: 24px 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(31px, 3.7vw, 63px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.052em;
  text-transform: uppercase;
}
.methodology-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  line-height: 1.9;
}

.methodology-panel__number {
  color: var(--yellow);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.methodology-panel__visual {
  position: relative;
  width: 100%;
  min-height: 370px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
}

.methodology-panel__visual--discover .search-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.methodology-panel__visual--discover .search-ring--one {
  width: 62%;
  aspect-ratio: 1;
  animation: about-orbit 17s linear infinite;
}
.methodology-panel__visual--discover .search-ring--two {
  width: 37%;
  aspect-ratio: 1;
  border-style: dashed;
  animation: about-orbit-reverse 12s linear infinite;
}
.methodology-panel__visual--discover i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
}
.methodology-panel__visual--discover i:nth-of-type(1) {
  top: 21%;
  left: 30%;
}
.methodology-panel__visual--discover i:nth-of-type(2) {
  top: 65%;
  right: 23%;
}
.methodology-panel__visual--discover i:nth-of-type(3) {
  bottom: 18%;
  left: 18%;
}
.methodology-panel__visual--discover strong {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: "Archivo Black", sans-serif;
  font-size: 110px;
  font-weight: 400;
  transform: translate(-50%, -50%);
}

.methodology-panel__visual--verify .verify-sheet {
  position: absolute;
  top: 15%;
  right: 17%;
  bottom: 15%;
  left: 17%;
  border: 1px solid white;
  background: rgba(255, 255, 255, 0.08);
  transform: rotate(-3deg);
}
.methodology-panel__visual--verify .verify-sheet::before, .methodology-panel__visual--verify .verify-sheet::after {
  content: "";
  position: absolute;
  left: 12%;
  width: 76%;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}
.methodology-panel__visual--verify .verify-sheet::before {
  top: 27%;
  box-shadow: 0 34px 0 rgba(255, 255, 255, 0.45);
}
.methodology-panel__visual--verify .verify-sheet::after {
  top: 61%;
  box-shadow: 0 34px 0 rgba(255, 255, 255, 0.45);
}
.methodology-panel__visual--verify .verify-stamp {
  position: absolute;
  right: 11%;
  bottom: 19%;
  z-index: 2;
  padding: 14px 18px;
  border: 3px solid var(--yellow);
  color: var(--yellow);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.16em;
  transform: rotate(-12deg);
}
.methodology-panel__visual--verify > i {
  position: absolute;
  left: 22%;
  width: 8px;
  height: 8px;
  border: 1px solid white;
  background: var(--yellow);
}
.methodology-panel__visual--verify > i:nth-of-type(1) {
  top: 34%;
}
.methodology-panel__visual--verify > i:nth-of-type(2) {
  top: 48%;
}
.methodology-panel__visual--verify > i:nth-of-type(3) {
  top: 62%;
}

.methodology-panel__visual--context .context-axis {
  position: absolute;
  background: rgba(255, 255, 255, 0.45);
}
.methodology-panel__visual--context .context-axis--x {
  top: 50%;
  left: 8%;
  width: 84%;
  height: 1px;
}
.methodology-panel__visual--context .context-axis--y {
  top: 8%;
  left: 50%;
  width: 1px;
  height: 84%;
}
.methodology-panel__visual--context i {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid white;
  background: var(--ink);
  transform: rotate(45deg);
}
.methodology-panel__visual--context i:nth-of-type(1) {
  top: 22%;
  left: 25%;
}
.methodology-panel__visual--context i:nth-of-type(2) {
  top: 26%;
  right: 19%;
  background: var(--yellow);
}
.methodology-panel__visual--context i:nth-of-type(3) {
  bottom: 22%;
  left: 19%;
}
.methodology-panel__visual--context i:nth-of-type(4) {
  right: 29%;
  bottom: 17%;
}
.methodology-panel__visual--context strong {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 12px 16px;
  border: 1px solid white;
  background: var(--ink);
  font-size: 11px;
  letter-spacing: 0.15em;
  transform: translate(-50%, -50%);
}

.methodology-panel__visual--preserve .preserve-box {
  position: absolute;
  top: 20%;
  right: 20%;
  bottom: 20%;
  left: 20%;
  border: 1px solid white;
  box-shadow: 12px 12px 0 var(--yellow);
}
.methodology-panel__visual--preserve .preserve-box::before {
  content: "";
  position: absolute;
  top: 16%;
  left: 13%;
  width: 74%;
  height: 1px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 42px 0 rgba(255, 255, 255, 0.52), 0 84px 0 rgba(255, 255, 255, 0.52), 0 126px 0 rgba(255, 255, 255, 0.52);
}
.methodology-panel__visual--preserve .preserve-copy {
  position: absolute;
  width: 34%;
  height: 46%;
  border: 1px solid rgba(255, 255, 255, 0.42);
}
.methodology-panel__visual--preserve .preserve-copy--one {
  top: 12%;
  left: 10%;
  transform: rotate(-8deg);
}
.methodology-panel__visual--preserve .preserve-copy--two {
  right: 7%;
  bottom: 10%;
  transform: rotate(9deg);
}
.methodology-panel__visual--preserve strong {
  position: absolute;
  right: 10%;
  top: 12%;
  color: var(--yellow);
  font-family: "Archivo Black", sans-serif;
  font-size: 55px;
  font-weight: 400;
}

.methodology-panel__visual--publish .publish-window {
  position: absolute;
  top: 18%;
  right: 18%;
  bottom: 18%;
  left: 18%;
  border: 1px solid white;
  background: rgba(255, 255, 255, 0.04);
}
.methodology-panel__visual--publish .publish-window::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 13%;
  border-bottom: 1px solid white;
  background: rgba(255, 255, 255, 0.08);
}
.methodology-panel__visual--publish .publish-signal {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(254, 221, 0, 0.72);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.methodology-panel__visual--publish .publish-signal--one {
  width: 22%;
  aspect-ratio: 1;
}
.methodology-panel__visual--publish .publish-signal--two {
  width: 40%;
  aspect-ratio: 1;
}
.methodology-panel__visual--publish .publish-signal--three {
  width: 60%;
  aspect-ratio: 1;
}
.methodology-panel__visual--publish strong {
  position: absolute;
  bottom: 25%;
  left: 50%;
  padding: 10px 14px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.16em;
  transform: translateX(-50%);
}

/* ---------------------------------
   PRINCIPLES
--------------------------------- */
.editorial-principles__heading > a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-top: 1px solid var(--ink);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.principle {
  min-height: 330px;
  padding: clamp(28px, 3vw, 48px);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.principle > span {
  color: var(--muted-ink);
  font-size: 9px;
  letter-spacing: 0.14em;
}
.principle h3 {
  margin: 68px 0 22px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(25px, 2.4vw, 42px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.principle p {
  margin: 0;
  color: rgba(23, 23, 23, 0.67);
  font-size: 11px;
  line-height: 1.85;
}

/* ---------------------------------
   POSITION
--------------------------------- */
.project-position {
  display: grid;
  grid-template-columns: minmax(300px, 0.46fr) minmax(0, 0.54fr);
  min-height: 690px;
  border-bottom: 1px solid var(--line);
}

.project-position__visual {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: linear-gradient(to right, rgba(23, 23, 23, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.07) 1px, transparent 1px), rgba(23, 23, 23, 0.025);
  background-size: 50px 50px;
}
.project-position__visual > strong {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  padding: 13px 17px;
  border: 1px solid var(--ink);
  background: white;
  box-shadow: 7px 7px 0 var(--yellow);
  font-size: clamp(10px, 1.1vw, 15px);
  letter-spacing: 0.16em;
  transform: translate(-50%, -50%) rotate(-4deg);
}

.position-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(23, 23, 23, 0.36);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.position-circle--one {
  width: 64%;
  aspect-ratio: 1;
  animation: about-orbit 23s linear infinite;
}

.position-circle--two {
  width: 38%;
  aspect-ratio: 1;
  border-style: dashed;
  animation: about-orbit-reverse 15s linear infinite;
}

.position-axis {
  position: absolute;
  background: rgba(23, 23, 23, 0.42);
}

.position-axis--vertical {
  top: 10%;
  bottom: 10%;
  left: 50%;
  width: 1px;
}

.position-axis--horizontal {
  top: 50%;
  right: 10%;
  left: 10%;
  height: 1px;
}

.project-position__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(62px, 8vw, 130px) clamp(30px, 6vw, 100px);
}
.project-position__copy h2 {
  margin: 24px 0 34px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(39px, 4.8vw, 80px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.057em;
  text-transform: uppercase;
}
.project-position__copy > p:not(.section-label) {
  max-width: 720px;
  margin: 0 0 22px;
  color: rgba(23, 23, 23, 0.69);
  font-size: 12px;
  line-height: 1.9;
}

/* ---------------------------------
   ROADMAP
--------------------------------- */
.roadmap {
  background: rgba(23, 23, 23, 0.024);
}

.roadmap__heading {
  max-width: 1000px;
  margin-bottom: clamp(58px, 8vw, 112px);
}
.roadmap__heading h2 {
  margin: 20px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(42px, 5.4vw, 91px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.059em;
  text-transform: uppercase;
}

.roadmap-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}
.roadmap-track::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: calc(var(--about-progress) * 100%);
  height: 5px;
  background: var(--yellow);
  transition: width 120ms linear;
}

.roadmap-stage {
  position: relative;
  min-height: 350px;
  padding: clamp(30px, 3vw, 50px);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.roadmap-stage:first-child {
  border-left: 1px solid var(--ink);
}
.roadmap-stage > b {
  display: block;
  margin: 56px 0 24px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(42px, 5vw, 78px);
  font-weight: 400;
  letter-spacing: -0.06em;
}
.roadmap-stage h3 {
  margin: 0 0 18px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(23px, 2.2vw, 36px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.roadmap-stage p {
  margin: 0;
  color: rgba(23, 23, 23, 0.66);
  font-size: 11px;
  line-height: 1.82;
}

.roadmap-stage__status {
  display: inline-block;
  padding: 8px 10px;
  border: 1px solid var(--ink);
  background: white;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------------------------------
   PROJECT CREDIT
--------------------------------- */
.project-credit {
  display: grid;
  grid-template-columns: minmax(150px, 0.22fr) minmax(0, 0.48fr) minmax(300px, 0.3fr);
  gap: clamp(30px, 6vw, 100px);
  align-items: start;
  background: white;
}

.project-credit__index {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(46px, 6vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.065em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.project-credit__copy h2 {
  margin: 22px 0 30px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(35px, 4.3vw, 73px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.project-credit__copy > p:not(.section-label) {
  max-width: 700px;
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: 12px;
  line-height: 1.9;
}

.project-credit__details {
  border-top: 1px solid var(--ink);
}
.project-credit__details dl {
  margin: 0;
}
.project-credit__details dl > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.project-credit__details dt {
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.project-credit__details dd {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}

/* ---------------------------------
   COLLABORATION
--------------------------------- */
.about-collaboration {
  display: grid;
  grid-template-columns: minmax(130px, 0.18fr) minmax(0, 0.57fr) minmax(250px, 0.25fr);
  gap: clamp(30px, 6vw, 100px);
  align-items: center;
  min-height: 520px;
  padding: clamp(64px, 8vw, 125px) clamp(20px, 4vw, 70px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--ink);
  color: white;
}

.about-collaboration__symbol {
  color: var(--yellow);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(100px, 14vw, 230px);
  line-height: 0.7;
}

.about-collaboration__copy .section-label {
  color: rgba(255, 255, 255, 0.5);
}
.about-collaboration__copy h2 {
  margin: 22px 0 28px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(38px, 5vw, 84px);
  font-weight: 400;
  line-height: 0.93;
  letter-spacing: -0.058em;
  text-transform: uppercase;
}
.about-collaboration__copy > p:not(.section-label) {
  max-width: 740px;
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  line-height: 1.9;
}

.about-collaboration__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 200ms ease, padding 200ms ease;
}
.about-collaboration__link:hover, .about-collaboration__link:focus-visible {
  padding-right: 12px;
  color: var(--yellow);
}
.about-collaboration__link b {
  font-size: 18px;
}

/* ---------------------------------
   MOTION
--------------------------------- */
@keyframes about-orbit {
  to {
    rotate: 360deg;
  }
}
@keyframes about-orbit-reverse {
  to {
    rotate: -360deg;
  }
}
@keyframes museum-halo {
  from {
    opacity: 0.55;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes museum-core-drift {
  from {
    transform: rotate(-3.2deg) translateY(-5px);
  }
  to {
    transform: rotate(-1.4deg) translateY(7px);
  }
}
@keyframes museum-node-float {
  from {
    transform: translateY(-5px) rotate(-1deg);
  }
  to {
    transform: translateY(7px) rotate(1deg);
  }
}
@keyframes method-panel-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ---------------------------------
   RESPONSIVE
--------------------------------- */
@media (max-width: 1180px) {
  .about-hero__copy h1 {
    font-size: clamp(49px, 7vw, 88px);
  }
  .museum-node--blog {
    display: none;
  }
  .why-digital__grid,
  .roadmap-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .principles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .methodology-panel {
    grid-template-columns: 1fr;
  }
  .methodology-panel__visual {
    min-height: 310px;
  }
  .project-credit {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .project-credit__details {
    grid-column: 2;
  }
}
@media (max-width: 860px) {
  .about-hero {
    grid-template-columns: 1fr;
  }
  .about-hero__copy {
    min-height: calc(74vh - var(--header-height));
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .about-hero__visual {
    min-height: 620px;
  }
  .about-hero__index {
    bottom: 12px;
  }
  .project-mission__heading,
  .museum-scope__heading,
  .editorial-principles__heading,
  .methodology__intro {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .mission-statement {
    grid-template-columns: 110px 1fr;
  }
  .mission-statement > p {
    grid-column: 2;
  }
  .scope-map {
    grid-template-columns: 1fr;
  }
  .methodology__layout {
    grid-template-columns: 1fr;
  }
  .methodology-rail {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 0;
  }
  .methodology-rail__line {
    display: none;
  }
  .methodology-step {
    grid-template-columns: 1fr;
    min-height: 75px;
    padding: 10px;
    text-align: center;
  }
  .methodology-step::before {
    display: none;
  }
  .methodology-step b {
    font-size: 8px;
  }
  .project-position {
    grid-template-columns: 1fr;
  }
  .project-position__visual {
    min-height: 500px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .about-collaboration {
    grid-template-columns: 120px 1fr;
  }
  .about-collaboration__link {
    grid-column: 2;
  }
}
@media (max-width: 620px) {
  .about-hero__copy {
    min-height: 660px;
    padding: 66px 20px;
  }
  .about-hero__copy h1 {
    font-size: clamp(48px, 15vw, 74px);
  }
  .about-hero__visual {
    min-height: 540px;
  }
  .museum-core {
    width: 290px;
  }
  .museum-node {
    min-width: 92px;
    padding: 8px;
  }
  .museum-node--family {
    top: 10%;
    left: 5%;
  }
  .museum-node--politics {
    top: 12%;
    right: 4%;
  }
  .museum-node--works {
    right: 4%;
    bottom: 12%;
  }
  .museum-node--archive {
    bottom: 9%;
    left: 5%;
  }
  .about-hero__index {
    right: 14px;
    left: 14px;
    justify-content: space-between;
    gap: 10px;
    font-size: 7px;
  }
  .project-mission,
  .why-digital,
  .museum-scope,
  .methodology,
  .editorial-principles,
  .roadmap,
  .project-credit {
    padding-right: 18px;
    padding-left: 18px;
  }
  .mission-statement {
    grid-template-columns: 1fr;
    padding: 30px 23px;
  }
  .mission-statement > p {
    grid-column: auto;
  }
  .why-digital__grid,
  .principles-grid,
  .roadmap-track {
    grid-template-columns: 1fr;
  }
  .reason-card,
  .principle,
  .roadmap-stage {
    min-height: 310px;
  }
  .scope-entry {
    grid-template-columns: 52px 1fr;
    min-height: 225px;
  }
  .scope-entry > b {
    grid-column: 2;
  }
  .methodology-rail {
    grid-template-columns: 1fr 1fr;
  }
  .methodology-step:last-child {
    grid-column: 1/-1;
  }
  .methodology-panel {
    min-height: auto;
    padding: 22px;
  }
  .methodology-panel__visual {
    min-height: 270px;
  }
  .project-position__visual {
    min-height: 420px;
  }
  .project-position__copy {
    padding: 70px 20px;
  }
  .project-credit {
    grid-template-columns: 1fr;
  }
  .project-credit__index {
    writing-mode: horizontal-tb;
    transform: none;
  }
  .project-credit__details {
    grid-column: auto;
  }
  .project-credit__details dl > div {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .about-collaboration {
    grid-template-columns: 1fr;
    padding-right: 18px;
    padding-left: 18px;
  }
  .about-collaboration__symbol {
    font-size: 120px;
  }
  .about-collaboration__link {
    grid-column: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-page *,
  .about-page *::before,
  .about-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.contact-page {
  --contact-progress: 0;
  --contact-rotation: 0deg;
  min-height: 100vh;
  background: linear-gradient(to right, transparent calc(50% - 0.5px), rgba(23, 23, 23, 0.05) 50%, transparent calc(50% + 0.5px)), var(--paper);
}

/* ---------------------------------
   HERO
--------------------------------- */
.contact-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  min-height: calc(100vh - var(--header-height));
  border-bottom: 1px solid var(--line);
}

.contact-hero__copy {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(68px, 8vw, 132px) clamp(24px, 5vw, 84px);
  border-right: 1px solid var(--line);
}
.contact-hero__copy::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 10%;
  width: 1px;
  height: 34%;
  background: var(--yellow);
}
.contact-hero__copy h1 {
  max-width: 880px;
  margin: 24px 0 30px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(54px, 6.6vw, 124px);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.069em;
  text-transform: uppercase;
}

.contact-hero__description {
  max-width: 650px;
  margin: 0;
  color: rgba(23, 23, 23, 0.72);
  font-size: clamp(12px, 1.15vw, 17px);
  line-height: 1.85;
}

.contact-hero__visual {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  background: radial-gradient(circle at 51% 50%, rgba(254, 221, 0, 0.25), transparent 20%), linear-gradient(142deg, rgba(23, 23, 23, 0.018), rgba(23, 23, 23, 0.08));
}

.contact-hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(23, 23, 23, 0.085) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.085) 1px, transparent 1px);
  background-size: clamp(38px, 4.6vw, 78px) clamp(38px, 4.6vw, 78px);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 85%);
          mask-image: radial-gradient(circle at center, black, transparent 85%);
}

.contact-terminal {
  position: absolute;
  top: 50%;
  left: 51%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  width: clamp(280px, 31vw, 490px);
  min-height: clamp(340px, 40vw, 570px);
  padding: clamp(24px, 3.2vw, 48px);
  border: 1px solid var(--ink);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 18px 18px 0 rgba(254, 221, 0, 0.78), -10px -10px 0 rgba(255, 255, 255, 0.76);
  transform: translate(-50%, -50%) rotate(calc(-2.5deg + var(--contact-rotation)));
  animation: contact-terminal-float 7s ease-in-out infinite alternate;
}

.contact-terminal__topline {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(6px, 0.62vw, 9px);
  font-weight: 700;
  letter-spacing: 0.15em;
}

.contact-terminal__address {
  display: grid;
  gap: 14px;
  margin: auto 0;
}
.contact-terminal__address small {
  font-size: clamp(7px, 0.7vw, 10px);
  font-weight: 700;
  letter-spacing: 0.18em;
}
.contact-terminal__address strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(37px, 4.4vw, 72px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.057em;
}

.contact-terminal__channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.contact-terminal__channels span {
  font-size: clamp(6px, 0.61vw, 9px);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.contact-terminal__status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: clamp(6px, 0.65vw, 9px);
  font-weight: 700;
  letter-spacing: 0.15em;
}
.contact-terminal__status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 18px rgba(254, 221, 0, 0.9);
  animation: contact-status-pulse 1.8s ease-in-out infinite;
}

.contact-signal {
  position: absolute;
  top: 50%;
  left: 51%;
  border: 1px solid rgba(23, 23, 23, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.contact-signal::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

.contact-signal--one {
  width: min(54vw, 820px);
  aspect-ratio: 1;
  animation: contact-signal-spin 34s linear infinite;
}
.contact-signal--one::before {
  top: 14%;
  left: 16%;
}

.contact-signal--two {
  width: min(40vw, 610px);
  aspect-ratio: 1;
  border-style: dashed;
  animation: contact-signal-reverse 25s linear infinite;
}
.contact-signal--two::before {
  right: 8%;
  bottom: 22%;
  background: var(--yellow);
  box-shadow: 0 0 17px rgba(254, 221, 0, 0.85);
}

.contact-signal--three {
  width: min(23vw, 360px);
  aspect-ratio: 1;
  border-color: rgba(23, 23, 23, 0.11);
  animation: contact-signal-spin 17s linear infinite reverse;
}

.contact-fragment {
  position: absolute;
  z-index: 8;
  display: grid;
  gap: 5px;
  min-width: 150px;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  background: white;
  box-shadow: 6px 6px 0 rgba(254, 221, 0, 0.78);
  animation: contact-fragment-float 6.5s ease-in-out infinite alternate;
}
.contact-fragment span,
.contact-fragment b {
  font-size: clamp(6px, 0.64vw, 9px);
  letter-spacing: 0.13em;
}
.contact-fragment span {
  color: var(--muted-ink);
}

.contact-fragment--one {
  top: 12%;
  left: 6%;
}

.contact-fragment--two {
  top: 20%;
  right: 5%;
  animation-delay: -2.1s;
}

.contact-fragment--three {
  right: 7%;
  bottom: 11%;
  animation-delay: -4.2s;
}

.contact-hero__index {
  position: absolute;
  right: clamp(20px, 3vw, 52px);
  bottom: 20px;
  z-index: 10;
  display: flex;
  gap: 22px;
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* ---------------------------------
   ROUTES
--------------------------------- */
.contact-routes {
  padding: clamp(86px, 10vw, 160px) clamp(20px, 5vw, 84px);
  border-bottom: 1px solid var(--line);
}

.contact-routes__heading,
.contact-principles__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(40px, 8vw, 150px);
  align-items: end;
  margin-bottom: clamp(50px, 6vw, 92px);
}
.contact-routes__heading h2,
.contact-principles__heading h2 {
  max-width: 980px;
  margin: 20px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(38px, 5.4vw, 88px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.contact-routes__heading > p,
.contact-routes__heading > div + p,
.contact-principles__heading > p,
.contact-principles__heading > div + p {
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: 12px;
  line-height: 1.8;
}

.contact-route-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.contact-route {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: 22px;
  border: 0;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: white;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}
.contact-route:hover, .contact-route:focus-visible, .contact-route.active {
  z-index: 2;
  background: var(--ink);
  color: white;
  outline: 0;
}
.contact-route:hover .contact-route__number,
.contact-route:hover .contact-route__copy small, .contact-route:focus-visible .contact-route__number,
.contact-route:focus-visible .contact-route__copy small, .contact-route.active .contact-route__number,
.contact-route.active .contact-route__copy small {
  color: rgba(255, 255, 255, 0.63);
}
.contact-route:hover .contact-route__icon, .contact-route:focus-visible .contact-route__icon, .contact-route.active .contact-route__icon {
  border-color: var(--yellow);
  color: var(--yellow);
}
.contact-route:focus-visible {
  box-shadow: inset 0 0 0 3px var(--yellow);
}
.contact-route > b {
  margin-top: auto;
  align-self: flex-end;
  font-size: 20px;
}

.contact-route__number {
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.contact-route__icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 44px 0 32px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: "Archivo Black", sans-serif;
  font-size: 28px;
  font-style: normal;
  line-height: 1;
  transition: border-color 220ms ease, color 220ms ease;
}

.contact-route__copy {
  display: grid;
  gap: 16px;
}
.contact-route__copy strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.contact-route__copy small {
  color: rgba(23, 23, 23, 0.65);
  font-size: 10px;
  line-height: 1.65;
  transition: color 220ms ease;
}

/* ---------------------------------
   FORM WORKSPACE
--------------------------------- */
.contact-workspace {
  display: grid;
  grid-template-columns: minmax(300px, 36%) minmax(0, 64%);
  border-bottom: 1px solid var(--line);
}

.contact-workspace__aside {
  padding: clamp(70px, 8vw, 130px) clamp(24px, 4.6vw, 76px);
  border-right: 1px solid var(--line);
  background: linear-gradient(to bottom, transparent 49.9%, rgba(23, 23, 23, 0.035) 50%, transparent 50.1%), white;
}
.contact-workspace__aside > h2 {
  margin: 22px 0 28px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(38px, 4.5vw, 74px);
  font-weight: 400;
  line-height: 0.93;
  letter-spacing: -0.052em;
  text-transform: uppercase;
}
.contact-workspace__aside > p {
  max-width: 590px;
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: 12px;
  line-height: 1.85;
}

.submission-checklist {
  display: grid;
  margin-top: 58px;
  border-top: 1px solid var(--line);
}
.submission-checklist article {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.submission-checklist article > span {
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.submission-checklist article h3 {
  margin: 0 0 8px;
  font-family: "Archivo Black", sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.submission-checklist article p {
  margin: 0;
  color: rgba(23, 23, 23, 0.62);
  font-size: 10px;
  line-height: 1.65;
}

.contact-workspace__notice {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  margin-top: 42px;
  padding: 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: white;
}
.contact-workspace__notice span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--yellow);
  border-radius: 50%;
  color: var(--yellow);
  font-weight: 700;
}
.contact-workspace__notice p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  line-height: 1.7;
}

.contact-form-panel {
  padding: clamp(70px, 8vw, 130px) clamp(24px, 5vw, 88px);
  background: rgba(255, 255, 255, 0.96);
}

.contact-form-panel__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--ink);
}
.contact-form-panel__header h2 {
  margin: 16px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(32px, 3.8vw, 62px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.046em;
  text-transform: uppercase;
}

.form-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.form-status-indicator i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 14px rgba(254, 221, 0, 0.82);
}

.contact-form {
  display: grid;
  gap: 30px;
  padding-top: 42px;
}

.form-grid {
  display: grid;
  gap: 28px;
}

.form-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-field {
  display: grid;
  min-width: 0;
  gap: 10px;
}
.form-field label,
.form-field .form-field__label-row {
  color: rgba(23, 23, 23, 0.72);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.form-field label span,
.form-field .form-field__label-row label span {
  color: #a52920;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(23, 23, 23, 0.48);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 2px 0 var(--yellow);
}
.form-field input[aria-invalid=true],
.form-field select[aria-invalid=true],
.form-field textarea[aria-invalid=true] {
  border-color: #a52920;
  box-shadow: 0 2px 0 rgba(165, 41, 32, 0.28);
}
.form-field input,
.form-field select {
  min-height: 48px;
  padding: 10px 0;
}
.form-field textarea {
  min-height: 210px;
  padding: 15px 0;
  resize: vertical;
  line-height: 1.75;
}
.form-field select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.form-field ::-moz-placeholder {
  color: rgba(23, 23, 23, 0.34);
}
.form-field ::placeholder {
  color: rgba(23, 23, 23, 0.34);
}

.form-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.form-field__label-row output,
.form-field__label-row > span {
  color: var(--muted-ink);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.select-wrap {
  position: relative;
}
.select-wrap::after {
  content: "⌄";
  position: absolute;
  top: 50%;
  right: 3px;
  pointer-events: none;
  transform: translateY(-50%);
  font-size: 13px;
}

.field-hint,
.field-error {
  min-height: 13px;
  font-size: 8px;
  line-height: 1.55;
}

.field-hint {
  color: var(--muted-ink);
}

.field-error {
  color: #8f2018;
}

.form-field--file {
  padding-top: 10px;
}

.file-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 120px;
  padding: 22px;
  border: 1px dashed rgba(23, 23, 23, 0.48);
  background: linear-gradient(to right, transparent 49.8%, rgba(23, 23, 23, 0.035) 50%, transparent 50.2%), rgba(23, 23, 23, 0.018);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.file-drop:hover, .file-drop.is-dragging {
  border-color: var(--ink);
  background: rgba(254, 221, 0, 0.09);
}
.file-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-drop__symbol {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: "Archivo Black", sans-serif;
  font-size: 28px;
}

.file-drop__copy {
  display: grid;
  gap: 6px;
}
.file-drop__copy strong {
  font-family: "Archivo Black", sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.file-drop__copy small {
  color: var(--muted-ink);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.selected-files {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.selected-files li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  font-size: 9px;
}
.selected-files li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selected-files li small {
  color: var(--muted-ink);
}
.selected-files li button {
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.consent-field {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  align-items: start;
  cursor: pointer;
}
.consent-field input {
  position: absolute;
  opacity: 0;
}
.consent-field > span:last-child {
  color: rgba(23, 23, 23, 0.68);
  font-size: 9px;
  line-height: 1.7;
}
.consent-field > span:last-child b {
  color: #a52920;
}
.consent-field input:checked + .consent-field__box {
  background: var(--ink);
  box-shadow: inset 0 0 0 4px white;
}
.consent-field input:focus-visible + .consent-field__box {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.consent-field__box {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid var(--ink);
  transition: background 180ms ease, box-shadow 180ms ease;
}

.consent-error {
  margin-top: -24px;
  margin-left: 35px;
}

.contact-form__footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 34px;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.contact-form__footer p {
  max-width: 660px;
  margin: 0;
  color: var(--muted-ink);
  font-size: 8px;
  line-height: 1.7;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  min-width: 220px;
  padding: 16px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: white;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.contact-submit:hover, .contact-submit:focus-visible {
  background: var(--yellow);
  color: var(--ink);
  outline: 0;
  transform: translateY(-2px);
}
.contact-submit:disabled {
  cursor: wait;
  opacity: 0.55;
  transform: none;
}

.contact-form__status {
  padding: 18px 20px;
  border: 1px solid var(--ink);
  background: rgba(254, 221, 0, 0.14);
  font-size: 10px;
  line-height: 1.7;
}
.contact-form__status.is-error {
  border-color: #8f2018;
  background: rgba(165, 41, 32, 0.07);
  color: #7f1a14;
}
.contact-form__status.is-success {
  background: rgba(254, 221, 0, 0.19);
}

/* ---------------------------------
   PROCESS
--------------------------------- */
.contact-process {
  padding: clamp(86px, 10vw, 160px) clamp(20px, 5vw, 84px);
  border-bottom: 1px solid var(--line);
  background: rgba(23, 23, 23, 0.018);
}

.contact-process__heading,
.contact-faq__heading {
  max-width: 1080px;
  margin-bottom: clamp(52px, 7vw, 100px);
}
.contact-process__heading h2,
.contact-faq__heading h2 {
  margin: 20px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(40px, 5.5vw, 90px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.057em;
  text-transform: uppercase;
}

.contact-process__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.process-stage {
  position: relative;
  min-height: 260px;
  padding: 0 28px 0 0;
}
.process-stage > span {
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.process-stage h3 {
  margin: 38px 0 18px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(24px, 2.7vw, 42px);
  font-weight: 400;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.process-stage p {
  max-width: 280px;
  margin: 0;
  color: rgba(23, 23, 23, 0.64);
  font-size: 10px;
  line-height: 1.7;
}

.process-stage__line {
  position: relative;
  height: 1px;
  margin-top: 22px;
  background: rgba(23, 23, 23, 0.28);
}
.process-stage__line i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: white;
  transform: translateY(-50%);
}
.process-stage__line::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yellow);
  transform: translateY(-50%);
}

/* ---------------------------------
   PRINCIPLES
--------------------------------- */
.contact-principles {
  padding: clamp(86px, 10vw, 160px) clamp(20px, 5vw, 84px);
  border-bottom: 1px solid var(--line);
}

.contact-principles__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.contact-principle {
  min-height: 300px;
  padding: clamp(28px, 4vw, 58px);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.contact-principle > span {
  display: inline-flex;
  padding: 8px 10px;
  border: 1px solid var(--ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.contact-principle h3 {
  max-width: 600px;
  margin: 56px 0 24px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(28px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.043em;
  text-transform: uppercase;
}
.contact-principle p {
  max-width: 590px;
  margin: 0;
  color: rgba(23, 23, 23, 0.65);
  font-size: 10px;
  line-height: 1.75;
}
.contact-principle:nth-child(2), .contact-principle:nth-child(3) {
  background: rgba(23, 23, 23, 0.018);
}

/* ---------------------------------
   FAQ
--------------------------------- */
.contact-faq {
  display: grid;
  grid-template-columns: minmax(260px, 35%) minmax(0, 65%);
  gap: clamp(40px, 8vw, 140px);
  padding: clamp(86px, 10vw, 160px) clamp(20px, 5vw, 84px);
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  color: white;
}

.contact-faq__heading {
  margin: 0;
}
.contact-faq__heading .section-label {
  color: rgba(255, 255, 255, 0.52);
}
.contact-faq__heading h2 {
  font-size: clamp(42px, 5vw, 82px);
}

.contact-faq__list {
  display: grid;
  align-content: start;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.contact-faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.contact-faq__item summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  cursor: pointer;
  list-style: none;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(18px, 2vw, 29px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.contact-faq__item summary::-webkit-details-marker {
  display: none;
}
.contact-faq__item summary b {
  color: var(--yellow);
  font-family: "JetBrains Mono", monospace;
  font-size: 22px;
  font-weight: 400;
  transition: transform 180ms ease;
}
.contact-faq__item p {
  max-width: 750px;
  margin: 0;
  padding: 0 42px 30px 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  line-height: 1.8;
}
.contact-faq__item[open] summary b {
  transform: rotate(45deg);
}

/* ---------------------------------
   CLOSING
--------------------------------- */
.contact-closing {
  display: grid;
  grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 100px);
  align-items: center;
  padding: clamp(72px, 8vw, 128px) clamp(20px, 5vw, 84px);
  border-bottom: 1px solid var(--line);
}

.contact-closing__mark {
  display: grid;
  place-items: center;
  width: clamp(150px, 17vw, 260px);
  aspect-ratio: 1;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle, var(--yellow) 0 8%, transparent 8.5%), repeating-radial-gradient(circle, transparent 0 18px, rgba(23, 23, 23, 0.18) 19px 20px);
  font-family: "Bungee", sans-serif;
  font-size: clamp(34px, 5vw, 72px);
}

.contact-closing__copy h2 {
  max-width: 950px;
  margin: 18px 0 24px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(34px, 4.5vw, 72px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.contact-closing__copy > p:last-child {
  max-width: 720px;
  margin: 0;
  color: rgba(23, 23, 23, 0.65);
  font-size: 11px;
  line-height: 1.75;
}

.contact-closing__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-width: 230px;
  padding: 16px 0;
  border-top: 1px solid var(--ink);
  text-decoration: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.contact-closing__link:hover, .contact-closing__link:focus-visible {
  color: #8d7b00;
}

/* ---------------------------------
   ANIMATION
--------------------------------- */
@keyframes contact-terminal-float {
  from {
    translate: 0 -8px;
  }
  to {
    translate: 0 10px;
  }
}
@keyframes contact-status-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.82);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@keyframes contact-signal-spin {
  to {
    rotate: 360deg;
  }
}
@keyframes contact-signal-reverse {
  to {
    rotate: -360deg;
  }
}
@keyframes contact-fragment-float {
  from {
    transform: translateY(-8px) rotate(-1.2deg);
  }
  to {
    transform: translateY(10px) rotate(1.4deg);
  }
}
/* ---------------------------------
   RESPONSIVE
--------------------------------- */
@media (max-width: 1280px) {
  .contact-route-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .contact-route {
    min-height: 290px;
  }
  .contact-workspace {
    grid-template-columns: minmax(280px, 40%) minmax(0, 60%);
  }
}
@media (max-width: 1040px) {
  .contact-hero {
    grid-template-columns: 1fr;
  }
  .contact-hero__copy {
    min-height: 610px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .contact-hero__visual {
    min-height: 680px;
  }
  .contact-routes__heading,
  .contact-principles__heading {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .contact-workspace {
    grid-template-columns: 1fr;
  }
  .contact-workspace__aside {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .submission-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 1px solid var(--line);
  }
  .submission-checklist article {
    padding: 24px;
    border-right: 1px solid var(--line);
  }
  .contact-faq {
    grid-template-columns: 1fr;
  }
  .contact-closing {
    grid-template-columns: auto 1fr;
  }
  .contact-closing__link {
    grid-column: 2;
  }
}
@media (max-width: 760px) {
  .contact-hero__copy {
    min-height: 520px;
  }
  .contact-hero__copy h1 {
    font-size: clamp(48px, 15vw, 78px);
  }
  .contact-hero__visual {
    min-height: 560px;
  }
  .contact-terminal {
    width: min(78vw, 390px);
    min-height: 410px;
  }
  .contact-fragment {
    min-width: 118px;
    padding: 9px 10px;
  }
  .contact-fragment--one {
    top: 8%;
    left: 4%;
  }
  .contact-fragment--two {
    top: 9%;
    right: 4%;
  }
  .contact-fragment--three {
    right: 4%;
    bottom: 7%;
  }
  .contact-hero__index {
    left: 18px;
    right: auto;
    flex-direction: column;
    gap: 5px;
  }
  .contact-route-grid {
    grid-template-columns: 1fr 1fr;
  }
  .contact-route {
    min-height: 280px;
  }
  .contact-route__icon {
    margin: 34px 0 24px;
  }
  .form-grid--two,
  .contact-principles__grid,
  .contact-process__track,
  .submission-checklist {
    grid-template-columns: 1fr;
  }
  .submission-checklist article {
    border-right: 0;
  }
  .contact-form-panel__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .contact-form__footer {
    grid-template-columns: 1fr;
  }
  .contact-submit {
    width: 100%;
  }
  .process-stage {
    min-height: 0;
    padding: 0 0 46px;
  }
  .contact-principle {
    min-height: 0;
  }
  .contact-closing {
    grid-template-columns: 1fr;
  }
  .contact-closing__mark {
    width: 150px;
  }
  .contact-closing__link {
    grid-column: auto;
  }
}
@media (max-width: 520px) {
  .contact-route-grid {
    grid-template-columns: 1fr;
  }
  .contact-route {
    min-height: 250px;
  }
  .contact-terminal__channels {
    grid-template-columns: 1fr;
  }
  .contact-terminal {
    min-height: 430px;
  }
  .contact-fragment--two {
    display: none;
  }
  .form-field__label-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .file-drop {
    align-items: flex-start;
    flex-direction: column;
  }
  .selected-files li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .selected-files li small {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-terminal,
  .contact-signal,
  .contact-fragment,
  .contact-terminal__status i {
    animation: none !important;
  }
}
.policies-page {
  --policy-progress: 0;
  --policy-rotation: 0deg;
  min-height: 100vh;
  background: linear-gradient(to right, transparent calc(50% - 0.5px), rgba(23, 23, 23, 0.045) 50%, transparent calc(50% + 0.5px)), var(--paper);
}

/* ---------------------------------
   HERO
--------------------------------- */
.policies-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  min-height: calc(100vh - var(--header-height));
  border-bottom: 1px solid var(--line);
}

.policies-hero__copy {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(68px, 8vw, 132px) clamp(24px, 5vw, 84px);
  border-right: 1px solid var(--line);
}
.policies-hero__copy::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 12%;
  width: 1px;
  height: 34%;
  background: var(--yellow);
}
.policies-hero__copy h1 {
  max-width: 920px;
  margin: 24px 0 30px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(52px, 6.35vw, 118px);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.068em;
  text-transform: uppercase;
}

.policies-hero__description {
  max-width: 680px;
  margin: 0;
  color: rgba(23, 23, 23, 0.72);
  font-size: clamp(12px, 1.12vw, 17px);
  line-height: 1.85;
}

.policies-hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
}

.policy-print-button {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(23, 23, 23, 0.35);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}
.policy-print-button:hover, .policy-print-button:focus-visible {
  border-bottom-color: var(--yellow);
}

.policies-hero__visual {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: radial-gradient(circle at 52% 50%, rgba(254, 221, 0, 0.24), transparent 18%), linear-gradient(135deg, rgba(23, 23, 23, 0.012), rgba(23, 23, 23, 0.075));
}

.policies-hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(23, 23, 23, 0.085) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.085) 1px, transparent 1px);
  background-size: clamp(36px, 4.3vw, 74px) clamp(36px, 4.3vw, 74px);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 84%);
          mask-image: radial-gradient(circle at center, black, transparent 84%);
}

.policy-orbit {
  position: absolute;
  top: 50%;
  left: 52%;
  border: 1px solid rgba(23, 23, 23, 0.2);
  border-radius: 50%;
}

.policy-orbit--outer {
  width: min(58vw, 880px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(calc(-18deg + var(--policy-rotation)));
  animation: policies-orbit 38s linear infinite;
}
.policy-orbit--outer::before, .policy-orbit--outer::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.policy-orbit--outer::before {
  top: 11%;
  left: 17%;
  width: 10px;
  height: 10px;
  background: var(--yellow);
  box-shadow: 0 0 28px rgba(254, 221, 0, 0.8);
}
.policy-orbit--outer::after {
  right: 8%;
  bottom: 24%;
  width: 7px;
  height: 7px;
  background: var(--ink);
}

.policy-orbit--inner {
  width: min(38vw, 570px);
  aspect-ratio: 1;
  border-style: dashed;
  transform: translate(-50%, -50%) rotate(calc(25deg - var(--policy-rotation)));
  animation: policies-orbit-reverse 24s linear infinite;
}

.policy-document {
  position: absolute;
  z-index: 4;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  width: clamp(190px, 17vw, 285px);
  min-height: 220px;
  padding: clamp(18px, 2vw, 30px);
  border: 1px solid var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 9px 9px 0 rgba(254, 221, 0, 0.76);
  animation: policy-document-float 7s ease-in-out infinite alternate;
}
.policy-document > span {
  color: var(--muted-ink);
  font-size: 8px;
  letter-spacing: 0.14em;
}
.policy-document small {
  justify-self: end;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.policy-document strong {
  grid-column: 1/-1;
  align-self: center;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(27px, 3vw, 50px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.045em;
}
.policy-document i {
  grid-column: 1/-1;
  display: block;
  height: 1px;
  background: rgba(23, 23, 23, 0.2);
}
.policy-document b {
  grid-column: 1/-1;
  align-self: end;
  font-size: 7px;
  letter-spacing: 0.12em;
}

.policy-document--editorial {
  top: 11%;
  left: 9%;
  transform: rotate(-5deg);
}

.policy-document--privacy {
  top: 27%;
  right: 6%;
  transform: rotate(5deg);
  animation-delay: -2.2s;
}

.policy-document--accessibility {
  right: 23%;
  bottom: 7%;
  transform: rotate(-2deg);
  animation-delay: -4.3s;
}

.policy-core {
  position: absolute;
  top: 51%;
  left: 49%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: clamp(150px, 15vw, 230px);
  aspect-ratio: 1;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 13px rgba(255, 255, 255, 0.72);
  transform: translate(-50%, -50%);
}
.policy-core span {
  position: absolute;
  inset: 11%;
  border: 1px dashed rgba(23, 23, 23, 0.4);
  border-radius: 50%;
  animation: policies-orbit 18s linear infinite;
}
.policy-core strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(21px, 2.5vw, 40px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-align: center;
}
.policy-core small {
  position: absolute;
  bottom: 17%;
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.policies-hero__index {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 12;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px clamp(20px, 3vw, 48px);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ---------------------------------
   POLICY NAVIGATION
--------------------------------- */
.policy-navigation {
  position: sticky;
  top: var(--header-height);
  z-index: 22;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
}
.policy-navigation a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  min-height: 102px;
  padding: 22px clamp(18px, 2.5vw, 42px);
  border-right: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.policy-navigation a:last-child {
  border-right: 0;
}
.policy-navigation a::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--yellow);
  transition: right 280ms ease;
}
.policy-navigation a.active::after, .policy-navigation a:hover::after, .policy-navigation a:focus-visible::after {
  right: 0;
}
.policy-navigation a > span {
  grid-row: 1/3;
  color: var(--muted-ink);
  font-size: 9px;
  letter-spacing: 0.12em;
}
.policy-navigation a strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(15px, 1.55vw, 25px);
  font-weight: 400;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.policy-navigation a small {
  color: var(--muted-ink);
  font-size: 8px;
  line-height: 1.5;
}

/* ---------------------------------
   POLICY CHAPTERS
--------------------------------- */
.policy-chapter {
  display: grid;
  grid-template-columns: minmax(250px, 28%) minmax(0, 72%);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-height) + 100px);
}

.policy-chapter__aside {
  position: sticky;
  top: calc(var(--header-height) + 103px);
  align-self: start;
  min-height: calc(100vh - var(--header-height) - 103px);
  padding: clamp(46px, 6vw, 92px) clamp(22px, 4vw, 64px);
  border-right: 1px solid var(--line);
  background: linear-gradient(to bottom, rgba(254, 221, 0, 0.08), transparent 52%), white;
}
.policy-chapter__aside nav {
  display: grid;
  margin-top: 38px;
  border-top: 1px solid var(--line);
}
.policy-chapter__aside nav a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: rgba(23, 23, 23, 0.66);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
}
.policy-chapter__aside nav a:hover, .policy-chapter__aside nav a:focus-visible {
  color: var(--ink);
  padding-left: 8px;
}

.policy-chapter__number {
  margin: 26px 0 20px;
  color: var(--yellow);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(90px, 12vw, 190px);
  line-height: 0.75;
  text-shadow: 1px 0 var(--ink), -1px 0 var(--ink), 0 1px var(--ink), 0 -1px var(--ink);
}

.policy-chapter__summary {
  max-width: 330px;
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: 11px;
  line-height: 1.75;
}

.policy-chapter__body {
  min-width: 0;
  padding: clamp(58px, 8vw, 126px) clamp(24px, 7vw, 112px);
}

.policy-heading {
  max-width: 980px;
  padding-bottom: clamp(50px, 7vw, 92px);
  border-bottom: 1px solid var(--line);
}
.policy-heading h2 {
  max-width: 900px;
  margin: 20px 0 26px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(43px, 5.5vw, 92px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.058em;
  text-transform: uppercase;
}
.policy-heading > p {
  max-width: 760px;
  margin: 0;
  color: rgba(23, 23, 23, 0.7);
  font-size: clamp(12px, 1.15vw, 16px);
  line-height: 1.85;
}

.policy-block {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: clamp(20px, 4vw, 60px);
  max-width: 1050px;
  padding: clamp(48px, 6vw, 86px) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-height) + 125px);
}
.policy-block h3 {
  max-width: 760px;
  margin: 0 0 24px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.policy-block p {
  max-width: 820px;
  margin: 0 0 18px;
  color: rgba(23, 23, 23, 0.72);
  font-size: 12px;
  line-height: 1.85;
}
.policy-block p:last-child {
  margin-bottom: 0;
}

.policy-block__index {
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.policy-principle-grid,
.accessibility-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 34px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.policy-principle-grid section,
.accessibility-feature-grid section {
  min-height: 158px;
  padding: 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.policy-principle-grid section b,
.accessibility-feature-grid section b {
  display: block;
  margin-bottom: 12px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.policy-principle-grid section p,
.accessibility-feature-grid section p {
  margin: 0;
  font-size: 10px;
  line-height: 1.7;
}

.policy-list {
  display: grid;
  gap: 13px;
  max-width: 800px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.policy-list li {
  position: relative;
  padding: 0 0 13px 26px;
  border-bottom: 1px solid rgba(23, 23, 23, 0.12);
  color: rgba(23, 23, 23, 0.72);
  font-size: 11px;
  line-height: 1.72;
}
.policy-list li::before {
  content: "+";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--yellow);
  font-weight: 800;
  text-shadow: 0.5px 0 var(--ink), -0.5px 0 var(--ink);
}

.policy-inline-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  min-width: 250px;
  margin-top: 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(23, 23, 23, 0.42);
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}
.policy-inline-link:hover, .policy-inline-link:focus-visible {
  color: #8f7a00;
  border-top-color: var(--yellow);
}

.policy-detail {
  max-width: 1050px;
  border-bottom: 1px solid var(--line);
}
.policy-detail summary {
  position: relative;
  padding: 28px 54px 28px 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.policy-detail summary::-webkit-details-marker {
  display: none;
}
.policy-detail summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 2px;
  color: var(--yellow);
  font-family: "JetBrains Mono", monospace;
  font-size: 30px;
  transform: translateY(-50%);
}
.policy-detail[open] summary::after {
  content: "−";
}
.policy-detail > div {
  max-width: 820px;
  padding: 0 0 36px;
}
.policy-detail > div p {
  color: rgba(23, 23, 23, 0.72);
  font-size: 11px;
  line-height: 1.8;
}

.policy-notice {
  max-width: 830px;
  margin-top: 34px;
  padding: 22px 24px;
  border: 1px solid var(--ink);
  border-left: 6px solid var(--yellow);
  background: rgba(254, 221, 0, 0.08);
}
.policy-notice strong {
  display: block;
  margin-bottom: 9px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.policy-notice p {
  margin: 0;
  font-size: 10px;
  line-height: 1.75;
}

.data-category-list {
  display: grid;
  margin-top: 32px;
  border-top: 1px solid var(--line);
}
.data-category-list section {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr);
  gap: 18px;
  padding: 21px 0;
  border-bottom: 1px solid var(--line);
}
.data-category-list section > span {
  color: var(--muted-ink);
  font-size: 8px;
  letter-spacing: 0.12em;
}
.data-category-list section b {
  display: block;
  margin-bottom: 7px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.data-category-list section p {
  margin: 0;
  font-size: 10px;
}

.privacy-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1050px;
  margin: 68px 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.privacy-mini-grid section {
  min-height: 190px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.privacy-mini-grid section b {
  display: block;
  margin-bottom: 15px;
  font-family: "Archivo Black", sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.privacy-mini-grid section p {
  margin: 0;
  color: rgba(23, 23, 23, 0.68);
  font-size: 10px;
  line-height: 1.75;
}

.accessibility-target {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 22px;
  max-width: 560px;
  margin-top: 34px;
  padding: 26px;
  border: 1px solid var(--ink);
  background: var(--yellow);
  box-shadow: 9px 9px 0 var(--ink);
}
.accessibility-target span {
  grid-row: 1/3;
  align-self: center;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.accessibility-target strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.accessibility-target b {
  font-size: 8px;
  letter-spacing: 0.14em;
}

.accessibility-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.accessibility-feature-grid section {
  min-height: 190px;
}
.accessibility-feature-grid section > span {
  display: block;
  margin-bottom: 28px;
  color: var(--muted-ink);
  font-size: 8px;
}

.accessibility-roadmap {
  max-width: 1050px;
  margin: clamp(62px, 8vw, 112px) 0;
  padding: clamp(30px, 5vw, 62px);
  border: 1px solid var(--ink);
  background: #171717;
  color: white;
}

.accessibility-roadmap__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.accessibility-roadmap__heading .section-label {
  color: rgba(255, 255, 255, 0.58);
}
.accessibility-roadmap__heading h3 {
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(28px, 4vw, 58px);
  font-weight: 400;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.accessibility-roadmap ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.accessibility-roadmap ol li {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.accessibility-roadmap ol li > span {
  color: var(--yellow);
  font-size: 9px;
  letter-spacing: 0.12em;
}
.accessibility-roadmap ol li b {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.accessibility-roadmap ol li p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 10px;
  line-height: 1.65;
}

/* ---------------------------------
   REFERENCES + CONTACT
--------------------------------- */
.policy-reference {
  display: grid;
  grid-template-columns: minmax(260px, 35%) minmax(0, 65%);
  border-bottom: 1px solid var(--line);
}

.policy-reference__heading {
  padding: clamp(54px, 7vw, 104px) clamp(24px, 5vw, 80px);
  border-right: 1px solid var(--line);
}
.policy-reference__heading h2 {
  margin: 20px 0 24px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(36px, 4.5vw, 72px);
  font-weight: 400;
  line-height: 0.93;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.policy-reference__heading > p {
  color: rgba(23, 23, 23, 0.68);
  font-size: 11px;
  line-height: 1.8;
}

.policy-reference__links {
  display: grid;
}
.policy-reference__links a {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 28px clamp(24px, 5vw, 76px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.policy-reference__links a:last-child {
  border-bottom: 0;
}
.policy-reference__links a:hover, .policy-reference__links a:focus-visible {
  background: rgba(254, 221, 0, 0.12);
}
.policy-reference__links a span {
  color: var(--muted-ink);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.policy-reference__links a strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(17px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.policy-contact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 5vw, 84px);
  padding: clamp(58px, 8vw, 118px) clamp(24px, 6vw, 100px);
  background: var(--ink);
  color: white;
}

.policy-contact__symbol {
  color: var(--yellow);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(100px, 14vw, 220px);
  line-height: 0.65;
}

.policy-contact__copy {
  max-width: 780px;
}
.policy-contact__copy .section-label {
  color: rgba(255, 255, 255, 0.58);
}
.policy-contact__copy h2 {
  margin: 17px 0 22px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(36px, 5vw, 78px);
  font-weight: 400;
  line-height: 0.91;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.policy-contact__copy p {
  max-width: 660px;
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  line-height: 1.8;
}

.policy-contact__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 54px;
  min-width: 260px;
  padding: 17px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.48);
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}
.policy-contact__link:hover, .policy-contact__link:focus-visible {
  color: var(--yellow);
  border-top-color: var(--yellow);
}

/* ---------------------------------
   MOTION + RESPONSIVE
--------------------------------- */
@keyframes policies-orbit {
  to {
    transform: translate(-50%, -50%) rotate(342deg);
  }
}
@keyframes policies-orbit-reverse {
  to {
    transform: translate(-50%, -50%) rotate(-335deg);
  }
}
@keyframes policy-document-float {
  to {
    translate: 0 -13px;
  }
}
@media (max-width: 1180px) {
  .policy-document {
    width: 210px;
    min-height: 190px;
  }
  .policy-document--accessibility {
    right: 12%;
  }
  .policy-chapter {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .policy-chapter__body {
    padding-right: 54px;
    padding-left: 54px;
  }
  .accessibility-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .policies-hero {
    grid-template-columns: 1fr;
  }
  .policies-hero__copy {
    min-height: 640px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .policies-hero__visual {
    min-height: 680px;
  }
  .policy-navigation {
    top: 68px;
  }
  .policy-navigation a {
    min-height: 86px;
    padding: 16px;
  }
  .policy-navigation a small {
    display: none;
  }
  .policy-chapter {
    grid-template-columns: 1fr;
  }
  .policy-chapter__aside {
    position: relative;
    top: auto;
    min-height: 0;
    padding: 42px 24px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .policy-chapter__aside nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
  }
  .policy-chapter__number {
    font-size: 120px;
  }
  .policy-chapter__body {
    padding: 66px 24px 84px;
  }
  .policy-reference {
    grid-template-columns: 1fr;
  }
  .policy-reference__heading {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .policy-contact {
    grid-template-columns: auto 1fr;
  }
  .policy-contact__link {
    grid-column: 1/-1;
  }
}
@media (max-width: 620px) {
  .policies-hero__copy {
    min-height: 590px;
    padding: 78px 20px 92px;
  }
  .policies-hero__copy h1 {
    font-size: clamp(48px, 16vw, 74px);
  }
  .policies-hero__actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .policies-hero__visual {
    min-height: 600px;
  }
  .policy-document {
    width: 172px;
    min-height: 170px;
    padding: 16px;
  }
  .policy-document--editorial {
    top: 8%;
    left: 5%;
  }
  .policy-document--privacy {
    top: 26%;
    right: 4%;
  }
  .policy-document--accessibility {
    right: 17%;
    bottom: 5%;
  }
  .policy-core {
    width: 134px;
  }
  .policies-hero__index {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .policy-navigation {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
  }
  .policy-navigation a {
    min-height: 72px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .policy-chapter__aside nav {
    grid-template-columns: 1fr;
  }
  .policy-heading h2 {
    font-size: clamp(40px, 13vw, 62px);
  }
  .policy-block {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .policy-principle-grid,
  .accessibility-feature-grid,
  .privacy-mini-grid {
    grid-template-columns: 1fr;
  }
  .policy-reference__links a {
    grid-template-columns: 1fr auto;
  }
  .policy-reference__links a span {
    grid-column: 1/-1;
  }
  .policy-contact {
    grid-template-columns: 1fr;
    padding-right: 22px;
    padding-left: 22px;
  }
  .policy-contact__symbol {
    font-size: 120px;
  }
  .policy-contact__link {
    min-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .policy-orbit,
  .policy-document,
  .policy-core span {
    animation: none !important;
  }
}
@media print {
  .site-header,
  .policies-hero__visual,
  .policies-hero__actions,
  .policy-navigation,
  .policy-chapter__aside nav,
  .policy-contact,
  .archive-footer,
  .policy-print-button {
    display: none !important;
  }
  .policies-page,
  .policies-hero,
  .policy-chapter,
  .policy-reference {
    display: block;
    background: white;
  }
  .policies-hero__copy,
  .policy-chapter__aside,
  .policy-chapter__body,
  .policy-reference__heading,
  .policy-reference__links {
    padding: 24px 0;
    border: 0;
  }
  .policy-chapter__aside {
    position: static;
    min-height: 0;
  }
  .policy-chapter__number {
    font-size: 50px;
  }
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}
/* =========================================================
   BLOG POST
   Article-first architecture
   LIGHT = DEFAULT
   DARK = html[data-theme="dark"]
========================================================= */
.blog-post-page {
  --post-bg: #ffffff;
  --post-ink: #171717;
  --post-muted: rgba(23, 23, 23, 0.58);
  --post-soft: rgba(23, 23, 23, 0.065);
  --post-line: rgba(23, 23, 23, 0.2);
  --post-line-strong: rgba(23, 23, 23, 0.38);
  --post-yellow: #fedd00;
  --post-card-bg: #ffffff;
  --post-quote-bg: rgba(23, 23, 23, 0.035);
  min-height: 100vh;
  background: var(--post-bg);
  color: var(--post-ink);
  font-family: "JetBrains Mono", monospace;
  transition: background-color 280ms ease, color 280ms ease;
}

html[data-theme=dark] .blog-post-page {
  --post-bg: #171717;
  --post-ink: #ffffff;
  --post-muted: rgba(255, 255, 255, 0.58);
  --post-soft: rgba(255, 255, 255, 0.075);
  --post-line: rgba(255, 255, 255, 0.2);
  --post-line-strong: rgba(255, 255, 255, 0.4);
  --post-card-bg: #171717;
  --post-quote-bg: rgba(255, 255, 255, 0.045);
}

.blog-post-page button,
.blog-post-page input,
.blog-post-page textarea,
.blog-post-page select {
  font: inherit;
}

.blog-post-page a {
  color: inherit;
}

.blog-post-page ::-moz-selection {
  background: var(--post-yellow);
  color: #171717;
}

.blog-post-page ::selection {
  background: var(--post-yellow);
  color: #171717;
}

/* =========================================================
   ARTICLE
========================================================= */
.journal-article {
  width: 100%;
  background: var(--post-bg);
  color: var(--post-ink);
}

.journal-article__header {
  width: min(1320px, 100% - clamp(40px, 8vw, 140px));
  margin: 0 auto;
  padding: clamp(58px, 7vw, 110px) 0 clamp(48px, 6vw, 90px);
  border-bottom: 1px solid var(--post-line-strong);
}

.journal-article__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(46px, 6vw, 86px);
}

.article-back-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--post-line-strong);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-decoration: none;
  text-transform: uppercase;
}
.article-back-link span:first-child {
  transition: transform 180ms ease;
}
.article-back-link:hover span:first-child, .article-back-link:focus-visible span:first-child {
  transform: translateX(-4px);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 24px;
  color: var(--post-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.article-meta span,
.article-meta time {
  position: relative;
}
.article-meta span:not(:last-child)::after,
.article-meta time::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--post-yellow);
  transform: translateY(-50%);
}

.journal-article__header h1 {
  max-width: 1180px;
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(48px, 7.1vw, 126px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.article-deck {
  max-width: 900px;
  margin: clamp(28px, 3vw, 44px) 0 0;
  color: var(--post-muted);
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.82;
}

.journal-article__details {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-top: clamp(38px, 5vw, 68px);
}

.article-byline {
  display: grid;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.article-byline span {
  color: var(--post-muted);
}
.article-byline strong {
  font-size: 11px;
  font-weight: 700;
}

.article-share {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.copy-link-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0 8px;
  border: 0;
  border-bottom: 1px solid var(--post-line-strong);
  background: transparent;
  color: var(--post-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
}
.copy-link-button span:last-child {
  transition: transform 180ms ease;
}
.copy-link-button:hover span:last-child, .copy-link-button:focus-visible span:last-child {
  transform: translate(3px, -3px);
}

.copy-link-status {
  min-height: 1em;
  margin: 0;
  color: var(--post-muted);
  font-size: 8px;
}

/* =========================================================
   ARTICLE BODY
========================================================= */
.journal-article__body-wrap {
  width: min(900px, 100% - clamp(40px, 8vw, 140px));
  margin: 0 auto;
  padding: clamp(58px, 7vw, 105px) 0 clamp(78px, 9vw, 140px);
}

.article-body {
  color: var(--post-ink);
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(15px, 1.12vw, 18px);
  line-height: 1.9;
}
.article-body > *:first-child {
  margin-top: 0;
}
.article-body > *:last-child {
  margin-bottom: 0;
}
.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote,
.article-body figure,
.article-body table,
.article-body pre {
  margin: 0 0 1.7em;
}
.article-body h2,
.article-body h3,
.article-body h4 {
  color: var(--post-ink);
}
.article-body h2 {
  margin: clamp(58px, 7vw, 94px) 0 24px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(28px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.article-body h3 {
  margin: 48px 0 18px;
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.28;
  letter-spacing: -0.025em;
}
.article-body h4 {
  margin: 36px 0 14px;
  font-size: 15px;
  line-height: 1.35;
  text-transform: uppercase;
}
.article-body strong {
  font-weight: 800;
}
.article-body em {
  font-style: italic;
}
.article-body a {
  text-decoration-color: var(--post-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.article-body a:hover, .article-body a:focus-visible {
  background: var(--post-yellow);
  color: #171717;
}
.article-body ul,
.article-body ol {
  padding-left: 1.5em;
}
.article-body li + li {
  margin-top: 0.7em;
}
.article-body blockquote {
  padding: clamp(24px, 3vw, 38px);
  border-left: 5px solid var(--post-yellow);
  background: var(--post-quote-bg);
  font-family: "Courier Prime", monospace;
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.65;
}
.article-body hr {
  height: 1px;
  margin: clamp(54px, 7vw, 90px) 0;
  border: 0;
  background: var(--post-line);
}
.article-body img,
.article-body video,
.article-body iframe {
  display: block;
  max-width: 100%;
  margin: clamp(34px, 4vw, 58px) auto;
}
.article-body img,
.article-body video {
  height: auto;
}
.article-body iframe {
  width: 100%;
  min-height: 460px;
  border: 1px solid var(--post-line);
}
.article-body figure {
  margin-top: clamp(34px, 4vw, 58px);
  margin-bottom: clamp(34px, 4vw, 58px);
}
.article-body figure img {
  margin: 0;
}
.article-body figcaption {
  margin-top: 10px;
  color: var(--post-muted);
  font-size: 10px;
  line-height: 1.55;
}
.article-body code {
  padding: 0.12em 0.35em;
  background: var(--post-soft);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
}
.article-body pre {
  overflow-x: auto;
  padding: 22px;
  background: var(--post-soft);
  border: 1px solid var(--post-line);
}
.article-body pre code {
  padding: 0;
  background: transparent;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.article-body th,
.article-body td {
  padding: 13px 12px;
  border: 1px solid var(--post-line);
  text-align: left;
  vertical-align: top;
}
.article-body th {
  background: var(--post-soft);
  font-weight: 800;
}

/* =========================================================
   SOURCES / EDITORIAL NOTE
========================================================= */
.article-sources,
.article-editorial-note {
  margin-top: clamp(70px, 9vw, 120px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--post-line-strong);
}

.article-section-heading {
  margin-bottom: 30px;
}
.article-section-heading h2 {
  max-width: 700px;
  margin: 8px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(25px, 3vw, 44px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.section-label {
  margin: 0;
  color: var(--post-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.source-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: source;
}
.source-list li {
  counter-increment: source;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--post-line);
}
.source-list li::before {
  content: counter(source, decimal-leading-zero);
  color: var(--post-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.source-list li:last-child {
  border-bottom: 1px solid var(--post-line);
}
.source-list div {
  display: grid;
  gap: 6px;
}
.source-list a,
.source-list strong {
  font-size: 12px;
  line-height: 1.55;
}
.source-list a {
  text-decoration-color: var(--post-yellow);
  text-underline-offset: 3px;
}
.source-list small {
  color: var(--post-muted);
  font-size: 9px;
  line-height: 1.55;
}

.article-editorial-note {
  padding-right: clamp(20px, 4vw, 50px);
  padding-bottom: clamp(24px, 4vw, 42px);
  padding-left: clamp(20px, 4vw, 50px);
  border-left: 5px solid var(--post-yellow);
  background: var(--post-soft);
}
.article-editorial-note > p:last-child {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.75;
}

/* =========================================================
   RELATED POSTS
========================================================= */
.related-posts {
  padding: clamp(58px, 7vw, 96px) clamp(24px, 5vw, 78px) clamp(72px, 8vw, 120px);
  border-top: 1px solid var(--post-line-strong);
  background: var(--post-bg);
}

.related-posts__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  max-width: 1440px;
  margin: 0 auto clamp(34px, 4vw, 54px);
}
.related-posts__heading h2 {
  margin: 8px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(30px, 4vw, 62px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.related-posts__heading > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--post-line-strong);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
}
.related-posts__heading > a span:last-child {
  transition: transform 180ms ease;
}
.related-posts__heading > a:hover span:last-child, .related-posts__heading > a:focus-visible span:last-child {
  transform: translateX(5px);
}

.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1440px;
  margin: 0 auto;
  border-top: 1px solid var(--post-line);
  border-left: 1px solid var(--post-line);
}

.related-card {
  min-width: 0;
  border-right: 1px solid var(--post-line);
  border-bottom: 1px solid var(--post-line);
  background: var(--post-card-bg);
}
.related-card > a {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  height: 100%;
  padding: clamp(24px, 3vw, 40px);
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}
.related-card:hover > a, .related-card:focus-within > a {
  background: var(--post-yellow);
  color: #171717;
}
.related-card:hover .related-card__meta, .related-card:focus-within .related-card__meta {
  color: rgba(23, 23, 23, 0.62);
}
.related-card h3 {
  margin: 28px 0 16px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(20px, 2vw, 31px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.related-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--post-muted);
  font-size: 11px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.related-card:hover p, .related-card:focus-within p {
  color: rgba(23, 23, 23, 0.7);
}

.related-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--post-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.related-card__action {
  margin-top: auto;
  padding-top: 34px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* =========================================================
   NOT FOUND
========================================================= */
.article-not-found {
  width: min(900px, 100% - 48px);
  margin: 0 auto;
  padding: clamp(100px, 14vw, 220px) 0;
}
.article-not-found h1 {
  margin: 14px 0 24px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(42px, 7vw, 100px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.article-not-found > p:not(.section-label) {
  max-width: 620px;
  color: var(--post-muted);
  line-height: 1.75;
}
.article-not-found a {
  display: inline-block;
  margin-top: 30px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--post-line-strong);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 900px) {
  .journal-article__topline,
  .journal-article__details,
  .related-posts__heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .article-meta {
    justify-content: flex-start;
  }
  .article-share {
    justify-items: start;
  }
  .related-posts__grid {
    grid-template-columns: 1fr;
  }
  .related-card > a {
    min-height: 260px;
  }
}
@media (max-width: 600px) {
  .journal-article__header,
  .journal-article__body-wrap {
    width: calc(100% - 40px);
  }
  .journal-article__topline {
    margin-bottom: 42px;
  }
  .article-meta {
    gap: 9px 18px;
  }
  .article-meta span:not(:last-child)::after,
  .article-meta time::after {
    right: -11px;
  }
  .article-body iframe {
    min-height: 240px;
  }
  .related-posts {
    padding-right: 20px;
    padding-left: 20px;
  }
}
/* =========================================================
   MUSEUM HEADER

   #171717      #171717
   LIGHT GREY #ececec
   YELLOW     #fedd00
   WHITE      #ffffff
   ========================================================= */
.museum-header {
  position: relative;
  z-index: 1000;
  width: 100%;
  min-width: 320px;
  background: #ffffff;
  color: #171717;
  font-family: "JetBrains Mono", monospace;
  --header-signature-height: 42px;
  --signature-bg: #171717;
  --signature-fg: #ffffff;
  --signature-muted: rgba(255, 255, 255, 0.46);
  --signature-soft: rgba(255, 255, 255, 0.16);
  --signature-line: rgba(255, 255, 255, 0.24);
  --signature-border: rgba(255, 255, 255, 0.16);
  --signature-accent: #fedd00;
  /* =====================================================
     TOP REGISTER
     ===================================================== */
}
.museum-header .museum-header__register {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 42px;
  padding: 0 clamp(24px, 3.5vw, 64px);
  background: #171717;
  color: white;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.museum-header .museum-header__register-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.museum-header {
  /* =====================================================
   GLOBAL THEME TOGGLE
   ===================================================== */
}
.museum-header .museum-header__theme-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.museum-header .museum-header__theme-toggle:hover, .museum-header .museum-header__theme-toggle:focus-visible {
  border-color: #fedd00;
  background: rgba(254, 221, 0, 0.08);
  outline: none;
  transform: rotate(18deg);
}
.museum-header .museum-header__theme-toggle-icon {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.museum-header .museum-header__theme-toggle-icon::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 50%;
  background: currentColor;
}
.museum-header .museum-header__theme-toggle-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.museum-header .museum-header__register-center {
  display: flex;
  align-items: center;
  gap: 12px;
}
.museum-header .museum-header__register-pulse {
  display: block;
  width: 52px;
  height: 18px;
  flex: 0 0 auto;
  overflow: hidden;
}
.museum-header .museum-header__register-pulse svg {
  display: block;
  width: 100%;
  height: 100%;
}
.museum-header {
  /* =====================================================
   LAYER 1 — FADED ECG PATH
   ===================================================== */
}
.museum-header .museum-header__heartbeat-base {
  fill: none;
  stroke: rgba(254, 221, 0, 0.2);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.museum-header {
  /* =====================================================
   LAYER 2 — JS-GENERATED PULSES
   ===================================================== */
}
.museum-header .museum-header__heartbeat-pulse {
  fill: none;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px rgba(254, 221, 0, 0.9)) drop-shadow(0 0 2px rgba(254, 221, 0, 0.4));
}
.museum-header .museum-header__register-right {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
}
.museum-header {
  /* =====================================================
     MAIN HEADER
     ===================================================== */
}
.museum-header .museum-header__main {
  position: relative;
  display: grid;
  grid-template-columns: clamp(205px, 15vw, 270px) minmax(560px, 1fr) clamp(225px, 15vw, 280px);
  height: 170px;
  background: #ffffff;
}
.museum-header {
  /* =====================================================
     PAGE SIGNATURE RAIL
     ===================================================== */
}
.museum-header .museum-header__bottom {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  align-items: center;
  gap: clamp(18px, 2.5vw, 48px);
  width: 100%;
  height: var(--header-signature-height);
  padding: 0 clamp(24px, 3.5vw, 64px);
  overflow: hidden;
  background: var(--signature-bg);
  color: var(--signature-fg);
  border-top: 1px solid var(--signature-border);
  border-bottom: 1px solid var(--signature-border);
}
.museum-header {
  /* =====================================================
     CURRENT PAGE IDENTITY
     ===================================================== */
}
.museum-header .museum-header__signature-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  white-space: nowrap;
}
.museum-header .museum-header__signature-index {
  flex: 0 0 auto;
  color: var(--signature-accent);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.17em;
}
.museum-header .museum-header__signature-section {
  flex: 0 0 auto;
  color: var(--signature-fg);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.museum-header .museum-header__signature-divider {
  flex: 0 0 auto;
  color: var(--signature-soft);
  font-size: 8px;
}
.museum-header .museum-header__signature-page {
  min-width: 0;
  overflow: hidden;
  color: var(--signature-muted);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.museum-header {
  /* =====================================================
     SIGNATURE VISUAL
     ===================================================== */
}
.museum-header .museum-header__signature-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
.museum-header {
  /* =====================================================
     UNIVERSAL PAGE SIGNATURE
     TEXT EMERGES FROM FIXED RIGHT MARK
     ===================================================== */
}
.museum-header .museum-header__signature-writing {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: min(100%, 560px);
  height: 100%;
  padding-right: 14px;
  overflow: hidden;
  color: var(--signature-fg);
  font-family: "Courier Prime", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.museum-header .museum-header__signature-writing span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
  clip-path: inset(0 0 0 100%);
  animation: museum-signature-reveal 7s steps(30, end) infinite;
}
.museum-header .museum-header__signature-writing {
  /*
   * Fixed vertical mark.
   * This stays at the far-right edge while
   * the text appears to emerge from it.
   */
}
.museum-header .museum-header__signature-writing i {
  position: absolute;
  top: 50%;
  right: 0;
  width: 2px;
  height: 14px;
  background: var(--signature-accent);
  transform: translateY(-50%);
  box-shadow: 0 0 4px rgba(254, 221, 0, 0.32), 0 0 10px rgba(254, 221, 0, 0.12);
}
.museum-header {
  /* =====================================================
     LOGO MODULE
     ===================================================== */
}
.museum-header .museum-header__logo {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(23, 23, 23, 0.22);
  background: #ffffff;
  color: #171717;
  text-decoration: none;
  /* subtle internal crosshair */
}
.museum-header .museum-header__logo::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  left: 18px;
  height: 1px;
  background: rgba(23, 23, 23, 0.055);
  pointer-events: none;
}
.museum-header .museum-header__logo::after {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 50%;
  width: 1px;
  background: rgba(23, 23, 23, 0.055);
  pointer-events: none;
}
.museum-header .museum-header__logo:hover .museum-header__logo-video {
  transform: scale(1.045);
}
.museum-header .museum-header__logo:hover .museum-header__logo-corner--br {
  width: 22px;
  height: 22px;
}
.museum-header {
  /* =====================================================
     LOGO VIDEO
     ===================================================== */
}
.museum-header .museum-header__logo-video {
  position: relative;
  z-index: 2;
  display: block;
  width: 108px;
  height: 108px;
  -o-object-fit: contain;
     object-fit: contain;
  background: #ffffff;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.museum-header {
  /* =====================================================
     LOGO CORNERS
     ===================================================== */
}
.museum-header .museum-header__logo-corner {
  position: absolute;
  z-index: 4;
  width: 15px;
  height: 15px;
  pointer-events: none;
  transition: width 200ms ease, height 200ms ease;
}
.museum-header .museum-header__logo-corner--tl {
  top: 12px;
  left: 12px;
  border-top: 1px solid #171717;
  border-left: 1px solid #171717;
}
.museum-header .museum-header__logo-corner--br {
  right: 12px;
  bottom: 12px;
  border-right: 1px solid #fedd00;
  border-bottom: 1px solid #fedd00;
}
.museum-header {
  /* =====================================================
     NAVIGATION
     ===================================================== */
}
.museum-header .header-menu {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-width: 0;
  height: 100%;
  background: #ffffff;
}
.museum-header .header-menu a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 23px clamp(13px, 1.3vw, 24px) 20px;
  overflow: hidden;
  border-right: 1px solid rgba(23, 23, 23, 0.18);
  background: #ffffff;
  color: #171717;
  text-decoration: none;
  transition: background-color 190ms ease, color 190ms ease;
  /* top registration tick */
}
.museum-header .header-menu a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 14px;
  background: #171717;
}
.museum-header .header-menu a {
  /* yellow base */
}
.museum-header .header-menu a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: #fedd00;
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.museum-header .header-menu a strong {
  font-family: "Courier Prime", monospace;
  font-size: clamp(13px, 0.95vw, 16px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.museum-header .header-menu a:hover, .museum-header .header-menu a:focus-visible, .museum-header .header-menu a.active {
  background: #171717;
  color: #ffffff;
}
.museum-header .header-menu a:hover::after, .museum-header .header-menu a:focus-visible::after, .museum-header .header-menu a.active::after {
  transform: translateY(0);
}
.museum-header .header-menu a:hover::before, .museum-header .header-menu a:focus-visible::before, .museum-header .header-menu a.active::before {
  background: #fedd00;
}
.museum-header .header-menu a:hover .header-menu__number, .museum-header .header-menu a:focus-visible .header-menu__number, .museum-header .header-menu a.active .header-menu__number {
  color: #fedd00;
}
.museum-header .header-menu a:hover .header-menu__corner, .museum-header .header-menu a:focus-visible .header-menu__corner, .museum-header .header-menu a.active .header-menu__corner {
  border-color: #fedd00;
  transform: rotate(45deg);
}
.museum-header {
  /* =====================================================
     NAV NUMBERS
     ===================================================== */
}
.museum-header .header-menu__number {
  color: rgba(23, 23, 23, 0.43);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  transition: color 180ms ease;
}
.museum-header {
  /* =====================================================
     NAV CORNER MARK
     ===================================================== */
}
.museum-header .header-menu__corner {
  position: absolute;
  right: 14px;
  bottom: 17px;
  width: 10px;
  height: 10px;
  border-right: 1px solid #171717;
  border-bottom: 1px solid #171717;
  transition: border-color 180ms ease, transform 220ms ease;
}
.museum-header {
  /* =====================================================
     LIVE PANEL
     ===================================================== */
}
.museum-header .museum-header__live {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  padding: 20px clamp(18px, 1.7vw, 29px);
  overflow: hidden;
  background: #171717;
  color: #ffffff;
}
.museum-header .museum-header__live::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: #fedd00;
}
.museum-header .museum-header__live-top {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(236, 236, 236, 0.68);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.museum-header {
  /* =====================================================
     LIVE SIGNAL
     ===================================================== */
}
.museum-header .museum-header__pulse {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  background: #fedd00;
  animation: museum-live-flicker 2.2s ease-in-out infinite;
}
.museum-header .museum-header__pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid #fedd00;
  animation: museum-live-pulse 1.8s ease-out infinite;
}
.museum-header {
  /* =====================================================
     CLOCK
     ===================================================== */
}
.museum-header .museum-header__clock {
  position: relative;
  z-index: 2;
  align-self: center;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(34px, 2.8vw, 50px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.museum-header .museum-header__live-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(236, 236, 236, 0.48);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.museum-header {
  /* =====================================================
     LIVE CORNER
     ===================================================== */
}
.museum-header .museum-header__live-corner {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 15px;
  height: 15px;
  border-top: 1px solid #fedd00;
  border-right: 1px solid #fedd00;
}
.museum-header {
  /* =====================================================
     SCANNER
     ===================================================== */
}
.museum-header .museum-header__scanner {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 5px;
  height: 5px;
  overflow: hidden;
  background: #171717;
}
.museum-header .museum-header__scanner span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  background: #fedd00;
  animation: museum-header-scan 3.6s ease-in-out infinite;
}
.museum-header {
  /* =====================================================
     BURGER
     ===================================================== */
}
.museum-header .header-burger-menu {
  display: none;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
/* =========================================================
   PAGE SIGNATURE ANIMATIONS
   ========================================================= */
@keyframes museum-signature-reveal {
  0%, 10% {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  48%, 76% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  90%, 100% {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
}
@keyframes museum-live-pulse {
  0% {
    opacity: 0.8;
    transform: scale(0.65);
  }
  75%, 100% {
    opacity: 0;
    transform: scale(1.75);
  }
}
@keyframes museum-header-scan {
  0% {
    left: -32%;
  }
  48%, 58% {
    left: 102%;
  }
  100% {
    left: -32%;
  }
}
@keyframes museum-live-flicker {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
    box-shadow: 0 0 4px rgba(254, 221, 0, 0.4), 0 0 10px rgba(254, 221, 0, 0.14);
  }
  20% {
    opacity: 0.76;
    filter: brightness(0.9);
  }
  28% {
    opacity: 1;
    filter: brightness(1.45);
    box-shadow: 0 0 8px rgba(254, 221, 0, 0.9), 0 0 18px rgba(254, 221, 0, 0.5);
  }
  32% {
    opacity: 0.86;
    filter: brightness(1);
  }
  55% {
    opacity: 1;
    filter: brightness(1.6);
    box-shadow: 0 0 10px rgb(254, 221, 0), 0 0 24px rgba(254, 221, 0, 0.58);
  }
  62% {
    opacity: 0.8;
    filter: brightness(0.95);
  }
  72% {
    opacity: 1;
    filter: brightness(1.3);
  }
}
/* =========================================================
   MEDIUM DESKTOP
   ========================================================= */
@media (max-width: 1180px) {
  .museum-header .museum-header__main {
    grid-template-columns: 190px minmax(450px, 1fr) 190px;
    height: 130px;
  }
  .museum-header .museum-header__logo-video {
    width: 94px;
    height: 94px;
  }
  .museum-header .header-menu a {
    padding: 21px 10px 17px;
  }
  .museum-header .header-menu a strong {
    font-size: 11px;
  }
  .museum-header .header-menu__number {
    font-size: 8px;
  }
  .museum-header .museum-header__clock {
    font-size: 34px;
  }
}
/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 900px) {
  .museum-header .museum-header__register-right {
    display: none;
  }
  .museum-header .museum-header__register {
    grid-template-columns: 1fr auto;
  }
  .museum-header .museum-header__main {
    grid-template-columns: 160px minmax(380px, 1fr) 155px;
    height: 120px;
  }
  .museum-header .museum-header__logo-video {
    width: 84px;
    height: 84px;
  }
  .museum-header .header-menu a {
    padding: 18px 8px 16px;
  }
  .museum-header .header-menu a strong {
    font-size: 10px;
  }
  .museum-header .museum-header__live {
    padding: 16px 14px;
  }
  .museum-header .museum-header__clock {
    font-size: 27px;
  }
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 750px) {
  .museum-header {
    --header-signature-height: 30px;
  }
  .museum-header .museum-header__register {
    height: 30px;
    padding: 0 14px;
    font-size: 6px;
  }
  .museum-header .museum-header__bottom {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    padding: 0 12px;
  }
  .museum-header .museum-header__signature-index {
    font-size: 6px;
  }
  .museum-header .museum-header__signature-section {
    font-size: 6px;
  }
  .museum-header .museum-header__signature-divider,
  .museum-header .museum-header__signature-page {
    display: none;
  }
  .museum-header .museum-header__signature-visual {
    justify-content: flex-end;
  }
  .museum-header .museum-header__signature-writing {
    width: 100%;
    padding-right: 10px;
    font-size: 5px;
    letter-spacing: 0.11em;
  }
  .museum-header .museum-header__signature-writing i {
    height: 10px;
  }
  .museum-header .museum-header__register-center span:last-child,
  .museum-header .museum-header__register-center i {
    display: none;
  }
  .museum-header .museum-header__main {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 74px;
    height: 94px;
  }
  .museum-header {
    /* logo */
  }
  .museum-header .museum-header__logo {
    border-right: 1px solid rgba(23, 23, 23, 0.2);
  }
  .museum-header .museum-header__logo::before, .museum-header .museum-header__logo::after {
    display: none;
  }
  .museum-header .museum-header__logo-video {
    width: 72px;
    height: 72px;
  }
  .museum-header .museum-header__logo-corner {
    display: none;
  }
  .museum-header {
    /* hide desktop live panel */
  }
  .museum-header .museum-header__live {
    display: none;
  }
  .museum-header {
    /* burger */
  }
  .museum-header .header-burger-menu {
    position: relative;
    z-index: 1003;
    grid-column: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(23, 23, 23, 0.2);
    background: #ffffff;
    cursor: pointer;
  }
  .museum-header .header-burger-menu span {
    display: block;
    width: 28px;
    height: 2px;
    background: #171717;
    transition: transform 220ms ease, opacity 220ms ease, background-color 220ms ease;
  }
  .museum-header .header-burger-menu[aria-expanded=true] {
    background: #171717;
  }
  .museum-header .header-burger-menu[aria-expanded=true] span {
    background: #fedd00;
  }
  .museum-header .header-burger-menu[aria-expanded=true] span:first-child {
    transform: translateY(7px) rotate(45deg);
  }
  .museum-header .header-burger-menu[aria-expanded=true] span:nth-child(2) {
    opacity: 0;
  }
  .museum-header .header-burger-menu[aria-expanded=true] span:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }
  .museum-header {
    /* mobile menu */
  }
  .museum-header .header-menu {
    position: fixed;
    top: 166px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    display: none;
    grid-template-columns: 1fr;
    height: auto;
    padding: 18px 18px 44px;
    overflow-y: auto;
    background: #171717;
  }
  .museum-header .header-menu.open {
    display: grid;
  }
  .museum-header .header-menu a {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    min-height: clamp(76px, 14vh, 106px);
    padding: 0 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(236, 236, 236, 0.14);
    background: #171717;
    color: #ffffff;
  }
  .museum-header .header-menu a::before {
    display: none;
  }
  .museum-header .header-menu a::after {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 5px;
    height: auto;
    transform: scaleY(0);
    transform-origin: bottom;
  }
  .museum-header .header-menu a:hover::after, .museum-header .header-menu a:focus-visible::after, .museum-header .header-menu a.active::after {
    transform: scaleY(1);
  }
  .museum-header .header-menu a strong {
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(29px, 9vw, 48px);
    font-weight: 400;
    letter-spacing: -0.045em;
  }
  .museum-header .header-menu .header-menu__number {
    color: #fedd00;
    font-size: 8px;
  }
  .museum-header .header-menu .header-menu__corner {
    border-color: rgba(236, 236, 236, 0.28);
  }
}
/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .museum-header .museum-header__pulse::after,
  .museum-header .museum-header__scanner span {
    animation: none;
  }
}
body.menu-open {
  overflow: hidden;
}

/* =========================================================
   LIGHT HEADER THEME

   Usage:
   <div data-header data-header-theme="light"></div>
   ========================================================= */
html[data-theme=light] .museum-header {
  background: #ffffff;
  color: #171717;
  --signature-bg: #ffffff;
  --signature-fg: #171717;
  --signature-muted: rgba(23, 23, 23, 0.5);
  --signature-soft: rgba(23, 23, 23, 0.12);
  --signature-line: rgba(23, 23, 23, 0.24);
  --signature-border: rgba(23, 23, 23, 0.18);
  --signature-accent: #fedd00;
  /* =====================================================
     TOP REGISTER
     ===================================================== */
}
html[data-theme=light] .museum-header .museum-header__register {
  background: #ffffff;
  color: #171717;
  border-bottom: 1px solid rgba(23, 23, 23, 0.2);
}
html[data-theme=light] .museum-header .museum-header__theme-toggle {
  border-color: rgba(23, 23, 23, 0.34);
  color: #171717;
}
html[data-theme=light] .museum-header .museum-header__theme-toggle:hover, html[data-theme=light] .museum-header .museum-header__theme-toggle:focus-visible {
  border-color: #171717;
  background: #fedd00;
}
html[data-theme=light] .museum-header {
  /* slightly stronger resting ECG on white */
}
html[data-theme=light] .museum-header .museum-header__heartbeat-base {
  stroke: rgba(254, 221, 0, 0.5);
}
html[data-theme=light] .museum-header {
  /*
   * JS creates the heartbeat gradient dynamically.
   * On the dark header its final head becomes white.
   * On the light version we make the final head dark
   * so it remains visible against the white rail.
   */
}
html[data-theme=light] .museum-header .museum-header__heartbeat-svg linearGradient stop:nth-last-child(2),
html[data-theme=light] .museum-header .museum-header__heartbeat-svg linearGradient stop:last-child {
  stop-color: #171717;
}
html[data-theme=light] .museum-header {
  /* =====================================================
     MAIN HEADER
     ===================================================== */
}
html[data-theme=light] .museum-header .museum-header__main {
  background: #ffffff;
}
html[data-theme=light] .museum-header {
  /* =====================================================
     LOGO
     ===================================================== */
}
html[data-theme=light] .museum-header .museum-header__logo {
  background: #ffffff;
  color: #171717;
  border-right-color: rgba(23, 23, 23, 0.2);
}
html[data-theme=light] .museum-header .museum-header__logo-video {
  background: #ffffff;
}
html[data-theme=light] .museum-header {
  /* =====================================================
     NAVIGATION
     ===================================================== */
}
html[data-theme=light] .museum-header .header-menu {
  background: #ffffff;
}
html[data-theme=light] .museum-header .header-menu a {
  background: #ffffff;
  color: #171717;
  border-right-color: rgba(23, 23, 23, 0.18);
  /*
   * Dark registration line underneath the
   * yellow hover state.
   */
}
html[data-theme=light] .museum-header .header-menu a::after {
  background: #171717;
}
html[data-theme=light] .museum-header .header-menu a:hover, html[data-theme=light] .museum-header .header-menu a:focus-visible, html[data-theme=light] .museum-header .header-menu a.active {
  background: #fedd00;
  color: #171717;
}
html[data-theme=light] .museum-header .header-menu a:hover::before, html[data-theme=light] .museum-header .header-menu a:focus-visible::before, html[data-theme=light] .museum-header .header-menu a.active::before {
  background: #171717;
}
html[data-theme=light] .museum-header .header-menu a:hover .header-menu__number, html[data-theme=light] .museum-header .header-menu a:focus-visible .header-menu__number, html[data-theme=light] .museum-header .header-menu a.active .header-menu__number {
  color: #171717;
}
html[data-theme=light] .museum-header .header-menu a:hover .header-menu__corner, html[data-theme=light] .museum-header .header-menu a:focus-visible .header-menu__corner, html[data-theme=light] .museum-header .header-menu a.active .header-menu__corner {
  border-color: #171717;
}
html[data-theme=light] .museum-header .header-menu__number {
  color: rgba(23, 23, 23, 0.43);
}
html[data-theme=light] .museum-header .header-menu__corner {
  border-color: #171717;
}
html[data-theme=light] .museum-header {
  /* =====================================================
     LIVE / TBILISI PANEL
     ===================================================== */
}
html[data-theme=light] .museum-header .museum-header__live {
  background: #ffffff;
  color: #171717;
  border-left: 1px solid rgba(23, 23, 23, 0.18);
}
html[data-theme=light] .museum-header {
  /*
   * Keep the signature yellow vertical bar.
   */
}
html[data-theme=light] .museum-header .museum-header__live::before {
  background: #fedd00;
}
html[data-theme=light] .museum-header .museum-header__live-top {
  color: rgba(23, 23, 23, 0.6);
}
html[data-theme=light] .museum-header .museum-header__clock {
  color: #171717;
}
html[data-theme=light] .museum-header .museum-header__live-bottom {
  color: rgba(23, 23, 23, 0.48);
}
html[data-theme=light] .museum-header .museum-header__live-corner {
  border-top-color: #fedd00;
  border-right-color: #fedd00;
}
html[data-theme=light] .museum-header .museum-header__scanner {
  background: #ffffff;
}
html[data-theme=light] .museum-header .museum-header__scanner span {
  background: #fedd00;
}
html[data-theme=light] .museum-header {
  /* =====================================================
     MOBILE BURGER
     ===================================================== */
}
html[data-theme=light] .museum-header .header-burger-menu {
  background: #ffffff;
  border-left-color: rgba(23, 23, 23, 0.2);
}
html[data-theme=light] .museum-header .header-burger-menu span {
  background: #171717;
}
html[data-theme=light] .museum-header .header-burger-menu[aria-expanded=true] {
  background: #fedd00;
}
html[data-theme=light] .museum-header .header-burger-menu[aria-expanded=true] span {
  background: #171717;
}
html[data-theme=light] .museum-header {
  /* =====================================================
     MOBILE MENU
     ===================================================== */
}
html[data-theme=light] .museum-header .header-menu.open {
  background: #ffffff;
}

/* =========================================================
   LIGHT THEME — MOBILE NAVIGATION
   ========================================================= */
@media (max-width: 750px) {
  html[data-theme=light] .museum-header .header-menu {
    background: #ffffff;
  }
  html[data-theme=light] .museum-header .header-menu a {
    background: #ffffff;
    color: #171717;
    border-bottom-color: rgba(23, 23, 23, 0.18);
  }
  html[data-theme=light] .museum-header .header-menu a:hover, html[data-theme=light] .museum-header .header-menu a:focus-visible, html[data-theme=light] .museum-header .header-menu a.active {
    background: #fedd00;
    color: #171717;
  }
  html[data-theme=light] .museum-header .header-menu .header-menu__number {
    color: rgba(23, 23, 23, 0.46);
  }
  html[data-theme=light] .museum-header .header-menu a:hover .header-menu__number,
  html[data-theme=light] .museum-header .header-menu a:focus-visible .header-menu__number,
  html[data-theme=light] .museum-header .header-menu a.active .header-menu__number {
    color: #171717;
  }
  html[data-theme=light] .museum-header .header-menu .header-menu__corner {
    border-color: rgba(23, 23, 23, 0.42);
  }
  html[data-theme=light] .museum-header .header-menu a:hover .header-menu__corner,
  html[data-theme=light] .museum-header .header-menu a:focus-visible .header-menu__corner,
  html[data-theme=light] .museum-header .header-menu a.active .header-menu__corner {
    border-color: #171717;
  }
}
/* =========================================================
   THEME TOGGLE STATE
   ========================================================= */
html[data-theme=light] .museum-header__theme-toggle-icon {
  transform: rotate(0deg);
}

html[data-theme=dark] .museum-header__theme-toggle-icon {
  transform: rotate(180deg);
}

/* =========================================================
   SHARED FOOTER

   DARK = DEFAULT STYLING
   LIGHT = html[data-theme="light"]
   ========================================================= */
.site-footer {
  position: relative;
  z-index: 35;
  width: 100%;
  overflow: hidden;
  background: #171717;
  color: #efefeb;
  font-family: "JetBrains Mono", monospace;
  transition: background-color 300ms ease, color 300ms ease;
  /* =====================================================
     CLOSING RECORD RAIL
     ===================================================== */
}
.site-footer .site-footer__closing-rail {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 42px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: #171717;
  isolation: isolate;
}
.site-footer .site-footer__closing-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.18) 6%, rgba(255, 255, 255, 0.18) 94%, transparent 100%);
  transform: translateY(-50%);
}
.site-footer .site-footer__closing-pulse {
  position: absolute;
  top: 50%;
  width: 24%;
  height: 2px;
  opacity: 0;
  background: linear-gradient(to right, rgba(254, 221, 0, 0) 0%, rgba(254, 221, 0, 0.12) 18%, rgba(254, 221, 0, 0.5) 55%, #fedd00 82%, #ffffff 100%);
  box-shadow: 0 0 8px rgba(254, 221, 0, 0.34), 0 0 18px rgba(254, 221, 0, 0.12);
  z-index: 2;
}
.site-footer .site-footer__closing-pulse--left {
  left: -24%;
  transform: translateY(-50%);
  animation: footer-closing-left 7s ease-in-out infinite;
}
.site-footer .site-footer__closing-pulse--right {
  right: -24%;
  transform: translateY(-50%) scaleX(-1);
  animation: footer-closing-right 7s ease-in-out infinite;
}
.site-footer .site-footer__closing-seal {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: #171717;
  color: rgba(255, 255, 255, 0.62);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-footer .site-footer__closing-seal span {
  display: block;
}
.site-footer .site-footer__closing-seal i {
  display: block;
  width: 5px;
  height: 5px;
  background: #fedd00;
  opacity: 0.35;
  transform: rotate(45deg);
  animation: footer-closing-seal 7s ease-in-out infinite;
}
.site-footer {
  /* =====================================================
     MASTHEAD
     ===================================================== */
}
.site-footer .site-footer__masthead {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(0, 2fr) minmax(180px, 0.7fr);
  align-items: end;
  gap: clamp(24px, 4vw, 72px);
  padding: clamp(42px, 7vh, 76px) clamp(20px, 4vw, 64px) clamp(34px, 5vh, 56px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: border-color 300ms ease;
}
.site-footer {
  /* =====================================================
     MASTHEAD LEFT
     ===================================================== */
}
.site-footer .site-footer__masthead-label {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 300ms ease;
}
.site-footer .site-footer__yellow-mark {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background: #fedd00;
  box-shadow: 0 0 0 rgba(254, 221, 0, 0), 0 0 0 rgba(254, 221, 0, 0);
  animation: footer-square-flicker 2.2s ease-in-out infinite;
}
.site-footer .site-footer__yellow-mark::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid #fedd00;
  animation: footer-signal-pulse 1.8s ease-out infinite;
}
.site-footer {
  /* =====================================================
     MASSIVE NAME
     ===================================================== */
}
.site-footer .site-footer__title {
  display: grid;
  color: #efefeb;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(58px, 8vw, 146px);
  font-weight: 400;
  line-height: 0.72;
  letter-spacing: -0.075em;
  text-transform: uppercase;
  transition: color 300ms ease;
}
.site-footer .site-footer__title span:last-child {
  color: rgba(239, 239, 235, 0.22);
  transition: color 300ms ease;
}
.site-footer {
  /* =====================================================
     EDITION
     ===================================================== */
}
.site-footer .site-footer__edition {
  display: grid;
  justify-items: end;
  gap: 7px;
  padding-bottom: 7px;
  text-align: right;
}
.site-footer .site-footer__edition-years {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fedd00;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(20px, 2.1vw, 34px);
  letter-spacing: -0.045em;
  transition: color 300ms ease;
}
.site-footer .site-footer__edition-label {
  max-width: 480px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 300ms ease;
}
.site-footer {
  /* =====================================================
     FOOTER HEARTBEAT
     ===================================================== */
}
.site-footer .site-footer__heartbeat {
  display: block;
  width: 54px;
  height: 20px;
  flex: 0 0 auto;
  overflow: hidden;
}
.site-footer .site-footer__heartbeat svg {
  display: block;
  width: 100%;
  height: 100%;
}
.site-footer .site-footer__heartbeat-base {
  fill: none;
  stroke: rgba(254, 221, 0, 0.14);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 300ms ease;
}
.site-footer .site-footer__heartbeat-pulse {
  fill: none;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px rgba(254, 221, 0, 0.9)) drop-shadow(0 0 2px rgba(254, 221, 0, 0.4));
}
.site-footer {
  /* =====================================================
     NAVIGATION BODY
     ===================================================== */
}
.site-footer .site-footer__navigation {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 0.9fr) minmax(130px, 0.65fr) minmax(270px, 1.5fr);
  gap: clamp(24px, 4vw, 72px);
  padding: clamp(36px, 5vh, 56px) clamp(20px, 4vw, 64px) clamp(42px, 6vh, 70px);
}
.site-footer {
  /* =====================================================
     COLUMNS
     ===================================================== */
}
.site-footer .site-footer__column > p {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 300ms ease;
}
.site-footer .site-footer__column nav {
  display: grid;
  gap: 0;
}
.site-footer .site-footer__column a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  width: -moz-fit-content;
  width: fit-content;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-family: "Courier Prime", monospace;
  font-size: clamp(12px, 0.8vw, 16px);
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: color 180ms ease, transform 180ms ease;
}
.site-footer .site-footer__column a::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: #fedd00;
  transition: right 200ms ease;
}
.site-footer .site-footer__column a:hover, .site-footer .site-footer__column a:focus-visible {
  color: #ffffff;
  transform: translateX(4px);
}
.site-footer .site-footer__column a:hover::after, .site-footer .site-footer__column a:focus-visible::after {
  right: 0;
}
.site-footer .site-footer__column a span {
  width: 18px;
  color: #fedd00;
  font-family: "JetBrains Mono", monospace;
  font-size: 7px;
  font-weight: 700;
  transition: color 300ms ease;
}
.site-footer {
  /* =====================================================
     FOOTER STATEMENT
     ===================================================== */
}
.site-footer .site-footer__statement {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 190px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #ffffff;
  color: #171717;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.site-footer .site-footer__statement > p {
  max-width: 570px;
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-align: justify;
}
.site-footer .site-footer__statement > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid rgba(23, 23, 23, 0.32);
  color: #171717;
  text-decoration: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color 300ms ease, border-color 300ms ease;
}
.site-footer .site-footer__statement > a span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: #fedd00;
  color: #171717;
  font-size: 16px;
  transition: transform 180ms ease, background-color 300ms ease, color 300ms ease;
}
.site-footer .site-footer__statement > a:hover span, .site-footer .site-footer__statement > a:focus-visible span {
  transform: translate(3px, -3px);
}
.site-footer {
  /* =====================================================
     BOTTOM BAR
     ===================================================== */
}
.site-footer .site-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  min-height: 62px;
  padding: 12px clamp(20px, 4vw, 64px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  background: #111111;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.site-footer .site-footer__bottom span:nth-child(2) {
  text-align: center;
}
.site-footer .site-footer__bottom a {
  justify-self: end;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 180ms ease;
}
.site-footer .site-footer__bottom a:hover, .site-footer .site-footer__bottom a:focus-visible {
  color: #fedd00;
}

/* =========================================================
   GLOBAL LIGHT THEME
   ========================================================= */
html[data-theme=light] .site-footer .site-footer__closing-rail {
  border-top-color: rgba(23, 23, 23, 0.16);
  border-bottom-color: rgba(23, 23, 23, 0.16);
  background: #ffffff;
}
html[data-theme=light] .site-footer .site-footer__closing-line {
  background: linear-gradient(to right, transparent 0%, rgba(23, 23, 23, 0.18) 6%, rgba(23, 23, 23, 0.18) 94%, transparent 100%);
}
html[data-theme=light] .site-footer .site-footer__closing-pulse {
  background: linear-gradient(to right, rgba(254, 221, 0, 0) 0%, rgba(254, 221, 0, 0.12) 18%, rgba(254, 221, 0, 0.5) 55%, #fedd00 82%, #171717 100%);
}
html[data-theme=light] .site-footer .site-footer__closing-seal {
  background: #ffffff;
  color: rgba(23, 23, 23, 0.62);
}
html[data-theme=light] .site-footer {
  background: #ffffff;
  color: #171717;
}
html[data-theme=light] .site-footer .site-footer__masthead {
  border-bottom: 1px solid rgba(23, 23, 23, 0.16);
}
html[data-theme=light] .site-footer .site-footer__masthead-label {
  color: rgba(23, 23, 23, 0.68);
}
html[data-theme=light] .site-footer .site-footer__title {
  color: #171717;
}
html[data-theme=light] .site-footer .site-footer__title span:last-child {
  color: rgba(23, 23, 23, 0.16);
}
html[data-theme=light] .site-footer .site-footer__edition-years {
  color: #171717;
}
html[data-theme=light] .site-footer .site-footer__edition-label {
  color: rgba(23, 23, 23, 0.68);
}
html[data-theme=light] .site-footer .site-footer__heartbeat-base {
  stroke: rgba(23, 23, 23, 0.16);
}
html[data-theme=light] .site-footer .site-footer__heartbeat-pulse {
  filter: drop-shadow(0 0 1px rgba(254, 221, 0, 0.75)) drop-shadow(0 0 2px rgba(23, 23, 23, 0.16));
}
html[data-theme=light] .site-footer .site-footer__column > p {
  color: rgba(23, 23, 23, 0.36);
}
html[data-theme=light] .site-footer .site-footer__column a {
  color: rgba(23, 23, 23, 0.74);
}
html[data-theme=light] .site-footer .site-footer__column a::after {
  background: #fedd00;
}
html[data-theme=light] .site-footer .site-footer__column a:hover, html[data-theme=light] .site-footer .site-footer__column a:focus-visible {
  color: #171717;
}
html[data-theme=light] .site-footer .site-footer__column a span {
  color: rgba(23, 23, 23, 0.48);
}
html[data-theme=light] .site-footer .site-footer__statement {
  border: 1px solid rgba(23, 23, 23, 0.16);
  background: #171717;
  color: #efefeb;
}
html[data-theme=light] .site-footer .site-footer__statement > a {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #efefeb;
}
html[data-theme=light] .site-footer .site-footer__statement > a span {
  background: #fedd00;
  color: #171717;
}
html[data-theme=light] .site-footer .site-footer__bottom {
  border-top: 1px solid rgba(23, 23, 23, 0.16);
  background: #f6f6f2;
  color: rgba(23, 23, 23, 0.72);
}
html[data-theme=light] .site-footer .site-footer__bottom a {
  color: rgba(23, 23, 23, 0.72);
}
html[data-theme=light] .site-footer .site-footer__bottom a:hover, html[data-theme=light] .site-footer .site-footer__bottom a:focus-visible {
  color: #171717;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes footer-closing-left {
  0%, 8% {
    left: -24%;
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  48% {
    left: 50%;
    opacity: 1;
  }
  58% {
    left: 50%;
    opacity: 0;
  }
  100% {
    left: -24%;
    opacity: 0;
  }
}
@keyframes footer-closing-right {
  0%, 8% {
    right: -24%;
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  48% {
    right: 50%;
    opacity: 1;
  }
  58% {
    right: 50%;
    opacity: 0;
  }
  100% {
    right: -24%;
    opacity: 0;
  }
}
@keyframes footer-closing-seal {
  0%, 42% {
    opacity: 0.3;
    box-shadow: none;
  }
  48%, 54% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(254, 221, 0, 0.7), 0 0 18px rgba(254, 221, 0, 0.28);
  }
  62%, 100% {
    opacity: 0.3;
    box-shadow: none;
  }
}
@keyframes footer-signal-pulse {
  0% {
    opacity: 0.85;
    transform: scale(0.65);
  }
  75%, 100% {
    opacity: 0;
    transform: scale(1.8);
  }
}
@keyframes footer-square-flicker {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
    box-shadow: 0 0 4px rgba(254, 221, 0, 0.35), 0 0 10px rgba(254, 221, 0, 0.12);
  }
  20% {
    opacity: 0.78;
    filter: brightness(0.9);
  }
  28% {
    opacity: 1;
    filter: brightness(1.35);
    box-shadow: 0 0 8px rgba(254, 221, 0, 0.8), 0 0 18px rgba(254, 221, 0, 0.45);
  }
  32% {
    opacity: 0.88;
    filter: brightness(1);
  }
  55% {
    opacity: 1;
    filter: brightness(1.5);
    box-shadow: 0 0 10px rgba(254, 221, 0, 0.9), 0 0 24px rgba(254, 221, 0, 0.5);
  }
  62% {
    opacity: 0.82;
    filter: brightness(0.95);
  }
  72% {
    opacity: 1;
    filter: brightness(1.25);
  }
}
/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1000px) {
  .site-footer .site-footer__masthead {
    grid-template-columns: 1fr 2fr;
  }
  .site-footer .site-footer__masthead .site-footer__masthead-label {
    grid-column: 1;
  }
  .site-footer .site-footer__masthead .site-footer__title {
    grid-column: 1/3;
    grid-row: 2;
  }
  .site-footer .site-footer__masthead .site-footer__edition {
    position: absolute;
    top: 48px;
    right: 32px;
  }
  .site-footer .site-footer__navigation {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer .site-footer__navigation .site-footer__statement {
    grid-column: 1/3;
  }
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 650px) {
  .site-footer .site-footer__closing-rail {
    height: 30px;
  }
  .site-footer .site-footer__closing-seal {
    padding: 0 10px;
    font-size: 5px;
    letter-spacing: 0.13em;
  }
  .site-footer .site-footer__closing-seal i {
    width: 4px;
    height: 4px;
  }
  .site-footer .site-footer__closing-pulse {
    width: 30%;
  }
  .site-footer .site-footer__masthead {
    display: block;
    padding: 38px 18px 30px;
  }
  .site-footer .site-footer__masthead-label {
    margin-bottom: 36px;
  }
  .site-footer .site-footer__title {
    font-size: clamp(48px, 16vw, 82px);
    line-height: 0.76;
    overflow-wrap: anywhere;
  }
  .site-footer .site-footer__edition {
    position: static;
    justify-items: start;
    margin-top: 28px;
    text-align: left;
  }
  .site-footer .site-footer__navigation {
    grid-template-columns: 1fr 1fr;
    gap: 38px 24px;
    padding: 34px 18px 44px;
  }
  .site-footer .site-footer__column--social {
    grid-column: 1/3;
  }
  .site-footer .site-footer__statement {
    grid-column: 1/3;
    min-height: 220px;
    padding: 22px;
  }
  .site-footer .site-footer__bottom {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px;
  }
  .site-footer .site-footer__bottom span:nth-child(2) {
    text-align: left;
  }
  .site-footer .site-footer__bottom a {
    justify-self: start;
  }
}
/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .site-footer__yellow-mark,
  .site-footer__yellow-mark::after,
  .site-footer__closing-pulse,
  .site-footer__closing-seal i {
    animation: none !important;
  }
}
.history-article-page {
  min-height: 100vh;
  background: var(--paper);
}

.history-article__status {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: 120px 24px;
  color: var(--muted-ink);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.history-article__status.is-error {
  color: #8a1f11;
}

.history-article__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
  min-height: calc(100vh - var(--header-height));
  border-bottom: 1px solid var(--line);
}

.history-article__hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(92px, 11vw, 180px) clamp(24px, 6vw, 104px) clamp(68px, 8vw, 120px);
  border-right: 1px solid var(--line);
}
.history-article__hero-copy h1 {
  max-width: 980px;
  margin: 26px 0 34px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(50px, 6.7vw, 122px);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.065em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.history-article__breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 34px;
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.history-article__breadcrumbs a {
  text-decoration: none;
}
.history-article__breadcrumbs a:hover, .history-article__breadcrumbs a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-underline-offset: 4px;
}

.history-article__introduction {
  max-width: 760px;
  margin: 0;
  color: rgba(23, 23, 23, 0.72);
  font-size: clamp(13px, 1.2vw, 18px);
  line-height: 1.9;
  text-align: justify;
}

.history-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 38px;
  padding-top: 17px;
  border-top: 1px solid var(--ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.history-article__meta span:last-child {
  color: var(--muted-ink);
}

.history-article__hero-figure {
  position: relative;
  min-height: 620px;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(to right, rgba(23, 23, 23, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.07) 1px, transparent 1px), rgba(23, 23, 23, 0.025);
  background-size: 46px 46px;
}
.history-article__hero-figure img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  filter: grayscale(100%) contrast(1.04);
}
.history-article__hero-figure figcaption {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  padding: 13px 15px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  font-size: 8px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.history-article__body {
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 0.76fr);
  border-bottom: 1px solid var(--line);
}

.history-article__aside {
  align-self: start;
  position: sticky;
  top: var(--header-height);
  padding: clamp(58px, 7vw, 110px) clamp(22px, 4vw, 64px);
  border-right: 1px solid var(--line);
}
.history-article__aside nav {
  display: grid;
  margin-top: 24px;
  border-top: 1px solid var(--ink);
}
.history-article__aside a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.history-article__aside a span {
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 700;
}
.history-article__aside a strong {
  font-family: "Archivo Black", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
}
.history-article__aside a:hover, .history-article__aside a:focus-visible {
  color: #9f8900;
}

.history-article__sections {
  min-width: 0;
}

.history-article__section {
  display: grid;
  grid-template-columns: minmax(230px, 0.38fr) minmax(0, 0.62fr);
  gap: clamp(38px, 7vw, 120px);
  padding: clamp(72px, 9vw, 150px) clamp(24px, 6vw, 104px);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-height) + 24px);
}
.history-article__section:last-child {
  border-bottom: 0;
}

.history-article__section-heading {
  min-width: 0;
}
.history-article__section-heading h2 {
  margin: 22px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(36px, 4.7vw, 78px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.history-article__section-number {
  display: block;
  margin-bottom: 46px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(46px, 6vw, 94px);
  line-height: 0.8;
}

.history-article__section-copy {
  min-width: 0;
  align-self: end;
}
.history-article__section-copy p {
  margin: 0 0 1.45em;
  color: rgba(23, 23, 23, 0.78);
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.95;
  text-align: justify;
}
.history-article__section-copy p:last-child {
  margin-bottom: 0;
}

.history-article__figure {
  grid-column: 1/-1;
  margin: clamp(30px, 5vw, 70px) 0 0;
}
.history-article__figure img {
  display: block;
  width: 100%;
  max-height: 760px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  filter: grayscale(100%);
}
.history-article__figure figcaption {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted-ink);
  font-size: 8px;
  line-height: 1.7;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.history-article__quote {
  grid-column: 1/-1;
  margin: clamp(34px, 5vw, 72px) 0 0;
  padding: clamp(28px, 4vw, 58px);
  border: 1px solid var(--ink);
  border-left: 8px solid var(--yellow);
}
.history-article__quote p {
  max-width: 980px;
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(25px, 3.2vw, 52px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.history-article__quote cite {
  display: block;
  margin-top: 24px;
  color: var(--muted-ink);
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.history-article__related {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(44px, 8vw, 140px);
  padding: clamp(72px, 9vw, 150px) clamp(24px, 6vw, 104px);
}
.history-article__related h2 {
  margin: 22px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(40px, 5vw, 84px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.history-article__related-links {
  display: grid;
  align-content: start;
  border-top: 1px solid var(--ink);
}
.history-article__related-links a {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-decoration: none;
  text-transform: uppercase;
}
.history-article__related-links a:hover, .history-article__related-links a:focus-visible {
  color: #9f8900;
}

.history-article__noscript {
  margin: 0;
  padding: 30px;
  border: 1px solid var(--ink);
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 680ms ease, transform 680ms ease;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 980px) {
  .history-article__hero {
    grid-template-columns: 1fr;
  }
  .history-article__hero-copy {
    min-height: 76vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .history-article__hero-figure {
    min-height: 560px;
  }
  .history-article__body {
    grid-template-columns: 1fr;
  }
  .history-article__aside {
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .history-article__aside nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .history-article__aside a {
    padding-right: 18px;
    border-right: 1px solid var(--line);
  }
  .history-article__aside a:last-child {
    border-right: 0;
  }
}
@media (max-width: 720px) {
  .history-article__hero-copy {
    padding-right: 20px;
    padding-left: 20px;
  }
  .history-article__hero-copy h1 {
    font-size: clamp(44px, 14vw, 76px);
  }
  .history-article__aside nav {
    grid-template-columns: 1fr;
  }
  .history-article__aside a {
    border-right: 0;
  }
  .history-article__section,
  .history-article__related {
    grid-template-columns: 1fr;
    padding-right: 20px;
    padding-left: 20px;
  }
  .history-article__section-copy p,
  .history-article__introduction {
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* =========================================================
   COLLABORATION PANEL

   LIGHT = DEFAULT
   DARK = html[data-theme="dark"]
========================================================= */
.collaboration-panel {
  /* =======================================================
     LIGHT THEME / DEFAULT
  ======================================================= */
  --collab-bg: #ffffff;
  --collab-text: #171717;
  --collab-muted: rgba(23, 23, 23, 0.54);
  --collab-body: rgba(23, 23, 23, 0.68);
  --collab-line: rgba(23, 23, 23, 0.2);
  --collab-submit-text: #171717;
  --collab-submit-hover-bg: #fedd00;
  --collab-submit-hover-text: #171717;
  --collab-contact-text: #171717;
  --collab-contact-arrow: #171717;
  --collab-contact-hover-bg: #fedd00;
  --collab-contact-hover-text: #171717;
  --collab-contact-hover-arrow: #171717;
  display: grid;
  border-bottom: 1px solid var(--collab-line);
  border-top: 1px solid var(--collab-line);
  grid-template-columns: 18% 1fr calc(25% - 1px);
  align-items: stretch;
  min-height: 450px;
  background: var(--collab-bg);
  color: var(--collab-text);
  transition: background-color 300ms ease, color 300ms ease;
  /* =======================================================
     LEFT / SUBMIT MATERIALS
  ======================================================= */
}
.collaboration-panel__submit {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--collab-line);
  color: var(--collab-submit-text);
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 300ms ease;
}
.collaboration-panel__submit:hover, .collaboration-panel__submit:focus-visible {
  background: var(--collab-submit-hover-bg);
  color: var(--collab-submit-hover-text);
  outline: none;
}
.collaboration-panel__mark {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(100px, 14vw, 230px);
  line-height: 1;
  transition: transform 300ms ease;
}
.collaboration-panel__submit:hover .collaboration-panel__mark, .collaboration-panel__submit:focus-visible .collaboration-panel__mark {
  transform: rotate(90deg);
}
.collaboration-panel {
  /* =======================================================
     MIDDLE / COPY
  ======================================================= */
}
.collaboration-panel__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vw, 110px);
  border-right: 1px solid var(--collab-line);
  transition: border-color 300ms ease;
}
.collaboration-panel__copy .section-label {
  color: var(--collab-muted);
  transition: color 300ms ease;
}
.collaboration-panel__copy h2 {
  margin: 22px 0 28px;
  color: var(--collab-text);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(40px, 5vw, 84px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.052em;
  text-transform: uppercase;
  transition: color 300ms ease;
}
.collaboration-panel__copy > p:last-child {
  max-width: 760px;
  margin: 0;
  color: var(--collab-body);
  font-size: 11px;
  line-height: 1.85;
  text-align: justify;
  transition: color 300ms ease;
}
.collaboration-panel {
  /* =======================================================
     RIGHT / CONTACT
  ======================================================= */
}
.collaboration-panel__contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px;
  color: var(--collab-contact-text);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(24px, 3vw, 48px);
  line-height: 0.95;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 200ms ease, color 200ms ease;
}
.collaboration-panel__contact b {
  align-self: flex-end;
  color: var(--collab-contact-arrow);
  font-family: "JetBrains Mono", monospace;
  font-size: 28px;
  transition: color 200ms ease, transform 180ms ease;
}
.collaboration-panel__contact:hover, .collaboration-panel__contact:focus-visible {
  background: var(--collab-contact-hover-bg);
  color: var(--collab-contact-hover-text);
  outline: none;
}
.collaboration-panel__contact:hover b, .collaboration-panel__contact:focus-visible b {
  color: var(--collab-contact-hover-arrow);
  transform: translate(5px, -5px);
}

/* =========================================================
   GLOBAL DARK THEME
========================================================= */
html[data-theme=dark] .collaboration-panel {
  --collab-bg: #171717;
  --collab-text: #ffffff;
  --collab-muted: rgba(255, 255, 255, 0.54);
  --collab-body: rgba(255, 255, 255, 0.67);
  --collab-line: rgba(255, 255, 255, 0.2);
  --collab-submit-text: #fedd00;
  --collab-submit-hover-bg: #fedd00;
  --collab-submit-hover-text: #171717;
  --collab-contact-text: #ffffff;
  --collab-contact-arrow: #fedd00;
  --collab-contact-hover-bg: #fedd00;
  --collab-contact-hover-text: #171717;
  --collab-contact-hover-arrow: #171717;
}

/* =========================================================
   REVEAL
========================================================= */
.collaboration-panel.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1), background-color 300ms ease, color 300ms ease;
}

.collaboration-panel.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1180px) {
  .collaboration-panel {
    grid-template-columns: 120px 1fr;
  }
  .collaboration-panel__copy {
    border-right: 0;
  }
  .collaboration-panel__contact {
    grid-column: 1/-1;
    min-height: 230px;
    border-top: 1px solid var(--collab-line);
  }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 620px) {
  .collaboration-panel {
    grid-template-columns: 1fr;
  }
  .collaboration-panel__submit {
    min-height: 180px;
    border-right: 0;
    border-bottom: 1px solid var(--collab-line);
  }
  .collaboration-panel__copy {
    padding: 44px 24px;
    border-right: 0;
  }
  .collaboration-panel__contact {
    grid-column: auto;
    min-height: 200px;
  }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .collaboration-panel,
  .collaboration-panel * {
    transition-duration: 0.01ms !important;
  }
  .collaboration-panel.reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}
.submission-page {
  background: white;
  color: var(--ink);
}

.submission-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 32%);
  min-height: 72vh;
  border-bottom: 1px solid var(--line);
}
.submission-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(80px, 10vw, 160px) clamp(28px, 7vw, 110px);
}
.submission-hero__copy > p:last-child {
  max-width: 700px;
  margin: 30px 0 0;
  color: var(--muted-ink);
  font-size: 12px;
  line-height: 1.9;
}
.submission-hero__copy h1 {
  max-width: 1050px;
  margin: 20px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(52px, 7vw, 120px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.submission-hero .submission-hero__visual {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: #171717;
}
.submission-hero .submission-monitor {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: clamp(24px, 3vw, 42px);
  border: 0;
  background: #171717;
  color: white;
}
.submission-hero .submission-monitor__header, .submission-hero .submission-monitor__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.submission-hero .submission-monitor__header {
  margin-bottom: 14px;
}
.submission-hero .submission-monitor__footer {
  margin-top: 14px;
}
.submission-hero .submission-monitor__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(23, 23, 23, 0.14);
  background: linear-gradient(to right, transparent calc(50% - 0.5px), rgba(23, 23, 23, 0.06) 50%, transparent calc(50% + 0.5px)), linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(23, 23, 23, 0.06) 50%, transparent calc(50% + 0.5px)), #fafafa;
}
.submission-hero .submission-monitor__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(23, 23, 23, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 23, 23, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.45;
}
.submission-hero .submission-monitor__label {
  color: rgba(255, 255, 255, 0.65);
}
.submission-hero .submission-monitor__count {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 1.2em;
  overflow: hidden;
  font-family: "Archivo Black", sans-serif;
  font-size: 20px;
  line-height: 1.2;
}
.submission-hero .submission-sheet {
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 440px;
  height: 500px;
  border: 1px solid rgba(23, 23, 23, 0.16);
  background: linear-gradient(to bottom, #ffffff, #f4f4f4);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.08);
  opacity: 0;
}
.submission-hero .submission-sheet::before, .submission-hero .submission-sheet::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  height: 1px;
  background: rgba(23, 23, 23, 0.18);
}
.submission-hero .submission-sheet::before {
  top: 48px;
  box-shadow: 0 20px 0 rgba(23, 23, 23, 0.18), 0 40px 0 rgba(23, 23, 23, 0.18), 0 60px 0 rgba(23, 23, 23, 0.18);
}
.submission-hero .submission-sheet::after {
  top: 24px;
  width: 56px;
  right: auto;
  background: #fedd00;
}
.submission-hero .submission-sheet--one {
  animation: submission-sheet-float 6s 0s infinite;
}
.submission-hero .submission-sheet--two {
  animation: submission-sheet-float 6s 2s infinite;
}
.submission-hero .submission-sheet--three {
  animation: submission-sheet-float 6s 4s infinite;
}
.submission-hero .submission-sheet--one {
  margin-left: -128px;
}
.submission-hero .submission-sheet--two {
  margin-left: -120px;
}
.submission-hero .submission-sheet--three {
  margin-left: -112px;
}
.submission-hero .submission-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: -12%;
  height: 16%;
  background: linear-gradient(to bottom, rgba(254, 221, 0, 0), rgba(254, 221, 0, 0.32), rgba(254, 221, 0, 0));
  animation: submission-scan 3s ease-in-out infinite;
}
@keyframes submission-sheet-float {
  0% {
    transform: translateY(80px) rotate(-6deg) scale(0.96);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  35% {
    transform: translateY(8px) rotate(-3deg) scale(1);
    opacity: 1;
  }
  65% {
    transform: translateY(-8px) rotate(-1deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-70px) rotate(0deg) scale(1.02);
    opacity: 0;
  }
}
@keyframes submission-scan {
  0% {
    top: -16%;
  }
  100% {
    top: 100%;
  }
}

.submission-form-section {
  display: grid;
  grid-template-columns: minmax(260px, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(50px, 8vw, 130px);
  padding: clamp(70px, 9vw, 140px) clamp(28px, 7vw, 110px);
}
.submission-form-section__intro h2 {
  max-width: 600px;
  margin: 20px 0 28px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(38px, 3.5vw, 72px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.submission-form-section__intro > p:last-child {
  max-width: 520px;
  margin: 0;
  color: var(--muted-ink);
  font-size: 11px;
  line-height: 1.85;
}

.submission-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-column-gap: 28px;
       column-gap: 28px;
}
.submission-form__field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.submission-form__field--full {
  grid-column: 1/-1;
}
.submission-form__field label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.submission-form__field input,
.submission-form__field textarea {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
}
.submission-form__field input {
  min-height: 48px;
}
.submission-form__field textarea {
  min-height: 220px;
  padding: 14px 0;
  line-height: 1.7;
  resize: vertical;
}
.submission-form__field input:focus,
.submission-form__field textarea:focus {
  box-shadow: inset 0 -2px 0 #fedd00;
}
.submission-form__field small {
  color: var(--muted-ink);
  font-size: 9px;
  line-height: 1.6;
}
.submission-form .submission-upload {
  position: relative;
  display: grid;
  place-items: center;
  gap: 18px;
  min-height: 280px;
  padding: clamp(36px, 5vw, 70px) 30px 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(to right, transparent 49.9%, rgba(23, 23, 23, 0.045) 50%, transparent 50.1%), linear-gradient(to bottom, transparent 49.9%, rgba(23, 23, 23, 0.045) 50%, transparent 50.1%), #fafafa;
  cursor: pointer;
  text-align: center;
  transition: border-color 220ms ease, background 220ms ease;
}
.submission-form .submission-upload input[type=file] {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.submission-form .submission-upload::before, .submission-form .submission-upload::after {
  content: "";
  position: absolute;
  z-index: 1;
  background: #fedd00;
  transition: transform 260ms ease;
}
.submission-form .submission-upload::before {
  top: 20px;
  left: 20px;
  width: 48px;
  height: 2px;
  transform-origin: left;
}
.submission-form .submission-upload::after {
  top: 20px;
  left: 20px;
  width: 2px;
  height: 48px;
  transform-origin: top;
}
.submission-form .submission-upload:hover, .submission-form .submission-upload:focus-within {
  border-color: #171717;
  background: linear-gradient(to right, transparent 49.9%, rgba(23, 23, 23, 0.055) 50%, transparent 50.1%), linear-gradient(to bottom, transparent 49.9%, rgba(23, 23, 23, 0.055) 50%, transparent 50.1%), #fff;
}
.submission-form .submission-upload:hover::before {
  transform: scaleX(1.5);
}
.submission-form .submission-upload:hover::after {
  transform: scaleY(1.5);
}
.submission-form .submission-upload:hover .submission-upload__plus {
  transform: rotate(90deg);
  color: #fedd00;
}
.submission-form .submission-upload__plus {
  position: relative;
  z-index: 2;
  color: #171717;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(72px, 8vw, 120px);
  font-weight: 400;
  line-height: 0.7;
  transition: transform 300ms ease, color 220ms ease;
}
.submission-form .submission-upload__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
}
.submission-form .submission-upload__copy strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 400;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.submission-form .submission-upload__copy span {
  color: var(--muted-ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.submission-form .submission-upload__types {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  color: var(--muted-ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.submission-form .submission-upload__status {
  display: block;
  margin-top: 2px;
}
.submission-form__consent {
  grid-column: 1/-1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.submission-form__consent input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  border: 1px solid #171717;
  border-radius: 5px;
  background: white;
  cursor: pointer;
}
.submission-form__consent input:checked {
  background: #fedd00;
}
.submission-form__consent input:checked::before {
  content: "✓";
  display: grid;
  place-items: center;
  color: #171717;
  font-size: 13px;
  font-weight: 700;
  line-height: 15px;
}
.submission-form__consent span {
  max-width: 620px;
  color: var(--muted-ink);
  font-size: 10px;
  line-height: 1.7;
}
.submission-form__actions {
  grid-column: 1/-1;
  padding-top: 22px;
}
.submission-form__submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 70px;
  width: 100%;
  padding: 26px 30px;
  border: 0;
  background: #171717;
  color: white;
  cursor: pointer;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(20px, 2vw, 32px);
  text-transform: uppercase;
  transition: background 200ms ease, color 200ms ease;
}
.submission-form__submit::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(23, 23, 23, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.submission-form__submit:hover, .submission-form__submit:focus-visible {
  background: #fedd00;
  color: #171717;
}
.submission-form__submit:hover::after, .submission-form__submit:focus-visible::after {
  border-color: rgba(23, 23, 23, 0.45);
  opacity: 1;
}
.submission-form__status {
  grid-column: 1/-1;
  min-height: 22px;
  margin: 18px 0 0;
  font-size: 10px;
}

@media (max-width: 900px) {
  .submission-hero {
    grid-template-columns: 1fr;
  }
  .submission-hero__visual {
    min-height: 260px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .submission-form-section {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .submission-hero__copy {
    padding: 90px 22px 60px;
  }
  .submission-hero__copy h1 {
    font-size: clamp(46px, 14vw, 72px);
  }
  .submission-hero__visual {
    min-height: 200px;
  }
  .submission-form-section {
    padding: 60px 22px;
  }
  .submission-form {
    grid-template-columns: 1fr;
  }
  .submission-form__field, .submission-form__field--full, .submission-form__consent, .submission-form__actions, .submission-form__status {
    grid-column: 1;
  }
}
/* =========================================================
   EDITORIAL POLICY NOTICE

   LIGHT = DEFAULT
   DARK = html[data-theme="dark"]
========================================================= */
.editorial-policy-notice {
  /* =======================================================
     LIGHT THEME / DEFAULT
  ======================================================= */
  --editorial-bg: #ffffff;
  --editorial-text: #171717;
  --editorial-copy: rgba(23, 23, 23, 0.68);
  --editorial-line: rgba(23, 23, 23, 0.2);
  --editorial-link-text: #171717;
  --editorial-link-arrow: #171717;
  --editorial-focus: #171717;
  --editorial-yellow: #fedd00;
  position: relative;
  display: grid;
  border-bottom: 1px solid var(--editorial-line);
  border-top: 1px solid var(--editorial-line);
  grid-template-columns: 75% 25%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--editorial-bg);
  color: var(--editorial-text);
  box-shadow: none;
  isolation: isolate;
  transition: background-color 300ms ease, color 300ms ease;
}
.editorial-policy-notice::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 10;
  width: 7px;
  background: var(--editorial-yellow);
  pointer-events: none;
}

/* =========================================================
   GLOBAL DARK THEME
========================================================= */
html[data-theme=dark] .editorial-policy-notice {
  --editorial-bg: #171717;
  --editorial-text: #ffffff;
  --editorial-copy: rgba(255, 255, 255, 0.73);
  --editorial-line: rgba(255, 255, 255, 0.18);
  --editorial-link-text: #ffffff;
  --editorial-link-arrow: #fedd00;
  --editorial-focus: #ffffff;
}

/* =========================================================
   CONTENT
========================================================= */
.editorial-policy-notice__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 190px;
  padding: clamp(30px, 4vw, 52px) clamp(28px, 5vw, 72px) clamp(30px, 4vw, 52px) clamp(130px, 12vw, 190px);
}
.editorial-policy-notice__content::before {
  content: "!";
  position: absolute;
  top: 50%;
  left: clamp(28px, 4vw, 60px);
  display: grid;
  place-items: center;
  width: clamp(48px, 5.5vw, 76px);
  aspect-ratio: 1;
  border: 1px solid var(--editorial-yellow);
  border-radius: 50%;
  color: var(--editorial-yellow);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(30px, 3.5vw, 52px);
  line-height: 1;
  transform: translateY(-50%);
  transition: border-color 300ms ease, color 300ms ease;
}

/* =========================================================
   LABEL
========================================================= */
.editorial-policy-notice__label span {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--editorial-yellow);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.editorial-policy-notice__label span::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--editorial-yellow);
  box-shadow: 0 0 13px rgba(254, 221, 0, 0.85);
  animation: editorial-status-pulse 1.8s ease-in-out infinite;
}

/* =========================================================
   COPY
========================================================= */
.editorial-policy-notice__copy p {
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--editorial-copy);
  font-size: clamp(11px, 1vw, 13px);
  line-height: 1.9;
  text-align: justify;
  transition: color 300ms ease;
}

/* =========================================================
   READ POLICY
========================================================= */
.editorial-policy-notice__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  min-width: 0;
  min-height: 190px;
  padding: 34px;
  border-left: 1px solid var(--editorial-line);
  color: var(--editorial-link-text);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(24px, 3vw, 48px);
  line-height: 0.95;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 200ms ease, color 200ms ease, border-color 300ms ease;
}
.editorial-policy-notice__link b {
  position: absolute;
  right: 34px;
  bottom: 34px;
  color: var(--editorial-link-arrow);
  font-family: "JetBrains Mono", monospace;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  transition: color 200ms ease, transform 180ms ease;
}
.editorial-policy-notice__link:hover, .editorial-policy-notice__link:focus-visible {
  background: var(--editorial-yellow);
  color: #171717;
}
.editorial-policy-notice__link:hover b, .editorial-policy-notice__link:focus-visible b {
  color: #171717;
  transform: translate(5px, -5px);
}
.editorial-policy-notice__link:focus-visible {
  outline: 2px solid var(--editorial-focus);
  outline-offset: -4px;
}

/* =========================================================
   STATUS ANIMATION
========================================================= */
@keyframes editorial-status-pulse {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 860px) {
  .editorial-policy-notice {
    grid-template-columns: 1fr;
  }
  .editorial-policy-notice__content {
    min-height: 230px;
    padding: 96px 24px 30px;
  }
  .editorial-policy-notice__content::before {
    top: 26px;
    left: 24px;
    width: 48px;
    transform: none;
  }
  .editorial-policy-notice__link {
    min-height: 150px;
    border-top: 1px solid var(--editorial-line);
    border-left: 0;
  }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .editorial-policy-notice__label span::before {
    animation: none;
  }
  .editorial-policy-notice__link,
  .editorial-policy-notice__link b {
    transition: none;
  }
}
.editorial-policy-page {
  background: white;
  color: var(--ink);
}

.editorial-policy-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(460px, 0.65fr);
  min-height: 78vh;
  border-bottom: 1px solid var(--line);
}
.editorial-policy-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(90px, 10vw, 160px) clamp(28px, 7vw, 110px);
}
.editorial-policy-hero__copy h1 {
  max-width: 1100px;
  margin: 18px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(46px, 6vw, 100px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.editorial-policy-hero__copy > p:last-child {
  max-width: 760px;
  margin: 32px 0 0;
  color: var(--muted-ink);
  font-size: 12px;
  line-height: 1.9;
}
.editorial-policy-hero__investigation {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: var(--ink);
}

.evidence-board {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 720px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 46%, rgba(254, 221, 0, 0.09), transparent 28%), linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px), var(--ink);
  background-size: auto, 42px 42px, 42px 42px, auto;
  color: white;
}
.evidence-board::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 1px;
  height: 76%;
  background: rgba(254, 221, 0, 0.18);
  transform: translate(-50%, -50%);
}
.evidence-board::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 76%;
  height: 1px;
  background: rgba(254, 221, 0, 0.12);
  transform: translate(-50%, -50%);
}

.evidence-board__header {
  position: absolute;
  top: 24px;
  right: 28px;
  left: 28px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.evidence-board__header > span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.evidence-board__header div {
  display: flex;
  align-items: center;
  gap: 9px;
}
.evidence-board__header div i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 13px rgba(254, 221, 0, 0.9);
  animation: evidence-live-pulse 1.6s ease-in-out infinite;
}
.evidence-board__header div b {
  color: var(--yellow);
  font-size: 7px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.evidence-board__connections {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.evidence-link {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.74;
}

.evidence-link--uncertain {
  stroke: rgba(255, 255, 255, 0.36);
  stroke-width: 1;
  stroke-dasharray: 8 8;
  stroke-dashoffset: 0;
  opacity: 0;
}

.evidence-node {
  fill: var(--ink);
  stroke: var(--yellow);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}

.evidence-node--uncertain {
  stroke: rgba(255, 255, 255, 0.55);
}

.evidence-card {
  position: absolute;
  z-index: 6;
  opacity: 0;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(23, 23, 23, 0.94);
  box-shadow: 8px 8px 0 rgba(254, 221, 0, 0.12);
  backdrop-filter: blur(7px);
  transform: translateY(12px);
}
.evidence-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.evidence-card__meta span,
.evidence-card__meta b {
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.evidence-card__meta span {
  color: var(--yellow);
}
.evidence-card__meta b {
  color: rgba(255, 255, 255, 0.46);
}

.evidence-card--photo {
  top: 14%;
  left: 7%;
  width: 27%;
  padding: 12px;
  transform: rotate(-2deg) translateY(12px);
}

.evidence-photo {
  position: relative;
  min-height: 120px;
  overflow: hidden;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px), #343434;
  background-size: 19px 19px;
}
.evidence-photo > span:first-child {
  position: absolute;
  top: 14%;
  left: 12%;
  width: 45%;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}
.evidence-photo > span:nth-child(2) {
  position: absolute;
  right: 12%;
  bottom: 18%;
  width: 30%;
  height: 1px;
  background: var(--yellow);
}
.evidence-photo small {
  position: absolute;
  right: 7px;
  bottom: 6px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 6px;
  letter-spacing: 0.12em;
}

.evidence-photo__subject {
  position: absolute;
  top: 22%;
  left: 50%;
  width: 36%;
  height: 55%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50% 50% 20% 20%;
  transform: translateX(-50%);
}
.evidence-photo__subject::before {
  content: "";
  position: absolute;
  top: -19%;
  left: 50%;
  width: 44%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: #343434;
  transform: translateX(-50%);
}

.evidence-card--date {
  top: 15%;
  right: 7%;
  display: grid;
  width: 25%;
  padding: 14px;
}
.evidence-card--date small {
  color: rgba(255, 255, 255, 0.46);
  font-size: 6px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.evidence-card--date > strong {
  margin: 7px 0 0;
  color: var(--yellow);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 400;
  line-height: 0.8;
}
.evidence-card--date > span {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.evidence-card--date > b {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.5);
  font-size: 6px;
  letter-spacing: 0.13em;
}

.evidence-card--center {
  top: 39%;
  left: 50%;
  width: 25%;
  padding: 14px;
  transform: translate(-50%, 12px);
}
.evidence-card--center small {
  color: rgba(255, 255, 255, 0.44);
  font-size: 6px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.evidence-card--center > strong {
  display: block;
  margin: 8px 0;
  color: white;
  font-family: "Archivo Black", sans-serif;
  font-size: 42px;
  font-weight: 400;
}

.evidence-card__status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.evidence-card__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
}
.evidence-card__status span {
  color: var(--yellow);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.evidence-card--uncertain {
  top: 34%;
  right: 5%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px;
  border-style: dashed;
  background: rgba(23, 23, 23, 0.78);
}
.evidence-card--uncertain > span {
  color: rgba(255, 255, 255, 0.43);
  font-family: "Archivo Black", sans-serif;
  font-size: 28px;
}
.evidence-card--uncertain div {
  display: grid;
  gap: 4px;
}
.evidence-card--uncertain div small,
.evidence-card--uncertain div strong {
  font-size: 6px;
  letter-spacing: 0.12em;
}
.evidence-card--uncertain div small {
  color: rgba(255, 255, 255, 0.37);
}
.evidence-card--uncertain div strong {
  color: rgba(255, 255, 255, 0.68);
}

.evidence-card--testimony {
  top: 52%;
  left: 6%;
  width: 28%;
  padding: 13px;
}
.evidence-card--testimony blockquote {
  margin: 10px 0;
  color: var(--yellow);
  font-family: "Archivo Black", sans-serif;
  font-size: 22px;
}

.evidence-text-lines {
  display: grid;
  gap: 6px;
}
.evidence-text-lines span {
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}
.evidence-text-lines span:nth-child(2) {
  width: 78%;
}
.evidence-text-lines span:nth-child(3) {
  width: 55%;
}

.evidence-card--document {
  top: 50%;
  right: 5%;
  width: 29%;
  padding: 13px;
}

.evidence-document {
  position: relative;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.17);
}
.evidence-document strong {
  display: block;
  margin-bottom: 12px;
  font-size: 7px;
  letter-spacing: 0.13em;
}
.evidence-document > span {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.23);
}
.evidence-document > span:nth-of-type(2) {
  width: 77%;
}
.evidence-document > span:nth-of-type(3) {
  width: 89%;
}
.evidence-document > span:nth-of-type(4) {
  width: 48%;
}
.evidence-document i {
  display: inline-block;
  margin-top: 16px;
  padding: 5px 7px;
  border: 1px solid var(--yellow);
  color: var(--yellow);
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.13em;
  transform: rotate(-4deg);
}

.evidence-timeline {
  position: absolute;
  right: 10%;
  bottom: 14%;
  left: 10%;
  z-index: 5;
  opacity: 0;
}
.evidence-timeline small {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.43);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.evidence-timeline__line {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  transform: scaleX(0);
  transform-origin: left;
}
.evidence-timeline__line span {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border: 1px solid var(--yellow);
  border-radius: 50%;
  background: var(--ink);
}

.evidence-timeline__dates {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
}
.evidence-timeline__dates b {
  color: rgba(255, 255, 255, 0.4);
  font-size: 6px;
  letter-spacing: 0.1em;
}

.evidence-verdict {
  position: absolute;
  bottom: 4%;
  left: 50%;
  z-index: 10;
  display: grid;
  gap: 4px;
  width: 58%;
  padding: 12px 16px;
  opacity: 0;
  border: 1px solid var(--yellow);
  background: var(--yellow);
  color: var(--ink);
  transform: translate(-50%, 8px);
}
.evidence-verdict small {
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.evidence-verdict strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(18px, 2.3vw, 32px);
  font-weight: 400;
  line-height: 1;
}
.evidence-verdict > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.11em;
}
.evidence-verdict > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

.evidence-board__coordinate {
  position: absolute;
  z-index: 3;
  color: rgba(255, 255, 255, 0.2);
  font-size: 6px;
  letter-spacing: 0.16em;
}
.evidence-board__coordinate--one {
  right: 25px;
  bottom: 27%;
}
.evidence-board__coordinate--two {
  bottom: 26%;
  left: 25px;
  writing-mode: vertical-rl;
}

/* -----------------------------
   Animation sequence
----------------------------- */
[data-evidence-board].is-running .evidence-card--photo {
  animation: evidence-photo-enter 600ms 200ms ease forwards;
}
[data-evidence-board].is-running .evidence-card--date {
  animation: evidence-card-enter 600ms 700ms ease forwards;
}
[data-evidence-board].is-running .evidence-link--one {
  animation: evidence-line-draw 700ms 1.25s ease forwards;
}
[data-evidence-board].is-running .evidence-link--two {
  animation: evidence-line-draw 700ms 1.55s ease forwards;
}
[data-evidence-board].is-running .evidence-card--center {
  animation: evidence-center-enter 500ms 2s ease forwards;
}
[data-evidence-board].is-running .evidence-node--one,
[data-evidence-board].is-running .evidence-node--two,
[data-evidence-board].is-running .evidence-node--three {
  animation: evidence-node-enter 350ms 1.8s ease forwards;
}
[data-evidence-board].is-running .evidence-card--uncertain {
  animation: evidence-card-enter 500ms 2.5s ease forwards;
}
[data-evidence-board].is-running .evidence-link--uncertain,
[data-evidence-board].is-running .evidence-node--uncertain {
  animation: evidence-uncertain-enter 500ms 2.8s ease forwards;
}
[data-evidence-board].is-running .evidence-card--testimony {
  animation: evidence-card-enter 600ms 3.25s ease forwards;
}
[data-evidence-board].is-running .evidence-card--document {
  animation: evidence-card-enter 600ms 3.7s ease forwards;
}
[data-evidence-board].is-running .evidence-link--three {
  animation: evidence-line-draw 650ms 4.2s ease forwards;
}
[data-evidence-board].is-running .evidence-link--four {
  animation: evidence-line-draw 650ms 4.55s ease forwards;
}
[data-evidence-board].is-running .evidence-link--five {
  animation: evidence-line-draw 650ms 4.9s ease forwards;
}
[data-evidence-board].is-running .evidence-node--four,
[data-evidence-board].is-running .evidence-node--five,
[data-evidence-board].is-running .evidence-node--six {
  animation: evidence-node-enter 350ms 4.7s ease forwards;
}
[data-evidence-board].is-running .evidence-timeline {
  animation: evidence-fade-up 500ms 5.35s ease forwards;
}
[data-evidence-board].is-running .evidence-timeline__line {
  animation: evidence-timeline-draw 900ms 5.55s ease forwards;
}
[data-evidence-board].is-running .evidence-verdict {
  animation: evidence-verdict-enter 650ms 6.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes evidence-card-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes evidence-photo-enter {
  to {
    opacity: 1;
    transform: rotate(-2deg) translateY(0);
  }
}
@keyframes evidence-center-enter {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes evidence-line-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes evidence-node-enter {
  from {
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
  }
  to {
    opacity: 1;
    transform: scale(1);
    transform-origin: center;
  }
}
@keyframes evidence-uncertain-enter {
  to {
    opacity: 0.72;
  }
}
@keyframes evidence-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes evidence-timeline-draw {
  to {
    transform: scaleX(1);
  }
}
@keyframes evidence-verdict-enter {
  from {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}
@keyframes evidence-live-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.75);
  }
  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}
.editorial-policy-introduction {
  display: grid;
  grid-template-columns: minmax(180px, 0.22fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}
.editorial-policy-introduction__label {
  padding: clamp(40px, 5vw, 70px);
  border-right: 1px solid var(--line);
}
.editorial-policy-introduction__copy {
  padding: clamp(55px, 7vw, 100px);
}
.editorial-policy-introduction__copy h2 {
  max-width: 1000px;
  margin: 0 0 30px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(42px, 5.5vw, 84px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.editorial-policy-introduction__copy p {
  max-width: 850px;
  margin: 0;
  color: var(--muted-ink);
  font-size: 11px;
  line-height: 1.9;
}

.editorial-policy-rules {
  display: grid;
}

.editorial-policy-rule {
  display: grid;
  grid-template-columns: minmax(180px, 0.22fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}
.editorial-policy-rule__number {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(38px, 5vw, 70px);
  border-right: 1px solid var(--line);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  color: rgba(23, 23, 23, 0.22);
}
.editorial-policy-rule__copy {
  padding: clamp(45px, 6vw, 90px);
}
.editorial-policy-rule__copy h2 {
  max-width: 900px;
  margin: 14px 0 24px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(34px, 4vw, 64px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.editorial-policy-rule__copy > p:last-child {
  max-width: 820px;
  margin: 0;
  color: var(--muted-ink);
  font-size: 11px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .editorial-policy-hero {
    grid-template-columns: 1fr;
  }
  .editorial-policy-hero__investigation {
    min-height: 720px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .editorial-policy-introduction,
  .editorial-policy-rule {
    grid-template-columns: 1fr;
  }
  .editorial-policy-introduction__label, .editorial-policy-introduction__number,
  .editorial-policy-rule__label,
  .editorial-policy-rule__number {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .editorial-policy-introduction,
  .editorial-policy-rule {
    grid-template-columns: 1fr;
  }
  .editorial-policy-introduction__label, .editorial-policy-introduction__number,
  .editorial-policy-rule__label,
  .editorial-policy-rule__number {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 620px) {
  .editorial-policy-hero__copy {
    padding: 100px 22px 60px;
  }
  .editorial-policy-hero__copy h1 {
    font-size: clamp(46px, 14vw, 76px);
  }
  .editorial-policy-hero__investigation {
    min-height: 650px;
  }
  .editorial-policy-introduction__label, .editorial-policy-introduction__copy {
    padding: 40px 22px;
  }
  .editorial-policy-rule__number, .editorial-policy-rule__copy {
    padding: 38px 22px;
  }
}
/* =========================================================
   HOME — STANDALONE COVER
   ========================================================= */
.home-page {
  margin: 0;
  overflow-x: hidden;
  background: #ffffff;
  color: var(--ink);
}
.home-page .home-cover {
  /*
    Updated dynamically by JavaScript.

    These represent the active coordinate focus:
    the map at rest, or the region currently being dragged.
  */
  --home-side: clamp(24px, 5vw, 90px);
  --coordinate-x: 50%;
  --coordinate-y: 50%;
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: #ffffff;
  isolation: isolate;
}
.home-page {
  /* =======================================================
     GRID CANVAS
     ======================================================= */
}
.home-page .home-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(23, 23, 23, 0.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 84%);
  mask-image: radial-gradient(circle at center, black, transparent 84%);
}
.home-page {
  /* =======================================================
     TOP
     ======================================================= */
}
.home-page .home-cover__top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100px;
  padding: 0 clamp(22px, 3.4vw, 58px);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 0;
}
.home-page .home-cover__top::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(to right, var(--ink) 0%, var(--ink) 18%, var(--yellow) 18%, var(--yellow) 22%, rgba(23, 23, 23, 0.16) 22%, rgba(23, 23, 23, 0.16) 100%);
  pointer-events: none;
}
.home-page .home-cover__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.home-page .home-cover__brand small {
  display: block;
  margin-top: 2px;
  color: rgba(23, 23, 23, 0.45);
  font: inherit;
}
.home-page {
  /* =======================================================
     GLOWING YELLOW MARK
     ======================================================= */
}
.home-page .home-cover__brand-mark {
  position: relative;
  display: block;
  width: 9px;
  height: 9px;
  background: var(--yellow);
}
.home-page .home-cover__brand-mark::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--yellow);
  animation: home-brand-pulse 1.8s ease-out infinite;
}
@keyframes home-brand-pulse {
  0% {
    opacity: 0.8;
    transform: scale(0.65);
  }
  75%, 100% {
    opacity: 0;
    transform: scale(1.75);
  }
}
.home-page {
  /* =======================================================
     MENU BUTTON
     ======================================================= */
}
.home-page .home-cover__menu-button,
.home-page .home-menu__close {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 12px 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-page .home-cover__menu-button i,
.home-page .home-menu__close i {
  position: relative;
  display: block;
  width: 27px;
  height: 10px;
}
.home-page .home-cover__menu-button i::before, .home-page .home-cover__menu-button i::after,
.home-page .home-menu__close i::before,
.home-page .home-menu__close i::after {
  content: "";
  position: absolute;
  right: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: width 220ms ease, transform 220ms ease;
}
.home-page .home-cover__menu-button i::before,
.home-page .home-menu__close i::before {
  top: 2px;
}
.home-page .home-cover__menu-button i::after,
.home-page .home-menu__close i::after {
  bottom: 2px;
  width: 65%;
}
.home-page .home-cover__menu-button:hover i::after, .home-page .home-cover__menu-button:focus-visible i::after,
.home-page .home-menu__close:hover i::after,
.home-page .home-menu__close:focus-visible i::after {
  width: 100%;
}
.home-page {
  /* =======================================================
     MOVING COORDINATE SYSTEM
     ======================================================= */
}
.home-page .home-cover__coordinates {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.home-page .home-cover__coordinate-line {
  position: absolute;
  display: block;
  pointer-events: none;
}
.home-page {
  /*
    Horizontal dotted coordinate line.

    Its Y position is controlled by JavaScript.
  */
}
.home-page .home-cover__coordinate-line--horizontal {
  top: var(--coordinate-y);
  right: 0;
  left: 0;
  height: 1px;
  transform: translateY(-50%);
  transition: top 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: top;
  background: repeating-linear-gradient(to right, rgba(23, 23, 23, 0.65) 0, rgba(23, 23, 23, 0.65) 2px, transparent 2px, transparent 5px);
}
.home-page {
  /*
    Vertical dotted coordinate line.

    Its X position is controlled by JavaScript.
  */
}
.home-page .home-cover__coordinate-line--vertical {
  top: 0;
  bottom: 0;
  left: var(--coordinate-x);
  width: 1px;
  transform: translateX(-50%);
  transition: left 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: left;
  background: repeating-linear-gradient(to bottom, rgba(23, 23, 23, 0.65) 0, rgba(23, 23, 23, 0.65) 2px, transparent 2px, transparent 5px);
}
.home-page {
  /* While a region is actively moving, the crosshair must track it
     without lag.  The smooth transition is restored on release so the
     lines glide back to the assembled country. */
}
.home-page .home-cover.is-region-dragging .home-cover__coordinate-line--horizontal,
.home-page .home-cover.is-region-dragging .home-cover__coordinate-line--vertical {
  transition: none;
}
.home-page {
  /* =======================================================
     CENTRAL EDITORIAL FEATURE
     ======================================================= */
}
.home-page .home-cover__feature {
  position: absolute;
  top: 47%;
  left: var(--home-side);
  right: var(--home-side);
  z-index: 5;
  width: auto;
  transform: translateY(-50%);
}
.home-page .home-cover__eyebrow {
  position: relative;
  z-index: 30;
  margin: 0 0 clamp(24px, 3vh, 38px);
  color: rgba(23, 23, 23, 0.52);
  font-size: clamp(12px, 0.62vw, 16px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-page .home-cover__composition {
  position: relative;
  min-height: clamp(360px, 48vh, 530px);
  isolation: isolate;
}
.home-page {
  /* =======================================================
     LARGE EDITORIAL TITLE
     ======================================================= */
}
.home-page .home-cover__title {
  position: absolute;
  top: 52%;
  left: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  line-height: 0.78;
  text-transform: uppercase;
  pointer-events: none;
  transform: translateY(-50%);
}
.home-page .home-cover__title-first {
  display: block;
  color: var(--ink);
  font-size: clamp(88px, 10vw, 190px);
  letter-spacing: -0.07em;
}
.home-page .home-cover__title-last {
  display: block;
  margin-left: clamp(45px, 5vw, 100px);
  color: transparent;
  font-size: clamp(68px, 7.8vw, 150px);
  letter-spacing: -0.065em;
  -webkit-text-stroke: 1.5px var(--ink);
}
.home-page {
  /* =======================================================
   INTERACTIVE HISTORICAL GEORGIA MAP
   ======================================================= */
}
.home-page .home-cover__georgia-map {
  --map-align-x: 0px;
  position: absolute;
  top: -10%;
  left: 63%;
  z-index: 15;
  width: clamp(390px, 36vw, 640px);
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transform: translateX(var(--map-align-x));
  will-change: transform;
}
.home-page .home-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.home-page .home-map__portrait {
  pointer-events: none;
}
.home-page .home-map__portrait-image,
.home-page .home-map__portrait-video-wrap,
.home-page .home-map__portrait-youtube-wrap {
  display: none;
}
.home-page .home-map__portrait-image.is-active,
.home-page .home-map__portrait-video-wrap.is-active,
.home-page .home-map__portrait-youtube-wrap.is-active {
  display: block;
}
.home-page .home-map__portrait-video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}
.home-page .home-map__portrait-youtube-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.home-page .home-map__portrait-youtube {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 112%;
  height: 112%;
  border: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.home-page {
  /* =======================================================
   UNDERLYING MEMORY / SEAM LAYER

   The thicker black stroke sits behind the active pieces.
   This prevents tiny anti-aliasing cracks from appearing
   between regions while the country is assembled.
   ======================================================= */
}
.home-page .home-map__base {
  pointer-events: none;
}
.home-page .home-map__base-region {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 1;
}
.home-page {
  /* =======================================================
   INTERACTIVE LAYER
   ======================================================= */
}
.home-page .home-map__interactive {
  pointer-events: auto;
}
.home-page .home-map__region {
  --region-x: 0px;
  --region-y: 0px;
  fill: url(#home-georgia-flag);
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transform: translate(var(--region-x), var(--region-y));
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
  transition: fill 260ms ease, stroke-width 160ms ease, filter 160ms ease;
}
.home-page .home-map__region--sochi {
  fill: #ffffff;
  opacity: 1;
}
.home-page {
  /* =======================================================
   HOVER
   ======================================================= */
}
.home-page .home-map__region:hover {
  stroke-width: 1.75;
}
.home-page {
  /* =======================================================
   DRAGGING
   ======================================================= */
}
.home-page .home-map__region.is-dragging {
  cursor: grabbing;
  stroke-width: 1.9;
  filter: drop-shadow(0 10px 18px rgba(23, 23, 23, 0.18));
  transition: none;
}
.home-page {
  /* =======================================================
   CEREMONIAL RETURN
   ======================================================= */
}
.home-page .home-map__region.is-returning {
  pointer-events: none;
  transition: transform 2200ms cubic-bezier(0.22, 1, 0.36, 1), fill 420ms ease, stroke-width 280ms ease, filter 280ms ease;
}
.home-page {
  /* =======================================================
   TEMPORARY FOREIGN FLAG STATES
   ======================================================= */
}
.home-page .home-map__region.is-russian {
  fill: url(#home-russia-flag);
}
.home-page .home-map__region.is-turkish {
  fill: url(#home-turkey-flag);
}
.home-page .home-map__region.is-armenian {
  fill: url(#home-armenia-flag);
}
.home-page {
  /* =======================================================
     YEARS
     ======================================================= */
}
.home-page .home-cover__years {
  position: absolute;
  top: 50%;
  left: var(--home-side);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translateY(170px);
  color: rgba(23, 23, 23, 0.6);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.home-page .home-cover__years i {
  position: relative;
  display: block;
  width: clamp(45px, 5vw, 90px);
  height: 1px;
  overflow: hidden;
  background: rgba(23, 23, 23, 0.32);
}
.home-page .home-cover__years i::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28%;
  height: 1px;
  background: var(--yellow);
  animation: home-years-line 2.4s ease-in-out infinite alternate;
}
@keyframes home-years-line {
  from {
    left: 0;
  }
  to {
    left: 72%;
  }
}
.home-page {
  /* =======================================================
     BOTTOM
     ======================================================= */
}
.home-page .home-cover__bottom {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 0.18fr) minmax(0, 0.57fr) minmax(240px, 0.25fr);
  align-items: stretch;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  background: white;
}
.home-page {
  /* =======================================================
     AI LAW / LEFT COLUMN
     ======================================================= */
}
.home-page .home-cover__copyright {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: clamp(26px, 3vw, 46px);
  border-right: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
}
.home-page .home-cover__copyright::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  height: 0;
  background: var(--yellow);
  transition: height 240ms ease;
}
.home-page .home-cover__copyright > * {
  position: relative;
  z-index: 1;
}
.home-page .home-cover__copyright:hover::before, .home-page .home-cover__copyright:focus-visible::before {
  height: 100%;
}
.home-page .home-cover__copyright:hover .home-cover__copyright-arrow, .home-page .home-cover__copyright:focus-visible .home-cover__copyright-arrow {
  transform: translate(5px, -5px);
}
.home-page .home-cover__copyright:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}
.home-page .home-cover__copyright-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.home-page .home-cover__copyright-copy small {
  color: rgba(23, 23, 23, 0.42);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-page .home-cover__copyright-copy strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(14px, 1.15vw, 20px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.home-page .home-cover__copyright-arrow {
  align-self: end;
  font-size: 20px;
  transition: transform 220ms ease;
}
.home-page {
  /* =======================================================
     CLOSING NOTE / MIDDLE COLUMN
     ======================================================= */
}
.home-page .home-cover__bottom-statement {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
  min-height: 180px;
  padding: clamp(26px, 3.5vw, 54px);
  border-right: 1px solid var(--line);
}
.home-page .home-cover__bottom-statement .home-cover__bottom-label {
  color: rgba(23, 23, 23, 0.42);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.home-page .home-cover__bottom-statement p {
  max-width: 760px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.65;
}
.home-page {
  /* =======================================================
     TBILISI / RIGHT COLUMN
     ======================================================= */
}
.home-page .home-cover__location {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: clamp(26px, 3vw, 46px);
}
.home-page .home-cover__location .home-cover__location-dot {
  position: relative;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--yellow);
  animation: home-location-pulse 1.8s ease-out infinite;
}
.home-page .home-cover__location .home-cover__location-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1.5px solid rgba(23, 23, 23, 0.62);
  border-radius: 50%;
  animation: home-location-ring 1.8s ease-out infinite;
}
.home-page .home-cover__location > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.home-page .home-cover__location small {
  color: rgba(23, 23, 23, 0.4);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-page .home-cover__location strong {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes home-location-pulse {
  0%, 100% {
    opacity: 0.72;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@keyframes home-location-ring {
  0% {
    opacity: 0.82;
    transform: scale(0.45);
  }
  75%, 100% {
    opacity: 0;
    transform: scale(2);
  }
}
.home-page {
  /* =======================================================
     BOTTOM — RESPONSIVE
     Matches Collaboration panel breakpoints
     ======================================================= */
}
@media (max-width: 1180px) {
  .home-page .home-cover__bottom {
    grid-template-columns: 120px 1fr;
  }
  .home-page .home-cover__copyright {
    border-right: 1px solid var(--line);
  }
  .home-page .home-cover__bottom-statement {
    border-right: 0;
  }
  .home-page .home-cover__location {
    grid-column: 1/-1;
    min-height: 120px;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 620px) {
  .home-page .home-cover__bottom {
    grid-template-columns: 1fr;
  }
  .home-page .home-cover__copyright,
  .home-page .home-cover__bottom-statement {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .home-page .home-cover__location {
    grid-column: auto;
    min-height: 0;
    border-top: 0;
  }
}
.home-page {
  /* =======================================================
     FULLSCREEN MENU
     ======================================================= */
}
.home-page .home-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 0 clamp(22px, 4vw, 68px);
  background: var(--ink);
  color: white;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1), opacity 350ms ease, visibility 0s 650ms;
}
.home-page .home-menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1), opacity 350ms ease, visibility 0s;
}
.home-page .home-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 90px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-page .home-menu__close {
  color: white;
}
.home-page .home-menu__close i {
  width: 23px;
  height: 23px;
}
.home-page .home-menu__close i::before, .home-page .home-menu__close i::after {
  top: 50%;
  bottom: auto;
  width: 100%;
}
.home-page .home-menu__close i::before {
  transform: rotate(45deg);
}
.home-page .home-menu__close i::after {
  transform: rotate(-45deg);
}
.home-page {
  /* =======================================================
     MENU NAVIGATION
     ======================================================= */
}
.home-page .home-menu__navigation {
  align-self: center;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.home-page .home-menu__navigation a {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  min-height: clamp(76px, 10vh, 120px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
  text-decoration: none;
  transition: padding-left 250ms ease, background-color 250ms ease, color 250ms ease;
}
.home-page .home-menu__navigation a > span {
  color: rgba(255, 255, 255, 0.34);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.home-page .home-menu__navigation a strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(34px, 4.2vw, 75px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.home-page .home-menu__navigation a > i {
  margin-right: 12px;
  color: var(--yellow);
  font-style: normal;
  font-size: 20px;
  transition: transform 220ms ease;
}
.home-page .home-menu__navigation a:hover, .home-page .home-menu__navigation a:focus-visible {
  padding-left: 18px;
  background: var(--yellow);
  color: var(--ink);
}
.home-page .home-menu__navigation a:hover > span,
.home-page .home-menu__navigation a:hover > i, .home-page .home-menu__navigation a:focus-visible > span,
.home-page .home-menu__navigation a:focus-visible > i {
  color: var(--ink);
}
.home-page .home-menu__navigation a:hover > i, .home-page .home-menu__navigation a:focus-visible > i {
  transform: translate(5px, -5px);
}
.home-page .home-menu__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-page {
  /* =======================================================
     TABLET
     ======================================================= */
}
@media (max-width: 950px) {
  .home-page .home-cover__feature {
    top: 45%;
    width: calc(100% - 48px);
  }
  .home-page .home-cover__composition {
    min-height: 540px;
  }
  .home-page .home-cover__title {
    top: 58%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    white-space: normal;
  }
  .home-page .home-cover__title-first {
    font-size: clamp(80px, 15vw, 130px);
  }
  .home-page .home-cover__title-last {
    font-size: clamp(55px, 10vw, 90px);
  }
  .home-page .home-cover__georgia-map {
    top: 8%;
    left: 48%;
    width: min(56vw, 520px);
  }
  .home-page .home-cover__years {
    top: auto;
    bottom: 24%;
    transform: none;
  }
}
.home-page {
  /* =======================================================
     MOBILE
     ======================================================= */
}
@media (max-width: 650px) {
  .home-page .home-cover {
    min-height: 100svh;
  }
  .home-page .home-cover__top {
    min-height: 68px;
    padding: 0 16px;
  }
  .home-page .home-cover__brand {
    font-size: 6px;
  }
  .home-page .home-cover__brand-mark {
    width: 7px;
    height: 7px;
  }
  .home-page .home-cover__menu-button {
    font-size: 7px;
  }
  .home-page {
    /* ---------------------------
       central feature
       --------------------------- */
  }
  .home-page .home-cover__feature {
    top: 43%;
    left: 16px;
    width: calc(100% - 32px);
    transform: translateY(-50%);
  }
  .home-page .home-cover__eyebrow {
    margin-bottom: 22px;
    font-size: 6px;
    line-height: 1.5;
  }
  .home-page .home-cover__composition {
    min-height: 440px;
  }
  .home-page .home-cover__title {
    top: 61%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 0.82;
    white-space: normal;
  }
  .home-page .home-cover__title-first {
    font-size: clamp(66px, 22vw, 96px);
  }
  .home-page .home-cover__title-last {
    font-size: clamp(42px, 13.5vw, 65px);
    line-height: 0.84;
  }
  .home-page .home-cover__georgia-map {
    top: 7%;
    left: 14%;
    width: min(82vw, 390px);
  }
  .home-page {
    /* ---------------------------
       coordinates slightly softer
       on small screens
       --------------------------- */
  }
  .home-page .home-cover__coordinate-line--horizontal {
    background: repeating-linear-gradient(to right, rgba(23, 23, 23, 0.24) 0, rgba(23, 23, 23, 0.24) 2px, transparent 2px, transparent 5px);
  }
  .home-page .home-cover__coordinate-line--vertical {
    background: repeating-linear-gradient(to bottom, rgba(23, 23, 23, 0.24) 0, rgba(23, 23, 23, 0.24) 2px, transparent 2px, transparent 5px);
  }
  .home-page {
    /* ---------------------------
       years
       --------------------------- */
  }
  .home-page .home-cover__years {
    top: auto;
    bottom: 112px;
    left: 16px;
    font-size: 6px;
  }
  .home-page {
    /* ---------------------------
       menu
       --------------------------- */
  }
  .home-page .home-menu {
    padding: 0 18px;
  }
  .home-page .home-menu__top {
    min-height: 68px;
    font-size: 6px;
  }
  .home-page .home-menu__navigation a {
    grid-template-columns: 38px 1fr auto;
    min-height: 88px;
  }
  .home-page .home-menu__navigation a strong {
    font-size: clamp(31px, 10vw, 46px);
  }
  .home-page .home-menu__footer {
    min-height: 55px;
    font-size: 5px;
  }
}
.home-page {
  /* =======================================================
     REDUCED MOTION
     ======================================================= */
}
@media (prefers-reduced-motion: reduce) {
  .home-page .home-cover__brand-mark::after,
  .home-page .home-cover__years i::after,
  .home-page .home-cover__location-dot,
  .home-page .home-cover__location-dot::after {
    animation: none !important;
  }
  .home-page .home-menu,
  .home-page .home-menu__navigation a,
  .home-page .home-cover__menu-button i::before,
  .home-page .home-cover__menu-button i::after,
  .home-page .home-map__region {
    transition: none !important;
  }
}

/* =========================================================
   DOCUMENTS PAGE
========================================================= */
.documents-page {
  min-height: 100vh;
  background: linear-gradient(to right, transparent calc(50% - 0.5px), rgba(23, 23, 23, 0.005) 50%, transparent calc(50% + 0.5px)), var(--paper);
}
.documents-page .reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 620ms ease, transform 620ms ease;
}
.documents-page .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   HERO
========================================================= */
.documents-hero {
  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  min-height: calc(100vh - var(--header-height));
  border-bottom: 1px solid var(--ink);
}
.documents-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(70px, 8vw, 132px) clamp(24px, 5vw, 84px);
  border-right: 1px solid var(--ink);
}
.documents-hero__copy::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 10%;
  width: 1px;
  height: 34%;
  background: var(--yellow);
}
.documents-hero__copy h1 {
  max-width: 850px;
  margin: 24px 0 30px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(52px, 4.4vw, 112px);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.066em;
  text-transform: uppercase;
}
.documents-hero__description {
  max-width: 650px;
  margin: 0;
  color: rgba(23, 23, 23, 0.7);
  font-size: clamp(12px, 1.15vw, 17px);
  line-height: 1.85;
  text-align: justify;
}
.documents-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 38px;
  margin-top: 42px;
}
.documents-hero__visual {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: #ecece8;
}

/* =========================================================
   HERO LINKS
========================================================= */
.documents-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: min(100%, 280px);
  padding: 13px 0;
  border-top: 1px solid var(--ink);
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}
.documents-text-link span:last-child {
  font-size: 16px;
  transition: color 200ms ease, transform 220ms ease;
}
.documents-text-link:hover, .documents-text-link:focus-visible {
  border-top-color: var(--yellow);
  outline: none;
}
.documents-text-link:hover span:last-child, .documents-text-link:focus-visible span:last-child {
  color: #9a8500;
  transform: translate(5px, -5px);
}

/* =========================================================
   DOCUMENT HERO MACHINE
========================================================= */
.document-machine {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(to right, rgba(23, 23, 23, 0.065) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.065) 1px, transparent 1px), white;
  background-size: 38px 38px;
}
.document-machine__grid {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(23, 23, 23, 0.16);
}
.document-machine__grid::before, .document-machine__grid::after {
  content: "";
  position: absolute;
  background: rgba(23, 23, 23, 0.18);
}
.document-machine__grid::before {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
}
.document-machine__grid::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}
.document-machine__register {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  left: clamp(20px, 3vw, 46px);
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: rgba(23, 23, 23, 0.54);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.document-machine__register--top {
  top: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(23, 23, 23, 0.28);
}
.document-machine__register--bottom {
  bottom: 24px;
  padding-top: 12px;
  border-top: 1px solid rgba(23, 23, 23, 0.28);
}
.document-machine__stack {
  position: relative;
  z-index: 3;
  width: min(46%, 430px);
  aspect-ratio: 0.72;
}
.document-machine__scanner {
  position: absolute;
  top: 0;
  right: -14%;
  left: -14%;
  z-index: 8;
  height: 3px;
  background: var(--yellow);
  box-shadow: 0 0 12px rgba(254, 221, 0, 0.75), 0 0 30px rgba(254, 221, 0, 0.28);
  animation: document-machine-scan 5.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* =========================================================
   DOCUMENT SHEETS
========================================================= */
.document-sheet {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--ink);
  background: #ffffff;
}
.document-sheet--back {
  transform: translate(13%, -8%) rotate(5deg);
  background: #d8d8d4;
}
.document-sheet--middle {
  transform: translate(-10%, 8%) rotate(-4deg);
  background: var(--yellow);
}
.document-sheet--front {
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding: clamp(25px, 3vw, 42px);
  box-shadow: 16px 18px 0 rgba(23, 23, 23, 0.08);
  animation: document-sheet-float 6s ease-in-out infinite;
}
.document-sheet--front > b {
  font-size: 8px;
  letter-spacing: 0.16em;
}
.document-sheet--front > strong {
  margin-top: auto;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(58px, 7vw, 120px);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.08em;
}
.document-sheet__line {
  display: block;
  width: 92%;
  height: 1px;
  margin-top: 18px;
  background: rgba(23, 23, 23, 0.3);
}
.document-sheet__line--title {
  width: 56%;
  height: 7px;
  margin-top: 18%;
  background: var(--ink);
}
.document-sheet__line--short {
  width: 62%;
}

@keyframes document-machine-scan {
  0% {
    top: -4%;
    opacity: 0;
  }
  12%, 84% {
    opacity: 1;
  }
  100% {
    top: 104%;
    opacity: 0;
  }
}
@keyframes document-sheet-float {
  0%, 100% {
    transform: translate(0, 0) rotate(-0.4deg);
  }
  50% {
    transform: translate(4px, -7px) rotate(0.4deg);
  }
}
/* =========================================================
   CATALOGUE INTRO
========================================================= */
.document-catalogue {
  width: 100%;
  padding: clamp(72px, 8vw, 138px) 0 0;
  border-bottom: 1px solid var(--ink);
}
.document-catalogue__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  align-items: end;
  gap: 70px;
  padding: 0 clamp(20px, 4.5vw, 76px) clamp(52px, 6vw, 86px);
}
.document-catalogue__intro h2 {
  max-width: 980px;
  margin: 18px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(44px, 6vw, 104px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}
.document-catalogue__intro > p {
  margin: 0;
  color: var(--muted-ink);
  font-size: 11px;
  line-height: 1.85;
  text-align: justify;
}

/* =========================================================
   RESEARCH WORKSPACE
========================================================= */
.document-research {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: white;
}
.document-research__search {
  grid-column: 1/-1;
  padding: clamp(28px, 3vw, 46px) clamp(20px, 4.5vw, 76px);
  border-bottom: 1px solid var(--line);
}
.document-research__search label {
  display: block;
  margin-bottom: 12px;
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.document-research__categories {
  min-width: 0;
  border-right: 1px solid var(--ink);
  background: linear-gradient(to right, rgba(23, 23, 23, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.045) 1px, transparent 1px), white;
  background-size: 32px 32px;
}
.document-research__categories > p {
  margin: 0;
  padding: 20px clamp(20px, 3vw, 44px);
  border-bottom: 1px solid var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.document-research__advanced {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  min-width: 0;
}

/* =========================================================
   SEARCH
========================================================= */
.document-search-field {
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 2px solid var(--ink);
}
.document-search-field input {
  width: 100%;
  padding: 8px 0 16px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(24px, 3.2vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}
.document-search-field input::-moz-placeholder {
  color: rgba(23, 23, 23, 0.18);
}
.document-search-field input::placeholder {
  color: rgba(23, 23, 23, 0.18);
}
.document-search-field > span {
  flex: 0 0 auto;
  font-size: 30px;
}
.document-search-field:focus-within {
  border-bottom-color: var(--yellow);
}

/* =========================================================
   CATEGORY FILTERS
========================================================= */
.document-category-list {
  display: grid;
}

.document-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 18px clamp(20px, 3vw, 44px);
  border: 0;
  border-bottom: 1px solid rgba(23, 23, 23, 0.22);
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, padding-left 220ms ease;
}
.document-category span {
  color: rgba(23, 23, 23, 0.44);
}
.document-category:hover, .document-category:focus-visible, .document-category.active {
  padding-left: calc(clamp(20px, 3vw, 44px) + 8px);
  background: var(--yellow);
  outline: none;
}
.document-category.active {
  box-shadow: inset 5px 0 0 var(--ink);
}

/* =========================================================
   ADVANCED CONTROLS
========================================================= */
.document-control {
  min-width: 0;
  padding: 22px clamp(20px, 3vw, 40px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.document-control label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted-ink);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.document-control select,
.document-control input {
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(23, 23, 23, 0.3);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
}
.document-control select:focus,
.document-control input:focus {
  border-bottom-color: var(--yellow);
}

/* =========================================================
   CLEAR
========================================================= */
.document-clear {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 66px;
  padding: 0 clamp(20px, 3vw, 40px);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #171717;
  color: white;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.document-clear i {
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
}
.document-clear:hover, .document-clear:focus-visible {
  background: var(--yellow);
  color: var(--ink);
  outline: none;
}

/* =========================================================
   RESULTS HEADER
========================================================= */
.document-results-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.65fr) auto;
  align-items: end;
  gap: 36px;
  padding: clamp(38px, 5vw, 74px) clamp(20px, 4.5vw, 76px) 24px;
  border-bottom: 1px solid var(--ink);
}
.document-results-heading h3 {
  margin: 10px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(36px, 4.8vw, 82px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.document-results-heading > p {
  margin: 0;
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-align: right;
  text-transform: uppercase;
}

/* =========================================================
   LOADING / EMPTY
========================================================= */
.document-loading,
.document-empty {
  margin: 0;
  padding: 70px 24px;
  border-bottom: 1px solid var(--line);
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-align: center;
  text-transform: uppercase;
}

/* =========================================================
   COMPACT DOCUMENT REGISTER
========================================================= */
.document-results {
  width: 100%;
  border-top: 1px solid var(--ink);
  background: white;
}

.document-result {
  position: relative;
  display: grid;
  grid-template-columns: 54px 116px minmax(320px, 1fr) minmax(260px, 0.55fr) 150px;
  min-height: 132px;
  border-bottom: 1px solid var(--line);
  background: white;
  transition: background 180ms ease;
}
.document-result:hover {
  background: rgba(254, 221, 0, 0.055);
}
.document-result {
  /* =====================================================
     NUMBER
  ===================================================== */
}
.document-result__rail {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18px;
  border-right: 1px solid var(--line);
}
.document-result__rail span {
  color: var(--muted-ink);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.13em;
}
.document-result {
  /* =====================================================
     REAL THUMBNAIL
  ===================================================== */
}
.document-result__preview {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 10px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: linear-gradient(to right, rgba(23, 23, 23, 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.035) 1px, transparent 1px), #f1f1ee;
  background-size: 18px 18px;
}
.document-result__preview img {
  display: block;
  width: 100%;
  height: 108px;
  -o-object-fit: contain;
     object-fit: contain;
}
.document-result__preview.is-empty {
  background: #f1f1ee;
}
.document-result {
  /* =====================================================
     TITLE
  ===================================================== */
}
.document-result__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 20px 30px;
  border-right: 1px solid var(--line);
}
.document-result__body h3 {
  max-width: 850px;
  margin: 12px 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(18px, 1.7vw, 27px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.document-result__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted-ink);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.document-result {
  /* =====================================================
     DESCRIPTION
  ===================================================== */
}
.document-result__summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 20px 28px;
  border-right: 1px solid var(--line);
}
.document-result__summary span {
  display: block;
  margin-bottom: 9px;
  color: var(--muted-ink);
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.document-result__summary p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: rgba(23, 23, 23, 0.68);
  font-size: 8px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.document-result {
  /* =====================================================
     ACTIONS
  ===================================================== */
}
.document-result__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px 14px;
}

/* =========================================================
   ACTION BUTTONS
========================================================= */
.document-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 37px;
  padding: 0 12px;
  border: 1px solid var(--ink);
  background: white;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.document-action b {
  font-size: 13px;
  font-weight: 400;
  transition: transform 180ms ease;
}
.document-action--primary {
  background: var(--ink);
  color: white;
}
.document-action:hover, .document-action:focus-visible {
  background: var(--yellow);
  color: var(--ink);
  outline: none;
}
.document-action:hover b, .document-action:focus-visible b {
  transform: translate(2px, -2px);
}
.document-action.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* =========================================================
   PAGINATION
========================================================= */
.document-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 24px clamp(20px, 4.5vw, 76px);
  border-bottom: 1px solid var(--ink);
  background: #ecece8;
}
.document-pagination[hidden] {
  display: none;
}
.document-pagination > p {
  margin: 0;
  color: var(--muted-ink);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.document-pagination__controls {
  display: flex;
  align-items: center;
  border: 1px solid var(--ink);
}
.document-pagination__pages {
  display: flex;
}
.document-pagination__pages button {
  min-width: 38px;
}
.document-pagination button {
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-right: 1px solid var(--ink);
  background: white;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 7px;
  font-weight: 700;
  cursor: pointer;
}
.document-pagination button:last-child {
  border-right: 0;
}
.document-pagination button:hover, .document-pagination button:focus-visible, .document-pagination button.active {
  background: var(--yellow);
  outline: none;
}
.document-pagination button:disabled {
  opacity: 0.28;
  cursor: default;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 1100px) {
  .document-result {
    grid-template-columns: 48px 100px minmax(280px, 1fr) minmax(220px, 0.55fr) 130px;
  }
  .document-result__body {
    padding-right: 20px;
    padding-left: 20px;
  }
  .document-result__summary {
    padding-right: 18px;
    padding-left: 18px;
  }
}
@media (max-width: 900px) {
  .document-result {
    grid-template-columns: 76px 100px minmax(0, 1fr) 155px;
  }
}
@media (max-width: 850px) {
  .document-result {
    grid-template-columns: 48px 90px minmax(0, 1fr) 120px;
  }
  .document-result__summary {
    display: none;
  }
}
@media (max-width: 700px) {
  .document-result {
    grid-template-columns: 68px 86px minmax(0, 1fr);
    min-height: 120px;
  }
  .document-result__preview img {
    height: 90px;
  }
  .document-result__body {
    padding: 16px;
    border-right: 0;
  }
  .document-result__description {
    display: none;
  }
  .document-result__actions {
    grid-column: 1/-1;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    border-top: 1px solid var(--line);
  }
  .document-result__actions .document-action {
    min-height: 42px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
  .document-result__actions .document-action:last-child {
    border-right: 0;
  }
  .document-pagination {
    align-items: stretch;
    flex-direction: column;
    padding-right: 18px;
    padding-left: 18px;
  }
  .document-pagination__controls {
    overflow-x: auto;
  }
}
@media (max-width: 650px) {
  .document-result {
    grid-template-columns: 42px 82px minmax(0, 1fr);
  }
  .document-result__preview img {
    height: 86px;
  }
  .document-result__body {
    border-right: 0;
  }
  .document-result__body h3 {
    font-size: 17px;
  }
  .document-result__actions {
    grid-column: 1/-1;
    flex-direction: row;
    padding: 10px;
    border-top: 1px solid var(--line);
  }
  .document-result__actions .document-action {
    flex: 1;
  }
}
/* =========================================================
   DOCUMENT READER — UNIFIED SINGLE-BAR VIEWER
========================================================= */
body.document-reader-open {
  overflow: hidden;
}

.document-reader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  opacity: 0;
  transition: opacity 220ms ease;
}
.document-reader[hidden] {
  display: none;
}
.document-reader.is-open {
  opacity: 1;
}
.document-reader.is-open .document-reader__panel {
  transform: translateY(0);
}
.document-reader {
  /* =====================================================
     BACKDROP
  ===================================================== */
}
.document-reader__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0, 0, 0, 0.78);
  cursor: pointer;
}
.document-reader {
  /* =====================================================
     PANEL
  ===================================================== */
}
.document-reader__panel {
  position: absolute;
  inset: clamp(10px, 1.6vw, 24px);
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: #d8d8d4;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  transform: translateY(18px);
  transition: transform 220ms ease;
}
.document-reader__panel:fullscreen, .document-reader__panel:-webkit-full-screen {
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.document-reader {
  /* =====================================================
     ONE-LINE UNIVERSAL TOOLBAR
  ===================================================== */
}
.document-reader__toolbar {
  position: relative;
  z-index: 80;
  display: flex;
  align-items: stretch;
  min-width: 0;
  min-height: 72px;
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
  background: #171717;
  color: white;
}
.document-reader {
  /* =====================================================
     RECORD IDENTITY
  ===================================================== */
}
.document-reader__identity {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  background: #171717;
}
.document-reader__identity > span {
  max-width: 120px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.56);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.document-reader__identity > em {
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: var(--yellow);
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.document-reader {
  /* =====================================================
     FORMAT-AWARE CONTROLS
  ===================================================== */
}
.document-reader__controls {
  flex: 0 1 auto;
  display: flex;
  align-items: stretch;
  min-width: 0;
  margin-left: auto;
  overflow-x: auto;
  overflow-y: hidden;
  background: #171717;
  scrollbar-width: thin;
  scrollbar-color: rgba(254, 221, 0, 0.65) #171717;
}
.document-reader__controls::-webkit-scrollbar {
  height: 3px;
}
.document-reader__controls::-webkit-scrollbar-track {
  background: #171717;
}
.document-reader__controls::-webkit-scrollbar-thumb {
  background: rgba(254, 221, 0, 0.72);
}
.document-reader__control-group {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  min-height: 71px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.document-reader__control-group[hidden] {
  display: none;
}
.document-reader__control-group button,
.document-reader__control-group a,
.document-reader__control-group > span {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 58px;
  min-height: 71px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.document-reader__control-group button,
.document-reader__control-group a {
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.document-reader__control-group button:hover, .document-reader__control-group button:focus-visible,
.document-reader__control-group a:hover,
.document-reader__control-group a:focus-visible {
  background: var(--yellow);
  color: var(--ink);
  outline: none;
}
.document-reader__control-group button:active,
.document-reader__control-group a:active {
  transform: translateY(1px);
}
.document-reader__control-group button.active, .document-reader__control-group button[aria-pressed=true],
.document-reader__control-group a.active,
.document-reader__control-group a[aria-pressed=true] {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: inset 0 -4px 0 var(--ink);
}
.document-reader__control-group button:disabled,
.document-reader__control-group a:disabled {
  opacity: 0.25;
  cursor: default;
  transform: none;
}
.document-reader__control-group button.is-disabled, .document-reader__control-group button[aria-disabled=true],
.document-reader__control-group a.is-disabled,
.document-reader__control-group a[aria-disabled=true] {
  opacity: 0.28;
  pointer-events: none;
}
.document-reader__control-group > span {
  min-width: 82px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.document-reader__control-group .document-reader__value-button {
  min-width: 70px;
  font-size: 10px;
}
.document-reader__control-group--format button {
  min-width: 62px;
}
.document-reader__control-group--actions {
  position: sticky;
  right: 0;
  z-index: 10;
  margin-left: auto;
  border-left: 1px solid var(--yellow);
  background: #101010;
  box-shadow: -14px 0 22px rgba(0, 0, 0, 0.24);
}
.document-reader__control-group--actions button,
.document-reader__control-group--actions a {
  min-width: 66px;
}
.document-reader__control-group--actions button svg,
.document-reader__control-group--actions a svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
  pointer-events: none;
}
.document-reader__control-group--actions .document-reader__close {
  min-width: 70px;
  font-size: 27px;
  font-weight: 400;
}
.document-reader {
  /* =====================================================
     EPUB THEME SYMBOL
  ===================================================== */
}
.document-reader #document-reader-theme-toggle {
  font-size: 0;
}
.document-reader #document-reader-theme-toggle::before {
  content: "☾";
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.document-reader #document-reader-theme-toggle.active::before, .document-reader #document-reader-theme-toggle[aria-pressed=true]::before {
  content: "☀";
}
.document-reader {
  /* =====================================================
     DOCUMENT STAGE
  ===================================================== */
}
.document-reader__stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(to right, rgba(23, 23, 23, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.045) 1px, transparent 1px), #d8d8d4;
  background-size: 28px 28px;
}
.document-reader {
  /* =====================================================
     LOADING
  ===================================================== */
}
.document-reader__loading {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-content: center;
  gap: 18px;
  text-align: center;
  background: #d8d8d4;
}
.document-reader__loading[hidden] {
  display: none;
}
.document-reader__loading span {
  width: 52px;
  height: 2px;
  margin: 0 auto;
  overflow: hidden;
  background: rgba(23, 23, 23, 0.18);
}
.document-reader__loading span::after {
  content: "";
  display: block;
  width: 45%;
  height: 100%;
  background: var(--yellow);
  animation: document-reader-loading 900ms ease-in-out infinite alternate;
}
.document-reader__loading strong {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.document-reader {
  /* =====================================================
     READER SURFACES
  ===================================================== */
}
.document-reader__surface {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}
.document-reader__surface[hidden] {
  display: none;
}
.document-reader__surface--pdf {
  display: block;
  padding: clamp(18px, 2.5vw, 40px);
  overflow: auto;
  background: #d8d8d4;
}
.document-reader__surface--epub {
  padding: clamp(16px, 2.2vw, 32px);
  overflow: auto;
  background: #ecece8;
}
.document-reader__surface--djvu {
  overflow: hidden;
  background: #ecece8;
}
.document-reader__surface--djvu > div {
  width: 100%;
  height: 100%;
}
.document-reader__surface--image, .document-reader__surface--comic {
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 46px);
  overflow: auto;
}
.document-reader__surface--image img, .document-reader__surface--comic img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transform-origin: center center;
  box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.16), 0 12px 30px rgba(23, 23, 23, 0.1);
  transition: transform 140ms ease;
}
.document-reader__surface--text {
  padding: clamp(22px, 3.5vw, 58px);
  background: #ecece8;
}
.document-reader__surface--text pre {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(26px, 4vw, 64px);
  border: 1px solid rgba(23, 23, 23, 0.2);
  background: white;
  color: var(--ink);
  font-family: "Courier Prime", monospace;
  font-size: 12px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.document-reader__surface--html {
  padding: clamp(22px, 3.5vw, 58px);
  background: #ecece8;
}
.document-reader__surface--html article {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 76px);
  border: 1px solid rgba(23, 23, 23, 0.2);
  background: white;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.75;
}
.document-reader__surface--html article img {
  max-width: 100%;
  height: auto;
}
.document-reader__surface--html article table {
  width: 100%;
  border-collapse: collapse;
}
.document-reader__surface--html article td,
.document-reader__surface--html article th {
  padding: 8px;
  border: 1px solid var(--line);
}
.document-reader__surface--html article h1,
.document-reader__surface--html article h2,
.document-reader__surface--html article h3,
.document-reader__surface--html article h4 {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
}
.document-reader__surface--sheet {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: white;
}
.document-reader {
  /* =====================================================
     PDF READER
  ===================================================== */
}
.document-reader__pdf-pages {
  display: grid;
  justify-items: center;
  gap: 24px;
  min-width: -moz-max-content;
  min-width: max-content;
  margin: 0 auto;
}
.document-reader__pdf-pages canvas {
  display: block;
  max-width: none;
  background: white;
  box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.2), 0 12px 30px rgba(23, 23, 23, 0.12);
}
.document-reader__pdf-scroll-page {
  width: 100%;
  padding-bottom: 20px;
}
.document-reader__pdf-scroll-page:not(:last-child) {
  border-bottom: 1px solid rgba(23, 23, 23, 0.12);
}
.document-reader {
  /* =====================================================
     EPUB READER
  ===================================================== */
}
.document-reader__epub-shell {
  width: min(100%, 1040px);
  min-height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: white;
  box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.18);
  transition: width 180ms ease, background 180ms ease, color 180ms ease;
}
.document-reader__epub-shell #document-reader-epub-area {
  width: 100%;
  min-height: 100%;
  overflow: visible;
}
.document-reader__epub-shell.is-dark {
  background: #171717;
  color: #f2f2ee;
}
.document-reader {
  /* =====================================================
     EPUB TABLE OF CONTENTS
  ===================================================== */
}
.document-reader__toc {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  width: min(380px, 90%);
  overflow-y: auto;
  border-right: 1px solid var(--ink);
  background: white;
  box-shadow: 16px 0 34px rgba(23, 23, 23, 0.12);
}
.document-reader__toc[hidden] {
  display: none;
}
.document-reader__toc header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 62px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink);
  background: #171717;
  color: white;
}
.document-reader__toc header > div {
  display: grid;
  gap: 3px;
}
.document-reader__toc header > div span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.document-reader__toc header > div strong {
  font-family: "Archivo Black", sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.document-reader__toc header button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: white;
  font-family: "JetBrains Mono", monospace;
  font-size: 19px;
  cursor: pointer;
}
.document-reader__toc header button:hover, .document-reader__toc header button:focus-visible {
  background: var(--yellow);
  color: var(--ink);
  outline: none;
}
.document-reader__toc nav {
  display: grid;
}
.document-reader__toc nav a,
.document-reader__toc nav button {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: white;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 7px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.document-reader__toc nav a:hover, .document-reader__toc nav a:focus-visible, .document-reader__toc nav a.active,
.document-reader__toc nav button:hover,
.document-reader__toc nav button:focus-visible,
.document-reader__toc nav button.active {
  background: var(--yellow);
  outline: none;
}
.document-reader {
  /* =====================================================
     SPREADSHEET READER
  ===================================================== */
}
.document-reader__sheet-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--ink);
  background: #ecece8;
}
.document-reader__sheet-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--ink);
  background: white;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.document-reader__sheet-tabs button:hover, .document-reader__sheet-tabs button:focus-visible, .document-reader__sheet-tabs button.active {
  background: var(--yellow);
  outline: none;
}
.document-reader__sheet-table {
  min-width: 0;
  overflow: auto;
  padding: 20px;
}
.document-reader__sheet-table table {
  border-collapse: collapse;
  background: white;
  font-size: 9px;
}
.document-reader__sheet-table td,
.document-reader__sheet-table th {
  min-width: 90px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.document-reader__sheet-table tr:first-child {
  background: #ecece8;
  font-weight: 700;
}
.document-reader {
  /* =====================================================
     FALLBACK
  ===================================================== */
}
.document-reader__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 40px;
  text-align: center;
  background: #ecece8;
}
.document-reader__fallback[hidden] {
  display: none;
}
.document-reader__fallback strong {
  max-width: 760px;
  margin: 0 auto;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(30px, 4vw, 62px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.document-reader__fallback p {
  max-width: 520px;
  margin: 20px auto 0;
  color: var(--muted-ink);
  font-size: 10px;
  line-height: 1.7;
}

@keyframes document-reader-loading {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(220%);
  }
}
.empty-space {
  height: 100px;
  border-bottom: 1px solid #d8d8d4;
}

/* =========================================================
   RESPONSIVE — 1180
========================================================= */
@media (max-width: 1180px) {
  .documents-hero {
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  }
  .document-reader__identity {
    flex-basis: 300px;
    max-width: 360px;
  }
  .document-reader__control-group button,
  .document-reader__control-group a,
  .document-reader__control-group > span {
    min-width: 46px;
    padding-right: 10px;
    padding-left: 10px;
  }
}
/* =========================================================
   RESPONSIVE — 1100
========================================================= */
@media (max-width: 1100px) {
  .document-result {
    grid-template-columns: 48px 100px minmax(280px, 1fr) minmax(220px, 0.55fr) 130px;
  }
  .document-result__body {
    padding-right: 20px;
    padding-left: 20px;
  }
  .document-result__summary {
    padding-right: 18px;
    padding-left: 18px;
  }
  .document-reader__identity {
    flex-basis: 250px;
    min-width: 190px;
    max-width: 300px;
    padding-right: 14px;
    padding-left: 14px;
  }
  .document-reader__identity > span {
    display: none;
  }
  .document-reader__identity > strong {
    grid-row: 1/-1;
    align-self: center;
  }
}
/* =========================================================
   RESPONSIVE — 900
========================================================= */
@media (max-width: 900px) {
  .documents-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .documents-hero__copy {
    min-height: 70vh;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .documents-hero__copy::after {
    right: auto;
    bottom: -1px;
    left: 12%;
    width: 38%;
    height: 1px;
  }
  .documents-hero__visual {
    min-height: 620px;
  }
  .document-catalogue__intro {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .document-research {
    grid-template-columns: 1fr;
  }
  .document-research__categories {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .document-results-heading {
    grid-template-columns: 1fr auto;
  }
  .document-results-heading > p {
    grid-column: 1/-1;
    grid-row: 2;
    text-align: left;
  }
  .document-reader__panel {
    inset: 8px;
    grid-template-rows: 58px minmax(0, 1fr);
  }
  .document-reader__toolbar {
    min-height: 58px;
  }
  .document-reader__identity {
    flex-basis: 210px;
    min-width: 160px;
    max-width: 240px;
    padding: 7px 12px;
  }
  .document-reader__identity::after {
    right: 12px;
    left: 12px;
  }
  .document-reader__identity > strong {
    font-size: 12px;
  }
  .document-reader__identity > em {
    min-width: 42px;
    min-height: 26px;
    padding-right: 7px;
    padding-left: 7px;
    font-size: 6px;
  }
  .document-reader__control-group {
    min-height: 57px;
  }
  .document-reader__control-group button,
  .document-reader__control-group a,
  .document-reader__control-group > span {
    min-width: 44px;
    min-height: 57px;
    padding-right: 9px;
    padding-left: 9px;
  }
  .document-reader__control-group > span {
    min-width: 66px;
  }
  .document-reader__control-group--actions button,
  .document-reader__control-group--actions a {
    min-width: 48px;
  }
  .document-reader__control-group--actions .document-reader__close {
    min-width: 52px;
  }
  .document-reader__surface--pdf {
    padding: 18px;
  }
  .document-reader__surface--epub {
    padding: 12px;
  }
}
/* =========================================================
   RESPONSIVE — 850
========================================================= */
@media (max-width: 850px) {
  .document-result {
    grid-template-columns: 48px 90px minmax(0, 1fr) 120px;
  }
  .document-result__summary {
    display: none;
  }
}
/* =========================================================
   RESPONSIVE — 700
========================================================= */
@media (max-width: 700px) {
  .documents-hero__copy {
    padding-right: 18px;
    padding-left: 18px;
  }
  .documents-hero__visual {
    min-height: 500px;
  }
  .document-machine__stack {
    width: min(58%, 350px);
  }
  .document-catalogue__intro,
  .document-research__search,
  .document-results-heading {
    padding-right: 18px;
    padding-left: 18px;
  }
  .document-research__advanced {
    grid-template-columns: 1fr;
  }
  .document-clear {
    grid-column: auto;
  }
  .document-results-heading {
    grid-template-columns: 1fr;
  }
  .document-results-heading > p {
    grid-column: auto;
    grid-row: auto;
  }
  .document-result {
    grid-template-columns: 42px 82px minmax(0, 1fr);
    min-height: 120px;
  }
  .document-result__preview img {
    height: 86px;
  }
  .document-result__body {
    padding: 16px;
    border-right: 0;
  }
  .document-result__body h3 {
    font-size: 17px;
  }
  .document-result__summary {
    display: none;
  }
  .document-result__actions {
    grid-column: 1/-1;
    flex-direction: row;
    padding: 10px;
    border-top: 1px solid var(--line);
  }
  .document-result__actions .document-action {
    flex: 1;
  }
  .document-pagination {
    align-items: stretch;
    flex-direction: column;
    padding-right: 18px;
    padding-left: 18px;
  }
  .document-pagination__controls {
    overflow-x: auto;
  }
  .document-reader__panel {
    inset: 4px;
    grid-template-rows: 54px minmax(0, 1fr);
  }
  .document-reader__toolbar {
    min-height: 54px;
  }
  .document-reader__identity {
    flex: 0 0 152px;
    min-width: 152px;
    max-width: 152px;
    grid-template-columns: minmax(0, 1fr);
    padding: 6px 10px;
  }
  .document-reader__identity > strong {
    grid-column: 1;
    font-size: 10px;
  }
  .document-reader__identity > em {
    position: absolute;
    top: 5px;
    right: 6px;
    grid-column: auto;
    grid-row: auto;
    min-width: 34px;
    min-height: 19px;
    padding: 0 5px;
    border-color: transparent;
    font-size: 5px;
  }
  .document-reader__identity::after {
    right: 10px;
    left: 10px;
  }
  .document-reader__controls {
    flex: 1 1 auto;
  }
  .document-reader__control-group {
    min-height: 53px;
  }
  .document-reader__control-group button,
  .document-reader__control-group a,
  .document-reader__control-group > span {
    min-width: 42px;
    min-height: 53px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 9px;
  }
  .document-reader__control-group > span {
    min-width: 58px;
    font-size: 7px;
  }
  .document-reader__control-group .document-reader__value-button {
    min-width: 56px;
  }
  .document-reader__control-group--actions button,
  .document-reader__control-group--actions a {
    min-width: 44px;
  }
  .document-reader__control-group--actions .document-reader__close {
    min-width: 48px;
  }
  .document-reader__surface--text, .document-reader__surface--html {
    padding: 14px;
  }
  .document-reader__surface--text pre, .document-reader__surface--html article {
    padding: 22px 18px;
  }
  .document-reader__toc {
    width: min(340px, 94%);
  }
}
/* =========================================================
   RESPONSIVE — 480
========================================================= */
@media (max-width: 480px) {
  .documents-hero__actions {
    display: grid;
  }
  .documents-text-link {
    width: 100%;
  }
  .document-machine__register {
    font-size: 6px;
  }
  .document-category,
  .document-control,
  .document-clear {
    padding-right: 18px;
    padding-left: 18px;
  }
  .document-reader__panel {
    inset: 2px;
  }
  .document-reader__identity {
    flex-basis: 126px;
    min-width: 126px;
    max-width: 126px;
  }
  .document-reader__identity > strong {
    padding-right: 24px;
    font-size: 9px;
  }
  .document-reader__identity > em {
    min-width: 30px;
    font-size: 4.8px;
  }
  .document-reader__control-group button,
  .document-reader__control-group a,
  .document-reader__control-group > span {
    min-width: 40px;
    padding-right: 7px;
    padding-left: 7px;
  }
  .document-reader__control-group > span {
    min-width: 54px;
  }
  .document-reader__control-group--actions button,
  .document-reader__control-group--actions a {
    min-width: 42px;
  }
  .document-reader__control-group--actions .document-reader__close {
    min-width: 46px;
  }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .documents-page .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
  .document-machine__scanner,
  .document-sheet--front,
  .document-reader__loading span::after {
    animation: none !important;
  }
  .document-reader,
  .document-reader__panel,
  .document-reader__control-group button,
  .document-reader__control-group a,
  .document-reader__epub-shell {
    transition: none !important;
  }
}
/* =========================================================
   PHOTOS PAGE
========================================================= */
.photos-page {
  min-height: 100vh;
  background: linear-gradient(to right, transparent calc(50% - 0.5px), rgba(23, 23, 23, 0.005) 50%, transparent calc(50% + 0.5px)), var(--paper);
}
.photos-page .reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 620ms ease, transform 620ms ease;
}
.photos-page .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.photo-viewer-open {
  overflow: hidden;
}

/* =========================================================
   HERO
========================================================= */
.photos-hero {
  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  min-height: calc(100vh - var(--header-height));
  border-bottom: 1px solid var(--line);
}
.photos-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(70px, 8vw, 132px) clamp(24px, 5vw, 84px);
  border-right: 1px solid var(--line);
}
.photos-hero__copy::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 10%;
  width: 1px;
  height: 34%;
  background: var(--yellow);
}
.photos-hero__copy h1 {
  max-width: 900px;
  margin: 24px 0 30px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(52px, 4.25vw, 116px);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.066em;
  text-transform: uppercase;
}
.photos-hero__description {
  max-width: 650px;
  margin: 0;
  color: rgba(23, 23, 23, 0.7);
  font-size: clamp(12px, 1.15vw, 17px);
  line-height: 1.85;
  text-align: justify;
}
.photos-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 38px;
  margin-top: 42px;
}
.photos-hero__visual {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: #ecece8;
}

.photos-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: min(100%, 280px);
  padding: 13px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}
.photos-text-link span:last-child {
  font-size: 16px;
  transition: color 200ms ease, transform 220ms ease;
}
.photos-text-link:hover, .photos-text-link:focus-visible {
  border-top-color: var(--yellow);
  outline: none;
}
.photos-text-link:hover span:last-child, .photos-text-link:focus-visible span:last-child {
  color: #9a8500;
  transform: translate(5px, -5px);
}

/* =========================================================
   HERO CONTACT SHEET
========================================================= */
.photo-table {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(to right, rgba(23, 23, 23, 0.065) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.065) 1px, transparent 1px), white;
  background-size: 38px 38px;
}
.photo-table__grid {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(23, 23, 23, 0.18);
}
.photo-table__grid::before, .photo-table__grid::after {
  content: "";
  position: absolute;
  background: rgba(23, 23, 23, 0.17);
}
.photo-table__grid::before {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
}
.photo-table__grid::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}
.photo-table__register {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  left: clamp(20px, 3vw, 46px);
  z-index: 6;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  border-top: 1px solid rgba(23, 23, 23, 0.75);
  font-size: clamp(7px, 0.62vw, 9px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.photo-table__register--top {
  top: 7%;
}
.photo-table__register--bottom {
  bottom: 7%;
}
.photo-table__register span:last-child {
  color: var(--muted-ink);
}
.photo-table__contact-sheet {
  position: relative;
  width: min(76%, 690px);
  aspect-ratio: 1.42;
  border: 1px solid var(--line);
  background: #171717;
  box-shadow: 18px 18px 0 rgba(23, 23, 23, 0.08), 36px 36px 0 rgba(23, 23, 23, 0.035);
  transform: rotate(-2deg);
  animation: photo-sheet-drift 8s ease-in-out infinite;
}
.photo-table__frame {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: radial-gradient(circle at 50% 30%, #d8d8d4 0 9%, transparent 10%), linear-gradient(145deg, #a7a7a2 0 42%, #ecece8 42% 54%, #777 54% 100%);
  filter: grayscale(1) contrast(1.12);
}
.photo-table__frame i {
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.photo-table__frame i::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 22%;
  height: 42%;
  border-radius: 46% 46% 16% 16%;
  background: rgba(23, 23, 23, 0.72);
  transform: translateX(-50%);
}
.photo-table__frame--one {
  top: 7%;
  left: 5%;
  width: 27%;
  height: 40%;
}
.photo-table__frame--two {
  top: 7%;
  left: 36.5%;
  width: 27%;
  height: 40%;
  background-position: 22% 30%;
}
.photo-table__frame--three {
  top: 7%;
  right: 5%;
  width: 27%;
  height: 40%;
}
.photo-table__frame--four {
  bottom: 7%;
  left: 5%;
  width: 27%;
  height: 40%;
}
.photo-table__frame--five {
  bottom: 7%;
  left: 36.5%;
  width: 27%;
  height: 40%;
}
.photo-table__frame--six {
  right: 5%;
  bottom: 7%;
  width: 27%;
  height: 40%;
}
.photo-table__scan {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  height: 2px;
  background: var(--yellow);
  box-shadow: 0 0 18px rgba(254, 221, 0, 0.8);
  animation: photo-sheet-scan 4.6s ease-in-out infinite;
}
.photo-table__focus {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 24%;
  aspect-ratio: 1;
  border: 1px solid var(--yellow);
  transform: translate(-50%, -50%);
}
.photo-table__focus::before, .photo-table__focus::after {
  content: "";
  position: absolute;
  background: var(--yellow);
}
.photo-table__focus::before {
  top: 50%;
  right: -16px;
  left: -16px;
  height: 1px;
}
.photo-table__focus::after {
  top: -16px;
  bottom: -16px;
  left: 50%;
  width: 1px;
}

@keyframes photo-sheet-drift {
  0%, 100% {
    transform: rotate(-2deg) translate3d(0, 0, 0);
  }
  50% {
    transform: rotate(-0.6deg) translate3d(0, -8px, 0);
  }
}
@keyframes photo-sheet-scan {
  0%, 10% {
    top: 4%;
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  90%, 100% {
    top: calc(96% - 2px);
    opacity: 0;
  }
}
/* =========================================================
   CATALOGUE
========================================================= */
.photo-catalogue {
  padding: clamp(76px, 8vw, 136px) clamp(18px, 4vw, 68px);
  border-bottom: 1px solid var(--line);
}
.photo-catalogue__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(38px, 8vw, 130px);
  padding-bottom: clamp(46px, 6vw, 88px);
  border-bottom: 1px solid var(--line);
}
.photo-catalogue__intro h2 {
  max-width: 900px;
  margin-top: 18px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(32px, 4vw, 70px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.photo-catalogue__intro > p {
  align-self: end;
  max-width: 620px;
  color: rgba(23, 23, 23, 0.68);
  font-size: clamp(11px, 1vw, 15px);
  line-height: 1.85;
  text-align: justify;
}

/* =========================================================
   RESEARCH WORKSPACE
========================================================= */
.photo-research {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  margin-top: 34px;
  border: 1px solid var(--line);
  background: #fff;
}
.photo-research__search {
  padding: clamp(22px, 2.8vw, 38px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.photo-research__search label {
  display: block;
  margin-bottom: 12px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.photo-research__categories {
  padding: clamp(22px, 2.8vw, 38px);
  border-bottom: 1px solid var(--line);
}
.photo-research__categories > p {
  margin-bottom: 12px;
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.photo-research__advanced {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  min-width: 0;
}

.photo-search-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.photo-search-field input {
  min-width: 0;
  padding: 13px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(11px, 1vw, 14px);
}
.photo-search-field input::-moz-placeholder {
  color: rgba(23, 23, 23, 0.38);
}
.photo-search-field input::placeholder {
  color: rgba(23, 23, 23, 0.38);
}
.photo-search-field span {
  padding-left: 18px;
  font-size: 22px;
}
.photo-search-field:focus-within {
  border-bottom-color: var(--yellow);
  box-shadow: 0 2px 0 var(--yellow);
}

/* =========================================================
   CATEGORY BUTTONS
========================================================= */
.photo-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.photo-category {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(23, 23, 23, 0.28);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 170ms ease, border-color 170ms ease, transform 170ms ease;
}
.photo-category span {
  color: var(--muted-ink);
}
.photo-category:hover, .photo-category:focus-visible {
  border-color: var(--line);
  outline: none;
}
.photo-category.active {
  border-color: var(--line);
  background: var(--ink);
  color: #fff;
}
.photo-category.active span {
  color: var(--yellow);
}

/* =========================================================
   ADVANCED CONTROLS
========================================================= */
.photo-control {
  min-width: 0;
  padding: 17px 16px 16px;
  border-right: 1px solid var(--line);
}
.photo-control label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted-ink);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.photo-control input,
.photo-control select {
  width: 100%;
  min-width: 0;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid rgba(23, 23, 23, 0.35);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
}
.photo-control input:focus,
.photo-control select:focus {
  border-bottom-color: var(--yellow);
  box-shadow: 0 1px 0 var(--yellow);
}

.photo-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 150px;
  padding: 16px 20px;
  border: 0;
  background: #ecece8;
  color: var(--ink);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}
.photo-clear i {
  font-size: 17px;
  font-style: normal;
}
.photo-clear:hover, .photo-clear:focus-visible {
  background: var(--yellow);
  outline: none;
}

/* =========================================================
   RESULTS HEADING
========================================================= */
.photo-results-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto) auto;
  align-items: end;
  gap: 30px;
  padding: clamp(56px, 7vw, 100px) 0 18px;
  border-bottom: 1px solid var(--line);
}
.photo-results-heading h3 {
  margin-top: 11px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(26px, 3vw, 50px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.photo-results-heading h3 span {
  color: #8f7b00;
}
.photo-results-heading > p {
  align-self: end;
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
}

.photo-view-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
}
.photo-view-switch button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding: 8px 11px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.photo-view-switch button:last-child {
  border-right: 0;
}
.photo-view-switch button:hover, .photo-view-switch button:focus-visible {
  background: #ecece8;
  outline: none;
}
.photo-view-switch button.active {
  background: var(--ink);
  color: #fff;
}
.photo-view-switch button.active span {
  color: var(--yellow);
}

.photo-loading,
.photo-empty {
  margin: 0;
  padding: 42px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* =========================================================
   PHOTO RESULTS — GALLERY
========================================================= */
.photo-results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}
.photo-results[data-view=contact] {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.photo-results[data-view=index] {
  display: block;
  border-left: 0;
}

.photo-result {
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.photo-result__button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
  text-align: left;
}
.photo-result__image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #ecece8;
}
.photo-result__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: saturate(0.88) contrast(1.02);
  transition: filter 280ms ease, transform 420ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.photo-result__image::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0 solid var(--yellow);
  pointer-events: none;
  transition: border-width 180ms ease;
}
.photo-result__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(to right, rgba(23, 23, 23, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.08) 1px, transparent 1px), #ecece8;
  background-size: 24px 24px;
  color: rgba(23, 23, 23, 0.26);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(28px, 4vw, 58px);
}
.photo-result__overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 11px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.76), transparent);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.photo-result__overlay span:last-child {
  color: var(--yellow);
}
.photo-result__content {
  display: grid;
  gap: 11px;
  min-height: 148px;
  padding: 15px 15px 18px;
}
.photo-result__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted-ink);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.photo-result h4 {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(10px, 0.88vw, 13px);
  font-weight: 800;
  line-height: 1.35;
}
.photo-result__caption {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  color: rgba(23, 23, 23, 0.62);
  font-size: 8px;
  line-height: 1.55;
}
.photo-result:hover .photo-result__image img, .photo-result:focus-within .photo-result__image img {
  filter: saturate(1) contrast(1.06);
  transform: scale(1.025);
}
.photo-result:hover .photo-result__image::after, .photo-result:focus-within .photo-result__image::after {
  border-width: 3px;
}

/* =========================================================
   CONTACT SHEET MODE
========================================================= */
.photo-results[data-view=contact] .photo-result__image {
  aspect-ratio: 1;
}
.photo-results[data-view=contact] .photo-result__content {
  min-height: 92px;
  padding: 10px;
}
.photo-results[data-view=contact] .photo-result__caption {
  display: none;
}
.photo-results[data-view=contact] .photo-result h4 {
  font-size: 9px;
}
.photo-results[data-view=contact] .photo-result__meta {
  font-size: 6px;
}

/* =========================================================
   INDEX MODE
========================================================= */
.photo-results[data-view=index] .photo-result {
  border-right: 0;
}
.photo-results[data-view=index] .photo-result__button {
  display: grid;
  grid-template-columns: 105px 120px minmax(220px, 1.2fr) minmax(220px, 1fr) 64px;
  align-items: stretch;
}
.photo-results[data-view=index] .photo-result__image {
  aspect-ratio: auto;
  min-height: 105px;
  border-right: 1px solid var(--line);
}
.photo-results[data-view=index] .photo-result__overlay {
  display: none;
}
.photo-results[data-view=index] .photo-result__content {
  display: contents;
}
.photo-results[data-view=index] .photo-result__meta {
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 16px;
  border-right: 1px solid var(--line);
}
.photo-results[data-view=index] .photo-result h4 {
  display: flex;
  align-items: center;
  padding: 16px;
  border-right: 1px solid var(--line);
}
.photo-results[data-view=index] .photo-result__caption {
  display: flex;
  align-items: center;
  max-height: none;
  padding: 16px;
  border-right: 1px solid var(--line);
}
.photo-results[data-view=index] .photo-result__index-arrow {
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 18px;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.photo-results[data-view=index] .photo-result:hover .photo-result__index-arrow,
.photo-results[data-view=index] .photo-result:focus-within .photo-result__index-arrow {
  background: var(--yellow);
  transform: translate(0, 0);
}

.photo-result__index-arrow {
  display: none;
}

/* =========================================================
   PHOTO VIEWER
========================================================= */
.photo-viewer[hidden] {
  display: none;
}

.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #090909;
  color: #fff;
}
.photo-viewer__shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
}
.photo-viewer__toolbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: stretch;
  min-height: 54px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.26);
  background: #111;
}
.photo-viewer__identity, .photo-viewer__actions, .photo-viewer__tools {
  display: flex;
  align-items: stretch;
}
.photo-viewer__identity {
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 0 17px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.photo-viewer__identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-viewer__identity em {
  color: rgba(255, 255, 255, 0.48);
  font-style: normal;
  white-space: nowrap;
}
.photo-viewer__tools {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.photo-viewer__tools button {
  min-width: 48px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
}
.photo-viewer__tools button:last-child {
  border-right: 0;
}
.photo-viewer__tools button:hover, .photo-viewer__tools button:focus-visible, .photo-viewer__tools button[aria-pressed=true] {
  background: var(--yellow);
  color: var(--ink);
  outline: none;
}
.photo-viewer__value-button {
  min-width: 65px !important;
  font-size: 8px !important;
  font-weight: 800;
}
.photo-viewer__actions {
  justify-content: flex-end;
}
.photo-viewer__actions a,
.photo-viewer__actions button {
  display: grid;
  place-items: center;
  min-width: 55px;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}
.photo-viewer__actions a:hover, .photo-viewer__actions a:focus-visible,
.photo-viewer__actions button:hover,
.photo-viewer__actions button:focus-visible {
  background: var(--yellow);
  color: var(--ink);
  outline: none;
}
.photo-viewer__actions button {
  min-width: 54px;
  font-size: 20px;
}
.photo-viewer__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  min-height: 0;
}
.photo-viewer.information-hidden .photo-viewer__workspace {
  grid-template-columns: minmax(0, 1fr) 0;
}
.photo-viewer__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.045), transparent 42%), #090909;
  touch-action: none;
}
.photo-viewer__image-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: default;
}
.photo-viewer__image-wrap.is-zoomed {
  cursor: grab;
}
.photo-viewer__image-wrap.is-dragging {
  cursor: grabbing;
}
.photo-viewer__image-wrap img {
  display: block;
  width: auto;
  height: auto;
  /*
  * The photograph must always fit inside
  * the available viewer stage on first open.
  */
  max-width: calc(100% - 120px);
  max-height: calc(100% - 64px);
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform 160ms ease;
}
.photo-viewer__nav {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 52px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(17, 17, 17, 0.72);
  color: #fff;
  cursor: pointer;
  font-size: 19px;
  transform: translateY(-50%);
}
.photo-viewer__nav:hover, .photo-viewer__nav:focus-visible {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink);
  outline: none;
}
.photo-viewer__nav:disabled {
  opacity: 0.24;
  cursor: default;
}
.photo-viewer__nav--previous {
  left: 18px;
}
.photo-viewer__nav--next {
  right: 18px;
}
.photo-viewer__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 12;
  padding: 10px 13px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}
.photo-viewer__information {
  position: relative;
  min-width: 0;
  overflow: auto;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  background: #111;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.photo-viewer.information-hidden .photo-viewer__information {
  opacity: 0;
  visibility: hidden;
}
.photo-viewer__information-header {
  padding: 22px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.photo-viewer__information-header span {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.photo-viewer__information-header strong {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
}
.photo-viewer__description {
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  line-height: 1.7;
}
.photo-viewer__metadata {
  margin: 0;
}
.photo-viewer__metadata div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.photo-viewer__metadata dt {
  color: rgba(255, 255, 255, 0.42);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.photo-viewer__metadata dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 8px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.photo-viewer__hint {
  margin: 0;
  padding: 18px 20px 24px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 7px;
  line-height: 1.7;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.photo-viewer__filmstrip-shell {
  position: relative;
  z-index: 20;
  min-height: 94px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  background: #111;
}
.photo-viewer__filmstrip {
  display: flex;
  gap: 6px;
  height: 94px;
  padding: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.photo-viewer__filmstrip button {
  position: relative;
  flex: 0 0 92px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #1b1b1b;
  cursor: pointer;
}
.photo-viewer__filmstrip button img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.62;
  filter: grayscale(0.25);
  transition: opacity 160ms ease, filter 160ms ease;
}
.photo-viewer__filmstrip button:hover, .photo-viewer__filmstrip button:focus-visible, .photo-viewer__filmstrip button.active {
  border-color: var(--yellow);
  outline: none;
}
.photo-viewer__filmstrip button:hover img, .photo-viewer__filmstrip button:focus-visible img, .photo-viewer__filmstrip button.active img {
  opacity: 1;
  filter: none;
}
.photo-viewer__filmstrip button.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--yellow);
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1180px) {
  .photo-research__advanced {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .photo-clear {
    min-height: 68px;
  }
  .photo-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .photo-results[data-view=contact] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .photo-results[data-view=index] .photo-result__button {
    grid-template-columns: 94px 105px minmax(190px, 1.1fr) minmax(170px, 1fr) 54px;
  }
}
@media (max-width: 920px) {
  .photos-hero {
    grid-template-columns: 1fr;
  }
  .photos-hero__copy {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .photos-hero__copy::after {
    right: auto;
    bottom: -1px;
    left: 12%;
    width: 34%;
    height: 1px;
  }
  .photos-hero__visual {
    min-height: 620px;
  }
  .photo-catalogue__intro {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .photo-research {
    grid-template-columns: 1fr;
  }
  .photo-research__search {
    border-right: 0;
  }
  .photo-results-heading {
    grid-template-columns: 1fr auto;
  }
  .photo-results-heading > p {
    grid-column: 1/-1;
    grid-row: 2;
    text-align: left;
  }
  .photo-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .photo-results[data-view=contact] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .photo-results[data-view=index] .photo-result__button {
    grid-template-columns: 90px 100px minmax(0, 1fr) 50px;
  }
  .photo-results[data-view=index] .photo-result__caption {
    display: none;
  }
  .photo-viewer__toolbar {
    grid-template-columns: 1fr auto;
  }
  .photo-viewer__tools {
    grid-column: 1/-1;
    grid-row: 2;
    min-height: 42px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 0;
    border-left: 0;
  }
  .photo-viewer__workspace {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 285px);
  }
}
@media (max-width: 700px) {
  .photos-hero__copy,
  .photo-catalogue {
    padding-right: 18px;
    padding-left: 18px;
  }
  .photo-table__contact-sheet {
    width: 84%;
  }
  .photo-research__advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .photo-results-heading {
    grid-template-columns: 1fr;
  }
  .photo-view-switch {
    width: 100%;
  }
  .photo-view-switch button {
    flex: 1 1 0;
    justify-content: center;
  }
  .photo-results,
  .photo-results[data-view=contact] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .photo-results[data-view=index] .photo-result__button {
    grid-template-columns: 84px minmax(0, 1fr) 44px;
  }
  .photo-results[data-view=index] .photo-result__meta {
    display: none;
  }
  .photo-viewer__workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .photo-viewer__information {
    position: absolute;
    top: 97px;
    right: 0;
    bottom: 94px;
    z-index: 30;
    width: min(86vw, 330px);
    box-shadow: -28px 0 60px rgba(0, 0, 0, 0.38);
  }
  .photo-viewer.information-hidden .photo-viewer__information {
    transform: translateX(100%);
  }
  .photo-viewer__image-wrap img {
    max-width: calc(100% - 84px);
    max-height: calc(100% - 42px);
  }
  .photo-viewer__nav {
    width: 38px;
    height: 64px;
  }
  .photo-viewer__nav--previous {
    left: 7px;
  }
  .photo-viewer__nav--next {
    right: 7px;
  }
  .photo-viewer__actions a {
    display: none;
  }
}
@media (max-width: 500px) {
  .photo-research__advanced {
    grid-template-columns: 1fr;
  }
  .photo-control {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .photo-results,
  .photo-results[data-view=contact] {
    grid-template-columns: 1fr;
  }
  .photo-results[data-view=contact] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .photo-results[data-view=contact] .photo-result__content {
    display: none;
  }
  .photo-view-switch button {
    font-size: 0;
  }
  .photo-view-switch button span {
    font-size: 15px;
  }
  .photo-viewer__identity em {
    display: none;
  }
  .photo-viewer__tools button {
    flex: 1 1 0;
    min-width: 0;
  }
  .photo-viewer__filmstrip button {
    flex-basis: 74px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .photos-page .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .photo-table__contact-sheet,
  .photo-table__scan {
    animation: none;
  }
  .photo-result__image img,
  .photo-viewer__image-wrap img {
    transition: none;
  }
}
/* =========================================================
   VIDEO PAGE
========================================================= */
.video-page {
  min-height: 100vh;
  background: linear-gradient(to right, transparent calc(50% - 0.5px), rgba(23, 23, 23, 0.005) 50%, transparent calc(50% + 0.5px)), var(--paper);
}
.video-page .reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 620ms ease, transform 620ms ease;
}
.video-page .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.video-viewer-open {
  overflow: hidden;
}

/* =========================================================
   HERO
========================================================= */
.video-hero {
  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  min-height: calc(100vh - var(--header-height));
  border-bottom: 1px solid var(--line);
}
.video-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(70px, 8vw, 132px) clamp(24px, 5vw, 84px);
  border-right: 1px solid var(--line);
}
.video-hero__copy::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 10%;
  width: 1px;
  height: 34%;
  background: var(--yellow);
}
.video-hero__copy h1 {
  max-width: 980px;
  margin: 24px 0 30px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(50px, 4.15vw, 112px);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.066em;
  text-transform: uppercase;
}
.video-hero__description {
  max-width: 670px;
  margin: 0;
  color: rgba(23, 23, 23, 0.7);
  font-size: clamp(12px, 1.15vw, 17px);
  line-height: 1.85;
  text-align: justify;
}
.video-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  margin-top: 42px;
}
.video-hero__visual {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: #ecece8;
}

.video-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  width: min(100%, 280px);
  padding: 13px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}
.video-text-link span:last-child {
  font-size: 16px;
  transition: color 200ms ease, transform 220ms ease;
}
.video-text-link:hover, .video-text-link:focus-visible {
  border-top-color: var(--yellow);
  outline: none;
}
.video-text-link:hover span:last-child, .video-text-link:focus-visible span:last-child {
  color: #9a8500;
  transform: translate(5px, -5px);
}

/* =========================================================
   HERO VIDEO MACHINE
========================================================= */
.video-machine {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(to right, rgba(23, 23, 23, 0.065) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.065) 1px, transparent 1px), #fff;
  background-size: 38px 38px;
}
.video-machine__grid {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(23, 23, 23, 0.18);
}
.video-machine__grid::before, .video-machine__grid::after {
  content: "";
  position: absolute;
  background: rgba(23, 23, 23, 0.17);
}
.video-machine__grid::before {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
}
.video-machine__grid::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}
.video-machine__register {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  left: clamp(20px, 3vw, 46px);
  z-index: 8;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  border-top: 1px solid rgba(23, 23, 23, 0.75);
  font-size: clamp(7px, 0.62vw, 9px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.video-machine__register--top {
  top: 7%;
}
.video-machine__register--bottom {
  bottom: 7%;
}
.video-machine__register span:last-child {
  color: var(--muted-ink);
}
.video-machine__screen {
  position: relative;
  width: min(77%, 720px);
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.08), transparent 34%), #171717;
  box-shadow: 18px 18px 0 rgba(23, 23, 23, 0.08), 36px 36px 0 rgba(23, 23, 23, 0.035);
  transform: rotate(-1deg);
  animation: video-monitor-drift 7.5s ease-in-out infinite;
}
.video-machine__screen-grid {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 8.333% 16.666%;
}
.video-machine__timecode {
  position: absolute;
  top: 7%;
  left: 6%;
  z-index: 4;
  color: var(--yellow);
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(8px, 0.8vw, 11px);
  font-weight: 800;
  letter-spacing: 0.14em;
}
.video-machine__frame-mark {
  position: absolute;
  z-index: 4;
  width: 32px;
  height: 32px;
  border-color: rgba(255, 255, 255, 0.76);
  border-style: solid;
}
.video-machine__frame-mark--tl {
  top: 12%;
  left: 8%;
  border-width: 1px 0 0 1px;
}
.video-machine__frame-mark--tr {
  top: 12%;
  right: 8%;
  border-width: 1px 1px 0 0;
}
.video-machine__frame-mark--bl {
  bottom: 18%;
  left: 8%;
  border-width: 0 0 1px 1px;
}
.video-machine__frame-mark--br {
  right: 8%;
  bottom: 18%;
  border-width: 0 1px 1px 0;
}
.video-machine__portrait {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 34%;
  height: 58%;
  transform: translateX(-50%);
}
.video-machine__portrait span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 34%;
  aspect-ratio: 0.84;
  border-radius: 48% 48% 42% 42%;
  background: #bdbdb8;
  transform: translateX(-50%);
}
.video-machine__portrait span::before {
  content: "";
  position: absolute;
  top: -8%;
  right: 4%;
  left: 4%;
  height: 35%;
  border-radius: 50% 50% 32% 32%;
  background: #767672;
}
.video-machine__portrait i {
  position: absolute;
  right: 9%;
  bottom: 0;
  left: 9%;
  height: 66%;
  border-radius: 48% 48% 5% 5%;
  background: #969691;
  clip-path: polygon(21% 0, 79% 0, 100% 100%, 0 100%);
}
.video-machine__portrait::after {
  content: "ZG / ARCHIVAL SIGNAL";
  position: absolute;
  right: 0;
  bottom: -17px;
  left: 0;
  color: rgba(255, 255, 255, 0.58);
  font-family: "JetBrains Mono", monospace;
  font-size: 6px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}
.video-machine__waveform {
  position: absolute;
  right: 7%;
  bottom: 7%;
  left: 7%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 11%;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.video-machine__waveform i {
  width: 2px;
  height: 22%;
  background: var(--yellow);
  transform-origin: center;
  animation: video-wave 1.35s ease-in-out infinite alternate;
}
.video-machine__waveform i:nth-child(3n) {
  animation-delay: -0.6s;
}
.video-machine__waveform i:nth-child(4n) {
  height: 58%;
  animation-delay: -0.9s;
}
.video-machine__waveform i:nth-child(5n) {
  height: 82%;
  animation-delay: -0.3s;
}
.video-machine__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 66px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(23, 23, 23, 0.28);
  color: var(--yellow);
  font-size: 18px;
  transform: translate(-50%, -50%);
}
.video-machine__scan {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 6;
  height: 2px;
  background: var(--yellow);
  box-shadow: 0 0 18px rgba(254, 221, 0, 0.78);
  animation: video-screen-scan 4.8s ease-in-out infinite;
}

@keyframes video-monitor-drift {
  0%, 100% {
    transform: rotate(-1deg) translate3d(0, 0, 0);
  }
  50% {
    transform: rotate(0.4deg) translate3d(0, -7px, 0);
  }
}
@keyframes video-screen-scan {
  0%, 10% {
    top: 4%;
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  90%, 100% {
    top: calc(96% - 2px);
    opacity: 0;
  }
}
@keyframes video-wave {
  from {
    transform: scaleY(0.35);
  }
  to {
    transform: scaleY(1.15);
  }
}
/* =========================================================
   SHARED SECTION HEADING
========================================================= */
.video-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(38px, 8vw, 130px);
  padding-bottom: clamp(42px, 5vw, 76px);
  border-bottom: 1px solid var(--line);
}
.video-section-heading h2 {
  max-width: 1000px;
  margin-top: 18px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(32px, 4vw, 70px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.video-section-heading > p {
  align-self: end;
  max-width: 640px;
  color: rgba(23, 23, 23, 0.68);
  font-size: clamp(11px, 1vw, 15px);
  line-height: 1.85;
  text-align: justify;
}
.video-section-heading > p strong {
  color: var(--ink);
  font-weight: 800;
}

/* =========================================================
   FEATURED RECORDINGS
========================================================= */
.video-featured {
  padding: clamp(76px, 8vw, 136px) clamp(18px, 4vw, 68px);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.video-featured__empty {
  margin: 34px 0 0;
  padding: 34px;
  border: 1px solid var(--line);
  background: #ecece8;
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.video-featured__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 34px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.video-feature-card {
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.video-feature-card--lead {
  grid-row: span 2;
  grid-column: span 2;
}
.video-feature-card--lead .video-feature-card__image {
  aspect-ratio: 16/10;
}
.video-feature-card--lead .video-feature-card__content {
  min-height: 250px;
  padding: clamp(20px, 2.5vw, 38px);
}
.video-feature-card--lead h3 {
  max-width: 900px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(26px, 2.8vw, 52px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.video-feature-card--lead p {
  max-width: 720px;
  font-size: clamp(9px, 0.9vw, 13px);
}
.video-feature-card__button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.video-feature-card__image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #171717;
}
.video-feature-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(0.28) contrast(1.03);
  transition: filter 260ms ease, transform 420ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.video-feature-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0 solid var(--yellow);
  pointer-events: none;
  transition: border-width 180ms ease;
}
.video-feature-card__content {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 180px;
  padding: 18px;
}
.video-feature-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted-ink);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.video-feature-card h3 {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 800;
  line-height: 1.35;
}
.video-feature-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  color: rgba(23, 23, 23, 0.62);
  font-size: 8px;
  line-height: 1.65;
}
.video-feature-card__footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(23, 23, 23, 0.16);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.video-feature-card__footer em,
.video-feature-card__footer i {
  font-style: normal;
}
.video-feature-card__footer em {
  color: var(--muted-ink);
}
.video-feature-card__footer i {
  color: #8f7b00;
  transition: transform 180ms ease;
}
.video-feature-card:hover .video-feature-card__image img, .video-feature-card:focus-within .video-feature-card__image img {
  filter: grayscale(0) contrast(1.06);
  transform: scale(1.025);
}
.video-feature-card:hover .video-feature-card__image::after, .video-feature-card:focus-within .video-feature-card__image::after {
  border-width: 1px;
}
.video-feature-card:hover .video-feature-card__footer i, .video-feature-card:focus-within .video-feature-card__footer i {
  transform: translate(4px, -4px);
}

.video-play-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: clamp(42px, 4vw, 68px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: rgba(23, 23, 23, 0.6);
  color: var(--yellow);
  font-size: clamp(11px, 1vw, 16px);
  transform: translate(-50%, -50%);
  transition: background 180ms ease, color 180ms ease, transform 220ms ease;
}

.video-duration {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 6;
  padding: 5px 7px;
  background: rgba(23, 23, 23, 0.86);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* =========================================================
   HISTORICAL PATHWAYS
========================================================= */
.video-pathways {
  padding: clamp(76px, 8vw, 136px) clamp(18px, 4vw, 68px);
  border-bottom: 1px solid var(--line);
  background: #ecece8;
}
.video-pathways__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}

.video-pathway {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 18px;
  min-height: 430px;
  padding: clamp(24px, 3vw, 44px);
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  text-align: left;
  transition: background 220ms ease, color 220ms ease;
}
.video-pathway::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: transparent;
  transition: background 180ms ease;
}
.video-pathway__number {
  color: #8f7b00;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1;
}
.video-pathway__label {
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--muted-ink);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.video-pathway strong {
  max-width: 440px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(26px, 2.6vw, 48px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.video-pathway p {
  max-width: 500px;
  margin: 0;
  color: rgba(23, 23, 23, 0.64);
  font-size: 9px;
  line-height: 1.8;
}
.video-pathway__footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.video-pathway__footer em,
.video-pathway__footer i {
  font-style: normal;
}
.video-pathway__footer em {
  color: var(--muted-ink);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.video-pathway__footer em b {
  color: var(--ink);
}
.video-pathway__footer i {
  font-size: 22px;
  transition: transform 180ms ease;
}
.video-pathway:hover, .video-pathway:focus-visible, .video-pathway.active {
  background: var(--ink);
  color: #fff;
  outline: none;
}
.video-pathway:hover::before, .video-pathway:focus-visible::before, .video-pathway.active::before {
  background: var(--yellow);
}
.video-pathway:hover .video-pathway__label,
.video-pathway:hover p,
.video-pathway:hover .video-pathway__footer em, .video-pathway:focus-visible .video-pathway__label,
.video-pathway:focus-visible p,
.video-pathway:focus-visible .video-pathway__footer em, .video-pathway.active .video-pathway__label,
.video-pathway.active p,
.video-pathway.active .video-pathway__footer em {
  color: rgba(255, 255, 255, 0.68);
}
.video-pathway:hover .video-pathway__footer, .video-pathway:focus-visible .video-pathway__footer, .video-pathway.active .video-pathway__footer {
  border-top-color: rgba(255, 255, 255, 0.24);
}
.video-pathway:hover .video-pathway__footer em b,
.video-pathway:hover .video-pathway__footer i, .video-pathway:focus-visible .video-pathway__footer em b,
.video-pathway:focus-visible .video-pathway__footer i, .video-pathway.active .video-pathway__footer em b,
.video-pathway.active .video-pathway__footer i {
  color: var(--yellow);
}
.video-pathway:hover .video-pathway__footer i, .video-pathway:focus-visible .video-pathway__footer i, .video-pathway.active .video-pathway__footer i {
  transform: translate(5px, 5px);
}
.video-pathway:disabled {
  cursor: default;
  opacity: 0.42;
}
.video-pathway:disabled:hover {
  background: #fff;
  color: var(--ink);
}
.video-pathway:disabled:hover::before {
  background: transparent;
}
.video-pathway:disabled:hover .video-pathway__label,
.video-pathway:disabled:hover p,
.video-pathway:disabled:hover .video-pathway__footer em {
  color: var(--muted-ink);
}
.video-pathway:disabled:hover .video-pathway__footer em b,
.video-pathway:disabled:hover .video-pathway__footer i {
  color: var(--ink);
}
.video-pathway:disabled:hover .video-pathway__footer i {
  transform: none;
}

/* =========================================================
   VIDEO CATALOGUE
========================================================= */
.video-catalogue {
  padding: clamp(76px, 8vw, 136px) clamp(18px, 4vw, 68px);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

/* =========================================================
   RESEARCH WORKSPACE
========================================================= */
.video-research {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  margin-top: 34px;
  border: 1px solid var(--line);
  background: #fff;
}
.video-research__search {
  padding: clamp(22px, 2.8vw, 38px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.video-research__search label {
  display: block;
  margin-bottom: 12px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.video-research__categories {
  padding: clamp(22px, 2.8vw, 38px);
  border-bottom: 1px solid var(--line);
}
.video-research__categories > p {
  margin-bottom: 12px;
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.video-research__advanced {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  min-width: 0;
}

.video-search-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.video-search-field input {
  min-width: 0;
  padding: 13px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(11px, 1vw, 14px);
}
.video-search-field input::-moz-placeholder {
  color: rgba(23, 23, 23, 0.38);
}
.video-search-field input::placeholder {
  color: rgba(23, 23, 23, 0.38);
}
.video-search-field span {
  padding-left: 18px;
  font-size: 22px;
}
.video-search-field:focus-within {
  border-bottom-color: var(--yellow);
  box-shadow: 0 2px 0 var(--yellow);
}

.video-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.video-category {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(23, 23, 23, 0.28);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 170ms ease, border-color 170ms ease;
}
.video-category span {
  color: var(--muted-ink);
}
.video-category:hover, .video-category:focus-visible {
  border-color: var(--ink);
  outline: none;
}
.video-category.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.video-category.active span {
  color: var(--yellow);
}

.video-control {
  min-width: 0;
  padding: 17px 16px 16px;
  border-right: 1px solid var(--line);
}
.video-control label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted-ink);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.video-control input,
.video-control select {
  width: 100%;
  min-width: 0;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid rgba(23, 23, 23, 0.35);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
}
.video-control input:focus,
.video-control select:focus {
  border-bottom-color: var(--yellow);
  box-shadow: 0 1px 0 var(--yellow);
}

.video-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 150px;
  padding: 16px 20px;
  border: 0;
  background: #ecece8;
  color: var(--ink);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}
.video-clear i {
  font-size: 17px;
  font-style: normal;
}
.video-clear:hover, .video-clear:focus-visible {
  background: var(--yellow);
  outline: none;
}

/* =========================================================
   RESULTS HEADING
========================================================= */
.video-results-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto) auto;
  align-items: end;
  gap: 30px;
  padding: clamp(56px, 7vw, 100px) 0 18px;
  border-bottom: 1px solid var(--line);
}
.video-results-heading h3 {
  margin-top: 11px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(26px, 3vw, 50px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.video-results-heading h3 span {
  color: #8f7b00;
}
.video-results-heading > p {
  align-self: end;
  color: var(--muted-ink);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
}

.video-view-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
}
.video-view-switch button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding: 8px 11px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.video-view-switch button:last-child {
  border-right: 0;
}
.video-view-switch button:hover, .video-view-switch button:focus-visible {
  background: #ecece8;
  outline: none;
}
.video-view-switch button.active {
  background: var(--ink);
  color: #fff;
}
.video-view-switch button.active span {
  color: var(--yellow);
}

.video-loading,
.video-empty {
  margin: 0;
  padding: 42px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* =========================================================
   VIDEO RESULTS — GALLERY
========================================================= */
.video-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}
.video-results[data-view=index] {
  display: block;
  border-left: 0;
}

.video-result {
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.video-result__button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.video-result__image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #171717;
}
.video-result__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(0.18) contrast(1.02);
  transition: filter 280ms ease, transform 420ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.video-result__image::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0 solid var(--yellow);
  pointer-events: none;
  transition: border-width 180ms ease;
}
.video-result__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px), #171717;
  background-size: 24px 24px;
  color: rgba(255, 255, 255, 0.26);
}
.video-result__fallback b {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(30px, 4vw, 66px);
  font-weight: 400;
}
.video-result__fallback i {
  color: var(--yellow);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.video-result__overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 11px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.video-result__overlay span:last-child {
  color: var(--yellow);
}
.video-result__content {
  display: grid;
  gap: 11px;
  min-height: 176px;
  padding: 16px 16px 19px;
}
.video-result__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted-ink);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.video-result h4 {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(10px, 0.95vw, 14px);
  font-weight: 800;
  line-height: 1.4;
}
.video-result__caption {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  color: rgba(23, 23, 23, 0.62);
  font-size: 8px;
  line-height: 1.6;
}
.video-result__index-meta, .video-result__index-arrow {
  display: none;
}
.video-result:hover .video-result__image img, .video-result:focus-within .video-result__image img {
  filter: grayscale(0) contrast(1.06);
  transform: scale(1.025);
}
.video-result:hover .video-result__image::after, .video-result:focus-within .video-result__image::after {
  border-width: 1px;
}
.video-result:hover .video-play-mark, .video-result:focus-within .video-play-mark {
  background: var(--yellow);
  color: var(--ink);
  transform: translate(-50%, -50%) scale(1.07);
}

/* =========================================================
   INDEX VIEW
========================================================= */
.video-results[data-view=index] .video-result {
  border-right: 0;
}
.video-results[data-view=index] .video-result__button {
  display: grid;
  grid-template-columns: 180px 145px minmax(220px, 1.15fr) minmax(230px, 1fr) minmax(180px, 0.85fr) 64px;
  align-items: stretch;
}
.video-results[data-view=index] .video-result__image {
  min-height: 108px;
  aspect-ratio: auto;
  border-right: 1px solid var(--line);
}
.video-results[data-view=index] .video-result__image .video-play-mark {
  width: 38px;
  font-size: 9px;
}
.video-results[data-view=index] .video-result__overlay {
  display: none;
}
.video-results[data-view=index] .video-result__content {
  display: contents;
}
.video-results[data-view=index] .video-result__meta {
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 16px;
  border-right: 1px solid var(--line);
}
.video-results[data-view=index] .video-result h4 {
  display: flex;
  align-items: center;
  padding: 16px;
  border-right: 1px solid var(--line);
}
.video-results[data-view=index] .video-result__caption {
  display: flex;
  align-items: center;
  padding: 16px;
  border-right: 1px solid var(--line);
}
.video-results[data-view=index] .video-result__index-meta {
  display: flex;
  align-items: center;
  padding: 16px;
  border-right: 1px solid var(--line);
  color: var(--muted-ink);
  font-size: 7px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.video-results[data-view=index] .video-result__index-arrow {
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 18px;
  transition: background 180ms ease, color 180ms ease;
}
.video-results[data-view=index] .video-result:hover .video-result__index-arrow,
.video-results[data-view=index] .video-result:focus-within .video-result__index-arrow {
  background: var(--yellow);
}

/* =========================================================
   VIDEO VIEWER
========================================================= */
.video-viewer[hidden] {
  display: none;
}

.video-viewer {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: #090909;
  color: #fff;
}
.video-viewer__shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  background: #090909;
}
.video-viewer__toolbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: stretch;
  min-height: 54px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.26);
  background: #111;
}
.video-viewer__identity, .video-viewer__actions, .video-viewer__tools {
  display: flex;
  align-items: stretch;
}
.video-viewer__identity {
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 0 17px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.video-viewer__identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-viewer__identity em {
  color: rgba(255, 255, 255, 0.48);
  font-style: normal;
  white-space: nowrap;
}
.video-viewer__tools {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.video-viewer__tools button {
  min-width: 50px;
  padding: 0 13px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
}
.video-viewer__tools button:last-child {
  border-right: 0;
}
.video-viewer__tools button:hover, .video-viewer__tools button:focus-visible, .video-viewer__tools button[aria-pressed=true] {
  background: var(--yellow);
  color: var(--ink);
  outline: none;
}
.video-viewer__actions {
  justify-content: flex-end;
}
.video-viewer__actions a,
.video-viewer__actions button {
  display: grid;
  place-items: center;
  min-width: 58px;
  padding: 0 15px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
}
.video-viewer__actions a:hover, .video-viewer__actions a:focus-visible,
.video-viewer__actions button:hover,
.video-viewer__actions button:focus-visible {
  background: var(--yellow);
  color: var(--ink);
  outline: none;
}
.video-viewer__actions a.is-disabled,
.video-viewer__actions button.is-disabled {
  pointer-events: none;
  opacity: 0.38;
}
.video-viewer__actions button:last-child {
  min-width: 58px;
  font-size: 22px;
}
.video-viewer__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 24vw);
  min-height: 0;
}
.video-viewer__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px), #090909;
  background-size: 44px 44px;
}
.video-viewer__player-wrap {
  position: relative;
  width: min(84%, 1240px);
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: #000;
  box-shadow: 0 0 0 1px rgba(254, 221, 0, 0.08);
}
.video-viewer__player {
  position: absolute;
  inset: 0;
}
.video-viewer__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-viewer__loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 30px;
  background: #111;
  color: rgba(255, 255, 255, 0.6);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}
.video-viewer__nav {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 48px;
  height: 76px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(9, 9, 9, 0.76);
  color: #fff;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  transform: translateY(-50%);
  transition: background 180ms ease, color 180ms ease;
}
.video-viewer__nav--previous {
  left: 18px;
}
.video-viewer__nav--next {
  right: 18px;
}
.video-viewer__nav:hover, .video-viewer__nav:focus-visible {
  background: var(--yellow);
  color: var(--ink);
  outline: none;
}
.video-viewer__nav:disabled {
  cursor: default;
  opacity: 0.25;
}
.video-viewer__information {
  min-width: 0;
  overflow-y: auto;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  background: #111;
  transition: opacity 220ms ease, transform 220ms ease;
}
.video-viewer__information-header {
  display: grid;
  gap: 12px;
  padding: 24px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.video-viewer__information-header span {
  color: var(--yellow);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.video-viewer__information-header strong {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.video-viewer__description {
  margin: 0;
  padding: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
  line-height: 1.75;
}
.video-viewer__metadata {
  margin: 0;
}
.video-viewer__metadata div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.video-viewer__metadata dt {
  color: rgba(255, 255, 255, 0.4);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.video-viewer__metadata dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 8px;
  line-height: 1.6;
}
.video-viewer__hint {
  margin: 0;
  padding: 20px 22px 28px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 7px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.video-viewer__filmstrip-shell {
  min-height: 92px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: #111;
}
.video-viewer__filmstrip {
  display: flex;
  gap: 1px;
  height: 92px;
  overflow-x: auto;
  overflow-y: hidden;
}
.video-viewer__filmstrip button {
  position: relative;
  flex: 0 0 145px;
  height: 92px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  background: #171717;
  color: #fff;
  cursor: pointer;
}
.video-viewer__filmstrip button img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(0.55) brightness(0.62);
  transition: filter 180ms ease;
}
.video-viewer__filmstrip button > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--yellow);
}
.video-viewer__filmstrip button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: transparent;
}
.video-viewer__filmstrip button:hover, .video-viewer__filmstrip button:focus-visible, .video-viewer__filmstrip button.active {
  outline: none;
}
.video-viewer__filmstrip button:hover img, .video-viewer__filmstrip button:focus-visible img, .video-viewer__filmstrip button.active img {
  filter: grayscale(0) brightness(1);
}
.video-viewer__filmstrip button.active::after {
  background: var(--yellow);
}
.video-viewer.information-hidden .video-viewer__workspace {
  grid-template-columns: minmax(0, 1fr) 0;
}
.video-viewer.information-hidden .video-viewer__information {
  overflow: hidden;
  opacity: 0;
  transform: translateX(30px);
  pointer-events: none;
}

/* =========================================================
   VIDEO & VOICE — RECORD TYPE REGISTER
========================================================= */
.video-media-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 6px 0 22px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.video-media-type {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  min-height: 72px;
  padding: 29px 14px 12px;
  border: 0;
  border-right: 1px solid rgba(23, 23, 23, 0.28);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}
.video-media-type:last-child {
  border-right: 0;
}
.video-media-type::before {
  position: absolute;
  top: 10px;
  left: 14px;
  color: rgba(23, 23, 23, 0.42);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.video-media-type:nth-child(1)::before {
  content: "01 / ALL RECORDS";
}
.video-media-type:nth-child(2)::before {
  content: "02 / MOVING IMAGE";
}
.video-media-type:nth-child(3)::before {
  content: "03 / RECORDED VOICE";
}
.video-media-type::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.video-media-type span {
  color: var(--muted-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}
.video-media-type:hover, .video-media-type:focus-visible {
  background: #ecece8;
  outline: none;
}
.video-media-type:hover::after, .video-media-type:focus-visible::after {
  transform: scaleX(1);
}
.video-media-type.active {
  background: var(--ink);
  color: #fff;
}
.video-media-type.active::before {
  color: rgba(255, 255, 255, 0.46);
}
.video-media-type.active span {
  color: var(--yellow);
}
.video-media-type.active::after {
  transform: scaleX(1);
}

/* =========================================================
   AUDIO / VOICE RECORD VISUALS
========================================================= */
.video-play-mark--audio {
  color: var(--yellow);
  font-size: clamp(18px, 1.8vw, 28px);
}

.video-result__fallback--audio {
  background: repeating-linear-gradient(90deg, transparent 0, transparent 17px, rgba(254, 221, 0, 0.08) 18px, transparent 19px), linear-gradient(to bottom, rgba(255, 255, 255, 0.06), transparent), #171717;
}
.video-result__fallback--audio b {
  color: rgba(255, 255, 255, 0.22);
}
.video-result__fallback--audio i {
  color: var(--yellow);
}

/* =========================================================
   VIEWER — VIDEO + AUDIO
========================================================= */
.video-viewer__player iframe,
.video-viewer__player video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.video-viewer__player video {
  -o-object-fit: contain;
     object-fit: contain;
}

.video-viewer__audio-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  padding: clamp(28px, 5vw, 72px);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px), #111;
  background-size: 38px 38px;
}
.video-viewer__audio-shell audio {
  width: 100%;
  max-width: 780px;
  justify-self: center;
}

.video-viewer__audio-identity {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  min-height: 0;
  text-align: center;
}
.video-viewer__audio-identity span {
  color: var(--yellow);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.video-viewer__audio-identity strong {
  color: rgba(255, 255, 255, 0.12);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(80px, 14vw, 220px);
  font-weight: 400;
  line-height: 0.72;
}
.video-viewer__audio-identity i {
  color: rgba(255, 255, 255, 0.48);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.video-viewer__audio-identity::before, .video-viewer__audio-identity::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18%;
  height: 1px;
  background: var(--yellow);
}
.video-viewer__audio-identity::before {
  left: 3%;
}
.video-viewer__audio-identity::after {
  right: 3%;
}

/* =========================================================
   VIDEO & VOICE RESPONSIVE ADDITIONS
========================================================= */
@media (max-width: 700px) {
  .video-media-types {
    grid-template-columns: 1fr;
  }
  .video-media-type {
    min-height: 60px;
    border-right: 0;
    border-bottom: 1px solid rgba(23, 23, 23, 0.22);
  }
  .video-media-type:last-child {
    border-bottom: 0;
  }
  .video-viewer__audio-shell {
    padding: 24px 18px;
  }
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1180px) {
  .video-featured__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .video-feature-card--lead {
    grid-column: span 2;
    grid-row: auto;
  }
  .video-research__advanced {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .video-clear {
    min-height: 68px;
  }
  .video-results[data-view=index] .video-result__button {
    grid-template-columns: 160px 130px minmax(220px, 1fr) minmax(220px, 1fr) 64px;
  }
  .video-results[data-view=index] .video-result__index-meta {
    display: none;
  }
}
@media (max-width: 920px) {
  .video-hero {
    grid-template-columns: 1fr;
  }
  .video-hero__copy {
    min-height: 660px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .video-hero__copy::after {
    right: auto;
    bottom: -1px;
    left: 8%;
    width: 34%;
    height: 1px;
  }
  .video-hero__visual {
    min-height: 620px;
  }
  .video-section-heading {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .video-section-heading > p {
    align-self: auto;
  }
  .video-pathways__grid {
    grid-template-columns: 1fr;
  }
  .video-pathway {
    min-height: 330px;
  }
  .video-research {
    grid-template-columns: 1fr;
  }
  .video-research__search {
    border-right: 0;
  }
  .video-research__advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .video-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .video-results-heading {
    grid-template-columns: 1fr auto;
  }
  .video-results-heading > p {
    grid-column: 1/-1;
    grid-row: 2;
    text-align: left;
  }
  .video-results[data-view=index] .video-result__button {
    grid-template-columns: 145px 120px minmax(220px, 1fr) 64px;
  }
  .video-results[data-view=index] .video-result__caption {
    display: none;
  }
  .video-viewer__workspace {
    grid-template-columns: 1fr;
  }
  .video-viewer__information {
    position: absolute;
    top: 54px;
    right: 0;
    bottom: 92px;
    z-index: 30;
    width: min(390px, 88vw);
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
  }
  .video-viewer.information-hidden .video-viewer__information {
    transform: translateX(100%);
  }
  .video-viewer__player-wrap {
    width: min(86%, 1050px);
  }
}
@media (max-width: 700px) {
  .video-hero__copy {
    padding: 68px 22px;
  }
  .video-hero__copy h1 {
    font-size: clamp(44px, 14vw, 72px);
  }
  .video-hero__visual {
    min-height: 520px;
  }
  .video-machine__screen {
    width: 86%;
  }
  .video-machine__register {
    right: 20px;
    left: 20px;
  }
  .video-featured,
  .video-pathways,
  .video-catalogue {
    padding-right: 16px;
    padding-left: 16px;
  }
  .video-featured__grid {
    grid-template-columns: 1fr;
  }
  .video-feature-card--lead {
    grid-column: auto;
  }
  .video-feature-card--lead h3 {
    font-size: clamp(25px, 8vw, 42px);
  }
  .video-research__advanced {
    grid-template-columns: 1fr 1fr;
  }
  .video-control:nth-child(2n) {
    border-right: 0;
  }
  .video-clear {
    grid-column: 1/-1;
  }
  .video-results {
    grid-template-columns: 1fr;
  }
  .video-results-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .video-results-heading > p {
    grid-column: auto;
    grid-row: auto;
  }
  .video-view-switch {
    justify-self: start;
  }
  .video-results[data-view=index] .video-result__button {
    grid-template-columns: 118px minmax(0, 1fr) 52px;
  }
  .video-results[data-view=index] .video-result__meta {
    display: none;
  }
  .video-results[data-view=index] .video-result h4 {
    border-right: 1px solid var(--line);
  }
  .video-viewer__toolbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .video-viewer__identity {
    padding: 0 10px;
  }
  .video-viewer__identity em {
    display: none;
  }
  .video-viewer__tools button {
    min-width: 44px;
    padding: 0 10px;
  }
  .video-viewer__actions a {
    display: none;
  }
  .video-viewer__player-wrap {
    width: calc(100% - 26px);
  }
  .video-viewer__nav {
    top: auto;
    bottom: 12px;
    width: 48px;
    height: 48px;
    transform: none;
  }
  .video-viewer__nav--previous {
    left: 12px;
  }
  .video-viewer__nav--next {
    right: 12px;
  }
  .video-viewer__filmstrip-shell,
  .video-viewer__filmstrip {
    height: 74px;
    min-height: 74px;
  }
  .video-viewer__filmstrip button {
    flex-basis: 118px;
    height: 74px;
  }
  .video-viewer__information {
    top: 54px;
    bottom: 74px;
  }
}
@media (max-width: 500px) {
  .video-hero__actions {
    display: grid;
  }
  .video-text-link {
    width: 100%;
  }
  .video-machine__portrait {
    width: 46%;
  }
  .video-pathway {
    min-height: 300px;
  }
  .video-research__advanced {
    grid-template-columns: 1fr;
  }
  .video-control {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .video-clear {
    grid-column: auto;
  }
  .video-results[data-view=index] .video-result__button {
    grid-template-columns: 104px minmax(0, 1fr) 46px;
  }
  .video-results[data-view=index] .video-result__image {
    min-height: 88px;
  }
  .video-results[data-view=index] .video-result h4 {
    padding: 12px;
    font-size: 9px;
  }
  .video-viewer__information {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .video-page .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .video-machine__screen,
  .video-machine__scan,
  .video-machine__waveform i {
    animation: none;
  }
  .video-feature-card__image img,
  .video-result__image img,
  .video-play-mark,
  .video-pathway,
  .video-viewer__information {
    transition: none;
  }
}
/* =========================================================
   DIVIDER SPACING WRAPPER
========================================================= */
[data-section-divider] {
  --divider-space-bg: #ffffff;
  display: block;
  width: 100%;
  padding-block: clamp(22px, 2.5vw, 38px);
  background: var(--divider-space-bg);
}

html[data-theme=dark] [data-section-divider] {
  --divider-space-bg: #171717;
}

/* =========================================================
   UNIVERSAL SECTION DIVIDER
========================================================= */
.section-divider {
  --divider-bg: #ffffff;
  --divider-ink: #171717;
  --divider-muted: rgba(23, 23, 23, 0.42);
  --divider-line: rgba(23, 23, 23, 0.22);
  --divider-tick: rgba(23, 23, 23, 0.34);
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(60px, 1fr) max-content;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  width: 100%;
  min-height: 52px;
  padding: 0 clamp(24px, 5vw, 82px);
  overflow: hidden;
  border-top: 1px solid var(--divider-line);
  border-bottom: 1px solid var(--divider-line);
  background: var(--divider-bg);
  color: var(--divider-ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color 220ms ease, color 220ms ease;
}

/* =========================================================
   FROM
========================================================= */
.section-divider__from {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--divider-muted);
  white-space: nowrap;
}

/* =========================================================
   TO
========================================================= */
.section-divider__to {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--divider-ink);
  font-size: inherit;
  font-weight: 700;
  white-space: nowrap;
  transition: color 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section-divider__to::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  background: #fedd00;
  vertical-align: 1px;
}

/* =========================================================
   LINE
========================================================= */
.section-divider__line {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: var(--divider-line);
}

.section-divider__line i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: clamp(38px, 5vw, 76px);
  height: 1px;
  background: #fedd00;
  animation: section-divider-signal 5.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* =========================================================
   REGISTRATION TICKS
========================================================= */
.section-divider::before,
.section-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 9px;
  background: var(--divider-tick);
  transform: translateY(-50%);
}

.section-divider::before {
  left: clamp(12px, 2vw, 32px);
}

.section-divider::after {
  right: clamp(12px, 2vw, 32px);
}

/* =========================================================
   DARK THEME
========================================================= */
html[data-theme=dark] .section-divider {
  --divider-bg: #171717;
  --divider-ink: #ffffff;
  --divider-muted: rgba(255, 255, 255, 0.46);
  --divider-line: rgba(255, 255, 255, 0.22);
  --divider-tick: rgba(255, 255, 255, 0.38);
}

/* =========================================================
   HOVER
========================================================= */
@media (hover: hover) {
  .section-divider:hover .section-divider__to {
    transform: translateX(3px);
  }
  .section-divider:hover .section-divider__line i {
    animation-duration: 2.8s;
  }
}
/* =========================================================
   ANIMATION
========================================================= */
@keyframes section-divider-signal {
  0% {
    left: 0;
    transform: translateX(-110%);
  }
  42% {
    left: 100%;
    transform: translateX(0);
  }
  58% {
    left: 100%;
    transform: translateX(0);
  }
  100% {
    left: 0;
    transform: translateX(-110%);
  }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 820px) {
  .section-divider {
    min-height: 48px;
    padding: 0 24px;
    gap: 14px;
    font-size: 6px;
  }
  .section-divider::before,
  .section-divider::after {
    display: none;
  }
  .section-divider__to::before {
    width: 4px;
    height: 4px;
    margin-right: 7px;
  }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 560px) {
  .section-divider {
    grid-template-columns: max-content minmax(24px, 1fr) max-content;
    min-height: 44px;
    padding: 0 16px;
    gap: 9px;
    font-size: 5.5px;
    letter-spacing: 0.11em;
  }
  .section-divider__from {
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .section-divider__to {
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .section-divider__to::before {
    display: none;
  }
  .section-divider__line i {
    width: 30px;
  }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .section-divider__line i {
    left: 50%;
    animation: none;
    transform: translateX(-50%);
  }
  .section-divider__to {
    transition: none;
  }
}/*# sourceMappingURL=styles.css.map */