/* Avoner: the logo's wordmark face (single weight, caps only) — used for headers */
@font-face {
  font-family: "Avoner"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../../assets/fonts/avoner-regular-webfont.woff2") format("woff2"), url("../assets/fonts/avoner-regular-webfont.woff") format("woff");
}

/* Tokens — mirrored from the Figma "Tokens" collection + the "Website Landing Page" frame (4:478) */
:root {
  --color-brand-default: #942023;
  --color-brand-hover: #681619;
  --color-accent-gold: #d6bc75;
  --color-deco-gold: #f4c486;
  --color-text-secondary: #655e54;
  --color-card: #0d0d0f;
  --radius-full: 999px;

  --font: "Poppins", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-award: "Ropa Sans", "Poppins", sans-serif;
  --font-display: "Avoner", "Poppins", sans-serif;
  color-scheme: dark;
  --gutter: 48px;
  /* Vertical rhythm: the gap between one section's content and the next section's content */
  --space-section: 160px;

  /* Type scale: every text style on the page maps to one of these steps */
  --fs-display: 50px;  /* hero headline (the logo is the real header, so this sits a step above the h2s) */
  --fs-h2: 44px;       /* section titles */
  --fs-h3: 32px;       /* spare step (was the closing banner) */
  --fs-h4: 24px;       /* card / item titles (features, games, map card) */
  --fs-lead: 24px;     /* gold hero subhead */
  --fs-body-l: 20px;   /* main paragraphs */
  --fs-body: 16px;     /* buttons, pills, reviews, address */
  --fs-small: 14px;    /* links, captions, footer */
  --fs-label: 12px;    /* uppercase tracked labels + eyebrows */
  --fs-micro: 11px;    /* uppercase mono meta */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #000; color: #fff; font-family: var(--font); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, address { margin: 0; padding: 0; font-style: normal; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

/* Shared type styles (sizes come from the scale above) */
.h2      { font-weight: 600; font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.015em; }
.body-lg { font-weight: 400; font-size: var(--fs-body-l); line-height: 1.55; }
.overline { font-weight: 600; font-size: var(--fs-label); line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-gold); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 var(--fs-body)/24px var(--font); white-space: nowrap;
  border-radius: var(--radius-full); transition: background-color .15s ease, opacity .15s ease;
}
.btn--primary { background: var(--color-brand-default); color: #fff; padding: 16px 32px; }
.btn--primary:hover { background: var(--color-brand-hover); }
.btn--text { color: #fff; padding: 4px 0; }
.btn--text:hover { opacity: .75; }
.btn:focus-visible, .footer a:focus-visible { outline: 2px solid var(--color-accent-gold); outline-offset: 3px; }

/* Hero */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px var(--gutter) 100px;
}
.hero > :not(.deco-pattern):not(.trailer):not(.topbar) { position: relative; z-index: 1; }
/* Top bar across the top of the hero: Portal Adventures mark on the left */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; padding: 20px var(--gutter);
}
.topbar__brand {
  display: inline-flex; align-items: center; gap: 14px; text-align: left;
  font: 600 var(--fs-micro)/1.5 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-gold);
  transition: opacity .15s ease;
}
.topbar__brand:hover { opacity: .8; }
.topbar__brand:focus-visible { outline: 2px solid var(--color-accent-gold); outline-offset: 4px; border-radius: 6px; }
.topbar__brand img { width: 52px; height: auto; flex: none; }
.hero__logo { margin-top: 92px; width: 471px; height: auto; overflow: visible; }
.logo-intro img.hero__logo { visibility: hidden; } /* swapped for the animated SVG by main.js */
/* no permanent will-change: it rasterises the SVG at one size and leaves it jagged once scaled
   (main.js sets it only while the intro is moving the logo) */
svg.hero__logo { transform-origin: 50% 50%; shape-rendering: geometricPrecision; }
html.intro-playing { overflow: hidden; } /* pause scrolling while the full-screen intro plays */
.hero__title { margin-top: 48px; font-weight: 600; font-size: var(--fs-display); line-height: 1.15; letter-spacing: -.015em; }
.hero__sub { margin-top: 12px; max-width: 657px; font: 400 var(--fs-lead)/1.45 var(--font); color: var(--color-accent-gold); }
.hero__body { margin-top: 32px; max-width: 698px; font: 400 var(--fs-body-l)/1.55 var(--font); color: #8e8b86; }
.hero__actions { margin-top: 45px; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.hero__actions .btn--text { font-size: var(--fs-small); line-height: 20px; color: #8e8b86; text-decoration: underline; text-underline-offset: 3px; }

/* Background: seamless art deco fan pattern (4% grey #0a0a0a on black) behind the hero.
   The tile is one 500×1000 repeat drawn at 2× for sharp lines; each use sets its own fade mask. */
.deco-pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/images/decor/deco-fan-tile.png") center top / 250px 500px repeat;
}
.hero__pattern {
  /* full strength only at the very top, starts fading behind the logo (~260px),
     then eases out slowly over the rest of the hero (~1000px) */
  --fade: #000 0px, #000 260px, rgba(0,0,0,.86) 400px, rgba(0,0,0,.68) 570px, rgba(0,0,0,.5) 740px,
          rgba(0,0,0,.33) 910px, rgba(0,0,0,.19) 1060px, rgba(0,0,0,.08) 1190px, transparent 100%;
  -webkit-mask-image: linear-gradient(to bottom, var(--fade));
          mask-image: linear-gradient(to bottom, var(--fade));
}
.trailer[hidden] { display: none; } /* the global img/video display:block would otherwise show the hidden player */
.trailer:fullscreen { object-fit: contain; background: #000; }

/* Proof strip: Google rating + award laurels between the hero and the features frame */
.proof { padding: 0 var(--gutter) var(--space-section); display: flex; flex-direction: column; align-items: center; gap: 28px; }
/* small gold label naming whose ratings and awards these are (the show is new; these are Portal’s) */
.proof__label { margin-bottom: -12px; text-align: center; }
.proof__rating { display: flex; align-items: center; gap: 12px; font: 400 var(--fs-small)/1 var(--font-ui); color: rgba(255,255,255,.75); }
.proof__rating strong { font-weight: 600; color: #fff; }
.proof__stars { font-size: var(--fs-body); letter-spacing: .1em; color: var(--color-accent-gold); }

/* Awards — film-festival laurels in one row, the big line in Avoner to match the headers */
.sr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* the row spans the same width as the features frame below it (988px), first and last award on its edges */
.awards { width: min(988px, 100%); display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; align-items: center; gap: 20px 24px; }
.award { display: flex; align-items: center; justify-content: center; gap: 10px; }
.laurel { width: 25px; height: 62px; color: var(--color-accent-gold); flex: none; }
.laurel--r { transform: scaleX(-1); }
/* fixed width (fits the longest line, "Official Nominee") so every pair of laurels sits the same distance apart */
.award__text { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 126px; }
.award__small { font: 400 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); white-space: nowrap; }
.award__big { font: 400 26px/30px var(--font-display); white-space: nowrap; }
@media (max-width: 1024px) { .awards { grid-template-columns: repeat(2, auto); justify-content: center; column-gap: 48px; } }
/* two per row on smaller screens; the third award sits centred on its own row */
@media (max-width: 1024px) { .award:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Features — gold art deco frame (Figma 63:1834, 988×1166) holding three illustrated rows.
   border-image keeps the 40px fan corners of deco-frame.svg intact on this taller frame. */
.features { padding: 0 var(--gutter); }
.features__frame {
  width: min(988px, 100%); margin: 0 auto; padding: 59px 40px 46px;
  border: 40px solid transparent; border-image: url("../assets/images/decor/deco-frame.svg") 40 / 40px stretch;
  display: flex; flex-direction: column; gap: 90px;
}
.feature { display: grid; grid-template-columns: 1fr 460px; align-items: center; gap: 64px; }
.feature--flip { grid-template-columns: 460px 1fr; }
.feature--flip .feature__art { order: 2; }
.feature__art { justify-self: center; width: auto; max-width: 100%; height: auto; }
.feature:nth-child(1) .feature__art { width: 360px; }  /* the two contestants cheering */
.feature:nth-child(2) .feature__art { width: 284px; }  /* host slamming the buzzer, sized to match the couple above */
.feature:nth-child(3) .feature__art { width: 340px; transform: rotate(-12deg); }  /* prize gift, tilted so it floats */
.feature__title { font: 600 var(--fs-h4)/1.3 var(--font); }
.feature__text p { margin-top: 16px; font: 400 var(--fs-body-l)/1.55 var(--font); color: #8e8b86; }
.feature__text .feature__round { margin: 0 0 8px; font: 600 var(--fs-label)/16px var(--font); color: var(--color-accent-gold); } /* "Round 1/2/3" above each title */

/* Photo strip — one full-bleed row of three studio photos.
   The bottom fades into black so the host, pulled up over it, reads clearly. */
.photo-strip {
  position: relative; margin-top: var(--space-section);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.photo-strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-strip .photo-strip__extra { display: none; } /* 4th photo, phones only */
.photo-strip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 70%, #000 100%);
}

/* Band — solid black, with the premise, CTA and quick facts. The host + easel are pulled up so
   they stand over the photos. Full-width gold divider lines (the same gold as the deco frames)
   sit at the top of the photo row and after the quick-fact pills. */
.band {
  --host-w: min(940px, calc(100vw - 2 * var(--gutter)));
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 var(--gutter) 96px;
  background: #000;
}
/* gold divider under the pills (the band's bottom edge) */
.band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--color-deco-gold);
}
/* pulled up 44px so the top of the illustration just overlaps the photos' faded bottom edge */
.band__host { display: block; width: var(--host-w); height: auto; overflow: visible; margin-top: -294px; }
.band__title { font: 600 var(--fs-h2)/1.2 var(--font); letter-spacing: -.015em; }
.band__title span { display: block; } /* each sentence on its own line(s), balanced separately */
.band__body { margin-top: 14px; font: 400 var(--fs-body-l)/1.55 var(--font); color: rgba(255,255,255,.85); }
.band .btn { margin-top: 32px; }
/* Host idle animation — small on purpose: he mostly stands still.
   SVG units = the illustration's own pixels (1650×926). */
.host__man, .host__pupils, .host__dart, .host__arm, .host__foot, .host__tap, .host__thud { transform-box: view-box; }
.host__arm { transform-origin: 600px 425px; animation: host-arm 6.4s ease-in-out infinite; }                 /* sways from the shoulder */
.host__foot { transform-origin: 514px 808px; animation: host-foot 8s ease-in-out 1s infinite; }             /* toe lifts, heel stays down */
.host__tap { font: 400 34px "Gochi Hand", "Comic Sans MS", cursive; fill: #fff; stroke: none; opacity: 0; }
.host__tap--1 { animation: host-tap-1 8s ease-out 1s infinite; }
.host__tap--2 { animation: host-tap-2 8s ease-out 1s infinite; }
.host__tap--3 { animation: host-tap-3 8s ease-out 1s infinite; }
.host__thud { opacity: 0; transform-origin: 664px 791px; animation: host-thud 8s linear 1s infinite; }

/* puppet-like: a slow lift of the presenting hand with a little settle */
@keyframes host-arm {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-1.8deg); }
  52%      { transform: rotate(0.5deg); }
  72%      { transform: rotate(-0.9deg); }
}
/* three toe taps, then a long rest */
@keyframes host-foot {
  0%, 56%   { transform: rotate(0deg); }
  58.5%     { transform: rotate(-7deg); }
  61%       { transform: rotate(0deg); }
  63.5%     { transform: rotate(-7deg); }
  66%       { transform: rotate(0deg); }
  68.5%     { transform: rotate(-8deg); }
  71%, 100% { transform: rotate(0deg); }
}
/* each word pops on its tap, drifts up and fades */
@keyframes host-tap-1 { 0%, 60.9% { opacity: 0; transform: translateY(6px); } 61% { opacity: 1; transform: none; } 70% { opacity: 1; } 76%, 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes host-tap-2 { 0%, 65.9% { opacity: 0; transform: translateY(6px); } 66% { opacity: 1; transform: none; } 75% { opacity: 1; } 81%, 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes host-tap-3 { 0%, 70.9% { opacity: 0; transform: translateY(6px); } 71% { opacity: 1; transform: none; } 80% { opacity: 1; } 86%, 100% { opacity: 0; transform: translateY(-10px); } }
/* impact marks flash on each contact */
@keyframes host-thud {
  0%, 60.9%, 63%, 65.9%, 68%, 70.9%, 73.5%, 100% { opacity: 0; transform: scale(.8); }
  61%, 66%, 71% { opacity: .9; transform: scale(1); }
}
.host__man { transform-origin: 510px 800px; animation: host-breathe 4.8s ease-in-out infinite; }           /* feet stay planted */
.host__eyes { opacity: 0; animation: host-eyes 11s linear .6s infinite; }
.host__pupils { animation: host-glance 11s ease-in-out .6s infinite; }
.host__dart { transform-origin: 1157px 349px; animation: host-dart 5.5s ease-out 1.5s infinite; }          /* pivots on its tip */

@keyframes host-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.003, 1.007); }
}
/* mostly open: blink → (glance at the map) → blink → a short happy squint (~0.9s) */
@keyframes host-eyes {
  0%, 2.5%    { opacity: 0; }   /* opens just after the loop starts */
  3%, 28%     { opacity: 1; }
  28.5%, 30%  { opacity: 0; }   /* blink */
  30.5%, 66%  { opacity: 1; }
  66.5%, 68%  { opacity: 0; }   /* blink */
  68.5%, 88%  { opacity: 1; }
  88.5%, 96%  { opacity: 0; }   /* short squint */
  96.5%, 100% { opacity: 1; }
}
@keyframes host-glance {
  0%, 42%   { transform: translate(0, 0); }
  48%, 60%  { transform: translate(3.5px, -1px); }  /* toward the map */
  66%, 100% { transform: translate(0, 0); }
}
/* two damped wobbles per cycle (a big one, then a smaller aftershock), as if it just landed */
@keyframes host-dart {
  0%        { transform: rotate(0deg); }
  4%        { transform: rotate(-5deg); }
  8%        { transform: rotate(3.5deg); }
  12%       { transform: rotate(-2deg); }
  16%       { transform: rotate(1deg); }
  20%, 52%  { transform: rotate(0deg); }
  55%       { transform: rotate(-3deg); }
  58.5%     { transform: rotate(2deg); }
  62%       { transform: rotate(-1deg); }
  65%, 100% { transform: rotate(0deg); }
}

/* Quick-fact pills (in the band) */
.facts { margin-top: 55px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pill {
  font: 500 var(--fs-body)/24px var(--font); color: var(--color-accent-gold);
  border: 1px solid var(--color-accent-gold); border-radius: var(--radius-full); padding: 10px 20px; white-space: nowrap;
}

/* Mini games — 2 × 3 grid of looping clips (Figma 53:1619: 379px tiles, 96px column gap).
   Tiles are 16:9 to match the clips, which are cropped inside the tutorials' white film border. */
.games { position: relative; overflow: hidden; padding: var(--space-section) var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 49px; }
.games > :not(.deco-pattern) { position: relative; z-index: 1; }
.games__pattern {
  /* the hero's fan pattern: eases in over the top 140px (out of the story band above),
     strongest behind the heading and first row, then a long fade out down the grid */
  --fade: transparent 0px, #000 140px, #000 300px, rgba(0,0,0,.8) 460px, rgba(0,0,0,.55) 640px,
          rgba(0,0,0,.32) 820px, rgba(0,0,0,.14) 990px, transparent 100%;
  -webkit-mask-image: linear-gradient(to bottom, var(--fade));
          mask-image: linear-gradient(to bottom, var(--fade));
}
.games__title { font-weight: 600; font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -.015em; text-align: center; }
/* 3 across on desktop (two rows of three), 2 across on tablets, 1 on phones */
.games__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 379px)); justify-content: center; gap: 49px 56px; width: 100%; }
@media (max-width: 1200px) { .games__grid { grid-template-columns: repeat(2, minmax(0, 379px)); } }
.game { display: flex; flex-direction: column; align-items: center; gap: 17px; }
/* an odd tile out sits centred on its own in the last row */
.game:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(379px, 100%); }
/* Gold art deco frame (same artwork as the features frame) drawn with border-image:
   the 40px fan corners of deco-frame.svg stay intact at 24px, only the straight edges stretch,
   and the clip sits inside the frame's inner line. */
.game__media {
  width: 100%; border: 24px solid transparent;
  border-image: url("../assets/images/decor/deco-frame.svg") 40 / 24px stretch;
}
.game__video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0d0d0f; }

/* Hover: small 1940s cartoon-style moves, held on "twos" (steps at ~12fps) so they read
   hand-drawn. main.js rotates through the three on each hover for variety. */
/* will-change gives each frame its own layer, painted once: the steps then only move that layer,
   so the SVG border-image is never re-rasterised mid-move (Safari and Firefox could drop it for a step) */
.game__media { transform-origin: 50% 85%; will-change: transform; }
.game__media.wiggle-jiggle  { animation: wiggle-jiggle .75s steps(1, end) 1; }
.game__media.wiggle-hop     { animation: wiggle-hop .7s steps(1, end) 1; }
.game__media.wiggle-shimmy  { animation: wiggle-shimmy .8s steps(1, end) 1; }
@keyframes wiggle-jiggle {  /* squash, stretch, tilt and settle */
  0%    { transform: none; }
  11%   { transform: rotate(-1.1deg) scale(1.02, .975); }
  22%   { transform: rotate(.9deg)   scale(.985, 1.025) translateY(-2px); }
  33%   { transform: rotate(-.7deg)  scale(1.015, .985) translateY(-1px); }
  44%   { transform: rotate(.5deg)   scale(.995, 1.01); }
  55%   { transform: rotate(-.3deg); }
  66%, 100% { transform: none; }
}
@keyframes wiggle-hop {     /* crouch, little jump, squash on landing */
  0%    { transform: none; }
  12%   { transform: scale(1.025, .97); }
  26%   { transform: scale(.98, 1.03) translateY(-6px); }
  40%   { transform: scale(.99, 1.015) translateY(-8px) rotate(.4deg); }
  54%   { transform: scale(1.03, .965); }
  68%   { transform: scale(.995, 1.01) translateY(-1px); }
  80%, 100% { transform: none; }
}
@keyframes wiggle-shimmy {  /* rubbery side-to-side lean */
  0%    { transform: none; }
  10%   { transform: translateX(-3px) skewX(1.5deg); }
  20%   { transform: translateX(3px)  skewX(-1.5deg); }
  30%   { transform: translateX(-2px) skewX(1deg); }
  40%   { transform: translateX(2px)  skewX(-1deg); }
  50%   { transform: translateX(-1px) skewX(.5deg); }
  60%   { transform: translateX(1px); }
  70%, 100% { transform: none; }
}
.game__name { font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; text-align: center; }

/* Gallery — spotlight carousel (layout + lightbox styles live in gallery.css) */
/* Reel: full-width b-roll band with hard top and bottom edges */
.reel { position: relative; width: 100%; aspect-ratio: 1600 / 534; max-height: 600px; overflow: hidden; }
.reel__video { display: block; width: 100%; height: 100%; object-fit: cover; }

.gallery { position: relative; overflow: hidden; padding: var(--space-section) 0 0; }

/* Reviews */
.reviews { padding: var(--space-section) var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 47px; }
.reviews__rating { margin-bottom: -27px; } /* the same Google line as under the hero, 20px above the title */
.reviews__title { font-weight: 600; font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -.015em; text-align: center; }
.reviews__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 432px)); justify-content: center; gap: 29px 22px; width: 100%; }
.review {
  display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: 20px;
  background: var(--color-card); border: 1px solid rgba(255,255,255,.08);
}
.review__stars { font: 400 18px/22px var(--font-ui); letter-spacing: .1em; color: var(--color-accent-gold); }
.review__quote { font: 400 var(--fs-body)/1.55 var(--font-ui); color: rgba(255,255,255,.85); }
.review__name { font: 400 var(--fs-micro)/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* FAQ: a simple accordion (native <details>), gold plus that turns to a minus when open */
.faq { padding: 0 var(--gutter) var(--space-section); display: flex; flex-direction: column; align-items: center; gap: 47px; }
.faq__title { font-size: var(--fs-h2); line-height: 1.2; text-align: center; }
.faq__list { width: min(886px, 100%); border-top: 1px solid rgba(255,255,255,.12); }
.faq__item { border-bottom: 1px solid rgba(255,255,255,.12); }
.faq__item summary {
  position: relative; list-style: none; cursor: pointer; padding: 24px 48px 24px 0;
  font: 500 var(--fs-body-l)/1.4 var(--font); color: #fff;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before, .faq__item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 1.5px;
  background: var(--color-accent-gold); transition: transform .25s ease;
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__item summary:hover { color: var(--color-accent-gold); }
.faq__item summary:focus-visible { outline: 2px solid var(--color-accent-gold); outline-offset: 4px; border-radius: 4px; }
.faq__item p { padding: 0 48px 24px 0; font: 400 var(--fs-body)/1.65 var(--font-ui); color: rgba(255,255,255,.7); }
.faq__item p a { color: var(--color-accent-gold); text-decoration: underline; text-underline-offset: 3px; }

/* Creators: Portal Adventures story on the Figma deep-blue radial gradient (74:1317); the logo is
   lifted over the section's top edge, and the section is pushed down by the same amount so the
   logo still sits one --space-section below the reviews' Book button */
.creators {
  --logo-lift: 84px;
  position: relative; margin-top: var(--logo-lift); padding: 0 var(--gutter) var(--space-section);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: radial-gradient(ellipse 130% 95% at 54% 124%, #02050c 0%, #050e26 25%, #09183f 50%, #0c2259 75%, #102c72 100%);
}
.creators__logo { width: 240px; height: auto; margin-top: calc(-1 * var(--logo-lift)); }
.creators__title { margin-top: 48px; max-width: 761px; }
.creators__body { margin-top: 24px; max-width: 680px; display: flex; flex-direction: column; gap: 20px; font: 400 var(--fs-body)/1.7 var(--font); color: rgba(255,255,255,.7); }
.creators__photos { list-style: none; margin: 96px 0 0; padding: 0; width: min(1200px, 100%); display: grid; grid-template-columns: 497fr 561fr 561fr; gap: 24px; }
.creators__photos img { display: block; width: 100%; height: clamp(200px, 22vw, 320px); object-fit: cover; }

.visit { position: relative; height: clamp(440px, 42vw, 560px); overflow: hidden; background: #111; border-top: 1px solid rgba(214,188,117,.25); border-bottom: 1px solid rgba(214,188,117,.25); }
.visit__map {
  /* taller than the band and pulled up, so Google's little address box (top-left) sits out of view;
     the attribution along the bottom stays visible */
  position: absolute; left: 0; top: -80px; width: 100%; height: calc(100% + 80px); border: 0;
  filter: invert(.92) grayscale(1) contrast(.95); /* dark, fully black & white */
  /* not interactive: Google's "Ctrl + scroll to zoom" overlay inverts to a bright grey flash on hover.
     The card's "Get directions" button opens the full map instead. */
  pointer-events: none;
}
.visit__card {
  position: absolute; left: max(var(--gutter), calc(50% - 600px)); top: 50%; transform: translateY(-50%);
  width: min(380px, calc(100% - 2 * var(--gutter))); padding: 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  background: rgba(0,0,0,.82); border: 1px solid rgba(214,188,117,.45); border-radius: 16px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.8);
}
.visit__title { font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; }
.visit__address, .visit__contact { font: 400 var(--fs-body)/1.6 var(--font-ui); color: rgba(255,255,255,.8); }
.visit__contact a:hover { color: #fff; text-decoration: underline; }
.visit .btn { margin-top: 6px; }

/* Footer */
.footer { padding: 112px var(--gutter) 40px; display: flex; flex-direction: column; gap: 72px; }
.footer__main { width: min(1200px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.footer__logo { width: 140px; height: auto; }
.footer__social { display: flex; gap: 12px; }
.footer__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(214,188,117,.45); color: var(--color-accent-gold); transition: background-color .15s ease, color .15s ease;
}
.footer__icon svg { width: 20px; height: 20px; fill: currentColor; }
.footer__icon:hover { background: var(--color-accent-gold); color: #000; }
.footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.footer__head { margin-bottom: 8px; font: 500 var(--fs-micro)/14px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-gold); }
.footer__links li { border-bottom: 1px solid rgba(255,255,255,.1); }
/* each row is a full-width 48px+ tap target with an arrow */
.footer__links a {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 28px 8px 0; position: relative;
  font: 500 var(--fs-body)/1.3 var(--font); color: #fff;
}
.footer__links a::after { content: "→"; position: absolute; right: 4px; color: var(--color-accent-gold); transition: transform .15s ease; }
.footer__links a:hover::after { transform: translateX(3px); }
.footer__links a:hover { color: var(--color-accent-gold); }
.footer__val { margin-left: auto; font: 400 var(--fs-small)/1.3 var(--font-ui); color: rgba(255,255,255,.6); text-align: right; overflow-wrap: anywhere; }
.footer__bottom {
  width: min(1200px, 100%); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  font: 400 var(--fs-micro)/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45);
}
.footer__legal { display: flex; gap: 8px; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.footer__legal a:hover { color: #fff; }

/* ---------- Partners page (partners.html) ---------- */
/* "Partner with us" / "Back to the show" on the right of the top bar */
.topbar { justify-content: space-between; }
.topbar__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  font: 600 var(--fs-micro)/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-gold);
  border: 1px solid rgba(214,188,117,.45); border-radius: var(--radius-full); transition: background-color .15s ease, color .15s ease;
}
.topbar__link:hover { background: var(--color-accent-gold); color: #000; }
.topbar__link:focus-visible { outline: 2px solid var(--color-accent-gold); outline-offset: 3px; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }
/* Book now: the brand red, so booking is always visible above the fold */
.topbar__book { background: var(--color-brand-default); border-color: var(--color-brand-default); color: #fff; }
.topbar__book:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); color: #fff; }
.btn--outline { color: var(--color-accent-gold); padding: 15px 31px; border: 1px solid var(--color-accent-gold); }
.btn--outline:hover { background: var(--color-accent-gold); color: #000; }

.phero__logo { margin-top: 72px; width: 220px; }
.phero__logo img { width: 100%; height: auto; }
.phero__eyebrow { margin-top: 40px; }
.phero .hero__title { margin-top: 12px; }

/* Why partner: four big numbers */
.pstats { padding: 0 var(--gutter) var(--space-section); display: flex; flex-direction: column; align-items: center; text-align: center; }
.pstats__title { margin-top: 12px; max-width: 720px; }
.pstats__grid { margin-top: 56px; width: min(1100px, 100%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pstat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px; border-top: 1px solid rgba(214,188,117,.45); }
.pstat__num { font: 400 48px/1.1 var(--font-display); color: #fff; }
.pstat__star { font-family: var(--font-ui); font-size: .55em; vertical-align: .5em; margin-left: 4px; color: var(--color-accent-gold); }
.pstat__label { font: 600 var(--fs-label)/16px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-gold); }
.pstat__note { font: 400 var(--fs-small)/1.5 var(--font-ui); color: rgba(255,255,255,.6); max-width: 200px; }

/* Tiers: two cards; the Featured Partner card has the brand red header (as in the media kit) */
.tiers { padding: 0 var(--gutter) var(--space-section); display: flex; flex-direction: column; align-items: center; text-align: center; }
.tiers__title { max-width: 760px; }
.tiers__intro { margin-top: 20px; max-width: 680px; font: 400 var(--fs-body-l)/1.55 var(--font); color: #8e8b86; }
.tiers__grid { margin-top: 56px; width: min(988px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; text-align: left; }
.tier { display: flex; flex-direction: column; background: var(--color-card); border: 1px solid rgba(214,188,117,.45); border-radius: 20px; overflow: hidden; }
.tier__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 32px 28px 28px; border-bottom: 1px solid rgba(214,188,117,.3); }
.tier--featured { border-color: var(--color-accent-gold); }
.tier--featured .tier__head { background: var(--color-brand-default); border-bottom-color: var(--color-accent-gold); }
.tier__icon { width: 40px; height: 40px; margin-bottom: 6px; fill: none; stroke: var(--color-accent-gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tier--featured .tier__icon { stroke: #fff; }
.tier__icon circle { fill: currentColor; stroke: none; }
.tier--featured .tier__icon circle { fill: #fff; }
.tier__name { font: 400 var(--fs-h3)/1.15 var(--font-display); }
.tier__tag { font: 600 var(--fs-label)/16px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-gold); }
.tier--featured .tier__tag { color: #fff; opacity: .85; }
.tier__term { margin-top: 6px; font: 400 var(--fs-micro)/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.tier--featured .tier__term { color: rgba(255,255,255,.8); }
.tier__list { padding: 12px 28px 20px; }
.tier__list li { position: relative; padding: 16px 0 16px 28px; border-bottom: 1px solid rgba(255,255,255,.08); font: 400 var(--fs-small)/1.55 var(--font-ui); color: rgba(255,255,255,.65); }
.tier__list li:last-child { border-bottom: 0; }
.tier__list li::before { content: "✦"; position: absolute; left: 0; top: 16px; font-size: 13px; line-height: 22px; color: var(--color-accent-gold); }
.tier__list strong { display: block; margin-bottom: 2px; font: 500 var(--fs-body)/1.4 var(--font); color: #fff; }
.tier__cta { margin: auto 28px 32px; /* auto top: both buttons sit at the bottom of equal-height cards */justify-content: center; white-space: normal; text-align: center; }

/* Custom mini-game: photo beside the pitch */
.pgame { padding: 0 var(--gutter) var(--space-section); display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; width: min(1100px, 100%); margin: 0 auto; box-sizing: content-box; }
.pgame__photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.pgame__title { margin-top: 12px; }
.pgame__text > p:last-child { margin-top: 20px; font: 400 var(--fs-body-l)/1.55 var(--font); color: #8e8b86; }

/* Prizes: two gift card amounts + three benefits, on the warm band gold lines */
.pprize {
  padding: var(--space-section) var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center;
  border-top: 1.5px solid var(--color-deco-gold); border-bottom: 1.5px solid var(--color-deco-gold);
}
.pprize__title { margin-top: 12px; max-width: 760px; }
.pprize__intro { margin-top: 20px; max-width: 640px; font: 400 var(--fs-body-l)/1.55 var(--font); color: #8e8b86; }
.pprize__amounts { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 24px; }
.pprize__amounts li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 20px; border: 1px solid var(--color-accent-gold); border-radius: 20px; }
.pprize__num { font: 400 56px/1 var(--font-display); color: var(--color-accent-gold); }
.pprize__label { font: 600 var(--fs-label)/16px var(--font); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.pprize__note { font: 400 var(--fs-small)/1.5 var(--font-ui); color: rgba(255,255,255,.6); }
.pprize__perks { margin-top: 56px; width: min(988px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pprize__perks li { font: 400 var(--fs-body)/1.55 var(--font-ui); color: rgba(255,255,255,.65); }
.pprize__perks strong { display: block; margin-bottom: 6px; font: 400 var(--fs-h4)/1.3 var(--font-display); color: #fff; }

/* Apply: intro on the left, form on the right */
.apply { padding: var(--space-section) var(--gutter); width: min(1100px, 100%); margin: 0 auto; box-sizing: content-box; display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.apply__title { margin-top: 12px; }
.apply__intro > p:not(.overline) { margin-top: 20px; font: 400 var(--fs-body-l)/1.55 var(--font); color: #8e8b86; }
.apply__intro .apply__contact { font-size: var(--fs-body); }
.apply__contact a { color: var(--color-accent-gold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.pform { display: flex; flex-direction: column; gap: 20px; padding: 36px; background: var(--color-card); border: 1px solid rgba(214,188,117,.45); border-radius: 20px; }
.pform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pform__field { display: flex; flex-direction: column; gap: 8px; }
.pform__field > span, .pform__tiers legend { font: 600 var(--fs-label)/16px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-gold); }
.pform__field em { font-style: normal; color: rgba(255,255,255,.5); }
.pform input:not([type="radio"]):not([type="checkbox"]), .pform textarea {
  width: 100%; padding: 13px 16px; font: 400 16px/1.4 var(--font-ui); color: #fff; /* 16px stops iOS zooming in on focus */
  background: #000; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; transition: border-color .15s ease;
}
.pform textarea { resize: vertical; min-height: 120px; }
.pform input::placeholder, .pform textarea::placeholder { color: rgba(255,255,255,.35); }
.pform input:focus, .pform textarea:focus { outline: none; border-color: var(--color-accent-gold); box-shadow: 0 0 0 3px rgba(214,188,117,.2); }
.pform.was-validated :invalid { border-color: #e0605c; }
.pform__tiers { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pform__tiers legend { margin-bottom: 10px; padding: 0; }
.pform__tiers label { cursor: pointer; }
.pform__tiers input { position: absolute; opacity: 0; pointer-events: none; }
.pform__tiers span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  font: 500 var(--fs-small)/1 var(--font); color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-full); transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pform__tiers label:hover span { border-color: var(--color-accent-gold); }
.pform__tiers input:checked + span { background: var(--color-accent-gold); border-color: var(--color-accent-gold); color: #000; }
.pform__tiers input:focus-visible + span { outline: 2px solid var(--color-accent-gold); outline-offset: 3px; }
.pform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pform__submit { align-self: flex-start; border: 0; cursor: pointer; }
.pform__submit:disabled { opacity: .6; cursor: wait; }
.pform__status { min-height: 1.5em; font: 400 var(--fs-body)/1.5 var(--font-ui); color: rgba(255,255,255,.8); }
.pform__status[data-kind="ok"] { color: var(--color-accent-gold); }
.pform__status[data-kind="error"] { color: #f08a86; }

@media (max-width: 1024px) {
  .pstats__grid { grid-template-columns: repeat(2, 1fr); }
  .tiers__grid { grid-template-columns: 1fr; max-width: 560px; }
  .pgame, .apply { grid-template-columns: 1fr; gap: 40px; width: min(640px, 100%); }
}
@media (max-width: 640px) {
  .topbar__link { padding: 0 12px; letter-spacing: .1em; }
  .topbar__actions { gap: 8px; }
  .phero__logo { margin-top: 64px; width: 160px; }
  .phero__eyebrow { margin-top: 28px; }
  .pstats__grid { margin-top: 36px; gap: 12px; }
  .pstat { padding: 24px 4px; }
  .pstat__num { font-size: 36px; }
  .tiers__grid { margin-top: 36px; gap: 20px; }
  .tier__head { padding: 28px 20px 24px; }
  .tier__list { padding: 8px 20px 0; }
  .tier__cta { margin: 16px 20px 24px; }
  .pprize__amounts { grid-template-columns: 1fr; width: 100%; max-width: 320px; }
  .pprize__perks { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .pform { padding: 24px 20px; }
  .pform__row { grid-template-columns: 1fr; }
  .pform__submit { align-self: stretch; justify-content: center; }
}

/* Headers in Avoner. Placed after the section rules so it overrides their font shorthands;
   Avoner has one weight, so 400 avoids faux bold; its built-in spacing is used as is. */
.hero__title, .h2, .band__title, .games__title, .reviews__title, .faq__title, .feature__title, .visit__title {
  font-family: var(--font-display); font-weight: 400; letter-spacing: 0;
}

/* No widows: headings and short lines balance their lines; paragraphs avoid a lone last word */
h1, h2, h3, .band__title span, summary, .hero__sub, .band__body, .game__name, .review__name { text-wrap: balance; }
p, li { text-wrap: pretty; }
.nowrap { white-space: nowrap; } /* keeps a short heading from leaving one word alone */

/* Tablet / mobile (basic — full mobile pass is on hold) */
@media (max-width: 1024px) {
  /* footer: brand block centred on top, the two link groups below */
  .footer__main { grid-template-columns: 1fr; gap: 56px; }
  .footer__brand { align-items: center; }
}
@media (max-width: 640px) {
  /* the type scale, stepped down for phones (desktop values at the top of the file) */
  :root {
    --gutter: 16px;
    --space-section: 96px;
    --fs-display: 34px; --fs-h2: 30px; --fs-h3: 24px; --fs-h4: 20px;
    --fs-lead: 19px; --fs-body-l: 17px; --fs-body: 15px; --fs-small: 13px; --fs-label: 11px; --fs-micro: 10px;
  }
  .hero__logo { margin-top: 56px; width: min(300px, 75vw); }
  .topbar { padding: 14px var(--gutter); }
  .topbar__brand span { display: none; } /* just the Portal mark on phones */
  .topbar__brand img { width: 42px; }
  .hero__title { margin-top: 36px; }
  .awards { gap: 16px 12px; }
  .award { gap: 6px; }
  .laurel { width: 22px; height: 54px; }
  .award__big { font-size: 22px; line-height: 25px; }
  .award__small { font-size: 9px; line-height: 12px; }
  .award__text { width: 104px; }
  .reviews__grid { grid-template-columns: 1fr; }
  /* mini-games 2 wide; the frame drops to 14px so the fans stay in proportion to the smaller tiles */
  .games__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  /* quick-fact pills: 2 × 2, all the same width */
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 360px; }
  .pill { padding: 10px 8px; text-align: center; }
  .game { gap: 10px; }
  .game:last-child:nth-child(odd) { width: calc(50% - 6px); }
  .game__media { border-width: 14px; border-image-width: 14px; }
  .game__name { font-size: 15px; }
  /* photos 2×2; the host's head + map top only break into the bottom third of the lower pair
     (the art starts ~15% down its SVG, so -22% of the width lifts it about 46px into the photos) */
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .photo-strip .photo-strip__extra { display: block; }
  .band__host { margin-top: calc(var(--host-w) * -.22); }
  /* section gaps come from --space-section (96px here) */
  .hero { padding-bottom: 64px; }
  .features__frame { padding: 32px 4px 24px; border-width: 28px; border-image-width: 28px; gap: 56px; }
  .feature, .feature--flip { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .feature--flip .feature__art { order: 0; }
  .feature .feature__art { width: min(240px, 70%); }
  /* the three icons balanced to the same visual weight on phones (the couple is the reference) */
  .feature:nth-child(1) .feature__art { width: min(204px, 60%); } /* couple */
  .feature:nth-child(2) .feature__art { width: min(214px, 63%); } /* face-off host (wider stance, more air) */
  .feature:nth-child(3) .feature__art { width: min(196px, 58%); } /* gift (solid shape; also beats the desktop 340px rule) */
  .games { gap: 48px; }
  .creators { --logo-lift: 56px; }
  .creators__logo { width: 160px; }
  .creators__photos { grid-template-columns: 1fr; gap: 12px; margin-top: 56px; }
  .creators__photos img { height: auto; aspect-ratio: 3 / 2; }
  .visit { height: auto; display: flex; flex-direction: column; }
  .visit__map { position: relative; top: 0; height: 320px; }
  .visit__card { position: relative; left: auto; top: auto; transform: none; width: auto; margin: -48px var(--gutter) 24px; }
  /* footer: one column, full-width Book button, link groups stacked, legal centred */
  .footer { padding-top: 64px; gap: 48px; }
  .footer__brand { gap: 24px; }
  .footer__logo { width: 120px; }
  .footer__book { width: 100%; justify-content: center; }
  .footer__nav { grid-template-columns: 1fr; gap: 36px; }
  .footer__links a { min-height: 56px; }
  .footer__bottom { flex-direction: column-reverse; gap: 4px; text-align: center; }
}

/* Smallest phones (≤ 360px): section titles and pills a step smaller so long words fit */
@media (max-width: 360px) {
  :root { --fs-h2: 26px; }
  .pill { font-size: 13px; padding: 10px 2px; }
  .awards { gap: 16px 8px; }
  .laurel { width: 18px; height: 46px; }
  .award__text { width: 92px; }
  .award__big { font-size: 19px; line-height: 22px; }
}

/* Review helper button (localhost only, added by main.js) */
.dev-replay {
  position: fixed; top: 16px; right: 16px; z-index: 1000; /* top-right (the top bar's right side is empty) */
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px;
  font: 500 12px/16px var(--font); color: rgba(255,255,255,.7);
  background: rgba(20,18,16,.55); border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  backdrop-filter: blur(6px); cursor: pointer; opacity: .55; transition: opacity .2s ease;
}
.dev-replay:hover, .dev-replay:focus-visible { opacity: 1; color: #fff; }
/* hidden while the logo intro plays, so a restart looks like a true first load when presenting */
.intro-playing .dev-replay { opacity: 0; pointer-events: none; }

/* Reveal on scroll (classes added by main.js) */
.js-reveal .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal .hero__pattern.reveal { transform: none; transition-duration: 1.6s; } /* background fades in, no slide */
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .host__man, .host__eyes, .host__pupils, .host__dart, .host__arm, .host__foot, .host__tap, .host__thud { animation: none; }
  .game__media[class*="wiggle-"] { animation: none; }}