/* ==========================================================================
   Chronology — the chart, then seven rooms, each built from its era's own
   material: overcast, a flood-marked wall, a blueprint, a downpour, a
   memorial, a projection, a sunrise. A staff gauge keeps the depth.
   ========================================================================== */

/* ---------- head ---------- */
.ch-head {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--head) + clamp(4rem, 10vw, 8rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(180deg, var(--abyss) 0%, var(--night) 100%);
}
.ch-kicker { color: var(--signal); }
.ch-title { font-size: clamp(3.6rem, 11.5vw, 11.5rem); font-weight: 200; margin-top: 1.25rem; line-height: 0.86; }
.ch-deck { max-width: 42rem; color: var(--mist); margin-top: 1.75rem; }
.ch-params {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(143, 195, 198, 0.22);
  border-bottom: 1px solid rgba(143, 195, 198, 0.22);
}
.ch-params div { padding: 1rem 1rem 1.15rem 0; }
.ch-params div + div { padding-left: 1rem; border-left: 1px solid rgba(143, 195, 198, 0.12); }
.ch-params dt { font-family: var(--f-mono); font-size: var(--t-xxs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--haze); }
.ch-params dd { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1; margin-top: 0.5rem; color: var(--salt); white-space: nowrap; }
@media (max-width: 64rem) {
  .ch-params { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ch-params div:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .ch-params div:nth-child(n + 4) { border-top: 1px solid rgba(143, 195, 198, 0.12); }
}
@media (max-width: 36rem) {
  .ch-params { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-params div:nth-child(n) { padding-left: 1rem; border-left: 1px solid rgba(143, 195, 198, 0.12); border-top: 0; }
  .ch-params div:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .ch-params div:nth-child(n + 3) { border-top: 1px solid rgba(143, 195, 198, 0.12); }
}

/* ---------- how to read + the chart ---------- */
.ch-read { background: var(--night); padding-block: clamp(3.5rem, 7vw, 6rem); }
.ch-read-grid {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem clamp(2rem, 4vw, 3.5rem);
}
.ch-read-label { color: var(--haze); padding-top: 0.35rem; }
.ch-read-a, .ch-read-b { color: var(--mist); }
.ch-read-key { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.08; color: var(--salt); }
@media (max-width: 60rem) {
  .ch-read-grid { grid-template-columns: minmax(0, 1fr); }
}

.flood-fig { position: relative; margin-top: clamp(3rem, 6vw, 5rem); }
.flood-chart { width: 100%; }
.flood-chart:focus-visible { outline-offset: 6px; }
.flood-chart svg { display: block; width: 100%; height: auto; }
.flood-cap { margin-top: 0.75rem; }
.fc-band { fill: rgba(143, 195, 198, 0.02); }
.fc-band--alt { fill: rgba(143, 195, 198, 0.06); }
.fc-era { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; fill: var(--haze); }
.fc-title { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--mist); }
.fc-grid { stroke: rgba(143, 195, 198, 0.13); stroke-width: 1; }
.fc-tick { font-family: var(--f-mono); font-size: 11px; fill: var(--haze); }
.fc-tick--film { fill: var(--signal); }
.fc-xtick { stroke: rgba(143, 195, 198, 0.4); stroke-width: 1; }
.fc-area { fill: rgba(53, 163, 196, 0.12); }
.fc-line { fill: none; stroke: #35a3c4; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fc-line--pop { stroke: var(--signal); stroke-width: 1.25; opacity: 0.65; }
.fc-dot-pop { fill: var(--signal); stroke: var(--night); stroke-width: 2; }
.fc-end { fill: #35a3c4; stroke: var(--night); stroke-width: 2; }
.fc-endlabel { font-family: var(--f-mono); font-size: 12px; font-weight: 500; fill: var(--salt); }
.fc-note { font-family: var(--f-mono); font-size: 11px; fill: var(--mist); }
.fc-ref { stroke: rgba(230, 236, 234, 0.3); stroke-width: 1; }
.fc-reflabel { font-family: var(--f-text); font-style: italic; font-size: 13px; fill: var(--mist); }
.fc-crossline { stroke: var(--salt); stroke-width: 1; opacity: 0.55; }
.fc-crossdot { fill: #35a3c4; stroke: var(--night); stroke-width: 2; }
.fc-crossdot--pop { fill: var(--signal); }
.fc-hit { fill: transparent; cursor: crosshair; }
.flood-fig .tip .tip-era { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid rgba(143, 195, 198, 0.18); color: var(--signal); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- the eras: shared anatomy ---------- */
.eras { position: relative; }
.era {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 11vw, 9rem);
  --era-meta: var(--haze);
  --era-ink: var(--salt);
}
.era-inner { position: relative; z-index: 1; }
@media (min-width: 72.01rem) {
  .era-inner { padding-right: calc(var(--gutter) + 5.5rem); }
}
.era-plate { display: grid; gap: 0.85rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 60rem; }
.era-meta { color: var(--era-meta); }
.era-name { font-size: var(--t-xl); font-weight: 250; color: var(--era-ink); }
.era-data { font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--era-meta); }
.hook { max-width: 42rem; margin-top: clamp(2.5rem, 5vw, 4rem); font-style: italic; font-weight: 330; font-size: var(--t-m); line-height: 1.35; text-wrap: pretty; }
.hook strong { display: block; margin-bottom: 0.6rem; font-family: var(--f-mono); font-style: normal; font-size: var(--t-xxs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--era-meta); }
.era .xref { margin-top: clamp(2rem, 4vw, 3rem); color: var(--era-meta); }

/* ---------- I · the quiet years: overcast ---------- */
.era-1 {
  background: linear-gradient(180deg, #d6dede 0%, #c3cdce 100%);
  color: var(--ink);
  --era-meta: #45575d;
  --era-ink: var(--ink);
}
.drizzle {
  position: absolute;
  inset: -50% 0 0 0;
  z-index: 0;
  background-image: repeating-linear-gradient(97deg, transparent 0 34px, rgba(11, 24, 32, 0.06) 34px 35px);
  animation: drizzle 5s linear infinite;
  pointer-events: none;
}
@keyframes drizzle { to { transform: translateY(33.333%); } }
.era-1 .era-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); gap: 0 clamp(2rem, 6vw, 6rem); }
.era-1 .era-plate { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.q-body { grid-column: 2; color: var(--ink-2); }
.q-sliver, .q-ladder, .q-hook, .era-1 .xref { grid-column: 1 / -1; }
.q-sliver { margin-top: clamp(3rem, 6vw, 5rem); }
.q-sliver-track { position: relative; height: 12px; background: rgba(11, 24, 32, 0.1); }
.q-sliver-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0.74%; min-width: 3px; background: var(--ink); border-radius: 0 2px 2px 0; }
.q-sliver figcaption { margin-top: 0.8rem; color: var(--ink-2); }
.q-sliver .num { color: var(--ink); font-weight: 500; }
.q-ladder { margin-top: 2.5rem; border-top: 1px solid rgba(11, 24, 32, 0.25); }
.q-ladder li { display: grid; grid-template-columns: 6rem 5rem minmax(0, 1fr); gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid rgba(11, 24, 32, 0.15); }
.q-ladder .num { font-size: var(--t-xs); color: var(--ink-3); padding-top: 0.2rem; }
.q-hook { color: var(--ink); }
@media (max-width: 56rem) {
  .era-1 .era-inner { grid-template-columns: minmax(0, 1fr); }
  .era-1 .era-plate, .q-body { grid-column: 1; grid-row: auto; }
  .q-ladder li { grid-template-columns: 5rem minmax(0, 1fr); }
  .q-ladder li > :nth-child(2) { display: none; }
}

/* ---------- II · the drowning: a wall with flood marks ---------- */
.era-2 { background: linear-gradient(180deg, #10303a 0%, #0b222b 100%); --era-meta: #86a8ae; }
.d-grid { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.wall { position: sticky; top: calc(var(--head) + 2rem); }
.wall-face {
  position: relative;
  height: clamp(26rem, 64vh, 38rem);
  overflow: hidden;
  background-color: #33424a;
  background-image:
    linear-gradient(rgba(5, 14, 20, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 14, 20, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, transparent 50%, rgba(5, 14, 20, 0.28) 50%, rgba(5, 14, 20, 0.28) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 100% 44px, 88px 88px, 88px 88px;
  background-position: 0 0, 0 0, 44px 44px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45);
}
.wall-mark { position: absolute; left: 0; right: 0; height: 0; z-index: 2; }
.wall-mark i { position: absolute; left: 12%; right: 34%; border-top: 2px solid #e8ecea; }
.wall-mark b {
  position: absolute;
  right: 12%;
  transform: translateY(-50%);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: #e8ecea;
  letter-spacing: 0.08em;
}
.wall-mark.is-wet i { border-color: rgba(232, 236, 234, 0.45); }
.wall-mark.is-wet b { color: rgba(232, 236, 234, 0.55); }
.wall-water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(53, 163, 196, 0.5) 0%, rgba(11, 45, 58, 0.92) 100%);
  border-top: 1.5px solid var(--foam);
}
.wall-year { position: absolute; z-index: 3; top: 0.9rem; left: 0.9rem; font-family: var(--f-mono); font-size: var(--t-xxs); letter-spacing: 0.14em; text-transform: uppercase; color: #e8ecea; }
.wall .caption { margin-top: 0.75rem; color: #86a8ae; }
.d-body { color: #b9cbce; max-width: 40rem; }
.d-body em { color: var(--salt); }
.d-lead { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.02; color: var(--salt); }
.spring { margin-top: clamp(3.5rem, 7vw, 6rem); }
.spring-band {
  height: 16px;
  background: linear-gradient(90deg, #264c32 0%, #5d9443 16%, #b8c15e 30%, #d6c46e 38%, #8f9674 55%, #3f4f53 74%, #1a282e 100%);
}
.spring-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 0.9rem; font-family: var(--f-mono); font-size: var(--t-xs); color: #b9cbce; }
.spring-steps li:nth-child(2) { color: #e2dd9a; }
.spring-steps li:nth-child(n + 3) { text-align: right; }
.spring-steps li:nth-child(3) { text-align: center; }
.d-ladder { margin-top: 3rem; display: grid; gap: 0.5rem; }
.d-ladder li { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; color: #d2dfe1; }
.d-ladder .num { font-size: var(--t-xs); color: #86a8ae; padding-top: 0.2rem; }
.d-hook { color: var(--salt); }
@media (max-width: 60rem) {
  .d-grid { grid-template-columns: minmax(0, 1fr); }
  .wall { position: relative; top: 0; max-width: 22rem; }
  .spring-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spring-steps li:nth-child(n) { text-align: left; }
  .d-ladder li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}

/* ---------- III · the building: a drawing sheet ---------- */
.era-3 {
  background-color: #0d3553;
  background-image:
    linear-gradient(rgba(214, 232, 245, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 232, 245, 0.075) 1px, transparent 1px),
    linear-gradient(rgba(214, 232, 245, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 232, 245, 0.035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: #e3eef6;
  --era-meta: #a9c7dd;
  --era-ink: #eef5fa;
}
.sheet {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  border: 1.5px solid rgba(214, 232, 245, 0.65);
  outline: 1px solid rgba(214, 232, 245, 0.25);
  outline-offset: 6px;
  background: rgba(13, 53, 83, 0.6);
}
.sheet-drawing { padding: clamp(1rem, 3vw, 2.5rem); border-right: 1.5px solid rgba(214, 232, 245, 0.65); display: grid; align-items: center; }
.sheet-drawing svg { width: 100%; height: auto; }
.bp-water { stroke: #9fd0ea; stroke-width: 1.5; }
.bp-wave { stroke: #9fd0ea; stroke-width: 1.2; fill: none; opacity: 0.6; }
.bp-hull { fill: rgba(214, 232, 245, 0.05); stroke: #e3eef6; stroke-width: 1.6; }
.bp-line { stroke: #e3eef6; stroke-width: 1.4; fill: none; }
.bp-cell { fill: rgba(214, 232, 245, 0.08); stroke: #e3eef6; stroke-width: 1.2; }
.bp-core { fill: rgba(214, 232, 245, 0.1); stroke: #e3eef6; stroke-width: 1.6; }
.bp-thin { stroke: #e3eef6; stroke-width: 0.8; opacity: 0.6; }
.bp-plant { stroke: #bfe3c8; stroke-width: 1.2; fill: none; }
.bp-dim { stroke: #e3eef6; stroke-width: 1; fill: none; }
.bp-leader { stroke: #e3eef6; stroke-width: 1; fill: none; }
.bp-text { font-family: var(--f-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.12em; fill: #e3eef6; }
.bp-text--dim { fill: #a9c7dd; }
.bp-balloon circle { fill: #0d3553; stroke: #e3eef6; stroke-width: 1.4; }
.bp-balloon text { font-family: var(--f-mono); font-size: 17px; font-weight: 600; fill: #e3eef6; }
.sheet-side { display: grid; grid-template-rows: 1fr auto auto auto; }
.sheet-body { padding: clamp(1.25rem, 3vw, 2.5rem); color: #cfe0ec; font-size: 1rem; }
.sheet-body strong { color: #fff; font-weight: 500; }
.parts, .revs { width: 100%; font-family: var(--f-mono); font-size: var(--t-xs); border-top: 1.5px solid rgba(214, 232, 245, 0.65); }
.parts caption, .revs caption {
  caption-side: top;
  text-align: left;
  padding: 0.6rem 1rem;
  font-size: var(--t-xxs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a9c7dd;
  border-top: 1.5px solid rgba(214, 232, 245, 0.65);
}
.parts th, .parts td, .revs th, .revs td { border-top: 1px solid rgba(214, 232, 245, 0.3); padding: 0.45rem 1rem; text-align: left; vertical-align: top; }
.parts th, .revs th { font-weight: 500; font-size: var(--t-xxs); letter-spacing: 0.12em; text-transform: uppercase; color: #a9c7dd; }
.parts td:first-child { width: 3.5rem; }
.revs td:first-child, .revs td:nth-child(2) { white-space: nowrap; color: #a9c7dd; }
.titleblock {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  border-top: 1.5px solid rgba(214, 232, 245, 0.65);
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e3eef6;
}
.launches { margin-top: clamp(3rem, 6vw, 5rem); }
.launches-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.launches-row i {
  flex: none;
  width: calc(var(--s) * 1.25px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid #e3eef6;
  background: radial-gradient(circle, rgba(214, 232, 245, 0.18) 0 18%, rgba(214, 232, 245, 0.05) 19%);
}
.launches-cap { display: flex; justify-content: space-between; gap: 2rem; margin-top: 1rem; font-size: var(--t-s); color: #cfe0ec; }
.launches-cap span:last-child { text-align: right; }
.launches-cap b { display: block; font-size: var(--t-xs); font-weight: 500; color: #a9c7dd; }
.b-hook { color: #eef5fa; }
@media (max-width: 64rem) {
  .sheet { grid-template-columns: minmax(0, 1fr); }
  .sheet-drawing { border-right: 0; border-bottom: 1.5px solid rgba(214, 232, 245, 0.65); }
}
@media (max-width: 40rem) {
  .bp-balloon circle { r: 26px; }
  .bp-balloon text { font-size: 28px; transform: translateY(5px); }
  .bp-text { font-size: 24px; }
  .launches-row i { width: calc(var(--s) * 0.55px); }
}

/* ---------- IV · the sunless century: the downpour ---------- */
.era-4 { background: #0a0d0f; color: #b3bdbf; --era-meta: #7f8d91; --era-ink: #dde2e2; }
.downpour { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.sun-patch {
  position: absolute;
  z-index: 0;
  top: 5%;
  right: 10%;
  width: min(26rem, 60vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 222, 218, 0.11) 0%, rgba(214, 222, 218, 0.045) 35%, transparent 68%);
  filter: blur(12px);
}
.s-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.s-body { color: #a9b3b5; }
.s-body strong { color: #e6eaea; font-weight: 500; }
.s-figs { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.cal-k { color: #7f8d91; margin-bottom: 0.8rem; }
.cal-grid {
  display: grid;
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
}
.cal-grid i { position: relative; aspect-ratio: 1; background: rgba(143, 195, 198, 0.07); }
.cal-grid i::after { content: ""; position: absolute; left: 50%; top: 14%; bottom: 14%; width: 1px; background: rgba(169, 205, 208, 0.75); }
.cal-cap, .waffle-cap { margin-top: 0.8rem; font-size: var(--t-s); color: #a9b3b5; }
.cal-cap .num, .waffle-cap .num { color: #e6eaea; }
.waffle-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; max-width: 17rem; }
.waffle-grid i { aspect-ratio: 1; border: 1px solid rgba(169, 187, 190, 0.28); }
.waffle-grid i.on { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 12px rgba(242, 169, 59, 0.45); }
.waffle-cap .num { display: block; margin-top: 0.3rem; color: var(--signal); }
.s-ladder { margin-top: 3rem; border-top: 1px solid rgba(169, 187, 190, 0.2); }
.s-ladder li { display: grid; grid-template-columns: 6rem 6rem minmax(0, 1fr); gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(169, 187, 190, 0.12); color: #d4dada; }
.s-ladder .num { font-size: var(--t-xs); color: #7f8d91; padding-top: 0.2rem; }
.s-hook { color: #e6eaea; }
@media (max-width: 60rem) {
  .s-grid { grid-template-columns: minmax(0, 1fr); }
  .cal-grid { gap: 1px; }
  .s-ladder li { grid-template-columns: 5rem minmax(0, 1fr); }
  .s-ladder li > :nth-child(2) { display: none; }
}

/* ---------- V · the shrinking: a memorial ---------- */
.era-5 {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(201, 214, 214, 0.05), transparent 60%),
    #161d20;
  --era-meta: #8c9ca0;
}
.m-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.m-body { color: #aebbbe; }
.memorial {
  text-align: center;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  background: linear-gradient(180deg, #1f292c, #141b1e);
  border: 1px solid rgba(201, 214, 214, 0.2);
  box-shadow: inset 0 0 0 7px #151c1f, inset 0 0 0 8px rgba(201, 214, 214, 0.14), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.memorial-row { display: grid; gap: 0.35rem; padding-block: 1.1rem; border-bottom: 1px solid rgba(201, 214, 214, 0.1); }
.memorial-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #cdd6d6;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 -1px 0 rgba(255, 255, 255, 0.07);
}
.memorial-date { font-family: var(--f-mono); font-size: var(--t-xxs); letter-spacing: 0.14em; text-transform: uppercase; color: #8c9ca0; }
.memorial-row--last .memorial-name { font-size: clamp(1.05rem, 1.6vw, 1.35rem); letter-spacing: 0.24em; color: #a3b0b1; }
.memorial-foot { margin-top: 1.4rem; font-style: italic; color: #aebbbe; }
.m-hook { color: #e1e8e8; }
@media (max-width: 60rem) {
  .m-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- VI · the last mountain: the projection ---------- */
.era-6 { background: linear-gradient(180deg, #081620 0%, #0b1f2b 100%); --era-meta: #86a2ad; }
.l-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.l-body, .l-after { color: #b3c3c8; }
.l-body strong { color: var(--salt); font-weight: 500; }
.proj svg { width: 100%; height: auto; }
.proj-mtn { fill: #1a2c36; stroke: rgba(143, 195, 198, 0.45); stroke-width: 1.2; }
.proj-sea { fill: rgba(53, 163, 196, 0.3); }
.proj-final { stroke: var(--signal); stroke-width: 1.5; }
.proj-bar { stroke: var(--salt); stroke-width: 2; }
.proj-summit { fill: var(--salt); }
.proj-t { font-family: var(--f-mono); font-size: 13px; fill: var(--salt); }
.proj-t--dim { fill: var(--mist); }
.proj-t--signal { fill: var(--signal); }
.proj .caption { margin-top: 0.75rem; }
.stutter { margin-top: clamp(3.5rem, 7vw, 6rem); }
.stutter-strip { display: grid; grid-template-columns: repeat(132, minmax(0, 1fr)); gap: 2px; height: 3.2rem; }
.stutter-strip i { background: rgba(143, 195, 198, 0.08); }
.stutter-strip i.wet { background: linear-gradient(180deg, rgba(201, 226, 226, 0.9), rgba(53, 163, 196, 0.55)); }
.stutter-ends { display: flex; justify-content: space-between; margin-top: 0.6rem; font-size: var(--t-xs); color: #86a2ad; }
.stutter-cap { margin-top: 1rem; max-width: 40rem; color: #b3c3c8; }
.stutter-cap .caption { display: inline; }
.l-after { margin-top: clamp(3rem, 6vw, 5rem); max-width: 42rem; }
.l-after p:first-child { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 1.05; color: var(--salt); }
.l-ladder { margin-top: 3rem; border-top: 1px solid rgba(143, 195, 198, 0.2); }
.l-ladder li { display: grid; grid-template-columns: 6rem 6rem minmax(0, 1fr); gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(143, 195, 198, 0.12); color: #d6e2e4; }
.l-ladder .num { font-size: var(--t-xs); color: #86a2ad; padding-top: 0.2rem; }
@media (max-width: 60rem) {
  .l-grid { grid-template-columns: minmax(0, 1fr); }
  .stutter-strip { gap: 1px; }
  .l-ladder li { grid-template-columns: 5rem minmax(0, 1fr); }
  .l-ladder li > :nth-child(2) { display: none; }
}

/* ---------- VII · after the rain: the sun ---------- */
.era-7 {
  background: linear-gradient(180deg, #8ec7de 0%, #cbe5ee 42%, #f5eedb 100%);
  color: var(--ink);
  --era-meta: #33505b;
  --era-ink: var(--ink);
}
.sunrise {
  position: absolute;
  z-index: 0;
  top: clamp(-14rem, -18vw, -6rem);
  right: clamp(-10rem, -8vw, -4rem);
  width: clamp(22rem, 44vw, 44rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 0 21%, rgba(255, 232, 178, 0.85) 27%, rgba(255, 211, 126, 0.3) 46%, rgba(255, 211, 126, 0) 68%);
}
.a-quote { max-width: 60rem; }
.a-quote p { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 0.98; text-wrap: balance; }
.a-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(2rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 64rem; }
.a-body { color: var(--ink-2); }
.a-end { display: grid; gap: 0.3rem; margin-top: clamp(3.5rem, 7vw, 6rem); }
.a-end .label { color: #33505b; }
.a-year { font-family: var(--f-display); font-weight: 200; font-size: clamp(4.5rem, 16vw, 15rem); line-height: 0.84; letter-spacing: -0.01em; }
@media (max-width: 52rem) {
  .a-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the staff gauge ---------- */
.gauge {
  position: fixed;
  z-index: 30;
  right: clamp(0.75rem, 1.6vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%);
  width: 7.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0.55rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.gauge[data-active] { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease); }
.gauge-read {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 5.75rem;
  padding: 0.35rem 0.4rem;
  background: rgba(5, 14, 20, 0.82);
  border: 1px solid rgba(143, 195, 198, 0.22);
}
.gauge-k { font-family: var(--f-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--haze); }
.gauge-year { font-family: var(--f-display); font-weight: 300; font-size: 1.65rem; line-height: 1; color: var(--salt); }
.gauge-sea { font-family: var(--f-mono); font-size: 0.72rem; color: var(--salt); white-space: nowrap; }
.gauge-staff { position: relative; width: 2.75rem; height: min(48vh, 26rem); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 0, 0, 0.4); }
.gauge-face { position: absolute; inset: 0; width: 100%; height: 100%; }
.gauge-units { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 0.55rem; color: var(--ink-3); z-index: 1; }
.gauge-num { position: absolute; z-index: 1; right: 3px; transform: translateY(50%); font-family: var(--f-mono); font-size: 0.62rem; font-weight: 600; color: #b3342b; line-height: 1; }
.gauge-num.is-left { right: auto; left: 3px; }
.gauge-everest {
  position: absolute;
  z-index: 3;
  right: calc(100% + 4px);
  transform: translateY(50%);
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  color: var(--signal);
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.gauge-water {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(53, 163, 196, 0.62), rgba(10, 48, 62, 0.8));
  border-top: 2px solid #d9eeee;
  transition: height 0.2s linear;
}
.gauge-last {
  width: 100%;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  line-height: 1.35;
  color: var(--mist);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  min-height: 2.7em;
}
.gauge-bar { display: none; }
@media (max-width: 72rem) {
  .gauge {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(5, 14, 20, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(143, 195, 198, 0.2);
  }
  .gauge-staff, .gauge-last { display: none; }
  .gauge-read { display: flex; align-items: baseline; gap: 0.45rem; width: auto; padding: 0; background: none; border: 0; }
  .gauge-read--year { order: 1; }
  .gauge-bar { order: 2; display: block; flex: 1; position: relative; height: 4px; background: rgba(143, 195, 198, 0.16); }
  .gauge-read--sea { order: 3; }
  .gauge-year { font-size: 1.25rem; }
  .gauge-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #35a3c4; }
}

/* ---------- the ladder, as a tide table ---------- */
.tides { background: var(--paper); color: var(--ink); padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.tides-sheet {
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  background: #f2f3ee;
  border: 1px solid rgba(11, 24, 32, 0.3);
  box-shadow: 0 2px 0 rgba(11, 24, 32, 0.06), 0 40px 60px -45px rgba(11, 24, 32, 0.35);
}
.tides-head .label { color: var(--ink-3); }
.tides-title { font-size: var(--t-l); font-weight: 300; margin-top: 0.7rem; }
.tides-note { margin-top: 0.9rem; color: var(--ink-2); max-width: 36rem; }
.tides-table { width: 100%; margin-top: 2rem; font-variant-numeric: tabular-nums; }
.tides-table th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0.5rem 1rem 0.5rem 0;
  border-bottom: 2px solid var(--ink);
}
.tides-table td { padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px solid rgba(11, 24, 32, 0.13); vertical-align: top; }
.tides-table tbody tr:nth-child(odd) td { background: rgba(11, 24, 32, 0.025); }
.tides-table .num { font-size: var(--t-s); white-space: nowrap; }
.tides-table .r { text-align: right; }
.tides-era { font-family: var(--f-display); font-size: 1.2rem; line-height: 1.1; color: var(--ink-3); width: 3rem; }
.tides-table tr.is-end td { font-weight: 600; border-bottom: 2px solid var(--ink); }
.tides-foot { margin-top: 1.25rem; font-family: var(--f-mono); font-size: var(--t-xxs); letter-spacing: 0.04em; color: var(--ink-3); }
@media (max-width: 36rem) {
  .tides-table th:first-child, .tides-table td:first-child { display: none; }
  .tides-table td, .tides-table th { padding-right: 0.6rem; }
}

/* ---------- deep future ---------- */
.deep { background: var(--abyss); padding-block: clamp(5rem, 10vw, 8.5rem); }
.deep-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem clamp(3rem, 7vw, 7rem); }
.deep-title { font-size: var(--t-xl); font-weight: 250; margin-top: 1rem; }
.deep-head .label { color: var(--haze); }
.deep-lede { margin-top: 1.5rem; color: var(--mist); }
.deep-scale { position: relative; height: 52rem; }
.deep-axis { position: absolute; left: 0; top: 0; bottom: 0; width: 7rem; border-right: 1px solid rgba(143, 195, 198, 0.35); }
.deep-tick { position: absolute; right: 0.9rem; transform: translateY(-50%); font-family: var(--f-mono); font-size: var(--t-xxs); color: var(--haze); white-space: nowrap; }
.deep-tick::after { content: ""; position: absolute; right: -0.9rem; top: 50%; width: 0.5rem; height: 1px; background: rgba(143, 195, 198, 0.5); }
.deep-events { position: absolute; left: 8.5rem; right: 0; top: 0; bottom: 0; }
.deep-events li { position: absolute; left: 0; right: 0; transform: translateY(-0.55rem); display: grid; gap: 0.3rem; color: var(--mist); font-size: 0.98rem; line-height: 1.5; }
.deep-events li::before { content: ""; position: absolute; left: -1.85rem; top: 0.42rem; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px var(--abyss); }
.deep-events .num { font-size: var(--t-xs); color: var(--signal); }
.deep-events b { font-weight: 500; color: var(--salt); }
@media (max-width: 60rem) {
  .deep-grid { grid-template-columns: minmax(0, 1fr); }
  .deep-scale { height: auto; border-left: 1px solid rgba(143, 195, 198, 0.35); padding-left: 1.75rem; }
  .deep-axis { display: none; }
  .deep-events { position: static; display: grid; gap: 2rem; }
  .deep-events li { position: static; transform: none; }
  .deep-events li::before { left: -2.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .drizzle { animation: none; }
}