:root {
  --bg: #0a0a0a;
  --fg: #f4f4f1;
  --muted: rgba(244, 244, 241, 0.55);
  --line: rgba(244, 244, 241, 0.18);
  --accent: #CF39DD;
  --tile-radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  /* Full-bleed neon scene behind everything, with a dark layer on top to
     calm it down so the photos pop. --bg is the loading fallback color. */
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("assets/bg.jpg") center / cover no-repeat,
    var(--bg);
  perspective: 1100px;
  perspective-origin: 50% 50%;
}
.hero.is-dragging { cursor: grabbing; }

.hero__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
}

.tile {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: var(--tile-radius);
  background: #111;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  --tile-bright: 0.85;
  --tile-sat: 0.7;
  will-change: transform, filter, opacity;
  transform-style: preserve-3d;
  transition:
    filter 0.55s var(--ease),
    opacity 0.55s var(--ease),
    box-shadow 0.55s var(--ease);
  filter:
    brightness(var(--tile-bright))
    saturate(var(--tile-sat))
    contrast(1.02);
  opacity: 0.95;
  pointer-events: auto;
  backface-visibility: hidden;
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.tile__scale {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.tile__scale img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero.is-dragging .tile { transition: none; }

.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(10,10,10,0.0) 0%, rgba(10,10,10,0.25) 60%, rgba(10,10,10,0.55) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.28) 0%, rgba(10,10,10,0.0) 18%, rgba(10,10,10,0.0) 82%, rgba(10,10,10,0.28) 100%);
  z-index: 1;
}

/* Ambient neon glitch tick — JS toggles .is-glitching every ~12-22s for a
   brief, clearly *intentional* RGB break: bigger neon-pink/cyan split,
   small skew + scale flicker, and a quick saturation pulse. No DOM
   overlays, no scanlines — short enough to read as a wink, not a bug. */
.hero.is-glitching .hero__grid {
  animation: hh-glitch-ambient 0.5s steps(8) 1;
}
@keyframes hh-glitch-ambient {
  0%   { filter: none;                                                                                      transform: translate3d(0, 0, 0) skewX(0); }
  15%  { filter: drop-shadow(2.5px 0 0 #ff10f0) drop-shadow(-2.5px 0 0 #00fff0) saturate(1.25);             transform: translate3d(-2px, 0, 0) skewX(0.3deg); }
  35%  { filter: drop-shadow(-3.5px 0 0 #ff10f0) drop-shadow(3.5px 0 0 #00fff0) saturate(1.3) brightness(1.05); transform: translate3d(2px, 1px, 0) skewX(-0.25deg); }
  55%  { filter: drop-shadow(2px 0 0 #ff10f0) drop-shadow(-2px 0 0 #00fff0) saturate(1.2);                  transform: translate3d(-1px, -1px, 0) skewX(0.2deg); }
  75%  { filter: drop-shadow(-3px 0 0 #ff10f0) drop-shadow(3px 0 0 #00fff0) saturate(1.25);                 transform: translate3d(2px, 1px, 0) skewX(-0.15deg); }
  100% { filter: none;                                                                                      transform: translate3d(0, 0, 0) skewX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero.is-glitching .hero__grid { animation: none; }
}

/* Mobile fallback for the chromatic edges: iOS Safari (and some mobile
   Chromium builds) silently drop filter:drop-shadow() when the host has
   transform-style: preserve-3d + will-change: transform, so the neon
   pink/cyan rim from the rule above never paints on touch devices. Drive
   the RGB split per-tile with box-shadow instead — renders reliably
   regardless of stacking context. The depth shadow is repeated in every
   keyframe so the tiles don't visibly lose their drop while glitching. */
@keyframes hh-glitch-ambient-tile {
  0%   { box-shadow: 0 8px 30px rgba(0,0,0,0.35); }
  15%  { box-shadow:  2.5px 0 0 #ff10f0, -2.5px 0 0 #00fff0, 0 8px 30px rgba(0,0,0,0.35); }
  35%  { box-shadow: -3.5px 0 0 #ff10f0,  3.5px 0 0 #00fff0, 0 8px 30px rgba(0,0,0,0.35); }
  55%  { box-shadow:  2px   0 0 #ff10f0, -2px   0 0 #00fff0, 0 8px 30px rgba(0,0,0,0.35); }
  75%  { box-shadow: -3px   0 0 #ff10f0,  3px   0 0 #00fff0, 0 8px 30px rgba(0,0,0,0.35); }
  100% { box-shadow: 0 8px 30px rgba(0,0,0,0.35); }
}
@media (pointer: coarse) {
  .hero.is-glitching .tile {
    animation: hh-glitch-ambient-tile 0.5s steps(8) 1;
  }
}
@media (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .hero.is-glitching .tile { animation: none; }
}

.hero__topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The tag keeps the dynamic difference-blend (so it stays readable
   over any photo passing under it), but the logo image rendert solid. */
.hero__tag {
  mix-blend-mode: difference;
}

.hero__brand {
  display: inline-flex;
  align-items: center;
  color: var(--fg);
}
.hero__brand-logo {
  display: block;
  height: 84px;
  width: auto;
  /* logo.svg is white-on-transparent — pops on the dark grid */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.hero__tag { color: var(--muted); }

/* The outside-label is positioned ABSOLUTELY at the geometric center
   of the viewport. Sub + nav live below it in their own container.
   It's a container (not an img) so we can hang the pixelate hover
   overlays on it via pseudo-elements — same trick as the tiles. */
.hero__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(200px, 26vw, 360px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;   /* badge is decorative — drag passes through to the grid */
  user-select: none;
  -webkit-user-drag: none;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  transition:
    top 0.65s var(--ease),
    width 0.65s var(--ease),
    transform 0.65s var(--ease),
    box-shadow 0.65s var(--ease);
}

.hero__badge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.hero__center {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
  padding: 0 24px;
  transition: bottom 0.6s var(--ease);
}

.hero__sub {
  margin: 0;
  max-width: 38ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.45;
  color: var(--muted);
  mix-blend-mode: difference;
  transition:
    opacity 0.45s var(--ease),
    max-height 0.55s var(--ease),
    margin 0.55s var(--ease);
  max-height: 4em;
  opacity: 1;
}

/* The "pill" is now a container that holds an expandable content panel
   ABOVE the nav row. On home it visually collapses to just the nav pill.
   On /about (or other content routes) it grows into a card. */
.hero__panel {
  margin-top: 36px;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  pointer-events: auto;
  background: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  min-width: min(640px, calc(100vw - 32px));
  max-width: min(880px, calc(100vw - 32px));
  transition: border-radius 0.6s var(--ease);
}

.hero__panel-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  text-align: left;
  transition:
    max-height 0.6s var(--ease),
    opacity 0.4s var(--ease);
}

.hero__article {
  /* Always fill the panel-body's width so event tiles and copy never leave
     blank space on the right. Panel min/max-width controls the actual size. */
  width: 100%;
  box-sizing: border-box;
  padding: 34px 34px 20px;
  color: #fff;
}
.hero__article h1 {
  margin: 0 0 16px;
  font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Oswald", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 66px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero__article p {
  margin: 0 0 16px;
  font-size: clamp(17px, 1.3vw, 19px);
  font-weight: 300;
  line-height: 1.6;
  color: #fff;
}
.hero__lede {
  font-size: clamp(19px, 1.55vw, 22px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #fff !important;
  margin-bottom: 30px !important;
}
.hero__section-title {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.hero__founders {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.hero__founder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.hero__founder-img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line);
}
.hero__founder-meta h3 {
  margin: 0;
  font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Oswald", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero__founder-role {
  margin: 4px 0 10px !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.hero__founder-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 15px;
  font-weight: 300;
  word-break: break-word;
}
.hero__contact-note {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px !important;
  letter-spacing: 0.04em;
  color: var(--muted) !important;
}
.hero__inline-link {
  color: #CF39DD;
  border-bottom: 1px solid currentColor;
  transition: color 0.3s var(--ease);
}
.hero__inline-link:hover { color: #fff; }

@media (max-width: 520px) {
  .hero__founders { grid-template-columns: 1fr; }
}

/* ---- FAQ (collapsible Q&A) --------------------------------------------- */
.hero__faq {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero__faq > li { padding: 0; }
.hero__faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hero__faq-item[open] {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(244, 244, 241, 0.25);
}
.hero__faq-item > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  font-size: clamp(18px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.35;
  color: #fff;
}
.hero__faq-item > summary::-webkit-details-marker { display: none; }
.hero__faq-item > summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: #CF39DD;
  transition: transform 0.3s var(--ease);
}
.hero__faq-item[open] > summary::after {
  transform: rotate(45deg);
}
.hero__faq-item > p {
  margin: 0 !important;
  padding: 0 20px 18px;
  font-size: clamp(17px, 1.3vw, 19px) !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* ---- Events page -------------------------------------------------------- */
.hero__filters {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.hero__filter {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.hero__filter:hover { color: var(--fg); }
.hero__filter.is-active {
  background: var(--fg);
  color: var(--bg);
}

.hero__events {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero__events > li { display: none; }
.hero__events[data-show="upcoming"] > li[data-event-when="upcoming"],
.hero__events[data-show="past"]     > li[data-event-when="past"] {
  display: block;
}

/* Each card is now a link that opens its recap. */
.hero__event {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 16px;
  row-gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.hero__event:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(244, 244, 241, 0.32);
}
.hero__event:hover .hero__event-cta { color: #fff; }

.hero__event-img {
  width: 100%;
  height: 100%;
  min-height: 90px;
  max-height: 110px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  border: 1px solid var(--line);
}
.hero__event-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero__event-cta {
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #CF39DD;
  transition: color 0.3s var(--ease);
}
.hero__event-meta {
  margin: 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.hero__event-title {
  margin: 0;
  font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Oswald", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero__event-body p:not(.hero__event-meta) {
  margin: 0 !important;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
}

.hero__events-empty {
  display: none;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  display: none; /* override the implicit display from flex/grid contexts */
  flex-direction: column;
  gap: 8px;
}


/* Show the sponsorship CTA when no event of the selected category exists.
   Toggled via JS by setting data-empty on the events article. */
.hero__article[data-empty="true"] .hero__events-empty { display: flex; }

@media (max-width: 520px) {
  .hero__event {
    grid-template-columns: 1fr;
  }
  .hero__event-img { max-height: 200px; }
}

/* ---- Event recap sub-page ----------------------------------------------- */
.hero__recap { padding-top: 18px; }

.hero__back {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hero__back:hover {
  color: var(--fg);
  border-bottom-color: currentColor;
}

.hero__partners {
  margin: 0 0 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
.hero__partner-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity .2s ease;
}
.hero__partner-link:hover,
.hero__partner-link:focus-visible {
  opacity: 1;
}
.hero__partners img {
  height: 28px;
  width: auto;
  display: block;
}

.hero__recap-eyebrow {
  margin: 0 0 10px !important;
  font-size: 11px !important;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.hero__recap-eyebrow--mid {
  margin-top: 24px !important;
}

.hero__recap-hero {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
  margin: 6px 0 18px;
}

.hero__recap-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}
.hero__recap-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: block;
}
@media (max-width: 520px) {
  .hero__recap-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Twitter embeds the widget script renders an iframe; this just controls
   the wrapping blockquote while it's loading. */
.hero__recap .twitter-tweet {
  margin: 18px auto !important;
}

/* LinkedIn-comment screenshots — sized like a tweet card, soft border. */
.hero__recap-social {
  display: block;
  max-width: 540px;
  width: 100%;
  height: auto;
  margin: 18px auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}

/* Contact: Tally form. Transparent background, no chrome — form styling
   comes from Tally itself. We just give it room to breathe. */
.hero__tally {
  margin: 18px 0 8px;
}
.hero__tally iframe {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
}

/* Real LinkedIn iframe embed — original was 504×392, keep that aspect ratio
   while letting it shrink on smaller panels. */
.hero__recap-linkedin {
  position: relative;
  width: 100%;
  max-width: 504px;
  aspect-ratio: 504 / 392;
  margin: 18px auto;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
  background: #1b1f23;
}
.hero__recap-linkedin iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Instagram Reel embed — Instagram's embed.js styles the iframe internally;
   we only constrain its outer dimensions and centering. */
.hero__recap-instagram {
  max-width: 540px !important;
  width: 100% !important;
  margin: 18px auto !important;
  background: transparent !important;
  border: 0 !important;
}

.hero__nav {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  padding: 10px 14px;
}

/* ---- Content routes (ABOUT, EVENTS, EVENT RECAP) ------------------------ */
/* Only the article matching the current route shows; others stay hidden.
   data-current-route is set by JS on the hero element on every route change. */
.hero__article { display: none; }
[data-current-route="#about"]         [data-route-content="#about"],
[data-current-route="#events"]        [data-route-content="#events"],
[data-current-route="#events/0524"]   [data-route-content="#events/0524"],
[data-current-route="#events/0526"]   [data-route-content="#events/0526"],
[data-current-route="#contact"]       [data-route-content="#contact"],
[data-current-route="#evaluation"]    [data-route-content="#evaluation"] {
  display: block;
}

.hero:where(.is-route-about, .is-route-events, .is-route-contact, .is-route-evaluation) .hero__panel {
  /* Lower radius so the rounded corners don't clip the scrollbar arrows. */
  border-radius: 12px;
  /* Lock to max-width on every content route so all expanded pages share
     the same panel width (otherwise content's intrinsic width drives it
     and About ends up wider than Events / Contact). */
  width: min(880px, calc(100vw - 32px));
}
.hero:where(.is-route-about, .is-route-events, .is-route-contact, .is-route-evaluation) .hero__panel-body {
  /* Cap height so the expanded pill never reaches the badge at the top.
     ~240px reserves space for the badge + comfortable breathing room. */
  max-height: min(70vh, calc(100dvh - 240px));
  opacity: 1;
  overflow-y: auto;
  transition:
    max-height 0.6s var(--ease),
    opacity 0.45s var(--ease) 0.15s;

  /* Firefox: thin scrollbar, pink thumb on black track */
  scrollbar-width: thin;
  scrollbar-color: #CF39DD #000;
}

/* Chromium / Safari scrollbar */
.hero__panel-body::-webkit-scrollbar {
  width: 8px;
}
.hero__panel-body::-webkit-scrollbar-track {
  background: #000;
  border-radius: 4px;
}
.hero__panel-body::-webkit-scrollbar-thumb {
  background: #CF39DD;
  border-radius: 4px;
}
.hero__panel-body::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
.hero__panel-body::-webkit-scrollbar-corner {
  background: #000;
}
.hero:where(.is-route-about, .is-route-events, .is-route-contact, .is-route-evaluation) .hero__sub {
  opacity: 0;
  max-height: 0;
  margin: 0;
  pointer-events: none;
}
.hero:where(.is-route-about, .is-route-events, .is-route-contact, .is-route-evaluation) .hero__hint {
  opacity: 0;
  pointer-events: none;
}

/* Badge shrinks to a tiny "tab" flush against the top of the viewport. */
.hero:where(.is-route-about, .is-route-events, .is-route-contact, .is-route-evaluation) .hero__badge {
  top: 0;
  width: clamp(72px, 8vw, 100px);
  transform: translate(-50%, 0);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* Active nav link gets emphasized while on its route. */
.hero__nav a.is-active {
  background: var(--fg);
  color: var(--bg);
}
.hero__nav a.is-active::before { color: var(--bg); }
.hero__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
  border-radius: 999px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.hero__nav a::before {
  content: attr(data-label);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  transition: color 0.4s var(--ease);
}
.hero__nav a:hover {
  background: var(--fg);
  color: var(--bg);
}
.hero__nav a:hover::before { color: var(--bg); }

.hero__hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  mix-blend-mode: difference;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.4s var(--ease);
}
.hero__hint .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.3); }
}

@media (max-width: 640px) {
  .hero__topbar { padding: 16px 18px; font-size: 11px; }
  .hero__brand-logo { height: 60px; }
  .hero__center { bottom: max(78px, 10%); }
  /* Home pill: shrink to nav content (no forced min-width), natural margins. */
  .hero__panel {
    margin-top: 18px;
    min-width: 0;
  }
  /* Content routes: keep equal viewport margins (~24px) on small screens. */
  .hero:where(.is-route-about, .is-route-events, .is-route-contact, .is-route-evaluation) .hero__panel {
    width: calc(100vw - 48px);
  }
  .hero__nav { padding: 3px 6px; gap: 2px 4px; }
  .hero__nav a {
    padding: 8px 10px;
    font-size: 11px;
    letter-spacing: 0.1em;
    gap: 0;
  }
  /* Drop the "01 / 02 / 03 / 04" prefix labels on mobile to save horizontal room. */
  .hero__nav a::before { display: none; }
  .hero__hint { font-size: 11px; }

  /* On content routes, push the nav closer to the bottom and relax the
     panel-body cap so the panel grows upward into the empty space above.
     The 200px top reservation = ~100px badge tab + ~100px breathing room,
     keeping clearance from the outside label across all phone heights. */
  .hero:where(.is-route-about, .is-route-events, .is-route-contact, .is-route-evaluation) .hero__center {
    bottom: max(40px, 3%);
  }
  .hero:where(.is-route-about, .is-route-events, .is-route-contact, .is-route-evaluation) .hero__panel-body {
    max-height: min(78vh, calc(100dvh - 200px));
  }
}