/* Site styling on top of Tachyons: colour tokens, tiles, prose and dark mode. */

:root {
  --blue: #5bcefa;
  --pink: #f5a9b8;
  --lilac: #b79be8;
  --mint: #7ecfa9;

  --bg: #fffdfe;
  --card: #ffffff;
  --fg: #16141a;
  --muted: #5d5766;
  --line: rgba(22, 20, 26, 0.12);
  --shadow: 0 1px 2px rgba(22, 20, 26, 0.06), 0 8px 24px rgba(22, 20, 26, 0.06);
  --shadow-lift: 0 2px 4px rgba(22, 20, 26, 0.08), 0 16px 36px rgba(22, 20, 26, 0.12);
  --accent: var(--pink);
  --accent-text: #a03a56;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131218;
    --card: #1c1a23;
    --fg: #f2eff5;
    --muted: #a49dae;
    --line: rgba(242, 239, 245, 0.16);
    --shadow: none;
    --shadow-lift: 0 16px 36px rgba(0, 0, 0, 0.45);
    --accent-text: var(--pink);
  }
}

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

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Direct children are flex items: without this, .center's auto margins
   shrink-wrap them instead of letting mw8 do the centring. */
body > * { width: 100%; }
main { flex: 1 0 auto; }

/* Tachyons colour classes retuned so they follow the theme. */
.bg-page { background: var(--bg); }
.near-black { color: var(--fg); }
.b--black-10 { border-color: var(--line); }
.muted { color: var(--muted); }

a { color: inherit; }
.nav-link { color: var(--muted); border-bottom: 2px solid transparent; padding-bottom: 2px; }
.nav-link:hover, .nav-link:focus { color: var(--fg); border-bottom-color: var(--accent); }
.nav-link-current { color: var(--fg); border-bottom-color: var(--accent); }
.hover-accent:hover, .hover-accent:focus { color: var(--accent-text); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  color: var(--fg);
  padding: 0.75rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.flag-bar {
  height: 6px;
  background: linear-gradient(
    to bottom,
    var(--blue) 0 20%,
    var(--pink) 20% 40%,
    #ffffff 40% 60%,
    var(--pink) 60% 80%,
    var(--blue) 80% 100%
  );
}

/* Accents, chosen per page in its content metadata. */
.accent-blue  { --accent: var(--blue);  --accent-text: #0f6f96; }
.accent-pink  { --accent: var(--pink);  --accent-text: #a03a56; }
.accent-lilac { --accent: var(--lilac); --accent-text: #6242a0; }
.accent-mint  { --accent: var(--mint);  --accent-text: #1f6b4d; }
@media (prefers-color-scheme: dark) {
  .accent-blue  { --accent-text: var(--blue); }
  .accent-pink  { --accent-text: var(--pink); }
  .accent-lilac { --accent-text: var(--lilac); }
  .accent-mint  { --accent-text: var(--mint); }
}
.accent-text-blue  { color: #0f6f96; }
.accent-text-pink  { color: #a03a56; }
.accent-text-lilac { color: #6242a0; }
.accent-text-mint  { color: #1f6b4d; }
@media (prefers-color-scheme: dark) {
  .accent-text-blue  { color: var(--blue); }
  .accent-text-pink  { color: var(--pink); }
  .accent-text-lilac { color: var(--lilac); }
  .accent-text-mint  { color: var(--mint); }
}

/* Home page tiles. */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media screen and (min-width: 48em) {
  .tile-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

.tile {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 6px solid var(--accent);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media screen and (min-width: 48em) {
  .tile { padding: 2rem; }
}
.tile:hover, .tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.tile-icon { font-size: 2rem; line-height: 1; margin-bottom: 0.75rem; }
.tile-title { font-size: 1.375rem; font-weight: 700; line-height: 1.2; margin: 0 0 0.5rem; }
.tile-blurb { color: var(--muted); margin: 0 0 1.25rem; line-height: 1.5; }
.tile-more { margin-top: auto; font-weight: 600; color: var(--accent-text); }
.tile:hover .tile-more { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile:hover, .tile:focus-visible { transform: none; }
}

/* Prose inside page bodies. */
.prose { max-width: 34rem; }
.prose h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 2.5rem 0 0.75rem; }
.prose h3 { font-size: 1.175rem; font-weight: 700; margin: 2rem 0 0.5rem; }
.prose p, .prose li { line-height: 1.6; }
.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.prose blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 4px solid var(--accent);
  color: var(--muted);
}
.prose img, .prose svg { max-width: 100%; height: auto; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.prose th, .prose td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

/* Wide content (tables, sticker sheets) scrolls rather than the page. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Portrait entries: the photo floats so the text wraps around it. Below 30em
   there isn't room for that, so it sits above the text instead. */
.portrait-photo {
  display: block;
  width: 140px;
  height: auto;
  margin: 0 0 1rem;
  border-radius: 8px;
  border: 1px solid var(--line);
}
@media screen and (min-width: 30em) {
  .portrait-photo { float: left; width: 170px; margin: 0.25rem 1.375rem 0.75rem 0; }
}
.portrait::after { content: ""; display: block; clear: both; }
.portrait-body > :first-child { margin-top: 0; }
.credit { font-size: 0.8125rem; color: var(--muted); margin: 0.75rem 0 0; }
.credit a { color: var(--muted); }

/* Shown only in builds made with --drafts. */
.draft-banner {
  margin: 0;
  padding: 0.625rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #16141a;
  background: #f2c14e;
}

/* A beta page is live, but still being reviewed. Sticky, because the point is
   that a reader who has scrolled into the middle of it still knows. Mint rather
   than the draft amber: a different state, not a louder warning. */
.beta-banner {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0;
  padding: 0.625rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #16141a;
  background: var(--mint);
}

/* ---------------------------------------------------------------- charts
   Data colours are a validated categorical/diverging set, deliberately not
   the trans-flag palette used for site chrome: those hues were picked to
   decorate and fail contrast and colour-blind separation as data colours.
   The one exception is the by-identity line chart, whose five series take
   flag-derived colours (--c-id-*) deepened until they hold up on white. That
   chart names every line at its end in its own colour, so the hue is a second
   cue rather than the only one. */
:root {
  --c-cis: #7c7c76;
  --c-cis-ink: #5b5b55;
  --c-trans: #2a78d6;
  --c-trans-soft: #9dc0ea;
  --c-trans-ink: #1c5fae;
  --c-id-tw: #e0679b; --c-id-tw-ink: #c2437c;
  --c-id-tm: #2f9ccf; --c-id-tm-ink: #1b7fa8;
  --c-id-nb: #9c59d1; --c-id-nb-ink: #8544bd;
  --c-id-oi: #b8890c; --c-id-oi-ink: #8d6c0a;
  --c-id-ns: #46a86a; --c-id-ns-ink: #347f50;
  --c-na: #1baf7a;
  --c-na-ink: #15805a;
  --c-h0: #2a78d6; --c-h1: #7fa9de; --c-h2: #cfcac2; --c-h3: #ef9d78; --c-h4: #eb6834;
  --c-grid: rgba(22, 20, 26, 0.14);
  --c-ink: #16141a;
  --c-ink-2: #5d5766;
  --c-surface: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-cis: #8f8f88;
    --c-cis-ink: #b3b3aa;
    --c-trans: #3987e5;
    --c-trans-soft: #33557f;
    --c-trans-ink: #7fb3f0;
    --c-id-tw: #f5a9b8; --c-id-tw-ink: #f5a9b8;
    --c-id-tm: #5bcefa; --c-id-tm-ink: #5bcefa;
    --c-id-nb: #b57ae0; --c-id-nb-ink: #b57ae0;
    --c-id-oi: #f0e05a; --c-id-oi-ink: #f0e05a;
    --c-id-ns: #7bd88f; --c-id-ns-ink: #7bd88f;
    --c-na: #199e70;
    --c-na-ink: #4fc79b;
    --c-h0: #3987e5; --c-h1: #2f5f96; --c-h2: #4a4854; --c-h3: #a04722; --c-h4: #d95926;
    --c-grid: rgba(242, 239, 245, 0.16);
    --c-ink: #f2eff5;
    --c-ink-2: #a49dae;
    --c-surface: #1c1a23;
  }
}

/* Prose stays at a readable 34rem, but charts need room: let figures break out
   of the measure without letting the page scroll sideways. */
.prose .c-fig,
.prose .c-stats { width: min(56rem, calc(100vw - 3rem)); max-width: none; }

.chart { width: 100%; min-width: 30rem; height: auto; display: block; }
.c-panel { overflow-x: auto; margin-bottom: 1rem; }
.c-fig { margin: 2rem 0 2.5rem; }
.c-foot { font-size: 0.8rem; color: var(--muted); margin: 0.25rem 0 0; font-style: italic; }

@media screen and (min-width: 60em) {
  .c-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .c-pair .chart { min-width: 0; }
}

/* Small multiples: three across on a desktop column, wrapping to two and then
   one as the page narrows. These panels are drawn narrow, so they never need
   the scroll box the wider charts rely on. */
.c-triple { display: grid; grid-template-columns: 1fr; gap: 1rem 1.25rem; }
.c-triple .chart { min-width: 0; }
.c-triple .c-panel { overflow-x: visible; margin-bottom: 0; }
@media screen and (min-width: 34em) {
  .c-triple { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width: 60em) {
  .c-triple { grid-template-columns: repeat(3, 1fr); }
}

.c-grid { stroke: var(--c-grid); stroke-width: 1; }
.c-tick { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
          fill: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.c-cap { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
         fill: var(--c-ink-2); letter-spacing: 0.03em; }
.c-mid { text-anchor: middle; } .c-end { text-anchor: end; } .c-start { text-anchor: start; }
.c-strong { fill: var(--c-ink); font-weight: 600; }
.c-note { font-style: italic; }
.c-on-fill { fill: #fff; }
.c-figure { font-size: 19px; fill: var(--c-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.c-cis { fill: var(--c-cis); } .c-trans { fill: var(--c-trans); } .c-na { fill: var(--c-na); }
.c-trans-muted { fill: var(--c-trans-soft); }
.c-dot-cis { fill: var(--c-cis); stroke: var(--c-surface); stroke-width: 1.5; }
.c-dot-trans { fill: var(--c-trans); stroke: var(--c-surface); stroke-width: 1.5; }
.c-dot-na { fill: var(--c-na); stroke: var(--c-surface); stroke-width: 1.5; }
.c-line-cis { fill: none; stroke: var(--c-cis); stroke-width: 2; stroke-linejoin: round; }
.c-line-trans { fill: none; stroke: var(--c-trans); stroke-width: 2; stroke-linejoin: round; }
/* dashed, because this is missing data rather than a comparable population */
.c-line-na { fill: none; stroke: var(--c-na); stroke-width: 2; stroke-linejoin: round;
             stroke-dasharray: 5 4; }
.c-lbl-cis { fill: var(--c-cis-ink); font-weight: 600; }
.c-lbl-trans { fill: var(--c-trans-ink); font-weight: 600; }
.c-lbl-na { fill: var(--c-na-ink); font-weight: 600; }
/* Per-identity colours, for the by-identity chart only: colour alone, so the
   base .c-line-trans / .c-dot-trans rules above still set the stroke, the width
   and the dot outline. Text uses the -ink variant, adjusted far enough to read.
   Every line here is also named at its end in its own colour, so nobody has to
   tell pink from green to read the chart. */
.c-line-tw { stroke: var(--c-id-tw); } .c-dot-tw { fill: var(--c-id-tw); }
.c-line-tm { stroke: var(--c-id-tm); } .c-dot-tm { fill: var(--c-id-tm); }
.c-line-nb { stroke: var(--c-id-nb); } .c-dot-nb { fill: var(--c-id-nb); }
.c-line-oi { stroke: var(--c-id-oi); } .c-dot-oi { fill: var(--c-id-oi); }
.c-line-ns { stroke: var(--c-id-ns); } .c-dot-ns { fill: var(--c-id-ns); }
.c-lbl-tw { fill: var(--c-id-tw-ink); } .c-lbl-tm { fill: var(--c-id-tm-ink); }
.c-lbl-nb { fill: var(--c-id-nb-ink); } .c-lbl-oi { fill: var(--c-id-oi-ink); }
.c-lbl-ns { fill: var(--c-id-ns-ink); }
.c-tw { fill: var(--c-id-tw); } .c-tm { fill: var(--c-id-tm); }
.c-nb { fill: var(--c-id-nb); } .c-oi { fill: var(--c-id-oi); }
.c-ns { fill: var(--c-id-ns); }
.c-h0 { fill: var(--c-h0); } .c-h1 { fill: var(--c-h1); } .c-h2 { fill: var(--c-h2); }
.c-h3 { fill: var(--c-h3); } .c-h4 { fill: var(--c-h4); }

.c-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; list-style: none;
            margin: 0.5rem 0 0; padding: 0; font-size: 0.8rem; color: var(--muted); }
.c-legend li { display: flex; align-items: center; gap: 0.4rem; }
.c-legend i { width: 11px; height: 11px; border-radius: 3px; display: block; }
.c-key-cis { background: var(--c-cis); } .c-key-trans { background: var(--c-trans); }
.c-key-na { background: var(--c-na); }
.c-key-tw { background: var(--c-id-tw); } .c-key-tm { background: var(--c-id-tm); }
.c-key-nb { background: var(--c-id-nb); } .c-key-oi { background: var(--c-id-oi); }
.c-key-ns { background: var(--c-id-ns); }
.c-key-h0 { background: var(--c-h0); } .c-key-h1 { background: var(--c-h1); }
.c-key-h2 { background: var(--c-h2); } .c-key-h3 { background: var(--c-h3); }
.c-key-h4 { background: var(--c-h4); }

.c-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
           gap: 1rem; margin: 2rem 0; }
.c-stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
          padding: 1.1rem 1.25rem; }
.c-stat-n { font-size: 2.25rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.c-stat-l { font-size: 0.82rem; color: var(--muted); margin-top: 0.5rem; line-height: 1.4; }

/* ------------------------------------------------------- portrait entries
   Two columns on a desktop, one below that. Like the charts, the grid breaks
   out of the 34rem prose measure — the cards are their own thing, and prose
   width would leave no room beside a photo. */
.prose .people { width: min(66rem, calc(100vw - 3rem)); max-width: none; }
@media screen and (min-width: 60em) {
  .people {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;   /* cards keep their own height rather than stretching */
  }
  .people > .card { margin-bottom: 0; }
  .people .portrait-photo { width: 155px; margin-right: 1.2rem; }
}

/* The picture is a link, because that is what people click. Keep it looking
   like a picture rather than a link until it is hovered or focused. */
.portrait-link { text-decoration: none; }
.portrait-link:hover .portrait-photo,
.portrait-link:focus-visible .portrait-photo { border-color: var(--accent); }

/* A photograph and a "no photograph" slot are the same object as far as the
   layout is concerned, so they share the box: same width, same margins, same
   float behaviour. Selectors are .prose-qualified because the slot is a <p>,
   and .prose p would otherwise win on specificity and strip the margins.
   Note this rule deliberately does not set `display` — the two kinds differ
   there, and setting it here would override whatever they choose below. */
.prose .portrait-link,
.prose .photo-slot {
  box-sizing: border-box;
  width: 140px;
  margin: 0 0 1.25rem;
}
@media screen and (min-width: 30em) {
  .prose .portrait-link,
  .prose .photo-slot { float: left; margin: 0 1.25rem 1.25rem 0; }
}
@media screen and (min-width: 60em) {
  .people .portrait-link,
  .people .photo-slot { width: 155px; }
}

.prose .portrait-link { display: block; }
.prose .portrait-link .portrait-photo { float: none; width: 100%; margin: 0; }

/* Initials stand in for a photograph where none exists. */
.prose .photo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.55;
  user-select: none;
}

/* .mt0 on the card headings loses to .prose h3 on specificity, which was
   pushing every name 2rem below the top of its own photograph. */
.prose .card h3 { margin-top: 0; }