@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&display=swap');

/* CodeFest SDG guide — scoped under .sdgx. Guide colour: "Sunrise Coral" */
.sdgx {
  --sx-coral: #ff7a5c;
  --sx-sun: #ffc24b;
  --sx-sea: #4cc3e0;
  --sx-ink: #0d0c10;
  --sx-card: #16141a;
  --sx-line: #2b2830;
  --sx-display: 'Bricolage Grotesque', var(--font);
  --c: var(--sx-coral);
  color: var(--text-primary);
}
.sdgx a:focus-visible, .sdgx button:focus-visible { outline: 3px solid var(--sx-sun); outline-offset: 3px; border-radius: 6px; }

.sdgx-kicker { font-family: var(--font-mono); font-size: .78rem; letter-spacing: 2px; text-transform: uppercase; color: var(--sx-coral); margin-bottom: 18px; }
.sdgx-title { font-family: var(--sx-display); font-weight: 800; font-size: clamp(2.3rem, 5.6vw, 4.3rem); line-height: 1.02; letter-spacing: -1.5px; margin-bottom: 22px; }
.sdgx-hl { color: var(--sx-ink); background: linear-gradient(100deg, var(--sx-coral), var(--sx-sun)); padding: 0 .18em; border-radius: 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sdgx-lede { color: #c9c4cf; font-size: 1.08rem; max-width: 560px; line-height: 1.7; }
.sdgx-h2 { font-family: var(--sx-display); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -.5px; margin-bottom: 18px; }
.sdgx-sub { color: var(--text-secondary); margin: -8px 0 32px; max-width: 560px; }
.sdgx-section { padding: 80px 0; }
.sdgx-section--alt { background: #121015; border-top: 1px solid var(--sx-line); border-bottom: 1px solid var(--sx-line); }

/* HERO */
.sdgx-hero { position: relative; padding: 150px 0 70px; overflow: hidden; background: radial-gradient(ellipse 60% 70% at 85% 30%, rgba(255,122,92,.13), transparent 70%), radial-gradient(ellipse 40% 50% at 10% 90%, rgba(76,195,224,.08), transparent 70%); }
.sdgx-hero-inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.sdgx-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.sdgx-wheel { position: relative; width: 100%; max-width: 440px; justify-self: center; aspect-ratio: 1; }
.sdgx-wheel-svg { width: 100%; height: 100%; animation: sdgxSpin 120s linear infinite; }
.sdgx-seg { opacity: 0; animation: sdgxPop .5s cubic-bezier(.3,1.4,.5,1) forwards; animation-delay: var(--d); transform-origin: 200px 200px; }
.sdgx-seg text { font-family: var(--font-mono); font-weight: 900; font-size: 15px; fill: rgba(13,12,16,.82); text-anchor: middle; }
.sdgx-seg.is-dim path { opacity: .18; }
.sdgx-wheel-core { position: absolute; inset: 31%; border-radius: 50%; background: var(--sx-ink); border: 1px solid var(--sx-line); display: grid; place-content: center; text-align: center; }
.sdgx-wheel-core strong { font-family: var(--sx-display); font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; }
.sdgx-wheel-core span { font-family: var(--font-mono); font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-secondary); }
@keyframes sdgxSpin { to { transform: rotate(360deg); } }
@keyframes sdgxPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

/* STEPS */
.sdgx-steps-wrap { border-top: 1px solid var(--sx-line); border-bottom: 1px solid var(--sx-line); background: #121015; }
.sdgx-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); }
.sdgx-steps li { padding: 34px 28px; border-left: 1px solid var(--sx-line); }
.sdgx-steps li:first-child { border-left: 0; padding-left: 0; }
.sdgx-step-n { font-family: var(--font-mono); color: var(--sx-sun); font-size: .85rem; }
.sdgx-steps h3 { font-family: var(--sx-display); font-size: 1.5rem; margin: 4px 0 6px; }
.sdgx-steps p { color: var(--text-secondary); font-size: .95rem; }

/* GOALS GRID */
.sdgx-goals { padding: 90px 0; }
.sdgx-goals-head { margin-bottom: 34px; }
.sdgx-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.sdgx-chip { font: 600 .9rem var(--font); color: #ddd8e2; background: transparent; border: 1.5px solid var(--sx-line); border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.sdgx-chip:hover { border-color: var(--sx-coral); }
.sdgx-chip.is-on { background: var(--sx-coral); border-color: var(--sx-coral); color: var(--sx-ink); }
.sdgx-count { font-family: var(--font-mono); font-size: .78rem; color: var(--text-muted); margin-top: 14px; }

.sdgx-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sdgx-card[hidden] { display: none; }
.sdgx-official-icon { flex: 0 0 120px; padding: 12px; display: flex; align-items: flex-start; }
.sdgx-official-icon img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.sdgx-official-hero { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; object-fit: contain; }
@media (max-width: 767px) {
  .sdgx-official-icon { flex-basis: 104px; padding: 8px; }
  .sdgx-official-hero { max-width: 240px; }
}
.sdgx-card:nth-child(5n+1) { grid-column: span 2; }
.sdgx-card-link { display: flex; height: 100%; background: var(--sx-card); border: 1px solid var(--sx-line); border-radius: 18px; overflow: hidden; color: inherit; transition: transform .25s ease, border-color .25s; }
.sdgx-card-link:hover { transform: translateY(-4px); border-color: var(--c); color: inherit; }
.sdgx-num { flex: 0 0 96px; display: grid; place-items: center; background-color: var(--c); color: var(--sx-ink); font-family: var(--sx-display); font-weight: 800; font-size: 2.9rem; letter-spacing: -2px; }
.sdgx-card:nth-child(5n+1) .sdgx-num { flex-basis: 150px; font-size: 4.6rem; }
.sdgx-card-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; }
.sdgx-card-goal { font-family: var(--font-mono); font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c); }
.sdgx-card-name { font-family: var(--sx-display); font-size: 1.22rem; line-height: 1.2; }
.sdgx-card-q { color: var(--text-secondary); font-size: .92rem; }
.sdgx-card-ideas { margin-top: auto; padding-top: 8px; font-size: .82rem; font-weight: 700; color: #e8e3ec; }

/* Number-art patterns (pure CSS, crisp at any size) */
.sdgx-pat-dots { background-image: radial-gradient(rgba(13,12,16,.18) 2px, transparent 2.5px); background-size: 12px 12px; }
.sdgx-pat-grain { background-image: repeating-linear-gradient(60deg, rgba(13,12,16,.13) 0 3px, transparent 3px 11px); }
.sdgx-pat-pulse { background-image: repeating-linear-gradient(0deg, transparent 0 18px, rgba(13,12,16,.14) 18px 20px); }
.sdgx-pat-grid { background-image: linear-gradient(rgba(13,12,16,.14) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(13,12,16,.14) 1.5px, transparent 1.5px); background-size: 16px 16px; }
.sdgx-pat-split { background-image: linear-gradient(135deg, transparent 50%, rgba(13,12,16,.14) 50%); }
.sdgx-pat-waves { background-image: radial-gradient(circle at 50% 120%, transparent 10px, rgba(13,12,16,.14) 11px, rgba(13,12,16,.14) 13px, transparent 14px); background-size: 24px 14px; }
.sdgx-pat-rays { background-image: repeating-conic-gradient(from 0deg at 50% 50%, rgba(13,12,16,.12) 0 10deg, transparent 10deg 30deg); }
.sdgx-pat-steps { background-image: linear-gradient(to top right, rgba(13,12,16,.15) 25%, transparent 25% 50%, rgba(13,12,16,.1) 50% 75%, transparent 75%); }
.sdgx-pat-bolts { background-image: repeating-linear-gradient(45deg, rgba(13,12,16,.12) 0 6px, transparent 6px 12px), repeating-linear-gradient(-45deg, rgba(13,12,16,.08) 0 6px, transparent 6px 12px); }
.sdgx-pat-equal { background-image: repeating-linear-gradient(0deg, transparent 0 10px, rgba(13,12,16,.15) 10px 14px, transparent 14px 24px); }
.sdgx-pat-blocks { background-image: linear-gradient(90deg, rgba(13,12,16,.15) 0 20%, transparent 20% 35%, rgba(13,12,16,.1) 35% 50%, transparent 50% 70%, rgba(13,12,16,.18) 70% 82%, transparent 82%); background-size: 100% 40%; background-repeat: no-repeat; background-position: bottom; }
.sdgx-pat-loop { background-image: radial-gradient(circle, transparent 30%, rgba(13,12,16,.14) 31% 37%, transparent 38%); background-size: 34px 34px; }
.sdgx-pat-swirl { background-image: repeating-radial-gradient(circle at 0 100%, transparent 0 9px, rgba(13,12,16,.13) 9px 12px); }
.sdgx-pat-bubbles { background-image: radial-gradient(circle at 25% 30%, rgba(255,255,255,.28) 4px, transparent 5px), radial-gradient(circle at 70% 65%, rgba(255,255,255,.22) 7px, transparent 8px), radial-gradient(circle at 40% 85%, rgba(255,255,255,.25) 3px, transparent 4px); background-size: 46px 46px; }
.sdgx-pat-leaves { background-image: radial-gradient(ellipse 8px 4px at 50% 50%, rgba(13,12,16,.16) 98%, transparent); background-size: 22px 16px; }
.sdgx-pat-shield { background-image: linear-gradient(180deg, rgba(255,255,255,.14) 0 50%, transparent 50%), repeating-linear-gradient(90deg, transparent 0 14px, rgba(13,12,16,.1) 14px 16px); }
.sdgx-pat-links { background-image: radial-gradient(circle at 0 50%, transparent 7px, rgba(13,12,16,.15) 8px 10px, transparent 11px), radial-gradient(circle at 100% 50%, transparent 7px, rgba(13,12,16,.15) 8px 10px, transparent 11px); background-size: 26px 22px; }

/* RULES + JOURNAL */
.sdgx-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.sdgx-rule-list { list-style: none; display: grid; gap: 14px; }
.sdgx-rule-list li { display: flex; gap: 16px; align-items: flex-start; color: #cfcad5; }
.sdgx-rule-list li > span { flex: 0 0 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: var(--sx-ink); font: 900 .9rem var(--font-mono); }
.sdgx-rule-list strong { color: #fff; }
.sdgx-journal { background: #f6eedf; color: #2a2230; border-radius: 16px; padding: 22px 24px; transform: rotate(1.2deg); box-shadow: 0 20px 50px rgba(0,0,0,.45); background-image: repeating-linear-gradient(transparent 0 27px, rgba(70,90,160,.18) 27px 28px); position: relative; }
.sdgx-journal::before { content: ''; position: absolute; top: -10px; left: 40%; width: 90px; height: 22px; background: rgba(255,194,75,.75); transform: rotate(-3deg); }
.sdgx-journal-tag { font: 700 .72rem var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: #b4452f; margin-bottom: 10px; }
.sdgx-journal pre { white-space: pre-wrap; font: 500 .9rem/28px var(--font-mono); margin: 0; }

/* CATEGORIES */
.sdgx-cats { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 16px; margin-bottom: 18px; }
.sdgx-cat { display: flex; flex-direction: column; gap: 6px; padding: 26px; border-radius: 18px; border: 1px solid var(--sx-line); background: var(--sx-card); color: var(--text-secondary); transition: transform .25s, border-color .25s; }
.sdgx-cat:hover { transform: translateY(-3px); color: var(--text-secondary); }
.sdgx-cat strong { font-family: var(--sx-display); font-size: 1.45rem; color: #fff; }
.sdgx-cat-age { font: 700 .72rem var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; }
.sdgx-cat-go { margin-top: 10px; font-weight: 700; color: #fff; }
.sdgx-cat--game .sdgx-cat-age { color: #facc15; } .sdgx-cat--game:hover { border-color: #facc15; }
.sdgx-cat--web .sdgx-cat-age { color: #f97316; } .sdgx-cat--web:hover { border-color: #f97316; }
.sdgx-cat--res .sdgx-cat-age { color: var(--sx-sea); } .sdgx-cat--res:hover { border-color: var(--sx-sea); }
.sdgx-closed { font-size: .9rem; color: var(--text-secondary); border-left: 3px solid var(--sx-sun); padding: 4px 0 4px 14px; margin-bottom: 40px; }
.sdgx-note { border: 1px dashed var(--sx-line); border-radius: 14px; padding: 20px 22px; font-size: .85rem; color: var(--text-muted); }
.sdgx-note strong { color: var(--text-secondary); }
.sdgx-src { margin-top: 10px; }
.sdgx-note a, .sdgx-src-inline a { color: var(--sx-coral); text-decoration: underline; text-underline-offset: 3px; }

/* DETAIL */
.sdgx-crumbs { padding-top: 104px; font-size: .85rem; color: var(--text-muted); }
.sdgx-crumbs a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.sdgx-dhero { padding: 34px 0 70px; background: radial-gradient(ellipse 50% 70% at 15% 40%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); }
.sdgx-dhero-inner { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: center; }
.sdgx-detail .sdgx-kicker { color: var(--c); }
.sdgx-bignum { aspect-ratio: 1; border-radius: 32px; background-color: var(--c); display: grid; place-items: center; color: var(--sx-ink); font-family: var(--sx-display); font-weight: 800; font-size: 11rem; letter-spacing: -8px; line-height: 1; transform: rotate(-3deg); box-shadow: 14px 14px 0 rgba(255,255,255,.06); animation: sdgxDrop .7s cubic-bezier(.3,1.4,.5,1) both; }
.sdgx-bignum span { transform: rotate(3deg); }
@keyframes sdgxDrop { from { opacity: 0; transform: rotate(-12deg) scale(.8); } to { opacity: 1; transform: rotate(-3deg) scale(1); } }
.sdgx-dtitle { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.sdgx-bigq { font-family: var(--sx-display); font-size: 1.35rem; color: var(--c); margin-bottom: 14px; }
.sdgx-src-inline { margin-top: 18px; font-size: .88rem; color: var(--text-muted); }

.sdgx-ideas { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sdgx-idea { background: var(--sx-card); border: 1px solid var(--sx-line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.sdgx-idea header { display: flex; flex-direction: column; gap: 2px; }
.sdgx-idea-cat { font: 700 .74rem var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; }
.sdgx-idea--game .sdgx-idea-cat { color: #facc15; }
.sdgx-idea--web .sdgx-idea-cat { color: #f97316; }
.sdgx-idea-kind { font-size: .85rem; color: var(--text-muted); }
.sdgx-idea h3 { font-family: var(--sx-display); font-size: 1.7rem; }
.sdgx-idea p { color: #cbc6d1; }
.sdgx-idea a { margin-top: auto; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--c); }
.sdgx-try { font-size: .9rem; background: rgba(255,255,255,.04); border-left: 3px solid var(--c); padding: 10px 14px; border-radius: 0 10px 10px 0; }
.sdgx-try strong { color: #fff; }
/* Mini illustrations: a game screen and a browser window */
.sdgx-idea-art { position: relative; height: 120px; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 25%, #16141a), #16141a); border: 1px solid var(--sx-line); overflow: hidden; }
.sdgx-idea-art i { position: absolute; bottom: 0; height: 22px; background: var(--c); border-radius: 6px 6px 0 0; }
.sdgx-idea-art i:nth-child(1) { left: 0; width: 38%; }
.sdgx-idea-art i:nth-child(2) { left: 46%; width: 22%; height: 42px; opacity: .8; }
.sdgx-idea-art i:nth-child(3) { right: 0; width: 24%; height: 30px; }
.sdgx-idea-art b { position: absolute; left: 16%; bottom: 26px; width: 22px; height: 22px; border-radius: 6px; background: #fff; animation: sdgxHop 1.6s ease-in-out infinite; }
@keyframes sdgxHop { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(70px,-46px) rotate(90deg); } }
.sdgx-idea-art--web { background: #1d1a21; }
.sdgx-idea-art--web::before { content: ''; position: absolute; top: 10px; left: 12px; width: 40px; height: 8px; background: radial-gradient(circle, #ff7a5c 3px, transparent 3.5px) 0 0/14px 8px repeat-x; }
.sdgx-idea-art--web i { bottom: auto; border-radius: 6px; height: 10px; }
.sdgx-idea-art--web i:nth-child(1) { top: 32px; left: 12px; width: 55%; background: rgba(255,255,255,.25); }
.sdgx-idea-art--web i:nth-child(2) { top: 52px; left: auto; right: 12px; width: 45%; height: 26px; border-radius: 12px 12px 2px 12px; background: var(--c); opacity: 1; }
.sdgx-idea-art--web i:nth-child(3) { top: 88px; left: 12px; right: auto; width: 35%; height: 10px; background: rgba(255,255,255,.15); }
.sdgx-idea-art--web b { left: auto; right: 14px; bottom: 14px; width: 54px; height: 18px; border-radius: 9px; background: var(--c); animation: sdgxBlink 1.4s steps(2) infinite; }
@keyframes sdgxBlink { 50% { opacity: .35; } }

.sdgx-pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin-bottom: 48px; }
.sdgx-pager a { display: flex; flex-direction: column; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--sx-line); background: var(--sx-card); color: #fff; font-family: var(--sx-display); font-weight: 700; font-size: 1.1rem; transition: border-color .2s; }
.sdgx-pager a:hover { border-color: var(--c); color: #fff; }
.sdgx-pager small { font: 700 .72rem var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--c); }
.sdgx-pager-next { text-align: right; }
.sdgx-pager .sdgx-pager-all { justify-content: center; font-size: .9rem; }

/* 404 */
.sdgx-404 { text-align: center; }
.sdgx-404 .sdgx-lede { margin: 0 auto 28px; }
.sdgx-jump { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 620px; margin: 0 auto 32px; }
.sdgx-jump a { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--c); color: var(--sx-ink); font: 800 1.2rem var(--sx-display); transition: transform .2s; }
.sdgx-jump a:hover { transform: translateY(-3px); color: var(--sx-ink); }

/* RESPONSIVE */
@media (max-width: 900px) {
  .sdgx-hero { padding-top: 120px; }
  .sdgx-hero-inner, .sdgx-split, .sdgx-dhero-inner, .sdgx-ideas { grid-template-columns: 1fr; }
  .sdgx-wheel { max-width: 320px; order: -1; }
  .sdgx-dhero-inner { gap: 32px; }
  .sdgx-bignum { width: 200px; font-size: 7rem; letter-spacing: -5px; border-radius: 24px; }
  .sdgx-cats { grid-template-columns: 1fr; }
  .sdgx-journal { transform: none; }
}
@media (max-width: 767px) {
  .sdgx-steps { grid-template-columns: 1fr; }
  .sdgx-steps li { border-left: 0; border-top: 1px solid var(--sx-line); padding: 24px 0; }
  .sdgx-steps li:first-child { border-top: 0; }
  .sdgx-grid { grid-template-columns: 1fr; }
  .sdgx-card:nth-child(5n+1) { grid-column: auto; }
  .sdgx-card:nth-child(5n+1) .sdgx-num { flex-basis: 96px; font-size: 2.9rem; }
  .sdgx-pager { grid-template-columns: 1fr; }
  .sdgx-pager-next { text-align: left; }
  .sdgx-section, .sdgx-goals { padding: 60px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sdgx *, .sdgx *::before, .sdgx *::after { animation: none !important; transition: none !important; }
  .sdgx-seg { opacity: 1; }
  .sdgx-card-link:hover, .sdgx-cat:hover, .sdgx-jump a:hover { transform: none; }
}