/* TrueWorld Maps. Colors meet WCAG AAA (7:1) for text on every background used. */

@font-face {
  font-family: "Avenir Heavy";
  src: url("/static/font/Avenir-Heavy.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Avenir Light";
  src: url("/static/font/Avenir-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

:root {
  --ink: #1a1a1a;          /* 17.4:1 on white */
  --ink-muted: #4a4a4a;    /* 8.9:1 on white, 8.1:1 on --tint */
  --brand: #303f9f;        /* 9.0:1 on white, 8.2:1 on --tint */
  --brand-dark: #1a237e;
  --paper: #ffffff;
  --tint: #f3f5fb;
  --line: #c9cfe3;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Avenir Heavy", var(--font-body);
  --font-light: "Avenir Light", var(--font-body);

  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 12px;
}

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

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

/* Text for screen readers and search engines only, e.g. the rest of a short nav label. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

main {
  flex: 1 0 auto;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.75em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  margin-top: 2.25em;
}

h3 {
  font-size: 1.25rem;
}

p,
ul,
ol,
blockquote,
figure {
  margin: 0 0 1.25em;
}

ul,
ol {
  padding-left: 1.5em;
}

li + li {
  margin-top: 0.5em;
}

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--brand-dark);
  text-decoration-thickness: 2px;
}

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

strong {
  font-weight: 700;
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.18em;
}

/* The titles of cited works are marked for their language (lang="en" on translated
   pages), not styled. */
cite {
  font-style: normal;
}

.nowrap {
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* About 75 characters a line at the body size (WCAG 1.4.8). */
.wrap-text {
  width: 100%;
  max-width: calc(36rem + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.lede {
  font-family: var(--font-light);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.5;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border: 2px solid transparent;  /* keeps the button's shape in forced-colors mode */
  border-radius: 999px;
  background: var(--brand);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
}

.button:hover {
  background: var(--brand-dark);
  color: var(--paper);
}

/* Links that stand alone in a list get a full-size target (WCAG 2.5.5). */
.link-list li + li {
  margin-top: 0;
}

.link-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Skip link */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--brand);
  color: var(--paper);
  font-weight: 700;
  border-radius: 0 0 8px 8px;
}

.skip-link:focus {
  top: 0;
  color: var(--paper);
}

main:focus {
  outline: none;
}

/* Header */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  color: var(--brand);
  font-family: var(--font-display);
  font-size: 1.375rem;
  text-decoration: none;
}

.brand img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.brand:hover {
  color: var(--brand-dark);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li + li {
  margin-top: 0;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.625rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.site-nav abbr,
.site-footer abbr {
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.site-nav a[aria-current="page"] {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.4em;
}

/* Language menu: a disclosure of plain links, so it works without JavaScript.
   Phones show just the globe, so the header keeps to two rows at 320px. Without
   JavaScript the open list pushes the nav down; with it (lang-menu--popup, added
   by site.js, which also closes it when focus leaves) the list floats over the page. */

.lang-menu {
  position: relative;
  margin-inline-start: auto;
}

.lang-menu__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 44px;
  min-height: 44px;
  padding-block: 0;
  padding-inline: 0.625rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.lang-menu__button::-webkit-details-marker {
  display: none;
}

/* A chevron points down or up whatever the writing direction, so its borders are physical. */
.lang-menu__button::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
}

.lang-menu[open] .lang-menu__button::after {
  transform: translateY(25%) rotate(-135deg);
}

.lang-menu__button:hover {
  color: var(--brand);
}

/* Without JavaScript the open list is in the flow: keep the header's items at the
   top of the taller row, and the button's contents at the inline end. */
.site-header__inner:has(> .lang-menu:not(.lang-menu--popup)[open]) {
  align-items: flex-start;
}

.lang-menu:not(.lang-menu--popup) .lang-menu__button {
  justify-content: flex-end;
}

.lang-menu__button:hover .lang-menu__label {
  text-decoration: underline;
}

.lang-menu__globe {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.lang-menu__list {
  min-width: min(11rem, 100vw - 2 * var(--gutter));
  margin-block: 0.25rem 0;
  margin-inline: 0;
  padding-block: 0.25rem;
  padding-inline: 0;
  border: 1px solid var(--ink-muted);
  border-radius: 8px;
  background: var(--paper);
  list-style: none;
}

.lang-menu--popup .lang-menu__list {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  z-index: 20;
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.12);
}

.lang-menu__list li + li {
  margin-block-start: 0;
}

.lang-menu__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 1rem;
  color: var(--ink);
  text-decoration: none;
}

.lang-menu__list a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.lang-menu__list a:focus-visible {
  outline-offset: -3px;  /* inside the panel, which the links fill */
}

.lang-menu__list a[aria-current="true"] {
  color: var(--brand);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.4em;
}

@media (max-width: 26em) {
  .site-header__inner {
    column-gap: 0.5rem;
  }

  .lang-menu__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .lang-menu__button::after {
    display: none;
  }
}

@media (max-width: 40em) {
  .site-header__inner {
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
  }

  .site-nav ul {
    margin-left: -0.5rem;
  }

  .site-nav a {
    padding: 0 0.5rem;
  }
}

/* Suggestion bar (suggest.js): offers an English page in the reader's language.
   It sits in the flow under the header, never fixed, so it covers nothing. */

.lang-suggest {
  border-block-end: 1px solid var(--line);
  background: var(--tint);
}

.lang-suggest__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-block: 0.625rem;
}

.lang-suggest__message {
  flex: 1 1 18rem;
  margin: 0;
  font-size: 1rem;
}

.lang-suggest__link {
  font-size: 1rem;
}

/* Home: hero. Phones get the badges straight after the headline, then the demo. */

.hero {
  padding: clamp(1.5rem, 5vw, 4rem) 0;
}

.hero__grid {
  display: grid;
  grid-template-areas: "intro" "badges" "device" "body";
  gap: 1.75rem;
}

.hero__intro {
  grid-area: intro;
}

.hero__intro h1 {
  margin-bottom: 0.5em;
}

.hero__intro .lede {
  margin-bottom: 0;
}

.hero__badges {
  grid-area: badges;
}

.hero__badges .badges {
  margin-top: 0;
}

.device {
  grid-area: device;
}

.hero__body {
  grid-area: body;
}

.hero__body p:last-child {
  margin-bottom: 0;
}

@media (min-width: 48em) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "intro device" "badges device" "body device";
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }

  .hero__intro,
  .hero__body,
  .hero__badges {
    max-width: 36rem;
  }
}

.device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 0;
}

.device__screen {
  width: min(300px, 78vw, calc((100svh - 12rem) * 350 / 706));
  min-width: 200px;
}

.device__video {
  width: 100%;
  aspect-ratio: 350 / 706;
  background: var(--paper);
}

.lang-suggest__dismiss {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--brand);
  border-radius: 999px;
  background: var(--paper);
  color: var(--brand);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

/* The play/pause control is the phone itself: a transparent button over the video.
   Paused, the screen dims and a play disc stays in the middle; playing, nothing covers
   the animation, and a pause disc shows while the mouse or keyboard focus is on it
   (Escape puts it away: WCAG 1.4.13). Its name is the label in the page's language. */
.device__screen {
  position: relative;
}

.device__toggle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.device__toggle[hidden] {
  display: none;
}

/* The dimming stays inside the phone's black bezel, so its edge never shows. */
.device__toggle::before {
  content: "";
  position: absolute;
  inset: 1.5% 3.5%;
  border-radius: 12% / 6%;
  background: rgb(0 0 0 / 0.35);
  transition: opacity 0.2s;
}

.device__disc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 2px solid transparent;  /* keeps the disc's shape in forced-colors mode */
  border-radius: 50%;
  /* The usual video-player disc. White on it is 5.7:1 even over a white frame. */
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  transition: opacity 0.2s;
}

.device__icon {
  width: 36px;
  height: 36px;
  fill: currentColor;
}

.device__toggle:hover .device__disc {
  background: rgb(0 0 0 / 0.75);
}

.device__toggle .device__icon--pause,
.device__toggle[data-playing] .device__icon--play {
  display: none;
}

.device__toggle[data-playing] .device__icon--pause {
  display: inline;
}

.device__toggle[data-playing]::before,
.device__toggle[data-playing] .device__disc {
  opacity: 0;
}

.device__toggle[data-playing]:focus-visible .device__disc {
  opacity: 1;
}

@media (hover: hover) {
  .device__toggle[data-playing]:hover .device__disc {
    opacity: 1;
  }
}

.device__toggle[data-playing][data-dismissed] .device__disc {
  opacity: 0;
}

.lang-suggest__dismiss:hover {
  background: var(--line);  /* the bar itself is tinted; brand-dark on this is 8.5:1 */
  color: var(--brand-dark);
}

.device figcaption {
  max-width: 20rem;
  color: var(--ink-muted);
  font-size: 1rem;
  text-align: center;
  text-wrap: pretty;
}

/* Store badges */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.badges li + li {
  margin-top: 0;
}

.badge {
  display: block;
  border-radius: 10px;
}

.badge img {
  height: 48px;
  width: auto;
}

/* Cards */

.reads {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  background: var(--tint);
}

.reads h2 {
  margin-top: 0;
}

.reads__list,
.related__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reads__list li + li,
.related__list li + li {
  margin-top: 0;
}

.card {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.card:hover {
  border-color: var(--brand);
}

.card h3 {
  margin-bottom: 0.5em;
}

.card__link {
  color: var(--ink);
  text-decoration: none;
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.card:hover .card__link {
  color: var(--brand);
  text-decoration: underline;
}

.card__link:focus-visible {
  outline: none;
}

.card__link:focus-visible::after {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 1rem;
}

/* Articles */

.article {
  padding: clamp(2rem, 6vw, 3.5rem) 0 clamp(3rem, 8vw, 5rem);
}

.article__header {
  margin-bottom: 2rem;
}

.article__header h1 {
  margin-bottom: 0.5em;
}

.byline {
  margin: 0;
  color: var(--ink-muted);
  font-size: 1rem;
}

@media (min-width: 40.001em) {
  .byline time {
    white-space: nowrap;
  }
}

.article__body > :first-child {
  margin-top: 0;
}

.quote {
  margin: 2rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 4px solid var(--line);
}

.quote blockquote {
  margin: 0 0 0.5rem;
}

.quote p {
  margin: 0;
  font-family: var(--font-light);
  font-size: 1.375rem;
  line-height: 1.45;
}

.quote figcaption {
  color: var(--ink-muted);
  font-size: 1rem;
}

.note,
.figure figcaption,
.table figcaption,
.sources ol {
  max-width: 32em;
}

.note {
  color: var(--ink-muted);
  font-size: 1rem;
}

.app-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.app-prompt p {
  flex: 1 1 18rem;
  margin: 0;
  font-size: 1rem;
  text-wrap: pretty;
}

/* Figures: wider than the text column when there is room. */

.figure {
  margin: 2rem 0;
}

.figure--wide {
  width: min(56rem, 100vw - 2 * var(--gutter));
  margin-left: 50%;
  transform: translateX(-50%);
}

.figure img {
  width: 100%;
  border-radius: 4px;
}

.figure figcaption {
  margin: 0.75rem auto 0;
  color: var(--ink-muted);
  font-size: 1rem;
}

/* Tables. The caption sits outside the scrolling box so it always reflows;
   shadows at the edges show when there is more to scroll to. */

.table {
  margin: 1.5rem 0;
}

.table figcaption {
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.table-scroll {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(255, 255, 255, 0)) left center / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--paper) 30%, rgba(255, 255, 255, 0)) right center / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) left center / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) right center / 0.75rem 100% no-repeat scroll;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.45;
}

th,
td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th:first-child,
td:first-child {
  padding-left: 0;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

thead th {
  border-bottom: 2px solid var(--ink);
  vertical-align: bottom;
}

tbody th {
  font-weight: 600;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 40.001em) {
  thead th,
  .num {
    white-space: nowrap;
  }
}

@media (max-width: 40em) {
  table {
    font-size: 0.9375rem;
  }

  th,
  td {
    padding: 0.5rem 0.375rem;
  }
}

@media (max-width: 22.5em) {
  table {
    font-size: 0.875rem;
  }

  th,
  td {
    padding: 0.5rem 0.25rem;
  }
}

/* Call to action, sources, related reading */

.cta {
  margin: 3rem 0;
  padding: 1.75rem 1.5rem;
  border-radius: var(--radius);
  background: var(--tint);
}

.cta h2,
.sources h2,
.related h2 {
  font-size: 1.5rem;
}

.cta h2 {
  margin-top: 0;
}

.cta .badges {
  margin-top: 1.25rem;
}

.sources ol {
  font-size: 1rem;
}

.related {
  padding-bottom: 1rem;
}

@media (max-width: 40em) {
  .cta {
    padding: 1.5rem 1rem;
  }

  .cta .badge img,
  .hero__badges .badge img {
    height: 44px;
  }
}

/* Footer */

.site-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  background: var(--tint);
  color: var(--ink-muted);
  font-size: 1rem;
}

.site-footer p {
  margin: 0.5rem 0 0;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin: 0 0 0.5rem -0.5rem;
  padding: 0;
  list-style: none;
}

.site-footer__links li + li {
  margin-top: 0;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.5rem;
}

.site-footer a {
  color: var(--brand);
}

.site-footer a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}