/* ==========================================================================
   GTA VI ÍSLAND — gtaisland.com
   Design system v1 — dark-first, warm-dark, Vice-sunset palette.
   No frameworks, no webfonts, no build step. Works from file://.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* base */
  --ink:            #12102A;   /* single page-ground navy, shared with nav band */
  --ink-rgb:        18, 16, 42;            /* rgb triplet of --ink */
  --ink-deep:       #0E0D1D;
  --hero-purple:    #2A2140;
  --scrim:          10, 9, 20;            /* rgb triplet of #0A0914 */

  /* ribbon */
  --ribbon-light:   #C09AE0;
  --ribbon-dark:    #A67BCE;
  --sil-purple:     #7A4FA5;
  --sil-purple-2:   #5F3A8A;

  /* accents */
  --pink:           #F9C9D4;
  --pink-hover:     #FDDDE4;
  --cta-ink:        #171430;
  --cream:          #F7ECC3;

  /* violet structure */
  --frame:          #4C2A66;
  --frame-edge:     #6A3E8C;

  /* sunset sky */
  --sun-1: #6C4E9E;
  --sun-2: #8B6BB8;
  --sun-3: #B285C2;
  --sun-4: #E89CB8;
  --sun-5: #F5A8BC;

  /* logotype */
  --logo-pink:      #F591C1;
  --logo-orange:    #F9A05C;

  /* panels */
  --panel-1: #4E3A86;
  --panel-2: #8B5F9E;
  --panel-3: #D98F96;
  --panel-4: #F2A987;
  --panel-palm:     #3E2C6E;

  /* floating pills */
  --pill-dark:      rgba(25, 23, 53, .7);

  /* status chips */
  --ok:             #47D6AE;   /* staðfest  */
  --ok-text:        #8FEED4;
  --warn:           #F0B36A;   /* orðrómur  */
  --warn-text:      #F8CE93;

  /* type stacks — one grotesque family, three voices */
  --font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               Helvetica, Arial, sans-serif;
  --font-thin: "Segoe UI", "Helvetica Neue", "HelveticaNeue-Thin", Helvetica,
               Arial, sans-serif;
  --font-heavy: "Arial Narrow", Bahnschrift, "Helvetica Neue Condensed",
                "Liberation Sans Narrow", "Segoe UI", Arial, sans-serif;

  --ease-out-cine: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1160px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

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

h1, h2, h3, h4, p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection { background: var(--logo-pink); color: var(--cta-ink); }

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

/* --------------------------------------------------------------------------
   3. Bilingual switching — html[data-lang] hides the other voice
   -------------------------------------------------------------------------- */
html[data-lang="is"] .lang-en { display: none !important; }
html[data-lang="en"] .lang-is { display: none !important; }

/* --------------------------------------------------------------------------
   4. Type voices
   VOICE 1 (thin, whispers):  .t-thin   — 200 wt, tracked caps
   VOICE 2 (heavy, shouts):   .t-heavy  — 700 wt, condensed, tracking 0
   VOICE 3 (ui/body):         inherited body styles
   -------------------------------------------------------------------------- */
.t-thin {
  font-family: var(--font-thin);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: .24em;
  line-height: 1.15;
  color: #FFFFFF;
}

.t-heavy {
  font-family: var(--font-heavy);
  font-weight: 700;
  font-stretch: semi-condensed;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
}

.eyebrow-tiny {
  font-family: var(--font-thin);
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5em;
  text-indent: .5em;      /* optically recentre tracked caps */
  color: rgba(255, 255, 255, .92);
}

/* --------------------------------------------------------------------------
   5. Pills
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 13px 28px;
  white-space: nowrap;
  transition: transform 180ms ease-out, background-color 180ms ease-out;
  will-change: transform;
}
.pill:hover  { transform: scale(1.04); }
.pill:active { transform: scale(.98); }

.pill--pink  { background: var(--pink); color: var(--cta-ink); }
.pill--pink:hover { background: var(--pink-hover); }

.pill--white { background: #FFFFFF; color: var(--cta-ink); }
.pill--white:hover { background: #F4F0FA; }

.pill--dark {
  background: var(--pill-dark);
  color: #FFFFFF;
  font-size: 13px;
  padding: 10px 20px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.pill--sm { font-size: 13px; padding: 10px 22px; }

.pill .arrow { font-family: var(--font-body); font-weight: 700; }

/* --------------------------------------------------------------------------
   6. Announcement ribbon
   -------------------------------------------------------------------------- */
.ribbon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 10px 72px;
  text-align: center;
  background: linear-gradient(90deg,
    var(--ribbon-dark) 0%, var(--ribbon-light) 50%, var(--ribbon-dark) 100%);
  overflow: hidden;
  z-index: 60;
}
.ribbon:hover { filter: brightness(1.05); }

.ribbon-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #141126;                /* ink navy — dark text on the lilac band */
  z-index: 2;
}

/* the palette's one and only red — reserved for the Netflix wordmark */
.ribbon-netflix { color: #E50914; }

.ribbon-bird { flex: none; opacity: .9; }

.ribbon-palm {
  position: absolute;
  bottom: -8px;
  width: 128px;               /* 200x120 viewBox -> ~77px tall in a 60px band */
  height: auto;
  pointer-events: none;
}
.ribbon-palm--left  { left: -10px; }
.ribbon-palm--right { right: -10px; transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color 240ms ease, box-shadow 240ms ease;
}
.site-header.is-scrolled {
  background: rgba(var(--ink-rgb), .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* 2px full-width rule under the banded nav — CTA pink. Orange stays
   reserved for the VI numeral and brand mark; pink = interactive. */
.site-header.is-scrolled::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--pink);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 14px 44px;
}

/* brand lockup — original, NOT the Rockstar mark */
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex: none;
}
.brand-top {
  font-family: var(--font-heavy);
  font-weight: 700;
  font-stretch: semi-condensed;
  font-size: 21px;
  letter-spacing: .04em;
  background: linear-gradient(180deg, var(--logo-pink), var(--logo-orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-sub {
  margin-top: 4px;
  font-family: var(--font-thin);
  font-weight: 300;
  font-size: 9.5px;
  letter-spacing: .52em;
  color: rgba(255, 255, 255, .92);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: 12px;
}
.site-nav a {
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .82);
  padding: 6px 2px;
  transition: color 160ms ease;
}
.site-nav a:hover { color: #FFFFFF; }

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* language toggle pill */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 3px;
  border-radius: 999px;
  background: var(--pill-dark);
  border: 1px solid rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lang-toggle button {
  min-width: 42px;
  height: 28px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .75);
  transition: background-color 180ms ease, color 180ms ease;
}
.lang-toggle button:hover { color: #FFFFFF; }
.lang-toggle button[aria-pressed="true"] {
  background: var(--pink);
  color: var(--cta-ink);
}

/* compact account link — person silhouette, sized to sit beside the toggle */
.account-link {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--pill-dark);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .82);
  transition: color 160ms ease, border-color 160ms ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.account-link:hover { color: #FFFFFF; border-color: rgba(249, 201, 212, .55); }

/* hamburger — two short bars, equals-sign style */
.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 40px;
  padding: 6px 8px;
}
.menu-btn span {
  display: block;
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: #FFFFFF;
  transition: transform 200ms ease, opacity 200ms ease;
}
.menu-open .menu-btn span:first-child { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-btn span:last-child  { transform: translateY(-5px) rotate(-45deg); }

/* mobile menu panel */
.menu-panel {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 24px 26px;
  background: rgba(14, 13, 29, .97);
  box-shadow: 0 24px 40px rgba(10, 9, 20, .5);
}
.menu-open .menu-panel { display: flex; }
.menu-panel a {
  font-family: var(--font-thin);
  font-weight: 300;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .24em;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.menu-panel .pill { align-self: flex-start; margin-top: 18px; }

/* skip link */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--pink);
  color: var(--cta-ink);
  font-weight: 600;
  transition: top 150ms ease;
}
.skip-link:focus-visible { top: 12px; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100svh - 60px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: -68px;          /* let the sticky header float over the sky   */
  padding-top: 68px;
  background-color: #2B1055;
  /* Image slot sits ON TOP of the layered sunset fallback — design holds
     even if the file is missing. The sky ramp keeps full chroma from zenith
     to horizon (a stop at least every 15% of the run, so no interpolation
     dips through neutral gray-brown) and a 2% monochrome noise tile sits on
     top to suppress banding. No neutral overlay touches the mid-band. */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.02 0'/></filter><rect width='128' height='128' filter='url(%23n)'/></svg>"),
    url("../assets/img/hero-vice-reykjavik.jpg"),
    linear-gradient(180deg,
      #2B1055 0%,
      #4A1F73 18%,
      #6A2C8F 35%,
      #8E2F90 48%,
      #B0338F 60%,
      #CC4487 73%,
      #E75480 85%,
      #EE6187 100%);
  background-size: auto, cover, 100% 100%;
  background-position: center bottom;
  background-repeat: repeat, no-repeat, no-repeat;
}

/* identity scrim — a dark ground behind tagline, monogram and countdown,
   sitting between the sky art and the hero content. Deep saturated purple,
   never neutral gray: multiplied over the magenta sky it darkens without
   smudging the hue path. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 62% 55% at 50% 52%,
      rgba(34, 12, 62, .5) 0%,
      rgba(34, 12, 62, .3) 45%,
      transparent 75%),
    linear-gradient(180deg,
      transparent 30%,
      rgba(34, 12, 62, .45) 68%,
      rgba(20, 10, 44, .88) 100%);
  pointer-events: none;
}

/* original CSS/SVG scene — palms + Reykjavík silhouettes + aurora */
.hero-art {
  position: absolute;
  inset: -60px 0 0 0;         /* headroom for parallax drift */
  pointer-events: none;
}
.hero-art svg {
  width: 100%;
  height: calc(100% + 60px);
}

/* scroll-driven scrim (JS drives opacity .72 -> .1) */
.scrim {
  position: absolute;
  inset: 0;
  background: rgb(var(--scrim));
  opacity: .12;
  pointer-events: none;
  transition: opacity 120ms linear;
}

/* bottom blend back into ink navy — z-index 1 keeps it above the identity
   scrim (later paint order) so the hand-off into the sections stays smooth */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 220px;
  z-index: 1;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), 0), var(--ink));
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 24px 24px;
  text-align: center;
}

.hero-eyebrow {
  font-size: 13px;
  letter-spacing: .5em;
  text-indent: .5em;
  font-weight: 300;
  text-shadow: 0 1px 12px rgba(22, 13, 36, .6);
}

/* original lockup: thin GTA / gradient VI / thin ÍSLAND */
.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.lockup-gta {
  font-family: var(--font-thin);
  font-weight: 200;
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: .58em;
  text-indent: .58em;
  color: #FFFFFF;
  text-shadow: 0 1px 14px rgba(10, 9, 20, .5);
}
.lockup-vi {
  font-family: var(--font-heavy);
  font-weight: 700;
  font-stretch: semi-condensed;
  font-size: clamp(110px, 17vw, 196px);
  letter-spacing: .02em;
  margin: 2px 0 6px;
  background: linear-gradient(180deg, #FF9E5E 0%, #FF5E62 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(28, 12, 44, .6);
  filter: drop-shadow(0 6px 28px rgba(28, 10, 48, .55));
}
.lockup-island {
  font-family: var(--font-thin);
  font-weight: 200;
  font-size: clamp(15px, 1.8vw, 22px);
  letter-spacing: .74em;
  text-indent: .74em;
  color: #FFFFFF;
  text-shadow: 0 1px 14px rgba(10, 9, 20, .5);
}

/* countdown — the beating heart */
.countdown {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 3vw, 30px);
  padding: 18px 30px 12px;
  scroll-margin-top: 120px;
}
.countdown::before {
  content: "";
  position: absolute;
  inset: -34px -60px;
  /* near-black purple (matches the skyline silhouette), not neutral ink —
     the white digits read as sitting on dark silhouette, not on the sun */
  background: radial-gradient(ellipse at center,
    rgba(26, 15, 46, .55), rgba(26, 15, 46, 0) 70%);
  pointer-events: none;
}
.count-unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 86px;
}
.count-num {
  font-family: var(--font-heavy);
  font-weight: 700;
  font-stretch: semi-condensed;
  font-size: clamp(52px, 7vw, 84px);
  line-height: 1;
  color: #FFF7EC;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 18px rgba(28, 10, 48, .55);
}
.count-label {
  font-family: var(--font-thin);
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .34em;
  text-indent: .34em;
  color: rgba(255, 247, 236, .75);
  text-shadow: 0 1px 8px rgba(28, 10, 48, .55);
}
.count-sep {
  position: relative;
  font-family: var(--font-heavy);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1;
  padding-top: clamp(6px, 1vw, 12px);
  color: #FFF7EC;
  text-shadow: 0 2px 18px rgba(28, 10, 48, .55);
  animation: heartbeat 2.2s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.countdown-caption {
  position: relative;
  margin-top: -8px;
  font-family: var(--font-heavy);
  font-weight: 700;
  font-stretch: semi-condensed;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 10px rgba(10, 9, 20, .7);
}
.countdown-done-msg {
  display: none;
  font-family: var(--font-heavy);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(30px, 5vw, 52px);
  color: #FFF7EC;
  text-shadow: 0 2px 18px rgba(28, 10, 48, .55);
}
.countdown--done .count-unit,
.countdown--done .count-sep { display: none; }
.countdown--done .countdown-done-msg { display: block; }

/* hero bottom row: date | CTA | platforms */
.hero-bottom {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 44px 58px;
}
.hero-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(10, 9, 20, .6);
}
.hero-date .date-coming { font-size: 24px; }
.hero-date .date-full   { font-size: 29px; }

.platforms {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--font-heavy);
  font-weight: 700;
  font-stretch: semi-condensed;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 10px rgba(10, 9, 20, .6);
}

/* chevron scroll cue */
.chevron {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  padding: 8px;
  color: var(--pink);
  animation: chevron-bounce 2.2s ease-in-out infinite;
}
@keyframes chevron-bounce {
  0%, 100% { transform: translate(-50%, 0);   opacity: .7; }
  50%      { transform: translate(-50%, 6px); opacity: 1;  }
}

/* --------------------------------------------------------------------------
   9. Section scaffolding
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding: 96px 24px;
  scroll-margin-top: 70px;
}
.section-inner { max-width: var(--wrap); margin: 0 auto; }

.section-head {
  text-align: center;
  margin-bottom: 56px;
}
.section-title {
  font-size: clamp(28px, 4.2vw, 56px);
  letter-spacing: .26em;
  text-indent: .26em;
}
.section-sub {
  margin-top: 16px;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .95);
}
.section-sub .bar {
  font-family: var(--font-thin);
  font-weight: 200;
  opacity: .4;
  padding: 0 10px;
}

/* violet header band descending from the nav — re-ties interior pages and
   the news section to the hero palette. The outer stop equals the page
   ground (--ink), so the band dissolves with no seam. */
.section--band::before,
.article-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: radial-gradient(120% 140% at 50% -40%,
    #4A2B63 0%, #1A1633 55%, #12102A 100%);
  pointer-events: none;
}
.section--band::before { top: 0; left: 0; right: 0; height: 520px; }
.article-head::before  { top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; }

/* --------------------------------------------------------------------------
   10. Status chips
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1;
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.chip--confirmed {
  color: var(--ok-text);
  background: rgba(71, 214, 174, .13);
  border: 1px solid rgba(71, 214, 174, .45);
}
.chip--rumor {
  color: var(--warn-text);
  background: rgba(240, 179, 106, .13);
  border: 1px solid rgba(240, 179, 106, .5);
}
.chip--soon {
  color: rgba(255, 255, 255, .92);
  background: rgba(25, 23, 53, .55);
  border: 1px solid rgba(255, 255, 255, .35);
}
.chip--on-media {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: rgba(10, 9, 20, .55);
}

/* --------------------------------------------------------------------------
   11. News cards — framed collage language (Mode A)
   -------------------------------------------------------------------------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 26px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #191636;
  border: 4px solid var(--frame);
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--frame-edge), 0 18px 40px rgba(10, 9, 20, .45);
  overflow: hidden;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
a.card-link::after {                 /* stretched link */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--frame-edge), 0 26px 54px rgba(10, 9, 20, .6);
}
.card:focus-within { outline: 2px solid var(--pink); outline-offset: 3px; }
.card:focus-within a.card-link:focus-visible { outline: none; }

.card--featured { grid-column: span 4; border-width: 6px; }
/* the featured card lives in a full-width .pin-stage row, so the four
   remaining cards flow 2-up */
.card--tall     { grid-column: span 3; }
.card--std      { grid-column: span 3; }
.card--wide     { grid-column: span 6; flex-direction: row; align-items: center; }

.card-media {
  position: relative;
  min-height: 170px;
  background-size: cover;
  background-position: center;
  border-bottom: 4px solid var(--frame);
  overflow: hidden;              /* clips the drifting .media-bg layer */
}
.card--featured .card-media { min-height: 320px; border-bottom-width: 6px; }

/* featured-artwork overlays — no flat darkening anywhere:
   1. top-only gradient so the art meets the indigo header band cleanly;
   2. one warm coral glow over the TV screen — the accent colour's single
      spend inside the scene, echoing the VI logotype;
   3. bottom ink confined to the caption zone (below 62%) so the mid-scene
      keeps its full tonal range. */
.card--featured .card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(16, 10, 34, .85) 0%,
      rgba(16, 10, 34, .25) 30%,
      rgba(16, 10, 34, 0) 60%),
    radial-gradient(26% 38% at 21% 44%,
      rgba(255, 122, 89, .4), transparent 70%),
    linear-gradient(180deg,
      rgba(18, 16, 42, 0) 62%,
      rgba(18, 16, 42, .78) 100%);
  pointer-events: none;
}

/* gradient variants — image slots layer ON TOP of these fallbacks */
.media--extended {
  background-image:
    url("../assets/img/card-extended-look.jpg"),
    linear-gradient(160deg, var(--panel-1) 0%, var(--panel-2) 45%,
                    var(--panel-3) 75%, var(--panel-4) 100%);
}
/* the extended-look art is painted dark — lift its midtones so figure
   silhouettes and window mullions separate from the page ground (~3:1
   luminance) instead of crushing into it */
.media--extended .media-bg {
  filter: brightness(1.35) saturate(1.15) contrast(1.05);
}
.media--sunset {
  background-image:
    linear-gradient(165deg, var(--sun-1) 0%, var(--sun-3) 55%, var(--sun-5) 100%);
}
.media--neon {
  background-image:
    linear-gradient(160deg, #3E1E5E 0%, #8F2D7E 45%, #E85C8F 78%, var(--logo-orange) 100%);
}
.media--dusk {
  background-image:
    linear-gradient(165deg, var(--hero-purple) 0%, var(--sun-1) 55%, var(--sun-3) 100%);
}
.media--violet {
  background-image:
    linear-gradient(165deg, var(--frame) 0%, var(--sil-purple) 55%, var(--sun-3) 100%);
}

/* full-bleed image layer — inherits the parent's background (variant class
   stays on the container) and bleeds 64px top/bottom so the pin-stage
   scrub transform never reveals a seam. Static without JS / with reduced
   motion, where it simply mirrors the container's own background. */
.media-bg {
  position: absolute;
  inset: -64px 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* translucent palm silhouette bleeding in from the corner */
.card-media::after,
.panel::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  height: 82%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'><g fill='%233E2C6E' fill-opacity='.4'><path d='M200 120 C 160 58 108 42 38 46 C 104 58 146 78 158 120 Z'/><path d='M200 120 C 190 68 168 30 126 10 C 157 45 174 86 172 120 Z'/><path d='M200 120 C 197 92 198 55 200 28 C 185 60 177 96 182 120 Z'/><path d='M200 120 C 172 92 132 82 92 88 C 134 92 166 104 184 120 Z'/></g></svg>");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  pointer-events: none;
}

.card-media .chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

/* small VI mark overlapping the featured collage — Mode A logotype echo */
.card-vi {
  position: absolute;
  right: 22px;
  bottom: 12px;
  z-index: 1;                    /* keeps the mark above the media scrim */
  font-family: var(--font-heavy);
  font-weight: 700;
  font-stretch: semi-condensed;
  font-size: 64px;
  line-height: 1;
  background: linear-gradient(180deg, var(--logo-pink), var(--logo-orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .9);
  filter: drop-shadow(0 4px 14px rgba(10, 9, 20, .5));
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 26px;
  flex: 1;
}
.card--featured .card-body { padding: 28px 32px 32px; }
.card--featured .card-body .chip { align-self: flex-start; }

.card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-heavy);
  font-weight: 700;
  font-stretch: semi-condensed;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .68);
}
.card-meta .dot { opacity: .45; }

.card-title {
  font-family: var(--font-heavy);
  font-weight: 700;
  font-stretch: semi-condensed;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.14;
  letter-spacing: .01em;
  color: #FFFFFF;
}
.card--featured .card-title { font-size: clamp(24px, 2.6vw, 32px); }
.card:hover .card-title a { color: var(--pink-hover); }
.card-title a { transition: color 160ms ease; }

.card-summary {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card--featured .card-summary { -webkit-line-clamp: 4; font-size: 16px; }

.card-more {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--pink);
}
.card-soon {
  margin-top: auto;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .5);
}

/* compact wide card (rumor strip) */
.card--wide { border-width: 3px; background: #171432; }
.card--wide .card-body {
  flex-direction: row;
  align-items: center;
  gap: 22px;
  width: 100%;
  padding: 20px 26px;
}
.card--wide .chip { flex: none; }
.card--wide .card-title { font-size: 19px; flex: 1 1 40%; }
.card--wide .card-summary {
  flex: 1 1 46%;
  -webkit-line-clamp: 2;
  font-size: 14px;
  margin: 0;
}
.card--wide .card-meta { flex: none; margin: 0; }

/* --------------------------------------------------------------------------
   12. Sunset panels (guides / article-layout language)
   -------------------------------------------------------------------------- */
.panel {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background-image: linear-gradient(180deg,
    var(--panel-1) 0%, var(--panel-2) 40%, var(--panel-3) 74%, var(--panel-4) 100%);
  background-size: cover;
  background-position: center;
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                    /* keeps the scrim above a .media-bg layer */
  background: linear-gradient(180deg,
    rgba(10, 9, 20, .05) 30%, rgba(10, 9, 20, .62) 100%);
  pointer-events: none;
}

.guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.guide {
  min-height: 480px;             /* top ~45% art zone, bottom text zone */
  display: flex;
  align-items: flex-end;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
.guide:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(10, 9, 20, .55);
}

/* Guide-card anatomy — the same three layers on every card:
   ::before      art zone (a per-card crop of an illustration; gradient-only
                 cards leave it empty and show the panel gradient through),
   .guide-motif  bottom-anchored silhouette recycled from the hero scene,
   ::after       ONE scrim bridging art and text — near-opaque below the
                 55% line, so copy never sits on raw art. */
.guide::before {
  z-index: 0;                    /* art sits under scrim, motif and copy */
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.guide::after {
  inset: 0;                      /* retasks the corner palm as the scrim */
  width: auto;
  height: auto;
  background: linear-gradient(180deg,
    rgba(24, 16, 44, 0) 0%,
    rgba(24, 16, 44, .85) 38%,
    rgba(24, 16, 44, .97) 55%);
}

/* De-duplicated art: each use of a shared illustration gets its own crop,
   orientation and hue, so no piece repeats verbatim in one viewport.
   (auto-height sizes keep the zoomed crop covering the full card.) */
.guide--preorder::before {
  background-image: url("../assets/img/card-preorder.jpg");
  background-size: auto 200%;
  background-position: 15% 75%;
}
.guide--preorder-b::before {
  background-image: url("../assets/img/card-preorder.jpg");
  background-size: auto 150%;
  background-position: 80% 10%;
  transform: scaleX(-1);
  filter: hue-rotate(-20deg) saturate(1.1);
}
.guide--handbook::before {
  background-image: url("../assets/img/card-guide.jpg");
}
.guide--neon {
  background-image:
    linear-gradient(180deg, #3E1E5E 0%, #8F2D7E 48%, #E85C8F 82%, var(--logo-orange) 100%);
}
.guide--handbook {
  background-image:
    linear-gradient(180deg, var(--hero-purple) 0%, var(--sun-1) 45%,
                    var(--sun-3) 78%, var(--sun-5) 100%);
}

/* motif silhouettes (palm fronds, Hallgrímskirkja, Harpa) — inline SVG,
   bottom-anchored, above the scrim but behind the copy */
.guide-motif {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;                    /* over the scrim; .panel-inner follows in
                                    the DOM, so copy still paints on top */
  width: 100%;
  height: 40%;
  pointer-events: none;
}

.panel-inner {
  position: relative;
  z-index: 2;                    /* above scrim and motif */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px 30px 30px;
}
.panel-title {
  font-family: var(--font-heavy);
  font-weight: 700;
  font-stretch: semi-condensed;
  text-transform: uppercase;
  font-size: 27px;
  line-height: 1.08;
  color: var(--cream);
  text-shadow: 0 2px 14px rgba(10, 9, 20, .5);
}
.panel-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 8px rgba(10, 9, 20, .5);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   13. Community strip
   -------------------------------------------------------------------------- */
.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: transform 180ms ease-out, background-color 180ms ease-out,
              border-color 180ms ease-out;
}
a.tile:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(249, 201, 212, .45);
}
.tile-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(249, 201, 212, .12);
  border: 1px solid rgba(249, 201, 212, .4);
  color: var(--pink);
}
.tile-title { font-size: 16.5px; font-weight: 600; color: #FFFFFF; }
.tile-text  { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .7); }
.tile .chip { align-self: flex-start; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-deep);
  border-top: 1px solid rgba(192, 154, 224, .16);
  padding: 64px 24px 42px;
  text-align: center;
}
.footer-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
}
.footer-nav a {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .7);
}
.footer-nav a:hover { color: #FFFFFF; }
.footer-disclaimer {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .55);
  max-width: 68ch;
}
.footer-small {
  font-size: 12px;
  color: rgba(255, 255, 255, .4);
}

/* --------------------------------------------------------------------------
   15. Motion utilities
   -------------------------------------------------------------------------- */
/* visible by default — the fade-up is opt-in. JS adds .js-anim to <html>
   only once it has confirmed it will actually animate (IO available, no
   reduced motion), so a script failure or an observer that never fires can
   never strand content at partial opacity. */
.reveal { opacity: 1; transform: none; }
html.js-anim .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out-cine), transform 700ms var(--ease-out-cine);
}
html.js-anim .reveal.is-visible {
  opacity: 1;
  transform: none;
}

[data-parallax] { will-change: transform; }

/* pinned scroll-scrub stage — full-bleed set piece. JS exposes scroll
   progress as --p (0 -> 1) on the stage each frame; the ARTWORK scrubs with
   it — a slow push-out plus a dawn-style brighten/saturate — and the caption
   staggers in element by element. Inert without JS (plain block flow), and
   var(--p, 1) defaults everything to the fully-lit end state. */
.pin-stage {
  grid-column: 1 / -1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
html.js .pin-stage { height: 260vh; }
html.js .pin-stage__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}
html.js .pin-stage .card--featured {
  width: 100%;
  height: 100vh;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  position: relative;
}
html.js .pin-stage .card-media {
  position: absolute;
  inset: 0;
  height: auto;
  background-size: cover;
}
/* the artwork itself transforms with scroll — driven purely by --p.
   The brighten floor stays legible (never below ~.7): the dawn scrub is a
   lift, not a blackout, and it resolves at the same lifted end state as
   the static .media--extended rule (1.35 / 1.15 / 1.05). */
html.js .pin-stage .media-bg {
  will-change: transform, filter;
  transform: translateY(calc((1 - var(--p, 1)) * 48px))
             scale(calc(1.18 - 0.18 * var(--p, 1)));
  filter: brightness(calc(0.72 + 0.63 * var(--p, 1)))
          saturate(calc(0.85 + 0.30 * var(--p, 1)))
          contrast(1.05);
  transition: none;              /* scrub maps 1:1 to scroll, no easing lag */
}
html.js .pin-stage .card-body {
  position: absolute;
  inset: auto 0 0 0;
  max-width: 72ch;
  padding: 48px 64px;
  /* no flat panel behind the text — the directional media scrim (≥.7 ink
     over the bottom of the artwork) carries legibility */
}
/* staggered caption: each element starts at its own --s point of the pin
   and resolves over the next 10% of scroll — last element lands at p=.78,
   leaving the final ~22% of the pin as a fully-lit, fully-opaque held frame */
html.js .pin-stage .card-body > * {
  opacity: clamp(0, (var(--p, 1) - var(--s, .35)) / .10, 1);
  transform: translateY(calc(
    (1 - clamp(0, (var(--p, 1) - var(--s, .35)) / .10, 1)) * 24px));
  transition: none;
}
html.js .pin-stage .card-body .chip         { --s: .38; }
html.js .pin-stage .card-body .card-meta    { --s: .46; }
html.js .pin-stage .card-body .card-title   { --s: .54; }
html.js .pin-stage .card-body .card-summary { --s: .62; }
html.js .pin-stage .card-body .card-more    { --s: .68; }

/* hero artwork dims as the hero exits (JS drives --heroP 0 -> 1) */
html.js .hero-art { filter: brightness(calc(1 - 0.35 * var(--heroP, 0))); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  [data-parallax] { transform: none !important; }
  .scrim { opacity: .12 !important; }
  html.js .pin-stage { height: auto; }
  html.js .pin-stage__inner { position: static; min-height: 0; height: auto; }
  html.js .pin-stage .card-media { transform: none !important; }
  /* JS also removes --p / --heroP, so the var() defaults land on the
     fully-lit end state; these are the belt to that suspenders */
  html.js .pin-stage .media-bg { transform: none !important; }
  html.js .pin-stage .card-body { opacity: 1 !important; transform: none !important; }
  html.js .pin-stage .card-body > * { opacity: 1 !important; transform: none !important; }
  html.js .hero-art { filter: none !important; }
}

/* --------------------------------------------------------------------------
   16. Article pages
   -------------------------------------------------------------------------- */
.article-head {
  position: relative;           /* anchors the full-bleed ::before band */
  max-width: 860px;
  margin: 0 auto;
  padding: 84px 24px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.kicker {
  font-size: 13px;
  letter-spacing: .5em;
  text-indent: .5em;
  font-weight: 300;
  color: rgba(255, 255, 255, .85);
}
.article-title {
  font-family: var(--font-heavy);
  font-weight: 700;
  font-stretch: semi-condensed;
  text-transform: uppercase;
  font-size: clamp(32px, 5.4vw, 54px);
  line-height: 1.08;
  color: #FFFFFF;
  text-wrap: balance;
}
.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-family: var(--font-heavy);
  font-weight: 700;
  font-stretch: semi-condensed;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .68);
}
.article-meta a {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-meta .dot { opacity: .45; }

.article-hero {
  position: relative;
  width: min(1056px, calc(100% - 48px));
  margin: 12px auto 56px;
  height: clamp(220px, 42vw, 460px);
  border: 6px solid var(--frame);
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--frame-edge), 0 24px 50px rgba(10, 9, 20, .5);
  background-image: linear-gradient(160deg,
    var(--panel-1) 0%, var(--panel-2) 45%, var(--panel-3) 75%, var(--panel-4) 100%);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'><g fill='%233E2C6E' fill-opacity='.4'><path d='M200 120 C 160 58 108 42 38 46 C 104 58 146 78 158 120 Z'/><path d='M200 120 C 190 68 168 30 126 10 C 157 45 174 86 172 120 Z'/><path d='M200 120 C 197 92 198 55 200 28 C 185 60 177 96 182 120 Z'/></g></svg>")
    right bottom / 46% no-repeat;
  pointer-events: none;
}

.prose {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .92);
}
.prose > * + * { margin-top: 1.35em; }
.prose .lead {
  font-size: 19px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .96);
}
.prose h2 {
  font-family: var(--font-thin);
  font-weight: 200;
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: .2em;
  line-height: 1.25;
  color: #FFFFFF;
  margin-top: 2.2em;
}
.prose a {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--pink-hover); }
.prose strong { color: #FFFFFF; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: .5em; }

.pullquote {
  margin: 2.4em auto;
  padding: 8px 0 8px 26px;
  border-left: 3px solid var(--pink);
  max-width: 560px;
}
.pullquote p {
  font-family: var(--font-heavy);
  font-weight: 700;
  font-stretch: semi-condensed;
  text-transform: uppercase;
  font-size: 25px;
  line-height: 1.2;
  color: var(--cream);
}
.pullquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.factbox {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin: 2.4em 0;
  padding: 30px 32px;
  background-image: linear-gradient(160deg, var(--panel-1), var(--panel-2));
}
.factbox::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 50%; height: 80%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'><g fill='%233E2C6E' fill-opacity='.45'><path d='M200 120 C 160 58 108 42 38 46 C 104 58 146 78 158 120 Z'/><path d='M200 120 C 190 68 168 30 126 10 C 157 45 174 86 172 120 Z'/></g></svg>")
    right bottom / contain no-repeat;
  pointer-events: none;
}
.factbox h3 {
  position: relative;
  font-family: var(--font-thin);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .4em;
  margin-bottom: 14px;
}
.factbox ul {
  position: relative;
  margin: 0;
  padding-left: 1.15em;
  font-size: 15.5px;
}
.factbox li + li { margin-top: .5em; }

.article-foot {
  max-width: 680px;
  margin: 56px auto 0;
  padding: 0 24px;
  display: flex;
  justify-content: center;
}

/* related cards */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.related-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: #191636;
  border: 3px solid var(--frame);
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--frame-edge);
  transition: transform 180ms ease-out;
}
.related-card:hover, .related-card:focus-within { transform: translateY(-3px); }
.related-card .card-title { font-size: 17.5px; }

/* --------------------------------------------------------------------------
   17. Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .header-row { padding: 14px 24px; }
  .site-nav { gap: 20px; }
}

@media (max-width: 960px) {
  .card--featured { grid-column: span 6; }
  .card--tall, .card--std { grid-column: span 3; }
  .guides-grid, .community-grid, .related-grid { grid-template-columns: 1fr 1fr; }
  .card--wide .card-summary { display: none; }
}

@media (max-width: 860px) {
  .site-nav, .header-cta { display: none; }
  .menu-btn { display: flex; }
  .header-row { gap: 16px; }

  .hero-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 26px;
    padding: 0 24px 66px;
    text-align: center;
  }
  .hero-date { order: -1; text-align: center; align-items: center; }
  /* tablet: the date grows; below 480px it is demoted to a supporting line */
  .hero-date .date-coming { font-size: 28px; }
  .hero-date .date-full   { font-size: 35px; }
  .platforms { align-items: center; flex-direction: row; gap: 18px; font-size: 13.5px; }
  .hero-cta {
    order: 3;
    font-size: 17px;
    padding: 18px 56px;
  }
}

@media (max-width: 680px) {
  .section { padding: 72px 16px; }
  .news-grid { gap: 20px; }
  .card--featured, .card--tall, .card--std, .card--wide { grid-column: span 6; }
  .card--wide { flex-direction: column; border-width: 4px; }
  .card--wide .card-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 22px 24px;
  }
  .card--wide .card-summary { display: -webkit-box; }
  .guides-grid, .community-grid, .related-grid { grid-template-columns: 1fr; }

  .ribbon { padding: 12px 48px; min-height: 74px; }
  .ribbon-text { font-size: 12.5px; letter-spacing: .14em; }
  .ribbon-palm { width: 120px; }

  .countdown { gap: 10px; padding: 14px 8px 10px; }
  .count-unit { min-width: 64px; }
  .count-sep  { display: none; }

  .hero-inner { gap: 22px; padding: 34px 16px 16px; }

  /* -- mobile news filter: centered pills, wraps to a second line so no
     pill ever clips off-screen ---------------------------------------- */
  .news-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 16px;
  }
  .news-filter::-webkit-scrollbar { display: none; }
  .news-filter .bar { display: none; }
  .news-filter .filter-opt {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: .06em;
    white-space: nowrap;
  }
  .news-filter .filter-opt--active {
    background: var(--pink);
    border-color: var(--pink);
    color: var(--cta-ink);
  }

  /* -- mobile news cards: capped art, headline over the lower third ----
     Image + headline + meta ≈ half a viewport, two cards per screen.   */
  .card-media,
  .card--featured .card-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    max-height: 260px;
    border-bottom: 0;
    background-position: center 25%;
  }
  .card-media .media-bg { background-position: center 25%; }

  /* scrim that carries the overlaid headline — full-coverage ink ramp so
     the text survives regardless of image content: near-opaque under the
     headline, a light veil at the top (chips carry their own ground) */
  .card-media::before,
  .card--featured .card-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg,
      rgba(13, 10, 32, .92) 0%,
      rgba(13, 10, 32, .60) 40%,
      rgba(13, 10, 32, .20) 100%);
    pointer-events: none;
  }

  /* headline first, pulled up over the art; meta row below it */
  .card-media + .card-body {
    position: relative;
    z-index: 1;
    margin-top: -88px;
    padding: 0 16px 20px;
    gap: 8px;
  }
  .card-media + .card-body .card-title {
    order: -1;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
    color: #FFFFFF;
  }
  .card-media + .card-body .card-meta {
    font-size: .8125rem;
    color: rgba(255, 255, 255, .7);
  }
  /* the featured announcement carries the site's most time-sensitive news —
     headline and date line set at phone display scale, full opacity */
  .card--featured .card-media + .card-body .card-title {
    font-size: clamp(26px, 7.5vw, 38px);
    line-height: 1.16;
    font-weight: 600;
    letter-spacing: .06em;
    color: #F4F1FF;
  }
  .card--featured .card-media + .card-body .card-meta {
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
  }
  .card-vi { display: none; }   /* would collide with the overlaid headline */

  /* category badge recoloured for contrast on dark art */
  .card-media .chip,
  .card--featured .card-body .chip {
    background: rgba(255, 214, 224, .95);
    color: #1A1A33;
    border: 0;
    font-size: 12px;
    letter-spacing: .08em;
    padding: 6px 12px;
    border-radius: 999px;
  }
  /* the featured card keeps its chip in the body — surface it above the
     headline so the badge sits on the art like every other card */
  .card--featured .card-body .chip { order: -2; }
  .card--featured { border-width: 4px; }

  /* unpin the featured scroll stage — it flows as a regular stacked card */
  .pin-stage { width: auto; margin-left: 0; }
  html.js .pin-stage { height: auto; }
  html.js .pin-stage__inner {
    position: static;
    height: auto;
    overflow: visible;
  }
  html.js .pin-stage .card--featured {
    height: auto;
    border: 4px solid var(--frame);
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--frame-edge), 0 18px 40px rgba(10, 9, 20, .45);
  }
  html.js .pin-stage .card-media {
    position: relative;
    inset: auto;
    transform: none;
  }
  html.js .pin-stage .media-bg { transform: none; filter: none; }
  /* the scrub reset above must not strip the extended-look lift */
  html.js .pin-stage .media--extended .media-bg {
    filter: brightness(1.35) saturate(1.15) contrast(1.05);
  }
  html.js .pin-stage .card-body {
    position: relative;
    inset: auto;
    max-width: none;
    padding: 0 16px 20px;
    opacity: 1;
    transform: none;
  }
  html.js .pin-stage .card-body > * { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  /* Mobile hero: the countdown is the sole focal point. The date block is
     demoted to a supporting line (~50px tall, was ~180px) and the caption
     line is dropped — it duplicated what the date says. */
  .count-num { font-size: clamp(52px, 15vw, 72px); }
  .countdown-caption { display: none; }

  /* filter row: balanced two-line wrap instead of a mid-phrase orphan */
  .section-sub {
    font-size: 13px;
    letter-spacing: .04em;
    text-wrap: balance;
    padding: 0 12px;
  }

  /* text scrim — holds the off-white type where it crosses the lightest pink */
  .count-num,
  .countdown-done-msg {
    text-shadow: 0 2px 20px rgba(10, 5, 30, .5), 0 1px 6px rgba(10, 5, 30, .45);
  }

  /* reclaimed space: the hero shrinks to its content instead of stretching
     to the viewport — content anchors 48px under the nav row rather than
     centering into ~140px voids; 32px countdown -> date, 40px date ->
     platforms, and 40px clear below the CTA pill before the chevron */
  .hero { min-height: 0; }
  .hero-inner {
    justify-content: flex-start;
    padding-top: 48px;
    padding-bottom: 32px;
  }
  .hero-bottom { padding-bottom: 88px; }
  .hero-date {
    gap: 0;
    margin-bottom: 14px;      /* + 26px grid gap = 40px before platforms */
    text-shadow: 0 2px 20px rgba(10, 5, 30, .5), 0 1px 6px rgba(10, 5, 30, .45);
  }
  /* "KEMUR ÚT" becomes an eyebrow… */
  .hero-date .date-coming {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2em;
    text-indent: .2em;
    opacity: .85;
  }
  /* …and the date itself a single quiet supporting line */
  .hero-date .date-full {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .02em;
    margin-top: 8px;
    white-space: nowrap;
  }
}

@media (max-width: 430px) {
  .header-row { padding: 12px 16px; }
  .brand-top { font-size: 19px; }
  /* card-body padding is owned by the 680px mobile-card rules above —
     re-padding it here would break the headline-over-art overlay */
  .panel-inner { padding: 26px 22px 24px; }
  .article-hero { width: calc(100% - 32px); }
}