/* ==========================================================================
   Youth's Corner — Components & Motifs
   The reusable vocabulary every page draws from. Pages vary their LAYOUT
   freely; they do not invent new motifs. Depends on tokens.css + base.css.
   ========================================================================== */

/* ==========================================================================
   1. KICKER — numbered section label
   Usage: <p class="kicker"><i></i>What We Do<b>/ 01</b></p>
   ========================================================================== */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:var(--t-kicker);font-weight:600;
  letter-spacing:var(--track-kicker);text-transform:uppercase;
  color:var(--forest-3);margin-bottom:16px;
}
.kicker i{width:22px;height:1px;background:var(--hivis-2);font-style:normal;flex-shrink:0;}
/* The numbered half of a kicker. Coral reads 2.63:1 on cream, so the light
   default is the darkened variant; on forest the bright original is right and
   is restored below. */
.kicker b{color:var(--coral-ink);font-weight:600;}
.ground-dark .kicker,.kicker--on-dark{color:var(--hivis);}
.ground-dark .kicker b,.kicker--on-dark b{color:var(--coral);}
.ground-dark .kicker i,.kicker--on-dark i{background:var(--hivis);}

/* ==========================================================================
   2. CORNER BRACKETS — the framing mark
   .brk = top-left + bottom-right. .brk--full = all four corners.
   ========================================================================== */
.brk{position:relative;}
.brk::before,.brk::after{
  content:"";position:absolute;width:16px;height:16px;
  border:2px solid var(--hivis-2);pointer-events:none;
}
.brk::before{top:-7px;left:-7px;border-right:0;border-bottom:0;}
.brk::after{bottom:-7px;right:-7px;border-left:0;border-top:0;}
.brk--lg::before,.brk--lg::after{width:26px;height:26px;}
.brk--coral::before,.brk--coral::after{border-color:var(--coral);}
.brk--teal::before,.brk--teal::after{border-color:var(--teal);}
.brk--light::before,.brk--light::after{border-color:rgba(255,255,255,.5);}

/* Four-corner variant, for hero blocks and feature panels */
.brk--full{position:relative;}
.brk--full > .brk-c{position:absolute;width:18px;height:18px;border:2px solid var(--hivis-2);pointer-events:none;}
.brk--full > .brk-c.tl{top:-7px;left:-7px;border-right:0;border-bottom:0;}
.brk--full > .brk-c.tr{top:-7px;right:-7px;border-left:0;border-bottom:0;}
.brk--full > .brk-c.bl{bottom:-7px;left:-7px;border-right:0;border-top:0;}
.brk--full > .brk-c.br{bottom:-7px;right:-7px;border-left:0;border-top:0;}

/* ==========================================================================
   3. BUTTONS — 3D pressed pills
   The solid offset shadow compresses on hover, so the button reads as being
   physically pushed down rather than lifted.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-body);font-weight:700;font-size:.9rem;
  padding:15px 30px;border-radius:var(--pill);border:none;
  cursor:pointer;text-align:center;
  transition:transform var(--dur-fast),background var(--dur-fast),
             color var(--dur-fast),border-color var(--dur-fast),
             box-shadow var(--dur-fast);
}
.btn svg{transition:transform var(--dur-fast);flex-shrink:0;}
.btn:hover svg{transform:translateX(4px);}
.btn[disabled],.btn.is-busy{opacity:.55;pointer-events:none;}

/* Primary — the one obvious action on a page */
.btn--hivis{background:var(--hivis);color:var(--forest);box-shadow:var(--sh-press);}
.btn--hivis:hover{transform:translateY(3px);box-shadow:var(--sh-press-in);}
.btn--hivis:active{transform:translateY(6px);box-shadow:0 0 0 var(--forest);}

/* Primary alternate, for dark grounds where hivis is already in play */
.btn--coral{background:var(--coral);color:var(--forest);box-shadow:0 6px 0 #B23A22;}
.btn--coral:hover{transform:translateY(3px);box-shadow:0 3px 0 #B23A22;}
.btn--coral:active{transform:translateY(6px);box-shadow:0 0 0 #B23A22;}

/* Secondary — deliberately quieter, no offset shadow */
.btn--light{border:1.5px solid rgba(255,255,255,.45);color:#fff;background:transparent;}
.btn--light:hover{background:#fff;color:var(--forest);}
.btn--ghost{border:1.5px solid var(--line-2);padding:12px 24px;font-size:.85rem;background:transparent;color:var(--ink);}
.btn--ghost:hover{background:var(--forest);color:var(--cream);border-color:var(--forest);}
.btn--text{
  font-weight:700;font-size:.85rem;color:var(--forest-3);padding:0;background:none;
  display:inline-flex;align-items:center;gap:7px;
}
.btn--text:hover svg{transform:translateX(4px);}
.ground-dark .btn--text{color:var(--hivis);}
.btn--sm{padding:10px 20px;font-size:.82rem;}
.btn--block{display:flex;width:100%;}

/* ==========================================================================
   4. GLASS — true glassmorphism
   Only for elements sitting over a dark ground or a photo. Never over cream.
   BUDGET: no more than ~5 simultaneously visible glass surfaces per viewport.
   Blur is dropped below 860px, where it is most expensive and least visible.
   ========================================================================== */
.glass{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
}
.glass--soft{
  background:var(--glass-bg-soft);
  backdrop-filter:var(--glass-blur-soft);
  -webkit-backdrop-filter:var(--glass-blur-soft);
  border:1px solid rgba(255,255,255,.22);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.glass--soft{background:rgba(14,31,23,.72);}
}
@media (max-width:860px){
  .glass,.glass--soft{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(14,31,23,.62);
  }
}

/* ==========================================================================
   5. MESH BLOBS — section-scoped, never global
   Placed only inside light/tinted sections so they bleed through the gaps
   between cards. Transform-only animation; will-change is applied by JS
   only while the section is on screen, then removed.
   ========================================================================== */
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:var(--z-blob);}
.blob{
  position:absolute;border-radius:50%;
  width:var(--s,300px);height:var(--s,300px);
  left:var(--x,auto);top:var(--y,auto);right:var(--rx,auto);bottom:var(--by,auto);
  filter:blur(70px);opacity:.30;
  animation:blob-drift 17s ease-in-out infinite alternate;
  animation-play-state:paused;
  animation-delay:var(--d,0s);
}
.blobs.awake .blob{animation-play-state:running;will-change:transform;}
.blob--coral{background:var(--coral);}
.blob--teal{background:var(--teal);}
.blob--hivis{background:var(--hivis);}
.blob--forest{background:var(--forest-3);opacity:.20;}
@keyframes blob-drift{
  0%{transform:translate3d(0,0,0) scale(1);}
  100%{transform:translate3d(34px,-26px,0) scale(1.16);}
}
@media (prefers-reduced-motion:reduce){
  .blobs.awake .blob{animation-play-state:paused;will-change:auto;}
}
/* Blur this large is a real cost on phones for very little visual payoff. */
@media (max-width:860px){.blobs{display:none;}}

/* ==========================================================================
   6. WAVE DIVIDER
   Sits at the bottom of a dark section, filled with the colour of the
   section BELOW it. Set that via --wave-fill on the .wave element.
   ========================================================================== */
.wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:var(--z-wave);}
.wave svg{width:100%;height:96px;display:block;}
.wave path{fill:var(--wave-fill,var(--cream));}
.wave--top{bottom:auto;top:-1px;transform:scaleY(-1);}
.wave--short svg{height:62px;}
@media (max-width:860px){.wave svg{height:56px;}}

/* ==========================================================================
   7. KENYA FLAG RULE
   ========================================================================== */
.flag-rule{
  height:4px;
  background:repeating-linear-gradient(90deg,
    var(--kenya-red) 0 22px,#fff 22px 26px,
    var(--kenya-green) 26px 48px,#fff 48px 52px);
}

/* ==========================================================================
   8. PHOTO SLOTS
   Placeholders until real imagery lands; .ph img fills them edge to edge.
   ========================================================================== */
.ph{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--cream-2),#e9f2c8 60%,var(--cream-2));
  border:1.5px dashed rgba(18,16,12,.26);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* .62: the placeholder's gradient peaks at #E9F2C8, where .55 measured
     4.01:1. This text describes what photograph belongs here, so it is
     content rather than decoration. */
  text-align:center;padding:14px;color:rgba(18,16,12,.62);
  font-size:.74rem;line-height:1.4;
}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.ph .d{font-family:var(--f-mono);font-weight:600;font-size:.82rem;color:rgba(18,16,12,.7);margin-bottom:3px;}
.ph--dark{
  background:linear-gradient(150deg,rgba(255,107,74,.12),rgba(23,163,152,.14) 55%,rgba(207,227,63,.1));
  border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.68);
}
.ph--dark .d{color:rgba(255,255,255,.85);}
.ph--plain{border:none;}

/* Full-bleed slots — hero backgrounds and the wide bands.
   .ph centres its label, which is right for a framed slot but wrong for one
   that covers the whole section: the label lands in the same vertical band as
   the headline and reads as broken alignment rather than as a note about a
   missing photograph. Anchoring it to the bottom edge clears the copy on every
   hero, whichever side the copy is weighted to, and the chip makes it legible
   over any part of the gradient underneath. */
.ph--bleed{justify-content:flex-end;padding-bottom:22px;}
.ph--bleed .d,.ph--bleed span{
  background:rgba(8,18,9,.55);
  padding:3px 10px;border-radius:var(--pill);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.ph--bleed .d{margin-bottom:5px;}
@media (max-width:860px){
  /* On a phone the hero is short and the copy reaches the bottom edge, so the
     note would collide again. It has done its job by then — it is a build-time
     cue, not content. */
  .ph--bleed .d,.ph--bleed span{display:none;}
}

/* ==========================================================================
   9. CHIPS, TAGS & BADGES
   ========================================================================== */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:.72rem;
  padding:7px 14px;border-radius:var(--pill);
  transition:transform var(--dur-fast),background var(--dur-fast);
}
.chip--glass{
  color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.24);
}
.chip--glass:hover{transform:translateY(-2px);background:rgba(255,255,255,.14);}
.chip--glass b{color:var(--hivis);font-weight:600;}
.chip--solid{background:var(--cream-2);color:var(--ink);border:1px solid var(--line);}
.chip--hivis{background:var(--hivis);color:var(--forest);font-weight:600;}
/* Forest, not white: white on coral is 2.82:1 and on teal 3.12:1, both well
   under the 4.5 these small labels need. Forest gives 6.07 and 5.48 while
   keeping the accent colour that identifies the card. */
.chip--coral{background:var(--coral);color:var(--forest);font-weight:600;}
.chip--teal{background:var(--teal);color:var(--forest);font-weight:600;}

.tag-cat{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--hivis);color:var(--forest);
  font-family:var(--f-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--pill);
}
.tag-cat--coral{background:var(--coral);color:var(--forest);}
.tag-cat--teal{background:var(--teal);color:var(--forest);}

/* Live pill — the pulsing status badge used in heroes */
.pill-live{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:var(--t-kicker);font-weight:600;
  letter-spacing:var(--track-kicker);text-transform:uppercase;
  color:var(--hivis);padding:8px 16px;border-radius:var(--pill);
  background:rgba(207,227,63,.1);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  border:1px solid rgba(207,227,63,.4);
}
.pill-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ==========================================================================
   10. CARDS — shared shell + colour-coded hover glow
   Each card carries its own accent via a modifier; the hover glow matches it.
   ========================================================================== */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  position:relative;overflow:hidden;
  transition:transform var(--dur),box-shadow var(--dur),border-color var(--dur);
}
.card:hover{transform:translateY(-7px);box-shadow:var(--sh-card);}
.card:hover .ph img{transform:scale(1.06);}
.card--forest:hover{box-shadow:0 22px 44px var(--glow-forest);}
.card--coral:hover{box-shadow:0 22px 44px var(--glow-coral);}
.card--teal:hover{box-shadow:0 22px 44px var(--glow-teal);}
.card--hivis:hover{box-shadow:0 22px 44px var(--glow-hivis);}

/* Accent rule that wipes in across the card top on hover */
.card--rule::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--accent,var(--hivis));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.card--rule:hover::before{transform:scaleX(1);}
.card--forest{--accent:var(--forest-3);}
.card--coral{--accent:var(--coral);}
.card--teal{--accent:var(--teal);}
.card--hivis{--accent:var(--hivis-2);}

.card-body{padding:24px 22px 26px;}
.card-n{font-family:var(--f-mono);font-size:.7rem;color:var(--muted-2);position:absolute;top:26px;right:26px;}
.card-ic{
  width:46px;height:46px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;color:#fff;background:var(--accent,var(--forest-3));
}
.card--hivis .card-ic{color:var(--forest);}

/* ==========================================================================
   11. TICKER
   ========================================================================== */
.ticker{background:var(--ink);padding:13px 0;overflow:hidden;}
.ticker-track{display:flex;width:max-content;animation:ticker-slide 30s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused;}
.ticker-track a{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:.76rem;color:#fff;
  border:1px solid rgba(255,255,255,.22);padding:8px 18px;
  border-radius:var(--pill);margin-right:13px;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.ticker-track a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hivis);flex-shrink:0;}
.ticker-track a:hover{background:var(--hivis);color:var(--ink);border-color:var(--hivis);}
@keyframes ticker-slide{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}

/* Logo carousel, same motion primitive */
.carousel{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.carousel-track{display:flex;gap:20px;width:max-content;animation:ticker-slide 26s linear infinite;}
.carousel:hover .carousel-track{animation-play-state:paused;}
.carousel-track .ph{width:215px;height:106px;border-radius:var(--r-sm);flex-shrink:0;background:#fff;}

/* ==========================================================================
   12. SITE HEADER
   The single largest glass surface on any page — it is counted against the
   glass budget, so pages keep other glass panels away from the top edge.
   ========================================================================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-header);transition:background .35s,box-shadow .35s;}
.site-header.on{
  background:rgba(14,31,23,.68);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 2px 24px rgba(0,0,0,.24);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px var(--gutter);max-width:var(--wrap);margin:0 auto;transition:padding .35s;}
.site-header.on .site-nav{padding:13px var(--gutter);}

.logo{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.logo-slot{
  width:42px;height:42px;border-radius:11px;
  border:1px dashed rgba(255,255,255,.45);background:rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:.5rem;color:rgba(255,255,255,.6);
  overflow:hidden;position:relative;flex-shrink:0;
}
.logo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.logo-slot--sm{width:34px;height:34px;border-radius:9px;}
.logo-txt{font-family:var(--f-display);font-weight:800;font-size:1.15rem;color:#fff;letter-spacing:-.02em;}
.logo-txt span{color:var(--hivis);}

.nav-links{display:flex;gap:4px;font-size:.9rem;font-weight:600;}
.nav-links a{position:relative;padding:9px 15px;border-radius:var(--pill);
  color:rgba(255,255,255,.85);transition:color var(--dur-fast),background var(--dur-fast);}
.nav-links a:hover{background:rgba(255,255,255,.09);color:#fff;}
.nav-links a[aria-current="page"]{color:var(--hivis);}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:2px;
  width:5px;height:5px;border-radius:50%;background:var(--hivis);
}
.nav-right{display:flex;align-items:center;gap:12px;}
.nav-cta{background:var(--hivis);color:var(--forest);padding:11px 24px;font-weight:700;
  font-size:.85rem;border-radius:var(--pill);transition:background var(--dur-fast);}
.nav-cta:hover{background:#fff;}

/* The Get Involved action appears as a pill on desktop and as an ordinary
   menu item inside the mobile drawer, so it is never the only way out. */
.nav-links-cta-mobile{display:none;}

.burger{display:none;background:none;border:none;padding:6px;cursor:pointer;}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:transform .3s,opacity .3s;}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.x span:nth-child(2){opacity:0;}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Sentinels: zero-height markers the header/back-to-top observers watch, so
   those state changes cost no scroll handler at all. */
.scroll-sentinel{position:absolute;top:40px;left:0;width:1px;height:1px;pointer-events:none;}
.scroll-sentinel--far{top:600px;}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer{background:var(--ink);color:#fff;padding:70px 0 28px;}
.f-top{display:grid;grid-template-columns:1.15fr .8fr .85fr 1fr;gap:40px;
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1);}
.f-logo{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:1.2rem;}
.f-tag{margin-top:16px;opacity:.6;font-size:var(--t-sm);max-width:30ch;}
.f-soc{display:flex;gap:10px;margin-top:20px;}
.f-soc a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.24);
  display:flex;align-items:center;justify-content:center;font-size:.78rem;
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);}
.f-soc a:hover{background:var(--hivis);color:var(--ink);border-color:var(--hivis);}
.site-footer h2{font-family:var(--f-display);font-weight:800;font-size:.98rem;margin-bottom:18px;}
.f-col a{display:block;font-size:var(--t-sm);opacity:.75;margin-bottom:11px;transition:opacity var(--dur-fast),color var(--dur-fast);}
.f-col a:hover{opacity:1;color:var(--hivis);}
.c-list li{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px;font-size:var(--t-sm);opacity:.8;}
.c-list svg{flex-shrink:0;margin-top:3px;color:var(--hivis);}
.news{display:flex;border-radius:var(--pill);overflow:hidden;border:1px solid rgba(255,255,255,.24);margin-top:14px;}
.news input{flex:1;min-width:0;background:transparent;border:none;padding:12px 16px;color:#fff;font-size:.85rem;}
.news input::placeholder{color:rgba(255,255,255,.4);}
.news button{background:var(--hivis);color:var(--ink);border:none;padding:12px 20px;font-weight:700;font-size:.78rem;cursor:pointer;}

/* --- Attribution strip -----------------------------------------------------
   Rendered from the shared footer partial only, never from CMS content.
   Deliberately quiet: small, low-opacity, regular weight, no accent colour,
   no hover emphasis. It should read as a credit line, not a call-out. ------- */
.f-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:24px;font-family:var(--f-mono);font-size:var(--t-meta);
  font-weight:400;opacity:.55;}
.f-bot a{color:inherit;font-weight:400;text-decoration:none;}
.f-bot a:hover{color:inherit;opacity:1;}
.f-legal{display:flex;gap:18px;flex-wrap:wrap;}

/* ==========================================================================
   14. SCROLL PROGRESS + BACK TO TOP
   ========================================================================== */
#bar{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--hivis);
  z-index:var(--z-bar);box-shadow:0 0 10px rgba(207,227,63,.6);
  transform:scaleX(0);transform-origin:left center;}

/* Where the browser supports scroll-driven animation the bar is driven
   entirely by the compositor and site.js registers no scroll listener at
   all. Everywhere else JS falls back to one rAF-throttled passive handler. */
@supports (animation-timeline:scroll()){
  html.has-scroll-timeline #bar{
    animation:bar-grow linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes bar-grow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
}
#up{position:fixed;bottom:26px;right:26px;width:52px;height:52px;border-radius:50%;
  background:var(--hivis);color:var(--forest);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.28);opacity:0;pointer-events:none;
  transform:translateY(16px);transition:opacity .3s,transform .3s;z-index:var(--z-up);}
#up.show{opacity:1;pointer-events:auto;transform:translateY(0);}
#up:hover{transform:translateY(-3px);}

/* ==========================================================================
   15. CUSTOM LAG CURSOR — desktop pointers only
   ========================================================================== */
@media (pointer:fine){
  html.has-cursor body,html.has-cursor a,html.has-cursor button{cursor:none;}
  #cdot,#cring{position:fixed;top:0;left:0;pointer-events:none;z-index:var(--z-cursor);
    border-radius:50%;transform:translate(-50%,-50%);}
  #cdot{width:6px;height:6px;background:var(--coral);opacity:0;transition:opacity var(--dur-fast);}
  #cring{width:34px;height:34px;border:1.5px solid var(--hivis);opacity:0;
    transition:width var(--dur-fast),height var(--dur-fast),border-color var(--dur-fast),
               background var(--dur-fast),opacity var(--dur-fast);}
  #cdot.on,#cring.on{opacity:1;}
  #cring.active{width:58px;height:58px;background:rgba(255,107,74,.18);border-color:var(--coral);}
}
@media (pointer:coarse),(prefers-reduced-motion:reduce){#cdot,#cring{display:none!important;}}

/* ==========================================================================
   16. RESPONSIVE — shared chrome only. Page layouts carry their own.
   ========================================================================== */
@media (max-width:1000px){
  .f-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  :root{--gutter:22px;--sec:78px;--sec-tight:56px;}
  .nav-links{
    position:fixed;top:0;left:0;right:0;bottom:0;background:var(--forest);
    flex-direction:column;justify-content:center;gap:6px;padding:60px 32px;
    transform:translateX(100%);transition:transform .35s var(--ease);
  }
  .nav-links.open{transform:translateX(0);}
  /* See initNav(): stops the drawer sliding across the screen when the
     viewport crosses this breakpoint rather than when anyone opened it. */
  .is-resizing .nav-links{transition:none;}
  .nav-links a{font-size:1.5rem;font-family:var(--f-display);font-weight:800;padding:12px 0;text-align:left;}
  .nav-links a[aria-current="page"]::after{display:none;}
  .nav-links-cta-mobile{display:block;color:var(--hivis);}
  .burger{display:block;z-index:2;}
  .nav-cta{display:none;}
  .f-top{grid-template-columns:1fr;}
  .f-bot{flex-direction:column;}

  /* ---- Touch targets ---------------------------------------------------
     Everything tappable gets at least 44x44. The burger mattered most: it was
     36x38, and on a phone it is the only way to open the menu. The footer
     links were 20-23px tall and stacked closely enough that hitting the wrong
     one was easy.

     These are padding changes rather than size changes — the text stays where
     it was and the area that answers a thumb grows around it. */
  .burger{
    padding:10px;margin-right:-10px;   /* Optical edge stays where it was. */
    min-width:44px;min-height:44px;
    display:flex;flex-direction:column;justify-content:center;
  }

  .f-col a{padding:11px 0;margin-bottom:0;min-height:44px;display:flex;align-items:center;}
  .c-list li{margin-bottom:2px;}
  .c-list li a{padding:11px 0;min-height:44px;display:inline-flex;align-items:center;}
  .f-legal{gap:0 18px;}
  .f-legal a{padding:12px 0;min-height:44px;display:inline-flex;align-items:center;}

  /* Inline "Learn more" links inside cards and rows. */
  .btn--text{padding:11px 0;min-height:44px;}

  /* The ticker's items are links, so they need a thumb-sized row too. */
  .ticker-track a{padding:11px 18px;min-height:44px;}

  /* Two pixels short, and it is the way back to the homepage. */
  .logo{min-height:44px;}

  /* The small button variant lands at 42px. It is used for "Register" and
     other real actions, so it gets the last two pixels on touch. */
  .btn--sm{min-height:44px;}
}

/* ==========================================================================
   17. MESSAGE BAND — error, status and placeholder pages
   A compact forest band rather than a full hero: these pages are a wrong
   turn, not a destination.
   ========================================================================== */
.msg-band{padding:190px 0 var(--sec);background:var(--forest);}
.msg-inner{max-width:56ch;}
.msg-code{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(4rem,12vw,8rem);line-height:.9;
  color:transparent;-webkit-text-stroke:2px var(--hivis-2);
  margin-bottom:10px;letter-spacing:-.04em;
}
.msg-heading{font-size:clamp(1.7rem,3.6vw,2.5rem);color:#fff;margin-bottom:16px;}
.msg-text{margin-bottom:0;}
.msg-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}
.meta--on-dark{color:var(--on-dark-soft);}
.placeholder-path{margin-top:18px;}
@media (max-width:860px){.msg-band{padding:140px 0 var(--sec);}}

/* --------------------------------------------------------------------------
   Header over a light hero
   --------------------------------------------------------------------------
   The header is transparent until the page scrolls, so its text sits on the
   hero itself. On the pages that open on cream — About, Services, Field Notes
   — white text measured 1.06:1 against the background, which is not a
   contrast problem so much as an invisible navigation bar.

   Only the unscrolled state is restyled. Once .on adds the dark glass panel
   the header is dark again and white is correct, so the override stops there.
   -------------------------------------------------------------------------- */
/* Split heroes. The About page runs forest down the left and cream down the
   right, so the nav crosses both and neither ink nor white is readable across
   it. Rather than pick a losing side, the header wears the same panel it gets
   on scroll — which is legible over anything and is already part of the
   design's vocabulary. */
.site-header--solid{
  background:rgba(14,31,23,.68);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 2px 24px rgba(0,0,0,.24);
  border-bottom:1px solid rgba(255,255,255,.1);
}

.site-header--on-light:not(.on) .logo-txt{color:var(--ink);}
.site-header--on-light:not(.on) .logo-txt span{color:var(--forest-2);}
.site-header--on-light:not(.on) .logo-slot{
  border-color:rgba(18,16,12,.32);background:rgba(18,16,12,.05);color:rgba(18,16,12,.68);
}
.site-header--on-light:not(.on) .nav-links a{color:rgba(18,16,12,.78);}
.site-header--on-light:not(.on) .nav-links a:hover{background:rgba(18,16,12,.07);color:var(--ink);}
.site-header--on-light:not(.on) .nav-links a[aria-current="page"]{color:var(--ink);}
.site-header--on-light:not(.on) .burger span{background:var(--ink);}
/* The CTA is hivis on both, but on cream it needs an edge to sit against. */
.site-header--on-light:not(.on) .nav-cta{box-shadow:0 0 0 1px rgba(18,16,12,.12);}