@import url("fonts.css");

/* =========================================================================
   MADDIMAX — Concept C (premium, with presence)
   Rich plum fields, warm ivory, dramatic asymmetric crops, a display serif
   at scale in sentence case. Motion is fast and crisp: 200-350ms.
   ========================================================================= */

/* ----------------------------- TOKENS ----------------------------------- */
:root {
  --plum:       #2e1338;   /* the rich field */
  --plum-deep:  #1b0a21;
  --ink:        #0e0a10;
  --ivory:      #f3eee7;   /* warm, not cold neutral */
  --ivory-2:    #e7dfd2;
  --champagne:  #c4a87c;   /* a whisper, for small marks only */

  --on-plum:    #f3eee7;
  --on-plum-2:  rgba(243, 238, 231, 0.74);
  --on-ivory:   #17121a;
  --on-ivory-2: rgba(23, 18, 26, 0.7);
  --on-ink-2:   rgba(243, 238, 231, 0.68);

  --line-light: rgba(243, 238, 231, 0.22);
  --line-dark:  rgba(23, 18, 26, 0.16);

  --serif: "Zodiak", Georgia, serif;
  --sans: "Switzer", system-ui, sans-serif;

  --t-xs: 0.74rem;
  --t-sm: 0.88rem;
  --t-base: 1.06rem;
  --t-lg: clamp(1.15rem, 0.98rem + 0.6vw, 1.4rem);
  --t-xl: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  --t-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --t-3xl: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  --t-4xl: clamp(3rem, 1.6rem + 6vw, 7rem);
  --t-num: clamp(4rem, 2rem + 10vw, 12rem);

  --s-2xs: 0.5rem; --s-xs: 0.75rem; --s-sm: 1rem; --s-md: 1.5rem; --s-lg: 2.25rem;
  --s-xl: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --s-2xl: clamp(3.5rem, 2.4rem + 4.5vw, 6rem);
  --section: clamp(4.5rem, 3rem + 6vw, 8rem);

  --gutter: clamp(1.15rem, 0.5rem + 3vw, 3.5rem);
  --wrap: 1500px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 260ms;
  --nav-h: 4.75rem;
}

/* ----------------------------- RESET ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--sans); font-size: var(--t-base); line-height: 1.6; color: var(--on-ivory); background: var(--ivory); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--ink); color: var(--ivory); padding: 0.75rem 1.25rem; }
.skip-link:focus { left: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--section); }
.eyebrow-free { font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

.plum { background: var(--plum); color: var(--on-plum); }
.ink { background: var(--ink); color: var(--on-plum); }
.ivory { background: var(--ivory); color: var(--on-ivory); }
.ivory2 { background: var(--ivory-2); color: var(--on-ivory); }

/* ----------------------------- MOTION ----------------------------------- */
.up { opacity: 0; transform: translateY(14px); transition: opacity var(--fast) var(--ease), transform 320ms var(--ease); transition-delay: var(--d, 0s); }
.up.in { opacity: 1; transform: none; }
/* Reveal must never clip the element to zero: a zero-height box is invisible to
   IntersectionObserver, so .in never lands and the image stays hidden forever
   (it also stops loading="lazy" from ever fetching it). Opacity keeps the box. */
.mask { opacity: 0; transform: scale(1.03); transition: opacity 320ms var(--ease), transform 420ms var(--ease); transition-delay: var(--d, 0s); }
.mask.in { opacity: 1; transform: none; }

/* ----------------------------- BUTTONS ---------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.6rem;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.02em;
  background: var(--ivory); color: var(--on-ivory); border: 1px solid transparent;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { background: var(--champagne); color: var(--ink); transform: translateY(-2px); }
.btn--out { background: transparent; color: currentColor; border-color: var(--line-light); }
.btn--out:hover { background: var(--ivory); color: var(--on-ivory); border-color: var(--ivory); }
.ivory .btn { background: var(--plum); color: var(--on-plum); }
.ivory .btn:hover { background: var(--champagne); color: var(--ink); }
.ivory .btn--out { background: transparent; color: var(--on-ivory); border-color: var(--line-dark); }
.ivory .btn--out:hover { background: var(--plum); color: var(--on-plum); border-color: var(--plum); }
.link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: var(--t-sm); border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: gap var(--fast) var(--ease), color var(--fast) var(--ease); }
.link:hover { gap: 0.85rem; color: var(--champagne); }

/* ----------------------------- NAV -------------------------------------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 200; color: var(--on-plum); transition: background-color var(--fast) var(--ease); }
.nav.stuck { background: rgba(14, 10, 16, 0.94); backdrop-filter: blur(8px); }
.nav__inner { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); padding-block: 0.9rem; }
/* Flex on the brand anchor kills inline-baseline slop, so the wordmark truly
   centres and sits exactly where it sits in the open menu head. */
.nav__inner > a[aria-label] { display: flex; }
.wordmark { display: inline-grid; gap: 0.34em; line-height: 1; }
.wordmark i { height: 1.5px; background: currentColor; display: block; }
.wordmark b { font-family: var(--sans); font-weight: 600; letter-spacing: 0.3em; font-size: 0.78rem; padding-left: 0.3em; text-transform: uppercase; }
.nav__links { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.nav__links a { font-size: var(--t-sm); font-weight: 500; color: var(--on-plum-2); transition: color var(--fast) var(--ease); }
.nav__links a:hover { color: var(--on-plum); }
.nav__toggle { display: none; font-size: var(--t-sm); font-weight: 600; }
.nav .btn { padding: 0.6rem 1.15rem; }

.menu { position: fixed; inset: 0; z-index: 250; background: var(--plum); color: var(--on-plum); padding: var(--s-md) var(--gutter) var(--s-xl); display: flex; flex-direction: column; transform: translateY(-101%); transition: transform 380ms var(--ease); overflow-y: auto; }
.menu.open { transform: none; }
.menu__head { display: flex; align-items: center; justify-content: space-between; }
.menu nav { margin-top: var(--s-2xl); display: grid; }
.menu nav a { font-family: var(--serif); font-size: clamp(1.9rem, 8vw, 3rem); padding-block: 0.5rem; border-bottom: 1px solid var(--line-light); }
.menu__actions { margin-top: auto; padding-top: var(--s-xl); display: grid; gap: 0.75rem; }
.menu__actions .btn { justify-content: center; }

/* ----------------------------- HERO ------------------------------------- */
/* asymmetric split: a rich plum field against a full-height dramatic crop */
.hero { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 100svh; }
/* Covers the TOP HALF of the hero, so the nav takes its background once you are
   roughly halfway down it. Spanning a real region (rather than a 1px marker) means
   leaving it is always a genuine intersection crossing, so the observer fires. */
#navSentinel { position: absolute; inset: 0 auto 50% 0; width: 1px; pointer-events: none; }
.hero__panel { background: var(--plum); color: var(--on-plum); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + var(--s-xl)) clamp(1.25rem, 4vw, 5rem) var(--s-xl); }
.hero__eyebrow-free { color: var(--champagne); margin-bottom: var(--s-md); }
.hero__h { font-family: var(--serif); font-size: var(--t-4xl); line-height: 1.02; letter-spacing: -0.02em; max-width: 15ch; }
.hero__sub { margin-top: var(--s-md); max-width: 44ch; color: var(--on-plum-2); font-size: var(--t-lg); }
.hero__actions { margin-top: var(--s-lg); display: flex; flex-wrap: wrap; gap: var(--s-sm); }
.hero__media { position: relative; overflow: hidden; min-height: 46svh; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) contrast(1.06) brightness(0.78); }

/* ----------------------------- STATEMENT -------------------------------- */
/* Heading and numeral share one asymmetric grid with the prose below, so the
   numeral sits on a layout line instead of floating at the page edge. */
.statement { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.statement__num { justify-self: start; }
.statement h2 { font-size: var(--t-3xl); max-width: 26ch; }
.statement__num { font-family: var(--serif); font-size: var(--t-num); line-height: 0.8; color: var(--plum); }
.statement__num span { display: block; font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ivory-2); margin-top: var(--s-sm); }
/* fills the measure rather than bunching two narrow columns on the left */
.statement__prose { margin-top: var(--s-xl); display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 5vw, 5rem); color: var(--on-ivory-2); font-size: var(--t-lg); }
.statement__prose p { max-width: 50ch; }
/* the CTA sits under its paragraph, not trailing the sentence */
.statement__prose .link { margin-top: var(--s-md); }

/* ----------------------------- REASONS (asymmetric, layered) ------------ */
/* consistent structure, top-aligned: the earlier zigzag with centred text
   against tall images read as a misalignment rather than a decision */
.reason { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; padding-block: var(--s-2xl); }
.reason + .reason { border-top: 1px solid var(--line-light); }
.reason__media { position: relative; }
.reason__frame { overflow: hidden; }
.reason__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(0.78) contrast(1.05) brightness(0.86); }
/* the numeral breaks out over the image edge */
.reason__num { position: absolute; bottom: -0.22em; left: -0.08em; font-family: var(--serif); font-size: var(--t-num); line-height: 0.78; color: var(--ivory); text-shadow: 0 8px 40px rgba(14, 10, 16, 0.7); pointer-events: none; }
.reason__t { font-size: var(--t-2xl); max-width: 15ch; }
.reason__d { margin-top: var(--s-md); color: var(--on-ink-2); max-width: 44ch; }

/* The reasons ride the scroll: each row settles in as it enters the frame and
   lifts away as it leaves, the photo eases to rest, and the numeral drifts
   against the image for depth. Browsers without scroll-driven animations keep
   the standard .up/.mask reveals. */
@supports (animation-timeline: view()) {
  .reason .up, .reason .mask { opacity: 1; transform: none; transition: none; }
  .reason > * { animation: reason-in linear both; animation-timeline: view(); animation-range: entry 10% entry 80%; }
  .reason { animation: reason-out linear both; animation-timeline: view(); animation-range: exit 25% exit 95%; }
  .reason__media img { animation: reason-img linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  .reason__num { animation: reason-num linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
@keyframes reason-in { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } }
@keyframes reason-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-2.5rem); } }
@keyframes reason-img { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes reason-num { from { transform: translateY(0.28em); } to { transform: translateY(-0.2em); } }

/* ----------------------------- PROOF ------------------------------------ */
/* ------------------------- HISTORY TIMELINE ------------------------------ */
.history__h { font-size: var(--t-3xl); text-align: center; margin-bottom: var(--s-2xl); }
.tl { position: relative; display: grid; gap: clamp(4rem, 8vw, 8rem); }
.tl::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: 1px; background: var(--line-dark); }
.tl__entry { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); }
.tl__entry::after { content: ""; position: absolute; left: 50%; top: 0.5em; width: 1.15rem; height: 1px; background: var(--champagne); transform: translateX(-50%); }
.tl__year { font-family: var(--serif); font-size: clamp(3.2rem, 2rem + 5.5vw, 7rem); line-height: 0.9; color: var(--plum); }
.tl__entry:nth-child(odd) .tl__year { grid-column: 1; text-align: right; }
.tl__entry:nth-child(odd) .tl__body { grid-column: 2; }
.tl__entry:nth-child(even) .tl__year { grid-column: 2; grid-row: 1; }
.tl__entry:nth-child(even) .tl__body { grid-column: 1; grid-row: 1; text-align: right; justify-self: end; }
.tl__body h3 { font-size: var(--t-xl); }
.tl__body p { margin-top: var(--s-xs); color: var(--on-ivory-2); max-width: 46ch; }
.tl__entry:nth-child(even) .tl__body p { margin-left: auto; }
.tl__body img { margin-top: var(--s-md); width: 100%; max-height: 20rem; object-fit: cover; filter: saturate(0.8) contrast(1.04); }

.proof__head { margin-bottom: var(--s-2xl); }
.proof__head h2 { font-size: var(--t-3xl); max-width: 24ch; }
.proof__head p { margin-top: var(--s-md); color: var(--on-plum-2); max-width: 46ch; }
/* the Hall of Fame photograph is the evidence, so it sits beside the claims */
.proof__body { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
.proof__media { position: relative; }
.proof__media img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; filter: saturate(0.85) contrast(1.05); }
.proof__quote { position: absolute; left: var(--s-lg); right: calc(-1 * var(--s-lg)); bottom: var(--s-lg); background: var(--ivory); color: var(--on-ivory); padding: var(--s-lg); }
.proof__quote p { font-family: var(--serif); font-size: var(--t-lg); line-height: 1.35; }
.proof__quote footer { margin-top: var(--s-sm); font-size: var(--t-sm); color: var(--on-ivory-2); }
.proof__quote b { color: var(--on-ivory); font-weight: 600; }
.proofs { display: grid; gap: var(--s-xl); }
.proofs > li { display: grid; gap: var(--s-2xs); align-content: start; padding-bottom: var(--s-xl); border-bottom: 1px solid var(--line-light); }
.proofs > li:last-child { padding-bottom: 0; border-bottom: 0; }
.proof__n { font-family: var(--serif); font-size: clamp(3.2rem, 2rem + 5vw, 6rem); line-height: 0.84; color: var(--champagne); }
.proof__t { font-family: var(--sans); font-size: var(--t-lg); font-weight: 600; }
.proof__d { color: var(--on-plum-2); font-size: var(--t-sm); }

/* ----------------------------- QUOTE / CAREERS -------------------------- */
.career { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 4vw, 5rem); align-items: center; }
.career__body h2 { font-size: var(--t-3xl); max-width: 14ch; }
.career__body p { margin-top: var(--s-md); max-width: 56ch; color: var(--on-ivory-2); }
.career__body .btn { margin-top: var(--s-lg); }
.career__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(0.8) contrast(1.04); }

/* ----------------------------- CLUBS ------------------------------------ */
.clubs__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-md); flex-wrap: wrap; margin-bottom: var(--s-xl); }
.clubs__head h2 { font-size: var(--t-3xl); max-width: 16ch; }
.clubs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s-2xl); }
.clubs li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-sm); padding-block: 0.95rem; border-bottom: 1px solid var(--line-light); transition: padding-left var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.clubs li:hover { padding-left: 0.6rem; border-color: var(--champagne); }
.clubs__name { font-family: var(--serif); font-size: var(--t-lg); }
.clubs__meta { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-2); display: flex; gap: var(--s-sm); }
.clubs li[data-soon] .clubs__meta { color: var(--champagne); }

/* ----------------------------- CTA -------------------------------------- */
.cta { text-align: center; }
.cta h2 { font-size: var(--t-3xl); max-width: 18ch; margin-inline: auto; }
.cta p { margin-top: var(--s-md); color: var(--on-plum-2); max-width: 46ch; margin-inline: auto; }
.cta__actions { margin-top: var(--s-lg); display: flex; gap: var(--s-sm); justify-content: center; flex-wrap: wrap; }

/* ----------------------------- FOOTER ----------------------------------- */
.footer { background: var(--ink); color: var(--on-plum); padding-block: var(--s-2xl) var(--s-lg); }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s-xl); }
.footer__brand p { margin-top: var(--s-md); color: var(--on-ink-2); max-width: 40ch; font-size: var(--t-sm); }
.footer h4 { font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-2); margin-bottom: var(--s-sm); }
.footer li { padding-block: 0.3rem; }
.footer li a { font-size: var(--t-sm); color: var(--on-plum-2); transition: color var(--fast) var(--ease); }
.footer li a:hover { color: var(--champagne); }
.footer__base { margin-top: var(--s-2xl); padding-top: var(--s-md); border-top: 1px solid var(--line-light); display: flex; justify-content: space-between; gap: var(--s-md); flex-wrap: wrap; font-size: var(--t-xs); color: var(--on-ink-2); }
.footer__base a { color: var(--champagne); }

/* ----------------------------- RESPONSIVE ------------------------------- */
@media (max-width: 1080px) {
  .nav__links, .nav .btn { display: none; }
  .nav__toggle { display: inline-block; }
  /* Taller symmetric bar lands the logo and menu button on the same line the
     open menu head uses, so the overlay opens without a jump. */
  .nav__inner { padding-block: 1.5rem; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { min-height: 52svh; order: 2; }
  .reason, .career, .proof__body, .statement { grid-template-columns: 1fr; }
  .proof__media img { aspect-ratio: 4 / 3; }
  .reason:nth-child(even) .reason__media { order: 0; }
  .reason__num { font-size: clamp(3.5rem, 16vw, 7rem); }
  .proofs { grid-template-columns: 1fr; gap: var(--s-lg); }
  .career__media { max-width: 26rem; }
  .history__h { text-align: left; }
  .tl::before { left: 0.5rem; }
  /* The whole entry clears the spine, so body copy and photos never cross it. */
  .tl__entry, .tl__entry:nth-child(even) { grid-template-columns: 1fr; gap: 0.5rem; padding-left: 2.5rem; }
  .tl__entry:nth-child(odd) .tl__year, .tl__entry:nth-child(even) .tl__year { grid-column: 1; grid-row: auto; text-align: left; padding-left: 0; }
  .tl__entry:nth-child(odd) .tl__body, .tl__entry:nth-child(even) .tl__body { grid-column: 1; grid-row: auto; text-align: left; justify-self: start; }
  .tl__entry:nth-child(even) .tl__body p { margin-left: 0; }
  .tl__entry::after { left: 0.5rem; transform: none; width: 1.5rem; }
  .proof__quote { position: relative; left: auto; right: auto; bottom: auto; margin-top: calc(-1 * var(--s-xl)); margin-left: var(--s-lg); }
  .statement__prose { grid-template-columns: 1fr; gap: var(--s-md); }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .clubs { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .statement { gap: var(--s-md); }
}

/* ----------------------------- REDUCED MOTION --------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  .up { opacity: 1; transform: none; }
  .mask { opacity: 1; transform: none; }
  /* scroll-driven animations ignore duration overrides, so switch them off */
  .reason, .reason > *, .reason__media img, .reason__num { animation: none !important; }
}