@font-face{font-family:'Burbank Big';src:url('/fonts/burbank-big.woff2') format('woff2');font-weight:700;font-display:swap}
  @font-face{font-family:'Burbank Small';src:url('/fonts/burbank-small.woff2') format('woff2');font-weight:400;font-display:swap}
  :root{
    --cp-blue:#1f9fe0; --cp-blue-dark:#1577b8; --cp-blue-deep:#0e5fa8; --outline:#0a3c66;
    --navy:#05112b; --ink:#0a2a43; --gold:#ffd23f; --gold-dark:#f5a800;
    --card:#ffffff; --soft:#eaf6ff; --nav-h:84px; --hero-gap:clamp(90px,15vh,172px);
    --font-display:'Burbank Big','Arial Rounded MT Bold','Segoe UI',sans-serif;
    --font-body:'Burbank Small','Segoe UI',Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--font-body);color:var(--ink);background:#dff1fc;overflow-x:hidden}
  a{text-decoration:none;color:inherit}
  nav.links a,.dd-toggle,.cpl-btn,.btn,.section-title,.band h2,.card h3,.news-item h4,.news-item .date,.ribbon{font-family:var(--font-display)}

  /* ---------- clean flat CP buttons ---------- */
  .cpl-btn{display:inline-flex;align-items:center;justify-content:center;letter-spacing:.4px;font-weight:800;
    color:#fff;border:none;border-radius:12px;cursor:pointer;transition:transform .12s ease,background .15s ease;box-shadow:0 2px 7px rgba(8,45,90,.3)}
  .cpl-btn:hover{transform:translateY(-1px)}
  .cpl-btn:active{transform:translateY(1px)}
  .cpl-blue{background:#1f8fe0}
  .cpl-blue:hover{background:#1577b8}
  .cpl-gold{background:#f5a800;color:#3a2700}
  .cpl-gold:hover{background:#e09600}

  /* ---------- nav: transparent CP-blue, one centered cluster ---------- */
  /* Solid CP-blue nav bar (CPJourney's exact gradient) — a distinct band above the hero, crisp bottom edge. */
  header.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:60;display:flex;align-items:center;justify-content:center;gap:18px;padding:0 22px;
    background:linear-gradient(180deg,#185FAA 0%,#13549C 55%,#1960AB 100%);border-bottom:2px solid #0c4380;box-shadow:0 3px 9px rgba(0,0,0,.22)}
  .nav-left,.nav-right{flex:0 0 auto}
  .nav-create{font-size:16px;padding:12px 22px}
  .nav-play{font-size:20px;padding:12px 28px}
  nav.links{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:9px}
  nav.links a,.dd-toggle{color:#fff;font-weight:800;font-size:17.5px;padding:10px 17px;border-radius:10px;transition:.15s;background:none;border:none;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,.5)}
  nav.links a:hover,.dd-toggle:hover{background:rgba(255,255,255,.22)}
  .dd{position:relative}
  .dd-toggle::after{content:'▾';margin-left:6px;font-size:12px;opacity:.9}
  .dd-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:184px;background:#fff;border-radius:14px;padding:8px;
    box-shadow:0 14px 34px rgba(10,60,102,.3);border:2px solid #d6ecfa;opacity:0;visibility:hidden;transition:.16s;z-index:70}
  .dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd-menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  nav.links .dd-menu a{display:block;color:var(--cp-blue-deep);font-family:var(--font-display);font-weight:800;font-size:15.5px;padding:10px 13px;border-radius:9px;text-shadow:none}
  nav.links .dd-menu a:hover{background:var(--soft);color:var(--cp-blue-deep)}
  .menu-toggle{display:none;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,.5)}
  /* ribbon tab under the centre links */
  .ribbon{position:fixed;top:var(--nav-h);left:50%;transform:translateX(-50%);z-index:58;display:inline-block;
    background:linear-gradient(180deg,#0e5fa8,#0a4378);color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.3px;
    padding:6px 30px 9px;border-radius:0 0 16px 16px;border:2px solid rgba(255,255,255,.18);border-top:none;
    box-shadow:0 5px 12px rgba(0,0,0,.32);text-shadow:0 1px 2px rgba(0,0,0,.45);white-space:nowrap;max-width:80vw;overflow:hidden;text-overflow:ellipsis}
  .ribbon:hover{color:var(--gold)}

  /* ---------- hero: ORIGINAL CP billboard art below the nav ---------- */
  /* hero base = the billboard's exact sky colour, so the strip above the art (and any letterbox)
     is one continuous sky with no seam where the art begins. */
  .hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:#6dadec}
  /* a band of matching sky sits between the nav and the art so the logo isn't crammed under the bar */
  .hero-art{position:absolute;top:calc(var(--nav-h) + var(--hero-gap));left:0;width:100%;height:calc(100% - var(--nav-h) - var(--hero-gap));object-fit:cover;object-position:center top;display:block}
  .scrim{position:absolute;inset:0;background:linear-gradient(transparent 52%,rgba(3,20,45,.7));z-index:2;pointer-events:none}
  .snow{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
  .flake{position:absolute;top:-6%;border-radius:50%;background:#fff;opacity:.85;animation:fall linear infinite}
  @keyframes fall{to{transform:translateY(112vh) translateX(var(--drift,0))}}
  .hero-cta{position:absolute;left:0;right:0;bottom:7vh;z-index:4;text-align:center;padding:0 16px}
  .hero-cta .tag{color:#fff;font-family:var(--font-display);font-size:clamp(22px,3.4vw,40px);text-shadow:0 3px 8px rgba(0,0,0,.6);margin-bottom:20px}
  .hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
  .hero-buttons .cpl-btn{font-size:22px;padding:16px 42px}
  @media (prefers-reduced-motion: reduce){.flake{animation:none}}
  @media (max-width:760px){ .hero-art{object-fit:contain;object-position:center top} }

  /* ---------- sections ---------- */
  section{padding:74px 22px}
  .wrap{max-width:1120px;margin:0 auto}
  .section-title{text-align:center;font-size:clamp(28px,3.6vw,40px);color:var(--cp-blue-deep);margin-bottom:8px;font-weight:800}
  .section-sub{text-align:center;color:#4a6b82;margin-bottom:42px;font-size:17px}
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px}
  .card{background:linear-gradient(180deg,#2270B5,#0B52A9);border-radius:22px;padding:30px 22px;text-align:center;scroll-margin-top:90px;color:#fff;
    box-shadow:0 10px 24px rgba(8,45,90,.3);border:2px solid rgba(255,255,255,.18);transition:transform .15s,box-shadow .15s}
  .card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(8,45,90,.4)}
  .card .thumb{width:100%;height:auto;aspect-ratio:512/400;object-fit:cover;object-position:center;border-radius:14px;display:block;margin:0 auto 16px;background:rgba(255,255,255,.16);box-shadow:0 4px 12px rgba(8,45,90,.28)}
  .card h3{color:#fff;font-size:21px;margin-bottom:8px;text-shadow:0 1px 2px rgba(0,0,0,.25)}
  .card p{color:#d6e9fb;font-size:15px;line-height:1.5}
  .band{background:linear-gradient(135deg,#5865F2,#404eed);color:#fff;border-radius:26px;padding:48px 30px;text-align:center;box-shadow:0 12px 30px rgba(64,78,237,.3)}
  .band h2{font-size:31px;margin-bottom:10px}.band p{opacity:.92;margin-bottom:24px;font-size:17px}
  .btn-discord{display:inline-block;background:linear-gradient(180deg,#ffe486,#f0a000);color:#5a3b00;padding:15px 36px;font-size:19px;border-radius:999px;font-family:var(--font-display);box-shadow:0 5px 0 #b9760a,inset 0 1px 0 rgba(255,255,255,.6)}
  .btn-discord:hover{transform:translateY(-2px)}
  .news-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
  .news-item{background:#fff;border-radius:16px;padding:20px 24px;border-left:6px solid var(--cp-blue);box-shadow:0 6px 16px rgba(13,95,168,.1)}
  .news-item .date{color:var(--cp-blue);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
  .news-item h4{margin:4px 0 6px;color:var(--ink);font-size:18px}.news-item p{color:#54707f;font-size:15px}
  footer{background:var(--navy);color:#cfe3f2;padding:46px 22px 30px;text-align:center}
  footer .flinks{display:flex;gap:8px 18px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
  footer .flinks a{color:#fff;font-weight:700}footer .flinks a:hover{color:var(--gold)}
  .disclaimer{max-width:760px;margin:0 auto;font-size:13px;color:#8fb0c8;line-height:1.6}

  .news-page{padding-top:calc(var(--nav-h) + 48px);min-height:70vh}
  .news-posts{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
  .news-post{background:#fff;border-radius:16px;padding:28px 32px;border-left:6px solid var(--cp-blue);box-shadow:0 6px 16px rgba(13,95,168,.1)}
  .news-post .date{color:var(--cp-blue);font-family:var(--font-display);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px}
  .news-post h2{font-family:var(--font-display);color:var(--ink);font-size:22px;margin-bottom:12px}
  .news-post p{color:#54707f;font-size:15px;line-height:1.6;margin-bottom:8px}
  .news-post p:last-child{margin-bottom:0}
  .news-more{text-align:center;margin-top:24px}
  .news-more a{color:var(--cp-blue);font-family:var(--font-display);font-weight:800;font-size:15px}
  .news-more a:hover{text-decoration:underline}

  @media (max-width:860px){
    nav.links{position:fixed;top:var(--nav-h);right:0;left:0;flex-direction:column;align-items:stretch;background:var(--cp-blue-dark);padding:10px;gap:4px;display:none;box-shadow:0 8px 16px rgba(0,0,0,.3);z-index:59}
    nav.links.open{display:flex}
    .menu-toggle{display:block;order:3;margin-left:auto}
    .nav-right{margin-left:8px}
    .dd-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:rgba(255,255,255,.12);margin-top:4px}
    nav.links .dd-menu a{color:#fff}
    .nav-create{font-size:14px;padding:9px 14px}.nav-play{font-size:17px;padding:10px 18px}
    .ribbon{display:none}
  }

#news{background:#eaf6ff}