/* =========================================================
   LE Case Law — design system
   Thesis: "Court Decisions. Street Application."
   One voice — the court record:
     • Century Schoolbook everywhere — the U.S. Supreme Court's opinion typeface.
     • Monospace (IBM Plex Mono) retained only for literal code values (draft: false, noindex).
   Two surfaces:
     • Navy "field" chrome (masthead, home, topic-finding)
     • Warm "court-record" paper (the actual case documents)
   ========================================================= */

/* ---------- Fonts (self-hosted) ---------- */
/* Century Schoolbook — the U.S. Supreme Court's opinion typeface (open URW "C059" cut). */
@font-face { font-family: "Century Schoolbook"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/century-schoolbook-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Century Schoolbook"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/century-schoolbook-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Century Schoolbook"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/century-schoolbook-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Century Schoolbook"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/century-schoolbook-700-italic.woff2") format("woff2"); }
/* Monospace — retained only for literal code values. */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* Navy field — the badge / authority */
  --navy:        #06214d;
  --navy-2:      #0a2a5c;
  --navy-deep:   #04122b;
  --navy-panel:  rgba(255,255,255,.045);

  /* Gold — the authority rule */
  --gold:        #c8a149;
  --gold-lite:   #e3c877;
  --gold-deep:   #9a7420;   /* legible on paper */

  /* LE blue — interactive accent, sparing */
  --blue:        #3fa1e0;
  --blue-deep:   #164e93;   /* links on paper */

  /* Court-record paper — the record */
  --paper:       #f4efe3;
  --paper-2:     #ede5d3;
  --paper-edge:  #ddd3bd;
  --ink:         #1b1d25;
  --ink-soft:    #3f424c;
  --ink-muted:   #71747e;
  --rule-ink:    rgba(20,22,30,.16);

  /* On-navy text */
  --on-dark:       #e8edf7;
  --on-dark-soft:  #b3c1da;
  --on-dark-muted: #7f90b1;
  --line-dark:     rgba(255,255,255,.12);
  --white:         #ffffff;

  /* Voices */
  --serif: "Century Schoolbook", "Century Schoolbook L", "New Century Schoolbook", Georgia, serif;
  /* One voice — the whole site speaks in Century Schoolbook. */
  --sans:  var(--serif);
  --mono:  var(--serif);
  --code:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* literal code only */

  --maxw: 1120px;
  --read: 780px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; /* clip keeps position:sticky working; hidden is the old-browser fallback */ scroll-padding-top: 124px; /* anchors land below the sticky header */ }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--on-dark);
  background: var(--navy-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip; /* see html note — sticky rail depends on this */
}

.container { max-width: none; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 4.5rem); }
.container-reading { max-width: var(--read); }
code, kbd, samp { font-family: var(--code); }

a { color: var(--gold-lite); text-decoration: none; }
a:hover { color: var(--white); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
img { max-width: 100%; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gold); color: var(--navy-deep); padding: 10px 16px; font-weight: 700; }
.skip-link:focus { left: 8px; top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Headnote (the recurring structural device: § PILLAR ▸ SUBTOPIC) ---------- */
.headnote {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin: 26px 0 12px; display: block;
}
.headnote .sep { color: var(--on-dark-muted); margin: 0 6px; }

/* ---------- Docket stamp (citations, case data — the field vernacular) ---------- */
.docket { font-family: var(--mono); font-weight: 500; letter-spacing: .01em; font-variant-numeric: tabular-nums; }

/* =========================================================
   Masthead (navy field)
   ========================================================= */
.site-header { background: var(--navy-deep); border-bottom: 2px solid var(--gold); position: sticky; top: 0; z-index: 60; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: none; padding: 14px clamp(1.5rem, 4vw, 4.5rem); flex-wrap: wrap; }
.brand a { display: flex; align-items: center; }
.brand .brand-logo { height: 74px; width: auto; display: block; }

.main-nav { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.main-nav a {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark-soft);
}
.main-nav a:hover { color: var(--gold); }

/* Hamburger toggle + drawer tagline: hidden on desktop, shown ≤720px */
.nav-toggle { display: none; }
.nav-tagline { display: none; }

/* =========================================================
   Hero (home)
   ========================================================= */
.hero {
  position: relative; text-align: center;
  padding: clamp(2.25rem, 6vh, 5.5rem) 0 clamp(2.75rem, 7vh, 6rem); background-color: var(--navy-deep);
  background-image:
    linear-gradient(180deg, rgba(4,18,43,.76) 0%, rgba(4,18,43,.55) 46%, rgba(4,18,43,.9) 100%),
    url(/assets/hero-bg.jpg);
  background-image:
    linear-gradient(180deg, rgba(4,18,43,.76) 0%, rgba(4,18,43,.55) 46%, rgba(4,18,43,.9) 100%),
    image-set(url(/assets/hero-bg.webp) type("image/webp"), url(/assets/hero-bg.jpg) type("image/jpeg"));
  background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden;
}
.hero::after { content: ""; position: absolute; top: 4%; left: 50%; width: min(46vw, 460px); aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, rgba(200,161,73,.18), transparent 66%); pointer-events: none; }
.hero .container { position: relative; z-index: 1; max-width: none; padding: 0 clamp(1.1rem, 4.5vw, 4.5rem); }
.badge-hero { width: clamp(68px, 8.5vw, 124px); height: auto; display: block; margin: 0 auto clamp(0.7rem, 1.6vw, 1.35rem); filter: drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
/* Hero text: one line at every size — scale by viewport width, never wrap. */
.tagline { font-family: var(--serif); font-style: italic; font-size: min(3.3vw, 1.4rem); white-space: nowrap; color: var(--gold-lite); letter-spacing: .01em; margin: 0 0 clamp(0.3rem, 0.9vw, 0.8rem); }
.hero h1 {
  font-family: var(--serif); font-weight: 700; color: var(--white);
  font-size: min(8.8vw, 12rem); line-height: 1; letter-spacing: -.02em; white-space: nowrap;
  margin: 0 0 clamp(0.45rem, 1.2vw, 1rem); max-width: none;
}
.hero .hero-subhead {
  font-family: var(--sans); font-weight: 600; font-size: min(4.05vw, 2.4rem); white-space: nowrap;
  color: var(--on-dark); letter-spacing: -.012em; line-height: 1.15; margin: 0 0 clamp(0.6rem, 1.4vw, 1.1rem);
  max-width: none;
}
.hero .lede {
  font-family: var(--sans); font-size: min(3.5vw, 1.45rem); white-space: nowrap; line-height: 1.3;
  color: var(--on-dark-soft); max-width: none; margin: 0;
}
.hero .rule { width: clamp(44px, 5vw, 60px); height: 3px; background: var(--gold); border: 0; margin: clamp(1.4rem, 3vw, 2.25rem) auto 0; }

/* ---------- Homepage FAQ (navy) — editorial Q&A ---------- */
.home-faq { padding: clamp(3rem, 9vh, 6.5rem) 0; border-top: 1px solid var(--line-dark);
  background: linear-gradient(180deg, rgba(255,255,255,.015), transparent 40%); }
.faq-wrap { max-width: 1080px; }
.faq-eyebrow { text-align: center; margin: 0 0 0.6rem; }
.home-faq .section-h { margin: 0 0 clamp(1.75rem, 4vw, 3rem); }

/* Two columns of collapsible dropdowns */
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.8rem, 1.8vw, 1.4rem); align-items: start; }
.faq-col { display: flex; flex-direction: column; gap: clamp(0.7rem, 1.4vw, 1rem); }
.faq-item { border: 1px solid var(--line-dark); border-radius: 8px; background: var(--navy-panel); transition: border-color .15s ease; }
.faq-item:hover { border-color: rgba(200,161,73,.5); }
.faq-item[open] { border-color: rgba(200,161,73,.45); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: clamp(0.95rem, 1.8vw, 1.35rem) clamp(1.05rem, 2vw, 1.4rem);
  font-family: var(--serif); font-weight: 700; color: var(--white);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.22;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "\25B8"; color: var(--gold); font-size: 1.15em; flex: none; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(90deg); }
.faq-item summary:hover { color: var(--gold-lite); }
.faq-item[open] summary { color: var(--gold-lite); }
.faq-answer {
  padding: 0 clamp(1.05rem, 2vw, 1.4rem) clamp(1rem, 1.8vw, 1.3rem);
  color: var(--on-dark-soft); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6;
}
@media (max-width: 700px) { .faq-cols { grid-template-columns: 1fr; } }

/* ---------- Site search ---------- */
.site-search { display: flex; gap: 8px; max-width: min(48rem, 100%); margin: clamp(1.25rem, 2.4vw, 1.9rem) auto 0; }
.site-search input {
  flex: 1; padding: 14px 16px; border-radius: 4px; border: 1px solid var(--line-dark);
  background: rgba(255,255,255,.07); color: var(--white); font-size: 15px; font-family: var(--sans);
}
.site-search input::placeholder { color: var(--on-dark-muted); }
.site-search input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.site-search button { padding: 14px 24px; border: 0; border-radius: 4px; background: var(--gold); color: var(--navy-deep); font-weight: 700; font-size: 15px; font-family: var(--sans); cursor: pointer; letter-spacing: .02em; }
.site-search button:hover { background: var(--gold-lite); }

/* =========================================================
   Home sections
   ========================================================= */
.pillars, .latest, .how { padding: 60px 0; }
.latest { background: rgba(255,255,255,.02); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.topics-home { padding: clamp(3rem, 8vh, 5.5rem) 0; border-top: 1px solid var(--line-dark); }
.topics-eyebrow { text-align: center; margin: 0 0 0.6rem; }
.topics-home .section-h { margin: 0 0 clamp(1.5rem, 3.5vw, 2.75rem); }

/* Topics index: a directory of pillars and their sub-topics */
.hub-page.topics-dir { max-width: 90rem; }
.topic-directory { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.6rem, 3vw, 2.75rem); margin-top: clamp(1.75rem, 3.5vw, 3rem); }
@media (max-width: 1000px) { .topic-directory { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .topic-directory { grid-template-columns: 1fr; } }
.topic-dir-head { display: flex; align-items: baseline; gap: .5rem; }
.topic-dir-num { font-family: var(--serif); font-size: 1rem; color: var(--gold); opacity: .8; }
.topic-dir-name { font-family: var(--serif); font-weight: 700; font-size: clamp(1.25rem, 1.7vw, 1.55rem); color: var(--white); letter-spacing: -.01em; transition: color .15s ease; }
.topic-dir-head:hover .topic-dir-name { color: var(--gold-lite); }
.topic-dir-blurb { color: var(--on-dark-muted); font-size: .95rem; line-height: 1.42; margin: .5rem 0 .8rem; }
.topic-dir-subs { list-style: none; padding: .55rem 0 0; margin: 0; border-top: 1px solid var(--line-dark); }
.topic-dir-subs a { display: block; color: var(--on-dark-soft); font-size: .96rem; padding: .4rem 0; transition: color .12s ease, padding-left .12s ease; }
.topic-dir-subs a:hover { color: var(--gold); padding-left: .3rem; }

/* Homepage: "Latest" ticker banner directly under the hero. A full-width strip
   on one line; the case list scrolls sideways if it overflows (the page body
   never does). The full case set lives in the topic hubs, not here. */
.latest-banner { border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.latest-banner-inner { display: flex; align-items: center; justify-content: center; gap: clamp(.9rem, 2vw, 1.5rem); padding-top: .8rem; padding-bottom: .8rem; }
.latest-label {
  flex: none; font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.latest-strip {
  flex: 0 1 auto; min-width: 0; list-style: none; margin: 0; padding: 0;
  display: flex; align-items: baseline; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.latest-strip::-webkit-scrollbar { display: none; }
.latest-strip li {
  flex: none; display: inline-flex; align-items: baseline; gap: .45rem;
  padding: 0 clamp(.9rem, 2vw, 1.4rem); border-right: 1px solid var(--line-dark);
}
.latest-strip li:first-child { padding-left: 0; }
.latest-strip li:last-child { border-right: 0; }
.latest-strip a { font-family: var(--serif); font-weight: 700; font-size: .98rem; color: var(--white); letter-spacing: -.005em; }
.latest-strip a:hover { color: var(--gold); }
.latest-cite { font-family: var(--mono); font-size: .74rem; color: var(--gold); font-variant-numeric: tabular-nums; }

/* Homepage: landmark "canon" cases, the timeless counterpart to the Latest
   banner. A no-box grid with row rules, matching the site's docket look. */
.landmarks-home { padding: clamp(3rem, 8vh, 5.5rem) 0; border-top: 1px solid var(--line-dark); }
.landmark-grid {
  list-style: none; padding: 0; margin: clamp(1.75rem, 3.5vw, 3rem) auto 0;
  max-width: 88rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(1.4rem, 2.6vw, 2.4rem);
}
.landmark { display: flex; flex-direction: column; gap: .15rem; padding: clamp(.85rem, 1.6vw, 1.15rem) 0; border-top: 1px solid var(--line-dark); }
.landmark-name { font-family: var(--serif); font-weight: 700; font-size: clamp(1.05rem, 1.35vw, 1.22rem); color: var(--white); letter-spacing: -.01em; line-height: 1.2; }
.landmark-name:hover { color: var(--gold); }
.landmark-cite { font-family: var(--mono); font-size: .76rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.landmark-note { color: var(--on-dark-muted); font-size: .92rem; }
@media (max-width: 1000px) { .landmark-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .landmark-grid { grid-template-columns: 1fr; } }

/* Homepage sponsor slot — a single, clearly-labeled direct-sponsor unit.
   Tasteful panel (a deliberate exception to the no-boxes rule, so the ad
   reads as a distinct unit); swap the sponsor via src/_data/sponsor.json. */
.sponsor-home { padding: clamp(2.5rem, 6vh, 4.25rem) 0; border-top: 1px solid var(--line-dark); }
.sponsor-eyebrow { text-align: center; margin: 0 0 clamp(.9rem, 2vw, 1.25rem); }
.sponsor-card {
  max-width: 60rem; margin: 0 auto; display: flex; align-items: center;
  gap: clamp(1.1rem, 3vw, 2.25rem);
  padding: clamp(1.15rem, 3vw, 1.6rem) clamp(1.4rem, 4vw, 2.35rem);
  background: var(--navy-panel); border: 1px solid var(--line-dark); border-radius: 6px;
  transition: border-color .15s ease, background .15s ease;
}
.sponsor-card:hover { border-color: var(--gold); background: rgba(255,255,255,.06); }
.sponsor-logo { flex: none; width: clamp(52px, 8vw, 80px); height: auto; border-radius: 6px; }
.sponsor-body { display: flex; flex-direction: column; gap: .28rem; flex: 1 1 auto; min-width: 0; }
.sponsor-name {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.01em;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--white); transition: color .15s ease;
}
.sponsor-card:hover .sponsor-name { color: var(--gold-lite); }
.sponsor-tagline { color: var(--on-dark-soft); font-size: .98rem; line-height: 1.45; }
.sponsor-cta {
  flex: none; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold); white-space: nowrap;
}

/* Two-up sponsor slots under Landmark Cases. Reuses .sponsor-card so both
   sponsor areas read as one system; only the proportions change. */
.sponsors-duo { padding: clamp(3rem, 7vh, 5rem) 0; border-top: 1px solid var(--line-dark); }
.sponsor-duo-grid {
  list-style: none; padding: 0; margin: 0 auto; max-width: 82rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem);
}
.sponsor-duo-grid > li { display: flex; }
.sponsor-duo-grid .sponsor-card {
  max-width: none; width: 100%; margin: 0; align-items: stretch;
  gap: clamp(1.1rem, 2.4vw, 1.7rem);
  padding: clamp(1.7rem, 4vw, 2.5rem) clamp(1.8rem, 4vw, 2.6rem);
  min-height: clamp(9.5rem, 15vw, 12rem);
}
/* align-items:stretch lets the body fill the card so the CTA can sit on the
   baseline; the logo must opt out or the image stretches with it. */
.sponsor-duo-grid .sponsor-logo { width: clamp(64px, 8vw, 96px); align-self: flex-start; }
.sponsor-duo-grid .sponsor-name { font-size: clamp(1.3rem, 2.1vw, 1.7rem); }
.sponsor-duo-grid .sponsor-tagline { font-size: 1.02rem; line-height: 1.5; }
.sponsor-duo-grid .sponsor-cta { align-self: flex-start; margin-top: auto; padding-top: .7rem; }
@media (max-width: 720px) {
  .sponsor-duo-grid { grid-template-columns: 1fr; }
  .sponsor-duo-grid .sponsor-card { min-height: 0; }
}
@media (max-width: 620px) {
  .sponsor-card { flex-direction: column; align-items: flex-start; }
  .sponsor-cta { align-self: flex-start; }
}

/* Homepage newsletter signup — above the footer, form matches the hero search.
   Endpoint is wired via src/_data/site.json (site.newsletter.action). */
/* Police1 headlines — blog-style cards: thumbnail on top, date, headline,
   three to a row. The image is the hook; the date keeps the recency cue. */
.newsfeed-home { padding: clamp(3rem, 8vh, 5.5rem) 0; border-top: 1px solid var(--line-dark); }
.newsfeed-list {
  list-style: none; padding: 0; margin: clamp(1.75rem, 3.5vw, 3rem) auto 0; max-width: 82rem;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.9rem, 3.5vw, 2.6rem) clamp(1.4rem, 2.6vw, 2.2rem);
}
.newsfeed-link {
  display: flex; flex-direction: column; gap: .7rem; color: var(--white);
}
/* Hotlinked from Lexipol's CDN at 1440x810. width/height are the intrinsic
   dimensions so the box is reserved before it loads; aspect-ratio holds the
   shape if the image 404s, so a dead thumbnail leaves a gap, not a jump. */
.newsfeed-thumb {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px;
  background: var(--navy-panel); border: 1px solid var(--line-dark);
}
.newsfeed-text { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.newsfeed-date {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums;
}
.newsfeed-title {
  font-family: var(--serif); font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.4;
  letter-spacing: -.005em;
}
.newsfeed-link:hover .newsfeed-title { color: var(--gold); }
.newsfeed-link:hover .newsfeed-thumb { border-color: var(--gold); }
.newsfeed-source {
  text-align: center; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--on-dark-muted);
}
.newsfeed-source a { color: var(--on-dark-soft); }
.newsfeed-source a:hover { color: var(--gold); }
@media (max-width: 960px) { .newsfeed-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .newsfeed-list { grid-template-columns: 1fr; max-width: 26rem; } }

.newsletter-home { padding: clamp(3rem, 8vh, 5.5rem) 0; border-top: 1px solid var(--line-dark); text-align: center; }
.newsletter-lede { max-width: 40rem; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); color: var(--on-dark-soft); font-size: 1.05rem; line-height: 1.5; }
.newsletter-form { display: flex; gap: 8px; max-width: min(34rem, 100%); margin: 0 auto; }
.newsletter-form input {
  flex: 1; padding: 14px 16px; border-radius: 4px; border: 1px solid var(--line-dark);
  background: rgba(255,255,255,.07); color: var(--white); font-size: 15px; font-family: var(--sans);
}
.newsletter-form input::placeholder { color: var(--on-dark-muted); }
.newsletter-form input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.newsletter-form button {
  padding: 14px 24px; border: 0; border-radius: 4px; background: var(--gold); color: var(--navy-deep);
  font-weight: 700; font-size: 15px; font-family: var(--sans); cursor: pointer; letter-spacing: .02em;
}
.newsletter-form button:hover { background: var(--gold-lite); }
.newsletter-form button[type="button"] { opacity: .65; cursor: default; }
.newsletter-note {
  margin: .85rem 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--on-dark-muted);
}
@media (max-width: 620px) { .newsletter-form { flex-direction: column; } }

/* Horizontal topic columns — no boxes. Subgrid keeps every row (numeral, name,
   blurb, link) aligned across all four columns so they read in unison. */
.topic-cols {
  display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: auto;
  row-gap: clamp(.55rem, 1vw, .9rem); margin-top: clamp(1.75rem, 3.5vw, 3rem);
  max-width: 96rem; margin-inline: auto;  /* center the block under the heading */
}
.topic-col {
  grid-row: span 4; display: grid; grid-template-rows: subgrid; align-content: start;
  padding: 0 clamp(1rem, 1.5vw, 1.7rem);
  border-left: 1px solid rgba(200,161,73,.22);
  color: var(--on-dark); transition: background .2s ease;
}
.topic-col:first-child { border-left: 0; padding-left: clamp(.25rem, .5vw, .5rem); }
.topic-col > * { margin: 0; align-self: start; }
.topic-col-num { font-family: var(--serif); font-size: clamp(1rem, 1.3vw, 1.35rem); color: var(--gold); opacity: .8; letter-spacing: .06em; }
.topic-col-name {
  font-family: var(--serif); font-weight: 700; font-size: clamp(1.45rem, 1.95vw, 2.05rem);
  line-height: 1.07; color: var(--white); letter-spacing: -.012em; transition: color .15s ease;
}
.topic-col-blurb { color: var(--on-dark-muted); font-size: clamp(.9rem, 1vw, 1.02rem); line-height: 1.45; }
.topic-col-cta { color: var(--gold-lite); font-weight: 700; font-size: .92rem; letter-spacing: .01em; align-self: end; transition: transform .2s ease; }
.topic-col:hover { background: linear-gradient(180deg, rgba(200,161,73,.08), transparent 82%); }
.topic-col:hover .topic-col-name { color: var(--gold-lite); }
.topic-col:hover .topic-col-cta { transform: translateX(6px); }

@media (max-width: 900px) {
  .topic-cols { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 4vw, 2.75rem); row-gap: clamp(1.6rem, 4vw, 2.25rem); }
  .topic-col { display: flex; flex-direction: column; grid-row: auto; padding: 0; border: 0; }
  .topic-col-num { margin-bottom: .65rem; }
  .topic-col-name { margin-bottom: .6rem; min-height: 2.15em; }
  .topic-col-blurb { margin-bottom: 1rem; }
  .topic-col-cta { margin-top: auto; }
}
@media (max-width: 460px) {
  .topic-cols { grid-template-columns: 1fr; }
  .topic-col-name { min-height: 0; }
}
.section-h { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 3.2vw, 34px); color: var(--white); letter-spacing: -.01em; margin: 0 0 30px; text-align: center; }
.how-lede { max-width: 46rem; margin: 0 auto 30px; text-align: center; color: var(--on-dark-soft); }
.how-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.how-grid h3 { font-family: var(--serif); color: var(--gold-lite); font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.how-grid p { margin: 0; color: var(--on-dark-soft); font-size: 15.5px; }

/* ---------- Cards (navy) ---------- */
.card-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { display: block; padding: 24px 24px 22px; border-radius: 6px; background: var(--navy-panel); border: 1px solid var(--line-dark); transition: border-color .12s ease, transform .12s ease, background .12s ease; }
.card:hover { border-color: var(--gold); transform: translateY(-2px); background: rgba(255,255,255,.07); }
.card h3 { font-family: var(--serif); margin: 0 0 8px; color: var(--white); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--on-dark-soft); font-size: 15px; line-height: 1.5; }
.card-cta { display: inline-block; margin-top: 16px; color: var(--gold-lite); font-weight: 700; font-size: 13px; font-family: var(--mono); letter-spacing: .04em; }
.card:hover .card-cta { color: var(--white); }
.card-pillar { border-left: 3px solid var(--gold); }

/* ---------- Update lists ---------- */
.update-list, .update-list-full { list-style: none; padding: 0; margin: 0 auto; max-width: 660px; }
.update-list li { padding: 13px 0; border-bottom: 1px solid var(--line-dark); }
.update-list time { display: inline-block; min-width: 140px; color: var(--gold); font-size: 12.5px; font-family: var(--mono); letter-spacing: .02em; }
.update-list a { font-weight: 700; color: var(--on-dark); }
.update-list a:hover { color: var(--gold); }
.update-list-full li { padding: 18px 0; }
.update-desc { margin: 5px 0 0; color: var(--on-dark-soft); font-size: 15px; }
.more-link { text-align: center; margin-top: 24px; }
.more-link a { font-family: var(--mono); font-size: 14px; }

/* =========================================================
   Hub pages (navy)
   ========================================================= */
.breadcrumb { font-family: var(--mono); font-size: 12.5px; color: var(--on-dark-muted); padding: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb a { color: var(--on-dark-soft); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb [aria-current] { color: var(--on-dark-muted); }

.hub-head { padding-top: 6px; }
.hub-head h1, .page-head h1, .case-head h1, .author-head h1, .update-head h1, .error-page h1 {
  font-family: var(--serif); font-size: clamp(30px, 4.6vw, 46px); font-weight: 700; color: var(--white);
  line-height: 1.08; letter-spacing: -.012em; margin: 0 0 16px;
}
.hub-lede { font-size: 19px; color: var(--on-dark-soft); line-height: 1.5; margin: 0 0 10px; max-width: 44rem; }
.hub-intro { margin: 8px 0 24px; color: var(--on-dark-soft); }
/* ---------- Topic / sub-topic hero — same treatment as the homepage hero ---------- */
.hub-hero {
  position: relative; text-align: center;
  padding: clamp(2.5rem, 6vh, 4.75rem) 0 clamp(2.5rem, 6vh, 4.5rem);
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(180deg, rgba(4,18,43,.82) 0%, rgba(4,18,43,.6) 48%, rgba(4,18,43,.94) 100%),
    url(/assets/hero-bg.jpg);
  background-image:
    linear-gradient(180deg, rgba(4,18,43,.82) 0%, rgba(4,18,43,.6) 48%, rgba(4,18,43,.94) 100%),
    image-set(url(/assets/hero-bg.webp) type("image/webp"), url(/assets/hero-bg.jpg) type("image/jpeg"));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border-bottom: 1px solid var(--line-dark);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hub-hero .breadcrumb { justify-content: center; padding-top: 0; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.hub-hero .hub-head { max-width: none; margin: 0 auto; text-align: center; }
.hub-hero .headnote { margin-top: 0; }
.hub-hero .hub-head h1 { font-size: clamp(2.5rem, 6.6vw, 7.5rem); line-height: 1.02; letter-spacing: -.015em; margin-bottom: 0; text-wrap: balance; }
.hub-hero .hub-lede { max-width: 52rem; margin: clamp(.9rem, 1.8vw, 1.4rem) auto 0; }
@media (max-width: 640px) {
  .hub-hero {
    background-image: linear-gradient(180deg, rgba(4,18,43,.82), rgba(4,18,43,.94)), url(/assets/hero-bg-mobile.jpg);
    background-image: linear-gradient(180deg, rgba(4,18,43,.82), rgba(4,18,43,.94)), image-set(url(/assets/hero-bg-mobile.webp) type("image/webp"), url(/assets/hero-bg-mobile.jpg) type("image/jpeg"));
  }
}
.subtopics { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
/* Cap the hub content to a readable centered column so it doesn't stretch
   edge-to-edge on wide screens (the hero band above stays full-width). */
.hub-page { max-width: 74rem; margin-left: auto; margin-right: auto; padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.cases-in-hub { padding: 0; }
.subtopics h2, .cases-in-hub h2 {
  font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.95rem); color: var(--white);
  font-weight: 700; letter-spacing: -.01em; margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

/* Sub-topics — a centered, balanced line of links: "Sub-topics: x – y – z" */
.subtopic-line {
  font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 2; color: var(--on-dark);
  max-width: none; margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem); border-bottom: 1px solid var(--line-dark);
  text-align: center; text-wrap: balance;
}
.subtopic-label { display: block; color: var(--gold); font-weight: 700; font-size: .82em;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .35em; }
.subtopic-line a { color: var(--on-dark); white-space: nowrap; }
.subtopic-line a:hover { color: var(--gold); }
.subtopic-sep { color: var(--gold); font-weight: 700; }
.subtopic-current { color: var(--gold); font-weight: 700; white-space: nowrap; }

/* Case digest — plain list: "Case Name, Citation — holding" (name links to the case page) */
.case-list { list-style: none; padding: 0; margin: 0; }
/* Search results: the entry's topic tag on its own line under the title,
   so it never collides with long, wrapping case names. */
.case-list-cite {
  display: block; margin-top: .3rem;
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--gold);
}
/* Matched terms inside opinion excerpts. */
.case-list-holding mark {
  background: rgba(200, 161, 73, .16); color: var(--white);
  font-weight: 600; border-radius: 2px; padding: 0 2px;
}
/* Notice when the query was relaxed to find results. */
.search-note {
  font-family: var(--mono); font-size: .78rem; color: var(--on-dark-muted);
  margin: 0 0 .75rem;
}
.empty a { color: var(--gold); }
.case-list li {
  padding: 13px 0; border-bottom: 1px solid var(--line-dark);
  font-size: 16.5px; line-height: 1.6; color: var(--on-dark-soft);
}
.case-list li:first-child { border-top: 1px solid var(--line-dark); }
.case-list a { font-family: var(--serif); font-weight: 700; color: var(--white); }
.case-list a:hover { color: var(--gold); }
.case-cite { color: var(--gold); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.empty { color: var(--on-dark-muted); font-size: 16px; padding: 8px 0; }
.empty a { font-family: var(--mono); font-size: 15px; }

/* Pillar hub: cases grouped by sub-topic, each group flowing in columns */
.subtopic-group { margin: 0 0 clamp(1.6rem, 3.2vw, 2.6rem); }
.subtopic-group h3 {
  font-family: var(--serif); font-size: clamp(1.1rem, 1.6vw, 1.32rem); font-weight: 700;
  color: var(--gold); margin: 0 0 .55rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--gold-dim, var(--line-dark));
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.subtopic-group h3 a { color: var(--gold); }
.subtopic-group h3 a:hover { color: var(--gold-lite); }
.group-count { font-family: var(--mono); font-size: .62em; font-weight: 400; color: var(--on-dark-muted); flex: none; }
.case-cols { column-width: 22rem; column-gap: clamp(1.5rem, 3vw, 2.75rem); }
/* Clean spaced rows (no per-row dividers), every entry on ONE line: the name
   truncates with an ellipsis if needed, the citation is always kept. */
.case-cols li {
  break-inside: avoid; border: none; padding: .38rem 0; line-height: 1.35;
  display: flex; align-items: baseline; white-space: nowrap;
}
.case-cols li > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.case-cols .case-cite { flex: none; }
/* beat .case-list li:first-child's border-top so groups don't get a double line */
.case-cols li:first-child { border-top: none; }

/* =========================================================
   COURT-RECORD PAPER surface (case & prose documents)
   Navy "desk" backdrop, with the record on a paper sheet.
   ========================================================= */
.surface-paper main { background: var(--navy-deep); padding: 40px 16px 84px; }
.surface-paper .container-reading {
  background: var(--paper); color: var(--ink);
  max-width: var(--read); margin: 0 auto;
  padding: 14px clamp(24px, 5.5vw, 64px) 60px;
  border-top: 4px solid var(--gold);
  border-radius: 2px;
  box-shadow: 0 26px 70px rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.2);
}
/* Case (full-opinion) pages: let the paper grow on wide screens so it isn't a
   narrow strip in a big void, while keeping the opinion at a readable measure. */
.surface-paper .case .container-reading,
.case .container-reading { max-width: clamp(46rem, 66vw, 62rem); }

/* Paper overrides */
.surface-paper .breadcrumb { color: var(--ink-muted); }
.surface-paper .breadcrumb a { color: var(--ink-soft); }
.surface-paper .breadcrumb a:hover { color: var(--blue-deep); }
.surface-paper .breadcrumb [aria-current] { color: var(--ink-muted); }
.surface-paper .headnote { color: var(--gold-deep); }
.surface-paper .headnote .sep { color: var(--ink-muted); }
.surface-paper h1, .surface-paper .case-head h1, .surface-paper .page-head h1, .surface-paper .author-head h1, .surface-paper .update-head h1 { color: var(--ink); }

/* ---------- HELD bench card (the signature) ---------- */
.holding {
  background: var(--paper-2); border: 1px solid var(--paper-edge); border-left: 5px solid var(--gold);
  border-radius: 2px; padding: 20px 24px 18px; margin: 4px 0 22px;
}
.holding-label { font-family: var(--mono); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: 11px; color: var(--gold-deep); margin: 0 0 8px; }
.holding-text { font-family: var(--serif); font-size: clamp(20px, 2.6vw, 27px); line-height: 1.34; color: var(--ink); margin: 0; font-weight: 400; }
.holding .docket { display: block; margin: 14px 0 0; font-size: 13px; color: var(--ink-muted); }
.holding .docket .mark { color: var(--gold-deep); }

/* ---------- Status strip (replaces the boxy facts table) ---------- */
.status-strip { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin: 0 0 30px; padding: 0 0 22px; border-bottom: 1px solid var(--rule-ink); }
.status { display: inline-block; padding: 3px 12px; border-radius: 2px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.status-good-law { background: rgba(34,120,64,.14); color: #216c3a; border: 1px solid rgba(34,120,64,.3); }
.status-narrowed { background: rgba(154,116,32,.16); color: var(--gold-deep); border: 1px solid rgba(154,116,32,.35); }
.status-overruled { background: rgba(168,44,44,.12); color: #a12c2c; border: 1px solid rgba(168,44,44,.32); }
.strip-topic { font-family: var(--mono); font-size: 12.5px; color: var(--ink-muted); letter-spacing: .04em; }

/* ---------- Prose on paper ---------- */
.surface-paper .case-body, .surface-paper .prose { font-family: var(--sans); font-size: 17.5px; line-height: 1.72; color: var(--ink-soft); }
.surface-paper .case-body h2, .surface-paper .prose h2 { font-family: var(--serif); font-size: clamp(22px, 3vw, 27px); font-weight: 700; color: var(--ink); letter-spacing: -.01em; margin: 36px 0 12px; }
.surface-paper .case-body h3, .surface-paper .prose h3 { font-family: var(--sans); font-size: 18px; font-weight: 700; color: var(--gold-deep); margin: 26px 0 8px; }
.surface-paper .case-body p, .surface-paper .prose p { margin: 0 0 16px; }
.surface-paper .case-body a, .surface-paper .prose a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 2px; }
.surface-paper .case-body a:hover, .surface-paper .prose a:hover { color: var(--ink); }
.surface-paper .case-body strong, .surface-paper .prose strong { color: var(--ink); font-weight: 700; }
.surface-paper .case-body ul, .surface-paper .case-body ol, .surface-paper .prose ul, .surface-paper .prose ol { margin: 0 0 18px; padding-left: 22px; }
.surface-paper .case-body li, .surface-paper .prose li { margin: 0 0 9px; }
.surface-paper .case-body em, .surface-paper .prose em { font-family: var(--serif); font-style: italic; }
.surface-paper blockquote { border-left: 3px solid var(--gold); margin: 0 0 18px; padding: 6px 0 6px 18px; color: var(--ink-muted); font-family: var(--serif); font-style: italic; }
.surface-paper code { font-family: var(--code); background: var(--paper-2); padding: 1px 6px; border-radius: 3px; font-size: .82em; color: var(--ink); }

/* ---------- Bright-line "field card" table (navy header on paper) ---------- */
.surface-paper .case-body table, .surface-paper .prose table { width: 100%; border-collapse: collapse; margin: 6px 0 24px; font-size: 15.5px; border: 1px solid var(--rule-ink); }
.surface-paper .case-body th, .surface-paper .case-body td, .surface-paper .prose th, .surface-paper .prose td { text-align: left; padding: 11px 14px; border: 1px solid var(--rule-ink); vertical-align: top; }
.surface-paper .case-body thead th, .surface-paper .prose thead th { background: var(--navy); color: var(--white); font-family: var(--sans); font-weight: 700; letter-spacing: .03em; }
.surface-paper .case-body td, .surface-paper .prose td { color: var(--ink-soft); }

/* ---------- FAQ on paper ---------- */
.faq { margin: 30px 0 8px; }
.faq h2 { font-family: var(--serif); font-size: 24px; font-weight: 700; margin: 0 0 14px; }
.surface-paper .faq h2 { color: var(--ink); }
.faq details { border: 1px solid var(--rule-ink); border-radius: 2px; margin: 0 0 10px; background: var(--paper-2); }
.faq summary { cursor: pointer; padding: 14px 18px; font-weight: 700; color: var(--ink); font-size: 16px; list-style: none; font-family: var(--sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "§"; font-family: var(--serif); color: var(--gold-deep); margin-right: 12px; font-weight: 700; }
.faq details[open] summary { color: var(--blue-deep); }
.faq .faq-a { padding: 0 18px 16px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.62; }
.faq .faq-a :first-child { margin-top: 0; }

/* ---------- Related / sources / byline (paper) ---------- */
.related { margin: 30px 0; }
.related h2 { font-family: var(--serif); font-size: 21px; font-weight: 700; margin: 0 0 12px; }
.surface-paper .related h2 { color: var(--ink); }
.related-list { list-style: none; padding: 0; margin: 0; }
.related-list li { padding: 10px 0; border-bottom: 1px solid var(--rule-ink); font-size: 15.5px; }
.surface-paper .related-list li { color: var(--ink-soft); }
.related-list a { font-weight: 700; }
.surface-paper .related-list a { color: var(--blue-deep); }
.surface-paper .related-list a:hover { color: var(--ink); }

/* Opinion-only case page: the full court opinion is the content */
.case-meta { font-family: var(--mono); font-size: 13px; color: var(--ink-muted); letter-spacing: .02em; margin: 10px 0 0; white-space: normal; overflow-wrap: break-word; line-height: 1.5; }
.opinion-full { font-family: var(--serif); font-size: 16.5px; line-height: 1.76; color: var(--ink-soft); margin-top: 26px; overflow-wrap: break-word; }
.surface-paper .opinion-full { color: var(--ink-soft); }
.opinion-full p { margin: 0 0 15px; }
.opinion-full p:first-child { margin-top: 0; }
.opinion-missing { margin-top: 24px; color: var(--ink-muted); }

/* Case-page header hierarchy: a larger name, and a rule before the opinion */
.case .case-head { border-bottom: 1px solid var(--rule-ink); padding-bottom: clamp(1rem, 2vw, 1.4rem); }
.case .case-head h1 { font-size: clamp(34px, 5.2vw, 58px); }

/* Related cases (internal linking) at the foot of an opinion */
.case-related { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.2rem, 2.5vw, 1.8rem); border-top: 1px solid var(--rule-ink); }
.case-related h2 { font-family: var(--serif); font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; color: var(--ink); margin: 0 0 .85rem; }
.case-related-list { list-style: none; padding: 0; margin: 0 0 1.1rem; column-width: 19rem; column-gap: clamp(1.5rem, 3vw, 2.5rem); }
.case-related-list li { padding: .32rem 0; break-inside: avoid; font-size: 15.5px; line-height: 1.35; display: flex; align-items: baseline; white-space: nowrap; }
.case-related-list li > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--blue-deep); font-weight: 700; }
.case-related-list li > a:hover { color: var(--ink); }
.case-related-list .case-cite { flex: none; color: var(--ink-muted); font-weight: 400; }
.case-related-all { display: inline-block; font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--gold-deep); font-weight: 700; }
.case-related-all:hover { color: var(--ink); }

.case-foot { margin: 38px 0 6px; padding-top: 22px; border-top: 2px solid var(--gold); }
.case-foot h2 { font-family: var(--serif); font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.surface-paper .case-foot h2 { color: var(--ink); }
.sources p, .byline p { margin: 0 0 6px; font-size: 15px; }
.surface-paper .sources p, .surface-paper .byline p { color: var(--ink-soft); }
.surface-paper .sources a { color: var(--blue-deep); text-decoration: underline; }
.byline { margin-top: 18px; }
.surface-paper .byline strong { color: var(--ink); }
.reviewed { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; }
.surface-paper .reviewed { color: var(--ink-muted); }
.page-disclaimer { margin-top: 16px; font-size: 13.5px; }
.surface-paper .page-disclaimer { color: var(--ink-muted); }
.surface-paper .page-disclaimer a { color: var(--blue-deep); }

/* ---------- Draft banner (paper + navy variants) ---------- */
.draft-banner { border-radius: 2px; padding: 14px 16px; margin: 18px 0 22px; font-size: 14px; line-height: 1.55; }
.surface-paper .draft-banner { background: rgba(168,44,44,.08); border: 1px solid rgba(168,44,44,.3); color: #7f2b2b; }
.surface-paper .draft-banner strong { color: #6a1f1f; }
.draft-banner { background: rgba(224,90,90,.12); border: 1px solid rgba(224,90,90,.4); color: #f0c0c0; }
.draft-banner strong { color: #ffd6d6; }
.draft-banner code { font-family: var(--code); background: rgba(0,0,0,.14); padding: 1px 6px; border-radius: 3px; font-size: .88em; }
.surface-paper .draft-banner code { background: rgba(168,44,44,.12); }

/* ---------- Page head (prose) ---------- */
.page-head { margin-bottom: 10px; }

/* ---------- Author page ---------- */
.author-head { display: flex; gap: 20px; align-items: center; margin: 8px 0 20px; }
.author-photo { border-radius: 2px; object-fit: cover; border: 2px solid var(--gold); }
.author-credential { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; margin: 6px 0 2px; }
.surface-paper .author-credential { color: var(--gold-deep); }
.author-role { font-size: 14px; margin: 0; }
.surface-paper .author-role { color: var(--ink-muted); }
.pill-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list li { font-family: var(--mono); font-size: 13px; border-radius: 2px; padding: 5px 12px; }
.surface-paper .pill-list li { background: var(--paper-2); border: 1px solid var(--paper-edge); color: var(--ink-soft); }

/* ---------- Update page ---------- */
.update-head { padding-top: 6px; }
.update-meta { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; margin: 0 0 24px; }
.surface-paper .update-meta { color: var(--ink-muted); }

/* ---------- Search / 404 (navy) ---------- */
.search-results { margin: 24px 0 40px; min-height: 40vh; }
.search-count { font-family: var(--mono); font-size: 13px; color: var(--on-dark-muted); margin: 0 0 12px; }
.error-page { padding: 44px 24px 64px; text-align: center; }
.error-page .headnote { color: var(--gold); }
.error-page .site-search { margin: 24px auto 30px; }
.error-page .card-grid { text-align: left; margin-top: 20px; }

/* =========================================================
   Footer (navy)
   ========================================================= */
.site-footer { background: var(--navy-deep); border-top: 2px solid var(--gold); padding: 40px 0 30px; }
/* Keep the footer content in a centered column (don't spread edge-to-edge on wide screens) */
.site-footer .container { max-width: 84rem; margin: 0 auto; }
.footer-nav { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding: 6px 0 26px; }
.footer-h { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); margin: 0 0 14px; }
.footer-col a { display: block; color: var(--on-dark-soft); font-size: 14.5px; padding: 4px 0; }
.footer-col a:hover { color: var(--gold); }
.site-footer .legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--on-dark-muted); letter-spacing: .01em; border-top: 1px solid var(--line-dark); padding-top: 18px; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; font-weight: 700; font-size: 15px; letter-spacing: .02em; padding: 13px 24px; border-radius: 4px; text-decoration: none; }
.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover { background: var(--gold-lite); }

/* =========================================================
   Responsive
   ========================================================= */
/* ---------- Mobile nav: animated hamburger + full-screen drawer ---------- */
@media (max-width: 720px) {
  .site-header .container { padding: 12px 16px; gap: 10px; flex-wrap: nowrap; }
  .brand { position: relative; z-index: 62; }
  .brand .brand-logo { height: 50px; }

  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 46px; height: 46px; margin: 0 -8px 0 0; padding: 0; background: none; border: 0; cursor: pointer;
    position: relative; z-index: 62;
  }
  .nav-toggle-bar { width: 26px; height: 2px; background: var(--gold-lite); border-radius: 2px;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .14s ease; }
  body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(.2); }
  body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .main-nav {
    position: fixed; inset: 0; z-index: 55;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: clamp(0.3rem, 1.4vh, 0.9rem);
    padding: 6.25rem clamp(1.75rem, 8vw, 3rem) 2.5rem;
    background: radial-gradient(135% 90% at 100% 0%, #0b2c60 0%, var(--navy-deep) 58%);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .14s ease, transform .2s cubic-bezier(.2,.8,.2,1), visibility 0s linear .2s;
  }
  body.nav-open .main-nav {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .14s ease, transform .2s cubic-bezier(.2,.8,.2,1), visibility 0s;
  }
  .main-nav a {
    font-family: var(--serif); font-size: clamp(1.9rem, 8.5vw, 3rem); font-weight: 700;
    letter-spacing: -.01em; text-transform: none; color: var(--on-dark); line-height: 1.04; padding: .12em 0;
    opacity: 0; transform: translateY(10px);
    transition: opacity .16s ease, transform .18s cubic-bezier(.2,.8,.2,1), color .15s ease;
  }
  body.nav-open .main-nav a { opacity: 1; transform: none; }
  body.nav-open .main-nav a:nth-child(1) { transition-delay: .02s; }
  body.nav-open .main-nav a:nth-child(2) { transition-delay: .045s; }
  body.nav-open .main-nav a:nth-child(3) { transition-delay: .07s; }
  body.nav-open .main-nav a:nth-child(4) { transition-delay: .095s; }
  body.nav-open .main-nav a:nth-child(5) { transition-delay: .12s; }
  body.nav-open .main-nav a:nth-child(6) { transition-delay: .145s; }
  body.nav-open .main-nav a:hover, body.nav-open .main-nav a:active, body.nav-open .main-nav a:focus-visible {
    color: var(--gold-lite); transform: translateX(9px);
  }
  .nav-tagline {
    display: block; margin-top: auto; padding-top: 1.5rem; font-family: var(--serif); font-style: italic;
    font-size: 1.15rem; color: var(--gold);
    opacity: 0; transition: opacity .18s ease .15s;
  }
  body.nav-open .nav-tagline { opacity: 1; }

  body.nav-open { overflow: hidden; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .brand .brand-logo { height: 50px; }
  .hero {
    background-image: linear-gradient(180deg, rgba(4,18,43,.76), rgba(4,18,43,.9)), url(/assets/hero-bg-mobile.jpg);
    background-image: linear-gradient(180deg, rgba(4,18,43,.76), rgba(4,18,43,.9)), image-set(url(/assets/hero-bg-mobile.webp) type("image/webp"), url(/assets/hero-bg-mobile.jpg) type("image/jpeg"));
  }
  .site-search { flex-direction: column; }
  .surface-paper .container-reading { padding: 14px 22px 44px; }
  .author-head { flex-direction: column; text-align: center; align-items: center; }
  .update-list time { display: block; min-width: 0; margin-bottom: 2px; }
}

/* Short viewports (landscape phones, short windows) — size the hero by height so it stays compact */
@media (max-height: 560px) {
  .hero { padding: clamp(1rem, 4vh, 2.25rem) 0; }
  .badge-hero { width: clamp(44px, 10vh, 78px); margin-bottom: clamp(0.35rem, 1.4vh, 0.85rem); }
  .tagline { font-size: clamp(0.9rem, 3.6vh, 1.4rem); margin-bottom: clamp(0.2rem, 1vh, 0.6rem); }
  .hero h1 { font-size: clamp(2rem, 13.5vh, 6rem); }
  .hero .hero-subhead { font-size: clamp(1rem, 5vh, 1.7rem); margin-bottom: clamp(0.5rem, 1.6vh, 1rem); }
  .hero .lede { font-size: clamp(0.95rem, 3.6vh, 1.3rem); }
  .hero .rule { margin-top: clamp(0.9rem, 2.4vh, 1.6rem); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Case-page right rail — a vertical ad slot (~300x600) beside the opinion.
   Sticky so it rides along on long opinions; hidden when the viewport can't
   fit a rail beside the reading column. adRail.json drives the content. */
.case-rail { display: none; }
@media (min-width: 1024px) {
  .case-layout {
    /* Full-width grid: the rail hugs the right edge of the screen and the
       article centers itself in the space that remains. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(1rem, 1.8vw, 2rem);
    align-items: start;
    padding-right: 16px;
  }
  .case-layout > .container-reading { min-width: 0; }
  .case-rail {
    display: block;
    position: sticky;
    top: 124px; /* clear the 104px sticky header, plus a gap */
    padding: 26px 20px 0 0;
  }
}
.rail-eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted);
  text-align: center; margin: 0 0 8px;
}
.rail-house {
  display: flex; flex-direction: column; justify-content: center; gap: .9rem;
  width: 300px; height: 600px; padding: 2rem 1.7rem; text-align: center;
  background: var(--navy-panel); border: 1px solid var(--line-dark);
  border-radius: 4px; transition: border-color .15s ease;
}
.rail-house:hover { border-color: var(--gold); }
.rail-house-heading { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--white); letter-spacing: -.01em; }
.rail-house-text { color: var(--on-dark-soft); font-size: .95rem; line-height: 1.55; }
.rail-house-cta { font-family: var(--mono); font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gold); }
.rail-banner img, .rail-embed { display: block; width: 300px; border: 1px solid var(--line-dark); border-radius: 4px; }

/* Case-page left sidenav — the taxonomy, one glance away. Current pillar
   expands its subtopics; the rest stay one click deep. Appears only when
   three columns genuinely fit. */
.case-sidenav { display: none; }
@media (min-width: 1360px) {
  .case-layout { grid-template-columns: 236px minmax(0, 1fr) 300px; padding-left: 16px; }
  .case-sidenav {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 124px;
    padding: 26px 0 0 8px;
    max-height: calc(100vh - 140px);
  }
  /* The accordion scrolls internally; the ad below it stays visible. */
  .case-sidenav nav { overflow-y: auto; scrollbar-width: thin; flex: 1 1 auto; min-height: 0; }
}
.sidenav-eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted);
  margin: 0 0 12px;
}
.sidenav-pillar { margin: 0 0 12px; }
.sidenav-pillar-link {
  font-family: var(--serif); font-weight: 700; font-size: .98rem;
  color: var(--on-dark-soft); letter-spacing: -.005em;
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px;
  user-select: none;
}
.sidenav-pillar-link::-webkit-details-marker { display: none; }
.sidenav-pillar-link::before {
  content: "\25B8"; /* caret, rotates when open */
  font-size: .72rem; color: var(--gold);
  transition: transform .15s ease; transform-origin: 45% 55%;
}
.sidenav-pillar[open] > .sidenav-pillar-link::before { transform: rotate(90deg); }
.sidenav-pillar-link:hover { color: var(--gold); }
.sidenav-pillar-link.is-current { color: var(--white); }
.sidenav-all { font-style: italic; }
.sidenav-subs { list-style: none; margin: 8px 0 0 5px; padding: 0 0 0 14px; border-left: 1px solid var(--line-dark); }
.sidenav-subs li { margin: 0 0 7px; }
.sidenav-subs a { font-size: .86rem; color: var(--on-dark-muted); line-height: 1.35; }
.sidenav-subs a:hover { color: var(--gold); }
.sidenav-subs a.is-here { color: var(--gold); font-weight: 700; }

/* Small ad under the Browse Topics sidenav (left column, case pages). */
.sidenav-ad { margin-top: 18px; padding: 0 10px 6px 0; flex: 0 0 auto; }
.sidenav-ad .sidenav-eyebrow { margin-bottom: 8px; }
.rail-house--side {
  width: 100%; height: auto; min-height: 208px;
  padding: 1.5rem 1.2rem; gap: .65rem;
}
.rail-house--side .rail-house-heading { font-size: 1.15rem; }
.rail-house--side .rail-house-text { font-size: .84rem; line-height: 1.5; }
.rail-house--side .rail-house-cta { font-size: .7rem; }
.rail-banner--side img, .rail-embed--side { width: 100%; height: auto; }

/* Compact newsletter band for case + hub pages (the homepage keeps the full
   size). A gold hairline separates it from the content above. */
.newsletter-compact { padding: 1.9rem 0 2.3rem; border-top: 1px solid var(--gold); margin-top: clamp(2.25rem, 4.5vh, 3.5rem); }
.newsletter-compact .headnote { margin-top: 0; margin-bottom: 6px; }
.newsletter-compact .section-h { font-size: clamp(1.25rem, 1.8vw, 1.6rem); margin: 0 0 .45rem; }
.newsletter-compact .newsletter-lede { font-size: .92rem; margin: 0 auto 1.1rem; }
.newsletter-compact .newsletter-form input { padding: 10px 14px; font-size: 14px; }
.newsletter-compact .newsletter-form button { padding: 10px 18px; font-size: 14px; }
.newsletter-compact .newsletter-note { font-size: .72rem; margin-top: .6rem; }

/* Mobile ad slots on case pages — only when the side rails are hidden.
   Top slot sits on the navy above the paper card; bottom slot sits between
   the card and the newsletter band. */
.case-ad-mobile { display: none; }
@media (max-width: 1023.98px) {
  .case-ad-mobile { display: block; padding: 18px clamp(1rem, 4vw, 2rem) 22px; }
  .case-ad-mobile--top { padding-top: 6px; }
  /* Tuck the top ad right under the nav on phones; no dead space above
     the footer either. */
  .surface-paper main { padding-top: 8px; padding-bottom: 10px; }
  .case-ad-mobile--bottom { padding-top: 28px; padding-bottom: 6px; }
  .case-ad-mobile .sidenav-eyebrow { text-align: center; margin: 0 0 7px; }
}
.rail-house--mobile {
  width: 100%; max-width: 430px; margin: 0 auto; height: auto; min-height: 0;
  padding: 1rem 1.15rem; gap: .4rem;
}
.rail-house--mobile .rail-house-heading { font-size: 1.02rem; }
.rail-house--mobile .rail-house-text { font-size: .8rem; line-height: 1.45; }
.rail-house--mobile .rail-house-cta { font-size: .68rem; }
.rail-banner--mobile img, .rail-embed--mobile {
  display: block; margin: 0 auto; max-width: 100%; height: auto;
  border: 1px solid var(--line-dark); border-radius: 4px;
}

/* =========================================================
   Account chip (masthead) — signed-out: "Sign in"; signed-in:
   the member's first name with an on-duty dot.
   ========================================================= */
.nav-auth {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-lite);
  border: 1px solid rgba(227, 200, 119, .5); border-radius: 3px;
  /* Optical centering: uppercase caps ignore the descender space the line
     box reserves, so symmetric padding reads "box too low". Extra top
     padding drops the caps to the true middle. */
  line-height: 1; padding: 10px 15px 6px; white-space: nowrap;
  position: relative; z-index: 62;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
/* Invisible tap-area extension: the chip stays visually compact but meets
   the 44px touch minimum. */
.nav-auth::after { content: ""; position: absolute; inset: -6px; }
.nav-auth:hover { color: var(--navy-deep); background: var(--gold-lite); border-color: var(--gold-lite); }
/* Signed-in chip. .has-session is on <html> before first paint, so the chip is
   styled correctly from the start rather than restyling once JS confirms the
   session — and both selectors carry the same rules, so they can't drift or
   fight over padding. */
.nav-auth.is-authed,
.has-session .nav-auth {
  text-transform: none; letter-spacing: .02em; font-family: var(--serif);
  font-size: 14.5px; padding: 8px 14px; line-height: 1.1;
}
.nav-auth.is-authed::before,
.has-session .nav-auth::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #35a55c; box-shadow: 0 0 0 2px rgba(53, 165, 92, .22);
  /* Optical, not geometric: the line box reserves descender room this name
     mostly doesn't use, so a centred dot reads low beside the capitals. */
  transform: translateY(-1px);
}
@media (min-width: 721px) { .main-nav { margin-left: auto; } }
@media (max-width: 720px) {
  .nav-auth { order: 5; margin-left: auto; padding: 8px 11px 5px; font-size: 11px; }
  .nav-auth.is-authed, .has-session .nav-auth { font-size: 13.5px; padding: 6px 11px; }
  .site-header .nav-toggle { order: 6; }
}

/* =========================================================
   /account/ — the member file. A court-record card with
   file-folder tabs: Sign in | Create account.
   ========================================================= */
.account-page main { min-height: 62vh; }
.account-wrap { max-width: 30.5rem; margin: 0 auto; padding: clamp(1.6rem, 5vh, 3.4rem) 0 12px; }
.account-wrap .headnote { text-align: center; margin: 0 0 16px; }

.account-card {
  background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 3px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .45);
}

/* File-folder tabs — equal width, equal height; the active tab connects to
   the paper below, the inactive one sits recessed on the manila strip. */
.file-tabs {
  display: flex; gap: 8px; padding: 12px 14px 0;
  background: var(--paper-2); border-bottom: 1px solid var(--paper-edge);
  border-radius: 3px 3px 0 0;
}
.file-tab {
  appearance: none; cursor: pointer; position: relative; top: 1px;
  flex: 1 1 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--paper-edge); border-bottom: 0; border-radius: 7px 7px 0 0;
  background: #e6ddc8; color: var(--ink-soft);
  font-family: var(--sans); font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
  padding: 11px 12px;
}
.file-tab:not(.is-active) { box-shadow: inset 0 -1px 0 var(--paper-edge); }
.file-tab:not(.is-active):hover { background: #ece4d1; }
.file-tab.is-active { background: var(--paper); color: var(--ink); }
.file-tab:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* Mobile: the folder tabs become a full-bleed segmented header — edge to
   edge with the card, a gold bar marking the active side. Flows as one
   piece with the card instead of two boxes on a strip. */
@media (max-width: 640px) {
  .file-tabs { padding: 0; gap: 0; border-bottom: 0; }
  .file-tab {
    top: 0; min-height: 50px; padding: 11px 8px;
    border: 0; border-bottom: 1px solid var(--paper-edge); border-radius: 0;
    box-shadow: none;
  }
  .file-tab + .file-tab { border-left: 1px solid var(--paper-edge); }
  .file-tab:first-child { border-top-left-radius: 2px; }
  .file-tab:last-child { border-top-right-radius: 2px; }
  .file-tab.is-active {
    border-bottom-color: transparent;
    box-shadow: inset 0 3px 0 var(--gold);
  }
}

.account-card-body { padding: 22px 24px 26px; }

/* Both tab panels occupy the same grid cell, so the card keeps one height
   (the taller panel's) when switching between Sign in and Create account —
   no resize jump. The hidden panel keeps its space, invisibly. */
.tab-panels { display: grid; }
.tab-panels > form { grid-area: 1 / 1; }
.tab-panels > form[hidden] { display: block; visibility: hidden; pointer-events: none; }

/* The sign-in panel is shorter than the register panel it shares a cell
   with; flex lets the disclaimer settle at the bottom of the spare room. */
#panel-signin { display: flex; flex-direction: column; }
.panel-disclaimer {
  margin: 14px 0 0; padding-top: 12px; margin-top: auto;
  text-align: center; font-size: 12.5px; line-height: 1.55; color: var(--ink-muted);
}
.panel-disclaimer a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 2px; }
.panel-disclaimer a:hover { color: var(--ink); }

/* Google */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%;
  min-height: 48px; padding: 10px 16px;
  background: var(--white); border: 1px solid var(--paper-edge); border-radius: 3px;
  font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.btn-google:hover { border-color: var(--ink-muted); box-shadow: 0 1px 6px rgba(20, 22, 30, .12); }

.account-divider {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 14px;
  color: var(--ink-muted); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase;
}
.account-divider::before, .account-divider::after { content: ""; height: 1px; flex: 1; background: var(--rule-ink); }

/* Fields — docket-label voice */
.field { display: block; margin: 0 0 14px; }
.field-label {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 6px;
}
.field input {
  width: 100%; min-height: 48px; padding: 10px 13px;
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--paper-edge); border-radius: 3px;
}
.field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.field-hint { display: block; font-size: 12.5px; color: var(--ink-muted); margin-top: 5px; }
.field-hint[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .field-row { grid-template-columns: 1fr; } }

.btn-submit {
  width: 100%; min-height: 48px; margin-top: 6px; padding: 12px 16px;
  background: var(--gold); color: var(--navy-deep); border: 0; border-radius: 3px;
  font-family: var(--sans); font-size: 15.5px; font-weight: 700; letter-spacing: .02em; cursor: pointer;
}
.btn-submit:hover { background: var(--gold-lite); }
.btn-submit[disabled] { opacity: .55; cursor: default; }

.link-quiet {
  display: block; margin: 4px auto 0; padding: 10px 12px; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; color: var(--blue-deep); text-decoration: underline;
  text-underline-offset: 2px;
}
.link-quiet:hover { color: var(--ink); }

/* Messages — slide in softly; typing again clears them (account.js) */
.account-msg { padding: 11px 14px; margin: 0 0 14px; border: 1px solid; border-radius: 3px; font-size: 14.5px; line-height: 1.5; animation: msg-in .18s ease-out; }
@keyframes msg-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .account-msg { animation: none; } }
.account-msg.is-error { background: rgba(168, 44, 44, .09); border-color: rgba(168, 44, 44, .32); color: #8c2626; }
.account-msg.is-ok { background: rgba(34, 120, 64, .1); border-color: rgba(34, 120, 64, .3); color: #1f6a38; }

/* Signed-in view — a docket entry */
.account-signedin { padding: 26px 26px 24px; margin-bottom: 18px; }
.account-h { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--ink); margin: 0 0 16px; }
.account-docket { margin: 0 0 16px; border-top: 1px solid var(--rule-ink); }
.account-docket > div { display: flex; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--rule-ink); }
.account-docket dt {
  flex: 0 0 74px; padding-top: 3px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep);
}
.account-docket dd {
  margin: 0; font-size: 16px; color: var(--ink); flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-note { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 4px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.btn-paper {
  display: inline-block; padding: 10px 16px; border: 1px solid var(--gold-deep); border-radius: 3px;
  font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--gold-deep); white-space: nowrap;
}
.btn-paper:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.btn-ghost {
  padding: 10px 16px; background: none; border: 1px solid var(--paper-edge); border-radius: 3px;
  font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer;
  white-space: nowrap;
}
.btn-ghost:hover { border-color: #a12c2c; color: #a12c2c; }

.account-smallprint { max-width: 30.5rem; margin: 16px auto 0; text-align: center; font-size: 12.5px; color: var(--on-dark-muted); }
.account-smallprint a { color: var(--on-dark-soft); text-decoration: underline; text-underline-offset: 2px; }
.account-smallprint a:hover { color: var(--white); }

/* =========================================================
   AI case brief — the interactive (blue) voice, distinct from
   the gold authority elements. Sits at the top of every case.
   ========================================================= */
.ai-brief {
  margin: 4px 0 24px;
  background: linear-gradient(0deg, rgba(22, 78, 147, .05), rgba(22, 78, 147, .05)), var(--paper-2);
  border: 1px solid var(--paper-edge); border-left: 5px solid var(--blue-deep); border-radius: 2px;
  transition: border-color .35s ease, box-shadow .35s ease;
}
/* Open: the same card keeps growing, so the blue spine runs the full height
   of the brief. A touch more edge and lift marks it as the live element. */
.ai-brief.is-open {
  border-color: rgba(22, 78, 147, .3); border-left-color: var(--blue-deep);
  box-shadow: 0 2px 14px rgba(20, 34, 56, .07);
}
.ai-brief-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 13px 16px;
}
.ai-brief-eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue-deep); margin: 0 0 3px;
}
/* Marks the tier, for members and non-members alike — gold, like every other
   authority mark on the site. Static, so there is never a wrong-state flash. */
.pill-pro {
  display: inline-block; margin-left: 7px; padding: 3px 6px 2px; vertical-align: 1px;
  border-radius: 2px; line-height: 1;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
  background: rgba(154, 116, 32, .14); color: var(--gold-deep); border: 1px solid rgba(154, 116, 32, .35);
}
.ai-brief-line { font-size: 14px; line-height: 1.45; color: var(--ink-soft); margin: 0; }
/* When a brief can't be delivered the card says so here, in place of the
   description line — one box, one message, one button. */
.ai-brief-alert {
  margin: 0; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--ink);
  animation: msg-in .22s ease-out;
}
.ai-brief-alert.is-fail { color: #8c2626; }
/* [hidden] loses to the display rules below without this. */
.ai-brief-alert[hidden], .ai-brief-line[hidden], .ai-brief-btn[hidden] { display: none; }
.ai-brief-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 10px 18px; white-space: nowrap;
  background: var(--blue-deep); color: var(--white); border-radius: 3px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.ai-brief-btn:hover { background: #1b5cad; color: var(--white); }
.ai-brief-btn:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
/* Once the brief is on screen the button has done its job — it steps back to
   an outline so the reading surface, not the control, holds the weight. */
.ai-brief.is-open .ai-brief-btn {
  background: transparent; color: var(--blue-deep); box-shadow: inset 0 0 0 1px rgba(22, 78, 147, .38);
}
.ai-brief.is-open .ai-brief-btn:hover { background: rgba(22, 78, 147, .08); color: var(--blue-deep); }

/* The brief unfolds inside the card: a grid-rows collapse (0fr → 1fr animates
   to the content's real height) so the card itself grows. Everything lives
   inside the collapsing area, so the closed state is truly zero-height. */
.ai-brief-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .46s cubic-bezier(.2, .8, .2, 1);
}
.ai-brief-panel.is-open { grid-template-rows: 1fr; }
.ai-brief-collapse { overflow: hidden; min-height: 0; }
.ai-brief-box {
  margin: 0 16px 15px; padding-top: 13px;
  border-top: 1px solid rgba(22, 78, 147, .2);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s ease .08s, transform .36s cubic-bezier(.2, .8, .2, 1) .05s;
}
.ai-brief-panel.is-open .ai-brief-box { opacity: 1; transform: none; }

/* Loading / error line with an indeterminate shimmer */
.ai-brief-status { display: block; padding: 2px 0 8px; }
/* Block, so a retry control never wraps into the middle of the message. */
.ai-brief-status [data-ai-status-text] { display: block; font-size: 14px; color: var(--ink-soft); }
.ai-brief-shimmer {
  display: block; height: 2px; margin: 10px 0 2px; border-radius: 1px;
  background:
    linear-gradient(90deg, transparent 0%, var(--blue-deep) 35%, var(--blue-deep) 65%, transparent 100%)
    left / 40% 100% no-repeat, rgba(22, 78, 147, .14);
  animation: brief-scan 1.15s ease-in-out infinite;
}
@keyframes brief-scan {
  0% { background-position: -40% 0, 0 0; }
  100% { background-position: 140% 0, 0 0; }
}
.ai-brief-panel.is-loading .ai-brief-shimmer { display: block; }
.ai-brief-status[hidden] { display: none; }
.ai-brief-panel:not(.is-loading) .ai-brief-shimmer { display: none; }

/* The brief itself — readable, paragraph-first. Blocks are rendered
   incrementally, so only newly arrived ones play the entrance. */
.ai-brief-body > * { animation: brief-block-in .28s ease both; }
@keyframes brief-block-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
.ai-brief-body .brief-h {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue-deep); margin: 16px 0 6px;
}
.ai-brief-body .brief-h:first-child { margin-top: 2px; }
.ai-brief-body .brief-p { font-size: 15.5px; line-height: 1.68; color: var(--ink-soft); margin: 0 0 10px; }
.ai-brief-body .brief-b {
  position: relative; padding-left: 20px; margin: 0 0 7px;
  font-size: 15.5px; line-height: 1.6; color: var(--ink-soft);
}
.ai-brief-body .brief-b::before { content: "—"; position: absolute; left: 0; color: var(--blue-deep); }
.ai-brief-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--rule-ink);
}
.ai-brief-foot[hidden] { display: none; }
.ai-brief-foot-note {
  margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--ink-muted);
}
/* A brief runs longer than a screen — closing it should not mean scrolling
   back to the top to find the button that opened it. */
.brief-collapse {
  flex: none; padding: 4px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--blue-deep);
  white-space: nowrap; text-decoration: underline; text-underline-offset: 3px;
}
.brief-collapse:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .ai-brief, .ai-brief-panel, .ai-brief-box, .ai-brief-btn { transition: none; }
  .ai-brief-shimmer, .ai-brief-body > *, .ai-brief-alert { animation: none; }
}
@media (max-width: 640px) {
  .ai-brief-head { flex-direction: column; align-items: stretch; gap: 12px; padding: 13px 13px 14px; }
  .ai-brief-btn { width: 100%; }
  .ai-brief-box { margin: 0 13px 14px; padding-top: 13px; }
  /* On a phone the brief is the page's main reading surface — set it at the
     same size as the opinion it summarizes, not one notch smaller. */
  .ai-brief-body .brief-p, .ai-brief-body .brief-b { font-size: 16.5px; line-height: 1.62; }
  .ai-brief-body .brief-b { padding-left: 19px; }
  .ai-brief-body .brief-h { margin: 18px 0 7px; }
  .ai-brief-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .ai-brief-status [data-ai-status-text] { font-size: 15px; }
  /* A real tap target rather than a text link on a phone. */
  .brief-collapse {
    display: block; width: 100%; min-height: 44px;
    padding: 12px 0; text-align: center; text-decoration: none;
    border: 1px solid rgba(22, 78, 147, .32); border-radius: 3px;
  }
}

/* Signed-in: Settings + Subscription panels */
.account-panel { padding: 20px 24px 24px; margin-bottom: 16px; }
.panel-eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-ink);
}
/* [hidden] loses to any class that sets display. That has now caught the AI
   brief button, the Pro pill, the billing CTA and these rows — so every class
   below that sets display carries its own guard. */
.setting-row[hidden], .btn-submit[hidden] { display: none; }
/* The Google row carries a whole sentence and a full email address, which the
   two-column layout squeezes into an ellipsis on a phone. Give it the width. */
.setting-row[data-row="google"] { align-items: flex-start; flex-wrap: wrap; }
.setting-row[data-row="google"] .setting-value {
  white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word;
}
@media (max-width: 560px) {
  .setting-row[data-row="google"] { flex-direction: column; gap: 8px; }
  .setting-row[data-row="google"] .setting-change { align-self: flex-start; }
}
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0; border-top: 1px solid var(--rule-ink); margin-top: 4px;
}
.setting-row.is-first { border-top: 0; padding-top: 2px; margin-top: 0; }
.setting-info { min-width: 0; }
.setting-info .field-label { margin-bottom: 3px; }
.setting-value {
  display: block; font-size: 15.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* An email is the one value here worth reading in full — ellipsising it to
   "william.ojakian@gmail…" tells the reader nothing they didn't know. On a
   phone it wraps instead. */
@media (max-width: 560px) {
  .setting-row[data-row="email"] { align-items: flex-start; }
  .setting-row[data-row="email"] .setting-value {
    white-space: normal; overflow: visible; text-overflow: clip; word-break: break-all;
  }
}
.setting-change { margin: 0; flex-shrink: 0; white-space: nowrap; }
.setting-form { padding: 4px 0 10px; }
.plan-badge {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 12px; line-height: 1; border-radius: 2px; white-space: nowrap;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(34, 120, 64, .14); color: #216c3a; border: 1px solid rgba(34, 120, 64, .3);
}
/* display on the class would otherwise beat [hidden], the same way it did on
   the AI brief button. */
.pill-soon[hidden] { display: none; }
/* Once Pro is live on the account the gold "coming soon" pill turns into the
   same green "included" mark the plan badge uses. */
.pill-soon.is-on {
  background: rgba(34, 120, 64, .14); color: #216c3a; border-color: rgba(34, 120, 64, .3);
}
.account-panel .account-note { margin: 12px 0 14px; }
.account-signout {
  display: block; margin: 4px auto 0; padding: 12px 18px; min-height: 44px; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--on-dark-soft);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.account-signout:hover { color: #e07a7a; }

/* "Keep me signed in" row — checkbox left, forgot link right */
.remember-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.remember-check {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; cursor: pointer;
  font-size: 13.5px; color: var(--ink-soft); white-space: nowrap;
}
.remember-check input {
  width: 17px; height: 17px; margin: 0; cursor: pointer;
  accent-color: var(--gold-deep);
}
.remember-check input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.link-inline { margin: 0; padding: 10px 0; }

/* Settings: the save action sits quiet and right-aligned — a settings
   verb, not the page's headline CTA. */
[data-form="names"] .btn-submit { width: 100%; display: block; padding: 12px 22px; }

/* Subscription: the Pro preview speaks in the AI-blue dashed voice of the
   case-page brief panel — same feature, same language. */
.pro-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 12px; padding: 14px 16px;
  background: rgba(22, 78, 147, .05); border: 1px dashed rgba(22, 78, 147, .38); border-radius: 2px;
}
.pro-row-name {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blue-deep); margin: 0 0 3px;
}
.pro-row-desc { display: block; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.pill-soon {
  flex-shrink: 0; display: inline-flex; align-items: center; padding: 6px 12px; line-height: 1;
  border-radius: 2px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(154, 116, 32, .14); color: var(--gold-deep); border: 1px solid rgba(154, 116, 32, .35);
}
@media (max-width: 460px) {
  .pro-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Billing controls in the Subscription panel */
.billing-cta { width: 100%; margin-top: 16px; }
.billing-cta.is-manage {
  background: none; color: var(--gold-deep); border: 1px solid rgba(154, 116, 32, .4);
}
.billing-cta.is-manage:hover { background: rgba(154, 116, 32, .08); color: var(--gold-deep); }
.billing-cta[hidden] { display: none; }
.billing-note {
  margin: 10px 0 0; text-align: center;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-muted);
}
.billing-note[hidden] { display: none; }
.account-panel .account-msg { margin-top: 16px; }

/* Free-tier counter, under the brief's disclaimer */
.ai-brief-free {
  margin: 8px 0 0; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--gold-deep);
}
.ai-brief-free a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ---- First-paint auth state ----
   .has-session is set by the head script before anything renders, so a
   signed-in visitor never sees the sign-in card flash past on /account/.
   account.js re-asserts the class from the real session, so an expired token
   corrects itself rather than sticking. */
.has-session [data-view="auth"] { display: none; }
.has-session [data-view="signed-in"][hidden] { display: block; }