/* ═══════════════════════════════════════════════════════════
   RACE BRIEF — styles.css
   Colors: MotoGP exact palette
   ═══════════════════════════════════════════════════════════ */

:root {
  --red:    #c80502;
  --red-dk: #a00401;
  --teal:   #003335;
  --yellow: #faec25;
  --dark:   #161616;
  --light:  #fafcff;
  --mid:    #f0f0f0;
  --white:  #ffffff;
  --gray:   #606060;
  --gray-lt:#9e9e9e;
  --border: #dedede;
  --font-d: 'Barlow Condensed', helvetica, sans-serif;
  --font-b: 'Barlow', helvetica, sans-serif;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body { font-family:var(--font-b); background:var(--light); color:var(--dark); overflow-x:hidden }
a { text-decoration:none; color:inherit }
img { display:block; max-width:100% }
button { cursor:pointer; border:none; background:none; font-family:inherit }

/* ── LAYOUT ── */
.wrap { max-width:1300px; margin:0 auto; padding:0 28px }

/* ══════════════════════════════════════
   TOP BAR
══════════════════════════════════════ */
.top-bar { background:var(--dark); padding:7px 0 }
.top-bar .wrap { display:flex; justify-content:space-between; align-items:center }
.top-bar__left { display:flex; align-items:center; gap:18px }
.top-bar__date { font-family:var(--font-d); font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.4) }
.top-bar__divider { width:1px; height:12px; background:rgba(255,255,255,.15) }
.top-bar__tag { font-family:var(--font-d); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--yellow); font-weight:700 }
.top-bar__social { display:flex; gap:14px }
.top-bar__social a { color:rgba(255,255,255,.45); transition:color .2s; display:flex; align-items:center }
.top-bar__social a:hover { color:var(--red) }

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
.header { background:var(--white); position:sticky; top:0; z-index:200; box-shadow:0 1px 0 var(--border) }
.header .wrap { display:flex; align-items:center; height:64px; gap:0 }
.header-accent { width:4px; height:36px; background:var(--red); flex-shrink:0; margin-right:16px }
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; margin-right:32px }
.logo__icon { width:34px; height:34px; background:var(--red); display:flex; align-items:center; justify-content:center }
.logo__icon svg { width:18px; height:18px; fill:white }
.logo__text { font-family:var(--font-d); font-weight:900; font-size:23px; text-transform:uppercase; letter-spacing:-.5px; color:var(--dark) }
.logo__text em { color:var(--red); font-style:normal }

.nav { display:flex; align-items:stretch; height:64px; flex:1 }
.nav__item { display:flex; align-items:center; font-family:var(--font-d); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.4px; color:var(--dark); padding:0 12px; position:relative; transition:color .2s; white-space:nowrap }
.nav__item:hover, .nav__item.active { color:var(--red) }
.nav__item.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--red) }

.header__right { display:flex; align-items:center; gap:12px; margin-left:auto; flex-shrink:0 }
.search-btn { color:var(--gray); display:flex; align-items:center; padding:6px; transition:color .2s }
.search-btn:hover { color:var(--red) }
.search-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2 }
.btn-sub { background:var(--red); color:var(--white); font-family:var(--font-d); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.5px; padding:9px 20px; transition:background .2s; white-space:nowrap }
.btn-sub:hover { background:var(--red-dk) }
.hamburger { display:none; flex-direction:column; gap:5px; padding:8px }
.hamburger span { display:block; width:22px; height:2px; background:var(--dark); transition:all .3s }

/* ══════════════════════════════════════
   BREAKING TICKER
══════════════════════════════════════ */
.ticker { background:var(--red); overflow:hidden; height:36px; display:flex; align-items:center }
.ticker__label { background:var(--dark); color:var(--yellow); font-family:var(--font-d); font-weight:800; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; padding:0 16px; height:100%; display:flex; align-items:center; flex-shrink:0; white-space:nowrap }
.ticker__track { flex:1; overflow:hidden; height:100%; display:flex; align-items:center }
.ticker__inner { display:flex; animation:tick 60s linear infinite; white-space:nowrap }
.ticker__inner:hover { animation-play-state:paused }
.ticker__item { font-family:var(--font-d); font-weight:600; font-size:13px; color:rgba(255,255,255,.9); padding:0 48px 0 0; letter-spacing:.2px }
.ticker__item::before { content:'▸'; margin-right:10px; opacity:.7 }
@keyframes tick { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ══════════════════════════════════════
   HERO SLIDER
══════════════════════════════════════ */
.hero { position:relative; height:720px; overflow:hidden; background:#fff }
.hero__slides { display:flex; height:calc(100% - 96px); transition:transform .65s cubic-bezier(.4,0,.2,1) }

.slide { min-width:100%; display:grid; grid-template-columns:60% 40% }
.slide__image { position:relative; overflow:hidden }
.slide__image img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform 8s ease }
.slide.active .slide__image img { transform:scale(1.05) }
.slide__panel { background:#fff; display:flex; flex-direction:column; justify-content:center; padding:52px 60px; border-left:4px solid var(--red) }
.slide__cat { display:inline-block; background:var(--red); color:#fff; font-family:var(--font-d); font-weight:800; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; padding:4px 11px; margin-bottom:22px; align-self:flex-start }
.slide__title { font-family:var(--font-d); font-weight:900; font-size:38px; line-height:1.06; color:var(--dark); text-transform:uppercase; letter-spacing:-.3px; margin-bottom:18px }
.slide__date { font-family:var(--font-d); font-size:11px; color:var(--gray-lt); text-transform:uppercase; letter-spacing:.5px; margin-bottom:30px }
.slide__btn { display:inline-flex; align-items:center; gap:8px; background:var(--red); color:#fff; font-family:var(--font-d); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.5px; padding:12px 24px; transition:background .2s; align-self:flex-start }
.slide__btn:hover { background:var(--red-dk) }
.slide__btn svg { width:12px; height:12px; fill:currentColor }

/* Slider dots */
.hero__dots { position:absolute; top:18px; left:24px; display:flex; gap:8px; z-index:10 }
.dot { width:8px; height:8px; background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.18); transition:all .3s; cursor:pointer; flex-shrink:0 }
.dot.active { background:var(--red); width:26px; border-color:var(--red) }

/* Slider arrows */
.hero__arrow { position:absolute; top:calc(50% - 48px); transform:translateY(-50%); z-index:10; background:rgba(255,255,255,.92); color:var(--dark); width:48px; height:48px; display:flex; align-items:center; justify-content:center; transition:all .2s; border:1px solid var(--border); box-shadow:0 2px 8px rgba(0,0,0,.1) }
.hero__arrow:hover { background:var(--red); color:#fff; border-color:var(--red) }
.hero__arrow svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round }
.hero__arrow--prev { left:16px }
.hero__arrow--next { right:16px }

/* Hero bottom news rail */
.hero__rail { position:absolute; bottom:0; left:0; right:0; height:96px; background:rgba(8,8,8,.82); backdrop-filter:blur(6px); border-top:1px solid rgba(255,255,255,.08); display:grid; grid-template-columns:repeat(3,1fr); z-index:5 }
.hero__rail-item { display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; transition:background .2s }
.hero__rail-item:not(:last-child) { border-right:1px solid rgba(255,255,255,.07) }
.hero__rail-item:hover { background:rgba(255,255,255,.04) }
.hero__rail-thumb { width:76px; height:54px; object-fit:cover; flex-shrink:0 }
.hero__rail-content { flex:1; min-width:0 }
.hero__rail-title { font-family:var(--font-d); font-weight:600; font-size:13px; color:rgba(255,255,255,.88); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.hero__rail-meta { display:flex; justify-content:space-between; align-items:center; margin-top:6px }
.hero__rail-time { font-family:var(--font-d); font-size:10px; font-weight:700; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.5px }
.hero__rail-src { font-family:var(--font-d); font-size:10px; color:rgba(255,255,255,.28) }

/* ══════════════════════════════════════
   SECTION COMMON
══════════════════════════════════════ */
.section { padding:56px 0 }
.section--mid { background:var(--mid) }
.section--dark { background:var(--dark) }
.section--teal { background:var(--teal) }
.section--white { background:var(--white) }

.sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px }
.sec-title { font-family:var(--font-d); font-weight:900; font-size:28px; text-transform:uppercase; letter-spacing:-.3px; line-height:1; color:var(--dark) }
.sec-title--white { color:var(--white) }
.sec-title--highlight { background:var(--teal); color:var(--white); padding:2px 10px; display:inline-block }

.sec-more { font-family:var(--font-d); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--dark); display:flex; align-items:center; gap:8px; transition:gap .2s }
.sec-more:hover { gap:12px }
.sec-more--red { color:var(--red) }
.sec-more svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round }

/* ══════════════════════════════════════
   GP SECTION — large left + 2×2 right
══════════════════════════════════════ */
.gp { padding:56px 0; background:var(--mid) }

.gp__layout { display:grid; grid-template-columns:1.35fr 1fr; gap:4px; height:520px }
.gp__featured { position:relative; overflow:hidden; cursor:pointer; display:block }
.gp__featured:hover .gf-img { transform:scale(1.04) }
.gf-img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease }
.gf-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.2) 50%,transparent 100%) }
.gf-body { position:absolute; bottom:0; left:0; right:0; padding:24px }
.gf-cat { font-family:var(--font-d); font-size:10px; font-weight:700; color:var(--yellow); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px }
.gf-title { font-family:var(--font-d); font-weight:800; font-size:26px; color:#fff; text-transform:uppercase; line-height:1.1 }
.gf-date { font-family:var(--font-d); font-size:11px; color:rgba(255,255,255,.42); margin-top:8px; text-transform:uppercase }

.gp__side { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:4px }
.gp__side-card { position:relative; overflow:hidden; cursor:pointer; display:block }
.gp__side-card:hover .gs-img { transform:scale(1.06) }
.gs-img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease }
.gs-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.1) 60%) }
.gs-body { position:absolute; bottom:0; left:0; right:0; padding:14px }
.gs-cat { font-family:var(--font-d); font-size:9px; font-weight:700; color:var(--yellow); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px }
.gs-title { font-family:var(--font-d); font-weight:700; font-size:14px; color:#fff; text-transform:uppercase; line-height:1.2 }
.gs-date { font-family:var(--font-d); font-size:10px; color:rgba(255,255,255,.4); margin-top:4px; text-transform:uppercase }

/* ══════════════════════════════════════
   LATEST NEWS — "Rider Market" style
   Large card left + 2×2 grid right
══════════════════════════════════════ */
.news { padding:56px 0; background:var(--white) }

.news__layout { display:block }

.news__featured { cursor:pointer; display:block }
.news__featured:hover .nf-img { transform:scale(1.03) }
.nf-img-wrap { overflow:hidden; aspect-ratio:4/3 }
.nf-img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease }
.nf-body { padding:16px 0 }
.nf-cat { font-family:var(--font-d); font-size:10px; font-weight:700; color:var(--gray-lt); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px }
.nf-title { font-family:var(--font-d); font-weight:800; font-size:22px; color:var(--red); text-transform:uppercase; line-height:1.15; margin-bottom:8px }
.nf-date { font-family:var(--font-d); font-size:12px; color:var(--gray-lt); text-transform:uppercase; letter-spacing:.3px }

.news__side { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:16px }
.news__side-card { cursor:pointer; display:block }
.news__side-card:hover .ns-img { transform:scale(1.04) }
.ns-img-wrap { overflow:hidden; aspect-ratio:16/10 }
.ns-img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease }
.ns-title { font-family:var(--font-d); font-weight:700; font-size:15px; color:var(--dark); margin-top:10px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.ns-date { font-family:var(--font-d); font-size:11px; color:var(--gray-lt); text-transform:uppercase; letter-spacing:.3px; margin-top:5px }

/* ══════════════════════════════════════
   STANDINGS — full table with tabs
══════════════════════════════════════ */
.standings { padding:56px 0; background:var(--mid) }

.standings__tabs { display:flex; border-bottom:2px solid rgba(0,0,0,.1); margin-bottom:0 }
.st-tab { font-family:var(--font-d); font-weight:700; font-size:15px; padding:10px 22px; cursor:pointer; color:var(--gray); border-bottom:3px solid transparent; margin-bottom:-2px; transition:color .2s; text-transform:uppercase; letter-spacing:.3px }
.st-tab:hover { color:var(--dark) }
.st-tab.active { color:var(--dark); border-bottom-color:var(--dark) }

.standings__panel { display:none }
.standings__panel.active { display:block }

.st-table { width:100%; border-collapse:collapse; background:var(--white) }
.st-table th { font-family:var(--font-d); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--gray); padding:12px 16px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap }
.st-table td { padding:11px 16px; border-bottom:1px solid var(--border); font-family:var(--font-d); vertical-align:middle; white-space:nowrap }
.st-table tr.p1 td { background:linear-gradient(90deg,#1a0a3e 0%,#0d0520 40%,#050010 100%) }
.st-table tr.p1:hover td { background:linear-gradient(90deg,#220d52 0%,#110628 40%,#070015 100%) }
.st-table tbody tr:not(.p1):hover td { background:#fafafa }

.st-pos { font-size:22px; font-weight:900; color:rgba(0,0,0,.28); min-width:40px }
.st-table tr.p1 .st-pos { color:var(--yellow) }
.st-table tbody tr:nth-child(2) .st-pos { color:#C8C8C8 }
.st-table tbody tr:nth-child(3) .st-pos { color:#C06428 }

.st-rider { display:flex; align-items:center; gap:12px }
.st-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--border) }
.st-avatar--placeholder { display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-weight:900; font-size:16px; color:rgba(0,0,0,.3) }
.st-table tr.p1 .st-avatar--placeholder { color:rgba(255,255,255,.4) }
.st-rname { line-height:1 }
.st-rfirst { font-size:11px; color:var(--gray); text-transform:uppercase; letter-spacing:.3px }
.st-rlast { font-size:17px; font-weight:900; text-transform:uppercase; color:var(--dark) }
.st-table tr.p1 .st-rfirst { color:rgba(255,255,255,.45) }
.st-table tr.p1 .st-rlast { color:#fff }

.st-team { font-size:13px; color:var(--gray); display:flex; align-items:center; gap:7px }
.st-table tr.p1 .st-team { color:rgba(255,255,255,.55) }
.st-tbar { display:inline-block; width:3px; height:18px; border-radius:1px; flex-shrink:0 }

.st-pts { font-size:22px; font-weight:900; color:var(--dark) }
.st-table tr.p1 .st-pts { color:#fff }
.st-gap, .st-wins, .st-pods { font-size:14px; color:var(--gray); text-align:center }
.st-table tr.p1 .st-gap, .st-table tr.p1 .st-wins, .st-table tr.p1 .st-pods { color:rgba(255,255,255,.7) }
.st-wins, .st-pods { font-weight:700; color:var(--dark) }

.st-l3 { display:flex; gap:4px; align-items:center }
.l3-dot { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:11px; font-weight:700 }
.l3-dot--1 { background:var(--yellow); color:#000 }
.l3-dot--2 { background:#C8C8C8; color:#333 }
.l3-dot--3 { background:#C06428; color:#fff }
.l3-dot--top { background:#333; color:#fff }
.l3-dot--off { background:rgba(0,0,0,.08); color:var(--gray) }

/* ══════════════════════════════════════
   NEWS TEXT GRID — 4×2 text-only cards
══════════════════════════════════════ */
.ntg { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:4px 2px }
.ntc { background:#fff; display:flex; flex-direction:column; text-decoration:none; overflow:hidden; border-radius:2px; box-shadow:0 2px 10px rgba(0,0,0,.08); transition:box-shadow .25s,transform .25s }
.ntc:hover { box-shadow:0 6px 24px rgba(0,0,0,.14); transform:translateY(-3px) }
.ntc:hover .ntc__img { transform:scale(1.06) }
.ntc__img-wrap { height:195px; overflow:hidden; flex-shrink:0; position:relative }
.ntc__img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease }
.ntc__body { padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; border-top:3px solid var(--red) }
.ntc__cat { font-family:var(--font-d); font-size:10px; font-weight:800; color:var(--red); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:9px }
.ntc__title { font-family:var(--font-d); font-weight:800; font-size:16px; color:var(--dark); line-height:1.3; flex:1 }
.ntc__date { font-family:var(--font-d); font-size:11px; color:var(--gray-lt); text-transform:uppercase; margin-top:14px; letter-spacing:.3px }

/* ══════════════════════════════════════
   RIDERS — horizontal portrait scroll
══════════════════════════════════════ */
.riders { padding:56px 0; background:var(--white) }
.riders__scroll { display:flex; gap:3px; overflow-x:auto; padding-bottom:0; scrollbar-width:none }
.riders__scroll::-webkit-scrollbar { display:none }

.rp-card { flex-shrink:0; width:195px; height:285px; position:relative; overflow:hidden; cursor:pointer; display:block }
.rp-card:hover .rp-photo,.rp-card:hover .rp-bg { transform:scale(1.05) }
.rp-bg { position:absolute; inset:0; transition:transform .45s ease; z-index:0 }
.rp-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .45s ease; z-index:1 }
.rp-num { position:absolute; top:10px; right:10px; font-family:var(--font-d); font-weight:900; font-size:76px; color:rgba(255,255,255,.18); line-height:.9; pointer-events:none; z-index:3 }
.rp-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.08) 55%,transparent 100%); z-index:2 }
.rp-body { position:absolute; bottom:0; left:0; right:0; padding:14px; z-index:3 }
.rp-first { font-family:var(--font-d); font-size:11px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.5px }
.rp-last { font-family:var(--font-d); font-weight:900; font-size:19px; color:#fff; text-transform:uppercase; line-height:1 }
.rp-team { font-family:var(--font-d); font-size:11px; color:rgba(255,255,255,.4); margin-top:3px; text-transform:uppercase }

/* ══════════════════════════════════════
   HALL OF FAME — horizontal B&W scroll
══════════════════════════════════════ */
.hof { padding:56px 0; background:var(--dark) }
.hof__scroll { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; position:relative }
.hof__scroll::-webkit-scrollbar { display:none }

.hof-card { flex-shrink:0; width:210px; height:275px; position:relative; overflow:hidden; cursor:pointer; background:#1c1c1c }
.hof-card:hover .hof-img { filter:grayscale(0%); transform:scale(1.06) }
.hof-img { width:100%; height:100%; object-fit:cover; object-position:top; filter:grayscale(100%); transition:filter .4s,transform .45s }
.hof-dark { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.12) 55%,transparent 100%) }
.hof-body { position:absolute; bottom:0; left:0; right:0; padding:14px 16px }
.hof-years { font-family:var(--font-d); font-size:10px; font-weight:700; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.8px; margin-bottom:3px }
.hof-name { font-family:var(--font-d); font-weight:900; font-size:19px; color:#fff; text-transform:uppercase; line-height:1 }
.hof-titles { font-family:var(--font-d); font-size:11px; color:rgba(255,255,255,.45); margin-top:4px }

/* Scroll arrow button */
.scroll-btn { position:absolute; right:-28px; top:50%; transform:translateY(-50%); background:var(--white); border:1px solid var(--border); width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:4; transition:background .2s }
.scroll-btn:hover { background:var(--red); border-color:var(--red) }
.scroll-btn:hover svg { stroke:#fff }
.scroll-btn svg { width:18px; height:18px; stroke:var(--dark); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round }

/* ══════════════════════════════════════
   DOCUMENTARIES — portrait poster scroll
══════════════════════════════════════ */
.docs { padding:56px 0; background:var(--mid) }
.docs__scroll { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px }
.docs__scroll::-webkit-scrollbar { display:none }

.dp-card { flex-shrink:0; width:178px; position:relative; overflow:hidden; cursor:pointer; display:block; background:#111 }
.dp-card__aspect { aspect-ratio:2/3; position:relative; overflow:hidden }
.dp-card:hover .dp-img { transform:scale(1.06) }
.dp-img { width:100%; height:100%; object-fit:cover; transition:transform .45s }
.dp-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.1) 50%,transparent 100%) }
.dp-body { position:absolute; bottom:0; left:0; right:0; padding:14px 12px }
.dp-cat { font-family:var(--font-d); font-size:9px; font-weight:700; color:var(--yellow); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px }
.dp-title { font-family:var(--font-d); font-weight:800; font-size:15px; color:#fff; text-transform:uppercase; line-height:1.15 }

/* ══════════════════════════════════════
   NEWSLETTER BANNER
══════════════════════════════════════ */
.banner { background:var(--red); padding:56px 0; text-align:center }
.banner__title { font-family:var(--font-d); font-weight:900; font-size:44px; color:#fff; text-transform:uppercase; letter-spacing:-1px; margin-bottom:10px }
.banner__sub { font-size:16px; color:rgba(255,255,255,.75); margin-bottom:28px }
.banner__form { display:flex; gap:0; max-width:460px; margin:0 auto }
.banner__input { flex:1; border:none; padding:12px 18px; font-family:var(--font-b); font-size:14px; outline:none }
.banner__btn { background:var(--dark); color:#fff; font-family:var(--font-d); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.5px; padding:12px 24px; transition:background .2s; flex-shrink:0 }
.banner__btn:hover { background:#2a2a2a }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer { background:var(--dark); padding:52px 0 24px }
.footer__top { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.07) }
.footer__logo { display:flex; align-items:center; gap:8px; margin-bottom:14px }
.footer__logo-icon { width:32px; height:32px; background:var(--red); display:flex; align-items:center; justify-content:center }
.footer__logo-icon svg { width:17px; height:17px; fill:white }
.footer__logo-text { font-family:var(--font-d); font-weight:900; font-size:21px; color:#fff; text-transform:uppercase; letter-spacing:-.5px }
.footer__logo-text em { color:var(--red); font-style:normal }
.footer__desc { font-size:13px; line-height:1.65; color:rgba(255,255,255,.38); margin-bottom:22px }
.footer__social { display:flex; gap:8px }
.footer__soc { width:34px; height:34px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.45); font-size:12px; transition:all .2s }
.footer__soc:hover { background:var(--red); color:#fff }
.footer__col-title { font-family:var(--font-d); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#fff; margin-bottom:16px }
.footer__links { display:flex; flex-direction:column; gap:10px }
.footer__link { font-size:13px; color:rgba(255,255,255,.38); transition:color .2s }
.footer__link:hover { color:var(--red) }
.footer__bottom { display:flex; justify-content:space-between; align-items:center; font-size:11px }
.footer__copy { color:rgba(255,255,255,.22) }
.footer__legal { display:flex; gap:20px }
.footer__legal a { color:rgba(255,255,255,.22); transition:color .2s }
.footer__legal a:hover { color:rgba(255,255,255,.5) }

/* ══════════════════════════════════════
   MOBILE NAV OVERLAY
══════════════════════════════════════ */
.mob-nav { display:none; position:fixed; inset:0; background:var(--dark); z-index:300; flex-direction:column; padding:24px 28px; overflow-y:auto }
.mob-nav.open { display:flex }
.mob-nav__close { align-self:flex-end; color:#fff; padding:8px; margin-bottom:20px }
.mob-nav__close svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2.5 }
.mob-nav__item { font-family:var(--font-d); font-weight:700; font-size:28px; text-transform:uppercase; color:rgba(255,255,255,.65); padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); transition:color .2s }
.mob-nav__item:hover,.mob-nav__item.active { color:var(--red) }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:1100px) {
  .gp__layout { height:420px }
  .gf-title { font-size:20px }
  .ntg { grid-template-columns:repeat(3,1fr) }
}

/* ── TABLET 900px ── */
@media(max-width:900px) {
  /* Header */
  .nav { display:none }
  .hamburger { display:flex }
  .btn-sub { display:none }
  .header .wrap { padding:0 16px }

  /* Top bar */
  .top-bar__left { display:none }
  .top-bar .wrap { justify-content:flex-end }

  /* Hero */
  .hero { height:auto }
  .hero__slides { height:auto; overflow:hidden; position:relative }
  .slide { grid-template-columns:1fr; grid-template-rows:300px auto }
  .slide__image { height:300px }
  .slide__panel { padding:24px 20px 28px; border-left:none; border-top:4px solid var(--red) }
  .slide__title { font-size:24px }
  .hero__rail { position:static; height:auto; grid-template-columns:1fr }
  .hero__rail-item:not(:first-child) { display:none }
  .hero__dots { top:14px; left:14px }
  .hero__arrow { display:none }

  /* GP section */
  .gp__layout { grid-template-columns:1fr; height:auto }
  .gp__featured { height:320px }
  .gp__side { grid-template-columns:1fr 1fr; height:260px }

  /* News */
  .ntg { grid-template-columns:repeat(2,1fr) }

  /* Standings — scroll the table */
  .standings__tabs { overflow-x:auto; white-space:nowrap }
  .standings__panel { overflow-x:auto }
  .st-table { min-width:600px }
  .st-table th:nth-child(n+6), .st-table td:nth-child(n+6) { display:none }

  /* Footer */
  .footer__top { grid-template-columns:1fr 1fr; gap:24px }
}

/* ── MOBILE 640px ── */
@media(max-width:640px) {
  /* Layout */
  .wrap { padding:0 14px }

  /* Hero */
  .slide { grid-template-rows:220px auto }
  .slide__image { height:220px }
  .slide__title { font-size:20px }
  .slide__date { display:none }

  /* GP */
  .gp__side { grid-template-columns:1fr; height:auto }
  .gp__side .gp__side-card { height:160px }

  /* News */
  .ntg { grid-template-columns:1fr 1fr }

  /* Standings — hide more columns */
  .st-table th:nth-child(n+5), .st-table td:nth-child(n+5) { display:none }
  .st-table th:nth-child(3), .st-table td:nth-child(3) { display:none }

  /* Footer */
  .footer__top { grid-template-columns:1fr }
  .footer__bottom { flex-direction:column; gap:12px; text-align:center }
  .footer__legal { justify-content:center }
  .banner__form { flex-direction:column }
}

/* ── SMALL MOBILE 480px ── */
@media(max-width:480px) {
  .ntg { grid-template-columns:1fr }
  .ntc__img-wrap { height:160px }
  .slide__title { font-size:18px }
  .gp__side { height:auto }
}