/*
 * wasl.center public page — standalone, no JavaScript, no external requests.
 *
 * Every visual value below is a copy of the token of the SAME NAME in
 * src/styles/tokens.css (the C2 layer). site/check-tokens.mjs fails if any copy
 * drifts from its authority or names a token that does not exist. Nothing
 * here is a new token.
 */
:root {
  --wasl-c2-ground: #eaf0f5;
  --wasl-c2-surface: #ffffff;
  --wasl-c2-ink: #1b1b3a;
  --wasl-c2-ink-muted: #5b6472;
  --wasl-c2-ink-soft: #43495a;
  --wasl-c2-action: #4f46b8;
  --wasl-c2-action-hover: #443ba6;
  --wasl-c2-action-soft: #eef0fb;
  --wasl-c2-hairline: rgba(27, 27, 58, 0.1);
  --wasl-c2-focus-width: 2px;
  --wasl-c2-focus-offset-quiet: 2px;
  --wasl-c2-shadow-card: 0 1px 2px rgba(27, 27, 58, 0.04);
  --wasl-c2-line-height: 1.8;
  --wasl-c2-text-title: 20px;
  --wasl-c2-text-primary: 15px;
  --wasl-c2-text-body: 14px;
  --wasl-c2-text-meta: 12.5px;
  --wasl-c2-radius-card: 16px;
  --wasl-c2-radius-note: 11px;
  --wasl-c2-column: 600px;
  --wasl-c2-screen-gutter: 22px;
  --wasl-c2-gutter: 20px;
  --wasl-c2-gutter-wide: 24px;
}

@font-face {
  font-family: "Alexandria";
  src: url("assets/fonts/alexandria-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

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

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

body {
  margin: 0;
  background: var(--wasl-c2-ground);
  color: var(--wasl-c2-ink);
  font-family: "Alexandria", system-ui, sans-serif;
  font-size: var(--wasl-c2-text-primary);
  line-height: var(--wasl-c2-line-height);
}

.page {
  max-width: calc(var(--wasl-c2-column) + 2 * var(--wasl-c2-gutter));
  margin-inline: auto;
  padding-block: var(--wasl-c2-screen-gutter);
  padding-inline: var(--wasl-c2-gutter);
}

@media (min-width: 600px) {
  .page {
    max-width: calc(var(--wasl-c2-column) + 2 * var(--wasl-c2-gutter-wide));
    padding-inline: var(--wasl-c2-gutter-wide);
  }
}

/* ---- Brand row ------------------------------------------------------ */
.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wasl-c2-gutter);
  margin-block-end: var(--wasl-c2-screen-gutter);
}

.brand h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  line-height: 1;
}

.brand .mark {
  height: 56px;
  width: auto;
}

.brand .wordmark {
  height: 44px;
  width: auto;
}

/* ---- Language links ------------------------------------------------- */
.lang-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  border-radius: var(--wasl-c2-radius-note);
  color: var(--wasl-c2-action);
  font-size: var(--wasl-c2-text-body);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lang-link:hover {
  color: var(--wasl-c2-action-hover);
}

a:focus-visible {
  outline: var(--wasl-c2-focus-width) solid var(--wasl-c2-action);
  outline-offset: var(--wasl-c2-focus-offset-quiet);
}

/* ---- Language sections --------------------------------------------- */
.card {
  background: var(--wasl-c2-surface);
  border: 1px solid var(--wasl-c2-hairline);
  border-radius: var(--wasl-c2-radius-card);
  box-shadow: var(--wasl-c2-shadow-card);
  padding: var(--wasl-c2-screen-gutter);
  margin-block-end: var(--wasl-c2-gutter);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 8px;
}

h2 {
  margin: 0;
  font-size: var(--wasl-c2-text-title);
  font-weight: 700;
  line-height: 1.4;
}

h3 {
  margin-block: var(--wasl-c2-gutter) 4px;
  font-size: var(--wasl-c2-text-primary);
  font-weight: 600;
}

p,
ul {
  margin-block: 0 12px;
  color: var(--wasl-c2-ink-soft);
}

ul {
  padding-inline-start: 1.25em;
}

li + li {
  margin-block-start: 6px;
}

strong {
  color: var(--wasl-c2-ink);
  font-weight: 600;
}

.status {
  background: var(--wasl-c2-action-soft);
  border-radius: var(--wasl-c2-radius-note);
  padding-block: 10px;
  padding-inline: 14px;
  color: var(--wasl-c2-ink);
}

.affiliation {
  margin-block: var(--wasl-c2-gutter) 0;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--wasl-c2-hairline);
  color: var(--wasl-c2-ink-muted);
  font-size: var(--wasl-c2-text-body);
}

bdi {
  unicode-bidi: isolate;
}

/* An address never breaks at its hyphen. */
.address {
  white-space: nowrap;
}