/* deasil.works site stylesheet. Every page loads this first.
   Layers: the design tokens (theme), Tailwind's reset (base) and the one
   Tailwind utility the markup uses (.sr-only) sit in cascade layers, so every
   rule below them wins without needing more specificity. */

@layer theme, base, utilities;

@layer theme {
  :root {
  --color-bg:           #0C1014;
  --color-bg-2:         #0F141B;
  --color-surface-1:    #141A23;
  --color-surface-2:    #1B2230;
  --color-surface-3:    #232C3E;
  --color-border:       #242C3D;
  --color-border-2:     #34405A;
  --color-border-3:     #4A5775;
  --color-text:         #ECEFF6;
  --color-text-2:       #B6BECF;
  --color-text-mute:    #A6A9B2;
  --color-text-mute-2:  #4B5468;
  --color-logo-bowl:    #6E7790;
  --color-copper:       #D4923B;
  --color-copper-2:     #C7752A;
  --color-copper-3:     #A85F1F;
  --color-copper-soft:  rgba(212, 146, 59, 0.10);
  --color-copper-line:  rgba(212, 146, 59, 0.30);
  --color-steel:        #6FB7C9;
  --color-rust:         #B85843;

  --font-sans:  'IBM Plex Sans', -apple-system, system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-serif: 'IBM Plex Serif', serif;

  --container-max: 1340px;

    /* Defaults the reset below reads. */
    --spacing: 0.25rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Tailwind CSS v4 preflight (MIT License, https://tailwindcss.com). */
@layer base {
  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  html,
  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(
      --default-mono-font-variation-settings,
      normal
    );
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align: middle;
    display: block;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not ((-webkit-appearance: -apple-pay-button))) or
    (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }
    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }
  ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button {
    height: auto;
  }
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

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

/* ==========================================================================
   Global: base elements, container, buttons, section heads, prose, backdrop
   ========================================================================== */

* { box-sizing: border-box; }

/* Lock the page to vertical scroll only. Without this, decorative
   fixed-position chrome (rings, halo) and the Embla marquee can let
   mobile Safari rubber-band horizontally during a vertical drag.
   `clip` is preferred over `hidden` so we don't accidentally make html
   a scroll container (which would break sticky positioning). */
html, body {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-copper);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: -9999px; top: 12px;
  background: var(--color-copper); color: var(--color-bg);
  padding: 10px 14px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}
.skip:focus { left: 16px; z-index: 200; }

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

/* =========================================================
   BACKDROP / SOLAR-LENS — observatory atmospheric chrome.
   See src/components/chrome/Backdrop.astro for the markup.
   ========================================================= */

/* halo: large off-center copper radial glow */
.halo {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 18%,
      rgba(212, 146, 59, 0.16) 0%,
      rgba(212, 146, 59, 0.10) 8%,
      rgba(212, 146, 59, 0.05) 18%,
      rgba(212, 146, 59, 0.02) 30%,
      transparent 50%),
    radial-gradient(ellipse at 78% 18%,
      rgba(168, 95, 31, 0.06) 0%,
      rgba(168, 95, 31, 0.02) 40%,
      transparent 70%),
    radial-gradient(ellipse at 50% 100%,
      rgba(0, 0, 0, 0.55) 0%,
      transparent 60%);
}

/* concentric calibration rings centered on halo */
.rings {
  position: fixed;
  top: -40vmin;
  right: -22vmin;
  width: 130vmin;
  height: 130vmin;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
.rings svg {
  width: 100%; height: 100%; display: block;
  animation: rings-rotate 240s linear infinite;
}
@keyframes rings-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* starfield with sparse drift */
.starfield {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}
.starfield svg {
  width: 100%; height: 100%; display: block;
  animation: stars-drift 180s linear infinite alternate;
}
@keyframes stars-drift {
  0%   { transform: translateX(0) translateY(0); }
  100% { transform: translateX(-22px) translateY(8px); }
}
.star { animation: star-twinkle 6s ease-in-out infinite; }
.star--copper { animation: star-twinkle-copper 9s ease-in-out infinite; }
@keyframes star-twinkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.90; }
}
@keyframes star-twinkle-copper {
  0%, 100% { opacity: 0.40; }
  50%      { opacity: 0.95; }
}

/* scanline — vertical 1px copper line traversing the viewport */
.scanline {
  position: fixed;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(212, 146, 59, 0.0) 12%,
    rgba(212, 146, 59, 0.35) 50%,
    rgba(212, 146, 59, 0.0) 88%,
    transparent 100%);
  z-index: 1;
  pointer-events: none;
  animation: scan 36s linear infinite;
}
@keyframes scan {
  0%   { left: -2px;  opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { left: calc(100% + 2px); opacity: 0; }
}

/* observatory log — fixed bottom-left mono strip */
.obs-log {
  position: fixed;
  left: 24px; bottom: 22px;
  z-index: 3;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-mute);
  display: flex; align-items: center; gap: 16px;
  transition: opacity 280ms ease, transform 280ms ease;
}
.obs-log.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.obs-log .obs-dot {
  width: 6px; height: 6px;
  background: var(--color-copper);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-copper);
  animation: obs-pulse 3.6s ease-in-out infinite;
}
@keyframes obs-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.obs-log span + span:not(.obs-dot)::before {
  content: "·"; margin-right: 16px; color: var(--color-text-mute-2);
}
@media (max-width: 720px) { .obs-log { display: none; } }

/* reduce motion — kill all backdrop animations */
@media (prefers-reduced-motion: reduce) {
  .scanline, .rings svg, .starfield svg, .star, .star--copper, .obs-log .obs-dot {
    animation: none !important;
  }
  .scanline { display: none !important; }
}

/* ----- container ----- */
.container {
  width: 100%;
  position: relative; z-index: 5;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(28px, 5vw, 80px);
}

/* ----- shared utilities ----- */
.mono { font-family: var(--font-mono); }
.label-mono {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-mute);
}
.copper { color: var(--color-copper); }

/* ----- Deasil Works logo (horizontal lockup) ----- */
/* Class-based fills so the logo can be tinted for any background.
   Two-tone preserves the relative weight of the original gray version. */
.logo {
  display: block;
  flex: none;
  height: 38px;
  width: auto;
  transition: opacity 200ms ease;
}
.logo__letter,
.logo__d-stem {
  fill: var(--color-text);
}
.logo__letter {
  stroke: var(--color-text);
  stroke-width: 0.79px;
  stroke-miterlimit: 10;
}
.logo__d-bowl {
  fill: var(--color-logo-bowl);
}
/* Brand-link hover gives a copper-tinted d-mark; wordmark stays text colour. */
.brand:hover .logo__d-stem { fill: var(--color-copper); }
.brand:hover .logo__d-bowl { fill: var(--color-copper-3); }

.foot__brand-row .logo { height: 28px; }

/* ----- buttons ----- */
.btn {
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-copper);
  border: 1px solid var(--color-copper);
  transition: background 180ms ease, color 180ms ease;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover { background: var(--color-copper-2); border-color: var(--color-copper-2); }
.btn--outline {
  background: transparent; color: var(--color-text);
  border-color: var(--color-border-2);
}
.btn--outline:hover {
  border-color: var(--color-copper);
  color: var(--color-copper);
  background: var(--color-copper-soft);
}

/* ----- section heads ----- */
section { padding: clamp(72px, 9vw, 128px) 0; }

.section__head {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  margin-bottom: clamp(40px, 5vw, 72px);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 980px) {
  .section__head {
    grid-template-columns: 320px 1fr;
    gap: 56px;
    align-items: end;
  }
}
.section__index {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-mute);
  display: flex; align-items: center; gap: 12px;
}
.section__index::before {
  content: ""; width: 4px; height: 4px; background: var(--color-copper); display: inline-block;
}
.section__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  max-width: 22ch;
}
.section__title em {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 300;
  color: var(--color-copper);
}
.section__title b { font-weight: 500; }
.section__sub {
  font-size: 16px;
  color: var(--color-text-2);
  max-width: 56ch;
  margin: 0;
}

/* ----- prose: rendered MDX/Markdown content on detail pages ----- */
.prose {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-2);
  max-width: 72ch;
}
.prose > * + * { margin-top: 1.4em; }
.prose h1 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin-top: 0;
  max-width: 22ch;
}
.prose h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-text);
  margin-top: 2.4em;
  margin-bottom: 0.6em;
  padding-top: 1.2em;
  border-top: 1px solid var(--color-border);
}
.prose h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 0.4em;
}
/* Re-establish paragraph rhythm. We don't simply do `.prose p { margin: 0 }`
   here because that rule's 0,1,1 specificity beats the universal sibling
   selector .prose > * + * (0,1,0), which would collapse adjacent paragraph
   gaps to zero. Use a type-targeted rule with :not(:first-child) to bump
   specificity to 0,2,1 so it wins cleanly. */
.prose > p { margin: 0; }
.prose > p:not(:first-child),
.prose > ul:not(:first-child),
.prose > ol:not(:first-child),
.prose > blockquote:not(:first-child) {
  margin-top: 1.4em;
}
.prose strong { color: var(--color-text); font-weight: 500; }
.prose a {
  color: var(--color-copper);
  border-bottom: 1px solid var(--color-copper-line);
  transition: border-color 180ms ease;
}
.prose a:hover { border-bottom-color: var(--color-copper); }
.prose ul, .prose ol {
  padding-left: 1.4em;
  margin: 0;
}
.prose li { margin-bottom: 0.4em; }
.prose li > strong:first-child { color: var(--color-copper); font-weight: 500; }
.prose blockquote {
  border-left: 3px solid var(--color-copper);
  background: var(--color-bg-2);
  padding: 16px 20px;
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--color-text);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--color-bg-2);
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  border: 1px solid var(--color-border);
}
.prose table th, .prose table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.prose table th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-mute);
  background: var(--color-surface-1);
  font-weight: 600;
}
.prose table tr:last-child td { border-bottom: none; }
.prose hr {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: 2em 0;
}

.page-shell {
  padding: clamp(56px, 8vw, 120px) 0;
}
.page-shell .container > * + * { margin-top: clamp(40px, 5vw, 64px); }

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

/* ==========================================================================
   Chrome: Deasil Works logo
   ========================================================================== */



/* ==========================================================================
   Chrome: header
   ========================================================================== */

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 16, 20, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--color-border);
}
.header__bar {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 24px;
  padding-block: 12px;
  position: relative;
}
.brand { display: flex; align-items: center; grid-column: 1; }

/* Default (mobile/tablet): nav is a drawer, hidden until toggled */
.nav {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(12, 16, 20, 0.96);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--color-border);
  padding: 8px 0;
}
.nav.nav--open { display: flex; }
.nav a {
  padding: 16px 24px;
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-2);
  border-top: 1px solid var(--color-border);
  transition: color 160ms ease, background 160ms ease;
}
.nav a:first-child { border-top: none; }
.nav a:hover, .nav a:focus-visible {
  color: var(--color-copper);
  background: var(--color-surface-1);
}
.nav a[aria-current="page"] { color: var(--color-copper); }

/* Desktop: inline horizontal nav, no drawer */
@media (min-width: 1024px) {
  .nav {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    justify-self: center;
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    padding: 0;
  }
  .nav a {
    padding: 16px 14px;
    font-size: 14px;
    border: 1px solid transparent;
  }
  .nav a:first-child { border-top: 1px solid transparent; }
  .nav a:hover, .nav a:focus-visible {
    border-color: var(--color-border-2);
  }
}

.head__cta { display: flex; align-items: center; gap: 12px; grid-column: 3; }

/* Client login: a button beside CONTACT from 640px wide; below that there is
   no room in the bar, so it is the last entry of the menu drawer instead. */
.head__login { display: none; }
@media (min-width: 640px) {
  .head__login { display: inline-flex; }
  .nav .nav__login { display: none; }
}

/* Hamburger toggle: visible on mobile/tablet only */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-2);
  border-radius: 2px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.nav-toggle:hover { color: var(--color-copper); border-color: var(--color-copper-line); }
.nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}
.nav-toggle__bars > span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bars > span { transition: none; }
}

/* ==========================================================================
   Chrome: footer
   ========================================================================== */

footer[role="contentinfo"] {
  padding: 56px 0 28px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-2);
  font-family: var(--font-sans);
  font-size: 14px;
}
.foot__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (min-width: 880px) {
  .foot__grid { grid-template-columns: 1.4fr repeat(4, 1fr); }
}
.foot__col h4 {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-copper);
  margin: 0 0 14px; font-weight: 600;
}
.foot__col ul { list-style: none; padding: 0; margin: 0; }
.foot__col li { margin-bottom: 8px; }
.foot__col a { color: var(--color-text-2); transition: color 160ms ease; }
.foot__col a:hover { color: var(--color-copper); }
.foot__brand-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.foot__copy {
  color: var(--color-text-mute); line-height: 1.55;
  max-width: 36ch; font-size: 13.5px;
  margin-bottom: 14px;
}
.foot__addr {
  color: var(--color-text-2);
  font-size: 13.5px;
  line-height: 1.65;
  font-style: normal;
}
.foot__addr a {
  color: var(--color-text-2);
  transition: color 160ms ease;
}
.foot__addr a:hover { color: var(--color-copper); }
.foot__legal {
  margin-top: 48px; padding-top: 18px;
  border-top: 1px solid var(--color-border);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-mute);
  gap: 12px;
}
.foot__legal .copper { color: var(--color-copper); }