/* FOOTYUP · final hero (concept B — typographic monolith) */

:root {
  /* Dark-theme page base. Graphite, not coal-black — softer, more premium,
     and in tune with the brand's existing cool-dark accents (#14161F). The
     light theme overrides --ink below; #08080A stays only as ink-on-light text
     (--bone) and accent-on-text (--accent-text). */
  --ink: #191B21;
  --bone: #F4F1EB;
  --bone-dim: rgba(244, 241, 235, 0.65);
  --bone-faint: rgba(244, 241, 235, 0.12);
  /* Border for EDITABLE form controls — darker than --bone-faint so inputs the
     user can actually change read as active. Read-only fields keep --bone-faint. */
  --edit-line: rgba(244, 241, 235, 0.34);
  --accent: #FF4A00;
  --accent-text: #08080A;
  --pad-x: 56px;
  /* Type tokens. Archivo = signature editorial display (menu + headings),
     Manrope = clean modern body, Cormorant = serif-italic accent. Every
     component references these vars; no hardcoded family names. */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

[data-theme="light"] {
  --ink: #F4F1EB;
  --bone: #08080A;
  --bone-dim: rgba(8, 8, 10, 0.65);
  --bone-faint: rgba(8, 8, 10, 0.12);
  --edit-line: rgba(8, 8, 10, 0.34);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-sans), -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
  /* `clip` over `hidden` — `hidden` would promote body to a scroll
     container which historically broke `position: sticky` on the header.
     The header is now `fixed` on mobile via styles-8.css regardless, but
     keep `clip` here for the cleaner desktop sticky case. */
  overflow-x: clip;
}
body { min-height: 100vh; min-height: 100dvh; }

/* Display headings — Archivo. `.font-sans` opts an element back to the body
   font; `.font-display` opts any element into the display font. */
h1, h2,
.font-display:not(.font-sans) {
  font-family: var(--font-display), var(--font-sans), system-ui, sans-serif;
}

::selection { background: var(--accent); color: var(--accent-text); }

.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* Kill the grey/blue flash when tapping links/buttons on iOS Safari. */
* { -webkit-tap-highlight-color: transparent; }

/* Improve gesture handling for swipe-y / scroll-snap UIs on touch. */
body { touch-action: manipulation; }

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  /* Two slots: .h-body fills available height (1fr), .h-bottom is pinned
     to the very bottom (auto). Previously was `auto 1fr auto` from a time
     when .h-top was rendered — without it, .h-bottom landed in the middle
     row and left dead space below the strip. */
  grid-template-rows: 1fr auto;
  /* Lift the bottom strip (meta-row + h-bottom) above the section's bottom
     edge with viewport-responsive breathing room. clamp(min, fluid, max):
     - <700px tall: 70px
     - ~1000px tall: 100px
     - >1300px tall: 130px (capped)
     Strip itself is grid-pinned to the bottom (grid-row 2 auto), this just
     controls the air below it inside the hero section. */
  padding-bottom: clamp(70px, 10vh, 130px);
  isolation: isolate;
  /* Whitewashed photo backdrop — Dubai pitch as a barely-visible
     watermark behind the typography. A heavy bone overlay (~92%) lets
     the photo peek through as subtle texture without competing with
     the headline. Hero uses the page-wide theme tokens, so text
     colors stay correct in both light and dark mode. */
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ink) 84%, transparent) 0%,
      color-mix(in srgb, var(--ink) 72%, transparent) 50%,
      color-mix(in srgb, var(--ink) 88%, transparent) 100%
    ),
    url('../assets/images/hero-pitch.webp') center / cover no-repeat,
    var(--ink);
}

/* top strip — wordmark + minimal meta */
.h-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px var(--pad-x);
  border-bottom: 1px solid var(--bone-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  position: relative;
  z-index: 5;
}
.wordmark {
  font-family: var(--font-display), sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}
.wordmark .dot { color: var(--accent); }
.h-top .right { display: flex; gap: 32px; opacity: 0.7; }
.h-top .right span { white-space: nowrap; }

/* body */
.h-body {
  position: relative;
  padding: 80px var(--pad-x) 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 6vw, 80px);
  overflow: hidden;
  min-height: 0;
}
.h-corner {
  position: absolute;
  width: 28px; height: 28px;
  border-color: rgba(244, 241, 235, 0.25);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  z-index: 2;
}
.h-corner.tl { top: 100px; left: var(--pad-x); border-top-width: 1px; border-left-width: 1px; }
.h-corner.tr { top: 100px; right: var(--pad-x); border-top-width: 1px; border-right-width: 1px; }
.h-corner.bl { bottom: 24px; left: var(--pad-x); border-bottom-width: 1px; border-left-width: 1px; }
.h-corner.br { bottom: 24px; right: var(--pad-x); border-bottom-width: 1px; border-right-width: 1px; }

[data-theme="light"] .h-corner { border-color: rgba(8, 8, 10, 0.2); }

/* claim */
.claim {
  font-family: var(--font-display), sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(60px, 10vw, 162px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  position: relative;
  z-index: 3;
}
.claim .ln { display: block; overflow: hidden; }
.claim .ln > span { display: inline-block; }
@keyframes claimRise {
  to { opacity: 1; transform: translateY(0); }
}

.claim .outline {
  color: transparent;
  -webkit-text-stroke: 2.2px var(--bone);
}
.claim .orange {
  color: var(--accent);
  font-style: italic;
  position: relative;
  padding-right: 0.18em;
}
.claim .orange::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0.045em; right: 18%;
  height: 0.045em;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  animation: underline 1.4s cubic-bezier(.2, .7, .3, 1) 0.6s forwards;
}
@keyframes underline { to { transform: scaleX(1); } }

/* meta row */
.meta-row {
  display: flex;
  gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(36px, 6vw, 64px);
  font-family: var(--font-display), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  z-index: 2;
  position: relative;
  flex-wrap: wrap;
}
@keyframes fadeIn { to { opacity: 1; } }
.meta-row .item { display: flex; flex-direction: column; gap: 8px; }
.meta-row .item b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--bone);
  text-transform: none;
}
.meta-row .item b .o { color: var(--accent); }

/* "11" grid — 4-3-3 formation pattern */
.grid-11 {
  position: absolute;
  right: var(--pad-x);
  top: 132px;
  display: grid;
  grid-template-columns: repeat(11, 14px);
  grid-template-rows: repeat(11, 14px);
  gap: 6px;
  z-index: 1;
}
.grid-11 i {
  display: block;
  background: rgba(244, 241, 235, 0.10);
  transition: background 0.4s, transform 0.4s;
}
[data-theme="light"] .grid-11 i { background: rgba(8, 8, 10, 0.18); }
.grid-11 i.on {
  background: var(--accent);
  animation: dotPulse 4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.4); }
}
.grid-11 i.dim { background: var(--bone-faint); }

/* "11" grid label */
.grid-label {
  position: absolute;
  right: var(--pad-x);
  top: 88px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  z-index: 2;
}
.grid-label::before {
  content: '';
  width: 16px; height: 1px;
  background: var(--accent);
}

/* squad-size + formation filters under the grid (desktop hero only) */
.formation-controls {
  position: absolute;
  right: var(--pad-x);
  top: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  /* above .claim (z-index:3): the headline's full-width line boxes overlap this
     row and would otherwise swallow the toggle's clicks. */
  z-index: 4;
}
.formation-toggle {
  display: flex;
  border: 1px solid var(--bone-faint);
}
.fmt-opt {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--bone-faint);
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bone-dim);
  cursor: pointer;
  transition: color 0.25s, background 0.25s;
}
.fmt-opt:last-child { border-right: 0; }
.fmt-opt:hover { color: var(--bone); }
.fmt-opt.is-active {
  background: var(--accent);
  color: #08080A;
}

/* bottom bar — live status · marquee · CTA */
.h-bottom {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  height: 72px;
  border-top: 1px solid var(--bone-faint);
  z-index: 5;
  position: relative;
}
.h-bottom::before {
  /* signature orange hairline above the strip */
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 96px; height: 1px;
  background: var(--accent);
  z-index: 2;
}

/* Left — live status */
.hb-live {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px 0 var(--pad-x);
  border-right: 1px solid var(--bone-faint);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  white-space: nowrap;
}
.hb-live .pip {
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
  animation: hbPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hbPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
.hb-live .lbl b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0 4px;
}

/* CTA */
.cta {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-text);
  padding: 0 32px;
  font-family: var(--font-display), sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
  position: relative;
  z-index: 2;
  height: 100%;
  min-width: 240px;
  justify-content: space-between;
}
.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bone);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(.7, 0, .3, 1);
  z-index: -1;
}
.cta:hover { color: var(--accent); }
.cta:hover::after { transform: scaleX(1); transform-origin: left; }
.cta .arrow {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.3s;
}
.cta:hover .arrow { transform: translateX(6px); }

/* marquee in the middle */
.tagstrip {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  border-right: 1px solid var(--bone-faint);
  border-left: 0;
}
.tagstrip::before,
.tagstrip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  z-index: 2;
  pointer-events: none;
}
.tagstrip::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.tagstrip::after  { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); }

.tagstrip-inner {
  display: inline-flex;
  gap: 44px;
  padding: 0 40px;
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  width: max-content;
}
.tagstrip-inner > span { display: inline-flex; align-items: center; gap: 44px; }
/* Each ticker item — `<em>icon</em> text` rendered from FOOTYUP_DATA.TICKER_ITEMS.
   Wraps both into one flex child of the outer span so the 44px gap separates
   ITEMS, not the icon from its own text. */
.tagstrip-inner .t-item { display: inline-flex; align-items: center; gap: 8px; }
.tagstrip-inner em {
  font-style: normal;
  color: var(--accent);
  font-size: 14px;
  line-height: 0;
  opacity: 0.85;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* scroll indicator */
.scroll-ind {
  display: none;
}
.scroll-ind .line {
  width: 1px;
  height: 32px;
  background: var(--bone-faint);
  position: relative;
  overflow: hidden;
}
.scroll-ind .line::after {
  content: '';
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
  background: var(--accent);
  animation: scrollDot 2.4s ease-in-out infinite;
}
@keyframes scrollDot {
  0%   { top: -16px; }
  100% { top: 32px; }
}

/* ════════════════════════════════════════════════════════════
   NAV STRIP — below the hero (where the brief said it goes)
   ════════════════════════════════════════════════════════════ */
.nav-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 48px;
  padding: 20px var(--pad-x);
  border-bottom: 1px solid var(--bone-faint);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  z-index: 50;
}
.nav-strip .links {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.nav-strip a {
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-decoration: none;
  transition: color 0.2s;
  position: relative;
  white-space: nowrap;
}
.nav-strip a:hover { color: var(--bone); }
.nav-strip a.active { color: var(--bone); }
.nav-strip a.active::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px;
  bottom: -21px;
  height: 1px;
  background: var(--accent);
}
.nav-strip .signin {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.nav-strip .signin .pip {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
}

/* ════════════════════════════════════════════════════════════
   PREVIEW SECTION
   ════════════════════════════════════════════════════════════ */
.preview {
  padding: 96px var(--pad-x);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: end;
  border-bottom: 1px solid var(--bone-faint);
}
.preview .lead {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.preview .lead .italic {
  font-style: italic;
  color: var(--accent);
  font-weight: 800;
}
.preview .copy {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--bone-dim);
  max-width: 440px;
}
.preview .copy p + p { margin-top: 16px; }
.preview .copy a {
  color: var(--bone);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 28px;
  border-bottom: 1px solid var(--bone-faint);
  padding-bottom: 6px;
  text-decoration: none;
}
.preview .copy a:hover { color: var(--accent); border-color: var(--accent); }

/* footer */
footer {
  padding: 36px var(--pad-x);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-top: auto;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --pad-x: 32px; }
  .h-top { font-size: 10px; letter-spacing: 0.18em; flex-wrap: wrap; gap: 12px; padding: 20px 32px; }
  .h-top .right { gap: 16px; font-size: 9px; }
  .h-top .right span:nth-child(2) { display: none; }
  .h-body { padding: 56px 32px 16px; }
  .h-corner.tl, .h-corner.tr { top: 76px; }
  .grid-11 { display: none; }
  .grid-label { display: none; }
  .formation-controls { display: none; }
  .claim { font-size: clamp(56px, 13vw, 96px); letter-spacing: -0.04em; }
  .meta-row { gap: 24px; margin-top: 36px; font-size: 9px; letter-spacing: 0.18em; }
  .meta-row .item b { font-size: 26px; }
  .h-bottom {
    grid-template-columns: 1fr;
    height: auto;
  }
  .hb-live {
    border-right: 0;
    border-bottom: 1px solid var(--bone-faint);
    padding: 14px 32px;
    justify-content: center;
  }
  .cta {
    width: 100%;
    padding: 18px 28px;
    min-width: 0;
    height: 56px;
  }
  .tagstrip {
    height: 44px;
    border-right: 0;
    border-bottom: 1px solid var(--bone-faint);
  }
  .tagstrip-inner { padding: 0 32px; font-size: 11px; }
  .scroll-ind { display: none; }
  .nav-strip { grid-template-columns: 1fr auto; padding: 16px 32px; }
  .nav-strip .links {
    grid-column: 1 / -1;
    order: 3;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .nav-strip .links::-webkit-scrollbar { display: none; }
  .preview { grid-template-columns: 1fr; gap: 40px; padding: 64px 32px; }
}

/* Phone tap targets — nav-strip links need >=44px touch height. */
@media (max-width: 700px) {
  .nav-strip a { padding: 14px 16px; min-height: 44px; }
}

@media (max-width: 480px) {
  :root { --pad-x: 20px; }
  .h-top { padding: 16px 20px; }
  .h-top .right { display: none; }
  .h-top .right + .wordmark { margin-left: auto; }
  .h-body { padding: 40px 20px 12px; }
  .claim { font-size: 64px; line-height: 0.88; }
  .meta-row { gap: 18px; }
  .meta-row .item { gap: 4px; }
  .meta-row .item b { font-size: 22px; }
  .meta-row .item .lbl { font-size: 8.5px; }
  .cta { padding: 18px 22px; font-size: 12px; }
  .tagstrip-inner { padding: 0 20px; font-size: 10px; gap: 36px; }
  .tagstrip-inner span { gap: 36px; }
  footer { flex-direction: column; gap: 12px; padding: 24px 20px; }
}

/* Very-small phones — trim the hero headline so it doesn't overflow 360px.
   Preserves the outline stroke (slightly thinner to match the smaller type)
   and keeps the token color so both themes hold. */
@media (max-width: 360px) {
  .claim {
    font-size: clamp(48px, 12vw, 64px);
    letter-spacing: -0.03em;
    line-height: 0.95;
  }
  .claim .outline { -webkit-text-stroke: 1.8px var(--bone); }
}