/* ==========================================================================
   Korea Clinics - single stylesheet (SSOT)
   Edit only this file. Do not add per-page <style> blocks.
   ========================================================================== */

:root {
  /* palette */
  --ink:        #111827;
  --ink-2:      #374151;
  --ink-3:      #6b7280;
  --line:       #e5e7eb;
  --line-2:     #f0f2f5;
  --bg:         #ffffff;
  --bg-soft:    #f7f9fb;
  --bg-tint:    #eef4fb;

  --brand:      #14568c;
  --brand-dark: #0e3f68;
  --brand-soft: #e8f0f8;
  --accent:     #0f9b8e;
  --accent-soft:#e6f5f3;
  --warn:       #b45309;
  --warn-soft:  #fef3c7;

  /* type scale - exactly five sizes, do not add more */
  --fs-xs:  0.8125rem;   /* 13px - meta, badges */
  --fs-sm:  0.9375rem;   /* 15px - secondary body */
  --fs-md:  1.0625rem;   /* 17px - body */
  --fs-lg:  1.5rem;      /* 24px - section / card heading */
  --fs-xl:  2.25rem;     /* 36px - page heading */

  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 1px 2px rgba(17,24,39,.05), 0 4px 16px rgba(17,24,39,.06);
  --shadow-lg: 0 2px 6px rgba(17,24,39,.06), 0 12px 32px rgba(17,24,39,.10);
  --maxw:      1180px;
  --gutter:    24px;

  /* Light only, by project rule. Do not add a prefers-color-scheme: dark block.
     This also keeps form controls (search input, sort select) light when the
     operating system is set to dark. */
  color-scheme: light;
}

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

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

body {
  margin: 0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { line-height: 1.3; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 820px; }

/* --------------------------------------------------------- prototype flag */
.proto-bar {
  background: var(--warn-soft);
  color: var(--warn);
  font-size: var(--fs-xs);
  text-align: center;
  padding: 7px 16px;
  border-bottom: 1px solid var(--line);
}
.proto-bar strong { font-weight: 700; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 28px;
  height: 68px;
}
.logo {
  font-size: var(--fs-md); font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo span { color: var(--brand); }
.main-nav { display: flex; gap: 22px; margin-left: auto; }
.main-nav a {
  font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.main-nav a:hover, .main-nav a[aria-current="page"] {
  color: var(--brand); border-bottom-color: var(--brand); text-decoration: none;
}
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 12px; color: var(--ink); cursor: pointer;
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-block; padding: 11px 20px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 600; border: 1px solid transparent;
  cursor: pointer; text-align: center; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-outline { background: transparent; color: var(--brand); border-color: var(--line); }
.btn-outline:hover { border-color: var(--brand); background: var(--brand-soft); }
.btn-sm { padding: 7px 14px; font-size: var(--fs-xs); }

/* ------------------------------------------------------------------- hero */
.hero {
  background: linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  padding: 64px 0 56px;
}
.hero h1 { max-width: 18ch; margin-bottom: .35em; }
.hero .lede { font-size: var(--fs-md); color: var(--ink-2); max-width: 62ch; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 32px; }
.hero-stats div { min-width: 120px; }
.hero-stats b { display: block; font-size: var(--fs-lg); color: var(--brand); line-height: 1.2; }
.hero-stats span { font-size: var(--fs-xs); color: var(--ink-3); }

/* ------------------------------------------------------------------ search */
.searchbox { margin-top: 28px; max-width: 640px; position: relative; }
.searchbox input {
  width: 100%; padding: 15px 18px; font-size: var(--fs-md); font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); box-shadow: var(--shadow);
}
.searchbox input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); max-height: 380px; overflow-y: auto; display: none;
}
.search-results.is-open { display: block; }
.search-results a {
  display: block; padding: 11px 16px; border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-sm); color: var(--ink);
}
.search-results a:last-child { border-bottom: 0; }
.search-results a:hover { background: var(--bg-soft); text-decoration: none; }
.search-results .r-kind { font-size: var(--fs-xs); color: var(--ink-3); display: block; }
.search-results .r-empty { padding: 14px 16px; font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------------------------------------------------------------- sections */
.section { padding: 56px 0; }
.section + .section { border-top: 1px solid var(--line-2); }
.section-soft { background: var(--bg-soft); }
.section-head { margin-bottom: 28px; }
.section-head h2 { margin-bottom: .25em; }
.section-head p { color: var(--ink-3); font-size: var(--fs-sm); margin: 0; }

/* A second run of cards under the first - the guides fetched from the content
   server sit below the ones written here. Without the top margin the heading
   lands on the last row of cards, because .grid only spaces its own children. */
.list-more { margin: 52px 0 24px; }

/* -------------------------------------------------------------- card grids */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: block; padding: 20px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius); color: inherit;
}
.card:hover { border-color: var(--brand); box-shadow: var(--shadow); text-decoration: none; }
.card h3 { margin-bottom: .25em; font-size: var(--fs-md); }
.card p { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; }
.card .count { font-size: var(--fs-xs); color: var(--brand); font-weight: 600; }

/* --------------------------------------------------------------- breadcrumb */
.breadcrumb {
  font-size: var(--fs-xs); color: var(--ink-3);
  padding: 14px 0; border-bottom: 1px solid var(--line-2);
}
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb span { margin: 0 7px; opacity: .5; }

/* -------------------------------------------------------------- page header */
.page-head { padding: 40px 0 32px; border-bottom: 1px solid var(--line); }
.page-head .eyebrow {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 10px;
}
.page-head .lede { font-size: var(--fs-md); color: var(--ink-2); max-width: 68ch; margin-bottom: 0; }
.page-head .result-count { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 14px; }

/* -------------------------------------------------------------- two column */
.layout { display: grid; grid-template-columns: 268px 1fr; gap: 40px; padding: 36px 0 64px; }
.layout-reverse { grid-template-columns: 1fr 300px; }

.sidebar { align-self: start; position: sticky; top: 92px; }
.sidebar-block { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; }
.sidebar-block > h3 {
  margin: 0; padding: 13px 16px; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
}
.sidebar-list { list-style: none; margin: 0; padding: 8px 0; max-height: 420px; overflow-y: auto; }
.sidebar-list li a {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 7px 16px; font-size: var(--fs-sm); color: var(--ink-2);
}
.sidebar-list li a:hover { background: var(--bg-soft); color: var(--brand); text-decoration: none; }
.sidebar-list li a[aria-current="page"] { color: var(--brand); font-weight: 600; background: var(--brand-soft); }
.sidebar-list .sub a { padding-left: 30px; font-size: var(--fs-xs); color: var(--ink-3); }
.sidebar-list .n { font-size: var(--fs-xs); color: var(--ink-3); flex: none; }

/* ---------------------------------------------------------- listing results */
.results-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line-2);
}
.results-bar .count { font-size: var(--fs-sm); color: var(--ink-3); margin-right: auto; }
.results-bar select {
  font-family: inherit; font-size: var(--fs-sm); padding: 8px 12px; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
}

.listing { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.listing:last-child { border-bottom: 0; }
.listing-thumb {
  flex: none; width: 84px; height: 84px; border-radius: var(--radius);
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.03em;
}
.listing-main { min-width: 0; }
.listing-main h3 { margin-bottom: .2em; }
.listing-main h3 a { color: var(--ink); }
.listing-main h3 a:hover { color: var(--brand); }
.listing-meta { font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 8px; }
.listing-meta b { color: var(--ink-2); font-weight: 600; }
.listing-summary { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 10px; }
.listing-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.tag {
  display: inline-block; font-size: var(--fs-xs); padding: 3px 9px;
  border-radius: 100px; background: var(--bg-soft); color: var(--ink-3);
  border: 1px solid var(--line);
}
.tag:hover { color: var(--brand); border-color: var(--brand); text-decoration: none; }
.tag-verified { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.tag-lang { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

.empty-state {
  padding: 48px 24px; text-align: center; color: var(--ink-3);
  border: 1px dashed var(--line); border-radius: var(--radius); font-size: var(--fs-sm);
}

/* ------------------------------------------------------------- fact table */
.facts { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0 0 28px; }
.facts dl { margin: 0; display: grid; grid-template-columns: 190px 1fr; }
.facts dt, .facts dd {
  margin: 0; padding: 12px 16px; font-size: var(--fs-sm);
  border-bottom: 1px solid var(--line-2);
}
.facts dt { color: var(--ink-3); background: var(--bg-soft); font-weight: 600; }
.facts dd { color: var(--ink); }
.facts dl > :nth-last-child(-n+2) { border-bottom: 0; }

/* -------------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--line); margin-top: 8px; }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  cursor: pointer; padding: 16px 0; font-weight: 600; font-size: var(--fs-md);
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-weight: 400; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { font-size: var(--fs-sm); color: var(--ink-2); padding-bottom: 16px; margin: 0; }

/* ------------------------------------------------- markdown article bits */
.table-wrap { overflow-x: auto; margin: 0 0 24px; }
.table-wrap table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.table-wrap th, .table-wrap td {
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.table-wrap th { background: var(--bg-soft); font-weight: 700; color: var(--ink); }
.table-wrap td { color: var(--ink-2); }
.table-wrap tr:last-child td { border-bottom: 0; }

.src-list { font-size: var(--fs-sm); color: var(--ink-2); padding-left: 1.25em; }
.src-list li { margin-bottom: 10px; }
.src-list a { word-break: break-all; font-size: var(--fs-xs); }

.prose h2 + p, .prose h3 + p { margin-top: 0; }
.prose ul li, .prose ol li { color: var(--ink-2); margin-bottom: 6px; }
.prose code {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; font-size: .92em;
}

/* ----------------------------------------------------------------- prose */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 28px; }
.prose > p { color: var(--ink-2); }

.callout {
  border-left: 3px solid var(--brand); background: var(--bg-soft);
  padding: 16px 20px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm); color: var(--ink-2); margin: 0 0 24px;
}
.callout strong { color: var(--ink); }

.checklist { list-style: none; padding: 0; margin: 0 0 24px; }
.checklist li {
  position: relative; padding: 7px 0 7px 26px; font-size: var(--fs-sm); color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.checklist li::before {
  content: "\2713"; position: absolute; left: 0; top: 7px;
  color: var(--accent); font-weight: 700;
}

/* --------------------------------------------------------- clinic profile */
.profile-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.profile-head .listing-thumb { width: 96px; height: 96px; }
.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.doctor {
  padding: 14px 0; border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-sm);
}
.doctor:last-child { border-bottom: 0; }
.doctor b { color: var(--ink); }
.doctor span { color: var(--ink-3); display: block; font-size: var(--fs-xs); }

.aside-box {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
  background: var(--bg-soft); font-size: var(--fs-sm); position: sticky; top: 92px;
}
.aside-box h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.aside-box dl { margin: 0; }
.aside-box dt { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 12px; }
.aside-box dd { margin: 0; color: var(--ink); }

/* ==========================================================================
   Media components
   ========================================================================== */

/* ---- card shell (text only, photographs never go inside cards) -------- */
.card { padding: 0; overflow: hidden; }
.card-body { padding: 20px; }

/* ---- full-bleed image header (home hero, section bands, page heads) ---- */
/* The photograph sits behind the text, so the block keeps a dark base colour.
   That way the section still reads correctly in the moment before a lazily
   loaded background arrives. */
.media-hero { position: relative; overflow: hidden; isolation: isolate; background: #0d2438; }
.media-hero > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%; z-index: -2;
}
.media-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
              rgba(8,26,44,.70) 0%, rgba(8,26,44,.50) 45%, rgba(8,26,44,.18) 100%);
}
.media-hero, .media-hero h1, .media-hero h2, .media-hero p { color: #fff; }
.media-hero h1, .media-hero .lede, .band h2, .band p {
  text-shadow: 0 1px 3px rgba(6,20,34,.45);
}
.media-hero .eyebrow { color: #9fd0f5; }
.media-hero .lede { color: rgba(255,255,255,.90); }
.media-hero .result-count { color: rgba(255,255,255,.70); }
.media-hero .hero-stats b { color: #fff; }
.media-hero .hero-stats span { color: rgba(255,255,255,.72); }
.media-hero a { color: #cfe6fa; }

.hero.media-hero { padding: 92px 0 84px; border-bottom: 0; }
.page-head.media-hero { padding: 56px 0 48px; border-bottom: 0; }

/* ---- section band (location / CTA strips) ----------------------------- */
.band {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 64px 0; background: #0d2438;
}
.band > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%; z-index: -2;
}
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,26,44,.72), rgba(8,26,44,.62));
}
.band, .band h2, .band p { color: #fff; }
.band .section-head p { color: rgba(255,255,255,.82); }
.band .card {
  background: rgba(10,28,46,.55); border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(3px);
}
.band .card h3 { color: #fff; }
.band .card p { color: rgba(255,255,255,.80); }
.band .card .count { color: #9fd0f5; }
.band .card:hover { border-color: rgba(255,255,255,.55); background: rgba(10,28,46,.72); }

/* ==========================================================================
   Location maps
   Boxes are positioned in percentages of the SVG viewBox, so the figure has to
   keep the viewBox aspect ratio for the leader lines to meet their labels.
   ========================================================================== */
.mapcity + .mapcity { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--line-2); }
.mapcity--empty .listing-tags { gap: 8px; }
.mapcity h3 {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}

.mapfig { position: relative; margin: 0 auto; max-width: 1000px; }
.mapfig--compact { max-width: 780px; }
.mapfig > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.mp-d { fill: #e9eef4; stroke: #fff; stroke-width: 2; }
.mp-d.is-on { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 2.5; }
/* Merged silhouette: the internal district seams are painted over so the city
   reads as one place. */
.mp-d.is-merged { stroke: var(--brand-soft); stroke-width: 3; paint-order: stroke; }
.mp-lead { fill: none; stroke: var(--brand); stroke-width: 2; opacity: .55; }
.mp-dot { fill: var(--brand); }

.mp-box {
  position: absolute; display: block; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 14px; box-shadow: var(--shadow); color: inherit;
}
.mp-box:hover {
  border-color: var(--brand); box-shadow: var(--shadow-lg); text-decoration: none;
}
.mp-box-t {
  display: block; font-size: var(--fs-xs); font-weight: 700;
  color: var(--brand); letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-box-n {
  display: block; font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px;
}

/* ---- split: image on one side, content on the other ------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.split-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.split-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.split-body h2 { margin-top: 0; }

/* ---- cover image on detail pages -------------------------------------- */
.cover { border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; }
.cover img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.cover--tall img { aspect-ratio: 16 / 9; }

/* ---- listing thumbnail becomes a photo when one is available ---------- */
.listing-thumb.has-photo { padding: 0; overflow: hidden; }
.listing-thumb.has-photo img { width: 100%; height: 100%; object-fit: cover; }

.figure-note {
  font-size: var(--fs-xs); color: var(--ink-3); margin-top: 8px;
}

.further { border-top: 1px solid var(--line); }
.further .figure-note { margin-top: 18px; }
.further .figure-note a { word-break: break-all; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  border-top: 1px solid var(--line); background: var(--bg-soft);
  padding: 48px 0 32px; margin-top: 40px; font-size: var(--fs-sm);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.footer-grid h4 {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin: 0 0 12px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 7px; }
.footer-grid a { color: var(--ink-2); font-size: var(--fs-sm); }
.footer-note {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-3);
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .layout, .layout-reverse { grid-template-columns: 1fr; gap: 28px; }
  .split { grid-template-columns: 1fr; gap: 24px; }
  .sidebar, .aside-box { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --fs-xl: 1.75rem; --fs-lg: 1.25rem; --gutter: 18px; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--bg);
    border-bottom: 1px solid var(--line); padding: 8px 0; box-shadow: var(--shadow);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px var(--gutter); border-bottom: 0; }
  .nav-toggle { display: block; }
  .site-header { position: relative; }
  .header-inner { position: relative; }
  /* A map squeezed to phone width turns the label boxes into unreadable
     stubs, so the figure keeps a workable width and scrolls sideways. */
  .mapcity { overflow-x: auto; padding-bottom: 10px; }
  .mapfig { min-width: 660px; }
  .mapfig--compact { min-width: 520px; }

  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero { padding: 40px 0 36px; }
  .hero.media-hero { padding: 56px 0 48px; }
  .page-head.media-hero { padding: 40px 0 34px; }
  .band { padding: 44px 0; }
  .cover img { aspect-ratio: 16 / 9; }
  .facts dl { grid-template-columns: 1fr; }
  .facts dt { border-bottom: 0; padding-bottom: 0; background: transparent; }
  .facts dd { padding-top: 4px; }
  .listing { flex-direction: column; gap: 12px; }
  .listing-thumb { width: 56px; height: 56px; font-size: var(--fs-md); }
  .footer-grid { grid-template-columns: 1fr; }
}

@media print {
  .site-header, .site-footer, .sidebar, .proto-bar, .searchbox { display: none; }
}