/* Theme "Atlas" (Settings → Theme; lab/themes/v3): an old map plate. Six colours: paper, navy ink (not
   black), sea, land, forest and red; red borders are the only accent (time line, selection, the cartouche round each
   category name). People are marked in sea, periods in forest on land-tinted paper. EB Garamond in spaced small capitals
   for map lettering (titles, periods, brand), italic serif dates, Inter for the rest. Light and dark: dark is a night
   chart (navy plate, paper ink, the legend strip a deeper navy); light is :root[data-skin] (0,2,0), dark adds the
   theme attribute (0,3,0), so it wins over light in dark mode.
   It sets the theme tokens (STYLE-GUIDE.md → Theme tokens); the rules below are what tokens can't say. */
:root[data-skin="atlas"] {
  --grain-def: 100;   /* paper grain, before the sliders (css/grain.css) */
  --paper: #eceee6; --ink: #18223a; --sea: #3f7590; --land: #c9b98f; --forest: #557a43; --red: #a8432e; --gold: #b08a45;
  --chart: url(art/atlas-chart-light.svg);   /* a portolan's rhumb lines and two wind roses behind the timeline (tools/build-atlas-art.mjs) */
  --lift: #fff; --strip: var(--ink); --strip-ink: var(--paper); --vig: var(--land);   /* paper highlight, legend strip, edge browning */
  --font-ui: Inter, system-ui, sans-serif; --font-head: "EB Garamond", Georgia, serif; --font-caps: var(--font-head);
  --font-date: var(--font-head); --date-style: italic;
  --accent-light: var(--red); --accent-dark: var(--red);
  --ic-1: var(--red); --ic-2: var(--ink); --ic-3: var(--sea);   /* category icons (style.css) */
  --icon-w: .68; --icon-cap: square; --icon-join: miter;   /* engraved hairlines, crisp ends: a map plate's line work */

  color-scheme: light;
  --bg: var(--paper); --surface: color-mix(in srgb, var(--lift) 35%, var(--paper)); --surface-2: color-mix(in srgb, var(--land) 14%, var(--paper));
  --text: var(--ink); --muted: color-mix(in srgb, var(--ink) 82%, var(--paper)); --faint: color-mix(in srgb, var(--ink) 62%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 20%, var(--paper)); --line-strong: color-mix(in srgb, var(--ink) 34%, var(--paper)); --cap-ring: var(--line);
  --accent: var(--red); --hover-ink: color-mix(in srgb, var(--red) 85%, #000); --on-accent: var(--paper); --danger: #b3261e;
  --shadow: 0 2px 8px rgb(28 39 64 / .1); --pic-bg: var(--paper);
  --bar-tint0: 8%; --bar-tint-hover: 16%;
  --glow: 0 2px 8px rgb(28 39 64 / .12), 0 0 0 1px color-mix(in srgb, var(--red) 30%, transparent);
  /* layout: the map plate framed by one thin rule, the navy legend strip beside it, on paper browned at the edges */
  --gap: var(--section-gap); --side-r: 4px; --panel-r: 0px; --panel-clip: clip; --side-bd: 0;
  --panel-bd: 1px solid color-mix(in srgb, var(--ink) 45%, var(--paper));
  --top-bg: transparent; --top-bd: 0; --panel: var(--paper);
  /* a sea tint from the top right, warm land from the bottom left: a plate's old colouring, held very low */
  --panel-glow: var(--chart), radial-gradient(55% 50% at 100% 0, color-mix(in srgb, var(--sea) 11%, transparent), transparent 72%), radial-gradient(50% 45% at 0 100%, color-mix(in srgb, var(--land) 18%, transparent), transparent 72%);
  --strip-glow: radial-gradient(110% 38% at 100% 0, color-mix(in srgb, var(--sea) 26%, transparent), transparent 72%), radial-gradient(100% 30% at 0 100%, color-mix(in srgb, var(--red) 14%, transparent), transparent 72%);
  --cap-sheen: linear-gradient(180deg, color-mix(in srgb, var(--lift) 26%, transparent), transparent 75%);
  --back: radial-gradient(120% 90% at 50% 40%, transparent 55%, color-mix(in srgb, var(--vig) 35%, transparent)), color-mix(in srgb, var(--land) 22%, var(--paper));
}

/* dark: a night chart, the same six inks lifted for a navy plate */
:root[data-skin="atlas"][data-theme="dark"] {
  color-scheme: dark;
  --paper: #141b29; --ink: #e4e1d3; --sea: #86bcd0; --land: #8c7c56; --forest: #93b87d; --red: #e8805f; --gold: #d2b06a; --chart: url(art/atlas-chart-dark.svg);
  --lift: #2c374b; --strip: #0b111c; --strip-ink: #e4e1d3; --vig: #000;
  --hover-ink: color-mix(in srgb, var(--red) 62%, #fff); --danger: #f28b7d;
  --shadow: 0 2px 8px rgb(0 0 0 / .35);
  --glow: 0 2px 8px rgb(0 0 0 / .35), 0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="atlas"]:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #141b29; --ink: #e4e1d3; --sea: #86bcd0; --land: #8c7c56; --forest: #93b87d; --red: #e8805f; --gold: #d2b06a; --chart: url(art/atlas-chart-dark.svg);
    --lift: #2c374b; --strip: #0b111c; --strip-ink: #e4e1d3; --vig: #000;
    --hover-ink: color-mix(in srgb, var(--red) 62%, #fff); --danger: #f28b7d;
    --shadow: 0 2px 8px rgb(0 0 0 / .35);
    --glow: 0 2px 8px rgb(0 0 0 / .35), 0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent);
  }
}

/* ---------- Two inks on the plate: people in sea, periods in forest on land-tinted paper (rows and rail; search, map
   and card keep the category colours) ---------- */
[data-skin="atlas"] :is(.lanes, .srail) { --cat-mono: var(--sea); }
[data-skin="atlas"] :is(.item:not(.person, .guest), .frame) { --cat-mono: var(--forest); }
/* hover changes only the ink (style.css → Ink hover), so a hovered bar keeps its resting fill and selection ring */
/* each layer nearer is brighter (css [data-layer]): periods lose their land tint step by step, people gain paper highlight */
[data-skin="atlas"] :is(.lanes, [data-layer="1"]) { --land-k: 34%; --lift-k: 50%; }
[data-skin="atlas"] [data-layer="2"] { --land-k: 18%; --lift-k: 68%; }
[data-skin="atlas"] [data-layer="3"] { --land-k: 8%; --lift-k: 84%; }
[data-skin="atlas"] [data-layer="4"] { --land-k: 2%; --lift-k: 100%; }
[data-skin="atlas"] :is(.item, .frame) { --bar-edge: color-mix(in srgb, var(--ink) min(70%, calc(26% * var(--edge-k, 1))), var(--bar-fill)); }
[data-skin="atlas"] :is(.item, .item:is(:hover:not(.touch-input *), .hov)) { --bar-fill: color-mix(in srgb, #000 var(--bar-dark, 0%), color-mix(in srgb, var(--lift) var(--lift-k, 50%), var(--paper))); }
[data-skin="atlas"] :is(.item:not(.person, .guest), .item:not(.person, .guest):is(:hover:not(.touch-input *), .hov)) { --bar-fill: color-mix(in srgb, #000 var(--bar-dark, 0%), color-mix(in srgb, var(--land) var(--land-k, 34%), color-mix(in srgb, var(--lift) calc(100% - var(--lift-k, 50%)), var(--paper)))); }
[data-skin="atlas"] .item { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
[data-skin="atlas"] .item:not(.has-av, .has-photo) { border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-left: 2px solid var(--c); }
[data-skin="atlas"] .item { --sel-ring: 0 0 0 1px var(--red); }
[data-skin="atlas"] .item.sel { box-shadow: var(--sel-ring); }
/* an opened parent is a box, not a bar: no red ring on its heading or its outline, selected, hovered or lit */
[data-skin="atlas"] .item.open-parent:is(.sel, :hover, .hov, .flash) { box-shadow: none; }
[data-skin="atlas"] .frame, [data-skin="atlas"] .frame:is(.lifted, .lit, .flash) { --bar-fill: color-mix(in srgb, #000 var(--bar-dark, 0%), color-mix(in srgb, var(--land) var(--land-k, 34%), color-mix(in srgb, var(--lift) calc(100% - var(--lift-k, 50%)), var(--paper)))); --box-r: 3px; background-image: linear-gradient(160deg, color-mix(in srgb, var(--sea) 2.2%, transparent), transparent 60%); }
[data-skin="atlas"] :is(.nest-ct, .nest-tg) { color: var(--text); }
[data-skin="atlas"] .av { --ring: color-mix(in srgb, var(--ink) 34%, var(--paper)); }

/* ---------- Map lettering: spaced small capitals in the serif for titles, periods and brand; italic serif dates ---------- */
[data-skin="atlas"] .lanes {
  --period-font: var(--font-head); --period-case: none; --period-weight: 600; --period-ls: .06em; --period-style: normal;
  --t-level: 14px; --t-ratio: 1.12;
}
[data-skin="atlas"] .item:not(.person, .guest) .lbl .n { font-variant-caps: all-small-caps; }
[data-skin="atlas"] .item:is(.person, .guest) { --n-size: calc(var(--t-name) + 1.5px); }
[data-skin="atlas"] .item:is(.person, .guest) .lbl .n { font: 500 var(--n-size) var(--font-head); }
[data-skin="atlas"] .sh-span { font-size: 12.5px; }
[data-skin="atlas"] :is(.nest-ct, .lane-ct) { font-size: 12px; font-weight: 500; }
[data-skin="atlas"] .lane-note { font-size: 13px; }
[data-skin="atlas"] :is(.nest-pill, .nest-btn) { font-size: 13px; }
[data-skin="atlas"] :is(.nest-pill button, .nest-pill-name, .nest-pill-name b) { font-weight: 500; }
[data-skin="atlas"] :is(.cat .ct, .cat-tag-ct, .sheet-tab .ct) { font-size: 12.5px; font-weight: 500; letter-spacing: .02em; }
[data-skin="atlas"] { --ink-years: 92%; --ink-date: 74%; --years-fill-a: 10%; }   /* its serif italics are fine lines, so both run darker; the order holds */
[data-skin="atlas"] .lbl .dur { text-transform: none; letter-spacing: .02em; }
[data-skin="atlas"] .brand h1 { font: 500 21px/1 var(--font-head); font-variant-caps: all-small-caps; letter-spacing: .1em; }
[data-skin="atlas"] :is(.tick > span, .lane-scale span) { font-size: 12px; }

/* ---------- Category titles: a cartouche (ink on paper between two red rules), then a double rule to the icon ---------- */
/* A map's neatline: each category opens under the graduated border of a plate, two ink lines with filled steps between them,
   laid across the whole row. The grid stops at the title strip, like a map's frame. The icon is a surveyor's mark: the
   category's shape and its mark in one red engraved line (red stays the only accent); the name in widely spaced small
   capitals, the count an italic figure. */
[data-skin="atlas"] .lane {
  --hd-fill: color-mix(in srgb, var(--surface) 34%, transparent); --hd-halo: transparent; --hd-ink: var(--text);
  --hd-stuck: var(--paper); --hd-stuck-fade: none; --hd-edge: none; --hd-h: 42px;
  --lane-edge: none; --lane-bd: 0; --rail-show: none;
  --rule-show: block; --rule-show-2: none; --rule-at: top; --rule-pos: absolute; --rule-top: 0; --rule-h: 4px; --rule-scale: 36px;
  --rule: color-mix(in srgb, var(--ink) 48%, var(--paper)); --rule-2: color-mix(in srgb, var(--ink) 48%, var(--paper));
  --rule-fill: repeating-linear-gradient(90deg, var(--rule) 0 36px, transparent 36px 72px);
  --ord-ic: 2; --ord-tools: 3; --hd-gap: 10px; --hd-pad-l: 8px; --ic-slot: 38px; --ic-k: .88; --ic-g: .78;
  --ic-ring-show: block; --ic-ring-w: .75px; --ic-ring: var(--red); --ic-core: var(--paper);
  --title-size: 18px; --title-weight: 500; --title-ls: .16em; --title-case: none; --title-lh: 1;
  margin-bottom: 8px;
}
[data-skin="atlas"] .lane-h .lane-name { font-variant-caps: all-small-caps; }
[data-skin="atlas"] .lane-h .lane-ic { background: var(--ic-ring); }
[data-skin="atlas"] .lane-h :is(.lane-tools, .nest-pill) { margin-left: 0; }
[data-skin="atlas"] .lane-h .lane-note { background: none; box-shadow: none; }
[data-skin="atlas"] .lane-h .lane-ct { margin-left: auto; padding: 0; background: none; color: var(--muted); --wash: transparent; font-size: 14px; }
/* a people tag is a legend entry on the plate: a hairline box, the figure in italic */
[data-skin="atlas"] .lane-h .nest-pill { --wash: transparent; border-radius: 2px; background: none; box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-skin="atlas"] .lane-h .nest-pill-name { color: var(--text); }
[data-skin="atlas"] .lane-h .nest-pill-name b { font: italic 500 14px var(--font-date); }
[data-skin="atlas"] .lane-h .nest-pill button + button { color: var(--muted); }

/* ---------- The time line: a red hairline ---------- */
[data-skin="atlas"] .cur-line { opacity: 1; border-left-color: var(--red); box-shadow: 0 0 6px 0 color-mix(in srgb, var(--red) 18%, transparent); }

/* ---------- Sidebar and settings: a navy legend strip with paper text; the category in view is red ---------- */
[data-skin="atlas"] :is(:root:not(.raised) .side, .settings-pop) {
  --cap-sheen: linear-gradient(180deg, rgb(255 255 255 / .05), transparent 75%); --cap-lift: 0 0 #0000;   /* the page's light sheen would haze a dark panel's controls */
  color-scheme: dark;
  --surface: var(--strip); --surface-2: color-mix(in srgb, #fff 10%, var(--strip)); --bg: var(--strip);
  --text: var(--strip-ink); --muted: color-mix(in srgb, var(--strip-ink) 74%, var(--strip)); --faint: color-mix(in srgb, var(--strip-ink) 62%, var(--strip));
  --line: color-mix(in srgb, var(--strip-ink) 12%, var(--strip)); --line-strong: color-mix(in srgb, var(--strip-ink) 22%, var(--strip)); --cap-ring: var(--line-strong);
  --accent: color-mix(in srgb, var(--red) 38%, var(--strip-ink)); --on-accent: var(--strip); --hover-ink: color-mix(in srgb, var(--red) 35%, var(--strip-ink));   /* hover ink on the navy */
  color: var(--text);
}
[data-skin="atlas"] .side {
  background: var(--strip-glow), var(--strip); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sea) 22%, transparent);
  --cat-mono: var(--muted); --sw-rest: color-mix(in srgb, #fff 6%, transparent);
  --cat-current-bg: var(--surface-2); --cat-hover-bg: var(--surface-2); --nm-current: var(--strip-ink); --sw-hi-fg: var(--strip-ink); --sw-hi-bg: var(--red);
}
[data-skin="atlas"] .settings-pop { background: var(--strip-glow), var(--strip); }   /* the red lifted so it reads on the navy */
[data-skin="atlas"] .cat-tag { --cat-mono: var(--red); --tint: var(--strip); color: var(--strip-ink); font: 500 16px/1 var(--font-head); font-variant-caps: all-small-caps; letter-spacing: .08em; text-transform: none; }

/* the sidebar lettered like the map: group names and heading in spaced small capitals, category names in the serif */
:root[data-skin="atlas"] { --font-side: var(--font-head); --set-size: 15px; --set-fold-size: 17px; --set-fold-w: 500; }
[data-skin="atlas"] .side .cat .nm { font-size: 15px; }
[data-skin="atlas"] .side :is(.side-h, .cat-group) { font-size: 14px; font-weight: 500; text-transform: none; font-variant-caps: all-small-caps; letter-spacing: .1em; }
@media (max-width: 1180px) { [data-skin="atlas"] .brand h1 { font-size: 17px; letter-spacing: .04em; } }
@media (max-width: 760px) { [data-skin="atlas"] .lane { --title-size: 15px; --title-ls: .08em; --hd-gap: 8px; --ic-slot: 32px; } }
/* every surface lettered like the map: labels, titles and names in the serif, sea ink everywhere (search, card, map, Data view) */
:root[data-skin="atlas"] { --font-label: var(--font-head); --font-title: var(--font-head); --font-name: var(--font-head); --cat-mono: var(--sea); }
[data-skin="atlas"] .gs-name { font-size: 15px; font-weight: 500; }
/* squared-off controls, as in the lab (square chrome, style.css): buttons, switches, menus, cards and tags take 3px corners */
:root[data-skin="atlas"] { --r-ui: 3px; }
[data-skin="atlas"] .switch span::after { border-radius: 2px; }

/* ---------- Relationship lines and tags: lines in the map's own forest and red. A tag is a map label on the paper: a thin ruled edge, the role in the plate's
   italic, the name in spaced small capitals, the mark an engraved hairline circle with a fine open arrow ---------- */
:root[data-skin="atlas"] { --tie-close: light-dark(color-mix(in srgb, var(--forest) 72%, var(--ink)), color-mix(in srgb, var(--forest) 55%, #fff)); --tie-conflict: light-dark(var(--red), color-mix(in srgb, var(--red) 55%, #fff)); }
[data-skin="atlas"] .tie-tag { --tag-arrow-w: .85px; font: italic 500 13.5px var(--font-head); letter-spacing: .01em; color: color-mix(in srgb, var(--tc) 60%, var(--text)); }
[data-skin="atlas"] .tie-tag:not(.hot, .away:hover:not(.touch-input *)) { background: var(--bg); box-shadow: 0 0 0 var(--hair) color-mix(in srgb, var(--tc) 70%, transparent); }
[data-skin="atlas"] .tie-name { font: 500 14px var(--font-head); font-variant-caps: all-small-caps; letter-spacing: .06em; }
[data-skin="atlas"] .tie-tag.away .tie-role { font-size: 12.5px; }

/* ---------- A drag, as a map: the row pulled out is a label on the sheet, a ruled edge with a soft cast; where it will land a neatline: two ink rules, the upper with a
   scale bar's filled steps; the group it would join in the red. Motion and behaviour: style.css, js/app.js ---------- */
[data-skin="atlas"] .cats {
  --drag-fill: var(--surface-2); --drag-scale: 1; --drag-r: var(--r-ui);
  --stack-fill: var(--surface-2); --stack-edge: inset 0 0 0 var(--hair) color-mix(in srgb, var(--text) 45%, transparent);
  --slot-fill: color-mix(in srgb, var(--text) 5%, transparent); --slot-r: 0px; --home-ink: var(--hover-ink, var(--accent));
  --slot-edge: inset 0 var(--hair) color-mix(in srgb, var(--text) 75%, transparent), inset 0 calc(-1 * var(--hair)) color-mix(in srgb, var(--text) 75%, transparent);
  --slot-pic: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 75%, transparent) 0 12px, transparent 12px 24px) 0 var(--hair) / 100% 3px no-repeat;
}

/* ---------- The Reliquary's navy frame and parchment page, used by the Ties tab's person card (the info card keeps Atlas's plain look) ---------- */
:root[data-skin="atlas"] { --frame: var(--ink); --page: color-mix(in srgb, var(--land) 24%, #fbf8f0); }
:root[data-skin="atlas"][data-theme="dark"] { --frame: #0b111c; --page: #1b2436; }
@media (prefers-color-scheme: dark) { :root[data-skin="atlas"]:not([data-theme="light"]) { --frame: #0b111c; --page: #1b2436; } }
/* the lean and light of the Ties tab's pictures; the info card stays still (style.css → "The card in motion") */
[data-skin="atlas"] .relview {
  --card-tilt: 1.5;
  --card-sheen: radial-gradient(closest-side, rgb(255 250 235 / .12), transparent) 50% 50% / 70% 60% no-repeat;
}
/* ---------- The Reliquary finish on the navy plates: the legend strip, the settings and the map panel carry a gold rule 4px in,
   as the card's frame does ---------- */
[data-skin="atlas"] :is(.settings-pop, .rmap-panel, .keys-pop) { outline: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); outline-offset: -4px; }
:root[data-skin="atlas"]:not(.raised) .side { outline: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); outline-offset: -4px; }
/* Map view (css/map.css): an old globe in the plate's six inks: sea and land washes, the realms coloured as an atlas
   colours its countries, coasts in navy ink, rhumb-line graticule in sea, wars and the selected ring in red, no halo */
[data-skin="atlas"] .mapview {
  --map-sea: color-mix(in srgb, var(--sea) 30%, var(--paper)); --map-land: color-mix(in srgb, var(--land) 30%, var(--paper)); --map-sea-grad: .12;
  --map-coast: var(--ink); --map-coast-a: .7; --map-border: var(--ink); --map-border-a: .35; --map-grid: var(--sea); --map-grid-a: .3;
  --map-halo: var(--land); --map-halo-a: .12; --map-limb: var(--ink); --map-shade: .18; --map-pic-mono: .2;
  --map-war: var(--red); --map-hot: var(--red);
  --map-realm-1: color-mix(in srgb, var(--red) 38%, var(--paper)); --map-realm-2: color-mix(in srgb, var(--gold) 55%, var(--paper)); --map-realm-3: color-mix(in srgb, var(--forest) 45%, var(--paper));
  --map-realm-4: color-mix(in srgb, var(--sea) 45%, var(--paper)); --map-realm-5: color-mix(in oklab, #8a6aa0 40%, var(--paper)); --map-realm-6: color-mix(in srgb, var(--land) 75%, var(--paper));
  --map-realm-a: .85;
}
/* Ties view (css/rel.css): an atlas plate. Names lettered on the chart in spaced small capitals (as places),
   gold-rimmed medallions, the person's ring in red, each kind in the plate's inks; the person heads the panel as the
   Reliquary card (navy frame, gold rules, parchment page) */
[data-skin="atlas"] .relview {
  --rel-k-family: color-mix(in srgb, var(--gold) 80%, var(--ink)); --rel-k-teachers: var(--sea); --rel-k-students: var(--sea);
  --rel-k-influences: color-mix(in srgb, var(--ink) 55%, var(--paper)); --rel-k-influenced: color-mix(in srgb, var(--ink) 55%, var(--paper));
  --rel-k-friends: var(--forest); --rel-k-patrons: color-mix(in srgb, var(--land) 60%, var(--ink)); --rel-k-rivals: var(--red); --rel-k-era: var(--faint);
  --rel-chord: var(--sea); --rel-chord-a: .4; --rel-ring: var(--gold); --rel-ring-a: .55; --rel-bead: var(--red);
  --rel-pic-ring: var(--gold); --rel-ego-ring: var(--red); --rel-sheet: var(--page);
  --rel-tag: transparent; --rel-tag-ink: var(--ink); --rel-tag-sub: var(--muted); --rel-ego-tag: transparent; --rel-ego-ink: var(--ink);
  --rel-conflict-tag: transparent; --rel-conflict-ink: var(--red);
  --rel-name-font: var(--font-head); --rel-name-case: none; --rel-name-track: .06em;
  --rel-pop-glow: transparent;   /* Ink hover: the picture swells and its rim lights, no glow */
}
[data-skin="atlas"] .rel-lbl { text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper); }
[data-skin="atlas"] .rel-nm { font-variant-caps: small-caps; font-weight: 600; font-size: 13.5px; }
[data-skin="atlas"] .rel-role { font: italic 400 12px / 1.2 var(--font-head); text-transform: none; letter-spacing: 0; }
[data-skin="atlas"] .rel-node.ego .rel-nm { font-size: 19px; }
[data-skin="atlas"] .rel-sector { font: 500 14px / 1 var(--font-head); font-variant-caps: all-small-caps; letter-spacing: .14em; color: var(--ink); }
/* the Reliquary card */
[data-skin="atlas"] .rel-hero {
  --surface: var(--page); --hero-h: 210px;
  margin: 12px 12px 4px; padding: 8px; border-radius: var(--r-ui, 12px); background: var(--frame);
  outline: 1px solid color-mix(in srgb, var(--gold) 80%, transparent); outline-offset: -4px; box-shadow: 0 0 0 1px rgb(0 0 0 / .2), 0 18px 34px -20px rgb(10 16 30 / .55);
}
[data-skin="atlas"] .rel-hero .portrait { margin: 0; width: 100%; border-radius: min(5px, var(--r-ui, 5px)) min(5px, var(--r-ui, 5px)) 0 0; -webkit-mask-image: none; mask-image: none; background: color-mix(in srgb, var(--c, var(--sea)) 20%, var(--frame)); }
[data-skin="atlas"] .rel-hero > :not(.portrait) { background: var(--page); padding-inline: 14px; }
[data-skin="atlas"] .rel-hero .portrait + .rel-hero-txt { margin-top: 0; padding-top: 12px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold) 70%, transparent); }
[data-skin="atlas"] .rel-hero .rel-hero-txt:first-child { padding-top: 14px; border-radius: min(5px, var(--r-ui, 5px)) min(5px, var(--r-ui, 5px)) 0 0; }
[data-skin="atlas"] .rel-hero .rel-acts { margin-top: 0; padding-top: 12px; padding-bottom: 14px; border-radius: 0 0 min(5px, var(--r-ui, 5px)) min(5px, var(--r-ui, 5px)); }
[data-skin="atlas"] .rel-hero h2 { font: 500 25px / 1.05 var(--font-head); color: var(--ink); }
[data-skin="atlas"] .rel-hero .rel-cat { font: 500 13px / 1 var(--font-head); font-variant-caps: all-small-caps; letter-spacing: .12em; text-transform: none; }
[data-skin="atlas"] .rel-hero .rel-note { margin: 0; padding-top: 10px; }
[data-skin="atlas"] .rel-hero .rel-note::first-letter { float: left; margin: 3px 6px 0 0; font: 500 38px / .8 var(--font-head); color: var(--red); }
@media (max-width: 760px) { [data-skin="atlas"] .rel-hero { margin: 4px 10px 4px; } }
[data-skin="atlas"] :is(.rel-group h3, .rel-line h3, .rel-lives-h) { font: 500 13px / 1.2 var(--font-head); font-variant-caps: all-small-caps; letter-spacing: .12em; text-transform: none; }
[data-skin="atlas"] :is(.rel-rnm, .rel-heir-nm) { font-family: var(--font-head); font-size: 15px; }