/* ==========================================================================
   BASE — reset, typography, page texture, layout primitives
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: var(--color-paper);
}

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

/* ---- The page is ruled notebook paper ----
   The ruling is a background on the document, not a fixed overlay: it has to
   travel with the text, or the illusion breaks the moment you scroll. Two
   layers — horizontal rules at the ruling pitch, and a plum margin rule down
   the left. Faint enough that you notice them only when you look. No grain,
   no noise, no distress: the notebook is used, not old. */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background-color: var(--color-paper);
  min-height: 100vh;
  position: relative;

  /* Sits 0.875rem left of where the writing starts, and tracks the content
     column, so the margin rule and the first letter of every heading share
     one edge at any width. */
  --margin-rule-x: calc(
    max(var(--page-margin), 50% - (var(--content-width) / 2) + var(--page-margin))
    - 0.875rem
  );

  background-image:
    repeating-linear-gradient(
      to bottom,
      var(--color-rule) 0 1px,
      transparent 1px var(--rule-pitch)
    );
  background-repeat: repeat;
  background-size: 100% var(--rule-pitch);
}

/* The margin rule earns its place only where the gutter is wide enough to
   read as a margin rather than as a stray border. */
@media (min-width: 1024px) {
  body {
    background-image:
      linear-gradient(var(--color-plum-rule), var(--color-plum-rule)),
      repeating-linear-gradient(
        to bottom,
        var(--color-rule) 0 1px,
        transparent 1px var(--rule-pitch)
      );
    background-repeat: repeat-y, repeat;
    background-size: 1px 100%, 100% var(--rule-pitch);
    background-position: var(--margin-rule-x) 0, 0 0;
  }
}

#top { position: absolute; top: 0; }

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

a { color: inherit; }

button { font: inherit; color: inherit; }

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

/* ---- Typography ---- */

/* Bodoni is display type: it lives large, where its hairlines are the point.
   Optical sizing does the work of keeping it from getting brittle. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-wrap: balance;
}

/* Reading text has one weight, so emphasis is carried by case, tracking and
   ink — never by a bolder cut that does not exist. `font-synthesis: none`
   makes that a guarantee: anything that still asks for bold renders at its
   real weight instead of being smeared into a fake one. */
body { font-synthesis: none; }

h4 {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

strong, b {
  font-weight: 400;
  color: var(--color-plum);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p { max-width: 62ch; }
p.lede { font-size: var(--text-md); color: var(--color-ink-soft); line-height: var(--leading-relaxed); }

/* Ligatures off: a reading face will happily turn `--x` into an en-dash, which
   is exactly wrong when the text is naming a CSS property. */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
}

code {
  font-size: 0.88em;
  color: var(--color-plum);
  white-space: nowrap;
}

.font-display,
.font-serif { font-family: var(--font-display); font-optical-sizing: auto; }

.font-serif-text {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}

/* The hand. Annotations, sketch labels, revision marks — a dozen words at a
   time. Never body copy, never navigation. */
.hand {
  font-family: var(--font-hand);
  font-weight: 400;
  color: var(--color-plum);
  line-height: 1.35;
  letter-spacing: 0.005em;
}

.font-mono { font-family: var(--font-mono); }

/* Eyebrow / kicker label — the archive's own voice: mono, quiet, precise */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.eyebrow::before {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
}

.eyebrow--ink { color: var(--color-eggplant); }

/* ---- Editorial grid ----
   A 12-column asymmetric grid. Sections set their own spans per element —
   nothing tiles, nothing repeats by default. .bleed breaks an element out
   to the full viewport width regardless of container. */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
}

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

.start-1  { grid-column-start: 1; }
.start-2  { grid-column-start: 2; }
.start-3  { grid-column-start: 3; }
.start-4  { grid-column-start: 4; }
.start-5  { grid-column-start: 5; }
.start-6  { grid-column-start: 6; }
.start-7  { grid-column-start: 7; }
.start-8  { grid-column-start: 8; }
.start-9  { grid-column-start: 9; }

.bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(4, 1fr); column-gap: var(--space-4); }
  [class^="col-"], [class*=" col-"] { grid-column: span 4 !important; }
  [class^="start-"], [class*=" start-"] { grid-column-start: 1 !important; }
}

/* ---- Layout ---- */

.wrap {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--page-margin);
  position: relative;
  z-index: 1;
}

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

.stack > * + * { margin-top: var(--space-6); }

section { position: relative; z-index: 1; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--color-eggplant);
  color: var(--color-on-eggplant);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--duration-fast) var(--ease-ink);
}

.skip-link:focus { top: var(--space-4); }

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

::selection {
  background: var(--color-lavender-soft);
  color: var(--color-eggplant-deep);
}