/* ---------------------------------------------------------------------------
   Mountains: route planning case study
   Visual language borrowed from the USGS 7.5-minute quadrangle sheet.
   Contour texture is traced from 2,400 real USGS elevation samples over the
   Herman Gulch / Parnassus block. Route red and track blue are the same hex
   values the Python renderers draw with.
   --------------------------------------------------------------------------- */

:root {
  /* paper */
  --paper:     #f1ebdf;
  --paper-hi:  #f9f5ec;
  --paper-lo:  #e7dfcf;
  --paper-dp:  #ded4c0;

  /* ink */
  --ink:       #211e18;
  --ink-2:     #5c5548;
  --ink-3:     #6f6758;  /* was #8a8172 — 3.2:1 on paper, 2.7:1 over a contour */

  /* linework */
  --rule:      #cec3ad;
  --rule-hi:   #ded5c2;
  --neatline:  #3a352b;

  /* map hues */
  --contour:   #a8703c;
  --contour-i: #8c5825;
  --veg:       #cfdfc0;
  --veg-ink:   #56743f;
  --hydro:     #35789f;
  --hydro-t:   #d6e6ef;
  --route:     #bc1419;
  --track:     #2c7bb6;
  --summit:    #d99b09;

  /* terminal */
  --term-bg:   #1b1915;
  --term-ink:  #ded5c2;
  --term-dim:  #8b8272;

  --label: "Avenir Next Condensed", "HelveticaNeue-CondensedBold",
           "Arial Narrow", "Liberation Sans Narrow", sans-serif;
  --text:  "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
           "DejaVu Sans Mono", monospace;

  --gut: clamp(1.15rem, 4vw, 3.25rem);
  --max: 1180px;

  /* height of the fixed scroll ridgeline; everything that sits under it offsets by this */
  --ridge-h: 32px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(16px, 0.55vw + 14.6px, 18.5px);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* the whole page sits on a sheet of paper with real contours printed on it */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("contours.svg") center / 1080px auto repeat;
  /* .62 put a contour line under body text at ~2.7:1 for the small caps labels.
     .34 keeps the sheet reading as a map without competing with letterforms. */
  opacity: .34;
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

a { color: inherit; }

/* --------------------------------------------------------------- type ---- */

h1, h2, h3, h4, .lbl, .sec-no, th, .btn {
  font-family: var(--label);
  font-weight: 600;
  font-stretch: condensed;
}

.lbl {
  display: block;
  font-size: .68rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.3;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 68ch; }

p { margin: 0 0 1.05em; }
p + p { text-indent: 0; }

strong { font-weight: 600; }

.tick { color: var(--route); font-weight: 700; font-style: normal; }

/* ------------------------------------------------- scroll ridgeline ------ */

.ridge-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--ridge-h);
  background: var(--paper-hi);
  border-bottom: 1px solid var(--rule);
  z-index: 60;
  pointer-events: none;
}
.ridge-progress svg { display: block; width: 100%; height: 100%; }
.ridge-progress .base { fill: none; stroke: var(--rule); stroke-width: 2.4; }
.ridge-progress .done { fill: none; stroke: var(--route); stroke-width: 2.8; }

/* ----------------------------------------------------------- masthead ---- */

.masthead {
  padding-top: calc(var(--ridge-h) + clamp(1.5rem, 5vw, 3.5rem));
  padding-bottom: 0;
  border-bottom: 3px double var(--neatline);
  background:
    linear-gradient(180deg, rgba(249,245,236,.92) 0%, rgba(249,245,236,.72) 70%, rgba(249,245,236,.4) 100%);
}

.mast-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.mast-kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.1rem;
}
.mast-kicker::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 1px solid var(--rule);
}

h1 {
  margin: 0 0 .45em;
  font-size: clamp(2.35rem, 6.4vw, 4.6rem);
  line-height: .96;
  letter-spacing: -.005em;
  text-transform: uppercase;
  font-weight: 700;
}
h1 .sub {
  display: block;
  font-family: var(--text);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 2.1vw, 1.35rem);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--ink-2);
  margin-top: .6rem;
  max-width: 34ch;
}

/* survey marginalia block, top right */
.marginalia {
  border: 1px solid var(--neatline);
  background: rgba(249,245,236,.96);
  min-width: 15.5rem;
}
.marginalia .mg-head {
  padding: .35rem .7rem .3rem;
  border-bottom: 1px solid var(--neatline);
  background: var(--paper-lo);
}
.marginalia dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
}
.marginalia dt {
  font-family: var(--label);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: .32rem .7rem;
  border-bottom: 1px solid var(--rule-hi);
}
.marginalia dd {
  margin: 0;
  padding: .32rem .7rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  text-align: right;
  border-bottom: 1px solid var(--rule-hi);
  border-left: 1px solid var(--rule-hi);
  color: var(--ink);
}
.marginalia dt:last-of-type, .marginalia dd:last-of-type { border-bottom: 0; }

/* hero ridgeline: real Holy Cross elevation profile */
.hero-ridge {
  position: relative;
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(214,230,239,.28), rgba(207,223,192,.34));
}
.hero-ridge svg { display: block; width: 100%; height: clamp(96px, 15vw, 190px); }
.hero-ridge .fill { fill: rgba(168,112,60,.16); }
.hero-ridge .line { fill: none; stroke: var(--route); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.hero-ridge .grid { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ridge-cap {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  padding: .45rem 0 .8rem;
  border-top: 1px solid var(--rule);
}
.ridge-cap span { font-family: var(--label); font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3); }
.ridge-cap b { font-family: var(--mono); font-weight: 400; letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------------------------------------------------------------- nav ---- */

.legend-nav {
  position: sticky;
  top: var(--ridge-h);
  z-index: 50;
  background: rgba(241,235,223,.94);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--neatline);
}
.legend-nav ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legend-nav a {
  display: block;
  padding: .55rem .85rem;
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  border-right: 1px solid var(--rule);
  white-space: nowrap;
}
.legend-nav li:first-child a { padding-left: 0; }
.legend-nav a:hover, .legend-nav a:focus-visible { color: var(--route); background: var(--paper-hi); }
.legend-nav a .n { color: var(--ink-3); margin-right: .4rem; }

/* ------------------------------------------------------------ section ---- */

section { padding: clamp(3rem, 8vw, 6rem) 0 0; }
section:last-of-type { padding-bottom: clamp(3rem, 8vw, 6rem); }

.sec-head { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.sec-head .rule {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  border-bottom: 2px solid var(--neatline);
  padding-bottom: .3rem;
  margin-bottom: .9rem;
}
.sec-no {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--route);
  padding: .1rem .4rem;
  border: 1px solid var(--route);
}
h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3.1vw, 2.05rem);
  text-transform: uppercase;
  letter-spacing: .09em;
  line-height: 1.1;
  flex: 1;
}
.sec-head .dek {
  font-style: italic;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}

h3 {
  font-size: .82rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2.4rem 0 .7rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--rule);
}

/* ------------------------------------------------------ problem block ---- */

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.2rem);
  align-items: start;
}
/* grid children default to min-width:auto, which lets a wide <pre> blow out the
   track and push the whole page past the viewport. Clamp every grid child. */
.two-col > *, .wt-layout > *, .plate-pair > *, .scale-grid > *, .f-grid > * { min-width: 0; }

/* a bordered aside, like a note printed in the map margin */
.margin-note {
  border: 1px solid var(--neatline);
  background: rgba(249,245,236,.96);
  font-size: .92rem;
}
.margin-note .mn-head {
  padding: .4rem .85rem .35rem;
  border-bottom: 1px solid var(--neatline);
  background: var(--paper-lo);
}
.margin-note .mn-body { padding: .9rem .95rem .3rem; }
.margin-note p:last-child { margin-bottom: .9rem; }

/* the threshold demo table */
table.survey {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  background: rgba(249,245,236,.96);
}
table.survey caption {
  caption-side: top;
  text-align: left;
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: .4rem;
}
table.survey th, table.survey td {
  border: 1px solid var(--rule);
  padding: .38rem .6rem;
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  white-space: nowrap;
}
table.survey th {
  font-family: var(--label);
  font-size: .67rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--paper-lo);
  color: var(--ink-2);
  border-color: var(--neatline);
}
table.survey th:first-child, table.survey td:first-child {
  text-align: left;
  font-family: var(--text);
  font-size: .95rem;
  white-space: normal;
}
table.survey tbody tr:hover { background: rgba(214,230,239,.4); }
table.survey tr.total td {
  border-top: 2px solid var(--neatline);
  font-weight: 700;
  background: var(--paper-lo);
}
table.survey td.tier { font-family: var(--label); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; text-align: center; }
.tier-gold { color: var(--veg-ink); }
.tier-built { color: var(--contour-i); }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------- architecture ---- */

.split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  border: 1px solid var(--neatline);
  background: rgba(249,245,236,.96);
}
.split-col { padding: 0; min-width: 0; }
.split-col .sc-head {
  padding: .55rem .95rem .45rem;
  border-bottom: 1px solid var(--neatline);
}
.split-col.judgment .sc-head { background: var(--hydro-t); }
.split-col.code .sc-head { background: var(--veg); }
.split-col .sc-head .lbl { color: var(--ink-2); }
.split-col .sc-head b {
  display: block;
  font-family: var(--label);
  font-size: 1rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-top: .1rem;
}
.split-col ul { margin: 0; padding: .8rem .95rem .9rem 1.9rem; }
.split-col li { margin-bottom: .5rem; font-size: .93rem; line-height: 1.45; }
.split-col li::marker { color: var(--ink-3); }
.split-col li b { font-family: var(--mono); font-size: .82rem; font-weight: 400;
  background: var(--paper-lo); padding: .05em .3em; }

.split-seam {
  display: grid;
  place-items: center;
  border-inline: 1px dashed var(--neatline);
  background: repeating-linear-gradient(180deg, transparent 0 6px, rgba(58,53,43,.07) 6px 7px);
  padding: 0 .1rem;
  min-width: 2.1rem;
}
.seam-text {
  writing-mode: vertical-rl;
  font-family: var(--label);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.handoff {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  border-top: 1px solid var(--neatline);
  font-family: var(--mono);
  font-size: .74rem;
}
.handoff div { padding: .42rem .95rem; }
.handoff .h-r { text-align: right; border-left: 1px solid var(--rule-hi); }
.handoff .h-mid { border-inline: 1px dashed var(--neatline); }
.handoff .arrow { color: var(--route); }

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .split-seam {
    border-inline: 0;
    border-block: 1px dashed var(--neatline);
    padding: .45rem 0;
    background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(58,53,43,.07) 6px 7px);
  }
  .seam-text { writing-mode: horizontal-tb; }
  .handoff { grid-template-columns: 1fr; }
  .handoff .h-r { text-align: left; border-left: 0; border-top: 1px solid var(--rule-hi); }
  .handoff .h-mid { border-inline: 0; border-block: 1px dashed var(--neatline); }
}

/* guardrail list */
.guards { list-style: none; margin: 0; padding: 0; }
.guards li {
  border-top: 1px solid var(--rule);
  padding: .95rem 0 .95rem 3.4rem;
  position: relative;
}
.guards li:last-child { border-bottom: 1px solid var(--rule); }
.guards li .g-no {
  position: absolute;
  left: 0;
  top: .95rem;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--route);
  border: 1px solid var(--route);
  padding: .05rem .35rem;
}
.guards li b {
  font-family: var(--label);
  font-size: .95rem;
  letter-spacing: .05em;
  display: block;
  margin-bottom: .15rem;
}
.guards li span { display: block; color: var(--ink-2); font-size: .95rem; }

/* ---------------------------------------------------------- walkthrough -- */

.wt-layout {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
.wt-steps { min-width: 0; }
.wt-rail {
  position: sticky;
  top: calc(var(--ridge-h) + 2.9rem);
  border: 1px solid var(--neatline);
  background: rgba(249,245,236,.97);
}
.wt-rail .r-head { padding: .4rem .7rem .35rem; border-bottom: 1px solid var(--neatline);
  background: var(--paper-lo); }
.wt-rail ol { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.wt-rail a {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: .1rem;
  padding: .42rem .6rem .42rem .5rem;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-hi);
  color: var(--ink-2);
}
.wt-rail li:last-child a { border-bottom: 0; }
.wt-rail a .s-no { font-family: var(--mono); font-size: .7rem; color: var(--ink-3); }
.wt-rail a .s-nm { font-family: var(--label); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.25; }
.wt-rail a[aria-current="true"] { background: var(--paper-dp); color: var(--ink); }
.wt-rail a[aria-current="true"] .s-no { color: var(--route); }
.wt-rail a:hover { background: var(--paper-lo); }

@media (max-width: 900px) {
  .wt-layout { grid-template-columns: 1fr; }
  .wt-rail { position: static; }
  .wt-rail ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
  .wt-rail a { border-right: 1px solid var(--rule-hi); }
}

.step { padding-bottom: clamp(2rem, 5vw, 3.2rem); scroll-margin-top: calc(var(--ridge-h) + 3rem); }
.step + .step { border-top: 1px solid var(--rule); padding-top: clamp(1.6rem, 4vw, 2.4rem); }
.step-head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .55rem; flex-wrap: wrap; }
.step-head .s-no {
  font-family: var(--mono); font-size: .78rem; color: var(--route);
  border: 1px solid var(--route); padding: .05rem .35rem;
}
.step-head h3 { margin: 0; border: 0; padding: 0; font-size: 1rem; letter-spacing: .11em; }
.step-head .tool {
  font-family: var(--mono); font-size: .72rem; color: var(--ink-2);
  background: var(--paper-dp); padding: .1rem .4rem;
}

/* code + terminal */
.term {
  border: 1px solid var(--neatline);
  background: var(--term-bg);
  color: var(--term-ink);
  margin: .9rem 0 0;
  font-size: .78rem;
}
.term .t-bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .32rem .7rem;
  border-bottom: 1px solid #3a352b;
  background: #26231d;
}
.term .t-bar span {
  font-family: var(--label);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--term-dim);
}
.term pre {
  margin: 0;
  padding: .75rem .8rem .85rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .755rem;
  line-height: 1.55;
  -webkit-overflow-scrolling: touch;
}
.term .cmd { color: #e8c46a; }
.term .cmd::before { content: "$ "; color: var(--term-dim); }
.term .hi { color: #f0908d; }
.term .ok { color: #9fc27a; }
.term .dim { color: var(--term-dim); }

/* json/spec block on paper */
.spec {
  border: 1px solid var(--neatline);
  background: var(--paper-hi);
  margin: .9rem 0 0;
}
.spec .t-bar {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .32rem .7rem; border-bottom: 1px solid var(--neatline); background: var(--paper-lo);
}
.spec .t-bar span { font-family: var(--label); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); }
.spec pre {
  margin: 0; padding: .75rem .8rem .85rem; overflow-x: auto;
  font-family: var(--mono); font-size: .755rem; line-height: 1.6; color: var(--ink);
}
.spec .k { color: var(--hydro); }
.spec .s { color: var(--veg-ink); }
.spec .n { color: var(--contour-i); }
.spec .c { color: var(--ink-3); font-style: italic; }

.note-line {
  font-style: italic;
  color: var(--ink-2);
  font-size: .93rem;
  margin: .85rem 0 1.15em;
  padding-left: .9rem;
  border-left: 2px solid var(--contour);
}
.note-line:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- plates --- */

figure.plate { margin: 0 0 clamp(1.5rem, 3.5vw, 2.4rem); }
figure.plate .frame {
  border: 1px solid var(--neatline);
  padding: 5px;
  background: var(--paper-hi);
}
figure.plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: #fff;
}
figure.plate figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem .8rem;
  margin-top: .5rem;
  padding-top: .35rem;
  border-top: 1px solid var(--rule);
}
figure.plate .p-no {
  font-family: var(--label); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--route); white-space: nowrap;
  grid-row: span 2; padding-top: .1rem;
}
figure.plate .p-tool {
  font-family: var(--mono); font-size: .7rem; color: var(--ink-3);
}
figure.plate .p-txt { font-style: italic; font-size: .9rem; color: var(--ink-2); line-height: 1.45; }
figure.plate .p-txt b { font-style: normal; font-family: var(--label); letter-spacing: .04em;
  color: var(--ink); font-size: .95rem; }

.plate-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 720px) { .plate-pair { grid-template-columns: 1fr; } }

.plate-lead .frame { padding: 7px; border-width: 2px; }

/* let the decisive plate in the walkthrough span back across the step rail */
@media (min-width: 901px) {
  figure.plate.plate-break { margin-left: calc(-13.5rem - clamp(1.5rem, 3.5vw, 3rem)); }
}

/* ---------------------------------------------------------------- scale -- */

.scale-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--neatline);
  border-right: 0;
  border-bottom: 0;
  background: rgba(249,245,236,.96);
}
@media (max-width: 620px) { .scale-grid { grid-template-columns: repeat(2, 1fr); } }
.scale-grid div {
  padding: .85rem .9rem .8rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.scale-grid b {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: .3rem;
}
.scale-grid .u { font-size: .95rem; color: var(--ink-3); }

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

footer {
  border-top: 3px double var(--neatline);
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: 1.6rem 0 2.6rem;
  background: rgba(249,245,236,.88);
  font-size: .86rem;
  color: var(--ink-2);
}
footer .f-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem 2.5rem;
}
footer p { margin: .3rem 0 0; }

/* --------------------------------------------------------- narrow ------- */

@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; }
  .mast-grid { grid-template-columns: 1fr; align-items: start; }
  .marginalia { min-width: 0; width: 100%; }
}

@media (max-width: 460px) {
  .legend-nav a { padding: .5rem .55rem; font-size: .64rem; letter-spacing: .12em; }
  .marginalia dt { font-size: .6rem; padding: .3rem .5rem; }
  .marginalia dd { font-size: .72rem; padding: .3rem .5rem; }
  .term pre, .spec pre { font-size: .69rem; }
  .guards li { padding-left: 2.9rem; }
}

@media print {
  body::before { opacity: .25; }
  .ridge-progress, .legend-nav { display: none; }
}