/* ============================================================
   ZIPPER — zipperpartygame.com
   Palette and display face are lifted straight from the app
   (zipper-mobile/src/theme.js) so the site and the product
   read as one thing.
   ============================================================ */

@font-face {
  font-family: 'Adumu';
  src: url('assets/Adumu.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* stage — light. The token NAMES are kept from the original dark build so
     both pages keep working; only the values flipped. --ink is now the page
     (white), --paper is the ink you read (near-black). */
  --ink:        #ffffff;
  --ink-raised: #FFF4EE;   /* faintly warm panel */
  --ink-line:   #FFD9C7;   /* orange-tinted hairline */
  --paper:      #1A1A1A;
  --paper-dim:  #5A5148;
  --paper-mute: #8A8078;

  /* a plain white fill, for the few surfaces that must stay white even
     though --ink is already white (cards sitting on a tinted panel) */
  --card:       #ffffff;

  /* brand */
  --orange:     #FF6B35;
  --orange-lit: #E04E18;   /* deeper, because on white a lighter orange fades */
  --orange-deep:#D2410F;   /* text-safe orange for small type */

  /* card moods — app PALETTE */
  --strawberry: #F75590;
  --burnt:      #902D41;
  --cotton:     #EEC0C6;
  --imperial:   #0A2463;
  --yale:       #0C4767;
  --pacific:    #64A6BD;
  --sage:       #659157;
  --lightblue:  #A0CFD3;
  --eggshell:   #F0EBD8;
  --banana:     #FFF185;

  /* podium */
  --gold:   #FFD700;
  --silver: #C7C7C7;   /* a shade darker than the app's, to read on white */
  --bronze: #CD7F32;

  --display: 'Adumu', 'Bricolage Grotesque', system-ui, sans-serif;
  --body:    'Bricolage Grotesque', system-ui, -apple-system, sans-serif;

  --shell:  min(1180px, 100% - 3rem);
  --gap:    clamp(3.5rem, 2rem + 6vw, 8rem);
  --radius: 18px;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

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

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

.skip-link {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--orange); color: #ffffff;
  padding: .6rem 1rem; border-radius: 8px;
  font-weight: 600; z-index: 50; transition: top .15s;
}
.skip-link:focus { top: 1rem; }

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 1rem;
}

/* Headlines carry the brand colour now that the page is white: orange is the
   loud element, the body copy stays near-black so it is still readable. */
.section__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  max-width: 16ch;
  color: var(--orange);
}

.section__lede {
  margin-top: 1.4rem;
  max-width: 54ch;
  color: var(--paper-dim);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--orange);
  color: #ffffff;
  font-family: var(--body);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.01em;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--orange-lit); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: .55rem 1.1rem; font-size: .9rem; }

.btn--ghost {
  background: transparent;
  color: var(--orange-deep);
  border: 1.5px solid var(--orange);
}
.btn--ghost:hover { background: var(--ink-raised); border-color: var(--orange-lit); color: var(--orange-lit); }

/* ---------- socials ---------- */
.socials {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.socials--center { justify-content: center; margin-top: 2rem; }

/* Official brand glyphs, used unmodified and in a single flat colour, which is
   the monochrome treatment Instagram, TikTok and Spotify each allow for linking
   to your own profile. Do NOT recolour these to brand orange: Spotify's
   guidelines forbid recolouring the mark outright, and the other two only
   sanction full-colour, black or white. The orange lives in the ring instead. */
.social {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 1px solid var(--orange);
  color: var(--paper);
  transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.social__glyph { width: 1.45rem; height: 1.45rem; fill: currentColor; }
.social:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  transform: translateY(-2px);
}
.social:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 3px; }

/* The glyphs alone don't say what each link is for, so one line does. */
.socials__note {
  margin-top: 1.1rem;
  text-align: center;
  font-size: .85rem;
  color: var(--paper-mute);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding-bottom: var(--gap);
  /* a warm bloom behind the card fan, nothing more */
  background:
    radial-gradient(70rem 42rem at 78% 12%, rgba(255,107,53,.20), transparent 64%),
    radial-gradient(48rem 32rem at 8% 0%, rgba(255,140,80,.14), transparent 66%);
}

/* sub-pages reuse the hero purely as a nav bar, without the tall bloom */
.hero--flat { padding-bottom: 0; }

.nav {
  width: var(--shell);
  margin-inline: auto;
  padding: 1.4rem 0;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__brand {
  display: flex; align-items: center;
  text-decoration: none;
}

/* The brand lockup is the app's own wordmark artwork, not text in Adumu plus
   a square icon. One image can't drift from the app. The PNG is white on
   alpha, so it is used as a mask and painted orange, the same trick the
   intensity meter's glass uses. Artwork is 2.79:1; aspect-ratio holds it. */
.brand__mark, .hero__wordmark {
  display: block;
  aspect-ratio: 1200 / 430;
  background-color: var(--orange);
  -webkit-mask: url('assets/zipper-wordmark.png') left center / contain no-repeat;
          mask: url('assets/zipper-wordmark.png') left center / contain no-repeat;
}
.brand__mark { height: 30px; }
.nav__brand:hover .brand__mark { opacity: .82; }

.nav__links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav__links a {
  text-decoration: none;
  font-size: .93rem;
  font-weight: 600;
  color: var(--paper-dim);
  transition: color .16s;
}
.nav__links a:hover { color: var(--orange-deep); }

.hero__inner {
  width: var(--shell);
  margin-inline: auto;
  padding-top: clamp(2.5rem, 1rem + 5vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.9rem, 1.4rem + 6.4vw, 6.2rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--orange);
}
/* The headline is the wordmark artwork itself. It is sized off the same
   clamp the old type used, so the hero keeps its proportions. */
.hero__wordmark {
  width: clamp(13rem, 6rem + 30vw, 29rem);
  max-width: 100%;
}
/* The wordmark is the headline; the tagline sits under it on its own line,
   black and much smaller so the orange ZIPPER stays the loud thing. */
.hero__title em {
  display: block;
  font-style: normal;
  color: var(--paper);
  font-size: .32em;
  line-height: 1.1;
  letter-spacing: .01em;
  margin-top: .5em;
}

.hero__lede {
  margin-top: 1.6rem;
  max-width: 42ch;
  color: var(--paper-dim);
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
}

/* ============================================================
   THE CARD FAN  — signature element
   ============================================================ */
.fan {
  position: relative;
  height: clamp(20rem, 16rem + 20vw, 30rem);
  display: grid;
  place-items: center;
}

.card {
  --i: 0;
  --lift: 0;
  position: absolute;
  width: clamp(12rem, 9rem + 9vw, 16.5rem);
  aspect-ratio: 5 / 7;
  padding: 1.35rem;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  box-shadow: 0 26px 50px -20px rgba(60,30,10,.38);
  transform: translateX(calc(var(--i) * 5.6rem))
             rotate(calc(var(--i) * 7deg))
             translateY(calc(var(--lift) * .9rem));
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.fan:hover .card {
  transform: translateX(calc(var(--i) * 6.9rem))
             rotate(calc(var(--i) * 9deg))
             translateY(calc(var(--lift) * .35rem));
}

.card__type {
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
}
.card__text {
  font-family: var(--display);
  font-size: clamp(1.05rem, .9rem + .55vw, 1.4rem);
  line-height: 1.16;
  margin-top: auto;
  margin-bottom: auto;
}
.card__zip {
  font-family: var(--body);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .82;
}

.card--strawberry { background: var(--strawberry); color: #fff; }
.card--imperial   { background: var(--imperial);   color: #fff; }
.card--yale       { background: var(--yale);       color: #fff; }
.card--sage       { background: var(--sage);       color: #fff; }
.card--banana     { background: var(--banana);     color: #1A1A1A; }

/* ============================================================
   SECTIONS
   ============================================================ */
/* No dividing rule between sections: the page reads as one night from top to
   bottom rather than a stack of separate boxes. */
.section {
  width: var(--shell);
  margin-inline: auto;
  padding-block: calc(var(--gap) * .62);
}


/* ---------- the arc: setup → play → podium ---------- */
.arc {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.arc__step {
  background: var(--card);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.4rem);
  position: relative;
}
/* the zip pull travelling across the three steps */
.arc__step::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--orange);
  transform-origin: left;
}
.arc__step:nth-child(1)::before { opacity: 1; }
.arc__step:nth-child(2)::before { opacity: .6; }
.arc__step:nth-child(3)::before { opacity: .3; }

.arc__step h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.65rem;
  color: var(--orange);
  margin-top: 1.2rem;
  margin-bottom: .6rem;
}
.arc__step p { color: var(--paper-dim); font-size: .98rem; }

/* ---------- modes ----------
   White cards on the dark stage, the way a real card sits on a table. The
   mood colour is carried by the tag and the top edge rather than the fill,
   and the middle one stands proud because it is the only one you can play.
   On the white stage the card is separated by a hairline plus a soft warm
   shadow instead of by contrast alone. */
.modes {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: stretch;
}
.mode {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 2rem 1.8rem;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--card);
  color: #1A1A1A;
  border: 1px solid var(--ink-line);
  border-top: 5px solid var(--mood);
  box-shadow: 0 20px 40px -24px rgba(60,30,10,.45);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.mode:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 60px -26px rgba(60,30,10,.5);
}

.mode--bar    { --mood: var(--strawberry); }
.mode--rush   { --mood: var(--pacific); }
.mode--normal {
  --mood: var(--orange);
  background: var(--ink-raised);   /* the playable one gets the warm fill */
  border-color: var(--orange);
  transform: scale(1.04);
  z-index: 1;
}
.mode--normal:hover { transform: scale(1.04) translateY(-8px); }

/* the unbuilt modes read a shade quieter, the way the app seals them */
.mode--bar,
.mode--rush { opacity: .82; }

.mode__tag {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(26,26,26,.5);
}
.mode__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.2rem);
  line-height: .95;
  color: var(--orange);
}
.mode p {
  font-size: .96rem;
  color: rgba(26,26,26,.72);
  margin-bottom: 1.4rem;
}
.mode__stamp {
  margin-top: auto;
  align-self: flex-start;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(26,26,26,.25);
  color: rgba(26,26,26,.6);
}
.mode__stamp--live {
  background: #1A1A1A;
  border-color: #1A1A1A;
  color: var(--orange);
}

/* ---------- intensity meter ----------
   A white panel like the mode cards, so the whole setup step reads as one
   surface. Picking a band fills the app's shot glasses and swaps the copy. */
.meter {
  --fill: var(--orange);
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem);
  border-radius: var(--radius);
  background: var(--ink-raised);
  color: #1A1A1A;
  border: 1px solid var(--ink-line);
  box-shadow: 0 20px 40px -24px rgba(60,30,10,.45);
}
/* an amber rather than the app's banana: pale yellow disappears on white */
.meter[data-level="light"]    { --fill: #F2B705; }
.meter[data-level="medium"]   { --fill: var(--orange); }
.meter[data-level="blackout"] { --fill: #E8483B; }

.meter__label {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(26,26,26,.5);
  margin-bottom: 1.5rem;
}

.meter__stage {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  flex-wrap: wrap;
  min-height: 6.5rem;
}

.meter__glasses { display: flex; align-items: flex-end; gap: .5rem; flex: none; }
/* one PNG serves every colour: the glass is a mask, not a tinted image.
   This is the app's own glass (assets/shot-glass.png, 220x322), the same file
   the setup screen's intensity step draws, so the site and step 3/4 read
   identically. It keeps its transparent cut-lines: the rim, the body and the
   liquid line are gaps in the artwork, and a mask leaves them unpainted
   exactly the way the app's tintColor does. Do not swap in a solid-filled
   glass, that flattens it to a featureless silhouette. */
.glass {
  width: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem);
  aspect-ratio: 220 / 322;
  background-color: var(--fill);
  -webkit-mask: url('assets/shot-glass.png') center / contain no-repeat;
          mask: url('assets/shot-glass.png') center / contain no-repeat;
  opacity: .3;
  transition: opacity .3s ease, background-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.glass.is-full { opacity: 1; transform: translateY(-4px); }
.glass.is-half { opacity: .45; }

.meter__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1;
  color: var(--orange);
}
.meter__desc { color: rgba(26,26,26,.68); margin-top: .4rem; }

.meter__picker {
  margin-top: 1.8rem;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.pick {
  font-family: var(--body);
  font-weight: 800;
  font-size: .92rem;
  color: rgba(26,26,26,.62);
  background: transparent;
  border: 1px solid rgba(26,26,26,.18);
  border-radius: 999px;
  padding: .6rem 1.3rem;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.pick:hover { color: #1A1A1A; border-color: rgba(26,26,26,.45); transform: translateY(-2px); }
.pick.is-on {
  background: var(--fill);
  border-color: var(--fill);
  color: #1A1A1A;
}

/* ---------- scoring ---------- */
.score__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.rules {
  margin-top: 2.2rem;
  display: grid;
  gap: .5rem;
  max-width: 32rem;
}
.rules li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .85rem 1.2rem;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
}
/* a zip-pull tab marking each rule, in place of a number */
.rules li::before {
  content: '';
  flex: none;
  width: .55rem;
  height: 1.1rem;
  border-radius: 3px;
  background: var(--orange);
  transform: translateY(.15rem);
}
.rules span { color: var(--paper-dim); }

.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: .6rem;
}
.podium__place {
  border-radius: 12px 12px 0 0;
  padding: 1rem .6rem .9rem;
  text-align: center;
  color: #1A1A1A;
  display: grid;
  gap: .1rem;
}
.podium__place b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1;
  margin-top: .5rem;
  opacity: .5;
}
.podium__name { font-weight: 800; font-size: 1.05rem; }

.podium__place--1 { background: var(--gold);   height: 13rem; }
.podium__place--2 { background: var(--silver); height: 10rem; }
.podium__place--3 { background: var(--bronze); height: 8rem; }

.awards {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--ink-line);
}
.awards__label {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: 1.1rem;
}
.awards ul { display: flex; flex-wrap: wrap; gap: .6rem; }
.awards li {
  font-family: var(--display);
  font-size: 1.1rem;
  padding: .35rem 1rem;
  border: 1px solid var(--orange);
  border-radius: 999px;
  color: var(--orange-deep);
}

/* ---------- card types ---------- */
.types {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.types__hint {
  margin-top: 1.6rem;
  font-size: .95rem;
  color: var(--paper-mute);
}
/* the chips are real buttons, so strip the browser's button look first */
.t {
  font-family: var(--display);
  font-size: clamp(1rem, .92rem + .35vw, 1.3rem);
  padding: .5rem 1.1rem;
  border: 0;
  border-radius: 10px;
  background: var(--tone);
  color: var(--tone-ink, #fff);
  cursor: pointer;
  transition: transform .18s ease;
}
.t:hover { transform: translateY(-3px) rotate(-1.5deg); }
.t:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------- card-type hover bubble ---------- */
.type { position: relative; }

.tip {
  /* sits above the chip, centred on it, with a little arrow underneath */
  position: absolute;
  bottom: calc(100% + .7rem);
  left: 50%;
  /* --nudge is set by the script to keep edge bubbles inside the viewport */
  transform: translate(calc(-50% + var(--nudge, 0px)), 4px);
  z-index: 20;
  width: max-content;
  max-width: min(20rem, 70vw);
  padding: .8rem 1rem;
  /* display face, so the bubble reads as part of the card it describes */
  /* Body face here, not the display one: Adumu only ships a heavy weight, so
     a full sentence in it always reads as bold. The chip label stays Adumu. */
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  /* the bubble wears the same mood colour as the chip it belongs to */
  background: var(--tone);
  color: var(--tone-ink, #fff);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(60, 30, 10, .32);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;   /* the bubble never blocks the chip underneath */
  transition: opacity .16s ease, transform .16s ease;
}
.tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--tone);
}

/* hover, keyboard focus, and (via the script) a tap on touch screens */
.type:hover .tip,
.t:focus-visible + .tip,
.type.is-open .tip {
  opacity: 1;
  visibility: visible;
  transform: translate(calc(-50% + var(--nudge, 0px)), 0);
}

/* chips on the top row would push their bubble off-screen, so those flip below */
.type.tip--below .tip { bottom: auto; top: calc(100% + .7rem); }
.type.tip--below .tip::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--tone);
}

/* One tone per type, set on the <li> so the chip and its bubble share it.
   --tone-ink flips to near-black on the pale moods for readable text. */
.type--strawberry { --tone: var(--strawberry); }
.type--burnt      { --tone: var(--burnt); }
.type--imperial   { --tone: var(--imperial); }
.type--yale       { --tone: var(--yale); }
.type--pacific    { --tone: var(--pacific); }
.type--sage       { --tone: var(--sage); }
.type--cotton     { --tone: var(--cotton);    --tone-ink: #1A1A1A; }
.type--lightblue  { --tone: var(--lightblue); --tone-ink: #1A1A1A; }
.type--eggshell   { --tone: var(--eggshell);  --tone-ink: #1A1A1A; }
.type--banana     { --tone: var(--banana);    --tone-ink: #1A1A1A; }

/* ---------- team ---------- */
.team {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  display: grid;
  /* auto-fit rather than a fixed column count, so adding a team member
     reflows the grid instead of leaving a lone card on a second row */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.4rem;
}
.team__member {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 1.8rem;
}
.team__member h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--orange);
}
.team__role {
  color: var(--orange-deep);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: .35rem 0 .8rem;
}
.team__bio { color: var(--paper-dim); font-size: .95rem; }

/* ---------- closing CTA ---------- */
.cta {
  width: var(--shell);
  margin: 0 auto var(--gap);
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) 2rem;
  text-align: center;
  border-radius: 24px;
  background:
    radial-gradient(40rem 20rem at 50% 0%, rgba(255,107,53,.28), transparent 72%),
    var(--ink-raised);
  border: 1px solid var(--ink-line);
}
.cta h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  line-height: 1.02;
  color: var(--orange);
}
.cta p {
  margin: 1rem auto 0;
  max-width: 42ch;
  color: var(--paper-dim);
}

/* ---------- footer ---------- */
.footer {
  width: var(--shell);
  margin-inline: auto;
  padding-block: 2.5rem 3.5rem;
  border-top: 1px solid var(--ink-line);
  display: grid;
  gap: 1rem;
}
.footer__brand {
  display: flex; align-items: center;
}
.footer__brand .brand__mark { height: 24px; }
.footer__legal { color: var(--paper-mute); font-size: .88rem; max-width: 46ch; }
.footer__meta {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  color: var(--paper-mute); font-size: .88rem;
}
.footer__meta a { color: var(--orange-deep); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  :root { --shell: min(1180px, 100% - 2rem); }

  .nav__links { display: none; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { order: 1; }
  .fan { order: 2; height: clamp(19rem, 14rem + 26vw, 24rem); }
  /* three cards is a fan; five is a mess at this width */
  .card--edge { display: none; }

  .score__grid { grid-template-columns: 1fr; }
  .arc, .team, .modes { grid-template-columns: 1fr; }
  .meter__stage { gap: 1.2rem; }
  .team__member { padding: 1.5rem; }
}

@media (max-width: 560px) {
  /* the glyph row wraps on its own; nothing to override here */
  .card { width: clamp(11rem, 60vw, 14rem); }
  .fan .card { transform: translateX(calc(var(--i) * 3.2rem)) rotate(calc(var(--i) * 6deg)); }
  .podium__place--1 { height: 10rem; }
  .podium__place--2 { height: 8rem; }
  .podium__place--3 { height: 6.5rem; }
}