@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --brand-blue: #0084f6;
  --paper: #f7f7f7;
  --ink: #363836;
  --action: #0063b9;
  --muted: #565b60;
  --line: #cdd3d8;
  --accent-ink: #0066be;
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 90px }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased }
button, input, summary { font: inherit }
button, summary { cursor: pointer }
button { color: inherit; background: transparent; border: 0 }
a { color: inherit; text-underline-offset: 4px }
a, button, summary { touch-action: manipulation }
:focus-visible { outline: 3px solid #0065b9; outline-offset: 4px }
::selection { background: #c4e5ff }
[hidden] { display: none !important }
h1,h2,h3,h4,h5,p,figure { margin: 0 }
h1,h2 { font-weight: 650 }
h3,h4,h5 { line-height: 1.32 }
p { color: var(--muted) }
.wrap { width: min(1392px, 91.5%); margin-inline: auto }
.icon { width: 20px; height: 20px; flex: none }
.skip { position: fixed; top: -90px; left: 12px; padding: 12px; background: white; z-index: 40 }
.skip:focus { top: 6px }
#reading-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--brand-blue); z-index: 30; width: 0 }
.masthead { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line) }
.mast-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 77px }
.brand { display: inline-flex; flex-shrink: 0; align-items: center }
.brand img { display: block; width: clamp(158px, 17vw, 208px); height: auto }
.main-nav, .nav-tools { display: flex; align-items: center }
.main-nav { gap: clamp(22px,3vw,52px); margin-left: auto; margin-right: clamp(0px,4vw,80px) }
.main-nav a, .nav-check, footer a { font-size: 13px; font-weight: 550; text-decoration: none }
.main-nav a:hover, .text-link:hover, footer a:hover { color: var(--accent-ink) }
.nav-tools { gap: 19px }
.nav-check { white-space: nowrap; display: inline-flex; align-items: center; gap: 9px; border: 1px solid #a7b5c0; padding: 8px 12px; border-radius: 4px; color: var(--action) }
.nav-check:hover { background: #e3f0fc }
.nav-check .icon { width: 15px; height: 15px }
#nav-checklist-counter { font: 11px var(--font); border-left: 1px solid var(--line); padding-left: 9px }
summary { list-style: none }
summary::-webkit-details-marker { display: none }
.toc { position: relative }
.toc summary { width: 32px; height: 40px; display: grid; place-items: center }
.toc nav { position: absolute; right: 0; top: 48px; min-width: 290px; padding: 20px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 10px 24px #252c361a }
.toc strong { font: 600 23px var(--font); display: block; margin-bottom: 10px }
.toc nav a { display: flex; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none; font-size: 14px }
.toc nav a:hover { color: var(--accent-ink) }
small,.eyebrow,.step-id { font: 11px/1.5 var(--font); letter-spacing: .055em }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .13em; display: flex; align-items: center; gap: 11px; color: var(--accent-ink) }
.eyebrow i { width: 24px; height: 1px; background: currentColor }
.cover { display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: clamp(26px,4vw,76px); padding-block: clamp(40px,4.4vw,68px) }
.cover-tag { margin-bottom: 23px }
.cover-tag i { background: var(--brand-blue); width: 27px; height: 2px }
h1 { font-size: clamp(62px,6.45vw,103px); letter-spacing: -.052em; line-height: 1.06 }
h1 em { display: block; font-size: .79em; line-height: 1.14; font-weight: 600; font-style: normal; color: #006bc7 }
.intro { font-size: clamp(15px,1.21vw,19px); max-width: 485px; line-height: 1.55; margin: 24px 0 26px }
.cover-actions { display: flex; gap: 26px; align-items: center; flex-wrap: wrap }
.button,.text-link { display: inline-flex; gap: 15px; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; text-decoration: none }
.button { border: 1px solid var(--action); padding: 13px 21px; border-radius: 4px }
.primary { background: var(--action); color: white }
.primary:hover { background: #004c91 }
.button .icon { width: 17px; height: 17px; transition: transform .2s }
.primary:hover .icon { transform: translateX(3px) }
.text-link { gap: 8px }
.text-link .icon { width: 14px; height: 14px }
.attribution { display: flex; align-items: center; gap: 8px; margin-top: 30px; color: var(--muted); font: 11px/1.5 var(--font) }
.attribution .icon { width: 14px; height: 14px; color: var(--accent-ink) }
.plate { border: 1px solid #b8c4ce; border-radius: 3px; overflow: hidden; background: #f0f4f8 }
.plate-field { position: relative; aspect-ratio: 1.62; overflow: hidden; isolation: isolate; background-color: #e7eef4; background-image: linear-gradient(#53799b1a 1px,transparent 1px),linear-gradient(90deg,#53799b1a 1px,transparent 1px),radial-gradient(ellipse at 40% 10%,#f7f9fb 5%,transparent 77%); background-size: 29px 29px,29px 29px,100% 100% }
.plate-heading,.scale,.north,.plate-zoom { position: absolute; z-index: 2 }
.plate-heading { top: 16px; left: 17px; display: flex; align-items: center; gap: 7px; color: #465565; font: 9px/1.3 var(--font); letter-spacing: .075em }
.plate-heading .icon { width: 13px; height: 13px }
.plate-heading b { font-weight: 400; color: #617386; padding: 0 4px }
.north { top: 15px; right: 18px; display: grid; justify-items: center; font: 10px var(--font) }
.north svg { width: 15px; height: 28px; margin-top: 3px }
.terrain-position { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none }
.terrain-model { width: 91%; margin-top: 2%; position: relative; transform: translate(var(--pan-x,0px),var(--pan-y,0px)) scale(var(--zoom,1)); transition: transform .35s ease-out }
.terrain-model img { width: 100%; height: auto; display: block }
.terrain-model img:first-child { filter: drop-shadow(3px 9px 5px #29384b36) }
.terrain-model img.parcel-layer { position: absolute; inset: 0 }
.parcel-layer { transition: opacity .24s }
.plate.boundaries-off .parcel-layer { opacity: 0 }
.map-pin { position: absolute; left: 24.95%; bottom: 48.62%; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%) }
.map-pin span { display: block; background: #f7fbff; border: 1px solid #83acd4; color: #004c92; padding: 3px 6px; font: 8px/1.2 var(--font); letter-spacing: .065em }
.map-pin i { height: clamp(13px,1.8vw,25px); border-left: 1px solid #0063b9; position: relative }
.map-pin i:after { content:""; position: absolute; bottom: -3px; left: -3px; width: 5px; height: 5px; background: var(--brand-blue); border: 1px solid #ffffff; border-radius: 50% }
.scale { bottom: 13px; left: 17px; font: 7px var(--font); letter-spacing: .07em; color: #405163 }
.scale i { display: block; width: 46px; height: 5px; border: 1px solid #4a5b6b; background: repeating-linear-gradient(90deg,#4a5b6b 0 11px,transparent 11px 22px); margin-bottom: 4px }
.plate-zoom { right: 12px; bottom: 12px; display: flex; gap: 1px; border: 1px solid #b6c4cf; background: #c5cfd7; border-radius: 3px; overflow: hidden }
.plate-zoom button { background: #f8fbfff0; width: 32px; height: 30px; font: 20px var(--font) }
.plate-zoom button:disabled { color: #687785; cursor: default }
.plate figcaption { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: #f3f7fa; border-top: 1px solid #c3cdd6; font-size: 11px }
.layer-name,.plate figcaption button { display: inline-flex; gap: 7px; align-items: center }
.layer-name .icon { width: 15px; height: 15px }
.plate figcaption button { border: 1px solid #b4c2cf; background: #ffffff; border-radius: 3px; padding: 4px 8px; font-size: 11px }
.plate figcaption button i { width: 10px; height: 10px; border: 1px solid var(--accent-ink); background: var(--brand-blue) }
.plate figcaption button[aria-pressed="false"] i { background: transparent }
.metrics { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid #aab4bc; border-bottom: 1px solid #aab4bc; padding: 22px 0 }
.metrics a { display: flex; align-items: center; gap: 15px; padding: 0 9%; text-decoration: none; border-left: 1px solid var(--line) }
.metrics a:first-child { border: 0; padding-left: 0 }
.metrics a:last-child { padding-right: 0 }
.metrics strong { font: 38px/1 var(--font); letter-spacing: -.06em; color: var(--action) }
.metrics span { font-size: 12px; line-height: 1.4; max-width: 105px }
.metrics .icon { margin-left: auto; width: 12px; height: 12px; color: #60707e }
.metrics a:hover :is(strong,.icon) { color: var(--accent-ink) }
.chapter { padding: clamp(54px,6vw,94px) 0; border-bottom: 1px solid var(--line) }
.section-head { margin-bottom: 32px }
.section-head h2,.thanks h2 { font-size: clamp(38px,4.15vw,68px); line-height: 1.07; letter-spacing: -.055em; margin: 12px 0 }
.section-head p { max-width: 740px; font-size: 15px }
#guide { padding-top: clamp(42px,4vw,66px) }
.route { display: grid; grid-template-columns: repeat(4,1fr); align-items: start; border-block: 1px solid var(--line) }
.route-stop { min-width: 0; padding: 20px 20px 20px 0 }
.route-stop:not(:first-child) { padding-left: 20px; border-left: 1px solid var(--line) }
.route-stop summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 13px }
.route-line { grid-column: 1/-1; display: flex; align-items: center; gap: 10px }
.route-line b { font: 11px var(--font); color: var(--accent-ink) }
.route-line i { flex: 1; border-top: 1px dashed #b8c4cf }
.route-stop .icon { width: 29px; height: 29px; grid-column: 1/-1; color: var(--action) }
.stop-name { font: 600 23px/1.1 var(--font); letter-spacing: -.045em }
.route-body { margin-top: 17px; font-size: 14px; hyphens: auto; overflow-wrap: anywhere }
.route-body > a { display: inline-block; color: var(--action); font-weight: 600; margin-top: 10px }
.expand-mark { width: 15px; height: 15px; display: inline-grid; place-items: center; color: var(--action) }
.expand-mark:before { content: '+'; font: 20px/1 var(--font) }
details[open] > summary .expand-mark:before { content: '−' }
.route-stop summary:hover,.fold summary:hover { color: var(--accent-ink) }
#laws, #authorities, #checklist { background: #eff2f5 }
.filters { display: flex; gap: 7px; flex-wrap: wrap; margin: 17px 0 26px }
.filters button,.check-actions button { font-size: 13px; border: 1px solid #a6b5c2; padding: 7px 12px; border-radius: 3px }
.filters button[aria-pressed="true"] { color: white; background: var(--action); border-color: var(--action) }
.filters button:hover,.check-actions button:hover { border-color: var(--ink) }
.law-card { display: grid; grid-template-columns: minmax(120px, .4fr) 1.6fr; gap: 25px; border-top: 1px solid var(--line); padding: 23px 0 }
.law-card:last-child { border-bottom: 1px solid var(--line) }
.law-num { font: 36px/1.1 var(--font); color: var(--action); letter-spacing: -.04em }
.law-card small,.org-tree small,.event-columns small,.fold small,.systems-list small { color: var(--accent-ink) }
.law-card h3,.org-tree h3,.systems-list h3,.steps h3 { font: 600 20px/1.3 var(--font); letter-spacing: -.028em; margin: 4px 0 7px }
.law-card p { max-width: 880px }
.chapter p,.fold li,.note { line-height: 1.6 }
.spread,.task-spread,.check-spread { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(30px,6vw,100px); align-items: start }
.spread .section-head,.task-figure,.progress-box { position: sticky; top: 105px }
.spread > div:first-child { align-self: stretch }
.fold { border-top: 1px solid var(--line); padding: 17px 0 }
.fold:last-child { border-bottom: 1px solid var(--line) }
.fold summary { font: 600 23px/1.2 var(--font); position: relative; padding-right: 25px }
.fold small { display: block; margin-bottom: 5px }
.fold .expand-mark { position: absolute; right: 0; top: 50% }
.fold ul { padding-left: 20px; margin-bottom: 0; color: var(--muted) }
.fold li+li,.fold p { margin-top: 9px }
#events { background: #e6eef5 }
.event-kicker { display: block; margin-top: 30px; color: var(--accent-ink) }
.subhead { margin: 5px 0 20px; font: 600 29px/1.2 var(--font) }
.event-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 35px }
.event-columns article { padding-top: 12px; border-top: 2px solid #809bb0 }
.event-columns h4 { font-size: 20px; max-width: 500px; margin: 5px 0 12px }
.event-columns ol,.measures { list-style: none; counter-reset: item; padding: 0; margin: 0 }
.event-columns li,.measures li { position: relative; padding: 11px 0 11px 35px; counter-increment: item; border-top: 1px solid #bdccd8 }
.event-columns li:before,.measures li:before { content: counter(item,decimal-leading-zero); position: absolute; left: 0; top: 13px; font: 11px var(--font); color: var(--action) }
.event-columns h5 { font-size: 16px }
.event-columns p,.measures p { font-size: 15px; margin-top: 3px }
.measures li { display: grid; grid-template-columns: .8fr 1.8fr; gap: 15px }
.note { margin-top: 28px; padding: 16px 22px; border-left: 3px solid var(--accent-ink); background: #f7fbff; font-size: 15px }
.note strong,.note h4 { display: block; margin-bottom: 4px }
.org-tree { margin-left: 8px; padding-left: 35px; border-left: 1px solid #a1b3c1 }
.org-tree article { border-top: 1px solid var(--line); position: relative; padding: 18px 0; display: grid; grid-template-columns: 1fr 1.15fr; gap: 0 40px }
.org-tree article:before { content: ''; position: absolute; top: 30px; left: -36px; width: 25px; height: 1px; background: #98acbd }
.org-tree article:after { content:''; position: absolute; top: 27px; left: -39px; width: 6px; height: 6px; background: var(--action) }
.org-tree small { grid-column: 1 }
.org-tree p { grid-column: 2; grid-row: 1/3 }
.systems-list article { display: flex; align-items: baseline; gap: 24px; border-top: 1px solid var(--line); padding: 15px 0 }
.systems-list p+p { margin-top: 6px }
#systems { background: #34383c; color: #f7f7f7 }
#systems .eyebrow, #systems .systems-list small { color: #a6d8ff }
#systems p { color: #d4dee5 }
#systems .section-head::after { content: ''; display: block; margin-top: 40px; height: clamp(110px,15vw,230px); background: url("assets/isolines.webp") center / cover; border-block: 1px solid #626d77 }
#systems .systems-list article { border-color: #58646e }
#task { background: #f0f4f8 }
.task-figure { border: 1px solid #c7cfd7; overflow: hidden; background: #ffffff; text-align: left }
.task-figure img { display: block; width: 100%; height: auto }
.task-figure figcaption { border-top: 1px solid var(--line); padding: 18px 20px }
.task-figure p { font-size: 14px }
#task-audit-status { display: block; font-size: 13px; color: var(--action); margin-top: 16px }
.steps article { display: flex; gap: 18px; padding-block: 18px; border-top: 1px solid var(--line) }
.step-id { color: var(--accent-ink); padding-top: 10px }
.steps label,.checklist-item { display: flex; gap: 12px; align-items: baseline; cursor: pointer; padding: 12px 0; border-top: 1px solid var(--line) }
.steps label:first-of-type { margin-top: 13px }
input[type="checkbox"] { flex: none; align-self: start; width: 18px; height: 18px; margin: .22em 0 0; accent-color: var(--action) }
.progress-box { background: var(--action); color: #ffffff; padding: clamp(20px,3vw,42px) }
.progress-box > strong { display: block; font: 76px/1.2 var(--font); letter-spacing: -.06em }
.track { height: 4px; background: #5d9bd0; margin: 12px 0 }
.track i { width: 0; height: 100%; display: block; background: #ffffff; transition: width .25s }
.progress-label,.check-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px }
.check-actions { justify-content: flex-start; margin-bottom: 16px }
.checklist-item.completed { color: #005698 }
#thanks { background: #373a3c; color: white }
.thanks { display: flex; gap: 42px; align-items: center; padding-block: 50px }
.thanks img { display: block; flex: none; width: clamp(189px, 18vw, 254px); max-width: 100%; height: auto }
.thanks h2 { font-size: clamp(30px,3vw,48px) }
.thanks p { color: #d7e1e9; margin: 8px 0; font-size: 14px }
.footer-links,footer nav { display: flex; gap: 18px; flex-wrap: wrap }
.footer-links { font-size: 14px; margin-top: 16px }
footer.wrap,.foot-credit { display: flex; gap: 16px; align-items: center; justify-content: space-between }
.foot-credit img { display: block; width: 42px; height: auto; flex: none }
footer.wrap { padding-block: 22px; font-size: 12px }
#checklist-complete { width: min(400px, 90vw); max-height: 90dvh; padding: clamp(22px, 4vw, 32px); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--paper) }
#checklist-complete::backdrop { background: #262d3480 }
#completion-title { margin-bottom: 20px; font-size: clamp(28px, 4vw, 34px); line-height: 1.12 }
#back-to-top { position: fixed; bottom: 18px; right: 14px; z-index: 5; width: 38px; height: 38px; background: var(--action); color: white; border: 1px solid #cddbe5; border-radius: 50%; font-size: 18px }
@media (prefers-reduced-motion:no-preference) {
  .cover-copy { animation: enter .65s ease-out backwards }
  .terrain-position { animation: survey .95s cubic-bezier(.17,.71,.23,1) backwards }
  @keyframes enter { from { transform: translateY(9px); opacity: .4 } }
  @keyframes survey { from { transform: translateY(14px) scale(.96); opacity: .45 } }
}
@media (max-width: 1050px) {
  .cover { gap: 20px; grid-template-columns: 1fr 1.07fr }
  h1 { font-size: clamp(56px,7.1vw,76px) }
  .main-nav { gap: 18px; margin-right: 4px }
  .metrics a { gap: 9px; padding-inline: 6% }
  .plate-field { aspect-ratio: 1.35 }
  .stop-name { font-size: 21px }
}
@media (max-width: 1080px) {
  .main-nav { display: none }
}
@media (max-width: 760px) {
  .brand { min-width: 48px; min-height: 48px }
  .brand img { width: 48px }
  html { scroll-padding-top: 76px }
  .wrap { width: calc(100% - 40px) }
  .mast-inner { min-height: 64px; gap: 12px; padding-block: 6px }
  .main-nav { display: none }
  .nav-tools { gap: 8px }
  .nav-check { font-size: 12px; padding: 6px 8px; gap: 6px }
  .cover { grid-template-columns: 1fr; gap: 26px; padding-block: 35px 25px }
  .cover-tag { margin-bottom: 16px }
  h1 { font-size: clamp(60px,11.4vw,88px) }
  .intro { font-size: 16px; margin: 17px 0 20px }
  .attribution { margin-top: 18px; font-size: 10px }
  .plate-field { aspect-ratio: 1.66 }
  .metrics { grid-template-columns: repeat(2,1fr); padding: 0 }
  .metrics a { padding: 14px 12px }
  .metrics a:nth-child(odd) { border-left: 0; padding-left: 0 }
  .metrics a:nth-child(even) { padding-right: 0 }
  .metrics a:nth-child(n+3) { border-top: 1px solid var(--line) }
  .metrics strong { font-size: 31px }
  .metrics span { font-size: 11px }
  .route { grid-template-columns: 1fr 1fr }
  .route-stop:nth-child(odd) { border-left: 0; padding-left: 0 }
  .route-stop:nth-child(n+3) { border-top: 1px solid var(--line) }
  .section-head { margin-bottom: 23px }
  .spread,.task-spread,.check-spread,.event-columns { grid-template-columns: 1fr; gap: 22px }
  .spread .section-head,.task-figure,.progress-box { position: static }
  .spread .section-head { margin-bottom: 0 }
  #systems .section-head::after { display: none }
  .org-tree article,.measures li { display: block }
  .law-card { grid-template-columns: 95px 1fr; gap: 15px }
  .law-num { font-size: 27px }
  .thanks { flex-direction: column; gap: 20px; align-items: flex-start }
  .foot-credit { justify-content: flex-start; gap: 12px }
  footer.wrap { align-items: flex-start; flex-direction: column }
}
@media (max-width: 450px) {
  .wrap { width: calc(100% - 32px) }
  .nav-check .check-name { display: none }
  .nav-check .icon { display: block }
  #nav-checklist-counter { border: 0; padding-left: 0 }
  .nav-tools { gap: 4px }
  .map-pin span,.plate-heading { font-size: 7px }
  .plate-heading,.north { top: 9px }
  .north { right: 10px }
  .scale { left: 10px; bottom: 9px; font-size: 6px }
  .plate-zoom { right: 8px; bottom: 8px }
  .plate-zoom button { width: 27px; height: 26px }
  .plate figcaption { padding: 6px 8px }
  .law-card { display: block }
  .law-num { display: block; margin-bottom: 7px }
  .org-tree { padding-left: 24px }
  .org-tree article:before { left: -25px; width: 16px }
  .org-tree article:after { left: -28px }
  .route-stop { padding-right: 10px }
  .route-stop:not(:first-child):nth-child(even) { padding-left: 12px }
}
@media (max-width: 360px) {
  .section-head h2 { font-size: 34px }
  .route { grid-template-columns: 1fr }
  .route .route-stop:nth-child(n) { padding-inline: 0; border-left: 0 }
  .route-stop + .route-stop { border-top: 1px solid var(--line) }
  .mast-inner { gap: 3px }
  .nav-check { gap: 4px }
  h1 { font-size: 53px }
  .cover-actions { gap: 16px }
  .metrics .icon { display: none }
}
@media (prefers-reduced-motion:reduce), (update:slow) {
  html { scroll-behavior: auto }
  *,*:before,*:after { animation: none !important; transition: none !important }
}
@media print {
  .masthead,.skip,#reading-progress,.plate-zoom,#back-to-top,.filters,.check-actions { display: none !important }
  .chapter { padding: 20px 0 }
}
.light-mode { scroll-behavior: auto }
.light-mode *, .light-mode *::before, .light-mode *::after { animation: none !important; transition: none !important }