/* base.css — apex typography and colour, through tokens only.
 * Every colour, face and size here is a var(): --sk-* applied/scale tokens and
 * --font-* faces from the generated tokens.css / fonts.css. No literal colour,
 * family or length (build/checks.mjs `no-literals` fails the build on one).
 *
 * The design is Cam's approved final (2026-10-22, DECISIONS AP-8): border B — a
 * running vine between two rules with a rose at each corner — no watermark, a
 * full-colour medallion between sections, chstyle's personal seal in the upper
 * right, Heliotrope body text, rose bullets, Roman-numbered lists.
 */

html {
  font-size: var(--sk-font-size-root);
  background-color: var(--sk-color-surface);
  color: var(--sk-color-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Body text is Heliotrope 3. font-size-adjust carries its x-height to every face set
 * inside running text (Poema italics, Gorgias German), so they match it visually
 * rather than by point size. Display roles turn it off. */
body {
  font-family: var(--font-apparatus);
  font-size: var(--sk-font-size-body);
  font-size-adjust: var(--sk-body-aspect);
  line-height: var(--sk-line-height-body);
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  color: var(--sk-color-body);
  background-color: var(--sk-color-surface);
}

/* Framing: a parchment leaf on an engraved ground.
 * The ground is the parchment under a mauve wash (::before) and mauve hatching
 * (::after) — accents only, no further colour. It carries no text (every
 * contrast pair is measured on the leaf's surface). The page and the leaf are
 * each their own stacking context (isolation), so their z-index:-1 layers paint
 * above their own opaque background, not behind it (Codex #74). */
.sk-page { isolation: isolate; }
.sk-page::before, .sk-page::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.sk-page::before {
  background-color: var(--sk-wash-color);
  opacity: var(--sk-ground-wash-opacity);
}
.sk-page::after {
  background-image: repeating-linear-gradient(to bottom,
    var(--sk-hatch-color) 0 var(--sk-rule-weight), transparent var(--sk-rule-weight) var(--sk-hatch-pitch));
  opacity: var(--sk-hatch-opacity);
}

/* The leaf: surface and a double rule — an outer rule and a hairline a frame-gap inside it. */
.sk-leaf {
  isolation: isolate;
  background-color: var(--sk-color-surface);
  border: var(--sk-frame-outer-weight) solid var(--sk-frame-color);
  box-shadow:
    inset 0 0 0 var(--sk-frame-gap) var(--sk-color-surface),
    inset 0 0 0 calc(var(--sk-frame-gap) + var(--sk-rule-weight)) var(--sk-frame-color),
    0 var(--sk-space-2) var(--sk-shadow-blur) calc(-1 * var(--sk-space-3)) var(--sk-frame-color);
}

/* The running vine between the rules: chstyle's Q277 S3 leaf sprig (its own TikZ paths,
 * static/img/sprig-{h,v}.svg) repeated stem to stem, used as a mask so its colour is
 * the frame token in both modes. */
.sk-vine {
  background-color: var(--sk-frame-color);
  opacity: var(--sk-band-opacity);
  mask-image: url('/img/sprig-h.svg'), url('/img/sprig-h.svg'), url('/img/sprig-v.svg'), url('/img/sprig-v.svg');
  mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  mask-position: top left, bottom left, top left, top right;
  mask-size: auto var(--sk-band-height), auto var(--sk-band-height), var(--sk-band-height) auto, var(--sk-band-height) auto;
}

/* Corner roses: where the horizontal and vertical vines cross, the vine ends in a wine
 * rose (static/img/rose.svg, self-drawn — the same rose as the bullets). The element is a
 * parchment disc exactly the bloom's size, so the crossing stems stop cleanly under it
 * and the bloom's spiral and petal cuts show parchment. */
.sk-rose { background-color: var(--sk-color-surface); border-radius: 50%; }
.sk-rose::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sk-rose-color);
  mask-image: url('/img/rose.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* The seal: chstyle's personal seal (assets/branding/seal/), single-ink, coloured by
 * chstyle's display role — its own #301934 on parchment, imperium's dark display on the
 * dark ground. Decorative; the page names Cam in its heading. */
.sk-seal-mark {
  background-color: var(--sk-color-display);
  mask-image: url('/img/seal.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Section breaks: the apex rose (the same rose as the border corners and the bullets), wine,
 * small and centred between sections — never on a heading (Cam, 2026-10-22). */
.sk-prose + .sk-section::before, .sk-section + .sk-section::before {
  content: '';
  background-color: var(--sk-rose-color);
  mask-image: url('/img/rose.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* End of page: the medallion in full colour (img/fleuron.webp), once, above the footer rule.
 * On the dark ground it sits on a small pale disc. */
.sk-footer::before {
  content: '';
  background-image: url('/img/fleuron.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-origin: content-box;
}
@media (prefers-color-scheme: dark) {
  .sk-footer::before {
    background-color: var(--sk-color-ink);
    border-radius: 50%;
    padding: var(--sk-fleuron-disc-pad);
  }
}

/* The mobile menu button: three quartz bars (ink when open); its list sits on the surface
 * between two hairlines. */
.sk-menu-button { color: var(--sk-meta-color); }
.sk-menu[open] .sk-menu-button { color: var(--sk-heading-color); }
.sk-menu-button:focus-visible { outline: var(--sk-rule-weight) solid var(--sk-link-color); outline-offset: var(--sk-space-1); }
.sk-menu-icon { border-top: var(--sk-menu-bar) solid currentColor; border-bottom: var(--sk-menu-bar) solid currentColor; }
.sk-menu-icon::before { border-top: var(--sk-menu-bar) solid currentColor; }
.sk-nav-menu {
  background-color: var(--sk-color-surface);
  border-top: var(--sk-rule-weight) solid var(--sk-rule-color);
  border-bottom: var(--sk-rule-weight) solid var(--sk-rule-color);
  box-shadow: 0 var(--sk-space-2) var(--sk-space-3) var(--sk-color-subtle);   /* lifts the open list off the page beneath */
}
/* A mauve hairline between the menu's items, so they read as a divided list. */
.sk-nav-menu li + li { border-top: var(--sk-rule-weight) solid var(--sk-rule-color); }

/* The portrait's frame: a mauve hairline around the photo; the placeholder is a quiet panel. */
.sk-portrait { border: var(--sk-rule-weight) solid var(--sk-frame-color); }
.sk-portrait-empty { background-color: var(--sk-color-calloutbg); font-size: var(--sk-font-size-small); }

/* The running head: a hairline under the site name and navigation. */
.sk-header { border-bottom: var(--sk-rule-weight) solid var(--sk-rule-color); }

h1, h2, h3, .sk-title, .sk-sitename {
  font-family: var(--font-display);
  font-size-adjust: none;
  color: var(--sk-heading-color);
  line-height: var(--sk-line-height-heading);
  font-weight: 400;
}

/* Page title: Borges Open Regular (Cam, 2026-10-22; was Open Bold). */
.sk-title { font-family: var(--font-open); font-weight: 400; font-size: var(--sk-font-size-h1); }

/* Section headings — only the sections Cam writes (## in his Markdown): Borges Regular small
 * caps, mauve, Roman-numbered in order. */
.sk-heading {
  font-size: var(--sk-font-size-h2);
  color: var(--sk-label-color);
  font-feature-settings: var(--sk-allsmallcaps);
  letter-spacing: var(--sk-letter-spacing-smallcaps);
  counter-increment: sk-section;
}
.sk-heading::before {
  content: counter(sk-section, upper-roman) '.\2002';
}
.sk-main { counter-reset: sk-section; }

/* Subsection headings Cam writes inside a section (### and ####): Borges Light small caps. */
.sk-prose h3, .sk-prose h4 {
  font-family: var(--font-body);
  font-weight: 300;
  font-feature-settings: var(--sk-allsmallcaps);
  letter-spacing: var(--sk-letter-spacing-smallcaps);
}
.sk-prose h3 { font-size: var(--sk-font-size-h3); }
.sk-prose h4 { font-size: var(--sk-font-size-body); }

/* Site name (running head): Borges Poema. */
.sk-sitename { font-family: var(--font-poema); font-size: var(--sk-font-size-h3); }
.sk-sitename a { font-family: var(--font-poema); font-weight: 400; color: var(--sk-heading-color); text-decoration: none; }

/* Italics in running text (and the role line): Borges Poema, size-matched to the body.
 * Poema is slanted by design and has one weight, so neither is synthesised. */
em, i, .sk-roleline { font-family: var(--font-poema); font-style: normal; font-weight: 400; }
.sk-roleline { color: var(--sk-meta-color); }
.sk-affiliation::before { content: ' · '; }

/* German (lang="de" in content): Gorgias, size-matched to the body. */
:lang(de) { font-family: var(--font-fraktur); font-style: normal; font-weight: 400; }

/* Links and list items: Borges Medium. */
a, li { font-family: var(--font-body); font-weight: 500; }

.sk-nav a {
  color: var(--sk-meta-color);
  font-feature-settings: var(--sk-allsmallcaps);
  letter-spacing: var(--sk-letter-spacing-smallcaps);
  text-decoration: none;
}
.sk-nav a[aria-current='page'] { color: var(--sk-heading-color); }

a { color: var(--sk-link-color); text-decoration-thickness: var(--sk-rule-weight); text-underline-offset: var(--sk-underline-offset); }
a:hover { color: var(--sk-heading-color); }
a:focus-visible { outline: var(--sk-rule-weight) solid var(--sk-link-color); outline-offset: var(--sk-space-1); }

em, i, .sk-term { color: var(--sk-color-term); }
strong, b { font-weight: 700; }
code, kbd, samp { font-family: var(--font-mono); }
:lang(grc), :lang(el) { font-family: var(--font-greek); }

/* Bullets: the apex rose, in mauve. Numbered lists: Roman numerals. */
.sk-prose ul:not(.sk-links) li::before {
  content: '';
  background-color: var(--sk-label-color);
  mask-image: url('/img/rose.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
}
.sk-publications, .sk-prose ol { list-style-type: upper-roman; }

/* The mauve hairline rule: the only structural divider. */
.sk-rule {
  border: 0;
  border-top: var(--sk-rule-weight) solid var(--sk-rule-color);
}

/* Size the footer's text, not the footer: its width is in ch of the body face. */
.sk-footer { color: var(--sk-meta-color); }
.sk-footer p { font-size: var(--sk-font-size-small); }

.sk-skip {
  color: var(--sk-link-color);
  background-color: var(--sk-color-surface);
}

/* Visible only while a CAM: slot is unfilled; a --strict build refuses to ship one. */
.cam-slot {
  color: var(--sk-color-term);
  outline: var(--sk-rule-weight) dashed var(--sk-color-alert);
  font-family: var(--font-literal);
}