@font-face {
  font-family: "AWM Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("awm-display-400.woff?v=a480859b") format("woff");
}
@font-face {
  font-family: "AWM Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("awm-display-700.woff?v=fdc6dcbe") format("woff");
}
@font-face {
  font-family: "AWM Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("awm-text-400.woff?v=b7afe87b") format("woff");
}
@font-face {
  font-family: "AWM Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("awm-text-700.woff?v=4b447b30") format("woff");
}

:root {

  color-scheme: light dark;

  --paper:     #fdfcf8;
  --card:      #fffefa;
  --card-2:    #f1ece5;
  --sand:      #e7ddce;
  --ink:       #2c2c24;
  --ink-2:     #54524a;
  --ink-3:     #69675b;
  --rule:      #ded8cf;
  --rule-2:    #ebe5db;
  --drum:      #2f3129;
  --drum-fg:   #f3f4f1;
  --drum-line: transparent;

  --shadow:       0 4px 20px -2px rgba(93, 112, 82, 0.15);
  --shadow-float: 0 10px 40px -10px rgba(193, 140, 93, 0.22);
  --shadow-lift:  0 20px 40px -12px rgba(93, 112, 82, 0.22);
  --edge:      rgba(44, 44, 36, 0.10);

  --r-low:      #33685a;
  --r-moderate: #7a6524;
  --r-elevated: #97551f;
  --r-high:     #a8452c;
  --r-severe:   #8f2a20;
  --r-none:     #6b6759;

  --accent:     #5d7052;

  --brand-acc:  #c18c5d;

  --tint:       7%;
  --tint-2:     12%;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' \
width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' \
baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix \
type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' \
filter='url(%23g)'/%3E%3C/svg%3E");

  --f-display: "AWM Display", Lora, Georgia, "Iowan Old Style", "Times New Roman",
               serif;
  --f-text:    "AWM Text", Carlito, Calibri, Nunito, "Segoe UI", system-ui,
               -apple-system, sans-serif;
  --f-data:    ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
               Menlo, Consolas, monospace;

  --t-3xl: clamp(2.1rem, 1.35rem + 3.1vw, 3rem);
  --t-2xl: clamp(1.72rem, 1.3rem + 1.8vw, 2.1rem);
  --t-xl:  clamp(1.45rem, 1.25rem + 0.85vw, 1.65rem);
  --t-lg:  1.25rem;
  --t-md:  1.0625rem;
  --t-sm:  0.9375rem;
  --t-xs:  0.8125rem;
  --t-2xs: 0.7rem;
  --lh-tight: 1.14;
  --lh-snug:  1.35;
  --lh:       1.7;

  --track-wide: 0.11em;
  --track-caps: 0.045em;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: clamp(3rem, 1.5rem + 6vw, 6rem);
  --gap: 1.5rem;

  --s-sec: clamp(3.25rem, 2rem + 3.2vw, 5rem);

  --w:            72rem;
  --measure:      40rem;
  --measure-wide: 46rem;

  --radius:       0.75rem;
  --radius-lg:    1.25rem;
  --radius-xl:    2rem;
  --radius-2xl:   3.25rem;
  --radius-pill:  999px;
  --blob:   60% 40% 30% 70% / 60% 30% 70% 40%;
  --pebble: 47% 53% 43% 57% / 55% 45% 55% 45%;

  --head-h:       3.5rem;
  --anchor-pad:   calc(var(--head-h) + 1.75rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #1a1915;
    --card:      #222118;
    --card-2:    #2b291f;
    --sand:      #332f24;
    --ink:       #f0ece1;
    --ink-2:     #c8c3b3;
    --ink-3:     #aca696;
    --rule:      #3b382d;
    --rule-2:    #2c2a21;
    --drum:      #2b291f;
    --drum-fg:   #f3f4f1;
    --drum-line: #4a4638;
    --shadow:       0 4px 20px -2px rgba(0, 0, 0, 0.5);
    --shadow-float: 0 10px 40px -10px rgba(0, 0, 0, 0.6);
    --shadow-lift:  0 20px 40px -12px rgba(0, 0, 0, 0.6);
    --edge:      rgba(0, 0, 0, 0.55);

    --r-low:      #79bda9;
    --r-moderate: #cfae4c;
    --r-elevated: #e39a55;
    --r-high:     #ef8a6d;
    --r-severe:   #f08d80;
    --r-none:     #a9a493;

    --accent:     #a3bd8c;
    --brand-acc:  #d9a978;
    --tint:       10%;
    --tint-2:     16%;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ink-2: var(--ink);
    --ink-3: var(--ink);
    --rule:  var(--ink);
    --tint:  0%;
    --tint-2: 0%;
    --grain: none;
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--t-md)/var(--lh) var(--f-text);
  text-underline-offset: 0.16em;
  overflow-wrap: break-word;
}

body::before {
  content: "";
  position: fixed;
  inset: -15vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34vmax 30vmax at 14% 6%,
      color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%),
    radial-gradient(28vmax 26vmax at 88% 20%,
      color-mix(in srgb, var(--brand-acc) 13%, transparent), transparent 72%),
    radial-gradient(42vmax 34vmax at 62% 96%,
      color-mix(in srgb, var(--sand) 50%, transparent), transparent 72%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background-image: var(--grain);
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.035;
}

::selection { background: var(--accent); color: var(--paper); }

img, svg { max-width: 100%; }

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 15%, var(--rule) 85%, transparent);
  margin: var(--s-7) 0;
}

code, kbd, samp {
  font-family: var(--f-data);
  font-size: 0.9em;
  background: var(--card-2);
  padding: 0.1em 0.4em;
  border-radius: 0.4em;
}

[id] { scroll-margin-top: var(--anchor-pad); }

h2:target, h3:target {
  position: relative;
  padding-left: 0.9rem;
  margin-left: -0.9rem;
}
h2:target::before, h3:target::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0;
}

.eyebrow, .placard-k, th, .btn, .chip, nav, .crumbs, .axis, .bar-label,
.answer-k, .stat-k, .toc-h, .chart-t {
  font-family: var(--f-text);
  font-weight: 700;
}

h1 {
  font-size: var(--t-3xl);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-3);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 {
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  margin: var(--s-sec) 0 var(--s-3);
  letter-spacing: -0.014em;
  text-wrap: balance;
}

h3 {
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  margin: var(--s-5) 0 var(--s-2);
  letter-spacing: -0.008em;
}

h4 {
  font-size: var(--t-md);
  line-height: var(--lh-snug);
  margin: var(--s-4) 0 var(--s-1);
}

.eyebrow {
  display: block;
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-2);
}

p { margin: 0 0 var(--s-4); }

.lead {
  font-size: var(--t-lg);
  line-height: 1.55;
  max-width: var(--measure);
  color: var(--ink-2);
}
.prose { max-width: var(--measure); }
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.2rem; }
.prose li { margin-bottom: var(--s-2); }
p, li, .lead, .prose, .answer-p { text-wrap: pretty; }

small, .small { font-size: var(--t-xs); line-height: 1.5; }

.muted { color: var(--ink-2); }
.dim   { color: var(--ink-3); }

.n, td.num, th.num {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
a:hover {
  color: var(--accent);
  text-decoration-thickness: 2px;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--gap);
}

.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: var(--s-3) 0;
  background: linear-gradient(var(--paper) 62%, transparent);
}

@media (max-height: 26rem) {
  .site-head { position: static; }
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--head-h);
  flex-wrap: wrap;
  max-width: calc(var(--w) - 2 * var(--gap));
  padding: 0 var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);

  background: var(--card);
  background: color-mix(in srgb, var(--card) 74%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--shadow);
}

.brand {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}

.brand-mark {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.bm-plate { fill: var(--accent); }
.bm-mono  { fill: var(--paper); }
.bm-acc   { fill: var(--brand-acc); }

.bm-line  { fill: var(--sand); }
.brand-word { display: inline-block; }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); }

.nav-btn {
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.nav-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.nav-btn:active { transform: scale(0.95); }

.nav-ico, .nav-ico::before, .nav-ico::after {
  display: block;
  width: 1.05rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentColor;
  transition: transform 0.3s ease, top 0.3s ease;
}
.nav-ico { position: relative; }
.nav-ico::before, .nav-ico::after { content: ""; position: absolute; left: 0; }
.nav-ico::before { top: -6px; }
.nav-ico::after  { top: 6px; }
.site-head[data-nav-open] .nav-ico { background: transparent; }
.site-head[data-nav-open] .nav-ico::before { top: 0; transform: rotate(45deg); }
.site-head[data-nav-open] .nav-ico::after  { top: 0; transform: rotate(-45deg); }

.site-nav { display: flex; gap: 0.35rem; margin-left: auto; flex-wrap: wrap; }

.site-nav a {
  font-family: var(--f-text);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.site-nav a:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.site-nav a[aria-current="page"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

main { display: block; padding: var(--s-6) 0 var(--s-9); }

.crumbs {
  font-size: var(--t-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--rule); }

.site-foot {
  margin-top: var(--s-9);
  border-top: 1px solid var(--rule);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--card-2);
  padding: var(--s-7) 0 var(--s-7);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.site-foot h2 {
  font-family: var(--f-text);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
  color: var(--ink-3);
}
.foot-grid {
  display: grid;
  gap: var(--s-5) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 0.35rem; }
.foot-note {
  margin-top: var(--s-6);
  max-width: var(--measure-wide);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  align-items: baseline;
  margin: var(--s-5) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-family: var(--f-text);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.foot-legal span[aria-hidden] { color: var(--rule); }
.foot-legal a { color: var(--ink-2); }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem;
  top: 0.5rem;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
}

.answer {
  max-width: var(--measure-wide);
  margin: 0 0 var(--s-6);
}
.answer::before {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  margin: 0 0 var(--s-4);
}
.answer-k {
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-2);
}
.answer-p {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  line-height: 1.5;
  margin: 0;
}

.lead .answer { max-width: var(--measure-wide); }
.lead > .answer + p { margin-top: var(--s-4); }

.lede-note {
  max-width: var(--measure-wide);
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin: 0 0 var(--s-6);
}
.answer + .lede-note { margin-top: calc(var(--s-4) * -1); }

.prose-sec { max-width: var(--measure); margin: 0 0 var(--s-5); }
.prose-sec > h2:first-child, .prose-sec > h3:first-child { margin-top: var(--s-6); }
.prose-sec > p:last-child { margin-bottom: 0; }

.prose-sec + .prose-sec > h2:first-child { margin-top: var(--s-5); }

.stage {
  position: relative;
  isolation: isolate;
  margin: var(--s-sec) 0;
  padding: var(--s-6) var(--s-6) var(--s-5);
  background: color-mix(in srgb, var(--card-2) 70%, transparent);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-2xl) var(--radius-lg) var(--radius-2xl) var(--radius-lg);
}
.stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1.5rem;
  left: -1.25rem;
  width: 15rem;
  height: 9rem;
  border-radius: var(--blob);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  filter: blur(30px);
  pointer-events: none;
}

.stage > :first-child,
.stage > :first-child > h2:first-child { margin-top: 0; }
.stage > :last-child { margin-bottom: 0; }

.toc {
  background: var(--card-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  border-top-left-radius: var(--radius-xl);
  padding: var(--s-5);
  margin: 0 0 var(--s-7);
}
.toc-h {
  font-family: var(--f-text);
  font-weight: 700;
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-3);
}
.toc-list {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.15rem var(--s-5);
}
.toc-list li { counter-increment: toc; }
.toc-list a {
  display: block;
  font-size: var(--t-sm);
  text-decoration: none;
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem;
  margin-left: -0.7rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.toc-list a::before {
  content: counter(toc, decimal-leading-zero) "  ";
  font-family: var(--f-data);
  font-size: 0.8em;
  color: var(--ink-3);
  white-space: pre;
}
.toc-list a:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.toc-list a:hover::before { color: var(--accent); }

.faq { margin: var(--s-8) 0 0; max-width: var(--measure-wide); }
.faq > h2 { margin-top: 0; }
.faq-list { display: grid; gap: var(--s-3); }
.faq-item {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: var(--s-5);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.faq-item:nth-child(6n + 1) { border-radius: var(--radius-2xl) var(--radius-lg) var(--radius-lg) var(--radius-lg); }
.faq-item:nth-child(6n + 2) { border-radius: var(--radius-lg) var(--radius-2xl) var(--radius-lg) var(--radius-lg); }
.faq-item:nth-child(6n + 3) { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-2xl); }
.faq-item:nth-child(6n + 4) { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-2xl) var(--radius-lg); }
.faq-item:nth-child(6n + 5) { border-radius: var(--radius-xl) var(--radius-lg) var(--radius-xl) var(--radius-lg); }
.faq-item:nth-child(6n + 6) { border-radius: var(--radius-lg) var(--radius-xl) var(--radius-lg) var(--radius-xl); }
.faq-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--rule));
  box-shadow: var(--shadow);
}
.faq-item h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--t-md);
  font-family: var(--f-display);
}
.faq-item p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }

.hero {
  display: grid;
  gap: var(--s-6);
  margin: 0 0 var(--s-6);
}
.hero-main > :last-child { margin-bottom: 0; }
.hero-side {
  display: grid;
  gap: var(--s-5);
  align-content: start;
}
.hero-side > :last-child { margin-bottom: 0; }
@media (min-width: 58rem) {
  .hero {
    grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 1fr);
    gap: var(--s-7);
    align-items: start;
  }
}

.hero-side .score { justify-self: center; align-items: center; }
.hero-side .score-drum { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.5rem); }
.hero-side .score::after { inset: -1.3rem -1.7rem auto -1.7rem; height: 7.2rem; }
.hero-side .placard { width: 100%; margin: 0; }

.placard {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-lg);
  padding: var(--s-4) var(--s-5);
  margin: 0 0 var(--s-6);
  display: grid;
  gap: 0 var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  box-shadow: var(--shadow);
}
.placard-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: 0.46rem 0;
  border-bottom: 1px solid var(--rule-2);
}
.placard-row:last-child { border-bottom: 0; }
.placard-k {
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.placard-v {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
  text-align: right;
}
.placard-v a { text-decoration-color: var(--rule); }

.score {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.score::after {
  content: "";
  position: absolute;
  inset: -0.9rem -1.1rem auto -1.1rem;
  height: 5.2rem;
  z-index: -1;
  border-radius: var(--blob);
  background: color-mix(in srgb, var(--c, var(--r-none)) 28%, transparent);
  filter: blur(12px);
}
.score-drum {
  background: var(--drum);
  color: var(--drum-fg);
  border: 1px solid var(--drum-line);
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1;
  padding: 0.4em 0.55em;
  border-radius: var(--pebble);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-float);
}
.score-drum sup {
  font-size: 0.42em;
  color: var(--drum-fg);
  opacity: 0.62;
  letter-spacing: 0;
  margin-left: 0.25em;
}
.score-band {
  font-family: var(--f-text);
  font-weight: 700;
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c, var(--ink-2));
}

.b-low,      .sev-low      { --c: var(--r-low); }
.b-moderate, .sev-moderate { --c: var(--r-moderate); }
.b-elevated                { --c: var(--r-elevated); }
.b-high,     .sev-high     { --c: var(--r-high); }
.b-severe,   .sev-critical { --c: var(--r-severe); }
.b-none                    { --c: var(--r-none); }

.sev-low { --c: var(--ink-3); }

.band {
  display: inline-block;
  font-family: var(--f-text);
  font-weight: 700;
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c, var(--ink-2));
  border: 1px solid color-mix(in srgb, var(--c, var(--rule)) 55%, transparent);
  background: color-mix(in srgb, var(--c, var(--rule)) 10%, transparent);
  padding: 0.16rem 0.6rem 0.2rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.chip {
  display: inline-block;
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--card-2);
  border-radius: var(--radius-pill);
  padding: 0.16rem 0.6rem 0.2rem;
  white-space: nowrap;
}
.chip-alert {
  background: color-mix(in srgb, var(--r-severe) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--r-severe) 55%, transparent);
  color: var(--r-severe);
}

.stat { display: flex; flex-direction: column; gap: 0.2rem; }
.stat-v {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
  line-height: 1;
}
.stat-k {
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}

.tally {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
  width: 100%;
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--sand) 45%, transparent);
}

.ruler {
  margin: var(--s-5) 0 var(--s-6);
  --grid: 12.5%;
  --ruler-cols: minmax(7rem, 13rem) 1fr 5.75rem;
}

.rrow, .bars > li {
  display: grid;
  grid-template-columns: var(--ruler-cols);
  gap: var(--s-2) 0.85rem;
  align-items: center;
}

.axis { position: relative; height: 1.4rem; grid-column: 2; }
.axis span {
  position: absolute;
  top: 0;
  left: calc(var(--at) * 1%);
  transform: translateX(-50%);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap;
}
.axis span:first-child { transform: none; }
.axis span:last-child { transform: translateX(-100%); }
.axis-cap {
  grid-column: 3;
  font-size: 0.68rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  font-family: var(--f-text);
  font-weight: 700;
}

.bars { list-style: none; margin: 0; padding: 0; }
.bars > li {
  padding: 0.3rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: var(--radius);
  transition: background-color 0.3s ease;
}
.bars > li:hover { background: color-mix(in srgb, var(--c, var(--ink)) 6%, transparent); }

.bar-label {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  line-height: var(--lh-snug);
  text-decoration: none;
  color: var(--ink);
  align-self: center;
}
.bar-label:hover {
  color: var(--c, var(--accent));
  text-decoration: underline;
  text-decoration-color: var(--c, var(--accent));
  text-decoration-thickness: 2px;
}

.track {
  position: relative;
  height: 1.4rem;
  border-radius: var(--radius-pill);
  background:
    repeating-linear-gradient(to right, var(--rule-2) 0 1px, transparent 1px var(--grid)),
    color-mix(in srgb, var(--card-2) 60%, transparent);
}
.whisker, .box, .tick { position: absolute; }
.whisker {
  left: calc(var(--p10) * 1%);
  width: calc((var(--p90) - var(--p10)) * 1%);
  top: calc(50% - 3px);
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--c, var(--ink-3));
  opacity: 0.22;
}
.box {
  left: calc(var(--p25) * 1%);
  width: calc((var(--p75) - var(--p25)) * 1%);
  top: 0.14rem;
  bottom: 0.14rem;
  border-radius: var(--radius-pill);
  background: var(--c, var(--ink-3));
  opacity: 0.5;
}
.tick {
  left: calc(var(--p50) * 1%);
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  border-radius: var(--radius-pill);
  background: var(--c, var(--ink));
}

.track-none {
  display: flex;
  align-items: center;
  height: 1.4rem;
  padding-left: 0.6rem;
  font-size: 0.74rem;
  color: var(--ink-3);
  border-radius: var(--radius-pill);
  border: 1px dashed var(--rule);
}
.bar-val {
  font-size: var(--t-xs);
  text-align: right;
  color: var(--ink-2);
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .whisker, .box {
    transform: scaleX(0);
    transform-origin: left center;
    animation: awm-grow 0.6s cubic-bezier(0.22, 0.68, 0.24, 1) forwards;
    animation-delay: calc(min(var(--i, 0), 14) * 55ms);
  }
  .tick {
    opacity: 0;
    animation: awm-fade 0.4s ease forwards;
    animation-delay: calc(min(var(--i, 0), 14) * 55ms + 0.45s);
  }
}
@keyframes awm-grow { to { transform: scaleX(1); } }
@keyframes awm-fade { to { opacity: 1; } }

.ruler-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-top: var(--s-4);
  font-family: var(--f-text);
}
.ruler-key b { font-weight: 700; color: var(--ink-2); }

.chart {
  margin: var(--s-4) 0 var(--s-6);
  max-width: var(--measure-wide);
}
.chart-t {
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-2);
}
.chart-cap {
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-family: var(--f-text);
  margin: var(--s-2) 0 0;
}
.chart-key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin: var(--s-2) 0 0;
  padding: 0;
  font-family: var(--f-text);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.chart-key b { font-weight: 700; color: var(--ink-2); }

.plot {
  --grid: 20%;
  --plot-cols: 2.6rem 1fr;
  --plot-h: clamp(8.5rem, 30vw, 11.5rem);
  display: grid;
  grid-template-columns: var(--plot-cols);
  column-gap: 0.5rem;
  margin: var(--s-3) 0 0;
}
.plot-y, .plot-a { grid-row: 1; }
.plot-y, .plot-x, .gauge-ticks {
  position: relative;
  font-family: var(--f-data);
  font-size: var(--t-2xs);
  color: var(--ink-3);
  line-height: 1;
}
.plot-y span {
  position: absolute;
  right: 0;
  top: calc((100 - var(--at, 0)) * 1%);
  transform: translateY(-50%);
}
.plot-a {
  position: relative;
  height: var(--plot-h);
  border-bottom: 1px solid var(--rule);

  background-image:
    repeating-linear-gradient(to right, var(--rule-2) 0 1px, transparent 1px var(--grid)),
    repeating-linear-gradient(to top, var(--rule-2) 0 1px, transparent 1px 25%);
}
.plot-a > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.plot-x {
  grid-column: 2;
  height: 1.1rem;
  margin-top: 0.35rem;
}
.plot-x span {
  position: absolute;
  left: calc(var(--at, 0) * 1%);
  transform: translateX(-50%);
  white-space: nowrap;
}

.plot-x span:first-child { transform: none; }
.plot-x span:last-child { transform: translateX(-100%); }

.curve-fill { fill: var(--c, var(--ink)); opacity: 0.12; stroke: none; }
.curve-line {
  fill: none;
  stroke: var(--c, var(--ink));
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.plot-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--at, 0) * 1%);
  border-left: 1px dashed var(--ink);
}
.plot-mark b {
  position: absolute;
  top: 0.15rem;
  left: 0.35rem;
  font-family: var(--f-text);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.plot-mark-l b { left: auto; right: 0.35rem; }

.plot-mark-2 { border-left-color: var(--ink-3); }
.plot-mark-2 b { top: auto; bottom: 0.15rem; color: var(--ink-3); }
.plot-dot {
  position: absolute;
  left: calc(var(--at, 100) * 1%);
  bottom: calc(var(--up, 0) * 1%);
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--c, var(--ink));
  box-shadow: 0 0 0 2px var(--card);
  transform: translate(-50%, 50%);
}

.spark { display: block; max-width: 100%; height: auto; overflow: visible; }
.spark-line { fill: none; stroke: var(--c, var(--ink)); stroke-width: 1.5; }
.spark-fill { fill: var(--c, var(--ink)); opacity: 0.14; stroke: none; }

.gauge {
  margin: var(--s-4) 0 var(--s-2);
  max-width: 34rem;
}

.gauge-track {
  position: relative;
  height: 1rem;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--card-2);
}
.gauge-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--from, 0) * 1%);
  width: calc((var(--to, 0) - var(--from, 0)) * 1%);
  opacity: 0.55;
}
.gauge-zone-low      { background: var(--r-low); }
.gauge-zone-moderate { background: var(--r-moderate); }
.gauge-zone-elevated { background: var(--r-elevated); }
.gauge-zone-high     { background: var(--r-high); }
.gauge-zone-severe   { background: var(--r-severe); }

.gauge-pin {
  position: absolute;
  top: -0.3rem;
  bottom: -0.3rem;
  left: calc(var(--at, 0) * 1%);
  width: 3px;
  margin-left: -1.5px;
  border-radius: var(--radius-pill);
  background: var(--ink);
}
.gauge-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.42rem;
  width: 0.62rem;
  height: 0.62rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--paper);
}
.gauge-ticks { height: 1.1rem; margin-top: 0.35rem; }
.gauge-ticks span {
  position: absolute;
  left: calc(var(--at, 0) * 1%);
  transform: translateX(-50%);
}
.gauge-ticks span:first-child { transform: none; }
.gauge-ticks span:last-child { transform: translateX(-100%); }

.vbars { list-style: none; margin: var(--s-4) 0 var(--s-5); padding: 0; }
.vbar {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) 1fr 4.5rem;
  gap: 0.3rem 0.85rem;
  align-items: center;
  padding: 0.35rem 0;
}
.vbar-k { font-size: var(--t-xs); font-family: var(--f-text); }
.vbar-t {
  position: relative;
  height: 0.85rem;
  background: var(--card-2);
  border-radius: var(--radius-pill);
}
.vbar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--w, 0) * 1%);
  background: var(--c, var(--ink));
  border-radius: var(--radius-pill);
}
.vbar-v {
  font-family: var(--f-data);
  font-size: var(--t-xs);
  text-align: right;
  color: var(--ink-2);

  hyphens: none;
  overflow-wrap: break-word;
}

.vbar-now .vbar-k { color: var(--ink); font-weight: 700; }
.vbar-now .vbar-t { outline: 1px solid var(--ink); outline-offset: 3px; }

.scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin: var(--s-4) 0 var(--s-5);

  background:
    linear-gradient(to right, var(--paper) 30%, transparent),
    linear-gradient(to left,  var(--paper) 30%, transparent),
    linear-gradient(to right, var(--edge), transparent 12px),
    linear-gradient(to left,  var(--edge), transparent 12px);
  background-repeat: no-repeat;
  background-size: 3rem 100%, 3rem 100%, 12px 100%, 12px 100%;
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-attachment: local, local, scroll, scroll;
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-text);
  font-size: var(--t-sm);
}
.tbl caption {
  text-align: left;
  font-size: var(--t-xs);
  color: var(--ink-3);
  padding-bottom: var(--s-2);
  font-family: var(--f-text);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  max-width: var(--measure-wide);
}
.tbl th, .tbl td { padding: 0.55rem 0.7rem; text-align: left; vertical-align: baseline; }
.tbl th {
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid var(--rule);
  white-space: nowrap;
}
.tbl tbody tr { border-bottom: 1px solid var(--rule-2); }
.tbl td.num, .tbl th.num { text-align: right; white-space: nowrap; }
.tbl td:first-child, .tbl th:first-child { padding-left: 0; }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }
.tbl a {
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.tbl a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.tbl tr.row-mark { border-left: 3px solid var(--c, var(--ink)); }
.tbl tr.row-mark > td:first-child { padding-left: 0.6rem; font-weight: 700; }

.tbl tbody tr.b-low,
.tbl tbody tr.b-moderate,
.tbl tbody tr.b-elevated,
.tbl tbody tr.b-high,
.tbl tbody tr.b-severe {
  background: color-mix(in srgb, var(--c) var(--tint), transparent);
}
.tbl tbody tr:hover { background: var(--card-2); }
.tbl tbody tr.b-low:hover,
.tbl tbody tr.b-moderate:hover,
.tbl tbody tr.b-elevated:hover,
.tbl tbody tr.b-high:hover,
.tbl tbody tr.b-severe:hover {
  background: color-mix(in srgb, var(--c) var(--tint-2), var(--card));
}

.tbl th[aria-sort] { cursor: pointer; user-select: none; }
.tbl th[aria-sort]::after { content: " ↕"; color: var(--rule); font-size: 0.9em; }
.tbl th[aria-sort="ascending"]::after  { content: " ↑"; color: var(--ink); }
.tbl th[aria-sort="descending"]::after { content: " ↓"; color: var(--ink); }

.grid { display: grid; gap: var(--gap); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: var(--s-5);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.card::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--c, var(--accent));
  margin: 0 0 var(--s-3);
}

.card:nth-child(6n + 1) { border-radius: var(--radius-2xl) var(--radius-lg) var(--radius-lg) var(--radius-lg); }
.card:nth-child(6n + 2) { border-radius: var(--radius-lg) var(--radius-2xl) var(--radius-lg) var(--radius-lg); }
.card:nth-child(6n + 3) { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-2xl); }
.card:nth-child(6n + 4) { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-2xl) var(--radius-lg); }
.card:nth-child(6n + 5) { border-radius: var(--radius-xl) var(--radius-lg) var(--radius-xl) var(--radius-lg); }
.card:nth-child(6n + 6) { border-radius: var(--radius-lg) var(--radius-xl) var(--radius-lg) var(--radius-xl); }
.card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--rule));
  box-shadow: var(--shadow-lift);
}
.card h3 { margin: 0 0 0.35rem; font-size: var(--t-md); }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.card p { margin: 0 0 0.4rem; font-size: var(--t-sm); }
.card p:last-child { margin-bottom: 0; }
.card-foot {
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-family: var(--f-text);
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s-2);
}

.verdict { display: grid; gap: var(--gap); margin: 0 0 var(--s-6); }
@media (min-width: 52rem) {
  .verdict {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}
.verdict .card h3 { font-size: var(--t-xl); margin: 0.1rem 0 var(--s-3); }
.verdict .card p { font-size: var(--t-md); }
.verdict .score { margin: 0 0 var(--s-3); }
.verdict-alt {
  border-top: 1px solid var(--c, var(--rule));
  padding-top: var(--s-3);
}
.verdict-alt h3 { font-size: var(--t-md); margin: 0.1rem 0 var(--s-2); }
.verdict h3 a { text-decoration: none; }
.verdict h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.verdict-alt .band { margin-right: 0.3rem; }

.strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: var(--s-2) 0 var(--s-5);
  padding: 0;
}
.strip a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--f-data);
  font-size: var(--t-xs);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--card-2);
  box-shadow: inset 0 -3px 0 var(--c, var(--rule));
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.strip a:hover {
  background: var(--card);
  transform: translateY(-2px);
  box-shadow: inset 0 -3px 0 var(--c, var(--ink)), var(--shadow);
}
.strip a[aria-current="page"] {
  background: var(--drum);
  color: var(--drum-fg);
}
.strip .s { font-family: var(--f-text); font-weight: 700; font-size: var(--t-2xs); color: var(--ink-3); }
.strip a[aria-current="page"] .s { color: var(--drum-fg); opacity: 0.66; }

.cols { columns: 15rem; column-gap: var(--s-6); }
.cols ul { list-style: none; margin: 0; padding: 0; }
.cols li { break-inside: avoid; margin-bottom: 0.3rem; font-size: var(--t-sm); }

.quote {
  margin: 0 0 var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--card-2);
  border-radius: var(--radius-lg);
  border-top-left-radius: var(--radius-xl);
  max-width: var(--measure);
}
.quote p {
  font-family: var(--f-display);
  font-size: var(--t-md);
  line-height: 1.6;
  margin: 0 0 var(--s-3);
}
.quote-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-family: var(--f-text);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.quote-miles {
  background: var(--drum);
  color: var(--drum-fg);
  border: 1px solid var(--drum-line);
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  padding: 0.16rem 0.55rem 0.2rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.03em;
}

.ticket {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  border-top-left-radius: var(--radius-2xl);
  box-shadow: inset 3px 0 0 var(--brand-acc);
  padding: var(--s-4) var(--s-5) var(--s-5);
  margin-bottom: var(--s-3);
  max-width: var(--measure-wide);
}
.ticket-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.ticket-no {
  font-family: var(--f-data);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  background: color-mix(in srgb, var(--brand-acc) 18%, var(--card-2));
  padding: 0.14rem 0.5rem;
  border-radius: var(--radius-pill);
}
.ticket h3 { margin: 0; font-size: var(--t-md); }
.ticket dl { margin: 0; font-size: var(--t-sm); font-family: var(--f-text); }
.ticket dt {
  font-family: var(--f-text);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--s-3);
}
.ticket dd { margin: 0.1rem 0 0; }

.form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: flex-end;
  margin: var(--s-4) 0 var(--s-5);
}
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > label {
  font-family: var(--f-text);
  font-weight: 700;
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-left: 0.9rem;
}

input[type="text"], input[type="search"], input[type="number"], select {
  font: inherit;
  font-family: var(--f-text);
  font-size: var(--t-sm);
  padding: 0.6rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: var(--card);
  background: color-mix(in srgb, var(--card) 60%, transparent);
  color: var(--ink);
  min-width: 9rem;
  min-height: 2.75rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
input[type="text"]:hover, input[type="search"]:hover, input[type="number"]:hover,
select:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
}
input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus,
select:focus {
  background: var(--card);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
input[type="number"] { font-family: var(--f-data); }
::placeholder { color: var(--ink-3); opacity: 1; }

.form-hero {
  background: color-mix(in srgb, var(--sand) 55%, transparent);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  border-top-left-radius: var(--radius-lg);
  padding: var(--s-5);
  margin-top: var(--s-6);
  max-width: var(--measure-wide);
}
.form-hero input[type="search"] {
  font-size: var(--t-lg);
  padding: 0.7rem 1.15rem;
  min-width: 15rem;
  min-height: 3.25rem;
}
.form-hero .btn { min-height: 3.25rem; padding: 0.8rem 1.9rem; }

@media (max-width: 44rem) {
  input[type="text"], input[type="search"], input[type="number"], select { font-size: 1rem; }
}

.btn {
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease,
              color 0.3s ease;
}
.btn:hover {
  transform: scale(1.04);
  box-shadow: var(--shadow-float);
  color: var(--paper);
}
.btn:active { transform: scale(0.97); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent); color: var(--paper); }

.ac { position: relative; }
.ac-list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0.4rem 0 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  max-height: 17rem;
  overflow-y: auto;
  font-family: var(--f-text);
  font-size: var(--t-sm);
  box-shadow: var(--shadow-float);
}
.ac-list a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
}
.ac-list a:hover, .ac-list [aria-selected="true"] a {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.ac-list:empty { display: none; }

.note {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-xl);
  box-shadow: inset 3px 0 0 var(--c, var(--ink-3));
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0;
  font-size: var(--t-sm);
  max-width: var(--measure-wide);
  font-family: var(--f-text);
}
.note strong { font-family: var(--f-text); font-weight: 700; letter-spacing: var(--track-caps); }
.note-thin { --c: var(--r-moderate); }

.notice {
  border: 1px solid color-mix(in srgb, var(--r-moderate) 25%, var(--rule));
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-xl);
  box-shadow: inset 3px 0 0 var(--r-moderate);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0;
  max-width: var(--measure-wide);
  font-size: var(--t-sm);
  font-family: var(--f-text);
  background: var(--card);
  background: color-mix(in srgb, var(--r-moderate) 7%, var(--card));
}
.notice p { margin: 0 0 var(--s-2); }
.notice p:last-child { margin-bottom: 0; }

.notice-warn {
  border-color: color-mix(in srgb, var(--r-severe) 30%, var(--rule));
  box-shadow: inset 3px 0 0 var(--r-severe);
  background: var(--card);
  background: color-mix(in srgb, var(--r-severe) 7%, var(--card));
}
.notice-warn strong { color: var(--r-severe); }

.sample-banner {
  margin: 0 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 2px solid var(--r-severe);
  background: color-mix(in srgb, var(--r-severe) 8%, var(--card));
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-sm);
  line-height: 1.5;
  border-radius: var(--radius-lg);
}
.sample-banner strong {
  font-family: var(--f-text);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--r-severe);
}
.sample-banner code { background: color-mix(in srgb, var(--r-severe) 14%, transparent); }
.sample-banner .sample-note {
  display: block;
  margin-top: 0.4rem;
  color: var(--ink-2);
  font-size: var(--t-xs);
}

details.disclose { margin: var(--s-4) 0; max-width: var(--measure-wide); }
details.disclose > summary {
  cursor: pointer;
  font-family: var(--f-text);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.45rem 0.9rem;
  margin-left: -0.9rem;
  border-radius: var(--radius-pill);
  width: fit-content;
  transition: background-color 0.3s ease, color 0.3s ease;
}
details.disclose > summary:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
details.disclose[open] > summary { color: var(--ink); }
details.disclose > div { font-size: var(--t-sm); padding: 0.35rem 0 var(--s-2); }

.source-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  align-items: baseline;
  max-width: var(--measure-wide);
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-family: var(--f-text);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.source-note-k {
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-2);
}

.source-note time { font-family: var(--f-data); }
.source-note a { color: var(--ink-2); }

.source-note span[aria-hidden] { color: var(--rule); }

.buckets {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.bucket {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: var(--s-5);
}
.bucket::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--c);
  margin: 0 0 var(--s-3);
}
.bucket:nth-child(4n + 1) { border-radius: var(--radius-xl) var(--radius-lg) var(--radius-lg) var(--radius-lg); }
.bucket:nth-child(4n + 2) { border-radius: var(--radius-lg) var(--radius-xl) var(--radius-lg) var(--radius-lg); }
.bucket:nth-child(4n + 3) { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xl); }
.bucket:nth-child(4n + 4) { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xl) var(--radius-lg); }
.bucket h2 { margin: 0 0 0.15rem; font-size: var(--t-md); }
.bucket > p { font-size: var(--t-xs); color: var(--ink-3); margin: 0 0 0.7rem; font-family: var(--f-text); }
.bucket ul { list-style: none; margin: 0; padding: 0; }
.bucket li {
  padding: 0.45rem 0;
  border-top: 1px solid var(--rule-2);
  font-size: var(--t-sm);
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: baseline;
}
.bucket li:first-child { border-top: 0; }
.b-due    { --c: var(--r-severe); }
.b-soon   { --c: var(--r-high); }
.b-later  { --c: var(--r-low); }
.b-unknown{ --c: var(--r-none); }

.versus {
  display: grid;
  gap: 0 var(--s-5);
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}
.versus-mid {
  font-family: var(--f-text);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 2.2rem;
}
.cmp-win  { --c: var(--r-low); }
.cmp-lose { --c: var(--r-severe); }
.cmp-tie  { --c: var(--r-none); }

.formula {
  font-family: var(--f-data);
  font-size: var(--t-xs);
  line-height: 1.7;
  background: var(--card-2);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-xl);
  box-shadow: inset 3px 0 0 var(--ink-3);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-4) 0 var(--s-5);
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}

.formula b { font-weight: 700; }
.formula span { color: var(--ink-3); }

.card-contact {
  --c: var(--accent);
  max-width: var(--measure-wide);
  margin: 0 0 var(--s-5);
}
.contact-addr {
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.4rem);
  line-height: 1.3;
  margin: 0.2rem 0 0.6rem;
  word-break: break-word;
}
.contact-addr .n { letter-spacing: 0.01em; }

.policy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  font-family: var(--f-text);
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
  max-width: var(--measure-wide);
}
.policy-meta time { font-family: var(--f-data); }

.ad {
  --ad-h: 280px;
  margin: var(--s-6) 0;
  max-width: var(--measure-wide);
  min-height: calc(var(--ad-h) + 1.6rem);
  text-align: center;
}
.ad:has(ins[data-ad-status="unfilled"]) { display: none; }
.ad-k {
  font-family: var(--f-text);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-1);
  text-align: left;
}
.ad ins { display: block; }

.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  background: var(--card);
  border-top: 1px solid var(--rule);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-float);
  font-family: var(--f-text);
  font-size: var(--t-xs);
  padding: var(--s-4) 0;
}
.consent[hidden] { display: none; }
.consent-in {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--gap);
}
.consent-txt { margin: 0; max-width: 46rem; }
.consent-btns { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.consent-btns .btn { font-size: 0.7rem; padding: 0.45rem 0.8rem; }

.pair { display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: center; }
.plain { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); }
.plain li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-top: 1px solid var(--rule-2);
}
.plain li:first-child { border-top: 0; }
.stack > * + * { margin-top: 0.65rem; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 44rem) {

  .ruler { --ruler-cols: 1fr auto; }
  .axis { grid-column: 1; }
  .axis-cap { grid-column: 2; }
  .bars > li { padding: var(--s-2) 0; gap: 0.15rem 0.6rem; }
  .bar-label { grid-column: 1 / -1; }
  .track, .track-none { grid-column: 1; }
  .bar-val { grid-column: 2; }

  .vbar { grid-template-columns: 1fr auto; }
  .vbar-k { grid-column: 1 / -1; }

  .plot { --plot-cols: 2.2rem 1fr; column-gap: 0.35rem; }
  .gauge { max-width: none; }

  .tbl td:first-child, .tbl th:first-child {
    position: sticky;
    left: 0;
    background: var(--paper);
    box-shadow: 1px 0 0 var(--rule-2);
    padding-right: 0.55rem;
  }
  .tbl tbody tr:hover td:first-child { background: var(--card-2); }

  .versus { grid-template-columns: 1fr; gap: var(--s-4); }
  .versus-mid { padding: 0; }

  .site-head { padding: var(--s-2) 0; }
  .site-head .wrap { flex-wrap: nowrap; padding: 0 var(--s-4); gap: var(--s-3); }
  .site-nav {
    gap: 0.15rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav::-webkit-scrollbar { width: 0; height: 0; }

  .site-head[data-nav="ready"] .wrap { position: relative; }
  .site-head[data-nav="ready"] .nav-btn { display: inline-flex; }
  .site-head[data-nav="ready"] .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: var(--s-3) var(--s-4);
    background: var(--card);
    background: color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid var(--rule);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    overflow: visible;
  }
  .site-head[data-nav="ready"][data-nav-open] .site-nav { display: flex; }

  .site-head[data-nav="ready"] .site-nav a {
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-pill);
  }

  h2 { margin-top: var(--s-6); }
  .toc-list { gap: 0.15rem; }

  .stage { padding: var(--s-5) var(--s-4); }
  .tally { padding: var(--s-4); gap: var(--s-3) var(--s-4); }
}

@media print {
  .site-nav, .nav-btn, .site-foot, .form, .ac-list, .skip, .toc, .ad, .consent { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }

  body::before, body::after { display: none; }

  .site-head { position: static; padding: 0; background: none; }
  .site-head .wrap {
    max-width: none;
    padding: 0 0 0.4rem;
    border: 0;
    border-bottom: 1px solid #000;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    min-height: 0;
  }
  a { text-decoration: none; color: #000; }

  a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  .card, .placard, .ticket, .bucket, .answer, .faq-item, .chart, .prose-sec { break-inside: avoid; }

  .card, .placard, .ticket, .bucket, .faq-item, .quote, .note, .notice, .chart, .strip a {
    box-shadow: none;
    border: 1px solid #999;
    border-radius: var(--radius);
  }

  .stage, .tally {
    padding: 0;
    margin: var(--s-5) 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .stage::before { display: none; }

  .score::after { display: none; }

  .answer::before { height: 0; border-top: 3px solid #000; }
  .scroll { overflow: visible; background: none; }
  .whisker, .box, .tick { animation: none; transform: none; opacity: 1; }

  .plot-a, .gauge-track, .gauge-zone, .vbar-fill, .vbar-t, .whisker, .box, .tick {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  h2, h3 { break-after: avoid; }

  .source-note {
    color: #000;
    border-top: 1px solid #000;
    break-inside: avoid;
  }
  .source-note a { color: #000; }
}