/* ==========================================================================
   calcivilguide.com  ·  stylesheet v10  ·  INDUSTRY
   Target: static build in /dist, generated by /site/build.pl.

   v10 replaces v1 through v9 wholesale. Everything before this was a
   Source Serif / Source Sans system on a warm-then-cool paper ramp with a
   navy accent, two themes and a 6px radius. It is gone. This is the Industry
   design system: steel blue on a light technical ground, condensed sans for
   structure, serif for prose, mono for anything a reader copies, and square
   corners everywhere.

   The authority is design/CalCivilGuide Industry.dc.html and the twelve
   captures beside it. Where this file and those disagree, they are right.

   FIVE THINGS THAT MUST NOT DRIFT, because they are what makes it this site
   and not a generic one:

     1. The ground is #f2f2f3. There is no white on this site. #ffffff must
        not appear in this file.
     2. border-radius is 0 everywhere. No exceptions.
     3. Headings are condensed sans, prose is serif. The contrast IS the
        design. A sans paragraph or a normal-width h1 reads as a different
        site on sight.
     4. Big headings are set at or below a 1.0 line-height with negative
        tracking. Home h1 is 60px on 58px at -0.03em.
     5. One accent, steel. No red, amber or green anywhere, for anything,
        including "fatal". Consequence is ranked by ramp step and weight.

   WHY THERE IS NO DARK THEME. v6 through v9 shipped one, three-state, with a
   control in the masthead. The Industry spec defines a single palette and no
   dark counterpart, so inventing one would be inventing the half of the
   design nobody signed off. The ground is #f2f2f3 rather than white, which
   was the original reason the dark theme existed. The theme control is gone
   from the masthead; put it back only with a dark palette that comes from the
   same place this one did.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Serif:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ground and ink */
  --color-bg:          #f2f2f3;
  --color-surface:     #e9e9ea;
  --color-text:        #1d1f20;
  --color-divider:     color-mix(in srgb, #1d1f20 16%, transparent);

  /* neutral ramp */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  /* the one accent */
  --color-accent:      #5980a6;
  --color-accent-100:  #eef6ff;
  --color-accent-200:  #d6ebff;
  --color-accent-300:  #b5d9fd;
  --color-accent-400:  #94bce3;
  --color-accent-600:  #597ea3;
  --color-accent-700:  #416180;
  --color-accent-800:  #2c455d;
  --color-accent-900:  #1d2d3d;

  --font-heading: "IBM Plex Sans Condensed", system-ui, sans-serif;
  --font-body:    "IBM Plex Serif", Georgia, serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --shell:   1120px;
  --gutter:  26px;
  --measure: 66ch;
  --rail:    290px;

  /* ------------------------------------------------------------------ */
  /* LEGACY ALIASES. The twenty-one guide body files predate this system  */
  /* and mark up their own colour through these names, including inside   */
  /* inline SVG diagrams, where a token is applied as style="fill:var()".  */
  /* Repainting twenty-one hand-written pages was not the job, so the old  */
  /* names survive as aliases onto the new palette and every guide keeps   */
  /* working untouched.                                                   */
  /*                                                                      */
  /* --alert, --caution and --ok were red, amber and green. This system   */
  /* has one hue, so they map onto ramp steps. A diagram that used to     */
  /* carry meaning in colour alone now carries it in position and label,  */
  /* which is what the rest of the site already does.                     */
  /* ------------------------------------------------------------------ */
  --paper:     var(--color-bg);
  --paper-2:   var(--color-neutral-100);
  --paper-3:   var(--color-neutral-200);
  --ink:       var(--color-text);
  --ink-2:     var(--color-neutral-700);
  --ink-3:     var(--color-neutral-600);
  --rule:      var(--color-divider);
  --rule-2:    var(--color-neutral-300);
  --accent:    var(--color-accent-700);
  --accent-2:  var(--color-accent-800);
  --alert:     var(--color-accent-700);
  --caution:   var(--color-neutral-800);
  --ok:        var(--color-neutral-700);
  --ok-wash:   var(--color-neutral-200);
  --ok-edge:   var(--color-neutral-400);
  --warn-wash: var(--color-accent-100);
  --warn-edge: var(--color-accent-400);
  --serif:     var(--font-body);
  --sans:      var(--font-heading);
  --navy:      var(--color-text);
  --navy-2:    var(--color-accent-900);
  --navy-edge: var(--color-accent-800);
  --on-navy:   var(--color-bg);
  --on-navy-2: var(--color-neutral-300);
  --radius:    0;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after{ box-sizing:border-box }
html, body{ margin:0; padding:0; background:var(--color-bg) }
body{
  font-family:var(--font-body);
  font-size:15px; line-height:1.55;
  color:var(--color-text);
  font-variant-numeric:lining-nums;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-heading); font-weight:600; margin:0 }
p{ margin:0 0 var(--s3) }
a{ color:var(--color-accent-700); text-decoration:underline; text-underline-offset:3px }
a:hover, a:visited{ color:var(--color-accent-800) }
img{ display:block; max-width:100% }
table{ border-collapse:collapse; font-variant-numeric:tabular-nums lining-nums }
input, select, button, textarea{ font:inherit }
:focus{ outline:none }
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px }
::selection{ background:var(--color-accent-200) }
/* Square, everywhere, including anything a UA rounds by default. */
button, input, select, textarea, .btn, .card, .tag, details, summary{ border-radius:0 }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip{ position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--color-text); color:var(--color-bg); padding:10px 16px;
  font-family:var(--font-heading); font-weight:600 }
.skip:focus{ left:0 }

/* Consequence ramp. Carried by the word, a 3px left rule and a row tint
   together, never by colour alone. */
.is-fatal{      --cq:var(--color-accent-700) }
.is-curable{    --cq:var(--color-neutral-800) }
.is-strategic{  --cq:var(--color-neutral-600) }

/* ---------------------------------------------------------------- header */
.net{ display:none }                 /* the cross-site strip is folded into the footer */

.masthead{ background:var(--color-text); color:var(--color-bg) }
.masthead-in{ max-width:var(--shell); margin:0 auto; padding:14px var(--gutter) 0;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap }
.wordmark{ font-family:var(--font-heading); font-size:30px; line-height:32px;
  font-weight:600; letter-spacing:-0.024em; color:var(--color-bg);
  text-decoration:none; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.wordmark:hover, .wordmark:visited{ color:var(--color-bg) }
.wordmark em{ font-style:normal }
.wordmark .tagline{ font-family:var(--font-mono); font-size:10px; font-weight:400;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--color-accent-300) }
.mast-search{ min-height:36px; display:inline-flex; align-items:center; gap:8px;
  padding:0 12px; border:1px solid var(--color-accent-700);
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em;
  color:var(--color-accent-200); text-decoration:none; white-space:nowrap }
.mast-search:hover, .mast-search:visited{ color:var(--color-bg);
  border-color:var(--color-accent); background:var(--color-accent-900) }

.axis{ background:var(--color-text) }
.axis-in{ max-width:var(--shell); margin:0 auto; padding:0 var(--gutter);
  display:flex; gap:0; margin-top:12px; border-top:1px solid var(--color-accent-800);
  overflow-x:auto; scrollbar-width:none }
.axis-in::-webkit-scrollbar{ display:none }
.axis a{ flex:none; min-height:44px; display:inline-flex; align-items:center;
  padding:0 16px 0 0; margin-right:22px; white-space:nowrap;
  font-family:var(--font-heading); font-size:14px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; text-decoration:none;
  color:var(--color-neutral-300) }
.axis a:hover, .axis a:visited{ color:var(--color-neutral-300) }
.axis a:hover{ color:var(--color-bg) }
.axis a[aria-current]{ color:var(--color-bg);
  box-shadow:inset 0 -2px 0 0 var(--color-accent) }
.axis a[aria-current]:visited{ color:var(--color-bg) }

/* ---------------------------------------------------------------- layout */
.zone{ width:100% }
.zone-in, .hero-in{ max-width:var(--shell); margin:0 auto; padding:44px var(--gutter) 0 }
.hero-in{ padding-top:46px }
.zone-narrow{ max-width:820px }
.zone-tint{ background:var(--color-neutral-100) }
.main-bare{ display:block; padding-bottom:56px }

.shell{ max-width:var(--shell); margin:0 auto; padding:30px var(--gutter) 56px }
.shell.has-rail{ display:grid; grid-template-columns:1fr var(--rail); gap:44px;
  align-items:start }
.main{ min-width:0 }
.main > *{ max-width:var(--measure) }
.main > .table-wrap, .main > .breaks, .main > .glance, .main > .alsoin,
.main > .handoff, .main > .checklist, .main > .meta, .main > .stamp,
.main > details.more, .main > .banner, .main > .seq, .main > .col{ max-width:var(--measure) }
@media (max-width:900px){
  .shell.has-rail{ grid-template-columns:1fr; gap:0 }
  aside.rail{ display:none }
  /* Registration marks sit 6px outside their frame, so the gutter is split:
     20px of padding plus the 6px the marks live in. The frame still lands 26px
     from the edge, and nothing pushes the page wider than the viewport. */
  .shell{ padding-inline:20px }
}

/* --------------------------------------------------------- section heads */
/* The 2px ink rule is the site's main structural device. Sections open with
   it, never with a background. */
.sec-h, .sec-head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin:0 0 var(--s4);
  border-bottom:2px solid var(--color-text); padding-bottom:8px }
.sec-h{ font-family:var(--font-heading); font-size:15px; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--color-text) }
.sec-head h2{ font-family:var(--font-heading); font-size:15px; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--color-text) }
.sec-h-sp{ margin-top:var(--s8) }
.sec-n{ font-family:var(--font-mono); font-size:11px; font-weight:400;
  color:var(--color-neutral-700) }
/* Scoped, because "more" is also the class on details.more in every guide
   body. Unscoped, this put white-space:nowrap on 21 pages worth of <summary>
   and pushed them past the viewport at 430px. */
.sec-head .more, .sec-h .more{ font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap }
.sec-blurb{ font-family:var(--font-body); font-size:18px; line-height:27px;
  color:var(--color-neutral-700); margin:0 0 var(--s5); max-width:70ch;
  text-wrap:pretty }

.hero-eyebrow, .overline{ font-family:var(--font-mono); font-size:11px;
  font-weight:400; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--color-accent-700); margin:0 }

/* -------------------------------------------------------------- headings */
/* Three h1 sizes, and the order matters: hero-tight is a hero-band too, so the
   interior rule has to be the more specific one or the home page loses its 60px.
   That is exactly how this went wrong once already. */
.hero-band h1{ font-size:60px; line-height:58px; font-weight:600;
  letter-spacing:-0.03em; margin:8px 0 0; max-width:22ch; text-wrap:pretty }
.hero-band.hero-tight h1{ font-size:48px; line-height:48px;
  letter-spacing:-0.028em; max-width:none }
.main h1{ font-size:46px; line-height:46px; font-weight:600;
  letter-spacing:-0.028em; margin:8px 0 0; text-wrap:pretty }
@media (max-width:620px){
  .hero-band h1{ font-size:38px; line-height:38px }
  .hero-band.hero-tight h1{ font-size:34px; line-height:35px }
  .main h1{ font-size:34px; line-height:35px }
}
.lede{ font-family:var(--font-body); font-size:19px; line-height:28px;
  font-weight:400; color:var(--color-text); margin:12px 0 0; max-width:70ch;
  text-wrap:pretty }
.hero-band .lede{ font-size:20px; line-height:30px; max-width:58ch }
.main .lede{ font-size:20px; line-height:29px; max-width:var(--measure) }

/* ------------------------------------------------------------ home: hero */
.hero-band .hero-in{ display:grid; grid-template-columns:1.55fr 1fr; gap:40px }
@media (max-width:900px){ .hero-band .hero-in{ grid-template-columns:1fr } }
.hero-side{ border-left:1px solid var(--color-neutral-300); padding-left:var(--gutter) }
.hero-fact{ padding:12px 0; border-bottom:1px solid var(--color-divider) }
.hero-fact b{ display:block; font-family:var(--font-heading); font-size:15px;
  font-weight:600; letter-spacing:0.01em; color:var(--color-text) }
.hero-fact span{ display:block; font-family:var(--font-body); font-size:16px;
  line-height:25px; color:var(--color-neutral-700); margin-top:4px }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0 }
.btn{ height:48px; padding:0 20px; display:inline-flex; align-items:center;
  text-decoration:none; font-family:var(--font-heading); font-size:15px;
  font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer }
.btn-primary{ background:var(--color-accent-700); color:var(--color-bg);
  border-color:var(--color-accent-700) }
.btn-primary:hover, .btn-primary:visited{ color:var(--color-bg);
  background:var(--color-accent-800) }
.btn-ghost, .btn-secondary{ border-color:var(--color-neutral-400);
  color:var(--color-text); background:transparent }
.btn-ghost:hover, .btn-ghost:visited{ color:var(--color-text) }
.btn-ghost:hover{ background:var(--color-neutral-200) }

/* ------------------------------------------------------- home: stage grid */
.stages{ display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-left:1px solid var(--color-neutral-300) }
@media (max-width:900px){ .stages{ grid-template-columns:1fr } }
.stage-tile{ display:flex; flex-direction:column; padding:20px 18px;
  text-decoration:none; min-height:170px; background:var(--color-neutral-100);
  border-right:1px solid var(--color-neutral-300);
  border-bottom:1px solid var(--color-neutral-300) }
.stage-tile.is-alt{ background:var(--color-neutral-200) }
.stage-tile:hover{ background:var(--color-accent-100) }
.stage-n{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em;
  color:var(--color-accent-700) }
.stage-name{ font-family:var(--font-heading); font-size:24px; line-height:26px;
  font-weight:600; letter-spacing:-0.02em; color:var(--color-text); margin-top:8px }
.stage-gist{ font-family:var(--font-body); font-size:16px; line-height:24px;
  color:var(--color-neutral-700); margin-top:6px }
.stage-count{ margin-top:auto; padding-top:12px; font-family:var(--font-mono);
  font-size:11px; color:var(--color-neutral-700) }

/* ------------------------------------------------------- the other lenses */
.lenses{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:900px){ .lenses{ grid-template-columns:1fr } }
.lens{ display:block; padding:18px 20px; text-decoration:none;
  border:1px solid var(--color-neutral-300); background:transparent }
.lens:hover{ border-color:var(--color-accent-700) }
.lens-h{ display:block; font-family:var(--font-heading); font-size:18px;
  font-weight:700; letter-spacing:-0.005em; color:var(--color-text) }
.lens-b{ display:block; font-family:var(--font-body); font-size:16px;
  line-height:24px; color:var(--color-neutral-700); margin-top:4px }
.lens-go{ display:block; font-family:var(--font-mono); font-size:11px;
  color:var(--color-accent-700); margin-top:8px }

/* ----------------------------------------------------------- the dark band */
.zone-navy, .band{ background:var(--color-text); color:var(--color-bg) }
.zone-navy .zone-in{ padding:30px 28px }
.zone-navy .grid{ display:grid; grid-template-columns:1fr 1fr; gap:34px }
@media (max-width:900px){ .zone-navy .grid{ grid-template-columns:1fr } }
.zone-navy .grid > div + div{ border-left:1px solid var(--color-accent-800);
  padding-left:28px }
@media (max-width:900px){ .zone-navy .grid > div + div{ border-left:0; padding-left:0 } }
.zone-navy h2{ font-family:var(--font-mono); font-size:11px; font-weight:400;
  letter-spacing:0.17em; text-transform:uppercase; color:var(--color-accent-300);
  margin:0 0 12px }
.zone-navy p{ font-family:var(--font-body); font-size:18px; line-height:27px;
  color:var(--color-neutral-100); text-wrap:pretty }
.zone-navy a{ color:var(--color-accent-200) }
.zone-navy a:hover, .zone-navy a:visited{ color:var(--color-accent-300) }

/* --------------------------------------------------------------- index rows */
.dir, .cat{ list-style:none; margin:0; padding:0 }
.dir-row{ margin:0; border-bottom:1px solid var(--color-divider);
  border-left:3px solid var(--cq, var(--color-neutral-400));
  background:var(--color-neutral-100) }
.dir-row.is-fatal{ background:var(--color-accent-100) }
.dir-row > a{ display:grid; grid-template-columns:1fr 160px 96px; gap:16px;
  padding:13px 12px; text-decoration:none; align-items:baseline; color:inherit }
@media (max-width:900px){ .dir-row > a{ grid-template-columns:1fr } }
.dir-row > a:hover{ background:var(--color-neutral-200) }
.dir-row.is-fatal > a:hover{ background:var(--color-accent-200) }
.dir-plain .dir-row > a{ grid-template-columns:1fr }
.dir-main{ display:block; min-width:0 }
.dir-t{ display:block; font-family:var(--font-heading); font-size:19px;
  line-height:25px; font-weight:600; color:var(--color-text) }
.dir-g{ display:block; font-family:var(--font-body); font-size:16px;
  line-height:24px; color:var(--color-neutral-700); margin-top:3px; max-width:76ch }
.dir-cite{ font-family:var(--font-mono); font-size:12px; line-height:19px;
  color:var(--color-neutral-900) }
.dir-c{ font-family:var(--font-heading); font-size:12px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--cq);
  white-space:nowrap }
.dir-meta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:4px;
  font-family:var(--font-mono); font-size:11px; color:var(--color-neutral-700) }
.dir-c-in{ color:var(--cq) }
.dir-stale{ display:inline-block; font-family:var(--font-heading); font-size:11px;
  font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--color-bg); background:var(--color-neutral-800); padding:2px 7px }

.dir-group{ margin-bottom:26px }
.dir-head{ display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; margin:0; padding:7px 12px; background:var(--color-text);
  font-family:var(--font-heading); font-size:14px; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase; border:0 }
.dir-head a{ color:var(--color-bg); text-decoration:none }
.dir-head a:hover, .dir-head a:visited{ color:var(--color-bg) }
.dir-head a:hover{ text-decoration:underline }
.dir-n{ font-family:var(--font-mono); font-weight:400; letter-spacing:0.04em;
  color:var(--color-accent-300) }

/* --------------------------------------------------------- the filter bar */
.dir-bar .zone-in{ padding:14px 0; margin-top:22px;
  border-top:2px solid var(--color-text);
  border-bottom:1px solid var(--color-neutral-300);
  display:flex; flex-wrap:wrap; gap:22px; align-items:flex-end }
.dir-bar{ background:transparent }
.dir-find{ display:block }
.dir-find > label, .dir-flabel{ display:block; font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--color-neutral-700); margin-bottom:5px }
.dir-field{ display:flex; align-items:center; gap:8px; height:44px; width:280px;
  max-width:100%; padding:0 12px; border:1px solid var(--color-neutral-700);
  background:var(--color-neutral-100) }
.dir-ico{ width:16px; height:16px; flex:none; fill:none;
  stroke:var(--color-neutral-700); stroke-width:1.5; stroke-linecap:round }
.dir-field input{ flex:1 1 auto; min-width:0; border:0; background:transparent;
  font-family:var(--font-body); font-size:16px; color:var(--color-text);
  -webkit-appearance:none }
.dir-field input::placeholder{ color:var(--color-neutral-600); opacity:1 }
.dir-field input::-webkit-search-cancel-button{ display:none }
.dir-clear{ flex:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--font-heading); font-size:12px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--color-accent-700) }
.dir-opts{ display:flex; flex-wrap:wrap; gap:6px }
.fbtn{ height:34px; padding:0 11px; cursor:pointer;
  border:1px solid var(--color-neutral-400); background:transparent;
  color:var(--color-text); font-family:var(--font-heading); font-size:13px;
  font-weight:600; letter-spacing:0.02em }
.fbtn[aria-pressed="true"]{ border-color:var(--color-text);
  background:var(--color-text); color:var(--color-bg) }
.fbtn-n{ font-family:var(--font-mono); font-weight:400; opacity:.7; margin-left:5px }

.dir-result{ max-width:var(--shell); margin:0 auto; display:flex;
  justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding:10px 0 }
.dir-count{ margin:0; font-family:var(--font-mono); font-size:12px;
  color:var(--color-text) }
.dir-reset{ border:0; background:transparent; cursor:pointer; padding:0;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--color-accent-700);
  text-decoration:underline; text-underline-offset:3px }
.dir-none, .sf-none{ padding:26px 12px; border-bottom:1px solid var(--color-divider);
  font-family:var(--font-body); font-size:17px; line-height:27px;
  color:var(--color-neutral-700); max-width:70ch }

/* ------------------------------------------------------------- stage hub */
.hub{ display:grid; grid-template-columns:1fr 1fr; gap:34px }
@media (max-width:900px){ .hub{ grid-template-columns:1fr } }
.sq{ list-style:none; margin:0; padding:0 }
.sq > li{ display:grid; grid-template-columns:78px 1fr; gap:14px; padding:12px 0;
  border-bottom:1px solid var(--color-divider) }
.sq-plain > li{ grid-template-columns:26px 1fr }
.sq-when{ font-family:var(--font-mono); font-size:12px; line-height:19px;
  color:var(--color-accent-700) }
.sq-body{ display:block; min-width:0; font-family:var(--font-body);
  font-size:16px; line-height:24px; color:var(--color-text) }
.sq-what{ display:block; font-family:var(--font-heading); font-size:17px;
  line-height:23px; font-weight:600; color:var(--color-text) }
.sq-note{ display:block; font-family:var(--font-body); font-size:16px;
  line-height:24px; color:var(--color-neutral-700); margin-top:2px }
.sq-foot{ margin:14px 0 0; font-family:var(--font-body); font-size:15px;
  line-height:23px; color:var(--color-neutral-700); max-width:52ch }

/* --------------------------------------------------------- authority index */
.auth{ border-top:2px solid var(--color-text) }
.auth-row{ display:grid; grid-template-columns:230px 1fr; gap:22px; padding:16px 0;
  border-bottom:1px solid var(--color-divider) }
@media (max-width:820px){ .auth-row{ grid-template-columns:1fr; gap:10px } }
.auth-code{ margin:0; font-family:var(--font-mono); font-size:17px; font-weight:500;
  color:var(--color-text) }
.auth-label{ margin:3px 0 0; font-family:var(--font-heading); font-size:13px;
  font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--color-neutral-700) }
.auth-n{ margin:6px 0 0; font-family:var(--font-mono); font-size:11px;
  color:var(--color-neutral-600) }
.auth-list{ list-style:none; margin:0; padding:0 }
.auth-list a{ display:flex; justify-content:space-between; gap:16px;
  align-items:baseline; padding:6px 0; text-decoration:none;
  border-bottom:1px dotted var(--color-divider);
  font-family:var(--font-heading); font-size:17px; line-height:24px;
  font-weight:500; color:var(--color-text) }
.auth-list a:hover{ color:var(--color-accent-700) }
.auth-c{ flex:none; font-family:var(--font-mono); font-size:11px; color:var(--cq);
  white-space:nowrap }

.cites{ list-style:none; margin:0; padding:0; border-top:1px solid var(--color-neutral-300) }
.cites > li{ display:grid; grid-template-columns:230px 1fr; gap:22px; padding:8px 0;
  border-bottom:1px solid var(--color-divider) }
@media (max-width:820px){ .cites > li{ grid-template-columns:1fr; gap:4px } }
.cites-k{ font-family:var(--font-mono); font-size:13px; color:var(--color-text) }
.cites-case .cites-k{ font-family:var(--font-body); font-style:italic }
.cites-v{ display:flex; flex-wrap:wrap; gap:4px 14px; font-family:var(--font-body);
  font-size:15px; line-height:22px }
.cites-v a{ color:var(--color-neutral-700); text-decoration:none;
  border-bottom:1px solid var(--color-neutral-300) }
.cites-v a:hover{ color:var(--color-accent-700); border-bottom-color:var(--color-accent-700) }

/* -------------------------------------------------------- consequence cols */
.cq{ display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:2px solid var(--color-text) }
@media (max-width:900px){ .cq{ grid-template-columns:1fr } }
.cq-col{ padding:20px 18px; border-right:1px solid var(--color-neutral-300);
  background:var(--color-neutral-200) }
.cq-col:last-child{ border-right:none }
.cq-col.is-fatal{ background:var(--color-accent-100) }
.cq-name{ margin:0; font-family:var(--font-heading); font-size:22px; font-weight:700;
  letter-spacing:-0.01em; color:var(--cq) }
.cq-def{ margin:6px 0 0; font-family:var(--font-body); font-size:16px;
  line-height:24px; color:var(--color-text) }
.cq-n{ margin:10px 0 14px; padding-top:8px; font-family:var(--font-mono);
  font-size:11px; color:var(--color-neutral-700);
  border-top:1px solid var(--color-neutral-300) }
.cq-list{ list-style:none; margin:0; padding:0 }
.cq-list a{ display:block; padding:9px 0; text-decoration:none;
  border-bottom:1px solid var(--color-divider) }
.cq-what{ display:block; font-family:var(--font-heading); font-size:16px;
  line-height:22px; font-weight:500; color:var(--color-text) }
.cq-list a:hover .cq-what{ color:var(--color-accent-700) }
.cq-why{ display:block; font-family:var(--font-body); font-size:15px;
  line-height:22px; color:var(--color-neutral-700); margin-top:2px }
.cq-src{ display:block; font-family:var(--font-mono); font-size:11px;
  color:var(--color-neutral-600); margin-top:4px }

/* ------------------------------------------------------------------ tables */
.table-wrap{ overflow-x:auto; max-width:100%; margin:16px 0 }
table.rules, table.ledger{ width:100%; font-family:var(--font-body) }
table.rules th, table.ledger th{ text-align:left; padding:8px 10px;
  border:1px solid var(--color-neutral-300); background:var(--color-surface);
  font-family:var(--font-heading); font-size:12px; font-weight:700;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--color-text) }
table.rules td{ padding:8px 10px; border:1px solid var(--color-neutral-300);
  font-size:16px; line-height:24px; background:var(--color-neutral-100) }
/* The ledger is a four-column list, not a grid: rule under the head, hairline
   between rows, no cell borders. */
table.ledger th{ border:0; border-bottom:2px solid var(--color-text);
  background:transparent }
table.ledger td{ padding:10px; border:0;
  border-bottom:1px solid var(--color-divider);
  font-family:var(--font-body); font-size:16px; line-height:23px;
  color:var(--color-neutral-700) }
table.ledger td:first-child{ font-family:var(--font-heading); font-weight:500;
  color:var(--color-text) }
table.ledger td:first-child a{ text-decoration:none; color:var(--color-text) }
table.ledger td:first-child a:hover{ color:var(--color-accent-700) }
table.ledger .num{ font-family:var(--font-mono); font-size:12px; white-space:nowrap;
  color:var(--color-text) }
table.ledger tr.is-stale td{ background:var(--color-accent-100) }

/* ------------------------------------------------------------------ search */
.sf{ display:flex; margin:14px 0 0; border:1px solid var(--color-text);
  background:var(--color-neutral-100) }
.sf input{ flex:1 1 auto; min-width:0; height:56px; padding:0 16px; border:0;
  background:transparent; font-family:var(--font-body); font-size:19px;
  color:var(--color-text); -webkit-appearance:none }
.sf input::placeholder{ color:var(--color-neutral-600); opacity:1 }
.sf input::-webkit-search-cancel-button{ display:none }
.sf-n{ display:flex; align-items:center; padding:0 16px;
  border-left:1px solid var(--color-divider); font-family:var(--font-mono);
  font-size:11px; color:var(--color-neutral-700) }
.sf-hint{ font-family:var(--font-mono); font-size:11px; line-height:18px;
  color:var(--color-neutral-700); margin:10px 0 0 }

/* -------------------------------------------------------------- the guide */
.breadcrumb{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--color-neutral-600); margin:0 0 10px }
.breadcrumb a{ color:var(--color-neutral-700); text-decoration:none }
.breadcrumb a:hover{ color:var(--color-accent-700) }

.g-over{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--color-accent-700); margin:0 }
.g-over a{ color:inherit; text-decoration:none }
.g-over a:hover{ text-decoration:underline }
.g-over .sep{ margin:0 6px }

.answer{ font-family:var(--font-body); font-size:20px; line-height:29px;
  color:var(--color-text); margin:16px 0 0; max-width:var(--measure);
  text-wrap:pretty }
.answer .q{ display:block; margin-top:8px; color:var(--color-neutral-700) }

/* The verification stamp and the meta strip are the same three facts in the
   same shape: a flex row of hairline-separated cells, no rule after the last. */
.stamp, .meta{ display:flex; flex-wrap:wrap; gap:0; margin:22px 0 0;
  border-top:1px solid var(--color-neutral-300);
  border-bottom:1px solid var(--color-neutral-300);
  font-family:var(--font-mono); font-size:11px; line-height:18px;
  color:var(--color-neutral-700) }
.stamp > span, .meta > span{ padding:11px 20px 11px 0; margin-right:20px;
  border-right:1px solid var(--color-divider) }
.stamp > span:last-child, .meta > span:last-child{ border-right:none;
  margin-right:0; padding-right:0 }
.stamp .when, .meta .when{ color:var(--color-text) }

.g-stale{ margin:18px 0 0; padding:14px 16px; background:var(--color-accent-100);
  border-left:8px solid var(--color-accent-700);
  font-family:var(--font-body); font-size:17px; line-height:27px;
  color:var(--color-text); max-width:var(--measure) }
.g-stale b{ font-family:var(--font-heading); font-weight:700 }

/* At-a-glance. The most valuable block on the page and the one a returning
   reader scrolls to, so it is framed rather than tinted. */
.glance{ margin:30px 0 0; border:1px solid var(--color-neutral-300);
  background:var(--color-neutral-100); padding:4px 18px 14px }
.glance dl{ margin:0 }
.glance dt{ font-family:var(--font-heading); font-size:13px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--color-accent-700);
  margin-top:14px }
.glance dd{ margin:4px 0 0; font-family:var(--font-body); font-size:17px;
  line-height:26px; color:var(--color-text) }
.glance dd b{ font-weight:600 }
.glance .fine{ display:block; margin-top:3px; font-family:var(--font-body);
  font-size:15px; line-height:23px; color:var(--color-neutral-700) }
.glance .flag{ display:inline-block; font-family:var(--font-heading);
  font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--color-bg); background:var(--color-accent-700); padding:2px 7px;
  margin-right:6px }

.banner{ display:flex; gap:14px; align-items:flex-start; margin:24px 0 0;
  padding:16px 18px; background:var(--color-accent-100);
  border-left:8px solid var(--color-accent-700); max-width:var(--measure) }
/* Not nowrap. Most banners carry a two-word label, but several guides use it
   for a whole sentence, and a nowrap sentence drags the page sideways. */
.banner .label{ flex:0 0 auto; max-width:100%; font-family:var(--font-heading);
  font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--color-accent-700); padding-top:2px }
.banner p{ margin:0; font-family:var(--font-body); font-size:17px;
  line-height:27px; color:var(--color-text) }
.banner.is-caution{ background:var(--color-neutral-200);
  border-left-color:var(--color-neutral-800) }
.banner.is-caution .label{ color:var(--color-neutral-800) }
@media (max-width:700px){ .banner{ flex-direction:column; gap:6px } }

section.col{ margin-top:34px }
section.col > h2{ font-family:var(--font-heading); font-size:27px; line-height:30px;
  font-weight:600; letter-spacing:-0.02em; color:var(--color-text);
  border-bottom:2px solid var(--color-text); padding-bottom:7px; margin:0 }
section.col > h3{ font-family:var(--font-heading); font-size:20px; line-height:26px;
  font-weight:600; letter-spacing:-0.01em; color:var(--color-text); margin:24px 0 0 }
section.col p{ font-family:var(--font-body); font-size:18px; line-height:27px;
  color:var(--color-text); margin:14px 0 0; max-width:var(--measure);
  text-wrap:pretty }
section.col ul, section.col ol{ margin:14px 0 0; padding-left:22px;
  font-family:var(--font-body); font-size:18px; line-height:27px;
  max-width:var(--measure) }
section.col li{ margin-bottom:8px }
.point{ font-family:var(--font-heading); font-size:19px; line-height:27px;
  font-weight:500; color:var(--color-accent-700); margin:12px 0 0;
  max-width:var(--measure) }

.quote{ margin:16px 0 0; padding:14px 18px; background:var(--color-neutral-100);
  border-left:3px solid var(--color-neutral-400); font-family:var(--font-body);
  font-size:17px; line-height:27px; color:var(--color-text);
  max-width:var(--measure) }

details.more{ margin:18px 0 0; border:1px solid var(--color-neutral-400);
  background:var(--color-neutral-100); max-width:var(--measure) }
details.more > summary{ cursor:pointer; padding:12px 16px;
  font-family:var(--font-heading); font-size:15px; font-weight:600;
  letter-spacing:0.04em; color:var(--color-text); list-style:none }
details.more > summary::-webkit-details-marker{ display:none }
details.more > summary::before{ content:"+ "; font-family:var(--font-mono);
  color:var(--color-accent-700) }
details.more[open] > summary::before{ content:"− " }
details.more .inner{ padding:0 16px 12px }
details.more .inner p{ font-family:var(--font-body); font-size:17px;
  line-height:26px; margin:10px 0 0 }

.seq{ list-style:none; margin:16px 0 0; padding:0; counter-reset:seq;
  max-width:var(--measure) }
.seq > li{ counter-increment:seq; display:grid; grid-template-columns:34px 1fr;
  gap:12px; padding:12px 0; border-bottom:1px solid var(--color-divider) }
.seq > li::before{ content:counter(seq,decimal-leading-zero);
  font-family:var(--font-mono); font-size:12px; color:var(--color-accent-700) }

/* What breaks. The site's differentiator, so it is set apart with the 2px rule
   and each row carries its verdict as a word in its ramp step. */
.breaks{ margin-top:38px; border-top:2px solid var(--color-text); padding-top:18px }
.breaks > h2{ font-family:var(--font-heading); font-size:27px; line-height:30px;
  font-weight:600; letter-spacing:-0.02em; color:var(--color-text); margin:0 }
.breaks .sub{ font-family:var(--font-body); font-size:16px; line-height:24px;
  color:var(--color-neutral-700); margin:6px 0 0 }
.bk{ display:grid; grid-template-columns:150px 1fr; gap:16px; padding:14px 0;
  border-bottom:1px solid var(--color-divider) }
@media (max-width:700px){ .bk{ grid-template-columns:1fr; gap:6px } }
.verdict{ font-family:var(--font-heading); font-size:12px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; padding-top:3px }
.verdict.fatal{ color:var(--color-accent-700) }
.verdict.curable{ color:var(--color-neutral-800) }
.verdict.soft{ color:var(--color-neutral-600) }
.bk .what{ font-family:var(--font-heading); font-size:18px; line-height:24px;
  font-weight:600; color:var(--color-text); margin:0 }
.bk .why{ font-family:var(--font-body); font-size:16px; line-height:25px;
  color:var(--color-neutral-700); margin:4px 0 0 }

.checklist{ margin:30px 0 0; padding:18px; border:1px solid var(--color-neutral-300);
  background:var(--color-neutral-100); max-width:var(--measure) }
.tree-h, .tool-h{ font-family:var(--font-heading); font-size:14px; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--color-text);
  margin:0 0 10px }
.checklist ol{ margin:0; padding-left:20px; font-family:var(--font-body);
  font-size:17px; line-height:26px }
.checklist li{ margin-bottom:8px }
.checklist li b, .checklist li strong{ font-family:var(--font-heading);
  font-weight:600 }

/* The handoff block: the only cross-promotion on the site, phrased as the next
   task, and it appears once per guide at the end. Blueprint frame, one of the
   three places marks are allowed. */
.handoff{ position:relative; margin:24px 0 0; padding:18px 20px;
  border:1px solid var(--color-divider); background:transparent;
  font-family:var(--font-body); font-size:16px; line-height:24px;
  color:var(--color-neutral-700); max-width:var(--measure) }
.handoff b{ display:block; font-family:var(--font-heading); font-size:18px;
  font-weight:700; letter-spacing:-0.005em; color:var(--color-text);
  margin-bottom:4px }
.handoff a{ display:inline-block; margin-top:8px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.04em; color:var(--color-accent-700) }

.alsoin{ margin-top:38px; border-top:2px solid var(--color-text); padding-top:14px }
.alsoin-h{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--color-accent-700); margin:0 0 8px }
.alsoin ul{ list-style:none; margin:0; padding:0 }
.alsoin li{ border-bottom:1px solid var(--color-divider) }
.alsoin a{ display:block; padding:9px 0; font-family:var(--font-heading);
  font-size:17px; font-weight:500; color:var(--color-text); text-decoration:none }
.alsoin a:hover{ color:var(--color-accent-700) }

/* ------------------------------------------------------------------- rail */
aside.rail{ border-left:1px solid var(--color-neutral-300); padding-left:24px;
  position:sticky; top:24px; align-self:start }
aside.rail h3{ font-family:var(--font-mono); font-size:10px; font-weight:400;
  letter-spacing:0.17em; text-transform:uppercase; color:var(--color-neutral-700);
  margin:0 0 8px }
aside.rail ol, aside.rail ul{ list-style:none; margin:0; padding:0;
  counter-reset:rail }
aside.rail li{ counter-increment:rail; border-bottom:1px solid var(--color-divider) }
aside.rail a{ display:flex; gap:10px; padding:7px 0; text-decoration:none;
  color:var(--color-text); font-family:var(--font-heading); font-size:15px;
  line-height:22px; font-weight:500 }
/* The § mark and its label must never wrap apart. */
aside.rail a::before{ content:"§ " counter(rail); flex:none; white-space:nowrap;
  font-family:var(--font-mono); font-size:11px; font-weight:400;
  color:var(--color-neutral-600) }
aside.rail a:hover{ color:var(--color-accent-700) }

details.toc{ display:none }
@media (max-width:900px){
  details.toc{ display:block; margin:16px 0 0; border:1px solid var(--color-neutral-400);
    background:var(--color-neutral-100) }
  details.toc > summary{ min-height:48px; display:flex; align-items:center;
    padding:0 14px; font-family:var(--font-heading); font-size:14px;
    font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
    cursor:pointer; list-style:none }
  details.toc > summary::-webkit-details-marker{ display:none }
  details.toc nav{ padding:0 14px 10px }
  details.toc ol, details.toc ul{ list-style:none; margin:0; padding:0;
    counter-reset:toc }
  details.toc li{ counter-increment:toc }
  details.toc a{ display:flex; gap:10px; align-items:center; min-height:48px;
    border-top:1px solid var(--color-divider); text-decoration:none;
    color:var(--color-text); font-family:var(--font-heading); font-size:15px;
    font-weight:500 }
  details.toc a::before{ content:"§ " counter(toc); flex:none; white-space:nowrap;
    font-family:var(--font-mono); font-size:11px; color:var(--color-neutral-600) }
}

/* -------------------------------------------------------- inline authority */
.stat{ font-family:var(--font-mono); font-size:0.88em; white-space:nowrap;
  color:var(--color-neutral-900) }
.case{ font-style:italic }
.badge{ font-family:var(--font-heading); font-size:11px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--color-bg);
  background:var(--color-neutral-800); padding:2px 7px }

/* ------------------------------------------------------------ notify + feed */
.nx-two{ display:grid; grid-template-columns:1fr 1fr; gap:38px }
@media (max-width:900px){ .nx-two{ grid-template-columns:1fr } }
.nx{ margin:0; padding:20px; border:1px solid var(--color-neutral-300);
  background:var(--color-neutral-100) }
.nx-head{ margin:0; font-family:var(--font-heading); font-size:20px;
  font-weight:600; letter-spacing:-0.01em; color:var(--color-text) }
.nx-body, .nx-feed p{ margin:8px 0 0; font-family:var(--font-body);
  font-size:16px; line-height:25px; color:var(--color-neutral-700);
  max-width:56ch }
.nx-row{ display:flex; flex-wrap:wrap; gap:0; margin-top:16px;
  border:1px solid var(--color-neutral-700) }
.nx-row input{ flex:1 1 8rem; min-width:0; height:44px; padding:0 12px; border:0;
  background:var(--color-neutral-100); font-family:var(--font-body);
  font-size:16px; color:var(--color-text) }
.nx-row button{ flex:none; height:44px; padding:0 18px; border:0;
  border-left:1px solid var(--color-neutral-700);
  background:var(--color-accent-700); color:var(--color-bg); cursor:pointer;
  font-family:var(--font-heading); font-size:13px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase }
.nx-row button:hover{ background:var(--color-accent-800) }
.nx-msg{ margin:12px 0 0; padding:12px 14px; font-family:var(--font-body);
  font-size:15px; line-height:23px; border-left:3px solid var(--color-neutral-600);
  background:var(--color-neutral-200) }
.nx-msg.is-ok{ border-left-color:var(--color-accent-700);
  background:var(--color-accent-100) }
.nx-msg.is-warn{ border-left-color:var(--color-neutral-800) }
.nx-msg.is-err{ border-left-color:var(--color-neutral-900);
  background:var(--color-neutral-200) }
.nx-foot{ margin:14px 0 0; font-family:var(--font-mono); font-size:11px;
  line-height:18px; color:var(--color-neutral-700) }
.nx-alt{ display:inline-block; margin-top:12px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase }

.feedurl{ display:flex; margin:20px 0; border:1px solid var(--color-text);
  background:var(--color-neutral-100) }
.feedurl code{ flex:1 1 0; min-width:0; padding:14px;
  font-family:var(--font-mono); font-size:14px; color:var(--color-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.feedurl-b{ flex:none; border:0; border-left:1px solid var(--color-text);
  background:var(--color-accent-700); color:var(--color-bg); cursor:pointer;
  padding:0 18px; font-family:var(--font-heading); font-size:13px;
  font-weight:600; letter-spacing:0.08em; text-transform:uppercase }
.feedurl-b:hover{ background:var(--color-accent-800) }

/* ------------------------------------------------------------------ tools */
.tool{ margin:24px 0 0; border:1px solid var(--color-neutral-300);
  background:var(--color-neutral-100); padding:18px }
.tw-step{ padding:14px 0; border-bottom:1px solid var(--color-divider) }
.tw-q, .tw-h{ font-family:var(--font-heading); font-size:19px; font-weight:600;
  color:var(--color-text); margin:0 0 8px }
.tw-p, .tw-ans{ font-family:var(--font-body); font-size:17px; line-height:26px }
.tw-cite{ font-family:var(--font-mono); font-size:12px; color:var(--color-neutral-700) }
.tw-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px }
.tw-btn{ height:44px; padding:0 16px; border:1px solid var(--color-neutral-400);
  background:transparent; color:var(--color-text); cursor:pointer;
  font-family:var(--font-heading); font-size:14px; font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase }
.tw-btn:hover{ border-color:var(--color-accent-700); color:var(--color-accent-700) }
.tw-result{ margin-top:16px; padding:16px 18px; background:var(--color-accent-100);
  border-left:8px solid var(--color-accent-700) }
.tw-verdict{ font-family:var(--font-heading); font-size:20px; font-weight:600;
  color:var(--color-text) }
.tw-trail{ font-family:var(--font-mono); font-size:11px;
  color:var(--color-neutral-700); margin-top:8px }
.tw-noscript{ padding:14px 18px; background:var(--color-neutral-200);
  border-left:3px solid var(--color-neutral-600); font-family:var(--font-body) }
.tw-qa{ margin:0 0 10px }
.tree, .branches{ margin:16px 0 0 }
.b{ padding:10px 0; border-bottom:1px solid var(--color-divider) }
.v-yes{ color:var(--color-accent-700); font-family:var(--font-heading); font-weight:600 }
.v-no{ color:var(--color-neutral-800); font-family:var(--font-heading); font-weight:600 }
.v-none{ color:var(--color-neutral-600); font-family:var(--font-heading); font-weight:600 }
.local{ margin:18px 0 0 }
.local label{ display:block; font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--color-neutral-700);
  margin-bottom:5px }
.local select{ height:44px; padding:0 12px; border:1px solid var(--color-neutral-700);
  background:var(--color-neutral-100); font-family:var(--font-body); font-size:16px;
  color:var(--color-text); max-width:100% }
.tile{ padding:18px 20px; border:1px solid var(--color-neutral-300);
  background:var(--color-neutral-100) }
.tile h3{ font-family:var(--font-heading); font-size:20px; font-weight:600;
  margin:0 0 6px }
.tile p{ font-family:var(--font-body); font-size:16px; line-height:24px;
  color:var(--color-neutral-700); margin:0 }
.tile-cat{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--color-accent-700) }
.go{ display:inline-block; margin-top:10px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase }
.grid{ display:grid; gap:20px }
.grid-3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr } }

/* --------------------------------------------------------------- blueprint */
/* Transparent line drawings with four registration marks. Exactly three
   places site-wide: the two network handoff cards, the feed sidebar panel and
   the guide callout. Never on a plain grid cell. */
.blueprint{ position:relative; border:1px solid var(--color-divider) }
.blueprint > .corner{ position:absolute; width:11px; height:11px;
  color:color-mix(in srgb, var(--color-text) 55%, transparent) }
.blueprint > .corner::before, .blueprint > .corner::after{ content:"";
  position:absolute; background:currentColor }
.blueprint > .corner::before{ left:5px; top:0; width:1px; height:100% }
.blueprint > .corner::after{ top:5px; left:0; width:100%; height:1px }
.blueprint > .corner.tl{ top:-6px; left:-6px }
.blueprint > .corner.tr{ top:-6px; right:-6px }
.blueprint > .corner.bl{ bottom:-6px; left:-6px }
.blueprint > .corner.br{ bottom:-6px; right:-6px }

/* ----------------------------------------------------------------- footer */
.foot{ margin-top:56px; background:var(--color-text); color:var(--color-neutral-400) }
.foot-in{ max-width:var(--shell); margin:0 auto; padding:26px var(--gutter) }
.foot-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  margin-bottom:22px }
@media (max-width:820px){ .foot-cols{ grid-template-columns:1fr } }
.foot h2{ font-family:var(--font-mono); font-size:10px; font-weight:400;
  letter-spacing:0.17em; text-transform:uppercase; color:var(--color-accent-300);
  margin:0 0 10px }
.foot ul{ list-style:none; margin:0; padding:0 }
.foot li{ font-family:var(--font-mono); font-size:11px; line-height:19px;
  color:var(--color-neutral-400); margin-bottom:6px }
.foot a{ color:var(--color-accent-200); text-decoration:none }
.foot a:hover, .foot a:visited{ color:var(--color-accent-300) }
.foot .fine{ font-family:var(--font-mono); font-size:11px; line-height:19px;
  max-width:52ch; margin:0 }

/* A grid item defaults to min-width:auto, so it refuses to shrink below the
   min-content width of whatever is inside it. One nowrap child, the feed URL,
   was therefore setting the minimum width of the whole page. This is the
   standard grid blowout and it is worth fixing once, everywhere, rather than
   chasing it component by component. */
.nx-two > *, .hub > *, .lenses > *, .auth-row > *, .cites > li > *,
.cq > *, .zone-navy .grid > *, .dir-row > a > *, .shell.has-rail > *{ min-width:0 }

/* ------------------------------------------------------- narrow overrides */
/* Last on purpose. These undo base rules that appear further up the file, and
   at equal specificity the later rule wins. Putting them anywhere else is how
   the .stat fix silently did nothing the first time. */
@media (max-width:700px){
  /* A citation should not break across lines, which is why .stat is nowrap.
     On a phone a long one is wider than the column and drags the page
     sideways. The project notes have flagged this since guide 15. A wrapped
     cite beats a page that scrolls. */
  .stat{ white-space:normal; overflow-wrap:break-word }
  /* Registration marks sit 6px outside their frame. In a full-width column the
     right-hand pair has nowhere to go, so the framed block steps in. */
  .handoff{ margin-inline:6px }
  /* Long words in prose, mostly statute strings and case names. */
  .main p, .dir-g, .cq-why, .bk .why, .glance dd, .banner p{ overflow-wrap:break-word }
  /* The signup row stacks rather than forcing a minimum width. */
  .nx-row{ flex-wrap:wrap }
  .nx-row input{ flex:1 1 100%; border-bottom:1px solid var(--color-neutral-700) }
  .nx-row button{ flex:1 1 100%; border-left:0 }
}

/* ------------------------------------------------------------------ print */
/* This reader prints pages and takes them to a hearing. The machinery goes,
   the substance stays, and the consequence survives because it is a word. */
@media print{
  .masthead, .axis, .net, .skip, .dir-bar, .dir-reset, .dir-clear, .sf, .sf-hint,
  .sf-n, .nx, .nx-two, .feedurl-b, .mast-search, .lenses, aside.rail, details.toc,
  .tw-actions, .foot-cols{ display:none !important }
  /* No background at all rather than a white one: paper is already white, and
     a hex for it would be the one colour this system does not have. */
  html, body{ background:transparent; color:var(--color-text) }
  body{ font-size:12pt; line-height:1.5 }
  .shell, .shell.has-rail{ display:block; max-width:none; padding:0 }
  .main > *{ max-width:none }
  a{ color:var(--color-text); text-decoration:underline }
  .stat, .dir-cite, .cites-k{ color:var(--color-text) }
  section.col > h2, .breaks, .sec-h, .auth, .cq{ break-after:avoid }
  .bk, .dir-row, .auth-row, .cites > li, table.ledger tr, .glance, .banner,
  .handoff, .checklist{ break-inside:avoid }
  .stage-tile, .cq-col, .dir-row, .glance, .checklist, .quote, .banner,
  details.more, .tile{ background:transparent !important }
  .dir-head{ background:transparent; color:var(--color-text);
    border-bottom:2px solid var(--color-text) }
  .dir-head a, .dir-n{ color:var(--color-text) }
  .foot{ background:transparent; color:var(--color-text);
    border-top:1px solid var(--color-text) }
  .foot .fine{ color:var(--color-text) }
  details.more[open] .inner, details.more .inner{ display:block }
  details.more > summary::before{ content:"" }
}