/* ============================================================================
   worldheritagex — museum / atlas design (Claude Design "Plate", Direction B)
   Bodoni Moda (display) + Archivo (labels/body), ink + ink-blue accent.
   Applies to the per-site Plate page (.whx-plate) and country browse (.whx-browse).
   No rounded corners, no shadows-as-crutch, hairline rules, gallery white.
   ========================================================================== */

:root {
  --whx-paper:  #ffffff;
  --whx-ink:    #16181c;
  --whx-blue:   #1c3d5a;   /* the one restrained accent */
  --whx-muted:  #6a6f76;
  --whx-faint:  #8a8f96;
  --whx-line:   #e3e2dd;
  --whx-line2:  #ecebe6;
  --whx-canvas: #e7e5df;
  --whx-serif:  'Newsreader', Georgia, 'Times New Roman', serif;
  --whx-sans:   'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* spacing scale — one consistent rhythm everywhere */
  --whx-gut:   56px;  /* horizontal section gutter (desktop) */
  --whx-sec:   56px;  /* vertical section padding */
  --whx-max:   1200px;
}
/* CD "Responsive Pass" step 1: the page gutter was a flat 56px down to 320px, cramping
   every page on phone (content ~248px in a 360px screen). Scale it down so every surface
   that uses var(--whx-gut) — main, content, header, footer, hero, sections — breathes on
   small screens at once. Desktop (>900px) unchanged. */
@media (max-width: 900px) { :root { --whx-gut: 40px; } }
@media (max-width: 560px) { :root { --whx-gut: 20px; } }
@media (max-width: 380px) { :root { --whx-gut: 16px; } }

/* page canvas */
body.whx-on,
.whx-plate, .whx-browse { font-family: var(--whx-sans); color: var(--whx-ink); }

/* Bodoni display has negative left side-bearing that visually clips the first
   glyph against a container edge. A hair of left padding compensates without
   shifting the optical alignment. Applied to all big serif headings. */
.whx-name, .whx-browse__title, .whx-cgroup__name, .whx-hero__title,
.whx-mv__name, .whx-tile__name, .whx-card__name, .whx-row__name { padding-left: .02em; }

/* ---- shared button language: typographic, square, hairline ---- */
.whx-btn, .whx-qa {
  font-family: var(--whx-sans);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .12em;
  display: inline-block;
  transition: background .2s, color .2s, border-color .2s;
}

/* =================== PER-SITE PLATE PAGE =================== */
.whx-plate {
  max-width: 720px;
  margin: 0 auto;
  background: var(--whx-paper);
  padding: 52px 56px 44px;
}
.whx-bar {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1.5px solid var(--whx-ink);
  padding-bottom: 12px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--whx-ink);
}
.whx-bar__meta { color: var(--whx-muted); }
.whx-bar__lnk { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.whx-bar__lnk:hover { color: var(--whx-blue); border-bottom-color: var(--whx-blue); }
.whx-eyebrow {
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--whx-faint); margin: 26px 0 0;
}
.whx-name {
  font-family: var(--whx-serif); font-weight: 500;
  font-size: 50px; line-height: 1.03; letter-spacing: -.01em;
  color: var(--whx-ink); margin: 14px 0 0;
}
/* UNESCO names embed inline markup: <i>/<em> for foreign terms (render as real italics),
   <small> for the Auschwitz subtitle (a smaller muted line under the name), <u> diacritics. */
.whx-name em { font-style: italic; }
.whx-name__sub { display: block; margin-top: 10px; font-size: 21px; font-style: italic; font-weight: 500; color: var(--whx-muted); letter-spacing: 0; line-height: 1.2; }
.whx-name__u { text-decoration: underline; text-underline-offset: 2px; }
.whx-loc {
  font-family: var(--whx-serif); font-style: italic; font-weight: 400;
  font-size: 20px; color: var(--whx-muted); margin: 14px 0 0;
}
.whx-photos-line { margin: 22px 0 0; }
.whx-photos {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--whx-sans); font-size: 12.5px; letter-spacing: .04em;
  text-transform: none; color: var(--whx-ink);
  border-bottom: 1px solid #c8c9cc; padding-bottom: 3px; text-decoration: none;
}
.whx-photos:hover { background: rgba(22,24,28,.05); }

.whx-significance { margin: 30px 0 0; }
.whx-significance__label {
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--whx-faint); margin: 0 0 10px;
}
.whx-criteria { margin: 0; padding: 0; list-style: none; }
.whx-criteria li {
  font-size: 14px; line-height: 1.5; color: var(--whx-muted);
  padding: 8px 0 8px 18px; border-top: 1px solid var(--whx-line2);
  position: relative;
}
.whx-criteria li:first-child { border-top: 0; }
.whx-criteria li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 6px; height: 6px; background: var(--whx-blue);
}

.whx-details { margin: 34px 0 0; }
/* Filled ink-blue so it reads unmistakably as the primary CLICKABLE action,
   not a section heading/rule. */
.whx-btn--primary {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--whx-blue); color: #fff;
  padding: 22px 26px;
  font-weight: 600; font-size: 15px; letter-spacing: .16em;
}
.whx-btn--primary:hover { background: var(--whx-ink); color: #fff; }
.whx-btn--primary .whx-arrow { font-size: 20px; font-weight: 400; transition: transform .25s; display: inline-block; }
.whx-btn--primary:hover .whx-arrow { transform: translateX(4px); }
/* CD "Tours Relabel": the Plate CTA — compass icon + "Tours & Tickets" + a quiet subline
   ("Book experiences on GetYourGuide") so it's honest about the destination and reads
   distinct from the small card "Tours" button and the "Things to Do" plan button. */
.whx-cta__l { display: flex; align-items: center; gap: 14px; }
.whx-cta__ico { width: 26px; height: 26px; flex: none; display: inline-flex; }
.whx-cta__ico svg { width: 26px; height: 26px; display: block; }
.whx-cta__txt { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.whx-cta__lab { font-size: 14px; font-weight: 700; letter-spacing: .16em; }
.whx-cta__sub { font-family: var(--whx-sans); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #aab8c6; }

.whx-plan__title {
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--whx-faint); margin: 36px 0 14px;
}
.whx-plan {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--whx-line); border-left: 1px solid var(--whx-line);
}
.whx-btn--plan {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; font-size: 12.5px; letter-spacing: .08em;
  color: var(--whx-ink);
  border-right: 1px solid var(--whx-line); border-bottom: 1px solid var(--whx-line);
}
.whx-btn--plan:hover { background: rgba(22,24,28,.045); color: var(--whx-blue); }
.whx-plan__arrow { color: #aeb2b7; }

/* location row (Brief #9): country name (left) + marks pair (right).
   Marks = tight-cropped type icon | hairline rule | flag, all 28px, centred. */
.whx-locrow { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; }
.whx-locrow .whx-loc { margin: 0; }
.whx-loc__lnk { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.whx-loc__lnk:hover { border-bottom-color: var(--whx-muted); }
.whx-marks { display: inline-flex; align-items: center; gap: 14px; flex: none; text-decoration: none; }
.whx-marks__rule { width: 1px; height: 24px; background: var(--whx-line); flex: none; }
.whx-typemark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--whx-blue); line-height: 0; transition: color .15s ease; }
.whx-typemark svg { width: 28px; height: 28px; display: block; }
a.whx-typemark:hover { color: var(--whx-ink); }
.whx-flag { display: inline-flex; flex: none; height: 28px; min-width: 37px; border: 1px solid var(--whx-line); line-height: 0; transition: border-color .15s ease; }
/* aspect-ratio reserves the box before the lazy flag paints (flagcdn w80 is 4:3),
   so the marks row never reflows on load — CLS guard for the one <img> on the page. */
.whx-flag img { height: 28px; width: auto; aspect-ratio: 4 / 3; display: block; }
a.whx-flag:hover { border-color: #c4ccd4; }
.whx-photos-line { margin-top: 18px; }
@media (max-width: 600px) {
  .whx-locrow { flex-direction: column; align-items: center; gap: 14px; }
}

/* lazy OpenStreetMap embed */
.whx-map { margin: 28px 0 0; border: 1px solid var(--whx-line); background: #f4f3ef; }
.whx-map__load {
  display: block; width: 100%; padding: 18px; cursor: pointer;
  background: transparent; border: 0; font-family: var(--whx-sans);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--whx-blue);
  transition: background .2s;
}
.whx-map__load:hover { background: rgba(28,61,90,.06); }
.whx-map--live { background: none; }
.whx-map iframe { display: block; width: 100%; height: 320px; border: 0; }

/* Kayak AI nearest-airport helper */
.whx-ai { margin: 16px 0 0; }
.whx-ai__lead { font-size: 12.5px; color: var(--whx-muted); margin: 0 0 10px; line-height: 1.5; }
.whx-ai__link { color: var(--whx-blue); text-decoration: none; border-bottom: 1px solid var(--whx-blue); }
/* quiet supporter aside between the affiliate buttons and the Kayak helper */
.whx-support { font-family: var(--whx-serif); font-style: italic; font-size: 13.5px; color: var(--whx-faint); margin: 18px 0 0; line-height: 1.5; }
.whx-ai__link:hover { color: var(--whx-ink); border-bottom-color: var(--whx-ink); }
.whx-ai__box { display: flex; align-items: stretch; border: 1px solid var(--whx-line); }
.whx-ai__prompt {
  flex: 1 1 auto; font-family: var(--whx-sans); font-size: 12px; color: var(--whx-ink);
  padding: 11px 14px; line-height: 1.4; background: #f4f3ef;
}
.whx-ai__copy {
  flex: none; font-family: var(--whx-sans); font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; background: var(--whx-blue); border: none; cursor: pointer;
  padding: 0 18px; transition: background .15s;
}
.whx-ai__copy:hover { background: var(--whx-ink); }
.whx-ai__copy.is-copied { background: var(--whx-ink); }

.whx-coords { margin: 14px 0 0; font-size: 12px; letter-spacing: .04em; color: var(--whx-faint); }
.whx-coords__label { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: var(--whx-faint); }
.whx-coords a {
  font-size: 12px; letter-spacing: .06em; color: var(--whx-faint);
  text-decoration: none; text-transform: none;
}
.whx-coords a:hover { color: var(--whx-blue); }

.whx-disclaimer {
  font-size: 10.5px; color: #aeb2b7; margin: 30px 0 0; line-height: 1.6;
}

/* /browse index of all hubs */
/* /numbers - the catalogue in reference-number order */
.whx-numbers__intro { font-family: var(--whx-serif); font-style: italic; font-size: 16px; color: var(--whx-muted); margin: 0 0 28px; max-width: 60ch; line-height: 1.5; }
.whx-numbers__list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--whx-ink); }
.whx-numbers__list li { display: flex; align-items: baseline; gap: 18px; padding: 12px 2px; border-bottom: 1px solid var(--whx-line2); }
.whx-numbers__no { flex: none; width: 56px; font-family: var(--whx-sans); font-size: 12px; font-weight: 500; letter-spacing: .12em; color: #b6b5af; font-variant-numeric: tabular-nums; }
.whx-numbers__name { flex: 1 1 auto; min-width: 0; font-family: var(--whx-serif); font-weight: 500; font-size: 18px; color: var(--whx-ink); text-decoration: none; transition: color .15s; }
.whx-numbers__name:hover { color: var(--whx-blue); }
.whx-numbers__meta { flex: none; font-size: 12px; color: var(--whx-faint); text-align: right; }
.whx-numbers__photos {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; color: var(--whx-faint); border: 1px solid var(--whx-line);
  transition: color .15s, border-color .15s, background-color .15s; align-self: center;
}
.whx-numbers__photos:hover { color: var(--whx-blue); border-color: var(--whx-blue); background: #f1f0ea; }
.whx-numbers__photos svg { display: block; }
@media (max-width: 600px) {
  .whx-numbers__list li { flex-wrap: wrap; gap: 4px 14px; }
  .whx-numbers__meta { width: 100%; text-align: left; }
}

.whx-index__h1 {
  font-family: var(--whx-serif); font-weight: 500; font-size: 44px; color: var(--whx-ink);
  margin: 12px 0 36px; line-height: 1.05;
}
.whx-index__group { margin-bottom: 40px; }
.whx-index__title {
  font-family: var(--whx-serif); font-weight: 500; font-size: 24px; color: var(--whx-ink);
  border-bottom: 1.5px solid var(--whx-ink); padding-bottom: 10px; margin: 0 0 16px;
}
.whx-index__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px;
}
.whx-index__list li { border-bottom: 1px solid var(--whx-line2); }
.whx-index__list a {
  display: block; padding: 10px 0; color: var(--whx-ink); text-decoration: none;
  font-size: 14px; transition: color .15s;
}
.whx-index__list a:hover { color: var(--whx-blue); }
@media (max-width: 900px) { .whx-index__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .whx-index__list { grid-template-columns: 1fr; } }

/* ===== explore-more block at foot of a site page (Claude Design Brief #5) ===== */
.whx-explore { margin: 44px 0 0; padding-top: 38px; border-top: 1.5px solid var(--whx-ink); }
.whx-explore__eyebrow {
  font-family: var(--whx-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: #9aa0a6; margin: 0;
}
.whx-explore__title {
  font-family: var(--whx-serif); font-weight: 500; font-size: 24px; color: var(--whx-ink);
  line-height: 1.1; margin: 7px 0 0;
}
/* CD "Inscribed Info" Part 2: 18px under a 24px Bodoni title fought the page's airy
   ~44-56px rhythm; 30px is a half-step of the section rhythm, so it sits in the system. */
.whx-explore__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.whx-explore__filterwrap { display: flex; align-items: center; gap: 9px; }
.whx-explore__filterlabel { font-family: var(--whx-sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #9aa0a6; }
.whx-explore__filter {
  font-family: var(--whx-sans); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--whx-ink); background: var(--whx-paper); border: 1px solid #d8d7d0; padding: 7px 30px 7px 13px;
  border-radius: 0; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2316181c' stroke-width='1.2'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
}
.whx-explore__filter:hover, .whx-explore__filter:focus { border-color: var(--whx-blue); outline: none; }

/* ---- unified control region (Claude Design Brief #6) ----
   Header rule (set on .whx-browse__head) -> category strip -> controls bar,
   stitched into one bordered stack: equal-width plates, no gaps, no loose bands.
   On a hub page the strip IS the type filter; the redundant dropdown is gone. */
/* base plate styling; layout (flex-wrap + borders) is set in the Brief #8 block below */
.whx-catf {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none;
  padding: 16px 8px 12px; background: #fff;
  cursor: pointer; transition: background-color .15s ease; position: relative;
}
.whx-catf:hover { background: #f4f3ef; }
.whx-catf__ico { width: 32px; height: 32px; color: var(--whx-blue); transition: color .15s ease; display: flex; align-items: center; justify-content: center; }
.whx-catf__ico svg { width: 32px; height: 32px; display: block; }
.whx-catf__label { font-family: var(--whx-sans); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--whx-ink); text-align: center; }
.whx-catf__n { font-family: var(--whx-sans); font-size: 9px; font-weight: 500; letter-spacing: .05em; color: #b7b6ae; }
.whx-catf.is-active { background: var(--whx-blue); }
.whx-catf.is-active .whx-catf__ico { color: #fff; }
.whx-catf.is-active .whx-catf__label { color: #fff; }
.whx-catf.is-active .whx-catf__n { color: #aab8c6; }
.whx-catf--all .whx-catf__ico { color: var(--whx-ink); }
.whx-catf--all.is-active .whx-catf__ico { color: #fff; }

/* active-filter pill */
.whx-explore__active {
  margin: 16px 0 0; font-family: var(--whx-sans); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--whx-muted); display: flex; align-items: center; gap: 10px;
}
.whx-explore__activelabel { color: var(--whx-ink); font-weight: 600; }
.whx-explore__clear {
  font-family: var(--whx-sans); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--whx-blue); background: none; border: 1px solid var(--whx-line); padding: 5px 12px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.whx-explore__clear:hover { border-color: var(--whx-blue); color: var(--whx-ink); }

/* the list */
.whx-explore__list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--whx-ink); }
/* row left: small category icon + catalogue No. stacked */
.whx-row__mark { flex: none; display: flex; align-items: center; gap: 11px; width: 84px; }
.whx-row__ico { width: 26px; height: 26px; color: var(--whx-blue); flex: none; }
.whx-row__ico svg { width: 100%; height: 100%; display: block; }
.whx-explore__list li { display: flex; align-items: center; gap: 18px; padding: 13px 2px; border-bottom: 1px solid var(--whx-line); }
.whx-row__no { flex: none; font-family: var(--whx-sans); font-size: 9.5px; font-weight: 500; letter-spacing: .16em; color: #c2c1ba; font-variant-numeric: tabular-nums; }
.whx-row__name {
  flex: 1 1 auto; min-width: 0; font-family: var(--whx-serif); font-weight: 500; font-size: 18px;
  color: var(--whx-ink); text-decoration: none; line-height: 1.25; transition: color .15s ease;
}
.whx-row__name:hover { color: var(--whx-blue); }
.whx-row__type {
  flex: none; width: 108px; text-align: right; font-family: var(--whx-sans); font-size: 9.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #9aa0a6;
}
.whx-row__actions { flex: none; display: flex; align-items: stretch; }
.whx-act {
  font-family: var(--whx-sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--whx-muted); text-decoration: none; padding: 6px 13px; border: 1px solid var(--whx-line); border-right: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.whx-act:last-child { border-right: 1px solid var(--whx-line); }
.whx-act svg { display: block; }
.whx-act:hover { background: #f1f0ea; color: var(--whx-blue); border-color: #c4ccd4; }
.whx-act:hover + .whx-act { border-left-color: #c4ccd4; }

.whx-explore__all {
  font-family: var(--whx-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--whx-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.whx-explore__all:hover { color: var(--whx-ink); }
.whx-explore__all .arr { transition: transform .15s ease; }
.whx-explore__all:hover .arr { transform: translateX(3px); }
.whx-explore__allwrap { margin-top: 18px; }
.whx-explore__sub { margin-top: 14px; font-family: var(--whx-serif); font-style: italic; font-size: 14px; color: #9aa0a6; }
/* CD "Responsive Pass": this "All N sites in {Country} →" link is white-space:nowrap and
   overflows the narrowest phones (~301px text in a 284px column). Let it wrap on phone. */
@media (max-width: 380px) {
  .whx-explore__all { white-space: normal; letter-spacing: .1em; line-height: 1.4; }
}

/* a sub-block (by category / nearby) */
.whx-explore__block { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--whx-line); }

/* category strip */
.whx-cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 20px; }
.whx-cat {
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-decoration: none;
  padding: 16px 6px 13px; border: 1px solid var(--whx-line);
  transition: background-color .15s ease, border-color .15s ease;
}
.whx-cat:hover { background: #f1f0ea; border-color: var(--whx-blue); }
.whx-cat__ico { width: 38px; height: 38px; color: var(--whx-blue); transition: color .15s ease; }
.whx-cat__ico svg { width: 100%; height: 100%; display: block; }
.whx-cat:hover .whx-cat__ico { color: var(--whx-ink); }
.whx-cat__label { font-family: var(--whx-sans); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--whx-muted); text-align: center; }
.whx-cat__n { font-family: var(--whx-sans); font-size: 9px; color: #b7b6ae; }

/* countries grid */
.whx-explore__countries {
  list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--whx-line); border-left: 1px solid var(--whx-line);
}
.whx-explore__countries li { border-right: 1px solid var(--whx-line); border-bottom: 1px solid var(--whx-line); }
.whx-ctry { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-decoration: none; padding: 13px 15px; transition: background-color .15s ease; }
.whx-ctry:hover { background: #f1f0ea; }
.whx-ctry__name { font-family: var(--whx-serif); font-size: 16px; color: var(--whx-ink); transition: color .15s ease; }
.whx-ctry:hover .whx-ctry__name { color: var(--whx-blue); }
.whx-explore__n { font-family: var(--whx-sans); font-size: 10.5px; font-weight: 500; letter-spacing: .04em; color: #aeb2b7; }

@media (max-width: 760px) {
  .whx-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .whx-explore__countries { grid-template-columns: repeat(2, 1fr); }
  .whx-row__type { display: none; }
  .whx-explore__head { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 480px) {
  .whx-explore__list li { flex-wrap: wrap; }
  .whx-row__no { width: auto; }
}

/* =================== COUNTRY BROWSE PAGE =================== */
.whx-browse {
  max-width: 1200px; margin: 0 auto;
  background: var(--whx-paper); padding: 46px 52px 56px;
}
.whx-browse__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 1px solid var(--whx-ink); padding-bottom: 22px; margin-bottom: 40px;
}
.whx-browse__eyebrow {
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--whx-faint); margin: 0;
}
.whx-browse__title {
  font-family: var(--whx-serif); font-weight: 500;
  font-size: 50px; line-height: 1; letter-spacing: -.01em;
  color: var(--whx-ink); margin: 12px 0 0;
}
.whx-browse__sub {
  font-family: var(--whx-serif); font-style: italic; font-size: 18px;
  color: var(--whx-muted); margin: 12px 0 0;
}

/* view toggle */
.whx-browse__toggle { display: flex; align-items: stretch; border: 1px solid #d7d8db; }
.whx-vt {
  display: flex; align-items: center; gap: 8px;
  background: var(--whx-paper); border: 0; cursor: pointer;
  padding: 11px 16px; font-family: var(--whx-sans);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #aeb2b7; transition: color .2s, background .2s;
}
.whx-vt.is-active { color: var(--whx-ink); background: rgba(22,24,28,.05); }
.whx-vt:hover { color: var(--whx-ink); }
.whx-vt__sep { width: 1px; background: #d7d8db; }

/* [hidden] must win over .whx-cards{display:grid} / .whx-list{display:...} —
   class specificity otherwise beats the UA [hidden] rule, so the hidden view
   stays visible. This makes the card/list toggle actually swap. */
[hidden] { display: none !important; }

/* controls bar (Claude Design Brief #6): one continuous border stitched to the
   strip above (or the header rule when there's no strip). Search grows; each
   field is a labelled cell divided by hairlines — no loose gaps, no bare selects. */
.whx-controls {
  display: flex; align-items: stretch; gap: 0; margin: 0 0 32px;
  border: 1px solid var(--whx-line); border-top: none;
}
.whx-controls__search { flex: 1 1 auto; display: flex; align-items: center; padding: 0 16px; border-right: 1px solid var(--whx-line); }
.whx-controls__search input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--whx-serif); font-size: 16px; color: var(--whx-ink); padding: 13px 0; }
.whx-controls__search input::placeholder { color: #b7b6ae; font-style: italic; }
.whx-field { position: relative; display: flex; align-items: center; border-right: 1px solid var(--whx-line); }
.whx-field:last-of-type { border-right: none; }
.whx-field > span { position: absolute; left: 16px; top: 9px; font-family: var(--whx-sans); font-size: 8.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #aeb2b7; pointer-events: none; }
.whx-field select {
  -webkit-appearance: none; appearance: none; border: none; outline: none; background: transparent; cursor: pointer;
  font-family: var(--whx-sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--whx-ink);
  padding: 23px 38px 11px 16px; min-width: 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2316181c' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.whx-field:hover { background: #f4f3ef; }
.whx-noresults {
  font-family: var(--whx-serif); font-style: italic; color: var(--whx-muted); font-size: 14px;
}

/* cards */
.whx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 36px; align-items: stretch; }
.whx-card { display: flex; flex-direction: column; height: 100%; }
/* the thumb is a transparent link wrapper; .whx-frame carries the plate */
.whx-card__thumb { display: block; text-decoration: none; }
.whx-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- the composed museum card plate (Claude Design Brief #4) ---- */
.whx-frame {
  position: relative; display: block; aspect-ratio: 300 / 188;
  background:
    linear-gradient(#e9e8e2 1px, transparent 1px) 0 0 / 100% 18.5px,
    linear-gradient(90deg, #e9e8e2 1px, transparent 1px) 0 0 / 18.5px 100%,
    #f4f3ef;
  border: 1px solid #d8d7d0;
  transition: border-color .18s ease, background-color .18s ease;
  overflow: hidden;
}
/* inset hairline frame */
.whx-frame::before {
  content: ""; position: absolute; inset: 9px; border: 1px solid #dad9d2;
  pointer-events: none; transition: border-color .18s ease;
}
.whx-frame__plate {
  position: absolute; inset: 9px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
/* corner ticks registered to the inner frame */
.whx-tick { position: absolute; width: 7px; height: 7px; pointer-events: none; transition: border-color .18s ease; }
.whx-tick.tl { top: 9px; left: 9px; border-left: 1px solid #c4c3bb; border-top: 1px solid #c4c3bb; }
.whx-tick.tr { top: 9px; right: 9px; border-right: 1px solid #c4c3bb; border-top: 1px solid #c4c3bb; }
.whx-tick.bl { bottom: 9px; left: 9px; border-left: 1px solid #c4c3bb; border-bottom: 1px solid #c4c3bb; }
.whx-tick.br { bottom: 9px; right: 9px; border-right: 1px solid #c4c3bb; border-bottom: 1px solid #c4c3bb; }
/* catalogue number as a header rule */
.whx-frame__no {
  position: absolute; top: 13px; left: 0; right: 0; text-align: center;
  font-family: var(--whx-sans); font-size: 9px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: #b7b6ae;
  transition: color .18s ease;
}
.whx-frame__icon { display: block; width: 66px; height: 66px; color: var(--whx-blue); transition: color .18s ease; }
.whx-frame__icon svg { display: block; width: 100%; height: 100%; }
/* type label seated on a short ink-blue rule */
.whx-frame__label {
  position: relative; margin-top: 13px; padding-top: 11px;
  font-family: var(--whx-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--whx-ink);
  transition: color .18s ease;
}
.whx-frame__label::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 1px; background: var(--whx-blue);
  transition: width .18s ease, background-color .18s ease;
}
/* hover (driven by the thumb link) */
.whx-card__thumb:hover .whx-frame { border-color: var(--whx-blue); background-color: #f1f0ea; }
.whx-card__thumb:hover .whx-frame::before { border-color: #b9c2cc; }
.whx-card__thumb:hover .whx-frame__icon { color: var(--whx-ink); }
.whx-card__thumb:hover .whx-frame__label { color: var(--whx-blue); }
.whx-card__thumb:hover .whx-frame__label::before { width: 44px; }
.whx-card__thumb:hover .whx-frame__no { color: #8c96a1; }
.whx-card__thumb:hover .whx-tick { border-color: var(--whx-blue); }
.whx-card__name {
  font-family: var(--whx-serif); font-weight: 500; font-size: 21px; line-height: 1.15;
  color: var(--whx-ink); margin-top: 16px; text-decoration: none; transition: color .2s;
}
.whx-card__name:hover { color: var(--whx-blue); }
.whx-card__meta { font-size: 12px; color: var(--whx-faint); margin: 6px 0 0; letter-spacing: .02em; }
/* clickable meta links (country / year) — quiet, museum, clear on hover */
.whx-meta__lnk { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.whx-meta__lnk:hover { color: var(--whx-blue); border-bottom-color: var(--whx-blue); }
/* margin-top:auto pushes actions to the card bottom -> aligned across the row */
.whx-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 16px; }

/* list view (Claude Design Brief #6): five aligned columns —
   [icon + No.] · [Name + "Inscribed year"] · [Country] · [Type] · [Actions].
   The category icon sits LEFT of the name; country + year ride with the name;
   actions are flush-right on a fixed grid so every row lines up. */
.whx-list { margin-top: 0; border-top: 1px solid var(--whx-ink); }
.whx-list__head {
  display: grid; grid-template-columns: 60px 1fr 168px 150px minmax(196px, auto);
  align-items: center; gap: 18px; padding: 9px 16px; border-bottom: 1px solid var(--whx-line);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: #aeb2b7;
}
.whx-list__head .ta-r { text-align: right; justify-self: end; }
.whx-row {
  display: grid; grid-template-columns: 60px 1fr 168px 150px minmax(196px, auto);
  align-items: center; gap: 18px; padding: 14px 16px; border-bottom: 1px solid var(--whx-line);
  transition: background-color .15s ease;
}
.whx-row:hover { background: #f9f8f5; }
/* single-country pages: no Country column -> 4-col variant */
.whx-list--country .whx-list__head,
.whx-list--country .whx-row { grid-template-columns: 60px 1fr 150px minmax(196px, auto); }
.whx-row__plate { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.whx-row__ico { width: 30px; height: 30px; color: var(--whx-blue); }
.whx-row__ico svg { width: 30px; height: 30px; display: block; }
.whx-row__no { font-family: var(--whx-sans); font-size: 8px; font-weight: 500; letter-spacing: .12em; color: #c2c1ba; }
.whx-row__site { min-width: 0; }
.whx-row__name {
  display: block;
  font-family: var(--whx-serif); font-weight: 500; font-size: 19px;
  color: var(--whx-ink); text-decoration: none; line-height: 1.18; transition: color .15s;
}
.whx-row__name:hover { color: var(--whx-blue); }
.whx-row__yr { display: block; font-family: var(--whx-sans); font-size: 10px; letter-spacing: .06em; color: #aeb2b7; margin-top: 4px; }
.whx-row__country { font-family: var(--whx-sans); font-size: 13px; color: var(--whx-ink); text-decoration: none; transition: color .15s; }
.whx-row__country:hover { color: var(--whx-blue); }
.whx-row__type { font-family: var(--whx-sans); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #9aa0a6; }
.whx-row__actions { display: flex; align-items: stretch; justify-content: flex-end; justify-self: end; }

/* list-view per-row actions: shared hairline frame, flush-right (Brief #6 .whx-act) */
.whx-act {
  font-family: var(--whx-sans); font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--whx-muted); text-decoration: none; padding: 7px 14px;
  border: 1px solid var(--whx-line); border-right: none; display: inline-flex; align-items: center;
  gap: 6px; transition: background-color .15s, color .15s, border-color .15s; white-space: nowrap;
}
.whx-act:last-child { border-right: 1px solid var(--whx-line); }
.whx-act:hover { background: #f1f0ea; color: var(--whx-blue); border-color: #c4ccd4; }

/* card-view per-item quick-action buttons (Photos / Details) — unchanged */
/* card quick-action buttons. inline-flex+gap so the Tours compass glyph sits cleanly
   before the label (CD "Tours Relabel"); harmless for the text-only Photos ghost. */
.whx-qa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px 16px; font-size: 11px; letter-spacing: .1em; }
.whx-qa--ghost { border: 1px solid var(--whx-ink); color: var(--whx-ink); }
.whx-qa--ghost:hover { background: rgba(22,24,28,.05); }
.whx-qa--solid { background: var(--whx-blue); color: #fff; }
.whx-qa--solid:hover { background: var(--whx-ink); }
.whx-qa--solid svg { width: 13px; height: 13px; display: block; }

/* ── CD "Inscribed Info": the criteria mark (a SQUARE tile, never a circle — it fought
   the square buttons) + the "Inscribed for" modal. Carries a tiny criteria-list glyph
   (blue bullet squares + lines) so it reads as "the reasons", not a generic info dot. ── */
/* card-row mark — 34px square hairline tile, lighter than the buttons so it never competes */
.whx-qa-crit { flex: none; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--whx-line); background: #fff; color: var(--whx-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.whx-qa-crit:hover, .whx-qa-crit:focus-visible { background: #f4f3ef; color: var(--whx-blue); border-color: #c4ccd4; outline: none; }
.whx-qa-crit:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--whx-blue); }
.whx-qa-crit svg { width: 18px; height: 18px; display: block; pointer-events: none; }
/* list-row mark — 30px square cap closing the connected hairline action group */
.whx-act-crit { flex: none; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--whx-line); background: #fff; color: var(--whx-faint); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.whx-act-crit:hover, .whx-act-crit:focus-visible { background: #f1f0ea; color: var(--whx-blue); border-color: #c4ccd4; outline: none; }
.whx-act-crit:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--whx-blue); }
.whx-act-crit svg { width: 16px; height: 16px; display: block; pointer-events: none; }
/* the list mark is the LAST child of .whx-row__actions — it supplies the group's right edge */
.whx-row__actions .whx-act-crit { border-left: none; }
@media (max-width: 560px) { .whx-qa-crit, .whx-act-crit { width: 40px; height: 40px; } }

/* the modal */
.whx-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
.whx-modal[hidden] { display: none; }
.whx-modal__scrim { position: absolute; inset: 0; background: rgba(22,24,28,.42); }
.whx-modal__dialog { position: relative; width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--whx-ink); box-shadow: 0 18px 50px rgba(22,24,28,.18); max-height: 84vh; display: flex; flex-direction: column; }
.whx-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 26px 18px; border-bottom: 1px solid var(--whx-line); }
.whx-modal__eyebrow { font-family: var(--whx-sans); font-size: 9.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #9aa0a6; margin: 0; }
.whx-modal__title { font-family: var(--whx-serif); font-weight: 500; font-size: 26px; color: var(--whx-ink); line-height: 1.05; margin: 8px 0 0; }
.whx-modal__site { font-family: var(--whx-serif); font-style: italic; font-size: 14px; color: var(--whx-muted); margin: 6px 0 0; }
.whx-modal__close { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--whx-line); background: #fff; color: var(--whx-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.whx-modal__close:hover, .whx-modal__close:focus-visible { background: #f4f3ef; color: var(--whx-ink); border-color: #c4ccd4; outline: none; }
.whx-modal__close svg { width: 13px; height: 13px; pointer-events: none; }
.whx-modal__body { padding: 6px 26px 24px; overflow-y: auto; }
@media (max-width: 560px) {
  .whx-modal { align-items: flex-end; padding: 0; }
  .whx-modal__dialog { max-width: none; border-left: none; border-right: none; border-bottom: none; max-height: 88vh; }
}

/* phone list row: stack (Brief #6 .whx-row--phone) */
.whx-row--phone { display: none; }

.whx-browse__empty { font-family: var(--whx-serif); font-style: italic; color: var(--whx-muted); }
.whx-browse__disclaimer {
  font-size: 10.5px; color: #aeb2b7; margin-top: 44px;
  border-top: 1px solid var(--whx-line); padding-top: 20px; line-height: 1.6; max-width: 680px;
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .whx-cards { grid-template-columns: repeat(2, 1fr); }
  .whx-plate, .whx-browse { padding: 32px 22px; }
  .whx-name, .whx-browse__title { font-size: 38px; }
  .whx-browse__head { flex-direction: column; align-items: flex-start; gap: 18px; }
}
/* phone: the unified control region stacks; the list row reflows to
   [icon+No] [name + meta] on row 1, actions full-width on row 2 (Brief #6). */
@media (max-width: 760px) {
  /* control region: strip wraps 3-up (set in Brief #8 block), controls stack */
  .whx-controls { flex-direction: column; align-items: stretch; }
  .whx-controls__search { border-right: none; border-bottom: 1px solid var(--whx-line); }
  .whx-field { border-right: none; border-bottom: 1px solid var(--whx-line); }
  .whx-field:last-of-type { border-bottom: none; }
  .whx-field select { width: 100%; }

  /* list row -> icon+No (col 1, spanning) | name, country, type stacked (col 2);
     actions full-width on the last row. Explicit areas so nothing overlaps. */
  .whx-list__head { display: none; }
  .whx-list--country .whx-row,
  .whx-row {
    grid-template-columns: 44px 1fr;
    grid-template-areas:
      "plate site"
      "plate country"
      "plate type"
      "actions actions";
    align-items: start; gap: 2px 13px; padding: 16px 0;
  }
  .whx-row__plate   { grid-area: plate; align-self: start; }
  .whx-row__site    { grid-area: site; }
  .whx-row__country { grid-area: country; font-size: 12px; color: var(--whx-muted); margin-top: 4px; }
  .whx-row__type    { grid-area: type; margin-top: 4px; }
  .whx-row__actions { grid-area: actions; justify-self: stretch; margin-top: 13px; }
  .whx-row__actions .whx-act { flex: 1; justify-content: center; }
}
@media (max-width: 560px) {
  .whx-cards { grid-template-columns: 1fr; }
  .whx-plan { grid-template-columns: 1fr; }
}

/* ============================================================================
   SITE CHROME — header / brand / nav / footer / error (museum register)
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; }
body.whx-site {
  background: var(--whx-canvas);
  font-family: var(--whx-sans);
  color: var(--whx-ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--whx-blue); }

.whx-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--whx-ink); color: #fff; padding: 10px 16px; z-index: 100;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.whx-skip:focus { left: 0; }

/* ---- header ---- */
.whx-header { background: var(--whx-paper); border-bottom: 1px solid var(--whx-line); }
.whx-header__inner {
  max-width: var(--whx-max); margin: 0 auto; padding: 22px var(--whx-gut);
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
}
.whx-brand { text-decoration: none; display: inline-flex; flex-direction: column; gap: 8px; }
.whx-brand__mark { font-family: var(--whx-serif); font-weight: 600; font-size: 26px; letter-spacing: -.01em; line-height: 1; }
.whx-brand__mark--sm { font-size: 19px; }
.whx-brand__wh { color: var(--whx-ink); }
/* X emphasized: larger, ink-blue, slightly heavier — "X = any heritage site".
   Interim treatment; Claude Design Brief #2 §0 will finalize size/weight. */
.whx-brand__x  {
  color: var(--whx-blue);
  font-size: 1.28em;
  font-weight: 700;
  line-height: 1;
}
.whx-brand__tag {
  font-family: var(--whx-sans); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: #9aa0a6;
}

/* nav (mod_menu renders a <ul>) — one clean line on desktop */
.whx-nav ul {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; gap: 18px; margin: 0; padding: 0;
}
.whx-nav a {
  font-family: var(--whx-sans); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--whx-faint); text-decoration: none;
  transition: color .2s; white-space: nowrap;
}
.whx-nav a:hover, .whx-nav .current > a, .whx-nav .active > a { color: var(--whx-ink); }

/* ---- main ---- */
/* main is the canvas; the white panel is .whx-content (one consistent frame) */
.whx-main { max-width: var(--whx-max); margin: 0 auto; padding: 36px var(--whx-gut) 44px; }
.whx-main--sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 44px; align-items: start; }
.whx-sidebar { font-family: var(--whx-sans); }

/* the white content panel — uniform across every page type */
.whx-content {
  background: var(--whx-paper);
  border: 1px solid var(--whx-line);
  padding: 48px var(--whx-gut);
}
/* browse/plate render inside the panel: drop their own panel chrome so the
   frame is consistent (no double background / double padding / size mismatch) */
.whx-content .whx-plate,
.whx-content .whx-browse { background: none; border: 0; padding: 0; max-width: none; margin: 0; }
/* the plate stays a centred reading column within the panel */
.whx-content .whx-plate { max-width: 660px; margin: 0 auto; }
/* narrow the panel ONLY when it holds a single-site Plate (not browse-articles
   like continent/type pages), so the plate isn't marooned in white space */
.whx-content:has(.whx-plate) { max-width: 860px; margin: 0 auto; padding: 56px 72px; }
/* home manages its own full-bleed section rhythm -> panel has no inner padding */
.whx-content:has(.whx-home) { padding: 0; }
/* CD "Responsive Pass": the two .whx-content paddings need phone overrides. The base
   uses var(--whx-gut) so its sides already scale; tighten the vertical on phone. The
   single-site Plate hardcodes 56px 72px (the worst offender) — drop it to the gutter so
   it stops overflowing at 360px. */
@media (max-width: 900px) {
  .whx-content:has(.whx-plate) { padding: 44px var(--whx-gut); }
}
@media (max-width: 560px) {
  .whx-content { padding: 32px var(--whx-gut); }
  .whx-content:has(.whx-plate) { padding: 28px var(--whx-gut); }
}
.whx-home { background: var(--whx-paper); }

/* ---- footer ---- */
.whx-footer { background: var(--whx-paper); border-top: 1px solid var(--whx-line); margin-top: 40px; }
.whx-footer__inner { max-width: var(--whx-max); margin: 0 auto; padding: 48px var(--whx-gut) 36px; }
.whx-footer__top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 36px;
  padding-bottom: 32px; border-bottom: 1px solid var(--whx-line);
}
.whx-footer__brand { }
.whx-footer__motto {
  font-family: var(--whx-serif); font-style: italic; font-size: 14px;
  color: var(--whx-muted); margin: 14px 0 0; max-width: 30ch; line-height: 1.5;
}
.whx-footer__cols { display: contents; }
.whx-footer__col { display: flex; flex-direction: column; }
.whx-footer__h {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--whx-faint); margin: 0 0 14px;
}
.whx-footer__col a {
  font-size: 13px; color: var(--whx-ink); text-decoration: none;
  padding: 5px 0; transition: color .15s;
}
.whx-footer__col a:hover { color: var(--whx-blue); }
.whx-footer__legal { font-size: 11px; color: var(--whx-faint); line-height: 1.6; margin: 24px 0 0; }
.whx-footer__legal a { color: var(--whx-faint); text-decoration: underline; text-underline-offset: 2px; }
.whx-footer__legal a:hover { color: var(--whx-blue); }
.whx-footer__disclaimer { font-size: 11px; color: var(--whx-faint); line-height: 1.65; margin: 10px 0 0; max-width: 60ch; }
.whx-footer__disclaimer a { color: var(--whx-muted); text-decoration: underline; text-underline-offset: 2px; }
.whx-footer__disclaimer a:hover { color: var(--whx-blue); }
.whx-footer__earn { display: block; margin-top: 4px; color: #aeb2b7; }

/* Responsive footer (Claude Design Brief #11). Placed AFTER the base footer rules
   so source order lets the media-query centring win (media queries add no
   specificity). Desktop > 900px untouched; tablet <= 900px brand centred + 2x2
   columns, all centred; phone <= 560px single centred column with comfy taps. */
@media (max-width: 900px) {
  .whx-footer__top {
    grid-template-columns: 1fr 1fr; gap: 30px 24px;
    text-align: center; justify-items: center;
  }
  .whx-footer__brand {
    grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center;
    padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--whx-line2); width: 100%;
  }
  .whx-footer__motto { max-width: 340px; margin-left: auto; margin-right: auto; }
  .whx-footer__col { align-items: center; }
  .whx-footer__legal,
  .whx-footer__disclaimer { margin-left: auto; margin-right: auto; text-align: center; max-width: 560px; }
  .whx-footer__updated { text-align: center; }
}
@media (max-width: 560px) {
  .whx-footer__top { grid-template-columns: 1fr; gap: 26px; }
  .whx-footer__col { width: 100%; border-bottom: 1px solid #f1f0ec; padding-bottom: 18px; }
  .whx-footer__col:last-child { border-bottom: none; padding-bottom: 0; }
  .whx-footer__col a { padding: 11px 0; font-size: 14px; }
}

/* ---- error page (atlas "off the map") ---- */
.whx-site--error { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; }
.whx-error { max-width: 600px; text-align: center; background: var(--whx-paper); padding: 72px 56px; border: 1px solid var(--whx-line); }
.whx-error__coords { font-size: 11px; letter-spacing: .26em; color: var(--whx-faint); margin: 0 0 28px; font-variant-numeric: tabular-nums; }
.whx-error__code { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--whx-blue); margin: 0; }
.whx-error__title { font-family: var(--whx-serif); font-weight: 500; font-size: 40px; color: var(--whx-ink); margin: 14px 0 0; }
.whx-error__msg { font-size: 14px; color: var(--whx-muted); margin: 18px auto 30px; max-width: 42ch; line-height: 1.6; }
.whx-error__home {
  display: inline-block; border: 1.5px solid var(--whx-ink); color: var(--whx-ink);
  padding: 14px 24px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.whx-error__home:hover { background: var(--whx-blue); color: #fff; border-color: var(--whx-blue); }

@media (max-width: 900px) {
  .whx-header__inner { padding: 18px 22px; }
  .whx-footer__inner { padding: 44px 32px; }  /* Brief #11: footer keeps its breathing room */
  .whx-main { padding: 28px 22px 48px; }
  .whx-main--sidebar { grid-template-columns: 1fr; }
  .whx-header__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* phone: center the wordmark + nav */
@media (max-width: 640px) {
  .whx-header__inner { align-items: center; text-align: center; gap: 16px; }
  .whx-brand { align-items: center; }
  .whx-nav { width: 100%; }
  .whx-nav ul { justify-content: center; }
}

/* ============================================================================
   HOME (museum landing)
   ========================================================================== */
/* .whx-home / hero / most-visited / browse plates / all-countries: see the
   Brief #13B block lower in this file (the old centred hero + tiles were
   superseded by the catalogue-title-spread homepage). */

/* country groups */
.whx-cgroup { margin-bottom: 40px; }
.whx-cgroup__name {
  font-family: var(--whx-serif); font-weight: 500; font-size: 26px; color: var(--whx-ink);
  border-bottom: 1.5px solid var(--whx-ink); padding-bottom: 10px; margin: 0 0 16px;
}
/* continent landing page lead heading (H1) */
.whx-cgroup--lead { padding: 8px 0 0; }
.whx-cgroup--lead .whx-cgroup__name {
  font-size: 44px; line-height: 1.06; border-bottom: 0;
  margin: 0 0 4px; padding-bottom: 0;
}
.whx-cgroup--lead + .whx-cgroup__list,
.whx-cgroup--lead .whx-cgroup__sub + * { }
.whx-cgroup__sub {
  display: block; font-family: var(--whx-sans); font-weight: 400; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--whx-faint); margin-top: 14px;
  padding-bottom: 18px; border-bottom: 1.5px solid var(--whx-ink); margin-bottom: 24px;
}
.whx-cgroup__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--whx-line2); border-left: 1px solid var(--whx-line2);
}
.whx-cgroup__list li {
  background: var(--whx-paper);
  border-right: 1px solid var(--whx-line2); border-bottom: 1px solid var(--whx-line2);
}
.whx-cgroup__list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 11px 14px; text-decoration: none; color: var(--whx-ink); transition: background .15s, color .15s;
}
.whx-cgroup__list a:hover { background: rgba(28,61,90,.06); color: var(--whx-blue); }
.whx-country__name { font-size: 14px; }
.whx-country__n { font-size: 11px; color: var(--whx-faint); font-variant-numeric: tabular-nums; flex: none; }

/* (homepage + continent responsive rules now live in the Brief #13 blocks) */

.whx-footer__updated { font-size: 10.5px; letter-spacing: .08em; color: #aeb2b7; margin: 10px 0 0; }

/* ============================================================================
   PLAIN-PROSE ARTICLES (disclosure, affiliate-disclosure, about, etc.)
   Scoped to --prose so plugin-rendered Plate/browse pages are untouched.
   ========================================================================== */
.whx-article--prose {
  max-width: 720px; margin: 0 auto; background: var(--whx-paper);
  padding: 52px 56px 56px;
}
.whx-article--prose p.whx-article__eyebrow {
  font-family: var(--whx-sans); font-size: 11px; font-weight: 600; letter-spacing: .3em;
  line-height: 1.3; text-transform: uppercase; color: var(--whx-faint); margin: 0 0 14px; max-width: none;
}
.whx-article__title {
  font-family: var(--whx-serif); font-weight: 500; font-size: 42px; line-height: 1.05;
  letter-spacing: -.01em; color: var(--whx-ink); margin: 0 0 28px;
  border-bottom: 1.5px solid var(--whx-ink); padding-bottom: 18px;
}
.whx-article__end { border: 0; border-top: 1px solid var(--whx-line); margin: 40px 0 0; }
.whx-article--prose p {
  font-size: 16px; line-height: 1.7; color: var(--whx-ink); margin: 0 0 18px; max-width: 64ch;
}
.whx-article--prose h2 {
  font-family: var(--whx-serif); font-weight: 500; font-size: 26px; color: var(--whx-ink);
  margin: 36px 0 12px;
}
.whx-article--prose h3 {
  font-family: var(--whx-sans); font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--whx-faint); margin: 28px 0 10px;
}
.whx-article--prose a { color: var(--whx-blue); text-decoration: none; border-bottom: 1px solid var(--whx-blue); }
.whx-article--prose a:hover { color: var(--whx-ink); border-bottom-color: var(--whx-ink); }
.whx-article--prose ul, .whx-article--prose ol { margin: 0 0 18px; padding-left: 22px; max-width: 64ch; }
.whx-article--prose li { font-size: 16px; line-height: 1.7; margin: 0 0 6px; }
.whx-article--prose strong { font-weight: 600; }
@media (max-width: 700px) {
  .whx-article--prose { padding: 32px 22px 40px; }
  .whx-article__title { font-size: 30px; }
}

/* ============================================================================
   END-OF-ARTICLE "KEEP BROWSING" CTA + catalogue prev/next chevrons
   (Claude Design Brief #7). Scoped under .whx-endcta / .whx-flip so the new
   .whx-btn rules don't collide with the Plate page's .whx-btn--primary/--plan.
   ========================================================================== */
.whx-endcta { background: var(--whx-paper); border-top: 1px solid var(--whx-ink); padding: 40px 0 8px; text-align: center; margin-top: 8px; }
.whx-endcta__kicker { font-family: var(--whx-serif); font-weight: 500; font-size: 26px; color: var(--whx-ink); line-height: 1.12; }
.whx-endcta__kicker em { font-style: italic; color: var(--whx-blue); }
.whx-endcta__sub { font-family: var(--whx-sans); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #9aa0a6; margin-top: 11px; }
.whx-endcta__row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; margin-top: 26px; }

.whx-endcta .whx-ebtn { display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; border: 1px solid var(--whx-ink); padding: 18px 20px; cursor: pointer; background: #fff; min-width: 0; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.whx-endcta .whx-ebtn__ico { width: 26px; height: 26px; flex: none; color: inherit; }
.whx-endcta .whx-ebtn__ico svg { width: 26px; height: 26px; }
.whx-endcta .whx-ebtn__tx { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; }
.whx-endcta .whx-ebtn__lab { font-family: var(--whx-sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: inherit; white-space: nowrap; }
.whx-endcta .whx-ebtn__meta { font-family: var(--whx-sans); font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #9aa0a6; }
.whx-endcta .whx-ebtn--primary { background: var(--whx-blue); border-color: var(--whx-blue); color: #fff; }
.whx-endcta .whx-ebtn--primary .whx-ebtn__meta { color: #aab8c6; }
.whx-endcta .whx-ebtn--primary:hover { background: var(--whx-ink); border-color: var(--whx-ink); }
.whx-endcta .whx-ebtn--ghost { color: var(--whx-ink); }
.whx-endcta .whx-ebtn--ghost:hover { background: rgba(22,24,28,.05); border-color: var(--whx-blue); }
.whx-endcta .whx-ebtn--ghost:hover .whx-ebtn__ico { color: var(--whx-blue); }

/* prev/next chevrons floating in the plate margins (desktop) */
.whx-flip { position: relative; }
.whx-flip__chev { position: absolute; top: 130px; transform: translateY(-50%); width: 26px; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: #b7b6ae; text-decoration: none; transition: color .15s ease; }
.whx-flip__chev:hover { color: var(--whx-blue); }
.whx-flip__chev svg { width: 15px; height: 26px; }
.whx-flip__chev.prev { left: -66px; }
.whx-flip__chev.next { right: -66px; }
.whx-flip__cnum { font-family: var(--whx-sans); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: #c2c1ba; writing-mode: vertical-rl; }
.whx-flip__chev[aria-disabled="true"] { color: #e0dfd9; pointer-events: none; }

/* phone inline flip bar (chevrons dock into a hairline row) */
.whx-flipbar { display: none; align-items: center; justify-content: space-between; border-top: 1px solid var(--whx-line); border-bottom: 1px solid var(--whx-line); padding: 11px 4px; margin-bottom: 6px; }
.whx-flipbar a { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--whx-muted); transition: color .15s ease; }
.whx-flipbar a:hover { color: var(--whx-blue); }
.whx-flipbar a svg { width: 12px; height: 20px; }
.whx-flipbar a[aria-disabled="true"] { color: #e0dfd9; pointer-events: none; }
.whx-flipbar__lab { font-family: var(--whx-sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.whx-flipbar__ctr { font-family: var(--whx-sans); font-size: 9.5px; font-weight: 500; letter-spacing: .1em; color: #c2c1ba; }

@media (max-width: 820px) {
  .whx-flip__chev { display: none; }          /* no room in margins */
  .whx-flipbar { display: flex; }             /* dock to inline bar  */
  .whx-endcta__row { grid-template-columns: 1fr; gap: 11px; }
  .whx-endcta__kicker { font-size: 23px; }
}

/* ============================================================================
   BRIEF #7 — end-of-article "keep browsing" CTA + quiet catalogue page-turn
   ========================================================================== */
/* ---- end CTA (after the Explore section, foot of every site article) ---- */
.whx-endcta { background:#fff; border-top:1px solid var(--whx-ink); padding:40px 0 8px; text-align:center; }
.whx-endcta__kicker { font-family:var(--whx-serif); font-weight:500; font-size:26px; color:var(--whx-ink); line-height:1.12; }
.whx-endcta__kicker em { font-style:italic; color:var(--whx-blue); }
.whx-endcta__sub { font-family:var(--whx-sans); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#9aa0a6; margin-top:11px; }
.whx-endcta__row { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:14px; margin-top:26px; }

/* CTA button (distinct from the existing .whx-btn--primary Plate CTA which is a
   full-width bar; this is the 3-up icon+label lockup) */
.whx-endcta .whx-btn {
  display:flex; align-items:center; justify-content:center; gap:12px; min-width:0;
  text-decoration:none; border:1px solid var(--whx-ink); padding:18px 20px; cursor:pointer;
  background:#fff; transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.whx-btn__ico { width:26px; height:26px; flex:none; color:inherit; line-height:0; }
.whx-btn__ico svg { width:26px; height:26px; }
.whx-btn__tx { display:flex; flex-direction:column; align-items:flex-start; gap:3px; line-height:1; }
.whx-btn__lab { font-family:var(--whx-sans); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:inherit; white-space:nowrap; }
.whx-btn__meta { font-family:var(--whx-sans); font-size:9.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:#9aa0a6; }
.whx-endcta .whx-btn--primary { background:var(--whx-blue); border-color:var(--whx-blue); color:#fff; }
.whx-endcta .whx-btn--primary .whx-btn__meta { color:#aab8c6; }
.whx-endcta .whx-btn--primary:hover { background:var(--whx-ink); border-color:var(--whx-ink); }
.whx-endcta .whx-btn--ghost { color:var(--whx-ink); }
.whx-endcta .whx-btn--ghost:hover { background:rgba(22,24,28,.05); border-color:var(--whx-blue); }
.whx-endcta .whx-btn--ghost:hover .whx-btn__ico { color:var(--whx-blue); }

/* ---- prev/next catalogue chevrons (desktop: float in the plate margins) ---- */
.whx-flip { position:relative; }
.whx-flip__chev { position:absolute; top:160px; transform:translateY(-50%); width:26px; min-height:54px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:#b7b6ae; text-decoration:none; transition:color .15s ease; }
.whx-flip__chev:hover { color:var(--whx-blue); }
.whx-flip__chev svg { width:15px; height:26px; }
.whx-flip__chev.prev { left:-66px; }
.whx-flip__chev.next { right:-66px; }
.whx-flip__cnum { font-family:var(--whx-sans); font-size:8.5px; font-weight:600; letter-spacing:.12em; color:#c2c1ba; writing-mode:vertical-rl; }
.whx-flip__chev[aria-disabled="true"] { color:#e0dfd9; pointer-events:none; }

/* ---- phone: chevrons collapse to an inline hairline flip bar ---- */
.whx-flipbar { display:none; align-items:center; justify-content:space-between; border-top:1px solid var(--whx-line); border-bottom:1px solid var(--whx-line); padding:11px 4px; margin-top:18px; }
.whx-flipbar a { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--whx-muted); transition:color .15s ease; }
.whx-flipbar a:hover { color:var(--whx-blue); }
.whx-flipbar a svg { width:12px; height:20px; }
.whx-flipbar a[aria-disabled="true"] { color:#e0dfd9; pointer-events:none; }
.whx-flipbar__lab { font-family:var(--whx-sans); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.whx-flipbar__ctr { font-family:var(--whx-sans); font-size:9.5px; font-weight:500; letter-spacing:.1em; color:#c2c1ba; }

@media (max-width: 900px) {
  .whx-endcta__row { grid-template-columns:1fr; gap:11px; }
  .whx-flip__chev { display:none; }      /* margins vanish -> use the flip bar */
  .whx-flipbar { display:flex; }
}

/* ============================================================================
   BRIEF #8 — consistency pass (standalone search, /numbers row, strip wrap)
   ========================================================================== */
/* A — standalone search field (used on /numbers and /browse). Wrapper is
   .whx-searchbar so the inner input keeps class .whx-search (JS + Brief#6 intact). */
.whx-searchbar { display:flex; align-items:center; gap:12px; border:1px solid #d8d7d0; background:#fff; padding:0 16px; transition:border-color .15s ease; margin:0 0 4px; }
.whx-searchbar:focus-within { border-color:var(--whx-blue); }
.whx-searchbar__ico { flex:none; width:16px; height:16px; display:flex; align-items:center; justify-content:center; color:#9aa0a6; line-height:0; }
.whx-searchbar input.whx-search { flex:1; border:none; outline:none; background:transparent; font-family:var(--whx-serif); font-size:17px; color:var(--whx-ink); padding:14px 0; }
.whx-searchbar input.whx-search::placeholder { color:#b7b6ae; font-style:italic; }
.whx-searchbar__hint { flex:none; font-family:var(--whx-sans); font-size:9px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#c2c1ba; border:1px solid var(--whx-line); padding:4px 8px; }
@media (max-width:600px){ .whx-searchbar__hint { display:none; } }

/* B — /numbers master-catalogue row: No.+icon plate · name · country·year · Photos */
.whx-cat-list { border-top:1px solid var(--whx-ink); }
.whx-cat-head { display:grid; grid-template-columns:64px 1fr 200px 230px; align-items:center; gap:20px; padding:9px 16px; border-bottom:1px solid var(--whx-line); }
.whx-cat-head span { font-family:var(--whx-sans); font-size:9px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#aeb2b7; }
.whx-cat-head .ta-r { text-align:right; }
.whx-cat-row { display:grid; grid-template-columns:64px 1fr 200px 110px; align-items:center; gap:20px; padding:12px 16px; border-bottom:1px solid var(--whx-line); transition:background-color .15s ease; }
.whx-cat-row:hover { background:#f9f8f5; }
.whx-cat-row__plate { display:flex; flex-direction:column; align-items:center; gap:3px; }
.whx-cat-row__ico { width:26px; height:26px; flex:none; color:var(--whx-blue); line-height:0; }
.whx-cat-row__ico svg { width:26px; height:26px; }
.whx-cat-row__no { font-family:var(--whx-sans); font-size:8px; font-weight:600; letter-spacing:.1em; color:#b7b6ae; }
.whx-cat-row__name { display:block; font-family:var(--whx-serif); font-weight:500; font-size:19px; color:var(--whx-ink); text-decoration:none; line-height:1.16; transition:color .15s ease; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.whx-cat-row__name:hover { color:var(--whx-blue); }
.whx-cat-row__meta { font-family:var(--whx-sans); font-size:12px; letter-spacing:.03em; color:var(--whx-faint); }
.whx-cat-row__meta a { color:var(--whx-muted); text-decoration:none; }
.whx-cat-row__meta a:hover { color:var(--whx-blue); }
/* unified compact Photos affordance (matches the hub-list .whx-act) */
.whx-cat-row .whx-qa { display:inline-flex; align-items:center; gap:7px; justify-self:end; font-family:var(--whx-sans); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--whx-muted); text-decoration:none; border:1px solid var(--whx-line); padding:7px 12px; background:none; transition:background-color .15s, color .15s, border-color .15s; white-space:nowrap; }
.whx-cat-row .whx-qa svg { width:12px; height:12px; }
.whx-cat-row .whx-qa:hover { background:#f1f0ea; color:var(--whx-blue); border-color:#c4ccd4; }
/* /numbers rows now carry the same Photos · Tours · criteria-mark cluster as the other
   surfaces (was Photos-only). Reuse the connected-hairline .whx-act group, right-aligned. */
.whx-cat-row__actions { display:inline-flex; align-items:stretch; justify-self:end; }
/* CD "WHX Numbers Phone Fix": the desktop 4-col grid crushed names to one letter and ran
   the actions off-screen at phone width. Reflow to plate column + stacked content column
   (name wraps, meta, then actions on their own line, fully on-screen). Desktop untouched. */
@media (max-width:560px){
  .whx-cat-head { display:none; }
  .whx-cat-row {
    grid-template-columns:44px 1fr;
    grid-template-areas:"plate name" "plate meta" "plate actions";
    gap:7px 14px; align-items:start; padding:16px;
  }
  .whx-cat-row__plate { grid-area:plate; align-items:flex-start; padding-top:3px; }
  .whx-cat-row__name { grid-area:name; white-space:normal; overflow:visible; text-overflow:clip; font-size:20px; line-height:1.2; }
  .whx-cat-row__meta { grid-area:meta; font-size:12px; }
  .whx-cat-row__actions { grid-area:actions; justify-self:start; margin-top:6px; }
  .whx-cat-row__actions .whx-act { padding:9px 14px; font-size:10.5px; }
  .whx-cat-row__actions .whx-act-crit { width:38px; }
}
@media (max-width:380px){
  /* narrowest phones: reclaim the last few px so the action cluster fits (was +6 at 320).
     Tighten the row padding + plate column + action padding/tracking per CD's 340px demo. */
  .whx-cat-row { grid-template-columns:40px 1fr; gap:6px 12px; padding:15px 12px; }
  .whx-cat-row__actions .whx-act { padding:9px 11px; font-size:10px; letter-spacing:.08em; }
  .whx-cat-row__actions .whx-act svg { width:11px; height:11px; }
  .whx-cat-row__actions .whx-act-crit { width:34px; }
}

/* C — category strip holds all 14-15 plates: wrap inside the panel, 8-up rows */
/* CD "Inscribed Info" Part 2: the title sat 0px above the category-filter tiles, fighting
   the page's airy rhythm. Add a 30px breath above the tiles (half-step of section rhythm). */
.whx-catfilter { display:flex; flex-wrap:wrap; border:1px solid var(--whx-line); border-top:none; border-left:none; margin-top: 24px; }
.whx-catf { flex:1 0 12.5%; border-left:1px solid var(--whx-line); border-bottom:1px solid var(--whx-line); }
@media (max-width:760px){ .whx-catf { flex:1 0 33.33%; } }

/* F — in-danger standfirst (Bodoni italic factual line under the hub title) */
.whx-browse__standfirst { font-family:var(--whx-serif); font-style:italic; font-size:16px; color:var(--whx-muted); margin:10px 0 0; max-width:560px; line-height:1.5; }

/* affiliate-disclosure: the Stay22 "earn" aside, set off from the prose */
.whx-article--prose .whx-prose__earn {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--whx-line);
  font-size: 13px; color: var(--whx-faint);
}
.whx-article--prose .whx-prose__earn a { color: var(--whx-blue); border-bottom-color: var(--whx-blue); }

/* /webdesign: the quiet "- weblio.no" sign-off */
.whx-article--prose .whx-prose__sign {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--whx-line);
  font-size: 14px; color: var(--whx-muted); letter-spacing: .02em;
}

/* gap-year page (no inscriptions that year): dignified note under the title */
.whx-browse__none {
  font-family: var(--whx-serif); font-style: italic; font-size: 18px; color: var(--whx-muted);
  line-height: 1.55; max-width: 600px; margin: 28px 0 0;
}

/* ============================================================================
   BRIEF #10 — year-to-year pager (/year/{YYYY}); sibling of the Plate page-turn
   ========================================================================== */
.whx-yearflip { display:flex; align-items:stretch; justify-content:space-between; border-top:1px solid var(--whx-line); border-bottom:1px solid var(--whx-line); margin-top:22px; }
.whx-yearflip__step { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--whx-muted); padding:12px 4px; transition:color .15s ease; }
.whx-yearflip__step:hover { color:var(--whx-blue); }
.whx-yearflip__step.next { text-align:right; }
.whx-yearflip__chev { display:inline-flex; align-items:center; line-height:0; }
.whx-yearflip__chev svg { width:13px; height:22px; flex:none; }
.whx-yearflip__lab { display:flex; flex-direction:column; }
.whx-yearflip__yr { font-family:var(--whx-serif); font-weight:500; font-size:21px; line-height:1; }
.whx-yearflip__cap { font-family:var(--whx-sans); font-size:9px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#aeb2b7; margin-bottom:4px; }
.whx-yearflip__cur { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 26px; border-left:1px solid var(--whx-line); border-right:1px solid var(--whx-line); }
.whx-yearflip__cur .lab { font-family:var(--whx-sans); font-size:8.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#c2c1ba; }
.whx-yearflip__cur .num { font-family:var(--whx-sans); font-size:10px; font-weight:600; letter-spacing:.12em; color:#9aa0a6; margin-top:4px; }
.whx-yearflip__step[aria-disabled="true"] { color:#dcdbd5; pointer-events:none; }
.whx-yearflip__step[aria-disabled="true"] .whx-yearflip__cap { color:#e3e2dd; }
@media (max-width: 600px) {
  .whx-yearflip__cap { display:none; }
  .whx-yearflip__yr { font-size:18px; }
  .whx-yearflip__cur { padding:6px 16px; }
  .whx-yearflip__cur .lab { display:none; }
}

/* ============================================================================
   BRIEF #12 — /browse "Browse the Atlas" index (atlas table of contents)
   Four sections, each shaped to its content. Responsive via @media (the index
   renders inside .whx-content, so container queries aren't set up).
   ========================================================================== */
.whx-index__eyebrow { font-family: var(--whx-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--whx-faint); margin: 0; }
.whx-index__title { font-family: var(--whx-serif); font-weight: 500; font-size: 44px; color: var(--whx-ink); line-height: 1.02; margin: 10px 0 7px; border: 0; padding: 0; }
.whx-index__stand { font-family: var(--whx-serif); font-style: italic; font-size: 17px; color: var(--whx-muted); margin: 0 0 26px; }

.whx-index__group { margin-top: 44px; }
.whx-index__h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--whx-ink); padding-bottom: 11px; margin-bottom: 20px; }
.whx-index__h .lab { font-family: var(--whx-serif); font-weight: 500; font-size: 24px; color: var(--whx-ink); }
.whx-index__h .cnt { font-family: var(--whx-sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #aeb2b7; white-space: nowrap; }

/* 1 - continents: large plates */
.whx-conts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--whx-line); border-left: 1px solid var(--whx-line); }
.whx-conts li a { display: flex; flex-direction: column; gap: 9px; text-decoration: none; border-right: 1px solid var(--whx-line); border-bottom: 1px solid var(--whx-line); padding: 22px 22px 24px; transition: background-color .15s ease; }
.whx-conts li a:hover { background: #f4f3ef; }
.whx-conts .nm { font-family: var(--whx-serif); font-weight: 500; font-size: 26px; color: var(--whx-ink); transition: color .15s ease; }
.whx-conts li a:hover .nm { color: var(--whx-blue); }
.whx-conts .mt { font-family: var(--whx-sans); font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--whx-faint); }

/* 2 - types: icon directory */
.whx-types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--whx-line); border-left: 1px solid var(--whx-line); }
.whx-types li a { display: flex; align-items: center; gap: 13px; text-decoration: none; border-right: 1px solid var(--whx-line); border-bottom: 1px solid var(--whx-line); padding: 14px 16px; transition: background-color .15s ease; }
.whx-types li a:hover { background: #f4f3ef; }
.whx-types .ico { flex: none; width: 26px; height: 26px; color: var(--whx-blue); line-height: 0; }
.whx-types .ico svg { width: 26px; height: 26px; display: block; }
.whx-types .nm { flex: 1; font-family: var(--whx-sans); font-size: 13px; font-weight: 600; color: var(--whx-ink); transition: color .15s ease; }
.whx-types li a:hover .nm { color: var(--whx-blue); }
.whx-types .ct { font-family: var(--whx-sans); font-size: 10px; font-weight: 500; color: #c2c1ba; }

/* 3 - themes: hairline tag field */
.whx-themes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--whx-line); border-left: 1px solid var(--whx-line); }
.whx-themes li a { display: inline-flex; align-items: center; text-decoration: none; border-right: 1px solid var(--whx-line); border-bottom: 1px solid var(--whx-line); padding: 9px 15px; font-family: var(--whx-sans); font-size: 12.5px; font-weight: 500; color: var(--whx-ink); transition: background-color .15s ease, color .15s ease; }
.whx-themes li a:hover { background: #f4f3ef; color: var(--whx-blue); }

/* 4 - years: decade-grouped numeric grid */
.whx-years { display: flex; flex-direction: column; gap: 14px; }
.whx-years__decade { display: grid; grid-template-columns: 64px 1fr; align-items: start; gap: 18px; }
.whx-years__dl { font-family: var(--whx-sans); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #c2c1ba; padding-top: 9px; }
.whx-years__row { display: grid; grid-template-columns: repeat(10, 1fr); border-top: 1px solid var(--whx-line); border-left: 1px solid var(--whx-line); }
.whx-years__cell { display: flex; align-items: center; justify-content: center; text-decoration: none; border-right: 1px solid var(--whx-line); border-bottom: 1px solid var(--whx-line); padding: 11px 4px; font-family: var(--whx-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; color: var(--whx-ink); transition: background-color .15s ease, color .15s ease; }
.whx-years__cell:hover { background: var(--whx-blue); color: #fff; }
.whx-years__cell.empty { color: #cdccc5; font-weight: 500; }
.whx-years__cell.empty:hover { background: #f1f0ea; color: #9aa0a6; }

@media (max-width: 900px) {
  .whx-index__title { font-size: 38px; }
  .whx-conts { grid-template-columns: repeat(2, 1fr); }
  .whx-types { grid-template-columns: repeat(2, 1fr); }
  .whx-years__row { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 560px) {
  .whx-index__title { font-size: 31px; }
  .whx-index__stand { font-size: 15px; }
  .whx-conts { grid-template-columns: 1fr; }
  .whx-types { grid-template-columns: 1fr; }
  .whx-types li a { padding: 13px 14px; }
  .whx-themes li a { padding: 12px 15px; font-size: 13px; }
  .whx-years__decade { grid-template-columns: 1fr; gap: 7px; }
  .whx-years__dl { padding-top: 0; }
  .whx-years__row { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================================
   BRIEF #13A — continent page as a ranked atlas ledger
   ========================================================================== */
.whx-cont__eyebrow { font-family: var(--whx-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--whx-faint); margin: 0; }
.whx-cont__title { font-family: var(--whx-serif); font-weight: 500; font-size: 44px; color: var(--whx-ink); line-height: 1.02; margin: 10px 0 7px; }
.whx-cont__stand { font-family: var(--whx-serif); font-style: italic; font-size: 17px; color: var(--whx-muted); margin: 0; }
/* CD "Fixed": the .whx-cont__lead box keeps the SAME height in both modes (leaders
   plates in count, A-Z jump index in az) so the page never reflows and the toggle
   below never moves. Its top margin lives here so the whole region reads as one box. */
.whx-cont__lead { margin-top: 38px; }
.whx-cont__leadlab { font-family: var(--whx-sans); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--whx-faint); margin: 0 0 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* label text swaps Most inscribed <-> Jump to */
.whx-cont__leadlab .swap--az { display: none; }
.whx-cont.is-az .whx-cont__leadlab .swap--count { display: none; }
.whx-cont.is-az .whx-cont__leadlab .swap--az { display: inline; }
.whx-leaders { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--whx-ink); border-left: 1px solid var(--whx-line); }
.whx-leaders li a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; border-right: 1px solid var(--whx-line); border-bottom: 1px solid var(--whx-line); padding: 22px 24px 24px; transition: background-color .15s ease; }
.whx-leaders li a:hover { background: #f4f3ef; }
.whx-leaders .rk { font-family: var(--whx-sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; color: #c2c1ba; }
.whx-leaders .nm { font-family: var(--whx-serif); font-weight: 500; font-size: 30px; color: var(--whx-ink); line-height: 1.05; transition: color .15s ease; }
.whx-leaders li a:hover .nm { color: var(--whx-blue); }
.whx-leaders .ct { font-family: var(--whx-sans); font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--whx-faint); }
.whx-leaders .bar { height: 2px; background: var(--whx-line); margin-top: 8px; position: relative; }
.whx-leaders .bar span { position: absolute; inset: 0 auto 0 0; background: var(--whx-blue); }
/* CD "Fixed": A-Z jump index — fills the SAME box as the leaders plates so the height
   is identical in both modes (no reflow, no jump). Letters present in the data link to
   #az-{letter} anchors on the first ledger row of each letter; absent letters greyed.
   To guarantee identical height at EVERY width (the index and the 3 plates differ by
   width — +21px desktop, -7px tablet, +116px phone), we keep .whx-leaders occupying its
   space in A-Z (visibility:hidden, not display:none) so it always defines the box height,
   and overlay the index absolutely on top. Box height === leaders height, automatically. */
.whx-cont__lead { position: relative; }
.whx-azindex { display: none; border-top: 1px solid var(--whx-ink); border-left: 1px solid var(--whx-line); border-right: 1px solid var(--whx-line); border-bottom: 1px solid var(--whx-line); }
.whx-cont.is-az .whx-leaders { visibility: hidden; }
.whx-cont.is-az .whx-azindex { display: block; position: absolute; left: 0; right: 0; top: 0; }
.whx-azindex__line { font-family: var(--whx-serif); font-style: italic; font-size: 17px; color: var(--whx-muted); margin: 0; padding: 22px 24px 4px; }
.whx-azindex__letters { display: flex; flex-wrap: wrap; margin: 0; padding: 10px 16px 18px; }
.whx-azindex__letters a, .whx-azindex__letters span { font-family: var(--whx-sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--whx-blue); text-decoration: none; padding: 7px 11px; transition: background-color .15s ease, color .15s ease; }
.whx-azindex__letters a:hover { background: #f4f3ef; }
.whx-azindex__letters span { color: #d3d2cb; cursor: default; }
.whx-cont__alllab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--whx-ink); padding-bottom: 11px; margin: 46px 0 0; }
.whx-cont__alllab .lab { font-family: var(--whx-serif); font-weight: 500; font-size: 24px; color: var(--whx-ink); }
.whx-cont__alllab .cnt { font-family: var(--whx-sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #aeb2b7; white-space: nowrap; }
.whx-ledger { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-left: 1px solid var(--whx-line); }
.whx-ledger li a { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px; text-decoration: none; border-right: 1px solid var(--whx-line); border-bottom: 1px solid var(--whx-line); padding: 12px 18px; transition: background-color .15s ease; }
.whx-ledger li a:hover { background: #f4f3ef; }
.whx-ledger .rk { font-family: var(--whx-sans); font-size: 10px; font-weight: 600; color: #c2c1ba; }
.whx-ledger .nm { font-family: var(--whx-serif); font-weight: 500; font-size: 17px; color: var(--whx-ink); transition: color .15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whx-ledger li a:hover .nm { color: var(--whx-blue); }
.whx-ledger .rt { display: flex; align-items: center; gap: 10px; }
.whx-ledger .bar { width: 42px; height: 2px; background: var(--whx-line2); position: relative; flex: none; }
.whx-ledger .bar span { position: absolute; inset: 0 auto 0 0; background: #c4ccd4; }
.whx-ledger li a:hover .bar span { background: var(--whx-blue); }
.whx-ledger .ct { font-family: var(--whx-sans); font-size: 12px; font-weight: 600; color: var(--whx-muted); width: 22px; text-align: right; }

/* ── CD "WHX Continent Sort": quiet Count↔A-Z toggle on the rule + responsive ledger ──
   The boxed dropdown is replaced by two letterspaced text labels seated on the section
   rule; the active one is inked with a 2px blue underline flush to the rule. */
.whx-cont__alllab { align-items: flex-end; flex-wrap: wrap; }
.whx-cont__alllab .lab { line-height: 1.1; }
/* heading swaps with mode */
.whx-cont .lab--az { display: none; }
.whx-cont.is-az .lab--count { display: none; }
.whx-cont.is-az .lab--az { display: inline; }

.whx-sort { display: inline-flex; align-items: center; flex: none; margin-left: auto; }
.whx-sort__opt { font-family: var(--whx-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #aeb2b7; background: none; border: none; cursor: pointer; padding: 4px 0; position: relative; transition: color .15s ease; }
.whx-sort__opt:hover { color: var(--whx-muted); }
.whx-sort__sep { width: 1px; height: 12px; background: #d8d7d0; margin: 0 14px; }
.whx-sort__opt.is-on { color: var(--whx-ink); }
.whx-sort__opt.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 2px; background: var(--whx-blue); }

/* two ledger bodies; CSS shows one per mode */
.whx-ledger--az { display: none; }
.whx-cont.is-az .whx-ledger--count { display: none; }
.whx-cont.is-az .whx-ledger--az { display: grid; }
/* A-Z list is name + count only (the clean lookup view). The leaders region stays in
   place (now showing the jump index), so the toggle rule never moves — no JS pin. */
.whx-ledger--az li a { grid-template-columns: 1fr auto; }
.whx-ledger--az .nm { white-space: normal; }

@media (max-width: 900px) {
  .whx-cont__title { font-size: 38px; }
  /* In the 2-up ledger the fixed magnitude bar steals the horizontal room the
     country name needs ("Cost...", "Suri..."). The count already conveys the
     magnitude, so drop the bar at tablet/phone and let the name reclaim space.
     (The A-Z list has no bar to begin with.) */
  .whx-ledger--count .bar { display: none; }
  .whx-ledger--count .rt { gap: 0; }
}
@media (max-width: 680px) {
  /* CD: single column early so long names ("North Macedonia", "Bosnia and
     Herzegovina") never truncate. Drop the ellipsis clamp so the full name shows
     (single column gives it the room; it wraps rather than clips if ever needed). */
  .whx-ledger { grid-template-columns: 1fr; }
  .whx-ledger .nm { white-space: normal; overflow: visible; text-overflow: clip; }
}
@media (max-width: 560px) {
  .whx-cont__title { font-size: 30px; }
  .whx-cont__stand { font-size: 15px; }
  .whx-cont__alllab { gap: 12px; }
  .whx-cont__alllab .lab { font-size: 21px; }
  .whx-leaders { grid-template-columns: 1fr; }
  .whx-ledger li a { padding: 14px 16px; }
}

/* ============================================================================
   BRIEF #13B — homepage (catalogue title spread)
   ========================================================================== */
.whx-home { background: #fff; }
/* the .whx-content panel drops its own padding for the home view, so the hero +
   sections carry the horizontal gutter themselves (matches the rest of the site). */
.whx-hero { padding: 64px var(--whx-gut) 54px; border-bottom: 1px solid var(--whx-ink); }
.whx-hero__eyebrow { font-family: var(--whx-sans); font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--whx-faint); margin: 0; }
.whx-hero__title { font-family: var(--whx-serif); font-weight: 500; font-size: 58px; color: var(--whx-ink); line-height: 1.0; margin: 16px 0 0; max-width: 14ch; }
.whx-hero__lede { font-family: var(--whx-serif); font-style: italic; font-size: 19px; color: var(--whx-muted); line-height: 1.5; margin: 20px 0 0; max-width: 46ch; }
.whx-hero__meta { font-family: var(--whx-sans); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #c2c1ba; margin: 24px 0 0; }

.whx-sec { padding: 48px var(--whx-gut); border-bottom: 1px solid var(--whx-line); }
.whx-sec--last { border-bottom: 0; }
.whx-sec__h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.whx-sec__lab { font-family: var(--whx-serif); font-weight: 500; font-size: 26px; color: var(--whx-ink); }
.whx-sec__cnt { font-family: var(--whx-sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #aeb2b7; }
.whx-sec__more { font-family: var(--whx-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--whx-blue); text-decoration: none; white-space: nowrap; }
.whx-sec__more:hover { color: var(--whx-ink); }

.whx-mv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--whx-ink); border-left: 1px solid var(--whx-line); }
.whx-mv li a { display: flex; flex-direction: column; text-decoration: none; border-right: 1px solid var(--whx-line); border-bottom: 1px solid var(--whx-line); padding: 22px 24px 24px; transition: background-color .15s ease; }
.whx-mv li a:hover { background: #f4f3ef; }
.whx-mv .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.whx-mv .ico { width: 34px; height: 34px; color: var(--whx-blue); flex: none; line-height: 0; }
.whx-mv .ico svg { width: 34px; height: 34px; }
.whx-mv .rk { font-family: var(--whx-sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; color: #c2c1ba; }
.whx-mv .nm { font-family: var(--whx-serif); font-weight: 500; font-size: 23px; color: var(--whx-ink); line-height: 1.1; margin-top: 16px; transition: color .15s ease; }
.whx-mv li a:hover .nm { color: var(--whx-blue); }
.whx-mv .vis { font-family: var(--whx-sans); font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--whx-faint); margin-top: 7px; }
.whx-mv .vis b { font-weight: 700; color: var(--whx-muted); }
.whx-mv__note { font-family: var(--whx-sans); font-size: 10.5px; color: #c2c1ba; margin-top: 14px; letter-spacing: .04em; line-height: 1.5; }

.whx-plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--whx-ink); border-left: 1px solid var(--whx-line); }
.whx-plates.type { grid-template-columns: repeat(4, 1fr); }
.whx-plates li a { display: flex; flex-direction: column; gap: 7px; text-decoration: none; border-right: 1px solid var(--whx-line); border-bottom: 1px solid var(--whx-line); padding: 20px 22px 22px; transition: background-color .15s ease; }
.whx-plates li a:hover { background: #f4f3ef; }
.whx-plates .nm { font-family: var(--whx-serif); font-weight: 500; font-size: 24px; color: var(--whx-ink); transition: color .15s ease; }
.whx-plates li a:hover .nm { color: var(--whx-blue); }
.whx-plates .mt { font-family: var(--whx-sans); font-size: 11px; font-weight: 500; letter-spacing: .05em; color: var(--whx-faint); }

/* all-countries gazetteer (Brief #14): per-continent ranked rows + magnitude bar,
   single-site tail folded into an inline named run. CSS columns pack the 6 blocks. */
.whx-gaz { columns: 3; column-gap: 40px; }
.whx-gaz__grp { break-inside: avoid; display: inline-block; width: 100%; margin-bottom: 30px; }
.whx-gaz__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--whx-ink); padding-bottom: 9px; }
.whx-gaz__name { font-family: var(--whx-serif); font-weight: 500; font-size: 20px; color: var(--whx-ink); }
.whx-gaz__meta { font-family: var(--whx-sans); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #c2c1ba; }
.whx-gaz__rows { list-style: none; margin: 0; padding: 0; }
.whx-gaz__rows li a { display: grid; grid-template-columns: 1fr 46px 24px; align-items: center; gap: 11px; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--whx-line2); transition: color .15s ease; }
.whx-gaz__rows .nm { font-family: var(--whx-sans); font-size: 13px; color: var(--whx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s ease; }
.whx-gaz__rows li a:hover .nm { color: var(--whx-blue); }
.whx-gaz__rows .bar { height: 2px; background: var(--whx-line2); position: relative; }
.whx-gaz__rows .bar span { position: absolute; inset: 0 auto 0 0; background: #c4ccd4; }
.whx-gaz__rows li a:hover .bar span { background: var(--whx-blue); }
.whx-gaz__rows .ct { font-family: var(--whx-sans); font-size: 12px; font-weight: 600; color: var(--whx-muted); text-align: right; }
.whx-gaz__tail { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--whx-line2); }
.whx-gaz__taillab { font-family: var(--whx-sans); font-size: 8.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #c2c1ba; margin-bottom: 6px; }
.whx-gaz__tailrun { font-family: var(--whx-sans); font-size: 12.5px; line-height: 1.9; color: var(--whx-ink); overflow-wrap: break-word; }
.whx-gaz__tailrun a { color: var(--whx-ink); text-decoration: none; transition: color .15s ease; }
.whx-gaz__tailrun a:hover { color: var(--whx-blue); }
/* comma glued to the name; the real space between <a> tags in the markup is the
   BREAKABLE separator, so the run wraps at the column edge instead of overflowing. */
.whx-gaz__tailrun a:not(:last-child)::after { content: ","; color: #cdccc5; }

@media (max-width: 900px) {
  .whx-hero { padding: 52px 30px 44px; }
  .whx-hero__title { font-size: 46px; }
  .whx-sec { padding: 42px 30px; }
  .whx-mv { grid-template-columns: repeat(2, 1fr); }
  .whx-plates, .whx-plates.type { grid-template-columns: repeat(2, 1fr); }
  .whx-gaz { columns: 2; }
}
@media (max-width: 560px) {
  .whx-hero { padding: 40px 18px 34px; }
  .whx-hero__title { font-size: 34px; }
  .whx-hero__lede { font-size: 16px; }
  .whx-sec { padding: 34px 18px; }
  .whx-sec__lab { font-size: 22px; }
  .whx-mv { grid-template-columns: 1fr; }
  .whx-plates, .whx-plates.type { grid-template-columns: 1fr; }
  .whx-gaz { columns: 1; }
}

/* all-countries sort toggle (By count / A-Z) + the A-Z flat list view.
   Quiet typographic control matching the site's view-toggle language. */
.whx-gaz__toggle { display: inline-flex; align-items: stretch; border: 1px solid #d8d7d0; flex: none; }
.whx-gazbtn { font-family: var(--whx-sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--whx-muted); background: #fff; border: 0; padding: 8px 14px; cursor: pointer; transition: background-color .15s, color .15s; }
.whx-gazbtn:hover { color: var(--whx-ink); }
.whx-gazbtn.is-active { background: var(--whx-ink); color: #fff; }
.whx-gazbtn__sep { width: 1px; background: #d8d7d0; flex: none; }
/* A-Z view: a clean flat alphabetical list with counts (no bars, no tail-fold) */
.whx-gaz__azlist { list-style: none; margin: 0; padding: 0; }
.whx-gaz__azlist li a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-decoration: none; padding: 7px 0; border-bottom: 1px solid var(--whx-line2); transition: color .15s ease; }
.whx-gaz__azlist .nm { font-family: var(--whx-sans); font-size: 13px; color: var(--whx-ink); transition: color .15s ease; }
.whx-gaz__azlist li a:hover .nm { color: var(--whx-blue); }
.whx-gaz__azlist .ct { font-family: var(--whx-sans); font-size: 12px; font-weight: 600; color: var(--whx-muted); }

/* footer warm sign-off (a sincere closing line, set apart from the legal text) */
/* warm closing grace note: Bodoni italic, set apart from the sans legal lines
   with extra space above so it reads as a deliberate sign-off, not a stray line. */

/* ─── Reduced motion ───────────────────────────────────────────────────────
   Respect the OS "reduce motion" setting: kill transitions, animations and
   smooth-scroll for users who ask for it (vestibular safety + a11y). The site
   has no essential motion — every transition is decorative (hover tints, the
   modal fade) — so neutralising them costs nothing and helps real users. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}