/* ==========================================================================
   Base — Ilya Davydkin personal brand
   Lightweight resets + brand-level element defaults + a few signature helper
   classes (highlighter marker, dashed-grid framing). Keep it minimal; this is
   a brand layer, not a CSS framework.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  font-weight: var(--weight-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Headlines ------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-display-l); line-height: var(--leading-tight); }
h2 { font-size: var(--text-display-m); }
h3 { font-size: var(--text-title); letter-spacing: var(--tracking-tight); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration: none;
  /* Underline drawn as a background-image so it can animate its width in. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  padding-bottom: 0.04em;
  transition: color var(--dur-base) var(--ease-out), background-size var(--dur-base) var(--ease-out);
}
a:hover {
  color: var(--forest-600);
  background-size: 100% 1.5px;
}
/* On dark forest sections, links rest light and warm up to pop-lime. */
.on-forest a { color: var(--text-on-dark); }
.on-forest a:hover { color: var(--pop-lime); }

/* The accent word: Newsreader italic. */
.accent-word,
em.accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-display);
}

/* ---- Signature: highlighter marker behind an accent word on cream ---- */
/* Pop-lime swipe, hand-drawn feel, sits behind text. Use on ink text only. */
.mark {
  background-image: linear-gradient(
    104deg,
    transparent 0.2em,
    var(--highlight-marker) 0.2em,
    var(--highlight-marker) calc(100% - 0.15em),
    transparent calc(100% - 0.15em)
  );
  background-repeat: no-repeat;
  background-size: 100% 62%;
  background-position: 0 78%;
  padding: 0 0.12em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Kicker / overline label */
.overline {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Signature: dashed-grid framing --------------------------------- */
/* A subtle organised structure. Apply to a wrapper. */
.dashed-frame {
  border: 1.5px dashed var(--border-dashed);
  border-radius: var(--radius-xl);
}
.dashed-grid-bg {
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px var(--space-9)),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px var(--space-9));
  background-position: center;
}

/* ---- Dark section helper -------------------------------------------- */
.on-forest {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}
.on-forest h1, .on-forest h2, .on-forest h3, .on-forest h4 { color: var(--text-on-dark); }
.on-forest .accent-word,
.on-forest em.accent { color: var(--text-accent-on-dark); }

/* ---- Signature: glass-forest panel ---------------------------------- */
/* A gradient-on-forest block ringed by a luminous hairline border, with a
   faint top sheen. Reads like lit glass on the dark surface. Use for feature
   panels, image frames, stat blocks, callouts on forest. */
.glass-forest {
  background: linear-gradient(155deg, var(--forest-600), var(--forest-900));
  border: 1px solid var(--border-on-dark);
  color: var(--text-on-dark);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 rgba(252, 250, 244, 0.07);
}
.glass-forest h1, .glass-forest h2, .glass-forest h3, .glass-forest h4 { color: var(--text-on-dark); }
.glass-forest .accent-word,
.glass-forest em.accent { color: var(--text-accent-on-dark); }

/* ---- Focus ---------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Container helper */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }