/* reports.transliberty.org — INDEX (publication front page)
   Self-contained. Chrome rules copied verbatim from the report's
   scotus-2026.css (tokens, fonts, field/grain, masthead, sheet, buttons,
   paper-tile/dogear, pitch, footer, cover/flame). Index-specific layout
   (hero + reports cards) added at the end. Report-only systems (prose,
   caseband, jspectrum, usmap, footnotes, toc, lcv, etc.) are omitted. */

/* ---- fonts ---- */
@font-face { font-family: "Oswald"; font-weight: 500; font-display: swap; src: url("/fonts/oswald-v57-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 600; font-display: swap; src: url("/fonts/oswald-v57-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 700; font-display: swap; src: url("/fonts/oswald-v57-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 300; font-display: swap; src: url("/fonts/public-sans-v21-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400; font-display: swap; src: url("/fonts/public-sans-v21-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/public-sans-v21-latin-italic.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 600; font-display: swap; src: url("/fonts/public-sans-v21-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 700; font-display: swap; src: url("/fonts/public-sans-v21-latin-700.woff2") format("woff2"); }

/* ---- :root tokens ---- */
:root {
  --navy: #013B58; --navy-deep: #01293D; --paper: #FAF7F1; --ink: #3B4453; --ink-soft: #57606F;
  --violet: #784DA0; --violet-text: #6B4490; --magenta: #C34A87; --magenta-text: #A23068;
  --teal: #2578A2; --lavender: #7F85B5; --lavender-text: #5C6391; --gold: #D4A843; --alarm: #7E1801;
  --hairline: color-mix(in oklab, var(--paper), var(--navy) 14%);
  --hairline-soft: color-mix(in oklab, var(--paper), var(--navy) 8%);
  --paper-raised: color-mix(in oklab, var(--paper), white 55%);
  --paper-well: color-mix(in oklab, var(--paper), var(--navy) 5%);
  --gradient: linear-gradient(90deg, var(--teal), var(--lavender), var(--magenta));
  --oswald: "Oswald", "Arial Narrow", sans-serif; --sans: "Public Sans", system-ui, sans-serif;
  --step-0: 1.0625rem; --step-1: calc(var(--step-0) * 1.25); --step-2: calc(var(--step-1) * 1.25); --step-3: calc(var(--step-2) * 1.25);
  --measure: 687px; --wide: 980px; --content-max: 1200px; --sheet-pad-inline: clamp(20px, 4vw, 64px);
  --shadow-sheet: 0 -1px 2px oklch(0 0 0 / 0.12), 0 4px 12px oklch(0 0 0 / 0.18), 0 24px 64px oklch(0 0 0 / 0.28);
  --shadow-raised: 0 1px 2px oklch(0 0 0 / 0.06), 0 4px 12px oklch(0 0 0 / 0.08), 0 16px 32px oklch(0 0 0 / 0.06);
}
@media (min-width: 920px) { :root { --measure: 820px; --wide: 1140px; } }

/* ---- base / reset + a11y helpers ---- */
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { scroll-padding-top: 24px; }
body {
  margin: 0; background: var(--navy-deep); color: var(--ink); font-family: var(--sans);
  font-size: var(--step-0); line-height: 1.6; font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.on-navy :focus-visible { outline-color: #9ED7F3; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--paper); color: var(--navy); font-family: var(--oswald); font-weight: 600; padding: 12px 20px; text-decoration: none; }
.skip-link:focus { left: 12px; top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

/* ---- grain field ---- */
.field { position: relative; }
.field::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: .035; }
.field > * { position: relative; z-index: 1; }

/* ---- caps / label-caps ---- */
.caps { font-family: var(--oswald); font-weight: 500; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; font-feature-settings: "case" 1; }
.label-caps { font-family: var(--oswald); font-weight: 600; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; font-feature-settings: "case" 1; }

/* ---- masthead (two-tier) ---- */
.mh-util { background: rgba(0,0,0,.18); border-bottom: 1px solid rgba(255,255,255,.10); }
.mh-util-inner { max-width: 1140px; margin: 0 auto; padding: 8px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; font-family: var(--oswald); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-feature-settings: "case" 1; }
.mh-group { display: flex; align-items: center; gap: 16px; }
.mh-link { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.66); text-decoration: none; white-space: nowrap; }
.mh-link:hover { color: #fff; }
.mh-link .ico { font-size: 13px; line-height: 1; }
.mh-flip { color: rgba(255,255,255,.55); }
.mh-flip .ico { font-size: 14px; }
.mh-sep { width: 1px; height: 13px; background: rgba(255,255,255,.20); }
.mh-band { padding-bottom: 4px; }
.mh-band-inner { max-width: 1140px; margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; justify-content: center; }
.mh-logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.mh-logo img { height: 48px; width: auto; display: block; }
.mh-wordmark { font-family: var(--oswald); font-weight: 700; font-size: 21px; letter-spacing: .14em; text-transform: uppercase; color: #fff; line-height: 1; }
@media (max-width: 640px) { .mh-band-inner { padding: 14px 20px; } .mh-logo img { height: 40px; } .mh-wordmark { font-size: 17px; } .mh-util-inner { padding: 8px 20px; } }

/* ---- sheet (the floating paper panel) ---- */
.sheet { position: relative; z-index: 2; background: var(--paper); max-width: 1320px; margin: 0 auto; border-top: 4px solid; border-image: var(--gradient) 1; box-shadow: var(--shadow-sheet); overflow: hidden; overflow: clip; }
.sheet-pad { padding: 48px var(--sheet-pad-inline) 88px; }

/* ---- buttons ---- */
.btn { display: inline-block; font-family: var(--oswald); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; font-feature-settings: "case" 1; text-decoration: none; padding: 12px 24px; }
.btn-solid { background: var(--magenta); color: #fff; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.18); }
.btn-solid:hover { background: color-mix(in oklab, var(--magenta), black 12%); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.btn-ghost:hover { border-color: #fff; }
.ghost-navy { border: 1.5px solid var(--navy); color: var(--navy); }
.ghost-navy:hover { background: color-mix(in oklab, var(--navy), var(--paper) 92%); }

/* ---- paper tile + dog-ear ---- */
.paper-tile { position: relative; background: #FFFDF8; border: 1px solid var(--hairline-soft); box-shadow: 8px 8px 0 rgba(1, 59, 88, 0.10); }
.paper-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: 0.03; }
.paper-tile.dogear { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); box-shadow: none; outline: 1px solid var(--hairline-soft); }
.paper-tile.dogear::before { content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px; background: linear-gradient(225deg, transparent 50%, rgba(1, 59, 88, 0.14) 50%, rgba(1, 59, 88, 0.06) 72%, transparent 72%); }

/* ---- reading progress (optional, no-op until the page scrolls) ---- */
.readline { display: none; }
@supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) {
  .readline { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--gradient); transform-origin: 0 50%; transform: scaleX(0); animation: readline-grow linear both; animation-timeline: scroll(root block); z-index: 90; pointer-events: none; }
} }
@keyframes readline-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- cover / hero shared rules (flame + folio) ---- */
.cover { color: #fff; padding: 24px 28px 56px; position: relative; overflow: hidden; }
.cover-inner { max-width: 1140px; margin: 0 auto; position: relative; }
.cover .flame { position: absolute; right: -130px; bottom: -170px; width: 560px; height: 560px; fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 0.6; pointer-events: none; }
.folio { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-top: 3px solid rgba(255, 255, 255, 0.9); border-bottom: 1px solid rgba(255, 255, 255, 0.28); padding: 9px 0 10px; margin: 0 0 30px; font-family: var(--oswald); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-feature-settings: "case" 1; font-variant-numeric: tabular-nums; }
.folio-kicker { color: #E68AB8; }
.folio-date { color: rgba(255, 255, 255, 0.6); }
.cover h1 { font-family: var(--oswald); font-weight: 700; text-transform: uppercase; width: 100%; font-size: clamp(32px, 7vw, 88px); line-height: 1.0; margin: 0 0 30px; }
.standfirst { font-weight: 300; font-size: clamp(20px, 2.5vw, 24px); line-height: 1.45; color: rgba(255, 255, 255, 0.88); margin: 0 0 36px; display: block; max-width: 960px; }
.standfirst p { margin: 0; }
.scrollcue { margin: 36px 0 0; font-family: var(--oswald); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; font-feature-settings: "case" 1; color: rgba(255, 255, 255, 0.45); }
@media (max-width: 640px) {
  .cover .flame { width: 320px; height: 320px; right: -86px; bottom: -120px; }
}

/* ---- pitch / letter ---- */
.pitch { padding: 72px 28px 8px; }
.letter-shadow { max-width: 720px; margin: 0 auto; filter: drop-shadow(10px 10px 0 rgba(1, 30, 45, 0.55)); }
.letter { padding: 36px clamp(28px, 5vw, 52px) 40px; position: relative; }
.letter > * { position: relative; z-index: 1; }
.letter .roundel { display: block; margin: 0 0 18px; }
.letter .from { color: var(--magenta-text); margin: 0 0 18px; }
.letter .from::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 10px; background: var(--gradient); }
.letter h2 { font-family: var(--oswald); font-weight: 700; text-transform: uppercase; color: var(--navy); font-size: clamp(24px, 3vw, 34px); line-height: 1.1; margin: 0 0 18px; }
.letter .para { max-width: 60ch; font-size: 16.5px; line-height: 1.62; color: var(--ink); margin: 0 0 1.1em; }
.letter .cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 26px 0 30px; }
.letter .ghost-navy { border: 1.5px solid var(--navy); color: var(--navy); }
.letter .ghost-navy:hover { background: color-mix(in oklab, var(--navy), var(--paper) 92%); }
.letter .signoff { font-style: italic; color: var(--navy); margin: 0; line-height: 1.5; }

/* ---- footer ---- */
.sitefoot { color: rgba(255, 255, 255, 0.78); padding: 64px 28px 72px; font-size: 14px; line-height: 1.7; }
.foot-inner { max-width: 720px; margin: 0 auto; }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 18px 32px; flex-wrap: wrap; }
.sitefoot img { height: 36px; width: auto; }
.foot-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.sitefoot .signoff { font-style: italic; color: rgba(255, 255, 255, 0.88); margin: 22px 0 0; }
.foot-social { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 26px 0 0; }
.foot-social a { color: rgba(255, 255, 255, 0.72); display: inline-flex; transition: color 0.15s; }
.foot-social a:hover { color: #fff; }
.foot-social svg { width: 20px; height: 20px; }
.foot-legal { font-size: 12px; color: rgba(255, 255, 255, 0.52); line-height: 1.6; max-width: 780px; margin: 0; }
.foot-legal .addr { margin-top: 10px; font-style: normal; }
.foot-divider { height: 1px; background: rgba(255, 255, 255, 0.14); border: 0; margin: 26px 0 18px; }

/* =========================================================================
   INDEX-SPECIFIC LAYOUT — hero + reports cards
   ========================================================================= */

/* ---- hero (navy field) ---- */
.idx-hero { color: #fff; padding: 12px 28px 64px; position: relative; overflow: hidden; }
.idx-hero-inner { max-width: 1140px; margin: 0 auto; position: relative; }
.idx-hero .flame { position: absolute; right: -130px; bottom: -200px; width: 540px; height: 540px; fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 0.6; pointer-events: none; }
.idx-rule { border-top: 3px solid rgba(255, 255, 255, 0.9); padding-top: 9px; margin-bottom: 28px; }
.idx-eyebrow { color: #E68AB8; display: block; }
.idx-hero h1 {
  font-family: var(--oswald); font-weight: 700; text-transform: uppercase;
  font-size: clamp(34px, 6vw, 74px); line-height: 1.02; margin: 16px 0 24px; max-width: 16ch;
}
.idx-lede {
  font-weight: 300; font-size: clamp(18px, 2.2vw, 23px); line-height: 1.46;
  color: rgba(255, 255, 255, 0.88); margin: 0; max-width: 60ch;
}

/* ---- reports list (cards on the paper sheet) ---- */
.report-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1140px; display: grid; gap: 30px; }
@media (min-width: 880px) { .report-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; } }

.report-list > li { display: flex; }
.report-card {
  position: relative; display: flex; flex-direction: column; width: 100%;
  padding: 30px clamp(24px, 3vw, 38px) 32px; text-decoration: none; color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* dogear cards carry an outline, not a box-shadow; lift via transform on hover */
.report-card:hover { transform: translateY(-3px); }
.report-card:focus-visible { outline-offset: 4px; }

.card-folio {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  color: var(--lavender-text); padding-bottom: 12px; margin-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}
.card-folio .seq { color: var(--magenta-text); }

.card-title {
  font-family: var(--oswald); font-weight: 700; text-transform: uppercase;
  font-size: clamp(23px, 2.6vw, 31px); line-height: 1.1; color: var(--navy);
  margin: 0 0 14px; transition: color 0.15s;
}
.report-card:hover .card-title { color: var(--magenta-text); }

.card-dek { font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 22px; max-width: 56ch; }

.card-meta {
  margin-top: auto; display: flex; gap: 6px 22px; flex-wrap: wrap;
  font-family: var(--oswald); font-weight: 500; font-size: 12px; letter-spacing: .07em;
  text-transform: uppercase; font-feature-settings: "case" 1;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.card-meta .updated { color: var(--violet-text); }

/* single-card / odd-count: don't force a lonely card to half-width */
@media (min-width: 880px) { .report-list:has(> li:only-child) { grid-template-columns: minmax(0, 760px); justify-content: start; } }