/*
  Self-hosted webfonts (fonts/*.woff2), fetched from Google Fonts and served
  from this origin. No request leaves programmable.farm for type, so the site
  renders identically where Google's CDN is unreachable (mainland China,
  offline, blocking network filters). All three families are SIL Open Font
  License 1.1: redistribution and self-hosting are permitted.
  DM Sans and Fraunces are variable fonts, one file covering the whole weight
  range below; DM Mono ships static 400/500.
*/
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-mono-400-latin.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: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dm-mono-500-latin.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: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-mono-400-latin-ext.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: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dm-mono-500-latin-ext.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: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans-latin.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: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans-latin-ext.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: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/fraunces-latin.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: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/fraunces-latin-ext.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;
}

:root {
  --ink: #19352a;
  --ink-soft: #365347;
  --paper: #f3efe5;
  --paper-deep: #e6dfd0;
  --white: #fffdf8;
  --acid: #d5ef65;
  --sun: #f4ba52;
  --line: rgba(25, 53, 42, 0.2);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
  --mono: 'DM Mono', 'Courier New', monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover,
a:focus-visible {
  color: var(--ink-soft);
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--white);
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.35rem 1.5rem;
  font-size: 0.82rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.wordmark-mark {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 1.1rem;
  line-height: 1;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

nav a {
  text-decoration: none;
}

.lang-switch {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.lang-switch:hover,
.lang-switch:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
}

/*
  Chinese edition (/zh/). DM Sans and Fraunces carry no CJK glyphs, so the
  stacks fall through to system CJK families; the tightened Latin heading
  settings (0.98 line-height, -0.04em tracking, 8.5rem h1) read as cramped
  once Chinese characters fill the line.
*/
/*
  Chinese subsets: only the characters used by site/zh/index.html, generated by
  scripts/subset-cjk-fonts.py. Regenerate after any change to the Chinese copy.
  Loaded only on the Chinese page (the zh font stacks reference these families;
  no other page names them, so no other page downloads them).
*/
@font-face {
  font-family: 'Noto Sans SC Subset';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/noto-sans-sc-400-subset.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Serif SC Subset';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/noto-serif-sc-400-subset.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Serif SC Subset';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/noto-serif-sc-600-subset.woff2') format('woff2');
}

html[lang='zh-Hans'] {
  --sans: 'DM Sans', 'Noto Sans SC Subset', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC',
    'Source Han Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  --serif: 'Fraunces', 'Noto Serif SC Subset', 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC',
    'Hiragino Mincho ProN', Georgia, serif;
}

html[lang='zh-Hans'] body {
  line-height: 1.7;
}

html[lang='zh-Hans'] h1,
html[lang='zh-Hans'] h2,
html[lang='zh-Hans'] h3,
html[lang='zh-Hans'] .fork-word,
html[lang='zh-Hans'] .footer-prompt {
  letter-spacing: 0;
  line-height: 1.15;
}

html[lang='zh-Hans'] h1 {
  font-size: clamp(2.6rem, 6.5vw, 5.4rem);
}

html[lang='zh-Hans'] h2,
html[lang='zh-Hans'] .principles-intro h2 {
  font-size: clamp(2rem, 4.4vw, 4rem);
}

html[lang='zh-Hans'] .principle-list h3 {
  font-size: 1.7rem;
}

html[lang='zh-Hans'] .fork-word {
  font-size: clamp(2.4rem, 5vw, 4.4rem);
}

html[lang='zh-Hans'] .footer-prompt {
  font-size: clamp(1.7rem, 3.4vw, 3rem);
}

html[lang='zh-Hans'] .eyebrow,
html[lang='zh-Hans'] .section-kicker,
html[lang='zh-Hans'] .principle-number,
html[lang='zh-Hans'] .fork-caption,
html[lang='zh-Hans'] .part-label,
html[lang='zh-Hans'] .footer-meta {
  letter-spacing: 0.05em;
}

main {
  overflow: hidden;
}

.hero,
.statement,
.principles,
.fork,
.includes {
  max-width: 1180px;
  margin: 0 auto;
  padding: 6rem 1.5rem;
}

.hero {
  min-height: auto;
  padding-top: 5rem;
  padding-bottom: 7rem;
}

.hero-copy {
  max-width: 900px;
}

.hero-mark {
  width: 100%;
  max-width: none;
  margin: 3.5rem 0 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--ink);
}

.eyebrow,
.section-kicker,
.principle-number,
.fork-caption,
.part-label,
.footer-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow,
.section-kicker {
  margin: 0 0 1.5rem;
  color: var(--ink-soft);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

h1 {
  max-width: 720px;
  margin-bottom: 2rem;
  font-size: clamp(3.6rem, 9vw, 8.5rem);
}

.hero-lede {
  max-width: 580px;
  margin-bottom: 2.25rem;
  font-size: clamp(1.2rem, 2.3vw, 1.65rem);
  line-height: 1.25;
}

.hero-note {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.hero-mark picture {
  display: block;
}

@media (max-width: 800px) {
  .hero-mark {
    width: 100%;
    max-width: none;
    margin: 2.25rem 0 0;
  }

  .hero-image {
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
  }
}

.statement {
  border-top: 1px solid var(--line);
}

.statement-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.85fr) minmax(300px, 1fr);
  gap: 5rem;
}

h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.7rem, 6vw, 5.8rem);
}

.prose {
  max-width: 610px;
  padding-top: 0.6rem;
  font-size: 1.15rem;
}

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

.principles {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 5rem;
  border-top: 1px solid var(--line);
}

.principles-intro h2 {
  max-width: 540px;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
}

/*
  The three stake cards need about 591px of track width; "Accessibility" as a
  2rem heading sets that floor. In the two-column split below that only clears
  at roughly 1130px viewport, so hold the section in one column until then.
  Otherwise the third card overflows its track and is clipped, with no
  scrollbar to reveal it, by `main { overflow: hidden }`.
*/
@media (min-width: 801px) and (max-width: 1139.98px) {
  .principles {
    grid-template-columns: 1fr;
  }
}

.principle-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: start;
}

.principle-list article {
  min-height: 300px;
  padding: 1.25rem;
  border: 1px solid var(--ink);
  background: var(--white);
}

.principle-list article:nth-child(2) {
  background: var(--acid);
}

.principle-list article:nth-child(3) {
  background: var(--sun);
}

.principle-number {
  margin-bottom: 4rem;
}

.principle-list h3 {
  margin-bottom: 1rem;
  font-size: 2rem;
}

.principle-list article p:last-child {
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.fork {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 4rem;
  border-top: 1px solid var(--line);
}

.fork-caption {
  max-width: 160px;
  margin-bottom: 0;
  color: var(--ink-soft);
  line-height: 1.4;
}

.fork-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.fork-option {
  min-height: 350px;
  padding: 1.5rem;
  border: 1px solid var(--ink);
}

.fork-open {
  background: var(--ink);
  color: var(--paper);
}

.fork-closed {
  background: transparent;
}

.fork-word {
  margin-bottom: 8rem;
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 6.5rem);
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.fork-option p:last-child {
  max-width: 300px;
  margin-bottom: 0;
  font-size: 1.05rem;
}

.includes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  border-top: 1px solid var(--line);
}

.includes-copy p:last-child {
  max-width: 530px;
  font-size: 1.15rem;
}

.project-parts {
  display: grid;
  border-top: 1px solid var(--ink);
}

.project-parts p {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  margin: 0;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}

.part-label {
  color: var(--ink-soft);
}

.site-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2.5rem;
  border-top: 1px solid var(--line);
}

.footer-prompt {
  margin-bottom: 1.5rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.6rem);
  letter-spacing: -0.04em;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
}

.footer-meta {
  margin-bottom: 0;
  color: var(--ink-soft);
}

@media (max-width: 800px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  nav {
    width: 100%;
    justify-content: space-between;
    gap: 0.25rem;
  }

  nav a {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
    text-align: center;
    white-space: nowrap;
  }

  .lang-switch {
    flex: 0 0 auto;
    min-width: 44px;
  }

  .hero,
  .statement-grid,
  .principles,
  .fork,
  .includes {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }

  .hero-copy {
    max-width: none;
  }

  .hero-mark {
    width: 100%;
    max-width: none;
    margin: 2.25rem 0 0;
  }

  .statement,
  .principles,
  .fork,
  .includes {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  h2 {
    font-size: clamp(2.3rem, 10vw, 4rem);
  }

  .principles-intro h2 {
    font-size: clamp(2.2rem, 9vw, 3.5rem);
  }

  .statement-grid,
  .principles,
  .fork,
  .includes {
    gap: 2.5rem;
  }

  .principle-list {
    grid-template-columns: 1fr;
  }

  .principle-list article {
    min-height: auto;
  }

  .principle-number {
    margin-bottom: 2rem;
  }

  .fork-options {
    grid-template-columns: 1fr;
  }

  .fork-option {
    min-height: 280px;
  }

  .fork-word {
    margin-bottom: 5rem;
  }
}

@media (max-width: 480px) {
  .hero,
  .statement,
  .principles,
  .fork,
  .includes {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  h1 {
    font-size: clamp(2.5rem, 11vw, 3.1rem);
  }

  .project-parts p {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}