.best-hero { padding: 28px 0 18px; text-align: center; background: radial-gradient(600px 220px at 50% 0%, rgba(240, 195, 106, .16), transparent); border-bottom: 1px solid var(--line); }
.best-hero h1 { font-size: clamp(30px, 4vw, 44px); }
.best-hero .lede { font-size: 14px; }
.city-btn { display: inline-flex; align-items: baseline; gap: 6px; color: var(--red); font: inherit; }
.city-btn .car { font-size: .45em; color: var(--muted); transform: translateY(-.35em); }
.city-btn:hover .car { color: var(--text); }
.cat-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-top: 16px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.cat-tabs button:hover { color: var(--text); background: var(--surface); }
.cat-tabs button.on { background: var(--text); color: var(--bg); }
@media (max-width: 720px) { .cat-tabs { display: flex; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; border-left: 0; border-right: 0; padding: 4px var(--gutter); } .cat-tabs button { height: 36px; padding: 0 12px; font-size: 13.5px; } }

/* award cards: photo strip with the award, then venue */
.awards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; align-items: start; }
.awards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .awards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.award { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid rgba(212, 168, 71, .28); transition: .15s; }
.award:hover { border-color: rgba(212, 168, 71, .6); transform: translateY(-2px); }
.aw-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.aw-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aw-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0, 0, 0, .75)); }
.aw-tag { position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 4px 9px; border-radius: 99px; background: var(--gold); color: #1b1203; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.aw-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.aw-body b { font-size: 15px; line-height: 1.3; }
/* "best for" heading on each ranked venue */
@media (max-width: 900px) { .awards, .awards.c3 { grid-template-columns: 1fr 1fr; } }

/* podium: top 3 as big photo cards */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.pod { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: .15s; }
.pod:hover { transform: translateY(-3px); border-color: var(--line-2); }
.pod-1 { border-color: rgba(212, 168, 71, .55); box-shadow: 0 20px 50px -30px rgba(212, 168, 71, .55); }
.pod-img { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); }
.pod-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pod-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.25), transparent 30%, transparent 55%, rgba(0,0,0,.7)); }
.medal { position: absolute; top: 12px; left: 12px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 18px; color: #1b1203; background: linear-gradient(145deg, #f5d37a, #c79a2e); box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5); }
.pod-2 .medal { background: linear-gradient(145deg, #eef0f3, #a9afb8); }
.pod-3 .medal { background: linear-gradient(145deg, #e8b48a, #a8683a); }
.pod-for { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 4px 10px; border-radius: 99px; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pod-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pod-body h2, .r-main h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.pod-body h2 span, .r-main h2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-body p, .r-main p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pod-body .deal-pill { margin-top: auto; align-self: flex-start; }
.deal-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: var(--deal-bg); border: 1px solid rgba(34, 197, 94, .3); color: var(--deal); font-size: 12px; font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.deal-pill .ico { width: 14px; height: 14px; flex: none; }
/* #4 and below: compact rows */
.ranked { display: flex; flex-direction: column; gap: 8px; }
.r-item { display: grid; grid-template-columns: 34px 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: .15s; }
.r-item:hover { border-color: var(--line-2); background: var(--surface-2); }
.r-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-weight: 800; font-size: 13px; justify-self: center; }
.r-item img, .r-ph { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.r-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.r-main h2 { font-size: 15px; }
.r-main p { -webkit-line-clamp: 1; }
.r-for { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.r-side { display: flex; align-items: center; gap: 12px; }
.r-go { font-size: 22px; color: var(--muted); }
@media (max-width: 900px) { .podium { grid-template-columns: 1fr; } .pod { flex-direction: row; } .pod-img { aspect-ratio: auto; width: 42%; min-height: 150px; } }
@media (max-width: 640px) {
  .pod { flex-direction: column; } .pod-img { width: 100%; aspect-ratio: 16 / 10; }
  .r-item { grid-template-columns: 26px 64px minmax(0, 1fr); gap: 10px; } .r-item img, .r-ph { width: 64px; height: 64px; }
  .r-side { grid-column: 2 / -1; justify-content: flex-start; } .r-go { display: none; } .r-main p { display: none; }
}

/* category tabs: one swipeable row, labels never wrap */
.cat-tabs a { white-space: nowrap; flex: none; }
@media (max-width: 720px) { .cat-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; max-width: 100%; scrollbar-width: none; } .cat-tabs::-webkit-scrollbar { display: none; } }
@media (max-width: 720px) { .cat-tabs { gap: 4px; } .cat-tabs a { padding: 6px 10px; } }

/* ===== Awards look (Oct 2026): breaks the house style on purpose — serif + gold, award titles first ===== */
:root { --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --gold-1: #f7dc8f; --gold-2: #d4a847; --gold-3: #9c7424; }
.best-hero { padding: 40px 0 26px; background: radial-gradient(700px 300px at 50% -40px, rgba(212, 168, 71, .28), transparent 70%), linear-gradient(180deg, #120d05, var(--bg)); border-bottom: 1px solid rgba(212, 168, 71, .2); }
.best-hero .laurel { font-size: 34px; filter: drop-shadow(0 6px 18px rgba(212, 168, 71, .5)); }
.best-hero .eyebrow { color: var(--gold-2); letter-spacing: .22em; margin-top: 6px; }
.best-hero h1 { font-family: var(--serif); font-weight: 900; letter-spacing: -.01em; font-size: clamp(36px, 5vw, 60px); }
.best-hero h1 .city-btn em { font-style: italic; background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 60%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.best-hero .lede { color: var(--text-2); font-size: 15px; }
.cat-tabs a.on { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: #1b1203; }

/* the award title: the most important text on every card */
.award-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 22px; line-height: 1.15; }
.award-title span { background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.award-title .lr { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--gold-2); stroke-width: 1.6; stroke-linecap: round; }
.award-title .lr:last-child { transform: scaleX(-1); display: none; }
.award-title.big { font-size: clamp(28px, 3.4vw, 42px); gap: 10px; }
.award-title.big .lr { width: 34px; height: 34px; }
.award-title.small { font-size: 18px; }
.award-title.small .lr { width: 18px; height: 18px; }
.w-kicker { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }

/* #1: full-width winner */
.winner { display: grid; grid-template-columns: 1.25fr 1fr; border-radius: 22px; overflow: hidden; margin-bottom: 18px; background: linear-gradient(135deg, rgba(212, 168, 71, .16), #120f0a 45%, var(--surface)); border: 1px solid rgba(212, 168, 71, .55); box-shadow: 0 30px 80px -40px rgba(212, 168, 71, .6); transition: transform .15s; }
.winner:hover { transform: translateY(-3px); }
.w-img { position: relative; min-height: 340px; background: var(--surface-2); }
.w-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(18, 15, 10, .9)); }
.w-num { position: absolute; left: 18px; bottom: -18px; z-index: 1; font-family: var(--serif); font-weight: 900; font-size: 170px; line-height: 1; background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 50%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .7)); }
.w-body { padding: 34px 34px 30px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.w-body h2 { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.w-body h2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-body p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.w-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.w-go { margin-left: auto; font-weight: 700; color: var(--gold-1); font-size: 14px; }

/* #2 and #3 */
.runners { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 34px; }
.runner { display: grid; grid-template-columns: 44% 1fr; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); transition: transform .15s; }
.runner:hover { transform: translateY(-2px); }
.runner.r-2 { border-color: rgba(214, 220, 228, .4); background: linear-gradient(135deg, rgba(214, 220, 228, .08), var(--surface) 50%); }
.runner.r-3 { border-color: rgba(205, 138, 86, .45); background: linear-gradient(135deg, rgba(205, 138, 86, .1), var(--surface) 50%); }
.ru-img { position: relative; min-height: 210px; background: var(--surface-2); }
.ru-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ru-num { position: absolute; left: 12px; bottom: -10px; font-family: var(--serif); font-weight: 900; font-size: 96px; line-height: 1; color: transparent; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .8)); -webkit-background-clip: text; background-clip: text; }
.r-2 .ru-num { background-image: linear-gradient(180deg, #ffffff, #b9c0c9); }
.r-3 .ru-num { background-image: linear-gradient(180deg, #f3c39a, #a8683a); }
.r-2 .award-title span { background-image: linear-gradient(180deg, #ffffff, #c9d0d8); }
.r-3 .award-title span { background-image: linear-gradient(180deg, #f6cfa8, #c4834e); }
.r-2 .award-title .lr { stroke: #c9d0d8; } .r-3 .award-title .lr { stroke: #c4834e; }
.ru-body { padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 8px; justify-content: center; min-width: 0; }
.ru-body h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 19px; font-weight: 800; }
.ru-body h2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ru-body .deal-pill { align-self: flex-start; }

/* #4 and down */
.rest-head { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 24px; margin: 0 0 14px; color: var(--text); }
.ranked { gap: 10px; }
.r-item { grid-template-columns: 70px 92px minmax(0, 1fr) auto; padding: 12px 16px 12px 8px; border-radius: 14px; }
.r-num { width: auto; height: auto; background: none; border-radius: 0; font-family: var(--serif); font-weight: 900; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(212, 168, 71, .75); }
.r-item:hover .r-num { color: rgba(212, 168, 71, .25); }
.r-item img, .r-ph { width: 92px; height: 92px; border-radius: 12px; }
.r-main { gap: 4px; }
.r-main h2 { font-size: 16.5px; }
.r-for { display: none; }

@media (max-width: 900px) {
  .winner { grid-template-columns: 1fr; }
  .w-img { min-height: 240px; aspect-ratio: 16 / 10; }
  .w-img::after { background: linear-gradient(180deg, transparent 50%, rgba(18, 15, 10, .9)); }
  .w-num { font-size: 120px; }
  .w-body { padding: 20px 18px 22px; }
  .runners { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .runner { grid-template-columns: 38% 1fr; }
  .ru-img { min-height: 170px; } .ru-num { font-size: 70px; }
  .ru-body { padding: 14px; } .ru-body h2 { font-size: 16px; }
  .award-title { font-size: 19px; } .award-title.small { font-size: 16px; }
  .r-item { grid-template-columns: 44px 64px minmax(0, 1fr); padding: 10px 12px 10px 6px; }
  .r-num { font-size: 30px; }
  .r-item img, .r-ph { width: 64px; height: 64px; }
}
.cat-tabs a { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.cat-tabs a:hover { color: var(--text); background: var(--surface); }
.cat-tabs a.on { color: #1b1203; }
@media (max-width: 720px) { .cat-tabs a { height: 36px; padding: 0 12px; font-size: 13px; } }

/* ===== Award wall (each venue wins one award; no ranking numbers) ===== */
.award-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; }
.aw { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #17120a, var(--surface) 40%); border: 1px solid rgba(212, 168, 71, .35); transition: transform .15s, border-color .15s, box-shadow .15s; }
.aw:hover { transform: translateY(-3px); border-color: rgba(212, 168, 71, .7); box-shadow: 0 24px 60px -36px rgba(212, 168, 71, .7); }
.aw-head { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px 16px; text-align: center; background: radial-gradient(120% 140% at 50% 0%, rgba(212, 168, 71, .22), transparent 70%); border-bottom: 1px solid rgba(212, 168, 71, .2); min-height: 108px; }
.aw-head .lr { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--gold-2); stroke-width: 1.6; stroke-linecap: round; }
.aw-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); opacity: .8; }
.aw-name { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 26px; line-height: 1.12; margin-top: 3px; background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aw-photo { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); }
.aw-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aw-venue { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.aw-win { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.aw-venue h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.aw-venue h2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-venue p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aw-venue .deal-pill { align-self: flex-start; margin-top: auto; }
/* the first award: wide, photo beside it */
.aw-lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto 1fr; }
.aw-lead .aw-photo { grid-row: 1 / 3; aspect-ratio: auto; min-height: 340px; }
.aw-lead .aw-head { min-height: 150px; }
.aw-lead .aw-name { font-size: clamp(32px, 3.6vw, 46px); }
.aw-lead .aw-head .lr { width: 40px; height: 40px; }
.aw-lead .aw-venue { padding: 20px 26px 24px; }
.aw-lead .aw-venue h2 { font-size: 24px; }
.aw-lead .aw-venue p { -webkit-line-clamp: 3; font-size: 14px; }
@media (max-width: 1000px) { .award-wall { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .award-wall { grid-template-columns: 1fr; gap: 12px; }
  .aw-lead { display: flex; }
  .aw-lead .aw-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .aw-head { min-height: 0; padding: 14px 10px 12px; }
  .aw-name, .aw-lead .aw-name { font-size: 26px; }
}
@media (min-width: 721px) { .aw-lead .aw-head, .aw-lead .aw-venue { grid-column: 2; } .aw-lead .aw-photo { grid-column: 1; grid-row: 1 / 3; } }
/* no italics on this page */
.aw-name, .award-title, .rest-head, .best-hero h1 .city-btn em { font-style: normal; }
.aw-name { letter-spacing: -.01em; }