:root {
  --bg: #f2ede2;
  --bg-alt: #e9e3d5;
  --surface: #fffdf9;
  --ink: #1d2124;
  --ink-soft: #4c545c;
  --line: #cfc7b6;
  --slate: #565d5c;
  --accent: #14503f;
  --accent-hover: #0e3c2f;
  --accent-ink: #ffffff;
  --focus: #b8460e;
  --shadow: 0 1px 2px rgba(29, 33, 36, .05), 0 5px 14px rgba(29, 33, 36, .06);
  --shadow-lg: 0 1px 3px rgba(29, 33, 36, .07), 0 12px 30px rgba(29, 33, 36, .11);
  --max: 68rem;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181b;
    --bg-alt: #1b1f23;
    --surface: #21262b;
    --ink: #f3f0e9;
    --ink-soft: #b9c0c7;
    --line: #39414a;
    --slate: #9aa3a2;
    --accent: #6fd0ad;
    --accent-hover: #8fe0c3;
    --accent-ink: #0c2019;
    --focus: #ffb26b;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 5px 14px rgba(0, 0, 0, .3);
    --shadow-lg: 0 1px 3px rgba(0, 0, 0, .45), 0 12px 30px rgba(0, 0, 0, .42);
  }
}

* { box-sizing: border-box; }

html { font-size: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.68;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--sans); line-height: 1.12; letter-spacing: -0.022em; }

h1 { font-size: clamp(2.4rem, 6.4vw, 4.25rem); font-weight: 800; margin: 0 0 1.25rem; }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 750; margin: 0 0 1.75rem; }
h3 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.5rem; }

p { margin: 0 0 1.15rem; }

a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--sans); padding: .85rem 1.35rem;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }

/* ---------- header ---------- */

header.site {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: .9rem 0;
}
header.site .wrap {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-weight: 800; font-size: 1rem;
  letter-spacing: .09em; color: var(--ink); text-decoration: none;
}
.mark {
  width: 1.5rem; height: 1.5rem; border-radius: .35rem;
  background: var(--accent); flex: none;
  background-image:
    linear-gradient(to bottom, transparent 22%, var(--accent-ink) 22% 30%, transparent 30% 47%, var(--accent-ink) 47% 55%, transparent 55% 72%, var(--accent-ink) 72% 80%, transparent 80%);
  background-size: 62% 100%; background-repeat: no-repeat; background-position: 18% 0;
}
.brand:hover { text-decoration: underline; text-underline-offset: .35em; }
.site-nav { display: none; }
@media (min-width: 64rem) {
  .site-nav { display: flex; gap: 1.75rem; margin-left: auto; }
}
.site-nav a {
  font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  color: var(--ink-soft); text-decoration: none;
}
.site-nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .35em; }
.header-actions { display: flex; align-items: center; gap: .9rem 1.25rem; flex-wrap: wrap; }
/* below the nav breakpoint the actions wrap onto their own row: spread them
   across it instead of leaving them stranded against the right edge */
.header-actions { width: 100%; justify-content: space-between; }
@media (min-width: 40rem) {
  .header-actions { width: auto; margin-left: auto; justify-content: flex-end; }
}
@media (min-width: 64rem) { .header-actions { margin-left: 0; } }
.lang-link { font-family: var(--sans); font-size: .9375rem; font-weight: 600; }
.btn-sm { padding: .5rem 1.05rem; font-size: .9375rem; border-radius: 5px; }

/* ---------- ribbed rule (the sea texture of the map) ---------- */

.ribbed {
  height: .75rem;
  background-image: repeating-linear-gradient(
    to bottom, var(--line) 0 2px, transparent 2px 6px);
  opacity: .85;
}

/* ---------- sections ---------- */

section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
section.alt { background: var(--bg-alt); }
section.tint { background: var(--surface); }

/* The printed map is graphite with white relief. One band on the page is the
   object's own colours: every token is re-pointed, so the lists, figures and
   captions inside need no special cases, and the pale renders sit on it the way
   the plates sit on a table. One band only, or it stops being a moment. */
section.slab {
  --bg-alt: #23282c;
  --surface: #262c31;
  --ink: #f3f0e9;
  --ink-soft: #b9c0c7;
  --line: #3b444c;
  --slate: #9aa3a2;
  --accent: #6fd0ad;
  --accent-hover: #8fe0c3;
  --accent-ink: #0c2019;
  --focus: #ffb26b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .40);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .55);
  background: #1a1e21;
  color: var(--ink);
  border-top: 1px solid #2c3237;
  border-bottom: 1px solid #2c3237;
}

.eyebrow {
  font-family: var(--sans); font-size: .8125rem; font-weight: 750;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--slate); margin: 0 0 .9rem;
}

.prose { max-width: 38em; }
.prose-wide { max-width: 44em; }
.prose p:last-child { margin-bottom: 0; }

.note {
  font-family: var(--sans); font-size: .9375rem; line-height: 1.6;
  color: var(--ink-soft);
  border-left: 2px solid var(--line); padding-left: 1rem;
}

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

.hero {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom, color-mix(in srgb, var(--line) 55%, transparent) 0 2px, transparent 2px 9px);
  opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 62%);
  mask-image: linear-gradient(to bottom, #000, transparent 62%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 60rem) {
  /* the picture gets the larger half: it is the product shot, and it carries
     the scale of the thing better than any sentence in the column beside it */
  .hero-grid { grid-template-columns: 1fr 1.15fr; }
}
.hero .lede {
  font-size: clamp(1.15rem, 1.9vw, 1.375rem);
  color: var(--ink-soft); max-width: 32em; margin-bottom: 2rem;
}
.hero-figure { margin: 0; }
/* The photograph shows the first print, which is the wrong object to sell on
   its own: it carries the raised digits that got replaced. The inset puts the
   current geometry in the same frame, so the hero shows the correction rather
   than pretending the old set is the product. */
.hero-shot { position: relative; }
.hero-shot > img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.shot-tag {
  position: absolute; top: .7rem; left: .7rem;
  background: var(--ink); color: var(--bg);
  font-family: var(--sans); font-size: .6875rem; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .5rem; border-radius: 3px; white-space: nowrap;
}
.hero-inset {
  position: absolute; right: -.5rem; bottom: -1.1rem; width: 42%;
  display: block; line-height: 0;
}
.hero-inset img {
  width: 100%; border-radius: 6px; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.hero-inset .shot-tag { top: .45rem; left: .45rem; font-size: .625rem; padding: .22rem .4rem; }
/* the current-files chip takes the accent, so the pair reads as before and after */
.shot-tag-now { background: var(--accent); color: var(--accent-ink); }
.hero-figure figcaption { margin-top: 2.1rem; }
@media (max-width: 30rem) {
  .hero-inset { width: 48%; right: -.25rem; }
}

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

.btn {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  font-family: var(--sans); font-weight: 650; font-size: 1.0625rem;
  padding: .95rem 1.75rem; border-radius: 6px; text-decoration: none;
  box-shadow: var(--shadow); transition: background-color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
/* second action, same box, no fill: it must not compete with the quote button */
.btn-ghost {
  background: transparent; color: var(--accent); box-shadow: none;
  border: 2px solid var(--accent);
  padding: calc(.95rem - 2px) calc(1.6rem - 2px);
}
.btn-ghost:hover { background: var(--accent); color: var(--accent-ink); }

/* the three things a buyer wants before writing: price, language, how fast */
.hero-facts {
  list-style: none; padding: 0; margin: 1.6rem 0 0;
  display: flex; flex-wrap: wrap; row-gap: .25rem;
  font-family: var(--sans); font-size: .9375rem; color: var(--ink-soft);
}
/* separator after, not before: when the strip wraps, a leading dot on the
   second line reads as a typo */
.hero-facts li:not(:last-child)::after { content: "·"; padding: 0 .6rem; opacity: .55; }
/* narrow screens cannot hold the strip on one line, and a middot left hanging at
   a line end reads as a typo: below 34rem it becomes a short dotted list */
@media (max-width: 34rem) {
  .hero-facts { display: grid; gap: .4rem; }
  .hero-facts li { position: relative; padding-left: 1rem; }
  .hero-facts li:not(:last-child)::after { content: none; }
  .hero-facts li::before {
    content: ""; position: absolute; left: 0; top: .6em;
    width: .35rem; height: .35rem; border-radius: 50%; background: var(--accent);
  }
}

/* ---------- stats ---------- */

/* One band with rules, the way a museum label strip is set: four cards with
   their own backgrounds and shadows read as product metrics, which these are
   not. They are the dimensions of one object. */
.stat-grid {
  display: grid; gap: 0; margin: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat-grid > div { padding: 1.5rem 0 1.6rem; }
.stat-grid > div + div { border-top: 1px solid var(--line); }
@media (min-width: 34rem) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid > div { padding: 1.5rem 1.75rem 1.6rem; }
  .stat-grid > div:nth-child(-n+2) { border-top: 0; }
  .stat-grid > div:nth-child(2n) { border-left: 1px solid var(--line); }
  .stat-grid > div:nth-child(odd) { padding-left: 0; }
}
@media (min-width: 62rem) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .stat-grid > div { border-top: 0; padding: 1.6rem 1.75rem 1.7rem; }
  .stat-grid > div + div { border-left: 1px solid var(--line); }
  .stat-grid > div:first-child { padding-left: 0; }
  .stat-grid > div:last-child { padding-right: 0; }
}
.stat-grid dt {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.4rem, 2.5vw, 1.75rem); letter-spacing: -0.03em;
  color: var(--accent); line-height: 1.05;
}
/* Each figure draws the thing its number counts, from the real geometry: the
   tile grid with its dovetails, the four terrain steps over a ribbed sea, 27
   written the way the map writes it, a print letter beside its braille cell. */
.stat-fig {
  display: block; width: 5rem; height: 3.35rem; margin: 0 0 1rem;
  overflow: visible;
}
.stat-fig text { font-family: var(--sans); letter-spacing: -.02em; }
@media (prefers-color-scheme: dark) { .stat-grid dt { color: var(--accent-hover); } }
.stat-grid dd {
  margin: .55rem 0 0; font-family: var(--sans);
  font-size: .9375rem; line-height: 1.5; color: var(--ink-soft);
}

/* ---------- figures ---------- */

figure.plate { margin: 0; }
figure.plate img {
  border-radius: 8px; border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
figcaption {
  font-family: var(--sans); font-size: .9375rem;
  color: var(--ink-soft); margin-top: .85rem; max-width: 42em;
}

/* provenance marker: is this the first print, or the files as they stand now? */
.tag {
  display: inline-block;
  font-family: var(--sans); font-size: .6875rem; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate); border: 1px solid var(--line); border-radius: 3px;
  padding: .1rem .45rem; margin-right: .55rem;
  white-space: nowrap; vertical-align: .06em;
}
.tag-now {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.split {
  display: grid; gap: clamp(2rem, 4vw, 3.25rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 58rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.reverse > *:first-child { order: 2; }
}
.split.top { align-items: start; }

.gallery {
  display: grid; gap: 1.25rem; margin-top: 2rem;
  grid-template-columns: 1fr;
}
/* two up, not four: the braille macro is evidence, and it has to be legible */
@media (min-width: 48rem) { .gallery { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
  border-radius: 8px; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: var(--surface);
}

/* ---------- first print vs current files ---------- */

.compare {
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
  margin: 0 0 2.25rem;
}
@media (min-width: 48rem) {
  .compare { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}
.compare figure { margin: 0; }
.compare img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: var(--surface);
}

/* ---------- floor-plan schematic ---------- */

/* Drawn, not photographed: no plan has been printed yet, and a render dressed
   up as a product shot would be a lie. Line weights follow the map's own
   convention, a wall reads as the ridge a finger traces. */
figure.plan { margin: 0; }
figure.plan .plan-fig {
  display: block; width: 100%; height: auto;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: none;
  padding: 1.5rem 1.25rem;
}
figure.plan figcaption { margin-top: 1rem; }

/* ---------- links out ---------- */

ul.links {
  list-style: none; padding: 0; margin: 1.75rem 0 0;
  border-top: 1px solid var(--line);
}
.split + ul.links { margin-top: 2.75rem; }
ul.links li { border-bottom: 1px solid var(--line); }
ul.links a {
  display: flex; flex-wrap: wrap; gap: .15rem 1.25rem;
  align-items: baseline; justify-content: space-between;
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.4;
  text-decoration: none; padding: 1rem .15rem;
}
ul.links a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
ul.links a span {
  font-size: .8125rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); white-space: nowrap;
}

/* ---------- video slot ---------- */

.video-slot {
  margin-top: 2.5rem; max-width: 44em;
  border: 1px dashed var(--line); border-radius: 10px;
  padding: 1.4rem 1.5rem 1.3rem;
  background: var(--surface);
  font-family: var(--sans); font-size: .9875rem; line-height: 1.6;
  color: var(--ink-soft);
}
.video-slot p { margin: 0 0 .6rem; }
.video-slot p:last-child { margin-bottom: 0; }
.video-slot strong { color: var(--ink); font-weight: 700; }

/* ---------- ruled definition list ---------- */

dl.ruled { display: grid; margin: 0; grid-template-columns: 1fr; }
@media (min-width: 46rem) {
  dl.ruled { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}
dl.ruled > div { border-top: 1px solid var(--line); padding: 1.35rem 0 1.5rem; }
dl.ruled dt {
  font-family: var(--sans); font-weight: 750; font-size: 1.125rem;
  letter-spacing: -.01em; margin-bottom: .4rem;
}
dl.ruled dd {
  margin: 0; font-family: var(--sans);
  font-size: .9875rem; line-height: 1.6; color: var(--ink-soft);
}

/* ---------- steps ---------- */

ol.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
@media (min-width: 58rem) { ol.steps { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; } }
ol.steps li { counter-increment: s; position: relative; padding-left: 3.6rem; }
ol.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: -.1rem;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--sans); font-weight: 800; font-size: 1.05rem;
  display: grid; place-items: center; box-shadow: var(--shadow);
}
ol.steps strong { display: block; font-family: var(--sans); font-size: 1.1rem; margin-bottom: .3rem; }
ol.steps span { font-family: var(--sans); color: var(--ink-soft); font-size: .9875rem; line-height: 1.55; }

/* ---------- price ---------- */

.price-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .price-grid { grid-template-columns: 1fr 1fr; } }
.price {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.75rem 1.6rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.price.feature { border-color: var(--accent); border-width: 2px; }
.price .amount {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.5rem); letter-spacing: -.03em;
  color: var(--accent); display: block; line-height: 1.05; margin: 0 0 1.15rem;
}
@media (prefers-color-scheme: dark) { .price .amount { color: var(--accent-hover); } }
.price h3 {
  margin: 0 0 .4rem; font-size: .8125rem; font-weight: 750;
  letter-spacing: .16em; text-transform: uppercase; color: var(--slate);
}
.price-spec {
  list-style: none; padding: 0; margin: 0 0 1.35rem; display: grid; gap: .55rem;
  font-family: var(--sans); font-size: .9875rem; line-height: 1.5; color: var(--ink-soft);
}
.price-spec li { position: relative; padding-left: 1.35rem; }
.price-spec li::before {
  content: ""; position: absolute; left: .05rem; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent);
}
.price p { font-family: var(--sans); font-size: .9875rem; line-height: 1.6; color: var(--ink-soft); }
.price p:last-child { margin-bottom: 0; }
/* margin-top:auto pins both cards' links to the same baseline, whatever the copy above */
.price .price-cta { margin: auto 0 0; padding-top: 1.35rem; }

/* ---------- what the hand feels ---------- */

/* Was a two-column table, which on a 320 px screen could only scroll sideways.
   Term and description is what this content actually is. */
dl.feels { margin: 2.25rem 0 0; display: grid; grid-template-columns: 1fr; }
dl.feels > div {
  display: grid; gap: .3rem 2rem; grid-template-columns: 1fr;
  border-top: 1px solid var(--line); padding: .95rem 0 1rem;
}
dl.feels > div:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 40rem) {
  dl.feels > div { grid-template-columns: minmax(7rem, 11rem) 1fr; align-items: baseline; }
}
dl.feels dt {
  font-family: var(--sans); font-weight: 700; font-size: .8125rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
}
dl.feels dd { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------- first print / now, pair by pair ---------- */

.rebuilt .lead { font-size: clamp(1.0625rem, 1.7vw, 1.25rem); color: var(--ink-soft); }
.rebuilt .compare { margin: 2.5rem 0 2.75rem; }

dl.versus { margin: 0 0 2.25rem; display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) {
  dl.versus { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
}
dl.versus > div { border-top: 2px solid var(--ink); padding-top: 1rem; }
dl.versus dt {
  font-family: var(--sans); font-weight: 750; font-size: 1.125rem;
  letter-spacing: -.015em; margin-bottom: .8rem;
}
dl.versus dd {
  margin: 0 0 .6rem; font-family: var(--sans);
  font-size: .9375rem; line-height: 1.55;
}
dl.versus dd:last-child { margin-bottom: 0; }
dl.versus .was { color: var(--ink-soft); }
dl.versus .now { color: var(--ink); }

/* ---------- closing band ---------- */

.band {
  background: var(--accent); color: var(--accent-ink);
  border-radius: 16px; padding: clamp(2rem, 5vw, 3rem);
  box-shadow: var(--shadow-lg);
}
.band h2, .band p { color: var(--accent-ink); }
.band p { opacity: .92; max-width: 34em; }
.band .band-cta { margin: 1.75rem 0 0; opacity: 1; }
.band .btn { background: var(--accent-ink); color: var(--accent); }
.band .btn:hover { background: var(--surface); }
.band a:not(.btn) { color: var(--accent-ink); }
/* the band background IS the accent, so the default ring would vanish on it */
.band :focus-visible { outline-color: var(--accent-ink); }

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

footer.site {
  padding: 3rem 0 4rem;
  font-family: var(--sans); font-size: .9875rem; color: var(--ink-soft);
}
.foot-grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) {
  .foot-grid { grid-template-columns: 1.15fr 1fr; gap: 3rem; }
}
.foot-brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: 1rem; letter-spacing: .09em;
  color: var(--ink); margin: 0 0 .85rem;
}
.foot-line { max-width: 30em; margin: 0; }
.foot-label {
  font-size: .8125rem; font-weight: 750; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate); margin: 0 0 .4rem;
}
.foot-mail {
  margin: 0 0 1.35rem; font-weight: 650;
  /* 29 characters: a <wbr> after the @ gives it somewhere sane to break at 320 px */
  font-size: clamp(.9375rem, 3.2vw, 1.0625rem);
}
.foot-mail a { overflow-wrap: anywhere; }
.foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.fine {
  margin: 2.5rem 0 0; padding-top: 1.35rem; border-top: 1px solid var(--line);
  font-size: .875rem; color: var(--slate);
}