/* ============================================================
   THE GAMES — Nova Colosseum, North of London
   Roman maroon + ivory · editorial Didone theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,900;1,6..96,400&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Marcellus&display=swap');

:root {
  --black: #0b0809;
  --ink: #141011;
  --stone: #1d1618;
  --stone-2: #271d20;

  /* PRIMARY — dark roman maroon / red */
  --maroon: #7a1620;
  --maroon-deep: #4c0c12;
  --red: #a8262a;
  --red-bright: #c63a35;

  /* SECONDARY — ivory / parchment / bronze (no orange) */
  --ivory: #ece3d2;
  --parchment: #cabfa6;
  --bronze: #9c8a6a;

  --ash: #bcb3a6;
  --smoke: #897f74;
  --line: rgba(202,191,166,0.14);
  --line-red: rgba(168,38,42,0.30);

  --max: 1180px;
  --display: 'Bodoni Moda', Bodoni, 'Didot', serif;
  --label: 'Marcellus', 'Optima', 'Times New Roman', serif;
  --body: 'EB Garamond', 'Times New Roman', Georgia, serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--ash);
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(168,38,42,0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(76,12,18,0.30), transparent 60%);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

h1,h2,h3,h4 { font-family: var(--display); color: var(--ivory); line-height: 1.08; letter-spacing: 0; font-weight: 700; }

.eyebrow {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--parchment);
}

.gold { color: var(--red-bright); font-style: italic; }
.blood { color: var(--red-bright); }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,8,9,0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.14em; color: #fff; display:flex; align-items:center; }
.brand .mark { color: var(--red-bright); }
.brand-logo { height: 21px; width: auto; display: block; }
.hero-logo { width: min(720px, 86%); height: auto; margin: 6px auto 4px; filter: drop-shadow(0 4px 26px rgba(168,38,42,0.35)); }
nav.main { display: flex; gap: 30px; align-items: center; }
nav.main a {
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.86rem; font-weight: 400; color: var(--ash); transition: color .2s;
}
nav.main a:hover, nav.main a.active { color: var(--ivory); }
nav.main a.cta {
  border: 1px solid var(--red); color: var(--ivory);
  padding: 9px 18px; border-radius: 1px;
}
nav.main a.cta:hover { background: var(--red); color: #fff; }
.nav-toggle { display: none; background: none; border: 0; color: var(--ivory); font-size: 1.6rem; cursor: pointer; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; font-family: var(--label); text-transform: uppercase;
  letter-spacing: 0.18em; font-weight: 400; font-size: 0.92rem;
  padding: 15px 36px; border-radius: 1px; cursor: pointer; transition: all .2s; border: 1px solid transparent;
}
.btn-gold { background: linear-gradient(180deg, var(--red), var(--maroon)); color: var(--ivory); box-shadow: 0 10px 30px rgba(122,22,32,.35); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(168,38,42,.45); background: linear-gradient(180deg, var(--red-bright), var(--red)); }
.btn-ghost { border-color: var(--bronze); color: var(--ivory); }
.btn-ghost:hover { background: rgba(168,38,42,.12); border-color: var(--red); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 94vh; display: flex; align-items: center; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url('city-1.png') center 30% / cover no-repeat;
  filter: saturate(.85) contrast(1.05) sepia(.12) hue-rotate(-12deg);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(11,8,9,.40) 0%, rgba(11,8,9,.74) 62%, var(--black) 100%),
    radial-gradient(circle at 50% 26%, rgba(168,38,42,.20), transparent 58%);
}
.hero .wrap { z-index: 2; text-align: center; padding-top: 60px; padding-bottom: 60px; }
.hero h1 {
  font-weight: 900; font-size: clamp(3.2rem, 11vw, 9rem); letter-spacing: 0.02em;
  color: #fff; margin: 18px 0 6px;
}
.hero .sub { font-family: var(--label); font-size: clamp(1rem,2.2vw,1.45rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory); margin-bottom: 8px; }
.hero .loc { font-family: var(--body); font-style: italic; letter-spacing: 0.08em; color: var(--parchment); font-size: 1.05rem; margin-bottom: 34px; }
.hero .actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.rule { width: 90px; height: 1px; background: linear-gradient(90deg, transparent, var(--red), transparent); margin: 0 auto; }

.laurel { display:flex; align-items:center; justify-content:center; gap:18px; color: var(--red-bright); margin: 0 auto 22px; }
.laurel svg { width: 30px; height: 30px; fill: var(--red); opacity:.9;}

/* ---------- Section ---------- */
section.block { padding: 104px 0; position: relative; z-index: 1; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.section-head h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 700; margin: 14px 0; }
.section-head p { color: var(--ash); font-size: 1.18rem; font-style: italic; }

/* ---------- Event cards (with imagery) ---------- */
.events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ecard {
  position: relative; border: 1px solid var(--line); background: var(--ink);
  padding: 0; border-radius: 2px; overflow: hidden; transition: transform .25s, border-color .25s;
  display: flex; flex-direction: column;
}
.ecard:hover { transform: translateY(-6px); border-color: var(--red); }
.ecard .art { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.ecard .art::after { content:""; position:absolute; inset:0; background:
   linear-gradient(180deg, rgba(11,8,9,.10) 0%, rgba(11,8,9,.55) 60%, var(--ink) 100%),
   linear-gradient(120deg, rgba(122,22,32,.45), transparent 60%); }
.ecard .art .num { position:absolute; top:14px; left:18px; z-index:2; font-family: var(--display); font-size: 2.2rem; font-weight: 900; color: var(--ivory); text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.events .ecard:nth-child(1) .art { background: url('city-1.png') center/cover no-repeat; }
.events .ecard:nth-child(2) .art { background: url('city-2.png') center/cover no-repeat; }
.events .ecard:nth-child(3) .art { background: url('city-3.png') center/cover no-repeat; }
.ecard .pad { padding: 26px 28px 30px; }
.ecard h3 { font-size: 1.7rem; margin: 0 0 4px; }
.ecard .latin { font-family: var(--label); text-transform: uppercase; letter-spacing: .2em; font-size: .74rem; color: var(--red-bright); margin-bottom: 14px; }
.ecard p { font-size: 1.02rem; color: var(--ash); margin-bottom: 18px; }
.ecard .more { font-family: var(--label); text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; color: var(--ivory); }
.ecard .more::after { content: " →"; color: var(--red-bright); }

/* ---------- Stats strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 46px 0; }
.stat { text-align: center; }
.stat .n { font-family: var(--display); font-weight: 900; font-size: 2.8rem; color: var(--red-bright); }
.stat .l { font-family: var(--label); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--smoke); }

/* ---------- Split feature ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .visual { aspect-ratio: 4/3; border:1px solid var(--line); border-radius:2px; position: relative; overflow:hidden; background:#0d0a0b center/cover no-repeat; }
.split .visual.race { background-image: url('city-1.png'); }
.split .visual.duel { background-image: url('city-2.png'); }
.split .visual.war  { background-image: url('city-3.png'); }
.split .visual::after { content:""; position:absolute; inset:0; background:
   linear-gradient(120deg, rgba(122,22,32,.40), transparent 55%),
   linear-gradient(180deg, transparent 45%, rgba(11,8,9,.80)); }
.split .visual .tag { position:absolute; left:18px; bottom:16px; z-index:2; font-family:var(--label); letter-spacing:.18em; text-transform:uppercase; font-size:.82rem; color:var(--ivory); text-shadow:0 1px 8px rgba(0,0,0,.8); }
.split h3 { font-size: 2.3rem; margin-bottom: 12px; }
.split .latin { font-family: var(--label); text-transform: uppercase; letter-spacing:.22em; font-size:.78rem; color: var(--red-bright); margin-bottom:18px; }
.split p { font-size: 1.12rem; }
.split ul { list-style:none; margin-top:18px; }
.split ul li { padding-left: 26px; position: relative; margin-bottom: 10px; color: var(--ash); }
.split ul li::before { content:"✶"; position:absolute; left:0; color: var(--red-bright); }
.split.rev { direction: rtl; }
.split.rev > * { direction: ltr; }

/* ---------- CTA band ---------- */
.cta-band { text-align:center; padding: 96px 0; background:
   linear-gradient(180deg, transparent, rgba(122,22,32,.10), transparent);
   border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cta-band h2 { font-size: clamp(2.1rem,5vw,3.6rem); margin-bottom: 14px; }
.cta-band p { color: var(--ash); font-style: italic; max-width: 560px; margin: 0 auto 30px; font-size: 1.15rem; }

/* ---------- Signup ---------- */
.signup { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; max-width: 520px; margin: 0 auto; }
.signup input {
  flex:1; min-width: 240px; background: var(--stone); border:1px solid var(--line); color:var(--ivory);
  padding: 15px 18px; border-radius:1px; font-family: var(--body); font-size: 1.05rem;
}
.signup input:focus { outline: none; border-color: var(--red); }
.signup .note { width:100%; font-size:.9rem; color: var(--smoke); margin-top: 10px; font-style: italic; }

/* ---------- Page hero (inner) ---------- */
.phero { padding: 124px 0 84px; text-align:center; position: relative; border-bottom:1px solid var(--line); overflow:hidden; }
.phero::before { content:""; position:absolute; inset:0; z-index:0; background: url('city-2.png') center 28% / cover no-repeat; opacity:.5; filter: sepia(.15) hue-rotate(-12deg) saturate(.9); }
.phero::after { content:""; position:absolute; inset:0; z-index:0; background:
   linear-gradient(180deg, rgba(11,8,9,.55), rgba(11,8,9,.84) 70%, var(--black)),
   radial-gradient(circle at 50% 0%, rgba(168,38,42,.20), transparent 60%); }
.phero .wrap { z-index:1; }
.phero h1 { font-size: clamp(2.8rem, 8vw, 5.2rem); font-weight: 900; letter-spacing:.01em; color:#fff; }
.phero p { color: var(--parchment); font-family: var(--body); font-style: italic; font-size: 1.15rem; margin-top:12px; }
.phero[data-img="1"]::before { background-image: url('city-1.png'); }
.phero[data-img="3"]::before { background-image: url('city-3.png'); }

/* ---------- Roster ---------- */
.roster { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.fighter { border:1px solid var(--line); background: var(--ink); border-radius:2px; overflow:hidden; transition: border-color .2s, transform .2s; }
.fighter:hover { border-color: var(--red); transform: translateY(-4px); }
.fighter .ph { aspect-ratio: 1/1; position: relative; background:#0d0a0b center/cover no-repeat; }
.roster .fighter:nth-child(3n+1) .ph { background-image: url('city-1.png'); }
.roster .fighter:nth-child(3n+2) .ph { background-image: url('city-2.png'); }
.roster .fighter:nth-child(3n+3) .ph { background-image: url('city-3.png'); }
.fighter .ph::after { content:""; position:absolute; inset:0; background:
   radial-gradient(circle at 50% 38%, rgba(122,22,32,.30), transparent 62%),
   linear-gradient(180deg, rgba(11,8,9,.25) 0%, transparent 30%, rgba(11,8,9,.92)); }
.fighter .ph .init { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:900; font-size:3.6rem; color: rgba(236,227,210,.92); z-index:1; text-shadow:0 3px 18px rgba(0,0,0,.7); letter-spacing:.05em; }
.fighter .ph .badge { position:absolute; top:12px; right:12px; z-index:2; font-family:var(--label); letter-spacing:.12em; text-transform:uppercase; font-size:.66rem; padding:4px 10px; border-radius:1px; }
.badge.human { background: rgba(236,227,210,.14); color: var(--ivory); border:1px solid var(--bronze); }
.badge.robot { background: rgba(168,38,42,.20); color: #f0c9c5; border:1px solid var(--red); }
.fighter .body { padding: 18px 22px 22px; }
.fighter h3 { font-size: 1.45rem; }
.fighter .epithet { font-family: var(--body); font-style: italic; font-size:.98rem; color: var(--parchment); margin-bottom: 12px; }
.fighter .meta { display:flex; gap:18px; font-family:var(--label); font-size:.82rem; letter-spacing:.06em; color: var(--ash); border-top:1px solid var(--line); padding-top:12px; text-transform:uppercase; }
.fighter .meta b { color: var(--red-bright); font-weight:400; }

/* ---------- Schedule ---------- */
.sched { border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.srow { display:grid; grid-template-columns: 130px 1fr 160px 120px; gap: 16px; align-items:center; padding: 24px 28px; border-bottom:1px solid var(--line); transition: background .2s; }
.srow:last-child { border-bottom:0; }
.srow:hover { background: rgba(168,38,42,.07); }
.srow .date { font-family: var(--display); font-weight:700; font-size:1.15rem; color: var(--red-bright); }
.srow .date span { display:block; font-family: var(--label); font-weight:400; font-size:.74rem; letter-spacing:.14em; color: var(--smoke); text-transform:uppercase; }
.srow .ev h3 { font-size: 1.4rem; }
.srow .ev p { font-family:var(--label); text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; color: var(--red-bright); }
.srow .ven { font-family:var(--body); font-style:italic; color: var(--parchment); font-size:1rem; }
.srow .price { text-align:right; }
.srow .price b { font-family:var(--display); color:var(--ivory); font-size:1.2rem; font-weight:700; }
.srow .price span { display:block; font-family:var(--label); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--smoke); }

/* ---------- Tickets ---------- */
.tiers { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: stretch; }
.tier { border:1px solid var(--line); border-radius:2px; background: var(--ink); padding: 38px 32px; display:flex; flex-direction:column; position: relative; }
.tier.feat { border-color: var(--red); box-shadow: 0 0 0 1px var(--maroon), 0 24px 60px rgba(122,22,32,.20); }
.tier.feat::before { content:"Most Coveted"; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background: linear-gradient(180deg,var(--red),var(--maroon)); color:var(--ivory); font-family:var(--label); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; padding:5px 16px; border-radius:1px; }
.tier h3 { font-size: 1.7rem; }
.tier .latin { font-family:var(--label); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color: var(--red-bright); margin-bottom:18px; }
.tier .pr { font-family:var(--display); font-weight:900; font-size: 3rem; color:var(--ivory); }
.tier .pr span { font-family:var(--body); font-style:italic; font-size:1rem; color: var(--smoke); letter-spacing:0; }
.tier ul { list-style:none; margin: 22px 0 28px; flex:1; }
.tier ul li { padding: 9px 0 9px 26px; position: relative; border-bottom:1px solid rgba(255,255,255,.04); font-size:1.02rem; }
.tier ul li::before { content:"✶"; position:absolute; left:0; color: var(--red-bright); }

/* ---------- Footer ---------- */
footer { border-top:1px solid var(--line); padding: 64px 0 40px; position: relative; z-index:1; }
footer .grid { display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
footer .brand-blk .brand { font-size: 1.5rem; }
footer p.tag { color: var(--smoke); margin-top: 14px; max-width: 340px; font-size:1.02rem; font-style:italic; }
footer h4 { font-family: var(--label); text-transform:uppercase; letter-spacing:.18em; font-size:.82rem; color: var(--parchment); margin-bottom: 16px; font-weight:400; }
footer ul { list-style:none; }
footer ul li { margin-bottom: 10px; }
footer ul li a { color: var(--ash); font-size:1.02rem; transition: color .2s; }
footer ul li a:hover { color: var(--red-bright); }
footer .base { border-top:1px solid var(--line); padding-top: 26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; color: var(--smoke); font-size:.9rem; font-family: var(--label); letter-spacing:.08em; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .events, .roster, .tiers { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,1fr); gap: 30px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split.rev { direction: ltr; }
  .srow { grid-template-columns: 100px 1fr; }
  .srow .ven, .srow .price { display:none; }
  footer .grid { grid-template-columns: 1fr; }
  nav.main { display: none; position: absolute; top: 74px; left:0; right:0; flex-direction: column; background: var(--ink); border-bottom:1px solid var(--line); padding: 20px 28px; gap: 18px; }
  nav.main.open { display: flex; }
  .nav-toggle { display: block; }
}