@font-face {
  font-family: "ivyepic-variable";
  src: url("./fonts/ivyepic-variable.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 100 900;
  font-stretch: normal;
}

@font-face {
  font-family: "ivyora-display";
  src: url("./fonts/ivyora-display-bold.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}

@font-face {
  font-family: "ivyora-display";
  src: url("./fonts/ivyora-display-light-italic.woff2") format("woff2");
  font-display: auto;
  font-style: italic;
  font-weight: 300;
  font-stretch: normal;
}

@font-face {
  font-family: "ivyora-display";
  src: url("./fonts/ivyora-display-italic.woff2") format("woff2");
  font-display: auto;
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: "ivyora-display";
  src: url("./fonts/ivyora-display-bold-italic.woff2") format("woff2");
  font-display: auto;
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
}

@font-face {
  font-family: "ivyora-display";
  src: url("./fonts/ivyora-display-thin.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 100;
  font-stretch: normal;
}

@font-face {
  font-family: "ivyora-display";
  src: url("./fonts/ivyora-display-light.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
}

@font-face {
  font-family: "ivyora-display";
  src: url("./fonts/ivyora-display-regular.woff2") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: "ivyora-display";
  src: url("./fonts/ivyora-display-thin-italic.woff2") format("woff2");
  font-display: auto;
  font-style: italic;
  font-weight: 100;
  font-stretch: normal;
}

/* ============================================================
   FONTS · JetBrains Mono (self-hosted, SIL OFL — see fonts/OFL.txt)
   ============================================================ */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/styles/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('/styles/fonts/JetBrainsMono-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/styles/fonts/JetBrainsMono-Bold.woff2') format('woff2');
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* color */
  --stone: #EEF0EC;
  --loam: #E2E6DF;
  --canopy: #008000;
  --pine: #0A4F1C;
  --trunk: #1A1A1A;
  --line: rgba(26, 26, 26, 0.14);
  --ink-soft: rgba(26, 26, 26, 0.72);
  --ink-faint: rgba(26, 26, 26, 0.48);

  /* type families */
  --font-display: 'ivyora-display', Georgia, 'Times New Roman', serif;
  --font-body: 'ivyepic-variable', 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* type scale */
  --type-display-xl: clamp(72px, 10vw, 144px);
  --type-display: clamp(48px, 6vw, 88px);
  --type-h1: clamp(36px, 4.5vw, 64px);
  --type-h2: 44px;
  --type-h3: 28px;
  --type-h4: 22px;
  --type-body-lg: 20px;
  --type-body: 18px;
  --type-small: 14px;
  --type-eyebrow: 11px;

  /* spacing */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* layout */
  --max-width: 1280px;
  --reading-width: 62ch;
  --page-padding: 40px;
  --navbar-height: 72px;
  --radius-default: 4px;
  --radius-disc: 50%;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scrollbar-gutter: stable;
}

body {
  background: var(--stone);
  color: var(--trunk);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* OpenType features, declared once and inherited. Each face activates only
     what it ships: Ivyora Display carries liga, dlig, onum, pnum (its Thin
     weights have no GSUB and fall through untouched); faces lacking a feature
     ignore it. Monospace contexts opt back out below to keep figures aligned. */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
  font-variant-numeric: oldstyle-nums proportional-nums;

  header nav,
  main [data-block],
  footer[data-block] {
    display: none;
  }

  header {
    min-height: var(--navbar-height);
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(238, 240, 236, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 0 var(--page-padding);
    box-sizing: border-box;
  }
}

main {
  display: block;

  img:not([width]):not([height]) {
    width: 100%;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
}

/* ============================================================
   SHARED PRIMITIVES — eyebrow + buttons
   ============================================================ */
/* Monospace / code: no ligatures or figure features — render source literally
   and keep the font's own tabular, lining defaults. */
.eyebrow,
code,
pre,
kbd,
samp {
  font-variant-ligatures: none;
  font-variant-numeric: normal;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pine);
  margin: 0;
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: var(--radius-default);
  border: 0;
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.btn-inked {
  background: var(--trunk);
  color: var(--stone);
}

.btn-inked:hover {
  background: var(--pine);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--trunk);
  border: 1px solid var(--trunk);
}

.btn-ghost:hover {
  border-color: var(--canopy);
  color: var(--canopy);
  transform: translateY(-1px);
}

.btn-link {
  background: transparent;
  color: var(--trunk);
  text-decoration: underline;
  text-decoration-color: var(--canopy);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  padding: 14px 0;
}

.btn-link:hover {
  color: var(--pine);
}

/* ============================================================
   MOTION · keyframes live here (global) so they're already parsed when the
   lazily-loaded blocks reveal — see masthead .stage drift + the breathing disc.
   ============================================================ */

@keyframes em-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-1.2%, -1.6%, 0) scale(1.03);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes em-breathe {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.06);
    opacity: 0.92;
  }
}

/* Slow atmospheric drift for the article-hero photo stage. */
@keyframes em-drift-slow {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  33% {
    transform: translate3d(0.5%, -0.8%, 0) scale(1.02);
  }

  66% {
    transform: translate3d(-0.6%, 0.4%, 0) scale(1.015);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {

  .masthead .stage,
  .article-hero .stage {
    animation: none !important;
  }

  .btn-inked:hover,
  .btn-ghost:hover {
    transform: none;
  }
}

/* ============================================================
   RESPONSIVE (global tokens)
   ============================================================ */
@media (width < 900px) {
  :root {
    --page-padding: 24px;
    --navbar-height: 51px;
  }
}