/* ============================================================================
   PRESS — Direction B
   Two inks on uncoated stock. Black printed on flat orange fields.
   The competitor is lit. We are printed.
   ========================================================================== */

/* ---- 1. INKS ------------------------------------------------------------ */
:root {
  /* the seven fixed tokens */
  --stock:        #F4EFE6;
  --orange:       #E2551A;
  --orange-deep:  #B23A0B;
  --black:        #12100D;
  --ink:          #2A241D;
  --rule:         #B8AE9E;
  --mute:         #6E655A;

  /* screens built from the solids, the way a press builds a tint */
  --wash-12:  color-mix(in srgb, var(--orange) 12%, var(--stock));
  --wash-22:  color-mix(in srgb, var(--orange) 22%, var(--stock));
  --rule-40:  color-mix(in srgb, var(--rule) 40%, var(--stock));
  --rule-70:  color-mix(in srgb, var(--rule) 70%, var(--stock));

  /* semantic surfaces — these flip in the press inversion */
  --ground:     var(--stock);
  --ground-alt: var(--wash-12);
  --body:       var(--ink);
  --strong:     var(--black);
  --hair:       var(--rule);
  --hair-soft:  var(--rule-40);
  --quiet:      var(--mute);
  --field:      var(--orange);
  --field-deep: var(--orange-deep);
  --field-ink:  var(--black);   /* black printed onto the orange */
  --knock:      var(--stock);   /* stock knocked out of the orange */

  /* measure and rhythm */
  --sheet: 1360px;
  --rail: 188px;
  --gut: 40px;
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* rule weights */
  --w-hair: 1px;   /* register hairline  */
  --w-rule: 1px;   /* ink rule           */
  --w-bar:  2px;   /* section bar        */
  --w-slug: 7px;   /* slug, chapter open */

  --disp: "Saira Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --demo-sans: system-ui, "Helvetica Neue", Arial, sans-serif;
  --text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* the press inversion: stock goes to black, the orange field stays orange,
   the type knocks out. Both media queries and the explicit attribute. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:     #12100D;
    --ground-alt: color-mix(in srgb, var(--orange) 14%, #12100D);
    --body:       color-mix(in srgb, var(--stock) 84%, var(--black));
    --strong:     var(--stock);
    --hair:       color-mix(in srgb, var(--rule) 42%, var(--black));
    --hair-soft:  color-mix(in srgb, var(--rule) 22%, var(--black));
    --quiet:      color-mix(in srgb, var(--mute) 78%, var(--stock));
    --knock:      var(--stock);
  }
}
:root[data-theme="dark"] {
  --ground:     #12100D;
  --ground-alt: color-mix(in srgb, var(--orange) 14%, #12100D);
  --body:       color-mix(in srgb, var(--stock) 84%, var(--black));
  --strong:     var(--stock);
  --hair:       color-mix(in srgb, var(--rule) 42%, var(--black));
  --hair-soft:  color-mix(in srgb, var(--rule) 22%, var(--black));
  --quiet:      color-mix(in srgb, var(--mute) 78%, var(--stock));
  --knock:      var(--stock);
}

/* ---- 2. RESET ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--text);
  font-size: 16.5px;
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 var(--s5); max-width: 66ch; text-wrap: pretty; }

/* ---- 3. TYPE ROLES ------------------------------------------------------ */
.d, h1, h2, h3, h4 {
  font-family: var(--disp);
  font-weight: 700;
  color: var(--strong);
  margin: 0;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  text-wrap: balance;
}
.d--xl { font-size: 132px; line-height: 0.86; letter-spacing: -0.026em; }
.d--lg { font-size: 84px;  line-height: 0.9;  letter-spacing: -0.022em; }
.d--md { font-size: 48px;  line-height: 0.96; letter-spacing: -0.016em; }
.d--sm { font-size: 30px;  line-height: 1.0;  letter-spacing: -0.012em; }
.d--xs { font-size: 21px;  line-height: 1.05; letter-spacing: -0.006em; }

.m, .mono {
  font-family: var(--data);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.m--n { text-transform: none; letter-spacing: 0.02em; font-size: 12.5px; }
.num { font-family: var(--data); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }

.lede {
  font-size: 21px; line-height: 1.44; max-width: 40ch;
  font-variant-numeric: lining-nums;
}
.quiet { color: var(--quiet); }
.small { font-size: 14px; line-height: 1.55; }

/* ---- 4. SHEET, RUNNING HEAD, FOLIO -------------------------------------- */
.wrap { max-width: var(--sheet); margin: 0 auto; padding: 0 var(--s7); }

.runhead {
  position: sticky; top: 0; z-index: 20;
  background: var(--ground);
  border-bottom: var(--w-rule) solid var(--strong);
}
.runhead__in {
  max-width: var(--sheet); margin: 0 auto; padding: 0 var(--s7);
  height: 46px; display: flex; align-items: center; gap: var(--s5);
}
.runhead__mark { display: flex; align-items: center; gap: 10px; }
.runhead__name {
  font-family: var(--disp); font-weight: 700;
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--strong); line-height: 1;
}
.runhead__doc { margin-left: auto; display: flex; gap: var(--s5); color: var(--quiet); }
.runhead__sep { width: var(--w-hair); align-self: stretch; background: var(--hair); }

.folio {
  border-top: var(--w-rule) solid var(--strong);
  margin-top: var(--s9);
}
.folio__in {
  max-width: var(--sheet); margin: 0 auto; padding: var(--s5) var(--s7) var(--s8);
  display: flex; gap: var(--s5); align-items: baseline; color: var(--quiet);
}
/* The document number is the one thing in a folio that must never break across
   a line, so it holds its width and the descriptive span gives way instead. */
.folio__in > span { white-space: nowrap; }
.folio__in > span.quiet { white-space: normal; min-width: 0; }
.folio__no { margin-left: auto; color: var(--strong); flex: none; }

/* ---- 5. INDEX RAIL ------------------------------------------------------ */
.doc { display: grid; grid-template-columns: var(--rail) 1fr; gap: var(--gut); }
.rail { border-right: var(--w-hair) solid var(--hair); padding-right: var(--s5); }
.rail__in { position: sticky; top: 78px; }
.rail__h {
  font-family: var(--data); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--quiet);
  padding-bottom: var(--s2); border-bottom: var(--w-rule) solid var(--strong);
  margin-bottom: var(--s3);
}
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li { border-bottom: var(--w-hair) solid var(--hair-soft); }
.rail a {
  display: grid; grid-template-columns: 34px 1fr; gap: 6px;
  padding: 7px 0; font-size: 13.5px; line-height: 1.25; color: var(--body);
}
.rail a:hover { color: var(--field-deep); }
.rail .n { font-family: var(--data); font-size: 11px; color: var(--quiet); letter-spacing: 0.04em; }
.rail__note { margin-top: var(--s5); font-size: 12px; line-height: 1.5; color: var(--quiet); }

/* ---- 6. SECTION HEADERS ------------------------------------------------- */
.sec { padding-top: var(--s8); scroll-margin-top: 70px; }
.sechead {
  display: flex; align-items: baseline; gap: var(--s4);
  border-bottom: var(--w-bar) solid var(--strong);
  padding-bottom: var(--s2); margin-bottom: var(--s5);
}
.sechead .n {
  font-family: var(--data); font-size: 12px; letter-spacing: 0.06em;
  color: var(--field-deep); font-weight: 600;
}
.sechead h2 { font-size: 26px; letter-spacing: -0.008em; }
.sechead .meta { margin-left: auto; }

/* ---- 7. THE FIELD ------------------------------------------------------- */
.field {
  background: var(--field);
  color: var(--field-ink);
  padding: var(--s7);
}
.field--deep { background: var(--field-deep); color: var(--stock); }
.field h1, .field h2, .field h3, .field .d { color: var(--field-ink); }
.field .quiet { color: color-mix(in srgb, var(--black) 62%, var(--orange)); }
.field--deep h1, .field--deep h2, .field--deep h3, .field--deep .d { color: var(--stock); }
.field--deep .quiet { color: color-mix(in srgb, var(--stock) 74%, var(--orange-deep)); }

/* stock knocked out of the field */
.knock { color: var(--knock); }
.field .knock { color: var(--stock); }

/* full width of the sheet, edge to edge */
.bleed { width: 100%; }

/* black printed over orange goes richer, not muddy */
.overprint { mix-blend-mode: multiply; }

/* ---- 8. RULES AND MARKS ------------------------------------------------- */
.r-hair { border: 0; border-top: var(--w-hair) solid var(--hair); margin: var(--s5) 0; }
.r-ink  { border: 0; border-top: var(--w-rule) solid var(--strong); margin: var(--s5) 0; }
.r-bar  { border: 0; border-top: var(--w-bar) solid var(--strong); margin: var(--s5) 0; }
.r-slug { border: 0; border-top: var(--w-slug) solid var(--strong); margin: var(--s5) 0; }

.regmark { display: block; width: 18px; height: 18px; flex: none; }
.regmark line, .regmark circle { stroke: var(--hair); stroke-width: 1; fill: none; }

.inkbar { display: flex; height: 9px; width: 116px; }
.inkbar i { flex: 1; display: block; }

/* ---- 9. TABLES — the primary data container ----------------------------- */
table.reg {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
}
table.reg th {
  font-family: var(--data); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--quiet);
  text-align: left; padding: 0 var(--s4) 6px 0;
  border-bottom: var(--w-rule) solid var(--strong);
  white-space: nowrap; vertical-align: bottom;
}
table.reg td {
  padding: 9px var(--s4) 9px 0;
  border-bottom: var(--w-hair) solid var(--hair-soft);
  font-size: 14.5px; line-height: 1.35; vertical-align: baseline;
}
table.reg tr:last-child td { border-bottom: var(--w-rule) solid var(--strong); }
table.reg td:last-child, table.reg th:last-child { padding-right: 0; }
/* A lot number, a CAS or a date is one token. Breaking it mid-string turns an
   identifier into two different-looking identifiers, so it never wraps. */
table.reg .c-num { font-family: var(--data); font-size: 12.5px; letter-spacing: 0.02em; white-space: nowrap; }
table.reg .c-num--wrap { white-space: normal; }
table.reg .c-r { text-align: right; }
table.reg tbody tr:hover td { background: var(--ground-alt); }

/* key/value specification list */
.spec { border-top: var(--w-rule) solid var(--strong); }
.spec__row {
  display: grid; grid-template-columns: 210px 1fr;
  gap: var(--s5); padding: 10px 0;
  border-bottom: var(--w-hair) solid var(--hair-soft);
}
.spec__k {
  font-family: var(--data); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--quiet); padding-top: 4px;
}
.spec__v { font-size: 15.5px; line-height: 1.45; }
.spec__v .num { font-size: 14px; }

/* ---- 10. MARGINAL NOTES ------------------------------------------------- */
.cols { display: grid; grid-template-columns: 1fr 236px; gap: var(--gut); align-items: start; }
/* Long prose in a printed document is set in columns, not in one narrow measure with
   a field of nothing beside it. --3 splits the body across two text columns and keeps
   the marginal note rail. */
.cols--3 { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 236px; }
.note {
  border-top: var(--w-rule) solid var(--strong);
  padding-top: var(--s2); font-size: 13px; line-height: 1.5; color: var(--quiet);
}
.note b { display: block; font-family: var(--data); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--body); margin-bottom: 4px; font-weight: 600; }
.note + .note { margin-top: var(--s5); }

/* ---- 11. CONTROLS ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--data); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 11px 18px; border: var(--w-rule) solid var(--strong);
  background: var(--strong); color: var(--ground); cursor: pointer;
  transition: background 120ms linear, color 120ms linear;
}
.btn:hover { background: var(--field-deep); border-color: var(--field-deep); color: var(--stock); }
.btn--ghost { background: transparent; color: var(--strong); }
.btn--ghost:hover { background: var(--strong); color: var(--ground); }
.btn--onfield {
  background: var(--black); color: var(--stock); border-color: var(--black);
}
.btn--onfield:hover { background: var(--stock); color: var(--black); border-color: var(--black); }

label.f { display: block; }
label.f > span {
  display: block; font-family: var(--data); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--quiet); margin-bottom: 5px;
}
input.f, select.f {
  width: 100%; font-family: var(--data); font-size: 14px; letter-spacing: 0.02em;
  padding: 9px 10px; color: var(--strong);
  background: var(--ground);
  border: var(--w-rule) solid var(--strong);
  outline-offset: 2px;
}
input.f::placeholder { color: var(--quiet); opacity: 1; }
input.f:focus-visible, select.f:focus-visible, .btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--field-deep); outline-offset: 2px;
}
.help { font-size: 12.5px; color: var(--quiet); margin-top: 5px; }
.err { font-size: 12.5px; color: var(--field-deep); margin-top: 5px; font-weight: 600; }

/* filter list */
.filt { border-top: var(--w-rule) solid var(--strong); }
.filt__g + .filt__g { margin-top: var(--s5); }
.filt__h {
  font-family: var(--data); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--quiet); padding: var(--s2) 0 5px; border-bottom: var(--w-hair) solid var(--hair);
}
.filt__i {
  display: grid; grid-template-columns: 13px 1fr auto; gap: 9px; align-items: center;
  padding: 6px 0; border-bottom: var(--w-hair) solid var(--hair-soft);
  font-size: 14px; cursor: pointer;
}
.filt__i .box { width: 13px; height: 13px; border: var(--w-rule) solid var(--strong); display: block; }
.filt__i.on .box { background: var(--field); box-shadow: inset 0 0 0 2px var(--ground); }
.filt__i .ct { font-family: var(--data); font-size: 11px; color: var(--quiet); letter-spacing: 0.02em; }

/* status chip — a rubber stamp, not a pill */
.stamp {
  display: inline-block; font-family: var(--data); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 7px;
  border: var(--w-rule) solid var(--field-deep); color: var(--field-deep);
  white-space: nowrap;
}
.stamp--ink { border-color: var(--strong); color: var(--strong); }
.stamp--solid { background: var(--strong); color: var(--ground); border-color: var(--strong); }

/* ---- 12. PLATES (duotone imagery) --------------------------------------- */
.plate { position: relative; background: var(--orange); overflow: hidden; }
.plate img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.32) brightness(1.04);
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] .plate img { mix-blend-mode: screen; filter: grayscale(1) contrast(1.28) invert(0); }
.plate__cap {
  font-family: var(--data); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--quiet); padding-top: 7px; border-top: var(--w-hair) solid var(--hair);
  margin-top: var(--s2);
}

/* ---- 13. UTILITIES ------------------------------------------------------ */
.stack > * + * { margin-top: var(--s5); }
.row { display: flex; align-items: baseline; gap: var(--s4); }
.between { justify-content: space-between; }
.mt6 { margin-top: var(--s6); } .mt7 { margin-top: var(--s7); } .mt8 { margin-top: var(--s8); }
.mb4 { margin-bottom: var(--s4); } .mb5 { margin-bottom: var(--s5); } .mb6 { margin-bottom: var(--s6); }
.nomax p, p.nomax { max-width: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* A register is scanned sideways on a phone, the way a fold-out table in a manual is.
   The table keeps its column structure and its block scrolls; it is never reflowed into
   stacked labels, because the whole point of the row is that the figures line up. */
@media (max-width: 1000px) {
  /* A grid track written as 1fr is minmax(auto,1fr), so a 660 px table inflates its own
     column instead of scrolling inside it. min-width:0 on the items is what lets the
     scroll container actually be narrower than its content. */
  main, aside, .doc > *, .cols > *, .prodgrid > *, .vialgrid > *, .two > *,
  .mast__two > *, .mast__deck > *, .cat > *, .step > * { min-width: 0; }
  :is(section, div, main):has(> table.reg) { overflow-x: auto; min-width: 0; }
  table.reg { min-width: 660px; }
}

@media (max-width: 900px) {
  :root { --gut: 24px; }
  .doc, .cols, .cols--3 { grid-template-columns: 1fr; }
  .rail { border-right: 0; border-bottom: var(--w-hair) solid var(--hair); padding: 0 0 var(--s5); }
  .rail__in { position: static; }
  .d--xl { font-size: 62px; } .d--lg { font-size: 44px; } .d--md { font-size: 32px; }
  .wrap, .runhead__in, .folio__in { padding-left: var(--s5); padding-right: var(--s5); }
  .spec__row { grid-template-columns: 1fr; gap: 2px; }
  /* The folio holds its own line at sheet width; on a narrow sheet the rules that keep
     "B-04" from splitting would otherwise push the whole foot past the edge, so the
     row wraps and the separators are dropped rather than the document number breaking. */
  .folio__in, .runhead__in { flex-wrap: wrap; gap: var(--s3) var(--s4); }
  .runhead__in { height: auto; padding-top: 9px; padding-bottom: 9px; }
  .folio__in .runhead__sep, .runhead__in .runhead__sep { display: none; }
  .folio__no { margin-left: 0; }
  .runhead__doc { margin-left: 0; }
  .idblock, .mast__top { grid-template-columns: 1fr; }
  .seq { word-break: break-word; font-size: 13px; letter-spacing: .16em; }
}

@media (max-width: 640px) {
  .d--xl { font-size: 46px; } .d--lg { font-size: 34px; } .d--md { font-size: 26px; }
  .d--sm { font-size: 23px; } .sheet__no { font-size: 40px; }
}