/* The site's type and colours, shared by every page on anchorword.app. */

/* The app's own fonts, served from beside this file as WOFF2 and cut down to
   the Latin and Greek the site writes in, a quarter of their size as TTF. */
@font-face { font-family: "Literata"; src: url("fonts/Literata_400Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/Literata_400Regular_Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/Literata_600SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans_400Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans_500Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans_600SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* The app's own palettes, generated from src/theme/tokens.ts (sitePages.test.ts
   holds every value to it). With no choice made, the page is Paper, the
   theme the app opens in, on the side the device asks for. A choice in the
   Themes section names a palette on <html>, and any element can wear one:
   the theme tiles do. */
:root { --p-bg: #fafafa; --p-surf: #ffffff; --p-fill: #eeeeee; --p-tint: #ffe4e0; --p-tintS: #fdc9c2; --p-rule: #dedede; --p-rule2: #e8e8e8; --p-ink: #161616; --p-ink2: #484848; --p-ink3: #5d5d5d; --p-ink4: #6c6c6c; --p-acc: #ba2b28; --p-accInk: #9e1618; --p-onAcc: #ffffff; --p-qrule: #ae625a; --p-trule: #888888; --p-qink: #303030; --p-accSoft: #f19f95; --p-mark: #d4d4d4; --kb-bg: #e8eaed; --kb-key: #ffffff; --kb-ink: #202124; --touch: rgba(0, 0, 0, .16); --bezel: #1d1a17; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-palette]) { --p-bg: #121212; --p-surf: #1b1b1b; --p-fill: #242424; --p-tint: #402623; --p-tintS: #59302c; --p-rule: #2e2e2e; --p-rule2: #292929; --p-ink: #e8e8e8; --p-ink2: #b4b4b4; --p-ink3: #959595; --p-ink4: #898989; --p-acc: #e8796e; --p-accInk: #f69c91; --p-onAcc: #0d0d0d; --p-qrule: #bb6e65; --p-trule: #7d7d7d; --p-qink: #d1d1d1; --p-accSoft: #a83630; --p-mark: #484848; --kb-bg: #1f1f1f; --kb-key: #3a3a3a; --kb-ink: #e8e8e8; --touch: rgba(255, 255, 255, .22); --bezel: #050505; color-scheme: dark; } }
[data-palette="parchment"] { --p-bg: #f5ede1; --p-surf: #fbf6ee; --p-fill: #efe7d9; --p-tint: #faded2; --p-tintS: #f1c6b4; --p-rule: #dcd3c4; --p-rule2: #e5ddd0; --p-ink: #241e1a; --p-ink2: #554e48; --p-ink3: #69625b; --p-ink4: #706b64; --p-acc: #a44c1d; --p-accInk: #863100; --p-onAcc: #fbf6ee; --p-qrule: #996f5d; --p-trule: #8d867e; --p-qink: #3a342f; --p-accSoft: #e8a587; --p-mark: #d4cdbf; --kb-bg: #e8eaed; --kb-key: #ffffff; --kb-ink: #202124; --touch: rgba(0, 0, 0, .16); --bezel: #1d1a17; color-scheme: light; }
[data-palette="night"] { --p-bg: #161310; --p-surf: #201c18; --p-fill: #2a2621; --p-tint: #41261a; --p-tintS: #573222; --p-rule: #34302b; --p-rule2: #2f2b26; --p-ink: #eae4da; --p-ink2: #b6b0a7; --p-ink3: #96918a; --p-ink4: #8b8780; --p-acc: #d9906f; --p-accInk: #efac8d; --p-onAcc: #15110d; --p-qrule: #a57b68; --p-trule: #807c75; --p-qink: #d3cdc4; --p-accSoft: #994f2b; --p-mark: #4b4742; --kb-bg: #1f1f1f; --kb-key: #3a3a3a; --kb-ink: #e8e8e8; --touch: rgba(255, 255, 255, .22); --bezel: #050505; color-scheme: dark; }
[data-palette="amoled"] { --p-bg: #000000; --p-surf: #0a0908; --p-fill: #181614; --p-tint: #381b0e; --p-tintS: #4c2817; --p-rule: #262421; --p-rule2: #1c1a18; --p-ink: #eeebe5; --p-ink2: #b1ada8; --p-ink3: #8f8c87; --p-ink4: #7e7b77; --p-acc: #e5946f; --p-accInk: #f6b294; --p-onAcc: #020202; --p-qrule: #a57b68; --p-trule: #777673; --p-qink: #d3cdc4; --p-accSoft: #994f2b; --p-mark: #494745; --kb-bg: #1f1f1f; --kb-key: #3a3a3a; --kb-ink: #e8e8e8; --touch: rgba(255, 255, 255, .22); --bezel: #050505; color-scheme: dark; }
[data-palette="paper"] { --p-bg: #fafafa; --p-surf: #ffffff; --p-fill: #eeeeee; --p-tint: #ffe4e0; --p-tintS: #fdc9c2; --p-rule: #dedede; --p-rule2: #e8e8e8; --p-ink: #161616; --p-ink2: #484848; --p-ink3: #5d5d5d; --p-ink4: #6c6c6c; --p-acc: #ba2b28; --p-accInk: #9e1618; --p-onAcc: #ffffff; --p-qrule: #ae625a; --p-trule: #888888; --p-qink: #303030; --p-accSoft: #f19f95; --p-mark: #d4d4d4; --kb-bg: #e8eaed; --kb-key: #ffffff; --kb-ink: #202124; --touch: rgba(0, 0, 0, .16); --bezel: #1d1a17; color-scheme: light; }
[data-palette="paperDark"] { --p-bg: #121212; --p-surf: #1b1b1b; --p-fill: #242424; --p-tint: #402623; --p-tintS: #59302c; --p-rule: #2e2e2e; --p-rule2: #292929; --p-ink: #e8e8e8; --p-ink2: #b4b4b4; --p-ink3: #959595; --p-ink4: #898989; --p-acc: #e8796e; --p-accInk: #f69c91; --p-onAcc: #0d0d0d; --p-qrule: #bb6e65; --p-trule: #7d7d7d; --p-qink: #d1d1d1; --p-accSoft: #a83630; --p-mark: #484848; --kb-bg: #1f1f1f; --kb-key: #3a3a3a; --kb-ink: #e8e8e8; --touch: rgba(255, 255, 255, .22); --bezel: #050505; color-scheme: dark; }
[data-palette="paperBlack"] { --p-bg: #000000; --p-surf: #090909; --p-fill: #161616; --p-tint: #371b18; --p-tintS: #4d2622; --p-rule: #242424; --p-rule2: #1b1b1b; --p-ink: #ebebeb; --p-ink2: #aeaeae; --p-ink3: #8c8c8c; --p-ink4: #7c7c7c; --p-acc: #f47c70; --p-accInk: #fda297; --p-onAcc: #020202; --p-qrule: #bb6e65; --p-trule: #767676; --p-qink: #d1d1d1; --p-accSoft: #a83630; --p-mark: #484848; --kb-bg: #1f1f1f; --kb-key: #3a3a3a; --kb-ink: #e8e8e8; --touch: rgba(255, 255, 255, .22); --bezel: #050505; color-scheme: dark; }
[data-palette="slate"] { --p-bg: #ecf1f5; --p-surf: #f8fafd; --p-fill: #e3e8ee; --p-tint: #fbe0e2; --p-tintS: #f3c7cb; --p-rule: #ced5dc; --p-rule2: #d9dfe5; --p-ink: #171d26; --p-ink2: #454e58; --p-ink3: #5d646c; --p-ink4: #666d74; --p-acc: #a02d47; --p-accInk: #881f38; --p-onAcc: #f8fafd; --p-qrule: #a25d66; --p-trule: #82878e; --p-qink: #2f363f; --p-accSoft: #eba0a8; --p-mark: #cbd0d6; --kb-bg: #e8eaed; --kb-key: #ffffff; --kb-ink: #202124; --touch: rgba(0, 0, 0, .16); --bezel: #1d1a17; color-scheme: light; }
[data-palette="slateDark"] { --p-bg: #131921; --p-surf: #1b222b; --p-fill: #252c35; --p-tint: #44272a; --p-tintS: #5b3237; --p-rule: #2f3640; --p-rule2: #2a313a; --p-ink: #dce2e8; --p-ink2: #afb5bc; --p-ink3: #9299a1; --p-ink4: #878e96; --p-acc: #de7d8a; --p-accInk: #eea3ab; --p-onAcc: #0d1218; --p-qrule: #b17279; --p-trule: #787e85; --p-qink: #c8ced5; --p-accSoft: #9b4251; --p-mark: #434b55; --kb-bg: #1f1f1f; --kb-key: #3a3a3a; --kb-ink: #e8e8e8; --touch: rgba(255, 255, 255, .22); --bezel: #050505; color-scheme: dark; }
[data-palette="slateBlack"] { --p-bg: #000000; --p-surf: #07090d; --p-fill: #13161b; --p-tint: #38191d; --p-tintS: #4d252b; --p-rule: #212429; --p-rule2: #181b1f; --p-ink: #e9ebee; --p-ink2: #abaeb2; --p-ink3: #898c90; --p-ink4: #797c80; --p-acc: #ea808f; --p-accInk: #f5a9b1; --p-onAcc: #020202; --p-qrule: #b17279; --p-trule: #757677; --p-qink: #c8ced5; --p-accSoft: #9b4251; --p-mark: #474b50; --kb-bg: #1f1f1f; --kb-key: #3a3a3a; --kb-ink: #e8e8e8; --touch: rgba(255, 255, 255, .22); --bezel: #050505; color-scheme: dark; }
[data-palette="sage"] { --p-bg: #e8f2e5; --p-surf: #f4faf3; --p-fill: #dfeadc; --p-tint: #fee0d8; --p-tintS: #f6c8bc; --p-rule: #ccd8ca; --p-rule2: #d7e2d4; --p-ink: #19221a; --p-ink2: #455146; --p-ink3: #5c665c; --p-ink4: #666f65; --p-acc: #a33e25; --p-accInk: #8c280d; --p-onAcc: #f4faf3; --p-qrule: #a16657; --p-trule: #818a80; --p-qink: #2e3830; --p-accSoft: #eba390; --p-mark: #c6d2c4; --kb-bg: #e8eaed; --kb-key: #ffffff; --kb-ink: #202124; --touch: rgba(0, 0, 0, .16); --bezel: #1d1a17; color-scheme: light; }
[data-palette="sageDark"] { --p-bg: #131a14; --p-surf: #1c241d; --p-fill: #252e27; --p-tint: #442821; --p-tintS: #5b342a; --p-rule: #2f3831; --p-rule2: #2a332c; --p-ink: #dde3dc; --p-ink2: #b0b7ae; --p-ink3: #939b92; --p-ink4: #899087; --p-acc: #e08b75; --p-accInk: #f2a997; --p-onAcc: #0d140e; --p-qrule: #b17565; --p-trule: #787f78; --p-qink: #c9d0c7; --p-accSoft: #9b4c38; --p-mark: #414b43; --kb-bg: #1f1f1f; --kb-key: #3a3a3a; --kb-ink: #e8e8e8; --touch: rgba(255, 255, 255, .22); --bezel: #050505; color-scheme: dark; }
[data-palette="sageBlack"] { --p-bg: #000000; --p-surf: #070a07; --p-fill: #131714; --p-tint: #381a13; --p-tintS: #4d271d; --p-rule: #212522; --p-rule2: #181c18; --p-ink: #e9ece8; --p-ink2: #acafab; --p-ink3: #8a8d89; --p-ink4: #797d78; --p-acc: #ec8e76; --p-accInk: #f8b09d; --p-onAcc: #020202; --p-qrule: #b17565; --p-trule: #757674; --p-qink: #c9d0c7; --p-accSoft: #9b4c38; --p-mark: #444945; --kb-bg: #1f1f1f; --kb-key: #3a3a3a; --kb-ink: #e8e8e8; --touch: rgba(255, 255, 255, .22); --bezel: #050505; color-scheme: dark; }
[data-palette="dusk"] { --p-bg: #efedf8; --p-surf: #f8f7fd; --p-fill: #e7e4f1; --p-tint: #fbe0e5; --p-tintS: #f2c7d0; --p-rule: #d5d2e0; --p-rule2: #dedce9; --p-ink: #1f1e29; --p-ink2: #4d4b5a; --p-ink3: #63616f; --p-ink4: #6b6a77; --p-acc: #a13155; --p-accInk: #861f43; --p-onAcc: #f8f7fd; --p-qrule: #a15d6d; --p-trule: #878691; --p-qink: #353440; --p-accSoft: #e99fb0; --p-mark: #ceccd9; --kb-bg: #e8eaed; --kb-key: #ffffff; --kb-ink: #202124; --touch: rgba(0, 0, 0, .16); --bezel: #1d1a17; color-scheme: light; }
[data-palette="duskDark"] { --p-bg: #151422; --p-surf: #1e1d2d; --p-fill: #272737; --p-tint: #44262d; --p-tintS: #5a323b; --p-rule: #313142; --p-rule2: #2c2c3c; --p-ink: #e1e0ea; --p-ink2: #b4b3be; --p-ink3: #9896a4; --p-ink4: #8d8c99; --p-acc: #df879b; --p-accInk: #eba9b7; --p-onAcc: #10101c; --p-qrule: #b07280; --p-trule: #7b7a86; --p-qink: #cdccd8; --p-accSoft: #9d445d; --p-mark: #48485a; --kb-bg: #1f1f1f; --kb-key: #3a3a3a; --kb-ink: #e8e8e8; --touch: rgba(255, 255, 255, .22); --bezel: #050505; color-scheme: dark; }
[data-palette="duskBlack"] { --p-bg: #000000; --p-surf: #08080f; --p-fill: #15151d; --p-tint: #381921; --p-tintS: #4c252f; --p-rule: #23232b; --p-rule2: #1a1a21; --p-ink: #ebeaef; --p-ink2: #aeadb3; --p-ink3: #8c8b92; --p-ink4: #7b7b81; --p-acc: #ea89a1; --p-accInk: #f2afbd; --p-onAcc: #020202; --p-qrule: #b07280; --p-trule: #767578; --p-qink: #cdccd8; --p-accSoft: #9d445d; --p-mark: #494952; --kb-bg: #1f1f1f; --kb-key: #3a3a3a; --kb-ink: #e8e8e8; --touch: rgba(255, 255, 255, .22); --bezel: #050505; color-scheme: dark; }
[data-palette="contrast"] { --p-bg: #ffffff; --p-surf: #ffffff; --p-fill: #ebebeb; --p-tint: #ffe4e0; --p-tintS: #fdc9c2; --p-rule: #555555; --p-rule2: #717171; --p-ink: #000000; --p-ink2: #161616; --p-ink3: #2e2e2e; --p-ink4: #3a3a3a; --p-acc: #a91515; --p-accInk: #8a0509; --p-onAcc: #ffffff; --p-qrule: #a91515; --p-trule: #808080; --p-qink: #060606; --p-accSoft: #f8a59a; --p-mark: #c7c7c7; --kb-bg: #e8eaed; --kb-key: #ffffff; --kb-ink: #202124; --touch: rgba(0, 0, 0, .16); --bezel: #1d1a17; color-scheme: light; }
[data-palette="contrastDark"] { --p-bg: #000000; --p-surf: #030303; --p-fill: #161616; --p-tint: #421c19; --p-tintS: #572825; --p-rule: #9e9e9e; --p-rule2: #717171; --p-ink: #ffffff; --p-ink2: #dedede; --p-ink3: #c4c4c4; --p-ink4: #b7b7b7; --p-acc: #f7857d; --p-accInk: #ffaba3; --p-onAcc: #000000; --p-qrule: #f7857d; --p-trule: #808080; --p-qink: #eeeeee; --p-accSoft: #b02a2d; --p-mark: #505050; --kb-bg: #1f1f1f; --kb-key: #3a3a3a; --kb-ink: #e8e8e8; --touch: rgba(255, 255, 255, .22); --bezel: #050505; color-scheme: dark; }
:root {
  --bg: var(--p-bg); --surf: var(--p-surf); --fill: var(--p-fill); --tint: var(--p-tint);
  --rule: var(--p-rule); --rule2: var(--p-rule2);
  --ink: var(--p-ink); --ink2: var(--p-ink2); --ink3: var(--p-ink3);
  --acc: var(--p-acc); --accInk: var(--p-accInk); --onAcc: var(--p-onAcc);
  --p-sel: color-mix(in srgb, var(--p-accSoft) 55%, transparent);
  --serif: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* The frame every page wears, so a reader who follows a link from the front
   page to the policy never feels they have left: the type and space scales,
   the paper, the header, the buttons, the opening and the footer. A page's
   own <style> adds what only it has. */
* { box-sizing: border-box; }

/* One scale for the site's type and space, fluid from a 360-pixel window
   to a 1440 one, so nothing jumps at a breakpoint and every size is one of a
   few. Each step's ends are the sizes the page had at those two widths.
   They are written in rem, sixteenths of the reader's own text size, so a
   reader who asks their browser for larger text gets it; at the usual
   setting a rem is 16 pixels and the page is as it was drawn. The page
   changes shape at 56.25em, 900 pixels at that setting, so with larger text
   it takes the narrow layout sooner rather than squeezing it.

   Type: -2 meta, -1 small print, 0 interface, 1 body, 2 lede, 3 display
   pills and the aside's heading, 4 chapter headings, 5 the headline.

   Space between the parts of a layout is fluid too: xs is the air inside
   a group, s is the gutter and the air inside the hero's larger group, m
   sets groups apart, l separates columns, xl separates sections. Space inside a component (a button, a chip, a card)
   is not: it is about a finger, not the window, so it keeps to the app's own
   four-point steps (src/theme/tokens.ts, SPACE).

   The phones are none of this: they are drawn at the app's own sizes.

   Space between siblings is a gap on the box that holds them, never a margin
   on one of them, so a part can move or be hidden without taking its space
   with it or leaving it behind. Parts that sit closer than the box's gap are
   grouped in a box of their own. Prose, as on the privacy page, keeps its
   margins: there the space depends on what comes before. */
:root {
  --t-n2: clamp(0.78125rem, 0.7708rem + 0.0463vw, 0.8125rem);
  --t-n1: clamp(0.84375rem, 0.8229rem + 0.0926vw, 0.90625rem);
  --t-0: clamp(0.9375rem, 0.9167rem + 0.0926vw, 1rem);
  --t-1: clamp(1.03125rem, 1rem + 0.1389vw, 1.125rem);
  --t-2: clamp(1.125rem, 1.0833rem + 0.1852vw, 1.25rem);
  --t-3: clamp(1.5rem, 1.375rem + 0.5556vw, 1.875rem);
  --t-4: clamp(2rem, 1.7083rem + 1.2963vw, 2.875rem);
  --t-5: clamp(2.5rem, 2.0417rem + 2.037vw, 3.875rem);
  --space-xs: clamp(0.75rem, 0.5833rem + 0.7407vw, 1.25rem);
  --space-s: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);
  --space-m: clamp(1.5rem, 1.1667rem + 1.4815vw, 2.5rem);
  --space-l: clamp(2.5rem, 1.8333rem + 2.963vw, 4.5rem);
  --space-xl: clamp(4rem, 3.1667rem + 3.7037vw, 6.5rem);

  /* Motion: one curve and one pace for every entrance and hover on the
     page, chosen by Oscar on 8 October 2026 (ease-out cubic, "Relaxed").
     The pace scales every duration; the script reads both from here. */
  --ease: cubic-bezier(.33, 1, .68, 1);
  --pace: 1.35;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-1)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Paper and lamplight, chosen by Oscar on 8 October 2026. Over everything
   on the page, a fine grain of light and dark specks that moves like a
   film print, so the page reads as paper in every theme; and behind it, on
   a computer, a soft warm glow that follows the pointer like a reading lamp
   (frame.js moves it). The grain jumps to a new place eight
   times a second; its layer is a tile larger than the window on every side,
   so no jump shows an edge. Reduced motion holds it still. */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before { inset: -160px; z-index: 1000; background: url("grain.png"); opacity: .03; animation: grain 1s steps(1) infinite; }
@keyframes grain {
  0% { transform: translate(0, 0); }
  12.5% { transform: translate(-61px, 23px); }
  25% { transform: translate(37px, -71px); }
  37.5% { transform: translate(-19px, -43px); }
  50% { transform: translate(73px, 31px); }
  62.5% { transform: translate(-79px, -11px); }
  75% { transform: translate(13px, 67px); }
  87.5% { transform: translate(47px, -29px); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
body::after { background: radial-gradient(480px circle at var(--lamp-x, 50%) var(--lamp-y, 30%), color-mix(in srgb, var(--acc) 9%, transparent), color-mix(in srgb, var(--acc) 3%, transparent) 45%, transparent 70%); opacity: 0; transition: opacity calc(600ms * var(--pace)) var(--ease); }
body.lamp::after { opacity: 1; }
a { color: var(--accInk); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accInk); outline-offset: 3px; border-radius: 6px; }

.wrap { max-inline-size: 1120px; margin: 0 auto; padding: 0 var(--space-s); }

/* A way past the header for a keyboard: the first thing Tab reaches, out of
   sight until it does, then a button over the header's top corner. */
.skip { position: absolute; z-index: 1001; inset-block-start: 8px; inset-inline-start: 8px; translate: 0 calc(-100% - 16px); }
.skip:focus-visible { translate: none; }
main { scroll-margin-block-start: 72px; }

/* Header */
.top { position: sticky; inset-block-start: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block-end: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-block-end-color: var(--rule); }
.top .wrap { display: flex; align-items: center; gap: 28px; min-block-size: 64px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 600 var(--t-2)/1 var(--serif); letter-spacing: -.01em; }
.brand svg { width: 30px; height: 30px; color: var(--accInk); }

.top .btn { margin-inline-start: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 48px; padding: 0 24px; border-radius: 24px;
  background: var(--acc); color: var(--onAcc);
  font: 600 16px/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: transform calc(180ms * var(--pace)) var(--ease), box-shadow calc(240ms * var(--pace)) var(--ease), filter .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.96); }
@media (hover: hover) {
  .btn:not(.ghost):hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px var(--acc); }
  .btn:not(.ghost):active { transform: scale(.96); }
  .btn.ghost { position: relative; }
  .btn.ghost::after { content: ""; position: absolute; inset-inline-start: 24px; inset-inline-end: 24px; inset-block-end: 12px; height: 1.5px; border-radius: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform calc(350ms * var(--pace)) var(--ease); }
  .btn.sm.ghost::after { inset-inline-start: 16px; inset-inline-end: 16px; inset-block-end: 9px; }
  .btn.ghost:hover::after { transform: scaleX(1); }
}
.btn.sm { min-block-size: 40px; padding: 0 16px; font-size: 15px; }
.btn.ghost { background: transparent; color: var(--accInk); box-shadow: inset 0 0 0 1px var(--rule); }
.btn svg { width: 18px; height: 18px; }

.eyebrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.eyebrow li { font: 600 13.5px/1 var(--sans); letter-spacing: .04em; color: var(--ink2); background: var(--fill); padding: 8px 12px; border-radius: 16px; }
h1 { font: 400 var(--t-5)/1.06 var(--serif); letter-spacing: -.025em; margin: 0; text-wrap: balance; }
h1 em { font-style: italic; color: var(--accInk); }
.lede { font-size: var(--t-2); line-height: 1.55; color: var(--ink2); margin: 0; max-inline-size: 34em; }

footer.site { border-block-start: 1px solid var(--rule); padding: var(--space-m) 0 max(var(--space-m), env(safe-area-inset-bottom)); font-size: var(--t-n1); color: var(--ink3); }
footer.site .wrap { display: grid; gap: 8px; }
footer.site p { margin: 0; max-inline-size: 60em; }