/* whatsapp-desktop landing page.
   Full-bleed by design: the page uses the whole window and the side gutter
   grows on wide screens, rather than pinning everything to a centred column.
   Only running prose keeps a measure. */

/* The page is drawn in the font this client's author reads their own desktop
   in -- Poetsen One for Latin, and beside it a face built for the Arabic it has
   none of. Two @font-face faces of ONE family, split by `unicode-range`: an
   Arabic character matches both, and CSS breaks the tie by declaration order,
   so the Arabic one is written SECOND and moving it is a bug. It is the same
   mechanism the client uses on a conversation, for the same reason -- a
   selector cannot say "the Arabic words in this paragraph", and a rule that
   could would have to match every element on the page.

   Self-hosted rather than fetched from Google: one origin, no third party
   watching who reads this page, and nothing to go wrong offline. Subsetted, so
   the pair is 81 KB. Licences and how the Arabic face was built: FONTS-NOTICE.txt.

   `local()` first, because the machine this was written on already has both
   installed and there is no reason to send it the files again.

   One weight, 400 -- Poetsen One has no bold face and the heavier text on this
   page is Chromium's synthesis, which is what it looks like on that desktop too. */
@font-face {
  font-family: "Poetsen";
  src: local("PoetsenOne"), local("Poetsen One"),
       url("poetsen-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, 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+2190-2193, U+2212, U+2215, U+2713-2714,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poetsen";
  src: local("Poetsen Arabic"),
       url("poetsen-arabic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* From the Arabic comma, not from U+0600: the Latin punctuation below it
     reads better in the Latin face. The same list src/style.js ships. */
  unicode-range: U+060C-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF,
                 U+FE70-FEFF, U+10E60-10E7E, U+1EE00-1EEFF;
}

:root {
  --bg:        #0a100d;
  --bg-alt:    #0d1512;
  --panel:     #121b17;
  --panel-2:   #16211c;
  --line:      #1f2e28;
  --line-soft: #182420;
  --fg:        #e9f2ec;
  --dim:       #93a89f;
  --dimmer:    #6b7f77;
  --accent:    #25d366;
  --accent-dk: #128c7e;
  --accent-in: #052b16;
  --code:      #060b09;
  --radius:    14px;
  --gutter:    clamp(20px, 5vw, 80px);
  --measure:   72ch;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 78px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 "Poetsen", system-ui, -apple-system, "Segoe UI", Cantarell, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, pre { font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace; }
code { font-size: .9em; color: #b8e7c9; }
/* A path or a package name in the middle of a sentence is one long word, and on
   a narrow screen one long word pushes the page wider than the screen. Inside a
   <pre> it is left alone: that block scrolls on purpose. */
p code, li code, td code { overflow-wrap: anywhere; }
p code, li code, td code { background: #0e1714; border: 1px solid var(--line-soft);
  border-radius: 5px; padding: .1em .38em; }

kbd {
  display: inline-block; padding: .1em .45em; font-size: .8em; line-height: 1.5;
  color: var(--fg); background: #16211c; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-in); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

[hidden] { display: none !important; }

/* ------------------------------------------------------------- top bar -- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--fg); font-weight: 650; letter-spacing: -.01em; white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand img { border-radius: 7px; }

/* Scrolls rather than pushes: the bar carries a brand, eight links, a version
   pill and a button, and a reader whose browser forces its own font draws every
   one of them wider than this was measured with. */
.topnav {
  display: flex; gap: 4px; margin-left: 8px; flex: 1;
  min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav a { white-space: nowrap; }
.topnav a {
  color: var(--dim); font-size: .92rem; padding: 6px 12px; border-radius: 8px;
}
/* Eight sections fit a wide bar with room to spare and a narrow one only if
   they give up their padding. Below this the nav is hidden altogether, so this
   is the band where the choice is between tighter links and a nav that has to
   be scrolled sideways to reach the last of them. */
@media (max-width: 1180px) {
  .topnav { gap: 2px; }
  .topnav a { padding: 6px 6px; font-size: .86rem; }
}
@media (max-width: 1010px) {
  .topnav a { padding: 6px 4px; font-size: .8rem; }
}
.topnav a:hover { color: var(--fg); background: var(--panel); text-decoration: none; }

.topbar-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--dim); font-size: .82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pill:hover { color: var(--fg); border-color: var(--accent); text-decoration: none; }
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* -------------------------------------------------------------- buttons - */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 7px 13px; font-size: .86rem; }

.btn-primary { background: var(--accent); color: var(--accent-in); }
.btn-primary:hover { background: #2ef177; }

.btn-ghost { background: var(--panel); color: var(--fg); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); background: var(--panel-2); }

.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ico-gh { width: 16px; height: 16px; flex: none; fill: currentColor; }

/* ----------------------------------------------------------------- hero - */

.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
  /* Tight under the bar on purpose: the headline is the first thing to read,
     and a screenful of gradient above it is a scroll before anything is said. */
  padding: clamp(28px, 3.5vw, 56px) var(--gutter) clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(80% 120% at 8% 0%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 62%),
    radial-gradient(60% 100% at 100% 0%, color-mix(in srgb, var(--accent-dk) 12%, transparent) 0%, transparent 60%);
}

.eyebrow {
  margin: 0 0 14px; color: var(--accent); font-size: .78rem; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 18px; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08;
  letter-spacing: -.035em; font-weight: 700;
}

.lead { color: var(--dim); font-size: 1.06rem; max-width: var(--measure); margin: 0 0 26px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.hero-meta { color: var(--dimmer); font-size: .86rem; margin: 0; }

.hero-art { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.hero-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hero-facts li {
  color: var(--dim); font-size: .88rem; padding-left: 22px; position: relative;
}
.hero-facts li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); opacity: .55;
}
.hero-facts strong { color: var(--fg); font-weight: 600; }

/* --------------------------------------------------------- terminal art - */

.term {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--code); box-shadow: 0 24px 60px -30px #000;
}
.term-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.tl { width: 11px; height: 11px; border-radius: 50%; }
.tl-r { background: #ff5f57; } .tl-y { background: #febc2e; } .tl-g { background: #28c840; }
.term-title { margin-left: 8px; color: var(--dimmer); font-size: .76rem;
  font-family: ui-monospace, monospace; }
.term-body {
  margin: 0; padding: 18px 20px; overflow-x: auto;
  font-size: .82rem; line-height: 1.85; color: #cfe0d6;
}
.term-body .p { color: var(--accent); font-weight: 700; }
.term-body .c { color: var(--dimmer); }
.term-body .g { color: #b8e7c9; }
.cursor {
  display: inline-block; width: 8px; height: 1.05em; margin-left: 4px;
  background: var(--accent); vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* ---------------------------------------------------------------- bands - */

.band { padding: clamp(56px, 7vw, 96px) var(--gutter); border-bottom: 1px solid var(--line-soft); }
.band-alt { background: var(--bg-alt); }

.section-head { margin-bottom: 32px; }
.section-head h2 {
  margin: 0 0 8px; font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -.025em; font-weight: 680;
}
.section-head .sub { margin: 0; color: var(--dim); max-width: var(--measure); }

/* ----------------------------------------------------------------- card - */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
}
.card h3 { margin: 0 0 10px; font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; }
.card p { color: var(--dim); margin: 0 0 12px; }
.card p:last-child { margin-bottom: 0; }

.note { color: var(--dimmer) !important; font-size: .88rem; max-width: var(--measure); }
.step {
  color: var(--accent) !important; font-size: .8rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; margin: 22px 0 6px !important;
}
.panel .step:first-child { margin-top: 0 !important; }

/* -------------------------------------------------------------- features- */

/* Six features: auto-fit alone lands on four columns at desktop widths and
   leaves a ragged row of two, so the wide case is pinned to three. */
.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (min-width: 1120px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.feat h3 { margin-bottom: 8px; }
.feat p { font-size: .93rem; margin: 0; }
.feat-ico {
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: 14px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.feat-ico svg {
  width: 20px; height: 20px; fill: none; stroke: var(--accent);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.showcase {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 40px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(24px, 3vw, 40px);
}
/* Every other one has its picture on the right, so three windows in a row down
   the page read as three and not as a list. `order` rather than a second column
   rule: it leaves the source in the order it should be read aloud in, and it
   stops applying by itself when the grid collapses to one column below. */
.showcase.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.showcase.flip figure { order: 2; }
.showcase figure { margin: 0; }
.showcase img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  border: 1px solid var(--line); box-shadow: 0 22px 50px -28px #000;
}
/* The About window is the short one of the three, and stretched to the same
   380px column it would tower over the paragraph beside it. */
.showcase.narrow figure { max-width: 300px; margin-inline: auto; }
.showcase-copy h3 { margin: 0 0 12px; font-size: 1.25rem; letter-spacing: -.02em; }

/* What each switch does, beside the picture of them. A description list rather
   than a table: the pairs are a name and a sentence, and a table of two columns
   is a table only by accident. */
.switches { margin: 18px 0 14px; display: grid; gap: 4px 14px; }
.switches dt {
  color: var(--fg); font-weight: 600; font-size: .93rem; margin-top: 10px;
}
.switches dt:first-of-type { margin-top: 0; }
.switches dd { margin: 0; color: var(--dim); font-size: .9rem; }
@media (min-width: 720px) {
  .switches { grid-template-columns: minmax(140px, auto) minmax(0, 1fr); align-items: baseline; }
  .switches dt { margin-top: 0; }
  .switches dd { margin-bottom: 8px; }
}
.showcase-copy p { color: var(--dim); max-width: var(--measure); }

/* ----------------------------------------------------------------- tabs - */

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tab {
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--dim); font: inherit; font-size: .9rem;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.tab:hover { color: var(--fg); border-color: var(--dimmer); }
.tab[aria-selected="true"] {
  background: var(--accent); color: var(--accent-in);
  border-color: var(--accent); font-weight: 650;
}

/* ------------------------------------------------------------------ pre - */

pre {
  background: var(--code); border: 1px solid var(--line); border-radius: 10px;
  padding: 15px 18px; overflow-x: auto; margin: 10px 0 14px; font-size: .855rem;
  line-height: 1.75;
}
pre code { color: #cfe8d9; background: none; border: 0; padding: 0; font-size: inherit; }
pre .c { color: var(--dimmer); }

/* Copy button. The wrapper is added by site.js, so the button holds still
   while a long command scrolls underneath it. */
.codewrap { position: relative; }
.codewrap pre { padding-right: 104px; }
.copy {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--dim);
  font: inherit; font-size: .74rem; line-height: 1; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.copy:hover, .copy:focus-visible { color: var(--fg); border-color: var(--accent); }
.copy svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copy.ok { color: #86efac; border-color: #2f6f4f; }
.copy.err { color: #fca5a5; border-color: #7f3030; }
@media (max-width: 620px) {
  .codewrap pre { padding-right: 46px; }
  .copy { padding: 7px; gap: 0; }
  .copy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* -------------------------------------------------------------- callout - */

.callout {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 18px;
  padding: 16px 20px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.callout .ico { stroke: var(--accent); margin-top: 3px; }
.callout p { margin: 0; color: var(--dim); font-size: .92rem; max-width: var(--measure); }
.callout strong { color: var(--fg); }

/* ------------------------------------------------------------ downloads - */

.dl-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.dl {
  display: block; color: inherit; position: relative;
  transition: border-color .15s, background .15s, transform .12s;
}
.dl:hover {
  text-decoration: none; border-color: var(--accent);
  background: var(--panel-2); transform: translateY(-2px);
}
.dl h3 { margin: 12px 0 6px; }
.dl-badge {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  font-size: .7rem; font-weight: 800; letter-spacing: .07em;
}
.dl-badge.rpm  { background: #0e3a52; color: #7dd3fc; }
.dl-badge.deb  { background: #4a2f08; color: #fbbf24; }
.dl-badge.arch { background: #163b2f; color: #86efac; }
.dl-badge.src  { background: #2c2340; color: #c4b5fd; }
.dl-file {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; color: var(--dim) !important; word-break: break-all; margin: 0 0 8px !important;
}
.dl-meta { font-size: .82rem; color: var(--dimmer) !important; margin: 0 !important; }
.dl-meta .sep { margin: 0 8px; opacity: .5; }
.dl-sum {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7rem; color: var(--dimmer) !important; margin: 8px 0 0 !important;
  word-break: break-all; opacity: .8;
}
.dl-foot { color: var(--dim); font-size: .9rem; margin: 18px 0 0; }
.verify { margin-top: 24px; }

/* ----------------------------------------------------------- two column - */

.two-col {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: start;
}

/* --------------------------------------------------------------- tables - */

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th {
  color: var(--dimmer); font-weight: 650; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .06em;
}
td { color: var(--dim); }
td:first-child { color: var(--fg); white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------ configure - */

/* The shortcuts, as a strip of six rather than a six-row table. They used to
   share a two-column grid with the configuration file below, which meant a
   card that ends after 300px next to a table that runs past 1500 -- and the
   whole left half of the section empty for the difference. */
/* 340px, so six of them come out three-and-three on a wide screen rather than
   five with one stranded underneath, and two-by-three from tablet down. The
   `min()` keeps the track from outgrowing a narrow phone. */
.keycaps {
  display: grid; gap: 10px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.keycap {
  display: flex; flex-direction: column; gap: 7px;
  padding: 13px 15px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 11px; color: var(--dim); font-size: .88rem;
}
.keycap .keys { display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  color: var(--fg); font-weight: 600; font-size: .84rem; }

.conf-head { margin-bottom: 4px; }
.conf-head h3 { margin: 0 0 6px; }
.conf-head p { margin: 0 0 14px; color: var(--dim); font-size: .9rem; max-width: var(--measure); }

/* Twenty-four rows with `[section]` repeated down the first column is a list
   nobody reads twice. The file has eight sections, so the table has eight
   groups: the section name is a heading row and the keys under it are written
   the way they appear under it in the file. `[window]`, `[links]` and
   `[updates]` are a row or two each, so they share the last group and keep
   their prefixes -- a heading of its own for a single row is worse than the
   noise. */
.conf-table .grp th {
  padding: 20px 12px 7px;
  color: var(--accent); font-size: .8rem; letter-spacing: .04em;
  text-transform: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border-bottom: 1px solid var(--line);
}
.conf-table tbody:first-of-type .grp th { padding-top: 8px; }
.conf-table .grp th span { color: var(--dimmer); font-family: inherit;
  font-weight: 400; letter-spacing: 0; }
/* The last row of a group keeps its rule; only the very last row in the table
   loses one, and `tr:last-child` cannot say that across several tbodies. */
.conf-table tbody:last-of-type tr:last-child td { border-bottom: 0; }
.conf-table tbody tr:last-child td { border-bottom: 1px solid var(--line-soft); }
/* Proportions rather than nowrap: the key column stops stretching to fit the
   longest key and the sentence beside it gets the room to stay on one line. */
.conf-table .c-key { width: 27%; }
.conf-table .c-def { width: 13%; }
/* The CELL wraps -- two keys sharing a row break after the comma -- but a key
   itself never does. Without this, a narrow screen split `latin-inherit` across
   two lines and it stopped looking like something you could type. */
.conf-table td:first-child { white-space: normal; }
.conf-table td:first-child code, .conf-table td:nth-child(2) code { white-space: nowrap; }
.conf-table td:nth-child(2) { color: var(--dim); }

/* Below this there is no width for three columns: at 520px the key column and
   the sentence beside it were each about four words wide, and a `min-width`
   with a sideways scroll only moves the problem. So the row stops being a row.
   Key and default share a line, the sentence gets the next one and the whole
   card's width with it, and the header that labelled the columns goes away
   because each cell now says what it is. */
@media (max-width: 720px) {
  .conf-table, .conf-table tbody, .conf-table tr, .conf-table td { display: block; }
  .conf-table thead { display: none; }
  .conf-table .grp th { display: block; padding-inline: 0; }
  .conf-table tr:not(.grp) {
    padding: 11px 2px; border-bottom: 1px solid var(--line-soft);
  }
  .conf-table tbody tr:last-child td,
  .conf-table tbody:last-of-type tr:last-child td { border-bottom: 0; }
  .conf-table tr:not(.grp) td { padding: 0; border-bottom: 0; }
  .conf-table tr:not(.grp) td:first-child { font-weight: 600; }
  .conf-table tr:not(.grp) td:nth-child(2) {
    margin: 4px 0 6px; font-size: .82rem; color: var(--dimmer);
  }
  .conf-table tr:not(.grp) td:nth-child(2)::before {
    content: "default "; color: var(--dimmer);
  }
}

.fpr-line { margin: 22px 0 0; color: var(--dimmer); font-size: .85rem; }
.fpr { color: var(--accent) !important; background: none !important;
  border: 0 !important; padding: 0 !important; font-size: .82rem; }

/* --------------------------------------------------------------- footer - */

.site-foot { padding: clamp(44px, 5vw, 64px) var(--gutter) 40px; background: var(--bg-alt); }
.foot-grid {
  display: grid; gap: 32px;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(140px, 1fr));
  padding-bottom: 28px; border-bottom: 1px solid var(--line-soft);
}
.foot-brand { margin-bottom: 12px; }
.foot-note { color: var(--dimmer); font-size: .84rem; max-width: 52ch; margin: 0; }
.foot-grid nav { display: flex; flex-direction: column; gap: 8px; }
.foot-grid h4 {
  margin: 0 0 4px; color: var(--fg); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.foot-grid nav a { color: var(--dim); font-size: .9rem; }
.foot-grid nav a:hover { color: var(--accent); }
.foot-legal { margin: 20px 0 0; color: var(--dimmer); font-size: .82rem; }

/* -------------------------------------------------------------- narrow -- */

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .showcase, .showcase.flip { grid-template-columns: 1fr; }
  /* One column: the picture goes back above its words in every one of them,
     including the flipped ones, so the reading order is the source order. */
  .showcase.flip figure { order: 0; }
  .showcase figure { max-width: 380px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .topnav { display: none; }
  .topbar { gap: 12px; }
  .brand span { font-size: .95rem; }
  /* The name gives way rather than pushing the buttons off the bar. */
  .brand { min-width: 0; }
  .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* The brand and the GitHub link together already fill a narrow top bar; the
   version pill is repeated in the hero, so it is the one that goes. Measured
   against a browser forcing a font of its own, which is wider than any of this
   was drawn for -- see the copy button, which measures its own label. */
@media (max-width: 820px) {
  .topbar { gap: 10px; }
  .pill { display: none; }
}

@media (max-width: 460px) {
  .cta-row .btn { width: 100%; justify-content: center; }
  .foot-grid { grid-template-columns: 1fr; }
}