/* === 01-fonts.css === */
/* ---------------------------------------------------------------------------
   Fonts — self-hosted, latin subset only.
   No request ever leaves the origin for a typeface. Files are committed to the
   repo; refresh them with `npm run fonts`.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400-normal.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-500-normal.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-600-normal.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-300-normal.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-400-normal.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-400-italic.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;
}

/* === 02-tokens.css === */
/* ---------------------------------------------------------------------------
   Design tokens.

   These six colours are the entire palette. Do not introduce a seventh, and do
   not use a hex value anywhere else in the codebase — reference the token.

   Ratio across any page: 60% sand/ivory · 20% latte/stone · 10% coffee ·
   10% caramel. Caramel is an accent — rules, small labels, one button state.
   Never a background panel.

   Contrast: caramel on sand fails WCAG AA for body text. Anything that must be
   read is coffee. See scripts/audit.mjs for the check that enforces this.
   --------------------------------------------------------------------------- */

:root {
  /* -- Palette ------------------------------------------------------------- */

  --sand: #f3eee7; /* primary canvas */
  --ivory: #faf8f4; /* reading areas */
  --latte: #d7c7b4; /* secondary warmth */
  --stone: #b7aa9b; /* rules, borders */
  --caramel: #b78658; /* accent only */
  --coffee: #3a2c24; /* text, structural anchor */

  /* Derived, for text that should recede without leaving the palette.
     Both stay above 4.5:1 on sand and ivory — checked in the audit. */
  --coffee-soft: color-mix(in srgb, var(--coffee) 82%, var(--sand));
  --coffee-faint: color-mix(in srgb, var(--coffee) 68%, var(--sand));

  /* -- Typefaces ----------------------------------------------------------- */

  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* -- Type scale ---------------------------------------------------------- *
     Fluid between a 375px and a 1440px viewport, clamped at both ends. Roles
     are fixed: serif carries display, sans carries everything read or operated.

       display   H1 — one per page
       title     H2 — section openings, project titles
       subtitle  H3 — subheads within a section
       lede      introductory sans paragraph, one per section at most
       body      default
       small     captions, footnotes, footer
       label     tracked-out uppercase eyebrow                                */

  --text-display: clamp(2.5rem, 1.65rem + 3.6vw, 4.5rem);
  --text-title: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --text-subtitle: clamp(1.375rem, 1.24rem + 0.58vw, 1.75rem);
  --text-lede: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --text-body: clamp(1rem, 0.98rem + 0.09vw, 1.0625rem);
  --text-small: clamp(0.8125rem, 0.79rem + 0.09vw, 0.875rem);
  --text-label: 0.75rem;

  --leading-display: 1.08;
  --leading-title: 1.15;
  --leading-subtitle: 1.3;
  --leading-body: 1.7; /* generous, per the house rules */
  --leading-tight: 1.45;

  --tracking-display: -0.015em;
  --tracking-label: 0.14em;

  /* -- Spacing ------------------------------------------------------------- *
     A 4px-derived scale. Section spacing is fluid so a page breathes more on a
     large screen without leaving gaps on a small one.                        */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --section-y-tight: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);

  /* -- Measure and gutters ------------------------------------------------- *
     Large margins are part of the brand, not a default.                      */

  --measure: 65ch; /* reading width for body copy */
  --measure-tight: 46ch; /* ledes and pull quotes */
  --container: 74rem;
  --container-narrow: 46rem; /* journal articles, single-column pages */
  --gutter: clamp(1.5rem, 1rem + 4vw, 6rem);

  /* -- Structure ----------------------------------------------------------- *
     Thin rules referencing the line weights of an architectural drawing.     */

  --rule: 1px solid var(--stone);
  --rule-fine: 1px solid color-mix(in srgb, var(--stone) 45%, transparent);
  --rule-accent: 1px solid var(--caramel);

  --header-h: 5.5rem;
  --logo-w: 9.375rem; /* 150px — ~69px tall, sits inside the header */
  --logo-w-min: 8.75rem; /* 140px — the mark must never render below this */

  --transition: 160ms ease;
}

/* === 03-base.css === */
/* ---------------------------------------------------------------------------
   Base — reset, element defaults, and the type roles.
   Anything true of every page belongs here. Components go in later layers.
   --------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--sand);
  color: var(--coffee);
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -- Type roles ------------------------------------------------------------ */

h1,
h2,
h3,
.display,
.title,
.subtitle {
  font-family: var(--serif);
  font-weight: 300;
  text-wrap: balance;
}

h1,
.display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

h2,
.title {
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
}

h3,
.subtitle {
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
}

/* A lede is sans, not serif — it is read, not looked at. One per section. */
.lede {
  max-width: var(--measure-tight);
  font-size: var(--text-lede);
  line-height: var(--leading-tight);
  color: var(--coffee);
}

.small,
small,
figcaption {
  font-size: var(--text-small);
  line-height: var(--leading-tight);
  color: var(--coffee-soft);
}

/* Tracked-out uppercase eyebrow. Sans, always — never set the serif in caps. */
.label {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--coffee-soft);
}

p,
li,
dd {
  max-width: var(--measure);
  text-wrap: pretty;
}

/* -- Elements -------------------------------------------------------------- */

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--transition);
}

a:hover {
  text-decoration-color: var(--caramel);
}

blockquote {
  max-width: var(--measure-tight);
  font-family: var(--serif);
  font-size: var(--text-subtitle);
  font-style: italic;
  font-weight: 400;
  line-height: var(--leading-tight);
  padding-left: var(--space-m);
  border-left: 2px solid var(--caramel);
}

ul,
ol {
  padding-left: 1.1em;
}

hr {
  border: 0;
  border-top: var(--rule);
  margin-block: var(--space-l);
}

/* Forms inherit the type stack rather than the platform's. */
input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
}

/* Focus must always be visible and must never be removed.

   The ring is coffee, not caramel. Caramel on sand measures 2.77:1, which
   fails WCAG 1.4.11 (non-text contrast needs 3:1) — a caramel-only focus ring
   would be a real accessibility defect, not a stylistic one. Coffee carries
   the indicator at 11.62:1; caramel sits outside it as a halo, so the accent
   is still visible without being load-bearing. */
:focus-visible {
  outline: 2px solid var(--coffee);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--caramel);
  border-radius: 1px;
}

/* -- Utilities ------------------------------------------------------------- */

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

/* Keyboard users land here first. */
.skip-link {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  background: var(--ivory);
  border: var(--rule);
  font-size: var(--text-small);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

@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;
  }
}

/* === 04-layout.css === */
/* ---------------------------------------------------------------------------
   Layout primitives.

   Five things, deliberately. Anything a page needs should be expressible as a
   combination of these; if it is not, add a sixth here rather than a one-off
   rule in a page stylesheet.

     .container   horizontal frame and gutters
     .section     vertical rhythm between bands
     .rule        the thin architectural line
     .split       two-column, content-led
     .card        a bordered block on ivory
   --------------------------------------------------------------------------- */

/* -- Container ------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.container--wide {
  max-width: none;
}

/* -- Section --------------------------------------------------------------- */

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

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

/* A full-bleed band. Coffee is the only inverted surface on the site. */
.section--ivory {
  background: var(--ivory);
}

.section--latte {
  background: var(--latte);
}

.section--coffee {
  background: var(--coffee);
  color: var(--sand);
}

.section--coffee .label,
.section--coffee .small {
  color: color-mix(in srgb, var(--sand) 82%, var(--coffee));
}

.section--coffee blockquote {
  border-left-color: var(--caramel);
}

/* Focus rings need to invert too — coffee on coffee is invisible. */
.section--coffee :focus-visible {
  outline-color: var(--sand);
}

/* Stacking rhythm inside a section, without margin collapse surprises. */
.stack > * + * {
  margin-top: var(--space-m);
}

.stack--tight > * + * {
  margin-top: var(--space-s);
}

.stack--loose > * + * {
  margin-top: var(--space-l);
}

/* -- Rule ------------------------------------------------------------------ */

.rule {
  border: 0;
  border-top: var(--rule);
  margin: 0;
}

.rule--fine {
  border-top: var(--rule-fine);
}

.rule--accent {
  border-top: var(--rule-accent);
}

/* A short rule used to open a section, like a drawing's leader line. */
.rule--short {
  width: 3.5rem;
}

/* -- Split ----------------------------------------------------------------- *
   Two columns from 48rem up. The default is content-led: a narrower first
   column for a label or heading, a wider second for the prose.              */

.split {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 48rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-xl);
    align-items: start;
  }

  .split--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split--wide-first {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* -- Grid ------------------------------------------------------------------ *
   For card rows. Collapses to one column, then two, then the count given.   */

.grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

/* -- Card ------------------------------------------------------------------ */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--ivory);
  border: var(--rule-fine);
}

.card > * {
  max-width: none;
}

.card__title {
  font-family: var(--serif);
  font-size: var(--text-subtitle);
  font-weight: 400;
  line-height: var(--leading-subtitle);
}

/* A card that is entirely a link. The whole block responds, not just the text. */
.card--link {
  text-decoration: none;
  transition:
    border-color var(--transition),
    background-color var(--transition);
}

.card--link:hover {
  border-color: var(--caramel);
}

/* -- Buttons --------------------------------------------------------------- *
   Two only. Primary is coffee; secondary is a coffee outline. Caramel appears
   as the hover border, which is the one button state it is allowed.         */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--space-2xs) var(--space-m);
  border: 1px solid var(--coffee);
  background: var(--coffee);
  color: var(--sand);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition);
}

.button:hover {
  background: color-mix(in srgb, var(--coffee) 88%, var(--caramel));
  border-color: color-mix(in srgb, var(--coffee) 88%, var(--caramel));
}

.button--secondary {
  background: transparent;
  color: var(--coffee);
}

.button--secondary:hover {
  background: transparent;
  border-color: var(--caramel);
  color: var(--coffee);
}

.section--coffee .button {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--coffee);
}

.section--coffee .button--secondary {
  background: transparent;
  border-color: var(--sand);
  color: var(--sand);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* -- Page frame ------------------------------------------------------------ */

main {
  flex: 1;
}

/* === 05-header.css === */
/* ---------------------------------------------------------------------------
   Header.

   Logo left, navigation right. Below 48rem the navigation collapses into a
   disclosure — a native <details>, so it works with no JavaScript at all and
   inherits the platform's keyboard and screen-reader behaviour. No hamburger
   animation: the control says "Menu", and says "Close" when open.
   --------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 10;
  background: var(--sand);
  border-bottom: var(--rule-fine);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
  padding-block: var(--space-s);
}

/* -- Logo ------------------------------------------------------------------ *
   The script mark carries an accent; the name does not. The accessible name is
   always "Lapunne" — see the aria-label in partials/header.njk. Do not let the
   accent leak into alt text, titles or schema.

   The mark is never rendered below 140px wide. Under that it stops reading as
   a signature and becomes a smudge, so the L icon takes over instead.        */

.site-logo {
  flex: none;
  display: block;
  color: var(--coffee);
  line-height: 0;
  text-decoration: none;
}

/* The spans must be block-level: an inline wrapper ignores width, and the
   inlined SVG has no width/height attributes — only a viewBox — so it would
   collapse to nothing. Width goes on the wrapper, the SVG fills it, and the
   viewBox supplies the aspect ratio. */
.site-logo__wordmark,
.site-logo__icon {
  display: block;
}

.site-logo svg {
  width: 100%;
  height: auto;
}

.site-logo__wordmark {
  width: var(--logo-w);
  min-width: var(--logo-w-min);
}

.site-logo__icon {
  display: none;
  width: 1.75rem;
}

/* Below 22.5rem (360px) the wordmark can no longer hold 140px alongside the
   menu control and the gutters. Swap to the icon rather than shrink the mark. */
@media (max-width: 22.5rem) {
  .site-logo__wordmark {
    display: none;
  }

  .site-logo__icon {
    display: block;
  }
}

/* The mark is wide relative to its height (2.18:1), so its width is what sets
   the header's height: 150px wide renders ~69px tall, which sits inside the
   88px header with air. Anything larger and the header starts to dominate the
   page, which is the opposite of what a quiet practice site should do. The
   width is therefore the same at every breakpoint — only the fallback to the
   L icon changes.                                                            */

/* -- Navigation ------------------------------------------------------------ */

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list li {
  max-width: none;
}

.site-nav__link {
  display: block;
  padding-block: var(--space-3xs);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--coffee);
}

/* The current page is marked with a caramel rule, not a colour change —
   caramel cannot carry text, and colour alone would not be a sufficient cue. */
.site-nav__link[aria-current='page'] {
  border-bottom: var(--rule-accent);
}

.site-nav__link:hover {
  text-decoration: underline;
  text-decoration-color: var(--caramel);
  text-underline-offset: 0.4em;
}

/* -- Disclosure (below 48rem) ---------------------------------------------- */

.site-nav__disclosure {
  position: relative;
}

.site-nav__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding-inline: var(--space-xs);
  border: var(--rule);
  cursor: pointer;
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  list-style: none; /* removes the default triangle */
}

.site-nav__toggle::-webkit-details-marker {
  display: none;
}

.site-nav__toggle .is-open,
.site-nav__disclosure[open] .site-nav__toggle .is-closed {
  display: none;
}

.site-nav__disclosure[open] .site-nav__toggle .is-open {
  display: inline;
}

.site-nav__disclosure[open] .site-nav__toggle {
  border-color: var(--caramel);
}

/* The panel sits over the page rather than pushing it down. */
.site-nav__panel {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  right: 0;
  min-width: 13rem;
  padding: var(--space-m);
  background: var(--ivory);
  border: var(--rule);
}

.site-nav__panel .site-nav__link {
  font-size: var(--text-body);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* -- Desktop --------------------------------------------------------------- *
   From 48rem the disclosure dissolves: the control is removed from the
   accessibility tree and the panel becomes an ordinary horizontal list.

   `display: contents` alone is not enough — a closed <details> hides its
   content through the ::details-content pseudo-element, so that has to be
   released explicitly or the desktop nav would be invisible.                */

@media (min-width: 48rem) {
  .site-nav__disclosure {
    display: contents;
  }

  .site-nav__disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .site-nav__toggle {
    display: none;
  }

  .site-nav__panel {
    position: static;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: clamp(var(--space-s), 2vw, var(--space-l));
  }

  /* Desktop navigation is set in sentence case at small size, not in caps.
     The buttons and eyebrow labels already carry the uppercase voice; a third
     use would make the page shout. */
  .site-nav__link {
    font-size: var(--text-small);
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
  }
}

/* === 06-footer.css === */
/* ---------------------------------------------------------------------------
   Footer.

   Contact block, location, and a deliberately quiet products block. The
   products are not the subject of this site — DesignFlowOS and Dolemai each
   have their own — so they sit at small size, below the contact details, and
   never compete with the enquiry route.
   --------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--section-y-tight);
  padding-block: var(--section-y-tight) var(--space-l);
  border-top: var(--rule);
  background: var(--sand);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
}

.site-footer__mark {
  display: block; /* inline would ignore the width and let the SVG fill the column */
  width: var(--logo-w);
  min-width: var(--logo-w-min);
  color: var(--coffee);
}

.site-footer__mark svg {
  width: 100%;
  height: auto;
}

/* <address> is italic by default. The footer is contact detail, not emphasis. */
.site-footer__contact {
  margin-top: var(--space-m);
  font-style: normal;
}

.site-footer__contact a {
  text-decoration-color: var(--caramel);
}

.site-footer__heading {
  margin-bottom: var(--space-xs);
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list li {
  max-width: none;
}

.site-footer__list li + li {
  margin-top: var(--space-3xs);
}

.site-footer__list a {
  font-size: var(--text-small);
  text-decoration: none;
}

.site-footer__list a:hover {
  text-decoration: underline;
  text-decoration-color: var(--caramel);
}

/* Products: same list treatment, but muted and set apart. */
.site-footer__products a {
  color: var(--coffee-soft);
}

.site-footer__products .arrow {
  display: inline-block;
  margin-left: 0.15em;
  color: var(--caramel);
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
  margin-top: var(--section-y-tight);
  padding-top: var(--space-m);
  border-top: var(--rule-fine);
}

.site-footer__base p {
  margin: 0;
  font-size: var(--text-small);
  color: var(--coffee-faint);
}

/* === 07-styleguide.css === */
/* ---------------------------------------------------------------------------
   Styleguide page only.

   Not part of the design system — this is the harness that displays it. Keep
   page-specific presentation here so nothing leaks into the primitives.
   --------------------------------------------------------------------------- */

.sg-section + .sg-section {
  margin-top: var(--section-y);
  padding-top: var(--section-y-tight);
  border-top: var(--rule-fine);
}

.sg-section__head {
  margin-bottom: var(--space-l);
}

.sg-note {
  max-width: var(--measure);
  margin-top: var(--space-2xs);
  font-size: var(--text-small);
  color: var(--coffee-soft);
}

.sg-demo {
  margin-top: var(--space-m);
  padding: var(--space-m);
  background: var(--ivory);
  border: var(--rule-fine);
}

.sg-demo--plain {
  background: none;
  border: 0;
  padding: 0;
}

/* -- Swatches -------------------------------------------------------------- */

.sg-swatches {
  display: grid;
  /* Explicit counts, not auto-fit — six swatches must divide evenly or one is
     left stranded on a second row, which reads as a mistake in a reference. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .sg-swatches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .sg-swatches {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.sg-swatch {
  max-width: none;
  border: var(--rule-fine);
}

.sg-swatch__chip {
  height: 5.5rem;
}

.sg-swatch__meta {
  padding: var(--space-2xs) var(--space-xs) var(--space-xs);
  background: var(--ivory);
}

.sg-swatch__name {
  font-size: var(--text-small);
  font-weight: 500;
}

.sg-swatch__hex,
.sg-swatch__role {
  display: block;
  font-size: var(--text-small);
  color: var(--coffee-faint);
}

.sg-swatch__hex {
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* -- Type specimens -------------------------------------------------------- */

.sg-specimen + .sg-specimen {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: var(--rule-fine);
}

.sg-specimen__meta {
  margin-bottom: var(--space-2xs);
}

/* -- Logo tests ------------------------------------------------------------ */

.sg-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-l);
}

.sg-logo-test {
  color: var(--coffee);
}

.sg-logo-test--min {
  width: var(--logo-w-min);
}

.sg-logo-test--default {
  width: var(--logo-w);
}

.sg-logo-test--icon {
  width: 1.75rem;
}

.sg-logo-test--reversed {
  width: var(--logo-w);
  padding: var(--space-m);
  background: var(--coffee);
  color: var(--sand);
}

.sg-icons {
  display: flex;
  align-items: flex-end;
  gap: var(--space-m);
}

.sg-icons img {
  image-rendering: pixelated; /* so the small sizes can actually be judged */
  border: var(--rule-fine);
}

/* -- Token table ----------------------------------------------------------- */

.sg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.sg-table th,
.sg-table td {
  padding: var(--space-2xs) var(--space-s) var(--space-2xs) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--rule-fine);
}

.sg-table th {
  font-weight: 500;
  color: var(--coffee-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-label);
}

.sg-table code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.92em;
}

/* -- Split and grid demos -------------------------------------------------- */

.sg-block {
  padding: var(--space-s);
  background: var(--latte);
  font-size: var(--text-small);
}

.sg-block--alt {
  background: var(--stone);
}

/* === 08-home.css === */
/* ---------------------------------------------------------------------------
   Home page.

   Everything here should eventually be expressible with the primitives in
   04-layout.css. What remains is genuinely page-specific: the hero proportions,
   the numbered process track, and the promise list in the coffee band.
   --------------------------------------------------------------------------- */

/* -- Hero ------------------------------------------------------------------ */

.hero {
  padding-block: var(--section-y) var(--section-y-tight);
}

.hero__availability {
  margin-bottom: var(--space-m);
}

.hero__sub {
  margin-top: var(--space-l);
}

.hero__actions {
  margin-top: var(--space-xl);
}

.hero__figure {
  margin: 0;
}

.hero__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hero__caption {
  margin-top: var(--space-2xs);
}

/* -- Ready by Completion teaser -------------------------------------------- */

.rbc__note {
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: var(--rule-fine);
}

/* -- The approach ---------------------------------------------------------- */

.promise {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: promise;
}

.promise li {
  max-width: var(--measure);
  padding-block: var(--space-s);
  border-top: 1px solid color-mix(in srgb, var(--sand) 28%, var(--coffee));
}

.promise li:first-child {
  border-top: 0;
}

/* -- Process --------------------------------------------------------------- */

.process {
  display: grid;
  gap: var(--space-l);
  margin: 0;
  padding: 0;
}

@media (min-width: 48rem) {
  .process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-m);
  }
}

.process__step {
  padding-top: var(--space-s);
  border-top: var(--rule);
}

.process__step dt {
  font-family: var(--serif);
  font-size: var(--text-subtitle);
  font-weight: 400;
  line-height: var(--leading-subtitle);
}

.process__step dd {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-small);
  line-height: var(--leading-tight);
  color: var(--coffee-soft);
}

/* The first step carries the caramel rule, so the sequence has a start. */
.process__step:first-child {
  border-top-color: var(--caramel);
}

/* -- Audience cards -------------------------------------------------------- */

.audience {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 40rem) {
  .audience {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.audience .card__title {
  font-size: var(--text-subtitle);
}

/* -- Closing --------------------------------------------------------------- */

.closing {
  text-align: left;
}

.closing__actions {
  margin-top: var(--space-l);
}