@font-face{font-family:'Merriweather';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/merriweather-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Merriweather';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/merriweather-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/merriweather-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/merriweather-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/public-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/public-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/public-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/public-sans-latin-700-normal.woff2) format('woff2')}

/* Layout: a civic notice. A safety strip, a docket-style header, then one column of plain sections ruled in archive gold. */
:root{
  --navy:#1B365D; --paper:#F6F1E7; --seal:#8C1C13; --gold:#B08D57; --slate:#3A4452;
  --bg:var(--paper); --surface:#FFFDF8; --fg:#1E2633; --muted:#4A5363; --head:var(--navy);
  --rule:#D9CDB6; --accent:var(--seal); --band:var(--navy); --band-fg:#F6F1E7; --chip:#EFE6D3;
  --display:'Merriweather', Georgia, 'Times New Roman', serif;
  --body:'Public Sans', 'Segoe UI', Arial, sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0F1D33; --surface:#16273F; --fg:#ECE6D9; --muted:#B9B2A3; --head:#F6F1E7;
  --rule:#2C3F5C; --accent:#D8B877; --band:#0A1527; --band-fg:#F6F1E7; --chip:#20334F; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F1D33; --surface:#16273F; --fg:#ECE6D9; --muted:#B9B2A3; --head:#F6F1E7;
  --rule:#2C3F5C; --accent:#D8B877; --band:#0A1527; --band-fg:#F6F1E7; --chip:#20334F; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg); color:var(--fg); font-family:var(--body); font-size:17px; line-height:1.6}
a{color:var(--head); text-underline-offset:3px}
a:focus-visible, button:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:4px}
.wrap{max-width:1040px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--display); color:var(--head); text-wrap:balance; margin:0}
h2{font-size:clamp(26px,3.2vw,34px); line-height:1.2; font-weight:900}
h3{font-size:19px; font-weight:700; line-height:1.3}
p{margin:0}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* Safety strip */
.safety{background:var(--band); color:var(--band-fg); font-size:15px}
.safety .wrap{padding-block:10px; display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline}
.safety strong{letter-spacing:.06em; text-transform:uppercase; font-size:13px}
.safety a{color:var(--band-fg); font-weight:600}

/* Header */
header{border-bottom:1px solid var(--rule)}
header .wrap{padding-block:18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand svg{width:52px; height:41px; flex:none}
.word{font-family:var(--display); font-weight:900; font-size:24px; color:var(--head); line-height:1}
.word span{font-weight:400; color:var(--muted)}
nav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 22px; font-size:15px; font-weight:600}
nav a{text-decoration:none; color:var(--fg)}
nav a:hover{color:var(--head); text-decoration:underline}

/* Hero */
.hero .wrap{padding-block:56px 48px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:40px; align-items:start}
.hero h1{font-size:clamp(36px,5.4vw,58px); line-height:1.08; font-weight:900; letter-spacing:-.01em}
.hero h1 em{font-style:italic; font-weight:400; color:var(--accent)}
.lede{margin-top:20px; font-size:19px; color:var(--fg); max-width:34em}
.addr{margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.addr code{font-family:var(--body); font-weight:700; font-size:clamp(20px,2.6vw,26px); color:var(--head); background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:10px 16px; user-select:all; word-break:break-all}
.btn{font:600 16px var(--body); min-height:44px; padding:10px 18px; border-radius:6px; border:2px solid var(--head); background:var(--head); color:var(--bg); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center}
.btn.ghost{background:transparent; color:var(--head)}
.small{font-size:15px; color:var(--muted)}
.addr + .small{margin-top:12px}

/* Docket card */
.docket{background:var(--surface); border:1px solid var(--rule); border-radius:8px; overflow:hidden}
.docket .top{display:flex; justify-content:space-between; gap:12px; padding:14px 20px; border-bottom:1px dashed var(--rule); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.docket .stamp{color:var(--accent); border:2px solid currentColor; border-radius:4px; padding:0 8px; transform:rotate(-3deg)}
.docket .bd{padding:18px 20px 20px; display:flex; flex-direction:column; gap:14px}
.docket h3{font-size:18px}
.scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:15px; font-variant-numeric:tabular-nums}
th,td{text-align:left; padding:8px 0; border-bottom:1px solid var(--rule); vertical-align:top}
th{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700}
td.r, th.r{text-align:right; padding-left:12px; white-space:nowrap}
tr.total td{font-weight:700; border-bottom:none}
.asked{color:var(--accent); font-weight:700}

/* Sections */
section.part{border-top:1px solid var(--rule)}
section.part > .wrap{padding-block:56px; display:flex; flex-direction:column; gap:28px}
.intro{max-width:40em; display:flex; flex-direction:column; gap:10px}
.intro p{color:var(--muted)}
ol.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; counter-reset:s}
ol.steps li{counter-increment:s; display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:3px solid var(--gold); min-width:0}
ol.steps li::before{content:counter(s); font-family:var(--display); font-weight:900; font-size:28px; color:var(--head); line-height:1}
ol.steps p{font-size:15px; color:var(--muted)}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.choice{display:flex; flex-direction:column; gap:8px; min-width:0}
.choice .tag{align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--chip); color:var(--head); border-radius:999px; padding:3px 10px}
.choice p{font-size:15px; color:var(--muted)}
.keep{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 32px; margin:0; padding:0; list-style:none}
.keep li{padding-left:22px; position:relative; font-size:16px; min-width:0}
.keep li::before{content:""; position:absolute; left:0; top:.55em; width:10px; height:10px; border:2px solid var(--gold); border-radius:50%}
.case{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:28px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:28px; align-items:center}
.case .ways{display:flex; flex-direction:column; gap:10px; font-size:16px}
.case .ways b{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.row{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}

footer{border-top:1px solid var(--rule); font-size:14px; color:var(--muted)}
footer .wrap{padding-block:32px 40px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 32px}
footer .tag{font-family:var(--display); font-style:italic; color:var(--accent); font-size:18px}
.toast{min-height:1.4em}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:minmax(0,1fr); padding-block:40px}
  ol.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3,.keep,.case{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){ ol.steps{grid-template-columns:minmax(0,1fr)} body{font-size:16px} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Chain mark: the gap strokes take the background they sit on */
.mk{fill:none; stroke:var(--head)}
.gap{fill:none; stroke:var(--bg)}

html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.soon{background:var(--chip);border-bottom:1px solid var(--rule);font-size:15px}
.soon .wrap{padding-block:10px}
.soon strong{color:var(--head)}