/* ============================================================
   Grand Rapids Information Hub
   Design system: "Current"
   Motif: the rapids the city is named for. Flow, channel, eddy.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Core palette */
  --ink:        #0A1A20;   /* deep river slate, primary dark */
  --ink-2:      #0E242C;   /* raised dark surface */
  --slate:      #16333C;   /* dark surface, borders on dark */
  --paper:      #E7E6DE;   /* limestone, primary light bg */
  --paper-2:    #DBDACF;   /* recessed light surface */
  --moss:       #2E7361;   /* primary accent, river green */
  --moss-deep:  #1F5346;
  --moss-lt:    #57A78F;
  --copper:     #C0562A;   /* secondary accent, brick heritage. used sparingly */
  --fog:        #8DA6A5;   /* muted mid tone */

  /* Derived */
  --on-dark:      #EFEEE6;
  --on-dark-mute: rgba(239,238,230,0.62);
  --on-light:     #12262C;
  --on-light-mute:rgba(18,38,44,0.66);
  --line-dark:    rgba(239,238,230,0.14);
  --line-light:   rgba(18,38,44,0.16);

  /* Type */
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --ui:      "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;

  /* Scale */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.24rem, 1.16rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.55rem, 1.4rem + 0.75vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.66rem + 1.4vw, 3rem);
  --step-4:  clamp(2.4rem, 1.85rem + 2.7vw, 4.6rem);
  --step-5:  clamp(2.55rem, 1.35rem + 6vw, 7.5rem);

  /* Space */
  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --measure: 66ch;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Solar Flare credit component tokens */
  --sf-accent: #C0562A;
  --sf-ink:    #0A1A20;
  --sf-cream:  #EFEEE6;
  --sf-line:   rgba(239,238,230,0.14);
}

/* ---------- 2. Reset and base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* Anchor targets must clear the fixed header */
:target, [id]{ scroll-margin-top:96px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--on-light);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.65;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{ overflow:hidden; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-0.025em;
  margin:0 0 0.5em;
  text-wrap:balance;
}
p{ margin:0 0 1em; max-width:var(--measure); }
a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:var(--ui); }

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

.wrap{
  width:min(1280px, 100%);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.narrow{ width:min(760px,100%); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:600;
  background:var(--ink); color:var(--on-dark);
  padding:.75rem 1.15rem; border-radius:0 0 10px 0;
  font-family:var(--ui); font-size:var(--step--1);
}
.skip:focus{ left:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Section rhythm */
.section{ padding-block: clamp(4rem, 9vw, 8.5rem); }
.section--tight{ padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.section--dark{ background:var(--ink); color:var(--on-dark); }
.section--dark p{ color:var(--on-dark-mute); }

/* A recurring device: the channel rule. A hairline that carries a single
   moss node, echoing a point on the river. Used to open major sections. */
.channel{
  display:flex; align-items:center; gap:.9rem;
  margin-bottom:1.75rem;
  font-family:var(--ui); font-size:var(--step--1);
  letter-spacing:0.01em; font-weight:600;
  color:var(--on-light-mute);
}
.channel::before{
  content:''; width:9px; height:9px; border-radius:50%;
  background:var(--moss); flex:0 0 9px;
}
.channel::after{
  content:''; height:1px; flex:1 1 auto;
  background:linear-gradient(90deg, var(--line-light), transparent);
}
.section--dark .channel{ color:var(--on-dark-mute); }
.section--dark .channel::before{ background:var(--moss-lt); }
.section--dark .channel::after{ background:linear-gradient(90deg, var(--line-dark), transparent); }

/* ---------- 3. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.6rem;
  font-family:var(--ui); font-size:var(--step--1); font-weight:600;
  letter-spacing:0.005em;
  border-radius:999px; border:1px solid transparent;
  cursor:pointer; text-decoration:none;
  transition:background-color .3s var(--ease-out), color .3s var(--ease-out),
             border-color .3s var(--ease-out), transform .25s var(--ease-out),
             box-shadow .3s var(--ease-out);
}
.btn:hover,.btn:focus-visible{ transform:translateY(-2px); }
.btn--solid{ background:var(--moss); color:#F3FBF7; }
.btn--solid:hover,.btn--solid:focus-visible{
  background:var(--moss-deep);
  box-shadow:0 14px 30px -12px rgba(46,115,97,0.7);
}
.btn--ghost{ background:transparent; color:inherit; border-color:currentColor; }
.btn--ghost:hover,.btn--ghost:focus-visible{ background:rgba(46,115,97,0.1); border-color:var(--moss); }
.section--dark .btn--ghost:hover{ background:rgba(239,238,230,0.08); border-color:var(--moss-lt); }
.btn--light{ background:var(--paper); color:var(--ink); }
.btn--light:hover,.btn--light:focus-visible{ background:#fff; }

/* ---------- 4. Site header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:200;
  transition:background-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.hdr__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; height:74px;
}
.hdr.is-stuck{
  background:rgba(10,26,32,0.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line-dark);
}
.hdr.is-open{ background:var(--ink); }

.brand{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--display);
  color:var(--on-dark); text-decoration:none;
  padding:.35rem 0; line-height:1;
}
.brand__mark{
  width:10px; height:10px; border-radius:50%; flex:0 0 10px;
  background:var(--moss-lt); align-self:center;
  box-shadow:0 0 8px rgba(87,167,143,0.45);
}
.brand__name{
  display:flex; flex-direction:column; gap:.05rem;
}
.brand__discover{
  font-size:.72rem; font-weight:700; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--moss-lt);
  line-height:1;
}
.brand__city{
  font-size:1.08rem; font-weight:700; letter-spacing:-0.03em;
  color:var(--on-dark); line-height:1;
}
.brand__sub{
  font-weight:400; font-size:.72rem; letter-spacing:0.01em;
  color:var(--on-dark-mute); align-self:center; padding-left:.1rem;
}
@media (max-width:680px){ .brand__sub{ display:none; } }
@media (max-width:440px){
  .brand__city{ font-size:.95rem; }
  .brand__discover{ font-size:.64rem; }
}

.nav{ display:flex; align-items:center; gap:.25rem; }
@media (max-width:900px){ .nav{ display:none; } }

.nav__btn{
  position:relative;
  background:none; border:none; cursor:pointer;
  color:var(--on-dark-mute);
  font-size:var(--step--1); font-weight:600; letter-spacing:0.01em;
  padding:.6rem .95rem; border-radius:999px;
  transition:color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.nav__btn:hover,.nav__btn[aria-expanded="true"]{
  color:var(--on-dark); background:rgba(239,238,230,0.08);
}
.nav__btn[aria-current="page"]{ color:var(--on-dark); }
.nav__btn[aria-current="page"]::after{
  content:''; position:absolute; left:50%; bottom:.28rem;
  width:5px; height:5px; margin-left:-2.5px; border-radius:50%;
  background:var(--moss-lt);
}

/* Mega panel */
.mega{
  position:absolute; left:0; right:0; top:74px;
  background:var(--ink);
  border-top:1px solid var(--line-dark);
  border-bottom:2px solid var(--moss);
  box-shadow:0 18px 40px -8px rgba(0,0,0,0.72), 0 4px 0 0 rgba(46,115,97,0.35);
  overflow:hidden;
  max-height:0;
  transition:max-height .48s var(--ease-out),
             box-shadow .48s var(--ease-out);
}
.mega.is-open{ max-height:360px; height:310px; }
.mega__inner{ height:100%; overflow:hidden; }
.mega__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  grid-template-rows:auto auto;
  gap:clamp(1.5rem,4vw,4rem);
  padding-block:2rem 2.25rem;
}
/* Ext strip always spans full width below the two columns */
.mega__ext-strip{
  grid-column:1 / -1;
  padding-top:.85rem;
  border-top:1px solid var(--line-dark);
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.mega__lede h3{
  font-size:var(--step-2); color:var(--on-dark); margin-bottom:.4rem;
}
.mega__lede p{ color:var(--on-dark-mute); font-size:var(--step--1); line-height:1.6; }
.mega__links{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; align-content:start; }
.mega__links .mega__ext-label{ grid-column:1 / -1; margin:.9rem 0 .5rem; }
.mega__links .mega__ext-row{ grid-column:1 / -1; }
.mega__link{
  display:block; padding:.85rem 1rem; border-radius:12px;
  text-decoration:none; color:var(--on-dark);
  font-family:var(--ui); font-weight:600; font-size:var(--step--1);
  border:1px solid transparent;
  transition:background-color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.mega__link span{
  display:block; font-weight:400; font-family:var(--body);
  color:var(--on-dark-mute); font-size:.85rem; line-height:1.45; margin-top:.15rem;
}
.mega__link:hover,.mega__link:focus-visible{
  background:rgba(46,115,97,0.16); border-color:rgba(87,167,143,0.35);
  transform:translateX(4px);
}
.mega__link.is-soon{ opacity:.45; pointer-events:none; }

/* Mobile drawer */
.burger{
  display:none; width:44px; height:44px; border-radius:50%;
  background:rgba(239,238,230,0.08); border:1px solid var(--line-dark);
  cursor:pointer; padding:0; place-items:center;
}
@media (max-width:900px){ .burger{ display:grid; } }
.burger span{
  display:block; width:17px; height:1.5px; background:var(--on-dark); border-radius:2px;
  transition:transform .35s var(--ease-out), opacity .2s linear;
}
.burger span + span{ margin-top:4px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:74px 0 0 0; z-index:190;
  background:var(--ink); color:var(--on-dark);
  overflow-y:auto; padding:1.5rem var(--gutter) 4rem;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.drawer.is-open{ opacity:1; transform:none; pointer-events:auto; }
@media (min-width:901px){ .drawer{ display:none; } }
.drawer__group{ border-top:1px solid var(--line-dark); padding:1.25rem 0; }
.drawer__group h4{
  font-size:var(--step--1); color:var(--moss-lt);
  letter-spacing:0.02em; margin-bottom:.75rem;
}
.drawer__group a{
  display:block; padding:.5rem 0; text-decoration:none;
  font-family:var(--ui); font-weight:600; font-size:var(--step-0);
}
.drawer__group a.is-soon{ opacity:.4; pointer-events:none; }

/* ---------- 5. Hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  background:var(--ink); color:var(--on-dark);
  overflow:hidden;
}
#riverCanvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block;
}
.hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, rgba(10,26,32,0.94) 0%, rgba(10,26,32,0.72) 30%, rgba(10,26,32,0.12) 62%, rgba(10,26,32,0) 100%),
    linear-gradient(to top, rgba(10,26,32,0.9) 0%, rgba(10,26,32,0.4) 34%, rgba(10,26,32,0.1) 68%, rgba(10,26,32,0.55) 100%);
}
.hero__inner{ position:relative; z-index:2; padding-bottom:clamp(3rem,7vw,6rem); padding-top:120px; width:100%; }
.hero h1{
  font-size:var(--step-5);
  font-weight:700; letter-spacing:-0.045em; line-height:0.9;
  margin:0 0 1.1rem; max-width:14ch;
}
.hero__lede{
  font-size:var(--step-1); line-height:1.5;
  color:var(--on-dark-mute); max-width:46ch; margin-bottom:2rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:3rem; }

/* Orientation strip: real, stable facts. Not decoration. */
.orient{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px; background:var(--line-dark);
  border-block:1px solid var(--line-dark);
}
.orient div{ background:var(--ink); padding:1rem 1.1rem 1.1rem; }
.orient dt{
  font-family:var(--ui); font-size:.72rem; font-weight:600;
  color:var(--fog); letter-spacing:0.03em; margin-bottom:.3rem;
}
.orient dd{
  margin:0; font-family:var(--display); font-size:var(--step-1);
  font-weight:600; letter-spacing:-0.02em; color:var(--on-dark);
}

.hero__cue{
  position:absolute; right:var(--gutter); bottom:clamp(3rem,7vw,6rem); z-index:3;
  display:grid; gap:.6rem; justify-items:center;
  font-family:var(--ui); font-size:.7rem; letter-spacing:0.08em;
  color:var(--on-dark-mute); writing-mode:vertical-rl;
}
@media (max-width:800px){ .hero__cue{ display:none; } }
.hero__cue i{
  display:block; width:1px; height:52px;
  background:linear-gradient(to bottom, var(--moss-lt), transparent);
  animation:cueFlow 2.6s var(--ease-in-out) infinite;
}
@keyframes cueFlow{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ---------- 6. Entry points ---------- */
.entries{
  display:grid; gap:1px;
  background:var(--line-light);
  border:1px solid var(--line-light);
  border-radius:20px; overflow:hidden;
  grid-template-columns:repeat(6,1fr);
}
@media (max-width:900px){ .entries{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .entries{ grid-template-columns:1fr; } }

.entry{
  position:relative; isolation:isolate;
  background:var(--paper);
  padding:clamp(1.4rem,2.4vw,2rem);
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:210px;
  transition:background-color .4s var(--ease-out), color .4s var(--ease-out);
}
/* Asymmetric weighting. The two highest-traffic entries take more room. */
.entry--lg{ grid-column:span 3; min-height:248px; }
.entry--md{ grid-column:span 2; }
.entry--sm{ grid-column:span 2; }
@media (max-width:900px){
  .entry--lg{ grid-column:span 2; }
  .entry--md,.entry--sm{ grid-column:span 1; }
}
@media (max-width:520px){ .entry,.entry--lg,.entry--md,.entry--sm{ grid-column:span 1; } }

.entry__q{
  font-family:var(--body); font-style:italic;
  color:var(--on-light-mute); font-size:var(--step--1);
  margin:0 0 .8rem;
  transition:color .4s var(--ease-out);
}
.entry h3{
  font-size:var(--step-2); margin:0 0 .35rem;
  transition:transform .5s var(--ease-out);
}
.entry--lg h3{ font-size:var(--step-3); }
.entry__note{
  font-size:var(--step--1); color:var(--on-light-mute); margin:0;
  transition:color .4s var(--ease-out);
}
.entry__flow{
  position:absolute; inset:0; z-index:-1; opacity:0;
  transition:opacity .5s var(--ease-out);
}
.entry:hover,.entry:focus-visible{ background:var(--ink); color:var(--on-dark); }
.entry:hover .entry__q,.entry:focus-visible .entry__q,
.entry:hover .entry__note,.entry:focus-visible .entry__note{ color:var(--on-dark-mute); }
.entry:hover h3,.entry:focus-visible h3{ transform:translateX(6px); }
.entry:hover .entry__flow,.entry:focus-visible .entry__flow{ opacity:1; }
.entry.is-soon{ pointer-events:none; }
.entry.is-soon::after{
  content:'In progress'; position:absolute; top:1rem; right:1rem;
  font-family:var(--ui); font-size:.66rem; font-weight:600; letter-spacing:0.04em;
  color:var(--on-light-mute); border:1px solid var(--line-light);
  padding:.2rem .55rem; border-radius:999px;
}
.entry.is-soon h3,.entry.is-soon .entry__q,.entry.is-soon .entry__note{ opacity:.45; }

/* ---------- 7. Decide feature block ---------- */
.decide-pitch{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem); align-items:center;
}
@media (max-width:860px){ .decide-pitch{ grid-template-columns:1fr; } }
.decide-pitch h2{ font-size:var(--step-4); margin-bottom:1rem; }
.decide-rules{ list-style:none; margin:1.5rem 0 2rem; padding:0; display:grid; gap:.7rem; }
.decide-rules li{
  display:flex; gap:.75rem; align-items:flex-start;
  font-size:var(--step--1); color:var(--on-dark-mute); line-height:1.55;
}
.decide-rules li::before{
  content:''; flex:0 0 6px; width:6px; height:6px; border-radius:50%;
  background:var(--moss-lt); margin-top:.55rem;
}

/* ---------- 8. Principles ---------- */
.principles{ list-style:none; margin:0; padding:0; }
.principles li{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(1rem,4vw,3rem);
  padding:1.6rem 0; border-top:1px solid var(--line-light);
}
@media (max-width:700px){ .principles li{ grid-template-columns:1fr; gap:.4rem; } }
.principles h3{ font-size:var(--step-1); margin:0; }
.principles p{ margin:0; color:var(--on-light-mute); font-size:var(--step--1); }

/* ---------- 9. Footer ---------- */
.foot{ background:var(--ink); color:var(--on-dark); padding-block:clamp(3rem,6vw,5rem) 2rem; }
.foot__top{
  display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:2rem clamp(1.5rem,3vw,3rem); padding-bottom:2.75rem;
}
@media (max-width:860px){ .foot__top{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .foot__top{ grid-template-columns:1fr; } }
.foot__about p{ color:var(--on-dark-mute); font-size:var(--step--1); max-width:36ch; }
.foot h4{
  font-size:.75rem; letter-spacing:0.04em; color:var(--fog);
  margin-bottom:.9rem; font-weight:600;
}
.foot__col a{
  display:block; padding:.3rem 0; text-decoration:none;
  font-family:var(--ui); font-size:var(--step--1); color:var(--on-dark-mute);
  transition:color .25s var(--ease-out), transform .25s var(--ease-out);
}
.foot__col a:hover,.foot__col a:focus-visible{ color:var(--on-dark); transform:translateX(3px); }
.foot__col a.is-soon{ opacity:.4; pointer-events:none; }
.foot__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; padding-top:1.5rem; border-top:1px solid var(--line-dark);
  font-size:.78rem; color:var(--on-dark-mute); font-family:var(--ui);
}

/* ---------- 10. Sound toggle (header) ---------- */
.sfx-btn{
  position:relative;
  width:36px; height:36px; border-radius:50%; flex:0 0 36px;
  background:rgba(239,238,230,0.07); border:1px solid var(--line-dark);
  color:var(--on-dark-mute); cursor:pointer;
  display:grid; place-items:center;
  transition:background-color .25s var(--ease-out), border-color .25s var(--ease-out),
             color .25s var(--ease-out), transform .22s var(--ease-out);
}
.sfx-btn:hover,.sfx-btn:focus-visible{
  background:rgba(239,238,230,0.13); border-color:var(--moss-lt);
  transform:scale(1.08); outline:none;
}
/* Green when on, red-ish when off */
.sfx-btn[aria-pressed="true"]{ color:var(--moss-lt); border-color:rgba(87,167,143,0.4); }
.sfx-btn[aria-pressed="false"]{ color:#E05555; border-color:rgba(224,85,85,0.35); }

/* Speaker SVG icon injected by JS */
.sfx-btn svg{ width:16px; height:16px; pointer-events:none; }

/* Pill tooltip */
.sfx-btn::after{
  content:attr(data-tip);
  position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(-4px);
  background:var(--ink); color:var(--on-dark);
  font-family:var(--ui); font-size:.68rem; font-weight:600; letter-spacing:0.02em;
  white-space:nowrap; padding:.3rem .7rem; border-radius:999px;
  border:1px solid var(--line-dark);
  opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.sfx-btn:hover::after,.sfx-btn:focus-visible::after{
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* ---------- 11. Sample data notice ---------- */
.notice{
  background:var(--copper); color:#FFF6F0;
  font-family:var(--ui); font-size:.78rem; line-height:1.5;
  padding:.65rem var(--gutter);
  display:flex; align-items:center; justify-content:center; gap:1rem;
  text-align:center;
}
.notice button{
  background:rgba(0,0,0,0.22); border:none; color:inherit;
  width:22px; height:22px; border-radius:50%; cursor:pointer; flex:0 0 22px;
  font-size:.8rem; line-height:1;
}
.notice[hidden]{ display:none; }

/* ---------- 12. Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Full-width entry, used for the "start here" band */
.entry--wide{ grid-column:span 6; min-height:0; }
.entry--wide{ flex-direction:row; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.entry--wide > div{ flex:1 1 320px; }
@media (max-width:900px){ .entry--wide{ grid-column:span 2; } }
@media (max-width:520px){ .entry--wide{ grid-column:span 1; } }

/* The SFX button sits in the same flex wrapper as the burger.
   The wrapper itself must always be visible even when burger is hidden. */
.sfx-wrapper{ display:flex; align-items:center; gap:.6rem; }
@media (min-width:901px){ .sfx-wrapper .burger{ display:none; } }

/* ── Mega panel: community external link compact strip ───── */
.mega__ext-row{
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.mega__ext-label{
  font-family:var(--ui); font-size:.62rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--fog); flex:0 0 auto; margin:0;
}
.mega__ext-link{
  display:inline-flex; align-items:center;
  padding:.3rem .75rem; border-radius:999px;
  font-family:var(--ui); font-size:.7rem; font-weight:600;
  color:var(--on-dark-mute); text-decoration:none;
  border:1px solid var(--line-dark);
  transition:color .22s var(--ease-out), border-color .22s var(--ease-out),
             background-color .22s var(--ease-out);
}
.mega__ext-link:hover,.mega__ext-link:focus-visible{
  color:var(--on-dark); border-color:var(--fog);
  background:rgba(239,238,230,0.07); outline:none;
}

/* ── Data provenance badge ───────────────────────────────── */
.data-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .85rem; border-radius:999px;
  background:var(--paper-2); border:1px solid var(--line-light);
  font-family:var(--ui); font-size:.74rem; color:var(--on-light-mute);
}
.data-badge::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--moss); flex:0 0 6px;
}
.data-badge b{ color:var(--on-light); font-weight:700; }
.data-badge a{ color:var(--moss); text-underline-offset:3px; margin-left:.15rem; }
.data-badge a:hover{ color:var(--moss-deep); }

/* Dark variant, for use on dark section backgrounds */
.data-badge--dark{
  background:rgba(239,238,230,0.06); border-color:var(--line-dark);
  color:var(--on-dark-mute);
}
.data-badge--dark b{ color:var(--on-dark); }
.data-badge--dark a{ color:var(--moss-lt); }
.data-badge--dark a:hover{ color:var(--on-dark); }

/* ── Verified listing badge ──────────────────────────────────
   Purely informational. Never affects sort order, filtering,
   or placement — see the Integrity Policy on About This Project.
   Attach with: <span class="verified-badge">Verified &#10003;</span> */
.verified-badge{
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--ui); font-size:.66rem; font-weight:700;
  letter-spacing:0.02em;
  padding:.18rem .55rem; border-radius:999px;
  background:rgba(46,115,97,0.1); border:1px solid rgba(46,115,97,0.35);
  color:var(--moss-deep);
}
.verified-badge::before{ content:'\\2713'; font-size:.7rem; }

/* ── Footer sponsor recognition ──────────────────────────── */
.foot__sponsors{
  border-top:1px solid var(--line-dark);
  padding-top:1.5rem; margin-top:1.75rem;
  text-align:center;
}
.foot__sponsors[hidden]{ display:none; }
.foot__sponsors p{
  font-family:var(--ui); font-size:.72rem; color:var(--on-dark-mute);
  margin:0 0 .85rem; letter-spacing:0.02em;
}
.foot__sponsors__logos{
  display:flex; align-items:center; justify-content:center;
  gap:2rem; flex-wrap:wrap; margin-bottom:1rem;
}
.foot__sponsors__logos img{
  height:26px; width:auto; filter:brightness(0) invert(1); opacity:.75;
  transition:opacity .25s var(--ease-out);
}
.foot__sponsors__logos img:hover{ opacity:1; }
.foot__sponsors__logos--community img{ height:20px; }
.foot__sponsors a.foot__sponsors-link{
  font-family:var(--ui); font-size:.72rem; font-weight:600;
  color:var(--moss-lt); text-decoration:underline; text-underline-offset:3px;
}
.foot__sponsors a.foot__sponsors-link:hover{ color:var(--on-dark); }