/* ==========================================================================
   BROADSHEET — Rockford Core LLC. Locked design system.
   Pure HTML/CSS. No JavaScript. No external requests. Light only.
   Order matters: section 5 sets the default grid placement, and every
   placement override (rules, section heads, plate, contact grid, footer)
   must stay AFTER it — they share specificity 0-1-0 and win on source order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  background: #F7F4EE;
  scroll-behavior: smooth;
  scroll-padding-block-start: 7rem;   /* focused anchors clear the sticky bar */
}
body { margin: 0; }
:where(h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
:where(img, svg, video) { display: block; max-width: 100%; height: auto; }
:where(input, textarea, button, select) { font: inherit; color: inherit; }
:where(p, h1, h2, h3, li, label, summary, a, dt, dd) { overflow-wrap: break-word; }
:where(button) { background: none; border: 0; }
hr { border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  interpolate-size: allow-keywords;   /* enables the <details> height easing below */

  /* --- surfaces --- */
  --paper:               #F7F4EE;   /* L 0.90649  page */
  --paper-soft:          #EFEBE2;   /* L 0.83258  plate bed, summary hover */
  --panel:               #15140F;   /* L 0.00694  the one inverted band */
  --panel-field:         #1E1D17;   /* L 0.01217  input wells */
  --panel-hover:         #26241C;   /* L 0.01758  input hover / focus fill */

  /* --- ink --- */
  --ink:                 #12110F;   /* L 0.00564 */
  --ink-muted:           #57514A;   /* L 0.08406 */
  --ink-invert:          #F2EFE7;   /* L 0.86380 */
  --ink-invert-muted:    #A9A296;   /* L 0.36478 */

  /* --- accent: vermilion. Five appearances, no more. --- */
  --accent:              #A8331A;   /* L 0.10767  masthead square, hero stop, numerals, links */
  --accent-press:        #8A2C14;   /* L 0.07255  link hover on paper */
  --accent-invert:       #E0794F;   /* L 0.30087  numeral 04 + submit fill */
  --accent-invert-press: #EC8C63;   /* L 0.37490  submit hover */
  --alert-invert:        #F2A08E;   /* L 0.45972  form errors on the panel */

  /* --- lines --- */
  --rule:                #DCD5C8;   /* decorative hairline on paper */
  --rule-strong:         #12110F;   /* structural rule: always ink */
  --rule-panel:          #3A382F;   /* decorative hairline on the panel */
  --rule-control:        #A9A296;   /* input underline: informational, >=3:1 */
  --hair: 1px;
  --hair-strong: 2px;

  /* --- focus --- */
  --focus:        #12110F;
  --focus-invert: #F2EFE7;

  /* --- geometry --- */
  --gutter:     clamp(1.25rem, 0.55rem + 3.5vw, 3.5rem);   /*   20 ->   56 */
  --main-max:   64rem;                                      /* 1024 text block */
  --margin-col: 0px;                                        /* grows at >=70rem */
  --measure:    62ch;

  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4.5rem;
  --s-9:  clamp(3.5rem, 1.6rem + 9.5vw, 9rem);    /* 56 -> 144  section rhythm */
  --s-10: clamp(4.5rem, 2rem + 12vw, 12rem);      /* 72 -> 192  hero rhythm */

  --page-cols:
    [full-start] minmax(var(--gutter), 1fr)
    [margin-start] var(--margin-col)
    [main-start] minmax(0, var(--main-max)) [main-end]
    minmax(var(--gutter), 1fr) [full-end];

  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur:  .18s;
}
@media (min-width: 70rem) {
  :root { --margin-col: clamp(6.5rem, 2rem + 6vw, 11rem); }  /* 104 -> 176 */
}

/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */
:root {
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Charter,
                  Georgia, "Times New Roman", serif;
  --font-text:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* fluid 320px -> 1440px, locked outside.
     B = (max-min)/11.2 vw,  A = min - (max-min)*0.285714 */
  --fs-display: clamp(2.5rem,    1.4286rem + 5.3571vw, 6.25rem);   /* 40 -> 100 */
  --fs-h2:      clamp(1.875rem,  1.4107rem + 2.3214vw, 3.5rem);    /* 30 ->  56 */
  --fs-h3:      clamp(1.1875rem, 1.0982rem + 0.4464vw, 1.5rem);    /* 19 ->  24 */
  --fs-lead:    clamp(1.1875rem, 1.0625rem + 0.6250vw, 1.625rem);  /* 19 ->  26 */
  --fs-body:    clamp(1.0625rem, 1.0268rem + 0.1786vw, 1.1875rem); /* 17 ->  19 */
  --fs-small:   clamp(0.875rem,  0.8571rem + 0.0893vw, 0.9375rem); /* 14 ->  15 */
  --fs-label:   clamp(0.6875rem, 0.6518rem + 0.1786vw, 0.8125rem); /* 11 ->  13 */
  --fs-numeral: clamp(2.75rem,   1rem      + 3.4vw,    4.5rem);    /* 44 ->  72 */
}

body {
  background-color: var(--paper);
  /* paper, not white: a 3px conic checker at 3.5% ink. No request. */
  background-image: repeating-conic-gradient(from 45deg,
    rgba(18, 17, 15, .035) 0% 25%, rgba(18, 17, 15, 0) 0% 50%);
  background-size: 3px 3px;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.018em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--fs-display); line-height: .96;  letter-spacing: -.032em; max-width: 17ch; }
h2 { font-size: var(--fs-h2);      line-height: 1.04; letter-spacing: -.024em; max-width: 20ch; }
h3 { font-size: var(--fs-h3);      line-height: 1.28; letter-spacing: -.012em; }

p { max-width: var(--measure); text-wrap: pretty; }
.lead {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.42;
  letter-spacing: -.012em;
  max-width: 46ch;
  color: var(--ink);
}
.prose > p + p { margin-block-start: var(--s-5); }
.prose p { color: var(--ink-muted); }

.eyebrow, .label, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  line-height: 1.2;
  color: var(--ink-muted);
}
.small { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-muted); }

.numeral {
  font-family: var(--font-mono);
  font-size: var(--fs-numeral);
  font-weight: 400;
  line-height: .8;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--accent);
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent);
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
a:hover { color: var(--accent-press); text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   4. FOCUS  (2.4.7 / 2.4.11 / 2.4.13)
   -------------------------------------------------------------------------- */
:where(a, button, input, textarea, summary):focus-visible {
  outline: var(--hair-strong) solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.panel :where(a, button, input, textarea, summary):focus-visible {
  outline-color: var(--focus-invert);
}
.skip {
  position: absolute; left: var(--s-4); top: var(--s-4); z-index: 100;
  transform: translateY(-200%);
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: .14em; text-decoration: none;
  padding: .85rem 1.1rem; border-radius: 2px;
}
.skip:focus-visible { transform: none; outline-color: var(--accent); }

/* --------------------------------------------------------------------------
   5. PAGE GRID — full-bleed rules, inset measure
   -------------------------------------------------------------------------- */
.page { display: grid; grid-template-columns: var(--page-cols); }

.section {
  display: grid;
  grid-template-columns: var(--page-cols);   /* identical template, so columns line up
                                                down the whole document without subgrid */
  grid-column: full-start / full-end;
  padding-block-end: var(--s-9);
}
.section > * { grid-column: main-start / main-end; min-width: 0; }

.rule--bleed { grid-column: full-start / full-end; block-size: var(--hair);        background: var(--rule); }
.rule--open  { grid-column: full-start / full-end; block-size: var(--hair-strong); background: var(--rule-strong); }

.section__head {
  grid-column: margin-start / main-end;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-9) var(--s-6);
}
.section__head .numeral { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); }
.section__head .eyebrow { margin-block-end: var(--s-3); }
@media (min-width: 70rem) {
  .section__head {
    grid-template-columns: var(--margin-col) minmax(0, 1fr);
    align-items: start;
    gap: 0;
  }
  .section__head .numeral {
    font-size: var(--fs-numeral);
    padding-inline-end: var(--s-4);
    margin-block-start: -.04em;   /* optical cap-height match to the h2 */
  }
}

/* --------------------------------------------------------------------------
   6. MASTHEAD
   -------------------------------------------------------------------------- */
/* The back-to-top and wordmark anchors point at #top, a zero-height marker at
   the very start of <body>. It cannot live on .masthead: a sticky element
   pinned to the viewport top is always already in view, so the browser updates
   the hash and never scrolls. */
#top { position: absolute; inset-block-start: 0; block-size: 0; }

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border-block-end: var(--hair) solid transparent;
}
@supports (backdrop-filter: blur(1px))     { .masthead { backdrop-filter: blur(10px) saturate(112%); } }
@supports not (backdrop-filter: blur(1px)) { .masthead { background: var(--paper); } }

.masthead__in {
  display: grid; grid-template-columns: auto auto;
  justify-content: space-between; align-items: center;
  gap: var(--s-3);
  min-block-size: 4rem;
  padding-inline: var(--gutter);
}
@media (min-width: 62rem) {
  .masthead__in { grid-template-columns: auto 1fr auto; min-block-size: 4.75rem; gap: var(--s-6); }
}

/* Section nav. Present only where there is room for it; below 62rem the CTA is
   the single action and the page is short enough to scroll. */
.masthead__nav { display: none; }
@media (min-width: 62rem) {
  .masthead__nav {
    display: flex; align-items: center; justify-self: center;
    gap: clamp(1.25rem, 2.2vw, 2.5rem);
  }
}
.masthead__nav a {
  position: relative;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-muted); text-decoration: none;
  white-space: nowrap;
  display: inline-flex; align-items: center; min-block-size: 44px;
  transition: color var(--dur) var(--ease);
}
.masthead__nav a::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: .7rem;
  block-size: var(--hair); background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.masthead__nav a:hover { color: var(--ink); }
.masthead__nav a:hover::after { transform: scaleX(1); }
/* The counter for the section the reader is in. Pure CSS, no scrollspy. */
.masthead__nav a:target { color: var(--ink); }

.wordmark {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark::before {
  content: ""; inline-size: 6px; block-size: 6px;
  background: var(--accent); flex: none;
}

/* The descriptor sits under the wordmark rather than centred, so the centre of
   the bar belongs to the nav. */
.masthead__descriptor { display: none; margin: 0; white-space: nowrap; }
@media (min-width: 78rem) {
  .masthead__lockup { display: grid; gap: .3rem; }
  .masthead__descriptor { display: block; font-size: var(--fs-label); letter-spacing: .1em; }
}

.masthead__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; padding-inline: 1rem;
  border: var(--hair) solid var(--ink); border-radius: 2px;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.masthead__cta:hover { background: var(--ink); color: var(--paper); }

/* 320px budget: wordmark "ROCKFORD" ~76px + cta 118px + 12px gap = 206 <= 280 available */
@media (max-width: 26rem) {
  .wordmark      { letter-spacing: .12em; }
  .masthead__cta { letter-spacing: .10em; padding-inline: .75rem; }
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero { position: relative; padding-block: var(--s-10) var(--s-9); }
.hero__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(78% 52% at 50% -12%,
    color-mix(in oklab, var(--accent) 6%, transparent) 0%, transparent 72%);
}
.hero__body { position: relative; z-index: 1; display: grid; gap: var(--s-6); align-content: start; }
.hero .stop { color: var(--accent); }
.hero__rule { block-size: var(--hair-strong); background: var(--rule-strong); }
.hero__foot { display: grid; gap: var(--s-6); }
@media (min-width: 60rem) {
  .hero__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-8); }
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }

/* --------------------------------------------------------------------------
   8. BUTTONS AND LINKS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-block-size: 52px; padding-inline: 1.75rem;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; text-decoration: none;
  border-radius: 2px; cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform .06s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--ink   { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #000000; }
.btn--send  { background: var(--accent-invert); color: var(--ink); inline-size: 100%; }
.btn--send:hover { background: var(--accent-invert-press); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
}
.link-arrow .arrow { transition: transform var(--dur) var(--ease); }
.link-arrow:hover .arrow { transform: translateY(3px); }

/* --------------------------------------------------------------------------
   9. STANZAS — section 01
   -------------------------------------------------------------------------- */
.stanzas {
  display: grid; gap: var(--s-6) var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-block-start: var(--s-8);
}
@supports (grid-template-rows: subgrid) {
  .stanzas { grid-template-rows: auto auto; }
  .stanza  { grid-row: span 2; grid-template-rows: subgrid; }
}
.stanza {
  display: grid; gap: var(--s-3); align-content: start;
  border-block-start: var(--hair) solid var(--rule);
  padding-block-start: var(--s-4);
}
.stanza p { color: var(--ink-muted); max-width: 34ch; }

/* --------------------------------------------------------------------------
   10. PLATE — the one illustration, inside section 01
   -------------------------------------------------------------------------- */
.plate { grid-column: full-start / full-end; margin-block-start: var(--s-9); }
.plate__frame {
  background: var(--paper-soft);
  border-block: var(--hair) solid var(--rule);
  padding-block: var(--s-7);
  padding-inline: var(--gutter);
}
.plate svg { inline-size: 100%; block-size: auto; margin-inline: auto; max-inline-size: 90rem; }
.plate line { stroke: var(--ink-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plate .plate__mark { stroke: var(--accent); stroke-width: 2; }
.plate .plate__base { stroke: var(--ink);    stroke-width: 1; }
.plate figcaption {
  margin: var(--s-5) auto 0; max-inline-size: 46ch; text-align: center;
  font-size: var(--fs-small); line-height: 1.55; color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   11. DISCLOSURE — section 02
   -------------------------------------------------------------------------- */
.items { margin-block-start: var(--s-8); }
.item { border-block-start: var(--hair) solid var(--rule); }
.item:last-child { border-block-end: var(--hair) solid var(--rule); }
.item > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-4);
  min-block-size: 56px;
  padding-block: var(--s-4);
  padding-inline: var(--s-3);
  margin-inline: calc(var(--s-3) * -1);   /* hover bleed stays inside the gutter */
  font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.28;
  letter-spacing: -.012em; color: var(--ink);
  cursor: pointer; list-style: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.item > summary::-webkit-details-marker { display: none; }
.item > summary:hover { background: var(--paper-soft); }
.item[open] > summary { color: var(--accent); }

.marker { position: relative; inline-size: 14px; block-size: 14px; flex: none; }
.marker::before, .marker::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%;
  block-size: 1px; background: var(--ink);
  transition: transform .28s var(--ease), background-color var(--dur) var(--ease);
}
.marker::after { transform: rotate(90deg); }
.item[open] .marker::after  { transform: rotate(0deg); }
.item[open] .marker::before,
.item[open] .marker::after  { background: var(--accent); }

.item__body { padding-block: 0 var(--s-6); }
.item__body p { color: var(--ink-muted); max-width: 60ch; }

/* --------------------------------------------------------------------------
   12. LEDGER — section 03
   -------------------------------------------------------------------------- */
.ledger { margin-block-start: var(--s-8); display: grid; }
.ledger__row {
  display: grid; gap: var(--s-2) var(--s-7);
  border-block-start: var(--hair) solid var(--rule);
  padding-block: var(--s-5);
}
.ledger__row:last-child { border-block-end: var(--hair) solid var(--rule); }
@media (min-width: 48rem) {
  .ledger__row { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: baseline; }
}
.ledger__row dt {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--ink);
}
.ledger__row dd { margin: 0; color: var(--ink-muted); max-width: 52ch; }

/* --------------------------------------------------------------------------
   13. CONTACT PANEL — section 04, the only inverted region
   -------------------------------------------------------------------------- */
.panel {
  background: var(--panel);
  color: var(--ink-invert);
  margin-block-start: var(--s-9);
  padding-block-end: var(--s-9);
}
.panel h2, .panel h3            { color: var(--ink-invert); }
.panel .eyebrow, .panel .label,
.panel .small, .panel p         { color: var(--ink-invert-muted); }
.panel .lead, .panel .intro     { color: var(--ink-invert); }
.panel .numeral                 { color: var(--accent-invert); }
.panel .rule--bleed             { background: var(--rule-panel); }
.panel a {
  color: var(--accent-invert);
  text-decoration-color: color-mix(in oklab, var(--accent-invert) 50%, transparent);
}
.panel a:hover { color: var(--accent-invert-press); text-decoration-color: currentColor; }

.contact__grid { grid-column: main-start / main-end; display: grid; gap: var(--s-8); }
@media (min-width: 60rem) {
  .contact__grid {
    grid-template-columns: minmax(0, 22rem) minmax(0, 34rem);
    justify-content: space-between;
    gap: clamp(3rem, 6vw, 7rem);
  }
}
.contact__aside { display: grid; gap: var(--s-6); align-content: start; }
.notes { display: grid; gap: var(--s-5); }
.note  { display: grid; gap: var(--s-2); }
.note dt {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--ink-invert-muted);
}
.note dd {
  margin: 0; color: var(--ink-invert);
  font-size: var(--fs-small); line-height: 1.6; max-width: 42ch;
}

/* --------------------------------------------------------------------------
   14. FORM
   -------------------------------------------------------------------------- */
.form {
  display: grid; gap: var(--s-6);
  container-type: inline-size; container-name: form;
}
@container form (min-width: 30rem) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
  .field--wide, .form__foot { grid-column: 1 / -1; }
  .form__foot { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); }
  .form__foot .btn--send { inline-size: auto; min-inline-size: 14rem; }
}

.field { display: grid; gap: var(--s-2); min-width: 0; }
.field__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.field__top label {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--ink-invert-muted);
}
.field__req {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .1em; text-transform: lowercase; color: var(--ink-invert-muted);
}

.field :is(input, textarea) {
  inline-size: 100%; min-block-size: 52px;
  font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.5;
  color: var(--ink-invert); background: var(--panel-field);
  border: 0; border-block-end: var(--hair) solid var(--rule-control);
  border-radius: 2px 2px 0 0;
  padding: .9rem .85rem .8rem;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field :is(input, textarea)::placeholder { color: var(--ink-invert-muted); opacity: 1; }
.field :is(input, textarea):hover { background: var(--panel-hover); }
.field :is(input, textarea):focus {
  background: var(--panel-hover);
  border-block-end-width: var(--hair-strong);
  border-block-end-color: var(--ink-invert);
  padding-block-end: calc(.8rem - 1px);    /* the 2px rule never moves the text */
}
.field textarea { min-block-size: 10rem; resize: vertical; }
@supports (field-sizing: content) { .field textarea { field-sizing: content; max-block-size: 24rem; } }

/* hint and error share one grid cell: the error can never shift the layout */
.field__msg { display: grid; min-block-size: 1.45em; }
.field__msg > * {
  grid-area: 1 / 1; margin: 0; max-width: none;
  font-size: var(--fs-small); line-height: 1.45;
  transition: opacity var(--dur) var(--ease);
}
.field__hint { color: var(--ink-invert-muted); }
.field__err  { color: var(--alert-invert); opacity: 0; visibility: hidden; }
.field:has(:user-invalid) .field__hint { opacity: 0; visibility: hidden; }
.field:has(:user-invalid) .field__err  { opacity: 1; visibility: visible; }
.field:has(:user-invalid) :is(input, textarea) {
  border-block-end-color: var(--alert-invert);
  border-block-end-width: var(--hair-strong);
  padding-block-end: calc(.8rem - 1px);
}

.form__foot { display: grid; gap: var(--s-4); align-items: center; margin-block-start: var(--s-2); }
.form__note { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-invert-muted); max-width: 32ch; }

.hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap; }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.footer { padding-block: 0 var(--s-6); }
.footer .rule--bleed { background: var(--rule); }

/* Upper deck: identity on the left, two sparse link columns on the right. */
.footer__top-deck {
  grid-column: main-start / main-end;
  display: grid; gap: var(--s-7) var(--s-6);
  padding-block: var(--s-8) var(--s-7);
}
@media (min-width: 48rem) {
  .footer__top-deck { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}

.footer__identity { display: grid; gap: var(--s-4); align-content: start; }
.footer__identity .wordmark { font-size: var(--fs-small); letter-spacing: .16em; }
.footer__note {
  margin: 0; max-width: 34ch;
  font-size: var(--fs-small); line-height: 1.55; color: var(--ink-muted);
}

.footer__col { display: grid; gap: var(--s-3); align-content: start; }
.footer__col h2 { font-size: inherit; }
.footer__col .eyebrow { margin: 0; }
.footer__col a {
  font-size: var(--fs-small); line-height: 1.4;
  color: var(--ink-muted); text-decoration: none;
  display: inline-flex; align-items: center; min-block-size: 40px;
  transition: color var(--dur) var(--ease);
}
.footer__col a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .22em; }

/* Lower deck: the legal line, set apart by a hairline. */
.footer__row {
  grid-column: main-start / main-end;
  display: grid; gap: var(--s-3) var(--s-6);
  padding-block-start: var(--s-5);
  border-block-start: var(--hair) solid var(--rule);
  align-items: center;
}
@media (min-width: 48rem) {
  .footer__row { grid-template-columns: minmax(0, 1fr) auto; }
  .footer__top { justify-self: end; }
}
.footer__legal { margin: 0; max-width: none; }
.footer__top {
  justify-self: start; display: inline-flex; align-items: center; gap: .4rem;
  min-block-size: 44px; text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer__top:hover { color: var(--accent-press); }

/* --------------------------------------------------------------------------
   16. MOTION — four movements, all additive, all optional
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes rise { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }

    .rule--bleed, .rule--open, .hero__rule {
      transform-origin: left center;
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 24%;
    }
    .section__head .numeral, .stanza, .ledger__row {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 28%;
    }
    .stanzas > .stanza:nth-child(2) { animation-range: entry 10% cover 32%; }
    .stanzas > .stanza:nth-child(3) { animation-range: entry 14% cover 36%; }
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes masthead-rule { to { border-block-end-color: var(--rule); } }
    .masthead {
      animation: masthead-rule steps(1) both;
      animation-timeline: scroll(root block);
      animation-range: 0 5rem;
    }
  }
}
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .item::details-content {
      block-size: 0; overflow: hidden; content-visibility: hidden;
      transition: block-size .32s var(--ease), content-visibility .32s allow-discrete;
    }
    .item[open]::details-content { block-size: auto; content-visibility: visible; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  /* guarantee the END state, never a frozen first frame */
  .rule--bleed, .rule--open, .hero__rule,
  .section__head .numeral, .stanza, .ledger__row {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .masthead { animation: none !important; border-block-end-color: var(--rule); }
  .item::details-content {
    block-size: auto; overflow: visible; content-visibility: visible; transition: none;
  }
}
/* --------------------------------------------------------------------------
   17. LEGAL PAGES
   Privacy and Terms read as documents rather than marketing. They reuse the
   page grid, the serif display face, and the ink hairline, so they stay inside
   the system instead of falling out of it.
   -------------------------------------------------------------------------- */

.hero--legal { padding-block: var(--s-9) var(--s-8); }
.hero--legal h1 { max-width: 20ch; }
.legal__date { margin-block-start: var(--s-5); color: var(--ink-muted); }

.legal-layout {
  grid-column: main-start / main-end;
  display: grid;
  gap: var(--s-8);
  align-items: start;
  padding-block-start: var(--s-8);
}
@media (min-width: 62rem) {
  .legal-layout { grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--s-9); }
  .legal-layout__aside { position: sticky; top: 7rem; }
}

.summary-box {
  border-block: var(--hair) solid var(--rule);
  padding-block: var(--s-5);
  margin-block-end: var(--s-8);
}
.summary-box .eyebrow { margin-block-end: var(--s-4); }
.summary-box p { color: var(--ink); max-width: var(--measure); }
.summary-box p + p { margin-block-start: var(--s-4); }

.legal h2 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -.01em;
  max-width: var(--measure);
  margin-block: var(--s-8) var(--s-4);
  padding-block-start: var(--s-5);
  border-block-start: var(--hair) solid var(--rule);
  scroll-margin-block-start: 7rem;
}
.legal h2:first-child { margin-block-start: 0; border-block-start: 0; padding-block-start: 0; }
.legal h3 {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0;
  margin-block: var(--s-5) var(--s-3);
}
.legal p { color: var(--ink-muted); max-width: var(--measure); }
.legal p + p { margin-block-start: var(--s-4); }

.toc { display: grid; gap: var(--s-2); margin-block-start: var(--s-4); }
.toc a {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-muted);
  text-decoration: none;
  padding-block: var(--s-1);
}
.toc a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .22em; }

/* Footer legal links sit beside the note, in the same mono voice. */
.footer__links {
  color: var(--ink-muted);
  text-decoration: none;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}
.footer__links:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .22em; }