/* ==========================================================================
   MONTGOMERY v. BEST BUY — bestbuyamicus.com
   Design system for the cert-stage website
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. SELF-HOSTED FONTS (latin subset; regenerate via .fetch-fonts.py)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-600-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-700-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/inter-900.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-500.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   1. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Prevent overflowing descendants (wide grids, long unbreakable words, etc.)
     from widening the layout viewport — which would otherwise push fixed-position
     elements (.cert-fab, .scroll-top) off the visible screen edge on mobile.
     `clip` is preferred over `hidden` here because it doesn't establish a scroll
     container, so sticky positioning and scroll-margin-top still work cleanly. */
  overflow-x: clip;
  /* Disable Chrome's scroll-anchoring on the document scroll. Scroll-anchoring
     reactively shifts scrollY to compensate when content above the viewport
     changes size — useful when images/ads load late, but it interferes with
     the sticky-header shrink animation: as the header grows back during the
     un-shrink, Chrome bumps scrollY upward to "preserve" visual position,
     which can re-cross the JS scroll threshold and cause the animation to
     bounce. Firefox is more conservative about anchoring around sticky-element
     resizes, which is why this bug was Chrome-only. */
  overflow-anchor: none;
}
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip` (not `hidden`) — `hidden` would create a scroll container on body,
     which silently breaks `position: sticky` on the header (sticky would then
     stick to body, which scrolls with the page, instead of to the viewport). */
  overflow-x: clip;
}
.skip-link {
  position: absolute;
  top: -9999px;
  left: 0;
  z-index: 9999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--navy);
  color: var(--parchment);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; transition: color 250ms ease; }
a:hover { color: var(--accent-dark); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { list-style: none; }

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Enable transitioning to/from keyword sizes like `auto`, `min-content`,
     `max-content`. Used by .doc-court__body and details.verify-block to
     animate their collapsed/expanded height smoothly. */
  interpolate-size: allow-keywords;

  /* Palette */
  --navy:           #0f1d3a;   /* primary — deep midnight */
  --navy-dark:      #07122a;
  --navy-light:     #1d3160;
  --cabernet:       #7a2d3a;   /* secondary — oxblood */
  --cabernet-dark:  #5a1f29;
  --gold:           #c4a35a;   /* accent — antique gold */
  --gold-dark:      #a78440;
  --gold-light:     #e0c886;
  --parchment:      #faf8f3;   /* background — warm off-white */
  --parchment-dark: #f3eee0;
  --ivory:          #ffffff;
  --charcoal:       #1a1a1a;
  --slate:          #4a5266;
  --slate-light:    #76819a;
  --hairline:       #d9d3c2;
  --hairline-soft:  #ebe6d6;
  --hairline-strong: #a89e87;
  --shadow:         rgba(15, 29, 58, 0.10);
  --shadow-lg:      rgba(15, 29, 58, 0.18);

  /* Auxiliary palette — state / accent colors */
  --date-green:        #2f5638;   /* deadline / countdown date accent */
  --date-green-light:  #67896f;   /* meta-text analog of --slate-light, hue-rotated
                                     into the green family AND darkened to compensate
                                     for green's high luminance coefficient. sRGB Y =
                                     0.2126R + 0.7152G + 0.0722B — green contributes
                                     ~10× more to perceived brightness than blue, so
                                     a green at slate-light's L (53%) reads ~11%
                                     brighter than the blue. Dropping to L 47% lands
                                     Y at 127.9 vs slate-light's 128.5, matching
                                     perceived weight so green .meta reads as text
                                     instead of haze. */
  --alert-red:         #c83847;   /* bright attention-grabbing accent */
  --cabernet-darker:   #3a0f17;   /* deeper cabernet for high-emphasis text */
  --gold-cream:        #f1e8cf;   /* warmer mid-cream for large-area gold surfaces.
                                     The rgba-over-parchment gold tints used on
                                     skinny strips (e.g. .doc-item--featured) lose
                                     their chroma when stretched across a full box
                                     and read as "tired" — this bumps the chroma
                                     back up so box-sized backings still feel like
                                     a color rather than off-white. */
  --cabernet-rose:     #c45658;   /* rose case-link / accent-red default */
  --cabernet-rose-dark: #b22d3e;  /* struck-through rule text (currently unused but reserved for future diff rendering) */
  --navy-deeper:       #142b50;   /* caption court label color */

  /* Semantic */
  --bg:           var(--parchment);
  --bg-alt:       var(--ivory);
  --bg-dark:      var(--navy);
  --text:         var(--charcoal);
  --text-muted:   var(--slate);
  --text-soft:    var(--slate-light);
  --accent:       var(--cabernet);
  --accent-dark:  var(--cabernet-dark);
  --primary:      var(--navy);

  /* Spacing */
  --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;

  /* Layout */
  --container:    1240px;
  --container-narrow: 880px;
  --container-wide:   1440px;
  --radius-sm:    4px;
  --radius:       6px;
  --radius-lg:    12px;

  /* Type */
  --serif:    'Cormorant Garamond', 'EB Garamond', 'Garamond', Georgia, serif;
  --sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:     'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Text-shadow glow — ambient on brand subtitle and case caption, plus
     hover + active-state glow on nav links. Tokenized so design tweaks
     propagate across all four uses in a single edit. */
  --text-glow-gold-light:  0 0 10px rgba(224, 200, 134, 0.35);  /* brand + nav glow */
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 600; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
h4 { font-size: 1.2rem; font-weight: 600; }
h5 { font-size: 1.05rem; font-weight: 600; }

p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  word-spacing: 0.10em;
  color: var(--cabernet);
  margin-bottom: var(--sp-3);
  display: inline-block;
}
/* En-space word gaps for cert-pool memo section headings only — every
   regular space inside renders ~0.25em wider, matching the visual width
   of a Unicode en space (U+2002). */
.memo-section__heading {
  word-spacing: 0.10em;
}
.eyebrow--gold { color: var(--gold-dark); }
.eyebrow--navy { color: var(--navy); }

/* Card label — small-caps sub-heading used INSIDE cards (e.g. the four
   "pressures" cards in the record's consent counter-argument grid).
   Distinct from .eyebrow: tighter letter-spacing (0.16em vs 0.18em) so
   labels read as headings rather than category markers, and tighter
   margin-bottom (sp-2 vs sp-3) since the card body sits immediately below.
   Applied to <h5> elements — keeps semantic outline intact while removing
   the default h5 visual treatment. */
.card-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  word-spacing: 0.10em;
  color: var(--cabernet);
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}
/* Cards in the "but he consented" four-pressures grid (record.html) —
   eyebrow label fades cabernet → gold-light (yellow) on card hover.
   Scoped to the .cards-consent-pressures parent class so other .card-label
   instances site-wide are unaffected. */
.cards-consent-pressures .card-label {
  transition: color 250ms ease;
}
.cards-consent-pressures .card:hover .card-label,
.cards-consent-pressures .card:focus-within .card-label {
  color: var(--gold-light);
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  color: var(--slate);
  font-weight: 400;
  margin-bottom: var(--sp-5);
}
.lede em { color: var(--cabernet); font-style: italic; }

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin: var(--sp-6) auto;
  color: var(--gold);
}
.ornament::before, .ornament::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--hairline-strong), transparent);
  max-width: 120px;
}
.ornament--thin::before, .ornament--thin::after {
  height: 2px;
  background: linear-gradient(to right, transparent, var(--hairline), transparent);
}
.ornament svg { color: var(--gold); width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}
.container--narrow { max-width: var(--container-narrow); }

.section {
  padding: var(--sp-9) 0;
}
.section--tight { padding: var(--sp-7) 0; }
.section--alt { background: var(--bg-alt); }
.section--dark {
  background: var(--navy);
  color: var(--parchment);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--parchment); }
.section--dark .eyebrow { color: var(--gold-light); }
.section--paper {
  background:
    radial-gradient(circle at 20% 10%, rgba(196, 163, 90, 0.05), transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(122, 45, 58, 0.04), transparent 50%),
    var(--parchment);
}

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-8); }

@media (max-width: 960px) {
  .grid--2, .grid--3, .grid--sidebar { grid-template-columns: 1fr; }
}

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

/* --------------------------------------------------------------------------
   5. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--navy);
  color: var(--parchment);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 2px 16px var(--shadow);
}
.site-header__top {
  border-bottom: 1px solid rgba(196, 163, 90, 0.55);
  padding: var(--sp-4) 0;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--gold-light);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
}
.site-header__top-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.site-header__top-inner > span:first-child {
  font-weight: 400;
}
.site-header__countdown {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.82rem;
  color: rgba(250, 248, 243, 0.85);
  letter-spacing: 0.04em;
  font-weight: 600;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--cabernet), var(--cabernet-dark));
  border: 1px solid rgba(196, 163, 90, 0.3);
  padding: 2px 10px;
  border-radius: 3px;
}
.site-header__countdown #banner-cd {
  color: var(--gold-light);
  font-weight: 700;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Vertical padding is sp-4 + 4px (20px) — a one-off bump from the
     token to give the brand+nav row a touch more breathing room without
     introducing a new spacing token for a single use site. */
  padding: calc(var(--sp-4) + 4px) var(--sp-5);
  max-width: var(--container);
  margin: 0 auto;
  gap: var(--sp-5);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  text-decoration: none;
  color: var(--parchment);
}
.brand:hover { color: var(--gold-light); }
/* Three brand subelements that take a different hover tone — white
   (var(--parchment)) instead of the cascaded gold-light: the courthouse /
   case-number subtitle (.brand__secondary), the italic "v." in the case
   caption (.brand__primary em), and the gold scales-of-justice SVG mark
   (.brand__mark). Higher specificity than .brand:hover so these win. */
.brand:hover .brand__mark,
.brand:hover .brand__secondary,
.brand:hover .brand__primary em { color: var(--parchment); }
.brand__mark {
  width: 44px; height: 44px;
  flex-shrink: 0;
  color: var(--gold);
  /* Visual nudge: 1px up to sit slightly higher than the flex row's centerline.
     Pairs with the -2px on .brand__text — together they raise the whole brand
     block a touch while keeping the icon ~1px below the text's nudge. */
  margin-top: -1px;
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  /* Visual nudge: shift the text column 2px up relative to the icon. In a
     flex row with `align-items: center`, the icon stays anchored to the row's
     center while the text rides 2px higher. Touches text only, not the icon. */
  margin-top: -2px;
}
.brand__primary {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.brand__primary em {
  font-style: italic;
  color: var(--gold-light);
  font-weight: 400;
}
.brand__secondary {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  word-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: 4px;
  text-shadow: var(--text-glow-gold-light);
}

.nav { display: flex; align-items: center; gap: var(--sp-2); }
.nav a {
  color: var(--parchment);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  transition: color 250ms ease, background 250ms ease, text-shadow 250ms ease, box-shadow 250ms ease;
  position: relative;
  text-shadow: 0 0 6px rgba(224, 200, 134, 0.15);
}
.nav a:hover {
  color: var(--gold-light);
  background: rgba(196, 163, 90, 0.15);
  text-shadow: var(--text-glow-gold-light);
}
.nav a.is-active {
  color: var(--gold-light);
  background: rgba(196, 163, 90, 0.15);
  text-shadow: var(--text-glow-gold-light);
}
.nav a.is-active:not(.nav__cta) {
  box-shadow: inset 0 0 0 2px rgba(196, 163, 90, 0.75);
}
.nav a.is-active::after {
  display: none;
}
.nav .nav__cta.is-active {
  background: var(--gold) !important;
  color: var(--navy) !important;
}
.nav .nav__cta.is-active::after {
  display: none;
}

.nav__cta-wrap {
  position: relative;
  display: inline-block;
  margin-left: var(--sp-3);
}
.nav__cta-wrap > .nav__cta {
  margin-left: 0 !important;
  display: block;
}
.nav__dropdown {
  /* Desktop default: drops vertically below the Amicus CTA, with items stacked
     in a column. Hidden until hover/focus opens the dropdown. Mobile-menu
     state (≤1024px) overrides this to display as a horizontal row of three
     buttons inline within the open hamburger menu. */
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  padding: 0;
  border: none;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms ease, visibility 250ms ease;
}
.nav__dropdown::before {
  /* Hover bridge: horizontal strip plugging the 6px gap between the CTA's
     bottom edge and the dropdown's top edge, so the hover state stays alive
     while the cursor traverses the gap. */
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.nav__cta-wrap:hover .nav__dropdown,
.nav__cta-wrap:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav a.nav__dropdown-btn {
  display: block;
  width: 100%; /* fills the 127px-wide .nav__cta-wrap on desktop */
  box-sizing: border-box;
  padding: var(--sp-3) var(--sp-5);
  background: var(--cabernet);
  color: var(--parchment);
  font-size: 0.92rem;
  font-weight: 500;
  /* Zero letter-spacing so "Supporters" (plain text in this button) fits
     within the 79px content area in BOTH compact AND full modes. With the
     previous 0.04em, "Supporters" rendered at ~84px in full mode (overflow)
     vs ~74px in compact (fits) — and the threshold-crossing mid-transition
     produced a slight visual "pull to the left" as the centering algorithm's
     character changed. Cert-Pool Memo (the only dropdown item with the
     transform span) has its OWN letter-spacing: 0.04em explicitly pinned
     on `.nav__dropdown-btn-text` at line ~610, so its width and transform
     calibration are unaffected by this change. */
  letter-spacing: 0;
  border-radius: 4px;
  text-align: center;
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
}
.nav a.nav__dropdown-btn:hover {
  background: var(--gold);
  color: var(--navy);
  text-shadow: none;
}
.nav__dropdown-btn-text {
  display: inline-block;
  transform: translateX(-23px) scaleX(0.8);
  transform-origin: center;
  white-space: nowrap;
  /* Pin letter-spacing on the span itself (rather than letting it
     inherit from the parent button) so the "Cert-Pool Memo" glyphs
     render at the same width whether the span lives in the active
     CTA on cert-pool-memo.html or the dropdown button on amicus.html. */
  letter-spacing: 0.04em;
}

/* Inter-button spacing inside the vertical dropdown — replicates the 6px gap
   that already sits between the CTA button (.nav__cta) and the first
   dropdown item, applied between consecutive dropdown items. The
   `+` selector means the first dropdown button never gets a top margin
   (its gap comes from .nav__dropdown's `top: calc(100% + 6px)`). */
.nav__dropdown a.nav__dropdown-btn + a.nav__dropdown-btn {
  margin-top: 6px;
}

/* Nudge "Supporters" text 2px to the left inside its nav button
   (both the active CTA on supporters.html and the dropdown button on
   every other page). Text-indent shifts inline content without moving
   the button's layout box. */
.nav a[href="supporters"] {
  text-indent: -2px;
}

.cert-fab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px 10px;
  background: var(--cabernet);
  color: var(--parchment);
  border: 1px solid var(--cabernet-dark);
  border-radius: 7px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 12px var(--shadow-lg);
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.cert-fab:hover {
  background: var(--gold);
  border-color: var(--gold-dark);
  color: var(--navy);
}
.cert-fab svg { width: 16px; height: 16px; stroke-width: 2.5; }
/* The label text sits a hair high of optical center because the uppercase
   glyphs have no descenders to balance the icon's bounding box. Nudging
   the text down 0.5px (without moving the icon or changing button height)
   gives the row a slightly more anchored feel. */
.cert-fab__label { position: relative; top: 0.5px; }
@media (max-width: 720px) {
  .cert-fab { bottom: 16px; left: 16px; padding: 7px 12px; font-size: 0.72rem; }
}

.nav__cta {
  background: var(--cabernet) !important;
  color: var(--parchment) !important;
  padding: var(--sp-3) var(--sp-5) !important;
  border-radius: var(--radius);
  font-weight: 600;
  margin-left: var(--sp-3);
  /* `text-align: center` applies in BOTH modes (not just compact). Reason:
     text-align is NOT a CSS-transitionable property — it's a discrete change.
     If we set it asymmetrically (default in full, center in compact), the
     text would JUMP at the moment the .is-scrolled class toggles, then
     the font/padding would smoothly transition around the snapped position.
     Applying text-align: center always makes the transition smooth and also
     gives the Amicus/Supporters active CTAs the centered look they should
     have in full mode anyway. Safe for the cert-pool CTA: its inner span
     (.nav__dropdown-btn-text) overflows the content area, where text-align
     doesn't affect layout — the transform does the centering work. */
  text-align: center;
  /* Override the `.nav a` rule's letter-spacing: 0.02em. "Supporters" at the
     full-mode font size renders at ~81.5px with inherited letter-spacing,
     which is 2.5px wider than the 79px content area. That means during the
     shrink/grow transition the text width CROSSES the content-area boundary
     (overflows in full mode, fits in compact mode) and the centering
     algorithm subtly changes character at the crossing — producing a small
     "settle" the user perceives as a non-smooth transition. Zeroing
     letter-spacing shaves ~2.6px off the text width (~9 letter-gaps ×
     0.02em × 14.72px), bringing it just under 79px in BOTH modes. The
     cert-pool inner span (.nav__dropdown-btn-text) has its OWN
     letter-spacing: 0.04em pinned at line ~610, so this override doesn't
     reach it — cert-pool transform calibration unaffected.
     `!important` because `.nav a` (specificity 0,1,1) outranks `.nav__cta`
     (0,1,0) and would otherwise win the cascade. */
  letter-spacing: 0 !important;
  /* Match .nav__dropdown-btn's white-space: nowrap. Without it, the
     "Amicus &nbsp; <inline-block arrow>" content in the 127px-wide CTA
     wraps on iOS Safari (whose Inter metrics push content ~1px past
     the 79px content area), bloating the button to ~73px tall.
     &nbsp; only prevents a break AT the nbsp character — it does
     NOT prevent a break at the boundary with the adjacent inline-block
     arrow when the content overflows. */
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--gold) !important;
  color: var(--navy) !important;
}

/* Lock the CTA wrap to the natural Amicus-button width (~126.6px at
   current Inter rendering) on every page, so the cert-pool page mirrors
   the amicus page pixel-for-pixel with only the text/colors swapped.
   We don't set text-align here: like the dropdown button on amicus.html,
   the active CTA leaves text alignment at its default so the
   .nav__dropdown-btn-text scaleX(0.8) + translateX(-24px) produces the
   same final on-screen position whether the span is in the main CTA
   (cert-pool page) or the dropdown (amicus page). */
.nav__cta-wrap { width: 127px; }
.page-cert-pool .nav__cta-wrap > .nav__cta,
.page-supporters .nav__cta-wrap > .nav__cta {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
/* The active CTA on amicus.html applies .nav__cta .cta-arrow {
   margin-left: 0.1em } (about +2px), which gives "Amicus →" its open
   spacing. The cert-pool dropdown's "Amicus →" lives in
   .nav__dropdown-btn, which doesn't get that override and falls through
   to the base .cta-arrow { margin-left: -0.18em } (about -3.7px),
   leaving the arrow visibly tighter against "Amicus". Cancel the
   negative tuck here so both buttons match. (margin-left: 0 — not 2px —
   because text-align: center on this button distributes any margin
   change to BOTH sides, so the effective on-screen shift is half the
   margin delta. 0px lands the arrow within 0.04px of the active-CTA
   target.) */
.page-cert-pool .nav__dropdown-btn .cta-arrow,
.page-supporters .nav__dropdown-btn .cta-arrow {
  margin-left: 0;
}

.nav-toggle {
  display: none;
  /* Full-mode size: 44×44 with the original 1.5rem glyph (~10px of visual
     "padding" between the ☰ and the box edges on each side). The compact-mode
     override below shrinks BOTH the box AND the glyph proportionally, keeping
     the same padding ratio at the smaller size. */
  width: 44px; height: 44px;
  background: none;
  color: var(--parchment);
  font-size: 1.5rem;
  border-radius: var(--radius-sm);
  /* Visual nudge: shift the ☰ glyph 2px up without moving the button box.
     With box-sizing: border-box, padding-bottom shrinks the content area
     from the bottom only; flex `align-items: center` then recenters within
     that smaller area, moving the icon up by half the padding delta (4/2=2). */
  padding-bottom: 4px;
}
.nav-toggle:hover { background: rgba(255,255,255,0.08); }

@media (max-width: 1024px) {
  .nav-toggle { display: flex; align-items: center; justify-content: center; }

  /* On mobile the strip items wrap to two lines (announcement above,
     countdown below). Tighten the TOP padding from 16px → 8px so the
     announcement hugs the top edge, but keep the BOTTOM padding at 16px so
     the countdown pill has breathing room before the brand+hamburger row.
     Row-gap defaults to sp-2 (8px) in full mode for visual breathing room
     above the countdown — but the compact-state override two lines below
     drops it to sp-1 (4px) so the strip tightens when the user scrolls.
     Net rhythm on mobile (full): 8 (top) / 8 (row-gap) / 16 (bottom).
     Net rhythm on mobile (compact): 8 (top) / 4 (row-gap) / 16 (bottom). */
  .site-header__top { padding-top: var(--sp-2); }
  .site-header__top-inner { row-gap: var(--sp-2); }
  .site-header.is-scrolled .site-header__top-inner { row-gap: var(--sp-1); }
  /* (See "Compact + mobile padding-top override" inside Section 5a below —
     it has to live there to win source-order over Section 5a's full
     `padding: var(--sp-2) 0` declaration on the same selector.) */

  /* Slide-down behavior: keep the panel mounted as `display: flex` so we can
     animate it, and toggle `max-height` (0 ↔ 80vh) on the .is-open class.
     `overflow: hidden` clips the children as the panel grows; `box-sizing:
     border-box` (sitewide default) means the 16px padding lives INSIDE the
     max-height clamp, so the panel collapses to a true zero-height pill.
     `visibility` flips with a 0.25s delay on close so the links remain
     keyboard-focusable only while the panel is actually open — restoring the
     accessibility the old `display: none` gave us for free. */
  .nav {
    display: flex;
    max-height: 0;
    visibility: hidden;
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    background: var(--navy-dark);
    padding: var(--sp-4);
    border-top: 1px solid rgba(196,163,90,0.18);
    align-items: stretch;
    gap: 0;
    transition: max-height 0.25s ease, visibility 0s linear 0.25s;
  }
  .nav.is-open {
    max-height: 80vh;
    visibility: visible;
    transition: max-height 0.25s ease, visibility 0s linear 0s;
  }
  .nav a { padding: var(--sp-4); border-bottom: 1px solid rgba(196,163,90,0.08); }

  /* Mobile-menu CTAs: HOTDOG by default — all three pills (Amicus + Cert-
     Pool + Supporters) visible side-by-side in one horizontal row, left-
     flushed inside the mobile menu. Each pill keeps its natural 127px
     width (no stretching). No hover needed since all three are visible.
     The ≤500px tier below switches to a vertical stack when 3 × 127 + 12
     gap no longer fits the menu's inner width. */
  .nav__cta-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    margin: var(--sp-3) 0 0 0;
    border-bottom: none;
  }
  .nav__cta {
    margin: 0 !important;
    text-align: center;
    flex: 0 0 127px;
    width: 127px;
  }
  .nav__dropdown {
    position: static;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    top: auto; left: auto;
  }
  .nav__dropdown::before { display: none; }
  /* The base CSS has a `.nav__cta-wrap:hover .nav__dropdown { transform:
     translateY(0) }` rule that fires whenever ANY of the three pills is
     hovered (they all live inside .nav__cta-wrap). In tablet mode the
     dropdown is always visible — that hover transform would change from
     `none` to `translateY(0)` and force a subpixel re-render in the flex
     row, visibly shrinking the 2nd and 3rd pills. Pin transform to none
     on hover/focus so the layout stays rock-steady. */
  .nav__cta-wrap:hover .nav__dropdown,
  .nav__cta-wrap:focus-within .nav__dropdown {
    transform: none;
  }
  .nav a.nav__dropdown-btn {
    flex: 0 0 127px;
    width: 127px;
    border-bottom: none;
  }
  /* Zero out the base rule's `margin-top: 6px` between dropdown items —
     in row mode the gap is handled by flex `gap: 12px`. In ≤440px tier
     below, this needs to stay zero too since the column-mode rule also
     uses `gap: 12px`. */
  .nav__dropdown a.nav__dropdown-btn + a.nav__dropdown-btn {
    margin-top: 0;
  }
}

/* Heavily limited viewports: three 127px pills + 12px gaps total 393px,
   which no longer fits the mobile menu's available inner width once the
   viewport drops below ~440px (after the menu's 32px padding leaves 408px
   of breathing room). Stack vertically into a true hamburger pattern —
   all three still permanently visible (no hover, since dropping a hover-
   revealed sub-list "past" the top banner looks odd), still left-flushed,
   still at natural 127px width. */
@media (max-width: 440px) {
  .nav__cta-wrap {
    flex-direction: column;
  }
  .nav__dropdown {
    flex-direction: column;
  }
  /* In flex-column mode the main axis is vertical, so the tablet-tier
     `flex: 0 0 127px` would apply 127px as HEIGHT instead of width
     (turning each button into a 127×127 square). Reset flex-basis to
     auto so the buttons keep their explicit 127px width but take
     their natural single-line height. */
  .nav__cta,
  .nav a.nav__dropdown-btn {
    flex: 0 0 auto;
  }
}

/* --------------------------------------------------------------------------
   5a. HEADER — COMPACT (SHRINK-ON-SCROLL) MODE
   When main.js detects window.scrollY > ~50px it toggles `.is-scrolled`
   onto `.site-header`. That triggers the rules below, which compress the
   header from ~172px to ~90px tall:
     • eyebrow row collapses to a single line ("phrase / phrase") at 8px+8px padding
     • nav row drops to 8px+8px padding, brand mark shrinks 44→32px,
       brand text shrinks proportionally, nav buttons drop to 4px vertical padding
   Every changing property is in the `transition` list so the squish/un-squish
   animates over 250ms. Removing `.is-scrolled` reverses the animation.
   -------------------------------------------------------------------------- */

/* Properties that animate between full ↔ compact. Listed explicitly (not
   `all`) so non-shrink properties like background/color/hover effects
   continue to react instantly. */
.site-header,
.site-header__top,
.site-header__top-inner,
.site-header__inner,
.site-header__countdown,
.brand__mark,
.brand__primary,
.brand__primary em,
.brand__secondary,
.nav a,
.nav__dropdown-btn-text,
.nav-toggle {
  /* Layout properties (250ms) animate the full→compact squish.
     Visual properties (250ms) animate hover fades — color, background,
     text-shadow, box-shadow. The original `.nav a` rule had
     `transition: all 250ms ease` which got clobbered by this explicit list;
     re-listing those four properties here restores hover fade behavior on
     every nav link, the Amicus CTA, and the dropdown items. */
  transition: padding 250ms ease, font-size 250ms ease,
              width 250ms ease, height 250ms ease,
              gap 250ms ease, margin-top 250ms ease,
              transform 250ms ease,
              color 250ms ease, background-color 250ms ease,
              text-shadow 250ms ease, box-shadow 250ms ease;
}

/* Eyebrow strip — vertical padding tightens, text shrinks slightly. */
.site-header.is-scrolled .site-header__top {
  padding: var(--sp-2) 0;          /* 8px + 8px */
  font-size: 0.92rem;
  line-height: 1.35;               /* tighter line-height so 1.65 doesn't bloat the row */
}
.site-header.is-scrolled .site-header__top-inner {
  /* `column-gap` (not the shorthand `gap`) — on desktop both phrases sit on
     one line, so column-gap is the only one that matters. On mobile the
     two phrases wrap to separate rows; the mobile media block at line ~726
     sets row-gap: var(--sp-1) (4px), which we MUST NOT override here.
     Using `gap` (shorthand) here would clobber row-gap and bloat the
     vertical gap above the countdown clock from 4px back up to 12px when
     the user scrolls. */
  column-gap: var(--sp-3);         /* 12px between phrases on desktop (down from 24px) */
}
.site-header.is-scrolled .site-header__countdown {
  /* Shrink proportionally to the eyebrow text: eyebrow goes 1.05rem → 0.92rem
     (~87.6% of original), so the countdown follows the same ratio:
     0.82rem × 0.876 ≈ 0.72rem. Keeps the two strips visually balanced. */
  font-size: 0.72rem;
  padding: 1px 8px;
}

/* Nav row — strip the +4px breathing-room bump that the full-mode rule
   adds (calc(var(--sp-4) + 4px)) and flatten to sp-2 (8px) on both sides. */
.site-header.is-scrolled .site-header__inner {
  padding: var(--sp-2) var(--sp-5);
}

/* Brand mark + text shrink to ~73% of full size — brand mark goes 44→32px,
   brand__primary 1.35rem→1.1rem, brand__secondary 0.7rem→0.6rem. The
   mark height (32px) now matches the combined text height (~31px) so
   the row stays visually balanced. */
.site-header.is-scrolled .brand__mark {
  width: 32px; height: 32px;
}
.site-header.is-scrolled .brand__primary {
  font-size: 1.1rem;
}
.site-header.is-scrolled .brand__secondary {
  font-size: 0.6rem;
  margin-top: 2px;
}

/* Nav buttons — 4px vertical padding (per spec), 12px horizontal so they
   still read as buttons rather than crammed text. Also shrink the text by
   ~12% to match the eyebrow/countdown proportional shrink (0.92 → 0.81rem
   ≈ 0.92 × 0.876 — same ratio as the eyebrow's 1.05 → 0.92 shrink). Keeps
   the whole header's typography shrinking in lockstep. */
.site-header.is-scrolled .nav a {
  padding: var(--sp-1) var(--sp-3);  /* 4px + 12px */
  font-size: 0.81rem;
}

/* Amicus CTA — the rule above doesn't reach it because `.nav__cta` (line ~646)
   declares `padding: ... !important` to lock its full-mode dimensions. We need
   an equally-!important override here. Vertical drops to sp-1 (4px) to match
   the other compact nav links; horizontal STAYS at sp-5 (24px) deliberately —
   that 24px contributes to the CTA's visual weight and, more importantly, the
   `.nav__cta-wrap { width: 127px }` lock at line ~675 keeps Cert and
   Supporters dropdown buttons the same width on cert-pool.html / supporters.html.
   Touching horizontal padding here would force those dropdown buttons to
   match (since they reuse the same width token), and their text needs the
   room. */
.site-header.is-scrolled .nav__cta {
  padding: var(--sp-1) var(--sp-5) !important;  /* 4px + 24px */
}

/* Dropdown buttons (Cert-Pool Memo / Amicus / Supporters in the .nav__dropdown
   menu) — same vertical compression as other nav links, but horizontal padding
   MUST stay at sp-5 (24px). Reason: the "Cert-Pool Memo" dropdown text uses an
   inner `.nav__dropdown-btn-text` span with a transform-based visual centering
   that was calibrated against 24px horizontal padding. Shrinking padding-left
   from 24px to 12px would shift the entire visible text 12px to the left.
   Font-size INHERITS the .nav a compact-mode shrink (0.81rem) — and the
   `.nav__dropdown-btn-text` transform is RECALIBRATED for the smaller span
   width in the rule below. So now all nav buttons can shrink AND stay centered. */
.site-header.is-scrolled .nav a.nav__dropdown-btn {
  padding: var(--sp-1) var(--sp-5);  /* 4px + 24px */
}

/* Transform recalibration for compact mode. The base rule (`.nav__dropdown-btn-text`
   line ~592) uses `translateX(-23px) scaleX(0.8)` calibrated for the 0.92rem
   font where the span's natural width is ~124px. At compact's 0.81rem font,
   the span shrinks to ~109px natural width, and the centering formula
   `tx = (button_center) − (padding_left + W/2) = 63.5 − (24 + W/2) = 39.5 − W/2`
   gives:
     • W = 124 (full-mode 0.92rem) → tx = −22.5 ≈ −23 (base rule)
     • W = 109 (compact 0.81rem)   → tx = −15  (this rule)
   The span overflows its button's content area at BOTH font sizes (109 > 79),
   so its layout position is pinned at padding-left regardless of text-align —
   which means this single transform value re-centers BOTH the dropdown button
   case (text-align: center) AND the cert-pool active CTA case (text-align: start).
   Both visual positions converge on button-center after the transform. */
.site-header.is-scrolled .nav__dropdown-btn-text {
  transform: translateX(-15px) scaleX(0.8);
}

/* (Removed: text-align: center is now applied in the base .nav__cta rule
   so it's active in BOTH modes. That avoids the discrete text-align switch
   during the shrink/grow transition, which had been causing the text to
   "jump" between left and centered positions at the moment .is-scrolled
   was toggled. See the base rule above for full reasoning.) */

/* Hamburger button — shrink the BOX from 44×44 to 32×32 AND shrink the ☰ glyph
   proportionally (1.5rem → 1.1rem, the same 32/44 ratio) so the visual
   padding between glyph and box edges stays in the same proportion. Without
   the font shrink, the glyph would dominate the smaller box and look cramped.
   The 4px padding-bottom from the base rule continues to apply, still
   producing a 2px-up nudge at the smaller box size. */
.site-header.is-scrolled .nav-toggle {
  width: 32px; height: 32px;
  font-size: 1.1rem;
}

/* Compact + narrow-viewport padding-top override. Lives here (not in the
   mobile @media block above) because it has to win source-order over the
   `.site-header.is-scrolled .site-header__top { padding: var(--sp-2) 0; }`
   declaration at the top of Section 5a — same specificity (0,3,0), so the
   later rule wins. Shaves 4px off the space ABOVE the announcement, but
   ONLY when the eyebrow has actually wrapped — i.e., when the countdown
   sits on its own row below the announcement. The wrap point in compact
   mode (eyebrow font 0.92rem) was empirically measured at ~890px viewport
   width; 880px gives a safety margin against font-rendering variability
   between browsers (different OSes/fonts can shift the wrap point ±5-10px).
   Above 880px in compact mode, the strip stays single-line and Section 5a's
   8px padding-top continues to apply — matching the desktop-compact rhythm. */
@media (max-width: 880px) {
  .site-header.is-scrolled .site-header__top {
    padding-top: var(--sp-1);  /* 4px (down from sp-2 = 8px) */
  }
}

/* --------------------------------------------------------------------------
   6. CASE CAPTION (decorative)
   -------------------------------------------------------------------------- */
.caption {
  font-family: var(--serif);
  text-align: center;
  padding: calc(var(--sp-8) + 1.75rem) var(--sp-5);
  background: var(--ivory);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  text-shadow: var(--text-glow-gold-light);
  position: relative;
}
.caption__court {
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  word-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--navy-deeper);
  font-weight: 700;
  font-family: var(--sans);
  margin-bottom: var(--sp-2);
}
.caption__address {
  font-size: 1.05rem;
  color: var(--slate);
  font-style: italic;
  margin-bottom: var(--sp-5);
}
.caption__parties {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.caption__party {
  text-align: center;
}
.caption__name {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.caption__role {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--slate);
  margin-top: var(--sp-1);
}
.caption__v {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-style: italic;
  color: var(--cabernet);
  font-weight: 700;
}
.caption__cases {
  position: relative;
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-5);
  font-size: 0.92rem;
  color: var(--slate);
  letter-spacing: 0.04em;
}
.caption__cases::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 560px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-dark) 30%, var(--cabernet) 50%, var(--gold-dark) 70%, transparent 100%);
}
.caption__cases::after {
  content: '\25C6';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold-dark);
  background: var(--ivory);
  font-size: 0.72rem;
  line-height: 1;
  padding: 0 10px;
  letter-spacing: 0;
}
.caption__case strong {
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--navy);
  background-image: url('../assets/images/hero.webp');
  background-size: cover;
  background-position: center 30%;
  color: var(--parchment);
  /* Top padding reduced from sp-10 to sp-9 to match the page-head's eyebrow
     spacing on internal pages (the gap from the site-header's gold border to
     "Petition for Writ of Certiorari · Verbatim"). Bottom padding sits between
     sp-9 and sp-10 — most of the original difference was shifted there to keep
     the "Colorado Supreme Court" text in the background image visible, but
     trimmed by 1rem from sp-10 to tighten the gap below the CTA buttons. */
  padding: var(--sp-9) 0 7rem;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(196, 163, 90, 0.10), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(122, 45, 58, 0.15), transparent 50%),
    linear-gradient(180deg, rgba(10, 20, 45, 0.78) 0%, rgba(15, 29, 58, 0.85) 100%);
  z-index: -1;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-7); }
}
.hero__title {
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--parchment);
  margin-bottom: var(--sp-5);
}
.hero__title em {
  font-style: italic;
  color: var(--gold-light);
}
/* Applied by JS only when "trap" wraps to its own line */
.hero__title em.trap--lifted {
  position: relative;
  top: -7px;
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
}
.hero__title .accent {
  color: var(--gold-light);
  font-style: italic;
}
.hero__lede {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.55;
  color: rgba(250, 248, 243, 0.98);
  margin-bottom: var(--sp-6);
  font-weight: 400;
}
.hero__lede em { color: var(--gold-light); font-style: italic; font-weight: 600; }
.hero__cta {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   8. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: var(--radius);
  transition: background 250ms ease, border-color 250ms ease, color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--primary {
  background: var(--cabernet);
  color: var(--parchment);
  border-color: var(--cabernet);
}
.btn--primary:hover {
  background: var(--cabernet-dark);
  border-color: var(--cabernet-dark);
  color: var(--parchment);
}
.btn--gold {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.btn--gold:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--navy-dark);
}
.btn--hover-red:hover {
  background: var(--cabernet);
  border-color: var(--cabernet);
  color: var(--parchment);
}
.btn--hover-blue:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--parchment);
}
.btn--hover-gold:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.btn--no-lift:hover {
  transform: none;
  box-shadow: none;
}
.cta-arrow {
  font-size: 1.4em;
  font-weight: 900;
  line-height: 1;
  display: inline-block;
  vertical-align: 0;
  margin-left: -0.18em;
}
.card__cta .cta-arrow { margin-left: 0; vertical-align: -2px; }
.nav__cta .cta-arrow { margin-left: 0.1em; vertical-align: -1px; }
.btn--ghost .cta-arrow { transform: translateY(-1px); }
.btn--outline {
  background: transparent;
  color: var(--parchment);
  border-color: var(--gold);
}
.btn--outline:hover {
  background: var(--gold);
  color: var(--navy);
}
/* Yellow-text variant: used on dark-background CTA sections where the
   parchment default would feel washed out. Rest color is gold-light;
   hover behavior (gold bg + navy text) is inherited from .btn--outline:hover,
   which has higher specificity than this rule (class + pseudo vs class). */
.btn--outline-yellow {
  color: var(--gold-light);
}
.btn--ghost {
  background: transparent;
  color: var(--cabernet);
  border-color: var(--cabernet);
}
.btn--ghost:hover {
  background: var(--cabernet);
  color: var(--parchment);
}
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: 0.85rem; }
.btn--lg { padding: var(--sp-5) var(--sp-7); font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--ivory);
  padding: var(--sp-6);
  border-radius: var(--radius);
  border: 1px solid var(--hairline-soft);
  box-shadow: 0 2px 8px var(--shadow);
  transition: transform 250ms ease, box-shadow 250ms ease;
  /* Layer pre-promotion — same trick as .issue-card. Without this, the
     :hover translateY(-2px) gets a compositing layer allocated mid-animation,
     and multi-line title text (e.g., the reading-order cards' wrapped h3s)
     re-rasterizes against fresh subpixel coordinates — visible as a 1px
     shift on lines below the first. Pre-promoting the layer at parse time
     locks the subpixel grid so all lines stay anchored on hover. */
  will-change: transform;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--shadow-lg);
}
/* Opt-out: cards that should NOT lift on hover. Used where the card is
   primarily a content tile (stat boxes, biographical info) rather than an
   actionable link, so the affordance of "lift = clickable" stays meaningful. */
.card--no-lift:hover {
  transform: none;
  box-shadow: 0 2px 8px var(--shadow);
}
.card__cta { color: var(--cabernet); }
.card--hover-accent .card__cta,
.card--hover-accent .card__icon,
.card--hover-accent .card__title,
.card--hover-accent .eyebrow { transition: color 250ms ease; }
.card--hover-accent:hover .card__cta { color: var(--gold-dark); }
.card--hover-accent:hover .card__icon { color: var(--cabernet); }
.card--hover-accent:hover .card__title { color: var(--cabernet); }
.card--hover-accent:hover .eyebrow { color: var(--navy); }
/* Homepage: icons turn navy blue on hover instead of cabernet. */
.page-home .card--hover-accent:hover .card__icon,
.page-404 .card--hover-accent:hover .card__icon,
.page-home .card--featured-accent:hover svg { color: var(--navy); }
/* Homepage Amicus card: (Unsigned) tag turns gold on hover. */
.unsigned-tag { transition: color 250ms ease; }
/* !important is load-bearing here: the .unsigned-tag span has an inline
   style="color: var(--cabernet)" attribute on index.html, and inline styles
   always beat selector-based rules unless the rule is !important. Without
   this, the hover gold-dark would lose to the inline cabernet. */
.page-home .card--hover-accent:hover .unsigned-tag { color: var(--gold-dark) !important; }
.card--icon-red-hover .card__icon { transition: color 250ms ease; }
.card--icon-red-hover:hover .card__icon { color: var(--cabernet); }
.card--featured-accent {
  border-left: 4px solid var(--cabernet);
  /* Include transform + box-shadow so the inherited .card:hover lift
     actually animates (the previous single-property transition was
     overriding .card's transition and causing the lift to snap). */
  transition: border-left-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}
.card--featured-accent svg { color: var(--gold); transition: color 250ms ease; }
.card--featured-accent .eyebrow { color: var(--cabernet); transition: color 250ms ease; }
.card--featured-accent:hover { border-left-color: var(--gold-dark); }
.card--featured-accent:hover svg { color: var(--cabernet); }
.card--featured-accent:hover .eyebrow { color: var(--gold-dark); }
.card__icon {
  width: 48px; height: 48px;
  color: var(--gold);
  margin-bottom: var(--sp-4);
}
.card__title {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--navy);
  margin-bottom: var(--sp-3);
  font-weight: 600;
  text-wrap: balance;
}
.card__body {
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.6;
  text-wrap: balance;
}

/* CTA bottom-flush in equal-height grids — when a .card is a direct child
   of any .grid, it becomes a flex column with body flex-grow:1, so the
   final element (.card__cta) sits at the bottom of the card regardless of
   body length. Mirrors the same pattern used for .issue-card. Standalone
   .card elements (not in a grid) keep their default block layout. */
.grid > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.grid > .card > .card__body { flex-grow: 1; }

.issue-card {
  background: var(--ivory);
  padding: var(--sp-6);
  /* Slight bottom-padding shave so the cite line + arrow circle don't sit
     too far above the card's lower edge. 4px less than uniform --sp-6. */
  padding-bottom: calc(var(--sp-6) - 4px);
  border-left: 4px solid var(--cabernet);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: 0 2px 12px var(--shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  /* Layer pre-promotion — same trick as .toc-item. The hover transform
     (translateY(-3px)) gets a compositing layer allocated at parse time
     instead of mid-animation, so the curved-edge children (.issue-card__arrow)
     don't sub-pixel-wiggle when their parent animates. */
  will-change: transform;
}
/* Equalize card heights only when in a multi-card grid */
.grid--2 > .issue-card,
.grid--3 > .issue-card { height: 100%; }
.issue-card__num {
  font-family: var(--serif);
  font-size: 4rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  opacity: 0.55;
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-5);
  font-style: italic;
  transition: color 250ms ease, opacity 250ms ease;
}
.issue-card__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: var(--sp-3);
  padding-right: var(--sp-7);
  line-height: 1.3;
  text-wrap: balance;
  transition: color 250ms ease;
}
.issue-card__body {
  color: var(--slate);
  font-size: 0.95rem;
  flex-grow: 1;
  text-wrap: balance;
}
.issue-card__cite {
  /* Slight reduction (4px) from --sp-4 so the hairline rule above the
     cases sits closer to the body text it follows. */
  margin-top: calc(var(--sp-4) - 4px);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline-strong);
  font-family: var(--serif);
  font-style: italic;
  color: var(--cabernet-dark);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.issue-card__cite > span:first-child { flex: 1; text-wrap: balance; transition: color 250ms ease; }
.issue-card__cite > span:first-child em { transition: color 250ms ease; }

/* Clickable issue card variant (used on homepage) */
a.issue-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
/* Gold left-edge overlay — fades in on hover. Using an opacity transition
   on a pseudo-element is more reliable than border-left-color, which some
   renderers refuse to interpolate when defined via shorthand on the base. */
a.issue-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 4px;
  background: var(--gold);
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}
a.issue-card:hover::before { opacity: 1; }
a.issue-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(15, 29, 58, 0.18);
}
a.issue-card:hover .issue-card__num {
  color: var(--cabernet);
  opacity: 0.85;
}
a.issue-card:hover .issue-card__title { color: var(--cabernet); }
/* Roman numerals in the top-right of each card turn navy (at lower opacity) on hover —
   matching the .path__num hover behavior on amicus.html. */
.page-home a.issue-card:hover .issue-card__num { color: var(--navy); opacity: 0.55; }
/* Bottom citation strip — the "little cases" — sit a touch thicker and
   darker than the surrounding cite text, then turn gold/yellow on hover
   (both the italic case names and the surrounding reporter text). */
.page-home a.issue-card .issue-card__cite > span:first-child { font-weight: 600; color: var(--cabernet); }
.page-home a.issue-card:hover .issue-card__cite > span:first-child,
.page-home a.issue-card:hover .issue-card__cite > span:first-child em { color: var(--gold-dark); }

.issue-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(122, 45, 58, 0.10);
  color: var(--cabernet);
  flex-shrink: 0;
  transition: background 250ms ease, color 250ms ease;
  /* Permanent compositing layer — matches the .toc-item__num pattern. The
     circle has no hover transform of its own (only bg/color flip, which are
     paint-only), so an identity translateZ(0) plants a stable rasterized
     layer that the GPU composites cleanly when the parent card translates
     on hover. No per-frame re-rasterization of the curved edge → no wiggle. */
  transform: translateZ(0);
  will-change: transform;
}
.issue-card__arrow svg {
  width: 14px;
  height: 14px;
  transition: transform 250ms ease;
  /* Layer pre-promotion for the arrow icon — its own translateX(2px) on hover
     composites in lockstep with the circle's scale and the card's translateY. */
  will-change: transform;
}
a.issue-card:hover .issue-card__arrow {
  background: var(--cabernet);
  color: var(--parchment);
}
a.issue-card:hover .issue-card__arrow svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   10. IMPACT BOX (sidebar on home)
   -------------------------------------------------------------------------- */
.impact-box {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--parchment);
  padding: calc(var(--sp-6) + 1px) var(--sp-6) calc(var(--sp-6) + 1.5px);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.impact-box__eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  word-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-3);
}
.impact-box__title {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--parchment);
  margin-bottom: 12px;
  line-height: 1.2;
  font-weight: 600;
  text-wrap: balance;
}
.impact-stat {
  /* Bottom padding bumped +6px (20→26) so each stat's text area gets more
     breathing room above the hairline that separates it from the next.
     The "last meaningful" stat (the one right before .impact-box__note,
     or the literal :last-child) keeps the original 20px so the bottom of
     the box doesn't gain unnecessary slack. */
  padding: 16px 0 26px 0;
  border-bottom: 1px solid rgba(196, 163, 90, 0.75);
}
.impact-stat:last-child { border-bottom: 0; padding-bottom: 20px; }
.impact-stat:has(+ .impact-box__note) { border-bottom: 0; padding-bottom: 20px; }
.impact-stat__value {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: var(--sp-1);
}
.impact-stat__label {
  font-size: 0.85rem;
  color: rgba(250, 248, 243, 0.75);
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.impact-box__note {
  position: relative;
  /* Breathing room around the ornamental divider (gold hairline + ❖):
     +7px above (sp-2 → sp-4 minus 1) and +6px below (sp-5+2 → sp-6).
     Keeps the line/ornament feeling like a deliberate visual pause
     rather than a cramped seam between the last stat and the closing
     note. Slight asymmetry — 1px less below than above — visually
     pulls the ❖ a hair closer to the note text it introduces. */
  margin-top: calc(var(--sp-4) - 1px);
  padding-top: var(--sp-6);
  border-top: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(250, 248, 243, 0.85);
  line-height: 1.5;
  text-wrap: balance;
}
.impact-box__note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.85;
}
.impact-box__note::after {
  content: '\2756';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: var(--gold);
  background: var(--navy-dark);
  padding: 0 0.4em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   11. STATUS PANEL
   -------------------------------------------------------------------------- */
.status-panel {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  /* Bottom padding shaved 6px total (sp-5 + 1.5px → sp-5 − 4.5px, via
     −2, −3, +1, then −2) to bring the card's lower edge closer to the
     last status-item. Top + horizontal padding untouched. */
  padding: calc(var(--sp-6) + 3px) var(--sp-6) calc(var(--sp-5) - 4.5px);
  position: relative;
}
.status-panel__title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: 8px;
  /* Visually nudge the title row (pulse + "Case Status") up 2px without
     taking real layout height away from the card. position:relative shifts
     the rendering only — the title still reserves its original height in
     the flow, so the card height and all status-item rows below stay
     exactly where they were. */
  position: relative;
  top: -1px;
}
.status-pulse {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold);
  position: relative;
  top: 1px;
  flex-shrink: 0;
}
.status-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}

.status-list { list-style: none; }
.status-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--sp-4);
  /* +3px above and below the dashed separator (sp-4 → sp-4+3). Paired
     with the matching +3px on the green/blue variants so every dashed
     line gets the same incremental breathing room regardless of which
     two row variants flank it. */
  padding: calc(var(--sp-4) + 3px) 0;
  border-bottom: 2px dashed rgba(74, 82, 102, 0.4);
  font-size: 0.93rem;
}
.status-item:last-child { border-bottom: 0; }
.status-item__date {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--slate);
  letter-spacing: 0.02em;
  position: relative;
  top: 3px;
}
.status-item__event { color: var(--text); text-wrap: balance; }
/* Color-variant highlights — left edge aligns with the date column; the
   backing extends only to the right (matches the spotlight pattern). The
   dashed separator stays aligned with the date column via a pseudo-element;
   the box's own bottom border is kept (for layout) but made transparent so it
   doesn't render at the extended width. Result: backing has rounded corners
   on all four sides, dashes are straight horizontal lines aligned with dates. */
.status-item--green,
.status-item--blue {
  /* Backing left edge sits 75% of the way across the status-panel's left
     gutter (sp-6 total; sp-2 = 25% remaining = leftward extension). Right
     side extends sp-4. Padding compensates so grid columns stay put. */
  margin: 0 calc(-1 * var(--sp-4)) 0 calc(-1 * var(--sp-2));
  /* +3px top/bottom (sp-4 → sp-4+3), matching plain .status-item above
     exactly — same base spacing token, same increment — so every row
     contributes identical vertical rhythm to the dashed separators
     regardless of variant. Prior sp-3 here made colored rows slightly
     shorter than plain rows, biasing each flanking dash toward the
     colored content. */
  padding: calc(var(--sp-4) + 3px) var(--sp-4) calc(var(--sp-4) + 3px) var(--sp-2);
  border-radius: var(--radius-sm);
  background-clip: padding-box;
  border-bottom-color: transparent;
  position: relative;
}
.status-item--green::after,
.status-item--blue::after {
  content: '';
  position: absolute;
  /* Insets match the leftward (sp-2) and rightward (sp-4) box extensions so
     the dashes stay aligned with the date column and the content right edge. */
  left: var(--sp-2);
  right: var(--sp-4);
  bottom: -2px;
  border-top: 2px dashed rgba(74, 82, 102, 0.4);
  pointer-events: none;
}
.status-item--green:last-child::after,
.status-item--blue:last-child::after {
  display: none;
}
/* Green: forward-looking deadline (mirrors .doc-item--green on documents.html).
   Note: use background-image (longhand) instead of background (shorthand) —
   the shorthand would reset background-clip set in the shared rule above. */
.status-item--green {
  background-image: linear-gradient(90deg, rgba(61, 103, 71, 0.20), rgba(61, 103, 71, 0.05) 50%, transparent);
}
.status-item--green .status-item__event {
  font-weight: 600;
  color: var(--date-green);
}
/* Blue: lead filing (mirrors .doc-item--blue on documents.html). */
.status-item--blue {
  background-image: linear-gradient(90deg, rgba(34, 75, 138, 0.215), rgba(34, 75, 138, 0.058) 50%, transparent);
}
.status-item--blue .status-item__event {
  font-weight: 600;
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   11b. AUTHORITY PANEL — homepage sidebar companion to the status panel.
   Sits to the left of the case-status list and surfaces the five controlling
   cases the petition asks the Court to restore. Visual language: ivory body
   with hairline border, cabernet left rail (signals "controlling authority"),
   dashed item separators that match the status-list rhythm so the two columns
   read as paired sibling panels.
   -------------------------------------------------------------------------- */
.authority-panel {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--cabernet);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  position: relative;
}
.authority-panel__head { margin-bottom: var(--sp-4); }
.authority-panel__title {
  font-family: var(--serif);
  font-size: 2.0rem;
  margin: var(--sp-1) 0 var(--sp-3);
  color: var(--navy);
  line-height: 1.2;
  font-weight: 600;
}
.authority-panel__title em { color: var(--cabernet); font-style: italic; }
.authority-panel__lede {
  font-size: 0.96rem;
  color: var(--charcoal);
  line-height: 1.55;
  text-wrap: balance;
  margin-bottom: 0;
}
.authority-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px dashed var(--hairline-strong);
}
.authority-item { border-bottom: 1px dashed var(--hairline-strong); }
.authority-item:last-child { border-bottom: 0; }
.authority-item > a {
  display: block;
  padding: var(--sp-3);
  margin: 0 calc(-1 * var(--sp-3));
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
  transition: background 250ms ease;
}
.authority-item:not(:last-child) > a { padding-bottom: 19px; }
.authority-item > a:hover { background: rgba(196, 163, 90, 0.16); }
.authority-item__name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  display: block;
  line-height: 1.3;
  transition: color 250ms ease;
}
.authority-item > a:hover .authority-item__name { color: var(--cabernet); }
.authority-item__name em { font-style: italic; }
.authority-item__cite {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--slate);
  display: block;
  margin-top: 3px;
  letter-spacing: 0.02em;
}
.authority-item__tag {
  font-size: 0.9rem;
  color: var(--charcoal);
  display: block;
  margin-top: 6px;
  line-height: 1.5;
  text-wrap: balance;
}
.authority-item__quote {
  font-family: var(--serif);
  font-size: 0.97rem;
  font-style: italic;
  font-weight: 500;
  color: var(--charcoal);
  display: block;
  margin-top: 8px;
  padding-left: var(--sp-3);
  border-left: 2px solid rgba(196, 163, 90, 0.55);
  line-height: 1.5;
  text-wrap: balance;
  transition: border-color 250ms ease;
}
.authority-item > a:hover .authority-item__quote { border-left-color: rgba(15, 29, 58, 0.55); }

/* --------------------------------------------------------------------------
   12. COUNTDOWN BANNER
   -------------------------------------------------------------------------- */
.countdown {
  background: linear-gradient(135deg, var(--cabernet) 0%, var(--cabernet-dark) 100%);
  color: var(--parchment);
  padding: 6.5rem var(--sp-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.countdown::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(196,163,90,0.25), transparent 60%);
}
.countdown__inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.countdown__eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  word-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: var(--sp-5);
}
.countdown__title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  margin-bottom: var(--sp-6);
  color: var(--parchment);
  text-wrap: balance;
}
.countdown__title em { color: var(--gold-light); font-style: italic; }
.countdown__timer {
  display: flex;
  justify-content: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin: var(--sp-5) 0;
}
.countdown__cell {
  background: rgba(0, 0, 0, 0.18);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  width: 130px;
  flex-shrink: 0;
  border: 1px solid rgba(196, 163, 90, 0.3);
  box-sizing: border-box;
}
.countdown__num {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 600;
  color: var(--gold-light);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__unit {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 248, 243, 0.75);
  margin-top: var(--sp-2);
}
.countdown__date {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--gold-light);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   13. ARGUMENT SECTIONS (deep-dive on arguments page)
   -------------------------------------------------------------------------- */
.argument {
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--hairline-strong);
}
.argument:last-child { border-bottom: 0; }
/* Keep the first .argument on each page tight to the section's lede/header —
   the sp-8 top padding above was bumped to widen the gap *between* issues, but
   the top of the very first issue/argument doesn't need that extra breathing
   room since there's no inter-issue divider above it. */
#issue-1, #arg-1 { padding-top: var(--sp-7); }
/* Slightly wider gap above every issue/argument that sits below an inter-section
   divider — bumps the space above the heading by 0.5rem to give each new
   issue/argument a touch more breathing room as it scrolls into view. Factual
   conclusions (fact-a … fact-e) are excluded because they have their own
   visual rhythm under the Part II eyebrow. */
#issue-2, #issue-3, #issue-4, #prejudice,
#arg-2, #arg-3, #arg-4 {
  padding-top: calc(var(--sp-8) + 0.5rem);
}
.argument__num {
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  word-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 700;
  margin-bottom: var(--sp-3);
  padding-bottom: 4px;
}
/* When .argument__num contains a jump button, lay out as flex row */
.argument__num--with-jump {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.argument__jump {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-4);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cabernet);
  background: transparent;
  border: 1.5px solid var(--cabernet);
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  transition: background 250ms ease, color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}
.argument__jump:hover {
  background: var(--cabernet);
  color: var(--parchment);
}
.argument__jump svg {
  width: 15px;
  height: 15px;
}
/* Same optical-balance nudge as .cert-fab__label — uppercase glyphs have no
   descenders, so the text reads a hair high relative to the arrow icon.
   Half-pixel down without touching the icon or button height. */
.argument__jump-label { position: relative; top: 0.5px; }
.argument__title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--navy);
  margin-bottom: var(--sp-4);
  line-height: 1.2;
  font-weight: 600;
}
.argument__title em { color: var(--cabernet); font-style: italic; }
.argument__body {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--charcoal);
  max-width: 760px;
}
.argument__body p { margin-bottom: var(--sp-4); }

.callout {
  background: var(--parchment-dark);
  border-left: 4px solid var(--gold);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-5) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--navy-dark);
  font-size: 1.05rem;
  line-height: 1.5;
  position: relative;
  font-weight: 500;
}
.callout::before {
  content: '\201C';
  position: absolute;
  top: -10px; left: var(--sp-4);
  font-size: 4rem;
  color: var(--gold);
  font-family: var(--serif);
  line-height: 1;
}
.callout cite {
  display: block;
  margin-top: var(--sp-3);
  font-size: 0.9rem;
  color: var(--slate);
  font-style: normal;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.callout cite::before { content: '— '; }

/* TL;DR collapsible button — small gold pill that expands to show .callout content */
.tldr-toggle {
  margin: 0 0 calc(var(--sp-5) + 0.5rem + 5px);
  text-align: left;
  min-height: 0;
}

/* Desktop only: park the pill in the gutter to the left of the roadmap
   container. When the user expands the pill, the callout takes the
   exact (x, y) top-left position the toc-card occupies when closed —
   so opening the pill visually "swaps in" the callout above the
   pushed-down toc-card. The pill itself stays anchored in the gutter,
   aligned with that shared top edge. */
@media (min-width: 1080px) {
  #roadmap > .container,
  #roadmap > .container--narrow {
    position: relative;
  }
  /* Move the gap from below the toggle wrapper to below the callout,
     so the wrapper takes 0 vertical space when closed and the toc-card
     sits at y=0. When the callout opens, the callout also sits at y=0. */
  #roadmap .tldr-toggle {
    margin: 0;
  }
  #roadmap .tldr-toggle .callout {
    margin: 0 0 calc(var(--sp-5) + 0.5rem + 5px);
  }
  #roadmap .tldr-toggle > summary {
    position: absolute;
    left: calc(-1 * (var(--sp-7) + 3rem + 1px));
    top: 0;
    margin: 0;
  }
}
#roadmap { padding-top: var(--sp-9); }
.tldr-toggle > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.9em 0.45em 0.75em;
  background: var(--gold);
  color: var(--navy);
  border: 1.5px solid var(--gold-dark);
  border-radius: var(--radius);
  font-weight: 700;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  user-select: none;
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.tldr-toggle > summary::-webkit-details-marker { display: none; }
.tldr-toggle > summary::marker { display: none; }
.tldr-toggle > summary::before {
  content: '+';
  font-size: 1.1em;
  font-weight: 900;
  line-height: 1;
  display: inline-block;
  width: 0.7em;
  text-align: center;
  transform: translateY(-1px);
}
.tldr-toggle[open] > summary::before { content: '−'; }
.tldr-toggle > summary:hover,
.tldr-toggle[open] > summary {
  background: var(--cabernet);
  color: var(--parchment);
  border-color: var(--cabernet-dark);
}
/* When already open (red), hovering reverts to the gold/closed palette
   so the user has clear affordance that clicking will collapse it. */
.tldr-toggle[open] > summary:hover {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold-dark);
}
.tldr-toggle .callout {
  /* Narrow-viewport pill-above-box layout: match the bottom margin set on
     .tldr-toggle so the gap above the callout equals the gap below it.
     On ≥1080px the desktop rule overrides this back to 0 (the callout has
     to sit at y=0 to visually swap with the toc-card). */
  margin-top: calc(var(--sp-5) + 0.5rem + 5px);
  margin-bottom: 0;
  border-left-color: var(--cabernet);
}
.tldr-toggle .callout::before { display: none; } /* hide the quote-mark ornament for TL;DR */

/* Smooth expand/collapse for the TL;DR <details>. Same pattern as
   details.verify-block: `display: contents` opts the UA ::details-content
   pseudo out of layout, then a JS-inserted wrapper around the .callout
   animates via grid-template-rows. The grid trick works in Firefox AND
   Chrome (height: auto transitions require interpolate-size which Firefox
   doesn't yet support). The wrapper includes the callout's margin-bottom
   in its measured row size, so the toc-card slides smoothly throughout. */
details.tldr-toggle::details-content {
  display: contents;
}
.tldr-content-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 250ms ease;
}
/* The grid track only collapses to its inner item's INTRINSIC outer size.
   With overflow: hidden + min-height: 0 the content area can be 0, but the
   callout's padding and margin still contribute to the box's outer size and
   keep the track ~85px tall when "closed". Transitioning padding/margin to
   0 alongside grid-template-rows lets the wrap actually reach 0. */
.tldr-content-wrap > .callout {
  min-height: 0;
  overflow: hidden;
  transition: padding-top 250ms ease, padding-bottom 250ms ease,
              margin-top 250ms ease, margin-bottom 250ms ease;
}
details.tldr-toggle:not([open]) > .tldr-content-wrap {
  grid-template-rows: 0fr;
}
details.tldr-toggle:not([open]) > .tldr-content-wrap > .callout {
  padding-top: 0;
  padding-bottom: 0;
  /* !important needed because `#roadmap .tldr-toggle .callout` further up
     has higher selector specificity than this rule. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#roadmap { padding-bottom: var(--sp-9); }

.controlling-auth {
  background: var(--ivory);
  padding: var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--hairline-strong);
  margin: var(--sp-5) 0;
}
/* Arguments + Issues pages: tighten the bottom padding inside controlling-/
   other-authority quote blocks. Leaves the top + horizontal padding alone. */
.page-arguments .controlling-auth,
.page-issues .controlling-auth {
  padding-bottom: var(--sp-2);
}
.controlling-auth__label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  word-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cabernet);
  margin-bottom: var(--sp-2);
}
.controlling-auth__cite {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--sp-2);
  font-style: italic;
}
.controlling-auth__quote {
  font-size: 0.95rem;
  color: var(--charcoal);
  line-height: 1.55;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   14. DOCUMENT TREE
   -------------------------------------------------------------------------- */
.master-download {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--navy);
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
  position: relative;
  overflow: hidden;
}
/* When the integrity card follows the gold box, flatten the box's bottom
   corners and drop its bottom margin so the two read as one stadium shape. */
.master-download:has(+ details.verify-block) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.master-download::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(15, 29, 58, 0.12), transparent 60%);
  border-radius: 50%;
}
.master-download__icon {
  width: 64px; height: 64px;
  color: var(--navy);
  flex-shrink: 0;
  z-index: 1;
}
.master-download__content { flex-grow: 1; z-index: 1; }
.master-download__title {
  font-family: var(--serif);
  font-size: 2.2rem;
  color: var(--navy);
  margin-bottom: var(--sp-1);
  font-weight: 700;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.08),
     1px -1px 0 rgba(255, 255, 255, 0.08),
    -1px  1px 0 rgba(255, 255, 255, 0.08),
     1px  1px 0 rgba(255, 255, 255, 0.08);
}
.master-download__meta {
  font-size: 0.92rem;
  color: var(--navy-dark);
  opacity: 0.85;
}
.master-download__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  background: var(--navy);
  color: var(--parchment);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius);
  font-weight: 600;
  z-index: 1;
  flex-shrink: 0;
  transition: background 250ms ease, color 250ms ease;
}
/* Download icon (tray + arrow) — SVG via mask so it inherits via background-color */
.master-download__btn::after {
  content: '';
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  background-color: var(--gold-light);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>") no-repeat center / contain;
  transition: background-color 250ms ease;
}
.master-download__btn:hover {
  background: var(--cabernet);
  color: var(--gold-light);
}
.master-download__btn:hover::after {
  background-color: var(--ivory);
}
@media (max-width: 720px) {
  .master-download { flex-direction: column; text-align: center; }
  .master-download__provenance { justify-content: center; }
}

/* File-integrity card — standalone, expandable. Consolidates the
   SHA-256 hash, verified date, and how-to-verify explainer into one
   cohesive surface beneath the Master Case File card (previously the
   hash sat on the gold card and the explainer was a glued-on drawer).
   The card itself is the <details>; the visible summary shows the
   at-a-glance data, and expanding reveals the verification mechanics. */
details.verify-block {
  margin: 0 0 var(--sp-7);
  background: var(--gold-cream);
  border: 1px solid var(--hairline-soft);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
details.verify-block > .verify-block__summary {
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
}
details.verify-block > .verify-block__summary::-webkit-details-marker { display: none; }

.verify-block__icon {
  width: 22px;
  height: 22px;
  color: var(--cabernet);
  flex-shrink: 0;
}

.verify-block__meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--charcoal);
  line-height: 1.5;
}
.verify-block__label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate);
}
code.verify-block__hash {
  font-family: var(--mono);
  font-size: 0.82rem;
  background: rgba(15, 29, 58, 0.10);
  padding: 1px 7px;
  margin: 0 0.25em;
  border-radius: 3px;
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease;
  color: var(--navy);
  user-select: all;
}
code.verify-block__hash:hover {
  background: rgba(15, 29, 58, 0.20);
}
code.verify-block__hash.is-copied {
  background: rgba(47, 86, 56, 0.32);
  color: var(--date-green);
  /* Snap to green instantly when copied; transition back to navy when the
     class is removed still uses the 250ms rule on the base selector. */
  transition: none;
}
code.verify-block__hash.is-copied::after {
  content: ' \2014 copied';
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
}
.verify-block__sep {
  color: var(--slate);
  font-weight: 500;
  margin-right: 0.25em;
}
.verify-block__date {
  color: var(--slate);
  font-weight: 500;
}

.verify-block__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-left: auto;
  color: var(--slate);
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  transition: color 250ms ease;
}
.verify-block__chevron {
  width: 14px;
  height: 14px;
  transition: transform 250ms ease;
}
details.verify-block[open] .verify-block__chevron {
  transform: rotate(180deg);
}
details.verify-block:not([open]) > .verify-block__summary:hover .verify-block__toggle,
details.verify-block > .verify-block__summary:focus-visible .verify-block__toggle {
  color: var(--cabernet);
}
details.verify-block[open] > .verify-block__summary {
  border-bottom: 1px solid var(--hairline-soft);
}
details.verify-block[open] > .verify-block__summary .verify-block__toggle {
  color: var(--navy);
}
/* `display: contents` on the UA ::details-content pseudo-element removes it
   from layout so it doesn't impose `block-size: 0` on our content when
   closed. Without this, the native pseudo would override the transition
   below and the drawer would snap shut/open instantly. */
details.verify-block::details-content {
  display: contents;
}
/* grid-template-rows: 1fr <-> 0fr is the cross-browser way to transition
   between "size to fit content" and "collapse to 0". Works in Firefox and
   Chrome without needing interpolate-size: allow-keywords on :root. */
details.verify-block .verify-block__content {
  font-family: var(--sans);
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 250ms ease;
}
details.verify-block:not([open]) > .verify-block__content {
  grid-template-rows: 0fr;
}
/* overflow: hidden + min-height: 0 lets the content area collapse, but the
   inner's padding still contributes to the row's intrinsic size. Animate
   padding-top/bottom to 0 alongside the grid transition so the drawer
   fully closes (otherwise ~40px of padding stays visible when "closed"). */
details.verify-block .verify-block__content-inner {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  min-height: 0;
  overflow: hidden;
  transition: padding-top 250ms ease, padding-bottom 250ms ease;
}
details.verify-block:not([open]) > .verify-block__content > .verify-block__content-inner {
  padding-top: 0;
  padding-bottom: 0;
}
details.verify-block .verify-block__content p {
  margin: 0 0 var(--sp-3);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--charcoal);
  text-wrap: balance;
}
details.verify-block .verify-block__content h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cabernet);
  font-weight: 700;
  margin: var(--sp-5) 0 var(--sp-2);
}
details.verify-block .verify-block__content pre {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--navy-dark);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
details.verify-block .verify-block__content pre code {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--gold-light);
  background: none;
  padding: 0;
  white-space: pre;
}
details.verify-block .verify-block__content code.verify-block__full-hash {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  word-break: break-all;
}
details.verify-block .verify-block__content .verify-block__expected-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}
details.verify-block .verify-block__content .verify-block__footnote {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--slate);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-3);
}

.doc-tree {
  list-style: none;
}
.doc-court {
  background: var(--ivory);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  margin-bottom: var(--sp-5);
  overflow: hidden;
}
.doc-court__header {
  background: var(--navy);
  color: var(--parchment);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  cursor: pointer;
  user-select: none;
  text-align: left;
  transition: background 250ms ease;
}
.doc-court__header:hover { background: var(--navy-light); }
.doc-court__header[aria-expanded="false"] .doc-court__chevron { transform: rotate(-90deg); }
.doc-court__heading {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-grow: 1;
  min-width: 0;
}
.doc-court__icon {
  width: 44px;
  height: 44px;
  color: var(--gold-light);
  flex-shrink: 0;
  margin-left: calc(-1 * var(--sp-2));
  transition: color 250ms ease;
}
.doc-court__header:hover .doc-court__icon { color: var(--gold); }

/* --------------------------------------------------------------------------
   ROADMAP — TOC CARD (upgraded look, replaces inline-styled lists)
   -------------------------------------------------------------------------- */
.toc-card {
  background: var(--ivory);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-6) var(--sp-7) var(--sp-7);
  box-shadow: 0 2px 8px var(--shadow);
}
.toc-card > .eyebrow { display: block; margin-bottom: var(--sp-1); }
.toc-card__title {
  font-family: var(--serif);
  font-size: 2.5rem;
  color: var(--navy);
  font-weight: 600;
  margin: 0 0 var(--sp-5);
  line-height: 1.1;
}
.toc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-7);
}
@media (max-width: 720px) {
  .toc-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  /* The toc-part heading is uppercase + letter-spaced + word-spaced, which makes
     long Part labels ("Part III · The 'Lawsuit Scammer' Narrative") wider than
     the mobile column. Allow breaking anywhere so the heading wraps to fit
     instead of pushing the layout viewport wider. */
  .toc-part__heading { overflow-wrap: anywhere; }
  /* The TOC item titles use &nbsp; between many words to preserve phrasing
     groups on desktop. On mobile, those nbsp's prevent any wrapping at all,
     making the title overflow. Allow break-anywhere as a last resort to keep
     the layout viewport at device width — desktop is unaffected. */
  .toc-item__title { overflow-wrap: anywhere; }
  /* Contact-item values (email, full address) can exceed the column width on
     mobile. Allow breaking within tokens so the layout doesn't widen. */
  .contact-item { overflow-wrap: anywhere; }
  /* Hide the H2/H3 deep-link "copy" buttons on mobile. They use a negative-
     margin pattern that visually bleeds past the heading container (so they
     never affect line-wrap on desktop), but that bleed extends past the
     viewport edge on narrow mobile viewports. They're hover-only affordances
     anyway — useless on touch devices. */
  .anchor-copy { display: none !important; }
  /* BB I card (record.html #collateral-damage) has 4 citation buttons that
     try to fit horizontally with flex-wrap: wrap — on mobile, three fit on
     one row and the fourth orphans onto a second full-width row, which looks
     unbalanced. Stack all four vertically at natural button width, left-
     aligned (matching the BB II/III/IV cards' single-button pattern).
     `!important` on align-items overrides the inline `align-items: stretch`
     that would otherwise stretch every button to the full card width. */
  .bb1-cta-row {
    flex-direction: column;
    align-items: flex-start !important;
  }
  /* Override inline flex sizing + text alignment so each button takes its
     natural content width, left-aligned (instead of stretching to the card
     edge with centered text). */
  .bb1-cta-row > a {
    flex: 0 0 auto !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
  /* The MFR button's download icon has an inline `margin-right: -0.35em`
     (a desktop-tuned negative pull that tightens the icon-to-text gap when
     the button is narrow + centered). At mobile stack width the button is
     wide enough that the negative pull causes the icon to overlap the "MFR"
     text — swap it for a comfortable 0.65em gap on mobile only. */
  .bb1-cta-row > a:first-child > svg {
    margin-right: 0.65em !important;
  }
  /* The MFR button also has inline asymmetric padding (left: sp-6 + 5px,
     right: sp-6 - 5px) tuned for desktop icon-text centering. On mobile,
     reset to symmetric default so the icon sits at the same x-position
     as the text of the three ghost buttons below it. */
  .bb1-cta-row > a:first-child {
    padding-left: var(--sp-6) !important;
    padding-right: var(--sp-6) !important;
  }
}
.toc-part {
  margin: 0;
}
.toc-part + .toc-part { margin-top: var(--sp-5); }
.toc-part__heading {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  word-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cabernet);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-bottom: 1.5px solid var(--gold-dark);
  text-wrap: balance;
}
.toc-part__heading a {
  color: inherit;
  text-decoration: none;
  transition: color 250ms ease;
}
.toc-part__heading a:hover { color: var(--gold-dark); }
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
  counter-reset: toc-counter;
}
.toc-list--two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: var(--sp-7);
}
@media (max-width: 720px) {
  .toc-list--two-col {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}
.toc-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--charcoal);
  transition: background 250ms ease, color 250ms ease, transform 250ms ease;
  counter-increment: toc-counter;
  position: relative;
  /* Pre-promote the entry to its own compositing layer so the hover
     transform (translateX(4px)) doesn't have to allocate a layer at the
     moment hover begins. Without this, the layer is created mid-animation,
     which can cause the nested .toc-item__num layer to miss a composite
     frame and read as a 1px vertical hiccup — most visible on entries
     whose ::before glyph has no optical-alignment transform of its own
     (e.g. the "E" item in toc-list--alpha). `will-change: transform` is
     the canonical hint; combined with the .toc-item__num layer below,
     every element in the entry hierarchy is ready before hover starts. */
  will-change: transform;
}
.toc-item:hover {
  background: rgba(196, 163, 90, 0.16);
  color: var(--cabernet);
  /* `transform: translateX(4px)` for the slide-right feel, NOT
     `padding-left: var(--sp-3)`. Transforms shift the visual position
     without changing layout, so the title's content area stays exactly
     the same — no text reflow on hover. The previous padding-based
     approach grew padding-left from sp-2 (8px) → sp-3 (12px), which
     shrunk content area by 4px and pushed borderline titles onto an
     extra line. */
  transform: translateX(4px);
}
.toc-item__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--parchment);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  transition: background 250ms ease, transform 250ms ease;
  /* Force the entire circle (background, border-radius edge, ::before glyph,
     and any nested SVG icon) into its own compositing layer. Without this,
     the .toc-item__num is rasterized inside the parent .toc-item's layer,
     which means every frame of the parent's hover transition (translateX(4px)
     + background-color crossfade) re-rasterizes the circle at a slightly
     different subpixel position — the rounded edge's anti-aliasing wiggles
     and the eye reads it as a 1px vertical drift. Promoting the circle to
     its own layer makes the rasterization happen ONCE at a stable position;
     the parent's animation then GPU-composites the layer smoothly without
     touching its internal pixels.

     `translateZ(0)` is the canonical reliable layer-promotion trick (more
     dependable across browsers than `will-change: transform` alone, which
     is only a hint). `will-change: transform` is kept alongside as the
     forward-compatible signal. The identity translation has no visual
     effect — it exists purely to create the layer. */
  transform: translateZ(0);
  will-change: transform;
}
.toc-item__num::before { content: counter(toc-counter, upper-roman); }
.toc-list--alpha .toc-item__num::before { content: counter(toc-counter, upper-alpha); }
/* Pages where the roadmap circles don't correspond to numbered sections in
   the body (record.html, about.html). Replace the digit with a section sign
   so the circle reads as a generic "section marker" instead of an index. */
.toc-list--unnumbered .toc-item__num::before { content: "\00a7"; }
/* When an inline SVG sits inside the circle, the SVG IS the marker — suppress
   the pseudo-element fallback and size the icon to fit. Lets us mix custom
   icons on some unnumbered items with the § fallback on the rest.
   Specificity note: the override matches the prior `.toc-list--X .toc-item__num`
   chain (two classes) so it outranks the § rule in the cascade. */
.toc-list--unnumbered .toc-item__num:has(svg)::before,
.toc-list .toc-item__num:has(svg)::before { content: none; }
.toc-item__num > svg {
  width: 15px;
  height: 15px;
  display: block;
  /* Promote every roadmap icon to its own compositing layer so the hover
     transition (parent .toc-item slides translateX(4px)) doesn't re-rasterize
     icons that lack an inline `transform: translate(...)` of their own.
     Without this, icons with an inline transform are already layer-promoted
     by the browser (free side effect of `transform`) and ride the hover
     animation as a stable composited layer — but any icon without an inline
     transform (e.g. the hourglass on arguments.html) renders inside the
     parent's layer and gets re-rasterized each frame of the animation, which
     subpixel-rounds inconsistently from its starting position and reads as
     a 1px vertical drift. `will-change: transform` is the canonical hint to
     promote without specifying an actual transform, so it composes cleanly
     with whatever inline transform an individual icon may or may not carry. */
  will-change: transform;
}
/* Part III on arguments.html (the "Grave Consequences" section). Two plain
   exclamation marks "!!" — louder and more direct than the combined ‼
   glyph, which renders inconsistently across fonts. */
.toc-list--emphasis .toc-item__num::before { content: "!!"; }
/* I (1st item) on the issues-page roadmap — half-pixel right for optical
   centering of the narrow Roman glyph. */
.toc-list--two-col > li:nth-child(1) .toc-item__num::before {
  transform: translateX(0.5px);
}
/* IV (4th item) optically reads slightly left-of-center and high — nudge
   it half a pixel right and half a pixel down to balance the asymmetric
   Roman glyph. */
.toc-list--two-col > li:nth-child(4) .toc-item__num::before {
  transform: translate(0.5px, 0.5px);
}
/* I on the arguments-page roadmap — half-pixel right for optical centering
   of the narrow Roman glyph. Targeted by href so the rule doesn't bleed
   into the alpha (A–E) or emphasis lists alongside. */
.toc-item[href="#arg-1"] .toc-item__num::before {
  transform: translateX(0.5px);
}
/* IV on the arguments-page roadmap reads slightly high and left of center
   — half-pixel down + half-pixel right for optical alignment with I–III. */
.toc-item[href="#arg-4"] .toc-item__num::before {
  transform: translate(0.5px, 0.5px);
}
.toc-item:hover .toc-item__num {
  background: var(--gold-dark);
  color: var(--parchment);
}
.toc-item__title {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.3;
  text-wrap: balance;
  flex: 1;
  font-weight: 600;
}
.toc-item__title em {
  color: var(--cabernet);
  font-style: italic;
  transition: color 250ms ease;
}
.toc-item:hover .toc-item__title em { color: var(--gold-dark); }
.toc-item__title .toc-accent {
  color: var(--cabernet);
  transition: color 250ms ease;
}
.toc-item:hover .toc-item__title .toc-accent { color: var(--gold-dark); }
.toc-item__arrow {
  flex-shrink: 0;
  opacity: 0;
  color: var(--cabernet);
  font-weight: 700;
  font-size: 1.1rem;
  transform: translateX(-4px);
  transition: opacity 250ms ease, transform 250ms ease, color 250ms ease;
}
.toc-item:hover .toc-item__arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--gold-dark);
}
.doc-court__title {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--parchment);
  font-weight: 600;
  margin-bottom: var(--sp-1);
  line-height: 1.2;
}
.doc-court__case {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--gold-light);
  letter-spacing: 0.06em;
}
.doc-court__chevron {
  width: 20px; height: 20px;
  color: var(--gold);
  transition: transform 250ms ease;
  flex-shrink: 0;
  margin-top: var(--sp-2);
  stroke-width: 3;
  position: relative;
  top: 5px;
  left: 5px;
}
/* Smooth expand/collapse for the doc-court bodies. Uses the
   grid-template-rows: 1fr <-> 0fr trick, which transitions cleanly in
   Firefox AND Chrome (height: auto transitions require interpolate-size,
   which Firefox doesn't yet support). The JS wraps doc-court__body's
   children in a single .doc-court__body-inner so the grid has one row to
   animate. Padding is on the outer and collapses alongside the row. */
.doc-court__body {
  padding: var(--sp-5) var(--sp-6);
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 250ms ease, padding-top 250ms ease, padding-bottom 250ms ease;
}
/* overflow-y: clip on the grid item is required so the 1fr <-> 0fr collapse
   actually fires (without vertical clipping, the inner's min-content size keeps
   the row open and the animation doesn't reach zero height).

   But we need overflow-x: visible so the colored doc-item rows (--featured,
   --blue, --green, --spotlight) can extend their backings 8px leftward into
   the parent's gutter — that's the "tab" past the date column that signals
   notable entries. With overflow-x: hidden, that leftward extension got
   clipped silently. `clip` is the modern alternative to `hidden` that can be
   set independently per axis (doesn't establish a scroll container, so the
   other axis can still be visible). Chrome 90+, Safari 16+, Firefox 81+. */
.doc-court__body > .doc-court__body-inner {
  min-height: 0;
  overflow-x: visible;
  overflow-y: clip;
}
.doc-court__header[aria-expanded="false"] + .doc-court__body {
  grid-template-rows: 0fr;
  padding-top: 0;
  padding-bottom: 0;
}
.doc-section { margin-bottom: var(--sp-5); }
.doc-section:last-child { margin-bottom: 0; }
.doc-section__title {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  word-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cabernet);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--hairline-strong);
}
.doc-list {
  list-style: none;
}
.doc-item {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--hairline-strong);
  font-size: 0.95rem;
  /* Variants below set background-image only (longhand) so this clip survives.
     Keeps the 1px dashed bottom border visible under every colored backing. */
  background-clip: padding-box;
}
.doc-item:last-child { border-bottom: 0; }
/* Prior-litigation listing: tighten the gap between text and PDF button
   so the button sits immediately to the right of the description rather
   than floating at the far right edge. */
#prior-litigation .doc-item {
  grid-template-columns: 110px minmax(0, 1fr) auto;
}
#prior-litigation .doc-item__name {
  max-width: 95ch;
}
#prior-litigation .doc-item__action {
  justify-self: start;
  margin-left: var(--sp-4);
}
.doc-item__date {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--slate);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.doc-item__date strong {
  display: block;
  color: var(--cabernet);
  font-weight: 700;
}
.doc-item__name {
  color: var(--navy);
  font-weight: 500;
}
.doc-item__name strong { color: var(--navy); font-weight: 600; }
.doc-item__name .meta {
  display: block;
  font-size: 0.82rem;
  color: var(--slate-light);
  font-weight: 400;
  margin-top: 2px;
  font-style: italic;
}
.doc-item__action {
  color: var(--cabernet);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: calc(var(--sp-2) + 1px) var(--sp-3) calc(var(--sp-2) - 1px);
  padding-left: calc(var(--sp-3) + 4px);
  border: 1px solid var(--cabernet);
  border-radius: var(--radius-sm);
  transition: background 250ms ease, color 250ms ease;
}
.doc-item__action:hover {
  background: var(--cabernet);
  color: var(--parchment);
}
.doc-item__action svg { width: 14px; height: 14px; margin-left: 0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* The "Watch" (local .mp4) and "Watch on YouTube" buttons read tighter
   between text and arrow than the PDF/ODT buttons because their label
   has no trailing punctuation. Push the arrow further right on these
   two so the gap reads as deliberate spacing rather than a cramped tuck. */
.doc-item__action[href$=".mp4"] svg,
.doc-item__action[href*="youtu.be"] svg {
  margin-left: 4px;
}
/* PDF action buttons get +2px of width vs the ODT button, AND their contents
   sit 2px further right than ODT's. Implementation: shift the 2px of extra
   padding to the LEFT side (vs the base rule's symmetric var(--sp-3)). */
.doc-item__action[href$=".pdf"] {
  padding-left: calc(var(--sp-3) + 6px);
}
/* ODT button is 1px narrower than the base rule (contents stay put — the
   1px comes off the right padding, not the left). */
.doc-item__action[href$=".odt"] {
  padding-right: calc(var(--sp-3) - 1px);
}
/* Only the "PDF" text glyphs (wrapped in a span on PDF action buttons) shift
   1px visually left. The svg arrow's box position is unchanged because
   transform is paint-only — flex layout ignores it. */
.doc-item__action__text {
  transform: translateX(-1px);
}
.doc-item--featured {
  background-image: linear-gradient(90deg, rgba(196, 163, 90, 0.24), rgba(196, 163, 90, 0.06) 50%, transparent);
  /* Backing left edge sits 75% of the way across the card's left gutter
     (sp-6 = 2rem total gutter; 25% remaining = sp-2 = 0.5rem of extension into
     the gutter). Right side extends sp-4 past the content edge. Padding
     compensates on both sides so the grid columns don't shift. */
  margin: 0 calc(-1 * var(--sp-4)) 0 calc(-1 * var(--sp-2));
  padding-left: var(--sp-2);
  padding-right: var(--sp-4);
  border-radius: var(--radius-sm);
  /* Suppress the box's own dashed border (it would extend with the box).
     The dashed separator is redrawn via ::after, inset to align with dates. */
  border-bottom-color: transparent;
  position: relative;
}
.doc-item--featured::after {
  content: '';
  position: absolute;
  /* Left inset = the leftward extension (sp-2); right inset = the rightward
     extension (sp-4). Keeps the dashes aligned with date and content edges. */
  left: var(--sp-2);
  right: var(--sp-4);
  bottom: -1px;
  border-top: 1px dashed var(--hairline-strong);
  pointer-events: none;
}
.doc-item--featured:last-child::after {
  display: none;
}
.doc-item--featured .doc-item__name { color: var(--navy); font-weight: 600; }

/* Spotlight: a single, visually loudest emphasis for "the heart of the petition" */
.doc-item.doc-item--spotlight {
  background-image: linear-gradient(90deg, rgba(122, 25, 49, 0.18), rgba(122, 25, 49, 0.06) 50%, transparent);
  /* Same geometry as --featured: backing extends sp-2 left (into 25% of the
     card's left gutter) and sp-4 right past the content edge. */
  margin-right: calc(-1 * var(--sp-4));
  margin-left: calc(-1 * var(--sp-2));
  padding-right: var(--sp-4);
  padding-left: var(--sp-2);
  border-radius: var(--radius-sm);
  /* Suppress the box's own dashed border (would extend with the box).
     Redraw via ::after, inset on both sides to align with date and content edges. */
  border-bottom-color: transparent;
  position: relative;
}
.doc-item.doc-item--spotlight::after {
  content: '';
  position: absolute;
  left: var(--sp-2);
  right: var(--sp-4);
  bottom: -1px;
  border-top: 1px dashed var(--hairline-strong);
  pointer-events: none;
}
.doc-item.doc-item--spotlight:last-child::after {
  display: none;
}
.doc-item.doc-item--spotlight .doc-item__name,
.doc-item.doc-item--spotlight .doc-item__name strong {
  color: var(--cabernet);
  font-weight: 700;
}
.doc-item.doc-item--spotlight .doc-item__name .meta {
  color: var(--cabernet);
  opacity: 0.78;
  font-style: italic;
}

/* Green: forward-looking filings (petition, amicus draft) — pairs with --featured */
.doc-item.doc-item--green {
  background-image: linear-gradient(90deg, rgba(61, 103, 71, 0.20), rgba(61, 103, 71, 0.05) 50%, transparent);
}
.doc-item.doc-item--green .doc-item__name,
.doc-item.doc-item--green .doc-item__name strong {
  color: var(--date-green);
  font-weight: 700;
}
/* The base .meta rule sets color: var(--slate-light) (#76819a), which has a
   subtle blue cast (B 154 vs R 118) — that's why the .meta inside --blue
   reads as "blue" even though no blue override exists. To get the same
   "tone-match" inside --green, override with --date-green-light, which is
   the same lightness/saturation as --slate-light but hue-rotated into the
   green family. */
.doc-item.doc-item--green .doc-item__name .meta {
  color: var(--date-green-light);
}

/* Blue: the lead filing — pairs with --featured */
.doc-item.doc-item--blue {
  background-image: linear-gradient(90deg, rgba(34, 75, 138, 0.215), rgba(34, 75, 138, 0.058) 50%, transparent);
}
.doc-item.doc-item--blue .doc-item__name,
.doc-item.doc-item--blue .doc-item__name strong {
  color: var(--navy);
  font-weight: 700;
}

/* Court rulings (orders, opinions): cabernet titles regardless of section */
.doc-item.doc-item--ruling .doc-item__name,
.doc-item.doc-item--ruling .doc-item__name strong { color: var(--cabernet); }

/* Hierarchical filing tree — single trunk per parent group, with branches at each child */
.doc-item.doc-item--child,
.doc-item.doc-item--child-2,
.doc-item.doc-item--child-3 {
  position: relative;
  margin-left: var(--sp-4);
}
.doc-item.doc-item--child { padding-left: var(--sp-6); }
.doc-item.doc-item--child-2 { padding-left: 5rem; }
.doc-item.doc-item--child-3 { padding-left: var(--sp-10); }

/* Vertical trunk: full height by default (continues to next sibling) */
.doc-item.doc-item--child::before,
.doc-item.doc-item--child-2::before,
.doc-item.doc-item--child-3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hairline);
}
/* Horizontal branch from trunk to item content */
.doc-item.doc-item--child::after,
.doc-item.doc-item--child-2::after,
.doc-item.doc-item--child-3::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  background: var(--hairline);
}
.doc-item.doc-item--child::after { width: var(--sp-6); }
.doc-item.doc-item--child-2::after { width: 5rem; }
.doc-item.doc-item--child-3::after { width: var(--sp-10); }

/* Extended branch: reaches across the (empty) date column to meet the text */
.doc-item.doc-item--child.doc-item--child-extended::after {
  width: calc(var(--sp-6) + 110px + var(--sp-4));
}

/* Last child of a group: trunk stops at the branch (forms an L-corner) */
.doc-item.doc-item--child:not(:has(+ .doc-item--child)):not(:has(+ .doc-item--child-2)):not(:has(+ .doc-item--child-3))::before,
.doc-item.doc-item--child-2:not(:has(+ .doc-item--child)):not(:has(+ .doc-item--child-2)):not(:has(+ .doc-item--child-3))::before,
.doc-item.doc-item--child-3:not(:has(+ .doc-item--child)):not(:has(+ .doc-item--child-2)):not(:has(+ .doc-item--child-3))::before {
  bottom: 50%;
}

@media (max-width: 720px) {
  .doc-item { grid-template-columns: 1fr; gap: var(--sp-2); }
  .doc-item__action { justify-self: start; }
  .doc-item.doc-item--child { margin-left: var(--sp-3); padding-left: var(--sp-3); }
  .doc-item.doc-item--child-2 { margin-left: var(--sp-3); padding-left: 2.5rem; }
  .doc-item.doc-item--child-3 { margin-left: var(--sp-3); padding-left: var(--sp-8); }
  .doc-item.doc-item--child::after { width: var(--sp-3); }
  .doc-item.doc-item--child-2::after { width: 2.5rem; }
  .doc-item.doc-item--child-3::after { width: var(--sp-8); }
}

/* --------------------------------------------------------------------------
   15. AMICUS PATHS (3-option call to action)
   -------------------------------------------------------------------------- */
.path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin: var(--sp-7) 0;
}
@media (max-width: 1024px) { .path-grid { grid-template-columns: 1fr; } }
.path {
  background: var(--ivory);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
  /* Layer pre-promotion — same trick as .card and .issue-card. Without this,
     the :hover translateY(-3px) gets a compositing layer allocated mid-animation,
     and multi-line text inside (.path__title wraps, .path__body paragraphs,
     .path__list bullets) re-rasterizes against fresh subpixel coordinates —
     visible as a 1px shift on lines below the first. Pre-promoting at parse
     time locks the subpixel grid so every line stays anchored on hover. */
  will-change: transform;
}
.path:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px var(--shadow-lg);
}
.path__num {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-5);
  font-family: var(--serif);
  font-size: 5.5rem;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.55;
  line-height: 1;
  font-style: italic;
  transition: color 250ms ease;
}
.path:hover .path__num { color: var(--navy); }
.path__icon {
  width: 56px; height: 56px;
  color: var(--cabernet);
  margin-bottom: var(--sp-4);
  transition: color 250ms ease;
}
.path:hover .path__icon { color: var(--gold); }
.path__list li::before { transition: color 250ms ease; }
.path:hover .path__list li::before { color: var(--cabernet); }
.path__title { transition: color 250ms ease; }
.path:hover .path__title { color: var(--cabernet); }
.card--logistics-hover h4 {
  transition: color 250ms ease, border-bottom-color 250ms ease;
  border-bottom-color: var(--gold-dark) !important;
}
.card--logistics-hover:hover .path__list li::before { color: var(--cabernet); }
.card--logistics-hover:hover h4 {
  color: var(--gold-dark) !important;
  border-bottom-color: var(--cabernet) !important;
}
.card--eyebrow-red-hover .eyebrow { transition: color 250ms ease; }
.card--eyebrow-red-hover:hover .eyebrow { color: var(--cabernet); }
.path__title {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: var(--sp-4);
  font-weight: 600;
  text-wrap: balance;
}
.path__body {
  color: var(--slate);
  margin-bottom: var(--sp-4);
  font-size: 0.96rem;
  line-height: 1.6;
  text-wrap: balance;
}
.path__list {
  list-style: none;
  margin-bottom: var(--sp-5);
}
.path > .btn { margin-top: auto; }
.path__list li {
  position: relative;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  font-size: 0.92rem;
  color: var(--slate);
  line-height: 1.5;
  text-wrap: balance;
  break-inside: avoid;
}
.path__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: calc(var(--sp-2) - 1px);
  color: var(--gold-dark);
  font-size: 1.4em;
  font-weight: 900;
  line-height: 1;
}
.path__list--loose li { padding-top: calc(var(--sp-3) * 0.81); padding-bottom: calc(var(--sp-3) * 0.81); }
.path__list--loose li::before { top: calc(var(--sp-3) * 0.81 - 1px); }
/* In the "Arguments No Court Has Ever Addressed" section on record.html and
   throughout the amicus page, the gold arrow glyph reads a hair high relative
   to the bolded lead-in text of each bullet. Half-pixel down restores the
   optical baseline alignment without disturbing other path__list usages
   (e.g. the Primary Sources list further up record.html, or the loose-variant
   list in amicus.html's "Scope of Your Commitment" card — which keeps the
   native .path__list--loose offset). */
#arguments-not-addressed .path__list li::before,
body.page-amicus .path__list:not(.path__list--loose) li::before {
  top: calc(var(--sp-2) - 0.5px);
}

/* --------------------------------------------------------------------------
   16. RECORD-STRAIGHTENING SECTION (about page)
   -------------------------------------------------------------------------- */
.record-section {
  background: var(--parchment-dark);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
  margin: var(--sp-7) 0;
  border-left: 4px solid var(--cabernet);
}
.record-section__title {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: var(--sp-4);
  font-weight: 600;
  text-wrap: balance;
}
.record-point {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.record-point:last-child { border-bottom: 0; }
.record-point__q {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--cabernet);
  margin-bottom: var(--sp-2);
  font-weight: 600;
}
.record-point__a {
  color: var(--charcoal);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   17. CONTACT BLOCK
   -------------------------------------------------------------------------- */
.contact-block {
  background: var(--navy);
  color: var(--parchment);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
  border-top: 4px solid var(--gold);
}
.contact-block h3 { color: var(--parchment); margin-bottom: var(--sp-5); }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-item {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid rgba(196, 163, 90, 0.55);
}
.contact-item__label {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  word-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-2);
  font-weight: 600;
}
.contact-item__value {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--parchment);
  line-height: 1.45;
  font-weight: 600;
}
.contact-item__value a { color: var(--parchment); text-decoration: none; transition: color 250ms ease; }
.contact-item__value a:hover { color: var(--gold-light); }

/* --------------------------------------------------------------------------
   18. BREADCRUMB / PAGE HEADER
   -------------------------------------------------------------------------- */
.page-head {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--parchment);
  padding: var(--sp-9) 0;
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 30%, rgba(196, 163, 90, 0.08), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(122, 45, 58, 0.18), transparent 50%);
}
.page-head::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.page-head__inner { position: relative; z-index: 1; }
.page-head__eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  word-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: var(--sp-4);
}
.page-head__title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  color: var(--parchment);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: var(--sp-4);
}
.page-head__title em { font-style: italic; color: var(--gold-light); }
.page-head__lede {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: rgba(250, 248, 243, 0.98);
  max-width: 760px;
  line-height: 1.55;
  font-weight: 400;
}
.page-head__reflex {
  margin: calc(var(--sp-5) + 9px) 0 0;
  padding: calc(var(--sp-4) + 19px) 0 0;
  max-width: 710px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  border-top: 1.5px solid rgba(196, 163, 90, 0.6);
}
.page-head__reflex-item { margin: 0; }
.page-head__reflex-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: var(--sp-1);
}
.page-head__reflex-value {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--parchment);
  margin: 0;
  line-height: 1.45;
}
.page-head__reflex-value em { color: var(--gold-light); font-style: italic; }
@media (max-width: 600px) {
  .page-head__reflex {
    grid-template-columns: 1fr;
    /* Grid gap = vertical space ABOVE "Relief Requested" when the items
       stack. Doubled from sp-3 (12px) to sp-5 (24px) for visual breathing
       room between the two sections in single-column mode. */
    gap: var(--sp-5);
  }
}

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--navy-dark);
  background-image:
    radial-gradient(ellipse 70% 45% at 15% 0%, rgba(196, 163, 90, 0.08), transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(122, 45, 58, 0.06), transparent 70%);
  color: rgba(250, 248, 243, 0.92);
  /* Top padding slightly tightened from sp-9 (96px) to sp-9 - sp-3 (84px) per
     user iteration — gives the footer a hair less breathing room above the
     brand text so it feels less stranded from the last content section. */
  padding: calc(var(--sp-9) - var(--sp-3)) 0 var(--sp-5);
  border-top: 3px solid var(--gold);
  overflow: hidden;
}
/* Centered diamond ornament breaking the top gold border */
.site-footer::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--navy-dark), 0 0 0 5px rgba(196, 163, 90, 0.45);
  z-index: 2;
}
/* Faint horizontal hairline just below the top gold border */
.site-footer::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(196, 163, 90, 0.22) 20%,
    rgba(196, 163, 90, 0.22) 80%,
    transparent 100%);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-7);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
  position: relative;
  z-index: 1;
}
@media (max-width: 960px) { .site-footer__inner { grid-template-columns: 1fr; gap: var(--sp-6); } }
@media (max-width: 960px) { .site-footer__inner > div:nth-child(2) { padding-top: var(--sp-4); } }
.site-footer__brand {
  font-family: var(--serif);
  font-size: 2.15rem;
  font-weight: 600;
  /* -7px pulls the brand (and the .site-footer__tag below it, which is a
     normal-flow sibling) up 7px relative to the other grid columns —
     aligns the visual top of the case caption with the optical center of
     the smaller "The Case" / "Amicus Action" column titles in the adjacent
     columns. */
  margin-top: -7px;
  margin-bottom: var(--sp-3);
  letter-spacing: -0.005em;
  color: var(--gold-light);
  width: fit-content;
}
.site-footer__brand em {
  font-style: italic;
  color: var(--parchment);
}
.site-footer__tag {
  font-style: italic;
  color: rgba(250, 248, 243, 0.85);
  font-size: 1.05rem;
  line-height: 1.7;
  font-family: var(--serif);
  font-weight: 600;
  max-width: calc(42ch + 100px);
}
.site-footer__tag strong {
  font-style: normal;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.01em;
}
.site-footer .footer__col-title {
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  word-spacing: 0.10em;
  text-transform: uppercase;
  font-family: var(--sans);
  font-weight: 600;
  margin-bottom: var(--sp-4);
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.site-footer .footer__col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: var(--sp-2); }
.site-footer ul a {
  color: rgba(250, 248, 243, 0.85);
  font-size: 0.93rem;
  transition: color 250ms ease;
  position: relative;
  display: inline-block;
  padding-bottom: 1px;
}
.site-footer ul a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-footer ul a:hover { color: var(--gold-light); }
.site-footer ul a:hover::after { width: 100%; }
.site-footer__bottom {
  max-width: var(--container);
  margin: var(--sp-7) auto 0;
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
  font-size: 0.98rem;
  color: var(--gold);
  text-align: center;
  font-style: italic;
  font-family: var(--serif);
  position: relative;
}
/* Gradient divider with center gap for an ornament */
.site-footer__bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * var(--sp-5));
  max-width: 720px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(196, 163, 90, 0.22) 18%,
    rgba(196, 163, 90, 0.22) 44%,
    transparent 50%,
    rgba(196, 163, 90, 0.22) 56%,
    rgba(196, 163, 90, 0.22) 82%,
    transparent 100%);
}
/* Centered ornament glyph sitting on the divider gap */
.site-footer__bottom::after {
  content: '◆';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 0.6rem;
  color: var(--gold);
  background: var(--navy-dark);
  padding: 0 8px;
  line-height: 1;
  font-style: normal;
  letter-spacing: 0;
  opacity: 0.9;
}
.site-footer__bottom em {
  color: inherit;
  font-style: italic;
}
.site-footer__bottom a {
  color: var(--gold-light);
}
.site-footer__bottom a:hover {
  color: var(--ivory);
}

/* Optional epigraph block at the top of the footer */
.site-footer__epigraph {
  max-width: 760px;
  margin: 0 auto var(--sp-8);
  padding: 0 var(--sp-5) var(--sp-7);
  text-align: center;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid rgba(196, 163, 90, 0.16);
}
.site-footer__quote-mark {
  width: 28px;
  height: 28px;
  color: var(--gold);
  opacity: 0.6;
  margin: 0 auto var(--sp-3);
  display: block;
}
.site-footer__quote {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.55;
  color: rgba(250, 248, 243, 0.92);
  font-style: italic;
  margin: 0 auto var(--sp-3);
  max-width: 640px;
  text-wrap: balance;
}
.site-footer__cite {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  font-family: var(--sans);
  text-transform: uppercase;
}
.site-footer__cite em {
  color: var(--gold-light);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--serif);
  font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   20. UTILITIES
   -------------------------------------------------------------------------- */
.center-text { text-align: center; }
.italic { font-style: italic; }
.nowrap { white-space: nowrap; }
/* Used on <a> elements wrapped around card content (the entire card is one big
   link). Removes the underline + lets the card's color rules govern, not the
   anchor's default. Replaces a frequently-repeated inline style="text-decoration: none; color: inherit;". */
.link-unstyled { text-decoration: none; color: inherit; }
/* Opt-in headline balancing — applied per element to match the original inline
   style="text-wrap: balance;" pattern. NOT applied globally to h1/h2/h3 because
   that would change wrapping on elements whose original inline style didn't
   include it. */
.text-balance { text-wrap: balance; }
/* On very narrow viewports (≤360px — iPhone SE 1st gen, smaller foldables
   in their narrow state), allow `.nowrap` content to wrap normally so long
   phrases don't overflow horizontally. Word-by-word wrapping at this size
   is the graceful degradation — clean half-by-half breaks (the whole point
   of `.nowrap`) are only achievable when the viewport can fit each line in
   one shot. Empirical: the announcement bar's "On Certiorari to the
   Colorado Court of Appeals" half measures 312.53px at full-mode font
   (1.05rem) — content area equals exactly 312px at a 360 viewport, so 360
   is the precise threshold where overflow starts. Modern phones (iPhone 12
   mini 360, iPhone 12+ 390, Pixel 7 412) all keep the clean wrap. */
@media (max-width: 360px) {
  .nowrap { white-space: normal; }
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
  margin: var(--sp-7) 0;
  border: 0;
}

/* Anchor-jump landing offset. The sticky `.site-header` is in COMPACT mode
   whenever the user has scrolled past 50px (see "5a. HEADER — COMPACT MODE"),
   so anchor-jump targets need to clear the COMPACT bar's height EXACTLY —
   no buffer. The compact bar has TWO sizes depending on whether the eyebrow
   strip fits on one line:
     • Desktop (≥880px, eyebrow single-line):  ~86.86px tall → 5.5rem (88px)
     • Mobile  (<880px, eyebrow wraps to 2):   ~127.25px tall → 8rem (128px)
   Each value is rounded up to the nearest clean rem, landing ~1px sub-pixel
   over the bar bottom — visually flush with no perceptible gap. Rem-based
   so it respects user font-scaling. The 880px breakpoint matches the same
   eyebrow-wrap threshold used by the compact-mode padding-top rule in
   section 5a. */
[id] { scroll-margin-top: 85px; }  /* Compact header (86.86px) minus 3px — lands anchor target just over the gold bottom border for a flush, gapless landing */

@media (max-width: 880px) {
  [id] { scroll-margin-top: 125px; }  /* Mobile compact header (127.25px) minus 3px — same flush landing */
}

/* Five anchor targets with "imperfect" jumpto points that need their
   hand-picked offsets ADDED to the universal compact-bar clearance value.
   Formula: (universal pre-cut: 92/136) + element_offset - (5px + 3px cuts).
   Each element below carries an inline visual offset (padding, layout offset)
   that should compose ON TOP of the universal bar-clearing margin — giving
   a larger visual gap below the bar than regular anchor jumps. */

/* Three eyebrow anchors in record.html (each keeps its inline padding-top: 55). */
#incident-detail,
#numbers-detail,
#narrative-detail {
  scroll-margin-top: 131.5px;  /* halfway between 131 and 132 per user iteration */
}
@media (max-width: 880px) {
  #incident-detail,
  #numbers-detail,
  #narrative-detail {
    scroll-margin-top: 175.5px;  /* halfway between 175 and 176 */
  }
}

/* arguments.html "Part II · The Factual Conclusions" — the .ornament div ID. */
#part-2 {
  scroll-margin-top: 213px;  /* 92 + 128 - 5 - 3 + 1 (1px more per user iteration) */
}
@media (max-width: 880px) {
  #part-2 {
    scroll-margin-top: 257px;  /* 136 + 128 - 5 - 3 + 1 */
  }
}

/* documents.html "Plaintiff's Body Camera · 12 Minutes" — the #video wrapper. */
#video {
  scroll-margin-top: 174px;  /* 92 + 90 - 5 - 3 */
}
@media (max-width: 880px) {
  #video {
    scroll-margin-top: 218px;  /* 136 + 90 - 5 - 3 */
  }
}

/* Roadmap-card scroll target. The bottom-right "Roadmap" button (scroll-top
   class, despite the name) jumps here. Sits 37px below the compact bar —
   the same 37px (calc(var(--sp-5) + 0.5rem + 5px)) that .tldr-toggle uses
   as its margin-bottom to the toc-card. Net effect: the visible gap between
   the bar's bottom edge and the card's top edge ALWAYS equals the visible
   gap between the (collapsed or expanded) tldr and the card — visually
   consistent rhythm regardless of tldr state. */
#roadmap-card {
  scroll-margin-top: 123px;  /* 87 + 37 - 1 (1px tighter per user iteration) */
}
@media (max-width: 880px) {
  #roadmap-card {
    scroll-margin-top: 163px;  /* 127 + 37 - 1 */
  }
}

/* Issues.html — Section II (Prejudice) sub-section anchors land 45px LOWER
   than the universal default. Wider gap below the compact bar so each
   sub-section heading doesn't read as "pressed against" the bar's bottom edge.
   Arguments.html — the two consequence-section h3 anchors match this
   same offset so the gold heading sits comfortably below the sticky bar. */
#prejudice-a,
#prejudice-b,
#prejudice-c,
#prejudice-d,
#prejudice-e,
#financial-ruin-h3,
#access-justice-h3 {
  scroll-margin-top: 130px;  /* 85 + 45 */
}
@media (max-width: 880px) {
  #prejudice-a,
  #prejudice-b,
  #prejudice-c,
  #prejudice-d,
  #prejudice-e,
  #financial-ruin-h3,
  #access-justice-h3 {
    scroll-margin-top: 170px;  /* 125 + 45 */
  }
}

/* Sub-heading deep-link landings (about.html author's-note + record.html
   chronology / narrative sub-sections) land 37px LOWER than the universal
   default. Slightly tighter than the issues.html offset above because these
   are h3/h4-level sub-headings inside denser narrative copy. */
#zero-engagement,
#merits-vs-characterization,
#mischaracterization-compounds,
#not-idiosyncratic,
#procedural-question,
#november-25-incident,
#full-chronology,
#primary-sources,
#but-he-consented,
#actual-abusive-litigant,
#rational-arguments,
#cookie-cutter-pattern {
  scroll-margin-top: 122px;  /* 85 + 37 */
}
@media (max-width: 880px) {
  #zero-engagement,
  #merits-vs-characterization,
  #mischaracterization-compounds,
  #not-idiosyncratic,
  #procedural-question,
  #november-25-incident,
  #full-chronology,
  #primary-sources,
  #but-he-consented,
  #actual-abusive-litigant,
  #rational-arguments,
  #cookie-cutter-pattern {
    scroll-margin-top: 162px;  /* 125 + 37 */
  }
}

/* Balanced variant of path__list — used for the preserved-arguments bullets on record.html */
.path__list--balanced li { text-wrap: balance; padding-left: var(--sp-6); }
.path__list--balanced li::before {
  content: '→';
  color: var(--cabernet);
  font-size: 1.4em;
  font-weight: 900;
  line-height: 1;
  top: calc(var(--sp-2) - 1px);
}

/* Record page — darker lede text under each section header */
.page-record .lede { color: var(--text); font-weight: 500; }
.page-record .section--dark .lede { color: rgba(250, 248, 243, 0.92); font-weight: 400; }

/* About page — darker lede text under each section header */
.page-about .lede { color: var(--text); font-weight: 500; }
.page-about .section--dark .lede { color: rgba(250, 248, 243, 0.92); font-weight: 400; }

/* Home page — darker lede text + darker case-caption sub-lines */
.page-home .lede { color: var(--text); }
.page-home .section--dark .lede { color: rgba(250, 248, 243, 0.92); }
.page-home .caption__name,
.page-home .caption__address,
.page-home .caption__role,
.page-home .caption__cases { color: var(--text); }
.page-home .caption__role,
.page-home .caption__address,
.page-home .caption__cases { font-size: 1.15rem; }
.page-home .caption__role { font-size: 1.3rem; }
/* Split the shorthand so the column gap (the spacing between cases when
   they're side-by-side on a wide viewport — "hotdog mode") stays at sp-7,
   while the row gap (the spacing between cases when they wrap onto stacked
   rows on a narrow viewport — "hamburger mode") tightens to sp-5. Without
   the split, narrowing the viewport stacks the cases with an oversized
   vertical gap; the split keeps wide-mode aesthetics intact and just
   makes the stacked layout look intentional. */
.page-home .caption__cases { row-gap: var(--sp-5); column-gap: var(--sp-7); }
.page-home .caption__address { margin-bottom: var(--sp-6); }

/* Amicus page — darker lede text under each section header */
.page-amicus .lede { color: var(--text); font-weight: 500; }
.page-amicus .section--dark .lede { color: rgba(250, 248, 243, 0.92); font-weight: 400; }

/* --------------------------------------------------------------------------
   NUMBERS-IN-CONTEXT cards (record.html): hover the card to brighten the
   cabernet-colored number / eyebrow heading to gold-light yellow.
   -------------------------------------------------------------------------- */
#numbers-in-context .card div[style*="cabernet"],
#numbers-in-context .card h5[style*="cabernet"] {
  transition: color 250ms ease;
}
#numbers-in-context .card:hover div[style*="cabernet"],
#numbers-in-context .card:hover h5[style*="cabernet"] {
  color: var(--gold-light) !important;
}

/* --------------------------------------------------------------------------
   CF REF LINK — `CF at <page>` references that page-jump into the master
   case file PDF. Subtle at rest, brightens on hover.
   -------------------------------------------------------------------------- */
/* Record-reference links (.cf-ref → master case file pages, .opinion-ref →
   COA opinion paragraphs, .crcp-ref → C.R.C.P. 56 PDF). No underline or
   border at rest or on hover — clickability is signaled via cursor + color
   shift (cabernet → gold-light) only. The hover-color override block below
   handles yellow-at-rest contexts (hero lede, page-head titles, dark-section
   <strong> wrappers) where the link starts gold and needs to transition to
   ivory/white on hover for the color change to register visibly. */
.cf-ref,
.opinion-ref,
.crcp-ref {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 250ms ease, text-shadow 250ms ease;
}
.cf-ref:hover,
.cf-ref:focus-visible,
.opinion-ref:hover,
.opinion-ref:focus-visible,
.crcp-ref:hover,
.crcp-ref:focus-visible {
  color: var(--gold-light);
  outline: none;
}
/* Yellow-at-rest contexts: hover to ivory/white instead of staying yellow */
.hero__lede .cf-ref:hover,
.hero__lede .cf-ref:focus-visible,
.countdown__title .cf-ref:hover,
.countdown__title .cf-ref:focus-visible,
.page-head__title .cf-ref:hover,
.page-head__title .cf-ref:focus-visible,
.hero__lede .opinion-ref:hover,
.hero__lede .opinion-ref:focus-visible,
.countdown__title .opinion-ref:hover,
.countdown__title .opinion-ref:focus-visible,
.page-head__title .opinion-ref:hover,
.page-head__title .opinion-ref:focus-visible,
.hero__lede .crcp-ref:hover,
.hero__lede .crcp-ref:focus-visible,
.countdown__title .crcp-ref:hover,
.countdown__title .crcp-ref:focus-visible,
.page-head__title .crcp-ref:hover,
.page-head__title .crcp-ref:focus-visible,
/* Dark-section <strong> wrappers can paint the crcp-ref gold at rest; hover to ivory so the transition is visible */
.section--dark strong > .crcp-ref:hover,
.section--dark strong > .crcp-ref:focus-visible {
  color: var(--ivory) !important;
}

/* --------------------------------------------------------------------------
   CASE-LAW LINK — sitewide; case names link to CaseMine search
   Neutral at rest (no underline / no color shift); subtle hover hint only
   -------------------------------------------------------------------------- */
.case-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 250ms ease, text-shadow 250ms ease;
}
.case-link em { transition: color 250ms ease, text-shadow 250ms ease; }
.case-link:hover,
.case-link:focus-visible {
  color: var(--gold-light);  outline: none;
}
.case-link:hover em,
.case-link:focus-visible em {
  color: var(--gold-light);
}
/* Variant: case-link that hovers to gold-light instead of cabernet-dark.
   Used where the surrounding palette favors a gold accent on hover. */
/* Used on case-link variants whose <em> children sit inside an ancestor with
   its own em-color rule (e.g. `.lede em { color: var(--cabernet); }`). The
   ancestor rule has higher specificity than the default `.case-link:hover em`,
   so without !important the em color wouldn't shift on hover. This modifier
   forces gold-light to win — the name reflects what it actually does (force
   the gold-light color, beating competing em rules) rather than the legacy
   "adds a hover glow" framing from before Round 2 removed those glows. */
.case-link--force-gold:hover em,
.case-link--force-gold:focus-visible em {
  color: var(--gold-light) !important;
}

/* Collateral case-number links (BB II / III / IV) appearing in dark-bg
   impact-stat boxes on index.html and arguments.html. Static: gold-light bold,
   no underline. Hover: turns crisp white for clear interactive affordance. */
.collateral-case-link {
  color: var(--gold-light);
  font-weight: 700;
  text-decoration: none;
  transition: color 250ms ease;
}
.collateral-case-link:hover,
.collateral-case-link:focus-visible {
  color: var(--ivory);
  outline: none;
}

/* (Amada-specific yellow-hover rule retired — Amada links now use the color-aware
   default rules below, just like every other case-link.) */

/* Color-aware hover override: when a case-link sits inside a red/cabernet container
   (and thus inherits a red rest color), its hover should resolve to gold-light (yellow)
   instead of the default cabernet — preserving visible contrast.
   The default rule (red on hover) still applies for blue/dark contexts. */
.emphasis-strong .case-link:hover,
.emphasis-strong .case-link:focus-visible,
.accent-red .case-link:hover,
.accent-red .case-link:focus-visible,
[style*="cabernet"] .case-link:hover,
[style*="cabernet"] .case-link:focus-visible {
  color: var(--gold-light) !important;
}
.emphasis-strong .case-link:hover em,
.emphasis-strong .case-link:focus-visible em,
.accent-red .case-link:hover em,
.accent-red .case-link:focus-visible em,
[style*="cabernet"] .case-link:hover em,
[style*="cabernet"] .case-link:focus-visible em {
  color: var(--gold-light) !important;
}

/* Contexts where em is automatically cabernet via CSS class rules:
   case-link em inside .argument__title, .lede, .toc-accent, etc. — hover to gold-light. */
.argument__title .case-link:hover,
.argument__title .case-link:focus-visible,
.argument__title .case-link:hover em,
.argument__title .case-link:focus-visible em,
.lede .case-link:hover,
.lede .case-link:focus-visible,
.lede .case-link:hover em,
.lede .case-link:focus-visible em,
.toc-accent .case-link:hover,
.toc-accent .case-link:focus-visible,
.toc-accent .case-link:hover em,
.toc-accent .case-link:focus-visible em {
  color: var(--gold-light) !important;
}

/* "White text" contexts: case-links sitting on dark backgrounds (parchment-colored
   text) should also hover to gold-light (yellow). Covers the hero, page-head, footer,
   countdown, any .section--dark, and any inline parchment-colored container. */
.site-footer .case-link:hover,
.site-footer .case-link:focus-visible,
.hero .case-link:hover,
.hero .case-link:focus-visible,
.page-head .case-link:hover,
.page-head .case-link:focus-visible,
.countdown .case-link:hover,
.countdown .case-link:focus-visible,
[style*="parchment"] .case-link:hover,
[style*="parchment"] .case-link:focus-visible,
[style*="rgba(250, 248, 243"] .case-link:hover,
[style*="rgba(250, 248, 243"] .case-link:focus-visible,
[style*="rgba(250,248,243"] .case-link:hover,
[style*="rgba(250,248,243"] .case-link:focus-visible {
  color: var(--gold-light) !important;
}
.site-footer .case-link:hover em,
.site-footer .case-link:focus-visible em,
.hero .case-link:hover em,
.hero .case-link:focus-visible em,
.page-head .case-link:hover em,
.page-head .case-link:focus-visible em,
.countdown .case-link:hover em,
.countdown .case-link:focus-visible em,
[style*="parchment"] .case-link:hover em,
[style*="parchment"] .case-link:focus-visible em,
[style*="rgba(250, 248, 243"] .case-link:hover em,
[style*="rgba(250, 248, 243"] .case-link:focus-visible em,
[style*="rgba(250,248,243"] .case-link:hover em,
[style*="rgba(250,248,243"] .case-link:focus-visible em {
  color: var(--gold-light) !important;
}
.section--dark .case-link:hover,
.section--dark .case-link:focus-visible,
.callout .case-link:hover,
.callout .case-link:focus-visible {
  color: var(--gold-light);
}
/* Inherit-styled case-link variant: blends with surrounding text by default,
   transitions to gold-light on hover. Used on dark backgrounds where the
   regular cabernet hover would clash with the surrounding palette. */
.case-link--inherit { color: inherit !important; text-decoration: none; transition: color 250ms ease, text-shadow 250ms ease; }
.case-link--inherit em { color: inherit !important; transition: color 250ms ease, text-shadow 250ms ease; }
.case-link--inherit:hover,
.case-link--inherit:focus-visible,
.case-link--inherit:hover em,
.case-link--inherit:focus-visible em {
  color: var(--gold-light) !important;
}
/* Cert-issues case-link: rose-tinted by default (matches the dark-section
   surrounding tone), transitions to gold-light on hover. */
.case-link--rose { color: var(--cabernet-rose) !important; text-decoration: none; transition: color 250ms ease, text-shadow 250ms ease; }
.case-link--rose em { color: var(--cabernet-rose) !important; transition: color 250ms ease, text-shadow 250ms ease; }
.case-link--rose:hover,
.case-link--rose:focus-visible,
.case-link--rose:hover em,
.case-link--rose:focus-visible em {
  color: var(--gold-light) !important;
}
/* Yellow-at-rest contexts: when the case-link em is gold-light by default
   (.hero__lede em, .countdown__title em, .page-head__title em), the hover
   should transition to ivory/white instead of staying yellow. */
.hero__lede .case-link em { transition: color 250ms ease, text-shadow 250ms ease; }
.hero__lede .case-link:hover,
.hero__lede .case-link:focus-visible,
.hero__lede .case-link:hover em,
.hero__lede .case-link:focus-visible em,
.countdown__title .case-link:hover,
.countdown__title .case-link:focus-visible,
.countdown__title .case-link:hover em,
.countdown__title .case-link:focus-visible em,
.page-head__title .case-link:hover,
.page-head__title .case-link:focus-visible,
.page-head__title .case-link:hover em,
.page-head__title .case-link:focus-visible em {
  color: var(--ivory) !important;
}

/* --------------------------------------------------------------------------
   RECORD EXHIBIT LINK — small inline link used in compare-table cells
   -------------------------------------------------------------------------- */
.record-exhibit-link {
  color: var(--cabernet);
  font-weight: 600;
  font-size: 0.85rem;
  /* Standard solid underline (matches .the-record-link's 1px + 2px offset),
     replacing the prior dashed border-bottom treatment. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 250ms ease, text-decoration-color 250ms ease, text-shadow 250ms ease;
}
.record-exhibit-link:hover,
.record-exhibit-link:focus-visible {
  color: var(--gold-light);
  outline: none;
}

/* --------------------------------------------------------------------------
   COMPARISON TABLE — used on record.html for diametric distinctions
   -------------------------------------------------------------------------- */
.compare-table {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ivory);
  margin: var(--sp-6) 0;
}
.compare-table__row {
  display: grid;
  grid-template-columns: 0.7fr 1.5fr 1.6fr;
  border-bottom: 1px solid var(--hairline-strong);
}
.compare-table__row:last-child { border-bottom: 0; }
.compare-table__row--header {
  background: var(--navy);
  color: var(--parchment);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  word-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
}
.compare-table__cell {
  padding: var(--sp-5) var(--sp-6);
  border-right: 1px solid var(--hairline-strong);
  font-size: 0.98rem;
  line-height: 1.5;
  text-wrap: balance;
  min-width: 0;
}
.compare-table__cell:last-child { border-right: 0; }
.compare-table__cell--label {
  background: rgba(196, 163, 90, 0.13);
  font-family: var(--sans);
  font-weight: 700;
  color: var(--navy);
  font-size: 0.92rem;
}
.compare-table__cell--walmart {
  color: var(--cabernet);
  font-weight: 500;
}
.compare-table__cell--bestbuy {
  color: var(--text);
  font-weight: 600;
}
.compare-table__row--header .compare-table__cell--label,
.compare-table__row--header .compare-table__cell--walmart,
.compare-table__row--header .compare-table__cell--bestbuy {
  background: transparent;
  color: var(--gold-light);
  font-weight: 700;
}
@media (max-width: 720px) {
  .compare-table__row { grid-template-columns: 1fr; }
  .compare-table__cell {
    border-right: 0;
    border-bottom: 1px solid var(--hairline-strong);
  }
  .compare-table__cell:last-child { border-bottom: 0; }
  .compare-table__cell--label {
    background: var(--navy);
    color: var(--parchment);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    word-spacing: 0.10em;
    text-transform: uppercase;
  }
  .compare-table__row--header { display: none; }
}

/* --------------------------------------------------------------------------
   TIMELINE — used on record.html for the Walmart litigation chronology
   -------------------------------------------------------------------------- */
.timeline {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--hairline);
}
.timeline__entry {
  position: relative;
  padding-left: 44px;
  padding-bottom: var(--sp-6);
}
.timeline__entry:last-child { padding-bottom: 0; }
#walmart-timeline .timeline__entry { padding-bottom: var(--sp-7); }
#walmart-timeline .timeline__entry:last-child { padding-bottom: 0; }
.timeline__entry::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--ivory);
  box-shadow: 0 0 0 1px var(--gold-dark);
}
.timeline__case {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--cabernet);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.timeline__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: var(--sp-2);
  line-height: 1.35;
}
.timeline__meta {
  font-size: 0.92rem;
  color: var(--slate);
  margin-bottom: var(--sp-2);
  font-style: italic;
}
.timeline__body {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text);
}
.timeline__ignored {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(122, 25, 49, 0.06);
  border-left: 3px solid var(--cabernet);
  font-size: 0.92rem;
  color: var(--cabernet);
}
.timeline__ignored strong {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  word-spacing: 0.10em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--sp-1);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Emphasis utility (C5 — heavier-without-halo variant)
   Inter 900 (Black) is now loaded via the Google Fonts URL in every page's
   <head>, so font-weight: 900 actually renders at Black instead of falling
   back to Bold (700). The 0.6px text-shadow halo from the original design
   is intentionally omitted; the heavier weight delivers visual emphasis
   on its own.

   Other revert paths:
     - back to "shouty"      → font-weight: 900; text-shadow: 0 0 0.6px currentColor;
     - back to "just bold"   → font-weight: 700; text-shadow: none;
     - lighter (semibold)    → font-weight: 600; text-shadow: none;
   -------------------------------------------------------------------------- */
.emphasis-strong {
  font-weight: 900;
  text-shadow: none;
}
/* Serif-context variant: Cormorant Garamond only loads up to weight 700,
   so font-weight 900 falls back to 700 and looks too light without help.
   Use .emphasis-strong-halo for emphasized words inside serif paragraphs. */
.emphasis-strong-halo {
  font-weight: 900;
  text-shadow: 0 0 0.6px currentColor;
}

/* (Removed: the stale `scroll-margin-top: 0` reset that targeted :target +
   h1[id]/h2[id]/section[id]/etc. with specificity (0,1,1). It was added when
   the header was scrolling away with the page (defeated by overflow: clip on
   body, since fixed), and existed only to avoid phantom gaps. The header is
   now genuinely sticky, so anchor targets need to clear it. The `[id]` rule
   at the top of this file's compact-header section handles that — and this
   reset was OVERRIDING it because (0,1,1) outranks (0,1,0). Without this
   rule, every [id] gets the correct compact-header-clearing offset. */


/* Accent-red: the unified red color used for emphasis on dark navy backgrounds.
   To restyle every red emphasis word/phrase sitewide, change this one rule.
   !important is intentional — this is a utility class meant to override
   container-specific color rules (e.g. .hero__lede em). */
.accent-red {
  color: var(--cabernet-rose) !important;
}

/* Scoped override: in the hero lede, accent-red sits on the dark navy backdrop
   where the base #c45658 reads muted/dusty; lifting HSL value ~10% gives the
   emphasis phrases more luminosity without leaving the rose family. */
.hero__lede .accent-red {
  color: #da7779 !important;
}

/* Scoped override: in the "From the Record Itself" section, accent-red reads
   as a true red rather than the section-default pink-rose tone. */
#from-the-record .accent-red {
  color: var(--alert-red) !important;
}

/* The Record link — animated hover (color shift + transition).
   Two variants for light vs. dark backgrounds. */
.the-record-link {
  color: var(--cabernet);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 250ms ease, text-decoration-color 250ms ease;
}
.the-record-link:hover,
.the-record-link:focus-visible {
  color: var(--gold-light);
}
.the-record-link--dark {
  color: var(--gold-light);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 250ms ease, text-decoration-color 250ms ease;
}
/* Yellow variant for inline links on dark page-head backgrounds: gold-light
   by default → parchment (reads as white) on hover. Underline is inherited
   from the base .the-record-link rule (text-decoration: underline, 1px,
   2px offset) — kept here for affordance; the variant overrides color only. */
.the-record-link--yellow {
  color: var(--gold-light) !important;
}
.the-record-link--yellow:hover,
.the-record-link--yellow:focus-visible {
  color: var(--parchment) !important;
}
.the-record-link--dark:hover,
.the-record-link--dark:focus-visible {
  color: var(--ivory);
}

/* Scroll-to-top button — fixed bottom-right, fades in past ~400px scroll */
.scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 21px 10px 16px;
  background: var(--cabernet);
  color: var(--parchment);
  border: 1px solid var(--cabernet-dark);
  border-radius: 7px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 12px var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 250ms ease, transform 250ms ease, background 250ms ease;
}
.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top:hover { background: var(--gold); border-color: var(--gold-dark); color: var(--navy); }
.scroll-top svg { width: 16px; height: 16px; stroke-width: 2.5; position: relative; top: 1px; }
@media (max-width: 720px) {
  .scroll-top { bottom: 16px; right: 16px; padding: 7px 12px; font-size: 0.72rem; }
}

/* arguments.html — "Access to Justice" h3: force two lines on desktop 2-col
   layout, no effect when the grid stacks below 960 px (single column). */
@media (min-width: 961px) {
  #access-justice-h3 { max-width: 15em; }
}

/* --------------------------------------------------------------------------
   FLOATING SHARE RAIL  (built by main.js, mounted on every page)
   -------------------------------------------------------------------------- */
.share-rail {
  position: fixed;
  left: 24px;
  /* Two stable positions, switched by the `.site-header.is-scrolled ~` rule
     below. Header is sticky and non-disappearing, so we only need to nudge
     the rail up when the header shrinks — no scroll-tracking needed.
     152px (full header) + 24px gutter = 176. The 24px-above-rail matches
     the 24px-left-of-rail, so the corner inset reads as a deliberate
     square gutter. */
  top: 176px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: top 250ms ease;
  /* Horizontal padding is 0 — the 1px border plus button-centering inside the
     content area produces a 7px gap on each side (border 1 + (content 48 - btn 36)/2 = 7).
     Padding-bottom 6 + border 1 = 7px gap below the last button.
     Padding-top 15 sizes the collapsed pill to match the .cert-fab/.scroll-top
     button height (37.33px) — leave padding-bottom alone so the 7px hover gap stays. */
  padding: 15px 0 6px 0;
  background: var(--gold);
  border: 1px solid var(--hairline-strong);
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(15, 29, 58, 0.12);
  overflow: hidden;
  width: 50px;
}
/* When the header shrinks to compact mode, the rail rides up to maintain
   the 24px gutter below the now-shorter header. 88px (compact header) +
   24px = 112. Sibling selector reaches the rail because main.js appends it
   to <body> after <header>, so they're DOM siblings. The transition on
   `top` declared above animates the move at 250ms — matching the header's
   own shrink transition, so they move in lockstep. */
.site-header.is-scrolled ~ .share-rail {
  top: 112px;
}
.share-rail__buttons {
  display: flex;
  flex-direction: column;
  /* Horizontal centering for the 36px buttons inside the now-symmetric rail. */
  align-items: center;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.25s ease, margin-top 0.25s ease;
}
.share-rail:hover .share-rail__buttons {
  max-height: 200px;
  margin-top: 7px;
}
.share-rail__label {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  line-height: 0.957rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
  text-align: center;
  margin-bottom: 0;
  /* translateX trails so it applies BEFORE the scale (CSS applies right-to-left),
     so the 1px shift gets scaled by 0.686 → ~0.686px visible nudge right.
     scaleY 1.4135 makes visible glyphs ~21.64px (15.31 × 1.4135) — 0.5px taller than 1.381.
     translateY -3.75 leads so it applies AFTER scaleY — unscaled upward shift
     (0.25px above -3.5 to absorb the half of the new scaleY growth that would
     otherwise push the bottom edge down, keeping the glyph baseline anchored). */
  transform: translateY(-3.75px) scaleX(0.686) scaleY(1.4135) translateX(1px);
  /* Origin: center keeps the visible (transformed) text horizontally centered
     within the label box, which is itself centered by the rail's symmetric padding. */
  transform-origin: center;
}
.share-rail__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  text-decoration: none;
  padding: 0;
}
.share-rail__btn svg { width: 17px; height: 17px; display: block; }
.share-rail__btn--linkedin svg,
.share-rail__btn--x svg { fill: currentColor; }
.share-rail__btn--linkedin:hover { background: #0a66c2; color: #fff; }
.share-rail__btn--x:hover        { background: #000;     color: #fff; }
.share-rail__btn--email:hover    { background: var(--cabernet); color: var(--parchment); }
.share-rail__btn--copy:hover     { background: var(--parchment); color: var(--navy); }
/* Flash green on copy. #2d7a4f is HSL(150°,46%,33%) — same saturation+
   lightness as cabernet, just shifted to a forest-emerald hue, so it
   reads as a fourth jewel tone alongside navy/gold/cabernet rather than
   a foreign success-green pasted in. Parchment-colored icon keeps WCAG
   AA contrast easily. `transition: none` makes the green flash INSTANT
   on click (no fade-in delay between user action and visual ack); when
   .is-copied clears 1.8s later (main.js flashCopied), the base 0.25s
   transition is back in scope and the green fades out smoothly. */
.share-rail__btn.is-copied       { background: #2d7a4f; color: var(--parchment); border-color: #2d7a4f; transition: none; }
/* Hide below 1366px (the legacy 1366×768 laptop spec). At 1366 the rail
   has a 13px clear gap from the first column of body text; below that
   the rail would push into the container's content area. */
@media (max-width: 1365px) { .share-rail { display: none; } }

/* --------------------------------------------------------------------------
   HOME-PAGE HERO  ·  "Now Verifying" strip
   -------------------------------------------------------------------------- */
.hero__lede:has(+ .hero__verifying) { margin-bottom: calc(var(--sp-4) + 21px); }
.hero__verifying {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  max-width: calc(92% - 5px);
  margin: 0 0 calc(var(--sp-5) + 16px);
  padding-top: calc(var(--sp-4) + 21px);
  border-top: 1.5px solid rgba(196, 163, 90, 0.6);
}
.hero__verifying-icon {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 4px;
}
.hero__verifying p {
  font-family: var(--serif);
  font-size: 1.0rem;
  line-height: 1.55;
  color: rgba(250, 248, 243, 0.78);
  margin: 0;
  font-style: italic;
  font-weight: 500;
  text-wrap: balance;
}
.hero__verifying p strong {
  color: var(--ivory);
  font-weight: 600;
  font-style: normal;
}
.hero__verifying .the-record-link:hover,
.hero__verifying .the-record-link:focus-visible {
  color: var(--ivory) !important;
  text-shadow: none;
}

/* Cite-suggestion link (issues.html footer callout) */
.cite-suggest-link {
  color: var(--cabernet);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s ease;
}
.cite-suggest-link:hover,
.cite-suggest-link:focus-visible {
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   PART III — RECORD.HTML "LAWSUIT SCAMMER" SECTION
   Force gold-light (yellow) hover color on .the-record-link occurrences
   inside Part III, with synchronized underline transition.

   The base .the-record-link rule already declares
     `transition: color 250ms ease, text-decoration-color 250ms ease;`
   but doesn't set an explicit text-decoration-color — leaving it as the
   implicit `currentColor` keyword. CSS transitions can't smoothly
   interpolate between a keyword and an explicit color: the browser
   either snaps the underline instantly or skips the transition entirely
   depending on its currentColor-resolution heuristic. The result: text
   fades cabernet→gold-light over 250ms while the underline jumps without
   transitioning.

   Fix: explicitly pin text-decoration-color to a concrete color at BOTH
   endpoints (rest = cabernet, hover = gold-light). Both are real color
   values, so the existing 250ms transition correctly animates both the
   text color and underline color in lockstep.
   -------------------------------------------------------------------------- */
#libel-deconstructed a.the-record-link {
  text-decoration-color: var(--cabernet) !important;
}
/* Transitions don't inherit from parent. The .the-record-link <a> has
   `transition: color 250ms ease, text-decoration-color 250ms ease`, but
   the inner <em> has no transition of its own — so when the rules below
   hit `:hover em` with `color !important`, the em color snaps instead of
   fading. Declare an explicit color transition on the em so it animates
   over the same 250ms as the anchor's text-decoration-color underline. */
#libel-deconstructed a.the-record-link em {
  transition: color 250ms ease !important;
}
#libel-deconstructed a.the-record-link:hover,
#libel-deconstructed a.the-record-link:focus-visible,
#libel-deconstructed a.the-record-link:hover em,
#libel-deconstructed a.the-record-link:focus-visible em {
  color: var(--gold-light) !important;
  text-decoration-color: var(--gold-light) !important;
}

/* --------------------------------------------------------------------------
   PRINT STYLES
   Optimized for an amicus-brief audience: full URLs for citation, controlled
   page breaks for arguments and authorities, and serif-friendly typography.
   -------------------------------------------------------------------------- */
@media print {
  @page { margin: 0.75in; }

  /* Universal: hide site chrome on every page */
  .site-header, .site-footer, .nav-toggle, .countdown, .scroll-top,
  .cert-fab, .nav, .site-header__countdown, #banner-cd,
  .share-rail { display: none !important; }

  /* ------------------------------------------------------------------
     All rules below apply to every page EXCEPT body.page-cert-pool.
     The cert-pool memo is a print-ready document by design — its
     printed output should match its on-screen rendering exactly.
     ------------------------------------------------------------------ */

  /* Body is the only thing that paints — white paper. Everything inside is
     transparent so the body shows through, which keeps the printed page truly
     white regardless of theme classes. */
  body:not(.page-cert-pool) {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }

  /* Nuke ALL backgrounds and decorative colors on every element AND every
     pseudo-element. Two reasons this has to be a sledgehammer:
       1. Decorative pseudo-elements (e.g. .hero::before, .page-head::before)
          paint near-opaque navy gradients via background-image — and you can't
          reach them by restyling the host element's background. Without this
          rule, those gradients survive into print whenever the browser is set
          to "Background graphics on" (or in Safari, by default), making the
          forced-black text below unreadable on a dark navy overlay.
       2. Many themed elements (.impact-box, .doc-court__header, timeline
          blocks, etc.) have dark backgrounds and aren't worth enumerating
          one-by-one — transparent + body-white covers them all. */
  body:not(.page-cert-pool) *,
  body:not(.page-cert-pool) *::before,
  body:not(.page-cert-pool) *::after {
    background-color: transparent !important;
    background-image: none !important;
    color: black !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  /* ID-specificity overrides — these screen rules use #id selectors which beat
     our universal `body:not(.page-cert-pool) *` (specificity 0,1,1) even with
     !important. Match the (1,1,x) specificity so cascade order (we're later in
     the file) wins us black text. */
  body:not(.page-cert-pool) #from-the-record .accent-red,
  body:not(.page-cert-pool) #from-the-record .accent-red * {
    color: black !important;
  }

  /* Defeat the reveal-on-scroll JS (js/main.js): it inline-sets opacity:0 +
     translateY(18px) on these classes, then an IntersectionObserver fades them
     to opacity:1 when they enter the viewport. The observer never fires for
     elements below the fold during print, so every off-screen .card / .issue-card
     / .impact-box / etc. would print as a blank rectangle. Force them visible
     here — the !important beats the inline style (which has no !important).
     This rule deliberately does NOT use body:not(.page-cert-pool) — the
     visibility correction is safe on every page including the cert-pool memo,
     where it ensures the "Suggested Uses" cards below the memo also print. */
  .issue-card,
  .card,
  .path,
  .argument,
  .impact-box,
  .status-panel,
  .master-download {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* The compare-table on record.html stacks into 1 column under the
     @media (max-width: 720px) mobile rule — and that rule ALSO fires at print
     time, because Letter paper minus 0.75" margins = ~672px content width.
     The mobile rule additionally hides .compare-table__row--header entirely,
     which strips the column labels ("Walmart cases" / "Best Buy") that the
     reader needs to interpret the rows. Force the desktop 3-column layout
     back for print so the comparison stays readable. */
  body:not(.page-cert-pool) .compare-table__row {
    grid-template-columns: 0.7fr 1.5fr 1.6fr !important;
  }
  body:not(.page-cert-pool) .compare-table__row--header {
    display: grid !important;
  }
  body:not(.page-cert-pool) .compare-table__cell {
    border-right: 1px solid currentColor !important;
    border-bottom: 0 !important;
  }
  body:not(.page-cert-pool) .compare-table__cell:last-child {
    border-right: 0 !important;
  }

  /* Force <details> open */
  body:not(.page-cert-pool) details { display: block !important; }
  body:not(.page-cert-pool) details > *:not(summary) { display: revert !important; }
  body:not(.page-cert-pool) details > summary { display: none !important; }

  /* Typography */
  body:not(.page-cert-pool) { font-size: 11pt; line-height: 1.5; }
  body:not(.page-cert-pool) h1,
  body:not(.page-cert-pool) .page-head__title { font-size: 22pt; line-height: 1.2; }
  body:not(.page-cert-pool) h2 { font-size: 16pt; line-height: 1.25; }
  body:not(.page-cert-pool) h3 { font-size: 13pt; line-height: 1.3; }
  body:not(.page-cert-pool) p,
  body:not(.page-cert-pool) li,
  body:not(.page-cert-pool) blockquote { font-size: 11pt; }

  /* Links */
  body:not(.page-cert-pool) a,
  body:not(.page-cert-pool) a:visited {
    color: black !important;
    text-decoration: underline;
  }

  /* Expand external URLs after the link text */
  body:not(.page-cert-pool) a[href^="http"]::after,
  body:not(.page-cert-pool) a[href^="https"]::after {
    content: " <" attr(href) ">";
    font-family: var(--sans);
    font-size: 8.5pt;
    font-weight: 400;
    font-style: normal;
    color: var(--slate) !important;
    word-break: break-all;
  }
  body:not(.page-cert-pool) a[href^="#"]::after,
  body:not(.page-cert-pool) a[href^="mailto:"]::after,
  body:not(.page-cert-pool) a[href^="tel:"]::after,
  body:not(.page-cert-pool) a[href$=".pdf"]::after,
  body:not(.page-cert-pool) .nav a::after,
  body:not(.page-cert-pool) .site-footer a::after { content: ""; }

  /* Page-break control */
  body:not(.page-cert-pool) h1,
  body:not(.page-cert-pool) h2,
  body:not(.page-cert-pool) h3,
  body:not(.page-cert-pool) h4,
  body:not(.page-cert-pool) h5,
  body:not(.page-cert-pool) h6,
  body:not(.page-cert-pool) .argument__num,
  body:not(.page-cert-pool) .argument__title,
  body:not(.page-cert-pool) .controlling-auth__label,
  body:not(.page-cert-pool) .controlling-auth__cite {
    page-break-after: avoid;
    break-after: avoid;
  }
  body:not(.page-cert-pool) .argument,
  body:not(.page-cert-pool) .callout,
  body:not(.page-cert-pool) .controlling-auth,
  body:not(.page-cert-pool) .toc-card,
  body:not(.page-cert-pool) .page-head__reflex,
  body:not(.page-cert-pool) .card,
  body:not(.page-cert-pool) figure,
  body:not(.page-cert-pool) blockquote,
  body:not(.page-cert-pool) .contact-block {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  body:not(.page-cert-pool) p,
  body:not(.page-cert-pool) li { orphans: 3; widows: 3; }

  /* Trim screen-only spacing */
  body:not(.page-cert-pool) .section { padding: 0.5em 0 !important; }
  body:not(.page-cert-pool) .container,
  body:not(.page-cert-pool) .container--narrow { max-width: none !important; padding: 0 !important; }
  body:not(.page-cert-pool) .argument { margin-top: 1.25em; }

  /* Buttons read as plain links */
  body:not(.page-cert-pool) .btn { padding: 0 !important; background: none !important; border: none !important; }

  /* ------------------------------------------------------------------
     CERT-POOL MEMO  ·  print = memo only
     The cert-pool memo is designed as a self-contained one-page document
     to attach to outreach email. When printed, only the memo itself should
     render — not the screen-only page header, "why this exists" intro, or
     "suggested uses" cards below. Hide those sections so the print is
     exactly one page: the memo.
     ------------------------------------------------------------------ */
  .page-cert-pool .page-head,
  .page-cert-pool .memo-intro,
  .page-cert-pool .memo-after,
  .page-cert-pool .memo-actions,
  .page-cert-pool .memo-stage::before,
  .page-cert-pool .memo-stage__inner > :not(.memo-paper) { display: none !important; }
  .page-cert-pool .memo-stage,
  .page-cert-pool .memo-stage__inner { background: white !important; padding: 0 !important; margin: 0 !important; }
  .page-cert-pool .memo-paper { box-shadow: none !important; margin: 0 auto !important; }
}

/* --------------------------------------------------------------------------
   Anchor copy-link buttons (sitewide, next to h2/h3 section headings)
   A small link-icon button that appears on hover of its parent heading;
   clicking it copies the heading's deep-link URL to the clipboard so amici
   can share targeted pull-quotes (e.g. bestbuyamicus.com/about#zero-engagement).
   The handler walks up via closest('[id]'), so the button can live inside
   either an id-bearing heading OR an id-bearing wrapping section/article.
   -------------------------------------------------------------------------- */
.anchor-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  /* margin-left: visual gap between text and icon.
     margin-right: negative cancels the button's entire horizontal footprint
     (margin-left + width). Net inline width = 0, so the browser's line-wrap
     and centering algorithms don't see the button. The button still renders
     visibly at its 1.4em width  just overflowing into the right gutter when
     text fills the line. Works identically in Chrome and Firefox; no
     position: absolute needed (which caused Chrome to place icons below
     the text). */
  margin-left: 0.45em;
  margin-right: calc(-1 * (0.45em + 1.4em));
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
  opacity: 0;
  vertical-align: middle;
  position: relative;
  font: inherit;
  /* Fade + color transitions on hover/reveal. No transform animation, so
     the icon never appears to move  it just fades and tints. */
  transition: opacity 250ms ease, color 250ms ease, border-color 250ms ease;
}
.anchor-copy svg { width: 0.85em; height: 0.85em; display: block; }
/* Reveal on hover/focus of the parent heading */
h2:hover > .anchor-copy,
h3:hover > .anchor-copy,
h4:hover > .anchor-copy,
h2:focus-within > .anchor-copy,
h3:focus-within > .anchor-copy,
h4:focus-within > .anchor-copy {
  opacity: 0.55;
}
.anchor-copy:hover,
.anchor-copy:focus-visible {
  opacity: 1 !important;
  color: var(--cabernet);
  border-color: var(--cabernet);
  outline: none;
}
.anchor-copy.is-copied {
  color: var(--date-green);
  border-color: var(--date-green);
  opacity: 1 !important;
  /* Snap to green instantly when the class is added; the transition back to
     gray when .is-copied is removed still uses the 250ms rule on .anchor-copy. */
  transition: none;
}
.anchor-copy.is-copied::after {
  content: 'Copied';
  position: absolute;
  left: calc(100% + 0.5em);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  color: var(--date-green);
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  pointer-events: none;
}
/* Never print the copy-link buttons — they're interactive chrome,
   not content. Without this they still consume horizontal space
   on the printed page (opacity:0 hides them but doesn't remove layout). */
@media print {
  .anchor-copy { display: none !important; }
}

/* --------------------------------------------------------------------------
   Rule-56 Before/After diff block (issues.html#rule-56-diff)
   Two side-by-side cards: left = verbatim rule text, right = same text with
   the Panel's effective amendments inserted (gold highlight) and, where the
   Panel removed/replaced rule language, strikethrough (red). On narrow screens
   the columns stack; insertions remain clickable to the corresponding panel
   paragraph in the COA opinion PDF.
   -------------------------------------------------------------------------- */
.rule-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--sp-5) + 4px);
  margin-top: var(--sp-6);
}
.rule-diff__col {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  /* Bumped sp-5 → sp-6 so the rule text breathes a bit more inside each card.
     +2px on all sides for breathing room; horizontal sides get an additional
     +2px (so +4px total) to slightly tighten the text column. */
  padding: calc(var(--sp-6) + 2px) calc(var(--sp-6) + 4px);
  box-shadow: 0 1px 3px rgba(15, 29, 58, 0.04);
}
.rule-diff__col--rule { border-left: 3px solid var(--navy); }
.rule-diff__col--panel { border-left: 3px solid var(--cabernet); }
.rule-diff__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--hairline-strong);
}
.rule-diff__label {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy);
}
.rule-diff__col--panel .rule-diff__label { color: var(--cabernet); }
.rule-diff__source {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--slate);
  text-decoration: none;
  transition: color 250ms;
}
.rule-diff__source:hover { color: var(--cabernet); }
.rule-diff__col p {
  font-family: var(--serif);
  /* Slightly larger + denser ink so the rule text reads as the primary content
     of each card (bumped from 0.96rem). */
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--text);
  text-align: justify;
  margin: 0;
  /* Horizontally condense the body text to 95% of its glyph width while keeping
     it visually filling the original content area. The layout width is expanded
     to 1/0.95 (≈105.26%), then scaleX(0.95) pulls the rendered width back to
     100%. transform-origin: left anchors the left edge so the justified text
     stays flush with the card's content edge. */
  width: calc(100% / 0.95);
  transform: scaleX(0.95);
  transform-origin: left;
}
.rule-diff__col p + p { margin-top: var(--sp-3); }
.rule-diff__footer {
  margin-top: calc(var(--sp-5) + 4px);
  padding: var(--sp-4) var(--sp-5);
  background: var(--ivory);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius);
  text-align: center;
  text-wrap: balance;
}
.rule-diff__footer p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--charcoal);
}

/* The diff insertions themselves — gold highlight, navy text, clickable
   into the corresponding paragraph of the COA opinion. Inline so they sit
   in the flow of the rule text rather than breaking it. */
a.diff-ins {
  /* Solid highlighter behind the full text height (was a half-height gradient
     that only painted the bottom 45% of each line — visually it looked like
     the highlight was "sinking" under the text). */
  background: rgba(196, 163, 90, 0.45);
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  padding: 0 0.1em;
  transition: background 250ms ease, color 250ms ease;
}
a.diff-ins:hover,
a.diff-ins:focus-visible {
  background: rgba(196, 163, 90, 0.65);
  color: var(--cabernet);
  outline: none;
}
/* Inline pill used in the lede paragraph above the diff to label the convention. */
.diff-ins-inline {
  background: rgba(196, 163, 90, 0.45);
  color: var(--navy);
  font-weight: 600;
  padding: 0 0.15em;
}

/* Stack columns on narrow viewports; keep the flow intact. */
@media (max-width: 820px) {
  .rule-diff { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION  (WCAG 2.3.3 — Animation from Interactions)
   --------------------------------------------------------------------------
   Honors the OS-level "Reduce motion" preference. We collapse every
   transition/animation to ~0ms so state changes (color swaps, header
   shrink, reveal-on-scroll, the 2s status pulse) remain visible but the
   motion itself is eliminated. Programmatic smooth-scroll also becomes
   an instant jump — the documented W3C pattern for vestibular safety.

   The universal selector + `!important` is the canonical W3C example
   (https://web.dev/prefers-reduced-motion). It is intentionally broad so
   that *inline* transition styles set by main.js (e.g. the reveal-on-scroll
   block at lines ~224–230) are also overridden — only !important wins
   against inline styles.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}