/* ==========================================================================
   THE ADVOCATE / THE DOCKET — site stylesheet
   Components are shared by every route. Values come from tokens.css only.
   Sections: 1 base · 2 typography · 3 layout · 4 header/nav · 5 footer
             6 buttons & links · 7 blocks · 8 hero · 9 utilities
   ========================================================================== */

/* --- 1. Base -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--subnav-h) + var(--sp-4));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* Fixed, non-interactive film so flat darks read as paper rather than screen. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-2);
  z-index: 200;
  transform: translateY(-160%);
  padding: var(--sp-3) var(--sp-5);
  background: var(--gold-400);
  color: var(--ink-900);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--gold-500); color: var(--ink-900); }

/* --- 2. Typography -------------------------------------------------------- */

.kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.kicker::after {
  content: "";
  flex: 0 0 2.25rem;
  height: 1px;
  background: var(--rule-gold);
}
.kicker--plain::after { display: none; }

.title,
.title-xl,
.title-sm {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-strong);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
}
.title-xl { font-size: var(--step-5); line-height: var(--leading-tight); }
.title    { font-size: var(--step-4); line-height: var(--leading-tight); }
.title-sm { font-size: var(--step-2); line-height: var(--leading-title); }

.standfirst {
  max-width: 38rem;
  margin: var(--sp-5) 0 0;
  color: var(--ivory-300);
  font-size: var(--step-1);
  line-height: 1.6;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-5); }
.prose p { margin: 0; }
.prose strong { color: var(--text-strong); font-weight: 600; }
.prose em { color: var(--ivory-50); }

.lede {
  font-size: var(--step-1);
  font-style: italic;
  color: var(--ivory-200);
}

.meta {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.label {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

blockquote.pull {
  margin: 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  border-left: 2px solid var(--gold-500);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.5;
  color: var(--ivory-100);
}
blockquote.pull cite {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-style: normal;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- 3. Layout ------------------------------------------------------------ */

.shell {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: var(--width-wide); }

.band { position: relative; z-index: 2; padding-block: var(--sp-9); }
.band--tight { padding-block: var(--sp-7); }
.band--raised { background: var(--bg-raised); }
.band--sunken { background: var(--bg-sunken); }
.band + .band { border-top: 1px solid var(--rule-hair); }

/* Warm ivory editorial band, textured with the supplied paper scan. */
.band--paper {
  background-color: var(--ivory-50);
  background-image: url("/assets/img/docket/cream-docket.png");
  background-size: cover;
  background-position: center;
  color: var(--on-ivory-700);
}
.band--paper .title,
.band--paper .title-xl,
.band--paper .title-sm { color: var(--on-ivory-900); }
.band--paper .standfirst { color: var(--on-ivory-500); }
.band--paper .kicker { color: var(--gold-600); }
.band--paper .kicker::after { background: var(--gold-600); }
.band--paper .prose em,
.band--paper .prose strong { color: var(--on-ivory-900); }
.band--paper .rule { background: var(--on-ivory-rule); }
.band--paper .section-head,
.band--paper .index-list,
.band--paper .index-row { border-color: var(--on-ivory-rule); }
.band--paper .meta,
.band--paper .index-row p { color: var(--on-ivory-500); }
.band--paper .index-row h3 { color: var(--on-ivory-900); }
.band--paper blockquote.pull { color: var(--on-ivory-700); border-left-color: var(--gold-600); }

.rule { height: 1px; border: 0; margin: 0; background: var(--rule-hair); }
.rule--gold { background: var(--rule-gold); }

.page-head { padding-block: var(--sp-8) var(--sp-7); }
.page-head .title { max-width: 46rem; }

.stack > * + * { margin-top: var(--sp-5); }
.stack-lg > * + * { margin-top: var(--sp-7); }

/* --- 4. Header & navigation ---------------------------------------------- */
/* One DOM structure serves both layouts. On desktop the panel is
   display:contents so its two navs place themselves directly on the header
   grid; below 62rem it becomes a collapsible panel on grid row 2. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 11, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
@supports not (backdrop-filter: blur(10px)) {
  .site-header { background: var(--ink-900); }
}

.header-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

/* Brand lockup: emblem cropped from the supplied Docket mark + set wordmark */
.brand {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
  text-decoration: none;
}
.emblem {
  position: relative;
  flex: 0 0 auto;
  width: 3rem;
  aspect-ratio: 1070 / 760;   /* emblem region of logo-docket.png */
  overflow: hidden;
}
.emblem img {
  position: absolute;
  width: 143.551%;            /* 1536 / 1070 */
  height: 134.737%;           /* 1024 / 760  */
  left: -21.495%;             /* -230 / 1070 */
  top: -1.316%;               /*  -10 / 760  */
  max-width: none;
}
.brand-lock {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--rule-soft);
}
.brand-advocate {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ivory-50);
}
.brand-docket {
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.nav-mobile { display: contents; }

.nav-primary {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--header-h);
}
.nav-section {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--subnav-h);
  border-top: 1px solid var(--rule-hair);
}

.nav-primary > ul,
.nav-section > ul {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-5), 2.4vw, var(--sp-7));
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-section > ul {
  gap: clamp(var(--sp-4), 2vw, var(--sp-6));
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-section > ul::-webkit-scrollbar { display: none; }

.nav-section-label {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ivory-500);
}

.nav-link {
  position: relative;
  display: inline-block;
  padding-block: var(--sp-2);
  color: var(--ivory-300);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
.nav-link:hover { color: var(--ivory-50); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--gold-300); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.nav-section .nav-link {
  color: var(--ivory-400);
  letter-spacing: 0.1em;
}
.nav-section .nav-link:hover { color: var(--ivory-100); }
.nav-section .nav-link[aria-current="page"] { color: var(--gold-300); }

/* Take Action carries the only gold emphasis in the navigation. */
.nav-action {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--gold-500);
  color: var(--gold-300);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.nav-action:hover,
.nav-action[aria-current="page"] {
  background: var(--gold-400);
  color: var(--ink-900);
}

/* Mobile control */
.nav-toggle {
  display: none;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: none;
  border: 1px solid var(--rule-soft);
  color: var(--ivory-200);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle-bars { display: block; width: 1.125rem; height: 9px; position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease);
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-4px) rotate(-45deg); }

.nav-panel-heading { display: none; }

/* Below 62rem the two navs collapse into one panel. The panel only hides
   once site.js has confirmed it can reopen it, so no-JS stays navigable. */
@media (max-width: 62rem) {
  .nav-toggle { display: inline-flex; }
  .header-grid { grid-template-columns: minmax(0, 1fr) auto; }

  .nav-mobile {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding-bottom: var(--sp-6);
    border-top: 1px solid var(--rule-hair);
  }
  .js .nav-mobile[data-open="false"] { display: none; }

  .nav-primary,
  .nav-section {
    display: block;
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    border: 0;
  }
  .nav-section { margin-top: var(--sp-6); }

  .nav-primary > ul,
  .nav-section > ul {
    display: block;
    gap: 0;
    overflow: visible;
  }
  .nav-section-label { display: none; }

  .nav-panel-heading {
    display: block;
    margin: var(--sp-5) 0 var(--sp-2);
    font-family: var(--font-ui);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ivory-500);
  }

  .nav-link,
  .nav-action {
    display: block;
    padding-block: var(--sp-4);
    border-bottom: 1px solid var(--rule-hair);
    font-size: var(--step--1);
  }
  .nav-link::after { display: none; }
  .nav-link[aria-current="page"] { border-left: 2px solid var(--gold-400); padding-left: var(--sp-4); }
  .nav-action {
    margin-top: var(--sp-5);
    border: 1px solid var(--gold-500);
    text-align: center;
  }
}

/* --- 5. Footer ----------------------------------------------------------- */

.site-footer {
  position: relative;
  z-index: 2;
  background: var(--bg-sunken);
  border-top: 1px solid var(--rule-soft);
  padding-block: var(--sp-8) var(--sp-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7) var(--sp-6);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--rule-hair);
}
@media (min-width: 40rem) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-about { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .footer-about { grid-column: 1; }
}
.footer-about .brand { margin-bottom: var(--sp-5); }
.footer-about p {
  max-width: 24rem;
  margin: 0;
  color: var(--ivory-500);
  font-size: var(--step--1);
  line-height: 1.7;
}
.footer-col h2 {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li + li { margin-top: var(--sp-3); }
.footer-col a {
  color: var(--ivory-400);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.footer-col a:hover { color: var(--gold-300); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  color: var(--ivory-500);
  font-family: var(--font-ui);
  font-size: var(--step--1);
}
.footer-base p { margin: 0; }

/* --- 6. Buttons & inline links ------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.875rem 1.6rem;
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.btn--gold { background: var(--gold-400); color: var(--ink-900); }
.btn--gold:hover { background: var(--gold-200); }
.btn--ghost { border-color: var(--rule-firm); color: var(--ivory-100); }
.btn--ghost:hover { border-color: var(--gold-400); color: var(--gold-300); }
.band--paper .btn--ghost { border-color: var(--on-ivory-rule); color: var(--on-ivory-900); }
.band--paper .btn--ghost:hover { border-color: var(--gold-600); color: var(--gold-600); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.link-inline {
  color: var(--gold-300);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.link-inline:hover { color: var(--gold-200); }
.band--paper .link-inline { color: var(--gold-600); }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
}
.link-more::after { content: "\2192"; transition: transform var(--dur-2) var(--ease); }
.link-more:hover::after { transform: translateX(0.25rem); }

/* --- 7. Blocks ----------------------------------------------------------- */

/* Emergency notice — life-safety information, highest contrast, never gold. */
.alert-bar {
  position: relative;
  z-index: 2;
  background: var(--ink-750);
  border-block: 1px solid var(--rule-soft);
  border-left: 3px solid var(--urgent);
}
.alert-bar .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-4);
}
.alert-bar p { margin: 0; font-size: var(--step--1); color: var(--ivory-200); }
.alert-bar strong { color: var(--ivory-50); }
/* 911 is never a dial link — it is displayed as prominent plain text. */
.tel-911 {
  font-family: var(--font-ui);
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ivory-50);
}

.alert-tag {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #e8938c;
}

/* Two-column editorial split, deliberately unequal. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
}
@media (min-width: 52rem) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-8); align-items: start; }
  .split--reverse { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Indexed list of sections — a docket, not a card wall. */
.index-list { border-top: 1px solid var(--rule-hair); }
.index-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-5);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--rule-hair);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-2) var(--ease);
}
.index-row:hover { background: rgba(196, 164, 104, 0.04); }
.index-no {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--gold-600);
}
.index-row:hover .index-no { color: var(--gold-400); }
.index-row h3 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-strong);
  transition: color var(--dur-2) var(--ease);
}
.index-row:hover h3 { color: var(--gold-200); }
.index-row p { margin: 0; max-width: 42rem; color: var(--text-muted); font-size: var(--step--1); line-height: 1.7; }
@media (min-width: 52rem) {
  .index-row { grid-template-columns: 4.5rem minmax(0, 24rem) minmax(0, 1fr); align-items: baseline; }
  .index-row h3 { margin-bottom: 0; }
}

.panel {
  padding: var(--sp-6);
  background: var(--bg-raised);
  border: 1px solid var(--rule-hair);
}
.panel h3 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--text-strong);
}
.panel p { margin: 0; color: var(--text-muted); font-size: var(--step--1); line-height: 1.7; }
.panel p + p { margin-top: var(--sp-4); }

/* Interim state for routes whose copy is still being written. */
.note-preparing {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 40rem;
  padding: var(--sp-6);
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--gold-500);
  background: var(--ink-850);
}
.note-preparing p { margin: 0; color: var(--ivory-300); font-size: var(--step--1); line-height: 1.7; }
.band--paper .note-preparing { background: rgba(255, 255, 255, 0.5); border-color: var(--on-ivory-rule); border-left-color: var(--gold-600); }
.band--paper .note-preparing p { color: var(--on-ivory-700); }

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1px;
  background: var(--rule-hair);
  border: 1px solid var(--rule-hair);
}
.resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--ink-850);
}
.resource-card h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-400);
}
.resource-card p { margin: 0; font-size: var(--step--1); line-height: 1.7; color: var(--ivory-300); }
.resource-card .tel {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ivory-50);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-gold);
  align-self: flex-start;
}
.resource-card .tel:hover { color: var(--gold-200); }
.resource-card .out {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ivory-400);
  text-decoration: none;
}
.resource-card .out:hover { color: var(--gold-300); }

.figure { margin: 0; }
.figure img { width: 100%; border: 1px solid var(--rule-soft); }
.figure figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* --- 8. Homepage header overlay ----------------------------------------- */
/* The homepage hero is supplied by _partials/home.html with its own scoped
   styles and runs to the top of the page. Here the shared header is lifted out
   of flow and made transparent so it floats over that hero. Scoped to the home
   route only by the `data-route` attribute the generator writes on <body>; the
   header markup, the toggle script and every focus behaviour are untouched. */

body[data-route="home"] .site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
/* A top-down scrim, not a panel: the hero stays visible while the ivory nav
   type keeps its contrast against the brightest part of the banner. */
body[data-route="home"] .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(6, 5, 4, 0.78), rgba(6, 5, 4, 0));
  pointer-events: none;
}
body[data-route="home"] .site-header .nav-section { border-top-color: var(--rule-hair); }

@media (max-width: 62rem) {
  /* Opened over the hero, the panel needs its own ground to stay readable. */
  body[data-route="home"] .nav-mobile[data-open="true"] {
    background: rgba(10, 10, 11, 0.97);
    border-top: 1px solid var(--rule-soft);
  }
}

/* --- 9. Utilities -------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule-hair);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header, .site-footer, .grain, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}