/* ==========================================================================
   IMABEATDUHPARTY — COMPONENTS
   Every reusable piece of interface lives here. All six pages share it.
   ========================================================================== */

/* ==========================================================================
   1. ART STAGE
   The core layout primitive. It holds one piece of artwork as a full-bleed
   cinematic environment and lays real HTML on top of it. Nothing is ever
   burned into the image — text, buttons and nav are all live elements.

   <section class="art-stage" data-art="home" data-focus="50% 40%">
     <div class="art-stage__media"> <picture> … </picture> </div>
     <div class="art-stage__scrim scrim--edges"></div>
     <div class="art-stage__content"> …real UI… </div>
   </section>
   ========================================================================== */
.art-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: var(--ink);
}

.art-stage__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-art);
  /* The low-quality placeholder paints instantly so the section is never
     an empty black box while the full artwork downloads. */
  background-image: var(--art-lqip);
  background-size: cover;
  background-position: var(--art-focus, 50% 50%);
}

/* <picture> is an inline wrapper with no height of its own, which would
   break a percentage height on the image inside it. Both the wrapper and
   the image are pinned to the stage so object-fit and the focal point
   always have a real box to work against. */
.art-stage__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.art-stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--art-focus, 50% 50%);
  opacity: 0;
  /* Scaled up slightly so parallax drift never exposes an edge */
  transform: scale(var(--art-zoom, 1.08))
             translate3d(var(--art-shift-x, 0px), var(--art-shift-y, 0px), 0);
  /* No transform transition here on purpose — site.js eases the parallax
     values itself each frame, which stays smooth while scrolling. */
  transition: opacity var(--dur-slow) var(--ease-out);
}
.art-stage.is-loaded .art-stage__img { opacity: 1; }

/* --- Scrims -------------------------------------------------------------
   Legibility washes. Each variant darkens only one region so the
   important part of the artwork stays clear. Pick the variant that
   protects the subject of that page's image.                            */
.art-stage__scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  pointer-events: none;
}

/* Darkens top and bottom, leaves the middle of the frame open.
   Use when the subject sits dead centre. */
.scrim--edges {
  background:
    linear-gradient(to bottom,
      rgb(8 6 10 / 0.86) 0%,
      rgb(8 6 10 / 0.45) 18%,
      transparent 38%,
      transparent 54%,
      rgb(8 6 10 / 0.55) 78%,
      rgb(8 6 10 / 0.94) 100%);
}

/* Darkens the lower-left corner for headline copy. */
.scrim--left {
  background:
    linear-gradient(to right,
      rgb(8 6 10 / 0.92) 0%,
      rgb(8 6 10 / 0.72) 28%,
      rgb(8 6 10 / 0.25) 52%,
      transparent 72%),
    linear-gradient(to bottom,
      rgb(8 6 10 / 0.7) 0%,
      transparent 30%,
      transparent 60%,
      rgb(8 6 10 / 0.75) 100%);
}

.scrim--right {
  background:
    linear-gradient(to left,
      rgb(8 6 10 / 0.92) 0%,
      rgb(8 6 10 / 0.7) 28%,
      rgb(8 6 10 / 0.22) 52%,
      transparent 72%),
    linear-gradient(to bottom,
      rgb(8 6 10 / 0.7) 0%,
      transparent 34%,
      transparent 62%,
      rgb(8 6 10 / 0.72) 100%);
}

.scrim--bottom {
  background:
    linear-gradient(to bottom,
      rgb(8 6 10 / 0.72) 0%,
      rgb(8 6 10 / 0.15) 26%,
      transparent 46%,
      rgb(8 6 10 / 0.72) 82%,
      rgb(8 6 10 / 0.97) 100%);
}

/* Even wash — for pages where UI sits across the whole frame. */
.scrim--full { background: rgb(8 6 10 / 0.62); }

/* --- Cinematic finish ---------------------------------------------------
   A vignette plus a very fine static grain. Both are decorative only and
   sit above the artwork but below every interactive element.            */
.art-stage__grade {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  pointer-events: none;
  background: var(--vignette);
}
.art-stage__grade::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.art-stage__content {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  /* A soft dark bloom behind the type. Invisible as an effect, but it keeps
     white text legible wherever it happens to fall on busy artwork — which
     matters as new images get dropped into these frames. */
  text-shadow: 0 2px 26px rgb(8 6 10 / 0.55);
}
/* Buttons sit on their own solid fills and do not want it. */
.art-stage__content .btn { text-shadow: none; }

/* Pages that have no artwork yet fall back to a branded gradient
   rather than a broken image. */
.art-stage--placeholder .art-stage__media {
  background-image:
    radial-gradient(90% 70% at 18% 12%, rgb(255 47 146 / 0.5), transparent 62%),
    radial-gradient(70% 60% at 88% 82%, rgb(138 216 255 / 0.28), transparent 60%),
    linear-gradient(160deg, #1a0a18 0%, var(--ink) 55%, #10060f 100%);
}

/* ==========================================================================
   2. SITE HEADER + NAVIGATION
   Rendered by site.js from assets/js/site.config.js so the menu only
   ever has to be edited in one place.
   ========================================================================== */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition:
    background-color var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

/* Over artwork the bar is transparent, with just enough top shade to keep
   the links readable. Once the page scrolls it becomes solid. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(8 6 10 / 0.75), transparent);
  transition: opacity var(--dur) var(--ease);
}
.site-header.is-scrolled {
  background-color: rgb(8 6 10 / 0.86);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--line);
}
.site-header.is-scrolled::before { opacity: 0; }

.site-header__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

/* --- Wordmark ----------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em;
  /* The wordmark is the link home, so it carries a full touch target. The
     header centres it, so the extra height is invisible. */
  padding-block: 0.625rem;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.brand__dot {
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 12px var(--pink);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur-fast) var(--ease);
}
.brand:hover .brand__dot { transform: scale(1.45); background: var(--blue); box-shadow: 0 0 14px var(--blue); }

/* --- Primary nav --------------------------------------------------------- */
.nav { display: none; }
@media (min-width: 64rem) { .nav { display: block; } }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.2rem + 1.6vw, 2.25rem);
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-small);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease);
}

/* Widens the clickable box to a full 44px without moving the text or the
   underline. Vertical only, so neighbouring links never overlap. */
.nav__link::before {
  content: "";
  position: absolute;
  inset-block: -6px;
  inset-inline: 0;
}

/* Underline sweeps in from the left on hover */
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--paper); }
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }

.nav__link[aria-current="page"] { color: var(--pink); }
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
/* Scoped to beat .btn's own display rule, which is defined further down. */
.site-header__actions .site-header__cta { display: none; }
@media (min-width: 64rem) {
  .site-header__actions .site-header__cta { display: inline-flex; }
}

/* --- Menu button --------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  /* This is the only way into the menu on a phone, so it gets a full
     44px target even though the bars themselves are smaller. */
  min-height: 44px;
  margin-inline-end: calc(var(--sp-3) * -1);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
@media (min-width: 64rem) { .nav-toggle { display: none; } }

.nav-toggle__bars {
  position: relative;
  width: 26px;
  height: 14px;
  flex: none;
}
.nav-toggle__bars span {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: var(--paper);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   3. MOBILE / TABLET MENU
   ========================================================================== */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-7);
  background:
    radial-gradient(80% 55% at 12% 8%, rgb(255 47 146 / 0.26), transparent 62%),
    radial-gradient(70% 50% at 90% 92%, rgb(138 216 255 / 0.16), transparent 60%),
    rgb(8 6 10 / 0.97);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease),
    visibility 0s linear var(--dur);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* The header rides above the open panel so the wordmark stays put and the
   button — now an X — is still visible and clickable to close it. */
body.is-menu-open .site-header { z-index: calc(var(--z-menu) + 1); }
body.is-menu-open .site-header::before { opacity: 0; }
body.is-menu-open .site-header.is-scrolled {
  background-color: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.menu__inner {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  flex: 1;
}

.menu__list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.1rem, 0.5vh, 0.6rem);
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: clamp(0.35rem, 1.2vh, 0.75rem);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(2rem, 1rem + 7vw, 3.75rem);
  line-height: 1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--paper);
  /* Each link eases up in sequence once the panel opens */
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    color var(--dur-fast) var(--ease);
}
.menu.is-open .menu__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(60ms + var(--i, 0) * 45ms);
}
.menu__link:hover,
.menu__link:focus-visible { color: var(--pink); }
.menu__link[aria-current="page"] { color: var(--pink); }

.menu__index {
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  color: var(--pink-light);
  opacity: 0.75;
}

.menu__foot {
  margin-block-start: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line);
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 0.9em 1.6em;
  min-height: 44px; /* comfortable touch target */
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-small);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition:
    transform var(--dur) var(--ease-out),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn__arrow {
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--pink);
  color: var(--ink);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--pink-bright);
  box-shadow: var(--glow-pink);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--paper);
  background: rgb(255 255 255 / 0.04);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.btn--blue {
  background: var(--blue);
  color: var(--ink);
}
.btn--blue:hover,
.btn--blue:focus-visible { box-shadow: var(--glow-blue); }

.btn--sm { padding: 0.7em 1.15em; font-size: var(--t-micro); min-height: 38px; }
.btn--block { width: 100%; }

/* Quiet text link with an animated rule */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-small);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--pink);
  transition: color var(--dur-fast) var(--ease), gap var(--dur) var(--ease-out);
}
.link-arrow:hover,
.link-arrow:focus-visible { color: var(--paper); gap: var(--sp-4); }

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero {
  min-height: 100svh;
  display: grid;
  align-items: end;
}
.hero .art-stage__content {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: calc(var(--header-h) + var(--sp-6)) clamp(3rem, 8vh, 6rem);
  display: grid;
  gap: var(--sp-5);
  justify-items: start;
}

.hero__title { max-width: 16ch; }
.hero__lede { max-width: 42ch; }

/* Button row — used in the hero, on panels and inside page heads */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-2);
}

/* Bottom-right scroll hint */
.scroll-cue {
  position: absolute;
  inset-block-end: clamp(1.25rem, 3vh, 2rem);
  inset-inline-end: var(--gutter);
  z-index: var(--z-content);
  display: none;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-faint);
  transition: color var(--dur-fast) var(--ease);
}
@media (min-width: 48rem) { .scroll-cue { display: inline-flex; } }
.scroll-cue:hover { color: var(--paper); }
.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 46px;
  background: var(--line-strong);
  overflow: hidden;
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 40%;
  background: var(--pink);
  animation: cue 2.4s var(--ease-in-out) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue__line::after { animation: none; transform: none; }
}

/* ==========================================================================
   6. TICKER
   A slow marquee strip. Pauses on hover and on keyboard focus, and holds
   still entirely for reduced-motion visitors.
   ========================================================================== */
.ticker {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-4);
  background: var(--ink-2);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll var(--ticker-speed, 46s) linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

/* One half of the loop. The track holds two identical copies. */
.ticker__item {
  display: flex;
  align-items: center;
}
.ticker__item > li {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-inline-end: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-small);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}
/* Pink dot separating each phrase */
.ticker__item > li::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pink);
  flex: none;
}
@keyframes ticker-scroll {
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ==========================================================================
   7. PORTAL GRID
   The six section doorways. A hairline grid that fills with pink on hover.
   ========================================================================== */
/* Six doorways, so the columns are set explicitly to divide evenly at every
   size — 1 up on phones, 2 across on tablet, 3 x 2 on desktop. An auto-fit
   grid would leave a dead cell at four columns. */
.portals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 40rem) { .portals { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .portals { grid-template-columns: repeat(3, 1fr); } }

.portal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: clamp(11rem, 22vw, 15rem);
  padding: var(--sp-5);
  background: var(--ink);
  color: var(--fg);
  transition: color var(--dur) var(--ease);
}

/* Pink wash rises from the bottom edge */
.portal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, var(--pink-bright), var(--pink) 55%, var(--pink-deep));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur) var(--ease-out);
}
.portal:hover::before,
.portal:focus-visible::before { transform: scaleY(1); }
.portal:hover,
.portal:focus-visible { color: var(--ink); }

.portal__index {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  color: var(--pink-light);
  transition: color var(--dur) var(--ease);
}
.portal:hover .portal__index,
.portal:focus-visible .portal__index { color: rgb(8 6 10 / 0.65); }

.portal__title {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h3);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  line-height: 1;
}

.portal__note {
  font-size: var(--t-small);
  color: var(--fg-faint);
  transition: color var(--dur) var(--ease);
  max-width: 26ch;
}
.portal:hover .portal__note,
.portal:focus-visible .portal__note { color: rgb(8 6 10 / 0.75); }

.portal__arrow {
  margin-block-start: auto;
  align-self: flex-start;
  transition: transform var(--dur) var(--ease-out);
}
.portal:hover .portal__arrow,
.portal:focus-visible .portal__arrow { transform: translateX(6px); }

/* ==========================================================================
   8. SECTION HEADER
   ========================================================================== */
.section-head {
  display: grid;
  gap: var(--sp-4);
  margin-block-end: var(--sp-7);
  max-width: 62ch;
}
.section-head--split {
  max-width: none;
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 56rem) {
  .section-head--split {
    grid-template-columns: 1fr auto;
    gap: var(--sp-6);
  }
}

/* ==========================================================================
   9. PAGE HEAD — the compact art hero used on inner pages
   ========================================================================== */
.page-head {
  min-height: clamp(26rem, 62svh, 40rem);
  display: grid;
  align-items: end;
}
.page-head .art-stage__content {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: calc(var(--header-h) + var(--sp-7)) clamp(2.5rem, 6vh, 4.5rem);
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}

/* ==========================================================================
   10. PANEL — a simple content card used across pages
   ========================================================================== */
.panel {
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--sp-4);
}
.panel--glow {
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(255 47 146 / 0.14), transparent 60%),
    var(--ink-2);
}

/* Small status pill. fit-content keeps it hugging its text even when it is a
   direct child of a grid container like .panel, which would stretch it. */
.tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4em 0.85em;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid rgb(138 216 255 / 0.4);
  border-radius: var(--radius-pill);
  background: rgb(138 216 255 / 0.08);
}
.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.tag--pink {
  color: var(--pink);
  border-color: rgb(255 47 146 / 0.42);
  background: rgb(255 47 146 / 0.1);
}

/* ==========================================================================
   11. SITE FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  border-block-start: 1px solid var(--line);
  background:
    radial-gradient(70% 100% at 50% 100%, rgb(255 47 146 / 0.12), transparent 70%),
    var(--ink);
}
.site-footer__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--sp-8) var(--sp-6);
  display: grid;
  gap: var(--sp-7);
}

.footer__top {
  display: grid;
  gap: var(--sp-6);
}
@media (min-width: 56rem) {
  .footer__top {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

.footer__wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(2rem, 1rem + 5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: var(--track-mega);
  text-transform: lowercase;
  color: var(--paper);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--sp-6);
}
.footer__col-title {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-block-end: var(--sp-3);
}
.footer__list { display: grid; gap: var(--sp-2); }
.footer__link {
  position: relative;
  font-size: var(--t-small);
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease);
  width: fit-content;
}
/* Grows the tappable area to fill the full row pitch without moving a single
   pixel of the layout. It stops exactly at the gap, so neighbouring links
   never overlap each other's target. */
.footer__link::after {
  content: "";
  position: absolute;
  inset-block: calc(var(--sp-2) / -2);
  inset-inline: 0;
}
.footer__link:hover,
.footer__link:focus-visible { color: var(--pink); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--fg-faint);
}

/* Social row — shared by the footer and the mobile menu */
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--fg-muted);
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    transform var(--dur) var(--ease-out);
}
.social:hover,
.social:focus-visible {
  color: var(--ink);
  background: var(--pink);
  border-color: var(--pink);
  transform: translateY(-3px);
}
.social svg { width: 18px; height: 18px; }

.to-top {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease);
}
.to-top:hover, .to-top:focus-visible { color: var(--pink); }
.to-top svg { transition: transform var(--dur) var(--ease-out); }
.to-top:hover svg { transform: translateY(-3px); }