: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); }

.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-figure figcaption { margin-top: 2.1rem; }

/* ---------- 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); padding-right: 0; }
  .stat-grid > div:nth-child(odd) { padding-left: 0; }
}
@media (min-width: 62rem) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  /* Only the two outer edges lose their padding. The rule that dropped it from
     every odd cell survived into this breakpoint and collapsed the third column
     onto its own divider. */
  .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:nth-child(odd) { padding-left: 1.75rem; }
  .stat-grid > div:nth-child(2n) { padding-right: 1.75rem; }
  .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;
}
@media (prefers-color-scheme: dark) { .stat-grid dt { color: var(--accent-hover); } }
@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; }

/* ---------- wide photograph ---------- */

figure.wide-plate { margin: 2.75rem 0 0; }
figure.wide-plate img {
  width: 100%; border-radius: 8px; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

/* ---------- 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; }

/* Two fixed columns: what the first print did on the left, what the files do
   now on the right, one pair of headings for all four rows. The per-line chips
   stay in the markup for the stacked layout and for screen readers, and are
   clipped once the headings above are doing that job. */
.versus { margin: 0 0 2.25rem; }
.versus dl { margin: 0; display: grid; gap: 1.75rem; }
.versus-head { display: none; }
.versus > dl > div { border-top: 2px solid var(--ink); padding-top: 1rem; }
.versus dt {
  font-family: var(--sans); font-weight: 750; font-size: 1.125rem;
  letter-spacing: -.015em; margin-bottom: .8rem;
}
.versus dd {
  margin: 0 0 .6rem; font-family: var(--sans);
  font-size: .9375rem; line-height: 1.55;
}
.versus dd:last-child { margin-bottom: 0; }
.versus .was { color: var(--ink-soft); }
.versus .now { color: var(--ink); }
@media (min-width: 52rem) {
  .versus-head {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem;
    margin: 0 0 .4rem; font-family: var(--sans); font-size: .8125rem;
    font-weight: 750; letter-spacing: .16em; text-transform: uppercase;
    color: var(--slate);
  }
  .versus-head span:last-child { color: var(--accent); }
  .versus > dl > div {
    display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 2.5rem;
    align-items: start;
  }
  .versus dt { grid-column: 1 / -1; margin-bottom: .55rem; }
  .versus dd { margin: 0; }
  .versus .tag {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
}

/* ---------- 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 .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); }

/* ---------- contact form ---------- */

/* Posts to a function on this domain, so the footer's claim about third-party
   requests stays true, and it works with JavaScript switched off: the answer is
   a redirect to a static page, not a script rewriting this one. */
.contact-form {
  display: grid; gap: 1.1rem 1.5rem; margin-top: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .field-wide, .form-send, .form-note, .trap { grid-column: 1 / -1; }
}
.field { display: grid; gap: .4rem; }
.contact-form label {
  font-family: var(--sans); font-size: .8125rem; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font: inherit; font-family: var(--sans); font-size: 1rem;
  width: 100%; padding: .7rem .85rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--surface); border-radius: 6px;
}
.contact-form textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.contact-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50% 58%, transparent 58%),
    linear-gradient(135deg, transparent 42%, var(--ink) 42% 50%, transparent 50%);
  background-position: right 1.15rem center, right .75rem center;
  background-size: .5rem .5rem; background-repeat: no-repeat;
  padding-right: 2.25rem;
}
.form-send { margin: .35rem 0 0; }
.contact-form .btn { background: var(--accent-ink); color: var(--accent); border: 0; cursor: pointer; }
.contact-form .btn:hover { background: var(--surface); }
.form-note {
  margin: 0; font-family: var(--sans); font-size: .875rem; line-height: 1.55;
  color: var(--accent-ink); max-width: 42em;
}
/* spam trap: never shown, never focusable, and a filled one is discarded */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 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);
}