@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,400;0,500;0,600;0,700;1,600&family=Space+Mono:wght@400;700&display=swap');

/* ============================================================
   LISBON SCRIMMAGE 2026 — event design system
   Implemented from the event's own system (Marketing/Design System
   in the event Drive). This page uses NONE of the Thunderstrike
   visual language: only the header/footer keep the site's layout
   and shape, and even they are re-coloured here.

   Rules this file is written to honour, verbatim from the system:
     · Dark-first. Signature gold #FEC400 over deep blue-navy.
     · Gold is PRECIOUS — emphasis, primary actions, key numbers,
       hero moments only. Never a flat field behind body text.
     · No slanted/oblique stripes. Accent bands, ticks, tabs and
       buttons are all UPRIGHT. The italic lives in the type.
     · Italic is reserved for the hero/lead title. Section and card
       headings are upright.
     · "LISBON" in a title is always the logo wordmark art, never
       typed. The Portugal silhouette stays inside the wordmark.
     · Space Mono for every number: team numbers, times, scores.
     · Cards are navy surfaces, 1px --navy-500 border, 12px radius.
       Elevation is deep cool shadow — the gold glow is reserved
       exclusively for the primary CTA.
     · Radii 4–12px; pills only for tags/badges/chips.
     · No emoji anywhere. Icons are Lucide, 2px, currentColor.
     · Motion: 200ms ease-out, entrances fade-and-rise. No infinite
       decorative loops.
     · Photography warm and vivid, never washed out; navy scrim
       under any type that sits on it.
   ============================================================ */

body.ls,
.ls-scope {
  /* —— tokens, copied from the system's tokens/colors.css —— */
  --gold-500: #FEC400;
  --gold-600: #E0AC00;
  --navy-950: #03101E;
  --navy-900: #06192E;
  --navy-800: #092540;
  --navy-700: #103254;
  --navy-600: #18395B;
  --navy-500: #244E78;
  --navy-400: #38659A;
  --white: #FFFFFF;
  --slate-200: #D9DDEA;
  --slate-400: #8A93AD;
  --slate-500: #5E6685;
  --accent-soft: rgba(254, 196, 0, 0.14);

  --font-display: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-text: "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --shadow-md: 0 6px 18px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.55);
  --shadow-accent: 0 8px 28px rgba(254,196,0,0.28);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-base: 200ms;

  background: var(--navy-900);
  color: var(--slate-200);
  font-family: var(--font-text);
}
/* signature vertical blue gradient, fixed so the full range reads on every screen */
body.ls::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, #052142 0%, #0B3A66 52%, #306496 100%);
}
body.ls::after { content: none; }

/* ── header & footer: the site's shape, this event's colour ── */
body.ls .nav { border-bottom: 1px solid rgba(36,78,120,0.55); }
body.ls .nav.scrolled { background: rgba(6,25,46,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.ls .nav-links > a, body.ls .nav-item > .nav-top { font-family: var(--font-text); color: var(--slate-200); }
body.ls .nav-links > a:hover, body.ls .nav-item:hover > .nav-top,
body.ls .nav-links a.active, body.ls .nav-item.active > .nav-top { color: var(--white); }
body.ls .nav-links > a::after, body.ls .nav-item > .nav-top::after { background: var(--gold-500); }
body.ls .nav-menu { background: var(--navy-800); border-color: var(--navy-500); }
body.ls .nav-menu a strong { color: var(--white); }
body.ls .nav-menu a:hover strong, body.ls .nav-menu-label { color: var(--gold-500); }
body.ls .nav-apply { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); }
body.ls .nav-apply:hover { background: var(--gold-600); }
body.ls .nav-login, body.ls .nav-profile { border-color: var(--navy-500); color: var(--slate-200); }
body.ls .nav-progress { background: var(--gold-500); }
body.ls .footer { border-top: 1px solid rgba(36,78,120,0.55); background: var(--navy-950); }
body.ls .footer-bar { border-top-color: rgba(36,78,120,0.4); }
body.ls .footer-col h4 { font-family: var(--font-mono); color: var(--gold-500); }
body.ls .footer-col a { font-family: var(--font-text); color: var(--slate-200); }
body.ls .footer-col a:hover { color: var(--gold-500); }
body.ls .footer-brand .fb-sub, body.ls .footer-bar span { font-family: var(--font-mono); color: var(--slate-400); }

/* ── layout ── */
.ls-wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.ls-wrap.narrow { max-width: 860px; }
.ls-band { padding: clamp(56px, 9vh, 104px) 0; position: relative; }
.ls-band.flush { padding-top: 0; }

/* ── type ── */
.ls-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-500); margin: 0 0 14px;
}
/* upright tick — the system explicitly does not skew UI elements */
.ls-eyebrow::before { content: ""; width: 3px; height: 15px; background: var(--gold-500); flex: 0 0 auto; }
.ls-h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 4vw, 46px); line-height: 1.04; letter-spacing: -0.01em;
  color: var(--white); margin: 0 0 20px;
}
.ls-h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 20px; line-height: 1.18; color: var(--white); margin: 0 0 10px; }
.ls-body { font-family: var(--font-text); font-size: 16px; line-height: 1.5; color: var(--slate-200); margin: 0 0 16px; max-width: 62ch; }
.ls-body.lead { font-size: 19px; line-height: 1.45; }
.ls-muted { color: var(--slate-400); }
.ls-num { font-family: var(--font-mono); }

/* ── hero: the one place italic is allowed ── */
.ls-hero { padding: clamp(120px, 18vh, 190px) 0 clamp(40px, 6vh, 64px); text-align: center; }
.ls-hero .ls-kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-500); margin: 0 0 22px;
}
.ls-hero .ls-kicker a { color: var(--slate-400); }
.ls-hero .ls-kicker a:hover { color: var(--gold-500); }
/* LISBON is the wordmark art; SCRIMMAGE is display type, italic, hero only */
/* The supplied lockup already contains both lines (gold LISBON over white
   SCRIMMAGE) with the Portugal silhouette in the "I". Use the asset — never
   rebuild it from the wordmark plus typed text. */
.ls-lockup { display: flex; justify-content: center; margin: 0 0 26px; }
.ls-lockup img { display: block; width: min(620px, 84vw); height: auto; }
.ls-hero .ls-body { margin-left: auto; margin-right: auto; }
.ls-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ── buttons ── */
.ls-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 12px 22px; border-radius: var(--radius-md); border: 1.5px solid transparent;
  font-family: var(--font-text); font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), transform 90ms var(--ease-out);
}
.ls-btn svg { width: 18px; height: 18px; stroke-width: 2; }
/* the gold glow is reserved for the primary action — nothing else on the page carries it */
.ls-btn.primary { background: var(--gold-500); color: var(--navy-900); box-shadow: var(--shadow-accent); }
.ls-btn.primary:hover { background: var(--gold-600); }
.ls-btn.ghost { border-color: var(--navy-500); color: var(--white); }
.ls-btn.ghost:hover { border-color: var(--gold-500); background: var(--accent-soft); color: var(--gold-500); }
.ls-btn:active { transform: scale(0.97); }
.ls-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(254,196,0,0.55); }

/* ── StatTile: big mono number in gold + caps label + optional sub ── */
.ls-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ls-stat { background: var(--navy-800); border: 1px solid var(--navy-500); border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow-md); }
.ls-stat .v { font-family: var(--font-mono); font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: 1; color: var(--gold-500); }
.ls-stat .l { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin-top: 12px; }
.ls-stat .s { font-family: var(--font-text); font-size: 13px; color: var(--slate-400); margin-top: 5px; line-height: 1.45; }
@media (max-width: 900px) { .ls-stats { grid-template-columns: repeat(2, 1fr); } }

/* ── Card ── */
.ls-card { background: var(--navy-800); border: 1px solid var(--navy-500); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.ls-card.raised { background: var(--navy-700); box-shadow: var(--shadow-lg); }
.ls-card-body { padding: 24px 26px; }
.ls-card-body .ls-body { font-size: 14.5px; margin-bottom: 0; }

/* ── Badge (mono, uppercase) & Tag (pill) ── */
.ls-badge { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--gold-500); background: var(--navy-950); border: 1px solid var(--navy-500); border-radius: var(--radius-sm); padding: 3px 9px; }
.ls-tag { display: inline-block; font-family: var(--font-text); font-size: 12px; font-weight: 600; border-radius: var(--radius-pill); padding: 4px 12px; background: var(--accent-soft); color: var(--gold-500); border: 1px solid rgba(254,196,0,0.35); }

/* ── two-column band ── */
.ls-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.ls-split.rev .ls-split-media { order: -1; }
.ls-split-media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--navy-500); }
.ls-split-media.tall img { aspect-ratio: 4 / 5; }
@media (max-width: 860px) { .ls-split { grid-template-columns: 1fr; } .ls-split.rev .ls-split-media { order: 0; } }

/* ── full-bleed photo band, type over a navy scrim ── */
.ls-feature { position: relative; min-height: clamp(320px, 46vh, 520px); display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--navy-500); }
.ls-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.ls-feature .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,25,46,0.94) 6%, rgba(6,25,46,0.55) 46%, rgba(6,25,46,0.15) 100%); }
.ls-feature .ls-feature-body { position: relative; padding: clamp(24px, 4vw, 44px); max-width: 62ch; }

/* ── roster ── */
.ls-roster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ls-team { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: var(--navy-800); border: 1px solid var(--navy-500); border-radius: var(--radius-md); padding: 14px 18px; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.ls-team:hover { background: var(--navy-600); border-color: var(--navy-400); }
.ls-team.host { border-color: rgba(254,196,0,0.55); }
.ls-team .ls-flag { width: 26px; height: 18px; border-radius: 2px; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,0.14); }
.ls-team .n { font-family: var(--font-text); font-size: 14.5px; font-weight: 600; color: var(--white); }
.ls-team .n span { display: block; font-family: var(--font-text); font-size: 12px; font-weight: 500; color: var(--gold-500); margin-top: 3px; }
.ls-team .c { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--slate-400); white-space: nowrap; }
@media (max-width: 780px) { .ls-roster { grid-template-columns: 1fr; } }

/* ── guests ── */
.ls-guests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ls-guest img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }
.ls-guest .ls-card-body { padding: 20px 22px 24px; }
.ls-guest .role { font-family: var(--font-text); font-size: 13.5px; color: var(--slate-400); line-height: 1.5; margin: 8px 0 0; }
.ls-guest .credit,
.ls-quote .credit { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--slate-500); margin: 14px 0 0; }
.ls-guest .credit a,
.ls-quote .credit a { color: var(--slate-400); text-decoration: underline; }
.ls-guest .credit a:hover,
.ls-quote .credit a:hover { color: var(--gold-500); }
/* a card with no portrait keeps the column height with a gold rule instead of
   a broken image well */
.ls-guest.noimg { display: flex; flex-direction: column; justify-content: center; }
.ls-guest.noimg .ls-card-body { padding: 34px 24px; border-top: 3px solid var(--gold-500); }
@media (max-width: 860px) { .ls-guests { grid-template-columns: 1fr; } }

/* ── quotes ── */
.ls-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ls-quote p.q { font-family: var(--font-text); font-size: 18px; line-height: 1.5; color: var(--white); margin: 0 0 14px; }
.ls-quote p.a { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-500); margin: 0; }
@media (max-width: 780px) { .ls-quotes { grid-template-columns: 1fr; } }

/* ── crew ── */
.ls-crew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .ls-crew { grid-template-columns: 1fr; } }

/* ── gallery ── */
.ls-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ls-gallery figure { margin: 0; position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--navy-500); }
/* imagery stays warm and vivid — the system forbids washed-out treatment */
.ls-gallery img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 32%; transition: transform 320ms var(--ease-out); }
.ls-gallery figure:hover img { transform: scale(1.03); }
.ls-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 11px; background: linear-gradient(to top, rgba(3,16,30,0.92), transparent); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate-200); }
@media (max-width: 820px) { .ls-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ls-gallery { grid-template-columns: 1fr; } }
.ls-videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px; }
.ls-videos .v { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--navy-500); background: var(--navy-950); }
.ls-videos iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 820px) { .ls-videos { grid-template-columns: 1fr; } }

/* ── closing CTA ── */
.ls-close { text-align: center; padding: clamp(64px, 11vh, 128px) 0; }
.ls-close .rule { width: 64px; height: 3px; background: var(--gold-500); margin: 0 auto 26px; }

/* ── entrance: fade-and-rise a few px, no loops ── */
.ls-in { opacity: 0; transform: translateY(14px); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); }
.ls-in.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ls-in { opacity: 1 !important; transform: none !important; transition: none; } }

/* Narrow phones: the roster row can't hold badge + name + country on one line.
   Stack it rather than let it push the page sideways. */
@media (max-width: 430px) {
  .ls-team { grid-template-columns: auto 1fr; row-gap: 8px; }
  .ls-team .c { grid-column: 1 / -1; }
  .ls-team .n { font-size: 13.5px; }
}