button{font:inherit;color:inherit}

/* HERO */
.hero{position:relative;background:var(--mint);padding:56px 0 120px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.hero h1{font-size:clamp(3rem,8vw,5.4rem);font-weight:800;margin:10px 0 12px}
.hero h1 em{font-style:normal;background:var(--sun);padding:0 .2em;border-radius:.3em;display:inline-block;transform:rotate(-3deg)}
.hero p{font-size:1.15rem;max-width:32em}
.chips{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.chip{background:#fff;font-weight:800;padding:8px 18px;border-radius:999px;border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-size:.92rem}
.art{position:relative;height:250px;max-width:320px;margin-inline:auto;width:100%}
.art span{position:absolute;display:grid;place-items:center;border:3px solid var(--ink);border-radius:28px;box-shadow:0 7px 0 var(--ink);font-size:3.4rem;animation:float 5s ease-in-out infinite}
.art .a1{inset:0 45% 46% 0;background:var(--sun)}
.art .a2{inset:10% 0 36% 56%;background:var(--sky);animation-delay:-1.5s}
.art .a3{inset:56% 52% 0 6%;background:var(--coral);animation-delay:-3s}
.art .a4{inset:50% 2% 4% 54%;background:var(--grape);animation-delay:-4s}
@keyframes float{50%{transform:translateY(-12px) rotate(3deg)}}
.wave{position:absolute;bottom:-1px;left:0;width:100%;height:70px}

/* NEXT UP */
.next{margin-top:-64px;position:relative;z-index:5}
.nextcard{background:var(--ink);color:#fff;border:3px solid var(--ink);border-radius:34px;box-shadow:0 10px 0 rgba(39,33,77,.25);padding:30px;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center}
.date{background:var(--sun);color:var(--ink);border:3px solid #fff;border-radius:22px;padding:8px 20px;text-align:center;transform:rotate(-4deg);min-width:104px}
.date small{display:block;font-weight:800;letter-spacing:.14em;font-size:.8rem}
.date b{display:block;font-family:var(--font-display);font-size:3rem;line-height:1}
.tag{display:inline-block;background:var(--mint);color:var(--ink);font-weight:800;padding:3px 14px;border-radius:999px;font-size:.8rem;margin-bottom:6px}
.nextcard h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800}
.ref{display:inline-block;margin-top:8px;font-weight:800;background:rgba(255,255,255,.15);border-radius:999px;padding:3px 14px;font-size:.92rem}
.btn{display:inline-flex;gap:8px;align-items:center;padding:13px 24px;border-radius:999px;font-weight:800;border:2px solid var(--ink);background:var(--sun);color:var(--ink);box-shadow:0 5px 0 rgba(255,255,255,.5);transition:.15s;cursor:pointer;white-space:nowrap}
.btn:hover{transform:translateY(3px);box-shadow:0 2px 0 rgba(255,255,255,.5)}

/* GUIDELINES */
section{padding:70px 0 0}
.sec-head{text-align:center;margin-bottom:34px}
.eyebrow{font-weight:800;color:var(--grape);letter-spacing:.12em;text-transform:uppercase;font-size:.8rem}
.sec-head h2{font-size:clamp(2rem,4vw,2.8rem);font-weight:800}
.sec-head p{color:var(--muted);max-width:36em;margin:8px auto 0}
.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}
.tip{background:#fff;border:3px solid var(--ink);border-radius:26px;padding:22px;box-shadow:0 7px 0 var(--ink);position:relative;transition:.2s}
.tip:hover{transform:translateY(-5px) rotate(-.8deg)}
.tip h3{font-size:1.2rem;font-weight:800;margin-bottom:4px}
.tip p{color:var(--muted);font-size:.95rem}

/* LIST */
.tools{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.tools h2{font-size:2.2rem;font-weight:800}
.search{flex:0 1 360px;display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:4px 18px;box-shadow:0 5px 0 var(--ink)}
.search input{flex:1;border:0;outline:0;font:inherit;font-weight:700;padding:9px 0;background:transparent;color:var(--ink);min-width:0}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 8px}
.filters button{font-weight:800;border:2px solid var(--ink);background:#fff;border-radius:999px;padding:8px 15px;cursor:pointer;transition:.15s}
.filters button:hover{background:#fff3d6}
.filters button.on{background:var(--grape);color:#fff;box-shadow:0 4px 0 var(--accent-deep)}
.count{font-weight:800;color:var(--muted);margin:8px 0 0}
.group{margin-top:38px}
.ghead{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.ghead h3{font-size:1.7rem;font-weight:800}
.ghead small{display:block;color:var(--muted);font-weight:700;font-size:.85rem;line-height:1.3}
.rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.row{display:flex;gap:14px;align-items:center;background:#fff;border:2px solid var(--ink);border-radius:20px;padding:12px 16px 12px 12px;box-shadow:0 5px 0 var(--ink);transition:.15s}
.row:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.row .d{flex:0 0 auto;width:60px;border-radius:14px;border:2px solid var(--ink);text-align:center;padding:4px 0;line-height:1.05}
.row .d small{display:block;font-weight:800;font-size:.68rem;letter-spacing:.1em}
.row .d b{font-family:var(--font-display);font-size:1.5rem}
.row .t{flex:1;min-width:0}
.row .t strong{display:block;font-weight:800;line-height:1.25;font-size:.98rem}
.row .t span{display:inline-block;margin-top:4px;font-size:.8rem;font-weight:800;color:var(--grape);background:#efeaff;border-radius:999px;padding:1px 10px}
.row.past{background:#f6f2e8;box-shadow:0 3px 0 rgba(39,33,77,.4);border-color:rgba(39,33,77,.45)}
.row.past .t strong{color:var(--muted)}
.row.past .d{opacity:.6}
.row.past::after{content:"✓";font-weight:800;color:var(--mint);font-size:1.3rem}
.row.now{background:#fff6dc;border-width:3px;box-shadow:0 5px 0 var(--sun),0 0 0 3px var(--ink)}
.row.now::after{content:"NEXT";font-weight:800;font-size:.72rem;background:var(--coral);color:#fff;border-radius:999px;padding:2px 10px}
.empty{text-align:center;padding:50px 0;font-weight:700;color:var(--muted);display:none;font-size:1.15rem}

footer{background:var(--ink);color:#d9d4ff;padding:36px 0;text-align:center;font-size:.9rem;margin-top:90px}

@media(max-width:820px){
  .hero .wrap{grid-template-columns:1fr}.art{display:none}
  .nextcard{grid-template-columns:1fr;text-align:center;justify-items:center}
  .back span{display:none}
  .rows{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* Formerly inline styles */
.hero.hero-tight{padding-top:56px}