/*
  Niles Biological, Inc. — visual world

  THESIS:   A teacher does not browse for a specimen, they key one out: preserved
            or living, which grade, which injection, which pack. So the site is
            the artifact that does that job in this trade — a taxonomic
            dichotomous key, whose terminals are catalogue lines with prices on
            them. It refuses the category's two arrangements: the supply-house
            grid with a blue masthead, category tiles and a classroom photo, and
            the hairline-minimal white "lab-clean" page in thin grey sans.
  OWN-WORLD:The dyes a specimen is injected with. A double-injected specimen has
            carmine arteries and cerulean veins; a couplet has exactly two
            branches. So branch a is carmine and branch b is cerulean, and
            neither colour is ever used for anything else. They sit on the deep
            bottle-green of preserving fluid and a cool, faintly green manual
            stock — never cream. Square corners, hairline rules, one recurring
            texture: the meniscus, the curved fluid line in a jar. Components are
            named from the trade: .key .couplet .lead .jar .tray .grade .tag
            .meniscus .binomial .nap
  STORY:    A teacher with a dissection unit to plan reads the first couplet,
            follows one dye to a terminal, sees a real per-unit price and the
            grade it applies to, learns that living material ships Mon–Wed, and
            telephones with an item and a number already in hand.
  FIRST VIEWPORT: The key itself at full scale. Couplet 1 set large: 1a in
            carmine, 1b in cerulean, each statement running out on leader dots to
            a terminal or a reference. Left of it the h1 and the telephone tag;
            right of it, from 64em, the specimen-jar plate. The telephone is the
            primary action in the bar above, in the hero, and in every closing
            band.
  FORM:     The dichotomous key, candidate 4 of seven grounded directions
            (seed 73a20d97, direction scope, persuade). Staging is the key's own
            progressive disclosure: the document carries every couplet, and a
            resolved path dims the branches not taken.
  MOTION:   One authored moment — on the homepage, couplet 1's two leader rules
            draw out to their terminals once, 620ms, staggered by dye. Everything
            else is a single 200ms fade-and-rise on first scroll into view.
            Content is visible by default; prefers-reduced-motion removes all of
            it and leaves the drawn state.
  ORDER:    Mobile-first. The base rules are the phone composition and every
            media query is min-width.
*/

/* ==================================================================
   1. Fonts — self-hosted, latin subset, no external requests
   ================================================================== */
@font-face {
  font-family: "Petrona";
  src: url("/fonts/petrona-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/petrona-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Petrona";
  src: url("/fonts/petrona-latin-wght-italic.woff2") format("woff2-variations"),
       url("/fonts/petrona-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/martian-mono-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/martian-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ==================================================================
   2. Tokens
   ================================================================== */
:root {
  /* preserving fluid — the ground of every dark band */
  --fluid-950: #0b1a15;
  --fluid-900: #102420;
  --fluid-800: #17332c;
  --fluid-700: #1f463c;
  --fluid-600: #2d5c4e;

  /* manual stock — cool, faintly green. Never cream, never parchment. */
  --stock-050: #f4f7f4;
  --stock-100: #e8eee9;
  --stock-200: #d6dfd8;
  --stock-300: #bcc8be;
  /* Muted text on the fluid grounds only: 6.19:1 on --fluid-900. */
  --stock-400: #94a497;
  /* Muted text on light grounds only: 5.61:1 on --stock-050, 5.14:1 on
     --stock-100. #6C7E70 measured 3.67:1 on --stock-100 and failed AA. */
  --stock-500: #556759;

  /* injection carmine — branch a, and nothing else */
  --carmine-700: #8e1226;  /* 8.59:1 on --stock-050 */
  --carmine-600: #b31631;  /* 6.33:1 on --stock-050 — rules and large figures */
  --carmine-500: #d11e3c;  /* light grounds only; 3.38:1 on fluid, forbidden there */
  --carmine-300: #ec8a99;  /* 6.69:1 on --fluid-900 — the dark-ground substitute */
  --carmine-100: #f9dee3;

  /* injection cerulean — branch b, and nothing else */
  --cerulean-800: #0b3b63; /* 10.69:1 on --stock-050 */
  --cerulean-700: #0e4e80; /* 8.04:1 on --stock-050 */
  --cerulean-600: #12649f; /* light grounds only; 2.86:1 on fluid, forbidden there */
  --cerulean-400: #5b9dc8; /* 5.48:1 on --fluid-900 — the dark-ground substitute */
  --cerulean-100: #d9e8f3;

  /* per-branch roles. Redeclared inside .lead-a / .lead-b and on dark bands, so
     every rule in the key is written once against --dye rather than twice. */
  --dye: var(--fluid-700);
  --dye-deep: var(--fluid-800);
  --dye-wash: var(--stock-100);

  --display: "Petrona", Georgia, "Times New Roman", serif;
  --text: "Petrona", Georgia, "Times New Roman", serif;
  --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--2: 0.6875rem;
  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: 1.4375rem;
  --step-3: clamp(1.6rem, 1.3rem + 1.35vw, 2.15rem);
  --step-4: clamp(2rem, 1.45rem + 2.5vw, 3.05rem);
  --step-5: clamp(2.3rem, 1.5rem + 4.1vw, 4.1rem);

  --measure: 68ch;
  --wrap: 76rem;

  /* space — 4px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3.5rem;
  --sp-9: 5rem;

  --radius: 2px;
  --rule: 1px solid var(--stock-200);
  --rule-firm: 1px solid var(--stock-300);
  --shadow-jar: 0 16px 34px -26px rgba(11, 26, 21, 0.5), 0 2px 5px -3px rgba(11, 26, 21, 0.16);

  /* the leader-dot texture, used by the key. Drawn on a 2px-tall box so the
     circles are round rather than clipped to a hairline. */
  --dots: radial-gradient(circle, currentColor 1px, transparent 1.25px);
}

*, *::before, *::after { box-sizing: border-box; }

/* ==================================================================
   3. Base
   ================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* so an anchored couplet clears the sticky header */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--stock-050);
  color: var(--fluid-800);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.72;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-5); letter-spacing: -0.024em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); letter-spacing: -0.012em; }
h4 { font-size: var(--step-1); }

p, ul, ol, dl, table, figure { margin: 0; }

a { color: var(--fluid-800); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--fluid-600); }

/* One focus treatment for the whole site. The carmine ring is the single
   sanctioned non-branch use of a dye: a focus ring must be one fixed colour. */
:focus-visible {
  outline: 2px solid var(--carmine-600);
  outline-offset: 2px;
}
.sec-fluid :focus-visible,
.foot :focus-visible,
.idbar :focus-visible,
.cta :focus-visible { outline-color: var(--carmine-300); }

strong, b { font-weight: 650; }

em.binomial, .binomial {
  font-style: italic;
  font-weight: 400;
}

code, kbd, samp {
  font-family: var(--mono);
  font-size: 0.86em;
  font-weight: 450;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--fluid-900);
  color: var(--stock-050);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.skip:focus { left: var(--sp-4); top: var(--sp-4); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ==================================================================
   4. The meniscus — the recurring texture
   ------------------------------------------------------------------
   The fluid line in a jar: a hairline with a shallow repeating curve sitting on
   it. It separates bands, opens page mastheads, and tops the footer. It is the
   one ornament in the system and it is always horizontal, always full width,
   always 10px tall.
   ================================================================== */
.meniscus {
  height: 10px;
  width: 100%;
  background-image:
    radial-gradient(14px 10px at 50% 100%, var(--stock-300) 0 44%, transparent 46%),
    linear-gradient(to bottom, transparent calc(100% - 1px), var(--stock-300) calc(100% - 1px));
  background-repeat: repeat-x, repeat-x;
  background-size: 28px 10px, 100% 100%;
}
.meniscus-dark {
  background-image:
    radial-gradient(14px 10px at 50% 100%, var(--fluid-600) 0 44%, transparent 46%),
    linear-gradient(to bottom, transparent calc(100% - 1px), var(--fluid-600) calc(100% - 1px));
}
.meniscus-dye {
  background-image:
    radial-gradient(14px 10px at 50% 100%, var(--carmine-600) 0 44%, transparent 46%),
    linear-gradient(to bottom, transparent calc(100% - 1px), var(--cerulean-700) calc(100% - 1px));
}

/* ==================================================================
   5. Type labels — the accession label strip
   ================================================================== */
.tlabel {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 550;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stock-500);
  margin: 0 0 var(--sp-4);
}
.tlabel-d { color: var(--stock-300); }
.sec-fluid .tlabel, .cta .tlabel, .foot .tlabel { color: var(--stock-400); }
.sec-fluid .tlabel-d, .cta .tlabel-d, .foot .tlabel-d { color: var(--fluid-600); }

/* ==================================================================
   6. Tags — every button on this site is a specimen tag
   ------------------------------------------------------------------
   A rectangle with a punched hole at the left and a hairline string running out
   of it. The hole is the only curve in the system, because a real tag has one.
   ================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 46px;
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  border: 1px solid var(--fluid-900);
  border-radius: var(--radius);
  background: var(--fluid-900);
  color: var(--stock-050);
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 550;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.tag-hole {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
  position: relative;
}
/* the string */
.tag-hole::after {
  content: "";
  position: absolute;
  left: calc(100% + 3px);
  top: 50%;
  width: 7px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.tag-lbl { display: block; }

.tag-pri:hover { background: var(--fluid-700); border-color: var(--fluid-700); color: var(--stock-050); }

.tag-gho {
  background: transparent;
  color: var(--fluid-800);
  border-color: var(--fluid-700);
}
.tag-gho:hover { background: var(--fluid-900); border-color: var(--fluid-900); color: var(--stock-050); }

.tag-blk { display: flex; width: 100%; justify-content: center; }

/* On a fluid ground the tags invert. */
.sec-fluid .tag-pri, .cta .tag-pri, .foot .tag-pri {
  background: var(--stock-050);
  border-color: var(--stock-050);
  color: var(--fluid-950);
}
.sec-fluid .tag-pri:hover, .cta .tag-pri:hover, .foot .tag-pri:hover {
  background: var(--stock-200);
  border-color: var(--stock-200);
}
.sec-fluid .tag-gho, .cta .tag-gho, .foot .tag-gho {
  color: var(--stock-100);
  border-color: var(--fluid-600);
}
.sec-fluid .tag-gho:hover, .cta .tag-gho:hover, .foot .tag-gho:hover {
  background: var(--fluid-800);
  border-color: var(--stock-400);
  color: var(--stock-050);
}

/* ==================================================================
   7. Depth callout — a value held between two rules
   ================================================================== */
.depth {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-width: 0;
}
.depth-line {
  flex: 1 1 auto;
  height: 1px;
  min-width: var(--sp-3);
  background: var(--stock-300);
}
.depth-v {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 550;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fluid-700);
  font-variant-numeric: tabular-nums;
}
.sec-fluid .depth-line, .cta .depth-line { background: var(--fluid-600); }
.sec-fluid .depth-v, .cta .depth-v { color: var(--stock-200); }

/* ==================================================================
   8. Jar — the panel, with corner registration ticks
   ================================================================== */
.jar {
  position: relative;
  background: var(--stock-100);
  border: var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-jar);
}
/* four 9px corner ticks, drawn as backgrounds so there is no extra markup */
.jar::before,
.jar::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  pointer-events: none;
}
.jar::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--fluid-700);
  border-left: 2px solid var(--fluid-700);
  box-shadow: 0 0 0 0 transparent;
}
.jar::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--fluid-700);
  border-right: 2px solid var(--fluid-700);
}
.jar > * + * { margin-top: var(--sp-4); }
.jar-note {
  font-size: var(--step--1);
  color: var(--stock-500);
  line-height: 1.6;
}
.sec-fluid .jar {
  background: var(--fluid-800);
  border-color: var(--fluid-600);
  color: var(--stock-100);
  box-shadow: none;
}
.sec-fluid .jar::before, .sec-fluid .jar::after { border-color: var(--stock-400); }
.sec-fluid .jar-note { color: var(--stock-400); }

/* ==================================================================
   9. Identification bar
   ================================================================== */
.idbar {
  background: var(--fluid-950);
  color: var(--stock-200);
  border-bottom: 1px solid var(--fluid-700);
}
.idbar-in {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
}
.idbar-name {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--stock-050);
}
.idbar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--stock-400);
}
.idbar-meta span { position: relative; }
.idbar-meta span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(var(--sp-2) * -1 - 1px);
  top: 0.45em;
  bottom: 0.3em;
  width: 1px;
  background: var(--fluid-600);
}

/* ==================================================================
   10. Header
   ================================================================== */
.head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--stock-050);
  border-bottom: var(--rule);
  transition: box-shadow 160ms ease;
}
.head.is-stuck {
  box-shadow: 0 1px 0 var(--stock-200), 0 10px 24px -22px rgba(11, 26, 21, 0.45);
}
.head-in {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.brand-mark { flex: 0 0 auto; width: 40px; height: 40px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-a {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--fluid-900);
}
.brand-b {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stock-500);
}

.head-act { display: flex; align-items: center; gap: var(--sp-3); }

.head-tel {
  display: none;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
  text-align: right;
}
.head-tel-k {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stock-500);
}
.head-tel-n {
  font-family: var(--mono);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fluid-900);
  font-variant-numeric: tabular-nums;
}
.head-tel:hover .head-tel-n { color: var(--carmine-700); }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 1px solid var(--stock-300);
  border-radius: var(--radius);
  color: var(--fluid-800);
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 550;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-bars { display: flex; flex-direction: column; gap: 3px; width: 15px; }
.menu-bars i { display: block; height: 1.5px; background: currentColor; }

.nav { grid-column: 1 / -1; display: none; }
.nav.is-open { display: block; }
.nav-list { list-style: none; margin: 0; padding: 0 0 var(--sp-3); }
.nav-item { border-top: var(--rule); }
.nav-lnk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fluid-800);
}
.nav-lnk.is-on { color: var(--carmine-700); }
.nav-caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}
.nav-sub { list-style: none; margin: 0 0 var(--sp-3); padding: 0 0 0 var(--sp-4); }
.nav-sub-lnk {
  display: block;
  padding: var(--sp-2) 0;
  text-decoration: none;
  border-left: 2px solid var(--stock-200);
  padding-left: var(--sp-3);
}
.nav-sub-lnk:hover { border-left-color: var(--carmine-600); }
.nav-sub-n {
  display: block;
  font-size: var(--step-0);
  font-weight: 550;
  color: var(--fluid-800);
  line-height: 1.3;
}
.nav-sub-s {
  display: block;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--stock-500);
  line-height: 1.5;
  margin-top: 2px;
}

/* ==================================================================
   11. Hero
   ================================================================== */
.hero {
  background: var(--stock-050);
  border-bottom: var(--rule);
  padding-block: var(--sp-7) var(--sp-8);
}
.hero-in { display: grid; gap: var(--sp-7); }
.hero-h1 { margin-bottom: var(--sp-5); }
.hero-h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--carmine-700);
}
.hero-lead {
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: 54ch;
  color: var(--fluid-800);
}
.hero-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.hero-fine {
  margin-top: var(--sp-5);
  font-family: var(--mono);
  font-size: var(--step--2);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--stock-500);
}
.hero-fine .tel { color: var(--fluid-800); }

/* the jar plate beside the hero */
.plate {
  position: relative;
  background: var(--stock-100);
  border: var(--rule-firm);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4);
}
.plate-cap {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: var(--rule);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--stock-500);
}
.dwg { width: 100%; height: auto; }

/* ==================================================================
   12. Sections
   ================================================================== */
.sec { padding-block: var(--sp-8); }
.sec-stock { background: var(--stock-100); border-block: var(--rule); }
.sec-fluid {
  background: var(--fluid-900);
  color: var(--stock-100);
  border-block: 1px solid var(--fluid-700);
}
.sec-fluid h1, .sec-fluid h2, .sec-fluid h3, .sec-fluid h4 { color: var(--stock-050); }
.sec-fluid a { color: var(--stock-050); }
.sec-fluid a:hover { color: var(--carmine-300); }

.sec-hd { margin-bottom: var(--sp-6); max-width: var(--measure); }
.sec-hd h2 { margin-bottom: var(--sp-4); }
.sec-hd > p:not(.tlabel) {
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--fluid-700);
}
.sec-fluid .sec-hd > p:not(.tlabel) { color: var(--stock-200); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose > h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-4); }
.prose > h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.prose > ul, .prose > ol { padding-left: var(--sp-5); }
.prose li + li { margin-top: var(--sp-2); }
.prose .lead {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--fluid-700);
}
.sec-fluid .prose, .sec-fluid .prose .lead { color: var(--stock-100); }

.split { display: grid; gap: var(--sp-7); }

/* Grid and flex items default to min-width:auto, which means a wide table or a
   long unbroken string inside one refuses to shrink and pushes the whole column
   past the viewport. Every container on this site that can hold a .tray, a
   drawing or a code span opts out of that. */
.split > *,
.hero-in > *,
.cta-in > *,
.foot-in > *,
.head-in > *,
.group > *,
.seq-m > *,
.jar > *,
.plate > * { min-width: 0; }
.jar, .plate, .nap, .tray-scroll { min-width: 0; max-width: 100%; }

/* ==================================================================
   13. The key — the signature component
   ------------------------------------------------------------------
   An ordered list of couplets. Each couplet holds exactly two leads, a and b.
   A lead is a numeral, a statement, leader dots, and then either a reference to
   another couplet or a terminal with a price. The dye is set once per lead, on
   --dye, and every rule below reads from it.
   ================================================================== */
.key {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--stock-300);
}
.couplet {
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--stock-300);
}
.couplet:target .couplet-n-v {
  background: var(--fluid-900);
  color: var(--stock-050);
}
.couplet-n {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.couplet-n-k {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stock-500);
}
.couplet-n-v {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--fluid-900);
  padding: 1px var(--sp-2);
  border: 1px solid var(--stock-300);
  font-variant-numeric: tabular-nums;
}
.couplet-h {
  max-width: var(--measure);
  margin-bottom: var(--sp-4);
  font-size: var(--step-0);
  color: var(--stock-500);
  line-height: 1.6;
}
.couplet-leads { list-style: none; margin: 0; padding: 0; }

.lead { --dye: var(--fluid-700); --dye-wash: var(--stock-100); }
.lead-a { --dye: var(--carmine-700); --dye-rule: var(--carmine-600); --dye-wash: var(--carmine-100); }
.lead-b { --dye: var(--cerulean-800); --dye-rule: var(--cerulean-700); --dye-wash: var(--cerulean-100); }
.sec-fluid .lead-a, .cta .lead-a { --dye: var(--carmine-300); --dye-rule: var(--carmine-300); --dye-wash: var(--fluid-800); }
.sec-fluid .lead-b, .cta .lead-b { --dye: var(--cerulean-400); --dye-rule: var(--cerulean-400); --dye-wash: var(--fluid-800); }

.lead + .lead { margin-top: var(--sp-3); }

.lead-in {
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  grid-template-areas:
    "n txt"
    ".  end";
  align-items: start;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-3) 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.lead-in:hover { background: var(--dye-wash); border-bottom-color: var(--dye-rule, var(--dye)); }

.lead-n {
  grid-area: n;
  justify-self: start;
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--stock-050);
  background: var(--dye);
  padding: 3px var(--sp-2);
  min-width: 2.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sec-fluid .lead-n, .cta .lead-n { color: var(--fluid-950); }

.lead-txt {
  grid-area: txt;
  font-size: var(--step-1);
  font-weight: 450;
  line-height: 1.5;
  color: var(--fluid-800);
  text-wrap: pretty;
}
.sec-fluid .lead-txt, .cta .lead-txt { color: var(--stock-100); }
.lead-in:hover .lead-txt { color: var(--dye); }

/* The leader dots. Drawn, never typed, so they reflow and are never read out. */
.lead-dots { display: none; }

.lead-end { grid-area: end; display: flex; align-items: baseline; gap: var(--sp-2); }

.lead-goto {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stock-500);
  white-space: nowrap;
}
.sec-fluid .lead-goto, .cta .lead-goto { color: var(--stock-400); }
.lead-goto-n {
  font-weight: 650;
  color: var(--dye);
  border-bottom: 1.5px solid var(--dye-rule, var(--dye));
  padding-bottom: 1px;
}

.lead-term {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.lead-term-n {
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.3;
  color: var(--dye);
}
.lead-term-p { display: block; }

/* the resolved state: the branch not taken drops to a hairline */
.key.is-resolved .lead:not(.is-taken) .lead-in { opacity: 1; }
.key.is-resolved .lead:not(.is-taken) .lead-n {
  background: transparent;
  color: var(--stock-500);
  box-shadow: inset 0 0 0 1px var(--stock-300);
}
.key.is-resolved .lead:not(.is-taken) .lead-txt { color: var(--stock-500); }
.key.is-resolved .lead:not(.is-taken) .lead-term-n { color: var(--stock-500); }

/* the hero's key, set larger */
.key-hero { border-top: 2px solid var(--fluid-900); }
.key-hero .lead-txt { font-size: var(--step-2); line-height: 1.32; font-weight: 500; }
.key-hero .lead-n { font-size: var(--step-0); padding: 4px var(--sp-3); }
.key-hero .couplet { padding-block: var(--sp-6); }
.key-hero .lead-term-n { font-size: var(--step-1); }

.key-note {
  margin-top: var(--sp-5);
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--stock-500);
  max-width: var(--measure);
}
.sec-fluid .key-note { color: var(--stock-400); }

/* ==================================================================
   14. Tray — the dense price table
   ================================================================== */
.tray-scroll {
  overflow-x: auto;
  border: var(--rule-firm);
  border-radius: var(--radius);
  background: var(--stock-050);
  -webkit-overflow-scrolling: touch;
}
.tray-scroll:focus-visible { outline-offset: -2px; }
.tray {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  line-height: 1.5;
}
.tray caption {
  caption-side: top;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 550;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stock-500);
  background: var(--stock-100);
  border-bottom: 1px solid var(--stock-300);
}
.tray th, .tray td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--stock-200);
}
.tray thead th {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fluid-800);
  background: var(--stock-050);
  border-bottom: 1px solid var(--stock-300);
  white-space: nowrap;
}
.tray tbody th {
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--fluid-900);
}
.tray tbody tr:last-child th, .tray tbody tr:last-child td { border-bottom: 0; }
.tray tbody tr:hover { background: var(--stock-100); }
.tray .num {
  font-family: var(--mono);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--fluid-900);
}
.tray .tray-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--text);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--stock-500);
  line-height: 1.5;
  white-space: normal;
}
.tray-note {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--stock-500);
}

/* the figure, wherever it appears */
.fig {
  font-family: var(--mono);
  /* Martian Mono has a large x-height and wide glyphs; at 1em it reads a size
     larger than the Petrona it sits beside. 0.92em is the optical match. */
  font-size: 0.92em;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--fluid-900);
  white-space: nowrap;
}
.fig-unit {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 450;
  letter-spacing: 0.04em;
  color: var(--stock-500);
  white-space: nowrap;
}
.sec-fluid .fig, .cta .fig { color: var(--stock-050); }
.sec-fluid .fig-unit, .cta .fig-unit { color: var(--stock-400); }

/* ==================================================================
   15. Grade ladder — the same organism at two or three grades
   ================================================================== */
.grades { display: grid; gap: var(--sp-4); }
.grade {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--stock-050);
  border: var(--rule-firm);
  /* the tie-rule along the top edge of a label, not a side accent bar */
  border-top: 2px solid var(--fluid-700);
  border-radius: var(--radius);
}
.grade-a { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
.grade-n { font-size: var(--step-2); }
.grade-code {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 550;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stock-500);
  padding: 2px var(--sp-2);
  border: 1px solid var(--stock-300);
}
.grade-fig {
  font-family: var(--mono);
  font-size: var(--step-2);
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fluid-900);
}
.grade-b > p { line-height: 1.65; }
.grade-suits {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--rule);
  font-size: var(--step--1);
  color: var(--stock-500);
  line-height: 1.6;
}
.grade-suits::before {
  content: "Suits";
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fluid-700);
  padding-top: 0.15em;
}
.sec-stock .grade { background: var(--stock-050); }

/* ==================================================================
   16. Catalogue rows — the five groups
   ================================================================== */
.groups { border-top: 1px solid var(--stock-300); }
.group-hd {
  display: none;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stock-500);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--stock-300);
}
.group {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--stock-200);
}
.group-a { display: flex; align-items: baseline; gap: var(--sp-3); }
.group-ref {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--stock-400);
  font-variant-numeric: tabular-nums;
}
.group-n { font-size: var(--step-2); }
.group-n a { text-decoration-color: var(--stock-300); }
.group-n a:hover { color: var(--carmine-700); text-decoration-color: currentColor; }
.group-b { max-width: 56ch; line-height: 1.65; }
.group-c { min-width: 0; }

/* ==================================================================
   17. Sequence — the numbered ordering steps
   ================================================================== */
.sequence { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stock-300); }
.seq-m {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--stock-200);
  transition: background-color 180ms ease;
}
.seq-m.is-now { background: var(--stock-100); }
.sec-fluid .seq-m { border-bottom-color: var(--fluid-700); }
.sec-fluid .seq-m.is-now { background: var(--fluid-800); }
.seq-a { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.seq-ref {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--stock-050);
  background: var(--fluid-900);
  padding: 3px var(--sp-2);
}
.sec-fluid .seq-ref { background: var(--stock-050); color: var(--fluid-950); }
.seq-hold {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--carmine-700);
  border: 1px solid var(--carmine-600);
  padding: 2px var(--sp-2);
}
.sec-fluid .seq-hold { color: var(--carmine-300); border-color: var(--carmine-300); }
.seq-n { font-size: var(--step-2); }
.seq-b { max-width: 60ch; line-height: 1.65; }
.seq-more { margin-top: var(--sp-5); }
.seq-more a {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 550;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==================================================================
   18. Identification block
   ================================================================== */
.nap {
  background: var(--stock-050);
  border: 1px solid var(--stock-300);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.nap-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--stock-300);
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 550;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nap-hd-k { color: var(--fluid-800); }
.nap-hd-v { color: var(--stock-500); }
.nap-hd-v abbr { text-decoration: none; border-bottom: 1px dotted var(--stock-400); }
.nap-name {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--fluid-900);
  margin-bottom: var(--sp-2);
}
.nap-addr { font-style: normal; line-height: 1.5; margin-bottom: var(--sp-4); }
.nap-st, .nap-city { display: block; }
.nap-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--step--1);
  line-height: 1.5;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--stock-200);
}
.nap-rows dt {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stock-500);
  padding-top: 0.15em;
}
.nap-rows dd { margin: 0; color: var(--fluid-800); }
.nap-tz { color: var(--stock-500); font-size: 0.92em; }
.nap-rows .tel {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* the email address is set in the mono face too, so the identification block
   reads as one record rather than two kinds of thing */
.nap-rows .mail { font-family: var(--mono); font-weight: 550; word-break: break-all; }
.mail { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* on the fluid grounds */
.foot .nap, .sec-fluid .nap, .cta .nap {
  background: var(--fluid-800);
  border-color: var(--fluid-600);
}
.foot .nap-hd, .sec-fluid .nap-hd, .cta .nap-hd { border-bottom-color: var(--fluid-600); }
.foot .nap-hd-k, .sec-fluid .nap-hd-k, .cta .nap-hd-k { color: var(--stock-100); }
.foot .nap-hd-v, .sec-fluid .nap-hd-v, .cta .nap-hd-v { color: var(--stock-400); }
.foot .nap-name, .sec-fluid .nap-name, .cta .nap-name { color: var(--stock-050); }
.foot .nap-addr, .sec-fluid .nap-addr, .cta .nap-addr { color: var(--stock-200); }
.foot .nap-rows, .sec-fluid .nap-rows, .cta .nap-rows { border-top-color: var(--fluid-600); }
.foot .nap-rows dt, .sec-fluid .nap-rows dt, .cta .nap-rows dt { color: var(--stock-400); }
.foot .nap-rows dd, .sec-fluid .nap-rows dd, .cta .nap-rows dd { color: var(--stock-100); }
.foot .nap-rows dd a, .sec-fluid .nap-rows dd a { color: var(--stock-050); }

/* ==================================================================
   19. Page masthead + breadcrumbs
   ================================================================== */
.phead {
  background: var(--stock-050);
  padding-top: var(--sp-6);
}
.phead-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
}
.crumbs { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.06em; }
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0; padding: 0;
}
.crumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.crumbs li + li::before {
  content: "/";
  color: var(--stock-300);
}
.crumbs a { color: var(--stock-500); text-decoration: none; }
.crumbs a:hover { color: var(--fluid-800); text-decoration: underline; }
.crumbs [aria-current] { color: var(--fluid-800); font-weight: 600; }
.phead-ref {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stock-500);
}
.phead-body { padding-bottom: var(--sp-7); max-width: 62ch; }
.phead-h1 { margin-bottom: var(--sp-4); }
.phead-lead {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--fluid-700);
}

/* ==================================================================
   20. FAQ — native details/summary, works with JS off
   ================================================================== */
.faq { border-top: 1px solid var(--stock-300); }
.faq-i { border-bottom: 1px solid var(--stock-200); }
.faq-i summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
  color: var(--fluid-900);
}
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary:hover { color: var(--carmine-700); }
.faq-sign {
  flex: 0 0 auto;
  position: relative;
  width: 14px; height: 14px;
  margin-top: 0.35em;
}
.faq-sign::before, .faq-sign::after {
  content: "";
  position: absolute;
  background: var(--fluid-700);
}
.faq-sign::before { left: 0; right: 0; top: 6px; height: 1.5px; }
.faq-sign::after { top: 0; bottom: 0; left: 6px; width: 1.5px; transition: opacity 140ms ease; }
.faq-i[open] .faq-sign::after { opacity: 0; }
.faq-a { padding-bottom: var(--sp-5); max-width: var(--measure); }
.faq-a > * + * { margin-top: var(--sp-3); }
.faq-a p { line-height: 1.68; }

/* ==================================================================
   21. Forms
   ================================================================== */
.form { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: var(--sp-2); }
.field label, .check label {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fluid-800);
}
.field-req {
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--carmine-700);
  text-transform: none;
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--sp-3);
  background: var(--stock-050);
  border: 1px solid var(--stock-300);
  border-radius: 0;
  color: var(--fluid-900);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.5;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fluid-700); }
.field-hint {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--stock-500);
}
.field-err {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--carmine-700);
}
.field.is-err input, .field.is-err select, .field.is-err textarea { border-color: var(--carmine-600); }
.grid-2 { display: grid; gap: var(--sp-5); }
.check { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; }
.check input { width: 20px; height: 20px; margin-top: 0.2em; accent-color: var(--fluid-800); }
.check label { text-transform: none; letter-spacing: 0.01em; font-family: var(--text); font-size: var(--step--1); line-height: 1.6; font-weight: 400; }
/* honeypot — off screen, never display:none, so a bot still finds it */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note {
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--stock-500);
}
.form-err {
  padding: var(--sp-4);
  border: 1px solid var(--carmine-600);
  border-top: 2px solid var(--carmine-600);
  background: var(--carmine-100);
  color: var(--carmine-700);
  font-size: var(--step--1);
  line-height: 1.6;
}
.form-err ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }

/* ==================================================================
   22. Closing action band
   ================================================================== */
.cta {
  background: var(--fluid-950);
  color: var(--stock-100);
}
.cta-in { padding-block: var(--sp-8); display: grid; gap: var(--sp-6); }
.cta-h { color: var(--stock-050); margin-bottom: var(--sp-4); }
.cta-copy > p { line-height: 1.68; max-width: 56ch; color: var(--stock-200); }
.cta-id {
  margin-top: var(--sp-4);
  font-family: var(--mono);
  font-size: var(--step--2);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--stock-400);
}
.cta-act { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.cta-hrs {
  margin-top: var(--sp-4);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stock-400);
}

/* ==================================================================
   23. Footer
   ================================================================== */
.foot { background: var(--fluid-950); color: var(--stock-200); }
.foot-in { padding-block: var(--sp-8) var(--sp-6); display: grid; gap: var(--sp-7); }
.foot .brand-a { color: var(--stock-050); }
.foot .brand-b { color: var(--stock-400); }
.foot-id { display: grid; gap: var(--sp-5); }
.foot-cta { margin: 0; }
.foot-nav { display: grid; gap: var(--sp-6); }
.foot-h {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stock-400);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--fluid-700);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li + li { margin-top: var(--sp-2); }
.foot-col a {
  color: var(--stock-200);
  text-decoration: none;
  font-size: var(--step--1);
  line-height: 1.5;
}
.foot-col a:hover { color: var(--stock-050); text-decoration: underline; }
.foot-btm {
  display: grid;
  gap: var(--sp-2);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--fluid-700);
}
.foot-legal, .foot-note {
  font-family: var(--mono);
  font-size: var(--step--2);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--stock-400);
}
.foot-legal a, .foot-note a { color: var(--stock-200); }

/* ==================================================================
   24. Content components inside jars and prose
   ================================================================== */
.doclist { display: grid; gap: var(--sp-4); }
.doclist dt {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 650;
  color: var(--fluid-900);
  line-height: 1.3;
}
.sec-fluid .doclist dt { color: var(--stock-050); }
.doclist dd {
  margin: var(--sp-1) 0 0;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--stock-300);
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--stock-500);
}
.sec-fluid .doclist dd { border-left-color: var(--fluid-600); color: var(--stock-400); }

.nextlist { counter-reset: n; list-style: none; margin: 0; padding: 0; }
.nextlist li {
  counter-increment: n;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--sp-3);
  line-height: 1.6;
}
.nextlist li + li { margin-top: var(--sp-3); }
.nextlist li::before {
  content: counter(n);
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 650;
  color: var(--stock-050);
  background: var(--fluid-900);
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
}

.policy-lead { font-size: var(--step-0); line-height: 1.65; color: var(--stock-500); }
.policy-grid { display: grid; gap: var(--sp-3); }
.policy-btn {
  display: grid;
  gap: 2px;
  padding: var(--sp-4);
  border: 1px solid var(--stock-300);
  border-top: 2px solid var(--fluid-700);
  border-radius: var(--radius);
  background: var(--stock-050);
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.policy-btn:hover { border-top-color: var(--carmine-600); background: var(--stock-100); }
.policy-btn-n {
  font-family: var(--display);
  font-size: var(--step-0);
  font-weight: 650;
  color: var(--fluid-900);
  line-height: 1.3;
}
.policy-btn-s {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--stock-500);
}
.sheet-note {
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--stock-500);
  padding-top: var(--sp-3);
  border-top: var(--rule);
}
.sec-fluid .sheet-note { color: var(--stock-400); border-top-color: var(--fluid-600); }

.price-basis {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--rule);
  max-width: var(--measure);
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--stock-500);
}
.sec-fluid .price-basis { color: var(--stock-400); border-top-color: var(--fluid-600); }

.areas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.areas li {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--stock-200);
}
.sec-fluid .areas li { border-bottom-color: var(--fluid-700); }

/* a marked callout — used for the living-culture shipping constraint */
.mark {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--cerulean-100);
  border: 1px solid var(--cerulean-400);
  border-top: 2px solid var(--cerulean-700);
  border-radius: var(--radius);
}
.mark-k {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cerulean-800);
}
.mark p { font-size: var(--step--1); line-height: 1.65; color: var(--fluid-800); }
.sec-fluid .mark {
  background: var(--fluid-800);
  border-color: var(--cerulean-400);
  border-top-color: var(--cerulean-400);
}
.sec-fluid .mark-k { color: var(--cerulean-400); }
.sec-fluid .mark p { color: var(--stock-100); }

/* search results */
.results { border-top: 1px solid var(--stock-300); }
.result { padding-block: var(--sp-5); border-bottom: 1px solid var(--stock-200); }
.result-n { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.result-u {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--stock-500);
  margin-bottom: var(--sp-2);
}
.result p { font-size: var(--step--1); line-height: 1.6; color: var(--stock-500); }

/* ==================================================================
   25. Drawings — the plates
   ------------------------------------------------------------------
   Drawn, not photographed. Ink is stock-400 on the light ground; the two dyes
   appear only where a vessel system is actually filled, which is the one place
   in the system where they are not marking a branch but marking the thing they
   literally are.
   ================================================================== */
.dwg-num {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 550;
  letter-spacing: 0.08em;
  fill: var(--stock-500);
}
.dwg-lbl {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  fill: var(--fluid-900);
}
.dwg-rule { stroke: var(--fluid-700); stroke-width: 1; }
.dwg-leader { stroke: var(--stock-400); stroke-width: 1; }
.dwg-body { stroke: var(--stock-400); stroke-width: 1.2; }
.dwg-code-box { fill: none; stroke: var(--fluid-700); stroke-width: 1.2; }
.dwg-code {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  fill: var(--fluid-900);
}
.dwg-art { fill: none; stroke: var(--carmine-600); stroke-width: 2.1; stroke-linecap: round; }
.dwg-ven { fill: none; stroke: var(--cerulean-600); stroke-width: 2.1; stroke-linecap: round; }
.dwg-v3  { fill: none; stroke: var(--stock-400); stroke-width: 1.8; stroke-linecap: round;
           stroke-dasharray: 5 3; }
.dwg-kn rect { fill: var(--stock-050); stroke: var(--fluid-800); stroke-width: 1.2; }
.dwg-kn text {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  fill: var(--fluid-900);
}
.dwg-tb rect { fill: none; stroke: var(--fluid-800); stroke-width: 1.2; }
.dwg-tb line { stroke: var(--fluid-800); stroke-width: 1; }

/* keynote list beneath a plate */
.knlist {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: var(--sp-4) 0 0;
  border-top: var(--rule);
}
.knlist li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.knlist li + li { margin-top: var(--sp-3); }
.knlist-n {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 700;
  color: var(--fluid-900);
  width: 1.3rem; height: 1.3rem;
  display: grid; place-items: center;
  border: 1px solid var(--fluid-800);
}
.knlist-t {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--stock-500);
}

/* ==================================================================
   26. Motion — one authored moment, then a single reveal
   ================================================================== */
.reveal {
  opacity: 1;
  transform: none;
}
.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* The authored moment: the hero key's two leader rules draw out, once. */
.js .key-hero .lead-n { transform-origin: left center; }
.js .key-hero .lead-a .lead-n { animation: dye-in 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.js .key-hero .lead-b .lead-n { animation: dye-in 620ms cubic-bezier(0.22, 0.61, 0.36, 1) 140ms both; }
@keyframes dye-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.js .key-hero .lead-in { position: relative; }
.js .key-hero .lead-a .lead-in::after,
.js .key-hero .lead-b .lead-in::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--dye-rule, var(--dye));
  transform-origin: left center;
  animation: rule-draw 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.js .key-hero .lead-b .lead-in::after { animation-delay: 140ms; }
@keyframes rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==================================================================
   27. Responsive — mobile-first, min-width only
   ================================================================== */
@media (min-width: 34em) {
  .wrap { padding-inline: var(--sp-5); }
  .idbar-in { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }

  .lead-in {
    grid-template-columns: 3.4rem 1fr auto;
    grid-template-areas: "n txt end";
    align-items: baseline;
    gap: var(--sp-4);
  }
  .lead-end { justify-content: flex-end; text-align: right; }
  .lead-term { align-items: flex-end; }

  .group {
    grid-template-columns: 1fr 12rem;
    align-items: start;
    gap: var(--sp-4) var(--sp-5);
  }
  .group-a { grid-column: 1; }
  .group-b { grid-column: 1; }
  .group-c { grid-column: 2; grid-row: 1 / span 2; }

  .seq-m { grid-template-columns: 1fr 12rem; align-items: center; gap: var(--sp-4) var(--sp-5); }
  .seq-a { grid-column: 1; }
  .seq-b { grid-column: 1; }
  .seq-c { grid-column: 2; grid-row: 1 / span 2; }

  .grid-2 { grid-template-columns: 1fr 1fr; }
  .policy-grid { grid-template-columns: 1fr 1fr; }
  .nextlist li { grid-template-columns: 2.25rem 1fr; }
  .areas { grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
}

@media (min-width: 48em) {
  .sec { padding-block: var(--sp-9); }
  .hero { padding-block: var(--sp-8) var(--sp-9); }
  .jar { padding: var(--sp-6); }
  .nap { padding: var(--sp-6); }

  /* the leader dots get their own column once there is room for them */
  .lead-in {
    grid-template-columns: 3.4rem auto 1fr auto;
    grid-template-areas: "n txt dots end";
  }
  .lead-txt { max-width: 46ch; }
  .lead-dots {
    display: block;
    grid-area: dots;
    align-self: start;
    /* sits on the baseline of the lead's first line */
    margin-top: 0.82em;
    height: 2px;
    color: var(--stock-400);
    background-image: var(--dots);
    background-size: 6px 2px;
    background-repeat: repeat-x;
    background-position: 0 50%;
  }
  .lead-in:hover .lead-dots { color: var(--dye-rule, var(--dye)); }
  .sec-fluid .lead-dots, .cta .lead-dots { color: var(--fluid-600); }

  .foot-nav { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-6); }
  .foot-btm { grid-template-columns: 1fr auto; align-items: baseline; gap: var(--sp-4); }
  .grades { grid-template-columns: repeat(2, 1fr); }
  .cta-in { grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-7); }
  .cta-act { flex-direction: column; align-items: stretch; }
}

@media (min-width: 64em) {
  .head-in { grid-template-columns: auto 1fr auto; gap: var(--sp-5); }
  .brand { grid-column: 1; grid-row: 1; }
  .nav { grid-column: 2; grid-row: 1; display: block; }
  .head-act { grid-column: 3; grid-row: 1; }
  .head-tel { display: flex; }
  .menu-btn { display: none; }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    padding: 0;
  }
  .nav-item { border-top: 0; position: relative; }
  .nav-lnk { padding: var(--sp-3) var(--sp-3); }
  .nav-lnk.is-on {
    color: var(--fluid-900);
    box-shadow: inset 0 -2px 0 var(--fluid-900);
  }
  .nav-lnk:hover { color: var(--carmine-700); }

  .nav-sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 21rem;
    margin: 0;
    padding: var(--sp-3);
    background: var(--stock-050);
    border: 1px solid var(--stock-300);
    box-shadow: var(--shadow-jar);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
  }
  .nav-item-group:hover .nav-sub,
  .nav-item-group:focus-within .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-sub-lnk { border-left-width: 2px; padding-block: var(--sp-3); }

  .hero-in { grid-template-columns: 1.15fr 0.85fr; align-items: start; gap: var(--sp-8); }
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .split-wide { grid-template-columns: 1.25fr 0.75fr; }
  .foot-in { grid-template-columns: 20rem 1fr; gap: var(--sp-8); }
  .foot-nav { grid-template-columns: repeat(4, 1fr); }
  .foot-btm { grid-column: 1 / -1; }
  .group-hd { display: grid; grid-template-columns: 1fr 12rem; gap: var(--sp-5); }
  .group { grid-template-columns: 1fr 14rem; }
  .seq-m { grid-template-columns: 1fr 14rem; }
  .tray { font-size: var(--step-0); }
  .phead-body { padding-bottom: var(--sp-8); }
}

@media (min-width: 86em) {
  :root { --wrap: 82rem; }
  .grades { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 23.5em) {
  :root { --step-5: 2.05rem; }
  .head-in { gap: var(--sp-3); }
  .brand-mark { width: 34px; height: 34px; }
}

/* ==================================================================
   28. Print — the price list is a thing people print
   ================================================================== */
@media print {
  .idbar, .head, .foot-nav, .cta, .menu-btn, .skip, .meniscus { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  .sec, .hero { padding-block: 12pt; }
  .sec-fluid, .cta, .foot { background: #fff !important; color: #000 !important; }
  .sec-fluid h1, .sec-fluid h2, .sec-fluid h3 { color: #000 !important; }
  .jar, .nap, .tray-scroll { box-shadow: none; border-color: #999; break-inside: avoid; }
  .couplet, .grade, .group, .seq-m, .faq-i { break-inside: avoid; }
  .faq-a { display: block !important; }
  a { text-decoration: underline; }
  .lead-a .lead-n, .lead-b .lead-n { color: #000 !important; background: none !important; box-shadow: inset 0 0 0 1px #000; }
  .lead-term-n, .lead-goto-n { color: #000 !important; }
  .tray tbody tr:hover { background: none; }
}