/* Open water between strata.
   One viewport per 250 feet of drop, floor a quarter viewport, ceiling two viewports.
   Drops: 10→30 = 20 ft, 30→60 = 30, 60→100 = 40, 100→200 = 100, 200→530 = 330, 530→900 = 370, 900→1332 = 432. */
#shore    { --gap: 25vh; }
#fishery  { --gap: 25vh; }
#basin    { --gap: 25vh; }
#copper   { --gap: 40vh; }
#treaties { --gap: 100vh; }
#wrecks   { --gap: 110vh; }
#cold     { --gap: 120vh; }

/* Agates */
.agates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.agates svg { width: 100%; height: auto; display: block; }

/* Two names */
.names { position: relative; }
.names svg text { font-family: var(--sans); font-size: 13px; fill: currentColor; }
.names .names-note { font-size: 11px; opacity: 0.75; }
.names .names-oj { display: none; }
.names.show-oj .names-oj { display: inline; }
.names.show-oj .names-en { display: none; }
.names-toggle {
  margin-top: 0.75rem;
  font: inherit;
  font-family: var(--sans);
  font-size: var(--step--1);
  color: var(--ink);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}
.names-toggle[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* Cessions: three stacked rows, one per treaty, no map */
.cessions {
  list-style: none;
  margin: 1.5rem 0 0.75rem;
  padding: 0;
  max-width: var(--wide);
  border-top: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}
.cessions li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}
.cession-year {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cession-body { font-size: var(--step--1); font-family: var(--sans); line-height: 1.5; }
@media (max-width: 600px) {
  .cessions li { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* Wreck scale */
.wreck-scale { max-width: 24rem; }
.wreck-scale text { font-family: var(--sans); }
.wreck-you, .wreck-you-label { opacity: 0.85; }

/* Droplet */
.droplet svg text { font-family: var(--sans); }
.droplet-label { display: grid; gap: 0.4rem; margin-top: 0.75rem; max-width: var(--measure); }
.droplet-year { font-variant-numeric: tabular-nums; }
.droplet-range {
  width: 100%;
  accent-color: var(--ink);
}

/* The bottom */
.acknowledgment {
  max-width: var(--measure);
  padding: 1.25rem 0;
  border-top: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}
.bands { padding-left: 1.2rem; margin: 0 0 1.25em; font-family: var(--sans); font-size: var(--step--1); line-height: 1.6; }
.review-note { margin-bottom: 0; }

.sources { max-width: var(--measure); font-family: var(--sans); font-size: var(--step--1); line-height: 1.5; }
.sources dt { font-weight: 700; margin-top: 1rem; }
.sources dd { margin: 0.2rem 0 0; }

/* The lake map and the water column */
.lakemap text, .column text { font-family: var(--sans); }
.lakemap { max-width: var(--wide); }
.column { max-width: 20rem; }
.drop-route { pointer-events: none; }