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

/* ⛔ THE GATE STYLESHEET IS IMPORTED HERE ON PURPOSE, and it must stay the
   first rule in this file — an @import after any other rule is dropped by the
   parser silently, which would leave every gate on the site unstyled while
   this line still sat here looking correct.

   It is imported from the shared token sheet rather than <link>ed per page
   because both trees already load this file: the 14 pages of 03_site and the
   10 pages of 05_portal. That makes gate coverage follow the design system
   instead of a per-page tag somebody forgets on page 25. */
@import url("gate.css");


/* ---- 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 */

  /* Plate exposure. Not an ink — a dial, and the only thing the dark sheet is
     allowed to do to a photograph. See §12 for why nothing else is. */
  --plate-exposure: 1;

  --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);
    --plate-exposure: 0.88;
  }
}
: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);
  --plate-exposure: 0.88;
}

/* ---- 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 (photography) -------------------------------------------

   ⛔ THIS SECTION USED TO LAY A SOLID ORANGE FIELD UNDER EVERY PHOTOGRAPH AND
   MULTIPLY A DESATURATED SEPARATION DOWN ONTO IT:

       .plate     { background: var(--orange); }
       .plate img { filter: grayscale(1) contrast(1.32) brightness(1.04);
                    mix-blend-mode: multiply; }
       :root[data-theme="dark"] .plate img { mix-blend-mode: screen; ... }

   Rejected by the client, twice, in his own words. It was also wrong on this
   brand's own terms, in three separate ways:

     1. It is not how a two-ink job carries a photograph. A photograph is a
        HALFTONE IN ONE INK, printed ON the paper. The second ink runs the
        rules, the stamps and the section numbers. It is not a wash laid under
        the picture. What was here was not a duotone at all — it was a flat
        solid plus one multiplied grey, which is a colorize.
     2. The dark rule keyed on [data-theme="dark"], and nothing on this site
        ever writes that attribute. Every dark viewer therefore got the LIGHT
        rule: a glowing orange subject on a black sheet. BRAND_LOCK §3 bans
        exactly that as the gray-market cohort's signature. Measured before the
        fix, the first index plate rendered as a black field with a burning
        orange vial in it.
     3. grayscale(1) stripped the label spine, which is the one hit of orange
        the artwork actually carries and the only place the second ink belongs.

   ⛔ AND THE DARK SHEET DOES NOT GET AN invert() EITHER. MEASURED, in Chromium,
   against the real sermorelin.png rather than reasoned about:

       filter                                   paper           orange ink
       invert(1) hue-rotate(180deg)             rgb(20,15,6)    rgb(255,164,126)
       … brightness(.92)                        rgb(19,14,6)    rgb(235,151,116)
       … saturate(.85) brightness(.90)          rgb(18,14,7)    rgb(218,140,106)  6 px left
       … saturate(.75) brightness(.88)          rgb(17,13,7)    none — 0 px left
       … saturate(.70) brightness(.86)          rgb(16,13,8)    none — 0 px left

   The paper inverts correctly every time. The INK does not: it comes out a
   pale salmon that sits within a few points of the banned #fa673e, and every
   correction that pulled it back desaturated the spine out of the frame
   completely. So the inks are never put through a filter inversion.

   WHAT A PLATE IS NOW: a box with a ground, a hairline, a caption and a
   number, and the image inside it is allowed to be an image.

     · no mix-blend-mode anywhere. Nothing is printed over a photograph.
     · no grayscale, no contrast lift. The twelve specimen renders are already
       a warm black on an exact #F4EFE6 stock — the same value as --stock, so
       the plate merges into the sheet — with the label spine as the one hit of
       orange. The separation is in the artwork. CSS has nothing to add to it.
     · the dark sheet is the same printed plate under lower light: ONE
       brightness step on --plate-exposure, hue untouched, so the orange stays
       the orange. #E2551A × 0.88 is a deeper orange, not a different one.
     · the two editorial photographs are shot on a dark ground, so they are
       already the polarity of the dark sheet and take no exposure step at all
       — dimming a dark photograph only makes it muddy.                       */

.plate {
  position: relative;
  overflow: hidden;
  background: var(--ground);
  border: var(--w-hair) solid var(--hair-soft);
}
.plate img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(var(--plate-exposure));
}

/* The editorial photographs live in 00_SYSTEM/reference/img/ and are matched on
   that path rather than on a class, so no markup has to move. The stager
   rewrites "../00_SYSTEM/ to "00_SYSTEM/ and this substring survives it. */
.plate img[src*="/reference/img/"] { filter: none; }

.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; }
}