.section { position: relative; width: 100%; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.deep { background: var(--deep); color: var(--ivory); }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
.deep {
  background: var(--deep);
  border-color: var(--line-d);
  color: var(--ivory);
}
.panel--raise { background: var(--paper-2); }
.panel--flat  { background: transparent; }

.band { position: relative; padding-block: var(--band); }

.band::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 9px;
  background:
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 80px) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 8px) 0 0 / 100% 4px no-repeat;
  pointer-events: none;
}

.band--raise { background: var(--paper-2); }

.mono {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--ls-mono);
  color: var(--ink-45);
}
.mono--ink { color: var(--ink); }
.mono--key { color: var(--accent-tx); }
.deep .mono { color: var(--iv-40); }
.deep .mono--ink { color: var(--ivory); }
.deep .mono--key { color: var(--accent-hi); }

.mega {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--t-mega);
  line-height: var(--lh-mega);
  letter-spacing: var(--ls-mega);
  text-wrap: balance;
}
.big {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--t-big);
  line-height: 0.96;
  letter-spacing: var(--ls-mega);
  text-wrap: balance;
}
.mid {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--t-mid);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.sub {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--t-sub);
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.lede {
  font-size: var(--t-lede);
  line-height: var(--lh-lede);
  color: var(--ink-60);
  max-width: 48ch;
  text-wrap: pretty;
}
.deep .lede { color: var(--iv-55); }

.prose { line-height: 1.68; max-width: 56ch; color: var(--ink-60); text-wrap: pretty; }
.prose p + p { margin-top: var(--s-4); }

.fine { font-size: var(--t-fine); line-height: 1.55; color: var(--ink-45); }
.deep .fine { color: var(--iv-40); }

.opener { margin-bottom: var(--s-7); }
.opener__label { display: block; margin-bottom: var(--s-5); }

.opener__label::before { content: "#"; margin-right: 0.5em; color: var(--accent-tx); }
.deep .opener__label::before { color: var(--accent-hi); }
.opener__lede  { margin-top: var(--s-5); }

.opener--split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s-7);
  align-items: end;
}
.opener--split .opener__lede { margin-top: 0; }
@media (max-width: 900px) {
  .opener--split { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

.readout { border-top: 1px solid var(--line); }
.deep .readout { border-top-color: var(--line-d); }
.readout__row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  column-gap: var(--s-5);
  align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.deep .readout__row { border-bottom-color: var(--line-d); }
.readout__val { font-size: var(--t-fine); color: var(--ink); }
.deep .readout__val { color: var(--ivory); }

.readout__val .ln { display: inline-flex; align-items: center; min-height: 44px; }

.rv-ready .rv:not(.on) { opacity: 0; transform: translate3d(0, 6px, 0); }
.rv-ready .rv { transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
.rv-ready .rv[data-d="1"] { transition-delay: 40ms; }
.rv-ready .rv[data-d="2"] { transition-delay: 80ms; }
@media (prefers-reduced-motion: reduce) { .rv-ready .rv, .rv-ready .rv:not(.on) { opacity: 1; transform: none; transition: none; } }