/* nick.burgnon.com
   The shared project style (Barlow Condensed / Barlow / IBM Plex Mono, double-rule neatline, contour texture, card panels),
   with green as the primary colour and the projects' orange kept as the secondary accent. */
:root{
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
  /* light: green-tinted cream, moss and forest contours */
  --bg:#E3EAD6; --panel:rgba(243,246,236,.92); --panel-line:#C9D3B6; --ink:#1D2A21; --muted:#56634F;
  --green:#2E6B3E; --orange:#C2602A; --rule:#A0AE80;
  --sign:#2D5A4B; --sign-ink:#EEE9D8; --sign-line:rgba(238,233,216,.7); --band:#27372D; --band-ink:#E3EAD6;
  --tag-bg:#D5DEC2; --tag-ink:#3B4B33; --glow:transparent; --board2:#F1F4E9;
  --t0:#8FA06A; --t1:#6C8A58; --t2:#A7B07D; --t3:#4E7A53; --t-ix:#3E6847; --t-sea:#9BB8AE; --t-shore:#3E6847;
  --t-op:.42; --label:#4C5D47;
  --road:#7A6B52; --road-op:.32; --card-line:rgba(46,107,62,.5); --card-edge:rgba(39,55,45,.16);
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  color-scheme:dark;
  /* dark: deep aqua with lighter sea-green contours */
  --bg:#0B2326; --panel:rgba(10,33,36,.86); --panel-line:#21474A; --ink:#E5EFE8; --muted:#94B2AA;
  --green:#8ED29E; --orange:#EE905F; --rule:#2D5A57;
  --sign:#2D5A4B; --sign-ink:#EEE9D8; --sign-line:rgba(238,233,216,.6); --band:#1A4644; --band-ink:#CFE6DE;
  --tag-bg:#123A3B; --tag-ink:#8DCDD0; --glow:rgba(110,214,196,.5); --board2:#0F3033;
  --t0:#2E7470; --t1:#3E8A76; --t2:#2E6E80; --t3:#4F9882; --t-ix:#6CB59C; --t-sea:#1E5461; --t-shore:#7FC7AE;
  --t-op:.66; --label:#8DB2A6;
  --road:#B4D8CB; --road-op:.17; --card-line:rgba(142,210,158,.38); --card-edge:rgba(0,0,0,.35);
}}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#0B2326; --panel:rgba(10,33,36,.86); --panel-line:#21474A; --ink:#E5EFE8; --muted:#94B2AA;
  --green:#8ED29E; --orange:#EE905F; --rule:#2D5A57;
  --sign:#2D5A4B; --sign-ink:#EEE9D8; --sign-line:rgba(238,233,216,.6); --band:#1A4644; --band-ink:#CFE6DE;
  --tag-bg:#123A3B; --tag-ink:#8DCDD0; --glow:rgba(110,214,196,.5); --board2:#0F3033;
  --t0:#2E7470; --t1:#3E8A76; --t2:#2E6E80; --t3:#4F9882; --t-ix:#6CB59C; --t-sea:#1E5461; --t-shore:#7FC7AE;
  --t-op:.66; --label:#8DB2A6;
  --road:#B4D8CB; --road-op:.17; --card-line:rgba(142,210,158,.38); --card-edge:rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:16px/1.55 var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

/* ---------- the map (fixed behind everything) ---------- */
.map{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.map .fade{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 72%,transparent) 44%,transparent 68%);transition:opacity .9s}
.stack{position:absolute;left:0;top:0;animation:drift 140s ease-in-out infinite alternate}
#stack{transform-origin:0 0}
.pins{transition:opacity .4s}
.stack svg{position:absolute;inset:0;width:100%;height:100%;opacity:var(--t-op);will-change:opacity}
.stack path{vector-effect:non-scaling-stroke;stroke-width:.9}
.stack .band path:not(.ix):not(.shore){stroke-opacity:.62}
.stack .c0{stroke:var(--t0)} .stack .c1{stroke:var(--t1)} .stack .c2{stroke:var(--t2)} .stack .c3{stroke:var(--t3)}
.stack .ix{stroke:var(--t-ix);stroke-width:1.5}
.stack .sea{stroke:var(--t-sea);stroke-dasharray:1 4}
.stack .shore{stroke:var(--t-shore);stroke-width:1.7;stroke-dasharray:none}
/* roads: faint, static, never glowing; just enough to find your way */
.stack svg.roads{opacity:var(--road-op)}
.roads path{stroke:var(--road);fill:none}
.roads .hwy{stroke-width:1.9} .roads .major{stroke-width:1.15} .roads .minor{stroke-width:.7}
/* "rising tide": a slow brightening that climbs from the sea floor to the summits */
.stack svg.band{animation:tide 16s ease-in-out infinite;animation-delay:calc(var(--i) * 1.6s - 16s)}
@keyframes tide{0%,100%{opacity:calc(var(--t-op) * var(--t-low,.62))}45%{opacity:var(--t-op)}}
/* dark: the lines glow, and the tide becomes a slow bioluminescent pulse */
:root[data-theme=dark] .stack g.band{filter:url(#glow)} :root[data-theme=dark] .stack svg.band{--t-low:.35}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .stack g.band{filter:url(#glow)} :root:not([data-theme=light]) .stack svg.band{--t-low:.35}}
@keyframes drift{from{translate:0 0}to{translate:-14px 10px}}
@media (prefers-reduced-motion:reduce){.stack,.stack svg.band{animation:none}}

.lbl{position:absolute;transform:translate(-50%,-100%);font:500 10.5px/1.25 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--label);text-align:center;white-space:nowrap;transition:opacity .35s;text-shadow:0 0 3px var(--bg),0 0 6px var(--bg),0 0 10px var(--bg)}
.lbl small{display:block;font-size:10px;letter-spacing:.06em;text-transform:none;opacity:.8}
.lbl::after{content:"";display:block;margin:4px auto 0;width:0;height:0;border:4px solid transparent;border-bottom:7px solid currentColor;border-top:0}
.lbl.left{transform:translate(calc(-100% + 5px),-50%);padding-right:17px;text-align:right}
.lbl.left::after{position:absolute;right:0;top:50%;margin:-4px 0 0}
.lbl.water{transform:translate(-50%,-50%);font-style:italic;color:var(--t-shore);letter-spacing:.3em}
.lbl.water::after{display:none}
/* home: ring marker on the point, the town's name to its right, signboard type */
.lbl.home{color:var(--orange);text-align:left;transform:translate(-10px,-50%);padding-left:30px;font:700 21px/1.05 var(--f-display);letter-spacing:.2em;
  text-shadow:0 0 4px var(--bg),0 0 8px var(--bg),0 0 14px var(--bg),0 0 22px var(--bg)}
.lbl.home small{font:500 10.5px/1.2 var(--f-mono);letter-spacing:.08em;margin-top:4px;color:var(--label);opacity:1}
.lbl.home::after{position:absolute;left:0;top:50%;margin:-10px 0 0;width:20px;height:20px;border:2.5px solid currentColor;border-radius:50%;background:radial-gradient(currentColor 0 3px,transparent 3.5px);box-sizing:border-box}
.lbl.home.flip{transform:translate(calc(-100% + 10px),-50%);padding:0 30px 0 0;text-align:right}
.lbl.home.flip::after{left:auto;right:0}
/* numbered highways, shown with the whole map */
.lbl.route{display:none;transform:translate(-50%,-50%);font:600 10px/1 var(--f-mono);letter-spacing:.04em;color:var(--muted);background:var(--bg);border:1.5px solid currentColor;border-radius:2px;padding:3px 5px 2px;text-shadow:none}
.lbl.route.ca{border-radius:9px;padding:3px 6px 2px}
.lbl.route::after{display:none}
.reveal .lbl.route{display:block}
.lbl.hidden{opacity:0}

/* ---------- layout ---------- */
main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 32px 40px}
.col{max-width:640px}
.hero{display:flex;flex-direction:column;padding:clamp(72px,14vh,140px) 0 12px}
.name{align-self:flex-start}
.url{display:inline-block;font:500 15px/1 var(--f-mono);color:var(--muted);margin:0 0 14px;white-space:nowrap}
.url b{font-weight:500;color:var(--green)}
h1{margin:0;font:700 clamp(64px,13vw,132px)/.86 var(--f-display);letter-spacing:.01em;text-transform:uppercase}
h1 span{display:block;width:fit-content}
h1 .last{color:var(--green)}
.rule{border:0;border-top:3px double var(--rule);margin:26px 0 20px;width:100%}
.lede{margin:0;font-size:19px;color:var(--muted);max-width:36ch}

/* trail-sign blades: a board with a routed keyline, pointed at the far end */
.jump{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.blade{--b:var(--sign);--l:var(--sign-line);position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 40px 0 22px;
  font:700 19px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--sign-ink);background:var(--b);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%);transition:transform .15s,filter .15s}
.blade::before,.blade::after{content:"";position:absolute;z-index:-1}
.blade::before{inset:4px 5px 4px 4px;background:var(--l);clip-path:polygon(0 0,calc(100% - 18.5px) 0,100% 50%,calc(100% - 18.5px) 100%,0 100%)}
.blade::after{inset:5.5px 7px 5.5px 5.5px;background:var(--b);clip-path:polygon(0 0,calc(100% - 17px) 0,100% 50%,calc(100% - 17px) 100%,0 100%)}
.blade small{font:600 13px/1 var(--f-display);letter-spacing:.1em;opacity:.75}
.blade:hover{transform:translateX(4px);filter:brightness(1.08)}
.blade.alt{--b:var(--board2);--l:var(--green);color:var(--green)}

section{padding:22px 0}
/* section headers: the black band across the top of an NPS brochure panel */
.bandhead{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;padding:10px 14px 9px;background:var(--band);color:var(--band-ink);
  font:600 15px/1 var(--f-display);letter-spacing:.22em;text-transform:uppercase;border-radius:3px}
.bandhead span{font-weight:600;letter-spacing:.1em;opacity:.7}
.bandhead h2{margin:0;font:inherit;letter-spacing:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* folder tabs: the selected tab lifts out of the band and joins the cards below */
.bandhead.tabbed{padding:6px 14px 0 6px;align-items:flex-end}
.tabs{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs button{font:600 15px/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:var(--band-ink);background:none;border:0;
  padding:9px 14px 10px;border-radius:5px 5px 0 0;cursor:pointer;white-space:nowrap;opacity:.72}
.tabs button:hover{opacity:1}
.tabs button[aria-selected=true]{background:var(--board2);color:var(--ink);opacity:1;box-shadow:inset 0 3px 0 var(--orange)}
.bandhead.tabbed span{flex:none;padding:0 0 10px 10px}

ul.cards{list-style:none;margin:0;padding:0;display:grid;gap:12px}
/* project boards: the light board of the Contact blade, with the same routed keyline as the signs */
.card{position:relative;display:block;background:var(--board2);border-radius:4px;padding:22px 24px 18px;text-decoration:none;box-shadow:0 3px 0 var(--card-edge)}
.card::before{content:"";position:absolute;inset:6px;border:1.5px solid var(--card-line);border-radius:2px;pointer-events:none;transition:border-color .15s}
.card:hover::before{border-color:var(--orange)}
.card h3{font:700 28px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin:2px 0 10px}
.card p{margin:0;color:var(--ink);max-width:56ch}
/* badges, stamped rather than filled */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.tag{font:600 12px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--tag-ink);border:1.5px solid currentColor;padding:4px 7px 3px;border-radius:2px;opacity:.85}
.go{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:2px dotted var(--card-line)}
.go .host{font:13px/1 var(--f-mono);color:var(--muted);overflow-wrap:anywhere}
/* "Open": a small trail-sign blade */
.go b{flex:none;font:700 13px/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#FBF2E4;background:var(--orange);
  padding:7px 20px 6px 11px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);transition:transform .15s}
.card:hover .go b{transform:translateX(4px)}

/* contact: a trail-junction sign, one routed line per destination */
.sign{position:relative;background:var(--sign);color:var(--sign-ink);border-radius:6px;padding:10px 22px;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.sign::before{content:"";position:absolute;inset:6px;border:1.5px solid var(--sign-line);border-radius:3px;pointer-events:none}
.sign a{position:relative;display:grid;grid-template-columns:auto 1fr auto 24px;align-items:center;gap:14px;padding:16px 2px;text-decoration:none}
.sign a + a{border-top:1px solid rgba(238,233,216,.22)}
.sign b{font:700 22px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase}
.sign .lead{height:0;border-bottom:2px dotted rgba(238,233,216,.4);margin-top:8px}
.sign .handle{font:500 17px/1 var(--f-body)}
.sign .arr{font:700 22px/1 var(--f-display);color:#F0A060;transition:transform .15s}
.sign a:hover .arr{transform:translateX(4px)}
.sign a:hover b{color:#fff}

footer{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 32px 28px;font:12px/1.5 var(--f-mono);color:var(--muted)}
footer .col{border-top:3px double var(--rule);padding-top:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
/* light/dark follows the device; this is a near-invisible override for anyone who finds it */
.theme{flex:none;width:14px;height:14px;margin-top:2px;padding:0;border:1.5px solid var(--muted);border-radius:50%;cursor:pointer;opacity:.28;
  background:linear-gradient(90deg,var(--muted) 50%,transparent 50%);transition:opacity .2s}
.theme:hover,.theme:focus-visible{opacity:.9}

/* ---------- the whole map: keep scrolling past the end and the page lifts away ---------- */
.more{display:block;margin:26px auto 0;padding:6px 4px;background:none;border:0;cursor:pointer;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.75}
.more:hover{opacity:1;color:var(--green)}
.more i{display:block;height:2px;margin-top:8px;background:var(--orange);transform:scaleX(var(--pull,0));transform-origin:left;border-radius:1px}
main,footer{will-change:translate;translate:0 calc(var(--pull,0) * -90px);transition:translate .9s cubic-bezier(.65,0,.25,1),opacity .7s}
.pulling main,.pulling footer{transition:none}
.reveal{overflow:hidden;overscroll-behavior:none}
.reveal main,.reveal footer{translate:0 calc(-100vh - 80px);opacity:0;pointer-events:none}
.reveal .map{pointer-events:auto;touch-action:none}
.reveal .map .fade{opacity:0}
.moving #stack{transition:transform 1s cubic-bezier(.65,0,.25,1)}
.moving .pins{opacity:0;transition:opacity .2s}
/* the whole map gets the double-rule neatline */
.pins::before{content:"";position:absolute;inset:-8px;border:3px double var(--rule);opacity:0;transition:opacity .4s;pointer-events:none}
.reveal .pins::before{opacity:1}
.back{position:fixed;z-index:3;top:18px;left:18px;height:44px;font-size:16px;padding:0 34px 0 18px;border:0;cursor:pointer;opacity:0;pointer-events:none;translate:0 -12px;transition:opacity .4s,translate .4s,transform .15s}
.reveal .back{opacity:1;pointer-events:auto;translate:0 0;transition-delay:.5s}
.mapnote{position:fixed;z-index:3;right:18px;bottom:14px;font:500 10.5px/1.4 var(--f-mono);letter-spacing:.06em;color:var(--muted);opacity:0;pointer-events:none;transition:opacity .4s;text-align:right}
.reveal .mapnote{opacity:.8;transition-delay:.6s}

@media (max-width:640px){
  main,footer{padding-left:16px;padding-right:16px}
  .map .fade{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 30%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 100%)}
  .hero{padding:76px 0 8px}
  .lede{font-size:17px}
  .blade{height:48px;font-size:17px;padding:0 34px 0 18px}
  .card{padding:16px}
  .go .host{font-size:12px}
  .card h3{font-size:24px}
  .sign{padding:6px 16px}
  .sign a{grid-template-columns:1fr auto;gap:6px 12px}
  .sign .lead{display:none}
  .sign .handle{grid-column:1;grid-row:2;font-size:15px}
  .sign .arr{grid-column:2;grid-row:1 / span 2}
}
.lbl.link{pointer-events:auto;text-decoration:none;cursor:pointer}
.lbl.link:hover{color:var(--green)}
@media (max-width:699px){.reveal .lbl.home{font-size:15px;letter-spacing:.14em}}