/* ============================================================================
   Casing Point — Oil & Gas Services

   DIRECTION: THE PAGE IS A DRAWING SHEET, AND THE WORK IS MOUNTED ON IT.
   Rebuilt light-first 2026-08-21 on the Principal's direction: "an all black site
   isn't a good professional look ... if anything I prefer light colors ... a
   daytime look and feel ... maybe we can mix it up .... whites, greys, blacks".

   The reference is unchanged and still real: this firm's own lease-map exhibit
   convention (~/.claude/skills/lease-map-builder/STYLE.md). On paper-white those
   devices become what they actually are on a plat — ink on white, hairline-ruled,
   with a BLACK TITLE-BLOCK HEADER BAR:
     · info panel, rows separated by 2px rules, black header row  -> .titleblock
     · corner acreage/legal text instead of a centred title       -> .cornerblock
     · full-width bar, heavy tracked title, underline             -> .barhead
     · legend rows: swatch + label + figure                       -> .legend
     · mounted plate: black title bar, warm mat, own legal block  -> .plate
   Boldness is spent on the PLATE system. Everything else is quiet.

   FOUR GROUNDS, all four in play — a flat all-white page would be its own failure:
     --paper   white, the reading field
     --stock   warm drawing stock, alternating sections
     --stock-2 deeper stock, the meta rail and title-block bodies
     --ink     near-black. TWO full-bleed bands on index.html (the gates section
               mid-page; the closing CTA continuing into the footer as one
               movement), plus every plate's title bar and every button. Never the
               page ground.

   PALETTE: MONOCHROME. The brass accent (#C8922F / #d09a38) is RETIRED, measured
   rather than argued: it reads 2.76:1 on white and 2.51:1 on stock, and reaching
   4.5:1 at that hue forces it to #a06c00 — a mustard-umber that is no longer
   brass and lands the page in the warm-cream-plus-terracotta cluster design_lint
   flags by name. Two further reasons, both checkable: the three exhibit plates
   already carry green/orange/blue/gold well symbols, so mounted on white THE
   PLATES ARE THE PAGE'S COLOUR and a brass page chrome competes with the only
   load-bearing chroma there is; and the strongest CTA on white is black (16.7:1),
   not brass. Full reasoning and the measurements: design/brands/casing-point.md.

   Because colour is gone as a hierarchy channel, the tracked-caps label system
   now earns its rung from GROUND + WEIGHT + TRACKING instead: an ink-filled bar
   or chip, then ink tracked caps, then a muted grey label, then ink body copy.
   That substitution is deliberate; do not "restore" an accent colour to a label.

   ONE THEME. No dark mode, and no unreachable second theme parked in this file
   "for later" — that exact mistake is already on this project's record.
   TYPE: system stack only, no webfonts. Note --sans deliberately does NOT lead
   with -apple-system: that resolved to San Francisco on macOS while the print
   artifact renders Helvetica Neue, so the two artifacts were not matched.
   ============================================================================ */

:root{
  /* grounds --------------------------------------------------------------- */
  --paper:#ffffff;
  --stock:#f5f4f2;         /* OKLCH C .0029 — drawing stock, not cream. The
                              cream boundary at this hue is C .010; AI-cluster
                              creams sit at C .021-.029, 7-10x this value.     */
  --stock-2:#eceae7;       /* OKLCH C .0046 — rails, title-block bodies        */
  --ink:#141416;           /* bands, plate title bars, buttons. NOT the ground */

  /* rules ----------------------------------------------------------------- */
  --hair:#ddd9d3;          /* decorative divider only — 1.41:1, never type     */
  --mat:#928e85;           /* 3.27:1 on paper — clears the 3:1 non-text floor.
                              plate mat edge + ghost button border             */
  --rule:var(--ink);       /* structural 2px rule — 18.40:1 on paper           */

  /* type on paper --------------------------------------------------------- */
  --text:#141416;          /* 18.40 paper · 16.74 stock · 15.32 stock-2        */
  --muted:#4a4744;         /*  9.23 paper ·  8.39 stock ·  7.68 stock-2        */
  --dim:#56534e;           /*  7.66 paper ·  6.96 stock ·  6.38 stock-2 — legal
                              blocks. Deliberately NOT parked at the 4.5 floor:
                              the disclosures are meant to read as specification,
                              and copy sitting on the floor reads as apology.   */

  /* type on ink ----------------------------------------------------------- */
  --on-ink:#f5f4f2;        /* 16.74 on ink                                     */
  --on-ink-muted:#a7a4a0;  /*  7.41 on ink                                     */
  --on-ink-dim:#8b8884;    /*  5.22 on ink — legal inside an ink band          */

  /* action green — the one colour on the page. Measured, not chosen by eye:
     white on --go = 5.30:1 · --go on paper = 5.30:1 · ink on --go-lit = 9.15:1  */
  --go:#0E7C3A;            /* button fill on paper, white text                  */
  --go-hover:#0A6B33;
  --go-lit:#3FCF7F;        /* button fill inside an ink band, ink text          */

  --focus:#747474;         /* 4.67 paper · 4.25 stock · 3.89 stock-2 · 3.94 ink
                              — one ring that clears 3:1 on all four grounds   */

  /* type scale — 7 sizes, no more ---------------------------------------- */
  --fs-cap:12px;           /* eyebrows, plate numbers, legal                   */
  --fs-small:14px;
  --fs-body:17px;
  --fs-lead:21px;
  --fs-h3:24px;
  --fs-h2:34px;
  --fs-display:76px;

  --lh-body:1.62; --lh-tight:1.06; --measure:62ch;

  /* 4px spacing scale ----------------------------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:72px; --sp-9:112px;

  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1200px;
  --rail:232px;            /* the left meta rail — the info-panel column       */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);
  font:var(--fs-body)/var(--lh-body) var(--sans);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:var(--ink);color:var(--on-ink)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-5)}

/* ——— the tracked-out caps of the logo's own tagline, used as a system.
       Tracking is tightened ~20% from the dark build: wide tracking was
       compensating for knockout type closing up on a dark fill, and dark ink on
       white paper holds its counters without that help. ——— */
.eyebrow{font:700 var(--fs-cap)/1.3 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:var(--text);margin:0 0 var(--sp-4);
  padding-top:var(--sp-3);border-top:2px solid var(--rule);display:inline-block}
.eyebrow.mute{color:var(--muted);border-top-color:var(--mat)}

h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.03em;
  line-height:var(--lh-tight);margin:0}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.012em}
p{margin:0 0 var(--sp-4);max-width:min(var(--measure),100%)}
.lead{font-size:var(--fs-lead);line-height:1.5}
.small{font-size:var(--fs-small);color:var(--muted)}
.legal{font:var(--fs-cap)/1.6 var(--sans);color:var(--dim)}
strong{font-weight:700;color:var(--text)}

/* ——— header: paper, so it works over every ground below it. Carries the LIGHT
       lockup, whose wordmark is forced to solid ink in-SVG; the chrome lockup is
       used only where there is an ink ground under it. ——— */
.site-head{position:sticky;top:0;z-index:60;background:var(--ink);
  border-bottom:1px solid #2b2b2e}
.site-head .lockup img{height:44px}
.site-head .nav a{color:var(--on-ink-muted)}
.site-head .nav a:hover{color:var(--on-ink)}
.head-in{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  max-width:var(--wrap);margin:0 auto;padding:var(--sp-3) var(--sp-5)}
.lockup{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;
  min-height:48px;flex:0 0 auto}
.lockup img{height:40px;width:auto}
.nav{display:flex;gap:var(--sp-5);margin-left:auto;align-items:center}
.nav a{font:700 var(--fs-cap)/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:48px}
.nav a:hover{color:var(--text)}
.head-cta{display:flex;gap:var(--sp-2);align-items:center}
.site-head .btn{background:var(--go-lit);color:var(--ink);border-color:var(--go-lit)}
.site-head .btn:hover{background:#5CD98A;border-color:#5CD98A}
.site-head .btn.ghost{background:transparent;color:var(--on-ink);border-color:#3a3a3e}
.site-head .btn.ghost:hover{border-color:var(--on-ink);background:rgba(255,255,255,.07)}

/* ——— buttons: the primary is INK. On white that measures 16.74:1, which is the
       loudest CTA available — louder than any accent fill would have been. ——— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:48px;padding:0 var(--sp-5);border:1px solid var(--go);
  font:700 var(--fs-small)/1 var(--sans);letter-spacing:.05em;text-decoration:none;
  cursor:pointer;background:var(--go);color:#fff}
.btn:hover{background:var(--go-hover);border-color:var(--go-hover)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--mat)}
.btn.ghost:hover{border-color:var(--ink);background:var(--stock)}
/* inside an ink band the deep green loses its punch; it goes bright with ink text */
.band .btn{background:var(--go-lit);color:var(--ink);border-color:var(--go-lit)}
.band .btn:hover{background:#5CD98A;border-color:#5CD98A}
.band .btn.ghost{background:transparent;color:var(--on-ink);border-color:var(--on-ink-dim)}
.band .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:var(--on-ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}

/* ============================================================================
   THE EXHIBIT GRID — a narrow meta rail LEFT, a wide field RIGHT, so a text-only
   section leaves no repeated void the way a centred measure in a wide wrap does.
   ============================================================================ */
section{padding:var(--sp-9) 0;border-top:1px solid var(--hair)}
section:first-of-type{border-top:0}
section.stock{background:var(--stock)}
/* the two ink bands. Full-bleed, deliberate, and counted. */
section.band{background:var(--ink);color:var(--on-ink);border-top:0}
.band h1,.band h2,.band h3,.band strong{color:var(--on-ink)}
.band p{color:var(--on-ink-muted)}
.band .eyebrow{color:var(--on-ink);border-top-color:var(--on-ink)}
.band .legal{color:var(--on-ink-dim)}
.sheet{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--sp-7)}
.sheet > .rail{grid-column:1}
.sheet > .field{grid-column:2;min-width:0}

/* the plat's info panel: black header row, hairline-ruled body rows on stock */
.titleblock{background:var(--stock-2);border:1px solid var(--mat);
  position:sticky;top:96px}
.titleblock .tb-row{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--mat)}
.titleblock .tb-row:first-child{background:var(--ink);border-bottom:0}
.titleblock .tb-row:last-child{border-bottom:0}
.titleblock .tb-n{font:700 var(--fs-cap)/1 var(--mono);letter-spacing:.11em;
  color:var(--on-ink-muted)}
.titleblock .tb-t{font:700 var(--fs-small)/1.35 var(--sans);letter-spacing:.07em;
  text-transform:uppercase;color:var(--on-ink);margin-top:var(--sp-2)}
.titleblock .tb-l{font:var(--fs-cap)/1.5 var(--sans);color:var(--muted)}
.band .titleblock{background:#1d1d20;border-color:#3a3a3e}
.band .titleblock .tb-row{border-bottom-color:#3a3a3e}
.band .titleblock .tb-row:first-child{background:#000}
.band .titleblock .tb-l{color:var(--on-ink-muted)}

/* ============================================================================
   PLATES — the signature. A proof artifact is MOUNTED: black title bar, a warm
   mat with a real reveal, then the drawing, then its own caption and legal block.
   The mat matters. A dark drawing dropped straight onto white with only a 1.41:1
   hairline around it reads as a hole in the page, not as a mounted exhibit.
   ============================================================================ */
figure{margin:0}
.plate{border:1px solid var(--mat);background:var(--stock);margin-top:var(--sp-6)}
.plate:first-child{margin-top:0}
.plate-head{display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);background:var(--ink)}
.plate-n{font:700 var(--fs-cap)/1 var(--mono);letter-spacing:.11em;
  color:var(--on-ink-muted);white-space:nowrap}
.plate-t{font:700 var(--fs-small)/1.35 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-ink)}
/* These are detail-rich drawings. At 390px they read as composition and not as
   draughting, so every plate carries a real route to the full-size file — no JS,
   keyboard-operable, and honest that a phone cannot show a plat. */
.plate-full{margin-left:auto;display:inline-flex;align-items:center;min-height:48px;
  font:700 var(--fs-cap)/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--on-ink);text-decoration:none;border-bottom:1px solid var(--on-ink-dim);
  white-space:nowrap}
.plate-full:hover{border-bottom-color:var(--on-ink)}
.plate-mat{padding:var(--sp-4);background:var(--stock)}
/* At phone width a 1900px plat is 316px — legible as composition, not as
   draughting. Say so, and point at the sheet that can be read, rather than
   letting the reader assume the thumbnail is the artifact. */
.plate-mat .mat-note{display:none}
@media (max-width:620px){
  .plate-mat .mat-note{display:block;margin:var(--sp-3) 0 0;max-width:none;
    font:var(--fs-cap)/1.5 var(--sans);color:var(--muted)}
}
.plate img{width:100%;height:auto;border:1px solid var(--mat)}
.plate-cap{border-top:2px solid var(--rule);background:var(--paper);padding:var(--sp-4)}
.plate-cap .cap-l{font:var(--fs-small)/1.55 var(--sans);color:var(--text);margin:0;
  max-width:none}
.plate-cap .cap-x{display:inline-block;font:700 var(--fs-cap)/1 var(--sans);
  letter-spacing:.13em;text-transform:uppercase;color:var(--on-ink);
  background:var(--ink);padding:7px 9px;margin:0 0 var(--sp-3)}
.plate-cap .legal{margin:var(--sp-3) 0 0;max-width:none;columns:2;column-gap:var(--sp-6)}

/* a run of plates side by side when they are one set */
.plate-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-top:var(--sp-6)}
.plate-pair .plate{margin-top:0}

/* A RUN of plates that belong together but must each keep full width.
   THE GEOMETRY, MEASURED — not assumed. An earlier version of this comment stated
   "1200 CSS px, 0.63 scale" from the wrap width alone and was wrong, which is how
   the mobile case below got missed. The plate image width is DERIVED:
       wrap 1200 - wrap padding 48 - rail 232 - grid gap 48
                 - plate border 2 - plate-mat padding 32 - img border 2  =  836
   and `getBoundingClientRect()` confirms 812px rendered at a 1440 viewport, i.e. a
   0.427 scale from the 1900px source sheets. The disclosure baked into those sheets
   is authored at 28px specifically so it lands near 12px THERE.
   2-up in .plate-pair would halve that to ~355px / 0.187 scale / ~5px — which is
   why the pair reads top-to-bottom instead.
   RESIDUAL, stated rather than hidden: at 390px the plate is 316px, a 0.166 scale,
   and no source type size survives that without destroying the drawing. Below
   --bp-plate the HTML caption's own .cap-x chip and .legal block carry the
   disclosure at full page-text size; the baked disclosure still travels with the
   image for any crop or reshare, which is the requirement Rule 28 actually sets. */
.plate-run{margin-top:var(--sp-6);border-left:2px solid var(--rule);padding-left:var(--sp-5)}
.plate-run .plate:first-child{margin-top:0}
@media (max-width:620px){
  .plate-run{border-left:0;padding-left:0}
}

/* ============================================================================
   CORNER BLOCK — the plat's corner acreage/legal text. Structural figures set as
   a hairline-ruled data block, not a centred stat wall.
   ============================================================================ */
.cornerblock{border-top:2px solid var(--rule);margin-top:var(--sp-7)}
.cb-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-5);
  align-items:baseline;padding:var(--sp-4) 0;border-bottom:1px solid var(--hair)}
.cb-row.cb-h{border-bottom:2px solid var(--rule);padding-bottom:var(--sp-3)}
.cb-l{font:700 var(--fs-small)/1.4 var(--sans);letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.cb-row.cb-h .cb-l{color:var(--text);letter-spacing:.10em}
.cb-v{font:700 var(--fs-h2)/1 var(--sans);letter-spacing:-.025em;color:var(--text);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.cb-row.cb-h .cb-v{font:700 var(--fs-cap)/1 var(--mono);letter-spacing:.12em;
  color:var(--muted)}
.band .cb-row{border-bottom-color:#333337}
.band .cb-l{color:var(--on-ink-muted)}
.band .cb-v{color:var(--on-ink)}

/* ============================================================================
   LEGEND ROWS — the plat's well-symbol legend. Used where the content really is
   a keyed list; the swatch carries the key, not decoration.
   ============================================================================ */
.legend{border-top:2px solid var(--rule);margin-top:var(--sp-6)}
/* .nokey — for a list that is a SEQUENCE or a plain set rather than a keyed
   legend. A swatch that is identical on every row keys against nothing; the mono
   register token carries it where one exists, and where none exists the list is a
   definition list and needs no key at all. */
.legend.nokey .lg{grid-template-columns:minmax(150px,230px) minmax(0,1fr)}
.legend.nokey .lg-k{display:none}
.lg{display:grid;grid-template-columns:auto minmax(150px,210px) minmax(0,1fr);
  gap:var(--sp-5);align-items:start;padding:var(--sp-5) 0;border-bottom:1px solid var(--hair)}
.lg-k{width:14px;height:14px;margin-top:var(--sp-1);background:var(--ink);flex:0 0 auto}
.lg-k.hollow{background:transparent;border:2px solid var(--mat)}
.lg-t{font:700 var(--fs-h3)/1.2 var(--sans);letter-spacing:-.012em;color:var(--text)}
.lg-d{font:var(--fs-small)/1.6 var(--sans);color:var(--muted);margin:0;max-width:none}
.lg-n{font:700 var(--fs-cap)/1 var(--mono);letter-spacing:.11em;color:var(--muted);
  margin-top:var(--sp-1)}
.band .legend{border-top-color:var(--on-ink)}
.band .lg{border-bottom-color:#333337}
.band .lg-k{background:var(--on-ink)}
.band .lg-k.hollow{border-color:var(--on-ink-dim);background:transparent}
.band .lg-t{color:var(--on-ink)}
.band .lg-d{color:var(--on-ink-muted)}
.band .lg-n{color:var(--on-ink-muted)}

/* ============================================================================
   BAR HEAD — the plat's footer bar. 6px ink top rule, heavy tracked title,
   underline. Used to close a movement, never for decoration.
   ============================================================================ */
.barhead{border-top:6px solid var(--rule);background:var(--stock-2);
  padding:var(--sp-7);margin-top:var(--sp-8);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-7);align-items:center}
.barhead h2{font-size:var(--fs-h2);max-width:min(28ch,100%)}
.barhead .u{display:block;width:64px;height:4px;background:var(--ink);margin-top:var(--sp-4)}
.band .barhead{background:#1d1d20;border-top-color:var(--on-ink)}
.band .barhead .u{background:var(--on-ink)}

/* ——— definition device: explains the company name. A real brand device. ——— */
.defn{border-left:2px solid var(--ink);padding:var(--sp-3) 0 var(--sp-3) var(--sp-5);
  margin:var(--sp-7) 0 0;max-width:min(54ch,100%)}
.defn dt{font:700 var(--fs-small)/1.4 var(--sans);letter-spacing:.10em;
  text-transform:uppercase;color:var(--text)}
.defn dt .lc{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}
.defn dd{margin:var(--sp-2) 0 0;font-family:var(--serif);font-size:var(--fs-lead);
  line-height:1.5;color:var(--text)}

/* ============================================================================
   HERO — the one zone allowed to own a screen, and the page's signature.
   The chrome gradient headline is GONE: measured on white its six stops run
   1.12–3.71:1, two of them under 1.2:1, i.e. functionally invisible ink on
   paper — the same failure the logo audit already documented for the mark.
   What replaces it is not another surface effect but the page's own idea: the
   hero is presented as a drawing sheet, with a hairline frame, corner ticks and
   a mono datum strip. It encodes something true, which decoration does not.
   ============================================================================ */
.hero{padding:var(--sp-7) 0 var(--sp-8);border-top:0;min-height:min(74vh,700px);
  display:flex;align-items:center;background:var(--paper)}
.hero > .wrap{width:100%}
.sheetframe{position:relative;border:1px solid var(--mat);padding:var(--sp-7)}
.sheetframe::before,.sheetframe::after{content:"";position:absolute;width:14px;
  height:14px;border:1px solid var(--ink)}
.sheetframe::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.sheetframe::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.datum{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;
  font:700 var(--fs-cap)/1 var(--mono);letter-spacing:.11em;color:var(--muted);
  text-transform:uppercase;margin:0 0 var(--sp-6);padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--hair)}
.datum b{color:var(--text);font-weight:700}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--sp-7);align-items:center}
.hero h1{max-width:min(15ch,100%);margin-bottom:var(--sp-5)}
/* the chrome mark keeps its own ink ground, mounted like a plate */
.markplate{background:var(--ink);padding:var(--sp-6);justify-self:center;
  border:1px solid var(--ink);width:min(300px,100%)}
.markplate img{width:100%}
.markplate .mp-cap{margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:1px solid #3a3a3e;font:700 var(--fs-cap)/1.4 var(--mono);
  letter-spacing:.10em;text-transform:uppercase;color:var(--on-ink-muted)}

/* ============================================================================
   HERO PROOF STRIP — the first viewport must PROVE, not assert.
   The hero previously carried the mark on an ink plate. That is decoration, and it
   meant screen one of a page selling visual craft demonstrated nothing — the exact
   failure that got the previous build rejected, surviving in miniature. It now
   carries two vector-exact detail crops of the same figure: tabulated and
   unfindable on the source sheet, then given the sheet. Same number in both.
   ============================================================================ */
.proofstrip{display:block;text-decoration:none;border:1px solid var(--mat);
  background:var(--stock);align-self:start}
.proofstrip .ps-h{padding:var(--sp-3) var(--sp-4);background:var(--ink);
  font:700 var(--fs-cap)/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--on-ink-muted);display:flex;gap:var(--sp-3);flex-wrap:wrap}
.proofstrip .ps-h b{color:var(--on-ink)}
.proofstrip figure{padding:var(--sp-3) var(--sp-3) 0}
.proofstrip figure:last-of-type{padding-bottom:var(--sp-3)}
.proofstrip figcaption{font:700 var(--fs-cap)/1.35 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--text);margin:0 0 var(--sp-2)}
.proofstrip figcaption span{display:block;letter-spacing:0;text-transform:none;
  font-weight:400;color:var(--muted);margin-top:2px}
.proofstrip img{width:100%;height:auto;border:1px solid var(--mat)}
.proofstrip .ps-f{padding:var(--sp-3) var(--sp-4);border-top:2px solid var(--rule);
  background:var(--paper);font:700 var(--fs-small)/1.3 var(--sans);color:var(--text);
  display:flex;align-items:center;gap:var(--sp-2);min-height:48px}
.proofstrip:hover .ps-f{background:var(--stock-2)}

/* ============================================================================
   SHEET INDEX — a drawing sheet has a contents block, and this page is 20,000px
   long. It also restores in-page navigation on mobile, where .nav is dropped:
   no JS, no hamburger, works at every width, and it is the same convention the
   rest of the page already speaks.
   ============================================================================ */
.sheetindex{border-top:2px solid var(--rule);border-bottom:1px solid var(--hair);
  background:var(--stock);padding:var(--sp-4) 0}
.sheetindex .wrap{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);
  align-items:center}
.sheetindex .si-l{font:700 var(--fs-cap)/1 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);flex:0 0 auto}
.sheetindex a{display:inline-flex;align-items:center;min-height:48px;
  font:700 var(--fs-cap)/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--text);text-decoration:none;border-bottom:2px solid transparent}
.sheetindex a:hover{border-bottom-color:var(--ink)}
.sheetindex a .si-n{font-family:var(--mono);color:var(--muted);margin-right:var(--sp-2);
  letter-spacing:.06em}

/* ——— QUALIFY: two columns of plain self-selection. No graphics, no icons. ——— */
.qualify{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);
  margin-top:var(--sp-6);border-top:2px solid var(--rule);padding-top:var(--sp-5)}
.qualify h3{font-size:var(--fs-h3);margin-bottom:var(--sp-4)}
.qualify ul{list-style:none;margin:0;padding:0}
.qualify li{font:var(--fs-small)/1.55 var(--sans);color:var(--text);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--hair)}
.qualify li:last-child{border-bottom:0}
.qualify .q-no li{color:var(--muted)}
@media (max-width:820px){ .qualify{grid-template-columns:1fr;gap:var(--sp-5)} }

/* ——— what is inside the download, stated before the ask ——— */
.leavebehind{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-6);
  align-items:center;border:1px solid var(--mat);background:var(--paper);
  margin-top:var(--sp-7)}
.leavebehind .lb-b{padding:var(--sp-5) var(--sp-5)}
.leavebehind .lb-h{font:700 var(--fs-cap)/1 var(--sans);letter-spacing:.17em;
  text-transform:uppercase;color:var(--text);margin:0 0 var(--sp-3);
  border-top:2px solid var(--rule);padding-top:var(--sp-3);display:inline-block}
.leavebehind ol{margin:0;padding:0 0 0 var(--sp-5);
  font:var(--fs-small)/1.6 var(--sans);color:var(--text)}
.leavebehind ol li{padding:2px 0}
.leavebehind .lb-a{padding:var(--sp-5);border-left:1px solid var(--hair)}
@media (max-width:820px){
  .leavebehind{grid-template-columns:1fr}
  .leavebehind .lb-a{border-left:0;border-top:1px solid var(--hair)}
}

/* ——— cards ——— */
.card{border:1px solid var(--mat);background:var(--paper)}
.card-h{padding:var(--sp-3) var(--sp-4);background:var(--ink);
  font:700 var(--fs-cap)/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--on-ink)}
.card-b{padding:var(--sp-5) var(--sp-4)}
.card-b p{font-size:var(--fs-small);line-height:1.6;color:var(--muted)}
.card-b p:last-of-type{margin-bottom:0}
.card-b .k{display:block;font:700 var(--fs-cap)/1 var(--sans);letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-2)}
.card-b .v{font:700 var(--fs-body)/1.3 var(--sans);color:var(--text)}
.card-b .v a{display:inline-flex;align-items:center;min-height:48px}

.bio{display:grid;grid-template-columns:400px minmax(0,1fr);gap:var(--sp-7);align-items:start}
@media (max-width:900px){ .bio{grid-template-columns:1fr} }
.credline{font:700 var(--fs-cap)/1.6 var(--sans);letter-spacing:.10em;
  text-transform:uppercase;color:var(--text);margin-top:var(--sp-5);max-width:none;
  border-top:2px solid var(--rule);padding-top:var(--sp-3);display:inline-block}

/* ——— the mandated disclosure blocks, set as a SPECIFICATION, not an apology.
       The words are verbatim per COMPLIANCE-GUARDRAILS; the treatment is ours,
       and on paper a hairline-ruled spec block with a black header reads as a
       clause in a contract rather than as small print. ——— */
.spec{border:1px solid var(--mat);background:var(--paper);margin-top:var(--sp-7);
  max-width:min(80ch,100%)}
.spec-h{padding:var(--sp-3) var(--sp-4);background:var(--stock-2);
  border-bottom:2px solid var(--rule);
  font:700 var(--fs-cap)/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--text)}
.spec-b{padding:var(--sp-5) var(--sp-4)}
.spec-b p{font:var(--fs-small)/1.6 var(--sans);color:var(--dim);max-width:none}
.spec-b p:last-child{margin-bottom:0}
.spec-b p strong{color:var(--text)}
.band .spec{background:#1d1d20;border-color:#3a3a3e}
.band .spec-h{background:#000;border-bottom-color:var(--on-ink);color:var(--on-ink)}
.band .spec-b p{color:var(--on-ink-dim)}
.band .spec-b p strong{color:var(--on-ink)}

/* ——— the offer: numbered steps. A real sequence, so it gets real numerals. ——— */
.steps{counter-reset:st;border-top:2px solid var(--rule);margin-top:var(--sp-6)}
.st{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-5);
  padding:var(--sp-4) 0;border-bottom:1px solid var(--hair);align-items:baseline}
.st::before{counter-increment:st;content:"0" counter(st);
  font:700 var(--fs-cap)/1.3 var(--mono);letter-spacing:.11em;color:var(--muted)}
.st p{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--text);max-width:none}
.st b{font-weight:700}
.band .steps{border-top-color:var(--on-ink)}
.band .st{border-bottom-color:#333337}
.band .st::before{color:var(--on-ink-muted)}
.band .st p{color:var(--on-ink)}

/* ——— contact links: 48px targets, never a hairline ——— */
.contact-list{list-style:none;margin:var(--sp-4) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.contact-list a{display:inline-flex;align-items:center;min-height:48px;
  padding:0 var(--sp-3) 0 0;font:700 var(--fs-body)/1 var(--sans);color:var(--text);
  text-decoration:none;border-bottom:2px solid var(--ink)}
.contact-list a:hover{color:var(--muted);border-bottom-color:var(--mat)}
.band .contact-list a{color:var(--on-ink);border-bottom-color:var(--on-ink)}
.band .contact-list a:hover{color:var(--on-ink-muted);border-bottom-color:var(--on-ink-dim)}
.inline-a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--mat);
  display:inline-block}
.inline-a:hover{border-bottom-color:var(--ink)}
.band .inline-a{color:var(--on-ink);border-bottom-color:var(--on-ink-dim)}
.band .inline-a:hover{border-bottom-color:var(--on-ink)}

/* ——— footer: continues the closing ink band as one movement, so the page
       carries exactly TWO ink zones rather than three competing ones. ——— */
footer{background:var(--ink);color:var(--on-ink);padding:var(--sp-8) 0 var(--sp-9)}
.foot-top{display:flex;gap:var(--sp-7);align-items:flex-start;flex-wrap:wrap;
  padding-bottom:var(--sp-6);border-bottom:1px solid #333337}
/* The footer used to load cp-lockup-h.svg (142KB) alongside the header's
   cp-lockup-h-light.svg (142KB) — two files embedding the SAME three base64
   rasters, i.e. 342KB of logo on one page, which is HOUSE-BOOK Rule 35's exact
   finding. The footer now reuses cp-mark.svg, already loaded and cached by the
   hero, and sets the wordmark as live text. Same lockup, 142KB lighter, and no
   duplicate payload. Measured, not estimated. */
.foot-top .flock{display:flex;align-items:center;gap:var(--sp-4)}
.foot-top .flock img{height:64px;width:auto}
.foot-top .flock .fwm{font:700 22px/0.98 var(--sans);letter-spacing:.02em;
  text-transform:uppercase;color:var(--on-ink)}
.foot-top .flock .fwm span{display:block}
.foot-top .flock .tagline{font:700 var(--fs-cap)/1.4 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:var(--on-ink-muted);
  border-left:1px solid #3a3a3e;padding-left:var(--sp-4)}
.foot-top .small{color:var(--on-ink-muted)}
.foot-top .contact-list a{color:var(--on-ink);border-bottom-color:var(--on-ink)}
@media (max-width:560px){
  .foot-top .flock .tagline{border-left:0;padding-left:0;letter-spacing:.16em}
}
.foot-legal{margin-top:var(--sp-6);columns:2;column-gap:var(--sp-8)}
.foot-legal p{font:var(--fs-cap)/1.65 var(--sans);color:var(--on-ink-dim);
  max-width:none;margin:0 0 var(--sp-4);break-inside:avoid}
.foot-legal p strong{color:var(--on-ink)}

/* ——— the illustrative flag, as an ink stamp ——— */
.tag-illus{display:inline-block;font:700 var(--fs-cap)/1 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-ink);background:var(--ink);
  padding:8px 10px;margin-bottom:var(--sp-4)}

/* ——— portrait plate: mounted like the drawings, in the meta rail ——— */
/* No saturate/contrast filter. On a monochrome page the plates and the portrait
   carry the only chroma there is; desaturating them works against the palette
   decision rather than with it. */
.portrait-plate{margin-top:var(--sp-4);border:1px solid var(--mat);background:var(--stock)}
.portrait-plate img{width:100%;height:auto;display:block}
.portrait-plate .pp-cap{padding:var(--sp-3) var(--sp-4);border-top:2px solid var(--rule);
  font:700 var(--fs-cap)/1.45 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);background:var(--paper)}
.portrait-plate .pp-cap b{display:block;color:var(--text);margin-bottom:2px}
@media (max-width:900px){ .portrait-plate{max-width:260px} }

/* ============================================================================
   RESPONSIVE — the rail folds above the field; nothing is centred into a narrow
   column inside a wide box.
   ============================================================================ */
@media (max-width:1000px){
  :root{--fs-display:50px;--fs-h2:29px;--fs-lead:19px;--sp-9:72px;--sp-8:56px}
  .sheet{grid-template-columns:1fr;gap:var(--sp-6)}
  .sheet > .rail,.sheet > .field{grid-column:1}
  .titleblock{position:static}
  .titleblock .tb-row{border-bottom:1px solid var(--mat);border-right:0}
  .titleblock .tb-row:first-child{border-bottom:0}
  .titleblock .tb-row:last-child{border-bottom:0}
  .hero-grid,.bio,.barhead,.plate-pair{grid-template-columns:1fr}
  .markplate{width:min(230px,66%);justify-self:start}
  .proofstrip{max-width:520px}
  .bio{gap:var(--sp-6)}
  .foot-legal{columns:1}
  /* The in-page nav is dropped below 1000px with no hamburger, deliberately: this
     is a two-page brochure site with a linear argument, no forms and no app
     surface, and the header keeps BOTH contact routes at every width, which is the
     only control that actually converts. A menu button here would be chrome
     standing in for navigation the page does not need. Recorded so a future
     maintainer knows it is a decision, not an omission. */
  .nav{display:none}
  .sheetframe{padding:var(--sp-6)}
}
@media (max-width:820px){
  .plate-cap .legal{columns:1}
}
@media (max-width:620px){
  :root{--fs-display:40px;--fs-h2:26px}
  .hero{min-height:0}
  .head-in{gap:var(--sp-3);padding:var(--sp-3) var(--sp-4)}
  .lockup img{height:32px}
  .head-cta{margin-left:auto}
  .btn-row .btn,.barhead .btn{width:100%}
  /* nothing to re-stack here any more — the <=1000px rule above already stacks
     the panel in one column. Kept as a no-op anchor for the border rhythm only. */
  .lg{grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4)}
  .lg-d{grid-column:2}
  .legend.nokey .lg{grid-template-columns:1fr}
  .legend.nokey .lg-d{grid-column:1}
  .cb-row{grid-template-columns:1fr;gap:var(--sp-2)}
  .cb-v{text-align:left}
  .barhead{padding:var(--sp-6) var(--sp-5)}
  .sheetframe{padding:var(--sp-5)}
  .plate-mat{padding:var(--sp-3)}
}
@media (max-width:480px){
  /* both routes stay reachable from the sticky header at every width — the header
     is the only CTA on screen for most of a phone scroll, and email is the route
     the primary audience is likelier to use. Tighten, never drop. */
  /* 4px between two adjacent 48px-tall targets invites a mis-tap; 8px is the
     floor for two independently-tappable controls sitting side by side. */
  .head-cta{gap:var(--sp-2)}
  .head-cta .btn{font-size:var(--fs-cap);padding:0 10px;letter-spacing:.02em;
    min-width:64px}
  .lockup img{height:28px}
}

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

@media print{
  .site-head,.btn-row,.barhead,.nav,.head-cta{display:none}
  body{background:#fff;color:#000}
  section.band,footer{background:#fff!important;color:#000!important}
  .band h2,.band p,.band .legal,.foot-legal p{color:#000!important}
  .plate,.spec,.card,.titleblock{border-color:#999;background:#fff}
  .plate-head,.card-h,.titleblock .tb-row:first-child{background:#fff!important}
  .plate-n,.plate-t,.card-h,.titleblock .tb-n,.titleblock .tb-t{color:#000!important}
}

/* hard guard: nothing may exceed the viewport width. NOTE: .wrap is deliberately
   NOT in this selector — it sets its own max-width above, and listing it here at
   equal specificity but later in the file cancelled it. */
body,main,section{max-width:100%;overflow-wrap:break-word}
.wrap{overflow-wrap:break-word}
html,body{overflow-x:hidden}

/* ——— the offer, laid out as a specification: three columns of plain statements.
       No icons. The list IS the argument, so nothing decorates it. ——— */
.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);
  margin-top:var(--sp-7);border-top:2px solid var(--rule);padding-top:var(--sp-5)}
.offer-grid .og-col h3{font-size:var(--fs-h3);margin:0 0 var(--sp-4);letter-spacing:-.01em}
.offer-grid ul{list-style:none;margin:0;padding:0}
.offer-grid li{font:var(--fs-small)/1.5 var(--sans);color:var(--text);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--hair)}
.offer-grid li:last-child{border-bottom:0}
.offer-grid li b{font-weight:700}
@media (max-width:980px){ .offer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:660px){ .offer-grid{grid-template-columns:1fr;gap:var(--sp-4)} }

/* ——— the four stages of a raise. Numbered like drawing sheets, because the
       sequence is the argument: find you, read the ground, believe it, clear it. ——— */
.stagelist{margin-top:var(--sp-7);border-top:2px solid var(--rule)}
.stg{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--sp-5);
  padding:var(--sp-6) 0;border-bottom:1px solid var(--hair)}
.stg:last-child{border-bottom:0}
.stg-n{font:700 var(--fs-h3)/1 var(--mono);color:var(--go);letter-spacing:.04em}
.stg-b h3{font-size:var(--fs-h3);margin:0 0 var(--sp-3);letter-spacing:-.01em;max-width:32ch}
.stg-b p{margin:0;color:var(--muted);max-width:66ch}
@media (max-width:660px){
  .stg{grid-template-columns:1fr;gap:var(--sp-2)}
  .stg-n{font-size:var(--fs-small)}
}

.portrait-plate{margin:0;border:1px solid var(--mat);background:var(--stock)}

.rail .card{margin-top:var(--sp-4)}
@media (max-width:900px){.portrait-plate{max-width:420px}}

/* ——— mobile: the inline 'book fifteen minutes' link is a real CTA, so it needs a
       real tap target. Inline in a sentence on desktop, 44px tall on touch. ——— */
@media (max-width:660px){
  .hero .small .inline-a{display:inline-flex;align-items:center;min-height:44px}
  /* tighten the hero so the proof exhibit reaches the first scroll sooner */
  .hero h1{font-size:40px;line-height:1.03}
  .hero .lead{font-size:18px}
  .hero .lead,.hero p{margin-bottom:var(--sp-3)}
  .hero .btn-row{margin-top:var(--sp-4)}
  .hero .defn{margin-top:var(--sp-5)}
}