@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Nunito+Sans:wght@400;600;700;800&display=swap');

:root { --paper:#fbf7eb; --ink:#084b4d; --muted:#5c7a79; --line:#d7e6dd; --rust:#ed7188; --teal:#0aa2a9; --deep-teal:#087d83; --blue:#e4f1f5; --sand:#edf5e8; --green:#e2f0dc; --hand:'Kalam','Segoe Print',cursive; --sans:'Nunito Sans',ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; }
html, body { width:100%; min-height:100%; margin:0; }
body { min-width:0; overflow-x:hidden; overflow-y:auto; background:var(--paper); color:var(--ink); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
.compact-shell { min-height:100svh; display:flex; flex-direction:column; overflow:visible; }
.compact-header { flex:0 0 54px; display:flex; align-items:center; justify-content:space-between; gap:24px; width:min(1880px,100%); margin:0 auto; padding:0 clamp(22px,2vw,42px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; flex:none; font-size:11px; line-height:.98; font-weight:700; letter-spacing:.1em; }
.brand em, h1 em, h2 em, .visual-label em { font-family:var(--hand); font-weight:700; letter-spacing:0; }
.brand em { color:var(--teal); }
.brand-mark { width:13px; height:13px; display:inline-block; background:var(--teal); transform:rotate(45deg); }
.compact-header nav { display:flex; align-items:center; gap:clamp(18px,3vw,44px); margin-left:auto; margin-right:clamp(5px,2vw,24px); font-size:11px; font-weight:600; }
.compact-header nav a { color:var(--muted); transition:color .2s ease; }
.compact-header nav a:hover, .compact-footer a:hover { color:var(--rust); }
.header-cta, .primary-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; background:var(--teal); color:#fffdf4; font-size:11px; font-weight:800; transition:transform .2s ease,background .2s ease; }
.header-cta { padding:11px 16px; flex:none; }
.header-cta:hover, .primary-button:hover { transform:translateY(-2px) rotate(-1deg); background:var(--rust); }
.compact-main { flex:1 1 auto; min-height:0; height:calc(100svh - 54px); width:min(1880px,100%); margin:0 auto; padding:clamp(12px,1.7vh,24px) clamp(22px,2.2vw,44px) clamp(8px,1.4vh,18px); display:grid; grid-template-rows:minmax(0,1.12fr) minmax(0,.88fr) auto; gap:clamp(10px,1.7vh,18px); }
.hero-panel { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,3vw,56px); align-items:center; }
.hero-copy { min-width:0; padding-left:clamp(0px,1.3vw,24px); }
.eyebrow, .section-kicker { color:var(--deep-teal); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.eyebrow { display:flex; align-items:center; gap:8px; }
.eyebrow i { width:9px; height:9px; display:inline-block; border-radius:50%; background:var(--rust); box-shadow:4px 3px 0 var(--teal); }
.event-date { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 12px; margin-top:13px; color:var(--muted); }
.event-date span { font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.event-date strong { color:var(--ink); font:700 19px/1 var(--hand); letter-spacing:.01em; white-space:nowrap; }
h1 { margin:clamp(14px,2.2vh,26px) 0 12px; color:var(--teal); font:700 clamp(52px,7vw,102px)/.88 var(--hand); letter-spacing:-.035em; transform:rotate(-1deg); }
h1 em { color:var(--teal); white-space:nowrap; }
.hero-lede { max-width:420px; margin:0; color:#416967; font-size:clamp(13px,1.25vw,17px); line-height:1.5; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:clamp(18px,3vh,32px); }
.primary-button { padding:14px 20px; }
.hero-actions .primary-button { padding:22px 38px; font-size:18px; gap:14px; }
.hero-note { display:flex; align-items:center; gap:8px; margin:clamp(18px,3vh,32px) 0 0; color:var(--muted); font-size:10px; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--rust); box-shadow:0 0 0 4px #ed718828; }
.hero-visual { position:relative; width:min(100%,760px); min-height:270px; max-height:480px; aspect-ratio:1.45; justify-self:center; }
.image-frame { position:absolute; inset:0; overflow:hidden; background:transparent; border:3px solid #fffdf4; box-shadow:11px 13px 0 #084b4d24; transform:rotate(1deg); }
.image-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.visual-label { position:absolute; z-index:2; top:0; left:0; padding:12px 15px; background:var(--gold); font-size:10px; line-height:1.05; box-shadow:5px 6px 0 #20211d16; transform:rotate(-4deg); }
.visual-label em { font-size:18px; }
.image-stamp { position:absolute; z-index:2; right:0; bottom:4px; display:grid; place-items:center; width:62px; height:62px; border:1px solid var(--ink); border-radius:50%; background:var(--paper); color:var(--rust); font-size:8px; line-height:1; letter-spacing:.1em; text-align:center; transform:rotate(7deg); }
.image-stamp strong { font:400 19px 'DM Serif Display',Georgia,serif; letter-spacing:0; }
.info-grid { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(145px,.82fr) minmax(155px,1fr); gap:clamp(10px,1.5vw,20px); }
.info-card { min-height:0; overflow:hidden; display:flex; flex-direction:column; padding:clamp(14px,1.1vw,20px); border:2px solid #084b4d1f; border-radius:22px; background:#f4e8dc; box-shadow:8px 10px 0 #084b4d0f; }
.how-card { grid-column:1; grid-row:2; min-height:210px; overflow:visible; background:var(--sand); border-color:#bdd9c5; }
.prize-card { grid-column:1 / -1; grid-row:1; padding:0; overflow:visible; background:transparent; border:0; box-shadow:none; }
.rules-card { grid-column:2; grid-row:2; min-height:210px; background:var(--green); border-color:#b8d79e; }
.info-card .card-heading { min-height:0; }
.card-heading h2 { display:flex; align-items:baseline; gap:9px; margin:7px 0 clamp(10px,1.2vh,16px); color:var(--deep-teal); font:700 clamp(18px,2.15vw,31px)/1 var(--hand); letter-spacing:-.025em; white-space:nowrap; }
.card-heading h2 em { font-size:1.05em; }
.card-heading h2 em { white-space:nowrap; }
.steps-list { display:grid; gap:clamp(14px,2vh,22px); }
.how-card .steps-list { grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(22px,3vw,42px); row-gap:13px; }
.steps-list > div { display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px; align-items:start; }
.how-card .steps-list > div:nth-child(3) { grid-column:2; grid-row:1 / span 2; align-self:start; }
.steps-list b, .rules-list b { color:var(--rust); font-size:16px; line-height:1.25; }
.steps-list strong { display:block; font-size:clamp(17px,1.55vw,21px); line-height:1.2; }
.steps-list small { display:block; margin-top:5px; color:#766e65; font-size:clamp(13px,1.1vw,15px); line-height:1.35; }
.card-emoji { display:inline-block; margin-left:4px; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size:1.45em; line-height:1; font-style:normal; font-weight:400; letter-spacing:0; vertical-align:-.14em; }
.prize-grid .card-emoji { margin-left:6px; font-size:2.3em; vertical-align:-.22em; }
.prize-card { display:flex; flex-direction:column; justify-content:center; }
.prize-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.8vw,44px); align-content:center; align-items:center; }
.prize-grid > div { min-height:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:11px; padding:8px 0; border:0; border-radius:0; overflow:visible; box-shadow:none; background:transparent !important; }
.prize-emoji { display:block; flex:0 0 auto; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size:clamp(30px,3.15vw,48px); line-height:.95; font-style:normal; font-weight:400; }
.prize-grid .prize-copy { display:block; min-width:0; color:var(--deep-teal); font-size:inherit; font-weight:inherit; letter-spacing:normal; line-height:normal; }
.prize-grid .prize-copy > span { display:block; color:var(--deep-teal); font-size:8px; font-weight:800; letter-spacing:.035em; line-height:1.1; white-space:normal; }
.prize-grid strong { display:block; margin-top:5px; color:var(--ink); font:700 clamp(15px,1.4vw,21px)/1.05 var(--hand); overflow-wrap:anywhere; }
.prize-grid small { display:block; margin-top:5px; color:#416967; font-size:8px; line-height:1.2; }
.prize-grid span, .prize-grid strong, .prize-grid small { font-synthesis:none; }
.rules-list { display:grid; gap:clamp(8px,1.25vh,14px); padding:0; margin:0; list-style:none; }
.rules-card .rules-list { gap:clamp(14px,1.8vh,20px); }
.rules-list li { display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px; align-items:start; min-width:0; font-size:clamp(15px,1.35vw,18px); line-height:1.3; }
.rules-list li span { min-width:0; color:var(--ink); font-weight:700; line-height:1.3; white-space:normal; }
.compact-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:9px; }
.compact-footer a { color:var(--ink); font-weight:700; }
@media (max-height:700px) { .compact-header { flex-basis:50px; } .compact-main { height:calc(100svh - 50px); gap:10px; padding-top:10px; } .hero-panel { min-height:0; } h1 { font-size:clamp(43px,6.5vw,70px); margin-top:10px; } .hero-actions { margin-top:14px; } .hero-note { margin-top:14px; } .hero-visual { min-height:220px; max-height:320px; } .info-card .card-heading { min-height:0; } .card-heading h2 { margin-bottom:9px; } .info-card { padding:13px 15px; } .steps-list { gap:6px; } .how-card .steps-list { gap:8px; } .rules-card .rules-list { gap:12px; } .prize-grid > div { padding:9px 10px 11px; } .prize-grid small { margin-top:3px; font-size:7px; } }
@media (min-width:761px) and (max-height:800px) { .compact-main { grid-template-rows:minmax(0,.9fr) minmax(0,1.1fr) auto; } .info-grid { grid-template-rows:minmax(105px,.58fr) minmax(0,1fr); } .hero-panel { gap:clamp(28px,4vw,56px); } h1 { font-size:clamp(42px,5.4vw,68px); margin-top:8px; margin-bottom:7px; } .hero-lede { max-width:360px; font-size:12px; } .hero-actions { margin-top:12px; } .hero-actions .primary-button { padding:18px 30px; font-size:16px; } .hero-note { margin-top:12px; } .hero-visual { min-height:160px; max-height:245px; } .info-card { padding:12px 14px; } .card-heading h2 { font-size:clamp(18px,2.1vw,25px); margin-top:4px; margin-bottom:9px; } .steps-list { gap:8px; } .steps-list strong { font-size:16px; } .steps-list small { margin-top:3px; font-size:12px; } .rules-list { gap:8px; } .rules-list li { font-size:15px; } .prize-grid > div { padding:6px 0; } .prize-emoji { font-size:clamp(28px,3vw,40px); } .prize-grid strong { font-size:clamp(13px,1.2vw,17px); } .prize-grid small { margin-top:3px; font-size:7px; } .compact-footer { font-size:8px; } }
@media (max-width:1080px) { .compact-header { padding-inline:clamp(20px,3vw,40px); } .compact-main { padding-inline:clamp(20px,3vw,40px); } .hero-panel { grid-template-columns:minmax(0,1fr) minmax(260px,.85fr); gap:clamp(28px,5vw,56px); } .hero-copy { padding-left:0; } .info-grid { grid-template-columns:1fr 1fr; } .prize-card { grid-column:1 / -1; grid-row:1; } .how-card { grid-column:1; grid-row:2; } .rules-card { grid-column:2; grid-row:2; } .card-heading h2 { font-size:clamp(16px,2.3vw,24px); } }
@media (max-width:760px) { .compact-header { flex-wrap:nowrap; padding-block:0; height:54px; } .compact-main { height:auto; display:block; padding:24px 20px; } .hero-panel { min-height:0; display:flex; flex-direction:column; align-items:stretch; gap:28px; } .hero-copy { padding:0; } .how-card .steps-list { grid-template-columns:1fr; } .how-card .steps-list > div:nth-child(3) { grid-column:auto; grid-row:auto; align-self:auto; } h1 { font-size:clamp(40px,11.6vw,64px); } .hero-actions .primary-button { padding:24px 32px; font-size:clamp(17px,5vw,21px); gap:14px; } .hero-visual { width:100%; height:clamp(250px,70vw,360px); min-height:0; max-height:none; aspect-ratio:auto; align-self:center; } .info-grid { display:grid; grid-template-columns:1fr; grid-template-rows:none; margin-top:28px; } .how-card, .prize-card, .rules-card { grid-column:auto; grid-row:auto; } .info-card { min-height:240px; } .info-card .card-heading { min-height:auto; } .card-heading h2 { font-size:clamp(18px,3.8vw,29px); } .compact-footer { margin-top:18px; padding-bottom:4px; } }
@media (max-width:520px) { .compact-header { padding:0 16px; } .compact-main { padding:22px 16px; } .hero-actions .primary-button { width:100%; padding:22px 26px; font-size:clamp(16px,4.8vw,19px); } .hero-visual { height:clamp(230px,78vw,300px); } .prize-grid { grid-template-columns:1fr; } .prize-grid > div { padding:10px 0; } .info-card { min-height:auto; padding:18px; } .card-heading h2 { font-size:clamp(12px,4vw,20px); } .compact-footer { align-items:flex-start; flex-direction:column; gap:8px; } }
@media (max-width:390px) { h1 { font-size:clamp(34px,11.5vw,40px); } .hero-visual { height:clamp(220px,80vw,260px); } .header-cta { padding:9px 12px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }