/* Theme "Datum" (Settings → Theme; lab/themes/v2, "game references"): a field console. Warm cream
   cards on a flat back layer with no gradients anywhere, a dark teal sidebar and
   settings card, orange as the only accent (time line with a soft glow, selection, durations), Saira caps for titles
   and periods, JetBrains Mono for dates and counts, Inter for the rest. Light and dark: dark is the console at night (deep teal
   back, slate cards, a darker teal sidebar); light is :root[data-skin] (0,2,0), dark adds the theme attribute (0,3,0).
   It sets the theme tokens (STYLE-GUIDE.md → Theme tokens); the rules below are what tokens can't say. */
:root[data-skin="datum"] {
  --cream: #ebe9e2; --card: #faf9f5; --teal: #26444f; --teal-2: #1f3943; --ink: #1d3440; --orange: #bb3a1a;
  --tag: var(--teal); --tag-ink: #e9eee9;   /* the teal title tag and counts */
  --bar-bd: #dedcd3; --chip-bg: #eceae3; --chip-bd: #d6d4cb; --rule-c: #9aa6a6; --shade: rgb(20 40 50 / .05); --shade-2: rgb(20 40 50 / .1);
  --back-0: #e6e6dc;
  --font-ui: Inter, system-ui, sans-serif; --font-head: "Saira Semi Condensed", var(--font-ui); --font-caps: var(--font-head);
  --font-date: "JetBrains Mono", ui-monospace, monospace; --font-num: var(--font-date);
  --accent-light: var(--orange); --accent-dark: var(--orange);
  --ic-1: var(--tag-ink); --ic-2: var(--orange); --ic-3: #9fc3c9;   /* category icons (style.css) */
  --icon-w: .85; --icon-join: miter;   /* a clean console line with crisp corners */

  color-scheme: light;
  --bg: var(--cream); --surface: #f1efe9; --surface-2: #e9e7df;
  --text: var(--ink); --muted: #4f6168; --faint: #586a70;
  --line: #cfd0c8; --line-strong: #b9bbb2; --cap-ring: #cfd0c8;
  --accent: var(--orange); --hover-ink: color-mix(in srgb, var(--orange) 85%, #000); --on-accent: #fff; --danger: #b3261e;
  --shadow: 0 1px 2px var(--shade), 0 8px 24px var(--shade-2); --pic-bg: var(--card);
  /* resting bar shadow: drops straight down (spread -1px), so none of it shows above a bar's top line */
  --bar-shadow: 0 2px 2px -1px var(--shade);
  --bar-tint0: 0%; --bar-tint-hover: 0%;
  --glow: 0 0 12px 1px color-mix(in srgb, var(--orange) 24%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--orange) 34%, transparent);
  /* layout: the lab's lifted pieces on a flat back layer, under a see-through header */
  --gap: var(--section-gap); --side-r: 14px; --panel-r: 16px; --panel-clip: clip; --side-bd: 0; --panel-bd: 1px solid var(--line);
  --top-bg: transparent; --top-bd: 0; --panel: var(--cream);
  --back: var(--back-0);
  --panel-glow: url(art/datum-table-light.svg);
  /* The band left of the timeline is as wide as the menu band above it (36px + a --section-gap each side, 61px), with the
     rail as wide as the menu's 36px controls. Plain px, not calc: js/settings.js reads these two as numbers. */
  --rail-w: 36px; --rail-pad: 0px; --rail-shift: -5px;
}
/* screen edges off: no gap left of the rail, so it takes that space */
:root[data-skin="datum"]:not(.inset) { --rail-w: 48.5px; --rail-pad: 1.25px; --rail-shift: 0px; }
/* touch: the header's controls are 42px (style.css), the rail follows */
@media (pointer: coarse) {
  :root[data-skin="datum"] { --rail-w: 42px; --rail-shift: -2px; }
  :root[data-skin="datum"]:not(.inset) { --rail-w: 54.5px; --rail-pad: 4.25px; --rail-shift: 0px; }
}
/* with the icon shapes on (Settings), the widest (40px) would be cut by the rail: they shrink to fit it, and grow back as it opens */
@media (pointer: fine) {
  :root[data-skin="datum"].inset body.side-auto .side .cat .sw::before { transition: background .15s, scale .24s cubic-bezier(.2,.8,.2,1); }
  :root[data-skin="datum"].inset body.side-auto.side-locked .side .cat .sw::before,
  :root[data-skin="datum"].inset body.side-auto:not(.side-opening) .side:not(:hover) .cat .sw::before { scale: .85; }
}
/* the menu keeps one --section-gap from the screen's sides, in line with the sidebar and the timeline */
@media (min-width: 761px) { [data-skin="datum"] .top { padding-inline: var(--section-gap); } }

/* dark: the console at night, the same layout on deep teal */
:root[data-skin="datum"][data-theme="dark"] {
  color-scheme: dark;
  --cream: #142126; --card: #213239; --teal: #0b1417; --teal-2: #16262c; --ink: #e4e8e2; --orange: #f2694d;
  --tag: #2a4c58; --tag-ink: #e9eee9;
  --bar-bd: #33464d; --chip-bg: #1a2a30; --chip-bd: #3a4e55; --rule-c: #557076; --shade: rgb(0 0 0 / .25); --shade-2: rgb(0 0 0 / .4);
  --back-0: #0b1417;
  --panel-glow: url(art/datum-table-dark.svg), radial-gradient(70% 60% at 50% 48%, #1b2c31, transparent 100%);
  --surface: #1a2a30; --surface-2: #24363d;
  --muted: #a5b5ba; --faint: #8a9ca1;
  --line: #2c3f46; --line-strong: #3d535a; --cap-ring: #2c3f46;
  --hover-ink: color-mix(in srgb, var(--orange) 62%, #fff); --on-accent: #1a2a30; --danger: #f28b7d;
  --glow: 0 0 12px 1px color-mix(in srgb, var(--orange) 30%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--orange) 42%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="datum"]:not([data-theme="light"]) {
    color-scheme: dark;
    --cream: #142126; --card: #213239; --teal: #0b1417; --teal-2: #16262c; --ink: #e4e8e2; --orange: #f2694d;
    --tag: #2a4c58; --tag-ink: #e9eee9;
    --bar-bd: #33464d; --chip-bg: #1a2a30; --chip-bd: #3a4e55; --rule-c: #557076; --shade: rgb(0 0 0 / .25); --shade-2: rgb(0 0 0 / .4);
    --back-0: #0b1417;
  --panel-glow: url(art/datum-table-dark.svg), radial-gradient(70% 60% at 50% 48%, #1b2c31, transparent 100%);
    --surface: #1a2a30; --surface-2: #24363d;
    --muted: #a5b5ba; --faint: #8a9ca1;
    --line: #2c3f46; --line-strong: #3d535a; --cap-ring: #2c3f46;
    --hover-ink: color-mix(in srgb, var(--orange) 62%, #fff); --on-accent: #1a2a30; --danger: #f28b7d;
    --glow: 0 0 12px 1px color-mix(in srgb, var(--orange) 30%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--orange) 42%, transparent);
  }
}

/* ---------- One accent: rows and the category rail draw every category in orange; search, map and card keep theirs ---------- */
[data-skin="datum"] :is(.lanes, .srail) { --cat-mono: var(--orange); }
[data-skin="datum"] :is(.item, .frame) { --hover-glow: var(--glow); --hover-edge: color-mix(in srgb, var(--orange) 60%, var(--bar-bd)); }

/* ---------- Bars: cream capsules with a soft edge; periods and people alike, the role shows in the duration tag ---------- */
[data-skin="datum"] .item, [data-skin="datum"] .item:is(.lvl2, .lvl3) {
  --bar-fill: color-mix(in srgb, #000 var(--bar-dark, 0%), var(--card)); --bar-edge: var(--bar-bd);
  border-top-right-radius: 13px 50%; border-bottom-right-radius: 13px 50%; box-shadow: var(--bar-shadow);
}
[data-skin="datum"] .item:not(.has-av, .has-photo) { border-top-left-radius: 13px 50%; border-bottom-left-radius: 13px 50%; }
[data-skin="datum"] .item:is(:hover:not(.touch-input *), .hov) { --bar-fill: var(--card); box-shadow: var(--glow); }
[data-skin="datum"] .item.sel { box-shadow: 0 0 0 1px var(--orange), var(--glow); }
[data-skin="datum"] .frame, [data-skin="datum"] .frame:is(.lifted, .lit, .flash) { --bar-fill: color-mix(in srgb, #000 var(--bar-dark, 0%), var(--card)); --bar-edge: var(--bar-bd); --box-r: 13px; box-shadow: var(--bar-shadow); }
[data-skin="datum"] { --years-tint: var(--orange); }
[data-skin="datum"] :is(.lbl .d, .sh-span) { padding: 0 6px; line-height: 16px; border-radius: 4px; letter-spacing: .03em; }
[data-skin="datum"] .sh-span { border: 1px solid var(--chip-bd); background: var(--chip-bg); font-size: 10.5px; }
[data-skin="datum"] .nest-tg { color: var(--tag-ink); background: var(--tag); }
[data-skin="datum"] .nest-ct { font: 700 10px/17px var(--font-date); color: var(--tag-ink); background: var(--tag); }

/* ---------- Words: Saira caps for category titles and periods, mono figures ---------- */
[data-skin="datum"] .lanes {
  --period-font: var(--font-head); --period-case: uppercase; --period-weight: 600; --period-ls: .05em; --period-style: normal;
}
[data-skin="datum"] .brand h1 { font: 700 17px var(--font-head); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- A console's section head: a thin line under the whole title strip, with a short thick teal mark on it under the
   icon and name, the way a game menu marks its section. The icon is a teal seal, the same teal as the sidebar and the people
   tags; the name in Saira caps, teal ink, no plate. The figures in mono at the far right. ---------- */
[data-skin="datum"] .lane {
  --hd-fill: var(--cream); --hd-halo: transparent; --hd-ink: var(--text); --hd-stuck: var(--cream);
  --hd-stuck-fade: none; --hd-edge: none; --lane-edge: none; --lane-bd: 0; --rail-show: none; --hd-h: 38px;
  --rule-show: block; --rule-show-2: none; --rule-at: bottom; --rule-pos: absolute; --rule-bottom: 0; --rule-h: 1px; --rule: var(--rule-c); --rule-2: transparent;
  --ord-ic: 2; --ord-tools: 3; --hd-gap: 8px; --hd-pad-l: 8px; --ic-slot: 34px; --ic-k: .8; --ic-g: .86;
  --title-size: 14px; --title-weight: 700; --title-ls: .07em; --title-case: uppercase;
  margin-bottom: 8px;
}
@media (max-width: 760px) { [data-skin="datum"] .lane { --ic-slot: 30px; } }
[data-skin="datum"] .lane-h .lane-name { position: relative; color: var(--text); }
[data-skin="datum"] .lane-h .lane-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc((var(--title-size) * 1.25 - 38px) / 2); height: 3px; background: color-mix(in srgb, var(--text) 22%, var(--tag)); }
[data-skin="datum"] .lane-h .lane-ic { background: var(--tag); }
[data-skin="datum"] .lane-h :is(.lane-tools, .nest-pill) { margin-left: 0; }
[data-skin="datum"] .lane-h .lane-note { background: none; box-shadow: none; }
[data-skin="datum"] .lane-h .lane-ct { margin-left: auto; padding: 0; background: none; color: var(--muted); --wash: transparent; font: 500 11px var(--font-date); letter-spacing: .04em; }
/* a people tag: the teal seal as a chip, icon and figure in its light ink */
[data-skin="datum"] .lane-h .nest-pill { --wash: transparent; border-radius: 6px; background: var(--tag); }
[data-skin="datum"] .lane-h .nest-pill-name { color: var(--tag-ink); font-weight: 500; }
[data-skin="datum"] .lane-h .nest-pill-name b { font: 600 11px var(--font-date); color: var(--tag-ink); }
[data-skin="datum"] .lane-h .nest-pill button, [data-skin="datum"] .lane-h .nest-pill button + button { color: color-mix(in srgb, var(--tag-ink) 70%, transparent); }

/* ---------- The time line: orange with a soft halo ---------- */
[data-skin="datum"] .cur-line { opacity: 1; border-left: 2px solid var(--orange); margin-left: -1px; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--orange) 25%, transparent), 0 0 14px 3px color-mix(in srgb, var(--orange) 10%, transparent); }

/* ---------- Sidebar and settings: dark teal cards with light text; the category in view is orange ---------- */
[data-skin="datum"] :is(:root:not(.raised) .side, .settings-pop) {
  color-scheme: dark;
  --surface: var(--teal); --surface-2: var(--teal-2); --bg: var(--teal);
  --accent: #ff9077; --hover-ink: #ffb09c; --on-accent: #1a2a30;   /* the orange lifted so it reads on the teal */
  --text: #eef2ee; --muted: #b3c4c9; --faint: #9db0b5;
  --line: color-mix(in srgb, #e9eee9 12%, var(--teal)); --line-strong: color-mix(in srgb, #e9eee9 22%, var(--teal)); --cap-ring: var(--line-strong);
  color: var(--text);
}
[data-skin="datum"] .side {
  background: var(--teal);
  --cat-mono: var(--muted); --sw-rest: color-mix(in srgb, #fff 6%, transparent);
  --cat-current-bg: var(--teal-2); --cat-hover-bg: var(--teal-2); --nm-current: #fff; --sw-hi-fg: #fff; --sw-hi-bg: var(--orange);
}
[data-skin="datum"] .settings-pop { background: var(--teal); }
[data-skin="datum"] .cat-tag { --cat-mono: var(--orange); --tint: var(--teal); color: #e9eee9; font: 600 11px/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; }

/* the sidebar in Saira like the titles: group names in spaced caps, category names in the condensed face */
:root[data-skin="datum"] { --font-side: var(--font-head); --set-size: 13.5px; --set-fold-size: 15px; --set-fold-w: 600; }
[data-skin="datum"] .side .cat .nm { font-size: 14px; font-weight: 500; letter-spacing: .02em; }
[data-skin="datum"] .side :is(.side-h, .cat-group) { font-weight: 600; letter-spacing: .1em; }
@media (max-width: 1180px) { [data-skin="datum"] .brand h1 { font-size: 14px; letter-spacing: .04em; } }
/* every surface: labels and big titles in Saira caps, and one accent everywhere (search, card, map, Data view) */
:root[data-skin="datum"] { --font-label: var(--font-head); --font-title: var(--font-head); --cat-mono: var(--orange); }
[data-skin="datum"] :is(.detail h2, .sh-text h2) { text-transform: uppercase; letter-spacing: .03em; }
/* the smallest dates stay in plain muted ink, so they stay readable */
/* a hovered open/close button on a bar: solid accent, so its icon always reads, on any bar colour */
[data-skin="datum"] .nest-tg:is(:hover:not(.touch-input *), :focus-visible, .hov) { background: var(--accent); color: var(--on-accent); }

/* ---------- Relationship tags: a console's readout: a small card-coloured plate with a hairline, the role in Saira caps, and the mark a solid seal in the
   line's colour with a wedge in it, like the bow's. Only the colours and letters are the theme's (motion, placing: style.css, js/draw/webgl.js) ---------- */
[data-skin="datum"] .tie-tag { --tag-d: 16px; --tag-edge: 0px; --tag-fill: var(--tm); --tag-ink: var(--card); --tag-arrow-w: 1.2px; --tag-head: 1; height: 22px; padding: 0 9px 0 3px; border-radius: 4px; font: 600 10.5px var(--font-head); text-transform: uppercase; letter-spacing: .07em; }
[data-skin="datum"] .tie-tag.away { height: 36px; padding: 0 8px 0 6px; border-radius: 6px; }
[data-skin="datum"] .tie-tag:not(.hot, .away:hover:not(.touch-input *)) { background: var(--card); box-shadow: 0 0 0 var(--hair) var(--chip-bd), 0 2px 6px var(--shade-2); }
[data-skin="datum"] .tie-tag:is(.hot, .away:hover:not(.touch-input *)) { --tag-fill: var(--thi); --tag-ink: var(--th); }
[data-skin="datum"] .tie-name { font: 650 11.5px var(--font-head); text-transform: uppercase; letter-spacing: .035em; }
[data-skin="datum"] .tie-tag.away .tie-role { font-size: 9.5px; }

/* ---------- A drag, as a console: the row pulled out is a plate edged and glowing in the orange, its seal lit; where it will land a target reticle, four orange
   corner brackets on a faint wash; the group it would join in the orange. Motion and behaviour: style.css, js/app.js ---------- */
[data-skin="datum"] .cats {
  --drag-fill: var(--surface-2); --drag-r: 4px; --drag-scale: 1.02;
  --stack-fill: var(--surface-2); --stack-edge: inset 0 0 0 var(--hair) color-mix(in srgb, var(--accent) 45%, transparent);
  --slot-fill: color-mix(in srgb, var(--accent) 9%, transparent); --slot-edge: 0 0 transparent; --slot-r: 0px; --home-ink: var(--accent);
  --bk: 9px; --bk-w: 2px;
  --slot-pic:
    linear-gradient(var(--accent) 0 0) 0 0 / var(--bk) var(--bk-w) no-repeat, linear-gradient(var(--accent) 0 0) 0 0 / var(--bk-w) var(--bk) no-repeat,
    linear-gradient(var(--accent) 0 0) 100% 0 / var(--bk) var(--bk-w) no-repeat, linear-gradient(var(--accent) 0 0) 100% 0 / var(--bk-w) var(--bk) no-repeat,
    linear-gradient(var(--accent) 0 0) 0 100% / var(--bk) var(--bk-w) no-repeat, linear-gradient(var(--accent) 0 0) 0 100% / var(--bk-w) var(--bk) no-repeat,
    linear-gradient(var(--accent) 0 0) 100% 100% / var(--bk) var(--bk-w) no-repeat, linear-gradient(var(--accent) 0 0) 100% 100% / var(--bk-w) var(--bk) no-repeat;
}

/* the lean and light of the Ties tab's pictures (style.css → "The card in motion"); the info card stays still */
[data-skin="datum"] .relview {
  --card-tilt: 2.5;
  --card-sheen: radial-gradient(closest-side, rgb(255 255 255 / .08), transparent) 50% 50% / 70% 60% no-repeat;
}

/* ---------- The game's finish on every dark plate: menus, the sidebar and the map panel carry the card's hairline frame 6px in, the
   way the game's cards and table do ---------- */
[data-skin="datum"] :is(.settings-pop, .rmap-panel, .keys-pop) { outline: 1px solid rgb(255 255 255 / .08); outline-offset: -6px; }
[data-skin="datum"] :root:not(.raised) .side, :root[data-skin="datum"]:not(.raised) .side { outline: 1px solid rgb(255 255 255 / .07); outline-offset: -6px; }
/* Map view (css/map.css): the console's globe: a deep teal sea, cream land, orange the one accent (halo, wars, the
   selected ring); realms in the console's quiet tints. Dark follows the palette. */
[data-skin="datum"] .mapview {
  --map-sea: var(--teal); --map-land: var(--card, var(--surface)); --map-sea-grad: .25;
  --map-coast: var(--ink); --map-coast-a: .55; --map-border: var(--card, var(--surface)); --map-border-a: .9; --map-grid: var(--card, var(--surface)); --map-grid-a: .09;
  --map-halo: var(--orange, var(--accent)); --map-halo-a: .22; --map-limb: var(--teal-2, var(--teal)); --map-shade: .3;
  --map-war: var(--orange, var(--accent)); --map-hot: var(--orange, var(--accent));
  /* realms: tints of the theme's own teal, orange and ink on the land, so they follow the theme and its dark mode */
  --map-realm-1: color-mix(in oklab, var(--teal) 22%, var(--card, var(--surface))); --map-realm-2: color-mix(in oklab, var(--orange) 26%, var(--card, var(--surface)));
  --map-realm-3: color-mix(in oklab, var(--orange) 11%, var(--card, var(--surface))); --map-realm-4: color-mix(in oklab, var(--teal) 36%, var(--card, var(--surface)));   /* light enough to stand clear of the teal sea */
  --map-realm-5: color-mix(in oklab, var(--ink) 12%, var(--card, var(--surface))); --map-realm-6: color-mix(in oklab, var(--orange) 40%, var(--card, var(--surface)));
  --map-realm-a: .9;
}
/* Ties view (css/rel.css): the card game's table. The person is a Plate card in night stock at the top of the
   panel (as the info card), names on the stage are the teal title tags, each kind its own console colour, orange the
   one accent (the person's ring, the lit tie's bead) */
[data-skin="datum"] .relview {
  --rel-k-family: var(--orange); --rel-k-teachers: #2f8a8f; --rel-k-students: #2f8a8f; --rel-k-influences: light-dark(#4a6a72, #6d8e96); --rel-k-influenced: light-dark(#4a6a72, #6d8e96);
  --rel-k-friends: #6f9a4f; --rel-k-patrons: #b98a2e; --rel-k-era: var(--muted);
  --rel-chord: var(--teal); --rel-chord-a: .35; --rel-ring: var(--teal); --rel-ring-a: .22; --rel-bead: var(--orange);
  --rel-pic-ring: var(--teal); --rel-ego-ring: var(--orange); --rel-sheet: var(--surface);
  --rel-tag: var(--tag); --rel-tag-ink: var(--tag-ink); --rel-tag-sub: color-mix(in srgb, var(--tag-ink) 70%, var(--tag));
  --rel-ego-tag: #0f1b20; --rel-ego-ink: #fff; --rel-conflict-tag: color-mix(in srgb, var(--tie-conflict) 85%, #000); --rel-conflict-ink: #fff;
  --rel-name-font: var(--font-head); --rel-name-case: uppercase; --rel-name-track: .04em;
}
[data-skin="datum"] .rel-lbl { border-radius: 4px; }
[data-skin="datum"] .rel-node.ego .rel-lbl { outline: 1px solid rgb(255 255 255 / .14); outline-offset: -3px; padding: 3px 10px 4px; }
[data-skin="datum"] .rel-node.ego .rel-nm { font-size: 16px; }
/* the Plate card: night stock in both modes, hairline frame 7px in, the name on the picture */
[data-skin="datum"] .rel-hero {
  color-scheme: dark;
  --stock: #0f1b20; --surface: var(--stock); --surface-2: #1a2a30; --text: #e4e8e2; --muted: #8fa0a5; --line: rgb(255 255 255 / .13); --cap-ring: #3a4e55;
  --accent: #f2694d; --hover-ink: #ff9a82; --on-accent: #0f1b20; --hero-h: 260px;
  margin: 14px 14px 4px; padding: 18px 20px 18px; border-radius: 16px; color: var(--text); background: var(--stock);
  outline: 1px solid rgb(255 255 255 / .12); outline-offset: -7px; box-shadow: 0 0 0 1px rgb(0 0 0 / .25), 0 22px 40px -22px rgb(0 0 0 / .6);
}
[data-skin="datum"] .rel-hero .portrait { margin: -18px -20px 0; width: calc(100% + 40px); border-radius: 16px 16px 0 0; background: color-mix(in srgb, var(--c, var(--muted)) 16%, var(--stock)); }
[data-skin="datum"] .rel-hero .portrait + .rel-hero-txt { margin-top: -66px; }
[data-skin="datum"] .rel-hero h2 { font: 600 24px / 1.05 var(--font-head); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 12px rgb(15 27 32 / .9), 0 0 2px rgb(15 27 32 / .6); }
[data-skin="datum"] .rel-hero .rel-cat { font: 400 9px / 1.3 var(--font-date); letter-spacing: .08em; }
[data-skin="datum"] .rel-hero .rel-cat::before { content: ""; flex: none; width: 3px; height: 11px; border-radius: 1px; background: var(--accent); }
[data-skin="datum"] .rel-hero .rel-dates { display: inline-block; margin-top: 8px; padding: 0 6px; border-radius: 4px; font: 700 10px / 17px var(--font-date); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
[data-skin="datum"] .rel-hero .rel-note { padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { [data-skin="datum"] .rel-hero { margin: 4px 10px 4px; padding: 12px 16px; } [data-skin="datum"] .rel-hero .portrait + .rel-hero-txt { margin-top: 0; } [data-skin="datum"] .rel-hero h2 { font-size: 19px; } }
[data-skin="datum"] :is(.rel-group h3, .rel-line h3, .rel-lives-h) { font: 400 9.5px / 1.3 var(--font-date); letter-spacing: .1em; }
[data-skin="datum"] .rel-rnm, [data-skin="datum"] .rel-heir-nm { font-family: var(--font-head); letter-spacing: .01em; font-size: 15px; }