/* The funding-change belt (ADR-0013): a translucent, moving notice docked to
   the navigation's lower edge on every page but /funding/* (the home page
   too, since ADR-0014).
   Linked into each page by lib/funding-belt.js with a content-hash ?v=, so a
   change here reaches a returning visitor at once despite the hour-long cache
   on /css/*. Markup: src/_includes/funding-belt.html. Script: src/js/funding-belt.js.
   Designed and approved on the playground branch; the .r- prefix is that
   branch's, kept so the three files still match what was reviewed.
   Temporary: the belt talks about 2027-03-31 — see the ADR's time box. */
:root{
  --r-ink:#024275; --r-ink-strong:#022b4c; --r-blue:#046cbe; --r-blue-mid:#2a8dda;
  --r-blue-soft:#d1e3f5; --r-num:#65aee6; --r-ground:#e4eef8; --r-line:#127ccf;
  --r-mint:#4ecfa2; --r-mint-ink:#0b412e; --r-mint-wash:#c7ebde; --r-green:#11523b;
  --r-gold:#fdb833; --r-gold-ink:#5a3c00; --r-navy:#02213d;
}
/* ---- the dot that beats ---- */
/* A double thump rather than a throb: the eye reads two beats as a heartbeat
   and one as a blink. The ring is a second element so the dot itself stays the
   same size on the baseline while the ring travels. */
.r-dot{position:relative;flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--r-gold);display:inline-block}
/* Livelier, on Ali's note: the cycle drops 2.4s -> 1.5s, the thump goes to 1.5
   from 1.34, the ring travels further and starts opaque, and the dot carries a
   gold halo that breathes with it. */
.r-dot.is-beat{animation:r-thump 1.5s ease-in-out infinite}
.r-dot.is-beat::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--r-gold);opacity:0;animation:r-ring 1.5s ease-out infinite}
@keyframes r-thump{0%,64%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(253,184,51,.45)}14%{transform:scale(1.5);box-shadow:0 0 12px 3px rgba(253,184,51,.55)}30%{transform:scale(1)}44%{transform:scale(1.3);box-shadow:0 0 9px 2px rgba(253,184,51,.4)}}
@keyframes r-ring{0%{transform:scale(.5);opacity:1}55%{transform:scale(2.8);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.r-dot.is-beat,.r-dot.is-beat::after{animation:none}}


/* ---- the belt: translucent, moving, docked to the navigation's lower edge ---- */
/* Fixed at the navigation's own measured height, so it rides the junction on
   every page and nothing is pushed down. It is glass on purpose: the page keeps
   showing through, and the two themes below only change how that glass is
   tinted — same height, same type, same dot, same speed. */
.r-belt{position:fixed;left:0;right:0;top:var(--r-nav-h,69px);z-index:994;display:flex;align-items:center;gap:12px;height:40px;padding:0 12px 0 24px;box-sizing:border-box;font-family:'Cabinet Grotesk Variable','Cabinet Grotesk',system-ui,sans-serif;-webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);border-bottom:1px solid transparent;transition:background-color .45s ease,color .45s ease,border-color .45s ease}
.r-belt.is-dark{background:rgba(2,33,61,.52);color:#cfe2f3;border-bottom-color:rgba(255,255,255,.16)}
.r-belt.is-light{background:rgba(255,255,255,.62);color:#2f5f7f;border-bottom-color:rgba(2,66,117,.14)}
.r-belt.is-dark b{color:#fff}
.r-belt.is-light b{color:var(--r-ink-strong)}
.r-belt-in{flex:1;min-width:0;display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;height:100%}
.r-belt-mask{position:relative;flex:1;min-width:0;overflow:hidden;height:100%;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 76px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 76px),transparent 100%)}
.r-belt-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;animation:r-belt var(--belt-s,42s) linear infinite}
.r-belt:hover .r-belt-track,.r-belt-in:focus-visible ~ .r-belt-track,.r-belt-track:focus-within{animation-play-state:paused}
.r-belt-seg{display:inline-flex;align-items:center;font-size:14px;line-height:1;letter-spacing:.01em}
.r-belt-sep{display:inline-block;width:5px;height:5px;margin:0 22px;border-radius:50%;background:currentColor;opacity:.42;flex:0 0 auto}
@keyframes r-belt{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.r-belt-x{flex:0 0 auto;width:26px;height:26px;border-radius:4px;border:1px solid currentColor;background:transparent;color:inherit;opacity:.5;font-size:14px;line-height:1;cursor:pointer;font-family:inherit}
.r-belt-x:hover{opacity:1}
/* 2026-10-04 (audit §4.1): the dismiss button is a 26px glyph, and a tap that
   missed it by a few pixels landed on the link behind and opened /funding/.
   Its hit area is 44×44 — a pseudo-element 9px beyond the box on every side,
   which clicks on count as clicks on the button — and the glyph stays 26px. */
.r-belt-x{position:relative}
.r-belt-x::before{content:"";position:absolute;inset:-9px}
/* The dot keeps its gold on both themes; it is the one thing that does not
   adapt, because it is the thing meant to be noticed. */
.r-belt .r-dot{margin-left:2px}
@media (prefers-reduced-motion:reduce){
  .r-belt-track{animation:none;transform:none}
  .r-belt-mask{-webkit-mask-image:none;mask-image:none}
}
@media (max-width:760px){
  .r-belt{height:36px;padding:0 10px 0 18px;gap:9px}
  .r-belt-seg{font-size:13px}
  .r-belt-sep{margin:0 16px}
}