/* Design lab: the World's 101 Best Burger Places front page (/burgers), laid out as the steaks front page
   (css/w101-steaks-home.css, loaded before this file) in colour scheme A "Navy": the dark band in the burger navy
   #08102b (since 2026-11-09 the special awards on the steaks dark grey), the logo gold #d9a21b as the only accent on dark ground (award labels white since 2026-11-10). Built from _cms/burgers-home.html. */
.bg .st-dark .st-award .ed-kicker { color: #fff; }
/* special awards: on the steaks dark grey (#333, owner 2026-11-09), the three awards side by side without a slider -
   one portrait each with the caption centred below; stacked on phones */
.st-awards-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
.st-awards-row .st-feature { margin-top: clamp(18px, 2vw, 26px); }
.st-solo .ed-media { aspect-ratio: 4 / 5; }
@media (max-width: 720px) { .st-awards-row { grid-template-columns: 1fr; gap: 48px; } .st-awards-row .st-solo { width: min(440px, 100%); margin: 0 auto; } }
/* hero: the burger centred in its frame */
.bg .st-hero__bg { object-position: 50% 50%; }

/* the 1-101 list (/burgers/our-list), laid out as the steaks list: white page, "The List 2026" with the range below,
   the search, then the places in fours, edge to edge, captions centred on a light veil over the photograph */
.bl { background: #ffffff; padding-bottom: clamp(60px, 7vw, 100px); }
.bl .st-list__intro { background: transparent; padding: clamp(56px, 6vw, 88px) 0 0; }
.bl .st-list__year { font-weight: 400; color: var(--ink); }
.bl-range { margin: 18px 0 0; font: 300 16px/1.4 var(--sans); color: var(--ink); }
.bl-search { display: flex; justify-content: center; gap: 10px; margin: 44px auto clamp(56px, 6vw, 90px); padding: 0 var(--gut); }
.bl-search input { width: min(368px, 100%); height: 43px; padding: 0 14px; border: 1px solid #979797; border-radius: 0; background: #fff; font: italic 300 15px/1 var(--sans); color: var(--ink); }
.bl-search input:focus { outline: none; border-color: var(--ink); }
.bl-search button { width: 43px; height: 43px; flex: none; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); cursor: pointer; transition: background .25s, color .25s; }
.bl-search button:hover { background: var(--ink); color: #fff; }
.bl-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.bl-empty { text-align: center; font: 300 15px/1.5 var(--sans); color: var(--ink-soft); }
.bl-grid { list-style: none; margin: 0 auto; padding: 0 clamp(12px, 2.15vw, 31px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bl-grid li[hidden] { display: none; }
.bl-card { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #2b2b2a; color: #fff; text-decoration: none; }
.bl-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bl-card::after { content: ""; position: absolute; inset: 0; background: rgba(51, 51, 51, .25); transition: background .3s; }
.bl-card:hover img { transform: scale(1.04); }
.bl-card:hover::after { background: rgba(51, 51, 51, .4); }
.bl-cap { position: absolute; inset: 0; z-index: 1; padding: 0 6%; text-align: center; -webkit-font-smoothing: antialiased; }
/* captions sit exactly where the steaks list (Wix) sets them: centres at 31.8 / 52 / 59.4 / 80.6 % of the card on
   desktop, 16 / 32 / 48 / 65 % on phones; type as there - The Seasons for number and name, Poppins Light capitals for
   the second name line and the city */
.bl-cap > * { position: absolute; left: 6%; right: 6%; transform: translateY(-50%); margin: 0; }
.bl-no { top: 31.8%; font: 400 28px/1.4 var(--serif); }
.bl-name { top: 52%; font: 400 23px/1.25 var(--serif); text-transform: uppercase; text-wrap: balance; }
.bl-sub { top: 59.4%; font: 300 15px/1.3 var(--sans); text-transform: uppercase; }
.bl-city { top: 80.6%; font: 300 16px/1.3 var(--sans); text-transform: uppercase; }
@media (max-width: 720px) {
  .bl-grid { grid-template-columns: 1fr; gap: 6px; padding: 0; }
  .bl-no { top: 16%; font-size: 24px; } .bl-name { top: 32%; font-size: 21px; } .bl-sub { top: 48%; } .bl-city { top: 65%; }
  .bl-search { margin-top: 32px; }
}