@import url('fonts/fonts.css'); /* self-hosted woff2 — MUST stay at line 1 (CSS drops @import placed after any rule) */

/* Ana Vanzin — bundled tokens */

/* ===== tokens/colors.css ===== */
/* Ana Vanzin — color tokens
   Three inks only, like an incunabulum page: black ink, laid paper, rubric red.
   Never introduce new hues. Tints are derived with color-mix for rules/borders. */
:root {
  /* base */
  --ink: #211B16;
  --paper: #F2EAD9;
  --rubric: #9B2C1C;

  /* secondary accent — gold of the pixel-academic / desktop variant.
     Ornament, frames, retro-OS chrome. Never replaces rubric for links. */
  --gold: #9C7C3D;
  --gold-2: #B7934C;
  --gold-soft: color-mix(in srgb, var(--gold) 45%, var(--paper));

  /* tertiary accent — lilac of the "notas" (personal/lifestyle) variant.
     Soft surface + accent for the notes-app theme; never on the scholarly core. */
  --lilac: #B49AD4;
  --lilac-2: #9579C0;
  --lilac-bg: #ECE6F4;

  /* derived tints (ink on paper at reduced strength) */
  --ink-70: color-mix(in srgb, var(--ink) 70%, var(--paper));
  --ink-50: color-mix(in srgb, var(--ink) 50%, var(--paper));
  --ink-30: color-mix(in srgb, var(--ink) 30%, var(--paper));
  --ink-15: color-mix(in srgb, var(--ink) 15%, var(--paper));
  --paper-deep: color-mix(in srgb, var(--paper) 96%, var(--ink));

  /* semantic aliases */
  --bg-page: var(--paper);
  --bg-inverse: var(--ink);
  --text-body: var(--ink);
  --text-muted: var(--ink-70);
  --text-faint: var(--ink-50);
  --text-inverse: var(--paper);
  --accent: var(--rubric);            /* links, blindfold elements, small-caps labels */
  --accent-2: var(--gold);            /* secondary: ornament, frames, desktop chrome */
  --accent-hover: color-mix(in srgb, var(--rubric) 85%, var(--ink));
  --rule-strong: var(--ink);          /* structural rules: 1px solid ink */
  --rule-hairline: var(--ink-30);     /* column rules, table rows */
  --rule-rubric: var(--rubric);       /* the blindfold line, active markers */
  --focus-ring: var(--rubric);
}


/* ===== tokens/typography.css ===== */
/* Ana Vanzin — type tokens
   Two families only:
   - Cormorant Garamond 500/600 — display, headings, tracked-out small caps
   - Hanken Grotesk 400/600 — body and UI
   No italics for emphasis in UI; use rubric small caps instead.
   (Fonts loaded via self-hosted fonts/fonts.css imported at the top of this file.) */

:root {
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;

  /* scale (rem) — generous display, restrained body */
  --text-hero: clamp(4rem, 11vw, 9rem);     /* the name */
  --text-h1: 3rem;        /* page titles */
  --text-h2: 2rem;        /* section titles */
  --text-h3: 1.375rem;    /* sub-heads, entry titles */
  --text-lead: 1.1875rem; /* lead paragraphs (body family) */
  --text-base: 1rem;      /* body */
  --text-small: 0.875rem; /* metadata, footnotes */
  --text-eyebrow: 0.8125rem; /* small-caps labels */
  --text-footnote: 0.8125rem;

  --leading-display: 1.04;
  --leading-heading: 1.15;
  --leading-body: 1.62;
  --leading-tight: 1.3;

  /* tracked-out uppercase Garamond for eyebrows/labels */
  --tracking-eyebrow: 0.22em;
  --tracking-caps: 0.14em;

  --weight-display: 500;
  --weight-display-strong: 600;
  --weight-body: 400;
  --weight-body-strong: 600;
}


/* ===== tokens/spacing.css ===== */
/* Ana Vanzin — spacing, layout, borders, motion
   The page is a single strong text column with generous margins.
   No cards, no shadows, no gradients, no rounded corners — ever. */
:root {
  /* spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* layout */
  --measure: 62ch;            /* max width of running text */
  --column-max: 720px;        /* the single text column */
  --page-max: 1080px;         /* outer page incl. marginalia */
  --page-pad: clamp(24px, 6vw, 72px);

  /* rules & borders — square corners only */
  --rule-w-hairline: 1px;
  --rule-w-strong: 2px;
  --radius: 0;                /* fixed: no rounded corners */
  --shadow: none;             /* fixed: no shadows */

  /* motion — one restrained reveal, nothing else */
  --ease-page: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --duration-reveal: 900ms; /* @kind other */
  --duration-ui: 150ms; /* @kind other */
}


/* ===== tokens/base.css ===== */
/* Ana Vanzin — base element styles (incunabulum page defaults) */
* { box-sizing: border-box; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display-strong);
  line-height: var(--leading-heading);
  margin: 0;
  text-wrap: balance;
}

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

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duration-ui) ease;
}
a:hover { color: var(--accent-hover); }
a:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 3px; }

hr {
  border: 0;
  border-top: var(--rule-w-hairline) solid var(--rule-hairline);
  margin: var(--space-7) 0;
}

::selection { background: var(--rubric); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}