/* ==========================================================================
   Rough-In Planning Co — shared stylesheet for index.html and scope.html

   Type
     Newsreader     display + entry titles. Newspaper-lineage text serif with
                    an optical-size axis, so it holds at 84px without going
                    spindly. Reads as a document face, not a fashion face.
     Archivo        body, and every label on the page. Labels are 600 weight,
                    uppercase, tracked — this is what replaced the mono.
     IBM Plex Mono  data only: the drop schedule table, the sheet codes,
                    the step numbers. Nothing else. This is the drawing
                    lettering, and drawings letter their annotations, not
                    their prose.

   Color
     Warm paper ground, warm near-black, one accent: a desaturated slate
     blue — chalk line on subfloor, faded plan print. No pure white or black.

   Ground
     Light only, deliberately. A drawing set is ink on paper; there is no
     dark variant of a plan sheet, and a dark site reads tech-forward, which
     is the wrong signal for a design practice selling to builders. Every
     colour is painted explicitly so the page holds its own ground whatever
     theme the browser or host is in.
   ========================================================================== */

:root {
  /* Light only. See the Ground note above — this is a commitment, not an
     omission, so color-scheme is pinned rather than left to the viewer. */
  color-scheme: light;

  /* --- surfaces --- */
  --paper:       #f6f5f1;   /* bond paper: reads white, is not #fff        */
  --paper-2:     #e9e7e0;   /* tinted band under the drop schedule         */
  --deep:        #22201c;   /* full-bleed dark band                        */

  /* --- ink (ratios: on --paper / on --paper-2) --- */
  --ink:         #1f1d1a;   /* 15.4 : 1  /  13.6 : 1                       */
  --ink-2:       #5a544a;   /*  6.9 : 1  /   6.1 : 1                       */
  --ink-3:       #6d6659;   /*  5.2 : 1  /   4.6 : 1                       */
  --accent:      #38596c;   /*  6.8 : 1  /   6.0 : 1   slate blue          */

  /* --- ink on the dark band --- */
  --deep-ink:    #f0eee8;
  --deep-ink-2:  #a8a094;
  --deep-accent: #8fb2c4;

  /* --- rules --- */
  --rule:        #aca392;   /* schedule hairlines; decorative, no minimum  */
  --rule-strong: #8b8474;   /*  3.4 : 1  /   3.0 : 1   table head, sheet   */
  --deep-rule:   #5a544a;

  /* --- faces --- */
  --serif: "Newsreader", "Iowan Old Style", Charter, Georgia, serif;
  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- scale --- */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   clamp(1.125rem, 0.98rem + 0.6vw, 1.3125rem);
  --t-lg:   clamp(1.25rem,  1.14rem + 0.45vw, 1.4375rem);
  --t-xl:   clamp(1.5rem,   1.25rem + 1vw,    2rem);
  --t-2xl:  clamp(2.125rem, 1.40rem + 3vw,    3.25rem);
  --t-3xl:  clamp(3rem,     1.60rem + 6vw,    5.25rem);

  /* --- rhythm --- */
  --band:       clamp(3.75rem, 6vw, 6rem);      /* moments: hero, statement, closing */
  --band-close: clamp(2.25rem, 3.5vw, 3.5rem);  /* the working run between them       */
  --gutter:     1.25rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.003em;
  font-size-adjust: from-font;
}

/* ==========================================================================
   Shell
   ========================================================================== */

.wrap {
  width: min(100% - (var(--gutter) * 2), 74rem);
  margin-inline: auto;
}

.band { padding-block: var(--band); }
.band--close { padding-block: var(--band-close); }
.band--tint { background: var(--paper-2); }

.band--deep {
  background: var(--deep);
  color: var(--deep-ink);
  --ink: var(--deep-ink);
  --ink-2: var(--deep-ink-2);
  --ink-3: var(--deep-ink-2);
  --accent: var(--deep-accent);
  --rule: var(--deep-rule);
}

/* Rail: a 12rem margin column carrying the section heading, and a content
   column. Below 64rem the rail collapses and the heading sits above. */
.row { display: grid; row-gap: 1.5rem; }

@media (min-width: 64rem) {
  .row {
    grid-template-columns: 12rem minmax(0, 1fr);
    column-gap: 3rem;
    row-gap: 0;
  }
}

/* ==========================================================================
   Labels and headings
   ========================================================================== */

/* These were 13px uppercase grey: caption treatment on an element doing a
   heading's job, which left every section without an entry point and put a
   hole in the type scale between body and masthead. Sans against the serif
   item titles keeps the two distinguishable when the rail collapses and they
   stack. */
.key {
  font-family: var(--sans);
  font-size: clamp(1.375rem, 1.15rem + 0.85vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.75rem;
}

.eyebrow a { color: inherit; text-decoration-color: var(--rule-strong); }

.masthead {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: var(--t-3xl);
  line-height: 0.95;
  letter-spacing: -0.021em;
  font-size-adjust: from-font;
  margin: 0;
  max-width: 11ch;
  text-wrap: balance;
}

.masthead--sub { font-size: var(--t-2xl); max-width: 16ch; letter-spacing: -0.018em; }

.lede {
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 34rem;
  margin: 2rem 0 0;
  text-wrap: pretty;
}

/* ==========================================================================
   Prose
   ========================================================================== */

.prose { max-width: 34rem; }
.prose p { margin: 0 0 1.15rem; text-wrap: pretty; }
.prose p:last-child { margin-block-end: 0; }

.note { margin: 2.25rem 0 0; color: var(--ink-3); font-size: var(--t-sm); max-width: 34rem; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness 120ms linear;
}

a:hover { text-decoration-thickness: 2px; }

a:focus-visible,
[tabindex]:focus-visible,
.skip:focus {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Screen-reader-only text. Currently carries the drop schedule's <caption>,
   which names the table for anyone who cannot see the sheet head above it. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--accent);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  z-index: 10;
}

.skip:focus { inset-inline-start: 0; }

/* ==========================================================================
   Schedules — one object, three instances.
   Deliverables, pricing tiers, and the drop schedule are the same thing:
   a keyed list with hairline rows. This is what the page has instead of
   cards, and it is why they read as one system.
   ========================================================================== */

.schedule { margin: 0; padding: 0; list-style: none; }

.schedule > * {
  display: grid;
  grid-template-columns: 3rem minmax(0, 14rem) minmax(0, 1fr);
  column-gap: 2rem;
  align-items: baseline;
  padding-block: 1.15rem;
  border-block-start: 1px solid var(--rule);
}

.schedule > *:last-child { border-block-end: 1px solid var(--rule); }

/* The sheet code and the letters it comes from carry the same highlight, so
   the mnemonic is visible without a second colour and without underline,
   which on this site means "link". Verified at both grounds: accent text on
   the highlight clears 4.5:1 on paper and on the tint band. */
:root {
  --hl:      color-mix(in srgb, var(--accent) 18%, transparent);  /* code chip */
  --hl-mark: color-mix(in srgb, var(--accent) 26%, transparent);  /* letter band */
}

.code {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--accent);
  margin: 0;
  justify-self: start;
  background: var(--hl);
  padding: 0.2em 0.4em;
  margin-inline-start: -0.4em;
}

/* Marker stroke, not a box. An inline background paints the font's whole
   content box, which is both taller than the capital and metric-dependent;
   a pseudo-element inset by percentage covers the middle ~70% instead, which
   lands near cap-to-baseline in any text face and can never collide across
   lines. The skew gives the ends a marker's angle, the uneven radii and the
   asymmetric overhang keep it off a perfect rectangle. isolation:isolate so
   the z-index:-1 stroke stays above whatever band ground is behind it. */
.mn {
  position: relative;
  isolation: isolate;
}

/* A flat band across the lower part of the letter, not a full-height box.
   The inline background would paint the font's whole content box, which is
   taller than the capital and collides across wrapped lines; a pseudo-element
   inset by percentage of that box sits from mid-cap to just past the baseline
   in any text face, and can never reach the line above or below. */
.mn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 46% 17%;
  /* A hair wider than the glyph's ink, a hair narrower than its advance.
     0.04em inside read as too narrow, -0.09em outside read as a chip. */
  inset-inline: -0.02em;
  background: var(--hl-mark);
  pointer-events: none;
}

@media (prefers-contrast: more) {
  .mn { --hl-mark: color-mix(in srgb, var(--accent) 42%, transparent); }
}

.schedule h3,
.schedule dt {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

.schedule p,
.schedule dd {
  margin: 0;
  max-width: 34rem;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Pricing keeps the .price hook and right-aligns it, so a real number drops
   into a column that is already there. */
.tier dt {
  grid-column: 2 / span 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  max-width: 34rem;
}

.tier dd { grid-column: 2 / span 2; max-width: 34rem; }

/* Published rates. No sheet code on these rows, so they start at the rail
   edge rather than leaving the code column empty, and they run tighter than
   the deliverables schedule above. The figure carries full ink at reading
   size: it is the number the page is now making a commitment about. */
.rates > * { padding-block: 0.85rem; }

.rates .tier dt,
.rates .tier dd,
.addons .tier dt,
.addons .tier dd { grid-column: 1 / -1; }

/* One figure column for rates and add-ons alike, so the block reads as a
   single rate sheet rather than two tables. */
.rates .tier dt,
.addons .tier dt { max-width: 26rem; }

.rates .price,
.addons .price {
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 500;
}

.price {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Scope page: the entries carry full paragraphs, so the title stacks above
   the prose rather than sitting beside it. */
.schedule--stacked > * { grid-template-columns: 3rem minmax(0, 38rem); row-gap: 0.45rem; padding-block: 1.5rem; }
.schedule--stacked p { max-width: 38rem; }
.schedule--stacked h3 { grid-column: 2; }
.schedule--stacked p  { grid-column: 2; }
.schedule--stacked .code { grid-row: 1 / span 2; padding-block-start: 0.45rem; }

/* An entry that is not a sheet has no sheet code, so it takes the full width
   rather than leaving the code column empty and looking like a missing value. */
.entry--nocode h3,
.entry--nocode p { grid-column: 1 / -1; }

@media (max-width: 71.99rem) {
  .schedule > * { grid-template-columns: 2.75rem minmax(0, 1fr); row-gap: 0.4rem; }
  .schedule h3, .schedule dt, .schedule p, .schedule dd { grid-column: 2; }
  .tier dt, .tier dd { grid-column: 2; }
  .code { grid-row: 1 / span 2; padding-block-start: 0.4rem; }
}

@media (max-width: 34rem) {
  .schedule > * { grid-template-columns: minmax(0, 1fr); }
  .schedule h3, .schedule dt, .schedule p, .schedule dd, .code { grid-column: 1; }
  .tier dt, .tier dd { grid-column: 1; }
  .code { grid-row: auto; padding-block-start: 0; margin-block-end: 0.35rem; }
  .tier dt { display: grid; row-gap: 0.1rem; }
  .price { justify-self: start; }
}

/* ==========================================================================
   Drop schedule extract — the visual anchor.
   Runs the full 74rem page width while the rest of the content column is
   59rem, so it reads as wider than the page it sits in. This is the one
   thing on the site that shows the actual product, and it is typography,
   not a picture of typography.
   ========================================================================== */

.sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block-end: 1rem;
  margin-block-end: 1.75rem;
  border-block-end: 1px solid var(--rule-strong);
}

.sheet-title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1.15;
  letter-spacing: -0.014em;
  margin: 0;
}

.sheet-meta {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* The drop schedule is the one element allowed to exceed the viewport. It
   scrolls inside its own box; these edge shades are the only cue that it can.
   The cover layers use background-attachment: local, so they travel with the
   content and sit over the shade at each end of the scroll — the shade shows
   only while there is more table in that direction. Backgrounds only: no
   script, and nothing here can fade the text itself. */
.table-wrap {
  overflow-x: auto;
  --wrap-bg:   var(--paper);
  --wrap-bg-0: rgb(246 245 241 / 0);
  --edge:      rgb(31 29 26 / 0.13);
  --edge-0:    rgb(31 29 26 / 0);
  background:
    linear-gradient(to right, var(--wrap-bg) 55%, var(--wrap-bg-0)) 0    0 / 2.5rem  100% no-repeat local,
    linear-gradient(to left,  var(--wrap-bg) 55%, var(--wrap-bg-0)) 100% 0 / 2.5rem  100% no-repeat local,
    linear-gradient(to right, var(--edge),        var(--edge-0))    0    0 / 1.25rem 100% no-repeat scroll,
    linear-gradient(to left,  var(--edge),        var(--edge-0))    100% 0 / 1.25rem 100% no-repeat scroll;
}

.band--tint .table-wrap { --wrap-bg: var(--paper-2); --wrap-bg-0: rgb(233 231 224 / 0); }

@media (prefers-contrast: more) { .table-wrap { --edge: rgb(31 29 26 / 0.28); } }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 44rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.6875rem;
  padding: 0 2rem 0.7rem 0;
  border-block-end: 1px solid var(--rule-strong);
  white-space: nowrap;
}

td { padding: 0.36rem 2rem 0.36rem 0; color: var(--ink-2); white-space: nowrap; }
tbody tr:first-child td { padding-block-start: 0.9rem; }
th:last-child, td:last-child { padding-inline-end: 0; }
td.tag { color: var(--accent); font-weight: 500; }
td.loc { color: var(--ink); white-space: normal; }

.sheet-foot { margin: 1.5rem 0 0; font-size: var(--t-sm); color: var(--ink-3); max-width: 38rem; text-wrap: pretty; }

/* ==========================================================================
   Statement bands
   ========================================================================== */

.statement {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: var(--t-2xl);
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0;
  max-width: 19ch;
  text-wrap: balance;
}

.statement em { font-style: italic; color: var(--deep-accent); }

.statement-note { margin: 2.5rem 0 0; max-width: 32rem; color: var(--deep-ink-2); font-size: var(--t-base); text-wrap: pretty; }

.closing { max-width: 18ch; }
.closing--sub { font-size: var(--t-xl); max-width: 22ch; }
.closing-note { margin: 2rem 0 0; color: var(--deep-ink-2); }
.closing-note a { color: var(--deep-ink); text-decoration-color: var(--deep-accent); }

/* ==========================================================================
   Process steps — a real sequence, so it is really numbered.
   ========================================================================== */

/* How it works and Pricing were built on the same template — same rail, same
   label, same content column — so they read as one section. The process is a
   sequence, which is the one thing on this page that has a natural horizontal
   reading; turning it across breaks the rhyme and shortens the page. The
   query is on the field, not the viewport: what matters is the width of the
   column the steps actually sit in, which the rail has already narrowed. */
.field { container-type: inline-size; }

.steps { display: grid; row-gap: 1.75rem; margin: 0; padding: 0; list-style: none; counter-reset: s; }

.step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 34rem);
  column-gap: 2rem;
  counter-increment: s;
}

.step::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--accent);
  line-height: 1.75;
}

.step p { margin: 0; text-wrap: pretty; }
.step p + p { margin-block-start: 0.4rem; color: var(--ink-2); }

@media (max-width: 34rem) {
  .step { grid-template-columns: minmax(0, 1fr); row-gap: 0.35rem; }
  .step::before { line-height: 1.4; }
}

/* Must come after the .step rules above: @container adds no specificity, so a
   later plain .step rule would otherwise win and the steps would stay vertical. */
@container (min-width: 46rem) {
  .steps { grid-auto-flow: column; grid-auto-columns: 1fr; column-gap: 2rem; row-gap: 0; }
  .step {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.55rem;
    align-content: start;
    padding-block-start: 0.9rem;
    border-block-start: 1px solid var(--rule);
  }
  .step::before { line-height: 1.2; }
}

/* ==========================================================================
   Photograph plates — styled and documented, shipping empty.
   See the commented markup blocks in index.html for what goes where.
   ========================================================================== */

.plate { margin: 0; }

.plate img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--plate-ratio, 16 / 7);
  object-fit: cover;
  background: var(--paper-2);
}

.plate figcaption {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-block-start: 0.85rem;
  max-width: 34rem;
  text-wrap: pretty;
}

.plate--bleed { --plate-ratio: 16 / 7; }
.plate--sheet { --plate-ratio: 3 / 2; max-width: 38rem; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-foot { padding-block: 2.75rem 4rem; }

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  justify-content: space-between;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.foot p { margin: 0; }
/* The one line in the footer that is not a navigation item. Dropping the caps
   and the tracking is what keeps it from being read as a third link. */
.foot .foot-what {
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 400;
}
.foot a { color: inherit; text-decoration-color: var(--rule-strong); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.pricing-note { margin: 0 0 2.5rem; max-width: 34rem; color: var(--ink-2); text-wrap: pretty; }
.lede--sub { font-size: var(--t-md); }

/* ==========================================================================
   Fine print — scope exclusions.
   These are terms, not an argument, so they are a list rather than prose and
   they sit at the bottom of the reading page, subordinate to everything above
   it. Prose addresses a reader; a list states. That distinction is the whole
   reason this stopped reading as defensive.
   ========================================================================== */

.fineprint {
  margin: 1.85rem 0 0;
  padding: 1.15rem 0 0;
  list-style: none;
  max-width: 32rem;
  border-block-start: 1px solid var(--rule);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-3);
}

.fineprint li { margin-block-end: 0.3rem; }
.fineprint li:last-child { margin-block-end: 0; }

.fineprint-note { margin: 1.15rem 0 0; max-width: 32rem; font-size: var(--t-sm); color: var(--ink-3); }

/* ==========================================================================
   Increased contrast
   The schedule hairlines are deliberately faint (~2:1) — they are separators,
   not UI boundaries, so they carry no WCAG minimum. For a reader who has asked
   their system for more contrast, they lift to meet the 3:1 non-text bar and
   the muted ink steps up a level. Nothing else about the design changes.
   ========================================================================== */

@media (prefers-contrast: more) {
  :root {
    --rule:        #7d7565;   /*  3.9 : 1 on paper  */
    --rule-strong: #625b4d;   /*  6.0 : 1 on paper  */
    --ink-2:       #4a453c;   /*  8.7 : 1           */
    --ink-3:       #55503f;   /*  7.4 : 1           */
  }
}

/* The way through to the reading page. It sits under pricing because that is
   where someone still reading wants terms, and it is set at body size: this
   is the main route from the front page to half the site. */
.onward { margin: 2.75rem 0 0; font-size: var(--t-base); }

/* ==========================================================================
   Hero — the drawing as a cropped field, not a picture in a slot

   At plate size the elevation read as an illustration of a rack: a neutral
   object sitting politely in a column. Blown past the legibility of the whole
   object and run off two edges, it reads as precision instead — a fragment of
   the real thing, the way a practice monograph crops a detail sheet.

   The crop is anchored in vw so it holds its proportions at every width: the
   drawing is 62vw wide starting at 50%, so the same half of it shows whatever
   the viewport. max(37rem, 50%) keeps its left edge clear of the lede measure
   at the narrow end of the desktop range.
   ========================================================================== */

.hero-band {
  position: relative;
  container-type: inline-size;
  overflow: hidden;          /* fallback */
  overflow: clip;            /* clips without creating a scroll container */
  padding-block: var(--band);
  min-block-size: min(31rem, 74vh);
  display: grid;
  align-content: center;
}

.hero-copy { position: relative; z-index: 1; }

.hero-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.hero-art .rack {
  position: absolute;
  inline-size: clamp(40rem, 62cqi, 88rem);
  max-inline-size: none;
  inset-inline-start: max(37rem, 50%);
  inset-block-start: -8cqi;
}

/* Phone and small tablet: the field becomes a band under the copy, still
   cropped and still running off the right edge, just bounded in height. */
@media (max-width: 63.99rem) {
  .hero-band { min-block-size: 0; display: block; padding-block-end: 0; }

  .hero-art {
    position: relative;
    inset: auto;
    block-size: 15rem;
    margin-block-start: 3rem;
    overflow: hidden;
    overflow: clip;
  }

  .hero-art .rack {
    inline-size: 165cqi;
    inset-inline-start: 30%;
    inset-block-start: -34cqi;
  }
}

/* ==========================================================================
   Hero drawing — stylised rack elevation
   Four declared lineweights, because a real sheet runs a hierarchy and a flat
   one is the first thing that gives a drawing away: frame heavy, devices
   medium, internal detail fine, dimension and extension lines finest.
   All lettering is the mono. No drawing is lettered in a book serif.
   ========================================================================== */

.rack {
  display: block;
  width: 100%;
  max-width: 17.5rem;
  height: auto;
  --draw:      var(--accent);   /* 6.8 : 1 on paper */
  --draw-fine: #7f96a5;         /* 2.8 : 1 — subordinate detail, non-text  */
}

.rack .hv,
.rack .md,
.rack .dm,
.rack .fn,
.rack .fnw,
.rack .dmf { fill: none; }

.rack .hv  { stroke: var(--draw);      stroke-width: 1.9;  }
.rack .md  { stroke: var(--draw);      stroke-width: 1.05; }
.rack .dm  { stroke: var(--draw);      stroke-width: 0.55; }
.rack .fnw { stroke: var(--draw-fine); stroke-width: 1.05; }
.rack .fnw.fill { fill: var(--draw-fine); }
.rack .dmf { stroke: var(--draw-fine); stroke-width: 0.55; }
.rack .fn  { stroke: var(--draw-fine); stroke-width: 0.45; }

.rack .dot  { fill: var(--draw-fine); stroke: none; }
.rack .mask { fill: var(--paper);     stroke: none; }

.rack text { font-family: var(--mono); font-weight: 500; letter-spacing: 0.09em; }
.rack .t   { fill: var(--draw); }
.rack .t2  { fill: var(--draw-fine); font-weight: 400; }

@media (prefers-contrast: more) {
  .rack { --draw-fine: #5c7382; }
}

/* Markup layer — a second pass in pencil over the print. Warm brown-grey
   against the slate: the way a marked-up plot actually looks, and it keeps
   the page to one accent plus an annotation ink rather than two accents. */
.rack { --draw-mark: #7d6450; }        /* 5.1 : 1 on paper */
.rack .mk  { stroke: var(--draw-mark); stroke-width: 0.7; fill: none; }
.rack .mkt   { fill: var(--draw-mark); font-weight: 500; letter-spacing: 0.06em; }
.rack .mkdot { fill: var(--draw-mark); stroke: none; }