/* MMFoundation. Every page shares this sheet. DESIGN.md is the source of truth for
   colour, type and motion; the values come from the approved comp
   (.impeccable/mocks/comp-2.png): a standard open-source organization page in the
   manner of godot.foundation. A blue-black band printed with dashed outlines of the
   m, then label-left rows. Components follow shadcn/ui's recipes and the icons are
   Lucide, written straight into this sheet and the pages: no framework. */

/* ── Fonts ─────────────────────────────────────────────────────────────────────
   Self-hosted, SIL OFL 1.1 (licences beside the files). JetBrains Mono and Figtree
   are variable, one file per subset. Glow Sans SC covers Chinese, cut down to the
   characters the pages use (tools/subset-cjk-font.py); its range is the CJK blocks, so
   a character outside the subset falls to the system face rather than a blank. Bump
   ?v= when the subset changes: /assets/fonts/* is cached immutable. */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
  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: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
  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: "Figtree";
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  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: "Figtree";
  src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  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: "Glow Sans SC";
  src: url("/assets/fonts/glow-sans-sc-regular.woff2?v=2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+2E80-2FFF, U+3000-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;
}
@font-face {
  font-family: "Glow Sans SC";
  src: url("/assets/fonts/glow-sans-sc-medium.woff2?v=2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+2E80-2FFF, U+3000-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;
}

/* ── Tokens ─────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* The band, sampled from the comp. The neutrals are Radix Colors' slate scale, dark:
     the page (1), two raised steps (2, 3), separators (6), control borders (7) and
     their hover (8), and the two text steps (11, 12). */
  --band: #101726;
  --ground: #111113;
  --raised: #18191b;
  --raised-2: #212225;
  --line: #363a3f;
  --line-2: #43484e;
  --line-3: #5a6169;
  /* The m outlines printed on the band. */
  --band-ink: rgb(255 255 255 / 0.115);
  --band-ink-lit: rgb(255 255 255 / 0.4);

  --text: #edeef0;
  --text-2: #b0b4ba;
  /* Captions: between slate 10 and 11, so small text keeps 4.5:1 on the page. */
  --text-3: #8b8f98;
  --link: #66b2f2;
  --link-hover: #93c9f7;
  /* The Sponsor key, the only filled colour on the page. */
  --mint: #3dd388;
  --mint-hover: #62e1a1;
  --on-mint: #06130c;
  --live: #35cc80;
  --pending: #f5ac2a;
  --focus: #9ec9ff;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "Glow Sans SC", monospace;
  --sans: "Figtree", "Glow Sans SC", ui-sans-serif, system-ui, -apple-system, "PingFang SC", sans-serif;

  --gutter: clamp(20px, 4.3vw, 66px);
  --max: 1404px;
  /* Label column, then the content column after its rule (the comp: 383 and 948 px of
     a 1404 px page, with 71 px from the rule to the text). */
  --label: 27.3%;
  --indent: calc(71 * var(--u));
  /* One comp pixel (the comp is 1536 px wide): the desktop layout scales with the
     viewport between about 1300 and 1700 px, and holds its size outside that range. */
  --u: clamp(0.85px, calc(100vw / 1536), 1.1px);
  --row-pad: calc(24 * var(--u));
  --radius: 6px;
  --radius-lg: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html:lang(zh-Hans) {
  --mono: "JetBrains Mono", "Glow Sans SC", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── Base ───────────────────────────────────────────────────────────────────── */

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

html {
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--line-2) var(--ground);
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  min-height: 100vh;
  font-size: 18px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

::selection {
  background: rgb(102 178 242 / 0.32);
  color: #fff;
}

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

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--ground);
  font-weight: 600;
}
.skip-link:focus {
  top: 12px;
}

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

.nowrap {
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Lucide icons, drawn at 24 and scaled; currentColor stroke. */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── The band ─────────────────────────────────────────────────────────────────
   Every page opens on it: the header, then the page's own heading, on blue-black
   printed with a sparse field of dashed m outlines (one inline SVG, the m's own path). */

.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--band);
}

.m-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.m-field use {
  fill: none;
  stroke: var(--band-ink);
  stroke-width: 1.25;
  stroke-dasharray: 3.5 3.5;
  transition: stroke 600ms var(--ease);
}
.m-field use.is-lit {
  stroke: var(--band-ink-lit);
  transition-duration: 180ms;
}

.band-body {
  padding-bottom: 31px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  gap: calc(34 * var(--u));
  height: calc(90 * var(--u));
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: calc(21 * var(--u));
  margin-right: auto;
  font-family: var(--mono);
  font-size: calc(26 * var(--u));
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.brand svg {
  width: calc(52 * var(--u));
  height: auto;
  fill: currentColor;
}

.nav {
  display: flex;
  align-items: center;
  gap: calc(32 * var(--u));
  font-family: var(--mono);
  font-size: max(14px, calc(15 * var(--u)));
  font-weight: 500;
}
.nav a,
.header-tools a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  transition: color 160ms ease;
}
.nav a:hover,
.header-tools a:not(.btn):hover {
  color: var(--link-hover);
}
.nav a[aria-current="page"] {
  color: var(--link-hover);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: calc(34 * var(--u));
  font-family: var(--mono);
  font-size: max(14px, calc(15 * var(--u)));
  font-weight: 500;
}

.menu-button {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
}
.menu-button .icon {
  font-size: 22px;
}

/* ── The home band's heading ─────────────────────────────────────────────── */

.band-home .band-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head head"
    ". figures";
  row-gap: calc(12 * var(--u));
  padding-top: calc(96 * var(--u));
  padding-bottom: calc(30 * var(--u));
}
.band-home .headline {
  grid-area: head;
}
.band-home .figures {
  grid-area: figures;
}

.headline {
  font-family: var(--mono);
  font-size: max(34px, calc(61 * var(--u)));
  font-weight: 640;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--text);
  text-wrap: balance;
}
.headline > span {
  display: block;
}

.figures {
  font-family: var(--mono);
  font-size: max(14px, calc(19 * var(--u)));
  font-weight: 450;
  color: var(--text);
  white-space: nowrap;
}
.figures .sep {
  margin-inline: 0.55em;
  color: var(--text-3);
}

/* Inner pages: a shorter band with the page's title and one line under it. */
.band-page .band-body {
  padding-top: clamp(32px, 4.2vw, 64px);
  padding-bottom: clamp(36px, 4.2vw, 64px);
}
.page-title {
  max-width: 22ch;
  font-family: var(--mono);
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 620;
  line-height: 1.15;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.page-lede {
  max-width: 60ch;
  margin-top: 18px;
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--text-2);
}
.band-page .actions {
  margin-top: 28px;
}

/* ── Rows ─────────────────────────────────────────────────────────────────────
   The page body: a section name in the label column, its content after a hairline.
   Rows divide with a full-width rule. */

.rows {
  padding-top: calc(25 * var(--u));
  padding-bottom: clamp(72px, 7vw, 112px);
}

.row {
  display: grid;
  grid-template-columns: var(--label) minmax(0, 1fr);
  padding-block: var(--row-pad) calc(22 * var(--u));
  border-bottom: 1px solid var(--line);
}
.row:last-child {
  border-bottom: 0;
}

.row-label {
  padding-right: 24px;
  font-family: var(--mono);
  font-size: max(24px, calc(34 * var(--u)));
  font-weight: 520;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.row-label small {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--text-3);
}

.row-body {
  min-width: 0;
  padding-left: var(--indent);
  border-left: 1px solid var(--line);
}

.lede {
  max-width: 35em;
  font-size: max(17px, calc(21 * var(--u)));
  font-weight: 400;
  line-height: 1.43;
  color: var(--text);
}
.lede + .lede {
  margin-top: 14px;
}
.lede-2 {
  color: var(--text-2);
}
.prose {
  max-width: 62ch;
  color: var(--text-2);
}
.prose p + p {
  margin-top: 12px;
}
.prose a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover {
  color: var(--link-hover);
}

/* Inside a row: blocks stand 22px apart; a source line sits close under what it
   sources. Projects keep their own rhythm. */
.row-body > * + *:not(.project) {
  margin-top: 22px;
}
.row-body > * + .source {
  margin-top: 14px;
}
.row-body > * + .actions {
  margin-top: 26px;
}
.supporters {
  padding-top: 6px;
}

/* ── Buttons (shadcn/ui's recipe: default, outline, ghost; small and default) ── */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: max(44px, calc(46 * var(--u)));
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: max(14px, calc(15 * var(--u)));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms var(--ease);
}
.btn .icon {
  font-size: 16px;
}
.btn:active:not([disabled]) {
  transform: translateY(1px);
}
.btn-primary {
  background: var(--mint);
  color: var(--on-mint);
}
.btn-primary:hover {
  background: var(--mint-hover);
}
.btn-outline {
  border-color: var(--line-2);
  background: transparent;
  color: var(--text);
}
.btn-outline:hover {
  border-color: var(--line-3);
  background: rgb(255 255 255 / 0.04);
}
.band .btn-outline {
  border-color: rgb(255 255 255 / 0.22);
}
.band .btn-outline:hover {
  border-color: rgb(255 255 255 / 0.4);
  background: rgb(255 255 255 / 0.05);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
}
.btn-ghost:hover {
  background: rgb(255 255 255 / 0.06);
}
.btn-sm {
  height: 38px;
  padding: 0 14px;
  font-size: 14px;
}
.btn[disabled] {
  border-color: var(--line);
  background: transparent;
  color: var(--text-3);
  cursor: not-allowed;
}

/* Text links: soft blue, an arrow when they leave the site. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  color: var(--link);
  transition: color 160ms ease;
}
.link .icon {
  font-size: 0.92em;
  stroke-width: 2.2;
  transition: transform 200ms var(--ease);
}
.link:hover {
  color: var(--link-hover);
}
.link:hover .icon {
  transform: translate(1px, -1px);
}
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

/* Text links keep their line but answer a 44px target: a hit area reaches past the
   text, above and below, without moving anything. */
.link,
.source a,
.prose a,
.faq details > p a {
  position: relative;
}
.link::after,
.source a::after,
.prose a::after,
.faq details > p a::after {
  content: "";
  position: absolute;
  inset: -12px -4px;
}

/* ── Status (a dot and its words) and badges ─────────────────────────────── */

.status {
  position: relative;
  display: inline-block;
  padding-left: 21px;
  font-size: max(15px, calc(17 * var(--u)));
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.status::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.65em - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-3);
}
.status-live::before {
  background: var(--live);
}
.status-pending::before {
  background: var(--pending);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.badge-live {
  color: var(--live);
  border-color: rgb(53 204 128 / 0.35);
}
.badge-pending {
  color: var(--pending);
  border-color: rgb(245 172 42 / 0.35);
}

/* Alerts (shadcn/ui's Alert): a bordered note that says what state the Collective is in. */
.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  max-width: 62ch;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--raised);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
}
.callout::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--text-3);
}
.callout-pending::before {
  background: var(--pending);
}
.callout-live::before {
  background: var(--live);
}
.callout strong {
  display: block;
  font-weight: 600;
  color: var(--text);
}

/* ── Projects ─────────────────────────────────────────────────────────────── */

.project {
  display: grid;
  grid-template-columns: calc(104 * var(--u)) minmax(0, 1fr) minmax(calc(176 * var(--u)), auto);
  align-items: center;
  column-gap: calc(27 * var(--u));
  padding-block: 0 calc(16 * var(--u));
}
.project + .project {
  padding-top: calc(15 * var(--u));
  border-top: 1px solid var(--line);
}
.project:last-child {
  padding-bottom: calc(6 * var(--u));
}
/* The icon files keep Apple's transparent margin (24 of 256 px a side), so the
   image runs that much past its 90 px slot for the icon itself to fill it. */
.project-icon {
  width: calc(112 * var(--u));
  height: calc(112 * var(--u));
  margin: calc(-11 * var(--u)) 0 calc(-11 * var(--u)) calc(-8 * var(--u));
}
/* Centred on the icon, a little above its middle. */
.project-body,
.project-meta {
  margin-top: calc(-8 * var(--u));
}
.project-name {
  font-size: max(19px, calc(24 * var(--u)));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.project-line {
  max-width: 54ch;
  margin-top: calc(6 * var(--u));
  font-size: max(15px, calc(18 * var(--u)));
  line-height: 1.5;
  color: var(--text-2);
}
.project-meta {
  display: grid;
  justify-items: start;
  gap: calc(10 * var(--u));
}
.project-meta .links {
  font-size: max(15px, calc(18 * var(--u)));
}

/* ── How we work ──────────────────────────────────────────────────────────── */

.principles {
  display: grid;
  grid-template-columns: 22fr 27fr 26fr 25fr;
}
.principle {
  padding-right: 20px;
}
.principle + .principle {
  padding-left: calc(30 * var(--u));
  border-left: 1px solid var(--line);
}
.principle h3 {
  font-family: var(--mono);
  font-size: max(18px, calc(21 * var(--u)));
  font-weight: 580;
  line-height: 1.3;
}
.principle p {
  margin-top: calc(6 * var(--u));
  font-size: max(15px, calc(18 * var(--u)));
  line-height: 1.5;
  color: var(--text-2);
}

/* ── People: everyone in the repositories' contributor lists, from GitHub ──── */

.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(176px, 42vw), 1fr));
  gap: 10px;
}
.person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-size: 15px;
  font-weight: 500;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}
.person:hover {
  border-color: var(--line-2);
  background: var(--raised);
}
.person img,
.person .avatar-initial {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--raised-2);
}
.avatar-initial {
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-2);
}
.person span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person small {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
}

/* Facts: a definition list of short rows (the numbers, the ledger). */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}
.facts > div {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 18px 0;
}
.facts > div + div {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}
.facts dt {
  font-size: 15px;
  color: var(--text-2);
}
.facts dd {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--mono);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.source {
  margin-top: 12px;
  font-size: 15px;
  color: var(--text-3);
}
.source a {
  color: var(--link);
}
.source a:hover {
  color: var(--link-hover);
}

/* ── Tables (tiers) ───────────────────────────────────────────────────────── */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}
.table caption {
  padding-bottom: 12px;
  text-align: left;
  font-size: 15px;
  color: var(--text-3);
}
.table caption .badge {
  margin-left: 10px;
  vertical-align: 1px;
}
.table th,
.table td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.table thead th {
  padding-block: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
  border-bottom-color: var(--line-2);
}
.table tbody th {
  font-weight: 600;
  white-space: nowrap;
}
.table td {
  color: var(--text-2);
}
.table .num {
  text-align: right;
  white-space: nowrap;
}
.table td.num {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text);
}
.table .num small {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-3);
}
.table .act {
  width: 1%;
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
}
.table tfoot td {
  padding-top: 14px;
  border-bottom: 0;
  font-size: 15px;
  color: var(--text-3);
}

/* ── Get involved ─────────────────────────────────────────────────────────── */

.ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}
.way {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: 4px 14px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.way:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.way > .icon {
  grid-row: span 2;
  margin-top: 3px;
  font-size: 20px;
  color: var(--text-2);
}
.way strong {
  font-size: 18px;
  font-weight: 600;
}
.way span {
  font-size: 16px;
  color: var(--text-2);
}
.way a.link {
  justify-self: start;
}
/* A way that leads to each project lists them on a line of their own. */
.way-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
}
.ways-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ways-3 .way,
.ways-3 .way:nth-last-child(2) {
  border-bottom: 0;
}

/* The sponsor page's tiers carry their own key, and the off one while the
   Collective is pending. */
.tiers-full td.act .btn {
  min-width: 132px;
}

/* ── Supporters on the home page (Lead Sponsors), and the thank-you wall ──── */

.wall {
  display: grid;
  gap: 28px;
}
.wall-group h3 {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}
.wall-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wall-empty {
  color: var(--text-2);
}
.wall-logo,
.wall-person {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-weight: 500;
  transition: border-color 160ms ease;
}
.wall-logo:hover,
.wall-person:hover {
  border-color: var(--line-2);
}
.wall-logo img,
.wall-logo .wall-initial {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--raised-2);
}
.wall-person img,
.wall-person .wall-initial,
.wall-dot img,
.wall-dot .wall-initial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--raised-2);
}
.wall-initial {
  display: grid;
  place-items: center;
  font-family: var(--mono);
  color: var(--text-2);
}
.wall-dot {
  display: inline-block;
  border-radius: 50%;
}

/* ── FAQ (shadcn/ui's Accordion, on details) ──────────────────────────────── */

.faq {
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 60px;
  padding-block: 14px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary .icon {
  font-size: 18px;
  color: var(--text-3);
  transition: transform 220ms var(--ease);
}
.faq details[open] summary .icon {
  transform: rotate(45deg);
}
.faq summary:hover {
  color: var(--link-hover);
}
.faq details > p {
  max-width: 64ch;
  padding-bottom: 18px;
  color: var(--text-2);
}
.faq details > p a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--ground);
}
.footer-grid {
  display: grid;
  grid-template-columns: var(--label) repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  padding-block: 56px 48px;
}
.footer-brand .brand {
  font-size: 20px;
  gap: 14px;
}
.footer-brand .brand svg {
  width: 36px;
}
.footer-brand p {
  max-width: 30ch;
  margin-top: 14px;
  font-size: 15px;
  color: var(--text-3);
}
.footer-col h2 {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
}
.footer-col a {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  font-size: 15px;
  color: var(--text-2);
  transition: color 160ms ease;
}
.footer-col a:hover,
.footer-col a[aria-current="page"] {
  color: var(--text);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 20px 28px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-3);
}

/* ── The menu sheet (narrow screens) ──────────────────────────────────────── */

.menu-sheet {
  width: min(420px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 18px var(--gutter) 32px;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--ground);
  color: var(--text);
}
.menu-sheet::backdrop {
  background: rgb(6 8 12 / 0.6);
}
.menu-sheet form {
  display: flex;
  justify-content: flex-end;
}
.menu-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
}
.menu-close .icon {
  font-size: 22px;
}
.menu-sheet nav {
  display: grid;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
.menu-sheet nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
}
.menu-meta {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
.menu-meta .btn {
  width: 100%;
}

/* ── Brand page ───────────────────────────────────────────────────────────── */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.tile figcaption {
  margin-top: 12px;
  font-size: 15px;
  color: var(--text-2);
}
.tile-face {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 18%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--raised);
  color: var(--text);
}
.tile-face.on-band {
  position: relative;
  overflow: hidden;
  background: var(--band);
}
.tile-face.paper {
  border-color: transparent;
  background: #f2f3f5;
  color: var(--ground);
}
.tile-face svg {
  width: 100%;
  height: auto;
  fill: currentColor;
}
.tile-face .m-field {
  z-index: 0;
}
.tile-face .m-field + svg {
  position: relative;
}
.clear-space {
  position: relative;
  width: 100%;
  padding: 16%;
  outline: 1px dashed var(--line-2);
  outline-offset: -1px;
}
.clear-space .f {
  position: absolute;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-3);
}
.clear-space .f-top {
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
}
.clear-space .f-side {
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
}
.size-samples {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
  width: 100%;
}
.size-sample {
  display: grid;
  justify-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-3);
}
.size-sample svg {
  width: auto;
  fill: currentColor;
  color: var(--text);
}
.lockups {
  display: grid;
  justify-items: center;
  gap: 22px;
}
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.tile-face .lockup svg {
  width: 44px;
  height: auto;
  flex: none;
  fill: currentColor;
}
.tile-face:has(.size-samples),
.tile-face:has(.lockups) {
  padding: 8%;
}

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.swatch i {
  display: block;
  height: 84px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.swatch b {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
}
.swatch span {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-3);
}

.specimens {
  border-top: 1px solid var(--line);
}
.specimen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 30%);
  align-items: baseline;
  gap: 16px 32px;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
}
.specimen-sample {
  min-width: 0;
}
.sample-mono {
  font-family: var(--mono);
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 640;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.sample-sans {
  font-size: 20px;
  line-height: 1.5;
}
.sample-han {
  font-family: "Glow Sans SC", var(--sans);
  font-size: 20px;
  line-height: 1.8;
}
.specimen-about b {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.specimen-about small {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-3);
}

.icons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.icon-entry {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.icon-entry img {
  width: 72px;
  height: 72px;
}
.icon-entry strong {
  display: block;
  font-size: 18px;
  font-weight: 600;
}
.icon-entry .links {
  margin-top: 6px;
  font-size: 15px;
}

.donts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.dont .tile-face {
  padding: 22%;
}
.dont figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dont figcaption .icon {
  color: #f07878;
}
.dont .squashed {
  width: 100%;
  height: 46%;
}
.dont .recolored {
  fill: #35cc80;
}
.dont .outlined {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
}
.dont .busy {
  background: linear-gradient(125deg, #e8457c, #6a4ce0 55%, #2d7be6);
}

/* ── 404 ──────────────────────────────────────────────────────────────────── */

.lost-links {
  display: grid;
  max-width: 560px;
  border-top: 1px solid var(--line);
}
.lost-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  font-weight: 500;
  transition: color 160ms ease;
}
.lost-links a:hover {
  color: var(--link-hover);
}
.lost-links .icon {
  color: var(--text-3);
}

/* ── Chinese ──────────────────────────────────────────────────────────────────
   Han glyphs fill the em box, so Chinese headings get a little more leading and no
   negative tracking, reading text opens up, and headings wrap between phrases. */

:lang(zh) .headline,
:lang(zh) .page-title,
:lang(zh) .row-label {
  letter-spacing: 0;
  line-height: 1.3;
}
:lang(zh) .lede,
:lang(zh) .prose,
:lang(zh) .page-lede,
:lang(zh) .project-line,
:lang(zh) .principle p,
:lang(zh) .faq details > p {
  line-height: 1.8;
}
:lang(zh) .phrase {
  display: inline-block;
}
/* English pages name Chinese in a word or two (the language links); the system face
   sets those, so an English page never downloads Glow Sans for them. */
html:lang(en) [lang|="zh"] {
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ── Narrower screens ─────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .ways-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .ways-3 .way:not(:last-child) {
    border-bottom: 1px solid var(--line);
  }
  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px;
  }
  .principle:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .facts > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .donts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .nav,
  .header-tools {
    display: none;
  }
  .menu-button {
    display: grid;
  }
  .site-header {
    height: 72px;
  }
  .brand {
    font-size: 21px;
    gap: 14px;
  }
  .brand svg {
    width: 40px;
  }
  .row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
    padding-block: 28px;
  }
  .row-body {
    padding-left: 0;
    border-left: 0;
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .band-home .band-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "figures";
    row-gap: 20px;
    padding-top: 36px;
  }
  .headline {
    font-size: clamp(28px, 8.4vw, 40px);
  }
  .headline > span {
    display: inline;
  }
  .figures {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    white-space: normal;
    font-size: 15px;
  }
  .figures > span {
    white-space: nowrap;
  }
  .figures .sep {
    display: none;
  }
  .project {
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: start;
    column-gap: 16px;
  }
  .project-icon {
    width: 72px;
    height: 72px;
    margin: -6px -6px 0;
  }
  .project-body,
  .project-meta {
    margin-top: 0;
  }
  .project-meta {
    grid-column: 2;
    padding-top: 14px;
  }
  .project-name {
    font-size: 21px;
  }
  .project-line,
  .project-meta .links {
    font-size: 16px;
  }
  .ways,
  .ways-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .way:nth-last-child(2),
  .ways-3 .way:not(:last-child) {
    border-bottom: 1px solid var(--line);
  }
  .icons {
    grid-template-columns: minmax(0, 1fr);
  }
  .specimen {
    grid-template-columns: minmax(0, 1fr);
  }
  .table,
  .table caption,
  .table tbody,
  .table tfoot {
    display: block;
  }
  .table thead {
    display: none;
  }
  .table tbody tr,
  .table tfoot tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
    padding-block: 14px;
    border-bottom: 1px solid var(--line);
  }
  .table tfoot tr {
    border-bottom: 0;
  }
  .table tbody th,
  .table tbody td,
  .table tfoot td {
    padding: 0;
    border: 0;
  }
  .table tbody td:nth-of-type(1) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .table .act {
    grid-column: 1 / -1;
    width: auto;
    text-align: left;
    padding-top: 8px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 17px;
  }
  .principles {
    grid-template-columns: minmax(0, 1fr);
  }
  .principle,
  .principle + .principle {
    padding: 0;
    border-left: 0;
  }
  .principle + .principle {
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  .actions .btn {
    flex: 1 1 100%;
  }
  .tiles,
  .donts {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-grid {
    gap: 28px 16px;
  }
}

/* ── Motion ───────────────────────────────────────────────────────────────────
   One authored moment: on the first load of a page the m outlines on its band come
   in one by one, from the left. Page changes cross-fade (View Transitions). Under
   reduced motion none of it runs. */

@media (prefers-reduced-motion: no-preference) {
  .js .m-field use {
    animation: m-in 900ms var(--ease) both;
    animation-delay: calc(var(--i, 0) * 55ms + 120ms);
  }
  @keyframes m-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 320ms;
  }
}

/* Under reduced motion the small movements go too: the key's press, the link arrow's
   nudge and the FAQ plus's turn happen at once or not at all. Colour still changes. */
@media (prefers-reduced-motion: reduce) {
  .btn:active:not([disabled]),
  .link:hover .icon {
    transform: none;
  }
  .faq summary .icon,
  .link .icon {
    transition: none;
  }
}

/* ── Forced colors ──────────────────────────────────────────────────────────── */

@media (forced-colors: active) {
  .btn,
  .badge,
  .callout,
  .person,
  .wall-logo,
  .wall-person,
  .tile-face,
  .icon-entry {
    border: 1px solid CanvasText;
  }
  .status::before,
  .badge::before,
  .callout::before {
    background: CanvasText;
    forced-color-adjust: none;
  }
  .m-field {
    display: none;
  }
}