:root { --ink:#173b43; --muted:#587076; --teal:#2d7777; --pale-teal:#e1f0eb; --coral:#ed806b; --yellow:#f5c54c; --cream:#faf8f0; --white:#fffdf8; --line:#d4dfd9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; } button { cursor:pointer; }
.container { width:min(1160px,calc(100% - 80px)); margin:0 auto; }
.site-header { position:relative; z-index:10; background:var(--cream); border-bottom:1px solid rgba(23,59,67,.08); }.navbar { min-height:88px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; }.brand-mark { width:38px; height:38px; display:grid; place-items:center; color:var(--white); background:var(--teal); border-radius:50%; font:700 23px/1 "Space Grotesk",sans-serif; transform:rotate(-8deg); }.brand-text { font-size:10px; line-height:1.1; letter-spacing:.08em; }.brand-text strong { font-weight:700; }.brand-text small { display:block; margin-top:4px; color:var(--coral); font-size:8px; letter-spacing:.2em; }.brand-text b { display:block; margin-top:4px; color:var(--muted); font-size:7px; letter-spacing:.04em; }.nav-links { display:flex; align-items:center; gap:26px; font-size:12px; font-weight:700; }.nav-links>a { padding:11px 0; position:relative; }.nav-links>a:not(.nav-cta)::after { content:""; position:absolute; bottom:2px; left:0; width:0; height:2px; background:var(--coral); transition:width .2s; }.nav-links>a:hover::after,.nav-links>a.active::after { width:100%; }.nav-cta { padding:12px 16px!important; color:var(--white); background:var(--ink); border-radius:3px; }.nav-cta span { margin-left:8px; color:var(--yellow); font-size:16px; }.menu-toggle { display:none; border:0; background:none; padding:8px; }.menu-toggle span { display:block; width:25px; height:2px; margin:5px; background:var(--ink); }
.hero { min-height:590px; display:grid; grid-template-columns:1fr .93fr; gap:65px; align-items:center; padding:55px 0 75px; }.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 20px; color:var(--coral); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }.eyebrow span { width:25px; height:2px; background:currentColor; }.light { color:var(--yellow); }h1,h2,h3 { margin:0; font-family:"Space Grotesk",sans-serif; letter-spacing:-.045em; line-height:.98; }h1 { font-size:clamp(55px,7vw,88px); }h1 em,h2 em { color:var(--coral); font-style:normal; }.hero-intro { max-width:460px; margin:28px 0 30px; color:var(--muted); font-size:16px; }.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:26px; }.button { display:inline-flex; align-items:center; justify-content:space-between; gap:22px; border:0; padding:15px 18px; border-radius:3px; font-size:12px; font-weight:700; }.button-primary { color:var(--white); background:var(--teal); }.button-dark { color:var(--white); background:var(--ink); }.button span { font-size:19px; line-height:0; }.text-link { display:inline-flex; align-items:center; gap:10px; padding-bottom:4px; border-bottom:1px solid var(--ink); font-size:12px; font-weight:700; }.text-link span { color:var(--coral); font-size:16px; }.event-meta { display:flex; align-items:center; gap:10px; margin-top:55px; color:var(--muted); font-size:10px; line-height:1.15; }.meta-icon { display:grid; place-items:center; width:29px; height:29px; color:var(--ink); background:var(--yellow); border-radius:50%; font-size:15px; }.event-meta b { color:var(--ink); }
.hero-art { position:relative; min-height:450px; overflow:hidden; background:var(--teal); border-radius:3px 80px 3px 3px; }.sun { position:absolute; top:-48px; right:-18px; width:150px; height:150px; background:var(--yellow); border-radius:50%; }.art-copy { position:absolute; top:38px; left:34px; z-index:2; color:var(--white); transform:rotate(-4deg); }.art-copy span { display:block; margin-bottom:10px; color:var(--yellow); font:700 12px "Space Grotesk",sans-serif; }.art-copy b { font:600 27px/1.03 "Space Grotesk",sans-serif; }.hand { position:absolute; display:grid; place-items:center; color:var(--white); font-size:125px; filter:drop-shadow(6px 10px 0 rgba(23,59,67,.15)); }.hand-one { right:25px; bottom:35px; transform:rotate(-18deg); }.hand-two { left:70px; bottom:-10px; color:var(--coral); transform:rotate(15deg); }.hand-three { right:145px; top:145px; color:var(--yellow); font-size:95px; transform:rotate(15deg); }.art-label { position:absolute; bottom:18px; left:18px; z-index:3; display:flex; align-items:center; gap:8px; padding:8px 11px; color:var(--white); background:rgba(23,59,67,.85); font-size:10px; font-weight:700; }.live-dot { width:7px; height:7px; background:var(--yellow); border-radius:50%; }
.quick-bar { color:var(--white); background:var(--ink); }.quick-grid { min-height:128px; display:grid; grid-template-columns:1fr 1.2fr 1fr 45px; align-items:center; gap:28px; }.quick-grid div { display:flex; flex-direction:column; gap:4px; border-left:1px solid rgba(255,255,255,.25); padding-left:22px; }.quick-grid div:first-child { border-left:0; padding-left:0; }.quick-grid small { color:#b8cfca; font-size:10px; text-transform:uppercase; letter-spacing:.12em; }.quick-grid strong { color:var(--yellow); font:600 18px "Space Grotesk",sans-serif; }.quick-grid div:nth-child(2) strong { color:var(--white); }.quick-arrow { display:grid; place-items:center; width:40px; height:40px; color:var(--ink); background:var(--yellow); border-radius:50%; font-size:20px; }
.deadline-bar { color:var(--white); background:#142443; }.deadline-inner { min-height:150px; display:flex; align-items:center; justify-content:space-between; gap:35px; }.deadline-inner h2 { font-size:24px; letter-spacing:-.02em; }.deadline-inner p { margin:8px 0 0; color:#c6d9ef; font-size:16px; }.countdown { display:flex; gap:12px; }.countdown>div { min-width:86px; padding:11px 10px; border:1px solid rgba(255,255,255,.25); border-radius:12px; text-align:center; }.countdown strong { display:block; font:700 30px/1 "Space Grotesk",sans-serif; }.countdown small { display:block; margin-top:8px; color:#c6d9ef; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.lunch-section { background:#fff6e2; }.lunch-layout { display:grid; grid-template-columns:330px 1fr; gap:70px; align-items:center; padding:78px 0; }.lunch-image { height:330px; overflow:hidden; border-radius:4px 70px 4px 4px; }.lunch-image img { width:100%; height:100%; display:block; object-fit:cover; }.lunch-copy h2 { font-size:clamp(44px,5vw,64px); }.meal-note { color:var(--teal); font-size:.48em; letter-spacing:0; }.lunch-copy>p:not(.eyebrow) { max-width:420px; margin:23px 0 19px; color:var(--muted); font-size:16px; font-weight:700; }.meal-times { display:grid; grid-template-columns:auto 1fr; gap:5px 14px; margin:0 0 18px; color:var(--ink); font-size:14px; }.meal-times strong { color:var(--teal); }.meal-times span { color:var(--muted); }.entry-rule { margin:0 0 20px; padding:12px 15px; border-left:3px solid var(--coral); color:var(--ink); background:rgba(255,255,255,.55); font-size:13px; line-height:1.5; }.entry-rule b { color:var(--coral); }.lunch-copy>strong { display:block; color:var(--teal); font:600 18px "Space Grotesk",sans-serif; }.lunch-copy .button { margin-top:22px; }
.about-section { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding:115px 0 75px; }.about-section h2,.tools-heading h2 { font-size:clamp(46px,5vw,66px); }.about-kicker { margin:26px 0 0; color:var(--teal); font:600 18px "Space Grotesk",sans-serif; }.about-copy { max-width:430px; align-self:end; color:var(--muted); font-size:17px; }.about-copy p { margin:0 0 17px; }.about-copy .text-link { margin-top:16px; color:var(--ink); }
.story-section { padding:45px 0 120px; background:#f1eee2; }.story-layout { display:grid; grid-template-columns:300px 1fr; gap:100px; align-items:start; }.story-intro { position:sticky; top:30px; }.story-intro h2 { font-size:clamp(46px,5vw,66px); }.story-intro>p:last-child { max-width:255px; margin-top:25px; color:var(--muted); font-size:14px; }.story-copy { max-width:650px; color:var(--muted); font-size:16px; }.story-copy>p { margin:0 0 18px; }.story-copy q { color:var(--ink); font-weight:600; }.story-highlight { margin:27px 0; padding:21px 24px; border-left:4px solid var(--coral); color:var(--ink); background:var(--white); }.story-highlight p { margin:0 0 13px; }.story-highlight p:last-child { margin-bottom:0; }.rights-line { font:600 18px/1.25 "Space Grotesk",sans-serif; }.sign-words { display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 25px; }.sign-words span { padding:9px 12px; color:var(--ink); background:var(--yellow); font-size:10px; font-weight:700; letter-spacing:.08em; }.sign-words b { margin-left:3px; font-size:17px; }.story-copy blockquote { margin:28px 0; padding:23px 26px; color:var(--white); background:var(--teal); font:600 21px/1.35 "Space Grotesk",sans-serif; }.story-copy blockquote p { margin:0; }.story-message { margin-top:38px; padding:28px; color:var(--white); background:var(--ink); }.story-message .eyebrow { color:var(--yellow); }.story-message h3 { max-width:520px; color:var(--white); font-size:30px; line-height:1.08; }.story-message p:not(.eyebrow) { margin:13px 0 0; color:#c6d8d3; }.story-message p strong { color:var(--yellow); }.deaf-day-close { display:block; margin-top:24px; color:var(--yellow); font:600 25px "Space Grotesk",sans-serif; }.story-actions { font-size:11px; font-weight:700; letter-spacing:.04em; }.story-actions span { color:var(--coral); padding:0 4px; }
.shirt-section { color:#0f2f56; background:#e9f6fd; }.shirt-layout { display:grid; grid-template-columns:1fr 1.05fr; gap:55px; align-items:center; padding:82px 0; }.shirt-image { position:relative; height:420px; overflow:hidden; display:grid; place-items:center; background:var(--white); border-radius:3px 35px 3px 3px; }.shirt-image img { width:100%; height:100%; object-fit:cover; object-position:right center; }.shirt-badge { position:absolute; right:0; bottom:30px; padding:18px 24px; color:#102b54; background:#f6a02f; font:700 24px/1.18 "Space Grotesk",sans-serif; }.shirt-copy h2 { font-size:clamp(45px,5vw,66px); }.shirt-copy>p:not(.eyebrow) { max-width:530px; margin:24px 0; font-size:16px; }.shirt-price { display:block; margin:18px 0 24px; color:#176aa8; font:700 38px "Space Grotesk",sans-serif; }.size-list { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:28px; }.size-list b { width:100%; margin-bottom:9px; font-size:16px; }.size-list span { display:grid; place-items:center; min-width:53px; height:50px; border:1px solid #b1d1e8; border-radius:10px; font-weight:700; }
.register-section { color:var(--white); background:var(--coral); }.register-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:center; padding:95px 0; }.register-intro h2 { font-size:clamp(48px,5vw,70px); }.register-intro>p:not(.eyebrow) { max-width:340px; margin:25px 0; color:#fff4f0; font-size:15px; }.ticket-note { display:flex; align-items:center; gap:12px; color:#fff4f0; font-size:11px; }.ticket-note>span:first-child { display:grid; place-items:center; width:28px; height:28px; color:var(--coral); background:var(--yellow); border-radius:50%; font-weight:700; }.register-form { padding:32px; color:var(--ink); background:var(--white); border-radius:3px; }.form-heading { display:flex; align-items:center; gap:14px; margin-bottom:24px; }.form-heading span { color:var(--coral); font:700 11px "Space Grotesk",sans-serif; }.form-heading h3 { font-size:25px; }.register-form label { display:block; margin:14px 0 6px; font-size:11px; font-weight:700; }.register-form label span { color:var(--coral); }.register-form input,.register-form select,.register-form textarea,.visitor-form input { width:100%; border:1px solid var(--line); border-radius:2px; padding:12px; color:var(--ink); background:var(--white); font-size:12px; outline-color:var(--teal); }.register-form textarea { resize:vertical; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.register-form .button { margin-top:20px; }.price-summary { margin-top:16px; padding:12px 14px; border-left:3px solid var(--yellow); color:var(--ink); background:#fff7dc; font-size:12px; font-weight:700; }.form-status { min-height:17px; margin:9px 0 0; color:var(--teal); font-size:11px; font-weight:700; }
.register-form fieldset { margin:15px 0 0; padding:0; border:0; }.register-form legend { margin-bottom:9px; font-size:11px; font-weight:700; }.register-form legend span { color:var(--coral); }.radio-label { display:inline-flex!important; align-items:center; gap:8px; margin:0 25px 0 0!important; font-weight:400!important; }.radio-label input,.check-label input { width:auto!important; accent-color:var(--teal); }.payment-proof { margin-top:22px; padding:20px; border:2px solid #7c50c7; border-radius:16px; text-align:center; background:#faf7ff; }.payment-proof h4 { margin:0 0 8px; color:#57329c; font-size:20px; }.payment-proof p { margin:0 0 14px; font-size:12px; }.payment-proof img { width:250px; max-width:100%; height:250px; object-fit:cover; background:var(--white); }.check-label { display:flex!important; align-items:center; justify-content:center; gap:8px; margin:14px 0 0!important; font-size:12px!important; font-weight:400!important; }
.team-section { padding:110px 0 120px; }.team-lead { max-width:300px; margin:0 0 5px; color:var(--muted); font-size:14px; }.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.team-grid figure { margin:0; overflow:hidden; background:var(--pale-teal); border-radius:3px; }.team-grid img { width:100%; aspect-ratio:1/1.1; display:block; object-fit:cover; filter:saturate(.85); }.team-grid figcaption { padding:13px 14px; font-size:11px; font-weight:700; }
.tools-section { padding:110px 0 120px; }.tools-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:45px; }.tools-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.tool-card { min-height:315px; display:flex; flex-direction:column; padding:28px; border-radius:3px; }.sponsor-card { color:var(--white); background:var(--teal); }.visitor-card { background:var(--pale-teal); }.chat-card { color:var(--white); background:var(--ink); }.tool-icon { margin-bottom:24px; font:34px/1 "Space Grotesk",sans-serif; }.tool-tag { color:var(--coral); font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }.sponsor-card .tool-tag,.chat-card .tool-tag { color:var(--yellow); }.tool-card h3 { margin-top:9px; font-size:28px; }.tool-card>p { max-width:255px; margin:15px 0 22px; font-size:13px; opacity:.82; }.tool-card .text-link { margin-top:auto; width:max-content; border-color:currentColor; }.visitor-form { display:flex; gap:7px; margin-top:auto; }.visitor-form input { min-width:0; background:var(--white); }.visitor-form button { width:43px; border:0; color:var(--white); background:var(--teal); font-size:20px; }.visitor-card .form-status { color:var(--teal); }.whatsapp-button { display:inline-flex; justify-content:space-between; align-items:center; gap:15px; width:max-content; margin-top:auto; padding:12px 15px; color:var(--ink); background:var(--yellow); border-radius:2px; font-size:12px; font-weight:700; }.whatsapp-button span { font-size:17px; }
.tools-grid { grid-template-columns:1fr; max-width:420px; }.sponsor-card,.visitor-card { display:none; }
.payment-section { background:var(--yellow); }.payment-layout { display:grid; grid-template-columns:1fr 1.25fr; align-items:center; gap:100px; padding:85px 0; }.payment-layout h2 { font-size:clamp(45px,5vw,63px); }.payment-copy { max-width:370px; color:var(--ink); font-size:15px; }.payment-box { display:flex; align-items:center; gap:25px; padding:25px; background:var(--white); border-radius:3px; }.payment-qr { flex:0 0 190px; width:190px; height:190px; object-fit:cover; }.payment-box h3 { margin:8px 0 5px; font-size:25px; }.payment-box p { margin:0 0 8px; color:var(--muted); font-size:12px; }.payment-box small { display:block; max-width:260px; color:var(--coral); font-size:10px; }.whatsapp-qr { width:90px; height:90px; margin:8px 0 12px; object-fit:cover; background:var(--white); }
.site-footer { padding:27px 0; color:#c6d8d3; background:var(--ink); }.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:25px; }.footer-brand { color:var(--white); }.footer-brand .brand-mark { background:var(--coral); }.site-footer p,.footer-links { margin:0; font-size:10px; }.footer-links { display:flex; gap:17px; }.footer-links a:hover { color:var(--yellow); }
@media (max-width:850px) { .container { width:min(100% - 40px,600px); }.menu-toggle { display:block; }.nav-links { position:absolute; top:88px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px 20px 20px; background:var(--cream); box-shadow:0 12px 20px rgba(23,59,67,.1); }.nav-links.open { display:flex; }.nav-links>a { padding:12px 0; }.nav-cta { margin-top:7px; text-align:center; }.hero { grid-template-columns:1fr; gap:35px; padding-top:50px; }.hero-art { min-height:390px; }.quick-grid { grid-template-columns:1fr 1fr; gap:25px; padding:28px 0; }.quick-grid div { border-left:0; padding-left:0; }.quick-arrow { display:none; }.shirt-layout,.about-section,.payment-layout { grid-template-columns:1fr; gap:35px; padding:80px 0; }.about-section { padding-bottom:55px; }.shirt-image { min-height:300px; }.register-layout { grid-template-columns:1fr; gap:35px; padding:75px 0; }.tools-heading { display:block; }.tools-grid { grid-template-columns:1fr; }.tool-card { min-height:260px; }.team-section { padding:80px 0; }.team-grid { grid-template-columns:1fr 1fr; }.payment-box { max-width:600px; }.footer-inner { flex-wrap:wrap; }.footer-inner p { order:3; width:100%; } }
@media (max-width:480px) { .container { width:calc(100% - 40px); } h1 { font-size:52px; }.hero-art { min-height:330px; border-radius:3px 55px 3px 3px; }.hand { font-size:90px; }.hand-three { right:80px; top:115px; font-size:70px; }.quick-grid { grid-template-columns:1fr 1fr; gap:22px 13px; }.quick-grid strong { font-size:14px; }.register-form { padding:22px 18px; }.form-row { grid-template-columns:1fr; gap:0; }.payment-box { flex-direction:column; align-items:flex-start; }.payment-qr { width:220px; height:220px; }.footer-links { width:100%; } }
@media (max-width:850px) { .deadline-inner { display:block; padding:30px 0; }.countdown { margin-top:24px; }.countdown>div { flex:1; min-width:0; } }
@media (max-width:850px) { .lunch-layout { grid-template-columns:1fr; gap:35px; padding:70px 0; }.lunch-image { height:300px; max-width:420px; } }
.shirt-prices { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 20px; }.shirt-prices strong { padding:10px 13px; color:#0f2f56; background:#d4ebf7; font:600 14px "Space Grotesk",sans-serif; }

/* Thank-you modal */
.thankyou-overlay[hidden] { display:none; }
.thankyou-overlay { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; background:rgba(23,59,67,.55); backdrop-filter:blur(3px); animation:thankyouFade .2s ease; }
.thankyou-card { position:relative; width:min(440px,100%); background:var(--white); border:1px solid var(--line); border-radius:4px 22px 4px 22px; padding:44px 32px 34px; text-align:center; box-shadow:0 26px 60px rgba(23,59,67,.28); animation:thankyouPop .25s ease; }
.thankyou-check { width:64px; height:64px; margin:0 auto 18px; display:grid; place-items:center; color:var(--white); background:var(--teal); border-radius:50%; font-size:32px; font-weight:700; box-shadow:0 8px 18px rgba(45,119,119,.35); }
.thankyou-card h3 { margin:0 0 10px; color:var(--ink); font:700 26px/1.1 "Space Grotesk",sans-serif; }
.thankyou-card p { margin:0 0 24px; color:var(--muted); font-size:15px; line-height:1.55; }
.thankyou-ok { display:inline-flex; align-items:center; justify-content:center; }
.thankyou-close { position:absolute; top:12px; right:14px; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--pale-teal); color:var(--teal); font-size:22px; line-height:1; }
.thankyou-close:hover { background:var(--teal); color:var(--white); }
@keyframes thankyouFade { from { opacity:0; } to { opacity:1; } }
@keyframes thankyouPop { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }

/* Event T-shirt SVG illustration (replaces the missing product photo) */
.shirt-illustration { width:80%; max-width:300px; height:auto; }