@charset "utf-8";
/* ==========================================================================
   TRUELINE COLLISION
   A bound volume of state statutes, used as a website.

   The one rule the whole design rests on:
     THE QUOTATION RULE — the serif is reserved for text the legislature
     actually wrote. Everything this business wrote is the sans. A reader can
     separate law from marketing by letterform alone, without trusting us.
     stat() in includes/functions.php is the only thing allowed to emit it.

   Two more that are load-bearing:
     THE FOIL RULE — gold exists only on the cloth. Foil is stamped, and you
     cannot stamp foil onto a printed page. Measured: #C9A057 on cloth is
     5.75:1 and passes; the same gold on paper is 2.72:1 and fails. The
     material and the measurement agree, so the rule is absolute.
     THE LADDER RULE — statutory nesting is a hanging indent, never a bullet.

   Contents
     1. Tokens
     2. Reset and base
     3. The running head — structural signature
     4. Masthead and contents
     5. Sections, bands and measure
     6. Display type and prose
     7. THE STATUTE BLOCK — signature component
     8. The ladder
     9. Annotations
    10. Sheets, registers and figures
    11. Buttons, links and forms
    12. Questions, breadcrumbs, identification
    13. Footer
    14. Motion
    15. Responsive
    16. Print
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/fonts/courier-prime-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/fonts/courier-prime-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- the binding ------------------------------------------------------ */
  --cloth-900: #14312B;   /* buckram. 11.75:1 against the paper ground */
  --cloth-800: #1B3F37;
  --sage-400:  #9FB0AA;   /* muted text ON CLOTH. 6.16:1 */
  --foil-400:  #C9A057;   /* gold stamping. ON CLOTH ONLY. 5.75:1 */

  /* --- the paper -------------------------------------------------------- */
  --paper-050: #F4F5F3;
  --paper-100: #EAECE9;   /* THE PAGE GROUND. Cool, never cream. */
  --paper-200: #DFE2DE;
  --rule-300:  #C6CBC5;

  /* --- the ink ---------------------------------------------------------- */
  --ink-950: #11171A;     /* display and rules: 15.22:1 on paper-100 */
  --ink-800: #2E3A3C;     /* body: 9.89:1 on paper-100 */
  --ink-600: #5A6568;     /* muted: 5.06:1 on paper-100, 4.60:1 on paper-200 */

  /* The error colour is not an accent. It appears on form errors and required
     fields only, always beside a word, never to decorate. */
  --alert-700: #8C2B22;

  --sans:  "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --mono:  "Courier Prime", "Courier New", monospace;

  /* A single spacing rhythm, used everywhere. */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --step--2: 0.6875rem;
  --step--1: 0.8125rem;
  --step-0:  1rem;
  --step-1:  1.1875rem;
  --step-2:  clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
  --step-3:  clamp(1.6rem, 1.35rem + 1.2vw, 2.2rem);
  --step-4:  clamp(2rem, 1.5rem + 2.3vw, 3.1rem);
  --step-5:  clamp(2.45rem, 1.65rem + 3.6vw, 4.4rem);

  --measure: 68ch;
  --measure-q: 58ch;   /* quoted statute sets narrower than our own prose */
  --wrap: 72rem;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

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

body {
  background: var(--paper-100);
  color: var(--ink-800);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
svg { height: auto; }

/* border-radius: 0 everywhere, no exceptions. Rules are 1px for hairlines,
   2px for divisions, 3px for the foil rule under a running head. */
input, select, textarea, button { font: inherit; color: inherit; border-radius: 0; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; letter-spacing: -0.021em; }
h1 { text-wrap: balance; }
h2, h3 { text-wrap: balance; }
p  { text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto;
        padding-inline: var(--sp-4); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* grid and flex children default to min-width:auto, which lets a wide register
   push past the viewport. This is the fix, and it is load-bearing. */
.split > *, .mast-in > *, .foot-in > *, .cta-in > *, .sheet > * { min-width: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ink-950); color: var(--paper-050);
  padding: var(--sp-3) var(--sp-5); font-weight: 600;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--ink-950); outline-offset: 2px; }
.mast-cloth :focus-visible, .foot-cloth :focus-visible, .sec-cloth :focus-visible,
.runhead :focus-visible { outline-color: var(--foil-400); }

/* ==========================================================================
   3. The running head — the structural signature
   --------------------------------------------------------------------------
   A statute volume heads every page with the section range on one side and
   the volume identification on the other. That is a HORIZONTAL band, which is
   precisely why this site uses it: two sibling sites in this folder already
   set reference numbers in a left gutter against a vertical rule, and this one
   must not read like either of them.

   DELIBERATE EXCEPTION: a mechanical check can read a repeated full-bleed
   coloured band as a template tell. It is the volume's own page furniture and
   it is documented in DESIGN.md under "Deliberate exceptions".
   ========================================================================== */

.runhead {
  background: var(--cloth-900);
  color: var(--sage-400);
  border-bottom: 3px solid var(--foil-400);
}
.runhead-in {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  align-items: baseline; justify-content: space-between;
  padding-block: var(--sp-3);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.runhead-l { color: var(--paper-100); }
.runhead-r { color: var(--sage-400); }

/* ==========================================================================
   4. Masthead and contents
   ========================================================================== */

.mast-cloth { background: var(--cloth-900); color: var(--sage-400); }
.mast-cloth-in {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  align-items: baseline; justify-content: space-between;
  padding-block: var(--sp-3);
  font-size: var(--step--1);
}
.mast-id-n {
  color: var(--foil-400); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-size: var(--step--2);
}
.mast-id-s { color: var(--paper-100); margin-left: var(--sp-3); }
.mast-id-r { color: var(--sage-400); font-family: var(--mono);
             font-size: var(--step--2); letter-spacing: 0.05em; }
.mast-sep { padding-inline: var(--sp-2); }

.mast-main {
  background: var(--paper-100);
  border-bottom: 2px solid var(--ink-950);
  position: sticky; top: 0; z-index: 30;
}
.mast-in {
  display: flex; align-items: center; gap: var(--sp-5);
  padding-block: var(--sp-4);
}

.brand { display: flex; align-items: center; gap: var(--sp-3);
         text-decoration: none; color: var(--ink-950); }
.brand-mark { color: var(--cloth-900); flex: 0 0 auto; }
.brand-mark svg { width: 2.25rem; height: 2.25rem; }
.brand-t { display: block; line-height: 1.1; }
.brand-a { display: block; font-size: var(--step-1); font-weight: 700;
           letter-spacing: -0.02em; }
.brand-b { display: block; font-family: var(--mono); font-size: var(--step--2);
           letter-spacing: 0.14em; text-transform: uppercase;
           color: var(--ink-600); margin-top: 0.15em; }

.mast-tel { margin-left: auto; text-align: right; line-height: 1.25; }
.mast-tel-l { display: block; font-family: var(--mono); font-size: var(--step--2);
              letter-spacing: 0.13em; text-transform: uppercase;
              color: var(--ink-600); }
.mast-tel .tel { font-size: var(--step-1); font-weight: 700;
                 letter-spacing: -0.01em; }

.navtoggle { display: none; }

.toc-l { list-style: none; margin: 0; padding: 0;
         display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center; }
.toc-a {
  display: inline-block; text-decoration: none; color: var(--ink-800);
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.02em;
  padding-block: var(--sp-1);
  border-bottom: 2px solid transparent;
}
.toc-a:hover { color: var(--ink-950); border-bottom-color: var(--rule-300); }
.toc-a.is-cur { color: var(--ink-950); border-bottom-color: var(--ink-950); }

/* The contents sub-list: a real table of contents, numbers in the mono. */
.toc-has { position: relative; }
.toc-sub {
  list-style: none; margin: 0; padding: var(--sp-3) 0;
  position: absolute; left: calc(-1 * var(--sp-4)); top: 100%; z-index: 40;
  min-width: 19rem;
  background: var(--paper-050);
  border: 2px solid var(--ink-950);
  display: none;
}
.toc-has:hover .toc-sub, .toc-has:focus-within .toc-sub { display: block; }
.toc-sub a {
  display: flex; gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-2) var(--sp-4);
  text-decoration: none; color: var(--ink-800); font-size: var(--step--1);
}
.toc-sub a:hover { background: var(--paper-200); color: var(--ink-950); }
.toc-sub a[aria-current] { background: var(--paper-200); color: var(--ink-950);
                           font-weight: 700; }
.toc-sub-n { font-family: var(--mono); font-size: var(--step--2);
             color: var(--ink-600); flex: 0 0 auto; }

/* ==========================================================================
   5. Sections, bands and measure
   ========================================================================== */

.sec { padding-block: var(--sp-9); }
.sec-tight { padding-block: var(--sp-7); }
.sec-tint  { background: var(--paper-200); }

/* The cloth band. Everything inside it inverts: the sans goes light, the
   emphasis colour becomes the foil. */
.sec-cloth { background: var(--cloth-900); color: var(--sage-400); }
.sec-cloth h1, .sec-cloth h2, .sec-cloth h3 { color: var(--paper-050); }
.sec-cloth .lead { color: var(--paper-100); }
.sec-cloth p, .sec-cloth li { color: var(--sage-400); }
.sec-cloth strong { color: var(--paper-050); }
.sec-cloth a { color: var(--foil-400); text-decoration-color: var(--foil-400); }
.sec-cloth .secno-n { color: var(--foil-400); border-color: var(--foil-400); }
.sec-cloth .secno-l { color: var(--sage-400); }

.sec-hd { max-width: var(--measure); margin-bottom: var(--sp-6); }
.sec-hd h2 { font-size: var(--step-3); }
.sec-hd > p { margin-top: var(--sp-4); }

.split {
  display: grid; gap: var(--sp-7);
  grid-template-columns: 1fr;
}

/* ==========================================================================
   6. Display type and prose
   --------------------------------------------------------------------------
   Run-in headings, as a printed code sets them: the section number and title
   begin the paragraph rather than sitting above it in their own block.
   ========================================================================== */

.secno {
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: var(--sp-4);
}
.secno-n {
  color: var(--ink-950); border: 1px solid var(--ink-950);
  padding: 0.15em 0.5em; font-weight: 700;
}
.secno-l { margin-left: var(--sp-3); }

.h-display { font-size: var(--step-5); letter-spacing: -0.028em; line-height: 1.04; }
.h-page    { font-size: var(--step-4); letter-spacing: -0.024em; line-height: 1.08; }

/* Emphasis on paper is the colour of the binding plus a stamped rule beneath.
   Colour alone will not do it: cloth-900 against ink-950 is a difference of
   about one per cent of luminance, which is no emphasis at all. The foil is not
   available here — it cannot touch paper. */
.h-display em, .h-page em {
  font-style: normal;
  color: var(--cloth-900);
  border-bottom: 0.085em solid var(--cloth-900);
  padding-bottom: 0.02em;
}
.sec-cloth .h-display em, .sec-cloth .h-page em {
  color: var(--foil-400); border-bottom-color: var(--foil-400);
}

.lead { font-size: var(--step-1); line-height: 1.55; color: var(--ink-800); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h3 { font-size: var(--step-2); margin-top: var(--sp-7); }
.prose h4 { font-size: var(--step-1); margin-top: var(--sp-6); }
.prose ul, .prose ol { padding-left: var(--sp-5); }
.prose li + li { margin-top: var(--sp-2); }
.prose strong { color: var(--ink-950); font-weight: 700; }

/* The subsection caps register: (1) APPLICABILITY. */
.subcap {
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-950);
}

a { color: var(--ink-950); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

.basis {
  max-width: var(--measure);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-300);
  font-size: var(--step--1); color: var(--ink-600); line-height: 1.6;
}
.basis .src { font-family: var(--mono); }
.sec-cloth .basis { border-top-color: var(--cloth-800); color: var(--sage-400); }

/* ==========================================================================
   7. THE STATUTE BLOCK — the signature component
   --------------------------------------------------------------------------
   The only place the serif appears. A hairline bracket runs down the left of
   the quotation, as a code volume brackets quoted matter — this is a 1px rule
   on a <blockquote>, not a coloured accent bar on a card, and the distinction
   is the whole point.
   ========================================================================== */

.stat { margin: var(--sp-6) 0 0; max-width: var(--measure); }

.stat-hd {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--ink-950);
}
.stat-no {
  font-family: var(--mono); font-weight: 700; font-size: var(--step--1);
  color: var(--ink-950); letter-spacing: 0.02em;
}
.stat-ti {
  font-size: var(--step--1); font-weight: 600; color: var(--ink-600);
  letter-spacing: 0.01em;
}
/* OUR descriptor, in brackets — the way a code volume marks editorially
   supplied matter. The Quotation Rule polices the typeface; this policies the
   apparatus, which was the one slot where our words sat where the
   legislature's words belong. */
.stat-ed {
  font-family: var(--mono); font-size: var(--step--2);
  color: var(--ink-600); letter-spacing: 0.02em;
}
/* "Read the section yourself" is the method, so it is a link, not advice. */
.stat-src {
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.04em; color: var(--ink-950);
  text-decoration-thickness: 1px;
}

.stat-q {
  margin: var(--sp-5) 0 0;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--rule-300);
  max-width: var(--measure-q);
}
.stat-q p {
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-950);
  font-weight: 400;
}

.stat-ft {
  margin-top: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
}
.cite {
  font-family: var(--mono); font-size: var(--step--1);
  color: var(--ink-950); letter-spacing: 0.02em;
  white-space: nowrap;
}
.stat-hist {
  font-family: var(--mono); font-size: var(--step--2);
  color: var(--ink-600); letter-spacing: 0.04em;
}

/* On cloth the quotation stays legible by lightening, never by shrinking. */
.sec-cloth .stat-hd { border-bottom-color: var(--foil-400); }
.sec-cloth .stat-no { color: var(--foil-400); }
.sec-cloth .stat-ti { color: var(--sage-400); }
.sec-cloth .stat-ed { color: var(--sage-400); }
.sec-cloth .stat-src { color: var(--foil-400); }
.sec-cloth .stat-q  { border-left-color: var(--cloth-800); }
.sec-cloth .stat-q p { color: var(--paper-050); }
.sec-cloth .cite    { color: var(--foil-400); }
.sec-cloth .stat-hist { color: var(--sage-400); }

/* A statute set at display scale, for the first viewport only. */
.stat-hero .stat-q p { font-size: var(--step-2); line-height: 1.45; }

/* ==========================================================================
   8. The ladder — THE LADDER RULE, rendered
   --------------------------------------------------------------------------
   True hanging indents on a fixed ladder, so the depth of a provision is
   visible before it is read. Never bullets, never a decorative counter.
   ========================================================================== */

.ladder { margin: var(--sp-5) 0 0; max-width: var(--measure); }
.rung {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0 var(--sp-3);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--rule-300);
}
.rung:first-child { border-top: 0; }
.rung-1 { padding-left: 2rem; }
.rung-2 { padding-left: 4rem; }
.rung-m {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 700;
  color: var(--ink-950); text-align: right;
}
/* A list WE wrote does not get statutory lettering. Setting the shop's own
   advice as "(a) … (b) …" borrows the legislature's authority for it, which is
   the same mistake as setting it in the serif. Our lists keep the hanging
   indent and lose the letters. */
.ladder-ours .rung { grid-template-columns: 1.25rem 1fr; }
.ladder-ours .rung-m {
  font-weight: 400; color: var(--ink-600); text-align: left;
  font-size: var(--step-0);
}
.rung-b { margin: 0; color: var(--ink-800); }
.rung-b strong { color: var(--ink-950); }
.sec-cloth .rung { border-top-color: var(--cloth-800); }
.sec-cloth .rung-m { color: var(--foil-400); }
.sec-cloth .rung-b { color: var(--sage-400); }

/* ==========================================================================
   8b. THE POCKET PART
   --------------------------------------------------------------------------
   The paper supplement in the back board of a statute volume, listing what has
   been amended since the volume was printed. This site's largest honesty
   problem is exactly that, so it is handled the way the volume handles it —
   in the open, with a date — rather than buried in a disclaimer.
   ========================================================================== */

.pocket {
  margin-top: var(--sp-7);
  border: 2px solid var(--ink-950);
  border-top-width: 3px;
  background: var(--paper-200);
  padding: var(--sp-5);
  max-width: var(--measure);
}
.pocket-h {
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-950); font-weight: 700;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule-300);
}
.pocket-b { font-size: var(--step--1); line-height: 1.6; color: var(--ink-800); }
.pocket-l { margin: 0; }
.pocket-i { padding-block: var(--sp-3); border-top: 1px solid var(--rule-300); }
.pocket-i:first-child { border-top: 0; }
.pocket-i dt { margin-bottom: var(--sp-1); }
.pocket-i dd { margin: 0; font-size: var(--step--1); color: var(--ink-800); }
.sec-cloth .pocket { background: var(--cloth-800); border-color: var(--foil-400); }
.sec-cloth .pocket-h { color: var(--foil-400); border-bottom-color: var(--cloth-900); }
.sec-cloth .pocket-b, .sec-cloth .pocket-i dd { color: var(--sage-400); }

/* ==========================================================================
   9. Annotations
   --------------------------------------------------------------------------
   In a statute volume the annotation is set smaller, below the section, and is
   visibly NOT the statute. Here it is where our plain-English reading lives,
   so it is always the sans and always labelled.
   ========================================================================== */

.annot {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule-300);
  max-width: var(--measure);
}
.annot-l {
  display: block;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: var(--sp-2);
}
.annot-b { font-size: var(--step--1); line-height: 1.6; color: var(--ink-800); }
.sec-cloth .annot { border-top-color: var(--cloth-800); }
.sec-cloth .annot-l { color: var(--sage-400); }
.sec-cloth .annot-b { color: var(--paper-100); }

/* ==========================================================================
   10. Sheets, registers and figures
   ========================================================================== */

/* A sheet is a lifted leaf. A hairline all round and a 2px rule along the TOP —
   never a coloured bar down one side, which is banned family-wide. */
.sheet {
  background: var(--paper-050);
  border: 1px solid var(--rule-300);
  border-top: 2px solid var(--ink-950);
  padding: var(--sp-5);
}
.sheet > * + * { margin-top: var(--sp-4); }
.sheet-h {
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-600);
}
.sheet-note { font-size: var(--step--1); color: var(--ink-600); }
.sec-cloth .sheet {
  background: var(--cloth-800); border-color: var(--cloth-800);
  border-top-color: var(--foil-400);
}
.sec-cloth .sheet-h { color: var(--sage-400); }

/* THE SHEET RULE: a table is a printed sheet even on a cloth band, so it keeps
   the paper ground and needs no second contrast ramp. */
.reg-scroll {
  overflow-x: auto;
  border: 1px solid var(--ink-950);
  border-top-width: 2px;
  background: var(--paper-050);
  -webkit-overflow-scrolling: touch;
  /* A scroll container only clips descendants it is the containing block for.
     Without `position`, a visually-hidden span inside a wide register is laid
     out against the viewport instead, escapes the clip, and widens the whole
     document on a phone even though the table scrolls correctly inside its
     own box. Invisible on a desktop, obvious at 390px. */
  min-width: 0; width: 100%; max-width: 100%; position: relative;
}
.reg-scroll:focus-visible { outline-offset: -3px; }

.reg {
  width: 100%; min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--step--1); line-height: 1.5;
}
.reg caption {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  background: var(--paper-200); color: var(--ink-600);
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.reg thead th {
  background: var(--ink-950); color: var(--paper-100);
  text-align: left; font-weight: 600;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: var(--sp-3) var(--sp-4);
}
.reg tbody th, .reg tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--rule-300);
  vertical-align: top;
}
.reg tbody th { text-align: left; font-weight: 700; color: var(--ink-950); }
.reg tbody td { color: var(--ink-800); }
.reg .num { font-family: var(--mono); white-space: nowrap; color: var(--ink-950); }

.fig { font-family: var(--mono); font-variant-numeric: tabular-nums;
       color: var(--ink-950); font-weight: 700; }
.fig-u { font-family: var(--mono); font-size: 0.85em; color: var(--ink-600);
         letter-spacing: 0.04em; }

/* A numbered sequence where the order genuinely carries the meaning. */
.steps { list-style: none; margin: var(--sp-5) 0 0; padding: 0;
         max-width: var(--measure); counter-reset: s; }
.steps li {
  counter-increment: s; position: relative;
  padding-left: 3rem; padding-block: var(--sp-3);
  border-top: 1px solid var(--rule-300); line-height: 1.6;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: calc(var(--sp-3) + 0.18em);
  font-family: var(--mono); font-size: var(--step--1); font-weight: 700;
  color: var(--ink-600);
}
.steps li strong { color: var(--ink-950); }
.sec-cloth .steps li { border-top-color: var(--cloth-800); }
.sec-cloth .steps li::before { color: var(--foil-400); }

/* ==========================================================================
   11. Buttons, links and forms
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: var(--sp-3) var(--sp-6);
  text-decoration: none; font-weight: 700; letter-spacing: 0.01em;
  border: 2px solid var(--ink-950);
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.btn-pri { background: var(--cloth-900); color: var(--paper-050);
           border-color: var(--cloth-900); }
.btn-pri:hover { background: var(--ink-950); border-color: var(--ink-950); }
.btn-gho { background: transparent; color: var(--ink-950); }
.btn-gho:hover { background: var(--ink-950); color: var(--paper-050); }

/* On cloth the primary button is the stamped one — the single place the foil
   carries a surface rather than a letterform. */
.sec-cloth .btn-pri, .foot-cloth .btn-pri, .cta .btn-pri {
  background: var(--foil-400); color: var(--cloth-900); border-color: var(--foil-400);
}
.sec-cloth .btn-pri:hover, .cta .btn-pri:hover {
  background: var(--paper-050); border-color: var(--paper-050); color: var(--cloth-900);
}
.sec-cloth .btn-gho, .cta .btn-gho { color: var(--paper-050); border-color: var(--paper-050); }
.sec-cloth .btn-gho:hover, .cta .btn-gho:hover {
  background: var(--paper-050); color: var(--cloth-900);
}

.acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.tel, .mail { font-variant-numeric: tabular-nums; }

.cta { background: var(--cloth-900); color: var(--sage-400);
       border-top: 3px solid var(--foil-400); }
.cta-in { padding-block: var(--sp-8);
          display: grid; gap: var(--sp-6); align-items: start; }
.cta-h { font-size: var(--step-3); color: var(--paper-050); }
.cta p { color: var(--sage-400); margin-top: var(--sp-4); max-width: var(--measure); }
.cta-id { font-family: var(--mono); font-size: var(--step--2);
          letter-spacing: 0.06em; color: var(--sage-400); }
.cta-hrs { font-family: var(--mono); font-size: var(--step--2);
           letter-spacing: 0.06em; margin-top: var(--sp-3); }

.form { max-width: 34rem; }
.field { margin-bottom: var(--sp-5); }
.field label {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--step--1); font-weight: 600; color: var(--ink-950);
}
.field .hint { display: block; font-weight: 400; color: var(--ink-600);
               font-size: var(--step--2); margin-top: var(--sp-1); }
.field input, .field select, .field textarea {
  width: 100%; padding: var(--sp-3) 0;
  background: transparent; color: var(--ink-950);
  border: 0; border-bottom: 2px solid var(--ink-950);
  min-height: 3rem;
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-600); }
.field-err input, .field-err select, .field-err textarea {
  border-bottom-color: var(--alert-700);
}
.err {
  display: block; margin-top: var(--sp-2);
  font-size: var(--step--1); font-weight: 600; color: var(--alert-700);
}
.req { color: var(--alert-700); font-weight: 700; }

.formnote {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-300);
  font-size: var(--step--1); color: var(--ink-600);
}
.alert {
  border: 2px solid var(--alert-700);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6);
}
.alert-h { color: var(--alert-700); font-weight: 700; margin-bottom: var(--sp-2); }

/* ==========================================================================
   12. Questions, breadcrumbs, identification
   ========================================================================== */

.faq-i { border-top: 1px solid var(--rule-300); padding-block: var(--sp-4);
         max-width: var(--measure); }
.faq-q { font-size: var(--step-1); font-weight: 700; color: var(--ink-950);
         cursor: pointer; list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::before { content: "›"; display: inline-block; width: 1.1em;
                 font-family: var(--mono); color: var(--ink-600); }
.faq-i[open] .faq-q::before { transform: rotate(90deg); }
.faq-a { margin-top: var(--sp-3); padding-left: 1.1em; }
.faq-a > * + * { margin-top: var(--sp-3); }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap;
             gap: var(--sp-2); margin: 0; padding: 0;
             font-family: var(--mono); font-size: var(--step--2);
             letter-spacing: 0.06em; }
.crumbs li + li::before { content: "/"; padding-right: var(--sp-2);
                          color: var(--ink-600); }
.crumbs a { color: var(--ink-600); }
.crumbs [aria-current] { color: var(--ink-950); }

.phead { background: var(--paper-200); padding-block: var(--sp-7); }
.phead-top { display: flex; flex-wrap: wrap; gap: var(--sp-3);
             justify-content: space-between; align-items: baseline;
             margin-bottom: var(--sp-6); }
.phead-body { max-width: var(--measure); }
.phead-lead { margin-top: var(--sp-4); font-size: var(--step-1);
              line-height: 1.55; }

.nap { font-size: var(--step--1); line-height: 1.6; }
.nap-n { font-weight: 700; color: var(--ink-950); font-size: var(--step-0); }
.nap-r { color: var(--ink-600); }
.nap-r + .nap-r { margin-top: var(--sp-1); }

.results { max-width: var(--measure); }
.result { border-top: 1px solid var(--rule-300); padding-block: var(--sp-4); }
.result-n { font-size: var(--step-1); }
.result-u { font-family: var(--mono); font-size: var(--step--2);
            color: var(--ink-600); margin-block: var(--sp-1); }

.policy-grid { display: grid; gap: var(--sp-3); }
.policy-btn {
  display: block; text-decoration: none;
  border: 1px solid var(--rule-300); border-top: 2px solid var(--ink-950);
  padding: var(--sp-4);
  background: var(--paper-050);
}
.policy-btn:hover { background: var(--paper-200); }
.policy-btn-n { display: block; font-weight: 700; color: var(--ink-950); }
.policy-btn-s { display: block; font-size: var(--step--1); color: var(--ink-600);
                margin-top: var(--sp-1); }

/* ==========================================================================
   13. Footer
   ========================================================================== */

.foot-cloth { background: var(--cloth-900); color: var(--sage-400);
              border-top: 3px solid var(--foil-400); }
.foot-in { padding-block: var(--sp-8); display: grid; gap: var(--sp-7); }
.foot-n { color: var(--foil-400); font-weight: 700; font-size: var(--step-0);
          letter-spacing: 0.02em; }
.foot-r { font-size: var(--step--1); color: var(--sage-400); margin-top: var(--sp-1); }
.foot-r a { color: var(--paper-100); text-decoration-color: var(--cloth-800); }
.foot-r a:hover { text-decoration-color: var(--foil-400); }
.foot-tel .tel { font-size: var(--step-0); font-weight: 700; color: var(--paper-050); }
.foot-creds { color: var(--sage-400); margin-top: var(--sp-3); }
.foot-h { font-family: var(--mono); font-size: var(--step--2);
          letter-spacing: 0.13em; text-transform: uppercase;
          color: var(--foil-400); margin-bottom: var(--sp-3);
          padding-bottom: var(--sp-2); border-bottom: 1px solid var(--cloth-800); }
.foot-l { list-style: none; margin: 0; padding: 0; }
.foot-l li + li { margin-top: var(--sp-2); }
.foot-l a { display: flex; gap: var(--sp-3); font-size: var(--step--1);
            color: var(--paper-100); text-decoration: none; }
.foot-l a:hover { color: var(--foil-400); }
.foot-l-n { font-family: var(--mono); font-size: var(--step--2);
            color: var(--sage-400); flex: 0 0 auto; }

.foot-base { background: var(--cloth-800); color: var(--sage-400); }
.foot-base-in { padding-block: var(--sp-5); display: grid; gap: var(--sp-4); }
.foot-c { font-size: var(--step--2); line-height: 1.6; max-width: var(--measure); }
.foot-pol { list-style: none; margin: 0; padding: 0;
            display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
            font-size: var(--step--2); }
.foot-pol a { color: var(--sage-400); text-decoration-color: var(--cloth-900); }
.foot-pol a:hover { color: var(--foil-400); }

/* ==========================================================================
   13b. THE CLOTH INVERSION
   --------------------------------------------------------------------------
   Components set their own ink colours, which is correct on paper and wrong on
   cloth. Rather than fight that with ever-longer selectors at each component,
   every text-bearing descendant is inverted once, here, after all of them.

   This block exists because a measured check caught `strong` inside a ladder on
   a cloth band rendering as ink-950 on cloth-800 — about 1.3:1, invisible. The
   component rule and the band rule had equal specificity and the component came
   later. Order is the fix; the rule below is the order.
   ========================================================================== */

.sec-cloth strong, .sec-cloth b,
.sec-cloth .rung-b strong, .sec-cloth .steps li strong,
.sec-cloth .annot-b strong, .sec-cloth .sheet strong,
.cta strong {
  color: var(--paper-050);
}
.sec-cloth .sheet-note, .sec-cloth .sheet p { color: var(--sage-400); }
.sec-cloth .fig { color: var(--foil-400); }
.sec-cloth .fig-u { color: var(--sage-400); }
.sec-cloth .subcap { color: var(--paper-050); }
/* Foil, but never where the ground has gone back to paper. */
.sec-cloth .cite { color: var(--foil-400); }
.sec-cloth .reg .cite, .sec-cloth .reg-scroll .cite { color: var(--ink-950); }

/* A register keeps its paper ground even on cloth — THE SHEET RULE — so it is
   explicitly exempted from the inversion rather than accidentally caught by it.
   Its border is INK, not foil: the surface inside is paper, and foil on paper
   is the one thing the Foil Rule forbids outright. It measures 2.72:1 there. */
.sec-cloth .reg-scroll { background: var(--paper-050); border-color: var(--ink-950); }
.sec-cloth .reg caption { background: var(--paper-200); color: var(--ink-600); }
.sec-cloth .reg thead th { background: var(--ink-950); color: var(--paper-100); }
.sec-cloth .reg tbody th { color: var(--ink-950); }
.sec-cloth .reg tbody td { color: var(--ink-800); }
.sec-cloth .reg tbody th a { color: var(--ink-950); text-decoration-color: var(--rule-300); }
.sec-cloth .reg .num { color: var(--ink-950); }
.sec-cloth .reg strong { color: var(--ink-950); }

/* ==========================================================================
   14. Motion
   --------------------------------------------------------------------------
   One authored moment: a section settles once, the way a page is laid flat.
   Content is visible by default; JavaScript opts into the animation, so with
   scripting off nothing is ever hidden.
   ========================================================================== */

.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0; transform: translateY(10px);
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   15. Responsive
   ========================================================================== */

@media (max-width: 61.99em) {
  .mast-in { flex-wrap: wrap; row-gap: var(--sp-4); }
  .mast-tel { margin-left: auto; }

  /* The toggle is a JavaScript affordance, so it only exists where
     JavaScript does. Without .js the contents list below stays open and this
     button never renders — otherwise a phone with scripting off gets a dead
     button and no navigation at all. */
  .js .navtoggle {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    order: 3; margin-left: auto;
    min-height: 2.75rem; padding: var(--sp-2) var(--sp-4);
    background: transparent; border: 2px solid var(--ink-950);
    color: var(--ink-950); cursor: pointer;
    font-family: var(--mono); font-size: var(--step--2);
    letter-spacing: 0.12em; text-transform: uppercase;
  }
  .navtoggle-i { width: 0.7em; height: 0.7em;
                 border-right: 2px solid currentColor;
                 border-bottom: 2px solid currentColor;
                 transform: rotate(45deg) translate(-0.1em, -0.1em); }
  .navtoggle[aria-expanded="true"] .navtoggle-i {
    transform: rotate(225deg) translate(-0.15em, -0.15em);
  }

  .toc { order: 4; width: 100%;
         border-top: 1px solid var(--rule-300); padding-top: var(--sp-4); }
  /* Collapsed ONLY when scripting can expand it again. */
  .js .toc { display: none; }
  .js .toc.is-open { display: block; }
  .toc-l { flex-direction: column; align-items: stretch; gap: 0; }
  .toc-i { border-bottom: 1px solid var(--rule-300); }
  .toc-a { display: block; padding-block: var(--sp-3); font-size: var(--step-0);
           border-bottom: 0; }
  .toc-a.is-cur { border-bottom: 0; text-decoration: underline;
                  text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  .toc-sub { position: static; display: block; min-width: 0;
             border: 0; background: transparent; padding: 0 0 var(--sp-3); }
  .toc-sub a { padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); }
}

@media (min-width: 48em) {
  .split-2 { grid-template-columns: 1fr 1fr; }
  .cta-in { grid-template-columns: 1fr auto; align-items: center; }
  .policy-grid { grid-template-columns: 1fr 1fr; }
  .foot-base-in { grid-template-columns: 1fr auto; align-items: baseline; }
}

@media (min-width: 62em) {
  .split-wide { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .foot-in { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* ==========================================================================
   16. Print
   --------------------------------------------------------------------------
   Somebody will print the rights page and take it to an adjuster. That is the
   single most useful thing this site can do, so it is built for it: the cloth
   drops out, the statute keeps its citation, and every link resolves.
   ========================================================================== */

@media print {
  .mast-main, .navtoggle, .toc, .cta, .foot-cloth, .skip, .crumbs { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }

  /* Every cloth surface drops out — including the sheets that sit INSIDE a
     cloth band. Without .sec-cloth .sheet here, the "cited, not quoted" block
     on the rights page printed black text on dark green: unreadable, and it is
     the one block that embodies the method. */
  .runhead, .mast-cloth, .sec-cloth, .sec-cloth .sheet, .sheet, .foot-base {
    background: #fff !important; color: #000 !important;
    border-color: #000 !important;
  }

  /* The apparatus is gold on screen. On white it measures about 2:1, so every
     span that carries it is reset too — resetting only p/li/h* left the
     citations, section numbers and ladder marks illegible on the page this
     site is specifically built to print. */
  .sec-cloth h1, .sec-cloth h2, .sec-cloth h3, .sec-cloth p, .sec-cloth li,
  .sec-cloth a, .sec-cloth strong, .sec-cloth dt, .sec-cloth dd, .sec-cloth span,
  .runhead-l, .runhead-r, .foot-base *,
  .cite, .stat-no, .stat-ti, .stat-ed, .stat-hist, .rung-m, .secno-n, .secno-l,
  .sheet-h, .annot-l, .pocket-h, .fig, .fig-u { color: #000 !important; }
  .steps li::before { color: #000 !important; }
  .sec { padding-block: 1.2rem; }
  .stat-q, .pocket, .annot { page-break-inside: avoid; }
  .stat-q p { font-size: 11pt; }
  /* The link text is useless on paper; the URL beside the citation is not. */
  .stat-src { display: none !important; }
  a { text-decoration: none; }
  .prose a::after, .annot-b a::after { content: " (" attr(href) ")";
                                        font-family: var(--mono); font-size: 9pt; }
}