/* ==========================================================================
   Mark  (.pf-mark)  — v0.9.87
   An inline SVG schematic as a card's PICTURE: the "how I work" entry's identity
   (the Designing with AI card and its Read-next twin), drawn in the portfolio's
   schematic language — ink lines, one pink accent as a thin graphic (a ring, a
   tick), mono caps labels — instead of a device cover or the faint monogram.

   Why inline, not <img>: the mark is drawn in TOKENS. The card's media panel flips
   with the theme (black on the light page, light on the dark page), so an image
   would need two exports; an inline SVG re-inks itself through currentColor and
   the custom properties below.

   Usage — the render helper inlines site-content/figures/<slug>/mark.svg:
     <div class="pf-project__media pf-project__media--inverse">
       <svg class="pf-mark pf-mark--inverse" viewBox="0 0 1200 800" role="img" aria-label="…">…</svg>
     </div>
   The SVG's own elements carry the vocabulary classes (pf-mark__ln, __fl, __pk,
   __bg, __lab, __disp and their --2/--3/--4 opacity steps). Authoring: 3:2 viewBox,
   no ids (so two marks can share one page), glyphs inlined as <g transform>.

   Light-on-dark dial-back (Louis, 2026-10-01): full-strength light ink read too hot
   on the black panel, so wherever the ink is light on a dark surface the PRIMARY
   strokes and fills take --pf-mark-op at 0.84 (the research box, its divider, the
   arrow, the bars, the observation dots, the user figures). Secondary steps, labels
   and the pink keep their own values. That is: the --inverse mark in the light theme,
   and the plain mark once the theme goes dark (the sunken mat turns dark); the inverse
   panel flips LIGHT in the dark theme, so it returns to full strength there.
   ========================================================================== */

.pf-mark {
  /* The mark's ink and knockout follow the surface it sits on. Aliases of tokens
     only (R1), so both themes come for free (R2). */
  --pf-mark-ink: var(--pf-ink);
  --pf-mark-bg: var(--pf-surface-sunken);
  --pf-mark-op: 1;
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pf-mark-ink);
}
/* On the inverse media panel: light ink on the dark surface, dialled back a touch. */
.pf-mark--inverse {
  --pf-mark-ink: var(--pf-ink-inverse);
  --pf-mark-bg: var(--pf-surface-inverse);
  --pf-mark-op: 0.84;
}
/* On the swapped mat (v0.9.97): the other theme's mat and ink, so light ink on dark grey on the
   light page (dialled back like any light-on-dark mark) and dark ink on light grey on the dark page. */
.pf-mark--sunken-inverse {
  --pf-mark-ink: var(--pf-ink-sunken-inverse);
  --pf-mark-bg: var(--pf-surface-sunken-inverse);
  --pf-mark-op: 0.84;
}
/* Theme flips (system dark, then the explicit toggle; the light force disables both,
   mirroring tokens/colors.css). Plain mark: the mat is dark now → dial back. Inverse
   mark: the panel is light now → full strength. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pf-mark { --pf-mark-op: 0.84; }
  :root:not([data-theme="light"]) .pf-mark--inverse,
  :root:not([data-theme="light"]) .pf-mark--sunken-inverse { --pf-mark-op: 1; }
}
:root[data-theme="dark"] .pf-mark { --pf-mark-op: 0.84; }
:root[data-theme="dark"] .pf-mark--inverse,
:root[data-theme="dark"] .pf-mark--sunken-inverse { --pf-mark-op: 1; }

/* --- Vocabulary (the classes the SVG elements carry) --- */
/* Lines: primary at --pf-mark-op; the secondary steps are fixed fractions of the ink. */
.pf-mark__ln {
  stroke: var(--pf-mark-ink);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: var(--pf-mark-op);
}
.pf-mark__ln--2 { stroke-opacity: 0.6; }
.pf-mark__ln--3 { stroke-opacity: 0.32; }
.pf-mark__ln--4 { stroke-opacity: 0.16; }
/* Fills (dots, arrowheads, bars) on the same ladder. */
.pf-mark__fl { fill: var(--pf-mark-ink); fill-opacity: var(--pf-mark-op); }
.pf-mark__fl--2 { fill-opacity: 0.6; }
.pf-mark__fl--3 { fill-opacity: 0.32; }
/* The one pink, as a thin graphic STROKE only (a ring, a tick) — never a fill, never text (R5). */
.pf-mark__pk { stroke: var(--pf-accent); }
/* Knockout: the surface colour, so a line can stop short of a box or a ring. */
.pf-mark__bg { fill: var(--pf-mark-bg); }
.pf-mark__bgs { stroke: var(--pf-mark-bg); fill: none; }
/* Labels: mono caps, in SVG user units (they scale with the 1200-wide viewBox, so these are
   not CSS px and the rem type scale does not apply). Decorative: the mark's meaning is in its
   aria-label; the words are part of the picture. */
.pf-mark__lab {
  font-family: var(--pf-font-mono);
  font-size: 17px;
  letter-spacing: var(--pf-tracking-caps);
  text-transform: uppercase;
  fill: var(--pf-mark-ink);
  fill-opacity: 0.78;
}
.pf-mark__lab--sm { font-size: 14px; }
/* A big word in the display face (e.g. "ME" / "AI" lane labels). */
.pf-mark__disp {
  font-family: var(--pf-font-display);
  font-weight: var(--pf-weight-display);
  text-transform: uppercase;
  letter-spacing: var(--pf-tracking-display);
  fill: var(--pf-mark-ink);
}