/* Kaspa County shared layer. The old reading room keeps styles.css; County
   pages use this small, flat illustrated system so the play surface has one
   visual language. */

:root {
  --county-paper: #f7f0dd;
  --county-paper-deep: #e8ddc5;
  --county-ink: #2b2b27;
  --county-muted: #5f5d54;
  --county-line: #2b2b27;
  --county-teal: #76b8a7;
  --county-teal-dark: #2c6b63;
  --county-coral: #c9654e;
  --county-coral-dark: #984637;
  --county-yellow: #d7b459;
  --county-blue: #586d80;
  --county-pink: #ba8e83;
  --county-lilac: #a29a88;
  --county-shadow: #2b2b27;
  --county-white: #fffaf0;
  --county-ink-on-color: #171816;
  --county-ink-on-blue: #fffdf6;
  --county-radius: 20px;
  --county-content: 1240px;
}

:root[data-theme="dark"] {
  --county-paper: #142b34;
  --county-paper-deep: #1b3940;
  --county-ink: #f5ead0;
  --county-muted: #c3beaa;
  --county-line: #f5ead0;
  --county-teal: #5fa994;
  --county-teal-dark: #9bd8c4;
  --county-coral: #c76752;
  --county-coral-dark: #f0aa91;
  --county-yellow: #cda950;
  --county-blue: #708595;
  --county-pink: #bd9186;
  --county-lilac: #a89e89;
  --county-shadow: #07171e;
  --county-white: #213c43;
  --county-ink-on-color: #171816;
  --county-ink-on-blue: #171816;
}

html {
  background: var(--county-paper);
  color-scheme: light;
  scroll-behavior: smooth;
}

html[data-theme="dark"] { color-scheme: dark; }

body.county {
  min-width: 0;
  margin: 0;
  background: var(--county-paper);
  color: var(--county-ink);
  font-family: Inter, "SF Pro Text", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

body.county a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

body.county a:hover { color: var(--county-teal-dark); }

body.county :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--county-blue);
  outline-offset: 4px;
}

.county-skip-link {
  position: fixed;
  z-index: 30;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border: 3px solid var(--county-line);
  border-radius: 10px;
  background: var(--county-yellow);
  color: var(--county-ink-on-color);
  font-weight: 800;
  transform: translateY(-160%);
}

.county-skip-link:focus { transform: translateY(0); }
body.county a.county-skip-link,
body.county a.county-skip-link:focus { color: var(--county-ink-on-color); }

.county-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1.5px solid var(--county-line);
  background: var(--county-paper);
}

.county-header-inner,
.county-footer-main,
.county-footer-links {
  width: min(calc(100% - 40px), var(--county-content));
  margin: 0 auto;
}

.county-header-inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.county-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--county-ink);
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.045em;
  text-decoration: none;
}

.county-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1;
}

.county-brand-copy strong { font-size: 21px; letter-spacing: -0.055em; }
.county-brand-copy small {
  color: var(--county-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.county-navigation {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.county-navigation a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--county-ink);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.county-navigation a:hover,
.county-navigation a[aria-current="page"] {
  background: var(--county-yellow);
  color: var(--county-ink);
}

.county-header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.county-edition-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--county-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.county-edition-picker select {
  min-height: 44px;
  padding: 7px 25px 7px 9px;
  border: 2px solid var(--county-line);
  border-radius: 9px;
  background: var(--county-white);
  color: var(--county-ink);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.county-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1.5px solid var(--county-line);
  border-radius: 11px;
  background: var(--county-coral);
  color: var(--county-ink-on-color);
  box-shadow: 0 3px 0 #2b2b2722, 0 5px 10px #2b2b2718;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.county-button:hover {
  background: var(--county-yellow);
  color: var(--county-ink-on-color);
  transform: translateY(1px);
  box-shadow: 0 2px 0 #2b2b2722, 0 4px 8px #2b2b2718;
}

.county-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #2b2b2722;
}

.county-button--secondary {
  background: var(--county-white);
  color: var(--county-ink);
}

.county-button--secondary:hover { color: var(--county-ink); }

.county-button--passport { background: var(--county-teal); color: var(--county-ink-on-color); }

/* Anchor buttons inherit the link rule above the component rules, so carry
   the surface foreground through the stronger, semantic selector as well. */
body.county a.county-button { color: var(--county-ink-on-color); }
body.county a.county-button:hover,
body.county a.county-button:focus-visible { color: var(--county-ink-on-color); }
body.county a.county-button--secondary,
body.county a.county-button--secondary:hover { color: var(--county-ink); }

.county-theme-button { min-width: 70px; }

.county-menu-button { display: none; }

.county-wrap {
  width: min(calc(100% - 40px), var(--county-content));
  margin: 0 auto;
}

.county-main { padding-bottom: 84px; }

.county-hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 18px;
  min-height: auto;
  padding: clamp(36px, 5vw, 64px) 0 44px;
}

.county-kicker {
  margin: 0 0 12px;
  color: var(--county-coral-dark);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.county-hero h1,
.county-page-hero h1 {
  max-width: 980px;
  margin: 0;
  color: var(--county-ink);
  font-family: Inter, "SF Pro Display", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2.55rem, 5.8vw, 4.25rem);
  font-weight: 750;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.county-hero-lede {
  max-width: 60rem;
  margin: 24px 0 0;
  color: var(--county-muted);
  font-size: clamp(1.15rem, 2vw, 1.42rem);
  line-height: 1.42;
}

.county-hero-taskline {
  max-width: 60rem;
  margin: 8px 0 0;
  color: var(--county-ink);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.4;
}

.county-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.county-inline-link {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 9px 4px;
  color: var(--county-ink);
  font-weight: 900;
}

/* The homepage teaches one mechanism before it offers the floor map. The
   guided scene keeps its incoming blocks, lanes, and conclusion together so
   the point survives a phone viewport and never depends on a click. */
.county-home .county-hero {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  padding-top: clamp(28px, 4vw, 52px);
}

.county-home .county-hero h1 { max-width: 11ch; }

.county-home .county-hero-copy { min-width: 0; }

/* The home page carries one short lesson in the opening panel. Keep its
   arrival, consequence, and response visible together before the longer
   exhibit pages take over. */
.county-home .county-guided-scene { padding: 18px; }
.county-home .county-guided-scene-topline { margin-bottom: 12px; }
.county-home .county-guided-arrivals { min-height: 54px; margin-block: 12px 10px; }
.county-home .county-guided-comparison { gap: 8px; }
.county-home .county-guided-lane { padding: 10px; }
.county-home .county-guided-record { min-height: 92px; padding: 7px; }
.county-home .county-guided-slot,
.county-home .county-guided-file { min-height: 30px; padding: 5px 7px; font-size: 10px; }
.county-home .county-guided-lane > p:last-child { min-height: 0; margin-top: 7px; font-size: 12px; line-height: 1.25; }
.county-home .county-guided-outcome { min-height: 0; margin-top: 10px; padding: 9px 11px; font-size: 13px; line-height: 1.3; }
.county-home .county-guided-actions { margin-top: 9px; }

.county-guided-scene {
  min-width: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 4px solid var(--county-line);
  border-radius: 22px;
  background: var(--county-paper-deep);
  box-shadow: 8px 8px 0 var(--county-shadow);
}

.county-guided-scene-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
  color: var(--county-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.county-guided-scene-topline .county-badge {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border: 2px solid var(--county-line);
  border-radius: 999px;
  background: var(--county-yellow);
  color: var(--county-ink-on-color);
  font-size: 11px;
  letter-spacing: .08em;
}

.county-guided-scene h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--county-ink);
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  letter-spacing: -.05em;
  line-height: 1;
}

.county-guided-arrivals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 68px;
  margin: 18px 0 14px;
}

.county-guided-block {
  min-width: 92px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 11px;
  border: 3px solid var(--county-line);
  border-radius: 10px;
  background: var(--county-coral);
  color: var(--county-ink-on-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 4px 4px 0 var(--county-shadow);
}

.county-guided-block[data-guided-arrival="b"] { background: var(--county-teal); }
.county-guided-arrivals-mark { color: var(--county-muted); font-size: 24px; font-weight: 900; }

.county-guided-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.county-guided-lane {
  min-width: 0;
  padding: 13px;
  border: 3px solid var(--county-line);
  border-radius: 14px;
  color: var(--county-ink-on-color);
}

.county-guided-lane--chain { background: var(--county-coral); }
.county-guided-lane--dag { background: var(--county-yellow); }

.county-guided-lane-label {
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.county-guided-record {
  display: grid;
  gap: 6px;
  min-height: 116px;
  align-content: center;
  padding: 9px;
  border: 2px dashed var(--county-line);
  border-radius: 10px;
  background: var(--county-paper);
}

.county-guided-slot,
.county-guided-file {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border: 2px solid var(--county-line);
  border-radius: 7px;
  color: var(--county-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
}

.county-guided-slot { color: var(--county-muted); border-style: dashed; }
.county-guided-file { display: none; background: var(--county-teal); color: var(--county-ink-on-color); }
.county-guided-file--excluded { background: var(--county-white); color: var(--county-ink); text-decoration: line-through; }

.county-guided-lane > p:last-child {
  min-height: 54px;
  margin: 10px 0 0;
  color: var(--county-ink-on-color);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.county-guided-outcome {
  min-height: 53px;
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 3px solid var(--county-line);
  border-radius: 10px;
  background: var(--county-white);
  color: var(--county-ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
}

.county-guided-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 13px;
  color: var(--county-muted);
  font-size: 12px;
  font-weight: 800;
}

.county-guided-actions .county-button { min-height: 44px; }

[data-guided-collision][data-scene-state="complete"] .county-guided-slot { display: none; }
[data-guided-collision][data-scene-state="complete"] .county-guided-file { display: flex; }
[data-guided-collision][data-scene-state="complete"] .county-guided-block { transform: translateY(7px); }
[data-guided-collision][data-scene-state="arriving"] .county-guided-block { animation: county-guided-arrival 780ms cubic-bezier(.2,.75,.3,1) both; }
[data-guided-collision][data-scene-state="arriving"] [data-guided-arrival="b"] { animation-delay: 120ms; }

@keyframes county-guided-arrival {
  0% { opacity: 1; transform: translateY(-3px) scale(.98); }
  68% { opacity: 1; transform: translateY(4px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.county-guided-sequence { padding-top: 48px; }

.county-guided-preview-list { display: grid; gap: 20px; }

.county-guided-preview {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  min-width: 0;
  padding: clamp(18px, 3vw, 30px);
  border: 3px solid var(--county-line);
  border-radius: 20px;
  background: var(--county-paper-deep);
  box-shadow: 6px 6px 0 var(--county-shadow);
}

.county-guided-preview-visual {
  min-height: 180px;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 16px;
  border: 3px solid var(--county-line);
  border-radius: 14px;
  background: var(--county-paper);
}

.county-guided-preview-arrivals,
.county-guided-preview-order { display: flex; justify-content: center; gap: 8px; }
.county-guided-preview-arrivals span,
.county-guided-preview-order span {
  min-width: 42px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--county-line);
  border-radius: 7px;
  background: var(--county-teal);
  color: var(--county-ink-on-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 900;
}

.county-guided-preview-arrivals span:nth-child(2) { background: var(--county-coral); }
.county-guided-preview-arrivals span:nth-child(3) { background: var(--county-yellow); }
.county-guided-preview-order span { background: var(--county-white); color: var(--county-ink); }
.county-guided-preview-arrow { color: var(--county-muted); font-size: 25px; font-weight: 900; text-align: center; }
.county-guided-preview--ordering[data-scene-state="active"] .county-guided-preview-order span { animation: county-guided-order 620ms ease both; }
.county-guided-preview--ordering[data-scene-state="active"] .county-guided-preview-order span:nth-child(2) { animation-delay: 100ms; }
.county-guided-preview--ordering[data-scene-state="active"] .county-guided-preview-order span:nth-child(3) { animation-delay: 200ms; }

@keyframes county-guided-order {
  from { opacity: .35; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.county-guided-rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 7px 10px;
  border: 2px solid var(--county-line);
  border-radius: 8px;
  color: var(--county-ink-on-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 850;
}

.county-guided-rule-row--pass { background: var(--county-teal); }
.county-guided-rule-row--fail { background: var(--county-coral); }
.county-guided-rule-row b { font-size: 20px; line-height: 1; }
.county-guided-rule-caption { color: var(--county-muted); font-size: 12px; font-weight: 800; line-height: 1.3; text-align: center; }
.county-guided-preview--rules[data-scene-state="active"] .county-guided-rule-row--fail { animation: county-guided-reject 500ms ease both; animation-delay: 220ms; }

@keyframes county-guided-reject {
  0% { opacity: .4; transform: translateX(10px); }
  70% { opacity: 1; transform: translateX(-3px); }
  100% { opacity: 1; transform: translateX(0); }
}

.county-directory {
  margin: 20px 0 0;
  border-top: 2px solid var(--county-line);
  border-bottom: 2px solid var(--county-line);
}

.county-directory summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 18px;
  min-height: 70px;
  padding: 10px 2px;
  color: var(--county-ink);
  cursor: pointer;
  list-style: none;
}

.county-directory summary::-webkit-details-marker { display: none; }
.county-directory summary::before { content: "+"; font-size: 24px; font-weight: 500; }
.county-directory[open] summary::before { content: "−"; }
.county-directory summary .county-kicker { margin: 0; font-size: 11px; }
.county-directory summary strong { font-size: 20px; line-height: 1.1; }
.county-directory summary > span:last-child { color: var(--county-muted); font-size: 13px; font-weight: 700; }

.county-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 2px 18px;
}

.county-directory-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 9px;
  align-content: center;
  min-height: 76px;
  padding: 10px 11px;
  border: 2px solid var(--county-line);
  border-radius: 11px;
  color: var(--county-ink-on-color);
  background: var(--county-white);
  box-shadow: 3px 3px 0 var(--county-shadow);
  text-decoration: none;
}

.county-directory-card:hover { color: var(--county-ink-on-color); transform: translate(1px, 1px); }
.county-directory-card b { grid-row: span 2; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.county-directory-card span { font-size: 14px; font-weight: 900; line-height: 1.1; }
.county-directory-card small { color: var(--county-muted); font-size: 11px; line-height: 1.2; }
.county-directory-card--coral { background: var(--county-coral); }
.county-directory-card--teal { background: var(--county-teal); }
.county-directory-card--yellow { background: var(--county-yellow); }
.county-directory-card--pink { background: var(--county-pink); }
.county-directory-card--blue { background: var(--county-blue); color: var(--county-ink-on-blue); }
.county-directory-card--blue:hover { color: var(--county-ink-on-blue); }
.county-directory-card--lilac { background: var(--county-lilac); }

body.county a.county-directory-card { color: var(--county-ink-on-color); }
body.county a.county-directory-card:hover { color: var(--county-ink-on-color); }
body.county a.county-directory-card--blue,
body.county a.county-directory-card--blue:hover { color: var(--county-ink-on-blue); }
body.county a.county-directory-card small { color: inherit; }

.county-town-exploration { padding-top: 48px; }

.county-ticket-panel {
  max-width: 32rem;
  margin-top: 28px;
  padding: 16px 18px;
  border: 3px solid var(--county-line);
  border-radius: 14px;
  background: var(--county-yellow);
  color: var(--county-ink);
  box-shadow: 5px 5px 0 var(--county-shadow);
}

.county-ticket-panel p { margin: 0; }

.county-ticket-panel strong {
  display: block;
  font-size: 18px;
  line-height: 1.2;
}

.county-ticket-panel [data-county-ticket-output] {
  margin-top: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 800;
}

.county-ticket-panel [data-county-ticket-remark] {
  margin-top: 5px;
  font-size: 15px;
}

.county-companion-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  max-width: 43rem;
  margin-top: 26px;
  padding: 18px;
  border: 3px solid var(--county-line);
  border-radius: 13px;
  background: var(--county-paper-deep);
}

.county-companion-panel p { margin: 0; }
.county-companion-panel strong { display: block; font-size: 19px; line-height: 1.15; }
.county-companion-panel small { display: block; margin-top: 5px; color: var(--county-muted); font-size: 14px; line-height: 1.35; }
.county-companion-panel label { display: block; margin-top: 12px; color: var(--county-muted); font-size: 13px; font-weight: 850; }
.county-companion-panel input {
  width: 100%;
  min-height: 44px;
  margin-top: 5px;
  padding: 9px 11px;
  border: 2px solid var(--county-line);
  border-radius: 8px;
  background: var(--county-white);
  color: var(--county-ink);
  font: inherit;
  font-size: 16px;
}

.county-companion-panel button { white-space: nowrap; }

.county-section {
  padding: 72px 0;
}

.county-official-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  border-top: 3px solid var(--county-line);
  border-bottom: 3px solid var(--county-line);
  background: var(--county-coral);
  color: var(--county-ink);
}

.county-official-notice-label {
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.county-official-notice strong { font-size: 17px; line-height: 1.2; }
.county-official-notice > span:last-child { color: var(--county-ink); font-size: 13px; }

.county-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 28px;
}

.county-section-heading h2,
.county-panel h2,
.county-department-card h3 {
  margin: 0;
  color: var(--county-ink);
  font-family: Inter, "SF Pro Display", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-weight: 720;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.county-section-heading h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); }

.county-section-heading p {
  max-width: 34rem;
  margin: 0;
  color: var(--county-muted);
  font-size: 17px;
}

.county-map {
  position: relative;
  padding: clamp(20px, 4vw, 42px);
  border: 4px solid var(--county-line);
  border-radius: 27px;
  background: var(--county-paper-deep);
  box-shadow: 8px 8px 0 var(--county-shadow);
  isolation: isolate;
}

.county-map-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px 20px;
  margin-bottom: 26px;
}

.county-map-legend strong { font-size: 20px; }

.county-map-legend span {
  color: var(--county-muted);
  font-size: 14px;
  font-weight: 800;
}

.county-town-stage {
  position: relative;
  height: clamp(300px, 32vw, 440px);
  margin-bottom: 26px;
  overflow: hidden;
  border: 3px solid var(--county-line);
  border-radius: 17px;
  background: var(--county-paper);
  box-shadow: 0 8px 0 var(--county-shadow);
}

.county-town-canvas {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
}

.county-town-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.county-town-status,
.county-town-fallback {
  position: absolute;
  right: 14px;
  bottom: 13px;
  left: 14px;
  max-width: 30rem;
  margin: 0 auto;
  padding: 9px 12px;
  border: 2px solid var(--county-line);
  border-radius: 9px;
  background: var(--county-white);
  color: var(--county-ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.county-town-fallback { color: var(--county-muted); }
.county-town-stage.is-fallback {
  background-image: url("assets/county/hero-adult.png");
  background-position: center 46%;
  background-size: cover;
}
.county-town-stage.is-fallback .county-town-status { display: none; }

.county-finale-home {
  margin-top: 27px;
  padding: 18px 20px;
  border: 3px solid var(--county-line);
  border-radius: 13px;
  background: var(--county-coral);
  box-shadow: 5px 5px 0 var(--county-shadow);
}
.county-finale-home strong { display: block; font-size: 20px; line-height: 1.15; }
.county-finale-home p { margin: 6px 0 13px; color: var(--county-ink); }

.county-map-road {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.county-map-road::before,
.county-map-road::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 3px dashed var(--county-line);
  opacity: 0.65;
}

.county-map-road::before {
  top: 50%;
  right: 6%;
  left: 6%;
  transform: translateY(-50%) rotate(-7deg);
}

.county-map-road::after {
  top: 7%;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%) rotate(11deg);
}

.county-department-card {
  position: relative;
  min-height: 188px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 18px 20px;
  border: 3px solid var(--county-line);
  border-radius: 17px;
  background: var(--county-white);
  color: var(--county-ink);
  box-shadow: 5px 5px 0 var(--county-shadow);
  text-decoration: none;
  transition: transform 130ms ease, box-shadow 130ms ease;
}

.county-department-card:hover {
  color: var(--county-ink);
  transform: translate(2px, 2px) rotate(-0.6deg);
  box-shadow: 3px 3px 0 var(--county-shadow);
}

.county-department-card:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--county-shadow);
}

.county-department-card--coral { background: var(--county-coral); }
.county-department-card--teal { background: var(--county-teal); }
.county-department-card--yellow { background: var(--county-yellow); }
.county-department-card--pink { background: var(--county-pink); }
.county-department-card--blue { background: var(--county-blue); }
.county-department-card--lilac { background: var(--county-lilac); }

.county-department-card--blue h3,
.county-department-card--blue p,
.county-department-card--blue .county-department-number { color: #fffdf6; }

.county-department-number {
  display: inline-flex;
  min-width: 34px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  margin-bottom: 17px;
  padding: 4px 8px;
  border: 2px solid currentColor;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
}

.county-department-card h3 { max-width: 13ch; font-size: 26px; }

.county-department-card p {
  max-width: 28ch;
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.38;
}

.county-department-arrow {
  margin-top: auto;
  padding-top: 15px;
  font-size: 14px;
  font-weight: 950;
}

.county-short-version {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.county-fact {
  padding: 22px;
  border-left: 7px solid var(--county-teal);
  background: var(--county-paper-deep);
}

.county-fact:nth-child(2) { border-color: var(--county-coral); }
.county-fact:nth-child(3) { border-color: var(--county-blue); }

.county-fact strong {
  display: block;
  margin-bottom: 9px;
  font-size: 20px;
  line-height: 1.12;
}

.county-fact p { margin: 0; color: var(--county-muted); line-height: 1.45; }

.county-field-notes {
  margin: 18px 0 0;
  border-top: 1px solid var(--county-paper-deep);
  border-bottom: 1px solid var(--county-paper-deep);
}

.county-field-notes summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 11px 2px;
  color: var(--county-ink);
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  list-style: none;
}

.county-field-notes summary::-webkit-details-marker { display: none; }
.county-field-notes summary::before { content: "+"; margin-right: 10px; font-size: 21px; }
.county-field-notes[open] summary::before { content: "−"; }
.county-field-notes-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 7px 2px 24px;
}
.county-field-notes-body article { padding-left: 12px; border-left: 4px solid var(--county-teal); }
.county-field-notes-body article:nth-child(2) { border-color: var(--county-coral); }
.county-field-notes-body article:nth-child(3) { border-color: var(--county-blue); }
.county-field-notes-body strong { display: block; font-size: 17px; line-height: 1.2; }
.county-field-notes-body article p { margin: 7px 0 0; color: var(--county-muted); font-size: 14px; line-height: 1.42; }
.county-field-notes-body .county-disclosure { grid-column: 1 / -1; margin: 0; }

.county-visit-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.83fr);
  gap: 30px;
  align-items: center;
  padding: clamp(24px, 4vw, 44px);
  border: 4px solid var(--county-line);
  border-radius: 25px;
  background: var(--county-teal);
  color: var(--county-ink);
  box-shadow: 8px 8px 0 var(--county-shadow);
}

.county-visit-panel h2 { max-width: 14ch; font-size: clamp(2.1rem, 4vw, 3.2rem); }

.county-visit-panel p { max-width: 36rem; margin: 14px 0 0; font-size: 17px; }

.county-visit-list {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.county-visit-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 11px 13px;
  border: 2px solid var(--county-line);
  border-radius: 10px;
  background: var(--county-white);
  font-size: 15px;
  font-weight: 750;
}

.county-visit-list b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--county-yellow);
  font-size: 13px;
}

.county-disclosure {
  max-width: 52rem;
  margin: 34px auto 0;
  color: var(--county-muted);
  font-size: 14px;
  line-height: 1.5;
}

.county-disclosure a { font-weight: 850; }

.county-footer {
  padding: 40px 0 54px;
  border-top: 3px solid var(--county-line);
  background: var(--county-paper-deep);
}

.county-footer-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.county-footer p { margin: 0; font-size: 14px; }
.county-footer-boundary { color: var(--county-muted); }

.county-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 26px;
}

.county-footer-links a { font-size: 14px; font-weight: 850; }

.county-noscript {
  margin: 0;
  padding: 12px 20px;
  border-top: 3px solid var(--county-line);
  background: var(--county-yellow);
  color: var(--county-ink);
  font-size: 14px;
  text-align: center;
}

/* Shared page hero for departments and retained exhibits. */
.county-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  gap: 36px;
  align-items: end;
  padding: 72px 0 46px;
}

.county-page-hero h1 { max-width: 14ch; font-size: clamp(2.9rem, 6vw, 5rem); }

.county-page-hero p {
  max-width: 41rem;
  margin: 20px 0 0;
  color: var(--county-muted);
  font-size: 19px;
  line-height: 1.45;
}

.county-page-hero-aside {
  justify-self: end;
  max-width: 290px;
  padding: 18px;
  border: 3px solid var(--county-line);
  border-radius: 15px;
  background: var(--county-yellow);
  box-shadow: 5px 5px 0 var(--county-shadow);
  transform: rotate(2deg);
  color: var(--county-ink-on-color);
}

.county-page-hero-aside strong { display: block; font-size: 19px; line-height: 1.15; }
.county-page-hero-aside span { display: block; margin-top: 14px; font-size: 14px; line-height: 1.35; }

.county-panel {
  padding: clamp(20px, 3vw, 32px);
  border: 3px solid var(--county-line);
  border-radius: var(--county-radius);
  background: var(--county-white);
  box-shadow: 6px 6px 0 var(--county-shadow);
}

.county-panel > :first-child { margin-top: 0; }
.county-panel > :last-child { margin-bottom: 0; }

.county-panel h2 { font-size: clamp(1.7rem, 3vw, 2.45rem); }
.county-panel h3 { margin: 26px 0 7px; font-size: 20px; line-height: 1.2; }
.county-panel p { color: var(--county-muted); }

.county-note {
  padding: 14px 16px;
  border-left: 7px solid var(--county-coral);
  background: var(--county-paper-deep);
  color: var(--county-ink);
  font-size: 15px;
  line-height: 1.45;
}

.county-note strong { color: var(--county-ink); }

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

.county-next-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.county-next-links a { font-weight: 900; }

.county-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.county-archive-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.county-archive-card {
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border: 3px solid var(--county-line);
  border-radius: 14px;
  background: var(--county-white);
  color: var(--county-ink);
  box-shadow: 4px 4px 0 var(--county-shadow);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.county-archive-card:hover {
  color: var(--county-ink);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--county-shadow);
}

.county-archive-card strong { font-size: 18px; line-height: 1.13; }
.county-archive-card span { color: var(--county-muted); font-size: 14px; line-height: 1.35; }

.county-archive-details {
  margin: 0 0 46px;
  padding: 0;
  border-top: 3px solid var(--county-line);
  border-bottom: 3px solid var(--county-line);
}

.county-archive-details summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 11px 3px;
  color: var(--county-ink);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.county-archive-details summary::-webkit-details-marker { display: none; }
.county-archive-details summary::before { content: "+"; margin-right: 10px; font-size: 21px; }
.county-archive-details[open] summary::before { content: "−"; }

.county-archive-route-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px 24px;
  padding: 0 3px 21px;
}

.county-archive-route-list a { padding: 7px 0; font-size: 14px; font-weight: 800; }

/* Passport dialog and stamp display. */
.county-drawer {
  width: min(calc(100% - 28px), 540px);
  max-height: min(760px, calc(100dvh - 28px));
  margin: auto 14px 14px auto;
  padding: 0;
  border: 4px solid var(--county-line);
  border-radius: 22px;
  background: var(--county-paper);
  color: var(--county-ink);
  box-shadow: 9px 9px 0 var(--county-shadow);
}

.county-drawer::backdrop { background: #24231f99; }
.county-drawer[open] { animation: county-drawer-in 180ms ease both; }

@keyframes county-drawer-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.county-drawer-inner { padding: 24px; }

.county-drawer-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.county-drawer-heading h2 { margin: 0; font-size: 32px; letter-spacing: -0.05em; line-height: 1; }
.county-drawer-heading .county-kicker { margin-bottom: 8px; }

.county-icon-button {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 3px solid var(--county-line);
  border-radius: 50%;
  background: var(--county-white);
  color: var(--county-ink);
  cursor: pointer;
  font: inherit;
  font-size: 29px;
  line-height: 1;
}

.county-drawer-lede { margin: 20px 0; color: var(--county-muted); }

.county-passport-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.county-passport-stamp {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 11px;
  align-items: center;
  min-height: 58px;
  padding: 8px 11px;
  border: 2px solid var(--county-line);
  border-radius: 10px;
  background: var(--county-white);
}

.county-passport-stamp[data-earned="true"] { background: var(--county-teal); }
.county-passport-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.county-passport-stamp strong { display: block; font-size: 16px; line-height: 1.1; }
.county-passport-stamp small { display: block; margin-top: 3px; color: var(--county-muted); font-size: 13px; line-height: 1.25; }
.county-passport-stamp[data-earned="true"] small { color: var(--county-ink); }

.county-storage-note { margin: 16px 0 0; color: var(--county-muted); font-size: 13px; }

.county-passport-companion,
.county-passport-progress { margin: 0 0 10px; color: var(--county-muted); font-size: 14px; }
.county-passport-companion strong { color: var(--county-ink); }
.county-passport-completion {
  margin-top: 18px;
  padding: 15px;
  border: 3px solid var(--county-line);
  border-radius: 11px;
  background: var(--county-yellow);
}
.county-passport-completion strong { display: block; font-size: 17px; line-height: 1.2; }
.county-passport-completion p { margin: 6px 0 13px; font-size: 14px; line-height: 1.4; }

.county-passport-tools {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--county-paper-deep);
}

.county-ticket-panel--drawer,
.county-companion-panel--drawer {
  max-width: none;
  margin: 0;
  padding: 13px;
  border-width: 1.5px;
  border-radius: 11px;
  box-shadow: 0 2px 5px #2b2b2718;
}

.county-ticket-panel--drawer button { margin-top: 9px; }
.county-ticket-panel--drawer [data-county-ticket-remark] { font-size: 12px; }
.county-companion-panel--drawer { grid-template-columns: minmax(0, 1fr) auto; }
.county-companion-panel--drawer label { margin-top: 8px; }
.county-companion-panel--drawer input { min-height: 40px; margin-top: 3px; font-size: 14px; }
.county-companion-panel--drawer button { align-self: end; }

.county-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.county-finale-dialog { max-width: 600px; }
.county-notary-slip {
  margin: 22px 0 20px;
  padding: 16px;
  border: 2px dashed var(--county-line);
  background: var(--county-paper-deep);
  transform: rotate(-0.8deg);
}
.county-notary-slip p { margin: 0; color: var(--county-ink); font-size: 15px; line-height: 1.45; }
.county-notary-slip .county-notary-stamp {
  display: inline-block;
  margin-bottom: 11px;
  padding: 5px 8px;
  border: 2px solid var(--county-coral-dark);
  color: var(--county-coral-dark);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.1em;
  transform: rotate(2deg);
}
.county-notary-slip .county-notary-small { margin-top: 11px; color: var(--county-muted); font-size: 13px; }
.county-finale-result-title { margin: 0 0 7px; font-size: 23px; line-height: 1.1; }
.county-finale-greeting {
  margin: 15px 0;
  padding: 12px 14px;
  border-left: 6px solid var(--county-teal-dark);
  background: var(--county-white);
  color: var(--county-ink) !important;
  font-weight: 800;
}
.county-finale-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 17px; }

/* DMV interaction surface. */
.dmv-demo {
  --dmv-rail: var(--county-paper-deep);
  padding: clamp(18px, 4vw, 36px);
  border: 4px solid var(--county-line);
  border-radius: 24px;
  background: var(--county-teal);
  box-shadow: 8px 8px 0 var(--county-shadow);
}

.county-dmv .county-page-hero {
  padding-top: clamp(30px, 5vw, 54px);
  padding-bottom: clamp(24px, 4vw, 38px);
}

.county-dmv .county-page-hero h1 { max-width: 14ch; }

.dmv-curated-summary {
  padding: 0 0 20px;
  border-bottom: 3px dashed var(--county-line);
}

.dmv-demo-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 22px;
  margin-bottom: 24px;
}

.dmv-demo-heading h2 { max-width: 18ch; margin: 0; color: var(--county-ink-on-color); font-size: clamp(1.85rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -0.045em; }
.dmv-demo-caption { max-width: 20rem; margin: 0; color: var(--county-ink-on-color); font-size: 16px; font-weight: 800; line-height: 1.35; }
.dmv-demo-heading .county-kicker { color: var(--county-ink-on-color); }

.dmv-options {
  margin-top: 18px;
  border: 3px solid var(--county-line);
  border-radius: 14px;
  background: var(--county-paper);
}

.dmv-options summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 11px 15px;
  color: var(--county-ink);
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  list-style: none;
}

.dmv-options summary::-webkit-details-marker { display: none; }
.dmv-options summary::before { content: "+"; margin-right: 10px; font-size: 22px; }
.dmv-options[open] summary::before { content: "−"; }

.dmv-options-body { padding: 0 15px 18px; }

.dmv-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 24px;
  border-bottom: 3px dashed var(--county-line);
}

.dmv-controls .county-button { background: var(--county-white); }
.dmv-controls .county-button[data-dmv-action="burst"] { background: var(--county-coral); }
.dmv-controls .county-button[data-dmv-action="reset"] { margin-left: auto; background: var(--county-yellow); }

.dmv-control-status {
  flex: 1 1 100%;
  min-height: 24px;
  margin: 3px 0 0;
  color: var(--county-ink);
  font-size: 15px;
  font-weight: 800;
}

.dmv-curated-arrival {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 66px;
  margin: 16px 0 14px;
}

.dmv-curated-block {
  min-width: 92px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 11px;
  border: 3px solid var(--county-line);
  border-radius: 10px;
  background: var(--county-coral);
  color: var(--county-ink-on-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 4px 4px 0 var(--county-shadow);
}

.dmv-curated-block--a { background: var(--county-coral); }
.dmv-curated-block--b { background: var(--county-teal); }
.dmv-curated-arrival-mark { color: var(--county-ink-on-color); font-size: 24px; font-weight: 900; }
.dmv-curated-arrival small { align-self: flex-end; margin-left: 3px; color: var(--county-ink-on-color); font-size: 13px; font-weight: 900; text-transform: uppercase; }

.dmv-curated-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dmv-curated-outcome {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 3px solid var(--county-line);
  border-radius: 13px;
  color: var(--county-ink-on-color);
}

.dmv-curated-outcome--chain { background: var(--county-coral); }
.dmv-curated-outcome--dag { background: var(--county-yellow); }
.dmv-curated-outcome strong { font-size: 18px; line-height: 1.1; }
.dmv-curated-outcome span { font-size: 16px; font-weight: 700; line-height: 1.35; }

[data-dmv-demo][data-scene-state="arriving"] .dmv-curated-block { animation: dmv-curated-arrival 720ms cubic-bezier(.2,.75,.3,1) both; }
[data-dmv-demo][data-scene-state="arriving"] .dmv-curated-block--b { animation-delay: 120ms; }

@keyframes dmv-curated-arrival {
  from { opacity: .35; transform: translateY(-14px) scale(.92); }
  70% { opacity: 1; transform: translateY(4px) scale(1.04); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dmv-simulation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.dmv-lane {
  min-width: 0;
  padding: 18px;
  border: 3px solid var(--county-line);
  border-radius: 17px;
  background: var(--county-white);
}

.dmv-lane--chain { background: var(--county-coral); }
.dmv-lane--dag { background: var(--county-yellow); }

.dmv-lane h2 { margin: 0; font-size: 26px; }
.dmv-lane > p { min-height: 44px; margin: 7px 0 16px; color: var(--county-ink); font-size: 14px; line-height: 1.35; }

.dmv-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin: 0 0 16px;
  color: var(--county-ink);
  font-size: 13px;
  font-weight: 850;
}

.dmv-stats span { white-space: nowrap; }

.dmv-records {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px;
  border: 3px solid var(--county-line);
  border-radius: 12px;
  background: var(--dmv-rail);
}

.dmv-block {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  border: 2px solid var(--county-line);
  border-radius: 9px;
  background: var(--county-teal);
  color: var(--county-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.15;
}

.dmv-block small { font-family: inherit; font-size: 11px; font-weight: 700; opacity: 0.84; }
.dmv-block--dropped { background: var(--county-white); text-decoration: line-through; }
.dmv-block--dropped small { text-decoration: none; }
.dmv-block--parallel { border-style: dashed; }

.dmv-arrival-cluster {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 2px solid transparent;
  border-radius: 10px;
}

.dmv-arrival-cluster--parallel {
  border-color: var(--county-line);
  background: var(--county-paper-deep);
}

.dmv-arrival-caption {
  color: var(--county-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.dmv-records:empty::before {
  content: "No blocks on file yet. Send one.";
  color: var(--county-muted);
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 750;
  text-align: center;
}

.dmv-result {
  margin: 24px 0 0;
  padding: 15px 17px;
  border: 3px solid var(--county-line);
  border-radius: 11px;
  background: var(--county-white);
  color: var(--county-ink);
  font-size: 16px;
  font-weight: 800;
}

.dmv-result[aria-live="polite"] { min-height: 53px; }

.dmv-range-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
  padding: 18px;
  border: 3px solid var(--county-line);
  border-radius: 14px;
  background: var(--county-paper);
}

.dmv-range-field label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: var(--county-ink);
  font-size: 14px;
  font-weight: 850;
}

.dmv-range-field output { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dmv-range-field input { width: 100%; min-height: 44px; accent-color: var(--county-coral); }

.dmv-reduced-motion {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--county-muted);
  font-size: 14px;
  font-weight: 800;
}

.dmv-reduced-motion input { width: 20px; height: 20px; accent-color: var(--county-coral); }

.dmv-technical-note {
  margin: 24px 0 0;
  color: var(--county-ink);
  font-size: 14px;
  line-height: 1.45;
}

.dmv-technical-note a { font-weight: 900; }

.county-exhibit-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
  padding: 18px 20px;
  border: 3px solid var(--county-line);
  border-radius: 14px;
  background: var(--county-blue);
  color: #fffdf6;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--county-shadow);
}

.county-exhibit-link:hover { background: var(--county-coral); color: var(--county-ink); }

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

@media (max-width: 980px) {
  .county-header-inner { gap: 12px; }
  .county-navigation { gap: 0; }
  .county-navigation a { padding-inline: 8px; font-size: 14px; }
  .county-hero { grid-template-columns: 1fr; gap: 24px; }
  .county-home .county-hero { grid-template-columns: 1fr; gap: 28px; }
  .county-map-road { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .county-map-road::before { top: 33%; transform: translateY(-50%) rotate(-7deg); }
  .county-map-road::after { display: none; }
}

@media (max-width: 1060px) {
  .county-header-inner { position: relative; }
  .county-menu-button { display: inline-flex; margin-left: auto; }
  .county-header .county-edition-picker { display: none; }
  .county-navigation {
    position: absolute;
    z-index: 25;
    top: calc(100% + 3px);
    right: 0;
    left: 0;
    display: none;
    padding: 10px;
    border: 3px solid var(--county-line);
    border-top: 0;
    background: var(--county-paper);
    box-shadow: 5px 5px 0 var(--county-shadow);
  }
  .county-navigation.is-open { display: grid; }
  .county-navigation a { min-height: 48px; padding-inline: 14px; }
}

@media (max-width: 760px) {
  .county-header-inner,
  .county-footer-main,
  .county-footer-links,
  .county-wrap { width: min(calc(100% - 28px), var(--county-content)); }
  .county-header-inner { min-height: 68px; position: relative; }
  .county-menu-button { display: inline-flex; margin-left: auto; }
  .county-navigation {
    position: absolute;
    top: calc(100% + 3px);
    right: 0;
    left: 0;
    display: none;
    padding: 10px;
    border: 3px solid var(--county-line);
    border-top: 0;
    background: var(--county-paper);
    box-shadow: 5px 5px 0 var(--county-shadow);
  }
  .county-navigation.is-open { display: grid; }
  .county-navigation a { min-height: 48px; padding-inline: 14px; }
  .county-header-tools { gap: 5px; }
  .county-header-tools .county-theme-button { display: none; }
  /* Page-specific form rules can be more specific than the shell's picker
     rule. Keep the review picker out of the compact header on every County
     page, even when a page styles all of its labels as grids. */
  .county-header .county-edition-picker { display: none; }
  .county-hero { display: flex; flex-direction: column; align-items: stretch; min-height: auto; padding: 54px 0 56px; }
  .county-home .county-hero { gap: 22px; padding-top: 40px; }
  .county-home .county-hero { padding-bottom: 16px; }
  .county-hero h1 { max-width: 11ch; }
  .county-section { padding: 52px 0; }
  .county-home .county-guided-sequence { padding-top: 28px; }
  .county-section-heading { display: block; margin-bottom: 21px; }
  .county-section-heading p { margin-top: 12px; }
  .county-official-notice { grid-template-columns: 1fr; gap: 6px; padding: 14px; }
  .county-map { border-width: 3px; border-radius: 19px; box-shadow: 5px 5px 0 var(--county-shadow); }
  .county-town-stage { height: clamp(300px, 74vw, 360px); margin-bottom: 20px; }
  .county-map-road { gap: 13px; }
  .county-department-card { min-height: 205px; padding: 15px; box-shadow: 4px 4px 0 var(--county-shadow); }
  .county-department-card h3 { font-size: 22px; }
  .county-short-version,
  .county-visit-panel,
  .county-grid,
  .county-field-notes-body,
  .county-archive-grid,
  .county-archive-grid--compact,
  .county-archive-route-list,
  .dmv-simulation-grid,
  .dmv-range-controls { grid-template-columns: 1fr; }
  .county-visit-panel { gap: 23px; }
  .county-visit-panel h2 { max-width: none; }
  .county-footer-main { grid-template-columns: 1fr; }
  .county-companion-panel { grid-template-columns: 1fr; align-items: stretch; }
  .county-companion-panel button { width: 100%; }
  .county-page-hero { display: block; padding: 54px 0 34px; }
  .county-page-hero h1 { max-width: 13ch; }
  .county-page-hero-aside { margin-top: 26px; }
  .dmv-demo { border-width: 3px; border-radius: 19px; box-shadow: 5px 5px 0 var(--county-shadow); }
  .dmv-demo-heading { display: block; }
  .dmv-demo-caption { margin-top: 12px; }
  .dmv-controls .county-button[data-dmv-action="reset"] { margin-left: 0; }
  .dmv-records { min-height: 210px; }
  .county-drawer { width: calc(100% - 18px); margin: auto 9px 9px; }
  .county-guided-preview { grid-template-columns: 1fr; gap: 18px; }
  .county-guided-preview-visual { min-height: 152px; }
  .county-town-exploration { padding-top: 40px; }
  .county-home .county-guided-preview { gap: 12px; padding: 15px; }
  .county-home .county-guided-preview-visual { min-height: 0; padding: 10px; gap: 6px; }
  .county-home .county-guided-preview-arrivals span,
  .county-home .county-guided-preview-order span { min-width: 36px; min-height: 30px; font-size: 10px; }
  .county-home .county-guided-preview-arrow { font-size: 20px; }
  .county-home .county-guided-preview h3 { font-size: 24px; }
  .county-home .county-guided-preview > div:last-child > p:not(.county-kicker) { font-size: 14px; line-height: 1.35; }
  .county-home .county-guided-preview .county-inline-link { min-height: 40px; padding-block: 6px; }
  .county-directory summary { grid-template-columns: auto minmax(0, 1fr); }
  .county-directory summary > span:last-child { grid-column: 2; }
  .county-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  body.county { font-size: 16px; }
  .county-brand { font-size: 18px; }
  .county-brand-copy strong { font-size: 19px; }
  .county-header-tools .county-button--passport { padding-inline: 7px; font-size: 12px; }
  .county-menu-button { padding-inline: 10px; }
  .county-hero { padding-top: 42px; }
  .county-home .county-hero { padding-top: 30px; }
  .county-hero h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .county-home .county-hero h1 { max-width: 18ch; font-size: clamp(2.4rem, 10vw, 4rem); }
  .county-hero-actions { align-items: stretch; flex-direction: column; }
  .county-hero-actions .county-button,
  .county-hero-actions .county-inline-link { width: 100%; }
  .county-map-road { gap: 10px; }
  .county-department-card { min-height: 191px; padding: 13px; }
  .county-department-card h3 { font-size: 20px; }
  .county-department-card p { font-size: 14px; }
  .county-department-number { margin-bottom: 12px; }
  .county-drawer-inner { padding: 19px; }
  .county-drawer-heading h2 { font-size: 28px; }
  .county-finale-actions { flex-direction: column; }
  .county-finale-actions .county-button { width: 100%; }
  .county-dmv .county-page-hero {
    padding-top: 27px;
    padding-bottom: 22px;
  }
  .county-dmv .county-page-hero h1 {
    max-width: 15ch;
    font-size: clamp(2.55rem, 12vw, 3.4rem);
  }
  .county-dmv .county-page-hero p {
    margin-top: 13px;
    font-size: 17px;
    line-height: 1.38;
  }
  .dmv-demo { padding: 14px; }
  .dmv-curated-summary { padding-bottom: 14px; }
  .dmv-demo-heading { margin-bottom: 13px; }
  .dmv-demo-heading h2 { font-size: 1.7rem; }
  .dmv-demo-caption { margin-top: 8px; font-size: 15px; line-height: 1.35; }
  .dmv-curated-arrival { min-height: 54px; margin: 10px 0 9px; gap: 8px; }
  .dmv-curated-block { min-width: 82px; min-height: 44px; padding: 7px 8px; font-size: 14px; }
  .dmv-curated-arrival-mark { font-size: 21px; }
  .dmv-curated-arrival small { font-size: 13px; }
  .dmv-curated-outcomes { gap: 8px; }
  .dmv-curated-outcome { gap: 5px; padding: 10px; }
  .dmv-curated-outcome strong { font-size: 16px; }
  .dmv-curated-outcome span { font-size: 15px; line-height: 1.3; }
  .dmv-curated-summary > .dmv-result--curated {
    min-height: 0;
    margin-top: 17px;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.3;
  }
  .dmv-controls { gap: 8px; }
  .dmv-controls .county-button { flex: 1 1 calc(50% - 8px); padding-inline: 9px; }
  .dmv-controls .county-button[data-dmv-action="reset"] { flex-basis: 100%; }
  .county-guided-scene { padding: 16px; border-width: 3px; border-radius: 18px; box-shadow: 5px 5px 0 var(--county-shadow); }
  .county-guided-scene-topline { margin-bottom: 13px; }
  .county-guided-scene h2 { font-size: 1.85rem; }
  .county-guided-arrivals { min-height: 54px; margin-block: 10px 8px; }
  .county-guided-block { min-width: 82px; font-size: 12px; }
  .county-guided-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .county-guided-lane { padding: 9px; }
  .county-guided-lane-label { font-size: 10px; letter-spacing: .04em; }
  .county-guided-record { min-height: 82px; padding: 6px; }
  .county-guided-slot,
  .county-guided-file { min-height: 31px; padding: 5px 6px; font-size: 10px; }
  .county-guided-lane > p:last-child { min-height: 0; margin-top: 7px; font-size: 11px; line-height: 1.2; }
  .county-guided-outcome { min-height: 0; font-size: 13px; }
  .county-guided-actions { align-items: center; flex-direction: row; }
  .county-home .county-guided-scene { padding: 13px; }
  .county-home .county-guided-scene-topline { margin-bottom: 8px; }
  .county-home .county-guided-scene h2 { font-size: 1.68rem; }
  .county-home .county-guided-arrivals { min-height: 44px; margin-block: 6px; }
  .county-home .county-guided-block { min-width: 75px; min-height: 39px; }
  .county-home .county-guided-record { min-height: 68px; }
  .county-home .county-guided-lane-label { font-size: 12px; line-height: 1.2; letter-spacing: .03em; }
  .county-home .county-guided-lane > p:last-child { font-size: 12px; line-height: 1.25; }
  .county-home .county-guided-outcome { margin-top: 7px; padding: 7px 9px; font-size: 14px; line-height: 1.3; }
  .county-home .county-guided-actions { margin-top: 6px; }
  .county-directory summary { min-height: 64px; gap: 8px 12px; }
  .county-directory summary strong { font-size: 18px; }
  .county-directory summary > span:last-child { font-size: 12px; }
  .county-directory-grid { gap: 8px; padding-bottom: 14px; }
  .county-directory-card { min-height: 70px; padding: 8px 9px; }
  .county-directory-card span { font-size: 12px; }
  .county-directory-card small { font-size: 10px; }
}