:root{
  /* ── Backcountry Productions: granite & lichen (daylight) ──
     Deliberately NOT the Wilderness Untold night palette.        */
  --granite:    #E9EAE5;
  --granite-2:  #DFE1DA;
  --granite-3:  #D2D5CC;
  --slate:      #242C2A;
  --slate-2:    #59635F;
  --slate-3:    #8B948F;

  --lichen:     #74861F;
  --lichen-dk:  #5A6916;
  --alpine:     #24567C;

  /* ── Hinterlight Works' own colors, used ONLY on its tile ──
     lifted from hinterlightworks.com :root                     */
  --hl-ink:    #0B0B0D;   /* --ground   */
  --hl-lift:   #111114;   /* --ground-2 */
  --hl-brass:  #C6B9A8;   /* --brass    */
  --hl-word:   #F2F1EF;   /* --word     */
  --hl-dim:    #98948D;
  --hl-muted:  #7D7A74;   /* --muted    */

  /* ── Wilderness Untold's own colors, used ONLY on its tile ──
     lifted from wildernessuntold.com :root                     */
  --wu-pitch:  #0A0D09;   /* --pitch     */
  --wu-loam:   #101A0E;   /* --loam      */
  --wu-moss:   #3D6B3D;   /* --moss      */
  --wu-amber:  #A08050;   /* --amber     */
  --wu-ember:  #C9954A;   /* --ember     */
  --wu-bone:   #EBE5D6;   /* --bone      */

  --rule:   rgba(36,44,42,0.14);
  --rule-2: rgba(36,44,42,0.08);

  --display: 'Archivo', 'Helvetica Neue', sans-serif;
  --body:    'Public Sans', system-ui, sans-serif;
  --mono:    'DM Mono', ui-monospace, monospace;
  --wu-face: 'Bevan', Georgia, serif;

  /* tokens the theme switch drives */
  --ground-rgb: 233,234,229;
  --map-line:   #4E5A56;  --map-line-op: 0.40;
  --map-idx:    #2F3835;  --map-idx-op:  0.62;
  --tile-hover: #E4E6DF;
  --on-lichen:  #FBFCF6;

  --gutter: clamp(20px, 5vw, 72px);
  --measure: 1260px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0; background:var(--granite); color:var(--slate);
  font-family:var(--body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

.wrap{ max-width:var(--measure); margin:0 auto; padding-inline:var(--gutter); }

.dsp{
  font-family:var(--display);
  font-variation-settings:'wdth' 118;
  font-weight:800; text-transform:uppercase;
  line-height:0.88; letter-spacing:-0.008em;
}

.label{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.17em; text-transform:uppercase;
  color:var(--lichen-dk); margin:0;
}
.label--quiet{ color:var(--slate-3); }

a{ color:inherit; }
:focus-visible{ outline:2px solid var(--alpine); outline-offset:3px; border-radius:2px; }

/* ══════════ HEADER ══════════ */
.masthead{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:15px var(--gutter);
  background:rgba(var(--ground-rgb),0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule-2);
}
.masthead__mark{
  font-family:var(--display); font-variation-settings:'wdth' 112;
  font-weight:800; font-size:15px; letter-spacing:0.06em;
  text-transform:uppercase; text-decoration:none; line-height:1;
  display:flex; gap:8px;
}
.masthead__mark span{ color:var(--lichen); }
.masthead__nav{ display:flex; align-items:center; gap:24px; }
/* line-height:1 on both the links and the button, so an <a> and a <button>
   produce the same box and centre on the same axis. Browsers give buttons
   line-height:normal, which is what threw the label off. */
.masthead__nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--slate-2); text-decoration:none;
  line-height:1; padding:0;
  transition:color .2s ease;
}
.masthead__nav a:hover{ color:var(--slate); }
.burger{ display:none; }

@media (max-width:720px){
  .burger{
    display:flex; flex-direction:column; justify-content:center; align-items:flex-end;
    gap:5px; width:44px; height:44px; margin-right:-11px;
    padding:0; background:none; border:0; cursor:pointer;
  }
  /* three rules of different lengths — stacked contours, not a generic icon */
  .burger span{
    display:block; height:1.5px; background:var(--slate);
    transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .18s ease, width .3s ease;
  }
  .burger span:nth-child(1){ width:22px; }
  .burger span:nth-child(2){ width:15px; }
  .burger span:nth-child(3){ width:19px; }
  .burger[aria-expanded="true"] span:nth-child(1){ width:22px; transform:translateY(6.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .burger[aria-expanded="true"] span:nth-child(3){ width:22px; transform:translateY(-6.5px) rotate(-45deg); }

  .masthead__nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    padding:0 var(--gutter);
    background:var(--granite);
    border-bottom:1px solid var(--rule);
    max-height:0; overflow:hidden;
    transition:max-height .34s cubic-bezier(.4,0,.2,1);
  }
  .masthead__nav.is-open{ max-height:340px; }
  .masthead__nav a{
    padding:17px 0; font-size:12px;
    border-bottom:1px solid var(--rule-2);
  }
  .masthead__nav > :last-child{ border-bottom:0; }
}

@media (max-width:520px){
  .btn{ width:100%; justify-content:center; padding:15px 16px; font-size:11px; }
}

/* ══════════ HERO ══════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  padding-top:110px;
  padding-bottom:clamp(150px, 20vh, 210px);
}

/* ── SIGNATURE: Denali massif, USGS Denali A-3 quad ── */
.quad{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.quad svg{ width:100%; height:100%; display:block; }

.q-light path{
  fill:none; stroke:var(--map-line); stroke-width:0.9;
  opacity:var(--map-line-op); vector-effect:non-scaling-stroke;
}
.q-index path{
  fill:none; stroke:var(--map-idx); stroke-width:1.8;
  opacity:var(--map-idx-op); vector-effect:non-scaling-stroke;
}
.q-water path{
  fill:#BFD2DC; stroke:#5C7E90; stroke-width:1.2;
  opacity:0.85; vector-effect:non-scaling-stroke;
}

/* halo breaks the contour line behind the number, as a quad sheet does */
.q-clabel text{
  font-family:var(--mono); font-size:13px; fill:var(--map-idx); opacity:0.85;
  text-anchor:middle; dominant-baseline:central;
  paint-order:stroke; stroke:var(--granite); stroke-width:5px; stroke-linejoin:round;
}
.q-tri{ fill:none; stroke:var(--slate); stroke-width:1.7; vector-effect:non-scaling-stroke; }
.q-tri-c{ fill:var(--slate); }
.q-x{ fill:none; stroke:var(--slate); stroke-width:1.7; vector-effect:non-scaling-stroke; }
.q-name{
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em; fill:var(--slate);
  paint-order:stroke; stroke:var(--granite); stroke-width:4.5px; stroke-linejoin:round;
}
.q-elev{
  font-family:var(--mono); font-size:13.5px; font-weight:500; fill:var(--lichen-dk);
  paint-order:stroke; stroke:var(--granite); stroke-width:4.5px; stroke-linejoin:round;
}
.q-wname{
  font-family:var(--body); font-style:italic; font-size:15px; fill:var(--alpine);
  paint-order:stroke; stroke:var(--granite); stroke-width:4.5px; stroke-linejoin:round;
}
.q-welev{
  font-family:var(--mono); font-size:12px; fill:var(--alpine); opacity:0.9;
  paint-order:stroke; stroke:var(--granite); stroke-width:4.5px; stroke-linejoin:round;
}
@media (max-width:820px){
  .q-clabel{ display:none; }
  .q-name{ font-size:15px; }
  .q-elev{ font-size:17px; }
  .q-wname{ font-size:18px; }
}

/* scrim: opens up behind the headline, leaves the map readable elsewhere */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(78% 58% at 20% 44%,
    rgba(var(--ground-rgb),0.97) 0%, rgba(var(--ground-rgb),0.90) 34%,
    rgba(var(--ground-rgb),0.52) 62%, rgba(var(--ground-rgb),0) 88%);
}

@media (max-width:820px){
  .hero::after{
    background:linear-gradient(to bottom,
      rgba(var(--ground-rgb),0.58) 0%, rgba(var(--ground-rgb),0.80) 34%,
      rgba(var(--ground-rgb),0.95) 56%, rgba(var(--ground-rgb),0.98) 100%);
  }
  .hero{ padding-top:88px; padding-bottom:clamp(56px, 10vh, 96px); }
}

.hero__copy{ position:relative; z-index:3; }
.hero h1{ font-size:clamp(2.9rem, 10.4vw, 8rem); margin:16px 0 0; max-width:15ch; }
.hero h1 em{ font-style:normal; display:block; color:var(--lichen); }
.hero__sub{
  margin:28px 0 0; max-width:46ch; color:var(--slate-2);
  font-size:clamp(1rem, 1.55vw, 1.13rem);
}


/* map furniture — the credit block a real sheet carries */
/* The collar: a quad sheet doesn't print to the edge. Below the neatline sits
   the margin that carries the legend and credits — that's where the route lives. */
.collar{
  position:absolute; left:0; right:0; bottom:0; z-index:6;
  background:var(--granite);
  border-top:1px solid var(--rule);
  padding:38px var(--gutter) 20px;
}
/* marginalia: two title blocks printed inside the neatline at the foot of
   the sheet */
.marginalia{
  position:absolute; left:var(--gutter); right:var(--gutter);
  bottom:100%; margin-bottom:16px;
  display:flex; justify-content:flex-end; align-items:flex-end;
}
.sheet{
  padding:9px 13px;
  background:var(--granite);
  border:1px solid var(--rule-2);
  font-family:var(--mono); font-size:10px;
  letter-spacing:0.13em; text-transform:uppercase;
  color:var(--slate-3); line-height:1.8;
  white-space:nowrap;
}
.sheet{ text-align:right; }
.sheet b{ font-weight:400; color:var(--slate-2); }
@media (max-width:980px){ .marginalia{ display:none; } }

/* the route, plotted across the sheet */
.route{
  position:relative; height:1px;
  background-image:linear-gradient(to right, var(--lichen) 0 8px, transparent 8px 16px);
  background-size:16px 1px; background-repeat:repeat-x;
}
.route__stops{ position:absolute; inset:0; display:flex; justify-content:space-between; }
.stop{
  position:relative; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-decoration:none; padding:6px 4px;
}
.stop__dot{
  order:2; width:9px; height:9px; border-radius:50%;
  background:var(--granite); border:1.5px solid var(--lichen);
  transition:transform .25s ease, background .25s ease;
}
.stop__name{
  order:1; position:relative;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:0.11em; text-transform:uppercase;
  color:var(--slate); white-space:nowrap;
  transition:color .25s ease;
}
/* leader tick connecting each label to its dot on the line */
.stop__name::after{
  content:""; position:absolute; left:50%; top:calc(100% + 1px);
  width:1px; height:9px; background:var(--lichen-dk);
  transform:translateX(-50%); opacity:.55;
  transition:opacity .25s ease;
}
.stop:hover .stop__dot, .stop:focus-visible .stop__dot{ background:var(--lichen); transform:scale(1.35); }
.stop:hover .stop__name, .stop:focus-visible .stop__name{ color:var(--lichen-dk); }
.stop:hover .stop__name::after, .stop:focus-visible .stop__name::after{ opacity:1; }
@media (max-width:820px){ .collar{ display:none; } }

/* ══════════ SECTIONS ══════════ */
.section{ position:relative; padding-block:clamp(74px, 10vw, 132px); }
.section__head{ margin-bottom:clamp(34px, 4.5vw, 56px); }
.section__head h2{ font-size:clamp(1.75rem, 3.9vw, 2.85rem); margin:12px 0 0; }
.section__head p{ margin:14px 0 0; max-width:54ch; color:var(--slate-2); }

.trail{ position:relative; padding-left:clamp(26px, 4.5vw, 54px); }
.trail::before{
  content:""; position:absolute; left:4px; top:14px; bottom:14px; width:1px;
  background-image:linear-gradient(to bottom, var(--slate-3) 0 6px, transparent 6px 14px);
  background-size:1px 14px; opacity:.6;
}

.tile{
  position:relative; display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px, 4vw, 54px); align-items:start;
  padding:clamp(24px, 3vw, 36px) clamp(22px, 3vw, 36px);
  margin-bottom:14px;
  background:var(--granite-2);
  border:1px solid var(--rule-2);
  text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, background .3s ease;
}
.tile::before{
  content:""; position:absolute;
  left:calc(-1 * clamp(26px, 4.5vw, 54px)); top:calc(clamp(24px, 3vw, 36px) + 14px);
  width:9px; height:9px; margin-left:0.5px; border-radius:50%;
  background:var(--granite); border:1.5px solid var(--slate-3);
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.tile:hover, .tile:focus-visible{ transform:translateX(6px); border-color:var(--rule); background:var(--tile-hover); }
.tile:hover::before, .tile:focus-visible::before{ border-color:var(--lichen); background:var(--lichen); transform:scale(1.2); }

.tile__name{ font-size:clamp(1.7rem, 4.2vw, 2.7rem); margin:9px 0 0; transition:color .25s ease; }
.tile:hover .tile__name{ color:var(--lichen-dk); }
.tile__desc{ margin:14px 0 0; max-width:47ch; color:var(--slate-2); font-size:clamp(0.95rem, 1.35vw, 1.03rem); }
.tile__aside{
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  padding-top:10px; text-align:right;
}
.tile__status{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--slate-3); white-space:nowrap;
}
.tile__go{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.09em;
  color:var(--alpine); display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.tile__go svg{ transition:transform .25s ease; }
.tile:hover .tile__go svg{ transform:translateX(4px); }
/* the external arrow points out, so it should travel that way too */
.tile:hover .tile__go--ext svg, .tile:focus-visible .tile__go--ext svg{
  transform:translate(3px, -3px);
}

.vh{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Wilderness Untold keeps its own palette and its own typeface */
.tile--wu{ background:var(--wu-pitch); border-color:var(--wu-pitch); overflow:hidden; }
/* the crest's moon: moonlight falling off to amber, not a cool white */
.tile--wu::after{
  content:""; position:absolute; right:-42px; top:-42px;
  width:158px; height:158px; border-radius:50%;
  background:radial-gradient(circle at 46% 34%,
    rgba(212,201,168,0.20), rgba(160,128,80,0.07) 58%, transparent 72%);
  pointer-events:none;
}
.tile--wu:hover{ background:var(--wu-loam); border-color:var(--wu-loam); }
/* the site's eyebrow carries a moss diamond */
.tile--wu .label{ color:var(--wu-amber); display:flex; align-items:center; gap:.7rem; }
.tile--wu .label::before{
  content:""; width:6px; height:6px; flex-shrink:0;
  background:var(--wu-moss); transform:rotate(45deg);
}
.tile--wu .tile__desc{ color:rgba(235,229,214,.72); }
.tile--wu .tile__status{ color:rgba(212,201,168,.5); }
.tile--wu .tile__go{ color:var(--wu-ember); }
.tile--wu:hover::before{ border-color:var(--wu-ember); background:var(--wu-ember); }
/* matches .mark-type on the site: Bevan, uppercase, UNTOLD in ember */
.tile__name--wu{
  font-family:var(--wu-face); font-variation-settings:normal;
  font-weight:400; text-transform:uppercase; letter-spacing:0.02em;
  line-height:1.06; font-size:clamp(1.25rem, 2.9vw, 1.95rem);
  color:var(--wu-bone);
}
.tile__name--wu span{ color:var(--wu-ember); }
.tile--wu:hover .tile__name{ color:var(--wu-ember); }

/* Hinterlight Works keeps its own palette and IBM Plex Mono */
.tile--hl{ background:var(--hl-ink); border-color:var(--hl-ink); overflow:hidden; }
/* the site's camera corner brackets, reused as its tile device */
.tile--hl::after{
  content:""; position:absolute; inset:13px; pointer-events:none; opacity:.6;
  --b:linear-gradient(var(--hl-brass), var(--hl-brass));
  background:
    var(--b) 0 0        / 1px 19px no-repeat, var(--b) 0 0        / 19px 1px no-repeat,
    var(--b) 100% 0     / 1px 19px no-repeat, var(--b) 100% 0     / 19px 1px no-repeat,
    var(--b) 0 100%     / 1px 19px no-repeat, var(--b) 0 100%     / 19px 1px no-repeat,
    var(--b) 100% 100%  / 1px 19px no-repeat, var(--b) 100% 100%  / 19px 1px no-repeat;
  transition:opacity .3s ease;
}
.tile--hl:hover{ background:var(--hl-lift); border-color:var(--hl-lift); }
.tile--hl:hover::after{ opacity:1; }
.tile--hl .label{ color:var(--hl-brass); }
.tile--hl .tile__desc{ color:var(--hl-dim); }
.tile--hl .tile__status{ color:var(--hl-muted); }
.tile--hl .tile__go{ color:var(--hl-brass); }
.tile--hl:hover::before{ border-color:var(--hl-brass); background:var(--hl-brass); }
/* matches .hero-word on the site: Plex Mono 400, +0.01em */
.tile__name--hl{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-variation-settings:normal;
  font-weight:400; text-transform:none;
  letter-spacing:0.01em; line-height:1.05;
  font-size:clamp(1.35rem, 3.1vw, 2.05rem);
  color:var(--hl-word);
}
.tile--hl:hover .tile__name{ color:var(--hl-brass); }

@media (max-width:680px){
  .tile{ grid-template-columns:1fr; gap:16px; }
  .tile__aside{ align-items:flex-start; text-align:left; padding-top:0; }
}

/* ══════════ FIELD NOTE ══════════ */
.fieldnote{ background:var(--granite-3); border-block:1px solid var(--rule-2); }
.fieldnote__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(30px, 6vw, 80px); align-items:start;
}
.fieldnote p{ margin:0 0 18px; font-size:clamp(1rem, 1.45vw, 1.14rem); max-width:50ch; }
.fieldnote p:last-of-type{ margin-bottom:0; color:var(--slate-2); }

.specs{ display:grid; margin:0; padding:0; }
.specs__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:12px 0; border-bottom:1px solid var(--rule-2);
}
.specs__row:first-child{ border-top:1px solid var(--rule-2); }
.specs dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--slate-3);
}
.specs dd{ margin:0; font-family:var(--mono); font-size:12.5px; text-align:right; }
@media (max-width:760px){ .fieldnote__grid{ grid-template-columns:1fr; } }

/* ══════════ CONTACT ══════════ */
.contact h2{ font-size:clamp(2.2rem, 7vw, 4.9rem); margin:14px 0 0; max-width:17ch; }
.contact__actions{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; }
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 26px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.11em;
  text-transform:uppercase; text-decoration:none;
  border:1px solid var(--rule); color:var(--slate); background:transparent;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.btn:hover{ border-color:var(--slate-2); }
.btn--go{ background:var(--lichen); border-color:var(--lichen); color:var(--on-lichen); font-weight:500; }
.btn--go:hover{ background:var(--lichen-dk); border-color:var(--lichen-dk); }

/* ══════════ FOOTER ══════════ */
.foot{ border-top:1px solid var(--rule); padding-block:32px 42px; }
.foot__inner{
  display:flex; flex-wrap:wrap; gap:16px 30px;
  justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:0.09em; color:var(--slate-3);
}
.foot__inner a{ color:var(--slate-2); text-decoration:none; }
.foot__inner a:hover{ color:var(--slate); }
.foot__links{ display:flex; flex-wrap:wrap; gap:20px; }

/* ══════════ MOTION ══════════ */
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes inkfade{ from{ opacity:0; } }

.q-light path, .q-index path{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:draw 1.9s cubic-bezier(.35,.75,.3,1) both;
  animation-delay:calc(var(--i) * 9ms);
}
.q-water path, .q-clabel, .q-marks{ animation:inkfade 1.2s ease 1.5s both; }
.collar{ animation:fade 1.2s ease 1.5s both; }
.hero__copy > *{ animation:rise 1s cubic-bezier(.16,.8,.3,1) both; }
.hero__copy > *:nth-child(1){ animation-delay:.30s; }
.hero__copy > *:nth-child(2){ animation-delay:.42s; }
.hero__copy > *:nth-child(3){ animation-delay:.56s; }
.hero__copy > *:nth-child(4){ animation-delay:.70s; }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .75s ease, transform .75s cubic-bezier(.16,.8,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
  .q-light path, .q-index path{ stroke-dashoffset:0; }
  .reveal{ opacity:1; transform:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   DARK THEME — set 'theme' => 'dark' in private/config.php
   Variable NAMES are historical (granite = ground, slate = ink). Only the
   values change, so every rule below works untouched in either theme.
   The ground sits deliberately ABOVE both child brands in value: WU is
   #0A0D09 and Hinterlight #0B0B0D, so their tiles still read as darker
   insets rather than blending into the page.
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"]{
  --granite:    #161C1D;   /* graphite, faint green-grey cast */
  --granite-2:  #1D2426;
  --granite-3:  #121718;
  --slate:      #E7E9E3;   /* ink, inverted */
  --slate-2:    #9BA49E;
  --slate-3:    #6C7671;

  --lichen:     #A2B93C;   /* lifted; #74861F goes muddy on dark */
  --lichen-dk:  #C3D65E;   /* brighter, not darker, for hover */
  --alpine:     #6FA8D8;

  --rule:   rgba(231,233,227,0.16);
  --rule-2: rgba(231,233,227,0.09);

  --ground-rgb: 22,28,29;
  --map-line:   #96A09A;  --map-line-op: 0.22;
  --map-idx:    #CBD3CD;  --map-idx-op:  0.38;
  --tile-hover: #232B2C;
  --on-lichen:  #12170A;
}
/* the two unbranded tiles need an edge on dark, or they dissolve */
[data-theme="dark"] .tile{ border-color:var(--rule-2); }
[data-theme="dark"] .tile--wu,
[data-theme="dark"] .tile--hl{ border-color:transparent; }

/* ══════════════════════════════════════════════════════════════════════
   THEME TOGGLE
   Icon only. Drawn at 1.1px stroke to match the contour linework, so the
   control reads as part of the sheet rather than borrowed UI furniture.
   Which icon shows is decided in CSS from [data-theme] — nothing to update
   on load, nothing to flash. The accessible name lives in aria-label.
   ══════════════════════════════════════════════════════════════════════ */
.themetog{
  display:inline-flex; align-items:center; justify-content:center;
  position:relative;
  width:14px; height:14px;          /* square, so centring is exact */
  background:none; border:0; padding:0; margin:0;
  line-height:0;                     /* no text box to drag it off-centre */
  cursor:pointer; color:var(--slate-2);
  transition:color .2s ease;
}
/* hairline in the gap: the toggle is a control, the others are destinations */
.themetog::before{
  content:""; position:absolute; left:-12px; top:50%;
  width:1px; height:13px; transform:translateY(-50%);
  background:var(--rule);
}
.themetog:hover{ color:var(--slate); }
.themetog__ico{ display:flex; width:14px; height:14px; }
.themetog svg{ display:block; }

/* show the state you would switch TO */
[data-theme="dark"]  .ico-night{ display:none; }
[data-theme="light"] .ico-day{   display:none; }

@media (max-width:720px){
  /* 14px is far below a usable touch target — give it a full row */
  .themetog{
    width:100%; height:auto; justify-content:flex-start;
    padding:16px 0;
    border-bottom:1px solid var(--rule-2);
  }
  .themetog::before{ display:none; }   /* the divider is horizontal here */
}