/* Resource hub: /moving, /moving/{path}, /guides, /guides/{slug}, /community ("Caribbean light").
   Built on base.css (its tokens and components: .band, .wave, .split, .card, .chip, .more,
   .icon-tile, .frame…); this file adds only what the hub pages need. Written for older readers:
   large type, whole cards as click targets with a strong focus ring, 48 px tap targets.
   Logical properties only (RTL-ready). The guide page prints on its own (see the end). */

/* ---- Page top: the hero of each hub page ----------------------------------------------------- */

.hub-top { padding-block: var(--space-s) var(--space-xl); }
.hub-top h1 {
  margin-block: var(--space-3xs) var(--space-s);
  font-size: var(--display-size);
  letter-spacing: -0.028em;
  line-height: 1.04;
}
.hub-top .lead { margin-block-end: var(--space-l); }
.hub-top .cluster { gap: var(--space-s) var(--space-l); }
.hub-top-photo { inline-size: 100%; max-inline-size: 28rem; justify-self: center; }
/* The sun behind the photo stays inside the page's side margin (no sideways scroll). */
.hub-top-photo.sunrise::before { inset-inline-end: -4%; }
.hub-top-icon { margin-block-end: var(--space-s); }
@media (max-width: 47.99rem) {
  .hub-top-photo { max-inline-size: 18rem; }
}

/* ---- Breadcrumb ------------------------------------------------------------------------------ */

.hub-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.6rem;
  list-style: none;
  padding: 0;
  font: 700 0.95rem/1.3 var(--display);
  color: var(--ink-soft);
}
.hub-breadcrumb li { display: inline-flex; align-items: center; max-inline-size: none; }
.hub-breadcrumb a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
.hub-breadcrumb li + li::before { content: "/"; margin-inline-end: 0.6rem; color: var(--ink-soft); }

/* ---- Whole-card links -------------------------------------------------------------------------- */

/* The one link in a card (its title) covers the card; the card shows the focus ring. */
.hub-card-link, .hub-group-link { color: var(--ink); text-decoration: none; }
.hub-card-link:hover, .hub-group-link:hover { color: var(--ink); }
.hub-card-link::after, .hub-group-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.hub-card-link:focus-visible, .hub-group-link:focus-visible { outline: none; }
:is(.hub-pcard, .hub-gcard, .hub-lcard, .hub-group):has(:is(.hub-card-link, .hub-group-link):focus-visible) { outline: var(--focus); outline-offset: 3px; }
:is(.hub-pcard, .hub-gcard, .hub-lcard, .hub-group):hover { border-color: var(--lagoon-line); }

/* The chevron in a circle that says "this whole card is a link" (fills on hover). */
.hub-go {
  flex: none;
  inline-size: 2.3rem;
  block-size: 2.3rem;
  background: var(--lagoon-deep);
  -webkit-mask: var(--icon-more) center / contain no-repeat;
  mask: var(--icon-more) center / contain no-repeat;
}
:is(.hub-pcard, .hub-lcard, .hub-group):hover .hub-go { -webkit-mask-image: var(--icon-more-on); mask-image: var(--icon-more-on); }
[dir="rtl"] .hub-go { transform: scaleX(-1); }

/* ---- Path pictures (templates/hub/_path_art.twig) --------------------------------------------- */

.hub-art { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sand); }
.hub-art-icon { display: grid; place-items: center; background: var(--foam); color: var(--ink); }
.hub-art-icon .icon { inline-size: 40%; block-size: 40%; }

/* ---- The six paths as picture cards (/moving) ------------------------------------------------- */

.hub-pcards {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  list-style: none;
  padding: 0;
  max-inline-size: none;
}
.hub-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  max-inline-size: none;
  overflow: hidden;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.hub-pcard:hover { transform: translateY(-3px); }
.hub-pcard-body { flex: 1; display: grid; align-content: start; gap: var(--space-3xs); padding-block: 1.1rem 1.4rem; padding-inline: 1.4rem 4.2rem; }
.hub-pcard h3 { margin: 0; font-size: 1.3rem; }
.hub-pcard p { color: var(--ink-soft); }
.hub-pcard .hub-go { position: absolute; inset-inline-end: 1.2rem; inset-block-end: 1.3rem; }
@media (max-width: 40rem) {
  .hub-pcard .hub-art { aspect-ratio: 16 / 10; } /* one card per row: a little less picture to scroll past */
}

/* ---- The roadmap: five stages along a gentle dotted path (/moving) ----------------------------- */

/* Phones: a column of stones joined by a dotted line. From 60rem: a row, joined by dotted arcs
   that rise and dip in turn (the arcs are inline SVG, decorative). The last stage is the sun. */
.hub-roadmap {
  counter-reset: stage;
  display: grid;
  gap: var(--space-l);
  list-style: none;
  padding: 0;
  max-inline-size: none;
}
.hub-roadmap > li {
  counter-increment: stage;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-s);
  align-content: start;
  max-inline-size: none;
}
.hub-roadmap > li:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block: 5rem calc(0.3rem - var(--space-l));
  inset-inline-start: calc(2.25rem - 1.5px);
  border-inline-start: 3px dotted var(--lagoon);
}
.hub-stone {
  grid-row: span 2;
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--white), var(--foam));
  box-shadow: inset 0 0 0 3px var(--foam-deep);
  color: var(--ink);
}
.hub-stone .icon { inline-size: 2.3rem; block-size: 2.3rem; }
.hub-stone::after {
  content: counter(stage);
  position: absolute;
  inset-block-start: -0.3rem;
  inset-inline-start: -0.3rem;
  display: grid;
  place-items: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  border-radius: 50%;
  background: linear-gradient(var(--gold), var(--coral));
  box-shadow: 0 0 0 3px var(--shell);
  font: 900 1rem/1 var(--display);
  color: var(--ink);
}
.hub-roadmap > li:last-child .hub-stone { background: radial-gradient(circle at 50% 70%, var(--gold-tint), var(--coral-tint)); box-shadow: inset 0 0 0 3px #ffcbb8; }
.hub-roadmap h3 { margin-block: 0.4rem 0.15rem; font-size: 1.25rem; }
.hub-roadmap p { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.hub-road-arc { display: none; }
@media (min-width: 60rem) {
  .hub-roadmap { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
  .hub-roadmap > li { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-inline: 0.6rem; text-align: center; }
  .hub-roadmap > li:not(:last-child)::before { content: none; }
  .hub-stone { grid-row: auto; inline-size: 5.5rem; block-size: 5.5rem; }
  .hub-stone .icon { inline-size: 2.7rem; block-size: 2.7rem; }
  .hub-roadmap h3 { margin-block-start: var(--space-s); }
  .hub-road-arc {
    display: block;
    position: absolute;
    inset-block-start: 1.35rem;
    inset-inline-start: calc(50% + 3.2rem);
    inline-size: calc(100% - 6.4rem);
    block-size: 1.6rem;
    overflow: visible;
    fill: none;
    stroke: var(--lagoon);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 0 9;
  }
  .hub-road-arc path { vector-effect: non-scaling-stroke; }
  .hub-roadmap > li:nth-child(even) .hub-road-arc { inset-block-start: 2.55rem; transform: scaleY(-1); }
}

/* ---- "Talk to someone from home": the Ambassador band and card (_ambassador.twig) --------------- */

.hub-amb .eyebrow { color: var(--lagoon-deep); } /* coral-ink is for shell and white only */
.hub-amb .eyebrow + h2 { margin-block-start: 0; }
.hub-amb-art { position: relative; inline-size: 100%; max-inline-size: 26rem; justify-self: center; }
.hub-amb-art img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; }
/* Under the illustration, on a white card that overlaps its foot: the countdown to the Ambassador
   program (program/_countdown.twig, compact), or "Starting soon" while there is no date. */
.hub-amb-when {
  position: relative;
  display: grid;
  gap: var(--space-2xs);
  justify-items: center;
  inline-size: min(100%, 22rem);
  margin-block-start: -2.5rem;
  margin-inline: auto;
  padding-block: var(--space-s);
  padding-inline: clamp(0.75rem, 3vw, 1.1rem);
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: var(--shadow);
  text-align: center;
}
.hub-amb-when > * { margin: 0; }
.hub-amb-when-title { font: 800 1.05rem/1.3 var(--display); max-inline-size: none; }
.hub-amb-when .countdown { justify-items: center; }
@media (max-width: 47.99rem) {
  .hub-amb-when { margin-block-start: -1.5rem; }
}
/* The empty place of a future Ambassador (no one is shown before there are Ambassadors). */
.hub-amb-frame {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 3.2rem;
  block-size: 3.2rem;
  border: 3px dashed var(--lagoon);
  border-radius: 50%;
  background: var(--foam);
  color: var(--lagoon-deep);
}
.hub-amb-frame .icon { inline-size: 55%; block-size: 55%; opacity: 0.6; }
.hub-amb-residents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-xs);
  margin-block-start: var(--space-m);
  font: 800 1.05rem/1.3 var(--display);
}
.hub-amb-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
  margin-block: var(--space-l) var(--space-xl);
}
.hub-amb-card .hub-amb-frame { inline-size: 5.5rem; block-size: 5.5rem; background: var(--white); }
.hub-amb-card-body > * { margin-block: 0; }
.hub-amb-card-body > * + * { margin-block-start: var(--space-2xs); }
.hub-amb-starts { display: flex; align-items: center; gap: 0.5rem; font: 800 1rem/1.35 var(--display); }
.hub-amb-starts .icon { flex: none; inline-size: 1.4rem; block-size: 1.4rem; }
.hub-amb-card .cluster { gap: 0 var(--space-l); }
@media (max-width: 30rem) {
  .hub-amb-card { flex-direction: column; }
}

/* ---- The community block (_community_block.twig) and /community's illustration ---------------- */

.hub-community-art { inline-size: 100%; max-inline-size: 24rem; justify-self: center; }
.hub-community-art img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; }
@media (max-width: 47.99rem) {
  .hub-community-art, .hub-amb-art { max-inline-size: 17rem; }
}
.hub-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-s); list-style: none; padding: 0; margin-block: var(--space-m); max-inline-size: none; }
.hub-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  max-inline-size: none;
  padding-block: 0.95rem;
  padding-inline: 1rem 1.1rem;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}
.hub-group-body { flex: 1; min-inline-size: 0; display: grid; gap: 0.1rem; }
.hub-group-link { font: 800 1.15rem/1.3 var(--display); overflow-wrap: anywhere; }
.hub-group-body p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.45; }
.hub-group-body .hub-group-kind { font: 700 0.9rem/1.3 var(--display); color: var(--lagoon-deep); }

/* ---- Guide cards (_guide_list.twig) -------------------------------------------------------------- */

.hub-guides {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  list-style: none;
  padding: 0;
  max-inline-size: none;
}
.hub-gcard { display: flex; flex-direction: column; gap: var(--space-2xs); max-inline-size: none; }
.hub-gcard .icon-tile { margin-block-end: var(--space-3xs); }
.hub-gcard .card-title { font-size: 1.25rem; }
.hub-gcard p { color: var(--ink-soft); }
.hub-gcard .hub-gcard-date { margin-block-start: auto; padding-block-start: var(--space-2xs); font: 700 0.9rem/1.3 var(--display); }
.hub-more { margin-block-start: var(--space-m); }

/* ---- Groups on /guides (by topic) and /community (by platform) ------------------------------------ */

.hub-group-section + .hub-group-section { margin-block-start: var(--space-2xl); }
.hub-topic-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
  margin-block-end: var(--space-m);
}
.hub-topic-head h2 { flex: 1 1 12rem; margin: 0; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); }
.hub-topic-art { flex: none; inline-size: 6rem; border-radius: var(--radius); box-shadow: var(--shadow-s); }
.hub-topics { margin-block-start: var(--space-m); }
.hub-topics-title { margin-block: 0 var(--space-2xs); font: 800 1rem/1.3 var(--display); color: var(--ink-soft); }
.hub-topics .chip { min-block-size: var(--tap); padding-inline: 1.1rem; font-size: 1rem; text-decoration: none; }
.hub-topics .chip:hover { background: var(--foam); color: var(--ink); }

/* Community link cards (/community). */
.hub-lcards {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  list-style: none;
  padding: 0;
  max-inline-size: none;
}
.hub-lcard { display: flex; flex-direction: column; gap: var(--space-2xs); max-inline-size: none; }
.hub-lcard .card-title { padding-inline-end: 3rem; }
.hub-lcard p { color: var(--ink-soft); }
.hub-lcard .hub-go { position: absolute; inset-block-start: clamp(1.1rem, 3vw, 1.8rem); inset-inline-end: clamp(1.1rem, 3vw, 1.8rem); }
.hub-lcard-meta { margin-block-start: auto; padding-block-start: var(--space-2xs); }

/* ---- A path page ------------------------------------------------------------------------------------ */

.hub-path-top h1 { font-size: var(--h1); }
.hub-path-art { inline-size: 100%; max-inline-size: 34rem; justify-self: center; }
.hub-path-art .hub-art { border-radius: var(--radius-xl); box-shadow: var(--shadow-l); }
.hub-covers { margin-block: var(--space-l) var(--space-xl); }
.hub-covers > h2 { margin-block-start: 0; }
.hub-cover-list {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  list-style: none;
  padding: 0;
  margin-block: var(--space-m);
  max-inline-size: none;
}
.hub-cover-list li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  max-inline-size: none;
  padding-block: 0.8rem;
  padding-inline: 0.8rem 1.1rem;
  background: var(--white);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  font: 800 1.1rem/1.3 var(--display);
}
.hub-covers .hub-prose { margin-block-start: var(--space-l); }

/* ---- A guide: the reading layout ------------------------------------------------------------------ */

/* One centred column: the text about 65 characters wide, in large type. */
.hub-guide,
.hub-guide ~ :is(.hub-amb-card, .hub-start, .hub-back) { inline-size: 100%; max-inline-size: 48rem; margin-inline: auto; }
.hub-fallback { margin-block: var(--space-s) var(--space-m); }
/* Without a hero image, the first path's illustration: a strip above the title on phones, a
   picture beside it on wider screens. */
.hub-guide-top-art { display: grid; gap: var(--space-m); }
.hub-guide-top-art > .hub-art { order: -1; aspect-ratio: 2 / 1; border-radius: var(--radius-l); box-shadow: var(--shadow-s); }
@media (min-width: 48rem) {
  .hub-guide-top-art { grid-template-columns: minmax(0, 1fr) 13rem; align-items: start; gap: var(--space-l); }
  .hub-guide-top-art > .hub-art { order: 0; aspect-ratio: 4 / 3; margin-block-start: var(--space-m); }
}
.hub-guide .hub-hero { padding-block-start: var(--space-s); }
.hub-guide h1 { margin-block-end: var(--space-xs); }
.hub-guide .hub-hero .lead { max-inline-size: 42ch; margin-block-end: var(--space-s); }
.hub-updated { margin-block-end: var(--space-l); }
.hub-updated .chip { min-block-size: 2.4rem; }
.hub-updated .icon { inline-size: 1.5em; block-size: 1.5em; }
.hub-hero-image {
  display: block;
  inline-size: 100%;
  max-inline-size: 48rem;
  block-size: auto;
  margin-block-end: var(--space-l);
  border-radius: var(--radius-l);
  background: var(--sand-deep);
}

.hub-prose { max-inline-size: 65ch; font-size: 1.125rem; line-height: 1.7; overflow-wrap: break-word; }
.hub-prose :is(p, li) { max-inline-size: none; }
.hub-prose > * + * { margin-block-start: 1.05em; }
.hub-prose h2 { margin-block: 1.9em 0.4em; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
.hub-prose h3 { margin-block: 1.6em 0.3em; font-size: 1.45rem; }
.hub-prose h4 { margin-block: 1.4em 0.2em; }
.hub-prose :is(h2, h3, h4) + * { margin-block-start: 0; }
.hub-prose > :first-child { margin-block-start: 0; }
.hub-prose :is(ul, ol) { padding-inline-start: 1.6rem; }
.hub-prose li + li { margin-block-start: 0.45rem; }
.hub-prose li::marker { color: var(--coral-deep); font-weight: 700; }
.hub-prose a { font-weight: 600; }
.hub-prose img { display: block; max-inline-size: 100%; block-size: auto; border-radius: var(--radius); }
.hub-prose blockquote {
  padding-block: 0.9rem;
  padding-inline: 1.2rem;
  border-inline-start: 4px solid var(--coral);
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
  background: var(--sand);
  color: var(--ink-soft);
}
.hub-prose code { padding-inline: 0.25em; border-radius: 4px; background: var(--sand-deep); font-size: 0.9em; }
.hub-prose pre { overflow-x: auto; padding: 1rem; border-radius: var(--radius); background: var(--white); }
.hub-prose table { display: block; overflow-x: auto; border-collapse: collapse; }
.hub-prose :is(th, td) { padding-block: 0.5rem; padding-inline: 0.75rem; border: 1px solid var(--sand-deep); text-align: start; }
.hub-prose hr { margin-block: 2em; }

/* Notes for readers from one country: a foam box of closed notes, each opened by its reader. */
.hub-notes {
  margin-block: var(--space-xl);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-l);
  background: var(--foam);
}
.hub-notes-head { display: flex; align-items: flex-start; gap: var(--space-s); margin-block-end: var(--space-m); }
.hub-notes-head h2 { margin-block: 0.2rem 0.25rem; font-size: var(--h3); }
.hub-note { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-s); }
.hub-note + .hub-note { margin-block-start: var(--space-xs); }
.hub-note summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: 3.2rem;
  padding-block: 0.75rem;
  padding-inline: 1.1rem;
  list-style: none;
  cursor: pointer;
  font: 800 1.1rem/1.3 var(--display);
}
.hub-note summary::-webkit-details-marker { display: none; }
.hub-note summary::before {
  content: "";
  flex: none;
  inline-size: 1.3rem;
  block-size: 1.3rem;
  background: var(--lagoon-deep);
  -webkit-mask: var(--icon-select) center / contain no-repeat;
  mask: var(--icon-select) center / contain no-repeat;
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}
[dir="rtl"] .hub-note summary::before { transform: rotate(90deg); }
.hub-note[open] summary::before { transform: none; }
.hub-note[open] summary { border-block-end: 2px solid var(--foam); }
.hub-note > .hub-prose { padding-block: 1rem 1.25rem; padding-inline: 1.25rem; font-size: 1.05rem; }

/* The paths a guide helps with: chips whose link covers the chip. */
.hub-guide-paths { margin-block: var(--space-xl) 0; }
.hub-guide-paths h2 { font-size: var(--h3); }
.hub-path-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; padding: 0; max-inline-size: none; }
.hub-path-chips li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-block-size: var(--tap);
  max-inline-size: 100%;
  padding-block: 0.3rem;
  padding-inline: 0.75rem 1.2rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--lagoon-line);
}
.hub-path-chips .icon { inline-size: 1.6rem; block-size: 1.6rem; }
.hub-path-chips a { font: 800 1rem/1.25 var(--display); color: var(--lagoon-deep); text-decoration: none; }
.hub-path-chips a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hub-path-chips a:focus-visible { outline: none; }
.hub-path-chips li:has(a:focus-visible) { outline: var(--focus); outline-offset: 3px; }
.hub-path-chips li:hover { background: var(--foam); }

/* ---- Start your move (_start.twig): the sun rising over the sea ----------------------------------- */

.hub-start {
  margin-block: var(--space-2xl) var(--space-s);
  padding-block: var(--space-xl);
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--gold-tint), var(--coral-tint));
  text-align: center;
}
.hub-start-sun {
  display: block;
  inline-size: 6rem;
  block-size: 3rem;
  margin-inline: auto;
  margin-block-end: var(--space-m);
  border-radius: 6rem 6rem 0 0;
  background: linear-gradient(var(--gold), var(--coral));
  box-shadow: 0 1.1rem 0 -0.8rem var(--lagoon);
}
.hub-start h2 { margin-block: 0 var(--space-xs); }
.hub-start p { margin-inline: auto; max-inline-size: 38ch; }
.hub-start .button { margin-block-start: var(--space-s); }

.hub-back { margin-block-start: var(--space-l); }

/* ---- Print: a guide on paper (and any hub page without its navigation) ---------------------------- */

@media print {
  .site-header, .site-footer, .hub-breadcrumb, .hub-start, .hub-amb, .hub-amb-card, .hub-back,
  .hub-community, .hub-go, .hub-guide-paths { display: none !important; }
  .page { padding: 0; }
  .hub-guide { max-inline-size: none; }
  .hub-guide h1 { font-size: 22pt; }
  .hub-prose { max-inline-size: none; font-size: 12pt; line-height: 1.5; }
  .hub-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; font-weight: 400; overflow-wrap: anywhere; }
  .hub-prose :is(h2, h3, h4) { break-after: avoid; }
  .hub-prose :is(img, table, blockquote) { break-inside: avoid; }
  .hub-updated .chip, .hub-notes, .hub-note { box-shadow: none; border: 1px solid var(--sand-deep); background: none; }
  /* Every country's note on paper, open or not. */
  .hub-note::details-content { content-visibility: visible; display: block; }
  .hub-note summary::before { content: none; }
  .hub-hero-image { max-block-size: 9cm; object-fit: cover; }
}