.cat-tiles { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.cat-tile { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: .15s; position: relative; }
.cat-tile:hover { border-color: var(--red); transform: translateY(-2px); }
.cat-tile .em { font-size: 26px; line-height: 1; }
.cat-tile b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.cat-tile span { font-size: 12px; color: var(--muted); }
.cat-tile .chip-new { position: absolute; top: 10px; right: 10px; }
.best-banner { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: var(--r-lg); border: 1px solid rgba(212, 168, 71, .45); background: radial-gradient(420px 160px at 0% 50%, rgba(212, 168, 71, .22), transparent), linear-gradient(100deg, var(--surface), var(--surface-2)); transition: border-color .2s, transform .2s; }
.best-banner:hover { border-color: var(--gold); transform: translateY(-1px); }
.best-banner .tro { font-size: 40px; line-height: 1; }
.best-banner b.display { display: block; font-size: 19px; margin: 2px 0; }
.article { display: flex; flex-direction: column; gap: 10px; }
.article .im { aspect-ratio: 16/10; border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.article .im img { width: 100%; height: 100%; object-fit: cover; }
.article b { font-size: 14.5px; line-height: 1.35; font-weight: 600; }
.band { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.band > a { position: relative; padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; }
.band .lg { background: linear-gradient(120deg, rgba(255, 59, 82, .25), rgba(240, 195, 106, .15), rgba(95, 240, 181, .15), rgba(124, 180, 255, .2), rgba(160, 90, 255, .25)); }
.band .biz { background: radial-gradient(500px 240px at 100% 0%, rgba(255, 59, 82, .3), transparent), var(--surface); }
@media (max-width: 1100px) { .cat-tiles { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .cat-tiles { grid-template-columns: repeat(4, 1fr); gap: 6px; } .cat-tile { padding: 12px 8px; align-items: center; text-align: center; gap: 6px; } .cat-tile b { font-size: 11.5px; } .cat-tile span { display: none; } .band { grid-template-columns: 1fr; } .best-banner { flex-wrap: wrap; padding: 16px; gap: 12px; } .best-banner .btn { width: 100%; justify-content: center; } }
/* hero: "Tonight in {city}" panel uses the right half on wide screens */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: center; }
.hero-side { padding: 16px; border-radius: var(--r-lg); background: rgba(22, 22, 22, .72); border: 1px solid var(--line); backdrop-filter: blur(12px); }
.hs-title { font-size: 15px; }
.hs-row { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; transition: .15s; }
.hs-row + .hs-row { margin-top: 4px; }
.hs-row:hover { background: var(--surface-2); }
.hs-row img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.hs-row .card-title { font-size: 14px; }
@media (max-width: 1100px) { .hero-grid { grid-template-columns: 1fr; } .hero-side { display: none; } }
/* headline on one line, as big as its column allows ("More Bang for Your Ringgit", the longest, is ~12.3em wide); phones keep two larger lines */
.hero-main { container-type: inline-size; }
.hero h1.display { max-width: none; font-size: clamp(36px, 7.8cqi, 72px); line-height: 1.02; }
@media (max-width: 600px) { .hero h1.display { max-width: 12ch; font-size: 42px; } }