:root{
  --bg-deep:#040307;
  --maroon:#8c1d40;
  --maroon-2:#a33552;
  --gold:#ffc627;
  --gold-2:#ffd84a;
  --muted:#b9c2c9;
  --card-bg:rgba(15,23,42,0.92);
  --card-border:rgba(148,163,184,0.28);
  --radius:14px;
  --max-width:1120px;
}

/* reset/base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#f9fafb;background:#020617;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

/* subtle textured background */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
  radial-gradient(900px 480px at 8% 8%, rgba(163,37,63,0.16), transparent 50%),
  radial-gradient(900px 480px at 92% 90%, rgba(56,189,248,0.12), transparent 55%),
  linear-gradient(180deg,#020617 0%, #02040a 100%);background-attachment:fixed}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' /></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.18'/></svg>");
  mix-blend-mode:soft-light;opacity:0.6}

/* container */
.container{max-width:var(--max-width);margin:0 auto;padding:0 24px;width:100%}
main{padding-bottom:64px}
section{padding:56px 0}
h1,h2,h3{margin:0 0 16px}
a{color:inherit}

/* header */
.site-header{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(15,23,42,0.96),rgba(15,23,42,0.82));
  border-bottom:1px solid rgba(15,23,42,0.9)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{font-weight:700;font-size:0.98rem;line-height:1.2}
.brand-subline{display:block;font-weight:500;font-size:0.87rem;color:var(--muted);margin-top:2px}
.nav{display:flex;gap:18px;align-items:center;font-size:0.95rem;font-weight:600}
.nav a{ padding:6px 10px;border-radius:999px;color:var(--muted);transition:color .15s,background .15s,transform .15s }
.nav a:hover{color:#fff;background:rgba(15,23,42,0.9);transform:translateY(-1px)}
.nav .cta{background:linear-gradient(90deg,var(--maroon),var(--maroon-2));color:#fff;padding:7px 14px;border-radius:999px;box-shadow:0 10px 30px rgba(148,27,72,0.45);border:1px solid rgba(15,23,42,0.9)}

/* hero */
.hero{padding-top:80px}
.hero h1{font-weight:800;letter-spacing:-0.03em;font-size:clamp(2.2rem,3.2vw,3.0rem);line-height:1.02;margin-bottom:18px;max-width:40ch}
.hero .lead{font-size:1.02rem;color:var(--muted);max-width:70ch}

/* cards and buttons */
.card{margin-top:24px;padding:24px;border-radius:var(--radius);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:0 14px 40px rgba(15,23,42,0.8)}
.note{font-size:0.98rem;color:var(--muted)}
.big-button{display:inline-flex;align-items:center;justify-content:center;margin-top:14px;padding:12px 26px;border-radius:999px;font-weight:800;font-size:1rem;background:linear-gradient(90deg,var(--gold),var(--gold-2));color:#111827;border:1px solid rgba(0,0,0,0.08);box-shadow:0 14px 36px rgba(18,18,22,0.6), inset 0 -4px 8px rgba(0,0,0,0.06);text-decoration:none}
.big-button:hover{transform:translateY(-2px)}
.big-button:focus{outline:2px solid rgba(255,198,39,0.24);outline-offset:3px}

/* HERO CTA card - tight and left aligned under text */
.hero-cta{max-width:520px;margin-top:28px;margin-left:0;padding:22px}

/* sponsor */
.sponsor-row{margin-top:26px;text-align:center}
.sponsor{display:inline-block;padding:14px 18px;border-radius:999px;background:rgba(15,23,42,0.92);border:1px solid rgba(148,163,184,0.36);font-size:0.95rem;color:var(--muted);max-width:92%;white-space:normal}
.sponsor a{color:var(--gold);text-decoration:underline;text-underline-offset:4px;font-weight:700}

/* SCHEDULE
   Each .schedule-row is a single logical row: left = title+desc, right = time.
   This avoids duplicated/clashing time columns and keeps alignment stable. */
.schedule-card{margin-top:32px}
.schedule-title{font-size:1.35rem;margin-bottom:18px}
.schedule-grid{display:flex;flex-direction:column;gap:12px}
.schedule-row{
  display:grid;
  grid-template-columns:1fr 160px; /* left content, right time */
  column-gap:28px;
  align-items:start;
  padding:12px 0;
  border-top:1px solid rgba(148,163,184,0.12);
}
.schedule-row:first-child{border-top:none}
.schedule-main{color:#e6eef5;font-size:0.96rem;line-height:1.5}
.schedule-main strong{display:block;margin-bottom:6px;font-weight:800;color:#f8fafc}
.schedule-time{color:var(--muted);font-weight:700;text-align:right;white-space:nowrap;justify-self:end}

/* content sections */
#logistics .card,#register .card,#contact .card{margin-top:24px}
#logistics h2,#register h2,#contact h2{margin-bottom:12px;font-size:1.3rem}
ul{padding-left:20px;margin:8px 0 0}
li{margin-bottom:6px}
#logistics a,#register a,#contact a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* footer */
.site-footer{padding:32px 0 40px;border-top:1px solid rgba(15,23,42,0.9);background:rgba(15,23,42,0.96);font-size:0.9rem;color:var(--muted)}
.site-footer .container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}

/* responsive */
@media (max-width:900px){
  .container{padding:0 18px}
  .schedule-row{grid-template-columns:1fr 140px}
}
@media (max-width:700px){
  .nav{display:none;flex-direction:column;align-items:flex-start;margin-top:8px}
  #nav-toggle:checked ~ .nav{display:flex}
  .hero{padding-top:64px}
  .hero h1{max-width:unset}
  .hero-cta{margin-left:auto;margin-right:auto}
  .schedule-row{grid-template-columns:1fr;row-gap:6px}
  .schedule-time{justify-self:start;text-align:left}
}
@media (max-width:480px){
  .hero h1{font-size:1.9rem}
}

/* ------------------ URGENT PATCH: CTA shrink + stable schedule rows ------------------ */

/* 1) Make the hero CTA card shrink-to-content on wide screens (tight card under intro) */
.hero .hero-cta,
.hero-cta.card,
.card.hero-cta {
  display: inline-block !important;   /* shrink to content */
  width: auto !important;
  max-width: 560px !important;        /* sensible upper bound; adjust if you want tighter */
  padding: 20px 22px !important;
  box-shadow: 0 12px 36px rgba(7,10,18,0.6) !important;
}

/* If there is a generic rule forcing .card width:100%, make sure hero-cta opts out */
.hero .card { width: auto; }

/* 2) Replace schedule grid with a stable, single-row flex layout.
   Each .schedule-row is one logical row: left = content, right = time pinned */
.schedule-row {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 24px;
  row-gap: 8px;
  padding: 12px 0;
  border-top: 1px solid rgba(148,163,184,0.10);
  flex-wrap: nowrap;              /* important: prevent the row from splitting into multiple "rows" */
}

/* left column: allow content to shrink gracefully when needed */
.schedule-main {
  flex: 1 1 60%;
  min-width: 0;                   /* allow text to truncate/wrap without forcing layout break */
  color: #e6eef5;
  line-height: 1.45;
}

/* right column: fixed width to keep times aligned */
.schedule-time {
  flex: 0 0 160px;                /* fixed box for times so they align on the right */
  text-align: right;
  white-space: nowrap;
  color: var(--muted);
  font-weight: 700;
  margin-left: 8px;
}

/* Visual tidy: avoid the weird duplicated time artifacts on very wide screens */
.schedule-row + .schedule-row { /* harmless, but keeps rhythm */ }

/* 3) Responsive fallback: stack rows on narrow screens */
@media (max-width: 700px) {
  .hero .hero-cta,
  .hero-cta.card,
  .card.hero-cta {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .schedule-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .schedule-time {
    text-align: left;
    flex: none;
    white-space: normal;
    margin-left: 0;
    color: var(--muted);
    margin-top: 4px;
  }
}

/* 4) Defensive: ensure no earlier rule accidentally floats schedule time into a second column */
.schedule-grid,
.container.card .schedule-grid {
  width: 100%;
}

#nav-toggle {
  display: none !important;
}

/* -------- Center hero content above sponsor panel -------- */

.hero {
  text-align: center;
}

.hero h1,
.hero .lead {
  margin-left: auto;
  margin-right: auto;
}

/* Center the CTA card itself */
.hero-cta {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left; /* keep text inside readable */
}

/* Center the button inside the CTA */
.hero-cta .big-button {
  margin-left: 0;
}

/* Ensure sponsor panel remains centered (already is, but be explicit) */
.sponsor-row {
  text-align: center;
}

/* ================== URGENT: CTA readability + sizing fix ================== */

/* 1) Make the CTA a true inline-flex button (no full-width blob) */
.big-button,
.card a.big-button,
.big-button > * {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 140px !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

/* 2) Restore high-contrast, readable label and remove blurring/opacity */
.big-button,
.card a.big-button {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 100%) !important;
  color: #111827 !important;               /* dark text for best contrast */
  font-weight: 800 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 12px 36px rgba(11,19,32,0.7), inset 0 -4px 8px rgba(0,0,0,0.06) !important;
  z-index: 6 !important;
}

/* 3) Defensive: if any earlier rule set anchor to display:block or width:100% */
.card a.big-button,
.big-button {
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
}

/* 4) Hover / focus state (clear and visible) */
.big-button:hover,
.card a.big-button:hover,
.big-button:focus,
.card a.big-button:focus {
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(11,19,32,0.75), inset 0 -4px 8px rgba(0,0,0,0.06) !important;
  outline: none;
}

/* 5) Ensure link color elsewhere in .card doesn't force the button label to inherit muted color */
.card a:not(.big-button) { color: var(--gold); }
.card a.big-button, .card a.big-button:visited { color: #111827 !important; }

/* 6) Small-screen fallback: keep nice sizing */
@media (max-width:700px) {
  .big-button,
  .card a.big-button {
    width: auto !important;
    min-width: 120px !important;
    padding: 10px 20px !important;
    font-size: 0.98rem !important;
  }
}