/* Kolo Compete.
 *
 * Tokens copied from index.html rather than imported, because that page keeps
 * its CSS inline and extracting it would mean rewriting the whole landing page
 * to ship four new ones. If the brand colours change, they change in both.
 */
:root{
  --navy900:#05070F; --navy800:#0B0F1E; --navy700:#141A2E; --navy600:#232B45;
  --red:#C8102E; --red-lite:#E4344B; --gold:#E8B93A; --gold-lite:#F2CF6E;
  --white:#F5F6FA; --grey:#C9CDDA; --muted:#7C8299;
  --ok:#3DBE7B; --maxw:1100px; --r:20px;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Sticky header, so anchor jumps need its height reserved. text-size-adjust
   stops iOS inflating body copy in landscape. */
html{scroll-behavior:smooth;scroll-padding-top:80px;
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--body);color:var(--white);background:var(--navy900);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-wrap:break-word;
}
h1,h2,h3,.display{font-family:var(--display);letter-spacing:-.02em;line-height:1.08;font-weight:800}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,20px)}
.eyebrow{font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lite);font-weight:700}
.grad-text{background:linear-gradient(100deg,var(--gold-lite),var(--red-lite) 60%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}
.grey{color:var(--grey)}

/* Header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(5,7,15,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.hdr .wrap{display:flex;align-items:center;gap:1rem;height:64px}
.hdr .brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:800;font-size:1.05rem}
.hdr .brand img{width:30px;height:30px;border-radius:8px}
.hdr nav{margin-left:auto;display:flex;gap:1.2rem;align-items:center;font-size:.92rem;font-weight:600}
.hdr nav a{color:var(--grey)}
.hdr nav a:hover,.hdr nav a[aria-current="page"]{color:var(--white)}
@media(max-width:720px){.hdr nav a.hide-sm{display:none}}
/* Even with the optional links gone, brand + links + the entry button ran
   past the right edge of a small phone, and this stylesheet has no
   overflow-x guard, so the page really did scroll sideways. */
@media(max-width:560px){
  .hdr .wrap{gap:.6rem}
  .hdr nav{gap:.7rem;font-size:.85rem}
  .hdr .brand{font-size:.95rem}
  .hdr .brand img{width:26px;height:26px}
  .hdr nav .btn{padding:.55rem .85rem;font-size:.85rem}
}
@media(max-width:400px){
  /* Nothing left to shave: wrap the row rather than push the button off. */
  .hdr .wrap{flex-wrap:wrap;height:auto;padding-block:.55rem;row-gap:.45rem}
  .hdr nav{margin-left:0;width:100%;justify-content:space-between}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.35rem;border-radius:999px;font-weight:700;font-size:.95rem;cursor:pointer;border:1px solid transparent;text-decoration:none;font-family:var(--body);transition:transform .18s,background .18s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 12px 30px -12px rgba(200,16,46,.7)}
.btn-primary:hover{background:var(--red-lite)}
.btn-gold{background:var(--gold);color:var(--navy900)}
.btn-gold:hover{background:var(--gold-lite)}
.btn-ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* Hero */
.hero{padding:72px 0 44px;text-align:center;background:
  radial-gradient(900px 380px at 50% -10%,rgba(200,16,46,.28),transparent 70%),
  radial-gradient(700px 320px at 85% 10%,rgba(232,185,58,.14),transparent 70%)}
.hero h1{font-size:clamp(2.1rem,6vw,3.6rem);margin:.6rem 0 .8rem}
.hero p{max-width:640px;margin:0 auto;color:var(--grey);font-size:1.05rem}
.hero .cta{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}

section{padding:clamp(36px,6vw,52px) 0}
h2.sec{font-size:clamp(1.5rem,3.6vw,2.1rem);margin-bottom:.5rem}
.sec-lead{color:var(--grey);max-width:680px;margin-bottom:1.8rem}

/* Show cards */
.shows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(288px,100%),1fr));gap:1.1rem}
.show{background:linear-gradient(180deg,var(--navy800),var(--navy900));border:1px solid rgba(255,255,255,.09);border-radius:var(--r);padding:1.4rem;display:flex;flex-direction:column}
.show .tag{display:inline-block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--navy900);background:var(--gold);padding:.2rem .55rem;border-radius:999px;align-self:flex-start}
/* The show badge. Height-capped rather than width-capped so four logos of
   different proportions line up on the same baseline instead of one square one
   towering over three wide ones. */
.show .logo{height:96px;width:auto;margin:.9rem 0 .2rem;object-fit:contain;align-self:flex-start}
@media(max-width:520px){.show .logo{height:76px}}
.show h3{font-size:1.35rem;margin:.7rem 0 .15rem}
.show .tagline{color:var(--gold-lite);font-weight:600;font-size:.93rem;margin-bottom:.6rem}
.show p{color:var(--grey);font-size:.95rem}
.show ul{margin:.8rem 0 1.1rem 1.05rem;color:var(--grey);font-size:.92rem}
.show li{margin:.2rem 0}
.show .foot{margin-top:auto;display:flex;gap:.55rem;flex-wrap:wrap}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:1rem}
.step{background:var(--navy800);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.2rem}
.step .n{width:30px;height:30px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-weight:800;font-size:.9rem;margin-bottom:.6rem}
.step h4{font-family:var(--display);font-size:1.05rem;margin-bottom:.25rem}
.step p{color:var(--grey);font-size:.9rem}

/* Notice */
.notice{border:1px solid rgba(232,185,58,.4);background:rgba(232,185,58,.08);border-radius:14px;padding:1rem 1.15rem;color:var(--grey);font-size:.93rem}
.notice strong{color:var(--white)}

/* Forms */
.form{background:var(--navy800);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);padding:clamp(1rem,3.5vw,1.5rem)}
.field{margin-bottom:1.05rem}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.35rem}
.field .hint{display:block;font-weight:400;color:var(--muted);font-size:.83rem;margin-top:.15rem}
.field input,.field select,.field textarea{
  width:100%;padding:.72rem .85rem;border-radius:12px;background:var(--navy900);
  border:1px solid rgba(255,255,255,.16);color:var(--white);font-family:var(--body);font-size:.97rem;
}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.req{color:var(--red-lite)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){.row{grid-template-columns:1fr}}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.93rem;color:var(--grey)}
.check input{width:18px;height:18px;margin-top:.2rem;flex:none}
/* The honeypot. Hidden from people, irresistible to form-filling bots.
   Kept out of the tab order and hidden from screen readers so it is invisible
   to somebody using a keyboard or a reader, not just to somebody looking. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{border-radius:12px;padding:.9rem 1rem;font-size:.94rem;margin-bottom:1rem;display:none}
.msg.err{display:block;background:rgba(200,16,46,.14);border:1px solid rgba(228,52,75,.5)}
.msg.ok{display:block;background:rgba(61,190,123,.13);border:1px solid rgba(61,190,123,.5)}

/* Rules + winners */
.rulebox{background:var(--navy800);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.3rem;margin-bottom:1rem}
.rulebox h3{font-size:1.15rem;margin-bottom:.5rem}
.rulebox ul{margin-left:1.1rem;color:var(--grey);font-size:.95rem}
.rulebox li{margin:.3rem 0}
.winner{display:flex;gap:1rem;align-items:flex-start;background:var(--navy800);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.1rem;margin-bottom:.8rem}
.winner .medal{font-size:1.6rem;line-height:1}
.winner h4{font-family:var(--display);font-size:1.1rem}
.winner .meta{color:var(--muted);font-size:.86rem}
.empty{text-align:center;color:var(--muted);padding:2.5rem 1rem;border:1px dashed rgba(255,255,255,.16);border-radius:16px}

footer{border-top:1px solid rgba(255,255,255,.08);padding:32px 0;color:var(--muted);font-size:.9rem}
footer a{color:var(--grey)}
.f-links{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.5rem}