/* ─────────────────────────────────────────────────────────────────────────────
   Legal Victories — page-legal-victories.php

   The subject is a legal record, so the page is set like one: a serif for the
   case text (it is testimony, quoted verbatim, and reads as evidence), a tight
   sans for structure, and colour used only where it carries meaning. The one
   editorial liberty is the dark sections, which mark the two moments the page
   wants you to stop on — the $6 billion, and the cases still open.

   Prefixed lv- throughout so nothing here can leak into the rest of the theme.
   ────────────────────────────────────────────────────────────────────────── */

.lv{
	--ink:#111318;
	--paper:#fff;
	--deep:#0d1b2a;          /* institutional navy — not the CWD red, which is for alarm */
	--rule:#e3e6ea;
	--muted:#5d6672;
	--accent:#c00;
	--sans:'Open Sans',system-ui,-apple-system,sans-serif;
	--serif:Georgia,'Times New Roman',serif;
	color:var(--ink);
	background:var(--paper);
	font-family:var(--sans);
}

.lv-wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
/* Narrow means a shorter MEASURE, not a different left edge. Constraining the
   wrapper itself re-centred it inside the viewport, so the $6bn block started
   ~215px right of the hero above it and the page looked broken-aligned. Keep the
   wrapper identical and limit the line length of what is inside it instead. */
.lv-wrap--narrow > *{max-width:760px;}

/* ── shared type ────────────────────────────────────────────────────────── */
.lv-eyebrow{font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent);margin:0 0 14px;}
.lv-sec--dark .lv-eyebrow,
.lv-hero .lv-eyebrow{color:#8fb6e0;}
.lv-h2{font-size:clamp(28px,4vw,40px);font-weight:900;letter-spacing:-.5px;line-height:1.12;margin:0 0 14px;}
.lv-sec__intro{font-family:var(--serif);font-size:17px;line-height:1.65;color:var(--muted);max-width:62ch;margin:0 0 36px;}
.lv-sec--dark .lv-sec__intro{color:#b8c4d2;}
.lv-lede{font-family:var(--serif);font-size:20px;line-height:1.6;margin:0 0 18px;}
.lv-body{font-family:var(--serif);font-size:17px;line-height:1.72;color:#333a45;margin:0 0 18px;}

/* ── sections ───────────────────────────────────────────────────────────── */
.lv-sec{padding:88px 0;}
.lv-sec--rule{border-top:1px solid var(--rule);}
.lv-sec--dark{background:var(--deep);color:#fff;}
/* A dark section straight after the dark hero read as one field with a hole in
   it. Tighten the join and mark it with a hairline so the stat is its own beat. */
.lv-hero + .lv-sec--dark{padding-top:56px;}
.lv-hero + .lv-sec--dark .lv-wrap::before{content:'';display:block;width:64px;height:2px;
	background:rgba(255,209,102,.55);margin:0 0 34px;}
.lv-sec--dark .lv-h2{color:#fff;}
.lv-sec--dark .lv-active__head,
.lv-sec--dark .lv-big__cap,
.lv-hero__sub{color:inherit;}
.lv-sec--dark .lv-active__head{color:#fff;}
.lv-hero__sub{color:#c4d0de;}

/* ── hero ───────────────────────────────────────────────────────────────── */
.lv-hero{background:var(--deep);color:#fff;padding:108px 0 64px;position:relative;overflow:hidden;}
/* A faint set of rules behind the hero — the ruled margin of a legal pleading. */
.lv-hero::before{content:'';position:absolute;inset:0;
	background:repeating-linear-gradient(180deg,transparent 0 38px,rgba(255,255,255,.045) 38px 39px);
	pointer-events:none;}
.lv-hero .lv-wrap{position:relative;}
/* The colour MUST be explicit. The theme sets h1{color:#111} directly, and a
   rule on the element beats the white inherited from .lv-hero — which rendered
   the headline in near-black on the navy and made it almost invisible. */
.lv-hero__title{color:#fff;font-size:clamp(34px,6vw,66px);font-weight:900;line-height:1.04;letter-spacing:-1.5px;margin:0 0 22px;max-width:21ch;text-wrap:balance;}
.lv-hero__title span{color:#ffd166;display:block;}
.lv-hero__sub{font-family:var(--serif);font-size:clamp(17px,2vw,20px);line-height:1.62;color:#c4d0de;max-width:56ch;margin:0;}
.lv-hero__cue{margin-top:52px;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#7f8fa3;display:flex;align-items:center;gap:10px;}
.lv-hero__cue span{font-size:16px;animation:lv-bob 1.8s ease-in-out infinite;}
@keyframes lv-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ── the big number ─────────────────────────────────────────────────────── */
.lv-big{font-size:clamp(56px,9vw,112px);font-weight:900;letter-spacing:-3px;line-height:.95;margin:0 0 20px;
	color:#ffd166;font-variant-numeric:tabular-nums;}
.lv-big__cap{font-family:var(--serif);font-size:clamp(17px,2vw,20px);line-height:1.62;color:#c4d0de;max-width:48ch;margin:0;}

/* ── filters ────────────────────────────────────────────────────────────── */
.lv-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px;}
.lv-filter{appearance:none;border:1.5px solid var(--rule);background:#fff;color:var(--muted);
	font-family:var(--sans);font-size:13px;font-weight:700;padding:9px 16px;border-radius:50px;cursor:pointer;
	transition:border-color .2s,color .2s,background .2s;}
.lv-filter:hover{border-color:#aab2bd;color:var(--ink);}
.lv-filter.is-on{background:var(--ink);border-color:var(--ink);color:#fff;}
.lv-filter:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* ── victory cards ──────────────────────────────────────────────────────── */
.lv-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:26px;}
.lv-card{border:1px solid var(--rule);border-top:4px solid var(--accent);border-radius:8px;padding:26px 28px;background:#fff;}
.lv-card[hidden]{display:none;}
.lv-card__amount{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin:0 0 10px;}
.lv-card__head{font-size:19px;font-weight:800;line-height:1.32;margin:0 0 12px;letter-spacing:-.2px;}
.lv-card__body{font-family:var(--serif);font-size:15.5px;line-height:1.68;color:#333a45;margin:0 0 14px;}
/* The citation is the proof. Small, monospaced-feeling, never hidden. */
.lv-card__cite{font-size:12px;line-height:1.55;color:#5d6672;margin:0;padding-top:12px;border-top:1px solid var(--rule);font-variant-numeric:tabular-nums;}
.lv-sec--dark .lv-card__cite{color:#8b97a6;border-top-color:rgba(255,255,255,.14);}
.lv-empty{font-family:var(--serif);color:var(--muted);}

/* ── precedent timeline ─────────────────────────────────────────────────── */
.lv-time{list-style:none;margin:0;padding:0;position:relative;}
/* Geometry, stated once so it cannot drift apart again:
   year column 92px  →  gap 42px  →  body.
   The rail sits at 113px, dead centre of the gap; the 13px dot is centred on it
   at 106.5px. That leaves 14px of clear air after the year, which previously
   ended at 78px with the dot at 73px — punching a hole through the last digit. */
.lv-time::before{content:'';position:absolute;left:113px;top:8px;bottom:8px;width:2px;background:var(--rule);}
.lv-time__item{display:grid;grid-template-columns:92px 1fr;gap:42px;padding:0 0 38px;position:relative;}
.lv-time__year{font-size:15px;font-weight:800;color:var(--ink);margin:0;text-align:right;padding-top:1px;font-variant-numeric:tabular-nums;}
.lv-time__item::after{content:'';position:absolute;left:105px;top:6px;width:13px;height:13px;border-radius:50%;
	background:#fff;border:2.5px solid var(--accent);box-shadow:0 0 0 4px #fff;}
.lv-time__body{padding-bottom:4px;}
.lv-time__name{font-size:17px;font-weight:800;line-height:1.36;margin:0 0 4px;}
.lv-time__cite{font-weight:400;color:var(--muted);font-size:14px;white-space:nowrap;}
.lv-time__role{font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--accent);margin:0 0 8px;}
.lv-time__text{font-family:var(--serif);font-size:15.5px;line-height:1.68;color:#333a45;margin:0;max-width:64ch;}

/* ── active cases ───────────────────────────────────────────────────────── */
.lv-active{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:26px;}
.lv-active__item{border:1px solid rgba(255,255,255,.16);border-left:4px solid #ffd166;border-radius:8px;padding:24px 26px;background:rgba(255,255,255,.04);}
.lv-active__head{font-size:18px;font-weight:800;line-height:1.34;margin:0 0 10px;color:#fff;}
.lv-active__body{font-family:var(--serif);font-size:15.5px;line-height:1.66;color:#c4d0de;margin:0 0 12px;}

/* ── close ──────────────────────────────────────────────────────────────── */
.lv-close{text-align:left;}
.lv-cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0;}
.lv-btn{display:inline-block;padding:14px 24px;background:var(--ink);color:#fff;text-decoration:none;
	border-radius:6px;font-size:13px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;border:2px solid var(--ink);}
.lv-btn:hover{background:#000;color:#fff;}
.lv-btn--ghost{background:transparent;color:var(--ink);}
.lv-btn--ghost:hover{background:var(--ink);color:#fff;}
.lv-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
	.lv-cards{grid-template-columns:1fr;}
	.lv-sec{padding:64px 0;}
}
@media (max-width:620px){
	.lv-hero{padding:80px 0 60px;}
	.lv-time::before{left:6px;}
	.lv-time__item{grid-template-columns:1fr;gap:4px;padding-left:32px;}
	.lv-time__item::after{left:0;top:5px;}
	.lv-time__year{text-align:left;color:var(--accent);}
	.lv-time__cite{white-space:normal;display:block;}
	.lv-card{padding:22px 20px;}
}

/* Motion is decoration here; the record reads the same without it. */
@media (prefers-reduced-motion:reduce){
	.lv-hero__cue span{animation:none;}
}

/* ── link out to the release ─────────────────────────────────────────────── */
.lv-card__more{margin:12px 0 0;font-size:13px;line-height:1.45;}
.lv-card__more a{color:var(--accent);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(204,0,0,.3);}
.lv-card__more a:hover{border-bottom-color:var(--accent);}
.lv-sec--dark .lv-card__more a{color:#ffd166;border-bottom-color:rgba(255,209,102,.35);}
.lv-sec--dark .lv-card__more a:hover{border-bottom-color:#ffd166;}
.lv-card__more a:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* Tighter — Evan 2026-11-02: "the top sections are SOOO huge and we could prob tighten and clean up more".
   Less air everywhere; on phones the hero, the big number and the intro read as one compact opening. */
.lv-sec{padding:60px 0;}
.lv-hero{padding:64px 0 40px;}
.lv-hero + .lv-sec--dark{padding-top:8px;padding-bottom:48px;}
.lv-hero__title{font-size:clamp(30px,4.6vw,52px);margin-bottom:16px;}
.lv-big{font-size:clamp(48px,7vw,84px);margin-bottom:12px;}
.lv-hero__cue{display:none;}
@media (max-width:900px){
	.lv-sec{padding:44px 0;}
}
@media (max-width:620px){
	.lv-wrap{padding:0 16px;}
	.lv-hero{padding:32px 0 20px;}
	.lv-eyebrow{font-size:10px;letter-spacing:1.4px;margin-bottom:10px;}
	.lv-hero__title{font-size:28px;line-height:1.1;letter-spacing:-.6px;margin-bottom:12px;}
	.lv-hero__sub,.lv-big__cap{font-size:15.5px;line-height:1.5;}
	.lv-hero + .lv-sec--dark{padding:4px 0 32px;}
	.lv-hero + .lv-sec--dark .lv-wrap::before{margin-bottom:20px;}
	.lv-big{font-size:46px;letter-spacing:-1.5px;margin-bottom:8px;}
	.lv-sec{padding:36px 0;}
	.lv-h2{font-size:24px;margin-bottom:10px;}
	.lv-lede{font-size:17px;line-height:1.5;margin-bottom:12px;}
	.lv-body,.lv-sec__intro{font-size:15.5px;line-height:1.55;}
	.lv-sec__intro{margin-bottom:22px;}
	.lv-cards{gap:16px;}
	.lv-card{padding:18px 16px;}
	.lv-card__head{font-size:17px;}
	.lv-card__body{font-size:15px;line-height:1.55;}
	.lv-time__item{padding-bottom:26px;}
	.lv-active{gap:16px;}
	.lv-active__item{padding:18px 16px;}
}