/* terminalvalues.org, in the Night theme of the Terminal Values design
   system. The fonts are served from here, not from Google, so nothing on the
   site loads from anyone else; their SIL Open Font Licences are in fonts/. */

@font-face {
  font-family: "Barlow Condensed"; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed"; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-condensed-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed"; font-weight: 700; font-display: swap;
  src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed"; font-weight: 700; font-display: swap;
  src: url("fonts/barlow-condensed-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed"; font-weight: 800; font-display: swap;
  src: url("fonts/barlow-condensed-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed"; font-weight: 800; font-display: swap;
  src: url("fonts/barlow-condensed-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Iosevka is the design system's own file, cut down to Latin and the ─◁∈
   text mark, without hinting: 18 KB instead of 1 MB. */
@font-face {
  font-family: "Iosevka"; font-weight: 400; font-display: swap;
  src: url("fonts/iosevka-latin-400-normal.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --ground: #0B1024;
  --ground-raised: #141B3A;
  --ink: #E6EAF5;
  --ink-muted: #A3ABC7;
  --line: #2E3766;
  --line-strong: #636D99;
  --magenta-bright: #FF6BB5;
  --link: #A08CFF;
  --action: #A08CFF;
  --on-action: #0B1024;
  --focus: #3EE8FF;
  --mono: "Iosevka", ui-monospace, "SF Mono", Menlo, monospace;
  --latin: "Atkinson Hyperlegible";
  --latin-display: "Barlow Condensed";
  --arabic: "Noto Sans Arabic";
  --cjk: "Noto Sans SC";
  --first: "Noto Sans";   /* fonts.css puts a page's own script first */
}
/* The design system's faces for Latin, then a Noto family for every other
   script (fonts.css, built from the pages, loads only what's on screen).
   Declared again on every element with a lang attribute so that fonts.css's
   :lang() rules for --cjk, --arabic and --latin take effect there. */
:root, [lang] {
  --scripts: "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Gurmukhi",
    "Noto Sans Gujarati", "Noto Sans Oriya", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Kannada",
    "Noto Sans Malayalam", "Noto Sans Ol Chiki", var(--arabic), "Noto Sans Ethiopic", "Noto Serif Tibetan",
    "Noto Sans Myanmar", "Noto Sans Khmer", "Noto Sans Thai", var(--cjk);
  --body: var(--latin), var(--first), var(--scripts), system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--latin-display), "Arial Narrow", var(--first), var(--scripts), system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0; min-height: 100vh; background: var(--ground); color: var(--ink);
  font: 400 17px/27px var(--body);
}
main { max-width: 36rem; margin: 0 auto; padding: 48px 16px 48px; position: relative; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The horizontal lockup: mark 64px tall, wordmark cap height about half
   that, 21px apart (space-4 at a 48px mark, scaled). On phones, the stacked
   lockup: TERMINAL / VALUES in display-caps, 12px under the mark. */
.lockup {
  direction: ltr; /* the mark stays left of the name, even on right-to-left pages */
  display: flex; align-items: center; gap: 21px; margin: 0 0 24px;
  font: 700 45px/1 "Barlow Condensed", "Arial Narrow", sans-serif; color: var(--ink);
}
.lockup img { height: 64px; width: auto; display: block; flex: none; }
.lockup span { white-space: nowrap; }
@media (max-width: 480px) {
  main { padding-top: 32px; }
  .lockup {
    flex-direction: column; gap: 12px; text-align: center;
    font: 800 40px/40px "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.03em; text-transform: uppercase;
  }
  .lockup span { display: block; }
}
.lede { font-size: 19px; line-height: 30px; margin: 0 0 32px; }
/* "These are our terminal values.", in the design system's heading style. */
.credo { font: 600 30px/34px var(--display); margin: 0 0 24px; text-wrap: balance; }
/* "terminal" drawn in scanlines, like an interlaced CRT, by the logo's rule
   (src/terminalvalues/logo.py): lines of ink 0.049em thick every 0.093em,
   counted up from the baseline, so that in Barlow Condensed one stands on
   the baseline, one ends at the top of the lowercase and one at the top of
   the capitals; between them the ground shows through. A span's background
   starts at the font's ascender, 1em above the baseline, hence the first
   line at 0.021em. Browsers without background-clip: text show it plain. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .scan {
    background: repeating-linear-gradient(to bottom, var(--ink) 0.021em 0.07em, transparent 0.07em 0.114em);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}

.card {
  background: var(--ground-raised); border: 1px solid var(--line); border-radius: 8px;
  padding: 24px; margin: 0 0 24px;
}
@media (max-width: 600px) { .card { padding: 16px; } }
label.big { display: block; font-weight: 700; margin-bottom: 8px; }
input[type=text] {
  width: 100%; font: inherit; color: var(--ink); padding: 10px 12px;
  background: var(--ground); border: 1px solid var(--line-strong); border-radius: 8px;
}
input[type=text]::placeholder { color: var(--ink-muted); }
input[type=text]:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

.pledge { margin: 16px 0 8px; }
.pills { display: inline-flex; flex-wrap: wrap; gap: 8px; vertical-align: middle; margin: 4px 0; }
.pills label { position: relative; }
.pills input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pills span {
  display: inline-block; padding: 2px 14px; border-radius: 999px; font-weight: 700;
  border: 1px solid var(--line-strong); color: var(--ink); cursor: pointer;
}
.pills input:checked + span { background: var(--action); border-color: var(--action); color: var(--on-action); }
.pills input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

button {
  font: 700 17px/27px var(--body); border-radius: 999px; cursor: pointer;
  padding: 12px 24px; width: 100%; margin-top: 12px;
  border: 1px solid var(--line-strong); background: none; color: var(--ink);
}
button.primary { background: var(--action); border-color: var(--action); color: var(--on-action); }
button.quiet { border: 0; color: var(--link); text-decoration: underline; padding: 4px; }
/* Hidden from people, not from bots. Clipped in place rather than moved off
   the left edge, which would widen right-to-left pages. */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

details.yolo > summary { cursor: pointer; font-weight: 700; list-style: none; }
details.yolo > summary::-webkit-details-marker { display: none; }
details.yolo > summary .toggle {
  display: block; text-align: center; margin-top: 12px;
  padding: 12px 24px; border-radius: 999px; border: 1px solid var(--magenta-bright); color: var(--ink);
}
details.yolo[open] > summary .toggle { border-color: var(--line-strong); }
.toggle > span { display: none; }
details.yolo:not([open]) .show-qr, details.yolo[open] .hide-qr { display: inline; }

.wallets { list-style: none; padding: 0; margin: 16px 0 0; }
.wallet { border-top: 1px solid var(--line); padding: 16px 0; text-align: center; }
.wallet h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.qr svg { width: 220px; max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto; }
details.qr summary { display: none; }
/* Phones and tablets: a phone can't scan its own screen, so the address and
   its copy button come first and the QR code waits behind a button. */
@media (hover: none) and (pointer: coarse) {
  details.yolo:not([open]) .show-qr, details.yolo[open] .hide-qr { display: none; }
  details.yolo:not([open]) .show-addr, details.yolo[open] .hide-addr { display: inline; }
  .wallet { display: flex; flex-direction: column; align-items: center; }
  .wallet details.qr { order: 1; margin-top: 8px; }
  details.qr summary {
    display: inline-block; list-style: none; cursor: pointer; padding: 4px 16px;
    border-radius: 999px; border: 1px solid var(--line-strong); color: var(--link); font-weight: 700;
  }
  details.qr summary::-webkit-details-marker { display: none; }
  details.qr[open] summary { display: none; }
  details.qr svg { margin-top: 8px; }
}
.addr {
  display: block; margin: 8px 0 0; padding: 8px; word-break: break-all;
  font: 400 14px/22px var(--mono); background: var(--ground); border-radius: 4px; color: var(--ink);
}
.copy { width: auto; padding: 4px 16px; margin-top: 8px; color: var(--link); }
.note, .soon { color: var(--ink-muted); font-size: 15px; line-height: 23px; margin: 4px 0 0; }

.coin { border-top: 1px solid var(--line); padding-top: 16px; }
.coin p { margin: 0; }
.coin input[type=text] { display: inline-block; width: auto; max-width: 100%; margin: 4px 0; }

footer { color: var(--ink-muted); font-size: 15px; line-height: 23px; margin-top: 32px; }
footer p { margin: 0 0 8px; }

/* Thanks, form-down and the form service's error pages. */
.note-page { text-align: center; padding-top: 64px; }
.note-page img { height: 64px; width: auto; display: block; margin: 0 auto 24px; }
.note-page h1 { font: 700 48px/52px var(--display); margin: 0 0 16px; text-wrap: balance; }

/* The language menu, top right: the current language's code, then every
   language in its own name. */
.langs { position: absolute; top: 16px; right: 16px; z-index: 10; direction: ltr; }
.langs summary {
  list-style: none; cursor: pointer; font: 400 13px/20px var(--mono); letter-spacing: 0.08em;
  padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink);
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after {
  content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 8px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.langs ul {
  position: absolute; right: 0; top: calc(100% + 6px); margin: 0; padding: 8px; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(7.5rem, max-content)); gap: 0 4px;
  max-height: 70vh; overflow-y: auto; max-width: calc(100vw - 32px);
  background: var(--ground-raised); border: 1px solid var(--line); border-radius: 8px;
}
@media (max-width: 480px) { .langs ul { grid-template-columns: repeat(2, minmax(7rem, 1fr)); } }
.langs a { display: block; padding: 4px 8px; border-radius: 4px; color: var(--ink); text-decoration: none; }
.langs a:hover { background: var(--line); }
.langs a[aria-current] { color: var(--link); font-weight: 700; }

/* Nastaliq, for Urdu, needs taller lines. */
html:lang(ur) :is(p, label, button, summary, li, input) { line-height: 2.2; }

/* Watch pages: a talk's video (media-chrome), summary and transcript. */
main.watch-page { max-width: 56rem; }
.watch-page .mark img { height: 48px; width: auto; display: block; margin: 0 0 24px; }
.watch-page h1 { font: 700 48px/52px var(--display); margin: 0 0 8px; text-wrap: balance; }
.watch-page .byline { color: var(--ink-muted); margin: 0 0 24px; }
.watch-page media-controller {
  display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  background: #000;
  --media-primary-color: var(--ink);
  --media-secondary-color: transparent;
  --media-control-background: rgb(11 16 36 / 0.75);
  --media-control-hover-background: var(--ground-raised);
  --media-menu-background: var(--ground-raised);
  --media-range-bar-color: var(--action);
  --media-range-track-background: var(--line-strong);
  --media-font-family: inherit;
}
.watch-page hls-video { width: 100%; height: 100%; }
.watch-page .summary { margin-top: 24px; }
.watch-page .downloads { color: var(--ink-muted); }
.watch-page .transcript { max-width: 36rem; margin-top: 40px; }
.watch-page .transcript h2 { font: 700 32px/36px var(--display); margin: 0 0 16px; }
.watch-page .next { margin-top: 40px; font-weight: 700; }
@media (max-width: 480px) { .watch-page h1 { font-size: 36px; line-height: 40px; } }