/* ============================================================
   StackData
   Palette: archival green-grey paper, ink, one ultramarine.
   The ramp steps are evenly spaced in OKLCH lightness
   (.66 / .60 / .535 / .47 at hue 266) so each step reads as
   equally far from its neighbour. Sequential = one hue, light to dark.
   The light end sits at .66, not the .855 it started at: a filled c1
   cell has to be tellable from an empty one, and an empty cell is
   --surface. At .66 every step clears 3:1 against --surface (c1 3.07,
   c2 3.91, c3 5.19, c4 6.97), which pins the light end. --c4 is the
   accent and does not move, so the four steps then sit ~1.3:1 apart
   rather than the ~1.5:1 of the old ramp — the step-to-step gap is
   what pays for the filled-vs-empty distinction, in that order.
   ============================================================ */

:root {
  --paper:   #f2f4f2;
  --surface: #fbfcfa;
  --ink:     #111d1b;
  --soft:    #626b69;
  --rule:    #dadfde;
  --accent:  #294dc1;
  --amber:   #bd7221;
  /* Same meaning, same hue family, darker: --amber only ever fills, outlines
     or swatches (3.4:1 clears the 3:1 bar for non-text), and --amber-ink is
     the one that carries words (5.07:1 on paper, 5.45:1 on surface). Absent /
     stopped / problem is the state that must never be the hardest to read. */
  --amber-ink: #9a5713;

  --c1: #6a8ee8;
  --c2: #537adf;
  --c3: #3d64d0;
  --c4: #294dc1;

  /* The catalog shows titles as their publishers wrote them, so sources in
     other scripts will land here. Fallback resolves per character, so a
     Latin-only face earlier in a stack never blocks this one, and it costs
     nothing until a non-Latin glyph actually appears. System faces only —
     no extra font request. */
  --jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
        "Yu Gothic", "Noto Sans JP", Meiryo;

  --sans:  "Archivo", var(--jp), ui-sans-serif, system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, var(--jp), serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, var(--jp), monospace;

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --pad:    clamp(4.5rem, 9vw, 8.5rem);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--surface);
  padding: .75rem 1rem;
  font-family: var(--mono);
  font-size: .75rem;
  z-index: 10;
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- type roles ---------- */

.mono {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--soft);
}

.display {
  margin: 0;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.9rem, 7.2vw, 5.1rem);
  line-height: .94;
  letter-spacing: -.045em;
}
.display__alt { color: var(--accent); }
.display--sm { font-size: clamp(2.1rem, 4.6vw, 3.25rem); }

.h2 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.55rem);
  line-height: 1.06;
  letter-spacing: -.032em;
}

.lede {
  margin: 1.5rem 0 0;
  color: var(--soft);
  font-size: 1.0625rem;
  max-width: 46ch;
}
.lede--narrow { max-width: 54ch; }

/* ---------- buttons ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-top: 2.25rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .8rem 1.25rem;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid { background: var(--ink); color: var(--surface); }
.btn--solid:hover { background: var(--accent); }
.btn--ghost { border-color: var(--rule); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface); }

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.topbar__in {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 64px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.02em;
  text-decoration: none;
}
.mark__grid {
  display: grid;
  grid-template-columns: repeat(2, 5px);
  gap: 2px;
}
/* The mark takes its own three blues rather than the data ramp. The ramp is
   tuned so a filled cell clears 3:1 against --surface, which pulled its light
   end dark and squeezed the steps together; a 5px logo square has no such job
   and needs the wider spread to still read as four distinct cells. These are
   the values in icon.svg, so the wordmark and the browser tab match. */
.mark__grid i {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #8facf1;
}
.mark__grid i:nth-child(1) { background: #294dc1; }
.mark__grid i:nth-child(4) { background: #5a80e3; }

.nav {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
  font-family: var(--mono);
  font-size: .75rem;
}
.nav a {
  text-decoration: none;
  color: var(--soft);
  padding-block: .25rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

.topbar__cta { padding: .55rem 1rem; }

/* ---------- sections ---------- */

.section { padding-block: var(--pad); }
.section--surface {
  background: var(--surface);
  border-block: 1px solid var(--rule);
}

.head { max-width: 60ch; margin-bottom: 3.5rem; }
.head--tight { margin-bottom: 2.75rem; }

/* ---------- hero ---------- */

.hero { padding-top: clamp(3.5rem, 7vw, 6rem); }

.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* ---------- the coverage matrix (signature) ---------- */

.coverage {
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.coverage__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .625rem;
  margin-bottom: 1.25rem;
}
.coverage__title { margin: 0; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.coverage__sub   { margin: 0; color: var(--soft); }

.matrix { display: grid; gap: 4px; }

.mrow {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
}
.mrow__label {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .08em;
  color: var(--soft);
}
.mrow__cells {
  display: grid;
  grid-template-columns: repeat(26, minmax(0, 1fr));
  gap: 2px;                 /* surface gap between adjacent fills */
}

.cell {
  aspect-ratio: 1;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--rule);
  animation: reveal .5s cubic-bezier(.2, .7, .3, 1) backwards;
}
.cell.c1 { background: var(--c1); box-shadow: none; }
.cell.c2 { background: var(--c2); box-shadow: none; }
.cell.c3 { background: var(--c3); box-shadow: none; }
.cell.c4 { background: var(--c4); box-shadow: none; }

/* A year with no data between two years that have it: the series stopped.
   Amber is reserved for this one state and never used as a ramp step. */
.cell.gap {
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--amber);
}

/* Chronological reveal: the archive fills up left to right. */
@keyframes reveal {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: none; }
}
.mrow__cells .cell:nth-child(1)  { animation-delay: .00s }
.mrow__cells .cell:nth-child(2)  { animation-delay: .02s }
.mrow__cells .cell:nth-child(3)  { animation-delay: .04s }
.mrow__cells .cell:nth-child(4)  { animation-delay: .06s }
.mrow__cells .cell:nth-child(5)  { animation-delay: .08s }
.mrow__cells .cell:nth-child(6)  { animation-delay: .10s }
.mrow__cells .cell:nth-child(7)  { animation-delay: .12s }
.mrow__cells .cell:nth-child(8)  { animation-delay: .14s }
.mrow__cells .cell:nth-child(9)  { animation-delay: .16s }
.mrow__cells .cell:nth-child(10) { animation-delay: .18s }
.mrow__cells .cell:nth-child(11) { animation-delay: .20s }
.mrow__cells .cell:nth-child(12) { animation-delay: .22s }
.mrow__cells .cell:nth-child(13) { animation-delay: .24s }
.mrow__cells .cell:nth-child(14) { animation-delay: .26s }
.mrow__cells .cell:nth-child(15) { animation-delay: .28s }
.mrow__cells .cell:nth-child(16) { animation-delay: .30s }
.mrow__cells .cell:nth-child(17) { animation-delay: .32s }
.mrow__cells .cell:nth-child(18) { animation-delay: .34s }
.mrow__cells .cell:nth-child(19) { animation-delay: .36s }
.mrow__cells .cell:nth-child(20) { animation-delay: .38s }
.mrow__cells .cell:nth-child(21) { animation-delay: .40s }
.mrow__cells .cell:nth-child(22) { animation-delay: .42s }
.mrow__cells .cell:nth-child(23) { animation-delay: .44s }
.mrow__cells .cell:nth-child(24) { animation-delay: .46s }
.mrow__cells .cell:nth-child(25) { animation-delay: .48s }
.mrow__cells .cell:nth-child(26) { animation-delay: .50s }

.coverage__axis {
  display: flex;
  justify-content: space-between;
  margin: .75rem 0 0 3.15rem;
  font-size: .625rem;
  color: var(--soft);
}

.coverage__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.legend { display: flex; align-items: center; gap: 3px; }
.legend .cell { width: 10px; aspect-ratio: 1; animation: none; }
.legend__label { color: var(--soft); font-size: .625rem; margin-inline: .375rem; }
.legend__sep { color: var(--rule); margin-inline: .5rem; }

.coverage__stats { margin: 0; color: var(--soft); }

/* ---------- classification shelf ---------- */

.shelf { list-style: none; margin: 0; padding: 0; }

.shelf__head,
.shelf__row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 5rem 8rem 8rem;
  align-items: center;
  gap: 1.5rem;
}

.shelf__head {
  margin: 0;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--rule);
  color: var(--soft);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.shelf__head span:nth-child(3) { text-align: right; }

.shelf__row {
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule);
  transition: background-color .16s ease;
}
.shelf__row:hover { background: var(--surface); }

.shelf__code  { color: var(--accent); font-weight: 500; letter-spacing: .08em; }
.shelf__name  { font-size: 1.0625rem; }
.shelf__count { text-align: right; font-weight: 500; }
.shelf__pub   { color: var(--soft); }

.bar {
  display: block;
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.bar i {
  display: block;
  width: var(--share);
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}

/* ---------- record card ---------- */

.record__in { display: grid; gap: 0; }

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.card__head { padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
.card__id {
  margin: 0 0 .875rem;
  color: var(--accent);
  letter-spacing: .1em;
}
.card__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.card__pub { margin: .75rem 0 0; color: var(--soft); }

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.75rem 2rem;
  margin: 1.75rem 0 0;
}
.field dt {
  margin-bottom: .375rem;
  color: var(--soft);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .625rem;
}
.field dd { margin: 0; font-size: .9375rem; }

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--c4);
  vertical-align: middle;
}

.card__gap {
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--soft);
  font-size: .9375rem;
}
.card__gap-key {
  display: block;
  margin-bottom: .375rem;
  color: var(--amber-ink);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .625rem;
}

/* ---------- method ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2.5rem 2rem;
}
.step { padding-top: 1rem; border-top: 2px solid var(--ink); }
.step__n { margin: 0 0 1.5rem; color: var(--soft); }
.step__t {
  margin: 0 0 .5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
}
.step__b { margin: 0; color: var(--soft); font-size: .9375rem; }

/* ---------- close ---------- */

.close { padding-top: clamp(3rem, 6vw, 5rem); }
.close__in { text-align: center; }
.close__in .lede { margin-inline: auto; }
.close__in .actions { justify-content: center; }

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--rule); padding-block: 3.5rem 2.5rem; }

.foot__in {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
}
.foot__col { display: flex; flex-direction: column; gap: .5rem; }
.foot__h {
  margin: 0 0 .5rem;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--soft);
}
.foot__p { margin: 0; color: var(--soft); font-size: .9375rem; max-width: 34ch; }
.foot__col a {
  font-family: var(--mono);
  font-size: .75rem;
  text-decoration: none;
  color: var(--ink);
  width: fit-content;
  border-bottom: 1px solid transparent;
}
.foot__col a:hover { border-bottom-color: var(--accent); }
.foot__legal {
  grid-column: 1 / -1;
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--soft);
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .nav { display: none; }
  .topbar__cta { margin-left: auto; }
  .shelf { border-top: 1px solid var(--rule); }
  .shelf__head { display: none; }
  .shelf__row {
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    gap: .5rem 1rem;
  }
  .shelf__pub { grid-column: 2 / 4; }
  .bar { grid-column: 2 / 4; }
  .foot__in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .mrow { grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem; }
  .coverage__axis { margin-left: 2.5rem; }
  .coverage__foot { justify-content: flex-start; }
  .foot__in { grid-template-columns: 1fr; }
}

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

/* ============================================================
   INTERIOR PAGES
   Everything below is additive: catalog, sources, method and a
   record page are built from these. Element selectors here are
   wrapped in :where() so they carry zero specificity and a class
   on the same element always wins — .section keeps owning section
   padding, and no <p> rule can outrank .lede.
   ============================================================ */

/* ---------- shared header, active state ---------- */

/* One {{ACTIVE}} token on <header> drives every link, so a builder edits one
   string per page and cannot leave two links lit at once. */
.topbar[data-active="catalog"] .nav a[data-page="catalog"],
.topbar[data-active="sources"] .nav a[data-page="sources"],
.topbar[data-active="method"]  .nav a[data-page="method"],
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ---------- shared footer, source attribution ---------- */

/* e-Stat's terms require the 出典 line wherever its data is shown, so it
   rides in the footer on every page rather than on one credits page. */
.foot__src {
  grid-column: 1 / -1;
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--soft);
  font-size: .8125rem;
  overflow-wrap: anywhere;   /* the required attribution carries a bare URL */
}
.foot__src + .foot__legal {
  margin-top: .4rem;
  padding-top: 0;
  border-top: 0;
}

/* ---------- utilities ---------- */

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Wide content scrolls inside its own box; the page never does. */
.tablewrap { overflow-x: auto; }

/* The sticky bar is two rows tall on a phone, so anchored headings clear it. */
:where([id]) { scroll-margin-top: 6rem; }

/* ---------- interior page header ---------- */

/* Used INSTEAD OF .section — an interior page opens at reading distance, not
   at a section's full --pad. The compound guard keeps it right if both land
   on one element by accident. */
.phead,
.section.phead {
  padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
.phead .eyebrow  { margin-bottom: .875rem; }
.phead .crumbs   { margin-bottom: 1.25rem; }
.phead__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -.032em;
}
.phead__stand {
  margin: 1rem 0 0;
  max-width: 58ch;
  color: var(--soft);
}

/* ---------- breadcrumb ---------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--soft);
}
.crumbs li { display: flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: "/"; color: var(--rule); }
.crumbs a {
  color: var(--soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.crumbs a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ---------- browse layout ---------- */

.browse {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
.browse__main { min-width: 0; }

/* ---------- facet sidebar (presentational) ---------- */

/* Nothing here filters. So nothing here is a checkbox, a button or a link:
   no pointer cursor, no hover, no focus stop. A control that cannot act must
   not look like it can. The counts are real portal counts; the panel says so. */
.facets { margin: 0; }

.facets__note {
  margin: 0 0 1.75rem;
  padding: .875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--amber);
  border-radius: 0 3px 3px 0;
  color: var(--soft);
  font-size: .8125rem;
}
.facets__k {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-ink);
}

.facet { margin: 0 0 1.75rem; }
.facet__h {
  margin: 0 0 .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soft);
}
.facet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.facet__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .55rem;
  font-size: .875rem;
  cursor: default;
}
.facet__box {
  width: 9px;
  height: 9px;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px var(--rule);
  transform: translateY(1px);
}
.facet__name { min-width: 0; }
.facet__n {
  font-family: var(--mono);
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--soft);
}
.facet__more {
  margin: .6rem 0 0;
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--soft);
}

/* ---------- catalog listing ---------- */

.cat { list-style: none; margin: 0; padding: 0; }

.cat__head,
.cat__row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) 10.5rem 8.5rem;
  gap: .4rem 1.5rem;
  align-items: baseline;
}
.cat__head {
  margin: 0;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--rule);
  color: var(--soft);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cat__row {
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--rule);
  transition: background-color .16s ease;
}
/* focus-within, not just hover: the row lights up for a keyboard too. */
.cat__row:hover,
.cat__row:focus-within { background: var(--surface); }

.cat__id {
  color: var(--accent);
  font-weight: 500;
  letter-spacing: .06em;
  overflow-wrap: anywhere;   /* mhlw_20201124_0048 must break, not overflow */
}

.cat__titles { min-width: 0; }

/* The Japanese title is the published one and leads. English is a second
   line, smaller and in the body face, so the pair reads as one entry with a
   translation beneath it — not two headlines competing for the same row. */
.cat__title {
  display: block;
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.38;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.cat__title a { text-decoration: none; border-bottom: 1px solid transparent; }
.cat__title a:hover { border-bottom-color: var(--accent); }
.cat__en {
  display: block;
  margin: .22rem 0 0;
  color: var(--soft);
  font-size: .875rem;
  line-height: 1.42;
}
.cat__org { color: var(--soft); font-size: .8125rem; }

.cat__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  min-width: 0;
}

/* Tiny inline caveat: "translation", "no field", "PDF only". */
.cat__flag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soft);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .05rem .3rem;
}
.cat__flag--absent { color: var(--amber-ink); border-color: var(--amber); }

/* ---------- source badge ---------- */

/* Two sources, one hue: they differ by fill, not by colour, so the badge
   survives greyscale and never reads as a second data series. */
.src {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--ink);
  white-space: nowrap;
}
.src__mark {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.src--egov  .src__mark { background: var(--accent); }
.src--estat .src__mark { background: transparent; }
.src--both  .src__mark {
  background: linear-gradient(135deg, var(--accent) 0 50%, transparent 50% 100%);
}
.src__name { min-width: 0; }

/* ---------- format chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .2rem .4rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--soft);
}
/* Machine-readable versus document is the distinction this catalog exists to
   surface, so it is carried by fill weight, not by an extra word. */
.chip--data { background: var(--c1); border-color: transparent; color: var(--ink); }
.chip--doc  { background: transparent; }
/* Only for "no machine-readable format at all" — an absence, not a format. */
.chip--none { background: transparent; border-color: var(--amber); color: var(--amber-ink); }

/* ---------- format breakdown bars ---------- */

.fbars { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.fbar {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 5.5rem;
  align-items: center;
  gap: .9rem;
}
.fbar__label {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fbar__track { height: 5px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.fbar__fill {
  display: block;
  width: var(--share);      /* same token name as .bar, so builders learn one */
  height: 100%;
  background: var(--c3);
  border-radius: 2px;
}
/* Values read as text, never as the series colour. */
.fbar__val {
  font-family: var(--mono);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}
.fbar__pct { color: var(--soft); }
/* Amber only when the bar counts something missing, e.g. datasets with no field. */
.fbar--absent .fbar__fill  { background: var(--amber); }
.fbar--absent .fbar__label { color: var(--amber-ink); }
.fbars__note { margin: .9rem 0 0; color: var(--soft); font-size: .8125rem; }

/* ---------- raw → normalized ---------- */

/* The product's whole claim in one block: many spellings on the left, one
   value on the right. It gets a surface panel and the widest gutter on the
   site because the arrow is the argument. */
.norm {
  margin: 2rem 0 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.norm__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1rem;
  margin-bottom: 1.25rem;
}
.norm__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.012em;
}
.norm__sub { margin: 0; color: var(--soft); }

.norm__cols,
.norm__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
}
.norm__cols { padding-bottom: .625rem; border-bottom: 1px solid var(--rule); }
.norm__label {
  margin: 0;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soft);
}
.norm__label--to { grid-column: 3; }

.norm__rows { margin: 0; }
.norm__row { padding-block: 1.1rem; border-bottom: 1px solid var(--rule); }
.norm__row:last-child { padding-bottom: 0; border-bottom: 0; }

.norm__from, .norm__to { min-width: 0; margin: 0; padding: 0; list-style: none; }

.norm__raw {
  display: block;
  padding: .3rem 0 .3rem .65rem;
  border-left: 2px solid var(--rule);
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--soft);
  overflow-wrap: anywhere;
}
.norm__raw + .norm__raw { margin-top: .3rem; }
/* A value that is not a vocabulary key at all — a human label pasted into an
   id field. Amber, because that is a defect, not another spelling. */
.norm__raw--bad { border-left-color: var(--amber); color: var(--ink); }

.norm__arrow { font-family: var(--mono); color: var(--accent); text-align: center; }
.norm__arrow::before { content: "\2192"; }

.norm__val {
  display: inline-block;
  padding: .35rem .55rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--c1) 60%, transparent);
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.norm__gloss { display: block; margin: .5rem 0 0; color: var(--soft); font-size: .875rem; }
.norm__foot {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--soft);
  font-size: .875rem;
}

/* ---------- callout ---------- */

.note {
  margin: 2rem 0 0;
  padding: 1.125rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: 0 3px 3px 0;
  font-size: .9375rem;
}
.note__k {
  margin: 0 0 .4rem;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soft);
}
:where(.note) :where(p) { margin: 0 0 .75rem; }
:where(.note) :where(p):last-child { margin-bottom: 0; }
/* For a callout about something missing, stopped or wrong. */
.note--flag { border-left-color: var(--amber); }
.note--flag .note__k { color: var(--amber-ink); }

/* ---------- prose ---------- */

.prose { max-width: 68ch; }
.prose--wide { max-width: 82ch; }
/* Japanese sets one glyph per em, so ch-based measure runs far too long. */
.prose--ja { max-width: 38em; }

:where(.prose) > :where(:first-child) { margin-top: 0; }
:where(.prose) :where(p) { margin: 0 0 1.15rem; }
:where(.prose) :where(h3) {
  margin: 2.5rem 0 .8rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.28;
  letter-spacing: -.015em;
}
:where(.prose) :where(ul, ol) { margin: 0 0 1.25rem; padding-left: 1.15rem; }
:where(.prose) :where(li) { margin-bottom: .4rem; }
:where(.prose) :where(li)::marker { color: var(--soft); }
:where(.prose) :where(dl) {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: .55rem 1.25rem;
  margin: 0 0 1.25rem;
}
:where(.prose) :where(dt) {
  padding-top: .18rem;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--soft);
}
:where(.prose) :where(dd) { margin: 0; }
:where(.prose) :where(code) {
  padding: .1em .35em;
  border-radius: 2px;
  background: color-mix(in srgb, var(--c1) 45%, transparent);
  font-family: var(--mono);
  font-size: .8125em;
  overflow-wrap: anywhere;
}
:where(.prose) :where(pre) {
  margin: 0 0 1.25rem;
  padding: .875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow-x: auto;
}
:where(.prose) :where(pre) :where(code) { padding: 0; background: none; font-size: .75rem; }
:where(.prose) :where(a) {
  text-decoration: none;
  border-bottom: 1px solid var(--c2);
}
:where(.prose) :where(a):hover { border-bottom-color: var(--accent); }
:where(.prose) :where(strong) { font-weight: 600; }

/* ---------- two-source comparison table ---------- */

.compare {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;       /* fixed, so three columns still fit at 375px */
  font-size: .9375rem;
}
.compare :where(th, td) {
  padding: .85rem 1rem .85rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
  overflow-wrap: anywhere;
}
.compare :where(thead th) {
  padding-top: 0;
  border-bottom: 2px solid var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
}
/* table-layout:fixed reads widths off the first row only. */
.compare :where(thead th:first-child) { width: 26%; }
.compare :where(tbody th) {
  width: 26%;
  font-family: var(--mono);
  font-weight: 400;
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soft);
}
.compare :where(th:last-child, td:last-child) { padding-right: 0; }
/* Where one source simply does not have the thing. */
.compare__na { color: var(--amber-ink); }

/* ---------- responsive: interior pages ---------- */

@media (max-width: 900px) {
  /* The five-page site needs its nav on a phone. The one-page original could
     hide it because every destination was also on screen. */
  .topbar__in {
    flex-wrap: wrap;
    height: auto;
    padding-block: .6rem;
    gap: .4rem 1.25rem;
  }
  .topbar__in .nav {
    display: flex;
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 1.5rem;
    padding-top: .55rem;
    border-top: 1px solid var(--rule);
  }
  .topbar__in .topbar__cta { margin-left: auto; }

  /* Filters are a preview, so they follow the real listing rather than
     pushing it below the fold. */
  .browse { grid-template-columns: minmax(0, 1fr); }
  .browse__main { order: 1; }
  .browse .facets { order: 2; }
}

@media (min-width: 721px) and (max-width: 900px) {
  /* Publisher drops under the title before the title gets squeezed. */
  .cat__head, .cat__row { grid-template-columns: 6.5rem minmax(0, 1fr) 8.5rem; }
  .cat__head span:nth-child(3) { display: none; }
  .cat__id     { grid-column: 1; grid-row: 1; }
  .cat__titles { grid-column: 2; grid-row: 1; }
  .cat__org    { grid-column: 2; grid-row: 2; }
  .cat__side   { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 720px) {
  /* Stacked card: one column, nothing to scroll sideways. */
  .cat__head { display: none; }
  .cat__row {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
    padding-block: 1.25rem;
  }
  .cat__title { font-size: 1.0625rem; }
  .cat__side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; }
}

@media (max-width: 640px) {
  /* Stacked, the column heads say nothing the arrow does not. */
  .norm__cols { display: none; }
  .norm__row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .norm__arrow { text-align: left; }
  .norm__arrow::before { content: "\2193"; }
  :where(.prose) :where(dl) { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  :where(.prose) :where(dd) { margin-bottom: .75rem; }
}

@media (max-width: 560px) {
  .fbar {
    grid-template-columns: minmax(0, 1fr) 5rem;
    grid-template-areas: "l l" "t v";
    gap: .35rem .75rem;
  }
  .fbar__label { grid-area: l; }
  .fbar__track { grid-area: t; }
  .fbar__val   { grid-area: v; }
  .compare { font-size: .8125rem; }
  .compare :where(th, td) { padding: .7rem .6rem .7rem 0; }
  .compare :where(thead th:first-child) { width: 30%; }
  .compare :where(tbody th) { width: 30%; }
}