/* ===========================================================================
   What Can You REALLY See in Seismic?
   Shared stylesheet — OU crimson / cream identity
   =========================================================================== */

:root {
  --ink:        #16191C;
  --ink-soft:   #2C3239;
  --paper:      #E2E6EA;
  --panel:      #FFFFFF;
  --crimson:    #841617;
  --crimson-dp: #5A0E0F;
  --cream:      #F5ECEB;
  --cream-edge: #E6D9AE;
  --slate:      #5C6670;
  --rule:       rgba(22, 25, 28, 0.14);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1220px;
}

* { box-sizing: border-box; }

/* author display rules outrank the UA sheet's [hidden] rule, so make it stick */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Crimson hairline that runs across the very top of every page */
body::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--crimson-dp), var(--crimson) 45%, #A8302C);
}

a { color: var(--crimson); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--crimson-dp); }

:focus-visible {
  outline: 2.5px solid var(--crimson);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* --- eyebrow / labels ---------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* --- site header --------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 0;
  flex-wrap: wrap;
}
.brand {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand b { color: var(--crimson); font-weight: 600; }
.brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--crimson);
  flex: none;
}
.masthead nav { display: flex; gap: 20px; font-size: 13px; }
.masthead nav a { color: var(--slate); text-decoration: none; }
.masthead nav a:hover { color: var(--crimson); }

/* --- hero ---------------------------------------------------------------- */

.hero { padding: 44px 0 20px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

h1.title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  line-height: 0.94;
  letter-spacing: -0.026em;
  margin: 0 0 20px;
  text-wrap: balance;
}
h1.title em {
  font-style: normal;
  color: var(--crimson);
  position: relative;
  white-space: nowrap;
}
/* underline that reads like a picked horizon */
h1.title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.07em;
  height: 5px;
  background: var(--cream);
  border-bottom: 2px solid var(--crimson);
  z-index: -1;
}

.lede {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 26px;
}
.lede strong { color: var(--ink); font-weight: 600; }

/* --- hero live panel ----------------------------------------------------- */

.hero-panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(22,25,28,.05), 0 14px 34px -20px rgba(22,25,28,.4);
  padding: 14px 14px 10px;
}
.hero-panel canvas { display: block; width: 100%; height: auto; }
.hero-cap {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate);
  padding-top: 9px;
  margin-top: 9px;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.hero-cap b { color: var(--crimson); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-size: 14px; font-weight: 500;
  padding: 11px 20px;
  border: 1px solid var(--crimson);
  background: var(--crimson);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.btn:hover { background: var(--crimson-dp); border-color: var(--crimson-dp); color: #fff; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--crimson); }
.btn.ghost:hover { background: var(--cream); color: var(--crimson-dp); }
.btn.small { padding: 7px 13px; font-size: 12.5px; }

/* --- primer strip -------------------------------------------------------- */

.primer {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: 40px;
  padding: 30px 0;
}
.primer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.primer h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--crimson); margin: 0 0 8px;
}
.primer p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.primer .eq {
  font-family: var(--mono); font-size: 15px; color: var(--ink);
  background: var(--cream); border-left: 3px solid var(--crimson);
  padding: 5px 10px; display: inline-block; margin-bottom: 9px;
}

/* --- module cards -------------------------------------------------------- */

.modules { padding: 46px 0 30px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .16s, box-shadow .16s, border-color .16s;
  position: relative;
  overflow: hidden;
}
a.card:hover {
  transform: translateY(-3px);
  border-color: rgba(132,22,23,.5);
  box-shadow: 0 16px 30px -22px rgba(22,25,28,.55);
}
.card canvas { display: block; width: 100%; height: auto; background: #fff; }
.card-body { padding: 15px 17px 18px; flex: 1; display: flex; flex-direction: column; }
.card-no {
  font-family: var(--mono); font-size: 11px; color: var(--crimson);
  letter-spacing: .1em; margin-bottom: 5px;
}
.card h3 {
  font-family: var(--display); font-weight: 700; font-size: 1.14rem;
  margin: 0 0 6px; line-height: 1.2; letter-spacing: -0.012em;
}
.card p { margin: 0; font-size: 13.6px; color: var(--slate); line-height: 1.5; }
.card .q {
  margin-top: 10px; font-size: 13px; color: var(--ink-soft);
  border-left: 2px solid var(--cream-edge); padding-left: 10px; font-style: italic;
}

/* card artwork: one flat illustration per module, drawn from that module's
   own subject rather than a generic glyph */
.thumb {
  border-bottom: 1px solid var(--rule);
  background: #F6F4EE;
  line-height: 0;
  overflow: hidden;
}
.thumb svg { display: block; width: 100%; height: auto; }
a.card:hover .thumb { background: #FBF9F4; }

.card.planned { opacity: .62; }
.card.planned .thumb {
  height: 96px; background: repeating-linear-gradient(
    -45deg, #fff, #fff 7px, #F4F4F1 7px, #F4F4F1 14px);
}
.flag {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; padding: 3px 7px;
  background: var(--ink); color: #fff;
}
.flag.next { background: var(--crimson); }

/* --- landing page: section heads, hero buttons, about --------------------- */

.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

.sec-head { margin-bottom: 22px; max-width: 76ch; }
.sec-head h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem); letter-spacing: -0.02em;
  margin: 0 0 8px; line-height: 1.05;
}
.sec-head p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

.about {
  border-top: 1px solid var(--rule);
  padding: 30px 0 6px;
}
.about h2 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--crimson); margin: 0 0 12px;
}
.about p { margin: 0 0 10px; color: var(--ink-soft); font-size: 15px; max-width: 78ch; }

/* --- next module ---------------------------------------------------------- */

.nextup {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--crimson);
  padding: 16px 20px 18px;
  margin: 26px 0 2px;
}
.nextup .eyebrow { margin-bottom: 9px; }
.nextup h3 {
  font-family: var(--display); font-weight: 700; font-size: 1.24rem;
  margin: 0 0 7px; letter-spacing: -0.012em; line-height: 1.2;
}
.nextup h3 a { color: var(--ink); text-decoration: none; }
.nextup h3 a:hover { color: var(--crimson); }
.nextup p { margin: 0 0 13px; font-size: 14.5px; color: var(--ink-soft); max-width: 82ch; }
.nextup .btn { margin-right: 8px; }

/* --- disclaimer ---------------------------------------------------------- */

.disclaimer {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--slate);
  padding: 15px 20px 16px;
  margin: 10px 0 6px;
}
.disclaimer h4 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate); margin: 0 0 7px;
}
.disclaimer p {
  margin: 0; font-size: 13.5px; color: var(--ink-soft); max-width: 96ch; line-height: 1.55;
}
.disclaimer p + p { margin-top: 7px; }
.disclaimer b { color: var(--ink); font-weight: 600; }

/* --- footer -------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--rule);
  margin-top: 26px; padding: 28px 0 50px;
  font-size: 13.5px; color: var(--slate);
}
footer .foot-grid { display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
footer p { margin: 0 0 6px; max-width: 62ch; }

/* ===========================================================================
   MODULE PAGES
   =========================================================================== */

.mod-head { padding: 22px 0 18px; border-bottom: 1px solid var(--rule); }
.mod-head h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem); letter-spacing: -0.022em;
  margin: 8px 0 8px; line-height: 1.03;
}
.mod-head .sub { margin: 0; color: var(--ink-soft); max-width: 92ch; font-size: 15.5px; }

.lab {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 26px;
  padding: 26px 0 10px;
  align-items: start;
}

/* control rail */
.rail {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 16px 16px 18px;
  position: sticky; top: 14px;
}
.rail h2, .ctl-col h2 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--crimson);
  margin: 0 0 13px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
.rail h2:not(:first-child) { margin-top: 22px; }

/* --- controls as a band across the top (used by the fault module) -------- */

.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 4px 26px;
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 17px 22px 20px;
  margin-top: 20px;
}
.ctl-col { min-width: 0; }
.ctl-col h2 { margin-top: 0; }
.ctl-col .btn { width: 100%; justify-content: center; margin-top: 7px; }

/* --- editable layer table (1D model module) ------------------------------ */

.ltab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ltab th {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate); font-weight: 500;
  text-align: left; padding: 0 5px 6px; white-space: nowrap;
}
.ltab td { padding: 3px 5px; border-top: 1px solid var(--rule); vertical-align: middle; }
.ltab input {
  width: 100%; min-width: 54px;
  font-family: var(--mono); font-size: 12.5px; padding: 4px 6px;
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
}
.ltab input:disabled { background: #F4F5F3; color: var(--slate); }
.ltab .ro {
  font-family: var(--mono); font-size: 12px; color: var(--crimson-dp);
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ltab .name { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.ltab .chip {
  width: 15px; height: 15px; display: inline-block; vertical-align: -3px;
  border: 1px solid rgba(22,25,28,.3); margin-right: 7px;
}
.ltab .rowbtn {
  border: 1px solid var(--rule); background: #fff; color: var(--slate);
  font-family: var(--mono); font-size: 13px; line-height: 1;
  padding: 4px 7px; cursor: pointer;
}
.ltab .rowbtn:hover { border-color: var(--crimson); color: var(--crimson); }
.tab-wrap { overflow-x: auto; }

/* --- stat strip under the section --------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 16px;
}
.stat {
  background: var(--cream);
  padding: 8px 12px 9px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.stat span { font-size: 11px; color: var(--ink-soft); line-height: 1.32; }
.stat b {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  color: var(--crimson-dp); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat.key { background: var(--crimson); }
.stat.key span { color: rgba(255,255,255,.82); }
.stat.key b { color: #fff; font-size: 15px; }
.stat.wide { grid-column: span 2; }
@media (max-width: 520px) {
  .stat.wide { grid-column: span 1; }
}

.ctl { margin-bottom: 14px; }
.ctl label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--ink-soft); margin-bottom: 5px; gap: 8px;
}
.ctl label .val {
  font-family: var(--mono); font-size: 12.5px; color: var(--crimson);
  font-weight: 500; font-variant-numeric: tabular-nums;
}
.ctl input[type=range] {
  width: 100%; margin: 0; height: 18px;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.ctl input[type=range]::-webkit-slider-runnable-track {
  height: 3px; background: var(--rule);
}
.ctl input[type=range]::-moz-range-track { height: 3px; background: var(--rule); }
.ctl input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--crimson); margin-top: -6px; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--crimson);
}
.ctl input[type=range]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff;
  background: var(--crimson); cursor: pointer; box-shadow: 0 0 0 1px var(--crimson);
}
.ctl select, .ctl input[type=number] {
  width: 100%; font-family: var(--body); font-size: 13px;
  padding: 6px 8px; border: 1px solid var(--rule); background: #fff; color: var(--ink);
}

.seg { display: flex; border: 1px solid var(--rule); }
.seg button {
  flex: 1; font-family: var(--body); font-size: 12px; padding: 7px 4px;
  background: #fff; border: 0; border-right: 1px solid var(--rule);
  color: var(--slate); cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--crimson); color: #fff; }

.check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 9px; }
.check input { accent-color: var(--crimson); width: 15px; height: 15px; }

.rail .btn { width: 100%; justify-content: center; margin-top: 6px; }

/* readouts */
.readout {
  background: var(--cream); border: 1px solid var(--cream-edge);
  padding: 11px 12px; margin-top: 4px;
}
.readout dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.readout dt { font-size: 12px; color: var(--ink-soft); }
.readout dd {
  margin: 0; font-family: var(--mono); font-size: 12.5px;
  color: var(--crimson-dp); font-weight: 500; text-align: right;
  font-variant-numeric: tabular-nums;
}
.readout dd.big { font-size: 14px; color: var(--crimson); }

/* plot stack */
.stage { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.plot {
  background: var(--panel); border: 1px solid var(--rule); padding: 13px 14px 12px;
}
.plot-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 9px; flex-wrap: wrap;
}
.plot-head h3 {
  font-family: var(--display); font-size: 1rem; font-weight: 700;
  margin: 0; letter-spacing: -0.008em;
}
.plot-head .hint {
  font-family: var(--mono); font-size: 10.5px; color: var(--slate);
  text-align: right; flex: 0 1 auto; min-width: 0;
}
.plot canvas { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }

/* section and its trace panel, side by side and sharing a time axis */
.sec-row { display: flex; gap: 10px; align-items: flex-start; }
.sec-row canvas { width: auto; flex: none; }
@media (max-width: 700px) {
  .sec-row { flex-direction: column; gap: 14px; }
}

/* stacked panels: layer model, seismic, traces */
#modelWrap { margin-bottom: 16px; }
.panel-col { flex: none; min-width: 0; max-width: 100%; }
.hint-line {
  font-family: var(--mono); font-size: 10.5px; color: var(--slate);
  margin: -4px 0 12px;
}
.sublabel {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 6px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.sublabel b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none;
  background: var(--crimson); color: #fff;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0; border-radius: 50%;
}
.sublabel .note {
  text-transform: none; letter-spacing: 0; color: var(--slate);
  font-size: 10.5px;
}
/* Panels in a row must start at the same height, or their plot boxes will not
   line up. A caption that wraps to two lines in a narrow column would otherwise
   push its canvas down relative to its neighbors. */
.sec-row .sublabel { min-height: 30px; align-content: flex-start; }

.legend {
  display: flex; gap: 7px 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10.5px; color: var(--slate);
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule);
  min-width: 0; max-width: 100%;
}
.legend span { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* prose legends: a paragraph, not a row of keyed swatches */
.legend.prose { display: block; }
.legend.prose span { display: block; line-height: 1.65; max-width: none; }
.legend i {
  width: 15px; height: 0; flex: none;
  border-top-width: 2px; border-top-style: solid; display: inline-block;
}
.legend i.sw {
  width: 15px; height: 10px; border: 1px solid rgba(22,25,28,.35);
  border-top-width: 1px;
}

/* teaching blocks */
.teach { display: grid; grid-template-columns: 1.12fr 1fr; gap: 22px; padding: 30px 0 10px; }
@media (min-width: 1100px) {
  .takeaway ul { columns: 2; column-gap: 26px; }
  .takeaway li { break-inside: avoid; }
}

.tryit {
  background: var(--cream); border: 1px solid var(--cream-edge);
  border-left: 4px solid var(--crimson); padding: 18px 22px 20px;
}
.tryit h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--crimson-dp); margin: 0 0 12px;
}
.tryit ol { margin: 0; padding-left: 19px; }
.tryit li { margin-bottom: 12px; font-size: 14.5px; }
.tryit li:last-child { margin-bottom: 0; }
.tryit li b { font-weight: 600; }
.tryit .ans {
  display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-soft);
}

.takeaway { background: var(--panel); border: 1px solid var(--rule); padding: 18px 22px 20px; }
.takeaway h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--crimson); margin: 0 0 12px;
}
.takeaway ul { margin: 0; padding-left: 18px; }
.takeaway li { margin-bottom: 10px; font-size: 14.5px; }
.takeaway li:last-child { margin-bottom: 0; }

code, .k { font-family: var(--mono); font-size: 0.92em; background: rgba(22,25,28,.055); padding: 1px 5px; }

details.notes { margin: 22px 0 0; border-top: 1px solid var(--rule); padding-top: 14px; }
details.notes summary {
  cursor: pointer; font-family: var(--mono); font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--crimson);
}
details.notes p, details.notes li { font-size: 14px; color: var(--ink-soft); max-width: 92ch; }

/* --- tabbed module layout ------------------------------------------------ */
/* A long module is hard to work through by scrolling, because the controls and
   the data end up off screen by the time you reach the discussion. These three
   pieces keep the live panel and its sliders pinned at the top while the
   explanation changes underneath. */

.labhead {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 10px 14px 8px;
  margin: 16px 0 0;
  /* sticks to the top so the sliders stay reachable while you read the result
     further down the page. Changing a parameter and watching the answer move
     is the entire point, and that cannot happen if they are never both on
     screen at once. */
  position: sticky; top: 0; z-index: 30;
  box-shadow: 0 6px 14px -8px rgba(22, 25, 28, .35);
}
.labhead .labgrid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 18px; align-items: start;
}
.labhead canvas { display: block; width: 100%; height: auto; }
.labhead .controls {
  margin: 0; border: 0; padding: 0; background: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px; align-items: start;
}
.labhead .ctl-col { display: contents; }
.labhead .ctl { margin-bottom: 4px; }
.labhead .ctl label { font-size: 10px; margin-bottom: 1px; }
.labhead .ctl input[type="range"] { margin: 0; }
.labhead .ctl-col h2 {
  grid-column: 1 / -1; font-size: 9.5px; margin: 5px 0 1px;
  padding-bottom: 2px;
}
.labhead .ctl-col h2:first-child { margin-top: 0; }
/* the long explanations belong in the step that introduces them, not in a
   header that has to stay short */
.labhead .hint-line, .labhead .btn { display: none; }
.labhead .cap {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--crimson); margin: 0 0 5px;
}
.labhead .cap span { text-transform: none; letter-spacing: 0; color: var(--slate); }

/* The tab strip has to read as a set of file tabs sitting on top of the panel
   it opens, otherwise it looks like a toolbar and nobody clicks it. */

.tabhint {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate); margin: 16px 0 6px;
}
.tabhint b { color: var(--crimson); font-weight: 600; }

/* The tab strip has to hold up to eleven tabs. It wraps rather than
   scrolling, because a tab that has scrolled out of sight is a tab nobody
   knows exists. Two things keep the wrap from looking like a mistake:
   row-gap, so a second row sits clear of the first rather than jammed against
   it, and the metrics below, which are tight enough that eleven tabs fit on
   one line at an ordinary desktop width. The crimson rule is drawn under the
   whole strip, so it lands beneath the last row wherever that falls. */
.tabs {
  display: flex; flex-wrap: wrap; gap: 4px 2px;
  border-bottom: 2px solid var(--crimson); margin: 0;
  position: sticky; top: 0; z-index: 29; background: var(--paper);
  padding-top: 14px;
}
.tabs button {
  font-family: var(--body); font-size: 12px; padding: 8px 9px 7px;
  background: var(--cream); color: var(--slate); cursor: pointer;
  border: 1px solid var(--rule); border-bottom: 0;
  border-top: 3px solid transparent;
  white-space: nowrap; position: relative; top: 1px;
}
/* Below about 1100px eleven tabs cannot fit however tight the metrics are,
   so give up the numbering prefix rather than the tab. */
@media (max-width: 1100px) {
  .tabs button { font-size: 11.5px; padding: 7px 7px 6px; }
}
.tabs button:hover { color: var(--ink); background: #fff; }
.tabs button[aria-selected="true"] {
  background: var(--panel); color: var(--crimson); font-weight: 600;
  border-top-color: var(--crimson); top: 0; padding-bottom: 10px;
}
/* The spacer separating the numbered steps from the reference tabs. It gives
   up its width first when the strip is tight, so it never costs a tab a place
   on the line. */
.tabs .gap { flex: 1 1 0; min-width: 0; border: 0; background: none; pointer-events: none; }

.tabpane {
  background: var(--panel); border: 1px solid var(--rule); border-top: 0;
  padding: 22px 26px 24px; animation: fade .18s ease-out;
}

/* Body copy inside a pane. One rule rather than a width pinned onto every
   paragraph, which is what left the text stopping short at different places. */
.tabpane .lede {
  font-size: 15.5px; color: var(--ink-soft); margin: 0 0 13px;
  max-width: none; overflow-wrap: break-word;
}
.tabpane .lede:last-of-type { margin-bottom: 16px; }
.tabpane .lede b { color: var(--ink); }
.tabpane > .plot-head { margin-bottom: 14px; }
.tabpane .legend { max-width: none; }

/* a numbered badge, so you always know where you are in the sequence */
.tabpane .plot-head h3 {
  font-size: 1.16rem; display: flex; align-items: center; gap: 10px;
}
.stepno {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--crimson); color: #fff;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.stepno.ref { background: var(--slate); font-size: 11px; }

/* keep the tab fills when the page is printed or saved as a PDF, otherwise
   the selected tab loses the only thing marking it as selected */
.tabs button, .tabs button[aria-selected="true"], .tabpane, .labhead, .btn {
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* forward and back inside the module, so the way on is never the way out */
.stepnav {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--rule);
}
/* three equal cells, so the middle label really is in the middle and the
   forward button sits flush right even on the first step where there is no
   back button to balance it */
.stepnav > * { flex: 1 1 0; min-width: 0; }
.stepnav > *:first-child { text-align: left; }
.stepnav > *:last-child { text-align: right; }
.stepnav .btn { margin: 0; }
.stepnav .where {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--slate); align-self: center;
}

/* --- reveal-on-demand answers -------------------------------------------- */

details.reveal { margin: 8px 0 0; }
details.reveal summary {
  cursor: pointer; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--crimson);
  list-style: none; display: inline-block;
  border: 1px solid var(--rule); padding: 3px 10px; background: #fff;
}
details.reveal summary::-webkit-details-marker { display: none; }
details.reveal summary:hover { background: var(--cream); }
details.reveal[open] summary { background: var(--cream); border-color: var(--cream-edge); }
details.reveal .ans { display: block; margin-top: 9px; }

.foot-grid .lic {
  font-size: 12.5px; color: var(--slate); max-width: 78ch; margin: 8px 0 0;
}
.foot-grid .lic .k { font-family: var(--mono); font-size: 12px; color: var(--crimson); }

.pager {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 26px 0 0; margin-top: 22px; border-top: 1px solid var(--rule); flex-wrap: wrap;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 940px) {
  .labhead .labgrid { grid-template-columns: 1fr; gap: 16px; }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .primer-grid { grid-template-columns: 1fr; gap: 22px; }
  .lab { grid-template-columns: 1fr; }
  .rail { position: static; }
  .teach { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .masthead nav { gap: 14px; }
  h1.title { font-size: 2.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  a.card:hover, .btn:hover { transform: none; }
}

@media print {
  .rail, .masthead nav, .pager, .btn { display: none; }
  body { background: #fff; }
  .lab { grid-template-columns: 1fr; }
}