/* ==========================================================================
   Watch Vault Tracker — site stylesheet

   Built to the family standard (~/Projects/aveneg-design-kit/family-standard.md,
   owned by the corporate site's session; the owner ruled on 2026-10-13 that
   avenegtechnologies.com sets the standard for the family). What that fixes
   here:

     - The family's colour tokens. Do not invent a colour. (The drawn watches
       and the phone they sit in are pictures of a product and carry their
       own colours and shading; see src/partials/watches.svg.)
     - Headlines (h1, h2) in the system serif; everything else in the system
       sans; labels in mono capitals. Type inside a phone is the app's own.
     - Body 18px. No sentence under 15px. Labels and nav 14px. All in rem.
     - 64 to 104px between sections. One left edge: nothing is centred.
     - Brass is rationed: the hero label, a ticked watch, a link's underline.
     - Prose links are underlined, never colour alone. Button edges are 3:1.
       Anything a finger must hit is 48px high.
     - One radius, 3px. No glows.
     - Breakpoints at 45em (720px) and 60em (960px).

   What is this site's own: the product shown three times (Today, Insights,
   History), each a phone that rises from the rule under its section.

   No inline style="" anywhere and no script of ours: static/_headers ships
   a Content Security Policy that allows neither.
   ========================================================================== */

:root {
  --ink: #0E0F12;
  --surface: #16181D;
  --surface-2: #1E2128;
  --surface-3: #23262E;
  --line: #2A2E37;
  --line-2: #363B45;
  --text: #E7E4DC;
  --prose: #B9BCC2;
  --muted: #A8ABB2;
  --muted-2: #9297A2;
  --brass: #C6A15B;
  --brass-dim: #A28442;
  --brass-lit: #D3B273;
  --brass-ink: #15120B;

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --r: 3px;
  --tap: 3rem;

  --wrap: 1080px;                                   /* including gutters */
  --narrow: 44rem;
  --gut: clamp(20px, 5vw, 40px);
  --section: clamp(4rem, 2.5rem + 6vw, 6.5rem);     /* 64 to 104 */

  /* The Tracker app's own dark page (Theme.page), behind a phone's screen. */
  --app-page: #111317;

  color-scheme: dark;
}

/* ── reset ───────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--ink);
  color: var(--prose);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; padding: 0; }

/* A link in a sentence is the sentence's own colour with a brass underline:
   it never depends on colour alone. */
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--brass-lit); }
::selection { background: var(--brass); color: var(--brass-ink); }

:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: var(--r); }

/* ── layout ──────────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { position: relative; padding-block: var(--section); }
/* The rule between sections runs gutter to gutter, the same span as every
   other hairline on the page. */
.section::before {
  content: ""; position: absolute; top: 0;
  left: var(--gut); right: var(--gut);
  border-top: 1px solid var(--line);
}
/* A page that opens with a section (About, Contact, the legal pages) starts
   straight under the header: no rule, which would double the header's own. */
main > .section:first-child { padding-top: clamp(3rem, 2rem + 5vw, 4.75rem); }
main > .section:first-child::before { display: none; }
.section[id] { scroll-margin-top: 1.5rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brass); color: var(--brass-ink); padding: 14px 18px;
  font: 600 .875rem/1 var(--mono); text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* ── type ────────────────────────────────────────────────────────────────── */

/* Labels: mono capitals, 14px. The one voice for nav, tags and keys. */
.eyebrow, .nav a, .notice-tag, .facts dt, .spec-key, .toc-h {
  font-family: var(--mono);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
}
.eyebrow { color: var(--muted); }
.hero .eyebrow { color: var(--brass); }

h1, h2, h3 { color: var(--text); font-weight: 400; text-wrap: balance; }
h1, h2 { font-family: var(--serif); }

.display {
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);    /* 36 to 56 */
  line-height: 1.08;
  letter-spacing: -.012em;
}
h2 {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);    /* 28 to 34 */
  line-height: 1.18;
  max-width: 24ch;
}
/* A one-line statement that carries a section by itself. */
h3, .line { font-size: clamp(1.25rem, 1.2rem + .2vw, 1.375rem); line-height: 1.3; }

.lead {
  font-size: clamp(1.1875rem, 1.13rem + .25vw, 1.3125rem);   /* 19 to 21 */
  line-height: 1.5;
  color: var(--prose);
  max-width: 34rem;
  text-wrap: pretty;
}
/* A second paragraph that explains the product, a price or a privacy point
   is body text: 18px, quieter than the lead by size alone. (Standard 1.1:
   "Body is for anything a reader needs." An earlier build set these at 15px.) */
.sub { max-width: 34rem; text-wrap: pretty; }
/* Captions under or beside a picture, and legal fine print: 15px, nothing
   else. */
.fine, figcaption {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--prose);
  max-width: 34rem;
  text-wrap: pretty;
}
p { max-width: 38rem; text-wrap: pretty; }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  padding: 0 1.5rem;
  background: var(--surface-2);
  /* muted-2, not a hairline colour: a hairline is 1.7:1 on this ground and
     an older eye does not see the button's edge. */
  border: 1px solid var(--muted-2);
  border-radius: var(--r);
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
}
.btn:hover { background: var(--surface-3); color: var(--text); }
.btn.primary { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); font-weight: 600; }
.btn.primary:hover { background: var(--brass-lit); border-color: var(--brass-lit); color: var(--brass-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── notice bar and masthead ─────────────────────────────────────────────── */

.notice { background: var(--surface); border-bottom: 1px solid var(--line); }
.notice-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 16px;
  padding-block: 12px;
  font-size: .9375rem; line-height: 1.4;
  color: var(--prose);
}
/* Outlined, not filled, so the page has no solid brass block that is only a date. */
.notice-tag {
  letter-spacing: .12em;
  color: var(--brass);
  border: 1px solid var(--brass-dim);
  border-radius: var(--r);
  padding: 4px 8px;
  white-space: nowrap;
}

.masthead { border-bottom: 1px solid var(--line); }
.masthead-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px; }
.brand { display: block; padding-block: 12px; text-decoration: none; }
/* The lockup is the owner's artwork as an inline SVG (src/partials/lockup.svg),
   never redrawn and never typed. Size it by height; colour it here. */
.lockup { display: block; height: 40px; width: auto; }
.lk-ring { fill: none; stroke: var(--brass); stroke-width: 3; stroke-miterlimit: 10; }
.lk-brass { fill: var(--brass); }
.lk-word { fill: #D6D5D3; }
.lk-sub { fill: var(--muted); }

.nav a {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--brass); }
.nav a:focus-visible { outline-offset: -6px; }
/* Phone: the lockup on its own row, then four equal cells. No hidden menu:
   the site has no script to open one, and four links fit. */
@media (max-width: 44.99em) {
  .nav {
    display: grid; grid-template-columns: repeat(4, 1fr);
    flex: 1 0 100%;
    margin-inline: calc(var(--gut) * -1);
    padding-inline: calc(var(--gut) - 8px);
    border-top: 1px solid var(--line);
  }
  .nav a { letter-spacing: .1em; }
}
@media (min-width: 45em) {
  .nav { display: flex; align-self: stretch; gap: 8px; margin-right: -12px; }
  .nav a { padding-inline: 12px; }
}

/* ── hero ──────────────────────────────────────────────────────────────────
   Headline top-left, level with the top of the phone. The phone is taller
   than the copy and rises from the rule under the hero, so the left column
   has no hole in it: an earlier version pinned the three facts to the foot
   of a whole phone and left 280px of nothing above them. */

.hero { padding-top: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero .eyebrow { margin-bottom: 20px; }
.hero .display span { display: block; }
.hero .lead { margin-top: 24px; }
.hero-aside { margin-top: 12px; }

/* Price, platform, date: what a visitor needs before anything else. */
.facts { margin-top: 32px; border-top: 1px solid var(--line); max-width: 34rem; }
.facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-size: 1.0625rem; line-height: 1.4; color: var(--text); }
.hero-note { margin-top: 20px; }
.hero-note b { font-weight: 600; color: var(--text); }

/* Phone: headline, then the product, then the words. */
@media (max-width: 44.99em) {
  .hero-fig { margin-top: 32px; }
  .hero-body { padding-bottom: var(--section); }
}
@media (min-width: 45em) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    grid-template-areas: "head fig" "body fig";
    column-gap: clamp(2.5rem, 7vw, 6rem);
  }
  .hero-head { grid-area: head; }
  .hero-fig { grid-area: fig; }
  .hero-body { grid-area: body; padding-bottom: clamp(3rem, 2rem + 4vw, 4.5rem); }
}

/* ── the phone ─────────────────────────────────────────────────────────────
   Three of them: Today in the hero, which a visitor can tap (each watch is a
   real checkbox, so a tap records it and a second tap takes it back, with no
   script; the count is a CSS counter of the ticked boxes), then Insights and
   History, which are pictures.

   They are illustrations and the words beside each say so. They are not
   screenshots, and the watches are drawn, because no real collection's
   photographs or names belong on this site. The layouts follow the app's
   screens, and the type inside is the app's (the system sans), not the
   site's serif.

   Each phone is cropped by its figure and stands on the rule under its
   section: a whole phone is 2.2 times as tall as it is wide, and three of
   them made a page 5,100px tall for 400 words.

   Everything inside a phone is sized in cqi (hundredths of the phone's own
   width), so a phone scales as one object. Each cqi value follows a px value
   that a browser without container units uses instead. */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The figure is a window onto the phone: fixed height, the phone hanging
   from its top edge and cut off at its foot. */
.hero-fig, .panel-fig { position: relative; overflow: hidden; }
.hero-fig { width: min(100%, 21.25rem); height: 31rem; margin-inline: auto; }
.panel-fig { width: min(100%, 19rem); height: 26rem; margin-inline: auto; }
@media (min-width: 45em) {
  /* Narrower on a tablet, so the headline beside it keeps its three lines. */
  .hero-fig { width: clamp(15.5rem, 33vw, 21.25rem); height: auto; min-height: 31rem; align-self: stretch; margin: 0; }
  .panel-fig { width: clamp(17rem, 28vw, 20rem); height: auto; min-height: 27rem; align-self: stretch; margin: 0; }
}
.hero-fig .phone, .panel-fig .phone { position: absolute; top: 0; left: 0; width: 100%; }

.phone {
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 56px;
  /* The bezel: a dark body with a rim that catches light at the top left. */
  background:
    linear-gradient(#050608, #050608) padding-box,
    linear-gradient(150deg, #9297A2, #363B45 20%, #1E2128 50%, #363B45 85%) border-box;
  container-type: inline-size;
}
.phone-screen {
  position: relative;
  /* The count of ticked watches starts here, not on .phone: a container
     (container-type, above) scopes counters to its inside, and a counter
     reset on the container itself read 0 whatever was ticked. */
  counter-reset: worn;
  aspect-ratio: 9 / 19.5;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  border-radius: 46px;
  overflow: hidden;
  background: var(--app-page);
}
/* The island. */
.phone-screen::before {
  content: ""; position: absolute; left: 35%; width: 30%;
  top: 11px; height: 26px;
  top: 3.4cqi; height: 8cqi;
  border-radius: 99px; background: #000;
}

.ph-head { order: 0; padding: 52px 18px 4px; padding: 16cqi 5.6cqi 1.2cqi; }
.ph-title { font-size: 24px; font-size: 7.6cqi; letter-spacing: -.02em; line-height: 1.1; color: var(--text); max-width: none; }
.ph-hint { font-size: 12px; font-size: 3.8cqi; color: var(--muted); margin-top: .8cqi; max-width: none; }

/* "Worn today" sits above the watches so it stays in view when the phone is
   cropped. It follows them in the document all the same: a CSS counter only
   knows about what came before it, so the order is set by `order`, here. */
.ph-worn {
  order: 1;
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 2.4cqi 5.6cqi 0; padding: 2.6cqi 0;
  border-block: 1px solid var(--line);
  font-size: 12px; font-size: 3.8cqi; line-height: 1.3;
  color: var(--muted);
  max-width: none;
}
.ph-worn-n::after { content: counter(worn); font-family: var(--mono); color: var(--brass); }

.ph-grid {
  order: 2;
  display: grid; grid-template-columns: 1fr 1fr; align-content: start;
  gap: 12px 12px; gap: 3.8cqi 3.6cqi;
  padding: 12px 18px 0; padding: 3.8cqi 5.6cqi 0;
}
.tile { display: block; position: relative; cursor: pointer; }
div.tile { cursor: default; }
.tile-pic {
  display: block; position: relative;
  aspect-ratio: 1;
  border-radius: 12px; border-radius: 3.8cqi;
  /* Lit from the top left, like the watches on it. */
  background: radial-gradient(120% 90% at 30% 20%, #23262E, #16181D 70%);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .15s, transform .12s;
}
.tile-pic svg { width: 100%; height: 100%; }
label.tile:hover .tile-pic { border-color: var(--brass-dim); }
label.tile:active .tile-pic { transform: scale(.97); }
.tile-tick {
  position: absolute; top: 6%; right: 6%;
  width: 19%; height: 19%;
  border-radius: 50%;
  background: var(--brass);
  opacity: 0; transform: scale(.6);
  transition: opacity .15s, transform .15s;
}
.tile input:checked { counter-increment: worn; }
/* The ring is drawn over the picture, so a strap that runs to the tile's
   edge does not notch it. */
.tile input:checked + .tile-pic { border-color: var(--brass); }
.tile input:checked + .tile-pic::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--brass);
}
.tile input:checked + .tile-pic .tile-tick { opacity: 1; transform: none; }
.tile input:focus-visible + .tile-pic { outline: 2px solid var(--text); outline-offset: 2px; }
.tile-cap { display: block; margin-top: 2.2cqi; font-size: 11px; font-size: 3.5cqi; line-height: 1.3; color: var(--muted); }
.tile-cap b, .ph-body b { display: block; font-size: 12px; font-size: 3.8cqi; font-weight: 500; color: var(--text); }

/* Insights and History: the same phone, showing a list. */
.ph-body { order: 2; padding: 0 5.6cqi; }
.ph-label { font-size: 10px; font-size: 3.1cqi; letter-spacing: .04em; color: var(--muted); margin: 5.4cqi 0 1.6cqi; max-width: none; }
.ph-body li {
  display: grid; grid-template-columns: 11.5cqi minmax(0, 1fr) auto; align-items: center;
  gap: 3.2cqi;
  padding: 2.4cqi 0;
  border-top: 1px solid var(--line);
  font-size: 11px; font-size: 3.4cqi; line-height: 1.3; color: var(--muted);
}
.ph-body li svg {
  width: 11.5cqi; height: 11.5cqi;
  border-radius: 2.6cqi;
  background: radial-gradient(120% 90% at 30% 20%, #23262E, #16181D 70%);
  border: 1px solid var(--line);
}
.ph-body em { font-style: normal; color: var(--prose); white-space: nowrap; }
.ph-chips { display: flex; gap: 1.6cqi; margin-top: 3.4cqi; max-width: none; }
.ph-chips span {
  font-size: 9px; font-size: 2.9cqi; line-height: 1;
  padding: 1.7cqi 2.3cqi;
  border: 1px solid var(--line-2); border-radius: 99px;
  color: var(--muted); white-space: nowrap;
}
.ph-chips .on { border-color: var(--brass); color: var(--brass); }
.bar { display: block; height: 1.3cqi; min-height: 3px; margin-top: 1.8cqi; border-radius: 99px; background: var(--brass); }
.bar-1 { width: 100%; } .bar-2 { width: 64%; } .bar-3 { width: 45%; }
/* One bar in three parts, the same brass at three strengths: the app gives
   no watch or part of the day a colour of its own. */
.ph-split { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: 1cqi; max-width: none; }
.ph-split span { position: relative; padding-top: 3.8cqi; font-size: 9px; font-size: 2.9cqi; color: var(--muted); }
.ph-split span::before { content: ""; position: absolute; inset: 0 0 auto; height: 1.9cqi; min-height: 4px; border-radius: 99px; background: var(--brass); }
.ph-split .s2::before { opacity: .6; }
.ph-split .s3::before { opacity: .32; }

/* ── a panel: words beside a phone ───────────────────────────────────────── */

.has-panel { padding-bottom: 0; }
.panel { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.panel-copy .lead { margin-top: 20px; }
.panel-copy .sub, .panel-copy .fine { margin-top: 16px; }
@media (min-width: 45em) {
  .panel { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2.5rem, 8vw, 7rem); }
  .panel-copy { align-self: center; padding-bottom: var(--section); }
  .panel-flip { grid-template-columns: auto minmax(0, 1fr); }
  .panel-flip .panel-copy { order: 2; }
}

/* ── four statements, ruled ──────────────────────────────────────────────── */

.four { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 32px; margin-top: 40px; }
.four li { border-top: 1px solid var(--line-2); padding-top: 16px; }
.four p { margin-top: 8px; font-size: 1.0625rem; line-height: 1.5; }
@media (min-width: 45em) { .four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.settle { margin-top: 40px; max-width: 40rem; }

/* ── a plate: one boxed statement ────────────────────────────────────────── */

.plate {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 64px;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.plate .lead { margin-top: 16px; }
/* 17px, the body size inside a card. */
.plate .sub { font-size: 1.0625rem; }
@media (min-width: 60em) {
  .plate { grid-template-columns: 6fr 5fr; align-items: end; }
}

/* ── two columns, open ───────────────────────────────────────────────────── */

.band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 64px; }
@media (min-width: 60em) { .band { grid-template-columns: 5fr 6fr; } }
.band h2 { max-width: 13em; }
.band p + p { margin-top: 16px; }

.close h2 { max-width: none; }
.close .line { margin-top: 16px; color: var(--prose); }

/* ── rows: a label, and what it holds ────────────────────────────────────── */

.spec { border-top: 1px solid var(--line); margin-top: 32px; }
.spec-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 45em) { .spec-row { grid-template-columns: 11rem minmax(0, 1fr); align-items: start; } }
.spec-key { color: var(--brass); padding-top: 4px; }
.spec-val { margin: 0; }
.spec-val h3 { margin-bottom: 4px; }
.spec-val p + p { margin-top: 4px; }
.spec-val a { overflow-wrap: anywhere; }

/* ── document pages (privacy, terms, about, contact) ─────────────────────── */

.doc { max-width: var(--narrow); }
.doc .eyebrow { margin-bottom: 16px; }
.doc h1 { font-size: clamp(2.25rem, 1.75rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -.012em; }
.doc .lead { margin-top: 24px; max-width: none; }
.doc h2 { max-width: none; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 1.5rem; }
.doc p { margin-top: 16px; max-width: none; }
.doc strong { color: var(--text); font-weight: 600; }
.doc ul { margin-top: 16px; padding-left: 1.3em; list-style: disc; }
.doc li { margin-top: 8px; }
.doc li::marker { color: var(--brass-dim); }
.doc .updated { margin-top: 12px; font-size: .9375rem; color: var(--muted); }
.doc address { font-style: normal; margin-top: 16px; }
/* A ledger directly under a section heading, or a heading directly under a
   ledger, would draw two rules a few pixels apart. One rule each. */
.doc h2 + .spec { border-top: 0; margin-top: 8px; }
.doc .spec + h2 { border-top: 0; padding-top: 0; }
.doc .spec-val p { margin-top: 0; }
.doc .spec-val p + p { margin-top: 4px; }
/* "On this page", on the two long legal pages. */
.toc { margin-top: 32px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); }
.toc-h { color: var(--muted); }
.doc .toc p { margin: 0; }
.doc .toc ol { margin: 8px 0 0; padding-left: 1.6em; list-style: decimal; }
.doc .toc li { margin: 0; }
.doc .toc li::marker { color: var(--muted); }
.toc a { display: flex; align-items: center; min-height: var(--tap); }
@media (min-width: 45em) { .doc .toc ol { columns: 2; column-gap: 48px; } .doc .toc li { break-inside: avoid; } }

/* ── footer ──────────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); padding-block: 48px; background: var(--surface); }
.foot-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px 48px; }
.foot .lockup { height: 36px; }
.foot-tag { margin-top: 12px; font-size: 1.0625rem; color: var(--prose); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 32px; max-width: 36rem; }
/* A list of destinations, not links inside a sentence: underlined on hover. */
.foot-links a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 1.0625rem; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-decoration-color: var(--brass); }
.foot-base {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 48px;
  font-size: .9375rem; line-height: 1.6;
}
@media (min-width: 60em) { .foot-base { grid-template-columns: 1fr 1fr; } }
.foot-base p { max-width: 34rem; }

/* ── utilities ─────────────────────────────────────────────────────────────
   A fixed scale rather than inline style="", which the CSP forbids. Last in
   the file so they win ties. */

.mt2 { margin-top: 16px; }
.mt3 { margin-top: 24px; }
.mt4 { margin-top: 32px; }
.mt5 { margin-top: 48px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }