/* ==========================================================================
   STREAMLINE MODERNE — exhibition room. Loaded on a/streamline-moderne.html.

   TIER 2. The museum's horizontal room: triple-line chrome courses run the
   full viewport width as the actual section dividers, every corner on the
   route is rounded, content hugs the left edge and steps rightward down each
   line — rank is a position along the run, never a size. One chrome capsule
   travels the masthead course at constant velocity; nothing rises, nothing
   steps, nothing sharpens.

   Colour: the ground stands for the pale painted stucco the research finds,
   and chrome is trim, a material (kcc:surface-1, surface-2, interface-2); the
   exact values and the one deep petrol accent are the page's own reading.
   Chrome is always a drawn gradient, never an image.
   Contrast on the cream ground #F4EDDF:
     ink      #232930  12.6:1  (body, headings)
     ink-2    #4A525B   6.8:1  (secondary text)
     petrol   #155263   7.5:1  (accents, links, grade notes)
     chrome-d #5A646E   5.2:1  (small caps labels — text floor)
     steel    #6E7883   3.9:1  (DECORATIVE line work only, never text)
   On the petrol lead capsule, cream #F4EDDF is 7.5:1.
   ========================================================================== */

@font-face {
  font-family: "Jost SM";
  src: url("fonts/jost.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

.sm-page {
  --sm-cream: #F4EDDF;
  --sm-cream-2: #EDE3CE;
  --sm-ink: #232930;
  --sm-ink-2: #4A525B;
  --sm-petrol: #155263;
  --sm-chrome-d: #5A646E;
  --sm-steel: #6E7883;
  --sm-chrome-hi: #EDF1F3;
  --sm-geo: "Jost SM", "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
  /* the drawn chrome: bright crown, shaded keel — a lit metal rod */
  --sm-chrome: linear-gradient(180deg, var(--sm-chrome-hi) 0%, #B9C1C8 38%, var(--sm-steel) 62%, #99A2AB 100%);
  /* one horizontal step in the slipstream; items multiply it by depth */
  --sm-step: clamp(1.25rem, 5vw, 4.5rem);
  background: var(--paper);
}
.sm-page main {
  background: var(--sm-cream);
  color: var(--sm-ink);
  font-family: var(--sm-geo);
  overflow-x: clip; /* the traveller exits stage right without a scrollbar */
}
.sm { padding-block: clamp(1.5rem, 4vw, 3rem) 0; }
.sm ::selection { background: var(--sm-petrol); color: var(--sm-cream); }
.sm a:focus-visible { outline: 3px solid var(--sm-petrol); outline-offset: 3px; border-radius: 999px; }

/* ---- the masthead: the prow ----------------------------------------------
   Left-hugging, wide, low. The name is a sans in capitals, after the
   storefront letters the research documents, pulled sideways: scale-X plus
   tracking do the streamlining (CURATORIAL). */
.sm-mast { padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 4rem) clamp(1.75rem, 4vw, 3rem); }
.sm-kicker { margin: 0 0 1.1rem; font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.28em; text-transform: uppercase; color: var(--sm-chrome-d); }
.sm-h1 { margin: 0 0 1.3rem; font: 600 clamp(2rem, 5.6vw, 4.1rem)/1.06 var(--sm-geo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sm-ink); }
.sm-h1__stretch {
  /* pre-transform width is compensated so the scaled glyphs exactly fill the
     heading box instead of painting past it (transforms do not affect layout) */
  display: block;
  width: calc(100% / 1.16);
  transform: scaleX(1.16);
  transform-origin: left center;
}
.sm-defining { margin: 0 0 1.4rem; max-width: 44ch; font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 300; line-height: 1.7; letter-spacing: 0.03em; }
.sm-aliases { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* rounded without exception: every chip on the route is a full capsule */
.sm-chip {
  display: inline-block;
  padding: 0.3rem 1.1rem;
  border: 1px solid var(--sm-chrome-d);
  border-radius: 999px;
  font: 500 0.72rem/1.5 var(--sm-geo);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sm-ink-2);
}
.sm-chip--cost { border-style: dashed; }
.sm-chip--avoid { color: var(--sm-petrol); border-color: var(--sm-petrol); }

/* ---- the courses: structural dividers, full page width -------------------
   The classic three-line course: parallel, continuous, edge to edge. The
   middle line is heavier; all ends are rounded. Chrome is drawn. */
.sm-course { width: 100%; display: grid; gap: 7px; padding-block: 0.2rem; }
.sm-course i { display: block; height: 3px; border-radius: 999px; background: var(--sm-chrome); }
.sm-course i:nth-child(2) { height: 6px; }
.sm-course--tail { padding-block-end: clamp(2rem, 5vw, 3.5rem); }

/* ---- the traveller: one element, constant velocity ------------------------
   The room's whole motion budget (CURATORIAL). Resting transform is the
   designed still — the capsule sits at rest two thirds along its course —
   so reduced motion shows a composed frame, not a stall. */
.sm-course--travel { position: relative; }
.sm-capsule {
  position: absolute;
  left: -7rem;
  top: 50%;
  width: 5.5rem;
  height: 1.05rem;
  margin-top: -0.525rem;
  border-radius: 999px;
  background: var(--sm-chrome);
  box-shadow: 0 1px 0 rgba(35, 41, 48, 0.18);
  /* static-first: this IS the designed still (reduced motion, no animation) */
  transform: translateX(min(72vw, 58rem));
}
@media (prefers-reduced-motion: no-preference) {
  .sm-capsule { animation: sm-travel 19s linear infinite; }
  @keyframes sm-travel {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 14rem)); }
  }
}

/* ---- the lines: sections as speed lines -----------------------------------
   Left-hugging and asymmetric: a shared left rail, open air to the right,
   and successive items stepping deeper into the slipstream. Headings all
   one size — rank on this page is never a size. */
.sm-line { padding: clamp(1.25rem, 3.5vw, 2.25rem) clamp(1.25rem, 5vw, 4rem) clamp(1.75rem, 4.5vw, 3rem); }
.sm-h2 {
  /* the name plate rides its course: pulled up over the lines, capsule-set.
     Block-level flex with fit-content width — an inline-level box would not
     honour the negative block margin that seats it on the lines. */
  display: flex;
  width: fit-content;
  align-items: baseline;
  gap: 0.7em;
  margin: calc(-1 * clamp(1.25rem, 3.5vw, 2.25rem) - 1.55rem) 0 clamp(1.4rem, 3vw, 2rem);
  padding: 0.45rem 1.4rem;
  background: var(--sm-cream);
  border: 1px solid var(--sm-chrome-d);
  border-radius: 999px;
  font: 600 0.82rem/1.4 var(--sm-geo);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sm-ink);
  position: relative;
}
.sm-h2__n { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.1em; color: var(--sm-petrol); }

/* the slipstream: each later item starts one step deeper */
.sm-run { max-width: 62rem; }
.sm-run + .sm-run { margin-top: clamp(1.1rem, 2.5vw, 1.75rem); }
.sm-run--2 { margin-inline-start: var(--sm-step); }
.sm-run--3 { margin-inline-start: calc(var(--sm-step) * 2); }
.sm-run--4 { margin-inline-start: calc(var(--sm-step) * 3); }

.sm-claim { margin: 0 0 0.8rem; max-width: 38ch; font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 300; line-height: 1.6; letter-spacing: 0.015em; }
.sm-text { margin: 0; max-width: 56ch; font-size: 1rem; font-weight: 400; line-height: 1.8; letter-spacing: 0.02em; }
.sm-text--sig { max-width: 64ch; }
.sm-text--sig b { font-weight: 600; color: var(--sm-petrol); }
.sm-text--dim { color: var(--sm-ink-2); }
.sm-label { margin: 0 0 0.7rem; font: 500 0.72rem/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sm-chrome-d); }
.sm-costs, .sm-avoid { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- the rank device: position carries it, size never --------------------
   Three identical capsules on one course; only their position differs. The
   lead is the filled one — a colour state, not a scale state. */
.sm-rank { position: relative; max-width: 56rem; padding-block: 1.4rem; }
.sm-rank::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(50% - 8px);
  height: 3px;
  border-radius: 999px;
  background: var(--sm-chrome);
}
.sm-rank::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(50% + 5px);
  height: 3px;
  border-radius: 999px;
  background: var(--sm-chrome);
}
.sm-rank__row { position: relative; z-index: 1; display: flex; gap: clamp(1rem, 6vw, 5rem); align-items: center; }
.sm-rank__row .sm-rank__item:nth-child(2) { margin-inline-start: clamp(1rem, 8vw, 7rem); }
.sm-rank__item {
  display: inline-block;
  padding: 0.42rem 1.5rem;
  border: 1px solid var(--sm-chrome-d);
  border-radius: 999px;
  background: var(--sm-cream);
  font: 500 0.75rem/1.4 var(--sm-geo);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sm-ink-2);
}
.sm-rank__item--lead { background: var(--sm-petrol); border-color: var(--sm-petrol); color: var(--sm-cream); }

/* ---- the three axes -------------------------------------------------------
   Same content drawn three ways. This room's panel is the rounded one; the
   other two keep their own geometry inside their frames — the frames
   themselves stay on this room's route and stay rounded. */
.sm-axes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); max-width: 62rem; }
.sm-axis { border: 1px solid var(--sm-chrome-d); border-radius: 1.6rem 1rem 1rem 1.6rem; padding: 1.2rem 1.2rem 1.4rem; }
.sm-axis[data-verdict="this"] { border-color: var(--sm-petrol); box-shadow: inset 0 0 0 1px var(--sm-petrol); }
.sm-axis__frame { border-radius: 1rem 0.6rem 0.6rem 1rem; background: var(--sm-cream-2); }
.sm-axis__frame svg { display: block; width: 100%; height: auto; }
.sm-axis__frame svg * { fill: none; stroke: var(--sm-chrome-d); stroke-width: 1.6; }
.sm-axis[data-verdict="this"] svg * { stroke: var(--sm-petrol); }
.sm-axis__name { margin: 1rem 0 0.45rem; font: 600 0.75rem/1.6 var(--sm-geo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sm-ink); }
.sm-axis__name b { color: var(--sm-petrol); font-weight: 600; }
.sm-axis__n { font: 500 0.7rem/1 var(--mono); letter-spacing: 0.08em; color: var(--sm-chrome-d); margin-inline-end: 0.35em; }
.sm-axis__cap { margin: 0; font-size: 0.85rem; font-weight: 400; line-height: 1.7; letter-spacing: 0.015em; color: var(--sm-ink-2); }
.sm-axis__link { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; margin-top: 0.8rem; padding: 0.28rem 1.1rem; border: 1px solid var(--sm-petrol); border-radius: 999px; font: 500 0.72rem/1.5 var(--sm-geo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sm-petrol); text-decoration: none; }
.sm-axis__link:hover { background: var(--sm-petrol); color: var(--sm-cream); }

/* ---- the documented marks: four small frames on the same rounded route -- */
.sm-marks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: clamp(0.75rem, 2vw, 1.25rem); max-width: 62rem; }
.sm-mark__frame { border-radius: 1rem 0.6rem 0.6rem 1rem; background: var(--sm-cream-2); padding: 0.5rem 0.4rem; }
.sm-mark__frame svg { display: block; width: 100%; height: auto; }
.sm-mark__frame svg * { fill: none; stroke: var(--sm-chrome-d); stroke-width: 1.6; stroke-linecap: round; }
.sm-mark__cap { margin: 0.65rem 0 0; font-size: 0.85rem; line-height: 1.65; letter-spacing: 0.015em; color: var(--sm-ink-2); }
.sm-mark__cap b { font-weight: 600; color: var(--sm-ink); }

.sm-frozen { margin: 0; max-width: 40ch; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 300; line-height: 1.6; letter-spacing: 0.02em; color: var(--sm-petrol); }

/* ---- narrow: the slipstream compresses, it never stacks vertically --------
   Offsets shrink with the clamp; below 40rem they halve again so the deepest
   run keeps a full measure. The courses stay full width at every size. */
@media (max-width: 40rem) {
  .sm-page { --sm-step: 0.9rem; }
  .sm-h1 { letter-spacing: 0.08em; }
  .sm-h1__stretch { width: calc(100% / 1.08); transform: scaleX(1.08); }
  .sm-rank__row { gap: 0.75rem; }
  .sm-rank__row .sm-rank__item:nth-child(2) { margin-inline-start: 0.75rem; }
  .sm-rank__item { padding-inline: 0.9rem; letter-spacing: 0.12em; }
}

/* Under ~350px the capsule row outruns the sheet (breakfinder): keep the
   capsules on their line but let them slim down and drop the stagger. */
@media (max-width: 349px) {
  .sm-rank__item { padding-inline: 0.8rem; letter-spacing: 0.04em; }
  .sm-rank__row .sm-rank__item:nth-child(2) { margin-inline-start: 0.6rem; }
}

/* ==========================================================================
   THE RECORD — more of the same run. Each block is a numbered speed line
   whose name plate sits on its chrome course; items lead from the left and
   step rightward. Sentences stay Jost 1rem/1.8 in ink on cream; the display
   treatment (wide tracked capitals, capsules) is for labels only.
   ========================================================================== */
/* The shell's scroll reveal must never leave the record at opacity 0. */
.sm-page main > section.sm-rec { opacity: 1; transform: none; transition: none; will-change: auto; }
.sm-rec { color: var(--sm-ink); font-family: var(--sm-geo); }
.sm-rec ::selection { background: var(--sm-petrol); color: var(--sm-cream); }
.sm-rec a { color: var(--sm-petrol); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.sm-rec :focus-visible { outline: 3px solid var(--sm-petrol); outline-offset: 3px; border-radius: 999px; }
.sm-rec b { font-weight: 600; }
.sm-rec .sm-text + .sm-text { margin-top: 0.8rem; }
.sm-h2__c { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.1em; color: var(--sm-petrol); }
.sm-rp { font-size: 1rem; line-height: 1.8; letter-spacing: 0.02em; }
.sm-quiet { margin: 0; font: 400 0.8rem/1.6 var(--mono); color: var(--sm-ink-2); }

/* the particulars: a timetable — label leads the line, value follows it */
.sm-dl { margin: 0; max-width: 56rem; }
.sm-dl > div { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 0.3rem 1.5rem; padding-block: 0.55rem; border-bottom: 1px solid rgba(90, 100, 110, 0.35); }
.sm-dl > div:last-child { border-bottom: 0; }
.sm-dl dt { font: 500 0.72rem/1.9 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sm-chrome-d); padding-top: 0.2rem; }
.sm-dl dd { margin: 0; font-size: 1rem; line-height: 1.8; letter-spacing: 0.02em; }

/* the diagnostic: the one line the eye should run along */
.sm-dx { margin: 0; max-width: 44ch; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 300; line-height: 1.6; letter-spacing: 0.02em; color: var(--sm-petrol); }
.sm-dx--quiet { margin-top: 1rem; max-width: 56ch; font-size: 1rem; line-height: 1.8; font-weight: 400; }

/* what carries the look: stations along the line */
.sm-stations { list-style: none; margin: clamp(1rem, 2.5vw, 1.5rem) 0 0; padding: 0; max-width: 62rem; }
.sm-st { display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; gap: 0.5rem 1.5rem; align-items: start; padding-block: 0.6rem; }
.sm-st + .sm-st { border-top: 1px solid rgba(90, 100, 110, 0.35); }
.sm-st__k { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.sm-st__c { font: 500 0.68rem/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sm-petrol); }
.sm-st__v { padding-top: 0.55rem; }
.sm-st__v > * + * { margin-top: 0.5rem; }
.sm-st__v .sm-rp { margin: 0; }
.sm-face { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

/* capsule links: rounded without exception, 44px tall */
.sm-rec a.sm-cap, .sm-rec .sm-cap, .sm-rec a.sm-tag, .sm-rec a.sm-go {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
  padding: 0.3rem 1.2rem; border: 1px solid var(--sm-chrome-d); border-radius: 999px;
  font: 600 0.74rem/1.3 var(--sm-geo); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sm-ink); text-decoration: none; background: var(--sm-cream);
}
.sm-rec a.sm-cap:hover, .sm-rec a.sm-tag:hover, .sm-rec a.sm-go:hover { border-color: var(--sm-petrol); color: var(--sm-petrol); }
.sm-rec a.sm-go--lead { background: var(--sm-petrol); border-color: var(--sm-petrol); color: var(--sm-cream); }
.sm-rec a.sm-go--lead:hover { background: var(--sm-ink); border-color: var(--sm-ink); color: var(--sm-cream); }
.sm-rec a.sm-go--quiet { letter-spacing: 0.1em; color: var(--sm-petrol); border-color: var(--sm-petrol); }
.sm-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* as-built colours: a chip on the line, its hex beside it on cream */
.sm-sws { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem; }
.sm-swatch { display: inline-flex; align-items: center; gap: 0.5rem; }
.sm-sw__c { display: inline-block; width: 2.6rem; height: 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(35, 41, 48, 0.35); }
.sm-sw__h { font: 400 0.8rem/1.4 var(--mono); color: var(--sm-ink); }

/* rules: the area plate leads, each rule its kind then its sentence */
.sm-area { margin: 0 0 0.6rem; font: 600 0.78rem/1.5 var(--sm-geo); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sm-ink); }
.sm-rules { list-style: none; margin: 0; padding: 0; max-width: 60rem; }
.sm-rules li { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: 0.2rem 1.5rem; padding-block: 0.45rem; }
.sm-rules li + li { border-top: 1px solid rgba(90, 100, 110, 0.25); }
.sm-k { font: 500 0.7rem/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sm-chrome-d); padding-top: 0.35rem; }
.sm-ev { display: inline-block; margin-inline-start: 0.4rem; padding: 0 0.6rem; border: 1px solid var(--sm-petrol); border-radius: 999px; font: 500 0.68rem/1.6 var(--mono); letter-spacing: 0.06em; color: var(--sm-petrol); vertical-align: 0.1em; }
.sm-rl .sm-run + .sm-run { margin-top: clamp(1.4rem, 3vw, 2rem); }

/* the research ledger: rounded, horizontal rules only */
.sm-tw { max-width: 44rem; overflow-x: auto; border: 1px solid var(--sm-chrome-d); border-radius: 1.4rem; }
.sm-ledger { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.5; }
.sm-ledger th, .sm-ledger td { padding: 0.6rem 1.1rem; text-align: left; border-bottom: 1px solid rgba(90, 100, 110, 0.3); }
.sm-ledger tr:last-child > * { border-bottom: 0; }
.sm-ledger thead th { font: 500 0.7rem/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sm-chrome-d); background: var(--sm-cream-2); }
.sm-ledger tbody th { font-weight: 500; }

/* neighbours: name plate leads, the difference follows on the same line */
.sm-nbs { list-style: none; margin: 0; padding: 0; max-width: 60rem; }
.sm-nb { display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr; gap: 0.4rem 1.5rem; align-items: start; padding-block: 0.7rem; }
.sm-nb + .sm-nb { border-top: 1px solid rgba(90, 100, 110, 0.35); margin-inline-start: var(--sm-step); }
.sm-nb__k { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; }
.sm-nb__k .sm-k { padding-top: 0; }
.sm-nb__v { padding-top: 0.5rem; }

/* exits: the lead capsule is filled; the rest follow deeper in the slipstream */
.sm-exits { list-style: none; margin: 0; padding: 0; max-width: 62rem; }
.sm-exits li { display: grid; grid-template-columns: minmax(14rem, 19rem) 1fr; gap: 0.3rem 1.5rem; align-items: center; padding-block: 0.4rem; }
.sm-exits li:nth-child(2) { margin-inline-start: var(--sm-step); }
.sm-exits li:nth-child(n+3) { margin-inline-start: calc(var(--sm-step) * 2); }
.sm-exits .sm-go { justify-self: start; }
.sm-exits .sm-rp { color: var(--sm-ink-2); }
.sm-foot { margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sm-rec .sm-course--tail { margin-top: clamp(0.5rem, 2vw, 1.25rem); }

@media (max-width: 40rem) {
  .sm-dl > div, .sm-st, .sm-rules li, .sm-nb, .sm-exits li { grid-template-columns: 1fr; }
  .sm-st__v, .sm-nb__v { padding-top: 0; }
  .sm-k { padding-top: 0; }
  .sm-exits li, .sm-exits li:nth-child(n+2), .sm-nb + .sm-nb { margin-inline-start: 0; }
  .sm-exits li { padding-block: 0.6rem; }
  .sm-rec a.sm-cap, .sm-rec a.sm-go { letter-spacing: 0.1em; padding-inline: 1rem; }
  .sm-rec .sm-h2 { letter-spacing: 0.16em; padding-inline: 1.1rem; }
}