/* ==========================================================================
   Anatory Software, "Pacific" design system
   Oregon-rooted: evergreen + warm bone, cedar accent, soft-serif display.
   Single stylesheet for the whole site. No build step, no dependencies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted latin subset, no external CDN)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens

   The palette is one scene, not three arbitrary hues: evergreen treescape,
   cedar, river blue. Green carries the type, cedar marks the
   accents, and the blue lives mostly in the atmospheric wash (section 5a) so
   the pages read as a landscape rather than a wall of green.

   Contrast measured against the adjacent surface (WCAG 2.1), verified for
   every pairing the site actually uses, including composites like the badge:
     ink    on bg  : 14.3:1 light / 15.1:1 dark
     muted  on bg  :  6.6:1 light /  7.0:1 dark
     accent on bg  :  3.1:1 light, decorative and large text ONLY
     accent-text   :  5.9:1 light /  7.6:1 dark, links and body-size accent
   Use --accent for rules, marks and display type; --accent-text for anything
   at body size. They are separate tokens precisely so this stays honest.

   --accent-text is deliberately much darker than --accent. It has to clear 4.5:1
   not against the flat page but against the darkest point of the wash behind it,
   and against the tinted .badge surface. Do not lighten it toward --accent, and
   do not "simplify" the two back into one token.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --bg: #faf7f0;
  --surface: #ffffff;
  --surface-sunk: #f2ede2;
  --ink: #0f2a22;
  --muted: #4a5d55;
  --accent: #c87a3f;
  --accent-text: #8f4f1e;
  --river: #6ec6ea;
  --river-deep: #35708f;
  /* Channel triplets for the wash, kept separate from the solid --river tokens.
     rgb(R G B / a%) is supported far more widely than color-mix(), and one
     unsupported component would invalidate the whole background-image
     declaration and delete the wash entirely.

     These blues are deliberately LIGHTER than the solid ones. WCAG measures
     luminance while the eye reads chroma, so a light, saturated blue at high
     opacity looks far bluer than a muted blue at low opacity while costing
     much less contrast against the cedar text on top of it. */
  --wash-1-rgb: 124 203 236;
  --wash-2-rgb: 96 176 214;
  --wash-3-rgb: 200 122 63;
  --bg-rgb: 250 247 240;
  --border: #e5dfd3;
  --border-strong: #d3cabb;
  --shadow: 15 42 34;

  /* Wash layer opacities, verified by sampling the real rendered pixels under
     every glyph rather than by eye. These are high because the wash blues are
     light: the binding constraint is the cedar .eyebrow sitting on the densest
     patch, which needs the backdrop to stay above ~0.69 relative luminance.
     Raise these and re-run the glyph-level contrast check, not just your eye. */
  --wash-a: 42%;
  --wash-b: 30%;
  --wash-c: 18%;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.25rem, 0.4vw + 1.15rem, 1.4rem);
  --step-2: clamp(1.5rem, 1vw + 1.25rem, 1.9rem);
  --step-3: clamp(1.9rem, 2vw + 1.4rem, 2.6rem);
  --step-4: clamp(2.4rem, 5vw + 1.2rem, 4.25rem);

  /* Spacing (8px base) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 7rem;

  --wide: 72rem;
  --prose: 38rem;
  --radius: 0.75rem;
  --radius-lg: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1a18;
    --surface: #12241f;
    --surface-sunk: #091714;
    --ink: #e8ede9;
    --muted: #92a79c;
    --accent: #e09a5f;
    --accent-text: #e09a5f;
    --river: #7cb8d8;
    --river-deep: #4a90b5;
    --wash-1-rgb: 124 184 216;
    --wash-2-rgb: 90 158 196;
    --wash-3-rgb: 224 154 95;
    --bg-rgb: 11 26 24;
    --border: #1e362f;
    --border-strong: #2b4a40;
    --shadow: 0 0 0;
    /* Dark washes lighten the page, which cuts contrast for light text, so
       they run lower than their light-mode counterparts. */
    --wash-a: 24%;
    --wash-b: 17%;
    --wash-c: 12%;
  }
}

/* Manual override wins in both directions */
:root[data-theme="dark"] {
  --bg: #0b1a18;
  --surface: #12241f;
  --surface-sunk: #091714;
  --ink: #e8ede9;
  --muted: #92a79c;
  --accent: #e09a5f;
  --accent-text: #e09a5f;
  --river: #7cb8d8;
  --river-deep: #4a90b5;
  --wash-1-rgb: 124 184 216;
  --wash-2-rgb: 90 158 196;
  --wash-3-rgb: 224 154 95;
  --bg-rgb: 11 26 24;
  --border: #1e362f;
  --border-strong: #2b4a40;
  --shadow: 0 0 0;
  --wash-a: 24%;
  --wash-b: 17%;
  --wash-c: 12%;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

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

body {
  /* 5a. Atmospheric wash: the view from the cliff. Irregular overlapping
     ellipses of river blue with one low cedar note, fading into the page.
     Painted as background layers on <body> rather than a pseudo-element so it
     bleeds the full viewport width with no extra markup, no z-index stacking
     against the sticky header, and no horizontal overflow. The first layer is
     the fade, because CSS paints the first background-image on top. It only
     covers the top band, so long legal pages do not carry it all the way down. */
  background-color: var(--bg);
  background-image:
    linear-gradient(to bottom, rgb(var(--bg-rgb) / 0) 48%, rgb(var(--bg-rgb)) 100%),
    radial-gradient(34% 40% at 13% 14%, rgb(var(--wash-1-rgb) / var(--wash-a)), transparent 70%),
    radial-gradient(26% 30% at 37% 2%, rgb(var(--wash-2-rgb) / var(--wash-b)), transparent 72%),
    radial-gradient(30% 26% at 69% 6%, rgb(var(--wash-3-rgb) / var(--wash-c)), transparent 70%),
    radial-gradient(38% 44% at 90% 28%, rgb(var(--wash-1-rgb) / var(--wash-a)), transparent 74%),
    radial-gradient(48% 38% at 56% 24%, rgb(var(--wash-2-rgb) / var(--wash-c)), transparent 76%),
    radial-gradient(30% 36% at 2% 46%, rgb(var(--wash-1-rgb) / var(--wash-b)), transparent 72%);
  background-repeat: no-repeat;
  background-size: 100% min(82vh, 50rem);
  background-position: 50% 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-1);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--border-strong);
  text-decoration-color: color-mix(in srgb, var(--accent-text) 40%, transparent);
  transition: text-decoration-color 120ms ease, color 120ms ease;
}

a:hover {
  text-decoration-color: currentColor;
}

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

ul,
ol {
  padding-inline-start: 1.25em;
}

hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--sp-5) 0;
}

code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--surface-sunk);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   4. Accessibility
   -------------------------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -4rem;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-2);
  text-decoration: none;
  font-weight: 500;
  transition: top 150ms ease;
}

.skip-link:focus {
  top: var(--sp-2);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

@media (min-width: 40rem) {
  .wrap {
    padding-inline: var(--sp-4);
  }
}

.section {
  padding-block: var(--sp-6);
}

.section--tight {
  padding-block: var(--sp-5);
}

.section + .section {
  border-top: 1px solid var(--border);
}

main {
  flex: 1;
}

/* Small caps eyebrow label: the recurring "Pacific" signal */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--sp-2);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  /* solid fallback first: color-mix inside the gradient invalidates the whole
     declaration on older engines, which would delete the rule line entirely */
  background: var(--border);
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--accent) 55%, transparent),
    transparent
  );
}

.lede {
  font-size: var(--step-1);
  color: var(--muted);
  max-width: 34rem;
  line-height: 1.55;
}

.measure {
  max-width: var(--prose);
}

.measure > * + * {
  margin-top: var(--sp-2);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.brand__mark {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent);
  flex: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 500;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: var(--sp-6) var(--sp-5);
}

@media (min-width: 48rem) {
  .hero {
    padding-block: var(--sp-7) var(--sp-6);
  }
}

.hero h1 {
  max-width: 16ch;
}

.hero .lede {
  margin-top: var(--sp-3);
  max-width: 44ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* Decorative horizon rule, the recurring "Pacific" motif */
.horizon {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--sp-5);
  max-width: 10rem;
}

/* A quiet legal/attribution note: smaller than body, never .lede */
.fineprint {
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: var(--sp-3);
}

/* Three strokes: cedar, river, treeline. */
.horizon span {
  height: 2px;
  border-radius: 2px;
}

.horizon span:nth-child(1) {
  width: 100%;
  background: var(--accent);
}
.horizon span:nth-child(2) {
  width: 64%;
  background: var(--river-deep);
}
.horizon span:nth-child(3) {
  width: 36%;
  background: var(--muted);
  background: color-mix(in srgb, var(--muted) 65%, transparent);
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1;
  padding: 0.8rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease,
    border-color 120ms ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--ink);
  color: var(--bg);
}

.btn--primary:hover {
  background: var(--accent-text);
  background: color-mix(in srgb, var(--ink) 88%, var(--accent));
}

.btn--ghost {
  /* 50% ink against the page gives the 3:1 boundary WCAG 1.4.11 wants for a
     control whose outline is its only affordance. --border-strong is ~1.5:1
     and is fine for decorative hairlines, but not for this. */
  border-color: var(--border-strong);
  border-color: color-mix(in srgb, var(--ink) 50%, var(--bg));
  color: var(--ink);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--accent);
  background: var(--surface);
}

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 44rem) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
}

.card h3 {
  margin-bottom: var(--sp-1);
}

.card p {
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.6;
}

/* Numbered principle card */
.principle {
  border: 0;
  background: transparent;
  padding: 0;
  /* reset .card's radius, or the 2px top rule curls down at both ends */
  border-radius: 0;
  border-top: 2px solid var(--accent);
  padding-top: var(--sp-2);
}

.principle__n {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent-text);
  display: block;
  margin-bottom: var(--sp-1);
}

/* App card: the featured product tile */
.app-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
}

@media (min-width: 44rem) {
  .app-card {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4);
  }
}

.app-card__icon {
  width: 5rem;
  height: 5rem;
  border-radius: 1.15rem;
  flex: none;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--accent);
  overflow: hidden;
}

.app-card__icon svg {
  width: 55%;
  height: 55%;
}

.app-card__body {
  flex: 1;
  min-width: 0;
}

.app-card__body p {
  color: var(--muted);
  margin-top: var(--sp-1);
}

.app-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  background: var(--surface-sunk);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent-text);
  border: 1px solid var(--border-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   10. Definition-style lists (contact routing, data summaries)
   -------------------------------------------------------------------------- */

.deflist {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

@media (min-width: 44rem) {
  .deflist {
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: var(--sp-2) var(--sp-4);
  }
}

.deflist dt {
  font-weight: 600;
  color: var(--ink);
}

.deflist dd {
  margin: 0;
  color: var(--muted);
}

/* Hairline between rows: these tables carry the privacy summaries, so they
   need to be scannable rather than a wall of paired text. */
@media (min-width: 44rem) {
  .deflist dt,
  .deflist dd {
    border-top: 1px solid var(--border);
    padding-top: var(--sp-2);
  }
  .deflist dt:first-of-type,
  .deflist dd:first-of-type {
    border-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 43.99rem) {
  .deflist dd {
    margin-top: 0.25rem;
  }
  .deflist dt {
    border-top: 1px solid var(--border);
    padding-top: var(--sp-2);
  }
  .deflist dt:first-of-type {
    border-top: 0;
    padding-top: 0;
  }
}

/* --------------------------------------------------------------------------
   11. Screenshot gallery: CSS scroll-snap, zero JavaScript
   -------------------------------------------------------------------------- */

.shots {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: var(--sp-1) var(--sp-3);
  scroll-padding-inline: var(--sp-3);
  /* bleed to the viewport edge so shots feel like a filmstrip */
  margin-inline: calc(var(--sp-3) * -1);
  padding-inline: var(--sp-3);
  scrollbar-color: var(--border-strong) transparent;
}

.shots > * {
  scroll-snap-align: start;
  flex: none;
  width: min(15rem, 62vw);
  aspect-ratio: 9 / 19.5;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-sunk);
  overflow: hidden;
}

.shots img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder tile until real screenshots exist */
.shot-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: var(--step--1);
  text-align: center;
  padding: var(--sp-2);
}

/* --------------------------------------------------------------------------
   12. Prose: legal and long-form pages
   -------------------------------------------------------------------------- */

.prose {
  max-width: var(--prose);
}

.prose > * + * {
  margin-top: var(--sp-2);
}

.prose h2 {
  font-size: var(--step-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-1);
}

.prose h2:first-of-type {
  margin-top: var(--sp-4);
}

.prose h3 {
  margin-top: var(--sp-3);
}

.prose ul,
.prose ol {
  display: grid;
  gap: 0.4rem;
}

.prose li::marker {
  /* accent-text, not accent: ordered-list markers are read as text, and the
     lighter cedar is only 3.1:1. */
  color: var(--accent-text);
}

.prose strong {
  font-weight: 600;
  color: var(--ink);
}

.doc-meta {
  font-size: var(--step--1);
  color: var(--muted);
  border-left: 2px solid var(--accent);
  padding-left: var(--sp-2);
  margin-bottom: var(--sp-4);
}

/* Table of contents for long legal docs */
.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--step--1);
}

.toc ol {
  display: grid;
  gap: 0.3rem;
  margin-top: var(--sp-1);
}

/* --------------------------------------------------------------------------
   12a. Palette swatches (the colophon easter egg)
   Chip colours are modifier classes, not inline styles, because style-src is
   'self' and an inline style attribute would be blocked outright.
   -------------------------------------------------------------------------- */

.swatches {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  list-style: none;
  padding: 0;
}

@media (min-width: 34rem) {
  .swatches {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 58rem) {
  .swatches {
    grid-template-columns: repeat(4, 1fr);
  }
}

.swatch__chip {
  height: 5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  margin-bottom: 0.6rem;
}

/* Fixed brand values, NOT theme tokens. The tokens invert in dark mode
   (--ink becomes near-white), which turned the "Evergreen" chip white the
   first time around. A colophon shows the colors themselves. */
.swatch__chip--evergreen {
  background: #0f2a22;
}
.swatch__chip--cedar {
  background: #c87a3f;
}
.swatch__chip--river {
  background: #6ec6ea;
}
/* Bone on the bone page: the border is what makes this one visible. */
.swatch__chip--bone {
  background: #faf7f0;
}

.swatch__hex {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.swatch h2 {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0.25rem;
}

.swatch p {
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-sunk);
  padding-block: var(--sp-5) var(--sp-4);
  margin-top: var(--sp-6);
  font-size: var(--step--1);
}

.site-footer .wrap {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 44rem) {
  .site-footer .wrap {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-2);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-footer__brand p {
  color: var(--muted);
  margin-top: var(--sp-2);
  max-width: 28ch;
}

.colophon {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   14. 404
   -------------------------------------------------------------------------- */

.center-panel {
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--sp-7);
  min-height: 50vh;
}

.center-panel .horizon {
  margin-inline: auto;
}