/* amendion's vocabulary — paper, ink and one gold line: its values for the
   grammar's keys under html[data-site="amendion"], light and dark, and its
   one device, the history line (docs/2026-10-19-website-spec.md §4). The
   display face is Fraunces, self-hosted (fonts/, OFL), at weight 500 and
   optical size 144; the body stays the system's. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fraunces-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fraunces-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */

html[data-site="amendion"] {
  /* Warm paper, ink, and gold for lines and marks; accent text is the deeper
     ochre, which holds 4.5:1 on the paper. */
  --canvas: #f7f3ea;
  --canvas-glow: transparent;
  --surface: #fffcf4;
  --ink: #1b1814;
  --ink-secondary: #3b342b;
  --ink-muted: #6b6257;
  --accent: #b08a1e;
  --accent-end: #d9b24a;
  --accent-ink: #7a5c07;
  --on-accent: #1b1814;
  --border: rgba(27, 24, 20, 0.12);
  --border-strong: rgba(27, 24, 20, 0.24);
  --glow: rgba(176, 138, 30, 0.2);
  --selection: rgba(217, 178, 74, 0.32);

  /* An atelier speaks in a set face. */
  --display-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --weight-display: 500;
  --weight-heading: 500;
  --weight-wordmark: 500;
  --size-wordmark: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --tracking-display: -0.01em;
  --tracking-wordmark: 0;

  /* The history line: the rail it runs in, left of the text; its dots; how
     far up it reaches, to just under the wordmark; and where the oldest
     entry's dot sits below the top of its entry. */
  --rail: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --history-dot: 0.5625rem;
  --history-dot-ring: 0.1875rem;
  --history-reach: calc(var(--space-masthead) - var(--space-4));
  --history-root: calc(var(--ledger-gap) + var(--type-meta) * var(--leading-meta) / 2);
  --history-draw: 1800ms;
  --history-draw-delay: 200ms;
}

@media (prefers-color-scheme: dark) {
  /* Warm paper-black: the same desk at night, never a gothic theme. */
  html[data-site="amendion"] {
    --canvas: #141210;
    --canvas-glow: transparent;
    --surface: #1d1a16;
    --ink: #ece6da;
    --ink-secondary: #d3cabb;
    --ink-muted: #a39888;
    --accent: #e3b341;
    --accent-end: #f1cf6b;
    --accent-ink: #e3b341;
    --on-accent: #141210;
    --border: rgba(236, 230, 218, 0.1);
    --border-strong: rgba(236, 230, 218, 0.22);
    --glow: rgba(227, 179, 65, 0.2);
    --selection: rgba(227, 179, 65, 0.3);
  }
}

/* ── The page: every line of text starts right of the rail ──────────────── */

html[data-site="amendion"] .content,
html[data-site="amendion"] .footer {
  padding-inline-start: var(--rail);
}

/* ── The device: the history line ───────────────────────────────────────────
   One hairline gold path from under the wordmark down through the ledger to
   its oldest entry, a dot at each entry — a commit graph's history, drawn
   once on load. The path is an SVG stretched over the history block: one
   user unit wide at one CSS pixel, so its stroke stays a hairline however
   tall the block grows.

   The oldest entry floats, so the history block ends where that entry begins
   and the line can end exactly at its dot, whatever the entries' heights;
   the coda after the ledger clears it. */

.history {
  position: relative;
}

.history-line {
  position: absolute;
  top: calc(-1 * var(--history-reach));
  left: calc((var(--history-dot) - var(--hairline)) / 2 - var(--rail));
  width: var(--hairline);
  height: calc(100% + var(--history-reach) + var(--history-root));
  overflow: visible;
}

.history-line path {
  fill: none;
  stroke: var(--accent);
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: history-draw var(--history-draw) var(--ease-in-out) var(--history-draw-delay) both;
}

@keyframes history-draw {
  from {
    stroke-dashoffset: 1;
  }
}

.ledger-entry {
  position: relative;
}

.ledger-entry::before {
  content: "";
  position: absolute;
  top: calc(var(--ledger-gap) + (var(--type-meta) * var(--leading-meta) - var(--history-dot)) / 2);
  left: calc(-1 * var(--rail));
  width: var(--history-dot);
  height: var(--history-dot);
  border: var(--hairline) solid var(--accent);
  border-radius: var(--radius-full);
  background-color: var(--accent);
  box-shadow: 0 0 0 var(--history-dot-ring) var(--canvas);
}

/* The newest entry is this page, still being written: an open dot, as a
   graph draws the working copy. */
.ledger-entry:first-child::before {
  background-color: var(--canvas);
}

.ledger-entry:last-child {
  float: left;
  width: 100%;
  margin-bottom: var(--space-11);
}

.ledger-coda {
  clear: left;
}

html[data-site="amendion"] .content > .ledger-coda {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .history-line path {
    animation: none;
  }
}