:root {
  --bg: #e8ece7;
  --panel: #fbfcfa;
  --ink: #1e2a2d;
  --muted: #56625f;
  --line: #d3dad4;
  --accent: #2f5d50;
  --accent-ink: #ffffff;
  --standing: #2f7d3b;
  --gone: #8a8f8c;
  --ruin: #9a7b55;
  --destroyed: #b8382b;
  --unconfirmed: #7d4a9e;
  --private: #1e2a2d;
  --paid: #8f5300;
  --water: #2e6e9e;
  --toilet: #0b6b57;
  --focus: #2e6e9e;
  --notice: #a86a00;
  --field-line: #7f8b86;
  --route-walk: #d9480f;
  --route-bikepacking: #c2255c;
  --route-mtb: #e0a100;
  --route-4wd: #6741d9;
  --route-multi: #1971c2;
  --route-halo: #ffffff;
  --route-edge: #1e2a2d;
  --planned: #8f5300;
  --planned-ink: #ffffff;
  --visited-ink: #ffffff;
  /* text on dark fills that stay dark in both schemes: clusters, photo captions, pin badges */
  --on-dark: #ffffff;
  /* map marks sit on imagery, so they don't change with the colour scheme */
  --pin-halo: #ffffff;
  --pin-private: #1e2a2d;
  --pin-planned: #8f5300;
  --pin-paid: #8f5300;
  --pin-sel: #1e2a2d;
  --cluster: #24483e;
  --cluster-ring: rgba(255, 255, 255, .9);
  --cluster-ring-edge: rgba(20, 40, 34, .55);
  --photo-scrim: rgba(10, 16, 17, .82);
  --contour-ink: #8c6239;
  --contour-alpha: .13;
  --contour-tile: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27480%27 height=%27480%27%3E%3Cpath d=%27M355 9 345 16 336 25 329 35 325 45 323 55 324 65 326 70 330 75 335 77 340 77 348 75 360 67 370 55 376 40 378 20 375 9 370 6 365 5 355 9M346 0 335 10 323 25 315 40 312 50 311 65 314 80 320 87 330 91 340 90 355 84 365 76 375 65 383 50 388 35 391 15 392 0M75 180 69 185 67 195 70 203 75 206 80 205 85 203 90 197 92 190 91 185 85 179 80 179 75 180M392 480 390 470 387 465 380 462 365 467 346 480M331 0 318 15 309 30 304 45 301 60 302 75 306 90 310 97 314 100 325 103 340 101 355 94 368 85 380 72 388 60 394 45 399 25 404 0M65 158 55 164 50 170 46 180 45 195 47 210 51 220 55 225 60 229 70 230 85 226 102 215 106 210 111 200 113 185 108 170 104 165 98 160 90 157 80 155 65 158M215 230 205 235 199 240 191 250 188 260 187 270 189 280 195 289 200 291 210 290 224 280 231 270 237 255 238 245 235 234 230 230 225 228 215 230M404 480 412 430 419 415 436 390 439 380 435 378 425 387 408 415 398 425 331 480M318 0 306 15 299 30 294 50 293 70 295 90 300 104 305 110 310 113 320 114 335 111 355 103 374 90 385 79 394 65 401 50 413 0M50 144 38 150 32 160 30 170 29 180 32 205 36 225 42 240 50 246 55 248 65 247 80 243 95 236 105 230 116 220 125 205 127 195 127 185 125 175 120 162 114 155 105 148 95 143 80 141 65 141 50 144M215 214 200 221 188 230 179 240 174 255 172 275 175 293 181 305 185 309 190 311 195 312 205 309 215 304 227 295 240 279 245 270 250 255 251 240 251 230 245 217 240 213 235 212 225 212 215 214M413 480 418 460 426 440 460 387 470 365 472 355 471 345 468 340 460 338 450 340 440 345 422 360 409 375 387 410 376 425 361 440 318 480M305 0 294 15 288 30 285 50 284 75 287 100 292 115 300 123 310 126 330 122 355 111 375 99 390 85 401 70 407 55 421 0M20 130 14 135 11 140 10 155 27 250 30 260 35 266 40 268 50 267 80 256 121 235 130 229 139 220 141 215 142 205 141 190 138 175 129 155 121 145 116 140 100 132 75 128 40 125 30 126 20 130M225 199 205 206 180 218 169 225 161 235 159 245 159 260 164 305 170 324 175 329 180 331 190 331 200 327 215 319 225 311 235 302 245 290 255 270 260 255 262 240 262 225 259 210 255 203 250 199 245 197 235 197 225 199M0 372 8 350 11 330 10 320 8 315 5 312 0 311M480 311 465 316 450 323 430 336 415 349 397 370 376 405 361 425 305 480M480 372 470 390 437 440 427 460 421 480M288 0 282 10 277 25 275 45 276 70 279 105 282 125 286 135 290 139 295 140 305 139 315 136 350 121 379 105 398 90 406 80 413 65 428 0M0 391 14 365 32 310 41 295 52 285 70 273 95 261 115 254 125 252 135 254 140 259 143 265 149 290 155 346 160 359 165 361 170 360 190 350 230 321 245 306 254 295 261 280 266 265 270 245 271 220 269 195 265 185 260 181 255 180 245 182 190 199 180 201 170 201 165 199 157 190 141 155 135 144 125 133 115 126 95 119 35 107 15 107 0 113M480 113 475 117 470 125 468 135 469 150 480 179M0 285 9 270 11 260 12 245 12 230 9 210 0 179M480 285 465 298 420 330 403 345 386 365 362 405 350 421 335 437 302 465 288 480M480 391 443 445 436 460 428 480M256 0 256 10 264 50 268 85 269 120 267 140 264 150 255 160 239 170 215 180 190 186 180 186 170 181 161 170 145 140 138 130 127 120 115 114 35 90 20 89 0 92M436 0 430 25 423 70 417 85 409 95 396 105 315 147 302 155 291 165 286 175 283 185 276 260 272 280 266 295 256 310 247 320 208 355 193 370 182 385 165 413 155 425 145 431 130 434 120 430 115 420 115 410 117 400 131 365 136 350 140 320 138 295 133 280 125 272 115 269 100 271 85 277 70 286 55 300 42 320 19 375 0 405M480 92 465 99 457 105 451 115 449 125 450 135 453 150 473 195 480 221M0 249 1 235 0 221M480 249 477 260 473 270 462 285 444 300 400 332 381 350 370 365 350 400 335 420 310 441 263 470 258 475 256 480M480 405 450 448 442 465 436 480M193 0 205 15 235 32 245 42 254 60 259 80 260 100 260 115 257 130 253 140 246 150 240 156 230 162 215 170 200 173 190 174 180 170 175 167 165 155 145 120 135 110 125 104 81 90 55 79 40 75 25 74 0 76M444 0 439 20 437 40 437 60 440 71 445 77 450 79 460 79 480 76M405 115 375 125 334 145 313 160 300 175 295 185 291 200 283 275 278 300 273 310 265 321 225 360 209 380 202 395 199 410 200 421 205 428 210 430 220 431 275 429 290 427 306 420 319 410 328 400 335 390 350 360 360 345 379 330 435 294 450 281 459 270 467 255 470 240 469 225 465 205 443 160 430 127 426 120 419 115 415 114 405 115M193 480 183 465 175 460 165 458 130 461 117 460 105 455 97 445 93 430 95 410 101 395 121 350 127 325 127 310 124 300 118 290 110 285 100 285 85 291 72 300 62 310 50 330 27 380 18 395 0 419M480 419 458 450 450 465 444 480M99 0 110 2 140 5 150 7 160 13 185 35 195 40 225 50 238 60 245 72 249 85 250 100 249 115 247 125 242 135 235 145 225 153 215 158 205 160 195 161 185 157 180 153 173 145 158 115 150 103 140 94 130 89 95 79 65 64 50 59 35 58 0 61M452 0 447 25 448 40 450 48 454 55 460 59 470 62 480 61M395 130 380 132 365 138 335 153 315 170 308 180 303 190 298 205 296 225 295 275 300 311 305 319 310 322 325 322 355 317 380 310 400 302 420 291 435 280 445 270 454 255 458 240 458 225 454 210 448 195 428 155 418 140 410 133 405 131 395 130M99 480 90 475 83 465 78 450 76 430 78 415 82 400 105 352 110 337 111 320 110 315 105 307 100 305 90 306 80 312 72 320 60 338 38 385 27 400 0 432M265 360 255 368 250 375 249 380 254 385 260 386 270 384 277 380 282 375 285 370 285 360 280 356 275 356 265 360M480 432 464 455 452 480M63 0 62 20 60 25 54 30 45 35 30 40 15 44 0 45M462 0 459 15 460 30 466 40 470 43 480 45M110 34 100 40 99 45 102 50 107 55 120 60 130 61 136 60 143 55 143 50 141 45 135 39 125 34 110 34M175 70 169 75 168 85 173 110 181 130 188 140 197 145 210 145 220 141 231 130 237 115 238 105 238 95 232 80 225 72 220 69 210 66 190 66 175 70M370 145 345 156 326 170 315 185 307 205 304 220 303 240 305 257 308 270 313 280 320 287 335 294 350 295 370 294 390 290 405 285 420 276 430 268 439 255 443 245 445 230 441 210 428 180 415 157 405 147 395 142 385 142 370 145M63 480 57 420 55 412 50 407 40 410 30 417 15 431 0 448M480 448 470 463 462 480M39 0 35 10 24 20 10 24 5 23 0 21M477 0 475 10 476 15 480 21M200 99 197 105 199 115 205 121 210 121 215 117 218 110 218 105 216 100 210 96 205 96 200 99M370 154 350 162 333 175 322 190 314 210 313 235 317 255 323 265 329 270 335 274 345 277 360 278 375 277 390 274 400 271 410 265 420 256 425 249 429 240 430 225 427 210 420 190 409 170 400 160 392 155 380 153 370 154M39 480 41 465 39 455 35 448 30 445 25 446 15 452 5 463 0 471M480 471 477 480M375 165 360 168 345 177 333 190 326 205 323 225 326 240 330 248 335 253 345 259 355 261 365 261 385 258 400 250 405 245 411 235 413 225 413 215 409 200 403 185 396 175 390 169 385 167 375 165M370 180 360 182 350 188 341 200 337 210 336 220 340 232 345 238 355 242 370 242 380 238 389 230 394 220 394 205 390 194 385 187 380 183 370 180%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271%27/%3E%3C/svg%3E");
  --shadow: 0 6px 24px rgba(30, 42, 45, .28);
  /* type scale, roughly a major third from a 15px interface size */
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-ui: 15px;
  --fs-body: 17px;
  --fs-lead: 20px;
  --fs-h3: 20px;
  --fs-h2: 27px;
  --fs-h1: clamp(38px, 4.6vw, 60px);
  --measure: 66ch;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --sidebar-w: 340px;
  --page-max: 1180px;
  --page-gutter: clamp(16px, 4vw, 48px);
  --cluster-hover: #2f5d50;
  --serif: "Zilla Slab", Rockwell, "Roboto Slab", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161d1e; --panel: #1f2829; --ink: #e6ece8; --muted: #a7b3ae;
    --line: #34403f; --accent: #7fb8a4; --accent-ink: #10201b;
    --private: #e6ece8; --paid: #f0b45c; --planned: #f0b45c; --planned-ink: #10201b;
    --standing: #5cb36a; --ruin: #c49a6c; --destroyed: #f07264; --unconfirmed: #c9a0e6; --visited-ink: #10201b;
    --contour-ink: #d2a679; --contour-alpha: .07; --shadow: 0 6px 24px rgba(0, 0, 0, .5); --water: #7fb4e0; --toilet: #4fd1ad;
    --focus: #7fb4e0; --notice: #e8b04f; --field-line: #75837e;
    --route-walk: #ff8a4c; --route-bikepacking: #f06595; --route-mtb: #ffd43b;
    --route-4wd: #9775fa; --route-multi: #4dabf7; --route-halo: #f4f7f5;
  }
  /* pins sit on the same light tiles in both schemes, so they keep the light colours */
  .leaflet-marker-pane { --standing: #2f7d3b; --ruin: #9a7b55; --destroyed: #b8382b; --unconfirmed: #7d4a9e; }
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Zilla Slab"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/zilla-slab-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Zilla Slab"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/zilla-slab-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: var(--fs-ui)/1.5 var(--sans);
  display: flex; flex-direction: column;
}
a { color: var(--accent); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.note { color: var(--muted); font-size: var(--fs-xs); }
.skip { position: absolute; left: var(--s-2); top: -60px; z-index: 3000; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 4px; font-weight: 700; }
.skip:focus { top: var(--s-2); }
main:focus { outline: none; }
/* quiet contour texture, painted in a token colour through the tile as a mask */
body > header, .intro, .hut-card-blank { position: relative; isolation: isolate; }
:is(body > header, .intro, .hut-card-blank)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--contour-ink); opacity: var(--contour-alpha);
  -webkit-mask: var(--contour-tile) 0 0 / 480px 480px repeat; mask: var(--contour-tile) 0 0 / 480px 480px repeat;
}

/* shared controls */
.field, .btn {
  font: inherit; font-size: 14px; padding: 5px 9px; border: 1px solid var(--field-line); border-radius: 4px;
  background: var(--bg); color: var(--ink);
}
.btn { cursor: pointer; background: var(--panel); }
.btn:hover { border-color: var(--muted); }
a.btn { display: inline-block; text-decoration: none; }
.linkish { font: inherit; font-size: 12px; background: none; border: 0; padding: 0; min-height: 24px; color: var(--accent); text-decoration: underline; cursor: pointer; }
/* close buttons on the map panel and the intro */
.panel-close {
  position: absolute; top: 8px; right: 10px; z-index: 2; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer;
}
.panel-close:hover { color: var(--ink); background: var(--bg); }
/* segmented toggles: list mode, people view, network scope */
.seg { display: flex; }
.seg .btn { border-radius: 0; }
.seg .btn:first-child { border-radius: 4px 0 0 4px; }
.seg .btn:last-child { border-radius: 0 4px 4px 0; border-left: 0; }
.seg .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 12px; }

body > header {
  display: flex; align-items: center; gap: var(--s-4); padding: 10px var(--s-4);
  border-bottom: 1px solid var(--line); background: var(--panel);
}
body > header .brand { font: 700 21px/1 var(--serif); margin: 0; color: var(--ink); letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
body > header .brand:hover { color: var(--accent); }
/* the site mark is the same gable as the map pins */
body > header .brand::before {
  /* slab hut: stone chimney on the gable end, roof running on over a verandah */
  content: ""; width: 34px; height: 20px; flex-shrink: 0; background: var(--accent);
  --hut-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 3.5 28 16'%3E%3Cpath d='M1%2019V5.6L1.6%204.4H5.2L5.6%205.6V19Z%20M5.6%2019V9.6L11%204L18.4%2010.4L28%2013.8V15.2L18.4%2012V19Z%20M22%2013.4h1.1V19H22Z%20M26.6%2015h1.1v4h-1.1Z%20M18.4%2018H28V19H18.4Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--hut-mark) center / contain no-repeat; mask: var(--hut-mark) center / contain no-repeat;
}
.profile-bar { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.profile-bar .btn { white-space: nowrap; }
#export-form { display: flex; gap: 4px; align-items: center; }
#export { max-width: 9.5rem; }
#new-profile { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.account, .account-out, .account-in, .account-confirm { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.account .note { max-width: 17rem; line-height: 1.3; }
.account-name { font-size: 14px; font-weight: 600; }
.account-confirm { font-size: var(--fs-xs); }
.btn.danger { background: var(--destroyed); border-color: var(--destroyed); color: #fff; }
body > header nav { display: flex; gap: 2px; }
body > header nav .btn { background: none; border-color: transparent; padding: 6px 12px; border-radius: 4px; }
body > header nav .btn[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

main { flex: 1; min-height: 0; position: relative; }
.view { display: none; height: 100%; }
.view.active { display: flex; }
#view-history, #view-sources, #view-hut, #view-routes, #view-notice { overflow-y: auto; }
#view-hut.active, #view-routes.active, #view-notice.active, #view-sources.active, #view-history.active { display: block; }

/* sidebar */
#sidebar {
  width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--line); background: var(--panel); min-height: 0;
}
.jump-row { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-3) var(--s-3) 0; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.jump-row span { margin-right: var(--s-1); }
.jump-row .btn { padding: 3px 9px; font-size: 13px; min-height: 26px; }
#q { margin: var(--s-3); padding: 8px 10px; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); padding: 0 var(--s-3); }
fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px 8px; margin: 0; min-width: 0; display: grid; gap: 2px; }
legend { color: var(--muted); font-size: var(--fs-xs); padding: 0 4px; }
fieldset label { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.35; }
fieldset label input { margin: 2px 0; flex-shrink: 0; }
.mine-filter { padding: var(--s-2) var(--s-3) 0; }
.mine-filter label { display: flex; gap: var(--s-2); align-items: center; font-size: 13px; }
#count { padding: var(--s-3) var(--s-3) var(--s-2); color: var(--muted); font-size: var(--fs-xs); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
#count .list-mode { margin-left: auto; }
#count .list-mode .btn { font-size: var(--fs-xs); padding: 2px 8px; min-height: 24px; }
#list { overflow-y: auto; flex: 1; min-height: 0; border-top: 1px solid var(--line); }
#list ul { list-style: none; margin: 0; padding: 0 0 var(--s-2); }
/* the status dot sits under the area chevron and the name lines up with the area title */
#list a[data-id] {
  all: unset; box-sizing: border-box; width: 100%; padding: 8px var(--s-3) 8px 11px;
  cursor: pointer; display: flex; gap: var(--s-2); align-items: flex-start;
}
#list details:first-child summary { border-top: 0; }
#list a[data-id]:hover { background: var(--bg); }
#list a.sel { background: var(--bg); box-shadow: inset 3px 0 0 var(--accent); }
#list a[data-id]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.li-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
#list .nm { font-weight: 500; line-height: 1.3; }
#list .sub { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
#list .sub:empty { display: none; }
#list .tags { margin-left: auto; display: flex; gap: var(--s-1); flex-shrink: 0; align-self: center; }
#list .tags .tag { font-size: 11px; padding: 0 5px; line-height: 17px; }

/* status dots in filters, rows and badges */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--standing); }
.dot.gone { background: var(--gone); }
.dot.gone.fate-ruin { background: var(--ruin); }
.dot.gone.fate-destroyed { background: var(--gone); box-shadow: 0 0 0 2px var(--destroyed); }
.dot.unconfirmed { background: none; border: 2px dashed var(--unconfirmed); }
#list a[data-id] > .dot { margin-top: 5px; }

/* hut gable for map pins and the key */
.glyph { width: 20px; height: 20px; flex-shrink: 0; overflow: visible; display: inline-block; vertical-align: -1px; }
.glyph path { stroke-linejoin: round; }
.glyph .g-halo { fill: none; stroke: none; }
.glyph .g-walls { display: none; }
.glyph .g-body { fill: var(--g-fill, var(--standing)); stroke: var(--g-stroke, none); stroke-width: 1.8; }
.glyph.gone { --g-fill: var(--gone); }
.glyph.fate-ruin .g-body { fill: none; stroke: var(--ruin); stroke-width: 2; }
.glyph.fate-ruin .g-walls { display: inline; fill: var(--ruin); }
.glyph.fate-destroyed { --g-stroke: var(--destroyed); }
.glyph.fate-destroyed .g-body { stroke-width: 2.4; }
.glyph.unconfirmed .g-body { fill: color-mix(in srgb, var(--unconfirmed) 22%, transparent); stroke: var(--unconfirmed); stroke-width: 1.8; stroke-dasharray: 2.6 1.8; }
.glyph.private { --g-stroke: var(--private); }
.glyph.private .g-body { stroke-width: 2.6; }

.tag {
  font-size: 11.5px; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--muted); display: inline-flex; align-items: center; gap: 4px;
}
.tag.paid { border-color: var(--paid); color: var(--paid); }
.tag.private { border-color: var(--private); color: var(--private); font-weight: 600; }
.tag.water { border-color: var(--water); color: var(--water); }
.tag.unverified { border-style: dashed; color: var(--unconfirmed); border-color: var(--unconfirmed); }
.tag.toilet { border-color: var(--toilet); color: var(--toilet); }
.tag.restricted { border-color: var(--field-line); color: var(--ink); }
/* your own huts are the only solid tags */
.tag.visited { background: var(--standing); color: var(--visited-ink); border-color: var(--standing); font-weight: 600; }
.tag.planned { background: var(--planned); color: var(--planned-ink); border-color: var(--planned); font-weight: 600; }
.tag.status { gap: 5px; }

/* map */
#map { flex: 1; min-width: 0; }
.reset-btn { width: 34px; height: 34px; font-size: 18px; line-height: 1; cursor: pointer; }
/* map controls follow the colour scheme */
.leaflet-bar a, .leaflet-bar button, .reset-btn, .leaflet-control-layers {
  background-color: var(--panel); color: var(--ink);
}
.leaflet-bar a, .leaflet-bar a:hover { border-bottom-color: var(--line); }
.leaflet-bar a:hover, .leaflet-bar button:hover, .reset-btn:hover { background-color: var(--bg); }
.leaflet-bar a.leaflet-disabled { background-color: var(--bg); color: var(--muted); }
.leaflet-control-layers-expanded { color: var(--ink); font: var(--fs-sm)/1.5 var(--sans); }
.leaflet-control-layers-separator { border-top-color: var(--line); }
.leaflet-touch .leaflet-bar, .leaflet-touch .leaflet-control-layers { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
@media (prefers-color-scheme: dark) { .leaflet-control-layers-toggle { filter: invert(1) hue-rotate(180deg); } }

/* pins: a 28px hit box around a 20px gable with a light halo for imagery */
.hut-marker { display: flex; align-items: center; justify-content: center; border-radius: 50%; }
/* map focus is white with a dark edge so it shows on imagery and topo alike */
.hut-marker:focus-visible { outline: 3px solid var(--pin-halo); outline-offset: 0; box-shadow: 0 0 0 4px rgba(0, 0, 0, .6); }
.hut-pin { position: relative; width: 20px; height: 20px; display: block; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45)); }
.hut-pin .glyph { width: 100%; height: 100%; display: block; }
.hut-pin .g-halo { fill: var(--pin-halo); stroke: var(--pin-halo); stroke-width: 3.4; }
.hut-pin .glyph.private { --g-stroke: var(--pin-private); }
.hut-pin.gone:not(.fate-ruin) { width: 18px; height: 18px; }
/* an approximate position gets a dashed ring, so it reads as uncertain without fading */
.hut-pin.approx { outline: 1.5px dashed var(--pin-private); outline-offset: 2px; border-radius: 50%; }
/* the open hut, ringed so the pin itself stays visible */
.hut-pin.sel { border-radius: 50%; box-shadow: 0 0 0 7px rgba(255, 255, 255, .8), 0 0 0 9.5px var(--pin-sel); }
.hut-pin.paid::after {
  content: "$"; position: absolute; top: -6px; right: -8px; background: var(--pin-paid); color: var(--on-dark);
  font: 700 9px/12px var(--sans); width: 12px; height: 12px; border-radius: 50%; text-align: center;
  box-shadow: 0 0 0 1.5px var(--pin-halo);
}
.hut-pin:is(.mine-visited, .mine-planned)::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2.5px solid var(--standing);
  box-shadow: 0 0 0 1.5px var(--pin-halo), inset 0 0 0 1.5px var(--pin-halo);
}
.hut-pin.mine-planned::before { border-color: var(--pin-planned); border-style: dashed; }

/* clusters read as summits, one more contour ring per size step */
.hut-cluster {
  border-radius: 50%; background: var(--cluster); color: var(--on-dark);
  display: flex; align-items: center; justify-content: center;
  font: 700 14px/1 var(--serif); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--pin-halo), 0 1px 6px rgba(0, 0, 0, .45);
}
.hut-cluster-l { font-size: 16px; }
.hut-cluster::before, .hut-cluster::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  border: 1.5px solid var(--cluster-ring); box-shadow: 0 0 0 1px var(--cluster-ring-edge);
}
.hut-cluster-s::before, .hut-cluster-s::after, .hut-cluster-m::after { display: none; }
.hut-cluster::before { inset: -6px; }
.hut-cluster::after { inset: -11px; }
.hut-cluster:hover { background: var(--cluster-hover); }
.hut-cluster:focus-visible { outline: 3px solid var(--pin-halo); outline-offset: 3px; box-shadow: 0 0 0 2px var(--pin-halo), 0 0 0 7px rgba(0, 0, 0, .6); }

/* hover previews, map tooltip and list share one look */
.leaflet-tooltip.hut-tip, #list-tip { padding: 0; border: 0; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); background: var(--panel); color: var(--ink); }
.leaflet-tooltip-top.hut-tip::before { border-top-color: var(--panel); }
.hut-tip img, #list-tip img { display: block; width: 320px; height: 210px; object-fit: cover; background: var(--line); }
#list-tip { position: fixed; z-index: 2000; pointer-events: none; width: 320px; }
.tip-body { padding: 8px 12px 10px; font-size: var(--fs-sm); font-family: var(--sans); white-space: normal; min-width: 180px; max-width: 320px; }
.tip-body b { font: 700 16px/1.2 var(--serif); }
.tip-body span { color: var(--muted); font-size: 12.5px; }

/* detail panel */
#detail {
  position: absolute; right: 0; top: 0; bottom: 0; width: 460px; max-width: 100%;
  background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto;
  z-index: 1000; padding: 16px 18px 40px; box-shadow: -4px 0 14px rgba(0, 0, 0, .12);
}
#detail:focus { outline: none; }
#detail h2 { margin: 0 30px 4px 0; font: 700 31px/1.08 var(--serif); letter-spacing: -.01em; }
.detail-hero { margin: -16px -18px 16px; position: relative; background: var(--line); }
.detail-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: 50% 55%; }
.detail-hero figcaption, .hp-hero figcaption {
  position: absolute; inset: auto 0 0; padding: 32px 10px 6px; text-align: right; font-size: 11px; color: var(--on-dark); text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  background: linear-gradient(transparent, var(--photo-scrim) 70%); pointer-events: none;
}
/* over a photo the close button needs its own light disc */
#detail.has-hero .panel-close { background: rgba(255, 255, 255, .9); border-radius: 50%; color: var(--pin-private); }
.hut-info .alt { color: var(--muted); font-size: 12.5px; margin-bottom: 8px; }
.hut-info .badges .tag { font-size: 12px; padding: 2px 7px; }
.hut-info dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; margin: 0 0 12px; }
.hut-info dt { color: var(--muted); }
.hut-info dd { margin: 0; word-break: break-word; }
#detail h3 { font: 700 var(--fs-h3)/1.2 var(--serif); color: var(--ink); margin: var(--s-5) 0 var(--s-2); }
#detail > p { line-height: 1.6; }
.hut-info ul { padding-left: 18px; margin: 4px 0; }
.hut-info iframe { width: 100%; aspect-ratio: 4/3; border: 0; border-radius: 4px; }
.photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.photos figure { margin: 0; }
.photos img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; background: var(--line); }
.photos figcaption { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.warn { background: color-mix(in srgb, var(--destroyed) 10%, transparent); border-left: 3px solid var(--destroyed); padding: 6px 10px; margin: 8px 0; }
.notice { background: color-mix(in srgb, var(--notice) 12%, transparent); border-left: 3px solid var(--notice); padding: 6px 10px; margin: 8px 0; }
.hut-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.hut-actions .btn { padding: 7px 14px; }
.hut-actions .book-btn { margin: 0; }
.hut-actions .mine-slot:empty { display: none; }
.hut-actions .mine-slot:has(.mine-box) { flex-basis: 100%; }
.hut-actions .mine-pick { font-size: 13.5px; margin-left: var(--s-1); }

.mine-box { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 0 0 12px; display: grid; gap: 6px; }
.mine-btns { display: flex; gap: 6px; }
.mine-btns .btn { background: var(--bg); padding: 6px 10px; }
.mine-btns [data-state="visited"][aria-pressed="true"] { background: var(--standing); border-color: var(--standing); color: var(--visited-ink); }
.mine-btns [data-state="planned"][aria-pressed="true"] { background: var(--planned); border-color: var(--planned); color: var(--planned-ink); }
.mine-box label { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }

/* sources page and map key */
.page-body { line-height: 1.6; }
.page-body > p { max-width: var(--measure); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--s-3) var(--s-4); }
.legend li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
/* key pins sit on the page, not on map tiles, so their dark marks follow the ink colour */
.legend .hut-pin { --pin-private: var(--ink); }
.legend-pin { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.key-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 8px; }
.key-tags .tag { font-size: 12.5px; padding: 2px 8px; }
.src-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--s-3); }
.src-card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: var(--s-4) 18px; }
.src-card h3 { margin: 0 0 2px; font: 700 17px/1.3 var(--serif); }
.src-card p { margin: 0; color: var(--muted); font-size: 13.5px; }
.src-card .src-n { color: var(--accent); font-weight: 700; margin-bottom: 4px; }
.map-legend { background: var(--panel); color: var(--ink); border-radius: 6px; box-shadow: var(--shadow); padding: 6px 12px; font-size: 12.5px; max-width: 270px; }
.map-legend summary { color: var(--ink); font-size: 13px; }
.map-legend .legend { grid-template-columns: 1fr; gap: 3px; margin: 4px 0 6px; }
.map-legend .legend li { font-size: 12.5px; gap: 8px; min-height: 32px; }
/* the visited and planned rings are wider than a pin, so every key icon shrinks to one fixed cell */
.map-legend .legend-pin { width: 32px; height: 32px; }
.map-legend .legend-pin > * { transform: scale(.78); }

/* history page */
#history { width: 100%; }
.hist-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-7); }
.toc { position: sticky; top: 24px; align-self: start; font-size: 13.5px; }
.toc details { margin: 0; }
.toc .toc-title { font: 700 16px/1.2 var(--serif); color: var(--ink); margin: 0 0 10px; padding: 0; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc a { display: block; padding: 5px 0 5px 12px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); border-left-color: var(--accent); font-weight: 700; }
.hist-main { max-width: 780px; }
.hist-sec { padding: 0 0 var(--s-3); scroll-margin-top: var(--s-4); }
.hist-sec + .hist-sec { border-top: 1px solid var(--line); padding-top: var(--s-6); }
.hut-page .hist-sec h2 { margin-top: 0; }
.hist-body { font-size: var(--fs-body); line-height: 1.65; }
.hist-body p { max-width: var(--measure); }
.hist-body::after { content: ""; display: block; clear: both; }
.hist-body .lead { font-size: var(--fs-lead); line-height: 1.55; margin-top: 0; }
.hist-fig { float: right; width: 40%; margin: 6px 0 var(--s-4) var(--s-6); }
.hist-fig img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; display: block; background: var(--line); }
.hist-fig figcaption { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 6px; }
.hist-fig figcaption span { display: block; font-size: 11px; }
details { margin-top: 4px; }
summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14.5px; padding: 4px 0; }
.src { font-size: 12.5px; color: var(--muted); }
.story-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.story-row { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
a.story-row:hover { background: var(--panel); }
a.story-row:hover .story-title { text-decoration: underline; text-underline-offset: 3px; }
a.story-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.story-thumb { width: 72px; height: 54px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: var(--line); }
.story-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.story-thumb .hut-card-blank { width: 100%; height: 100%; aspect-ratio: auto; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); border-radius: 4px; }
.story-thumb .hut-card-blank svg { width: 52%; }
.story-row-text { display: flex; flex-direction: column; min-width: 0; }
.story-hut { font-size: 13px; font-weight: 700; color: var(--accent); }
.story-title { font: 700 18px/1.25 var(--serif); margin-top: 1px; }
.story-go { margin-left: auto; font-size: 24px; line-height: 1; color: var(--muted); padding-right: 4px; }
.glossary { margin: 0; border-top: 1px solid var(--line); }
.glossary > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.glossary dt { font: 700 17px/1.35 var(--serif); }
.glossary dd { margin: 0; font-size: 15px; line-height: 1.6; max-width: 62ch; }
@media (max-width: 640px) { .glossary > div { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .hist-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding-top: var(--s-5); }
  .toc { position: static; }
  .toc .toc-title { margin: 0; padding: 4px 0; color: var(--accent); }
  .toc ol { display: flex; flex-wrap: wrap; gap: 4px 12px; border: 0; margin-top: var(--s-2); }
  .toc a { padding: 2px 0; border: 0; }
  .hist-fig { float: none; width: 100%; margin: 0 0 12px; }
}
@media (max-width: 760px) {
  body > header { flex-wrap: wrap; padding: 8px 12px; }
  body > header .brand { font-size: 15px; }
  body > header nav { flex-wrap: wrap; }
  body > header nav .btn { padding: 6px 9px; }
  .profile-bar { order: 3; width: 100%; margin-left: 0; }
  #view-map.active { flex-direction: column-reverse; }
  #sidebar { width: 100%; height: 45%; border-right: 0; border-top: 1px solid var(--line); }
  #detail { width: 100%; }
}
/* between phone and wide desktop the open panel takes the list's place, so the map keeps a usable width */
@media (min-width: 761px) and (max-width: 1180px) {
  #view-map.detail-open #sidebar { display: none; }
  #view-map.detail-open .intro { left: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* hut page */
/* shared page container: a centred content column with full-bleed rows for heroes, bands and maps */
.hut-page {
  --gutter: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
  display: grid; padding: 0 0 var(--s-8);
  grid-template-columns: [full-start] minmax(var(--page-gutter), 1fr) [content-start] minmax(0, var(--page-max)) [content-end] minmax(var(--page-gutter), 1fr) [full-end];
  align-content: start;
}
.hut-page > * { grid-column: content; min-width: 0; }
.hut-page > :is(.hp-hero, .rp-map, .hp-head:first-child) { grid-column: full; }
.hut-page:focus, .hut-page h1:focus, #person h1:focus, #graph-title:focus { outline: none; }
.hp-hero { margin: 0 0 var(--s-6); position: relative; background: var(--line); }
.hp-hero img { display: block; width: 100%; height: auto; aspect-ratio: 21/9; max-height: 560px; object-fit: cover; object-position: 50% 55%; }
.hp-hero figcaption { padding: 40px var(--gutter) 10px; font-size: 11.5px; }
.hp-head { padding-top: var(--s-6); }
.hp-hero + .hp-head { padding-top: 0; }
.hp-head > * { max-width: 780px; }
/* no photo: the title sits on a band of contour lines */
/* page titles sit on the page itself, only the site header carries the contour texture */
.hut-page > .hp-head:first-child { padding: var(--s-7) var(--gutter) 0; margin-bottom: var(--s-6); }
/* page titles and section headings share one scale on every page */
.hp-head h1, #person h1, .graph-head h1 { font: 700 var(--fs-h1)/1.02 var(--serif); letter-spacing: -.02em; margin: 0 0 var(--s-2); text-wrap: balance; color: var(--ink); }
.hut-page h2, #person h2 { font: 700 var(--fs-h2)/1.15 var(--serif); letter-spacing: -.01em; margin: var(--s-7) 0 var(--s-4); color: var(--ink); }
.hut-page > .hp-head:first-child + h2, .page-body > h2:first-child { margin-top: 0; }
.hut-page .alt { font-size: var(--fs-ui); margin-bottom: var(--s-1); }
.hut-page .badges { margin: var(--s-4) 0; }
.hut-page .mine-box { max-width: 520px; }
.hp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-8); margin-top: var(--s-5); }
.hp-hero + .hp-cols { margin-top: 0; }
.hp-main { font-size: var(--fs-body); line-height: 1.65; max-width: var(--measure); }
.hp-main > .hp-head { padding-top: 0; }
.hut-page > .hp-head:first-child + .hp-cols { margin-top: 0; }
/* both columns start level, the gap above comes from the hero, band or map */
.hp-main > :first-child, .hp-main > :first-child > h2:first-child, .hp-side > h2:first-child { margin-top: 0; }
.hp-side { padding-left: var(--s-5); border-left: 1px solid var(--line); align-self: start; }
.hp-side h2 { font-size: var(--fs-h3); margin: var(--s-6) 0 var(--s-3); }
.hp-story > p:first-of-type { font-size: var(--fs-lead); line-height: 1.55; }
.hut-page .photos { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.hp-side dl { font-size: 14px; }
.hut-page li { overflow-wrap: anywhere; }
/* a photo that fails to load removes itself, so drop the heading of an emptied grid */
.photos:empty, .hut-info :is(h2, h3):has(+ .photos:empty) { display: none; }
.hp-minimap { height: 240px; border-radius: 6px; border: 1px solid var(--line); background: var(--line); margin-top: var(--s-4); }
.hp-minimap + .note { margin: 6px 0 0; }
@media (max-width: 900px) {
  .hut-page { padding-bottom: var(--s-7); }
  .hp-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hp-side { padding-left: 0; border-left: 0; }
  .hp-hero img { height: auto; aspect-ratio: 4/3; max-height: 60vh; }
  .hut-page > .hp-head:first-child { padding-top: var(--s-6); }
}

/* people */
.person-link { all: unset; color: var(--accent); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.person-link:hover { text-decoration-style: solid; }
.person-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.person-chip { text-decoration: none; cursor: pointer; font: inherit; font-size: 12.5px; padding: 3px 9px; background: var(--panel); }
#people-index { width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel); min-height: 0; }
#pq { margin: var(--s-3) var(--s-3) var(--s-1); padding: 8px 10px; }
#people-count { padding: 0 12px 6px; }
#people-list { overflow-y: auto; flex: 1; padding-bottom: 20px; }
.group-list summary { list-style: none; cursor: pointer; position: sticky; top: 0; background: var(--panel); padding: 12px 12px 8px 30px; font: 500 14.5px/1.2 var(--sans); color: var(--ink); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; z-index: 1; }
.group-list summary::-webkit-details-marker { display: none; }
.group-list summary::before { content: ""; position: absolute; left: 13px; top: 15px; border: 5px solid transparent; border-left-color: var(--muted); transition: transform .15s; transform-origin: 2px 5px; }
.group-list details[open] > summary::before { transform: rotate(90deg); }
.group-list summary .n { color: var(--muted); font: 400 13px/1.2 var(--sans); }
.group-list summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
#people-list ul { list-style: none; margin: 0; padding: 0; }
#people-list a { all: unset; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; padding: 7px 12px; cursor: pointer; border-left: 3px solid transparent; }
#people-list a:hover { background: var(--bg); }
#people-list a[aria-current="page"] { background: var(--bg); border-left-color: var(--accent); }
#people-list a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pl-name { font-weight: 700; }
.pl-role { font-size: 12px; color: var(--muted); }
#people-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.people-bar { padding: var(--s-5) var(--page-gutter) 0; }
#person { flex: 1; min-width: 0; overflow-y: auto; padding: var(--s-5) var(--page-gutter) var(--s-8); }
#people-graph { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.graph-body { flex: 1; min-height: 0; display: flex; }
#people-graph svg { flex: 1; width: 100%; min-height: 0; cursor: grab; }
.graph-head { padding: var(--s-5) var(--page-gutter) 0; }
.graph-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.graph-head p { margin: 0; }
.graph-head h1 { margin-bottom: 0; }
.graph-head .graph-sub { color: var(--muted); font-size: var(--fs-ui); margin: var(--s-1) 0 0; }
.g-node.g-centre text { font: 700 15px var(--serif); }
.g-centre circle { stroke: var(--ink); stroke-width: 2.5; }
.g-links line { stroke: var(--field-line); stroke-opacity: .55; stroke-width: 1.2; }
.g-node { cursor: pointer; outline: none; }
.g-node circle { stroke: var(--panel); stroke-width: 1.5; }
.g-hut rect { fill: var(--panel); stroke: var(--ink); stroke-width: 1.6; }
.g-node text { font: 11px var(--sans); fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; pointer-events: none; }
.g-hut text { font: 700 11.5px var(--serif); }

.g-node:focus-visible circle, .g-node:focus-visible rect { stroke: var(--focus); stroke-width: 3; }
.g-node.dim, .g-links line.dim { opacity: .12; }
.graph-legend { list-style: none; margin: var(--s-3) 0 0; padding: 0; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px var(--s-4); color: var(--muted); }
.graph-legend span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.graph-legend span.sq { border-radius: 1.5px; background: var(--panel); border: 1.6px solid var(--ink); }
#person:focus { outline: none; }
#person > * { max-width: 760px; }
.person-role { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); margin: 0; }
.person-meta { color: var(--muted); margin: 0 0 var(--s-5); font-size: var(--fs-ui); }
.person-summary { font-size: var(--fs-lead); line-height: 1.55; margin: 0; max-width: 60ch; }
.hut-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.hut-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.hut-card:hover { border-color: var(--muted); }
.hut-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hut-card img, .hut-card-blank { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; background: var(--line); }
.hut-card-blank { display: flex; align-items: center; justify-content: center; color: var(--field-line); background: var(--bg); }
.hut-card-blank svg { width: 38%; }
.hut-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.hut-card-body b { font: 700 17px/1.25 var(--serif); }
.hut-card-body span { font-size: 12px; color: var(--muted); }
.person-sources { margin-top: 28px; font-size: 13px; }
.person-sources ul { padding-left: 18px; }
#person li { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  #view-people.active { flex-direction: column; }
  #people-index { width: 100%; max-height: 40%; border-right: 0; border-bottom: 1px solid var(--line); }
  #person { padding-top: var(--s-5); }
}

/* photo lightbox */
.photo-open { all: unset; display: block; width: 100%; cursor: zoom-in; }
.photo-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
#lightbox[open] { display: flex; align-items: center; justify-content: center; gap: 12px; }
#lightbox::backdrop { background: rgba(10, 16, 17, .88); }
#lightbox figure { margin: 0; max-width: min(1400px, 86vw); display: flex; flex-direction: column; align-items: center; }
#lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 3px; background: #222; }
#lightbox figcaption { color: #e6ece8; font-size: 13.5px; margin-top: 10px; text-align: center; line-height: 1.5; }
#lightbox figcaption b { font: 700 18px/1.2 var(--serif); }
#lightbox figcaption span { color: #a7b3ae; margin-left: 6px; }
#lightbox figcaption a { color: #9fd3c1; }
#lightbox button { font: 400 34px/1 var(--sans); color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 50%; width: 48px; height: 48px; cursor: pointer; flex-shrink: 0; }
#lightbox button:hover { background: rgba(255,255,255,.24); }
#lightbox button:focus-visible { outline: 2px solid #9fd3c1; outline-offset: 2px; }
#lightbox .lb-close { position: fixed; top: 16px; right: 16px; font-size: 28px; }

.book-btn { display: inline-block; margin: 0 0 12px; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 700; padding: 7px 14px; }
.book-btn:hover { filter: brightness(1.1); }
#graph-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 10px 0 6px; }
.busiest { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.busiest b { color: var(--accent); margin-left: 3px; }
svg.everyone .g-person text { opacity: 0; }
svg.everyone.zoomed .g-person text, svg.everyone .g-node:hover text, svg.everyone .g-node:focus-visible text { opacity: 1; }
.mentions { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.mentions .linkish { font-size: 15px; }

/* routes */
.route-swatch { display: inline-block; width: 16px; height: 4px; border-radius: 2px; flex-shrink: 0; background: var(--accent); }
.route-swatch.k-walk { background: var(--route-walk); }
.route-swatch.k-bikepacking { background: var(--route-bikepacking); }
.route-swatch.k-mtb { background: var(--route-mtb); }
.route-swatch.k-4wd { background: var(--route-4wd); }
.route-swatch.k-multi { background: var(--route-multi); }
.leaflet-interactive.route-line { cursor: pointer; }
.leaflet-interactive.route-line:focus { outline: none; }
.leaflet-interactive.route-line:focus-visible { stroke: var(--focus); }
.leaflet-tooltip.route-tip { font: 700 14px/1.2 var(--serif); padding: 5px 9px; border-radius: 4px; }
.rp-lead { font-size: var(--fs-lead); line-height: 1.55; margin: var(--s-4) 0 0; max-width: 60ch; }
.hp-head .rp-lead { color: var(--ink); }
.hut-info .route-list { padding: 0; margin: 0; }
.route-card { display: flex; flex-direction: column; gap: 4px; }
.route-card .badges { margin: 4px 0; }
/* on a route page the map is the hero, edge to edge like a hut photo */
.rp-map { height: clamp(320px, 56vh, 600px); background: var(--line); margin: calc(-1 * var(--s-6)) 0 var(--s-2); }
.rp-huts .story-row { gap: 12px; }
.rp-huts .story-hut { font-variant-numeric: tabular-nums; }
.rp-hut-sub { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rp-huts .tags { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.rp-huts .tags + .story-go { margin-left: 0; }
@media (max-width: 900px) { .rp-map { height: 52vh; } }

/* first-visit intro over the map */
.intro {
  position: absolute; z-index: 1100; top: var(--s-4); left: calc(var(--sidebar-w) + 56px);
  width: min(380px, calc(100% - var(--sidebar-w) - 80px));
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px;
  padding: var(--s-5) var(--s-5) 20px; box-shadow: var(--shadow);
}
.intro h2 { font: 700 25px/1.1 var(--serif); letter-spacing: -.01em; margin: 0 32px var(--s-2) 0; text-wrap: balance; }
.intro .panel-close { top: 10px; right: 10px; width: 32px; height: 32px; }
.intro p { margin: 0 0 var(--s-4); font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.intro-huts { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.intro-huts a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px;
  border: 1px solid var(--field-line); border-radius: 4px; background: var(--panel);
  color: var(--ink); text-decoration: none; font-size: 14px;
}
.intro-huts a:hover { border-color: var(--accent); color: var(--accent); }
.intro .book-btn { margin: 0; padding: 8px 16px; }

@media (max-width: 760px) {
  /* sits at the foot of the map, above the list, and leaves the top of the map clear */
  .intro { top: auto; bottom: calc(45% + var(--s-2)); left: var(--s-2); right: var(--s-2); width: auto; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); }
  .intro h2 { font-size: 18px; margin-bottom: var(--s-1); }
  .intro p { font-size: 13px; line-height: 1.4; margin-bottom: var(--s-2); }
  .intro-huts { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--s-3)) var(--s-2) 0; padding-bottom: 2px; }
  .intro-huts a { white-space: nowrap; min-height: 30px; font-size: 13px; }
  .intro .book-btn { padding: 6px 12px; font-size: 14px; }
  .intro .panel-close { top: 4px; right: 4px; }
}
.gloss { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.gloss:hover { text-decoration-color: currentColor; }
.glossary dt:target, .glossary dt:focus { color: var(--accent); outline: none; }
.hidden-hint { margin: 0 12px 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--paid) 55%, transparent); border-left-width: 4px; border-radius: 6px; background: color-mix(in srgb, var(--paid) 12%, var(--panel)); font-size: 13.5px; }
.hidden-hint[hidden] { display: none; }
.hidden-hint p { margin: 0 0 8px; }
.hidden-hint b { font-weight: 600; }
.hidden-hint div { display: flex; flex-wrap: wrap; gap: 6px; }
.hidden-hint .btn { font-size: 13px; padding: 4px 10px; }
.rp-map-note { margin: 0 0 var(--s-4); }
.hist-part { font: 700 var(--fs-h2)/1.15 var(--serif); margin: var(--s-7) 0 var(--s-4); padding-top: var(--s-5); border-top: 2px solid var(--ink); }
.hist-main > .hist-part:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hist-sec h3 { font: 700 22px/1.2 var(--serif); margin: 0 0 var(--s-3); }
.hist-part + .hist-sec { border-top: 0; padding-top: 0; }
.toc-part > span { display: block; padding: 10px 0 4px 12px; font-weight: 600; color: var(--ink); font-size: 12.5px; }
.toc-part ol { border-left: 0; }
.pl-n { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.huts-code { margin: 0 0 var(--s-3); padding-left: 1.2em; max-width: 62ch; line-height: 1.6; }
.huts-code li + li { margin-top: 4px; }
.people-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-5) var(--s-6); margin-top: var(--s-5); }
.people-overview h2 { font: 600 15px/1.3 var(--sans); margin: 0 0 var(--s-2); color: var(--ink); }
.pl-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pl-rows a { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.pl-rows a:hover .pl-name { text-decoration: underline; }
.pl-rows .pl-name { font-weight: 600; }
.pl-rows .pl-role { font-size: 13px; color: var(--muted); }
.about-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: var(--s-3); }
.about-nav a { color: var(--accent); }
.page-body h2[id] { scroll-margin-top: var(--s-5); }
.graph-title-link { color: inherit; text-decoration: none; }
.graph-title-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }