@layer reset, base, components, utilities;

@layer base {
  :root {
    --f1m-bg:      #f2f0eb;
    --f1m-paper:   #ffffff;
    --f1m-warm:    #f7f5f0;
    --f1m-carbon:  #0e0e0e;
    --f1m-red:     #e10600;
    --f1m-red-dk:  #b50000;
    --f1m-mid:     #5a5a5a;
    --f1m-mist:    #c8c4bc;
    --f1m-line:    #e5e2da;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }

  .f1m-body {
    background: var(--f1m-bg);
    color: var(--f1m-carbon);
    font-family: "Figtree", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    min-height: 100dvh;
    overflow-x: hidden;
  }
}

@layer components {

  /* ---- NAV ---- */
  .f1m-nav {
    position: sticky; top: 0; z-index: 50;
    height: 64px;
    display: flex; align-items: center; gap: 32px; justify-content: space-between;
    padding: 0 clamp(20px, 4vw, 64px);
    background: color-mix(in oklab, var(--f1m-bg) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--f1m-line);
  }
  .f1m-nav__brand {
    display: flex; align-items: center; gap: 12px;
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 20px; font-weight: 900; font-style: italic;
    color: var(--f1m-carbon); white-space: nowrap;
  }
  .f1m-nav__brand-bar {
    width: 4px; height: 22px;
    background: var(--f1m-red);
    transform: skewX(-12deg);
    flex-shrink: 0;
  }
  .f1m-nav__links {
    display: none; gap: 28px;
    font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--f1m-mid);
  }
  @media (min-width: 780px) { .f1m-nav__links { display: flex; } }
  .f1m-nav__links a { color: inherit; text-decoration: none; transition: color .2s; }
  .f1m-nav__links a:hover { color: var(--f1m-red); }

  .f1m-nav__cta {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
    padding: 10px 24px;
    background: var(--f1m-red); color: white;
    text-decoration: none; white-space: nowrap;
    transition: background .2s;
  }
  .f1m-nav__cta:hover { background: var(--f1m-red-dk); }

  /* ---- HERO ---- */
  .f1m-hero {
    position: relative;
    padding: clamp(48px, 7vw, 100px) clamp(20px, 4vw, 64px);
    overflow: clip;
  }

  .f1m-hero__round {
    position: absolute;
    right: -0.06em; top: -0.06em;
    font-family: "Big Shoulders Display", sans-serif;
    font-size: clamp(200px, 34vw, 500px);
    font-weight: 900; font-style: italic; line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--f1m-line);
    pointer-events: none; user-select: none;
  }

  .f1m-hero__stripe {
    position: absolute;
    top: 0; bottom: 0;
    right: clamp(300px, 38vw, 600px);
    width: 5px; background: var(--f1m-red);
    transform: skewX(-8deg);
    pointer-events: none;
  }
  @media (max-width: 1039px) { .f1m-hero__stripe { display: none; } }

  .f1m-hero__grid {
    position: relative;
    display: grid; grid-template-columns: 1fr;
    gap: clamp(40px, 5vw, 64px);
    max-width: 1400px; margin: 0 auto;
  }
  @media (min-width: 1040px) {
    .f1m-hero__grid { grid-template-columns: 1.3fr 1fr; align-items: start; }
  }

  .f1m-hero__eyebrow {
    display: flex; align-items: center; gap: 14px;
    font-family: "DM Mono", monospace;
    font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--f1m-red); margin-bottom: 20px;
  }
  .f1m-hero__eyebrow::before {
    content: ""; width: 36px; height: 2px; background: var(--f1m-red);
  }

  .f1m-hero__title {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: clamp(72px, 12vw, 180px);
    font-weight: 900; font-style: italic;
    line-height: 0.82; letter-spacing: -0.02em; text-transform: uppercase;
    margin: 0 0 28px; color: var(--f1m-carbon);
  }
  .f1m-hero__title em { font-style: italic; color: var(--f1m-red); }

  .f1m-hero__tagline {
    font-size: clamp(15px, 1.3vw, 18px);
    color: var(--f1m-mid); max-width: 52ch; line-height: 1.6; margin: 0 0 32px;
  }

  .f1m-hero__tele {
    display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 36px;
    padding: 18px 0; border-top: 1px solid var(--f1m-line); border-bottom: 1px solid var(--f1m-line);
  }
  .f1m-hero__tele-item { display: flex; flex-direction: column; gap: 3px; }
  .f1m-hero__tele-k {
    font-family: "DM Mono", monospace;
    font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--f1m-mist);
  }
  .f1m-hero__tele-v {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 22px; font-weight: 900; font-style: italic;
    color: var(--f1m-carbon); line-height: 1;
  }

  .f1m-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

  .f1m-btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 16px 28px; text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
  }
  .f1m-btn--primary { background: var(--f1m-red); color: white; }
  .f1m-btn--primary:hover { background: var(--f1m-red-dk); }
  .f1m-btn--ghost {
    background: transparent; color: var(--f1m-carbon);
    border: 2px solid var(--f1m-carbon);
  }
  .f1m-btn--ghost:hover { background: var(--f1m-carbon); color: white; }

  /* ---- TIMING TOWER ---- */
  .f1m-tower {
    background: var(--f1m-paper);
    border: 1.5px solid var(--f1m-carbon);
    overflow: hidden;
  }
  .f1m-tower__head {
    background: var(--f1m-carbon); color: white;
    padding: 12px 20px;
    font-family: "DM Mono", monospace;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: center;
  }
  .f1m-tower__live {
    display: flex; align-items: center; gap: 6px;
    font-size: 9px; color: var(--f1m-red);
  }
  .f1m-tower__live::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--f1m-red);
    animation: f1m-pulse 1.4s ease-in-out infinite;
  }

  .f1m-tower__row {
    display: grid; grid-template-columns: 88px 1fr;
    border-bottom: 1px solid var(--f1m-line);
    align-items: stretch; min-height: 44px;
  }
  .f1m-tower__row:last-of-type { border-bottom: none; }
  .f1m-tower__k {
    font-family: "DM Mono", monospace;
    font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--f1m-mid);
    padding: 0 14px;
    border-right: 1px solid var(--f1m-line);
    background: var(--f1m-warm);
    display: flex; align-items: center;
  }
  .f1m-tower__v {
    font-size: 13px; font-weight: 600;
    padding: 12px 16px; color: var(--f1m-carbon);
  }
  .f1m-tower__v--red { color: var(--f1m-red); font-weight: 700; }

  .f1m-tower__countdown {
    padding: 14px 20px;
    background: var(--f1m-carbon);
    display: flex; align-items: baseline; gap: 10px;
  }
  .f1m-tower__countdown-k {
    font-family: "DM Mono", monospace;
    font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--f1m-mist);
  }
  .f1m-tower__countdown-v {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 28px; font-weight: 900; font-style: italic; color: var(--f1m-red);
  }

  .f1m-tower__bar { padding: 12px 16px 16px; border-top: 1px solid var(--f1m-line); }
  .f1m-tower__bar-track {
    height: 8px; background: var(--f1m-line);
    position: relative; overflow: hidden; margin-bottom: 7px;
  }
  .f1m-tower__bar-fill {
    position: absolute; inset: 0; width: var(--fill, 70%);
    background: var(--f1m-red);
  }
  .f1m-tower__bar-meta {
    display: flex; justify-content: space-between;
    font-family: "DM Mono", monospace; font-size: 10px; color: var(--f1m-mid);
  }

  /* ---- DATA STRIP ---- */
  .f1m-data {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    background: var(--f1m-carbon);
    border-top: 4px solid var(--f1m-red);
    position: relative; z-index: 3;
  }
  .f1m-data__cell {
    padding: 32px 28px;
    border-right: 1px solid color-mix(in oklab, white 8%, transparent);
    position: relative; overflow: hidden;
  }
  .f1m-data__cell:last-child { border-right: none; }
  .f1m-data__k {
    font-family: "DM Mono", monospace;
    font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--f1m-mist); margin-bottom: 12px;
  }
  .f1m-data__v {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 900; font-style: italic; line-height: 0.88;
    color: white;
  }
  .f1m-data__v em { font-style: italic; color: var(--f1m-red); }
  .f1m-data__v small {
    font-size: 0.34em; color: var(--f1m-mist);
    font-weight: 700; letter-spacing: 0.15em;
  }

  /* ---- RACE PROGRAMME ---- */
  .f1m-prog {
    padding: clamp(60px, 8vw, 110px) clamp(20px, 4vw, 64px);
    position: relative; z-index: 2;
  }
  .f1m-prog__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 20px; margin-bottom: 48px;
    padding-bottom: 24px; border-bottom: 2px solid var(--f1m-carbon);
  }
  .f1m-prog__head h2 {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: clamp(48px, 6vw, 92px);
    font-weight: 900; font-style: italic; text-transform: uppercase;
    line-height: 0.88; margin: 0;
  }
  .f1m-prog__head h2 span { color: var(--f1m-red); }
  .f1m-prog__head p {
    max-width: 40ch; color: var(--f1m-mid); margin: 0;
    font-size: 15px; line-height: 1.6;
  }

  .f1m-prog__list { display: flex; flex-direction: column; }
  .f1m-stint {
    display: grid; grid-template-columns: 72px 1fr auto;
    border: 1.5px solid var(--f1m-line);
    border-bottom: none;
    background: var(--f1m-paper);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    position: relative; z-index: 1;
  }
  .f1m-prog__list .f1m-stint:first-child {
    border-top-width: 3px; border-top-color: var(--f1m-red);
  }
  .f1m-prog__list .f1m-stint:last-child {
    border-bottom: 1.5px solid var(--f1m-line);
  }
  .f1m-stint:hover {
    border-color: var(--f1m-red);
    box-shadow: 0 4px 28px rgba(225, 6, 0, 0.12);
    z-index: 2;
  }

  .f1m-stint__sector {
    display: flex; align-items: center; justify-content: center;
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 34px; font-weight: 900; font-style: italic;
    color: white; background: var(--f1m-carbon);
    border-right: 3px solid var(--f1m-red);
    transition: background .2s;
  }
  .f1m-stint:hover .f1m-stint__sector { background: var(--f1m-red); }

  .f1m-stint__body { padding: 20px 28px; }
  .f1m-stint__body h3 {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 28px; font-weight: 900; font-style: italic; text-transform: uppercase;
    margin: 0 0 8px; letter-spacing: 0.01em;
  }
  .f1m-stint__meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
  .f1m-stint__meta span {
    font-family: "DM Mono", monospace;
    font-size: 11px; letter-spacing: 0.14em; color: var(--f1m-mid);
  }
  .f1m-stint__meta span::before { content: "// "; color: var(--f1m-red); }

  .f1m-stint__icon {
    display: flex; align-items: center; justify-content: center;
    padding: 0 24px; font-size: 26px;
    border-left: 1px solid var(--f1m-line);
    background: var(--f1m-warm);
  }

  /* ---- PARTNERS ---- */
  .f1m-partners {
    overflow: hidden; padding: 22px 0;
    border-top: 1px solid var(--f1m-line);
    border-bottom: 1px solid var(--f1m-line);
    background: var(--f1m-paper);
    position: relative; z-index: 2;
  }
  .f1m-partners__track {
    display: flex; gap: 72px; width: max-content;
    animation: f1m-scroll 38s linear infinite;
  }
  @keyframes f1m-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .f1m-partners__track { animation: none; } }
  .f1m-partners__item {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 20px; font-weight: 700; font-style: italic; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--f1m-mist); white-space: nowrap;
  }
  .f1m-partners__item::before { content: "/ "; color: var(--f1m-red); }

  /* ---- CTA ---- */
  .f1m-cta {
    background: var(--f1m-red);
    padding: clamp(64px, 8vw, 110px) clamp(20px, 4vw, 64px);
    position: relative; overflow: clip; z-index: 2;
  }
  .f1m-cta::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(
      -60deg, transparent 0 44px,
      color-mix(in oklab, black 10%, transparent) 44px 46px
    );
  }
  .f1m-cta__inner {
    position: relative;
    display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center;
    max-width: 1400px; margin: 0 auto;
  }
  @media (min-width: 880px) { .f1m-cta__inner { grid-template-columns: 1.2fr auto; } }

  .f1m-cta__eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6); margin-bottom: 16px;
  }
  .f1m-cta h2 {
    font-family: "Big Shoulders Display", sans-serif;
    font-size: clamp(64px, 10vw, 140px);
    font-weight: 900; font-style: italic; text-transform: uppercase;
    line-height: 0.82; margin: 0; color: white;
  }
  .f1m-cta p {
    margin: 20px 0 0; max-width: 52ch;
    font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.72);
  }
  .f1m-btn--white {
    background: white; color: var(--f1m-red);
    font-size: 14px; font-weight: 800; letter-spacing: 0.2em;
    padding: 20px 40px; white-space: nowrap;
    transition: background .2s, color .2s;
  }
  .f1m-btn--white:hover { background: var(--f1m-carbon); color: white; }

  /* ---- FOOTER ---- */
  .f1m-foot {
    background: var(--f1m-carbon); color: var(--f1m-mist);
    padding: 28px clamp(20px, 4vw, 64px);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    font-family: "DM Mono", monospace;
    font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  }
  .f1m-foot a { color: white; text-decoration: none; }
  .f1m-foot a:hover { color: var(--f1m-red); }

  @keyframes f1m-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
  }
}


.f1m-nav__org-logo { height: 32px; width: auto; display: block; }