/* 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-hq.webp, Cam's higher-quality rose, 2026-10-26; bullets keep rose.svg). 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-hq.webp');
  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-opening + .sk-section::before, .sk-section + .sk-section::before {
  content: '';
  background-color: var(--sk-rose-color);
  mask-image: url('/img/rose-hq.webp');
  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; it is
 * a link back to the top of the page (Cam, 2026-10-26). On the dark ground it is an engraving in the
 * body's pale ink: the emblem's linework as a mask (img/fleuron-mask.webp), coloured by the body
 * token, with no disc. The image is on an inner mark, so the link's focus ring isn't masked. */
.sk-medallion { text-decoration: none; }
.sk-medallion-mark {
  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-medallion-mark {
    background-image: none;
    background-color: var(--sk-color-body);
    mask-image: url('/img/fleuron-mask.webp');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
}

/* 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, unnumbered (Cam, 2026-10-26: no automatic Roman numerals on a web page). */
.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);
}

/* Subsection headings Cam writes inside a section (### and ####): Borges Light, set as he types
 * them — no small capitals (Cam, 2026-10-26). */
.sk-prose h3, .sk-prose h4 {
  font-family: var(--font-body);
  font-weight: 300;
}
.sk-prose h3 { font-size: var(--sk-font-size-h3); }
/* Subsubsection headings (####): Borges Light, a step smaller than subsection headings (Cam, 2026-10-26). */
.sk-prose h4 { font-size: var(--sk-font-size-h4); }

/* 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); }

/* Writing: each PDF's note and date follow its title in the quartz meta colour, Borges Light. */
.sk-writing-meta { color: var(--sk-meta-color); font-weight: 300; }
.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: Triplicate A Poly Regular (Cam, 2026-10-25). They inherit the body's
 * size and font-size-adjust, so Triplicate is matched to Heliotrope's x-height in running text.
 * The navigation keeps Borges Medium small caps. */
a, li { font-family: var(--font-literal); font-weight: 400; }
.sk-nav li, .sk-nav a { 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); }

/* Code (Cam, 2026-10-25/26): `inline code` sits in a small rounded box on the callout panel; a
 * fenced ``` block is a soft rounded panel with a quiet hairline — present, not loud. Triplicate A,
 * the monospaced cut, so columns line up. */
.sk-prose code { background-color: var(--sk-color-calloutbg); border: var(--sk-rule-weight) solid var(--sk-color-subtle); }
.sk-prose pre { background-color: var(--sk-color-calloutbg); border: var(--sk-rule-weight) solid var(--sk-color-subtle); }
/* Code-block text at the list size (Cam, 2026-10-26). */
.sk-prose pre { font-size: var(--sk-font-size-list); }
.sk-prose pre code { background-color: transparent; border: 0; }

/* List items (and code blocks): 4pt under the text around them (Cam, 2026-10-25/26). */
.sk-prose li { font-size: var(--sk-font-size-list); }
/* Links in running text: 2pt under the text around them (Cam, 2026-10-26). */
.sk-prose p a { font-size: var(--sk-font-size-link); }
: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; }

/* Block quotes, callouts and alerts (Cam, 2026-10-25). A plain quote is only inset. A callout
 * (`> [!note]` in Markdown) is inset on the callout panel inside a mauve hairline on all four
 * sides; an alert (`> [!warning]`) on the alert panel inside a wine hairline. Titles are small
 * capitals in the border's colour. */
.sk-prose .sk-callout { background-color: var(--sk-color-calloutbg); border: var(--sk-rule-weight) solid var(--sk-rule-color); }
.sk-prose .sk-alert { background-color: var(--sk-color-alertbg); border: var(--sk-rule-weight) solid var(--sk-color-term); }
.sk-callout-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-feature-settings: var(--sk-allsmallcaps);
  letter-spacing: var(--sk-letter-spacing-smallcaps);
  color: var(--sk-label-color);
}
.sk-alert .sk-callout-title { color: var(--sk-color-term); }

/* 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); }

/* The contact block at the foot of every page (layout in layout.css): the email, then the
 * profile links, in Triplicate A Poly Regular (chstyle's literal face) — a deliberate exception
 * to Borges Medium for links — at --sk-font-size-contact, 12pt (Cam, 2026-10-25). */
.sk-contact li, .sk-contact a { font-family: var(--font-literal); font-weight: 400; font-size: var(--sk-font-size-contact); }

.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);
}

/* The opening's cue: "Continue" in Triplicate A Poly Italic, quartz, over a thin mauve chevron. */
.sk-cue { color: var(--sk-label-color); text-decoration: none; }
.sk-cue-word { font-family: var(--font-literal); font-style: italic; font-weight: 400; font-size: var(--sk-font-size-small); color: var(--sk-meta-color); }
.sk-cue:hover .sk-cue-word { color: var(--sk-heading-color); }
.sk-cue-chevron { fill: none; stroke: currentColor; stroke-width: var(--sk-rule-weight); overflow: visible; }

/* Phone: title and role line a little smaller, the same on every page (Cam, 2026-10-26). */
@media (max-width: 55rem) {
  .sk-title { font-size: var(--sk-font-size-h1-mobile); }
  .sk-roleline { font-size: var(--sk-font-size-roleline-mobile); }
}

/* A face named in the text, set in that face (Cam, 2026-10-26) — e.g. the Colophon's type notes:
 * <span class="sk-face-borges-light">Borges Light</span>. */
.sk-face-borges-open { font-family: var(--font-open); font-weight: 400; }
.sk-face-borges-light { font-family: var(--font-body); font-weight: 300; }
.sk-face-borges-regular { font-family: var(--font-body); font-weight: 400; }
.sk-face-borges-medium { font-family: var(--font-body); font-weight: 500; }
.sk-face-borges-poema { font-family: var(--font-poema); font-weight: 400; font-style: normal; }
.sk-face-heliotrope { font-family: var(--font-apparatus); font-weight: 400; }
.sk-face-triplicate-poly { font-family: var(--font-literal); font-weight: 400; }
.sk-face-otta { font-family: var(--font-greek); font-weight: 400; }
.sk-face-gorgias { font-family: var(--font-fraktur); font-weight: 400; }

/* Colour swatches (the Colophon's palette): light-mode colour on the left, dark-mode on the right,
 * matching the "light / dark" hex pair beside them. Decorative (aria-hidden in the markup). */
.sk-swatch { border: var(--sk-rule-weight) solid var(--sk-color-subtle); }
.sk-swatch-parchment { background-image: linear-gradient(to right, var(--sk-override-color-surface) 50%, var(--chs-dark-surface) 50%); }
.sk-swatch-ink { background-image: linear-gradient(to right, var(--chs-ink) 50%, var(--chs-dark-ink) 50%); }
.sk-swatch-mauve { background-image: linear-gradient(to right, var(--chs-accent) 50%, var(--chs-dark-accent) 50%); }
.sk-swatch-wine { background-image: linear-gradient(to right, var(--chs-term) 50%, var(--chs-dark-term) 50%); }
.sk-swatch-quartz { background-image: linear-gradient(to right, var(--chs-secondary) 50%, var(--chs-dark-secondary) 50%); }
.sk-swatch-purple { background-image: linear-gradient(to right, var(--chs-display) 50%, var(--chs-dark-display) 50%); }

/* Galleries (Cam, 2026-10-26): a strip of thumbnails that scrolls sideways; each opens a larger view
 * (an :target overlay, so no script) with previous / next / close links. */
.sk-gallery-item { text-decoration: none; }
.sk-gallery-item img { border: var(--sk-rule-weight) solid var(--sk-color-subtle); }
.sk-gallery-item:hover img { border-color: var(--sk-color-term); }
.sk-gallery-label { font-family: var(--font-literal); font-weight: 400; color: var(--sk-meta-color); }
.sk-lightbox-backdrop { background-color: var(--sk-color-surface); opacity: 0.97; }
.sk-lightbox-figure img { border: var(--sk-rule-weight) solid var(--sk-color-subtle); }
.sk-lightbox-figure figcaption { font-family: var(--font-literal); font-weight: 400; color: var(--sk-meta-color); }
.sk-lightbox-nav a { color: var(--sk-link-color); }
/* Teaching-review elements (Cam's Teaching Reviews packs, 2026-10-26), rebuilt as site components:
 * the packs' markup and design with the site's own faces and colour tokens, so they follow the dark
 * mode and need no inline styles or embedded fonts. [data-ch-review] scopes them; data-illustrated
 * marks the illustrated edition (double rule, kicker, botanical art). Geometry is in layout.css. */
[data-ch-review] {
  color: var(--sk-color-body);
  font-family: var(--font-apparatus);
  font-size-adjust: none;
  font-synthesis: none;
  font-variant-numeric: lining-nums tabular-nums;
}
[data-ch-review][data-background="surface"] { background-color: var(--sk-color-surface); }
[data-ch-review] .chr-heading { font-family: var(--font-body); font-weight: 400; color: var(--sk-color-body); }
[data-ch-review] .chr-quotation { border-left: var(--sk-rule-weight) solid var(--sk-color-term); }
[data-ch-review] .chr-quotation p { font-family: var(--font-apparatus); font-weight: 400; color: var(--sk-color-body); }
[data-ch-review] .chr-attribution, [data-ch-review] .chr-count, [data-ch-review] .chr-ticks,
[data-ch-review] .chr-value small, [data-ch-review] .chr-row-value small { font-family: var(--font-literal); font-weight: 400; color: var(--sk-meta-color); }
[data-ch-review] .chr-value { font-family: var(--font-body); font-weight: 400; color: var(--sk-color-term); }
[data-ch-review] .chr-row-value { font-family: var(--font-literal); font-weight: 400; color: var(--sk-color-term); }
[data-ch-review] .chr-row-label { font-family: var(--font-apparatus); font-weight: 400; }
[data-ch-review] .chr-note, [data-ch-review] .chr-sources { color: var(--sk-meta-color); }
[data-ch-review] .chr-sources { border-top: var(--sk-rule-weight) solid var(--sk-color-subtle); }
[data-ch-review] .chr-sources summary { font-family: var(--font-literal); font-weight: 400; color: var(--sk-color-term); cursor: pointer; }
[data-ch-review] .chr-sources summary:focus-visible { outline: var(--sk-rule-weight) solid var(--sk-color-term); outline-offset: var(--sk-space-1); }
[data-ch-review] .chr-sources p { font-family: var(--font-apparatus); color: var(--sk-meta-color); }
[data-ch-review] .chr-row { border-bottom: var(--sk-rule-weight) solid var(--sk-color-subtle); }
[data-ch-review] .chr-track {
  border-right: var(--sk-rule-weight) solid var(--sk-color-subtle);
  background-image: repeating-linear-gradient(to right, var(--sk-color-subtle) 0 var(--sk-rule-weight), transparent var(--sk-rule-weight) calc(100% / var(--chr-divisions)));
}
[data-ch-review] .chr-track::before { border-top: var(--sk-rule-weight) solid var(--sk-color-subtle); }
[data-ch-review] .chr-point { background-color: var(--sk-color-term); }
/* The illustrated edition. */
[data-illustrated="true"] { border: var(--sk-rule-weight) solid var(--sk-color-subtle); }
[data-illustrated="true"]::before { border: var(--sk-rule-weight) solid var(--sk-color-subtle); opacity: 0.55; }
[data-illustrated="true"] .chr-kicker {
  border-bottom: var(--sk-rule-weight) solid var(--sk-color-subtle);
  font-family: var(--font-literal);
  font-weight: 400;
  letter-spacing: var(--sk-rv-kicker-track);
  text-transform: uppercase;
  color: var(--sk-color-term);
}
[data-illustrated="true"] .chr-quotation { border-left: 0; }
[data-illustrated="true"] .chr-quotation p { font-family: var(--font-poema); font-style: normal; }
[data-illustrated="true"] .chr-opening-mark { font-family: var(--font-body); color: var(--sk-color-term); opacity: 0.65; }
[data-illustrated="true"] .chr-value { letter-spacing: var(--sk-rv-value-track); }
[data-illustrated="true"] .chr-value small { letter-spacing: 0; }
[data-illustrated="true"][data-kind="metric"] .chr-attribution { border-top: var(--sk-rule-weight) solid var(--sk-color-subtle); }
[data-illustrated="true"] .chr-track::after { border-top: var(--sk-rv-bar) solid var(--sk-color-term); }
[data-illustrated="true"] .chr-point { outline: var(--sk-rv-ring) solid var(--sk-color-surface); box-shadow: 0 0 0 var(--sk-rv-halo) var(--sk-color-subtle); }
/* Docclean exhibit (desiderata, Cam 2026-10-26; redesigned 2026-10-27): the scan above, plain
 * pdftotext beside Docclean's output below, with mauve hairlines; the output is in Triplicate A. Geometry is in layout.css. */
/* Framed (Cam, 2026-10-26): a ground of its own inside a double mauve hairline, like the illustrated
 * Teaching exhibits. The ground is the example ground lifted halfway to the page, so the mauve labels
 * and muted subtitles keep 4.5:1 (on the full example ground they fall just short, 4.47). */
.dc-exhibit { background-color: color-mix(in srgb, var(--sk-color-examplebg) 50%, var(--sk-color-surface)); border: var(--sk-rule-weight) solid var(--sk-rule-color); color: var(--sk-color-ink); }
.dc-exhibit::before { border: var(--sk-rule-weight) solid var(--sk-rule-color); opacity: 0.55; }
.dc-exhibit .dc-grid { border-top: var(--sk-rule-weight) solid var(--sk-rule-color); }
.dc-exhibit .dc-output { border-left: var(--sk-rule-weight) solid var(--sk-rule-color); }
.dc-exhibit .dc-label {
  font-family: var(--font-display);
  color: var(--sk-color-accent);
  font-feature-settings: var(--sk-allsmallcaps);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--sk-letter-spacing-smallcaps);
  font-weight: 600;
}
.dc-exhibit .dc-sub { font-family: var(--font-body); font-style: italic; color: var(--sk-color-muted); }
.dc-exhibit .dc-scan { border: var(--sk-rule-weight) solid var(--sk-color-subtle); }
.sk-prose .dc-exhibit pre.dc-pre {
  font-family: var(--font-mono);
  color: var(--sk-color-ink);
  background-color: transparent;
  border: 0;
  font-variant-numeric: normal;
  font-feature-settings: normal;
}
.sk-prose .dc-exhibit pre.dc-pre-plain { color: var(--sk-color-secondary); }
@media (max-width: 55rem) {
  .dc-exhibit .dc-output { border-left: 0; border-top: var(--sk-rule-weight) solid var(--sk-rule-color); }
}
/* The chart pair as one framed exhibit and one list on a phone; geometry in layout.css. */
@media (max-width: 55rem) {
  .sk-review-pair { background-color: var(--sk-color-surface); border: var(--sk-rule-weight) solid var(--sk-color-subtle); }
  .sk-review-pair::before { border: var(--sk-rule-weight) solid var(--sk-color-subtle); opacity: 0.55; }
  .sk-pair-heading { font-family: var(--font-body); font-weight: 400; color: var(--sk-color-body); }
  .sk-review-pair .chr-heading {
    font-family: var(--font-literal);
    letter-spacing: var(--sk-rv-kicker-track);
    text-transform: uppercase;
    color: var(--sk-color-term);
  }
}
/* CV rows: dates and meta lines in Triplicate A Poly, quieter than the entry. Geometry in layout.css. */
.sk-cv-date, .sk-cv-meta { font-family: var(--font-literal); font-weight: 400; color: var(--sk-meta-color); }
/* The CV's PDF link box. Geometry in layout.css. */
.sk-cv-pdf { border: var(--sk-rule-weight) solid var(--sk-rule-color); }
.sk-cv-pdf::before { border: var(--sk-rule-weight) solid var(--sk-rule-color); opacity: 0.55; }
.sk-cv-pdf-rose { background-color: var(--sk-rose-color); mask-image: url('/img/rose-hq.webp'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; }
/* Thesis and dissertation lines in the CV: italics in Heliotrope italic, not Poema, and in the body colour
 * rather than the wine of other italics (Cam, 2026-10-27). */
.sk-cv-thesis em, .sk-cv-thesis i { font-family: var(--font-apparatus); font-style: italic; color: var(--sk-color-body); }
/* Document lists (samples, drafts, publications): framed like the site's exhibits (Cam, 2026-10-27):
 * the warm example ground lifted halfway to the page (as on the Docclean exhibit) inside a double
 * mauve hairline. Geometry in layout.css. */
.sk-doclist { background-color: color-mix(in srgb, var(--sk-color-examplebg) 50%, var(--sk-color-surface)); border: var(--sk-rule-weight) solid var(--sk-rule-color); }
.sk-doclist::before { border: var(--sk-rule-weight) solid var(--sk-rule-color); opacity: 0.55; }
/* A small rose set into the top edge, on a disc of the page colour that breaks the double rule. */
.sk-doclist::after { background-color: var(--sk-color-surface); border: var(--sk-rule-weight) solid var(--sk-rule-color); border-radius: 50%; }
.sk-doclist > ul::before { background-color: var(--sk-rose-color); mask-image: url('/img/rose-hq.webp'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; }