/* ==========================================================================
   ESLABÓN — Main stylesheet. Written mobile-first. Enhancements for large screens live in responsive.css, which loads after this file.

  Table of Contents

  1. Reset and Base
  2. Typography
  3. Layout and Utilities
  4. Reusable Components
  5. Top Bar and Navigation
  6. Sidebar (Spine)
  7. Hero
  8. Sections
  9. Footer
  10. Modals
  11. Movement and Accessibility
   ========================================================================== */

/* ==========================================================================
   01. Reset y base
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Prevent the fixed bar from covering titles when browsing by anchors */
  scroll-padding-top: calc(var(--header-h) + var(--space-md));
}

body {
  min-height: 100svh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Subtle grain across the entire page: reads as paper tooth, not as haze */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body[data-menu-open="true"] {
  overflow: hidden;
}

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

img {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

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

::selection {
  background-color: rgb(var(--brand-earth-rgb) / 0.22);
  color: var(--sand-900);
}

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: var(--z-skip);
  padding: 0.7rem 1.1rem;
  background-color: var(--brand-earth);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur-base) var(--ease-out);
}

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

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

/* ==========================================================================
   02. Typography
   ========================================================================== */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--display-width);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  font-weight: 600;
  text-wrap: balance;
}

.t-display {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 700;
}

.t-h2 {
  font-size: var(--fs-h2);
  line-height: 1.08;
  font-weight: 650;
}

.t-h3 {
  font-size: var(--fs-h3);
}

.t-h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
}

.t-lead {
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}

.t-body {
  color: var(--color-text-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}

/* Utility role: Archivo condensed, tracked and uppercased. Labels read as
   printed captions — the register of a field notebook, not a terminal. */
.t-mono {
  font-family: var(--font-utility);
  font-variation-settings: "wdth" var(--utility-width);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Top section label: link + text in small caps */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-utility);
  font-variation-settings: "wdth" var(--utility-width);
  font-size: var(--fs-eyebrow);
  font-weight: 650;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--hue);
}

.eyebrow::before {
  content: "";
  inline-size: 26px;
  block-size: 12px;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  opacity: 0.85;
}

/* Featured word within a headline */
.accent-word {
  color: var(--hue);
}

/* The promise inside the headline. Set in terracotta and opened up on the
   width axis so it carries emphasis through form, not through color tricks. */
.headline-accent {
  color: var(--brand-earth-deep);
  font-variation-settings: "wdth" 120;
}

/* ==========================================================================
   03. Layout and utilities
   ========================================================================== */

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

.container--narrow {
  max-width: var(--container-narrow);
}

/* All sections share the same vertical rhythm. The modifiers change `--section-pad` instead of the property, 
to avoid creating specificity conflicts between `.section` and its variants.*/
.section {
  position: relative;
  padding-block: var(--section-pad, var(--section-y));
  background-color: var(--section-bg, transparent);
}

.section--surface {
  --section-bg: var(--color-surface);
}

.section--deep {
  --section-bg: var(--color-bg-deep);
}

.section--light {
  --section-bg: var(--color-surface-raised);
}

/* --- The selvedge ------------------------------------------------------
   The finished edge of a woven piece, where the four institutional threads
   turn back on themselves. It divides the bands the way a hem divides cloth.
   Drawn with a repeating gradient: each thread is a short dash, the warp
   between them is the paper showing through.
   ---------------------------------------------------------------------- */
.section--edge::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 2px;
  /* Fine and dense, the way a real selvedge is: individual threads rather
     than dashes. Mostly earth, with green and purple entering on a slow
     count so the line has a weave rather than a pattern. */
  background-image: repeating-linear-gradient(
    90deg,
    var(--brand-earth) 0 4px,
    transparent 4px 7px,
    var(--brand-earth) 7px 11px,
    transparent 11px 14px,
    var(--brand-green) 14px 18px,
    transparent 18px 21px,
    var(--brand-earth) 21px 25px,
    transparent 25px 28px,
    var(--brand-purple) 28px 32px,
    transparent 32px 35px
  );
  /* The weave frays out at both ends instead of stopping square. */
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  opacity: 0.45;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
  max-width: 46rem;
}

.section-head__title {
  font-size: var(--fs-h2);
  line-height: 1.08;
  font-weight: 650;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-md));
}

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-md));
}

.flow > * + * {
  margin-block-start: var(--flow-gap, var(--space-sm));
}

/* ==========================================================================
   04. Reusable components
   ========================================================================== */

/* --- Icons ------------------------------------------------------------- */
.icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.icon--solid {
  fill: currentColor;
  stroke: none;
}

/* Icon container with the hue of a card */
.icon-badge {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  flex: none;
  border: 1px solid rgb(var(--hue-rgb) / 0.4);
  border-radius: var(--radius-md);
  background-image: linear-gradient(
    145deg,
    rgb(var(--hue-rgb) / 0.28),
    rgb(var(--hue-rgb) / 0.06)
  );
  color: var(--hue);
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.btn .icon {
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .icon {
  transform: translateX(3px);
}

.btn--primary {
  background-image: linear-gradient(135deg, #c26a1d 0%, var(--brand-earth) 55%, #8f4a12 100%);
  color: var(--color-on-accent);
  box-shadow: 0 12px 28px -16px rgb(var(--brand-earth-rgb) / 0.7);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -16px rgb(var(--brand-earth-rgb) / 0.85);
}

.btn--ghost {
  border-color: var(--color-border-strong);
  color: var(--color-text);
  background-color: transparent;
}

.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--brand-earth-rgb) / 0.85);
  color: var(--brand-earth-deep);
}

.btn--full {
  inline-size: 100%;
}

/* Link with arrow, for secondary actions */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--hue);
  padding-block: 0.25rem;
  border-block-end: 1px solid rgb(var(--hue-rgb) / 0.35);
  transition: border-color var(--dur-base) var(--ease-out);
}

.link-arrow:hover {
  border-block-end-color: currentColor;
}

/* --- motherboard ------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* A wash of the card's hue, hidden until hover */
.card::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -30%;
  inline-size: 16rem;
  block-size: 16rem;
  border-radius: 50%;
  background-image: radial-gradient(circle, rgb(var(--hue-rgb) / 0.14), transparent 68%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.card > * {
  position: relative;
}

.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  border-color: rgb(var(--hue-rgb) / 0.45);
  box-shadow: var(--shadow-lift);
}

.card:hover::before,
.card:focus-within::before {
  opacity: 1;
}

.card:hover .icon-badge,
.card:focus-within .icon-badge {
  transform: scale(1.06);
  box-shadow: 0 0 0 6px rgb(var(--hue-rgb) / 0.08);
}

.card__title {
  font-size: var(--fs-h4);
}

.card__text {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* --- Chips (institutional values) ------------------------------------ */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-raised);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.chip::before {
  content: "";
  inline-size: 14px;
  block-size: 7px;
  border: 1.5px solid var(--hue);
  border-radius: var(--radius-pill);
}

.chip:hover {
  border-color: rgb(var(--hue-rgb) / 0.55);
  background-color: rgb(var(--hue-rgb) / 0.08);
  color: var(--color-text);
}

/* --- Metrics ----------------------------------------------------------- */
.metric {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-block: var(--space-sm);
}

.metric__value {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 118;
  font-size: var(--fs-metric);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--hue);
  font-variant-numeric: tabular-nums;
}

.metric__label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  max-width: 15rem;
}

/* ==========================================================================
   05. Top bar and navigation
   ========================================================================== */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}

/* The translucent background and blur reside in a decorative layer, not in the header itself. 
A backdrop filter on the header would turn it into a container block for its `position:fixed` descendants, 
and the mobile menu panel would stop anchoring to the viewport as soon as the page scrolls.*/
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(248 243 234 / 0.86);
  backdrop-filter: var(--blur-nav);
  -webkit-backdrop-filter: var(--blur-nav);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.site-header[data-scrolled="true"] {
  border-block-end-color: var(--color-border);
}

.site-header[data-scrolled="true"]::before {
  opacity: 1;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  block-size: var(--header-h);
}

.brand {
  position: relative;
  /* It remains visible above the open menu panel. */
  z-index: calc(var(--z-menu) + 1);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}

.brand__mark {
  inline-size: auto;
  block-size: 30px;
  /* The original logo is gray: we sink it to the ink color on the paper */
  filter: brightness(0) saturate(100%) invert(11%) sepia(12%) saturate(897%)
    hue-rotate(345deg) brightness(96%) contrast(90%);
  transition: filter var(--dur-base) var(--ease-out);
}

.brand__text {
  display: none;
  font-family: var(--font-utility);
  font-variation-settings: "wdth" var(--utility-width);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  border-inline-start: 1px solid var(--color-border-strong);
  padding-inline-start: 0.7rem;
  line-height: 1.35;
  max-inline-size: 11rem;
}

/* --- Navigation panel (mobile: full screen) --------------------- */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  gap: var(--space-lg);
  padding: calc(var(--header-h) + var(--space-lg)) var(--gutter) var(--space-2xl);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: rgb(248 243 234 / 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-1.5rem);
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility var(--dur-base) linear;
}

.site-nav[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.site-nav__link {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-block: 0.7rem;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  border-block-end: 1px solid var(--color-border);
  transition: color var(--dur-base) var(--ease-out),
    padding-inline-start var(--dur-base) var(--ease-out);
}

.site-nav__link::before {
  content: "";
  inline-size: 18px;
  block-size: 9px;
  flex: none;
  border: 1.5px solid var(--brand-earth-deep);
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link[aria-current="true"] {
  color: var(--brand-earth-deep);
  padding-inline-start: 0.4rem;
}

.site-nav__link:hover::before,
.site-nav__link[aria-current="true"]::before {
  opacity: 1;
}

/* Staggered entry of links when opening the menu */
.site-nav[data-open="true"] .site-nav__item {
  animation: nav-in var(--dur-slow) var(--ease-out) backwards;
  animation-delay: calc(60ms * var(--i, 0) + 80ms);
}

@keyframes nav-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.site-nav__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.site-nav__meta {
  font-family: var(--font-utility);
  font-variation-settings: "wdth" var(--utility-width);
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  line-height: 1.9;
}

/* --- Hamburger button -------------------------------------------------- */
.nav-toggle {
  position: relative;
  z-index: calc(var(--z-menu) + 1);
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-raised);
  transition: border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.nav-toggle:hover {
  border-color: rgb(var(--brand-earth-rgb) / 0.8);
}

.nav-toggle__bars {
  position: relative;
  inline-size: 18px;
  block-size: 12px;
}

.nav-toggle__bars span {
  position: absolute;
  inset-inline: 0;
  block-size: 1.5px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle__bars span:nth-child(1) {
  inset-block-start: 0;
}

.nav-toggle__bars span:nth-child(2) {
  inset-block-start: 5px;
}

.nav-toggle__bars span:nth-child(3) {
  inset-block-start: 10px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(5px) 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(-5px) rotate(-45deg);
}

/* The header CTA only appears on desktop */
.nav-cta {
  display: none;
}

/* ==========================================================================
   06. Lateral chain (spine)
   Secondary navigation: one link per section. Hidden on mobile.
   ========================================================================== */

.spine {
  display: none;
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: clamp(0.75rem, 1.6vw, 1.75rem);
  z-index: var(--z-spine);
  transform: translateY(-50%);
}

.spine__list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.5rem;
}

/* Continuous thread that runs through all the links */
.spine__list::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: 1px;
  translate: -50% 0;
  background-image: linear-gradient(
    to bottom,
    transparent,
    var(--color-border-strong) 12%,
    var(--color-border-strong) 88%,
    transparent
  );
}

.spine__link {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 22px;
}

/* The link: an oval that fills in when the section is active */
.spine__link::before {
  content: "";
  inline-size: 16px;
  block-size: 9px;
  border: 1.5px solid var(--sand-400);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg);
  transition: inline-size var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.spine__link:hover::before {
  border-color: var(--color-text);
}

.spine__link[aria-current="true"]::before {
  inline-size: 22px;
  border-color: var(--hue);
  background-color: rgb(var(--hue-rgb) / 0.9);
  box-shadow: 0 0 0 4px rgb(var(--hue-rgb) / 0.16);
}

.spine__label {
  position: absolute;
  inset-inline-start: calc(100% + 0.6rem);
  white-space: nowrap;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--bark-800);
  font-family: var(--font-utility);
  font-variation-settings: "wdth" var(--utility-width);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand-100);
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.spine__link:hover .spine__label,
.spine__link:focus-visible .spine__label {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   07. Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: 100svh;
  padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-2xl);
  overflow: hidden;
}

/* Atmosphere: warm daylight falling across the paper, the way sun comes
   through a stall awning. One wash, low contrast — the hero's weight belongs
   to the headline and the chain, not to the background. */
.hero__aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(64% 52% at 80% 12%, rgb(var(--brand-earth-rgb) / 0.13), transparent 70%),
    radial-gradient(52% 46% at 10% 74%, rgb(var(--brand-green-rgb) / 0.09), transparent 72%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
  inline-size: 100%;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  max-width: 38rem;
}

.hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 700;
  font-variation-settings: "wdth" 108;
}

.hero__subtitle {
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  max-width: 33rem;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-2xs);
}

/* Hero's footnote: hard data that supports the headline's promise */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-border);
  inline-size: 100%;
}

.hero__fact {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.hero__fact-value {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 118;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.hero__fact-label {
  font-family: var(--font-utility);
  font-variation-settings: "wdth" var(--utility-width);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

/* --- The chain: site signature element -------------------------------- */
.hero__chain {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 20rem;
}

.chain {
  inline-size: min(100%, 22rem);
  block-size: auto;
  overflow: visible;
}

.chain__link {
  fill: none;
  stroke-width: 13;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}

/*A stroke that is drawn when loading, like a link being forged. 
The animation returns stroke-dasharray to "none" when finished: if the browser does not support 
pathLength in <rect>, the link is still drawn completely.*/
.chain--animate .chain__link {
  animation: chain-draw 1.5s var(--ease-out) both,
    chain-float 7s var(--ease-in-out) infinite;
  animation-delay: calc(180ms * var(--i, 0)), calc(1.5s + 180ms * var(--i, 0));
}

@keyframes chain-draw {
  from {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  99% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
  to {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

@keyframes chain-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

/* On paper the chain casts a soft warm shadow instead of a neon bloom. */
.chain__glow {
  filter: blur(14px);
  opacity: 0.16;
}

/* Displacement indicator */
.hero__scroll {
  position: absolute;
  inset-block-end: var(--space-md);
  inset-inline-start: var(--gutter);
  z-index: 1;
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-utility);
  font-variation-settings: "wdth" var(--utility-width);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.hero__scroll-track {
  inline-size: 1px;
  block-size: 46px;
  background-color: var(--color-border-strong);
  position: relative;
  overflow: hidden;
}

.hero__scroll-track::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 40%;
  background-color: var(--brand-earth);
  animation: scroll-hint 2.4s var(--ease-in-out) infinite;
}

@keyframes scroll-hint {
  0% {
    transform: translateY(-100%);
  }
  60%,
  100% {
    transform: translateY(250%);
  }
}

/* ==========================================================================
   08. Sections
   ========================================================================== */

/* --- Focus: text + processed image ------------------------------------ */
.focus__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.focus__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.focus__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-start: var(--space-2xs);
}

.focus__point {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.focus__point .icon {
  color: var(--brand-green-deep);
  margin-block-start: 0.15rem;
}

/* The image lives within a link-like form */
.focus__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 4 / 3;
}

.focus__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Full color: the work is the people in the frame */
  filter: saturate(1.02) contrast(1.02);
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out);
}

.focus__media:hover img {
  transform: scale(1.06);
}

.focus__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Only as much shade as the caption needs to stay legible. The photograph
     itself is left alone — these are pictures of people, not textures. */
  background-image: linear-gradient(
    to top,
    rgb(30 24 20 / 0.88) 0%,
    rgb(30 24 20 / 0.45) 26%,
    transparent 58%
  );
}

.focus__caption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.focus__caption-title {
  color: var(--sand-100);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112;
  font-size: 1.05rem;
  font-weight: 650;
}

.focus__caption-text {
  font-family: var(--font-utility);
  font-variation-settings: "wdth" var(--utility-width);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(248 243 234 / 0.82);
}

/* --- Focus: project carousel -------------------------------------------- */
.focus__carousel {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 4 / 3;
}

.focus__carousel-track {
  display: flex;
  inline-size: 100%;
  block-size: 100%;
  transform: translateX(calc(var(--slide, 0) * -100%));
  transition: transform var(--dur-slow) var(--ease-out);
}

.focus__slide {
  position: relative;
  flex: 0 0 100%;
  inline-size: 100%;
  block-size: 100%;
}

.focus__slide picture,
.focus__slide img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Full color: the work is the people in the frame */
  filter: saturate(1.02) contrast(1.02);
}

.focus__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Only as much shade as the caption needs to stay legible. The photograph
     itself is left alone — these are pictures of people, not textures. */
  background-image: linear-gradient(
    to top,
    rgb(30 24 20 / 0.88) 0%,
    rgb(30 24 20 / 0.45) 26%,
    transparent 58%
  );
}

.focus__slide .focus__caption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1;
  padding: var(--space-md);
  padding-block-end: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.focus__carousel-controls {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
}

.focus__carousel-arrow {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex: none;
  border: 1px solid rgb(248 243 234 / 0.35);
  border-radius: var(--radius-pill);
  background-image: linear-gradient(
    145deg,
    rgb(30 24 20 / 0.62),
    rgb(30 24 20 / 0.38)
  );
  color: var(--sand-100);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.focus__carousel-arrow:hover,
.focus__carousel-arrow:focus-visible {
  border-color: var(--color-border-strong);
  transform: scale(1.08);
}

.focus__carousel-arrow--prev .icon {
  transform: scaleX(-1);
}

.focus__carousel-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.focus__carousel-dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  flex: none;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background-color: rgb(255 255 255 / 0.32);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.focus__carousel-dot:hover {
  background-color: rgb(255 255 255 / 0.55);
}

.focus__carousel-dot[aria-selected="true"] {
  background-color: var(--brand-earth-lit);
  transform: scale(1.3);
}

/* --- Lines of impact -------------------------------------------------- */
.lines__grid {
  display: grid;
  gap: var(--space-md);
}

/* --- Figures ------------------------------------------------------------- */
.figures {
  --section-pad: clamp(3.5rem, 2.5rem + 5vw, 6rem);
}

.figures__grid {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
  border-block-start: 1px solid var(--color-border);
  padding-block-start: var(--space-lg);
}

/* --- Who we are ------------------------------------------------------ */
.about__lead-grid {
  display: grid;
  gap: var(--space-lg);
}

.about__panels {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
}

.panel {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-raised);
  background-image: linear-gradient(
    170deg,
    rgb(var(--hue-rgb) / 0.1),
    transparent 52%
  );
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.panel__title {
  font-size: var(--fs-h3);
}

.panel__text {
  color: var(--color-text-muted);
}

.values {
  margin-block-start: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* --- Programs ---------------------------------------------------------- */
.programs__grid {
  display: grid;
  gap: var(--space-md);
}

.program {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-raised);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

/* Nuance bar: identifies the program before reading the title */
.program::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background-image: linear-gradient(
    to bottom,
    var(--hue),
    rgb(var(--hue-rgb) / 0.15)
  );
}

.program::after {
  content: "";
  position: absolute;
  inset-block-start: -6rem;
  inset-inline-end: -6rem;
  inline-size: 14rem;
  block-size: 14rem;
  border-radius: 50%;
  background-image: radial-gradient(circle, rgb(var(--hue-rgb) / 0.12), transparent 70%);
  opacity: 0.5;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.program:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--hue-rgb) / 0.45);
}

.program:hover::after {
  opacity: 1;
}

.program__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.program__title {
  font-size: var(--fs-h3);
}

.program__text {
  position: relative;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* --- Why us --------------------------------------------------- */
.reasons {
  display: grid;
  gap: 0;
  margin-block-start: var(--space-xl);
  border-block-start: 1px solid var(--color-border);
}

.reason {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-block: var(--space-md);
  border-block-end: 1px solid var(--color-border);
  transition: background-color var(--dur-base) var(--ease-out);
}

.reason__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-h4);
}

.reason__title .icon {
  color: var(--hue);
}

.reason__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* --- Allies (light band) ---------------------------------------------- */
.allies {
  color: var(--color-text);
}

.allies__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
}

.logo-tile {
  display: grid;
  place-items: center;
  padding: var(--space-md) var(--space-sm);
  min-block-size: 8.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--sand-50);
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.logo-tile img {
  inline-size: auto;
  max-block-size: 4.25rem;
  max-inline-size: 100%;
  object-fit: contain;
  /* Logos are unified in gray; color returns when hovering over the cursor */
  filter: grayscale(1);
  opacity: 0.66;
  transition: filter var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

.logo-tile:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--brand-earth-rgb) / 0.4);
  box-shadow: var(--shadow-md);
}

.logo-tile:hover img {
  filter: grayscale(0);
  opacity: 1;
}

.allies__footer {
  margin-block-start: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-border);
}

/* --- Contact ----------------------------------------------------------- */
.contact__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
  font-style: normal;
}

.contact__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  transition: border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.contact__item:hover {
  border-color: rgb(var(--hue-rgb) / 0.45);
  background-color: rgb(var(--hue-rgb) / 0.06);
}

.contact__item .icon {
  color: var(--hue);
  margin-block-start: 0.15rem;
}

.contact__item-label {
  display: block;
  font-family: var(--font-utility);
  font-variation-settings: "wdth" var(--utility-width);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-block-end: 0.15rem;
}

.contact__item-value {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.45;
}

a.contact__item-value:hover {
  color: var(--hue);
}

/* --- Form --------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field__label {
  font-family: var(--font-utility);
  font-variation-settings: "wdth" var(--utility-width);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.field__control {
  inline-size: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--sand-50);
  color: var(--color-text);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.field__control::placeholder {
  color: var(--sand-500);
}

.field__control:focus {
  outline: none;
  border-color: var(--brand-earth);
  box-shadow: 0 0 0 3px rgb(var(--brand-earth-rgb) / 0.22);
}

textarea.field__control {
  resize: vertical;
  min-block-size: 7rem;
  font-family: inherit;
}

.field__error {
  font-size: var(--fs-xs);
  color: var(--color-danger);
  min-block-size: 1rem;
}

.field[data-invalid="true"] .field__control {
  border-color: var(--color-danger);
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  line-height: 1.6;
}

.form__consent input {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  margin-block-start: 0.2rem;
  accent-color: var(--brand-earth);
  flex: none;
}

.form__consent a {
  color: var(--brand-earth-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form__status {
  font-size: var(--fs-sm);
  color: var(--brand-green-deep);
  min-block-size: 1.25rem;
}

.form__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
}

/* ==========================================================================
   09. Footer
   ========================================================================== */

.site-footer {
  position: relative;
  background-color: var(--color-bg-deep);
  border-block-start: 1px solid var(--color-border);
  padding-block: var(--space-2xl) var(--space-lg);
}

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

.site-footer__brand-mark {
  block-size: 34px;
  inline-size: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  margin-block-end: var(--space-sm);
}

.site-footer__legal-name {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  max-width: 24rem;
}

.site-footer__data {
  margin-block-start: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: var(--font-utility);
  font-variation-settings: "wdth" var(--utility-width);
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
}

.site-footer__title {
  font-family: var(--font-utility);
  font-variation-settings: "wdth" var(--utility-width);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-block-end: var(--space-sm);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.site-footer__list a:hover {
  color: var(--brand-earth-lit);
}

.socials {
  display: flex;
  gap: 0.6rem;
  margin-block-start: var(--space-md);
}

.social {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  transition: color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.social:hover {
  color: var(--brand-earth-lit);
  border-color: rgb(var(--brand-earth-rgb) / 0.7);
  transform: translateY(-2px);
}

.site-footer__bottom {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
}

.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.link-quiet {
  color: var(--color-text-soft);
  border-block-end: 1px solid transparent;
  transition: color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.link-quiet:hover {
  color: var(--color-text);
  border-block-end-color: var(--color-border-strong);
}

/* ==========================================================================
   10. Legal Modals 
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  inline-size: min(46rem, calc(100vw - 2rem));
  block-size: fit-content;
  max-block-size: min(80svh, 46rem);
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.modal::backdrop {
  background-color: rgb(36 30 25 / 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal__inner {
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.modal__title {
  font-size: var(--fs-h3);
}

.modal__close {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  flex: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  transition: color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.modal__close:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.modal__body {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.modal__body h3 {
  font-size: var(--fs-h4);
  color: var(--color-text);
  margin-block-start: var(--space-sm);
}

.modal__body p + p {
  margin-block-start: var(--space-2xs);
}

.modal__body ul {
  list-style: disc;
  padding-inline-start: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-block-start: var(--space-2xs);
}

/* ==========================================================================
   11. Movement and accessibility
   ========================================================================== */

/* Appears on screen upon entering; activated from main.js */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* If the browser does not run JS, nothing remains invisible */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .chain--animate .chain__link {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .hero__scroll-track::after {
    display: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-border: rgb(74 64 56 / 0.34);
    --color-border-strong: rgb(74 64 56 / 0.5);
    --color-text-muted: var(--sand-800);
    --color-text-soft: var(--sand-700);
  }

  .theme-dark {
    --color-border: rgb(248 243 234 / 0.32);
    --color-text-muted: #ece1d2;
    --color-text-soft: #cdbfab;
  }
}

@media print {
  .site-header,
  .spine,
  .hero__aura,
  .site-nav,
  body::after {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}