/* ===================================================================
   The three approved sections: Individual Championships, Team
   Championships and the About page's "The gap".

   Supplied as a self-contained package (sections.css + sections.js +
   artwork) and integrated here rather than bolted on beside the site:

     - the package's own fonts.css is NOT used. It declared Barlow
       Condensed 700/800, which src/styles/fonts.css already serves, and
       Inter 400/600/700, which it did not. Only the three Inter faces
       are added below, converted from the bundled TTFs to WOFF2 —
       977KB of TTF became 332KB. The @font-face `src` is absolute
       because the house-style gate rejects a relative path inside a
       stylesheet url (sheets are served from /styles/, artwork is not).

     - every selector stays scoped to .zg-*, exactly as delivered, so
       nothing here can reach the header, the footer or a neighbouring
       section.

   Three rules from core.css do reach IN, though, and the isolation
   block at the foot of this file states them back. Scoping a package
   keeps it out of the site; it does nothing to keep the site out of
   the package.

   Load order matters: this sheet comes after core.css in the page's
   `styles` array, which is what lets the isolation block win on the
   two properties where the specificity is otherwise a tie.

   EDIT THIS FILE DIRECTLY. It was first assembled from the delivered
   package by a one-off importer, but nothing in `npm run build` runs
   that importer and it is not in this repository: this file is the
   source of truth and hand edits survive every build. If a revised
   package ever arrives, re-apply its changes here by hand rather than
   regenerating — the four blocks at the foot (isolation, the type
   scale, the cup alignment and the glow treatment) are integration
   work that no package will contain.
   =================================================================== */

/* ---------------------------- Inter -------------------------------
   Bundled with the approved package under the SIL Open Font License;
   see licenses/. Barlow Condensed is deliberately absent — the site
   already serves 500/600/700/800 of it from src/styles/fonts.css, and
   a second copy would be 200KB to render the same glyphs. */




/* =================== the package, as delivered ==================== */

.zg-section {
  --zg-blue: #0062ff;
  --zg-ink: #020f36;
  --zg-header-offset: var(--zg-header, 88px);
  position: relative;
  isolation: isolate;
  width: 100%;
  background: #fff;
  color: var(--zg-ink);
  font-family: var(--body);
  font-size: 16px;
  overflow: hidden;
  overflow: clip;
}

.zg-section * {
  box-sizing: border-box;
}

.zg-section p,
.zg-section figure,
.zg-section h2,
.zg-section h3 {
  margin: 0;
}

.zg-stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  margin-inline: auto;
  isolation: isolate;
}

.zg-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.zg-eyebrow {
  font-size:var(--ds-eyebrow);
  letter-spacing:.14em;
  font-weight:600;
  text-transform: uppercase;
  color: var(--zg-blue);
}

.zg-section h2,
.zg-section h3,
.zg-scope {
  font-family: "Barlow Condensed","Arial Narrow",sans-serif;
}

.zg-section h2 {
  font-weight:400;
  font-size:var(--ds-title);
  line-height:1.1;
  letter-spacing:0;
}

.zg-section h2 em {
  font-style: normal;
  color: var(--zg-blue);
}

.zg-intro {
  position: absolute;
  left: 3.1%;
  top: 11.4%;
  z-index: 3;
}

.zg-intro h2 {
  margin-top: .6cqw;
}

.zg-copy {
  position: absolute;
  left: 3.4%;
  top: 32%;
  width: 28%;
  font-size: 1.93cqw;
  line-height: 1.37;
  z-index: 3;
}

.zg-copy hr {
  margin: 2.9cqw 0 2.1cqw;
  border: 0;
  border-top: 1px solid var(--zg-blue);
}

.zg-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(255,255,255,.65),rgba(255,255,255,.42) 28%,transparent 40%);
  pointer-events: none;
}

.zg-cups {
  position: absolute;
  inset: 0;
}

.zg-cup {
  position: absolute;
  bottom: 4.4%;
  width: 21.3%;
  height: 93%;
  outline: none;
  z-index: 2;
}

.zg-cup:focus-visible {
  outline: 2px solid var(--zg-blue);
  outline-offset: 2px;
  border-radius: 12px;
}

.zg-pioneer {
  left: 32.3%;
  --cup-height: 52%;
}

.zg-vanguard {
  left: 53.6%;
  --cup-height: 69%;
}

.zg-ascendant {
  left: 75%;
  --cup-height: 82%;
}

.zg-trophy-space {
  position: absolute;
  bottom: 20.5%;
  width: 100%;
  height: var(--cup-height);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  perspective: 900px;
}

.zg-trophy {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 8px 7px #020f3636) brightness(1.04);
  transform-origin: 50% 100%;
  transition: transform .55s cubic-bezier(.2,.65,.2,1),filter .55s;
  will-change: auto;
}

.zg-cup:hover .zg-trophy,
.zg-cup:focus-visible .zg-trophy {
  transform: translateY(-.35cqw) scale(1.055);
  filter: drop-shadow(0 0 15px #74baff88) brightness(1.13);
}

.zg-cup figcaption {
  position: absolute;
  top: 82%;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0 .8cqw;
}

.zg-section h3 {
  font-size:var(--ds-card);
  font-weight:400;
  line-height:1.15;
  white-space: nowrap;
}

.zg-scope {
  display: block;
  color: var(--zg-blue);
  font-size: 1.5cqw;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: .55cqw 0;
}

.zg-cup figcaption p {
  font-size:var(--ds-copy);
  line-height:1.55;
  max-width: 18.5cqw;
  margin: auto;
}

.zg-individual .zg-cup+.zg-cup figcaption {
  border-left: 1px solid #27305075;
}

.zg-neon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: none;
  stroke: #1793ff;
  stroke-width: 3;
  filter: drop-shadow(0 0 5px #0062ff) drop-shadow(0 0 9px #388bff);
  opacity: .85;
  animation: zg-glow 5s ease-in-out infinite;
  z-index: 1;
}

.zg-team {
  background: #03182b;
  color: white;
}

.zg-team-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,transparent 62%,#03182b12 68%,#03182b61);
}

.zg-team .zg-cup {
  width: 21.3%;
  bottom: 6%;
  height: 88%;
}

.zg-dominion {
  left: 5%;
  --cup-height: 45%;
}

.zg-emperor {
  left: 26.5%;
  --cup-height: 61%;
}

.zg-eternal {
  left: 48.4%;
  --cup-height: 74%;
}

.zg-team .zg-trophy-space {
  bottom: 27%;
}

.zg-team .zg-cup figcaption {
  top: 82%;
}

.zg-team h3 {
  font-size:var(--ds-card);
}

.zg-team .zg-scope {
  color: #35ebff;
  font-size: 1.5cqw;
}

.zg-team-copy {
  position: absolute;
  left: 74.5%;
  top: 19%;
  width: 23%;
  z-index: 3;
}

.zg-team .zg-eyebrow {
  font-family:var(--ds-ui);
  color: #35ebff;
  font-size:var(--ds-eyebrow);
}

.zg-team h2 {
  font-size:var(--ds-title);
  margin: 1cqw 0 2.25cqw;
}

.zg-team-copy>p:not(.zg-eyebrow) {
  font-size:var(--ds-eyebrow);
  line-height:1.25;
}

.zg-consent {
  display: flex;
  gap: 1cqw;
  align-items: flex-start;
  margin-top: 2.8cqw;
}

.zg-consent svg {
  width: 1.7cqw;
  height: 2.8cqw;
  flex: none;
  stroke: #26e5ff;
  fill: none;
  stroke-width: 1.5;
}

.zg-consent p {
  font-size:var(--ds-copy);
  line-height:1.55;
  border-left: 2px solid #35ebff;
  padding-left: .9cqw;
}

.zg-beams {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.zg-beams i {
  position: absolute;
  width: 16%;
  height: 72%;
  left: 7%;
  top: 6%;
  clip-path: polygon(48% 0,52% 0,100% 100%,0 100%);
  background: linear-gradient(#edf6ff80,#9abaff12 85%,transparent);
  filter: blur(7px);
  transform: rotate(-7deg);
  transform-origin: top;
  animation: zg-beam 12s ease-in-out infinite alternate;
}

.zg-beams i:nth-child(2) {
  left: 22%;
  top: 11%;
  animation-delay: -4s;
  opacity: .7;
}

.zg-beams i:nth-child(3) {
  left: 43%;
  top: 18%;
  animation-delay: -8s;
  opacity: .5;
}

.zg-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.zg-asset-note {
  font-size: 1cqw;
  color: #c9d5e1aa;
  max-width: 10cqw;
  text-align: center;
  border: 1px dashed #8ba0bf55;
  padding: 1cqw;
  margin-bottom: 1cqw;
}

.zg-trophy-space.is-loaded .zg-asset-note {
  display: none;
}

.zg-gap-copy {
  position: absolute;
  left: 3.2%;
  top: 11.4%;
  width: 30%;
  z-index: 3;
}

.zg-gap h2 {
  font-size:var(--ds-title);
  margin: .8cqw 0 3.3cqw;
}

.zg-gap-copy>p:not(.zg-eyebrow) {
  font-size:var(--ds-eyebrow);
  line-height:1.25;
  margin-bottom: 2.5cqw;
}

.zg-gap-copy strong {
  color: var(--zg-blue);
  font-weight: 700;
}

.zg-gap .zg-eyebrow {
  font-size:var(--ds-eyebrow);
}

.zg-gap-visual {
  position: absolute;
  inset: 0;
}

.zg-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.zg-channel {
  stroke: #0075ff;
  stroke-width: 7;
  filter: drop-shadow(0 0 5px #5db9ff);
  opacity: .75;
}

.zg-flow {
  stroke: #d6fbff;
  stroke-width: 3;
  stroke-dasharray: 8 120;
  animation: zg-flow 6s linear infinite;
  filter: drop-shadow(0 0 5px #0098ff);
}

.zg-flow:nth-of-type(4) {
  animation-delay: -2s;
}

.zg-flow:nth-of-type(6) {
  animation-delay: -3s;
}

.zg-flow:nth-of-type(8) {
  animation-delay: -1s;
}

.zg-city {
  position: absolute;
  font-size: .75cqw;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.zg-delhi {
  left: 58%;
  top: 9%;
}

.zg-kolkata {
  left: 88%;
  top: 11.5%;
}

.zg-mumbai {
  left: 93%;
  top: 45%;
}

.zg-bengaluru {
  left: 63.5%;
  top: 60%;
}

.zg-record {
  position: absolute;
  left: 58.3%;
  top: 33.7%;
  width: 9.2%;
  height: 16.3%;
  border: 2px solid #7acbff;
  border-radius: 1.3cqw;
  background: linear-gradient(125deg,#edf6ffdd,#74baff99);
  color: #037ef5;
  box-shadow: inset 0 0 0 4px #f7fbff50,6px 6px 0 #007fff33,0 0 24px #74baffaa;
  transform: perspective(600px) rotateY(-15deg) rotateZ(4deg);
  animation: zg-record 7s ease-in-out infinite;
  overflow: hidden;
}

.zg-record:after {
  content: "";
  position: absolute;
  inset: -100%;
  background: linear-gradient(110deg,transparent 45%,#fff9 50%,transparent 55%);
  animation: zg-shine 9s ease-in-out infinite;
}

.zg-record svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.zg-bars rect {
  transform-origin: center bottom;
  transform-box: fill-box;
  animation: zg-bars 5s ease-in-out infinite alternate;
}

.zg-bars rect:nth-child(2) {
  animation-delay: -1s;
}

.zg-bars rect:nth-child(3) {
  animation-delay: -2s;
}

@keyframes zg-flow {
  to {
    stroke-dashoffset: -512;
  }
}

@keyframes zg-glow {
  50% {
    opacity: .6;
  }
}

@keyframes zg-beam {
  to {
    transform: rotate(5deg);
    opacity: .6;
  }
}

@keyframes zg-record {
  50% {
    transform: perspective(600px) rotateY(-10deg) rotateZ(4deg) translateY(-4px);
  }
}

@keyframes zg-shine {
  0%,
  60% {
    transform: translateX(-45%);
  }
  90%,
  100% {
    transform: translateX(45%);
  }
}

@keyframes zg-bars {
  to {
    transform: scaleY(.75);
  }
}

.zg-section[data-zg-paused] * {
  animation-play-state: paused!important;
}

@media(max-width:1139px) {
  .zg-stage {
    width: 100%;
    aspect-ratio: auto;
    container-type: normal;
  }
  .zg-individual .zg-stage {
    padding: 32px 20px 24px;
    display: flex;
    flex-direction: column;
  }
  .zg-individual .zg-backdrop {
    object-fit: cover;
    opacity: .45;
  }
  .zg-wash {
    background: linear-gradient(#fffd,#fffa);
  }
  .zg-intro,
  .zg-copy {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }
  .zg-eyebrow,
  .zg-team .zg-eyebrow,
  .zg-gap .zg-eyebrow {
    font-size:var(--ds-eyebrow);
    letter-spacing:.14em;
  }
  .zg-section h2 {
    font-size:var(--ds-title);
    margin: 8px 0 20px;
  }
  .zg-copy {
    font-size: 16px;
    line-height: 1.55;
  }
  .zg-copy hr {
    margin: 18px 0;
  }
  .zg-cups {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin-top: 22px;
  }
  .zg-cup,
  .zg-team .zg-cup {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .zg-trophy-space,
  .zg-team .zg-trophy-space {
    position: relative;
    bottom: auto;
    height: 230px;
    flex: none;
  }
  .zg-pioneer .zg-trophy {
    height: 68%;
  }
  .zg-vanguard .zg-trophy {
    height: 86%;
  }
  .zg-cup figcaption,
  .zg-team .zg-cup figcaption {
    position: relative;
    top: auto;
    padding: 12px 0 0;
  }
  .zg-section h3,
  .zg-team h3 {
    font-size:var(--ds-card);
    white-space: normal;
    line-height:1.15;
  }
  .zg-scope,
  .zg-team .zg-scope {
    font-size: 12px;
    letter-spacing: .08em;
    margin: 7px 0;
  }
  .zg-cup figcaption p {
    font-size:var(--ds-copy);
    line-height:1.55;
    max-width: none;
  }
  .zg-individual .zg-cup+.zg-cup figcaption {
    border: 0;
  }
  .zg-individual-neon {
    display: none;
  }
  .zg-team .zg-stage {
    display: flex;
    flex-direction: column;
    padding: 32px 20px;
  }
  .zg-team .zg-backdrop {
    object-fit: cover;
    object-position: 35% 50%;
  }
  .zg-team-shade {
    background: #03182b88;
  }
  .zg-team-copy {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    order: -1;
  }
  .zg-team h2 {
    font-size:var(--ds-title);
    margin: 10px 0 20px;
  }
  .zg-team h2 br {
    display: none;
  }
  .zg-team-copy>p:not(.zg-eyebrow) {
    font-size:var(--ds-eyebrow);
  }
  .zg-consent {
    margin-top: 22px;
    gap: 12px;
  }
  .zg-consent p {
    font-size:var(--ds-copy);
    padding-left: 12px;
  }
  .zg-consent svg {
    width: 20px;
    height: 30px;
  }
  .zg-team .zg-trophy-space {
    height: 250px;
  }
  .zg-dominion .zg-trophy {
    height: 60%;
  }
  .zg-emperor .zg-trophy {
    height: 80%;
  }
  .zg-team .zg-cup figcaption {
    background: #03182bcc;
    border-bottom: 2px solid #0087ff;
    padding: 14px 3px;
    min-height: 98px;
    box-shadow: 0 7px 15px #0062ff35;
  }
  .zg-team-neon {
    display: none;
  }
  .zg-asset-note {
    font-size: 12px;
    max-width: 100%;
    padding: 10px;
  }
  .zg-gap .zg-stage {
    display: flex;
    flex-direction: column;
    padding: 32px 20px 8px;
  }
  .zg-gap-copy {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }
  .zg-gap h2 {
    font-size:var(--ds-title);
    margin: 8px 0 24px;
  }
  .zg-gap-copy>p:not(.zg-eyebrow) {
    font-size:var(--ds-eyebrow);
    line-height:1.25;
    margin-bottom: 20px;
  }
  .zg-gap-visual {
    position: relative;
    inset: auto;
    order: 2;
    width: 158%;
    margin-left: -55%;
    aspect-ratio: 1672/941;
    flex: none;
  }
  .zg-city {
    font-size: 7px;
  }
  .zg-record {
    border-radius: 9px;
  }
  .zg-cup:focus-visible {
    outline-offset: 4px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .zg-section *,
  .zg-section *:after {
    animation: none!important;
    transition: none!important;
  }
  .zg-cup:hover .zg-trophy,
  .zg-cup:focus-visible .zg-trophy {
    transform: none;
  }
  .zg-particles {
    display: none;
  }
}

@media(max-width:1139px) {
  .zg-trophy {
    width: 100%;
    max-width: 100%;
    object-fit: contain;
  }
  .zg-team .zg-trophy-space {
    bottom: auto;
  }
}

@media(min-width:1140px) {
  .zg-team .zg-cup figcaption {
    top: 80%;
  }
  .zg-team h2 {
    font-size:var(--ds-title);
    margin: .8cqw 0 1.4cqw;
  }
  .zg-team-copy>p:not(.zg-eyebrow) {
    font-size:var(--ds-eyebrow);
  }
  .zg-team-copy {
    width: 23.4%;
  }
}

.zg-beams i {
  clip-path: none;
  background: radial-gradient(ellipse at top,#cfe6ff35, #bddaff12 40%,transparent 70%);
  filter: blur(10px);
}



@media (min-width: 701px) and (max-width: 1139px) {
  .zg-gap-visual {
    width: 100%;
    margin-left: 0;
  }
}

/* ======================= isolation ================================

   What core.css reaches into a .zg-* section, and why each one is
   stated back rather than left alone.

   1. `p { line-height: 1.55 }` at (0,0,1).

      The package sets line-height on the CONTAINER — .zg-copy is
      1.37, .zg-gap-copy's paragraphs 1.4 — and lets the paragraphs
      inherit it. A bare `p` rule is not inheritance; it applies
      directly to the element and therefore beats the inherited value
      no matter how specific the container rule is. Every body
      paragraph in all three sections was rendering at 1.55.

      `inherit` restores the package's intent at (0,1,1), and still
      loses to the rules that do set line-height on a paragraph
      directly (.zg-cup figcaption p, .zg-consent p, and the two
      >p:not(.zg-eyebrow) rules), which is correct.

   2. `h3 { letter-spacing: -0.012em }` at (0,0,1).

      The site tightens tracking as type gets larger. The package's h3
      is a championship name at ~2cqw and sets no letter-spacing of its
      own, so it inherited the site's negative tracking and the names
      came out tighter than the approved reference.

   3. `.ln { display: block }` — this one is the site reaching in on
      purpose, and it is wanted. The supplied "Selected<br>as a club"
      gives a textContent of "Selectedas a club", which is the exact
      defect src/lib/html.mjs's fixHeadingBreaks() exists to fix, so
      the markup uses the site's own .ln spans instead of a <br>. The
      colour is pinned because two pages restyle .ln to get a two-tone
      heading, and this heading is one colour. */
.zg-section p {
  line-height:1.55;
}
.zg-section h3 {
  letter-spacing:0;
}
.zg-section h2 .ln {
  display: block;
  color: inherit;
}
@media (max-width: 1139px) {
  .zg-section h2 .ln { display: inline; }
}

/* ============== the team cups on their plinths ====================

   The package sized --cup-height for its own cutouts and did not ship
   the team cups; these are the site's existing Dominion, Emperor and
   Eternal files, and each carries a different amount of empty space
   below its base:

     dominion   560x582    26px of transparent pad   4.47% of height
     emperor    640x960    65px                      6.77%
     eternal    800x1200   60px                      5.00%

   .zg-trophy is height:100% with object-position:center bottom, which
   aligns the image BOX to the foot of the slot, not the cup inside it.
   So each cup floated above its plinth by its own pad -- measured on
   the built page at 1600x900: 14px, 30px and 26px. Three different
   gaps in a row of three, which is what makes it read as a mistake
   rather than a shadow.

   Pushing each cup down by exactly its own pad puts all three bases on
   the plinth. A percentage on `translate` resolves against the
   element's own height, so this holds at every viewport width without
   a second set of numbers.

   `translate` and not `transform`: .zg-trophy's hover and focus rules
   set `transform`, and a base transform here would simply be replaced
   by them -- the cups would jump off their plinths on hover. The
   individual property composes instead, which is the same reason
   tile-system.css uses it.

   Composition only. Below 1140px the section flows vertically, the plinths
   are not in the crop, and each cup sits on a dark caption card where
   a few pixels of air is correct rather than wrong. */
@media (min-width: 1140px) {
  .zg-team .zg-dominion .zg-trophy { translate: 0 4.47%; }
  .zg-team .zg-emperor .zg-trophy  { translate: 0 6.77%; }
  .zg-team .zg-eternal .zg-trophy  { translate: 0 5%; }
}

/* ================= the type stops growing ==========================

   Every size in the package is a container-query unit, so all three
   compositions scale as one picture. That is right for the artwork and
   wrong for the words past a point: the stage now spans the window, so
   on a 1900px window the body copy resolved to 36.7px and the headings
   to 118px. Poster type, not page type -- and the wider the monitor the
   worse it got, with no ceiling anywhere.

   Each size is capped at the value it resolves to on a 1440px stage,
   which is the width this design was signed off at. Below 1440 nothing
   whatsoever changes; above it, the words hold their size while the
   picture keeps growing, which is how the composition was meant to read
   in the first place.

   The vertical rhythm is capped on the same basis. Capping the sizes
   and leaving the margins in cqw would pull the blocks apart on a wide
   screen -- small text adrift in big gaps.

   Composition only: below 1140px the stacked layout sets plain px and
   the stage is not a query container, so a cqw would not resolve. */
@media (min-width: 1140px) {
  .zg-eyebrow                    { font-size:var(--ds-eyebrow); }
  .zg-section h2                 { font-size:var(--ds-title); }
  .zg-section h3                 { font-size:var(--ds-card); }
  .zg-scope                      { font-size: min(1.5cqw, 22px); margin: min(0.55cqw, 8px) 0; }
  .zg-copy                       { font-size: min(1.93cqw, 28px); }
  .zg-copy hr                    { margin: min(2.9cqw, 42px) 0 min(2.1cqw, 30px); }
  .zg-cup figcaption p           { font-size:var(--ds-copy); max-width: min(18.5cqw, 266px); }

  .zg-team h2                    { font-size:var(--ds-title); margin: min(0.8cqw, 12px) 0 min(1.4cqw, 20px); }
  .zg-team h3                    { font-size:var(--ds-card); }
  .zg-team .zg-eyebrow           { font-size:var(--ds-eyebrow); }
  .zg-team .zg-scope             { font-size: min(1.5cqw, 22px); }
  .zg-team-copy > p:not(.zg-eyebrow) { font-size:var(--ds-eyebrow); }
  .zg-consent                    { margin-top: min(2.8cqw, 40px); gap: min(1cqw, 14px); }
  .zg-consent p                  { font-size:var(--ds-copy); padding-left: min(0.9cqw, 13px); }
  .zg-consent svg                { width: min(1.7cqw, 24px); height: min(2.8cqw, 40px); }

  .zg-gap h2                     { font-size:var(--ds-title); margin: min(0.8cqw, 12px) 0 min(3.3cqw, 48px); }
  .zg-gap .zg-eyebrow            { font-size:var(--ds-eyebrow); }
  .zg-gap-copy > p:not(.zg-eyebrow) { font-size:var(--ds-eyebrow); margin-bottom: min(2.5cqw, 36px); }
  .zg-city                       { font-size: min(0.75cqw, 11px); }
}

/* ============ the glow matches the light it is lighting =============

   One .zg-neon treatment is applied to both sections, and the two
   artworks are nothing alike.

   The team plate is a night concourse whose LED strips are painted hot
   white-blue (sampled ~RGB 194,228,243 on the uprights). A #1793ff
   stroke with a double bloom sits on that convincingly: the strip looks
   like it is running.

   The individual plate is a daylight room. Its two trims -- the window
   mullion and the counter inlay -- are painted DEEP NAVY, sampled at
   RGB 15,70,141 and 1,54,129. Both supplied lines are exactly on them
   (measured 0.2px and 0.5px median offset, and confirmed by rendering
   them over the plate), so the geometry was never the problem. The
   treatment was: a hot cyan stroke at full weight over dark trim in a
   bright photograph reads as a highlighter drawn across the picture,
   not as the trim lighting up.

   So this section gets its own: narrower, dimmer, and a bloom that
   reaches rather than burns. The animation is untouched -- both still
   breathe on the same zg-glow cycle. */
.zg-individual-neon {
  stroke: #3c9cff;
  stroke-width: 2.2;
  opacity: 0.5;
  filter: drop-shadow(0 0 4px #388bffaa) drop-shadow(0 0 13px #007aff4d);
}