/* LPR Guy — site styles
   Structure follows U.S. Web Design System conventions for spacing, type
   scale and components. The palette is deliberately moved off the federal
   blue so the site reads institutional without resembling an official
   government property.
   No build step. Edit this file directly. */

:root {
  --navy-900: #0e2233;
  --navy-700: #17384f;
  --navy-500: #235270;
  --red: #c0202c;
  --red-dark: #96181f;

  --ink: #1b1b1b;
  --gray-60: #565c65;
  --gray-30: #adadad;
  --gray-10: #e6e6e6;
  --gray-5: #f0f0f0;
  --gray-cool-5: #edeff0;
  --white: #fff;

  /* To self host Public Sans and Roboto Mono, put the woff2 files in
     assets/fonts/, add @font-face rules above this block, then put the
     family names at the front of these two stacks. See README.txt. */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 68ch;
  --gutter: 16px;
  --max: 1024px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}

h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 2.15rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.2rem; }

p, ul, ol { margin: 0 0 1.05em; }
p, li { max-width: var(--measure); }

a { color: var(--navy-500); }
a:hover { color: var(--navy-700); }

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

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: -9999px; background: var(--navy-900); color: #fff; padding: 12px 18px; z-index: 99; }
.skip:focus { left: 0; top: 0; }

/* ---------- utility bar ---------- */

.util { background: var(--gray-cool-5); border-bottom: 1px solid var(--gray-10); padding: 8px 0; }
.util p { margin: 0; max-width: none; color: var(--gray-60); font-family: var(--mono); font-size: 12px; letter-spacing: .03em; }

/* ---------- header ---------- */

.site-header { background: var(--white); border-bottom: 1px solid var(--gray-30); }
.header-inner {
  max-width: var(--max); margin: 0 auto; padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
}
.brand { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1; text-decoration: none; }
.brand em { font-style: normal; color: var(--red); }
.brand small {
  display: block; margin-top: 7px; color: var(--gray-60);
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase;
}
.nav { display: flex; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.nav li { max-width: none; }
.nav a {
  display: block; padding: 11px 12px; border-bottom: 4px solid transparent;
  color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none;
}
.nav a:hover { color: var(--navy-500); border-bottom-color: var(--red); }
.nav a[aria-current="page"] { color: var(--navy-700); border-bottom-color: var(--navy-500); }

/* ---------- shared type ---------- */

.eyebrow {
  margin: 0 0 10px; color: var(--gray-60); font-family: var(--mono);
  font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow-red { color: var(--red); }
.lede { font-size: 19px; color: var(--gray-60); max-width: 60ch; }
.tagline { font-size: 1.85rem; max-width: 24ch; margin-bottom: 30px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block; padding: 13px 22px; border-radius: 4px;
  background: var(--navy-500); color: #fff; font-size: 16px; font-weight: 700;
  text-decoration: none; border: 0; cursor: pointer; font-family: inherit;
}
.btn:hover { background: var(--navy-700); color: #fff; }
.btn-outline { background: transparent; color: var(--navy-500); box-shadow: inset 0 0 0 2px var(--navy-500); }
.btn-outline:hover { background: var(--gray-cool-5); color: var(--navy-700); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ---------- hero ---------- */

.hero { background: var(--navy-900); }
.hero-inner { max-width: var(--max); margin: 0 auto; padding: 52px var(--gutter); }
.hero-card { max-width: 680px; padding: 32px; border-left: 8px solid var(--red); background: var(--white); }
.hero-card h1 { margin: 24px 0 14px; }

.pagehead { background: var(--navy-900); color: #fff; padding: 44px 0 40px; }
.pagehead h1 { color: #fff; max-width: 26ch; }
.pagehead p { color: #cfd8de; max-width: 62ch; margin-bottom: 0; }
.pagehead .eyebrow { color: #8fb4c9; }
.pagehead .eyebrow-red { color: #ff9aa2; }

/* ---------- the misread ---------- */

.misread { font-family: var(--mono); }
.misread-row { display: flex; align-items: baseline; gap: 18px; margin-bottom: 6px; flex-wrap: wrap; }
.misread-key { min-width: 116px; color: var(--gray-60); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.misread-val { font-size: 46px; font-weight: 500; line-height: 1.1; }
.misread-val strong { color: var(--red); font-weight: 500; }
.misread-note {
  margin: 18px 0 0; padding-left: 14px; border-left: 2px solid var(--red);
  color: var(--gray-60); font-family: var(--mono); font-size: 13px; line-height: 1.6; max-width: 58ch;
}

/* ---------- sections ---------- */

.section { padding: 52px 0; }
.section-alt { background: var(--gray-5); }
.section-dark { background: var(--navy-900); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p, .section-dark li { color: #cfd8de; }
.section-dark .eyebrow { color: #8fb4c9; }
.section-dark a { color: #a9d4ea; }

/* ---------- source margin ---------- */

.evidence { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 42px; }
.ev-side { position: sticky; top: 24px; align-self: start; }
.src {
  margin-bottom: 14px; padding-left: 11px; border-left: 2px solid var(--red);
  color: var(--gray-60); font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
}
.src b { display: block; margin-bottom: 2px; color: var(--ink); letter-spacing: .02em; }
.src a { color: inherit; }
.section-dark .src { color: #c3ccd2; }
.section-dark .src b { color: #fff; }
.section-dark .src a { color: #c3ccd2; }
.mk { padding-left: 2px; color: var(--red); font-family: var(--mono); font-size: 11px; vertical-align: super; }
.section-dark .mk { color: #ff9aa2; }

/* ---------- cards and grids ---------- */

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.card { padding: 24px; border: 1px solid var(--gray-30); border-top: 8px solid var(--navy-500); background: var(--white); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 16px; color: var(--gray-60); }
.card .more {
  color: var(--red); font-family: var(--mono); font-size: 12px; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none; border-bottom: 1.5px solid var(--red); padding-bottom: 2px;
}

.glist { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; margin: 0; padding: 0; list-style: none; }
.glist li { max-width: none; }
.glist h3 { margin-bottom: 6px; }
.glist p { margin: 0; font-size: 16px; color: var(--gray-60); }
.section-dark .glist p { color: #cfd8de; }

/* ---------- process list ---------- */

.steps { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--gray-30); }
.steps li { position: relative; margin-left: 16px; padding: 0 0 28px 40px; max-width: none; }
.steps li:last-child { padding-bottom: 0; }
.steps .n {
  position: absolute; left: -17px; top: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy-500); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; font-weight: 700;
}
.steps h3 { font-size: 1.1rem; margin-bottom: 4px; }
.steps p { margin: 0; font-size: 16px; color: var(--gray-60); }

/* ---------- callout ---------- */

.callout { padding: 26px 28px; border: 1px solid var(--gray-30); border-top: 6px solid var(--red); background: var(--white); }
.callout h3 { font-size: 1.35rem; margin-bottom: 16px; }
.callout ol { margin: 0; padding: 0; list-style: none; counter-reset: c; }
.callout ol li {
  counter-increment: c; position: relative; padding: 12px 0 12px 42px;
  border-top: 1px solid var(--gray-10); font-size: 16px; max-width: none;
}
.callout ol li::before {
  content: counter(c, decimal-leading-zero); position: absolute; left: 0; top: 14px;
  color: var(--red); font-family: var(--mono); font-size: 12px;
}
.callout ul { padding-left: 20px; }
.callout p { font-size: 16px; }
.callout .note { margin: 18px 0 0; color: var(--gray-60); font-family: var(--mono); font-size: 12.5px; }
.section-alt .callout, .prose .callout { background: var(--white); }

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; margin-bottom: 1.4em; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--gray-10); vertical-align: top; }
th {
  border-bottom: 2px solid var(--ink); color: var(--gray-60); font-family: var(--mono);
  font-size: 11.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
td .when, td.when { color: var(--gray-60); font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }

/* ---------- accordion ---------- */

.acc { border: 1px solid var(--gray-30); border-bottom: 0; }
.acc details { border-bottom: 1px solid var(--gray-30); }
.acc summary { padding: 14px 18px; background: var(--gray-5); font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; float: right; color: var(--red); font-size: 22px; font-weight: 400; line-height: 1; }
.acc details[open] summary::after { content: "\2013"; }
.acc .body { padding: 16px 18px; }
.acc .body p:last-child { margin-bottom: 0; }

/* ---------- forms ---------- */

.form { max-width: 560px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 5px; font-size: 15px; font-weight: 600; }
.field .hint { display: block; margin-bottom: 6px; color: var(--gray-60); font-size: 14px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 11px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--white); color: var(--ink); font-family: inherit; font-size: 16px;
}
.field textarea { min-height: 150px; resize: vertical; }

/* ---------- media ---------- */

.portrait { max-width: 300px; border: 1px solid var(--gray-30); }

/* ---------- prose ---------- */

.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: .45em; }
.prose .callout h3 { margin-top: 0; }

.stamp {
  display: inline-block; padding: 5px 10px; border: 1px solid var(--gray-30);
  color: var(--gray-60); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .07em; text-transform: uppercase;
}

/* ---------- footer ---------- */

.site-footer { background: var(--navy-900); color: #fff; padding: 46px 0 22px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 38px; }
.site-footer h4 {
  margin-bottom: 13px; color: #8fb4c9; font-family: var(--mono); font-size: 11.5px;
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: 8px; font-size: 16px; max-width: none; }
.site-footer p { color: #cfd8de; font-size: 16px; max-width: 44ch; }
.site-footer a { color: #fff; text-decoration: none; border-bottom: 1px solid #3a5063; }
.site-footer a:hover { color: #fff; border-bottom-color: var(--red); }
.colophon {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid #3a5063; color: #c3ccd2;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}

/* ---------- responsive ---------- */

@media (max-width: 880px) {
  .evidence { grid-template-columns: 1fr; gap: 0; }
  .ev-side { position: static; order: 2; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--gray-30); }
  .section-dark .ev-side { border-top-color: #3a5063; }
  .ev-main { order: 1; }
  .cols-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.45rem; }
  .tagline { font-size: 1.5rem; }
  .cols-2, .cols-3, .glist, .foot-grid { grid-template-columns: 1fr; }
  .hero-card { padding: 24px; }
  .misread-key { min-width: 0; flex-basis: 100%; }
  .misread-val { font-size: 38px; }
  .header-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

@media print {
  .site-header, .site-footer, .util, .btn-row, .skip { display: none; }
  body { font-size: 12pt; }
  .pagehead { background: none; color: #000; padding: 0 0 18px; }
  .pagehead h1, .pagehead p, .pagehead .eyebrow { color: #000; }
}