:root { --ink:#192037; --muted:#71778a; --line:#e9e7e2; --violet:#5142d7; --violet-dark:#30258e; --coral:#ff715b; --shadow:0 18px 45px rgba(37,33,74,.08); } * { box-sizing:border-box; } body { margin:0; min-height:100vh; background:#fffdfa; color:var(--ink); font-family:"DM Sans",sans-serif; } body::before { content:""; position:fixed; z-index:-1; inset:0; background:radial-gradient(circle at 94% 8%,rgba(255,228,159,.34),transparent 20%),radial-gradient(circle at 2% 42%,rgba(221,225,255,.38),transparent 19%); } .shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:18px 0 72px; }.topbar { display:flex; align-items:center; justify-content:space-between; height:64px; }.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-size:20px; font-weight:700; letter-spacing:-.07em; text-decoration:none; }.brand>span:last-child>span { color:var(--coral); }.brand-mark { display:flex; align-items:end; gap:2px; width:21px; height:21px; padding:4px; border-radius:7px; background:var(--ink); }.brand-mark i { width:3px; border-radius:3px; background:#fff; }.brand-mark i:nth-child(1) { height:5px; }.brand-mark i:nth-child(2) { height:10px; }.brand-mark i:nth-child(3) { height:7px; }.back-link { color:var(--violet); font-size:13px; font-weight:700; text-decoration:none; }.page-head { margin:32px 0 20px; padding:44px; border-radius:26px; background:#20233c; color:white; }.eyebrow { margin:0 0 10px; color:#c9c8ef; font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }.page-head h1 { margin:0; font-family:"Playfair Display",serif; font-size:clamp(2.4rem,5vw,4.4rem); letter-spacing:-.05em; line-height:1; }.page-head p:last-child { max-width:580px; margin:16px 0 0; color:#d6d8ea; line-height:1.55; }.area-filter { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:22px 0; }.area-filter>span { margin-right:4px; color:#4d4966; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.area-option { min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#626778; cursor:pointer; font-size:12px; font-weight:700; }.area-option.active { border-color:var(--violet); background:#f1efff; color:#3b2da5; box-shadow:0 0 0 3px rgba(81,66,215,.08); }.drop-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.drop-card { min-height:220px; padding:19px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 23px rgba(37,33,74,.05); cursor:pointer; transition:transform .2s,box-shadow .2s; }.drop-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }.drop-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }.drop-chip,.rating { padding:5px 8px; border-radius:999px; font-size:10px; font-weight:700; }.drop-chip { background:#fff0ec; color:#d04c3d; }.rating { background:#fff7e5; color:#9b6b11; }.drop-card h2 { margin:16px 0 5px; font-size:18px; line-height:1.2; }.venue,.date,.drop-percent { margin:0; color:var(--muted); font-size:12px; }.date { margin-top:13px; color:#53576a; font-weight:600; }.prices { display:flex; align-items:baseline; gap:9px; margin-top:14px; }.prices s { color:#a3a6b2; font-size:13px; font-weight:600; }.prices strong { font-size:26px; letter-spacing:-.06em; }.drop-percent { margin-top:5px; color:#138474; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }.loading,.empty { grid-column:1/-1; padding:30px 0; color:var(--muted); } @media (max-width:760px) { .shell { width:min(100% - 24px,1180px); }.page-head { padding:30px 24px; }.drop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:450px) { .topbar { height:54px; }.drop-grid { grid-template-columns:1fr; } }