/* ==========================================================================
   PAGE · THE WORLD MAP / HOME (M2 · p-home)
   The front door: the choropleth Plate (s2) shown as an engraved ATLAS
   cartogram, interrogated through the Factor Index selector (s1). New CSS here
   is only what the composed systems genuinely lack on this one page:

     1. .op-map--atlas  — the Plate laid out as a rough world tile-grid
        (a cartogram) on desktop; falls back to the component's responsive
        flow on mobile so the plate stays a legible figure. HARVESTABLE.
     2. .op-map__region — the faint atlas region labels (desktop furniture).
     3. .op-escort      — the escorted-score popover on hover/focus of a tile
        (the live home map's reading affordance; never a naked score). HARVESTABLE.
     4. page scaffolding (.p-home__*) — the front-matter band, the control rail,
        the coverage strip, and the two account-free trust doorways.

   Everything below 01-settings reads var(--token); links AFTER offprint.css and
   the s1/s2 component files.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FRONT MATTER — the index's opening: what this is, in seconds, no ask.
   -------------------------------------------------------------------------- */
.p-home__intro {
  padding-block: var(--space-xl) 0;
  max-inline-size: var(--measure-wide);
}
/* sit the rack so it LOOKS the same distance below the standfirst as the
   standfirst sits below the title — an optical match, not a box-equal one. The
   eye measures the gap above to the title's BASELINE: its descenders (the tail
   of the "p" in "mapped") read as whitespace, not text, so the title→standfirst
   gap appears ~12px larger than its space-md box value. The standfirst's last
   line has no descenders and butts against the rack chips' hard top edge, so it
   reads at nearly its true box value. space-lg lands the two perceived gaps
   even; we nudge one step further to space-xl so the rack gets a touch more air
   than the title→standfirst gap, setting it off as the page's first control
   (box-equal space-md was the "too small" state). */
.p-home__intro + * { margin-top: var(--space-xl); }
.p-home__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  overflow-wrap: break-word;
  margin: var(--space-sm) 0 0;
}
@media (max-width: 40rem) {
  .p-home__title { font-size: var(--text-xl); text-wrap: pretty; }
}
.p-home__title em { font-style: italic; }

/* --------------------------------------------------------------------------
   THE RACK — every specialty laid out at page load, the primary lens above the
   plate; its factor drawer unfolds in place when a specialty is chosen. The
   compact, searchable twin of this lens lives in the plate's caption below.
   -------------------------------------------------------------------------- */
.p-home__rack { margin-bottom: var(--space-sm); }

/* the plate's caption is two columns: Fig. n + title + legend grouped on the
   left, the dropdown lens in its own column on the right, vertically centred.
   nowrap keeps them side by side (the left column shrinks, its text wraps); on
   a narrow viewport they stack. */
.op-figure__caption:has(.op-selector--footer) {
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-md);
}
.op-figure__caption-main {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
}
@media (max-width: 48rem) {
  .op-figure__caption:has(.op-selector--footer) { flex-wrap: wrap; }
  .op-figure__caption-lens { margin-inline-start: auto; }
}
/* legend flows left with the title instead of floating to the right edge */
.op-figure__caption-main .op-figure__legend { margin-left: 0; }
.op-figure__caption-lens {
  flex: none;
  display: flex;
  align-items: center;
}

/* the lens banner sits between the rail and the plate; hidden until a lens is set */
.p-home__banner { margin-bottom: var(--space-sm); }
.p-home__banner[hidden] { display: none; }

/* --------------------------------------------------------------------------
   THE PLATE AS AN ATLAS — a tile cartogram. On desktop the tiles are placed
   into a 12-column world grid via per-tile --col/--row; on mobile we let the
   .op-map component's own responsive flow take over (a compact legible grid).
   -------------------------------------------------------------------------- */
.op-map--atlas {
  /* mobile / narrow: a fixed, fit-to-width grid. minmax(0,1fr) lets tracks
     shrink below content min so the plate never forces horizontal overflow. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 24rem) {
  .op-map--atlas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* region labels are desktop-only atlas furniture */
.op-map__region {
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-raised);
  user-select: none;
}

@media (min-width: 56.25rem) {
  .op-map--atlas {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 4.6rem;
  }
  .op-map--atlas .op-map__tile { grid-column: var(--col); grid-row: var(--row); min-block-size: 0; }
  .op-map--atlas .op-map__region { display: flex; grid-column: var(--col); grid-row: var(--row); }
}

/* the tile score sits a touch larger on the home plate's larger cells */
@media (min-width: 56.25rem) {
  .op-map--atlas .op-map__score { font-size: var(--text-xl); }
}

/* a tile being escorted (hovered/focused) lifts its keyline so the link reads */
.op-map__tile.is-escorted {
  box-shadow: inset 0 0 0 2px var(--bk-ink, var(--text));
  z-index: var(--z-raised);
}

/* --------------------------------------------------------------------------
   THE ESCORT — the score popover. A small printed card, not a web tooltip:
   serif country name, mono ISO, the dimension, the escorted score (the badge
   primitive), a coverage line, and the carry-the-lens doorway. Never a naked
   score; for the two honest absences it shows the coverage tag + a candour line.
   -------------------------------------------------------------------------- */
.op-escort {
  position: absolute;
  z-index: var(--z-popover);
  inline-size: min(20rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-sm) var(--space-md) var(--space-xs);
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
  transform: translate(-50%, calc(-100% - 0.6rem));
  pointer-events: none;       /* hover escort; the tile under it owns the click */
  opacity: 0;
  transition: opacity var(--duration-fast, 120ms) var(--ease-standard, ease);
}
.op-escort.is-open { opacity: 1; }
/* a printed nib pointing down at the tile */
.op-escort::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -7px;
  inline-size: 12px; block-size: 12px;
  background: var(--surface-raised);
  border-right: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  transform: translateX(-50%) rotate(45deg);
}

.op-escort__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--space-2xs);
}
.op-escort__country {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.op-escort__iso {
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  flex: none;
}
.op-escort__dim {
  display: block;
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: var(--space-2xs) 0;
}
.op-escort__dim em { font-style: normal; color: var(--text); }
.op-escort__score { margin: var(--space-2xs) 0; }
.op-escort__cover {
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  margin: var(--space-2xs) 0 0;
}
.op-escort__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--rule);
}
.op-escort__open {
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text);
}
.op-escort__open .op-escort__arrow { color: var(--accent); }
.op-escort__rubric {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   THE COVERAGE STRIP — the record states the edge of what it has assessed.
   Honest figures, each with its denominator, beside the provenance imprint.
   -------------------------------------------------------------------------- */
.p-home__ledgerline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}
.p-home__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-2xl);
}
.p-home__provenance { flex: 1 1 24rem; max-inline-size: var(--measure); }

/* --------------------------------------------------------------------------
   THE TRUST DOORWAYS — the two account-free ways to verify rigor before any
   ask: How we score, and Read a full sample. Quiet, editorial, dominant-by-
   restraint. Two ruled doorways, never a solid-ink CTA (the wallet is untouched).
   -------------------------------------------------------------------------- */
.p-home__doorways {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  margin-top: var(--space-xl);
}
@media (min-width: 40rem) {
  .p-home__doorways { grid-template-columns: 1fr 1fr; }
}
.p-home__door {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-emboss);
  text-decoration: none;
  color: var(--text);
  transition: var(--transition-ink);
}
.p-home__door:hover { border-color: var(--text); }
.p-home__door:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-home__door-title {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}
.p-home__door-title .p-home__door-arrow { color: var(--accent); }
.p-home__door-note {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-inline-size: 46ch;
}
.p-home__door-tag {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-2xs);
}