:root{--ink:#07182d;--paper:#f5f1e8;--red:#ed273c;--yellow:#f8c725;--blue:#2454b8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Outfit,sans-serif}.noise{position:fixed;inset:0;z-index:20;opacity:.04;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.nav{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 5.5vw;position:absolute;z-index:2;width:100%;color:#fff}.brand{font-family:'Barlow Condensed';font-size:28px;line-height:.7;text-decoration:none;color:inherit;letter-spacing:-1px}.brand span{font-weight:900}.brand b{font-size:19px;color:var(--yellow);vertical-align:top}.nav nav{display:flex;gap:28px}.nav a{color:inherit;text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.08em}.nav-cta{border:1px solid #ffffff80;padding:10px 14px}.nav-cta span{color:var(--yellow);font-size:16px}.hero{background:var(--ink);color:#fff;min-height:730px;position:relative;overflow:hidden;display:grid;grid-template-columns:48% 52%;padding:145px 5.5vw 45px}.hero:before{content:'';position:absolute;width:60vw;height:60vw;border:1px solid #ffffff16;border-radius:50%;left:-22vw;top:8vw}.hero-copy{position:relative;z-index:1}.eyebrow,.section-label{font:11px 'DM Mono';letter-spacing:.1em}.eyebrow i{display:inline-block;width:25px;height:2px;background:var(--yellow);vertical-align:middle;margin-right:9px}.hero h1,h2,h3{font-family:'Barlow Condensed';margin:18px 0 0;font-weight:800;line-height:.8;text-transform:uppercase}.hero h1{font-size:clamp(80px,12vw,180px);letter-spacing:-.06em}.hero h1 em,h2 em{font-style:normal;color:var(--yellow)}.hero h1 span{font-family:'DM Mono';font-size:.4em;color:var(--red);vertical-align:top;margin-left:7px}.intro{max-width:360px;font-size:16px;line-height:1.5;margin-top:36px;color:#d7dfed}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:30px}.button{display:inline-flex;align-items:center;gap:25px;background:var(--red);color:#fff;padding:15px 18px;text-decoration:none;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.07em}.button span{font-size:19px}.text-link{font-size:11px;font-weight:bold;letter-spacing:.08em}.text-link b{color:var(--yellow);font-size:17px;margin-left:6px}.hero-photo-wrap{position:relative;height:540px;margin-top:-55px}.hero-photo{height:100%;width:77%;margin-left:auto;background:linear-gradient(0deg,#07182d22,#07182d00),url('https://commons.wikimedia.org/wiki/Special:FilePath/Lamine%20Yamal%20in%202025.jpg?width=1200') center top/cover no-repeat;filter:saturate(1.1)}.hero-number{position:absolute;font:900 310px/.8 'Barlow Condensed';color:#ffffff0e;right:-30px;bottom:-30px;z-index:0}.photo-caption{position:absolute;bottom:15px;left:10%;font:10px 'DM Mono';letter-spacing:.08em}.photo-caption span{color:var(--yellow)}.hero-bottom{position:absolute;bottom:27px;left:5.5vw;right:5.5vw;display:flex;align-items:center;gap:12px;font:9px 'DM Mono';letter-spacing:.08em;color:#a8b4c9}.hero-bottom div{height:1px;background:#ffffff40;flex:1}.ticker{overflow:hidden;background:var(--yellow);font:800 26px/1 'Barlow Condensed';white-space:nowrap;padding:12px 0}.ticker div{display:inline-block;animation:slide 25s linear infinite}.ticker b{color:var(--red);padding:0 22px}@keyframes slide{to{transform:translateX(-50%)}}.section{padding:120px 9vw}.section-label{color:#526078}.story-grid{display:grid;grid-template-columns:1fr 350px;gap:10vw;margin-top:48px}h2{font-size:clamp(55px,8vw,110px);letter-spacing:-.05em}.large-copy{max-width:525px;font-size:19px;line-height:1.5;margin-top:40px}.profile-card{background:#e8e2d5;padding:20px}.profile-top{display:flex;justify-content:space-between;border-bottom:1px solid #aeb3b0;padding-bottom:35px;font:10px 'DM Mono';letter-spacing:.12em}.profile-top b{font:900 52px/.7 'Barlow Condensed';color:var(--red)}dl{margin:25px 0 0}dl div{border-bottom:1px solid #c6c1b6;padding:12px 0}dt{font:9px 'DM Mono';color:#657083;margin-bottom:5px}dd{margin:0;font-weight:600;font-size:14px}.milestones{border-top:1px solid #b6b3ac;display:grid;grid-template-columns:repeat(3,1fr);margin-top:100px}.milestones div{display:flex;gap:15px;padding:25px 20px 0;border-right:1px solid #b6b3ac}.milestones div:first-child{padding-left:0}.milestones b{font:800 62px/.7 'Barlow Condensed';color:var(--red)}.milestones span{font-size:12px;line-height:1.35}.moments{background:var(--blue);color:white}.moments .section-label{color:#b8c8ed}.moments-heading{display:flex;justify-content:space-between;align-items:end;margin-top:45px}.moments-heading p{width:270px;color:#d3ddf6}.moment-list{margin-top:75px}.moment-list article{display:grid;grid-template-columns:55px 1fr 140px;gap:20px;padding:25px 0;border-top:1px solid #ffffff55}.moment-list article:last-child{border-bottom:1px solid #ffffff55}.moment-list article>span{font:10px 'DM Mono';color:var(--yellow)}small{font:10px 'DM Mono';color:#a9bde9}.moment-list h3{font-size:42px;letter-spacing:-.02em;margin:7px 0}.moment-list p{margin:0;max-width:450px;color:#ced9f3;font-size:14px}.moment-list>b{font:10px 'DM Mono';color:var(--yellow);text-align:right}.gallery{background:#e9e3d6}.gallery-head{display:grid;grid-template-columns:1fr 1.3fr .7fr;align-items:end}.gallery-head p{font-size:13px;margin-bottom:7px}.gallery-grid{display:grid;grid-template-columns:1.35fr .8fr;grid-template-rows:350px 220px;gap:15px;margin-top:50px}.gallery-image{border:0;padding:0;position:relative;overflow:hidden;background:#10244a;cursor:zoom-in}.gallery-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.gallery-image:hover img{transform:scale(1.05)}.gallery-image span{position:absolute;bottom:13px;left:13px;color:#fff;font:10px 'DM Mono';letter-spacing:.09em;background:#07182dbb;padding:7px}.big{grid-row:span 2}.quote-card{background:var(--red);padding:24px;color:white;display:flex;flex-direction:column}.quote-card span{font:800 68px/.5 Georgia;color:var(--yellow)}.quote-card p{font:700 26px/1 'Barlow Condensed';text-transform:uppercase;margin:auto 0}.quote-card b{font:9px 'DM Mono';letter-spacing:.08em}.legacy{background:var(--ink);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:center}.legacy-visual{background:var(--yellow);height:470px;position:relative;overflow:hidden;color:var(--ink);padding:28px}.legacy-visual>span{font:900 350px/.7 'Barlow Condensed';position:absolute;bottom:-20px;left:25px;color:var(--red)}.legacy-visual p{position:absolute;z-index:1;bottom:24px;right:24px;font:800 22px/.8 'Barlow Condensed';text-align:right}.rings{position:absolute;border:1px solid #07182d55;width:600px;height:600px;border-radius:50%;top:-90px;left:-100px}.rings:after{content:'';position:absolute;border:1px solid #07182d55;inset:70px;border-radius:50%}.legacy-copy p{line-height:1.6;color:#cbd5e7;max-width:420px;margin:35px 0}.light{background:#fff;color:var(--ink)}.fanbase{background:var(--red);color:#fff;text-align:center;padding:110px 25px 45px}.fanbase .eyebrow i{background:var(--yellow)}.fanbase h2{font-size:clamp(65px,10vw,145px);margin:25px 0 45px}.fanbase h2 em{color:var(--yellow)}.join{display:inline-flex;gap:35px;color:var(--ink);background:var(--yellow);padding:18px 21px;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.08em}.join span{font-size:22px;line-height:.5}.fine-print{font:10px 'DM Mono';opacity:.7;margin-top:90px}footer{background:var(--ink);color:#fff;padding:28px 5.5vw;display:flex;align-items:center;justify-content:space-between}footer p,footer a:not(.brand){font:10px 'DM Mono';letter-spacing:.08em;color:#a9b7cf;text-decoration:none}dialog{border:0;background:#07182df5;color:#fff;padding:35px;max-width:min(850px,94vw);max-height:94vh}dialog::backdrop{background:#000b}dialog img{display:block;max-width:100%;max-height:78vh;object-fit:contain}dialog p{font:11px 'DM Mono';letter-spacing:.08em}.close{position:absolute;right:8px;top:3px;border:0;background:transparent;color:#fff;font-size:30px;cursor:pointer}@media(max-width:750px){.nav{padding:0 20px;height:63px}.nav nav{display:none}.nav-cta{font-size:9px}.hero{min-height:760px;display:block;padding:110px 25px 40px}.hero h1{font-size:96px}.hero-photo-wrap{position:absolute;right:0;bottom:50px;width:68%;height:350px;opacity:.72}.hero-photo{width:100%}.intro{font-size:14px}.hero-bottom{left:25px;right:25px}.section{padding:78px 25px}.story-grid,.legacy{grid-template-columns:1fr;gap:45px}.milestones{margin-top:55px;grid-template-columns:1fr}.milestones div{padding:20px 0;border-right:0;border-bottom:1px solid #b6b3ac}.moments-heading{display:block}.moments-heading p{width:auto;margin-top:25px}.moment-list{margin-top:45px}.moment-list article{grid-template-columns:35px 1fr}.moment-list article>b{display:none}.moment-list h3{font-size:31px}.gallery-head{display:block}.gallery-head h2{margin-top:28px}.gallery-grid{grid-template-columns:1fr;grid-template-rows:290px 290px 210px 250px}.big{grid-row:auto}.legacy-visual{height:330px}.legacy-visual>span{font-size:260px}.fanbase{padding-top:80px}footer{gap:14px;flex-wrap:wrap}.hero-actions{gap:15px}} body.dark{filter:invert(1) hue-rotate(180deg)}body.dark img{filter:invert(1) hue-rotate(180deg)} /* ==========================================
   MOBILE & TABLET RESPONSIVE STYLES
   ========================================== */

/* This triggers automatically for all screens smaller than 1024px */
@media screen and (max-width: 1024px) {
  
  /* 1. Reset layouts to stack vertically instead of horizontally */
  body, 
  header, 
  footer, 
  nav, 
  div, 
  section {
    display: flex;
    flex-direction: column !important;
    align-items: center;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* 2. Prevent content or boxes from squeezing/overflowing */
  main, 
  .container, 
  .wrapper, 
  .card, 
  section {
    width: 90% !important; /* Leaves a nice 5% breathing room on both sides */
    max-width: 100% !important;
    margin: 10px auto !important;
    padding: 15px !important;
    float: none !important; /* Disables old float layouts */
  }

  /* 3. Ensure images (like Lamine Yamal photos) scale down and don't spill off screen */
  img, 
  video {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }

  /* 4. Downsize large desktop typography so headers fit neatly */
  h1 {
    font-size: 2rem !important;
    line-height: 1.2;
    text-align: center;
  }

  h2 {
    font-size: 1.6rem !important;
    text-align: center;
  }

  p, li, a {
    font-size: 1rem !important;
    line-height: 1.5;
  }

  /* 5. Fix navigation menus so links pile up nicely on mobile */
  nav a, 
  header a {
    width: 100%;
    text-align: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle divider */
  }
}