/* ==========================================================================
   Burton Labs, prototype v3. Clean rebuild.

   Palette is sampled from the emblem artwork, which was itself derived from
   the shipped product art, so the page and the paintings share one world:
   deep ink ground, warm gold, teal volt, warm orange. Type is Space Grotesk
   for display, Fraunces for reading, JetBrains Mono for data.

   Legibility rule, learned the hard way: copy NEVER floats raw on a painting.
   It sits on a wash (headlines) or a glass panel (body), and the wash is
   directional so the artwork keeps its light.
   ========================================================================== */

:root {
  --ink:      #0B1220;
  --ink-2:    #0E1626;
  --paper:    #F2F4EE;
  --paper-60: rgba(242, 244, 238, 0.60);
  --paper-38: rgba(242, 244, 238, 0.38);
  --volt:     #5EEAD4;
  --gold:     #D9A441;
  --ember:    #FB923C;
  --silk:     #A5B4FC;

  --f-display: "Space Grotesk", system-ui, sans-serif;
  --f-body:    "Fraunces", Georgia, serif;
  --f-data:    "JetBrains Mono", ui-monospace, monospace;

  --wrap: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }

/* Skip link: clip technique, immune to transformed ancestors. */
.skip {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; width: auto; height: auto; margin: 0; overflow: visible;
  clip-path: none; top: 1rem; left: 1rem; z-index: 999;
  background: var(--volt); color: var(--ink);
  padding: 0.7rem 1.2rem; font-family: var(--f-data); font-size: 0.8rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}

/* ------------------------------------------------------------- masthead */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: linear-gradient(to bottom, rgba(11,18,32,0.88), rgba(11,18,32,0.62) 70%, transparent);
  backdrop-filter: blur(8px);
}
.masthead__in { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; }
.wordmark {
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid var(--volt); padding-bottom: 2px;
}
.nav { display: flex; gap: clamp(14px, 2.6vw, 30px); }
.nav a {
  font-family: var(--f-data); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none; color: var(--paper-60);
  padding-block: 6px;
}
.nav a:hover { color: var(--paper); }
.nav a[aria-current="page"] { color: var(--volt); border-bottom: 1px solid var(--volt); }

/* ------------------------------------------------------------- sections */
.act { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(88px, 12vh, 140px); }
.act > .wrap { min-width: 0; width: 100%; }
.act--solid { background: var(--ink); min-height: 0; }
.act--solid:nth-of-type(even) { background: var(--ink-2); }
.act--tight { padding-block: clamp(70px, 9vh, 110px); }

.bg { position: absolute; inset: 0; overflow: hidden; }
.bg img { width: 100%; height: 100%; object-fit: cover; }
.bg__wash { position: absolute; inset: 0; }
.bg__wash--left {
  background:
    linear-gradient(100deg, rgba(11,18,32,0.88) 0%, rgba(11,18,32,0.72) 30%,
      rgba(11,18,32,0.32) 56%, rgba(11,18,32,0.04) 78%, rgba(11,18,32,0) 100%),
    linear-gradient(to top, rgba(11,18,32,0.66) 0%, rgba(11,18,32,0) 38%);
}
.bg__wash--right {
  background:
    linear-gradient(260deg, rgba(11,18,32,0.88) 0%, rgba(11,18,32,0.72) 30%,
      rgba(11,18,32,0.32) 56%, rgba(11,18,32,0.04) 78%, rgba(11,18,32,0) 100%),
    linear-gradient(to top, rgba(11,18,32,0.66) 0%, rgba(11,18,32,0) 38%);
}
.wrap--right { display: flex; flex-direction: column; align-items: flex-end; text-align: left; }
.wrap--right .head, .wrap--right .panel { max-width: 560px; }

/* ----------------------------------------------------------------- hero */
#hero .bg img { object-position: 64% 40%; }
.hero__in { position: relative; max-width: 720px; }
.eyebrow {
  font-family: var(--f-data); font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--paper-60); margin: 0 0 18px;
}
.hero__mark {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(3rem, 8.4vw, 6.4rem); line-height: 0.96;
  letter-spacing: -0.015em; text-transform: uppercase; margin: 0;
  text-shadow: 0 2px 26px rgba(4, 8, 16, 0.66);
}
.hero__claim {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem); margin: 18px 0 0;
  text-shadow: 0 2px 18px rgba(4, 8, 16, 0.7);
}
.hero__lead {
  max-width: 34rem; color: var(--paper-60); margin: 16px 0 0;
  text-shadow: 0 1px 12px rgba(4, 8, 16, 0.8);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.btn {
  display: inline-block; padding: 14px 22px;
  font-family: var(--f-data); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  border: 1px solid rgba(242,244,238,0.5); color: var(--paper);
  background: rgba(11,18,32,0.35);
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.btn:hover { border-color: var(--volt); color: var(--volt); }
.btn--solid { background: var(--volt); color: var(--ink); border-color: var(--volt); }
.btn--solid:hover { background: #8CF3E3; color: var(--ink); }
.btn--sm { padding: 10px 14px; font-size: 0.66rem; }

.cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-data); font-size: 0.62rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--paper-38); margin: 0;
}
.cue::after {
  content: ""; display: block; width: 1px; height: 26px;
  background: var(--paper-38); margin: 8px auto 0;
  animation: cue 1.8s var(--ease) infinite;
}
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top } 60% { transform: scaleY(1); transform-origin: top } 61% { transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }

/* -------------------------------------------------------- section heads */
.head { max-width: 780px; }
.head--onart { position: relative; }
.rail {
  font-family: var(--f-data); font-size: 0.66rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--paper-38); margin: 0 0 14px;
}
.rail b { color: var(--volt); font-weight: 500; margin-left: 14px; }
.rail--volt b { color: #7DD3FC; }
.rail--gold b { color: var(--gold); }
.rail--silk b { color: var(--silk); }
.rail--word b { color: var(--ember); }
h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.7rem, 4.4vw, 3rem); line-height: 1.06;
  letter-spacing: -0.01em; margin: 0 0 14px;
}
.head--onart h2, .head--onart .rail { text-shadow: 0 2px 20px rgba(4,8,16,0.75); }
.lead { color: var(--paper-60); max-width: 40rem; margin: 0; }

/* ---------------------------------------------------------------- axis */
.axis { margin: clamp(40px, 6vh, 70px) 0 clamp(36px, 5vh, 60px); }
.axis__line { position: relative; height: 1px; background: rgba(242,244,238,0.2); margin: 44px 0 0; }
.axis__mark {
  position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%;
  background: var(--volt); transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(94,234,212,0.6);
}
.axis__mark b {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-data); font-weight: 500; font-size: 0.62rem;
  letter-spacing: 0.1em; color: var(--paper); white-space: nowrap;
}
.axis__mark i {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-family: var(--f-data); font-size: 0.56rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--volt);
  white-space: nowrap;
}
.axis__months { position: relative; height: 18px; margin-top: 78px; }
.axis__month {
  position: absolute; transform: translateX(-50%);
  font-family: var(--f-data); font-size: 0.58rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--paper-38);
}
.axis__month--first { transform: none; }
@media (max-width: 760px) {
  .axis__mark i { display: none; }
  .axis__mark b { font-size: 0.54rem; }
  .axis__mark:nth-child(2) b { transform: translateX(-20%); }
}

/* ---------------------------------------------------------------- cards */
.cards {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.card {
  border: 1px solid rgba(242,244,238,0.14);
  background: rgba(242,244,238,0.035);
  padding: 20px;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease), background 220ms var(--ease);
}
.card:hover { border-color: rgba(94,234,212,0.5); transform: translateY(-3px); background: rgba(242,244,238,0.06); }
.card img { border-radius: 12px; margin-bottom: 14px; }
.card h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; margin: 0 0 6px; }
.card p { font-size: 0.9rem; color: var(--paper-60); margin: 0 0 14px; min-height: 2.6em; }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-family: var(--f-data); font-size: 0.66rem; }
.card dt { color: var(--paper-38); text-transform: uppercase; letter-spacing: 0.1em; }
.card dd { margin: 0; color: var(--paper-60); }

/* --------------------------------------------------------------- panels */
.duo { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); max-width: 880px; margin-top: clamp(24px, 4vh, 44px); }
.panel {
  background: rgba(11, 16, 28, 0.78);
  backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid rgba(242,244,238,0.14);
  padding: clamp(20px, 3vw, 30px);
}
.panel header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.panel header img { border-radius: 10px; }
.panel h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin: 0; }
.panel p { color: var(--paper-60); margin: 0 0 16px; }
.panel dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 18px; font-family: var(--f-data); font-size: 0.68rem; }
.panel dt { color: var(--paper-38); text-transform: uppercase; letter-spacing: 0.1em; }
.panel dd { margin: 0; }
.panel__acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; }
.passes { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.passes li { border-left: 2px solid var(--silk); padding-left: 12px; font-size: 0.92rem; color: var(--paper-60); }
.passes b { display: block; font-family: var(--f-data); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silk); margin-bottom: 2px; }

.panel--words { display: flex; align-items: center; }
.words { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; gap: 12px; }
.words li { border-bottom: 1px solid rgba(242,244,238,0.1); padding-bottom: 10px; }
.words li:last-child { border-bottom: 0; padding-bottom: 0; }
.words i { font-style: italic; font-size: 1.25rem; display: block; }
.words span { font-family: var(--f-data); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); }

/* The travelling current across the tools section: a bright pulse on a
   smooth line, not a zigzag. */
.current {
  position: absolute; top: 74px; left: 0; right: 0; height: 2px; z-index: 1;
  background:
    linear-gradient(90deg, transparent 0%, rgba(125,211,252,0.0) 30%,
      rgba(125,211,252,0.9) 46%, #EAF7FF 50%, rgba(251,146,60,0.85) 54%,
      rgba(251,146,60,0.0) 70%, transparent 100%);
  background-size: 260% 100%;
  filter: drop-shadow(0 0 8px rgba(125,211,252,0.65));
  animation: current 5.2s linear infinite;
  pointer-events: none;
}
@keyframes current { from { background-position: 130% 0 } to { background-position: -130% 0 } }

/* ---------------------------------------------------------------- bench */
.bench-scroll { overflow-x: auto; margin-top: clamp(24px, 4vh, 40px); }
.bench { width: 100%; border-collapse: collapse; min-width: 720px; }
.bench thead th {
  text-align: left; font-family: var(--f-data); font-weight: 500;
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-38); padding: 0 16px 12px 0; border-bottom: 1px solid rgba(242,244,238,0.16);
}
.bench tbody th, .bench tbody td { padding: 15px 16px 15px 0; border-bottom: 1px solid rgba(242,244,238,0.08); vertical-align: top; }
.bench tbody th { text-align: left; font-family: var(--f-display); font-weight: 600; font-size: 0.98rem; white-space: nowrap; }
.bench tbody th a { text-decoration: none; border-bottom: 1px solid rgba(94,234,212,0.4); }
.bench tbody th a:hover { color: var(--volt); }
.bench td { color: var(--paper-60); font-size: 0.92rem; }
.bench td:nth-child(3) { font-family: var(--f-data); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--paper-38); white-space: nowrap; }
.tag {
  display: inline-block; font-family: var(--f-data); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid rgba(242,244,238,0.3); color: var(--paper-60);
  padding: 4px 9px; white-space: nowrap;
}
.tag.is-live { border-color: rgba(94,234,212,0.55); color: var(--volt); }

/* ----------------------------------------------------------------- foot */
.foot { border-top: 1px solid rgba(242,244,238,0.1); padding-block: 40px 26px; background: var(--ink-2); }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.foot__brand { font-family: var(--f-display); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 6px; }
.foot__meta { margin: 0; color: var(--paper-60); font-size: 0.9rem; }
.foot__meta a { text-decoration: none; border-bottom: 1px solid rgba(94,234,212,0.4); }
.foot nav { display: flex; gap: 22px; align-items: flex-start; }
.foot nav a { font-family: var(--f-data); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-60); text-decoration: none; }
.foot nav a:hover { color: var(--paper); }
.foot__legal { margin-top: 30px; color: var(--paper-38); font-size: 0.78rem; font-family: var(--f-data); }

/* ----------------------------------------------------------------- bird */
#bird {
  position: fixed; top: 0; left: 0; z-index: 3;
  width: 220px; height: 220px; pointer-events: none;
  /* Ten frames lifted from a locked-off video of the real character
     flapping in place, chroma-keyed off magenta, despilled, and re-canvased
     on the beak tip so the head holds still while only the wings move. */
  /* background-image, size and position are set per frame by app.js,
     which swaps between the cruise sheet and the banking-turn sheet. */
  background-repeat: no-repeat;
  /* Lift it off dark backdrops: a little brightness, a warm key light and a
     soft cool rim, never a silhouette. */
  filter: brightness(1.12) contrast(1.04) drop-shadow(0 0 18px rgba(94, 234, 212, 0.22)) drop-shadow(0 6px 18px rgba(4, 8, 16, 0.55));
  will-change: transform, opacity;
  visibility: hidden;
}
#bird.on { visibility: visible; }
@media (max-width: 760px) {
  /* size is driven by app.js */
}

/* ---------------------------------------------------------------- meter */
#meter {
  position: fixed; left: 18px; bottom: 18px; z-index: 5;
  display: flex; align-items: flex-end; gap: 9px;
  padding: 10px 13px;
  background: rgba(6, 14, 10, 0.72);
  backdrop-filter: blur(8px) saturate(1.3);
  border: 1px solid rgba(94, 234, 212, 0.34);
  opacity: 0; transform: translateY(14px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease),
              background 500ms var(--ease), border-color 500ms var(--ease), box-shadow 500ms var(--ease);
}
#meter.on { opacity: 1; transform: none; }
.reels { display: flex; gap: 2px; }
.reel {
  width: 0.92em; height: 1.35em; overflow: hidden;
  font-family: var(--f-data); font-size: 1.32rem; font-weight: 600;
  background: rgba(0,0,0,0.45); border: 1px solid rgba(242,244,238,0.14);
}
.reel span { display: block; height: 1.35em; line-height: 1.35em; text-align: center; color: var(--volt); will-change: transform; }
.meter__unit {
  font-family: var(--f-data); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-60); padding-bottom: 4px;
}
/* The caption sits above the instrument rather than inside it, so it was bare
   text over whatever the page happened to be scrolling past: on a phone it
   landed on top of a card's "Released" row and the two read as one smudge.
   Giving it the panel's own background turns it into a label tab on the
   instrument, and nothing shows through it any more. bottom:100% pins it to
   the panel's top edge whatever the type size does. */
.meter__cap {
  position: absolute; left: -1px; bottom: 100%;
  padding: 2px 8px;
  background: rgba(6, 14, 10, 0.72);
  backdrop-filter: blur(8px) saturate(1.3);
  border: 1px solid rgba(94, 234, 212, 0.34);
  border-bottom: 0;
  font-family: var(--f-data); font-size: 0.5rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--paper-38); white-space: nowrap;
}
@media (max-width: 760px) { #meter { left: 10px; bottom: 10px; } .reel { font-size: 1.05rem; } }

/* -------------------------------------------------------------- reveals */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

[data-boot] { opacity: 0; transform: translateY(18px); animation: boot 800ms var(--ease) forwards; animation-delay: calc(var(--b) * 130ms + 150ms); }
@keyframes boot { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-boot] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .cue::after { animation: none; }
  .current { animation: none; background-position: 50% 0; }
  #bird { display: none; }
  .card:hover { transform: none; }
}

/* Adjacent releases (17 and 21 May) share the same stretch of line, so the
   second mark's labels sit on a lower tier instead of colliding. */
.axis__mark--tier2 b { bottom: auto; top: 38px; }
.axis__mark--tier2 i { top: 56px; }
.axis__mark--tier2 { background: var(--gold); box-shadow: 0 0 12px rgba(217,164,65,0.6); }
.axis__mark--tier2 i { color: var(--gold); }

/* Izwi: anchor the crop left so the Frenchie lands in the open space to
   the right of the cards instead of behind them. */
#izwi .bg img { object-position: 12% 55%; }
#izwi .duo { max-width: 820px; }


/* =========================================================== MOBILE ===
   Mobile-first correction. The section artwork is 21:9 and was being used as
   a full-bleed `object-fit: cover` background, which on a portrait phone
   throws away roughly two thirds of every painting. On narrow screens the
   art stops being a backdrop and becomes a picture: full width, natural
   aspect, nothing cropped, with the copy underneath it on solid ground.
   ==================================================================== */
@media (max-width: 860px) {
  .act,
  .feat,
  .about-hero,
  .contact { display: block; min-height: 0; padding-block: 0 0; }

  .act > .bg,
  .feat > .bg,
  .contact > .bg {
    position: relative; inset: auto; width: 100%; overflow: visible;
  }
  .act > .bg img,
  .feat > .bg img,
  .contact > .bg img {
    position: relative; width: 100%; height: auto;
    object-fit: contain; object-position: center !important;
  }
  /* The wash would grey out a picture that is now meant to be looked at. */
  .bg__wash { display: none; }

  .act > .wrap,
  .feat > .wrap,
  .contact > .wrap {
    display: block; padding-block: clamp(28px, 6vw, 44px) clamp(40px, 9vw, 64px);
    margin-left: auto; margin-right: auto; text-align: left;
  }
  .feat--right .wrap { justify-content: flex-start; }
  .wrap--right { align-items: stretch; text-align: left; }

  /* Copy no longer sits on a painting, so drop the shadows and the glass. */
  .hero__mark, .hero__claim, .hero__lead,
  .head--onart h2, .head--onart .rail,
  .contact h1, .contact dd, .contact dt,
  .about-hero h1, .about-hero .lead { text-shadow: none; }

  .panel {
    background: rgba(242,244,238,0.04);
    backdrop-filter: none;
    max-width: none;
  }
  .duo { max-width: none; margin-top: 20px; }
  #izwi .duo { max-width: none; }

  /* Hero: the painting first, then the words. */
  #hero { padding-top: 74px; }
  #hero .hero__in { max-width: none; }
  #hero .hero__mark { font-size: clamp(2.6rem, 13vw, 4rem); }

  .cue { display: none; }

  /* Section rhythm without the 100svh stages. */
  .act--solid { padding-block: clamp(48px, 10vw, 76px); }
  .act, .feat { border-bottom: 1px solid rgba(242,244,238,0.08); }

  /* The bird keeps flying, just smaller and clear of the readout. */
  #meter { transform: scale(0.86); transform-origin: left bottom; }
}

/* Very small phones: give the type a little more room. */
@media (max-width: 400px) {
  .nav { gap: 10px; }
  .nav a { font-size: 0.62rem; letter-spacing: 0.1em; }
  .wordmark { font-size: 0.9rem; }
}

/* --------------------------------------------------- Izwi province map */
.panel--map { display: block; }
.map__title {
  font-family: var(--f-data); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--paper-38); font-weight: 500; margin: 0 0 14px;
}
.map__wrap { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 22px; align-items: start; }
.map { width: 100%; height: auto; overflow: visible; }
.map path {
  fill: rgba(242,244,238,0.10);
  stroke: rgba(242,244,238,0.30);
  stroke-width: 0.8;
  cursor: pointer;
  transition: fill 220ms var(--ease), stroke 220ms var(--ease);
}
.map path:hover { fill: rgba(253,186,116,0.30); }
.map path.is-on { fill: var(--ember); stroke: #FFD9AE; }
.map path:focus-visible { outline: none; stroke: var(--volt); stroke-width: 1.6; }
.map__lab {
  font-family: var(--f-data); font-size: 7px; letter-spacing: 0.06em;
  fill: rgba(242,244,238,0.55);
}
.map__prov {
  font-family: var(--f-display); font-weight: 600; font-size: 1.05rem;
  margin: 0 0 10px; color: var(--ember);
}
.map__words { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.map__words li { border-bottom: 1px solid rgba(242,244,238,0.10); padding-bottom: 9px; }
.map__words li:last-child { border-bottom: 0; padding-bottom: 0; }
.map__words i { font-style: italic; font-size: 1.05rem; display: block; }
.map__words span { font-size: 0.84rem; color: var(--paper-60); }
@media (max-width: 620px) {
  .map__wrap { grid-template-columns: 1fr; gap: 16px; }
  .map { max-width: 260px; margin-inline: auto; }
}

/* The Izwi block carries a map plus a word list, so it needs more room than
   the two-equal-column layout the other sections use. */
#izwi .duo {
  max-width: 1000px;
  grid-template-columns: minmax(280px, 0.85fr) minmax(340px, 1.15fr);
}
.map__wrap { grid-template-columns: minmax(170px, 240px) 1fr; gap: 26px; }
.map__prov { white-space: nowrap; }
.map__words span { line-height: 1.45; }
@media (max-width: 900px) {
  #izwi .duo { grid-template-columns: 1fr; }
}

/* Touch targets. Measured on the live site at 390px: nav links were 29px and
   buttons 39px tall. Apple and Google both put the comfortable minimum at
   44px, and this site is used mostly on phones, so the targets grow rather
   than the type. */
@media (max-width: 860px) {
  .nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 0;
  }
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn--sm { min-height: 44px; padding-block: 0; }
  .foot nav a { min-height: 44px; display: inline-flex; align-items: center; }
  /* The province map is tapped, so give each shape a comfortable hit area
     without changing how it looks. */
  .map path { stroke-width: 1.4; }
}

/* ================================================== MOBILE CORRECTIONS ===
   Found by measuring the live site on a phone, not by reading the CSS. Each
   block below fixes something that was genuinely unusable at 430px.
   ==================================================================== */

/* --- 1. Masthead ------------------------------------------------------
   At 430px the wordmark wrapped to two lines, which pushed its accent rule
   onto a different baseline from the current-page rule beside it, so the
   two underlines read as a misprint. The header also stood 94px tall,
   roughly a tenth of the screen, and being transparent with a blur it
   smeared the top of whatever artwork sat beneath it: the first thing a
   visitor sees is the hero painting with its top band out of focus, which
   reads as the picture being cut off rather than as a header.

   So on phones the masthead becomes a solid, short bar: nothing shows
   through it, nothing is smeared, and the wordmark keeps to one line with
   no rule of its own. The body is padded by the bar's height so no artwork
   ever starts underneath it. */
@media (max-width: 860px) {
  body { padding-top: 54px; }
  /* The hero used to reserve 74px of its own to clear a 94px transparent
     header. The body now reserves the bar's real height for every section, so
     the old allowance would just be an empty band above the painting. */
  #hero { padding-top: 0; }

  .masthead {
    background: var(--ink);
    backdrop-filter: none;
    border-bottom: 1px solid rgba(242,244,238,0.10);
  }
  .masthead__in { padding-block: 0; min-height: 54px; }

  .wordmark {
    white-space: nowrap;
    border-bottom: 0;
    padding-bottom: 0;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    /* The wordmark is a link too, so it gets a real target like the nav. */
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .nav { gap: 13px; }
  .nav a { font-size: 0.64rem; letter-spacing: 0.09em; }
  /* The current-page rule is now the only underline in the bar, so it can
     sit tight to the text instead of competing with the wordmark's. */
  .nav a[aria-current="page"] { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--volt); }
}

@media (max-width: 400px) {
  .wordmark { font-size: 0.78rem; letter-spacing: 0.06em; }
  .nav { gap: 10px; }
  .nav a { font-size: 0.58rem; letter-spacing: 0.06em; }
}

/* --- 2. The bench table ----------------------------------------------
   The table has a 720px minimum and sat in a horizontal scroller. On a
   430px screen that hides two of its four columns, including the status
   column the copy above explicitly tells the reader to look at, and a
   horizontal scroller inside a vertically scrolling page gives no hint it
   is there at all. A scroll hint would only advertise the problem.

   On phones the table stops being a table and becomes one card per
   product, so every column is visible without scrolling anywhere. The
   header row is dropped because each value now sits beside its own label,
   supplied by the ::before rules. Semantics are untouched: it is still a
   table to a screen reader. */
@media (max-width: 860px) {
  .bench-scroll { overflow-x: visible; }
  .bench { min-width: 0; display: block; }
  .bench thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bench tbody { display: block; }
  .bench tbody tr {
    display: block;
    padding: 16px 16px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(242,244,238,0.10);
    border-radius: 10px;
    background: rgba(242,244,238,0.02);
  }
  .bench tbody th, .bench tbody td { display: block; padding: 0; border-bottom: 0; }
  .bench tbody th { font-size: 1.02rem; white-space: normal; margin-bottom: 6px; }
  .bench tbody td { color: var(--paper-60); font-size: 0.92rem; }
  .bench tbody td:nth-of-type(1) { margin-bottom: 12px; }
  .bench tbody td:nth-of-type(2),
  .bench tbody td:nth-of-type(3) {
    font-family: var(--f-data); font-size: 0.68rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--paper-38);
    display: flex; gap: 10px; align-items: baseline; white-space: normal;
  }
  .bench tbody td:nth-of-type(2)::before { content: 'Runs on'; width: 74px; flex: none; color: var(--paper-38); opacity: 0.7; }
  .bench tbody td:nth-of-type(3)::before { content: 'Status';  width: 74px; flex: none; color: var(--paper-38); opacity: 0.7; }
  .bench tbody td:nth-of-type(3) { margin-top: 6px; }
}

/* --- 3. Izwi province map --------------------------------------------
   The map and its word list were a two-column grid at every width. At
   430px that left the words 112px wide, so every definition broke after
   two or three words and ran down the screen in a ribbon. The map and the
   words each want the full width of a phone, one under the other. */
@media (max-width: 860px) {
  .map__wrap { grid-template-columns: 1fr; gap: 18px; }
  .map { max-width: 340px; margin-inline: auto; }
  .map__words { grid-template-columns: 1fr; }
}

/* --- 4. Remaining touch targets --------------------------------------
   Measured live: the footer email link was 19px and the product links
   inside the bench cards 21px. Both are ordinary inline links, so they get
   height from padding rather than from a layout change. */
@media (max-width: 860px) {
  .foot__meta a,
  .bench tbody th a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* --- 5. Page-level styles outranking the mobile block -----------------
   Astro emits each page's own <style> into the head AFTER the link to this
   file. A page rule and a rule in here therefore carry the same specificity,
   0-1-0, and the page wins on source order. A media query adds no specificity,
   so the mobile corrections above lose every argument with a page style.

   The visible result, measured on the live products page at 430px: .feat kept
   the page's `display: flex`, so the artwork and the copy panel stayed side by
   side as flex items and the painting shrank to 161px, 37% of the screen. It
   was not cropped, it was simply tiny, which is the same complaint from the
   other end.

   The class is doubled to reach 0-2-0, which beats a page rule whatever the
   order and without assuming the element is a <section>. Only .feat and
   .p-hero are corrected here: the contact and about pages were measured at the
   same width and their artwork already fills 97% of the screen at its true
   aspect, so they are deliberately left alone. */
@media (max-width: 860px) {
  .feat.feat {
    display: block;
    align-items: normal;
    min-height: 0;
    padding-block: 0;
  }
  .p-hero.p-hero { min-height: 0; }

  .feat.feat > .bg {
    position: relative; inset: auto; width: 100%; overflow: visible;
  }
  .feat.feat > .bg img {
    position: relative; width: 100%; height: auto;
    object-fit: contain; object-position: center !important;
  }
  .feat.feat > .wrap {
    display: block;
    padding-block: clamp(28px, 6vw, 44px) clamp(40px, 9vw, 64px);
  }
  .feat.feat .panel { max-width: none; }
}

/* --- 6. Footer nav on the smallest phones -----------------------------
   Measured at 375px, an iPhone SE, which is the narrowest phone this has to
   work on and 55px narrower than the device the rest of this was checked on.
   The footer's five links sit in a flex row with a 22px gap and no wrap, so
   they ran to 380px against 360px of content width and the whole page scrolled
   sideways by 5px. Nothing looked broken, the page just drifted.

   Wrapping is the fix rather than shrinking the gap, because the gap is doing
   real work at larger sizes and a narrower one only moves the failure to the
   next device down. */
.foot nav { flex-wrap: wrap; row-gap: 4px; }

@media (max-width: 420px) {
  .foot nav { gap: 16px; row-gap: 4px; }
}

/* --- 7. Contact page on the smallest phones ---------------------------
   The contact page's own style makes the section a flex row with nowrap. Its
   two children, the artwork and the copy, are each full width, so the flex
   line is twice the screen and cannot shrink below its content. At 430px that
   happened to stay within tolerance; at 375px, an iPhone SE, the copy was
   pushed 23px off the right edge and the whole page scrolled sideways.

   The page renders as artwork above copy on a phone either way, so making the
   section a block changes nothing about how it looks and removes the overflow
   at every width. Its 120px top padding went with it, because the body already
   reserves the masthead's height and that padding was only opening a band of
   empty screen above the painting. The desktop layout is untouched. */
@media (max-width: 860px) {
  .contact.contact {
    display: block;
    min-height: 0;
    padding-block: 0 clamp(40px, 9vw, 64px);
  }
  .contact.contact > .bg { position: relative; inset: auto; width: 100%; overflow: visible; }
  .contact.contact > .bg img {
    position: relative; width: 100%; height: auto;
    object-fit: contain; object-position: center !important;
  }
  .contact.contact > .wrap {
    display: block; margin-inline: auto;
    padding-block: clamp(28px, 6vw, 44px) 0;
  }
}

/* --- 8. Contact links as real targets --------------------------------
   The three links on the contact page, both addresses and the web address,
   are the whole purpose of that page and each measured 26px tall: they take
   their height from a 20px type size and nothing else. They sit alone on their
   own line rather than inside a sentence, so the WCAG exemption for inline
   links does not cover them.

   inline-flex keeps the text and its underline exactly where they were and
   grows only the hit area. */
@media (max-width: 860px) {
  .contact dd a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}


/* --- 9. Release cards on a phone --------------------------------------
   The cards are built for a multi-column grid, where a stacked icon, title,
   tagline and data rows all sit in a narrow column and read well. On a phone
   there is only one column, so the card is the full width of the screen and
   that same stack leaves the icon alone on a line with roughly 300px of empty
   space beside it.

   Centring the contents was the other option and it would have been worse: the
   Released and Store rows are label-and-value pairs whose whole value is that
   the two columns line up, and centring body text hurts reading. So the icon
   moves up beside the title instead, which is where the eye expects it and
   which fills the space that was empty.

   The tagline's min-height is only there to keep several cards the same height
   in a grid. In one column it is holding open a blank line. */
@media (max-width: 860px) {
  .card {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "icon title"
      "icon tag"
      "meta meta";
    column-gap: 16px;
  }
  .card img { grid-area: icon; margin-bottom: 0; align-self: start; }
  .card h3 { grid-area: title; align-self: end; margin: 0; font-size: 1.08rem; }
  .card p  { grid-area: tag; align-self: start; margin: 4px 0 0; min-height: 0; }
  .card dl { grid-area: meta; margin-top: 16px; }
}


/* ------------------------------------------------------- legal documents ===
   Shared by /privacy and /terms.

   These rules used to live in a `<style is:global>` block inside privacy.astro.
   Astro only emits a page's style block on that page, so despite the name they
   were global to one page: /terms rendered with no .doc styling at all. It ran
   the full width of the window, its h2 headings fell back to the browser
   default and outsized its own h1, and it had no top padding, so the heading
   slid under the fixed masthead and was cut in half.

   A style shared by two pages belongs in the shared stylesheet. is:global on a
   page-scoped block is not the same thing and reads as though it is.
   ==================================================================== */
  .doc { padding-block: clamp(110px, 15vh, 170px) clamp(70px, 9vh, 110px); }
  .doc .wrap { max-width: 720px; }
  .doc h1 {
    font-family: var(--f-display); font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1;
    letter-spacing: -0.015em; margin: 0 0 18px;
  }
  .doc h2 {
    font-family: var(--f-display); font-weight: 600;
    font-size: 1.3rem; margin: 44px 0 10px;
  }
  .doc h3 {
    font-family: var(--f-display); font-weight: 600;
    font-size: 1.02rem; margin: 26px 0 6px; color: var(--volt);
  }
  .doc p { color: var(--paper-60); }
  .doc .lead { color: var(--paper); font-size: 1.1rem; }
  .doc ul { color: var(--paper-60); padding-left: 1.1rem; }
  .doc li { margin-bottom: 6px; }
  .doc a { border-bottom: 1px solid rgba(94, 234, 212, 0.45); text-decoration: none; }
  .doc a:hover { color: var(--volt); }
  .doc__note {
    margin-top: 48px; padding-top: 20px;
    border-top: 1px solid rgba(242, 244, 238, 0.12);
    font-family: var(--f-data); font-size: 0.74rem; line-height: 1.7;
    color: var(--paper-38);
  }