:root {
  color-scheme: dark;
  --bg: #070919;
  --ink: #f7f2ee;
  --muted: rgba(247, 242, 238, .74);
  --faint: rgba(247, 242, 238, .50);
  --line: rgba(247, 242, 238, .22);
  --line-strong: rgba(247, 242, 238, .38);
  --panel: rgba(6, 7, 15, .76);
  --panel-strong: rgba(7, 8, 18, .94);
  --accent: #ff6b94;
  --accent-soft: rgba(255, 107, 148, .18);
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { background: var(--bg); }
body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
button, a { font: inherit; }

.site-page {
  position: relative;
  height: 100svh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 151, 91, .075), transparent 34%),
    linear-gradient(135deg, #060713 0%, #0b0b17 57%, #100a08 100%);
}
.site-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .10;
  background-image: radial-gradient(rgba(255,255,255,.10) .5px, transparent .5px);
  background-size: 4px 4px;
}

/* Etusivun pääkuva: Kari Kailan alkuperäinen protuberanssikuva. */
.site-page--landing {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.site-page--landing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("kaila-lugano-1972.jpg") center / cover no-repeat;
  filter: saturate(.94) contrast(1.03) brightness(.92);
}
.site-page--landing .page-veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,4,18,.86) 0%, rgba(5,5,15,.50) 41%, rgba(6,4,6,.10) 100%),
    linear-gradient(0deg, rgba(4,5,16,.82) 0%, transparent 43%);
}

.site-header,
.site-footer,
.landing-main,
.subpage-main {
  width: min(calc(100% - 3rem), 94rem);
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(.62rem, 1.55vh, .98rem) 0;
  border-bottom: 1px solid var(--line);
}
.brand {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 1.9vw, 1.9rem);
  font-style: italic;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 1.6vw, 1.35rem);
  white-space: nowrap;
}
.site-nav a,
.site-nav button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  font-size: clamp(.7rem, .88vw, .84rem);
}
.site-nav a:hover,
.site-nav button:hover { color: var(--ink); }

/* ETUSIVU */
.landing-main {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(28rem, .88fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: stretch;
  padding: clamp(.7rem, 1.7vh, 1.2rem) 0 clamp(.35rem, 1vh, .65rem);
}
.landing-copy {
  align-self: center;
  max-width: 45rem;
  padding-bottom: clamp(1rem, 8vh, 4.8rem);
}
.eyebrow {
  margin: 0 0 clamp(.55rem, 1.1vh, .8rem);
  color: var(--accent);
  font-size: clamp(.58rem, .68vw, .7rem);
  font-weight: 760;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.landing-copy h1,
.subpage-copy h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .94;
  text-wrap: balance;
}
.landing-copy h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 5.95vw, 6.35rem);
}
.landing-copy h1 em {
  color: #ff8eae;
  font-weight: 400;
}
.landing-intro {
  max-width: 35rem;
  margin: clamp(.72rem, 1.4vh, 1rem) 0 0;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.82rem, 1vw, .96rem);
  line-height: 1.48;
}
.landing-actions {
  display: flex;
  gap: .55rem;
  margin-top: clamp(.8rem, 1.7vh, 1.15rem);
}
.button {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  padding: .55rem .95rem;
  border: 1px solid rgba(247,242,238,.34);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.button:hover { transform: translateY(-1px); }
.button--primary { border-color: var(--ink); background: var(--ink); color: #090a13; }
.button--primary:hover { background: #fff; }
.button--quiet { background: rgba(4,5,13,.30); backdrop-filter: blur(7px); }
.button--quiet:hover { border-color: rgba(247,242,238,.68); background: rgba(4,5,13,.56); }

/* Kolme pääaihetta oikeassa alakulmassa – MV, väri hoverissa. */
.topic-gallery {
  align-self: end;
  justify-self: end;
  width: min(100%, 39rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.55rem, .8vw, .8rem);
  padding-bottom: clamp(.2rem, 1.1vh, .7rem);
}
.topic-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
  overflow: hidden;
  border: 2px solid rgba(247,242,238,.66);
  background: rgba(8,8,15,.52);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 .7rem 2.2rem rgba(0,0,0,.16);
  isolation: isolate;
  animation: topic-in 520ms cubic-bezier(.2,.72,.2,1) both;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.topic-tile:nth-child(2) { animation-delay: 90ms; }
.topic-tile:nth-child(3) { animation-delay: 180ms; }
.topic-tile img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) saturate(.02) contrast(1.08) brightness(.70);
  transform: scale(1.015);
  transition: filter 360ms ease, transform 520ms cubic-bezier(.2,.72,.2,1);
}
.topic-tile:nth-child(1) img { object-position: 57% center; }
.topic-tile:nth-child(2) img { object-position: center 39%; }
.topic-tile:nth-child(3) img { object-position: center 17%; }
.topic-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(0deg, rgba(4,5,12,.93) 0%, rgba(4,5,12,.35) 48%, rgba(4,5,12,.08) 100%),
    linear-gradient(90deg, rgba(4,5,12,.18), transparent 62%);
  transition: opacity 280ms ease;
}
.topic-tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease;
}
.topic-tile:hover,
.topic-tile:focus-visible {
  border-color: rgba(255,107,148,.96);
  transform: translateY(-4px);
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.30);
}
.topic-tile:hover img,
.topic-tile:focus-visible img {
  filter: grayscale(0) saturate(.98) contrast(1.04) brightness(.90);
  transform: scale(1.06);
}
.topic-tile:hover::before,
.topic-tile:focus-visible::before { opacity: .71; }
.topic-tile:hover::after,
.topic-tile:focus-visible::after { transform: scaleX(1); }
.topic-tile__number,
.topic-tile__title,
.topic-tile__arrow,
.topic-tile__credit { position: absolute; z-index: 2; }
.topic-tile__number {
  top: .58rem;
  left: .62rem;
  color: rgba(247,242,238,.62);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.topic-tile__title {
  left: .62rem;
  right: 1.9rem;
  bottom: .62rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.78rem, 1.02vw, 1rem);
  line-height: 1.04;
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(0,0,0,.8);
}
.topic-tile__credit {
  left: .62rem;
  right: 2rem;
  bottom: .40rem;
  color: rgba(247,242,238,.66);
  font-size: .43rem;
  line-height: 1;
  opacity: .9;
}
.topic-tile:has(.topic-tile__credit) .topic-tile__title { bottom: 1.03rem; }
.topic-tile__arrow {
  right: .58rem;
  bottom: .53rem;
  color: var(--accent);
  font-size: .9rem;
  transition: transform 220ms ease;
}
.topic-tile:hover .topic-tile__arrow,
.topic-tile:focus-visible .topic-tile__arrow { transform: translate(2px,-2px); }
@keyframes topic-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.2rem;
  padding: .42rem 0 max(.48rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: rgba(247,242,238,.58);
  font-size: .54rem;
  line-height: 1.32;
}
.site-footer p { margin: 0; }
.site-footer a { text-underline-offset: .18rem; }
.editor-credit { max-width: 25rem; }
.hero-image-credit {
  display: grid;
  gap: .08rem;
  max-width: 52rem;
  text-align: right;
}
.hero-image-credit p:last-child { color: rgba(247,242,238,.46); }

/* ALASIVUT */
/* ALASIVUT */
.subpage-main {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(.45rem, 1vh, .72rem);
  padding: clamp(.42rem, 1vh, .7rem) 0 clamp(.34rem, .75vh, .55rem);
}
.article-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}
.article-head h1 {
  margin: 0;
  max-width: 18ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 4.65vw, 5.05rem);
  font-weight: 400;
  letter-spacing: -.046em;
  line-height: .92;
  text-wrap: balance;
}
.byline {
  flex: 0 0 auto;
  margin: 0 0 .14rem;
  color: rgba(247,242,238,.58);
  font-size: clamp(.72rem, .82vw, .84rem);
}
.byline strong { color: rgba(247,242,238,.88); font-weight: 650; }

.article-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(28rem, .88fr);
  gap: clamp(1.7rem, 3vw, 3.3rem);
  align-items: stretch;
}
.article-copy {
  min-width: 0;
  align-self: start;
  display: grid;
  gap: clamp(.65rem, 1.1vh, .9rem);
}
.article-columns {
  max-width: 62rem;
  column-count: 2;
  column-gap: clamp(1.7rem, 2.6vw, 2.7rem);
  column-rule: 1px solid rgba(247,242,238,.14);
}
.article-columns p {
  margin: 0;
  break-inside: avoid;
  color: rgba(247,242,238,.88);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: clamp(1.02rem, 1.08vw, 1.15rem);
  line-height: 1.68;
  text-align: justify;
  text-align-last: left;
  text-wrap: pretty;
  hyphens: auto;
}
.article-columns p + p { margin-top: 1rem; }
.article-columns strong { color: var(--ink); font-weight: 720; }
.inline-link {
  color: #ffd0dc;
  font-weight: 700;
  text-decoration-color: rgba(255,107,148,.82);
  text-decoration-thickness: 1px;
  text-underline-offset: .18rem;
}
.inline-link:hover { color: #fff; text-decoration-color: var(--accent); }

.feature-figure {
  position: relative;
  align-self: stretch;
  justify-self: end;
  width: min(100%, 38rem);
  min-height: 0;
  height: min(58vh, 38rem);
  margin: clamp(.45rem, 1.8vh, 1.15rem) 0 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(9,9,16,.64);
  box-shadow: 0 1.2rem 3.4rem rgba(0,0,0,.17);
}
.feature-figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.feature-figure--kaila img { object-position: 58% 42%; }
.feature-figure--eclipse img { object-position: center 41%; }
.feature-figure--cover {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2vw, 1.6rem);
  background: radial-gradient(circle at 70% 25%, rgba(255,155,91,.08), transparent 36%), rgba(8,8,15,.72);
}
.feature-figure--cover img {
  width: auto;
  max-width: 84%;
  height: 100%;
  object-fit: contain;
}
.feature-figure::after {
  content: "";
  position: absolute;
  inset: 56% 0 0;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(2,3,10,.82));
}
.feature-figure figcaption {
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: .72rem;
  z-index: 2;
  padding-top: .5rem;
  color: rgba(247,242,238,.94);
  font-size: clamp(.68rem, .76vw, .78rem);
  line-height: 1.4;
  text-shadow: 0 1px 12px rgba(0,0,0,.98);
}
.feature-figure figcaption::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2.15rem;
  height: 2px;
  background: var(--accent);
}
.feature-figure figcaption a { color: inherit; text-underline-offset: .15rem; }

.source-card {
  max-width: 58rem;
  padding: .68rem .82rem .72rem;
  border-left: 2px solid var(--accent);
  background: rgba(255,107,148,.055);
  color: rgba(247,242,238,.74);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: clamp(.72rem, .78vw, .82rem);
  line-height: 1.45;
}
.source-card__label {
  display: block;
  margin-bottom: .35rem;
  color: var(--accent);
  font-size: .64rem;
  font-weight: 760;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.source-card q {
  display: block;
  margin: 0 0 .38rem;
  color: rgba(247,242,238,.92);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.9rem, 1vw, 1.02rem);
  line-height: 1.38;
}
.source-card p { margin: 0; }
.source-card a { color: #ffd0dc; font-weight: 650; text-underline-offset: .15rem; }

.timeline-wrap {
  min-width: 0;
  padding-top: .34rem;
}
.timeline-note {
  margin: 0 0 .42rem;
  color: rgba(247,242,238,.60);
  font-size: clamp(.72rem, .8vw, .82rem);
  line-height: 1.38;
}
.timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.timeline-item {
  position: relative;
  min-width: 0;
  padding: .78rem .82rem 0;
}
.timeline-item::before {
  content: "";
  position: absolute;
  top: -.34rem;
  left: .82rem;
  width: .64rem;
  height: .64rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,107,148,.13);
}
.timeline-item::after {
  content: "";
  position: absolute;
  top: -.025rem;
  left: 1.46rem;
  right: 0;
  height: 1px;
  background: rgba(255,107,148,.43);
}
.timeline-item:last-child::after { display: none; }
.timeline-item strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.08vw, 1.12rem);
  font-weight: 400;
}
.timeline-item span {
  display: block;
  margin-top: .24rem;
  color: rgba(247,242,238,.76);
  font-size: clamp(.76rem, .82vw, .86rem);
  line-height: 1.42;
}
.timeline-item a {
  color: #ffd0dc;
  font-weight: 700;
  text-decoration-color: rgba(255,107,148,.7);
  text-underline-offset: .13rem;
}
.timeline-item a:hover { color: #fff; }
.timeline-wrap--scroll { position: relative; padding-bottom: .18rem; }
.timeline--scroll {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 21rem);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: .54rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,107,148,.68) rgba(247,242,238,.08);
}
.timeline--scroll .timeline-item { scroll-snap-align: start; }
.timeline-hint {
  margin: .1rem .12rem 0 auto;
  color: rgba(247,242,238,.50);
  font-size: .64rem;
  text-align: right;
}

/* Dialogit etusivulla */
.info-dialog {
  width: min(46rem, calc(100% - 2rem));
  max-height: min(82svh, 42rem);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--panel-strong);
  color: var(--ink);
  box-shadow: 0 2rem 6rem rgba(0,0,0,.55);
}
.info-dialog::backdrop { background: rgba(1,2,10,.72); backdrop-filter: blur(8px); }
.info-dialog__inner { padding: clamp(1rem, 3vw, 2rem); }
.info-dialog header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:.85rem; border-bottom:1px solid var(--line); }
.info-dialog h2, .info-dialog h3 { margin:0; }
.info-dialog h2 { font-family: Georgia, "Times New Roman", serif; font-size:clamp(1.7rem,3vw,2.5rem); font-weight:400; }
.info-dialog h3 { margin-bottom:.35rem; color:var(--accent); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; }
.info-dialog p { color:rgba(247,242,238,.78); font-family:Georgia,"Times New Roman",serif; font-size:.9rem; line-height:1.5; }
.dialog-close { display:grid; width:2.25rem; height:2.25rem; place-items:center; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; }
.dialog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.1rem; }
.dialog-grid section + section { padding-left:1rem; border-left:1px solid rgba(247,242,238,.13); }
.log-list { display:grid; gap:1rem; margin-top:1rem; }
.log-list article + article { padding-top:1rem; border-top:1px solid rgba(247,242,238,.13); }
.log-list time { color:var(--accent); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; }
.log-list h3 { margin-top:.25rem; color:var(--ink); font-family:Georgia,"Times New Roman",serif; font-size:1.2rem; font-weight:400; letter-spacing:0; text-transform:none; }
.log-list p { margin-bottom:0; }

@media (max-width: 1100px) {
  .site-header, .site-footer, .landing-main, .subpage-main { width: min(calc(100% - 1.5rem), 94rem); }
  .landing-main { grid-template-columns: 1fr .9fr; gap: 1.2rem; }
  .topic-gallery { width: min(100%, 34rem); }
  .article-layout { grid-template-columns: minmax(0,1.06fr) minmax(23rem,.94fr); gap: 1.25rem; }
  .article-columns p { font-size: .95rem; line-height: 1.56; }
  .feature-figure { width: min(100%, 34rem); height: min(54vh, 33rem); }
}

@media (max-width: 760px) {
  body { overflow:auto; }
  .site-page { height:auto; min-height:100svh; overflow:visible; }
  .site-header { gap:.65rem; }
  .site-nav { gap:.55rem; overflow-x:auto; }
  .site-nav a, .site-nav button { font-size:.61rem; }
  .brand { font-size:1.15rem; }
  .landing-main { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; gap:.45rem; padding-top:.45rem; }
  .landing-copy { align-self:center; padding-bottom:0; }
  .landing-copy h1 { font-size:clamp(2.4rem,12vw,4rem); }
  .landing-intro { max-width:26rem; font-size:.76rem; }
  .landing-actions { margin-top:.65rem; }
  .button { min-height:2rem; padding:.42rem .7rem; font-size:.62rem; }
  .topic-gallery { width:min(100%,29rem); justify-self:start; padding-bottom:.1rem; }
  .topic-tile { border-width:1px; }
  .topic-tile__number { top:.4rem; left:.42rem; font-size:.44rem; }
  .topic-tile__title { left:.42rem; right:1.2rem; bottom:.42rem; font-size:clamp(.58rem,2.9vw,.74rem); }
  .topic-tile__credit { left:.42rem; bottom:.28rem; font-size:.34rem; }
  .topic-tile:has(.topic-tile__credit) .topic-tile__title { bottom:.77rem; }
  .topic-tile__arrow { right:.38rem; bottom:.35rem; font-size:.68rem; }
  .site-footer { font-size:.48rem; }
  .hero-image-credit { max-width:55%; }

  .subpage-main { grid-template-rows:auto auto auto; }
  .article-head { display:block; }
  .article-head h1 { max-width:14ch; font-size:clamp(2.4rem,10vw,4rem); }
  .byline { margin-top:.42rem; }
  .article-layout { grid-template-columns:1fr; gap:1rem; }
  .article-columns { column-count:1; }
  .article-columns p { font-size:1rem; line-height:1.62; }
  .feature-figure { justify-self:start; width:100%; height:min(58svh,32rem); margin:0; }
  .timeline { grid-template-columns:repeat(4,minmax(12rem,1fr)); overflow-x:auto; }
  .timeline--scroll { grid-auto-columns:minmax(15rem,18rem); }
  .timeline-item span { font-size:.78rem; }
  .dialog-grid { grid-template-columns:1fr; }
  .dialog-grid section + section { padding-top:.8rem; padding-left:0; border-top:1px solid rgba(247,242,238,.13); border-left:0; }
}

@media (max-height: 720px) and (min-width: 761px) {
  .article-head h1 { font-size:clamp(2.5rem,6.2vh,4.2rem); }
  .article-columns p { font-size:clamp(.86rem,2.05vh,.98rem); line-height:1.48; }
  .feature-figure { height:min(52vh,31rem); }
  .source-card { font-size:.68rem; }
  .timeline-item { padding-top:.62rem; }
  .timeline-item strong { font-size:.9rem; }
  .timeline-item span { font-size:.69rem; line-height:1.3; }
  .timeline-note { font-size:.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* v7: Kromosfäärin tulenkantajat – artikkelimainen rakenne */
.article-copy--solar {
  align-content: start;
  gap: clamp(.55rem, 1vh, .8rem);
}
.inline-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(247,242,238,.25);
  border-radius: 9px;
  background: #f3f1ed;
}
.inline-figure--diagram {
  width: min(100%, 42rem);
  height: clamp(7.3rem, 15vh, 10.8rem);
}
.inline-figure--diagram img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: contrast(1.03);
}
.inline-figure figcaption {
  position: absolute;
  left: .62rem;
  right: .62rem;
  bottom: .48rem;
  padding: .34rem .45rem;
  border-radius: 5px;
  background: rgba(4,5,12,.78);
  color: rgba(247,242,238,.94);
  font-size: clamp(.62rem,.68vw,.72rem);
  line-height: 1.3;
  backdrop-filter: blur(3px);
}
.timeline--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-height: 760px) and (min-width: 901px) {
  .inline-figure--diagram { height: 6.6rem; }
  .article-columns p { font-size: clamp(.92rem, 1vw, 1.04rem); line-height: 1.54; }
  .timeline-item { padding-top: .64rem; }
  .timeline-item span { font-size: clamp(.68rem,.75vw,.78rem); line-height: 1.32; }
}

@media (max-width: 900px) {
  .inline-figure--diagram { width: 100%; height: auto; aspect-ratio: 16 / 7; }
  .timeline--five { grid-template-columns: 1fr; }
}


/* ===== v8 overrides ===== */
.site-footer--landing {
  font-size: clamp(.78rem, .9vw, .96rem);
}
.editor-credit {
  font-size: clamp(.76rem, .86vw, .92rem);
  line-height: 1.35;
}
.hero-image-credit {
  max-width: min(62rem, 68vw);
  font-size: clamp(.74rem, .84vw, .9rem);
  line-height: 1.34;
}

.topic-gallery {
  width: min(100%, 36.5rem);
  padding-bottom: clamp(.25rem, 1.2vh, .72rem);
}
.topic-tile {
  aspect-ratio: 0.84 / 1;
  box-shadow: 0 .9rem 2.6rem rgba(0,0,0,.16);
}
.topic-tile__number,
.topic-tile__credit {
  display: none;
}
.topic-tile__title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  padding: 1.05rem;
  text-align: center;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.08rem, 1.12vw, 1.28rem);
  line-height: 1.06;
  text-wrap: balance;
  text-shadow: 0 .18rem .55rem rgba(0,0,0,.58);
}
.topic-tile__arrow {
  bottom: .7rem;
  right: .8rem;
  font-size: .9rem;
  opacity: .74;
  transition: transform 220ms ease, opacity 220ms ease;
}
.topic-tile:hover .topic-tile__arrow,
.topic-tile:focus-visible .topic-tile__arrow {
  transform: translate(2px,-2px);
  opacity: 1;
}

.subpage-main {
  gap: clamp(.72rem, 1.42vh, 1rem);
}
.article-head {
  padding-bottom: .08rem;
}
.article-head--airy {
  margin-bottom: .18rem;
}
.article-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(24rem, .92fr);
  gap: clamp(1.2rem, 2.2vw, 2.2rem);
  overflow: hidden;
}
.article-columns {
  column-gap: clamp(1.25rem, 1.8vw, 1.8rem);
}
.article-columns p {
  font-size: clamp(.98rem, 1vw, 1.08rem);
  line-height: 1.58;
}
.article-columns p + p {
  margin-top: .84rem;
}
.feature-figure,
.feature-figure--tall {
  width: min(100%, 40rem);
  height: min(61vh, 41rem);
  margin: .08rem 0 0;
}

.timeline--compact .timeline-item strong {
  font-size: clamp(.98rem, 1vw, 1.08rem);
}
.timeline--compact .timeline-item span {
  font-size: clamp(.8rem, .84vw, .9rem);
  line-height: 1.34;
}

.article-copy--diagrammed {
  position: relative;
  overflow: hidden;
  padding-bottom: .7rem;
}
.article-copy--diagrammed .article-columns,
.article-copy--diagrammed .diagram-credit {
  position: relative;
  z-index: 2;
}
.diagram-ghost {
  position: absolute;
  left: 14%;
  right: -2%;
  bottom: -.25rem;
  width: 72%;
  margin: 0;
  z-index: 0;
  opacity: .16;
  pointer-events: none;
  mix-blend-mode: screen;
}
.diagram-ghost img {
  display: block;
  width: 100%;
  height: auto;
}
.diagram-credit {
  margin: .25rem 0 0;
  color: rgba(247,242,238,.56);
  font-size: clamp(.7rem, .74vw, .8rem);
  line-height: 1.3;
}

/* hide v7 inline figure that is no longer used, if present */
.inline-figure {
  display: none;
}

@media (max-width: 960px) {
  .topic-gallery {
    width: min(100%, 31rem);
  }
  .topic-tile__title {
    padding: .8rem;
    font-size: clamp(.74rem, 2.7vw, .96rem);
  }
  .feature-figure,
  .feature-figure--tall {
    height: min(54vh, 32rem);
  }
}

@media (max-width: 820px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: .9rem;
  }
  .article-columns {
    column-count: 1;
  }
  .feature-figure,
  .feature-figure--tall {
    width: 100%;
    height: min(44vh, 25rem);
    margin: 0;
  }
  .diagram-ghost {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    opacity: .2;
    margin-top: .4rem;
  }
}


/* ===== v9 overrides ===== */
.eyebrow {
  display: none;
}
.landing-copy {
  padding-bottom: clamp(.7rem, 5vh, 3rem);
}
.landing-intro--lead {
  max-width: 38rem;
  margin-top: clamp(1rem, 2vh, 1.35rem);
  color: rgba(247,242,238,.92);
  font-style: italic;
  font-size: clamp(1.18rem, 1.55vw, 1.7rem);
  line-height: 1.28;
  letter-spacing: -.015em;
}
.topic-gallery {
  width: min(100%, 40.25rem);
  align-self: end;
}
.topic-tile {
  aspect-ratio: 1 / 1;
}
.topic-tile__title {
  inset: auto 0 1.22rem 0;
  padding: 0 .95rem;
  place-content: end center;
  align-items: end;
  font-size: clamp(1.08rem, 1.16vw, 1.34rem);
  line-height: 1.02;
}
.topic-tile__arrow {
  bottom: .58rem;
  right: .72rem;
}

@media (max-width: 960px) {
  .topic-gallery {
    width: min(100%, 34rem);
  }
  .landing-intro--lead {
    font-size: clamp(1rem, 2.25vw, 1.25rem);
  }
}

@media (max-width: 900px) {
  .topic-tile__title {
    inset: auto 0 .9rem 0;
    padding: 0 .6rem;
    font-size: clamp(.74rem, 2.8vw, .96rem);
  }
}


/* ===== v10 overrides ===== */
.article-copy--diagrammed .diagram-ghost,
.diagram-ghost,
.diagram-credit {
  display: none !important;
}