/* BestBirminghamHotels.com
   Birmingham editorial utility. Mobile-first: base rules are the smallest
   viewport, larger layouts arrive through min-width queries only. */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/bitter-latin.woff2?v=33') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2?v=33') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

/* --------------------------------------------------------------- tokens */
:root {
  --color-ink: #152238;
  --color-brick: #B6462B;
  --color-brick-hover: #963822;
  --color-limestone: #F4F0E8;
  --color-white: #FFFFFF;
  --color-steel: #41647A;
  --color-muted: #667085;
  --color-border: #D8DDE5;
  --color-success: #2D6A4F;
  --color-warning: #9A6A16;
  --color-error: #A33232;
  --color-steel-soft: #EAF2F6;
  --color-brick-soft: #F7E9E4;
  --color-success-soft: #E9F4EE;
  --color-row-alt: #FAFAF8;

  --font-display: 'Bitter', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', Arial, Helvetica, sans-serif;

  --radius-control: 8px;
  --radius-card: 12px;
  --radius-panel: 16px;

  --shadow-card: 0 6px 24px rgba(21, 34, 56, .08);
  --shadow-card-hover: 0 10px 32px rgba(21, 34, 56, .12);

  --container: 1180px;
  --container-wide: 1280px;
  --container-table: 1560px;
  --content-reading: 760px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 80px; --s-10: 112px;

  --gutter: 18px;
  --section: 44px;
}

/* ------------------------------------------------------------- baseline */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-limestone);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: break-word;
  word-break: normal;
}

img, svg { max-width: 100%; height: auto; }
img { display: block; }

a { color: var(--color-steel); }
a:hover { color: var(--color-brick); }

:focus-visible {
  outline: 3px solid rgba(182, 70, 43, .45);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3, h4 { margin: 0 0 var(--s-4); text-wrap: balance; }
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -.02em;
}
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.012em;
}
h3 { font-weight: 700; font-size: 22px; line-height: 1.25; }
h4 { font-weight: 700; font-size: 18px; line-height: 1.3; }
p  { margin: 0 0 var(--s-4); }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15em; }
li { margin-bottom: var(--s-2); }

.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.prose { max-width: var(--content-reading); }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.lead { font-size: 18px; line-height: 1.55; }
.muted { color: var(--color-muted); }
.small { font-size: 14px; line-height: 1.5; }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-brick);
  margin: 0 0 var(--s-2);
}

.section { padding-block: var(--section); }
.section--tint { background: var(--color-white); }
.section-head { margin-bottom: var(--s-6); }
/* Colour on the headings as an accent rule, not brick text: brick is the action
   colour and the huisstijl keeps it near 6% of the palette, which brick
   headings across 130 pages would blow straight past. */
.section-head > h2::before,
.prose > h2::before {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-brick);
  margin-bottom: var(--s-3);
}
.section-head .eyebrow + h2::before { display: none; }
.prose h3 { color: var(--color-steel); }
.section-head p { max-width: var(--content-reading); margin-bottom: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-ink);
  color: var(--color-white);
  padding: var(--s-3) var(--s-4);
  border-radius: 0 0 var(--radius-control) 0;
}
.skip-link:focus { left: 0; color: var(--color-white); }

/* --------------------------------------------------------------- header */
.site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 64px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-ink);
  padding-block: 10px;
}
.logo svg { flex: none; width: 30px; height: 30px; }
.logo-words {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.04;
  letter-spacing: -.02em;
  display: block;
}
.logo-words span { display: block; }
.logo-rule {
  display: block;
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-brick);
  margin-top: 3px;
}

.nav-toggle {
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-3);
  background: var(--color-white);
  color: var(--color-ink);
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.nav-toggle:hover { background: #EEF0F3; }
.nav-toggle svg { width: 18px; height: 18px; }

#site-nav {
  display: none;
  width: 100%;
  padding-bottom: var(--s-4);
}
#site-nav.is-open { display: block; }

/* ------------------------------------------------------------- submenus */
.nav-sub-toggle {
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}
.nav-sub-toggle svg { width: 15px; height: 15px; }
.nav-sub-toggle:hover { background: var(--color-limestone); color: var(--color-ink); }
.has-sub.is-open > .nav-sub-toggle svg { transform: rotate(180deg); }

.nav-sub {
  display: none;
  list-style: none;
  margin: 0 0 var(--s-2);
  padding: 0 0 0 var(--s-4);
}
/* Twelve venues is taller than a laptop viewport once the header is above it. */
.nav-sub { max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.has-sub.is-open > .nav-sub { display: block; }
.nav-sub a {
  display: block;
  padding: 9px var(--s-3);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-ink);
  text-decoration: none;
  border-radius: var(--radius-control);
}
.nav-sub a:hover { background: var(--color-limestone); color: var(--color-brick); }
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-list li { margin: 0; }
.has-sub { display: flex; flex-wrap: wrap; align-items: center; }
.has-sub > a { flex: 1; }
.has-sub > .nav-sub { flex-basis: 100%; }
.nav-list > li > a {
  display: block;
  padding: 11px var(--s-3);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-ink);
  text-decoration: none;
  border-radius: var(--radius-control);
  border-bottom: 2px solid transparent;
}
.nav-list > li > a:hover { background: var(--color-limestone); color: var(--color-ink); }
.nav-list > li > a[aria-current="true"] {
  border-bottom-color: var(--color-brick);
  color: var(--color-ink);
}

/* ----------------------------------------------------------- breadcrumbs */
.breadcrumb { padding-block: var(--s-3); font-size: 14px; }
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--color-muted); }
.breadcrumb li + li::before {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--color-muted);
  border-bottom: 1.5px solid var(--color-muted);
  transform: rotate(-45deg);
  flex: none;
}
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-brick); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-ink); font-weight: 500; }

/* ----------------------------------------------------------------- hero */
.hero { position: relative; background: var(--color-ink); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21,34,56,.62) 0%, rgba(21,34,56,.86) 100%);
}
.hero-inner {
  position: relative;
  padding-block: var(--s-7) var(--s-8);
  color: var(--color-white);
  max-width: 40rem;
}
.hero h1 { color: var(--color-white); }
.hero .eyebrow { color: #F0C4B6; }
.hero-lead { font-size: 18px; line-height: 1.55; color: #E4E8EE; margin-bottom: var(--s-5); }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: 14px;
  color: #D6DDE7;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-meta li { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.hero-meta svg { width: 16px; height: 16px; flex: none; opacity: .85; }

.page-head { background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.page-head--art { position: relative; overflow: hidden; background: var(--color-limestone); }
.page-head--art .page-head__art { position: absolute; inset: 0; }
.page-head--art .page-head__art img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.page-head--art .page-head__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-limestone) 0%, var(--color-limestone) 34%, rgba(244, 240, 232, .55) 62%, rgba(244, 240, 232, 0) 100%);
}
.page-head--art .inner { position: relative; }
.page-head .inner { padding-block: var(--s-6) var(--s-7); max-width: var(--content-reading); }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 13px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-control);
  border: 1.5px solid transparent;
  cursor: pointer;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--primary { background: var(--color-brick); border-color: var(--color-brick); color: var(--color-white); }
.btn--primary:hover { background: var(--color-brick-hover); border-color: var(--color-brick-hover); color: var(--color-white); }
.btn--primary:focus-visible { outline-color: rgba(182, 70, 43, .45); }
.btn--secondary { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
.btn--secondary:hover { background: #EEF0F3; color: var(--color-ink); }
.btn--block { display: flex; width: 100%; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-steel);
  text-decoration: none;
}
.link-more:hover { color: var(--color-brick); text-decoration: underline; }
.link-more::after {
  content: "";
  width: 7px; height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}

/* --------------------------------------------------------------- badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--color-steel-soft);
  color: var(--color-ink);
  border: 1px solid rgba(65, 100, 122, .28);
}
.badge svg { width: 13px; height: 13px; flex: none; }
.badge--top { background: var(--color-brick-soft); border-color: rgba(182, 70, 43, .3); color: #7E2F1B; }
.badge-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }

.checked-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-muted);
}
.checked-note svg { width: 14px; height: 14px; flex: none; }

/* ---------------------------------------------------------------- cards */
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.card-grid--tight { gap: var(--s-3); }

.hotel-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.hotel-card:hover { border-color: #B9C2CE; box-shadow: var(--shadow-card); }
.hotel-card__media {
  display: block;
  aspect-ratio: 2 / 1;
  background: var(--color-steel-soft);
  overflow: hidden;
}
.hotel-card__media img { width: 100%; height: 100%; object-fit: cover; }
.hotel-card__media--placeholder { background: var(--color-limestone); }
.hotel-card__media--placeholder img { object-fit: contain; padding: 8px; }
.thumb--placeholder { object-fit: contain; background: var(--color-limestone); padding: 6px; }
/* A hotel page header carrying the property's own photograph. Shorter than a
   hub hero: the useful content on these pages starts immediately below. */
.hero--hotel .hero-media img { object-position: center 55%; }
/* The veil is measured per photograph when it is fetched, and arrives as one of
   these steps. The gradient still darkens downward, because the text block sits
   in the lower half, but it starts from what the image actually needs instead
   of from the one value the supplied hub heroes were graded for. */
.hero--veil-35 .hero-media::after { background: linear-gradient(180deg, rgba(21,34,56,.35) 0%, rgba(21,34,56,.50) 100%); }
.hero--veil-45 .hero-media::after { background: linear-gradient(180deg, rgba(21,34,56,.45) 0%, rgba(21,34,56,.60) 100%); }
.hero--veil-55 .hero-media::after { background: linear-gradient(180deg, rgba(21,34,56,.55) 0%, rgba(21,34,56,.70) 100%); }
.hero--veil-65 .hero-media::after { background: linear-gradient(180deg, rgba(21,34,56,.65) 0%, rgba(21,34,56,.80) 100%); }
.hero--veil-75 .hero-media::after { background: linear-gradient(180deg, rgba(21,34,56,.75) 0%, rgba(21,34,56,.88) 100%); }
.hero--veil-80 .hero-media::after { background: linear-gradient(180deg, rgba(21,34,56,.80) 0%, rgba(21,34,56,.92) 100%); }
.hero--hotel .hero-inner { padding-block: var(--s-7) var(--s-6); }

.hotel-photo { margin: 0; }
.hotel-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background: var(--color-limestone);
}
.hotel-photo--placeholder img { object-fit: contain; padding: 14px; }
.hotel-photo figcaption { margin-top: var(--s-2); }
.hotel-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.hotel-card__title { font-size: 19px; margin-bottom: 2px; }
.hotel-card__title a { color: var(--color-ink); text-decoration: none; }
.hotel-card__title a:hover { color: var(--color-brick); text-decoration: underline; }
.hotel-card__place { font-size: 14px; color: var(--color-muted); margin-bottom: var(--s-3); }
.hotel-card__metric {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: var(--s-2);
}
.hotel-card__metric svg { width: 17px; height: 17px; flex: none; color: var(--color-steel); }
.hotel-card__best { font-size: 15px; margin-bottom: var(--s-4); }
.hotel-card__best strong { font-weight: 600; }
.hotel-card__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  justify-content: space-between;
}
.hotel-card__price { font-size: 14px; color: var(--color-muted); }
.hotel-card__price b { color: var(--color-ink); font-weight: 600; }
.hotel-card--featured { box-shadow: inset 0 3px 0 0 var(--color-brick); }
.hotel-card--featured:hover { box-shadow: inset 0 3px 0 0 var(--color-brick), var(--shadow-card); }
.hotel-card, .place-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.hotel-card:hover, .place-card:hover { transform: translateY(-2px); }
.hotel-card__place { display: flex; align-items: center; gap: 5px; }
.hotel-card__place svg { width: 14px; height: 14px; flex: none; color: var(--color-steel); }
.hotel-card__stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.score {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--color-success-soft); border: 1px solid rgba(45,106,79,.22);
}
.score b { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--color-success); }
.score__of { font-size: 12px; color: var(--color-success); opacity: .8; }
.score__n { font-size: 12px; color: var(--color-muted); margin-left: 3px; }
.pill-soft {
  display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px;
  background: var(--color-steel-soft); border: 1px solid rgba(65,100,122,.22);
  font-size: 12px; font-weight: 600; color: var(--color-ink);
}
.pill-soft--muted { background: var(--color-limestone); border-color: var(--color-border); color: var(--color-muted); }
.hotel-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: auto; }
.btn--card {
  min-height: 40px;
  padding: 9px 14px;
  font-size: 14px;
  flex: 1 1 auto;
}
.btn--card .icon { width: 14px; height: 14px; }
.card-go { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 15px; color: var(--color-steel); text-decoration: none; }
.card-go:hover { color: var(--color-brick); text-decoration: underline; }
.card-go svg { width: 15px; height: 15px; transition: transform .16s ease; }
.hotel-card:hover .card-go { color: var(--color-brick); }
.hotel-card:hover .card-go svg { transform: translateX(3px); }
.place-card__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.place-card__title::after {
  content: ""; width: 7px; height: 7px;
  border-top: 2px solid var(--color-border); border-right: 2px solid var(--color-border);
  transform: rotate(45deg); flex: none;
  transition: border-color .16s ease, transform .16s ease;
}
.place-card:hover .place-card__title::after { border-color: var(--color-brick); transform: rotate(45deg) translate(2px,-2px); }
.article-card__media { display: block; aspect-ratio: 2 / 1; overflow: hidden; background: var(--color-steel-soft); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }

.rating {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 14px;
  color: var(--color-muted);
}
.rating b { font-size: 15px; color: var(--color-ink); font-weight: 600; }

/* thumbnail beside a hotel name in a comparison table */
.cell-hotel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cell-hotel__text { min-width: 0; }
.thumb {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: var(--color-steel-soft);
  border: 1px solid var(--color-border);
}
/* Lettered mark, used wherever we hold no licensed photograph of a property.
   Six tints keyed off the slug, so a long table does not read as one colour. */
.thumb--mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .02em;
  line-height: 1;
  user-select: none;
}
.thumb--t0 { background: #E7EDF2; color: #3B5C71; border-color: #CFDCE5; }
.thumb--t1 { background: #F2E7E2; color: #A04328; border-color: #E5D0C7; }
.thumb--t2 { background: #E6EEE5; color: #2F6A45; border-color: #CEDECC; }
.thumb--t3 { background: #F1EDE1; color: #7A6634; border-color: #E2DAC5; }
.thumb--t4 { background: #E9E8F0; color: #4E4A78; border-color: #D5D3E2; }
.thumb--t5 { background: #EDEAE6; color: #5A544C; border-color: #DCD7D0; }
.compare tbody tr:hover .thumb--mark { transform: scale(1.06); }
.thumb--mark { transition: transform .16s ease; }

/* Touch targets. WCAG 2.5.8 asks for 24 by 24 CSS pixels on anything that is
   not an inline link inside a sentence. The info button drew an 18 pixel
   circle, the sort buttons came out at 23, and a hotel name in a table row is
   a list control rather than prose. The circle stays 18 pixels; only the area
   that responds to a finger grows. */
.info-btn { position: relative; }
.info-btn::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
button.sort { min-height: 24px; }
.cell-hotel__text a { display: inline-block; padding-block: 3px; }

/* column heading info button and its tooltip */
.th-info { position: relative; display: inline-block; margin-left: 6px; }
.info-btn {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: help;
  vertical-align: middle;
}
.info-btn:hover { background: rgba(255, 255, 255, .18); }
.tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 9px);
  transform: translateX(-50%);
  z-index: 30;
  width: 17rem;
  max-width: 60vw;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: var(--color-white);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
  visibility: hidden;
  opacity: 0;
}
.tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--color-white);
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  transform: rotate(45deg);
}
.tooltip { display: none; }
.th-info:hover .tooltip,
.th-info.is-open .tooltip,
.info-btn:focus-visible + .tooltip { visibility: visible; opacity: 1; }

.table-explain {
  display: none;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-steel-soft);
  font-size: 14px;
  line-height: 1.45;
}
.table-explain.is-shown { display: flex; }
.table-explain b { font-weight: 600; }
.table-explain button {
  font: inherit;
  flex: none;
  margin-left: auto;
  padding: 0 6px;
  min-height: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-white);
  color: var(--color-ink);
  cursor: pointer;
}
.info-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .25); }
/* Near the right edge the balloon would leave the scroll container. */
table.compare th:last-child .tooltip { left: auto; right: 0; transform: none; }
table.compare th:last-child .tooltip::before { left: auto; right: 14px; }

/* ---- sterren ----
   Twee identieke rijen over elkaar; de bovenste wordt op breedte geknipt, zodat
   een 4,1 en een 4,4 er verschillend uitzien in plaats van allebei op vier
   sterren af te ronden. */
.stars { display: inline-block; line-height: 0; }
.stars svg { display: block; width: 80px; height: 16px; }
.stars__off { fill: var(--color-border); }
.stars__on { fill: var(--color-warning); }
.cell-rating { display: block; }
.cell-rating .num { display: block; margin-top: 4px; }


/* ---- tabel */
/* ---------------------------------------------------------------- table */
.table-wrap {
  margin-top: var(--s-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-white);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-hint {
  font-size: 13px;
  color: var(--color-muted);
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-row-alt);
}
table.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  min-width: 40rem;
}
table.compare caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
table.compare th, table.compare td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  min-height: 56px;
}
table.compare thead th {
  background: var(--color-steel);
  color: var(--color-white);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.compare tbody tr:nth-child(even) td,
table.compare tbody tr:nth-child(even) th { background: var(--color-row-alt); }
table.compare tbody tr:last-child th,
table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare th[scope="row"] {
  font-weight: 600;
  background: var(--color-white);
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 10.5rem;
  border-right: 1px solid var(--color-border);
}
table.compare th[scope="row"] a { color: var(--color-ink); text-decoration: none; }
table.compare th[scope="row"] a:hover { color: var(--color-brick); text-decoration: underline; }
.col--word { width: 10rem; }
table.compare .num { font-weight: 600; white-space: nowrap; }
table.compare .sub { display: block; font-size: 13px; font-weight: 400; color: var(--color-muted); }
/* A chip is for a short value that belongs to the cell above it: the distance
   under a walking time, the town under a hotel name. Not for a sentence, which
   is why .sub itself stays plain text. */
table.compare .chip {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-limestone);
  border: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
  white-space: nowrap;
}

.table-note { font-size: 13px; color: var(--color-muted); margin-top: var(--s-4); }
/* An empty cell. Dimmer than the muted text around it, because the point is
   that the eye passes over it and lands on the rows that carry a value. */
.nodata { color: #A7AEBB; font-weight: 600; }
/* Available to a screen reader, invisible on screen. The dash on its own says
   nothing out loud. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* table sorting controls (progressive enhancement, injected by site.js) */
table.compare thead th { overflow: visible; }
table.compare th button.sort {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
table.compare th button.sort::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .4;
}
table.compare th button.sort[data-dir="asc"]::after { transform: rotate(180deg); opacity: 1; }
table.compare th button.sort[data-dir="desc"]::after { opacity: 1; }

.table-filter { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
.table-filter label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 4px; }
.table-filter input, .table-filter select {
  font: inherit;
  font-size: 16px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #BFC7D1;
  border-radius: var(--radius-control);
  background: var(--color-white);
  color: var(--color-ink);
  max-width: 100%;
}
.table-filter input:focus, .table-filter select:focus {
  border-color: var(--color-brick);
  outline: 3px solid rgba(182, 70, 43, .28);
  outline-offset: 1px;
}
.filter-count { font-size: 13px; color: var(--color-muted); }

/* --------------------------------------------------------------- panels */
.panel {
  border-radius: var(--radius-card);
  padding: 16px 18px;
  margin-bottom: var(--s-4);
  font-size: 15px;
}
.panel p:last-child, .panel ul:last-child { margin-bottom: 0; }
.panel__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.panel__label svg { width: 15px; height: 15px; flex: none; }
.panel--tip { background: var(--color-steel-soft); border: 1px solid rgba(65,100,122,.22); }
.panel--tip .panel__label { color: var(--color-steel); }
.panel--check { background: var(--color-brick-soft); border: 1px solid #E8BCAE; }
.panel--check .panel__label { color: #8E3320; }
.panel--good { background: var(--color-success-soft); border: 1px solid rgba(45,106,79,.25); }
.panel--good .panel__label { color: var(--color-success); }
.panel--plain { background: var(--color-white); border: 1px solid var(--color-border); }

/* -------------------------------------------------------- quick verdict */
.verdict {
  background: var(--color-limestone);
  border: 1px solid rgba(21, 34, 56, .12);
  border-left: 4px solid var(--color-brick);
  border-radius: var(--radius-card);
  padding: 20px;
}
.verdict h2 { font-size: 20px; font-family: var(--font-body); font-weight: 700; margin-bottom: var(--s-4); }
.verdict dl { margin: 0; display: grid; gap: var(--s-4); }
.verdict dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 3px;
}
.verdict dd { margin: 0; font-size: 16px; }

/* ------------------------------------------------------------ fact list */
.facts { display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; margin: 0; }
.facts > div { background: var(--color-white); padding: 16px 18px; }
.facts--2col > div { border-top: 3px solid var(--color-brick); }
.facts--2col dt { color: var(--color-ink); font-size: 13px; }
.facts--2col dt svg { color: var(--color-brick); width: 17px; height: 17px; }
.facts--2col { grid-template-columns: 1fr; }
.facts--pairs { grid-template-columns: 1fr; }

/* Tags. A closed set of values (a stay type, a price band, a provenance note)
   reads faster as a chip than as a run of words inside a sentence. */
.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.tag--type { background: var(--color-steel-soft); border-color: rgba(65,100,122,.22); color: var(--color-steel); }
.tag--band { background: var(--color-limestone); border-color: var(--color-border); color: var(--color-ink); }
.tag--band-budget { background: var(--color-success-soft); border-color: rgba(45,106,79,.22); color: var(--color-success); }
.tag--band-premium { background: var(--color-brick-soft); border-color: rgba(182,70,43,.22); color: var(--color-brick); }
/* Provenance, not decoration: this claim rests on guest reports rather than an
   operator source, and the reader is entitled to know which. */
.tag--report {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-muted);
  font-weight: 500;
}
.facts dd .tag { margin-left: 2px; vertical-align: 1px; }
.facts dt { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; }
.facts dt svg { width: 15px; height: 15px; flex: none; color: var(--color-steel); }
.facts dd { margin: 0; font-size: 15px; }

/* ---------------------------------------------------------- place cards */
/* Destination tiles carrying the hub's own hero. Horizontal on a phone so a
   list of twelve places stays scannable, vertical once there is room. */
.place-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.place-card {
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: stretch;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-ink);
}
.place-card:hover { border-color: var(--color-brick); box-shadow: var(--shadow-card); }
.place-card:hover .place-card__title { color: var(--color-brick); }
.place-card__media {
  display: block;
  aspect-ratio: 2 / 1;
  background: var(--color-steel-soft);
  overflow: hidden;
}
.place-card__media img { width: 100%; height: 100%; object-fit: cover; }
.place-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 12px 14px;
  min-width: 0;
}
.place-card__title { font-weight: 600; font-size: 16px; line-height: 1.25; }
.place-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.35;
}
.place-card__meta svg { width: 15px; height: 15px; flex: none; color: var(--color-steel); }
.place-card--plain { grid-template-columns: 1fr; }
.place-card--plain .place-card__body { padding: 16px; }

/* -------------------------------------------------------------- choices */
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.choice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  text-decoration: none;
  color: var(--color-ink);
  min-height: 84px;
}
.choice:hover { border-color: var(--color-brick); color: var(--color-ink); box-shadow: var(--shadow-card); }
.choice svg { width: 20px; height: 20px; color: var(--color-steel); }
.choice b { font-weight: 600; font-size: 15px; line-height: 1.25; }
.choice span { font-size: 13px; color: var(--color-muted); line-height: 1.35; }

.pill-row { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; margin: 0 0 var(--s-4); list-style: none; }
.pill-row li { margin: 0; }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.pill:hover { border-color: var(--color-brick); color: var(--color-ink); }
.pill[aria-current="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); }

/* ------------------------------------------------------------------ map */
.map-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 16px;
}
.map-card { margin: 0; }
.map-card svg, .map-card .schematic {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border);
}
.map-card figcaption { margin-top: var(--s-3); }
.map-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: 13px; color: var(--color-muted); margin-top: var(--s-3); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.map-legend .lg-station { border-radius: 2px; }

/* ------------------------------------------------------------------ faq */
.faq { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer;
  padding: 16px 44px 16px 18px;
  font-weight: 600;
  font-size: 16px;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 22px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--color-steel);
  border-bottom: 2px solid var(--color-steel);
  transform: rotate(45deg);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 25px; }
.faq summary { background: var(--color-limestone); }
.faq summary:hover { background: #EBE7DF; }
.faq details[open] summary { background: var(--color-steel-soft); }
.faq details[open] summary { border-bottom: 1px solid var(--color-border); }
.faq .faq-body { padding: 0 18px 18px; font-size: 15px; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--color-ink); color: #D6DDE7; border-top: 4px solid var(--color-brick); }
.site-footer .container { padding-block: var(--s-7) var(--s-5); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
.footer-brand { margin-bottom: var(--s-7); max-width: 44rem; }
.site-footer h2 { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-white); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }
.site-footer a { color: #D6DDE7; text-decoration: none; font-size: 15px; }
.site-footer a:hover { color: var(--color-white); text-decoration: underline; }
.footer-brand p { font-size: 15px; max-width: 34rem; }
.footer-brand .logo { color: var(--color-white); margin-bottom: var(--s-3); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.16); margin-top: var(--s-6); padding-top: var(--s-5); font-size: 14px; }
.footer-legal p { max-width: 46rem; }
.footer-legal p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------- mobile sticky CTA */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-height: 64px;
  padding: 8px var(--gutter);
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(21,34,56,.1);
}
.sticky-cta__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sticky-cta .btn { min-height: 44px; padding: 10px 16px; font-size: 15px; }
body.has-sticky-cta { padding-bottom: 72px; }

/* --------------------------------------------------------------- extras */
.disclosure {
  font-size: 13px;
  color: var(--color-muted);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: 12px 14px;
  margin-bottom: var(--s-5);
}
.disclosure p:last-child { margin-bottom: 0; }

.split { display: grid; gap: var(--s-6); }
.stack > * + * { margin-top: var(--s-5); }
.anchor-nav { padding: 0; margin: 0 0 var(--s-6); list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.anchor-nav li { margin: 0; }
.anchor-nav a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 7px 13px;
  border-radius: var(--radius-control);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-ink);
}
.anchor-nav a:hover { border-color: var(--color-brick); }

.index-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.index-list a { color: var(--color-ink); }

/* A trailing "See all" link needs room, or it reads as part of the last card. */
.section .card-grid + p,
.section .place-grid + p,
.section .choice-grid + p,
.section .facts + p { margin-top: var(--s-6); margin-bottom: 0; }

.callout-quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.35;
  max-width: 34ch;
  border-left: 4px solid var(--color-brick);
  padding-left: var(--s-4);
  margin: var(--s-6) 0;
}
@media (min-width: 48rem) {
  .callout-quote { font-size: 26px; max-width: 22ch; }
}

.datapoint { display: flex; flex-direction: column; gap: 2px; }
.datapoint b { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1.05; }
.datapoint span { font-size: 14px; color: var(--color-muted); }
.datapoint::before { content: ""; display: block; width: 28px; height: 3px; background: var(--color-brick); border-radius: 2px; margin-bottom: 8px; }

hr.divider { border: 0; border-top: 1px solid var(--color-border); margin: var(--s-7) 0; }

.lost-note { margin-top: var(--s-6); max-width: var(--content-reading); }

/* --------------------------------------------------------- 768px and up */
@media (min-width: 48rem) {
  :root { --gutter: 24px; --section: 60px; }
  body { font-size: 17px; }
  h1 { font-size: 46px; line-height: 1.05; letter-spacing: -.025em; }
  h2 { font-size: 34px; }
  h3 { font-size: 24px; }
  h4 { font-size: 19px; }
  .lead { font-size: 20px; line-height: 1.6; }
  .hero-lead { font-size: 20px; line-height: 1.6; }
  .hero-inner { padding-block: var(--s-8) var(--s-9); }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  table.compare th[scope="row"] { min-width: 15rem; }
  /* Balanced columns, wide view only. Below this the table scrolls sideways,
     the first column is sticky with a minimum of its own, and fixed widths
     made the hotel name overflow its cell onto the walking time. */
  table.compare { table-layout: fixed; }
  .col--walk { width: 8.5rem; }
  .col--number { width: 7.5rem; }
  .col--band { width: 10.5rem; }
  .thumb { width: 64px; height: 64px; border-radius: 50%; }
  .thumb--mark { font-size: 20px; }
  .tooltip { display: block; }
  .table-explain, .table-explain.is-shown { display: none; }
  .place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .place-card { grid-template-columns: 1fr; }
  .place-card__body { padding: 14px 16px 16px; }
  .section-head { margin-bottom: var(--s-7); }
  .table-wrap { margin-top: var(--s-8); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verdict { padding: 24px; }
  .verdict dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--media { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .split--media > * { display: flex; }
  .split--media > * > .panel { flex: 1; }
}

/* -------------------------------------------------------- 1024px and up */
@media (min-width: 64rem) {
  :root { --gutter: 32px; --section: 68px; }
  .header-bar { min-height: 76px; }
  .nav-toggle { display: none; }
  #site-nav { display: block; width: auto; margin-left: auto; padding-bottom: 0; }
  .nav-list { flex-direction: row; align-items: center; gap: var(--s-1); }
  .nav-list > li > a { padding: 8px 10px; border-radius: 0; }
  .nav-list > li > a:hover { background: transparent; border-bottom-color: rgba(182,70,43,.4); }

  .has-sub { position: relative; flex-wrap: nowrap; }
  .has-sub > a { flex: none; }
  .nav-sub-toggle { width: 24px; height: 24px; margin-left: -4px; }
  .nav-sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 15rem;
    max-width: 20rem;
    margin: 0;
    padding: var(--s-2);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    max-height: 70vh;
    overflow-y: auto;
  }
  .has-sub:hover > .nav-sub,
  .has-sub:focus-within > .nav-sub,
  .has-sub.is-open > .nav-sub { display: block; }
  /* The last two menus would push a left aligned panel past the viewport. */
  .nav-list > li:nth-last-child(-n+2) .nav-sub { left: auto; right: 0; }
  h1 { font-size: 56px; }
  h2 { font-size: 38px; letter-spacing: -.015em; }
  .hero-inner { max-width: 44rem; }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .place-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sticky-cta { display: none; }
  body.has-sticky-cta { padding-bottom: 0; }
  .split--sidebar { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-7); }
  .hotel-lead { grid-template-columns: 58% 42%; gap: var(--s-6); display: grid; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .sticky-cta, .anchor-nav, .table-filter { display: none; }
  body { background: #fff; }
}

/* sprite is inlined per page and must never render */
.icon-sprite{display:none}
.icon{width:1.1em;height:1.1em;fill:none;stroke:currentColor}
.logo-mark{display:block;width:30px;height:30px;flex:none;color:var(--color-ink)}
.footer-brand .logo-mark{color:var(--color-white)}
.gtm-noscript{display:none;visibility:hidden}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.map-legend .lg-venue{background:#B6462B}
.map-legend .lg-hotel{background:#152238}
.map-legend .lg-this{background:#41647A}
textarea{font:inherit;font-size:16px;width:100%;min-height:9rem;padding:10px 12px;border:1px solid #BFC7D1;border-radius:var(--radius-control);background:#fff;color:var(--color-ink)}
textarea:focus{border-color:var(--color-brick);outline:3px solid rgba(182,70,43,.28)}
.table-filter > div{flex:1 1 16rem;min-width:0}