:root {
  --background: rgb(11,13,16);
  --surface: rgb(18,21,26);
  --slab: rgb(14,16,19);
  --line: rgba(196,205,218,0.102);
  --line-strong: rgba(214,222,232,0.173);
  --text: rgb(196,205,218);
  --strong: rgb(234,237,242);
  --soft: rgb(157,166,180);
  --faint: rgb(96,105,119);
  --accent: rgb(134,180,212);
  --green: rgb(134,212,160);
  --warm: rgb(212,160,134);
  --alarm: rgb(212,134,134);
  --well: rgba(0,0,0,0.275);
  --head-background: rgb(18,21,26);
  --head-line: rgba(196,205,218,0.102);
  --head-text: rgb(234,237,242);
  --head-soft: rgb(196,205,218);
  --head-faint: rgb(157,166,180);
  --accent-high: rgb(134,180,212);
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --radius: 14px;
  color-scheme: dark light;
}
@media (prefers-color-scheme: light) {
  :root {
  --background: rgb(217,221,228);
  --surface: rgb(234,236,238);
  --slab: rgb(185,188,192);
  --line: rgba(24,32,45,0.133);
  --line-strong: rgba(20,28,40,0.227);
  --text: rgb(51,60,73);
  --strong: rgb(22,26,33);
  --soft: rgb(85,94,108);
  --faint: rgb(107,116,131);
  --accent: rgb(74,109,136);
  --green: rgb(44,122,76);
  --warm: rgb(156,92,40);
  --alarm: rgb(168,59,59);
  --well: rgba(255,255,255,0.745);
  }
}
/* the visitor's own choice, kept by site.js, wins over the system's */
:root[data-mode="light"] {
  --background: rgb(217,221,228);
  --surface: rgb(234,236,238);
  --slab: rgb(185,188,192);
  --line: rgba(24,32,45,0.133);
  --line-strong: rgba(20,28,40,0.227);
  --text: rgb(51,60,73);
  --strong: rgb(22,26,33);
  --soft: rgb(85,94,108);
  --faint: rgb(107,116,131);
  --accent: rgb(74,109,136);
  --green: rgb(44,122,76);
  --warm: rgb(156,92,40);
  --alarm: rgb(168,59,59);
  --well: rgba(255,255,255,0.745);
}
:root[data-mode="dark"] {
  --background: rgb(11,13,16);
  --surface: rgb(18,21,26);
  --slab: rgb(14,16,19);
  --line: rgba(196,205,218,0.102);
  --line-strong: rgba(214,222,232,0.173);
  --text: rgb(196,205,218);
  --strong: rgb(234,237,242);
  --soft: rgb(157,166,180);
  --faint: rgb(96,105,119);
  --accent: rgb(134,180,212);
  --green: rgb(134,212,160);
  --warm: rgb(212,160,134);
  --alarm: rgb(212,134,134);
  --well: rgba(0,0,0,0.275);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 72px; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.mono { font-family: var(--mono); }
p { margin: 0; }

/* the header: the plinth the site stands on, dark in light mode too */
header {
  position: sticky; top: 0; z-index: 10;
  background: var(--head-background);
  border-bottom: 1px solid var(--head-line);
}
.header {
  width: 100%; padding: 0 30px; min-height: 60px;
  display: flex; align-items: center; gap: 30px;
}
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand img { width: 26px; height: 26px; border-radius: 6px; }
.name { font-size: 19px; letter-spacing: 1.2px; line-height: 1; }
.name b { font-weight: 600; color: var(--head-soft); }
.name i { font-style: normal; font-weight: 600; color: var(--accent-high); }
/* The menu's rules name nav:not(.langs): the language switch is a nav
   as well, and a bare `nav` selector reached it, giving the pill the
   menu's gap and, on narrow screens, the menu's full width. I chose
   the selector over a class in the markup so that the fix travels in
   the stylesheet alone. */
nav:not(.langs) { display: flex; flex: 1; gap: 26px; flex-wrap: wrap; }
nav:not(.langs) a {
  padding: 4px 0; font-size: 12px; font-weight: 500; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--head-faint);
  border-bottom: 2px solid transparent; transition: color .15s;
}
nav:not(.langs) a:hover { color: var(--head-text); }
.legal-links { display: flex; gap: 18px; }
.legal-links a {
  font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--head-faint); transition: color .15s;
}
.legal-links a:hover { color: var(--head-text); }
.langs {
  flex: none; display: flex; border: 1px solid var(--head-line);
  border-radius: 999px; overflow: hidden;
}
.langs a, .langs span {
  display: block; padding: 5px 11px; font-size: 11px; letter-spacing: 1.8px;
  color: var(--head-faint); transition: color .15s, background .15s;
}
.langs span.on { color: var(--head-text); background: var(--head-line); }
.langs a:hover { color: var(--head-text); }
.mode, .burger {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  background: transparent; border: none; border-radius: 50%; color: var(--head-faint);
  cursor: pointer; transition: color .15s, background .15s;
}
.mode:hover, .burger:hover { color: var(--head-text); background: var(--head-line); }
.burger { display: none; }
.burger .cross { display: none; }
.open .burger .bars { display: none; }
.open .burger .cross { display: block; }
.icon {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; color: var(--head-faint); transition: color .15s, background .15s;
}
.icon:hover { color: var(--head-text); background: var(--head-line); }
.icon svg { width: 17px; height: 17px; }
.mode .sun { display: none; }
.mode .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) .mode .moon { display: none; }
  :root:not([data-mode]) .mode .sun { display: block; }
}
:root[data-mode="dark"] .mode .moon { display: none; }
:root[data-mode="dark"] .mode .sun { display: block; }
:root[data-mode="light"] .mode .moon { display: block; }
:root[data-mode="light"] .mode .sun { display: none; }

/* the hero and its sky */
.hero {
  position: relative; overflow: hidden; min-height: 66vh;
  display: flex; align-items: center; padding: 84px 30px 92px;
  border-bottom: 1px solid var(--line);
}
.sky {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; color: var(--accent);
}
#backdrop { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero.live .sky { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-mode]) .sky, :root:not([data-mode]) #backdrop { opacity: .6; } }
:root[data-mode="light"] .sky, :root[data-mode="light"] #backdrop { opacity: .6; }
:root[data-mode="dark"] .sky, :root[data-mode="dark"] #backdrop { opacity: 1; }
.sky .mote { fill: currentColor; animation: twinkle 6s ease-in-out infinite; }
.sky .mote.slow { animation-duration: 9s; }
.sky .thread { stroke: currentColor; stroke-width: .6; }
.sky .shard { fill: none; stroke: currentColor; stroke-width: .7; animation: drift 22s ease-in-out infinite; }
.sky .shard.far { animation-duration: 34s; }
.sky .lattice { stroke: currentColor; stroke-width: .5; fill: none; }
.sky .crest { stroke: currentColor; stroke-width: 1.1; fill: none; }
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hero-inside { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; }
.hero-inside > * { max-width: 62ch; }
.hero-inside > .buttons { max-width: none; }
.overtitle {
  margin: 0 0 18px; font-size: 11.5px; letter-spacing: 3.4px;
  text-transform: uppercase; color: var(--faint);
}
h1.big {
  margin: 0 0 22px; font-size: clamp(38px, 6.2vw, 76px); font-weight: 600;
  line-height: 1.02; letter-spacing: -1.6px; color: var(--strong);
}
h1.big i { font-style: normal; color: var(--accent); }
.hero .kicker { font-size: 18.5px; margin-bottom: 14px; }
.hero .note { margin-bottom: 30px; }
.hero .badge { margin-bottom: 16px; }
.buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.button {
  display: inline-block; padding: 11px 22px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: 11.5px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--soft); transition: color .15s, border-color .15s, background .15s;
}
.button:hover { color: var(--strong); border-color: var(--accent); }
.button.filled { background: var(--accent); border-color: var(--accent); color: var(--background); }
.button.filled:hover { filter: brightness(1.12); color: var(--background); }
.button.muted { color: var(--faint); cursor: default; }
.button.muted:hover { border-color: var(--line-strong); color: var(--faint); }
.hero-inside > * {
  opacity: 0; transform: translateY(14px);
  animation: enter .62s cubic-bezier(.22, .61, .36, 1) forwards;
}
.hero-inside > *:nth-child(1) { animation-delay: .05s; }
.hero-inside > *:nth-child(2) { animation-delay: .14s; }
.hero-inside > *:nth-child(3) { animation-delay: .26s; }
.hero-inside > *:nth-child(4) { animation-delay: .36s; }
.hero-inside > *:nth-child(5) { animation-delay: .46s; }
.hero-inside > *:nth-child(6) { animation-delay: .56s; }
@keyframes enter { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-inside > * { animation: none; opacity: 1; transform: none; }
  .sky .mote, .sky .shard { animation: none; }
}

/* the bands and their numbered titles */
.band { padding: 86px 30px; }
.band + .band { border-top: 1px solid var(--line); }
.inside { max-width: 1180px; margin: 0 auto; }
h2 {
  margin: 0 0 22px; display: flex; align-items: center; gap: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 3px;
  text-transform: uppercase; color: var(--faint);
}
h2 .num {
  display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px;
  border: 1px solid var(--accent); border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px; color: var(--accent);
}
h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.kicker { margin: 0 0 10px; font-size: 17px; color: var(--soft); max-width: 66ch; }
.note { margin: 0; font-size: 13px; color: var(--faint); max-width: 68ch; }
.note.wide { font-size: 14px; color: var(--soft); max-width: 64ch; margin-bottom: 12px; }
.prose { max-width: 72ch; }
.prose p { margin: 0 0 12px; font-size: 14.5px; color: var(--soft); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px 64px; align-items: start; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.motto { margin-top: 26px; }
.motto-latin { margin: 0; font-size: 17.5px; font-style: italic; color: var(--strong); }
.motto-reading { margin: 6px 0 0; font-size: 12.5px; color: var(--faint); }
.aside-motto { padding-top: 6px; text-align: right; }
.aside-motto .motto-latin { font-size: 19px; }

/* the chain: numbered cards joined by a thread */
.chain {
  list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.chain.four { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.chain li {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 18px 20px;
  transition: border-color .2s, transform .2s;
}
.chain li:hover { border-color: var(--line-strong); transform: translateY(-2px); }
@media (min-width: 1100px) {
  .chain li:not(:last-child)::after {
    content: ""; position: absolute; top: 33px; right: -14px; width: 14px; height: 1px;
    background: var(--line-strong);
  }
}
.number {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--mono); font-size: 12px; margin-bottom: 13px;
}
.chain b { display: block; font-size: 12px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--strong); margin-bottom: 7px; }
.chain span:not(.number) { display: block; font-size: 13.5px; color: var(--soft); }
.chain .icon { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; color: var(--soft); opacity: .8; }
.chain .icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* the principles: title and text in columns, a line above */
.principles { display: grid; gap: 28px 40px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin-top: 30px; }
.principle { border-top: 1px solid var(--line-strong); padding-top: 14px; }
.principle b { display: block; font-size: 13.5px; font-weight: 600; color: var(--strong); margin-bottom: 8px; }
.principle span { display: block; font-size: 13.5px; color: var(--soft); }
.gate { margin-top: 36px; padding: 18px 22px; border-left: 2px solid var(--accent); background: var(--well); border-radius: 0 var(--radius) var(--radius) 0; max-width: 76ch; }
.gate b { display: block; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--strong); margin-bottom: 6px; }
.gate span { font-size: 13.5px; color: var(--soft); }

/* the roadmap: the stages on one rail */
.road { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); position: relative; }
.road > li { position: relative; padding-top: 22px; }
.road > li::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: var(--line-strong); }
.road > li::after { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 4px var(--background); }
.road > li.now::after { background: var(--green); }
.road > li.next::after { background: var(--accent); }
.road b { display: block; font-size: 12px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--strong); margin-bottom: 10px; }
.road ul { margin: 0; padding: 0; list-style: none; }
.road ul li { padding: 0 0 0 14px; margin: 0 0 8px; font-size: 13.5px; color: var(--soft); position: relative; }
.road ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
.track { margin: 30px 0 -22px; font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); }
/* the map above the cards: one rail, a node per version */
.map { display: block; width: 100%; height: auto; margin: 26px 0 4px; }
.map .rail { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.map .node { fill: var(--background); stroke: var(--faint); stroke-width: 2; }
.map .node.now { fill: var(--green); stroke: var(--green); }
.map .node.next { fill: var(--accent); stroke: var(--accent); }
.map .v { font: 600 15px var(--mono); fill: var(--strong); letter-spacing: 1px; }
.map .n { font: 500 11.5px var(--ui); fill: var(--soft); letter-spacing: 1.8px; text-transform: uppercase; }
@media (max-width: 720px) { .map { display: none; } .track { margin-bottom: -10px; } }

/* the download: what it needs, and the release */
.release { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); margin-top: 30px; }
@media (max-width: 900px) { .release { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.card b.title { display: block; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--strong); margin-bottom: 12px; }
.card ul { margin: 0; padding: 0; list-style: none; }
.card ul li { position: relative; padding-left: 16px; margin: 0 0 8px; font-size: 13.5px; color: var(--soft); }
.card ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.card.release-card { display: grid; align-content: start; gap: 14px; background: linear-gradient(160deg, var(--surface), var(--slab)); }
.badge {
  display: inline-block; width: max-content; padding: 4px 12px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 1px; color: var(--soft);
}
.card p { font-size: 13.5px; color: var(--soft); }

/* the form, in the language of the maintenance page */
form { margin-top: 30px; padding: 22px 24px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 16px; max-width: 760px; }
.row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .row { grid-template-columns: 1fr; } }
label { display: grid; gap: 6px; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); }
input, textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none;
  color: var(--strong); background: var(--well); border: 1px solid var(--line-strong); border-radius: 9px;
}
input:focus, textarea:focus { border-color: var(--accent); }
textarea { min-height: 150px; resize: vertical; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--soft); }
.consent input { width: auto; margin-top: 4px; }
.consent a { color: var(--accent); }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button { font: inherit; cursor: pointer; }

/* the policy pages */
.policy { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; margin-top: 26px; color: var(--text); }
.policy.frame { padding: 10px; }
.policy .open { margin: 12px 8px 4px; font-size: 13px; }
.policy .open a { color: var(--accent); }
.policy .owner { margin: 6px 8px 4px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--soft); }
/* the document written into the page by site.js, in the page's own colours */
.policy .document { padding: 18px 22px 8px; font-size: 14.5px; line-height: 1.65; }
.policy .document h2, .policy .document h3, .policy .document h4 { color: var(--strong); font-weight: 600; margin: 26px 0 8px; font-size: 16px; letter-spacing: .2px; }
.policy .document h2 { font-size: 18px; }
.policy .document p { margin: 0 0 12px; }
.policy .document ul, .policy .document ol { margin: 0 0 14px; padding-left: 24px; }
.policy .document li { margin: 4px 0; }
.policy .document a { color: var(--accent); }
.policy .document table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13.5px; }
.policy .document th, .policy .document td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.policy .document th { background: var(--slab); color: var(--strong); }
.centre { text-align: center; padding: 120px 24px; }
.centre h1 { font-size: 30px; color: var(--strong); margin: 0 0 12px; }
.centre p { color: var(--soft); margin-bottom: 26px; }

/* the footer, with the wordmark in outline */
footer { border-top: 1px solid var(--line); background: var(--surface); position: relative; overflow: hidden; }
.foot { position: relative; max-width: 1180px; margin: 0 auto; padding: 36px 26px 92px; }
.foot-columns { display: grid; grid-template-columns: 1fr auto auto; gap: 24px 64px; align-items: start; }
@media (max-width: 700px) { .foot-columns { grid-template-columns: 1fr; } }
.foot-block > b { display: block; font-size: 11px; font-weight: 600; letter-spacing: 2px; color: var(--strong); margin-bottom: 10px; }
.foot-brand { font-size: 16px; letter-spacing: .2px; color: var(--strong); }
.foot-brand i { font-style: normal; color: var(--accent); }
.foot-block span, .foot-block a { display: block; font-size: 12.5px; color: var(--soft); margin-bottom: 7px; }
.foot-block a { letter-spacing: 1.2px; font-size: 11.5px; text-transform: uppercase; }
.foot-block a:hover { color: var(--strong); }
.foot-motto { display: block; font-style: italic; font-size: 12px; color: var(--faint); margin-top: 10px; }
.foot-bottom { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; gap: 10px 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--faint); align-items: center; }
.foot-bottom .badge { font-size: 10.5px; padding: 2px 9px; }
.foot-owner { margin-top: 8px; padding-top: 0; border-top: none; }
.wordmark {
  position: absolute; right: 26px; bottom: 10px; margin: 0; pointer-events: none;
  font-size: clamp(56px, 7vw, 104px); font-weight: 600; letter-spacing: 14px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong); opacity: .8;
}
@media (max-width: 900px) {
  .header { flex-wrap: wrap; padding: 10px 20px 12px; gap: 8px 16px; min-height: 0; }
  .brand { margin-right: auto; }
  .name { font-size: 17px; }
  .langs a, .langs span { padding: 4px 9px; font-size: 10.5px; }
  nav:not(.langs) { order: 3; flex: 0 0 100%; width: 100%; gap: 4px 18px; }
  nav:not(.langs) a { font-size: 11px; letter-spacing: 2px; padding: 2px 0; }
  .legal-links { order: 4; flex: 0 0 100%; gap: 16px; }
  /* Tablets and phones with script (the root carries data-js, set by
     site.js in the head, before the first paint): the menu and the
     policy links fold behind the three bars, and open as a column of
     tall rows under the bar. Without script the rows above stay and
     the menu is simply visible: a menu that cannot be opened is worse
     than one that takes three rows. */
  /* order 2: after the brand and the theme button, before the folded
     rows, so the cross stays where the bars were when the menu is open. */
  [data-js] .burger { display: grid; order: 2; }
  [data-js] .header > nav:not(.langs), [data-js] .header > .legal-links { display: none; }
  [data-js] .header.open > nav:not(.langs) {
    display: flex; flex-direction: column; gap: 0; margin-top: 6px; padding-top: 6px;
    border-top: 1px solid var(--head-line);
  }
  [data-js] .header.open > nav:not(.langs) a { padding: 11px 0; font-size: 12px; letter-spacing: 2.4px; }
  [data-js] .header.open > .legal-links { display: flex; padding: 8px 0 2px; }
}
/* A phone: the bar keeps the brand, the theme button and the bars; the
   language pill and the GitHub mark move into the folded menu, and the
   policy links leave the header when there is no script (the footer of
   every page carries them). Measured at 412 and 360 px wide. */
@media (max-width: 720px) {
  .header { padding: 10px 16px; gap: 6px 10px; }
  .brand { gap: 8px; }
  .brand img { width: 22px; height: 22px; }
  .name { font-size: 15px; letter-spacing: 1px; }
  .langs { margin-left: 4px; }
  .langs a, .langs span { padding: 4px 8px; font-size: 10px; letter-spacing: 1.4px; }
  .icon, .mode, .burger { width: 30px; height: 30px; }
  nav:not(.langs) { gap: 2px 14px; }
  nav:not(.langs) a { font-size: 10.5px; letter-spacing: 1.6px; padding: 3px 0; }
  .legal-links { display: none; }
  [data-js] .header > .langs, [data-js] .header > .icon { display: none; }
  [data-js] .header.open > .langs { display: flex; order: 5; margin: 8px auto 0 0; }
  [data-js] .header.open > .langs a, [data-js] .header.open > .langs span { padding: 6px 12px; font-size: 11px; }
  [data-js] .header.open > .icon { display: grid; order: 6; margin-top: 8px; }
  [data-js] .header.open > .legal-links { order: 7; }
}
@media (max-width: 720px) {
  .band { padding: 60px 20px; }
  .hero { padding: 56px 20px 64px; min-height: 0; }
  .wordmark { display: none; }
}