/* VCodeX Tech: the site's one stylesheet. It follows the approved preview,
   design/direction/direction.css, value for value; docs/DESIGN.md lists where site/ differs.
   Two surfaces: Night is Lighter's world, Paper is the studio's.
   Two families: Archivo for display and interface, VCX Serif for prose. */

/* ---- Fonts ---- */

/* Subset WOFF2, cut by design/tools/cut_fonts.py to the axes in use and printable Latin. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 460 760;
  font-stretch: 100% 118%;
  font-display: swap;
}
/* Source Serif 4, renamed: its copyright reserves the name "Source" for the original (OFL 1.1). */
@font-face {
  font-family: "VCX Serif";
  src: url("../fonts/vcx-serif.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* While those load, a system face takes the same room, so nothing moves when they arrive
   (design/tools/metrics.swift). */
@font-face {
  font-family: "Archivo fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 100.44%;
  ascent-override: 87.42%;
  descent-override: 20.91%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "VCX Serif fallback";
  src: local("Georgia");
  size-adjust: 101.55%;
  ascent-override: 102.02%;
  descent-override: 32.99%;
  line-gap-override: 0%;
}

/* ---- Tokens ---- */

:root {
  /* The palette: nine colours, each named after itself. Wash isn't used at launch. */
  --paper: #FBFBF9;
  --ink: #131B24;
  --mid: #596673;
  --rule: #E2E6E5;
  --wash: #F2F4F3;
  --signal: #0B5FA5;
  --night: #0D1522;
  --linen: #F2EADC;
  --sage: #A6C2A5;

  /* Mixed from the palette in oklab, never new hues (docs/DESIGN.md, section 4). The mixes that
     are written as color-mix() below start as their hex, for browsers without it. */
  --night-2: #AAA8A3;        /* Linen 72% into Night, the Night secondary: 7.7:1 on Night */
  --signal-hover: #135189;   /* Signal 80% into Ink: 7.9:1 on Paper */
  --sage-hover: #BDCEB5;     /* Sage 70% into Linen: 11.0:1 on Night, and Night on it */
  --sage-press: #95AF97;     /* Sage 90% into Night: Night on it, 7.7:1 */
  --layer-1: #F6F6F4;        /* Ink 2, 4, 6 and 8% into Paper: the stack's layers */
  --layer-2: #F0F1EF;
  --layer-3: #EBECEB;
  --layer-4: #E6E7E6;
  --edge: rgba(242, 234, 220, 0.14);   /* Linen at 14%, the Night hairline: #2D333C on Night */

  --sans: "Archivo", "Archivo fallback", system-ui, -apple-system, sans-serif;
  --serif: "VCX Serif", "VCX Serif fallback", "Iowan Old Style", Georgia, serif;

  /* The type scale (docs/DESIGN.md, section 3). The two headline sizes step with the width, in
     the media queries after this block: 1.2rem + 5.2vw and 1.5rem + 2.5vw, in even pixels.
     design/tools/steps.py writes those steps and the two values here. */
  --size-display: 2.75rem;                                         /* headlines, 44 to 92 px */
  --size-title: 2.25rem;                                           /* text pages, 36 to 52 px */
  --size-night-heading: clamp(1.875rem, 1.2rem + 2vw, 2.875rem);   /* 30 to 46 px */
  --size-paper-heading: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);  /* 26 to 36 px */
  --size-stack-heading: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);  /* 22 to 28 px */
  --size-lead: clamp(1.1875rem, 1rem + 0.5vw, 1.375rem);           /* 19 to 22 px */
  --size-wordmark: 1.375rem;   /* 22 px */
  --size-heading: 1.25rem;     /* 20 px: the points, Questions, the notice */
  --size-body: 1.1875rem;      /* 19 px */
  --size-footer-mark: 1.125rem;   /* 18 px */
  --size-detail: 1.0625rem;    /* 17 px: the facts, the points' text, the layers' names */
  --size-ui: 1rem;             /* 16 px: the nav, the button, the links */
  --size-small: 0.9375rem;     /* 15 px: the status line, the layers' lines and names, the footer */

  --radius-layer: 0.875rem;
  --radius-button: 0.625rem;
  --radius-name: 0.5rem;

  --page: 76rem;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --band: clamp(4.5rem, 3rem + 5vw, 8rem);
}

@supports (color: color-mix(in oklab, red, red)) {
  :root {
    --sage-press: color-mix(in oklab, var(--sage) 90%, var(--night));
    --layer-1: color-mix(in oklab, var(--ink) 2%, var(--paper));
    --layer-2: color-mix(in oklab, var(--ink) 4%, var(--paper));
    --layer-3: color-mix(in oklab, var(--ink) 6%, var(--paper));
    --layer-4: color-mix(in oklab, var(--ink) 8%, var(--paper));
  }
}

/* The headlines step in rem. Safari's page zoom works out vw and cqi in a font-size from the
   unzoomed window: at 200%, a fluid headline is sized for a window twice as wide as its page, and
   runs off it. Media queries see the zoomed width, so each step starts where the fluid size reaches
   an even pixel, and holds it until the next: never larger than the fluid size, and never more than
   about 2 px smaller. The section headings and the lead stay fluid, because they wrap. */
/* steps.py: the headline sizes. Generated by design/tools/steps.py: edit it, not these lines. */
@media (min-width: 32.25rem) { :root { --size-display: 2.875rem; } }     /* 46 px from 516 px */
@media (min-width: 34.625rem) { :root { --size-display: 3rem; } }        /* 48 px from 554 px */
@media (min-width: 37.0625rem) { :root { --size-display: 3.125rem; } }   /* 50 px from 593 px */
@media (min-width: 39.4375rem) { :root { --size-display: 3.25rem; } }    /* 52 px from 631 px */
@media (min-width: 41.875rem) { :root { --size-display: 3.375rem; } }    /* 54 px from 670 px */
@media (min-width: 44.25rem) { :root { --size-display: 3.5rem; } }       /* 56 px from 708 px */
@media (min-width: 46.6875rem) { :root { --size-display: 3.625rem; } }   /* 58 px from 747 px */
@media (min-width: 49.0625rem) { :root { --size-display: 3.75rem; } }    /* 60 px from 785 px */
@media (min-width: 51.5rem) { :root { --size-display: 3.875rem; } }      /* 62 px from 824 px */
@media (min-width: 53.875rem) { :root { --size-display: 4rem; } }        /* 64 px from 862 px */
@media (min-width: 56.25rem) { :root { --size-display: 4.125rem; } }     /* 66 px from 900 px */
@media (min-width: 58.6875rem) { :root { --size-display: 4.25rem; } }    /* 68 px from 939 px */
@media (min-width: 61.0625rem) { :root { --size-display: 4.375rem; } }   /* 70 px from 977 px */
@media (min-width: 63.5rem) { :root { --size-display: 4.5rem; } }        /* 72 px from 1016 px */
@media (min-width: 65.875rem) { :root { --size-display: 4.625rem; } }    /* 74 px from 1054 px */
@media (min-width: 68.3125rem) { :root { --size-display: 4.75rem; } }    /* 76 px from 1093 px */
@media (min-width: 70.6875rem) { :root { --size-display: 4.875rem; } }   /* 78 px from 1131 px */
@media (min-width: 73.125rem) { :root { --size-display: 5rem; } }        /* 80 px from 1170 px */
@media (min-width: 75.5rem) { :root { --size-display: 5.125rem; } }      /* 82 px from 1208 px */
@media (min-width: 77.9375rem) { :root { --size-display: 5.25rem; } }    /* 84 px from 1247 px */
@media (min-width: 80.3125rem) { :root { --size-display: 5.375rem; } }   /* 86 px from 1285 px */
@media (min-width: 82.75rem) { :root { --size-display: 5.5rem; } }       /* 88 px from 1324 px */
@media (min-width: 85.125rem) { :root { --size-display: 5.625rem; } }    /* 90 px from 1362 px */
@media (min-width: 87.5rem) { :root { --size-display: 5.75rem; } }       /* 92 px from 1400 px */

@media (min-width: 35rem) { :root { --size-title: 2.375rem; } }   /* 38 px from 560 px */
@media (min-width: 40rem) { :root { --size-title: 2.5rem; } }     /* 40 px from 640 px */
@media (min-width: 45rem) { :root { --size-title: 2.625rem; } }   /* 42 px from 720 px */
@media (min-width: 50rem) { :root { --size-title: 2.75rem; } }    /* 44 px from 800 px */
@media (min-width: 55rem) { :root { --size-title: 2.875rem; } }   /* 46 px from 880 px */
@media (min-width: 60rem) { :root { --size-title: 3rem; } }       /* 48 px from 960 px */
@media (min-width: 65rem) { :root { --size-title: 3.125rem; } }   /* 50 px from 1040 px */
@media (min-width: 70rem) { :root { --size-title: 3.25rem; } }    /* 52 px from 1120 px */
/* steps.py: end */

/* ---- Base ---- */

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

html { -webkit-text-size-adjust: 100%; }

/* The page is at least the screen's height, and main takes any room left over, so a short page's
   footer sits at the foot of the screen, not mid-page (the 404). */
body {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--size-body);
  line-height: 1.6;
  font-optical-sizing: auto;
}
main { flex: 1 0 auto; }
/* Below 280 px, narrower than any phone, a string too long for its line, such as the address,
   breaks instead of pushing the page sideways. Wider, nothing needs it, and it would leave a full
   stop alone on a line of the privacy notice at 280 to 285 px. Unlike anywhere, break-word leaves
   every box's width as it was. */
@media (max-width: 17.4375rem) {
  body { overflow-wrap: break-word; }
}

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

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
/* iOS draws its own box over a tapped link; the links' own states answer the tap instead. */
a { -webkit-tap-highlight-color: transparent; }
a:hover { text-decoration-thickness: 2px; }

/* Focus: a 2 px ring, 3 px out, with 3 px corners; Signal on Paper, Sage on Night. It comes
   before the components, so the button and the skip link keep their own corners. */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 3px; }
.night :focus-visible { outline-color: var(--sage); }

.skip {
  position: absolute; left: var(--gutter); top: -4rem;
  padding: 0.75rem 1rem; background: var(--linen); color: var(--night);
  font: 600 var(--size-ui)/1 var(--sans); border-radius: var(--radius-name); z-index: 10;
}
.skip:focus { top: 1rem; }
.skip:focus-visible { outline-color: var(--sage); }   /* it shows over the Night header */
.paper-page .skip:focus-visible { outline-color: var(--signal); }   /* and over the text pages' Paper header */

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
/* A compound word never breaks at its hyphen ("one-time", not "one- / time"). */
.nowrap { white-space: nowrap; }

/* ---- Night: Lighter's world ---- */

.night { background: var(--night); color: var(--linen); }
.paper { background: var(--paper); color: var(--ink); }

.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.5rem;
}
.wordmark {
  font-family: var(--sans); font-weight: 700; font-stretch: 112.5%;
  font-size: var(--size-wordmark); letter-spacing: -0.01em; line-height: 1;
  text-decoration: none; padding-block: 0.5rem; white-space: nowrap;
}
.site-nav { display: flex; gap: 1.75rem; }
.site-nav a {
  font: 540 var(--size-ui)/1 var(--sans); text-decoration: none; color: var(--night-2);
  padding-block: 0.75rem;
}
.site-nav a:hover { color: var(--linen); }
.site-nav a[aria-current="page"] { color: var(--linen); }
/* The studio's text pages, the privacy notice and the 404, have a Paper header, in Ink with Signal
   on hover, as the footer has it: Night means Lighter, and Safari on iOS 26 fills the strip behind
   its status bar with the page's one canvas colour, which on these pages is Paper. */
.paper .site-nav a { color: var(--ink); }
.paper .site-nav a:hover { color: var(--signal); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 7rem);
  padding-block: clamp(2.5rem, 1rem + 5vw, 6rem) var(--band);
}
.hero h1 {
  --h1: var(--size-display);
  margin: 0 0 1.75rem;
  font-family: var(--sans); font-weight: 760; font-stretch: 118%;
  font-size: var(--h1);
  line-height: 0.94; letter-spacing: -0.03em;
  text-wrap: balance;
}
/* The home headline sets in two lines, "The studio / behind Lighter.", with the second joined by
   a no-break space. That phrase is 8 em wide, so where its column is narrow, in two columns and on
   phones under 403 px, the headline is 12.25% of the column, the phrase filling 98% of it, in the
   same even-pixel steps as the display size. In one column from 403 px, the display size fits. */
/* steps.py: the home headline. Generated by design/tools/steps.py: edit it, not these lines. */
.hero h1.fit { --h1: 3.125rem; }                                            /* two columns: 50 px from 833 px */
@media (min-width: 53.0625rem) { .hero h1.fit { --h1: 3.25rem; } }          /* 52 px from 849 px */
@media (min-width: 55.0625rem) { .hero h1.fit { --h1: 3.375rem; } }         /* 54 px from 881 px */
@media (min-width: 57.0625rem) { .hero h1.fit { --h1: 3.5rem; } }           /* 56 px from 913 px */
@media (min-width: 59.0625rem) { .hero h1.fit { --h1: 3.625rem; } }         /* 58 px from 945 px */
@media (min-width: 61rem) { .hero h1.fit { --h1: 3.75rem; } }               /* 60 px from 976 px */
@media (min-width: 63rem) { .hero h1.fit { --h1: 3.875rem; } }              /* 62 px from 1008 px */
@media (min-width: 65rem) { .hero h1.fit { --h1: 4rem; } }                  /* 64 px from 1040 px */
@media (min-width: 67rem) { .hero h1.fit { --h1: 4.125rem; } }              /* 66 px from 1072 px */
@media (min-width: 69rem) { .hero h1.fit { --h1: 4.25rem; } }               /* 68 px from 1104 px */
@media (min-width: 70.9375rem) { .hero h1.fit { --h1: 4.375rem; } }         /* 70 px from 1135 px */
@media (min-width: 72.9375rem) { .hero h1.fit { --h1: 4.5rem; } }           /* 72 px from 1167 px */
@media (min-width: 74.9375rem) { .hero h1.fit { --h1: 4.625rem; } }         /* 74 px from 1199 px */
@media (min-width: 87.9375rem) { .hero h1.fit { --h1: 4.5rem; } }           /* 72 px from 1407 px, as the column narrows */
@media (max-width: 52rem) { .hero h1.fit { --h1: var(--size-display); } }   /* one column */
@media (max-width: 25.1875rem) { .hero h1.fit { --h1: 2.625rem; } }         /* 42 px up to 403 px */
@media (max-width: 24.125rem) { .hero h1.fit { --h1: 2.5rem; } }            /* 40 px up to 386 px */
@media (max-width: 23rem) { .hero h1.fit { --h1: 2.375rem; } }              /* 38 px up to 368 px */
@media (max-width: 21.9375rem) { .hero h1.fit { --h1: 2.25rem; } }          /* 36 px up to 351 px */
@media (max-width: 20.875rem) { .hero h1.fit { --h1: 2.125rem; } }          /* 34 px up to 334 px */
@media (max-width: 19.875rem) { .hero h1.fit { --h1: 2rem; } }              /* 32 px up to 318 px */
@media (max-width: 18.875rem) { .hero h1.fit { --h1: 1.875rem; } }          /* 30 px up to 302 px */
@media (max-width: 17.8125rem) { .hero h1.fit { --h1: 1.75rem; } }          /* 28 px up to 285 px */
@media (max-width: 16.8125rem) { .hero h1.fit { --h1: 1.625rem; } }         /* 26 px up to 269 px */
@media (max-width: 15.8125rem) { .hero h1.fit { --h1: 1.5rem; } }           /* 24 px up to 253 px, fitting to 236 px */
/* steps.py: end */
.lead {
  margin: 0 0 2.25rem; max-width: 30em;
  font-size: var(--size-lead); line-height: 1.55;
  color: var(--night-2);
  text-wrap: pretty;
}
.button {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.375rem;
  border-radius: var(--radius-button); background: var(--sage); color: var(--night);
  font: 620 var(--size-ui)/1 var(--sans); text-decoration: none;
}
.button:hover { background: var(--sage-hover); }
.button:active { background: var(--sage-press); }
/* A held tap on iOS lifts a link for its preview menu, and on the button that hides the label
   behind a Night block. So the button goes without the menu; the text link "About Lighter" and the
   header's links keep it. */
.button { -webkit-touch-callout: none; }
.status { margin: 1rem 0 0; font: 500 var(--size-small)/1.4 var(--sans); color: var(--night-2); }

/* A real screen, recorded or captured, at the phone's own shape: no drawn hardware. */
.screen img, .screen video {
  border-radius: 13.6% / 6.26%;
  box-shadow: 0 0 0 1px var(--edge);
}
.hero .screen { justify-self: center; width: min(100%, 22rem); }
/* Safari draws a play button over a video it won't start on its own (Low Power Mode, for one).
   There are no controls to offer, so the still stays a still. One rule each: a browser that
   doesn't know a pseudo-element drops its whole rule. */
.screen video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.screen video::-webkit-media-controls { display: none !important; }
/* The site's one shadow, under the home hero's recording. */
.hero .screen video { box-shadow: 0 0 0 1px var(--edge), 0 3rem 6rem -1.5rem rgba(0, 0, 0, 0.7); }

.evening { padding-bottom: var(--band); }
.evening h2 {
  margin: 0 0 1.25rem; max-width: 18em;
  font-family: var(--sans); font-weight: 680; font-stretch: 106%;
  font-size: var(--size-night-heading); line-height: 1.1; letter-spacing: -0.02em;
  text-wrap: balance;
}
.evening .lead { margin-bottom: 2.75rem; }

/* What Lighter is, in A5's own lines: three across, each with a sage dot. */
.facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem clamp(2rem, 4vw, 3.5rem);
  margin: 0; padding: 0; list-style: disc;
}
.facts li { margin-left: 1.25em; font: 460 var(--size-detail)/1.5 var(--sans); color: var(--linen); text-wrap: pretty; }
.facts li::marker { color: var(--sage); }
/* The link is padded to a 30 px target; the margin gives back the padding above it. */
.more { margin: 2.25rem 0 0; font: 560 var(--size-ui)/1.4 var(--sans); }
.more a { display: inline-block; padding-block: 0.25rem; color: var(--sage); }
.more a:hover { color: var(--sage-hover); }

/* ---- Paper: the studio ---- */

.studio { padding-block: var(--band) 0; }
.studio h2 {
  margin: 0 0 1.25rem;
  font-family: var(--sans); font-weight: 640; font-stretch: 100%;
  font-size: var(--size-paper-heading); line-height: 1.15; letter-spacing: -0.015em;
}
.studio p { margin: 0 0 1rem; max-width: 32em; text-wrap: pretty; }
.studio .quiet { color: var(--mid); }

/* The stack: the app on top of what it stands on, each layer a little wider. */
.stack-section { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--band); }
.stack-section h2 {
  margin: 0;
  font-family: var(--sans); font-weight: 640; font-size: var(--size-stack-heading);
  line-height: 1.2; letter-spacing: -0.01em;
  text-wrap: balance;
}
.stack { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
/* The heading column is at most 11 rem, so the top layer's twelve names sit in two rows on wide
   screens. */
.layer {
  --step: clamp(0.75rem, 3vw, 3rem);
  display: grid; grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr);
  align-items: center; gap: 0.75rem 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule); border-radius: var(--radius-layer);
  background: var(--layer-bg);
}
.layer:nth-child(1) { --layer-bg: var(--layer-1); margin-inline: calc(var(--step) * 3); }
.layer:nth-child(2) { --layer-bg: var(--layer-2); margin-inline: calc(var(--step) * 2); }
.layer:nth-child(3) { --layer-bg: var(--layer-3); margin-inline: var(--step); }
.layer:nth-child(4) { --layer-bg: var(--layer-4); }
.layer-head h3 { margin: 0; font: 640 var(--size-detail)/1.3 var(--sans); }
.layer-head p { margin: 0.125rem 0 0; font-size: var(--size-small); line-height: 1.4; color: var(--mid); }
/* The names wrap in balanced rows, as the headings do, so no name is left alone on a last row.
   They're inline blocks, since balancing doesn't reach flex items: each name's margin makes the
   0.5 rem gap, and the list's negative margin hands it back. The names are written with no
   spaces between them. Safari before 26 balances inline blocks badly (one name to a row on
   iOS 18.6), so only browsers that also know text-wrap: pretty balance them; the others wrap the
   names as before. */
.chips { margin: 0 0 -0.5rem -0.5rem; padding: 0; list-style: none; line-height: 0; }
@supports (text-wrap: pretty) {
  .chips { text-wrap: balance; }
}
.chips li {
  display: inline-block; vertical-align: top; margin: 0 0 0.5rem 0.5rem;
  padding: 0.375rem 0.75rem; border-radius: var(--radius-name);
  background: var(--paper); border: 1px solid var(--rule);
  font: 520 var(--size-small)/1.3 var(--sans); color: var(--ink);
}

.site-footer {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 2rem;
  padding-block: 2rem 3rem; border-top: 1px solid var(--rule);
  font: 500 var(--size-small)/1.4 var(--sans); color: var(--mid);
}
.site-footer .wordmark { font-size: var(--size-footer-mark); color: var(--ink); margin-right: auto; padding-block: 0.375rem; }
.site-footer a { color: var(--ink); padding-block: 0.375rem; display: inline-block; }
.site-footer a:hover { color: var(--signal); }
/* The three links travel together, so a narrow footer breaks between its groups, not inside one. */
.footer-links { display: flex; flex-wrap: wrap; gap: 0 2rem; }

/* ---- Lighter's page: Night from header to footer ---- */

.lead-first { margin-bottom: 1rem; color: var(--linen); }

/* The three things to know, side by side, each under a faint line. */
.points {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(2rem, 4vw, 3.5rem);
  padding-bottom: var(--band);
}
.points h2 {
  margin: 0 0 0.625rem; padding-top: 1.25rem; border-top: 1px solid var(--edge);
  font: 640 var(--size-heading)/1.3 var(--sans); letter-spacing: -0.01em; text-wrap: balance;
}
.points p { margin: 0; font-size: var(--size-detail); line-height: 1.55; color: var(--night-2); text-wrap: pretty; }

.questions { padding-bottom: var(--band); }
.questions h2 { margin: 0 0 0.75rem; font: 640 var(--size-heading)/1.3 var(--sans); }
.questions p { margin: 0; color: var(--night-2); }
.questions a { color: var(--sage); }
.questions a:hover { color: var(--sage-hover); }
.legal {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem;
  margin: 1.25rem 0 0; padding: 0; list-style: none;
  font: 560 var(--size-ui)/1.4 var(--sans);
}
.legal a { display: inline-block; padding-block: 0.5rem; }

.night .site-footer { border-top-color: var(--edge); color: var(--night-2); }
.night .site-footer a, .night .site-footer .wordmark { color: var(--linen); }
.night .site-footer a:hover { color: var(--sage); }

/* ---- Text pages: the privacy notice and the 404, one column on Paper ---- */

body.paper-page { background: var(--paper); }
.prose { padding-block: clamp(3rem, 2rem + 3vw, 5rem) var(--band); }
.prose > * { max-width: 40rem; }   /* the page's own left edge, a readable measure */
.prose h1 {
  margin: 0 0 0.75rem;
  font-family: var(--sans); font-weight: 720; font-stretch: 112%;
  font-size: var(--size-title); line-height: 1.05; letter-spacing: -0.025em;
}
.prose .date { margin: 0 0 2.25rem; font: 500 var(--size-small)/1.4 var(--sans); color: var(--mid); }
.prose h2 { margin: 2.5rem 0 0.5rem; font: 640 var(--size-heading)/1.3 var(--sans); letter-spacing: -0.01em; }
.prose p { margin: 0 0 1rem; text-wrap: pretty; }
.prose a { color: var(--signal); }
.prose a:hover { color: var(--signal-hover); }

/* ---- Small screens ---- */

@media (max-width: 64rem) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 52rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .points { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  /* The recording keeps the browser's own figure margins, but not the right one: Safari on iOS 18
     counts it as page width once the column is narrow, under page zoom, and scrolls sideways. */
  .hero .screen { justify-self: start; width: min(78%, 20rem); margin-right: 0; }
  .layer { grid-template-columns: minmax(0, 1fr); --step: 0.5rem; padding: 1.125rem 1.25rem; }
  /* The footer in rows: the wordmark, the links, the line. */
  .site-footer { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

@media (max-width: 40rem) {
  .facts { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}