@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Oswald:wght@500;600&display=swap');

:root { --ink:#15242a; --red:#e43d30; --paper:#f5f2e9; --yellow:#ffc83d; --line:#c9c6bc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Manrope",sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.site-header { position:absolute; z-index:10; top:0; left:0; width:100%; height:84px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; color:white; border-bottom:1px solid #ffffff55; }
.brand { display:flex; align-items:center; gap:12px; font-size:12px; line-height:1.2; letter-spacing:1px; }
.brand b { display:block; color:var(--yellow); }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid currentColor; font-size:20px; }
nav { display:flex; gap:34px; font-size:12px; font-weight:700; }
nav a { padding:12px 0; }
.menu-button { display:none; color:white; border:0; background:none; width:42px; height:42px; }
.menu-button span { display:block; height:2px; width:24px; margin:6px auto; background:currentColor; }
.hero { position:relative; min-height:720px; height:100svh; max-height:960px; overflow:hidden; color:white; }
.hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,25,34,.7) 0%,rgba(8,25,34,.28) 43%,transparent 70%),linear-gradient(0deg,rgba(8,25,34,.35),transparent 35%); }
.hero-copy { position:absolute; left:8vw; top:50%; transform:translateY(-43%); }
.kicker,.eyebrow { margin:0 0 18px; color:var(--red); font-size:11px; font-weight:800; letter-spacing:2.5px; }
.kicker { color:var(--yellow); }
h1 { margin:0; font-family:"Oswald",sans-serif; font-size:clamp(70px,10vw,150px); line-height:.82; letter-spacing:0; }
h1 span { color:transparent; -webkit-text-stroke:2px white; }
.lead { margin:30px 0; font-size:17px; line-height:1.7; font-weight:600; }
.primary-button { display:inline-flex; align-items:center; gap:42px; padding:15px 18px; color:var(--ink); background:var(--yellow); font-size:12px; font-weight:800; }
.primary-button span { font-size:18px; }
.hero-note { position:absolute; right:4vw; bottom:38px; margin:0; writing-mode:vertical-rl; font-size:10px; letter-spacing:2px; }
.section-index { font-size:10px; letter-spacing:2px; font-weight:800; color:#777; }
.spirit { padding:120px 8vw; display:grid; grid-template-columns:1fr 2fr 1.3fr; gap:5vw; align-items:start; }
h2 { margin:0; font-family:"Oswald",sans-serif; font-size:clamp(42px,5.5vw,80px); line-height:1.02; text-transform:uppercase; letter-spacing:0; }
h2 em { color:var(--red); font-style:normal; }
.spirit-copy>p:last-child { max-width:650px; margin:34px 0 0; font-size:15px; line-height:1.8; color:#5e6667; }
.stats { border-left:1px solid var(--line); }
.stats div { padding:0 0 24px 28px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.stats strong { display:block; font-family:"Oswald"; font-size:42px; }
.stats span { font-size:11px; color:#747877; }
.generations { padding:100px 8vw; background:#14272c; color:white; }
.section-heading { display:grid; grid-template-columns:1fr 3.3fr; margin-bottom:65px; }
.generations .section-index { color:#9badaa; }
.generation-tabs { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #ffffff33; border-bottom:1px solid #ffffff33; }
.generation { position:relative; padding:30px 24px; min-height:180px; text-align:left; color:#899b9d; border:0; border-right:1px solid #ffffff22; background:transparent; cursor:pointer; transition:.25s; }
.generation:last-child { border-right:0; }
.generation .year,.generation .nickname { display:block; font-size:10px; letter-spacing:1px; }
.generation strong { display:block; margin:12px 0; font-family:"Oswald"; font-size:64px; line-height:1; }
.generation.active { color:white; background:var(--red); transform:translateY(-10px); }
.generation-detail { min-height:150px; padding:55px 0 0 25%; display:grid; grid-template-columns:1fr 2fr; gap:40px; }
.generation-detail>p { margin:0; color:var(--yellow); font-size:24px; }
.generation-detail h3 { margin:0 0 12px; font-family:"Oswald"; font-size:28px; text-transform:uppercase; }
.generation-detail div p { max-width:600px; color:#aebcbd; font-size:13px; line-height:1.7; }
.drive { padding:100px 8vw; display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:10vw; background:var(--yellow); transition:background .35s,color .35s; }
.drive.night { background:#263157; color:white; }
.drive.rain { background:#a8c6cb; }
.drive .section-index { margin-bottom:60px; }
.mood-switch { display:inline-flex; margin-top:40px; border:1px solid currentColor; }
.mood-switch button { padding:12px 18px; border:0; border-right:1px solid currentColor; color:inherit; background:transparent; font-size:11px; font-weight:800; cursor:pointer; }
.mood-switch button:last-child { border:0; }
.mood-switch button.active { color:white; background:var(--red); }
.route-ticket { position:relative; min-height:330px; padding:50px; color:var(--ink); background:var(--paper); box-shadow:16px 16px 0 #172a2f; transform:rotate(2deg); }
.route-ticket:before { content:""; position:absolute; left:-8px; top:0; height:100%; border-left:14px dotted var(--yellow); }
.route-ticket>span { color:var(--red); font-size:22px; }
.route-ticket>p { margin:5px 0 32px; font-size:10px; letter-spacing:2px; text-transform:uppercase; }
.route-ticket strong { display:block; font-family:"Oswald"; font-size:34px; text-transform:uppercase; }
.route-line { display:flex; align-items:center; justify-content:space-between; margin:50px 0 22px; border-top:2px dashed #aaa; }
.route-line i { width:12px; height:12px; margin-top:-7px; border:3px solid var(--red); border-radius:50%; background:var(--paper); }
.route-ticket small { color:#727878; }
footer { min-height:150px; padding:45px 8vw; display:flex; align-items:center; justify-content:space-between; color:white; background:#101d21; }
footer p { color:#91a0a2; font-size:11px; }
footer>a { display:grid; place-items:center; width:42px; height:42px; border:1px solid #ffffff55; }
@media (max-width:800px) {
  .site-header { height:70px; padding:0 22px; }
  .menu-button { display:block; }
  nav { position:absolute; top:70px; left:0; right:0; padding:20px 24px; display:none; flex-direction:column; gap:8px; color:var(--ink); background:var(--paper); }
  nav.open { display:flex; }
  .hero { min-height:680px; height:90svh; }
  .hero>img { object-position:60% center; }
  .hero-shade { background:linear-gradient(90deg,rgba(8,25,34,.78),rgba(8,25,34,.12)),linear-gradient(0deg,rgba(8,25,34,.5),transparent 55%); }
  .hero-copy { left:24px; right:24px; top:53%; }
  h1 { font-size:clamp(56px,19vw,86px); }
  .lead { font-size:14px; }
  .spirit { padding:80px 24px; grid-template-columns:1fr; }
  .stats { display:grid; grid-template-columns:repeat(3,1fr); border-left:0; border-top:1px solid var(--line); }
  .stats div { padding:20px 5px 0; border:0; }
  .stats strong { font-size:30px; }
  .generations { padding:75px 24px; }
  .section-heading { grid-template-columns:1fr; gap:35px; }
  .generation-tabs { grid-template-columns:repeat(2,1fr); }
  .generation { min-height:145px; padding:22px 16px; border-bottom:1px solid #ffffff22; }
  .generation strong { font-size:50px; }
  .generation-detail { padding-left:0; grid-template-columns:1fr; gap:16px; }
  .drive { padding:75px 24px 90px; grid-template-columns:1fr; }
  .route-ticket { min-height:290px; padding:36px 30px; }
  footer { padding:38px 24px; }
  footer p { display:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }