@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root { --navy:#0c243c; --blue:#75b9e5; --sky:#d8edf7; --cream:#f5f2e9; --ink:#132333; --gold:#d5ad57; --line:#d3d9d8; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:"Plus Jakarta Sans",sans-serif; } .wrap { width:min(1160px,90vw); margin:auto; }
.hero { min-height:780px; height:100vh; max-height:980px; position:relative; overflow:hidden; color:white; background:var(--navy); } nav { position:relative; z-index:4; height:80px; display:flex; justify-content:space-between; align-items:center; padding:0 5vw; border-bottom:1px solid rgba(255,255,255,.25); font:500 .68rem "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; } nav a { color:white; text-decoration:none; } .brand { font-family:"Playfair Display",serif; font-size:1rem; letter-spacing:.02em; } .brand span { color:var(--gold); }
.hero-flag { position:absolute; inset:0; opacity:.95; display:grid; grid-template-rows:repeat(9,1fr); } .hero-flag i:nth-child(odd) { background:#fff; } .hero-flag i:nth-child(even) { background:#75b9e5; } .hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,29,49,.9) 0%,rgba(8,29,49,.46) 46%,rgba(8,29,49,.1)); } .hero::before { content:"☀"; z-index:1; position:absolute; right:10%; top:15%; color:#f6c85d; font-size:clamp(12rem,27vw,25rem); opacity:.88; line-height:1; }
.hero-content { position:relative; z-index:2; max-width:760px; padding:clamp(7rem,19vh,12rem) 5vw 0; } .kicker,.section-label { margin:0 0 1.3rem; color:#80663a; font:500 .68rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.11em; }.hero .kicker { color:#d7e9f4; } h1,h2,h3,p { margin-top:0; } h1 { font:700 clamp(4.6rem,10vw,10rem)/.81 "Playfair Display",Georgia,serif; letter-spacing:-.07em; margin-bottom:2.2rem; } h1 em { color:var(--gold); } .hero-copy { width:min(435px,90%); line-height:1.75; font-size:.96rem; } .button { display:inline-flex; gap:2.4rem; align-items:center; margin-top:1.2rem; padding-bottom:.8rem; color:white; border-bottom:1px solid var(--gold); text-decoration:none; font:500 .7rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }.button b { color:var(--gold); font-size:1rem; }.stars { position:absolute; z-index:3; bottom:3.2rem; left:5vw; color:var(--gold); font-size:1.4rem; letter-spacing:.35rem; }.hero-year { position:absolute; z-index:3; bottom:3.4rem; right:5vw; margin:0; font:.7rem "DM Mono",monospace; letter-spacing:.1em; }
.numbers { display:grid; grid-template-columns:repeat(4,1fr); max-width:1160px; width:90vw; margin:-1px auto 0; border:1px solid var(--line); border-top:0; background:var(--cream); } .numbers article { padding:2.2rem 2rem; border-right:1px solid var(--line); }.numbers article:last-child { border:0; }.numbers strong { display:block; color:var(--navy); font:700 clamp(2.9rem,5vw,4.6rem)/1 "Playfair Display",serif; letter-spacing:-.06em; }.numbers span { display:block; margin-top:.55rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; }
.story { padding:9rem 0; }.story-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:8vw; }.story h2,.history h2 { margin:0; color:var(--navy); font:700 clamp(3.1rem,5.5vw,5.4rem)/.88 "Playfair Display",serif; letter-spacing:-.06em; }.story p:not(.section-label) { line-height:1.8; font-size:.95rem; }.story p + p { margin-top:1.35rem; }
.titles { padding:7rem 0; background:var(--navy); color:white; }.light { color:#b9dcec; }.title-cards { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.32); }.title-card { min-height:425px; padding:2.2rem; position:relative; overflow:hidden; background:#143b5c; }.second-title { background:#366d98; }.card-year,.score { font:500 .66rem "DM Mono",monospace; letter-spacing:.1em; }.title-card h3 { position:relative; z-index:1; margin:3.6rem 0 1rem; font:700 clamp(3rem,5vw,5rem)/.85 "Playfair Display",serif; letter-spacing:-.07em; }.title-card p { position:relative; z-index:1; width:min(310px,90%); margin:0; line-height:1.7; font-size:.82rem; }.trophy { position:absolute; right:-.03em; bottom:-.3em; opacity:.16; color:var(--gold); font-size:20rem; line-height:1; }.score { margin-top:7.5rem; color:#d9edfa; }.score b { display:block; margin-top:.8rem; color:white; font-size:1.5rem; }
.history { padding:9rem 0; }.history-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:3.8rem; }.history-head > p { margin:0; color:#6f7677; font-size:.72rem; }.timeline { border-top:1px solid var(--line); }.event { display:grid; grid-template-columns:120px 1.5fr 90px 1.35fr; align-items:center; gap:1rem; min-height:82px; border-bottom:1px solid var(--line); }.event time { font:500 1rem "DM Mono",monospace; color:#63707b; }.event h3 { margin:0 0 .25rem; font:700 1.3rem "Playfair Display",serif; }.event p,.event small { margin:0; font-size:.74rem; color:#68727a; }.event > b { color:#7795a5; font:500 .82rem "DM Mono",monospace; }.event.champion { background:linear-gradient(90deg,rgba(213,173,87,.12),transparent); }.event.champion h3,.event.champion time,.event.champion > b { color:#9c752c; }
.legends { padding:2rem 0 9rem; }.record-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid var(--line); background:var(--line); }.record-grid article { min-height:275px; padding:2rem; background:var(--cream); }.record-grid span { display:block; color:#6d7472; font:500 .64rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.09em; }.record-grid h3 { margin:1.8rem 0 .35rem; color:var(--navy); font:700 2rem/1 "Playfair Display",serif; letter-spacing:-.05em; }.record-grid b { color:#a27c34; font:500 .72rem "DM Mono",monospace; }.record-grid p { margin:1.6rem 0 0; color:#526068; line-height:1.65; font-size:.78rem; }footer { display:flex; justify-content:space-between; padding:1.5rem 5vw; color:#c3d9e8; background:var(--navy); font:500 .62rem "DM Mono",monospace; letter-spacing:.1em; }
@media (max-width:760px) { .hero{min-height:680px}.numbers{grid-template-columns:repeat(2,1fr)}.numbers article:nth-child(2){border-right:0}.numbers article:nth-child(-n+2){border-bottom:1px solid var(--line)}.story-grid,.title-cards,.record-grid{grid-template-columns:1fr}.story{padding:6rem 0}.history{padding:6rem 0}.history-head{display:block}.history-head>p{margin-top:1.4rem}.event{grid-template-columns:64px 1fr 1fr}.event small{display:none}.title-card{min-height:360px}.hero::before{right:-10%;top:20%} footer{gap:1rem} }