/* ── Culmo — Design Tokens ─────────────────────────────────────
   Single source of truth for the palette, type scale, surfaces,
   and motion. Imported by css/main.css (all sub-pages) and linked
   directly by index.html, which carries its own inline stylesheet.

   Register: pure black ground, one teal accent. The contrast
   between #000 and #49C5B6 does the work — no second accent
   colour, no coloured backgrounds. Surfaces lift off the black
   with translucent white, not with a lighter green.
   ──────────────────────────────────────────────────────────── */

:root {
  /* ── Ground ──────────────────────────────────────────────── */
  --color-bg-primary:   #000000;  /* page ground — deep, not murky */
  --color-bg-secondary: #080B0B;  /* banded sections, barely lifted */
  --color-bg-sunken:    #050707;  /* code blocks, insets */

  /* ── Accent — the Culmo teal ─────────────────────────────── */
  --color-accent-bright: #49C5B6;  /* CTAs, active states, rules */
  --color-accent-mid:    #2E8C81;  /* dimmed accent — borders, hairlines */
  --color-accent-deep:   #1B534C;  /* furthest-back accent, large fills */
  --color-glow:          #7FE3D6;  /* hover glow, highlight points */
  --color-premium:       #C6A96B;  /* metallic gold — sparingly */

  /* Accent as rgba, for glows and washes that must layer */
  --accent-rgb: 73, 197, 182;
  --color-accent-glow:  rgba(73, 197, 182, 0.34);
  --color-accent-faint: rgba(73, 197, 182, 0.10);

  /* ── Text ────────────────────────────────────────────────── */
  --color-text-primary:   #F4F7F6;
  --color-text-secondary: rgba(244, 247, 246, 0.64);
  --color-text-tertiary:  rgba(244, 247, 246, 0.42);

  /* Light as rgba — every surface and border derives from this,
     so the whole system retunes from one number. */
  --light-rgb: 244, 247, 246;

  /* ── Borders ─────────────────────────────────────────────── */
  --color-border:        rgba(244, 247, 246, 0.13);
  --color-border-strong: rgba(244, 247, 246, 0.26);
  --color-border-accent: rgba(73, 197, 182, 0.32);

  /* ── Surfaces ────────────────────────────────────────────── */
  /* Cards read as glass lifted off the black rather than as a
     lighter block of colour — a top-to-bottom translucent wash,
     a hairline, and a blur. Hover adds a flat overlay because a
     gradient background can't be cross-faded by a transition. */
  --surface-card: linear-gradient(
    to bottom,
    rgba(244, 247, 246, 0.085),
    rgba(244, 247, 246, 0.035)
  );
  --surface-card-raised: linear-gradient(
    to bottom,
    rgba(244, 247, 246, 0.08),
    rgba(244, 247, 246, 0.035)
  );
  --surface-wash: rgba(244, 247, 246, 0.03);
  --surface-blur: blur(12px);

  /* Noise — breaks up banding on large gradient fields. Sits as a
     4%-opacity overlay; static, never animated. */
  --texture-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  --shadow-accent: 0 0 24px -6px var(--color-accent-glow);

  /* ── Type ────────────────────────────────────────────────── */
  --font-headline: 'Domine', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Scale. The old section headline topped out at 1.9rem, which is
     what made the page read papery — headings never commanded the
     column they sat in. These are the reference-build proportions. */
  --fs-display: clamp(2.75rem, 6.2vw, 4.75rem);   /* hero only */
  --fs-h1:      clamp(2.25rem, 4.6vw, 3.5rem);    /* page heroes */
  --fs-h2:      clamp(1.9rem, 3.4vw, 2.85rem);    /* section headlines */
  --fs-h3:      clamp(1.2rem, 1.7vw, 1.5rem);     /* card titles */
  --fs-lead:    clamp(1.05rem, 1.5vw, 1.3rem);    /* section leads */
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;
  --fs-eyebrow: 0.7rem;

  --lh-tight:  1.08;
  --lh-head:   1.15;
  --lh-body:   1.72;
  --lh-loose:  1.8;

  --tracking-tight:   -0.03em;
  --tracking-head:    -0.02em;
  --tracking-eyebrow:  0.18em;

  /* ── Rhythm ──────────────────────────────────────────────── */
  --section-pad:      120px;
  --section-pad-tight: 88px;
  --container-max:    1160px;
  --container-wide:   1360px;
  --container-pad:    64px;
  --nav-height:       68px;

  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 20px;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  0.18s;
  --dur:       0.28s;
  --dur-slow:  0.6s;
}

@media (max-width: 960px) {
  :root {
    --section-pad: 76px;
    --section-pad-tight: 60px;
    --container-pad: 24px;
  }
}

/* ── Shared card surface ────────────────────────────────────────
   Every card on the site derives from this. On a pure-black page a
   card can't be "a slightly lighter green block" — it has to read
   as glass lifted off the ground: a translucent top-to-bottom
   wash, a hairline, and a blur. The hover brightening is a
   separate flat overlay because a gradient background can't be
   cross-faded by a CSS transition.
   ──────────────────────────────────────────────────────────── */
.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--surface-card);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  box-shadow:
    inset 0 1px 0 rgba(244, 247, 246, 0.06),
    var(--shadow-card);
  transition:
    border-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: var(--surface-wash);
  transition: opacity var(--dur) var(--ease-out);
}

.card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(244, 247, 246, 0.10),
    var(--shadow-card-hover);
}

.card:hover::before {
  opacity: 1;
}

/* A single accent hairline across the top edge, revealed on hover.
   Cheaper than a glow and it keeps the accent doing one job. */
.card--lit::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-accent-bright),
    transparent
  );
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.card--lit:hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .card:hover {
    transform: none;
  }
}

.text-link {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-accent-bright);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
  margin-top: 24px;
}

.text-link:hover {
  color: var(--color-glow);
}

.text-link .link-arrow,
.text-link__arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}

.text-link:hover .link-arrow,
.text-link:hover .text-link__arrow {
  transform: translateX(4px);
}

/* ── Section utilities ──────────────────────────────────────── */
.section-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-bright);
  margin-bottom: 14px;
}

.section-headline {
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-head);
  line-height: var(--lh-head);
  text-wrap: balance;
  max-width: 20ch;
}

/* ── Lenis ────────────────────────────────────────────────────
   The handful of rules Lenis needs to behave, folded in from its
   dist stylesheet rather than shipped as a separate request. Lenis
   adds the .lenis classes to <html> itself (js/motion.js); with
   reduced motion it is never constructed, so none of this applies
   and native scrolling is left alone.
   ──────────────────────────────────────────────────────────── */
html.lenis,
html.lenis body {
  height: auto;
}

/* Native smooth scrolling and Lenis would otherwise animate the same
   scroll twice. Only disabled while Lenis is actually driving. */
html.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ── Scroll-reveal ─────────────────────────────────────────────
   Elements marked [data-reveal] start displaced and settle when
   they enter the viewport (js/reveal.js adds .is-revealed). The
   hidden state is defined only inside this media query, so with
   reduced motion — or with JS unavailable, since nothing ever
   adds the class — content renders at its final state instead of
   staying invisible.
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
  }

  [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* ── Noise overlay ────────────────────────────────────────────
   Applied to any section that carries a large gradient or glow.
   Pointer-transparent and aria-hidden by construction.
   ──────────────────────────────────────────────────────────── */
.has-noise {
  position: relative;
  isolation: isolate;
}

.has-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  background-image: var(--texture-noise);
  background-repeat: repeat;
}