@font-face{
    font-family:'Kura Rounded';
    src:url('assets/fonts/kura-rounded.otf') format('opentype');
    font-weight:400;
    font-display:swap;
  }
  :root{
    --ground:#0A0A0B; --surface:#161618; --raised:#1F1F22;
    --ink:#F4F3EF; --muted:#A6A6AB; --faint:#6E6E74;
    --rule:#2B2B2F; --plaque:#3358E0; --plaque-soft:#1C2748;
    --verdigris:#15855A; --brass:#EFA935;
    --tomato:#E1481C; --violet:#8636CC; --bubblegum:#E85C97; --marigold:#F2A400;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -16px rgba(0,0,0,.9);
    color-scheme:dark;
  }
  :root[data-theme="light"]{
    --ground:#F5F5F1; --surface:#FFFFFF; --raised:#FFFFFF;
    --ink:#131315; --muted:#5A5A60; --faint:#8C8C92;
    --rule:#E1E0DA; --plaque-soft:#E4E9FB;
    --brass:#A8730A;
    --shadow:0 1px 2px rgba(20,27,34,.05), 0 8px 24px -14px rgba(20,27,34,.22);
    color-scheme:light;
  }

  body{ background:var(--area-bg, var(--ground)); color:var(--ink); font-family:Archivo, Helvetica Neue, Arial, sans-serif; -webkit-font-smoothing:antialiased; transition:background-color .45s ease; }
  /* Strip native control chrome so solid-colour buttons (route bar, cat
     cards, route-toggle) render as a flat fill, not a native gradient */
  button{ appearance:none !important; -webkit-appearance:none !important; background-image:none !important; }
  h1,h2,h3{ text-wrap:balance; }
  .num{ font-variant-numeric:tabular-nums; }
  .eyebrow{ font-family:"Azeret Mono", ui-monospace, monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
  .card-shadow{ box-shadow:var(--shadow); }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--plaque); outline-offset:2px; border-radius:3px;
  }

  /* Masthead: stays put on scroll, content scrolls underneath it */
  header{ position:sticky; top:0; z-index:30; background:var(--area-bg, var(--ground)); transition:background-color .45s ease; }

  /* Gazetteer entries: hairline separated, not stamped cards */
  .stop{ background:var(--surface); border:1px solid var(--rule); border-radius:16px; box-shadow:var(--shadow); }
  .stop.flash{ animation:flash 1.6s ease-out; }
  @keyframes flash{ 0%{ background:var(--plaque-soft);} 100%{ background:var(--surface); } }

  /* Category filter cards: colour, icon and name, like a small topic tile.
     Sized and spaced to sit full-width alongside the area chips, not boxed. */
  .cat-card{
    display:flex; flex-direction:column; justify-content:space-between; gap:12px;
    flex:0 0 auto; width:142px;
    padding:13px 14px 14px; border-radius:18px; text-align:left;
    transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
  }
  .cat-card__row{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
  .cat-card__icon{
    width:32px; height:32px; border-radius:10px; background:rgba(255,255,255,.82);
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .cat-card__count{ font-family:"Azeret Mono", ui-monospace, monospace; font-size:12px; opacity:.7; }
  .cat-card__name{ font-weight:700; font-size:14px; line-height:1.2; letter-spacing:normal; text-transform:none; }
  .cat-card:hover{ transform:translateY(-2px); filter:brightness(1.06); }
  .cat-card:active{ transform:translateY(0); filter:brightness(.95); }
  .cat-card[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--ground), 0 0 0 4px #fff; transform:translateY(-2px); }
  #chips{ -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
  #chips::-webkit-scrollbar{ display:none; }
  @media (prefers-reduced-motion: reduce){
    .cat-card{ transition:none; }
    .cat-card:hover, .cat-card[aria-pressed="true"]{ transform:none; }
  }

  /* Area chips: bold, oversized, 3 independently drifting rows on small screens */
  .area-rows{ display:flex; flex-direction:column; gap:12px; }
  .area-row-wrap{ width:100%; overflow:hidden; padding:6px 0; }
  .area-row-track{ display:flex; flex-wrap:nowrap; width:max-content; }
  .area-row{ display:flex; flex-wrap:nowrap; gap:12px; margin-right:12px; flex:0 0 auto; }
  @keyframes areaMarqueeLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @keyframes areaMarqueeRight{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
  .area-row-track.marquee-left{ animation:areaMarqueeLeft 55s linear infinite; }
  .area-row-track.marquee-right{ animation:areaMarqueeRight 55s linear infinite; }
  .area-row-wrap:hover .area-row-track,
  .area-row-wrap:active .area-row-track{ animation-play-state:paused; }
  @media (min-width:640px){
    .area-rows{ flex-direction:row; flex-wrap:wrap; }
    .area-row-wrap{ width:auto; overflow:visible; display:contents; }
    .area-row-track{ width:auto; display:contents; animation:none !important; }
    .area-row{ display:contents; margin-right:0; }
    .area-row-dup{ display:none !important; }
  }
  @media (prefers-reduced-motion: reduce){
    .area-row-track{ animation:none !important; }
  }
  .area-chip{
    font-family:Archivo, Helvetica Neue, Arial, sans-serif;
    font-weight:700;
    font-size:18px;
    line-height:1;
    white-space:nowrap;
    padding:20px 30px;
    border-radius:999px;
    transition:transform .15s ease, filter .15s ease;
  }
  .area-chip.area-chip--on-match{ box-shadow:0 0 0 1.25px #fff; }
  .area-chip:hover{ transform:translateY(-2px); filter:brightness(1.08); }
  .area-chip:active{ transform:translateY(0); filter:brightness(.94); }
  @media (prefers-reduced-motion: reduce){
    .area-chip{ transition:none; }
    .area-chip:hover{ transform:none; }
  }

  /* Area hero: shown when an area page is active */
  #areaHero{ color:var(--area-ink, var(--ink)); }
  #areaHero #areaHeroTitle{ font-size:clamp(52px, 11vw, 140px); }

  /* Your route: branded orange background, with the panel's own text,
     rules and tiles re-tuned to read against it rather than the theme */
  #routePanel{
    background:var(--marigold); border-color:var(--marigold); color:#171717;
    --ink:#171717; --muted:rgba(23,23,23,.7); --faint:rgba(23,23,23,.5);
    --rule:rgba(23,23,23,.2); --surface:rgba(255,255,255,.4);
  }

  /* Route sheet on small screens */
  #routePanel{ transition:transform .34s cubic-bezier(.32,.72,0,1); }
  @media (max-width:1023px){
    #routePanel{
      position:fixed; left:0; right:0; bottom:0; z-index:60;
      max-height:84vh; transform:translateY(103%);
      border-radius:22px 22px 0 0; border-bottom:0;
      box-shadow:0 -20px 50px -12px rgba(0,0,0,.35);
    }
    html.route-open #routePanel{ transform:translateY(0); }
    #scrim{ display:none; }
    html.route-open #scrim{ display:block; }
  }
  @media (min-width:1024px){
    #scrim, #routeBar, #sheetClose{ display:none !important; }
    /* Sit just below the fixed header, not underneath it */
    #routePanel{ top:calc(var(--header-h, 84px) + 20px); }
  }
  @media (prefers-reduced-motion: reduce){
    #routePanel{ transition:none; }
    .stop.flash{ animation:none; }
  }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:10px; }