/* ==========================================================================
   ACQUAVIVA — Design Tokens & Component Styles
   Everything sits on a 24px (¼") baseline grid, vertically and horizontally.
   ========================================================================== */

@font-face {
  font-family: 'Libertine Angle';
  src: url('./assets/fonts/LinLibertineDisplay-angle.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* ---- The grid. Every spacing value is a multiple of this. ---- */
  --u: 24px; /* 1 grid cell = ¼" */
  --u0-5: 12px;
  --u1: 24px;
  --u2: 48px;
  --u3: 72px;
  --u4: 96px;
  --u5: 120px;
  --u6: 144px;
  --u8: 192px;

  /* Legacy spacing aliases, snapped to the grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 12px;
  --space-5: 24px;
  --space-6: 24px;
  --space-8: 24px;
  --space-10: 48px;
  --space-12: 48px;
  --space-16: 72px;
  --space-20: 96px;
  --space-24: 96px;
  --space-32: 144px;

  /* ---- Type. Line-heights are always multiples of 24px. ---- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 19px;
  --text-xl: clamp(24px, 1.4rem + 1vw, 30px);
  --text-2xl: clamp(30px, 1.6rem + 2vw, 42px);
  --text-3xl: clamp(34px, 1.6rem + 3.2vw, 56px);
  --text-hero: clamp(34px, 1.6rem + 3.2vw, 56px);

  --lh-1: 24px;
  --lh-2: 48px;
  --lh-3: 72px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  --transition-interactive: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --content-w: 1176px; /* 49 grid cells */
  --content-narrow: 648px;
  --content-default: 792px;
  --content-wide: 1176px;
  --content-full: 100%;

  --font-display: 'General Sans', 'Segoe UI', sans-serif;
  --font-body: 'Satoshi', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', monospace;
  --font-mark: 'Libertine Angle', 'STIX Two Math', serif;
}

/* Light mode */
:root,
[data-theme='light'] {
  --color-bg: #eef1f5;
  --color-surface: #ffffff;
  --color-surface-2: #fbfcfd;
  --color-surface-offset: #ffffff;
  --color-surface-offset-2: #f4f7fa;
  --color-surface-dynamic: #e2e8ee;
  --color-rule: #b6342c;
  --color-divider: #b6342c;
  --color-border: #c6ccd3;
  --color-border-soft: #dde3e9;

  --color-text: #171b20;
  --color-text-muted: #59626c;
  --color-text-faint: #8d97a1;
  --color-text-inverse: #f5f7f9;

  --color-primary: #c14e29;
  --color-primary-hover: #a03e1e;
  --color-primary-active: #7d2f16;
  --color-primary-highlight: #f0d9ce;

  --color-line: #5c8fc4;
  --color-line-soft: #5c8fc438;

  --shadow-sm: 0 1px 2px rgba(23, 27, 32, 0.06);
  --shadow-md: 0 4px 14px rgba(23, 27, 32, 0.07);
  --shadow-lg: 0 14px 38px rgba(23, 27, 32, 0.11);
}

[data-theme='dark'] {
  --color-bg: #0e1216;
  --color-surface: #171d24;
  --color-surface-2: #1b222a;
  --color-surface-offset: #171d24;
  --color-surface-offset-2: #1f272f;
  --color-surface-dynamic: #2a333d;
  --color-rule: #d9564a;
  --color-divider: #d9564a;
  --color-border: #333d47;
  --color-border-soft: #262f38;

  --color-text: #e4e8ec;
  --color-text-muted: #98a2ac;
  --color-text-faint: #5f6a75;
  --color-text-inverse: #12161b;

  --color-primary: #e8794c;
  --color-primary-hover: #ee8f66;
  --color-primary-active: #f4a582;
  --color-primary-highlight: #3d2a20;

  --color-line: #6fa3d6;
  --color-line-soft: #6fa3d642;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.52);
}

/* ==========================================================================
   Graph-paper ground
   The grid scrolls WITH the document (not fixed), so anything laid out on
   24px multiples stays locked between the same rules at any scroll position.
   Horizontally it's offset to line up with the content container's edge.
   ========================================================================== */

body {
  background-color: var(--color-bg);
  background-image:
    linear-gradient(var(--color-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-line-soft) 1px, transparent 1px);
  background-size: var(--u) var(--u);
  background-position: calc(max(0px, (100% - var(--content-w)) / 2)) 0;
  background-repeat: repeat;
  background-attachment: scroll;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
  padding-inline: var(--u1);
}

.section {
  padding-block: var(--u4);
}
.section--tight {
  padding-block: var(--u3);
}
@media (max-width: 780px) {
  .section {
    padding-block: var(--u3);
  }
  .section--tight {
    padding-block: var(--u2);
  }
}

/* Legacy hook — no longer painted, grid lives on <body> */
.grid-field {
  display: none;
}

/* ==========================================================================
   Double pin-red rule — the only divider on the site
   Occupies exactly one grid cell (24px); two hairlines 8px apart, centred.
   ========================================================================== */

.rule-double {
  position: relative;
  height: var(--u1);
  width: 100%;
}
.rule-double::before,
.rule-double::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-rule);
}
.rule-double::before {
  top: 7px;
}
.rule-double::after {
  top: 15px;
}

/* Full-bleed variant, edge to edge of the viewport */
.rule-double--bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Sections that used to carry a 1px border now use the double rule element,
   so kill any stray borders inherited from earlier markup. */
.section,
.section--tight,
.hero,
.page-header,
.stats,
.footer {
  border: 0;
}

/* ==========================================================================
   Typography — every line-height is a multiple of 24px
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-1);
  color: var(--color-text);
}

p {
  margin-bottom: var(--u1);
}
p:last-child {
  margin-bottom: 0;
}

/* display:flex (not inline-flex) so it never creates a baseline line-box,
   which would add sub-pixel descender space and push everything off-grid. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lh-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
}
.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: 8px;
  background: currentColor;
  flex-shrink: 0;
}
.eyebrow__text {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: break-word;
}

h1,
.h1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.018em;
}
h2,
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.014em;
  font-size: var(--text-xl);
  line-height: var(--lh-2);
}
h3,
.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--lh-1);
}

.lede {
  font-size: var(--text-lg);
  line-height: var(--lh-1);
  color: var(--color-text-muted);
  max-width: 46ch;
}

.mono-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lh-1);
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
}

/* ==========================================================================
   Header — a tile floating on the paper, ringed in the accent colour
   Total block height is 96px (4 cells) so content below stays on-grid.
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--u0-5) var(--u0-5) var(--u0-5);
  background: transparent;
  border: 0;
  transition: transform 0.3s var(--ease-out);
}
.header--hidden {
  transform: translateY(calc(-100% - 4px));
}

.header__inner {
  max-width: none;
  height: var(--u3); /* 72px + 24px of padding = 96px total */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u1);
  padding-inline: var(--u1);
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease-out);
}
.header--scrolled .header__inner {
  box-shadow: var(--shadow-md);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--u0-5);
  color: var(--color-text);
  text-decoration: none;
  min-width: 0;
}

/* The mark: U+2222 set in Linux Libertine Display, left in its native
   orientation so it reads as a sideways "A". */
.brand__mark {
  font-family: var(--font-mark);
  font-size: 46px;
  line-height: 1;
  color: var(--color-primary);
  flex-shrink: 0;
  display: block;
  transform: translateY(-1px);
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-width: 0;
}
.brand__name small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 14px;
  letter-spacing: 0.11em;
  color: var(--color-text-faint);
  text-transform: uppercase;
  font-weight: 400;
  margin-top: 2px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--u1);
}
.nav__links {
  display: flex;
  gap: var(--u1);
  list-style: none;
}
.nav__link {
  position: relative;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  padding-block: 2px;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: var(--color-primary);
  transition: width var(--transition-interactive);
}
.nav__link:hover,
.nav__link[aria-current='page'] {
  color: var(--color-text);
}
.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  width: 100%;
}

.theme-toggle,
.nav-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  background: var(--color-surface);
  flex-shrink: 0;
}
.theme-toggle:hover,
.nav-toggle:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
}
.nav-toggle {
  display: none;
  color: var(--color-text);
}
.nav-toggle svg {
  width: 18px;
  height: 18px;
}

/* A tab that grows straight down out of the header tile and melds with it.
   Absolutely positioned, so opening it never shifts the page or knocks the
   content below off the baseline grid.
   - right edge lines up with the hamburger's right edge (36px in)
   - only as wide as the longest link needs
   - no top border, and it overlaps the tile's bottom edge by 1px so the two
     shapes read as one continuous bubble */
.mobile-nav {
  display: none;
  position: absolute;
  top: calc(var(--u0-5) + var(--u3) - 1px);
  /* 12px tile inset + 1px tile border + 24px tile padding, so the tab's
     right edge lands exactly on the hamburger's right edge. */
  right: calc(var(--u0-5) + var(--u1) + 1px);
  z-index: 2;
  width: max-content;
  max-width: calc(100vw - var(--u4));
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.mobile-nav.is-open {
  display: block;
}
.mobile-nav__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding-block: var(--u0-5);
}
.mobile-nav__link {
  display: block;
  height: var(--u1);
  padding-inline: var(--u1) var(--u0-5);
  color: var(--color-text);
  text-decoration: none;
  text-align: right;
  font-size: var(--text-base);
  line-height: var(--lh-1);
  white-space: nowrap;
}
.mobile-nav__link:hover {
  color: var(--color-primary);
}

@media (max-width: 860px) {
  .nav__links {
    display: none;
  }
  .nav-toggle {
    display: grid;
  }
}
@media (max-width: 420px) {
  .brand__name small {
    display: none;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  height: var(--u2);
  padding-inline: var(--u1);
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-primary-hover);
}
.btn--primary:active {
  background: var(--color-primary-active);
}
.btn--ghost {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-block: var(--u4) var(--u3);
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 912px;
}
.hero h1 {
  font-size: var(--text-3xl);
  line-height: var(--lh-3);
  margin-block: var(--u1) var(--u1);
}
.hero .lede {
  margin-bottom: var(--u1);
}
.hero__actions {
  display: flex;
  gap: var(--u0-5);
  flex-wrap: wrap;
  margin-top: var(--u1);
}
.hero__coord {
  display: none;
}
@media (min-width: 1100px) {
  .hero__coord {
    display: block;
    position: absolute;
    right: var(--u1);
    top: var(--u4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--lh-1);
    color: var(--color-text-faint);
    text-align: right;
    z-index: 1;
  }
}
@media (max-width: 780px) {
  .hero {
    padding-block: var(--u3) var(--u2);
  }
  .hero h1 {
    line-height: var(--lh-2);
  }
}

/* ==========================================================================
   Stats — three tiles on the paper
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--u1);
  padding-block: 0;
}
/* Tiles use an inset ring instead of a border so the 1px never adds to the
   box height and knock the stack off the baseline grid. */
.stat {
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--u1);
  box-shadow:
    inset 0 0 0 1px var(--color-border-soft),
    var(--shadow-sm);
}
.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--lh-2);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lh-1);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Grids & cards
   ========================================================================== */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--u1);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--u1);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--u1);
}
@media (max-width: 900px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--u1);
  position: relative;
  box-shadow:
    inset 0 0 0 1px var(--color-border-soft),
    var(--shadow-sm);
}
.card__index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lh-1);
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
  display: block;
}
.card__icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  margin-bottom: var(--u1);
}
.card h3 {
  margin-bottom: 0;
}
.card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-1);
  margin-bottom: 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--u1);
  margin-bottom: var(--u2);
  flex-wrap: wrap;
}
.section-head h2 {
  margin-top: 0;
}

.link-arrow {
  display: flex;
  width: fit-content;
  height: var(--u1);
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: var(--lh-1);
  font-weight: 600;
}
.link-arrow svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-interactive);
}
.link-arrow:hover svg {
  transform: translateX(3px);
}

/* Occupies a full grid cell with the dashed hairline centred inside it. */
.tick-rule {
  position: relative;
  height: var(--u1);
  width: 100%;
}
.tick-rule::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-border) 0,
    var(--color-border) 1px,
    transparent 1px,
    transparent 8px
  );
}

/* ==========================================================================
   Reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Interior page header
   ========================================================================== */

.page-header {
  position: relative;
  padding-block: var(--u3) var(--u2);
}
.page-header__inner {
  position: relative;
  z-index: 1;
}
.page-header h1 {
  font-size: var(--text-2xl);
  line-height: var(--lh-2);
  margin-top: var(--u1);
  margin-bottom: var(--u1);
}
.page-header .lede {
  margin-top: 0;
}

/* ==========================================================================
   Services list
   ========================================================================== */

.service-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--u1);
  padding-block: var(--u1);
}
.service-row__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--lh-1);
  color: var(--color-primary);
}
.service-row h3 {
  margin-bottom: 0;
}
.service-row p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .service-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Tag pills — opaque so they mask the graph paper behind them.
   Row gap is a full cell so wrapped rows stay on the baseline. */
.tag-strip {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--u0-5);
  row-gap: var(--u1);
}
.tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  height: var(--u1);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--u0-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  background: var(--color-surface);
}

.callout {
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--u1);
  background: var(--color-surface);
  display: flex;
  gap: var(--u0-5);
  align-items: flex-start;
  box-shadow:
    inset 0 0 0 1px var(--color-primary),
    var(--shadow-sm);
}
.callout svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.callout p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-1);
  margin-bottom: 0;
}
.callout strong {
  color: var(--color-text);
}

/* ==========================================================================
   About page
   ========================================================================== */

/* One clear grid cell between each item; no internal padding, so every line
   of text sits inside a cell rather than straddling a rule. */
.competency-list {
  display: grid;
  gap: var(--u1);
}
.competency-item {
  display: flex;
  gap: var(--u0-5);
  padding-block: 0;
  align-items: flex-start;
}
.competency-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  margin-top: 4px;
  flex-shrink: 0;
}
.competency-item span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-1);
}

.pull-quote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--lh-1);
  font-weight: 500;
  color: var(--color-text);
  border-left: 2px solid var(--color-primary);
  padding: var(--u0-5) var(--u1);
  margin-block: var(--u1);
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  max-width: 60ch;
}

/* Panel — a plain tile for wrapping content blocks on the paper */
.panel {
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--u1);
  box-shadow:
    inset 0 0 0 1px var(--color-border-soft),
    var(--shadow-sm);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--u1);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-info {
  display: grid;
  gap: var(--u1);
}
.contact-info__item {
  padding-block: 0;
}
.contact-info__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lh-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.contact-info__value {
  font-size: var(--text-base);
  line-height: var(--lh-1);
}
.contact-info__value a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.contact-info__value a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.form {
  display: grid;
  gap: var(--u1);
}
.field {
  display: grid;
  gap: 0;
}
.field label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lh-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.field input,
.field select,
.field textarea {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--u0-5);
  height: var(--u2);
  font-size: var(--text-base);
  line-height: var(--lh-1);
  color: var(--color-text);
  width: 100%;
}
.field textarea {
  resize: vertical;
  height: var(--u5);
  min-height: var(--u4);
  padding-block: var(--u0-5);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-primary);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--u1);
}
@media (max-width: 560px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}
.form-note {
  font-size: var(--text-xs);
  line-height: var(--lh-1);
  color: var(--color-text-faint);
  margin-bottom: 0;
}

/* ==========================================================================
   Footer — mirrors the header: a tile floating on the paper
   ========================================================================== */

.footer {
  padding: var(--u0-5);
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--u1);
  flex-wrap: wrap;
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-lg);
  /* 12px tile inset + 36px inner padding = 48px, keeping footer
     content on the same baseline grid as the rest of the page. */
  padding: calc(var(--u1) + var(--u0-5)) var(--u1);
  box-shadow:
    inset 0 0 0 1px var(--color-primary),
    var(--shadow-sm);
}
.footer__brand {
  display: flex;
  height: var(--u2);
  align-items: center;
  gap: var(--u0-5);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: var(--lh-1);
}
.footer__mark {
  font-family: var(--font-mark);
  font-size: 34px;
  line-height: 1;
  color: var(--color-primary);
  display: block;
  transform: translateY(-1px);
}
.footer__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lh-1);
  color: var(--color-text-faint);
  margin-top: 0;
  margin-bottom: 0;
  max-width: 34ch;
}
.footer__links {
  display: flex;
  gap: var(--u2);
  flex-wrap: wrap;
}
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lh-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-weight: 500;
}
.footer__col a {
  display: block;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: var(--lh-1);
}
.footer__col a:hover {
  color: var(--color-primary);
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--u1);
  flex-wrap: wrap;
  width: 100%;
  margin-top: var(--u1);
  padding-top: var(--u0-5);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--text-xs);
  line-height: var(--lh-1);
  color: var(--color-text-faint);
}