@layer pmx.foundation, pmx.plugins, pmx.theme;
@layer pmx.plugins {
.cm-page-label { margin: 0 0 var(--cm-space-7); font: 400 var(--cm-text-label)/var(--cm-leading-label) var(--cm-font-label); letter-spacing: var(--cm-tracking-label); text-transform: uppercase; color: var(--pmx-color-muted); }
.cm-page-label p { margin: 0; font: inherit; }
.cm-page-label a { color: inherit; background: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.cm-guide-hero { padding-block: var(--cm-space-6) var(--cm-space-5); }
.cm-guide-hero .cm-page-label { margin-bottom: var(--cm-space-3); }
:is(.cm-guide-hero .cm-page-label, .cm-guide-chapter-number, .cm-entry-kind) { opacity: .44; }
.cm-guide-hero h1 { margin: 0; font-size: var(--cm-text-display); line-height: var(--cm-leading-display); letter-spacing: var(--cm-tracking-display); text-align: left; }
.cm-guide-hero > p { max-width: 26em; margin: var(--cm-space-5) 0 0; font-size: var(--cm-text-lede); font-style: italic; line-height: var(--cm-leading-lede); color: var(--pmx-color-muted); }
@container reading (min-width: 62rem) {
  .cm-guide-hero { display: grid; grid-template-columns: var(--cm-margin) minmax(0, 1fr); column-gap: var(--cm-gutter); align-items: start; padding-block: var(--cm-space-7) var(--cm-space-6); }
  .cm-guide-hero > * { grid-column: 2; }
  .cm-guide-hero .cm-page-label { grid-column: 1; grid-row: 1; margin: calc(var(--cm-text-display) * ((var(--cm-leading-display) - .82) / 2 + .08) - (1lh - 1cap) / 2) 0 0; padding-inline-start: var(--cm-label-x); white-space: nowrap; }
  .cm-guide-hero > :is(h1, .pmx-heading) { grid-row: 1; }
}
.cm-entry { position: relative; padding-block: var(--cm-space-6); }
.cm-entry-kind { margin: 0 0 var(--cm-space-3); font: 400 var(--cm-text-label)/var(--cm-leading-label) var(--cm-font-label); letter-spacing: var(--cm-tracking-label); text-transform: uppercase; color: var(--pmx-color-muted); }
.cm-entry-kind:empty { display: none; }
.cm-entry-copy > :first-child, .cm-entry-copy > .pmx-heading:first-child > :is(h3, h4) { margin-top: 0; }
.cm-entry-copy p, .cm-entry-more p { font-size: var(--cm-text-body); line-height: var(--cm-leading-body); }
/* Definitions read at body size: the margin label and the group already mark them.
   (Markdown leaves a lone paragraph unwrapped, so the copy box carries the size.) */
.cm-entry-copy { font-size: var(--cm-text-body); line-height: var(--cm-leading-body); }
.cm-entry-copy h3 { margin: 0 0 var(--cm-space-4); font-size: var(--cm-text-statement); line-height: var(--cm-leading-heading); letter-spacing: var(--cm-tracking-heading); }
.cm-entry-copy h4 { margin: 0 0 var(--cm-space-3); font-size: var(--cm-text-term); line-height: var(--cm-leading-heading); letter-spacing: var(--cm-tracking-heading); }
/* The map coordinate after a statement, (x), (y) or (m), reads as a margin annotation. */
.cm-entry-copy h3 sub { margin-left: .35em; font: 400 var(--cm-text-label)/1 var(--cm-font-label); letter-spacing: var(--cm-tracking-label); color: var(--pmx-color-muted); vertical-align: baseline; }
.cm-entry-figure { margin: var(--cm-space-5) 0 0; }
.cm-entry-figure:not(:has(img)), .cm-entry-more:not(:has(*)) { display: none; }
.cm-entry-figure img { display: block; width: 100%; height: auto; margin: 0; }
.cm-entry-figure p { margin: 0; }

@container reading (min-width: 62rem) {
  .cm-entry { display: grid; grid-template-columns: var(--cm-margin) minmax(0, var(--cm-text)) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--cm-gutter); align-items: start; padding-block: var(--cm-space-7); }
  .cm-entry-kind { grid-column: 1; grid-row: 1; position: relative; align-self: start; margin: calc(var(--cm-entry-first-size, var(--cm-text-body)) * ((var(--cm-entry-first-leading, var(--cm-leading-body)) - .7) / 2 + .08) - (1lh - 1cap) / 2) 0 0; padding-inline-start: var(--cm-label-x); white-space: nowrap; }
  .cm-entry-kind::before { content: ""; position: absolute; top: var(--cm-mark-definition-offset); left: calc(var(--cm-path-x) - var(--cm-mark-definition-size) / 2); width: var(--cm-mark-definition-size); height: var(--cm-mark-definition-size); box-sizing: border-box; border: var(--cm-mark-definition-border); border-radius: var(--cm-mark-ring-radius); background: var(--cm-mark-definition-fill); }
  .cm-entry:has(.cm-entry-copy h3:first-child, .cm-entry-copy > .pmx-heading:first-child > h3) { --cm-entry-first-size: var(--cm-text-statement); --cm-entry-first-leading: var(--cm-leading-heading); }
  .cm-entry:has(.cm-entry-copy h4:first-child, .cm-entry-copy > .pmx-heading:first-child > h4) { --cm-entry-first-size: var(--cm-text-term); --cm-entry-first-leading: var(--cm-leading-heading); }
  .cm-entry-copy { grid-column: 2; grid-row: 1; align-self: start; }
  .cm-entry-more { grid-column: 2; grid-row: 2; }
  .cm-entry-figure { grid-column: 3; grid-row: 1 / span 2; margin: -6.9% 0 0; translate: 5% 0; }
  /* A statement's heading and description share one measure, set in rem so it holds
     at every page width. The heading fills its lines to the same right edge as the
     description (pretty, not balanced), so the pair reads as one block. */
  .cm-entry[data-layout="statement"] .cm-entry-copy { grid-column: 2 / span 2; max-width: var(--cm-statement-width); }
  .cm-entry[data-layout="statement"] .cm-entry-copy h3 { text-wrap: pretty; }
  .cm-entry[data-layout="statement"] { padding-top: var(--cm-space-7); }
  /* A wide entry's copy takes the text and figure columns: a board, a row of cards.
     A reading entry takes them too, at a reading measure, when nothing sits beside it. */
  .cm-entry[data-layout="wide"] .cm-entry-copy { grid-column: 2 / span 2; }
  .cm-entry[data-layout="reading"] .cm-entry-copy { grid-column: 2 / span 2; max-width: var(--cm-reading-width); }
  .cm-entry[data-layout="aside"] .cm-entry-copy { grid-column: 2 / span 2; max-width: var(--cm-reading-width); }
}
/* An aside is a list of references or examples, not the main text: heading and text
   both set small and quiet, so the entries around it lead. */
.cm-entry[data-layout="aside"] { padding-block: var(--cm-space-4); }
.cm-entry[data-layout="aside"] .cm-entry-copy :is(h3, h4) { margin: 0 0 var(--cm-space-2); font-size: var(--cm-text-body); line-height: var(--cm-leading-body); letter-spacing: 0; color: var(--pmx-color-muted); }
.cm-entry[data-layout="aside"] .cm-entry-copy, .cm-entry[data-layout="aside"] .cm-entry-copy p { font-size: var(--cm-text-small); line-height: var(--cm-leading-body); color: var(--pmx-color-muted); }
.cm-entry[data-layout="aside"] .cm-entry-copy p { margin-block: 0 var(--cm-space-2); }
@container reading (min-width: 62rem) { .cm-entry:has(+ .cm-entry[data-layout="aside"]), [data-pmx-block]:has(.cm-entry[data-layout="aside"]) .cm-entry[data-layout="aside"] { padding-top: var(--cm-space-4); } }
/* A statement and the entries that develop it read as one group. */
.cm-entry[data-layout="statement"] { padding-bottom: var(--cm-space-4); }
/* A statement's quotation is its description, set exactly like the content below it. */
.cm-entry[data-layout="statement"] blockquote { margin: 0; padding: 0; border: 0; font-size: var(--cm-text-body); font-style: normal; line-height: var(--cm-leading-body); color: var(--pmx-color-fg); }
.cm-entry[data-layout="statement"] blockquote p { margin: 0 0 var(--cm-space-3); font-size: inherit; line-height: inherit; }
.cm-entry[data-level="2"] { padding-top: var(--cm-space-5); }
.cm-entry[data-level="2"] .cm-entry-copy h4 { font-size: var(--cm-text-definition); }
@container reading (min-width: 62rem) {
  .cm-entry[data-layout="statement"] { padding-bottom: var(--cm-space-4); }
  .cm-entry[data-level="2"] { padding-top: var(--cm-space-6); }
  .cm-entry[data-level="2"]::before { content: ""; position: absolute; top: calc(var(--cm-space-6) + var(--cm-mark-subentry-offset)); left: calc(var(--cm-path-x) - var(--cm-mark-subentry-size) / 2); width: var(--cm-mark-subentry-size); height: var(--cm-mark-subentry-size); border-radius: var(--cm-mark-ring-radius); background: var(--cm-mark-subentry-fill); }
}
/* After a dimension title, its first entry sits close, even a statement. */
[data-pmx-block]:has(.cm-guide-chapter) + [data-pmx-block] .cm-entry { padding-top: var(--cm-space-7); }
/* Groups: a large gap before each statement, tight gaps inside its group. */
.cm-entry[data-group="head"] { padding-top: var(--cm-space-7); }
.cm-entry[data-group="member"] { padding-top: var(--cm-space-5); }
@container reading (min-width: 62rem) {
  .cm-entry[data-group="head"] { padding-top: var(--cm-space-8); }
  .cm-entry[data-group="member"] { padding-top: var(--cm-space-6); }
  /* A statement's label reads at full strength, on a filled, larger ring. */
  .cm-entry[data-group="head"] .cm-entry-kind { color: var(--pmx-color-fg); }
  [data-pmx-block]:has(.cm-guide-chapter) + [data-pmx-block] .cm-entry { padding-top: var(--cm-space-7); }
  .cm-entry[data-group="head"] .cm-entry-kind::before { top: var(--cm-mark-statement-offset); left: calc(var(--cm-path-x) - var(--cm-mark-statement-size) / 2); width: var(--cm-mark-statement-size); height: var(--cm-mark-statement-size); border: var(--cm-mark-statement-border); background: var(--cm-mark-statement-fill); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not([data-pmx-play-mode]) .cm-entry-figure { animation: cm-settle linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@keyframes cm-settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cm-art-map { position: relative; margin: var(--cm-space-5) 0; }
.cm-art-map-art :is(p, picture, img) { display: block; width: 100%; height: auto; margin: 0; }
.cm-art-map-places { position: absolute; inset: 0; }
/* Drawn regions trace each space on the artwork, faintly, under its tag. Pointing
   at a space or its tag lights up both. */
/* Light is added in a screen blend, so a space brightens the way the essays' boards
   show the space they're about. */
.cm-art-region { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; mix-blend-mode: screen; }
.cm-art-region path {
  fill: transparent; stroke: var(--cm-map-art-ink); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; opacity: var(--cm-map-art-region-opacity); pointer-events: all; cursor: pointer; transition: opacity .3s ease, fill .3s ease;
}
.cm-art-region[data-state="forming"] path { stroke-dasharray: 2 5; pointer-events: none; cursor: default; }
.cm-art-region:is([data-hot], [data-flash], :has(a:hover)) path { opacity: .8; fill: color-mix(in srgb, var(--cm-map-art-ink) var(--cm-map-art-brighten), transparent); }
.cm-art-region a { outline: none; }
/* A line drawing on paper: by day a chosen space takes a tint of the accent colour,
   multiplied into the paper; by night the drawing is light on dark, so it brightens. */
.cm-art-map[data-tone="drawing"] { --cm-map-art-ink: var(--pmx-color-accent); }
.cm-art-map[data-tone="drawing"] .cm-art-region { mix-blend-mode: multiply; }
/* The drawing already draws its own lines, so its regions only tint; a focused one is outlined. */
.cm-art-map[data-tone="drawing"] .cm-art-region a:not(:focus-visible) path { stroke: none; }
.cm-art-map[data-tone="drawing"] .cm-art-region:is([data-hot], [data-flash], :has(a:hover)) path { fill: color-mix(in srgb, var(--pmx-color-accent) 14%, transparent); }
html[data-pmx-scheme="dark"] .cm-art-map[data-tone="drawing"] .cm-art-region { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { html:not([data-pmx-scheme="light"]) .cm-art-map[data-tone="drawing"] .cm-art-region { mix-blend-mode: screen; } }
.cm-art-region a:focus-visible path { opacity: 1; stroke: var(--pmx-color-accent); stroke-width: 2; }
/* On a phone the artwork is too small to carry tags; its regions are still the links. */
@media (max-width: 40rem) { .cm-art-map .cm-map-place { display: none; } }
.cm-art-map .cm-map-place[data-hot] .cm-map-tag { border-color: var(--pmx-color-border-strong); background: color-mix(in srgb, var(--pmx-color-bg) 88%, var(--pmx-color-fg)); }
@media (prefers-reduced-motion: reduce) { .cm-art-region path { transition: none; } }
.cm-glyph {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--cm-glyph-size, 1.5em); height: var(--cm-glyph-size, 1.5em); vertical-align: middle;
}
.cm-glyph svg {
  width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: var(--cm-glyph-stroke); stroke-linecap: round; stroke-linejoin: round;
}
.cm-glyph:is([data-state="here"], [aria-current] .cm-glyph) { color: var(--pmx-color-accent); }
.cm-glyph[data-state="forming"] svg { stroke-dasharray: 1.6 2.2; }
.cm-glyph[data-state="resting"] { opacity: .45; }
.cm-guide-chapter { position: relative; margin-top: var(--cm-space-7); }
.cm-guide-chapter-number { margin: 0 0 var(--cm-space-3); font: 400 var(--cm-text-label)/var(--cm-leading-label) var(--cm-font-label); letter-spacing: var(--cm-tracking-label); text-transform: uppercase; color: var(--pmx-color-fg); }
.cm-guide-chapter h2 { position: relative; display: inline-block; margin: 0; font-size: var(--cm-text-title); line-height: var(--cm-leading-display); letter-spacing: var(--cm-tracking-display); }
.cm-guide-chapter p { max-width: var(--cm-reading-width); }
@container reading (min-width: 62rem) {
  .cm-guide-chapter { padding-inline-start: var(--cm-indent); }
  /* The station: the label sits in the margin, level with the title's visible top, on a
     double ring that the path passes through. */
  .cm-guide-chapter-number { position: absolute; top: calc(var(--cm-text-title) * ((var(--cm-leading-display) - .82) / 2 + .08) - (1lh - 1cap) / 2); left: var(--cm-label-x); margin: 0; white-space: nowrap; }
  /* A dimension opens a major part: the widest gap on the page before it, and a
     tight one after, so its title binds to what follows. */
  .cm-guide-chapter { margin-top: var(--cm-space-9); }
  .cm-guide-chapter-number::before { content: ""; position: absolute; top: calc(50% - var(--cm-mark-dimension-size) / 2); left: calc(var(--cm-path-x) - var(--cm-label-x) - var(--cm-mark-dimension-size) / 2); width: var(--cm-mark-dimension-size); height: var(--cm-mark-dimension-size); box-sizing: border-box; border: var(--cm-mark-dimension-border); border-radius: var(--cm-mark-ring-radius); background: var(--cm-mark-dimension-fill); }
  .cm-guide-chapter p { max-width: var(--cm-text); }
}
.cm-site-map-icon { fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.cm-site-map-sheet {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0;
  padding: 0; overflow: hidden; color: var(--pmx-color-fg); background: transparent;
}
.cm-site-map-sheet::backdrop { background: transparent; }
.cm-site-map:has(.cm-site-map-sheet[open]) .cm-site-map-open { opacity: 0; }
.cm-site-map-close {
  position: fixed; z-index: 1;
  top: var(--cm-site-map-toggle-top); left: var(--cm-site-map-toggle-left);
}
.cm-site-map-close > span { opacity: 1; }
.cm-site-map-content {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr); row-gap: var(--cm-space-3);
  box-sizing: border-box; height: 100%; overflow: hidden;
  background: var(--pmx-color-bg);
  padding: max(var(--cm-site-map-toggle-top), env(safe-area-inset-top))
    max(var(--cm-site-map-sheet-gutter), env(safe-area-inset-right))
    max(var(--cm-space-2), env(safe-area-inset-bottom))
    max(var(--cm-site-map-sheet-gutter), env(safe-area-inset-left));
}
.cm-site-map-sheet[open] .cm-site-map-content { animation: cm-site-map-unfold var(--cm-site-map-unfold-duration) cubic-bezier(.2, .7, .3, 1) both; }
@keyframes cm-site-map-unfold { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .cm-site-map-sheet[open] .cm-site-map-content { animation: none; } }

/* Search takes the title's place, level with the Sitemap control. */
.cm-site-map-search { justify-self: center; align-self: center; width: min(30rem, 100% - 2 * var(--cm-site-map-toggle-clearance)); }

/* Fit both axes within the stage, with limited stretch from the drawn board. */
.cm-site-map-stage {
  --cm-site-map-scheme-room: calc(var(--cm-button-target) + var(--cm-space-2));
  --cm-site-map-ratio: calc(1600 / 900);
  --cm-site-map-stretch: 1.15;
  --cm-site-map-available-width: calc(100cqw - 2 * var(--cm-site-map-scheme-room));
  --cm-site-map-available-height: 100cqh;
  --cm-site-map-board-width: min(var(--cm-site-map-available-width), var(--cm-site-map-available-height) * var(--cm-site-map-ratio) * var(--cm-site-map-stretch));
  --cm-site-map-board-height: min(var(--cm-site-map-available-height), var(--cm-site-map-available-width) / var(--cm-site-map-ratio) * var(--cm-site-map-stretch));
  container-type: size; min-height: 0; display: flex; justify-content: center; align-items: center; gap: var(--cm-space-2);
}
/* A blank column the width of day and night balances them on the left, so the map
   always has even margins. */
.cm-site-map-stage::before { content: ""; flex: none; width: var(--cm-button-target); }

/* Day sits level with the relational (upper) half, night with the conceptual
   (lower) half; the pressed one is the palette in use. */
.cm-site-map-scheme { display: flex; flex-direction: column; justify-content: space-between; height: var(--cm-site-map-board-height); }
.cm-site-map-scheme .cm-button { min-inline-size: var(--cm-button-target); padding: 0; color: var(--pmx-color-muted); opacity: .6; }
.cm-site-map-scheme .cm-button[aria-pressed="true"] { color: var(--pmx-color-fg); opacity: 1; }
.cm-site-map-scheme .cm-site-map-icon { width: 1.25rem; height: 1.25rem; }

.cm-site-map-stage > .cm-map-board {
  flex: none; aspect-ratio: auto; margin: 0;
  width: var(--cm-site-map-board-width); height: var(--cm-site-map-board-height);
}

/* Contact is closed for now; it slips away whenever it's reached for. */
.cm-map-board .cm-map-place.cm-site-map-contact { left: var(--x, 84%); top: var(--y, 30%); cursor: default; transition: opacity .25s; }
.cm-site-map-contact { appearance: none; border: 0; background: transparent; font: inherit; }
.cm-map-place.cm-site-map-contact.is-moving { opacity: 0; }

@media (max-width: 52rem) {
  .cm-site-map-content { padding-inline: max(var(--cm-site-map-sheet-gutter), env(safe-area-inset-left)) max(var(--cm-site-map-sheet-gutter), env(safe-area-inset-right)); }
}
/* A short, wide window: search folds to its icon at the end of the top line and
   opens into the field when focused, or while it holds a query. */
@media (max-height: 32rem) and (orientation: landscape) {
  .cm-site-map-search { justify-self: end; width: var(--cm-button-target); }
  .cm-site-map-search .cm-site-search-field { justify-content: center; min-block-size: var(--cm-button-target); border-color: transparent; cursor: pointer; }
  .cm-site-map-search .cm-site-search-field input { flex: 0 0 0; width: 0; opacity: 0; }
  .cm-site-map-search:is(:focus-within, :has(input:not(:placeholder-shown))) { justify-self: center; width: min(30rem, 100% - 2 * var(--cm-site-map-toggle-clearance)); }
  .cm-site-map-search:is(:focus-within, :has(input:not(:placeholder-shown))) .cm-site-search-field { justify-content: flex-start; border-color: var(--pmx-color-border-strong); cursor: auto; }
  .cm-site-map-search:is(:focus-within, :has(input:not(:placeholder-shown))) .cm-site-search-field input { flex: 1; width: auto; opacity: 1; }
}
/* Too narrow to share a row with the controls: search takes its own row below them. */
@media (max-width: 40rem) {
  .cm-site-map-content { padding-top: max(calc(var(--cm-site-map-toggle-bottom) + var(--cm-space-2)), env(safe-area-inset-top)); }
  .cm-site-map-search { width: 100%; }
}
/* A portrait phone window turns the map a quarter turn clockwise, so order is on top and relational on the right. */
@media (orientation: portrait) and (max-width: 48rem) {
  /* Upright, relational is the right side and conceptual the left: both icons sit below the map. */
  .cm-site-map-stage {
    --cm-site-map-ratio: calc(900 / 1320);
    --cm-site-map-available-width: 100cqw;
    --cm-site-map-available-height: calc(100cqh - var(--cm-site-map-scheme-room));
    flex-direction: column;
  }
  .cm-site-map-stage::before { display: none; }
  .cm-site-map-scheme { flex-direction: row; width: var(--cm-site-map-board-width); height: auto; }
  .cm-site-map-night { order: -1; }
}
/* The board: the map's drawing, its two worlds and their lettering. On a page it
   keeps a map's shape; in a portrait phone window it stands upright. */
.cm-map-board { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin-block: var(--cm-space-5); }
.cm-map-drawing { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--pmx-color-border-strong); opacity: var(--cm-map-drawing-opacity); pointer-events: none; }
.cm-map-drawing * { fill: none; stroke: currentColor; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cm-map-drawing .dot { fill: currentColor; stroke: none; }
.cm-map-drawing.is-upright { display: none; }

/* Day is the relational palette and night the conceptual one, so the map shades
   the other world: by day the conceptual half takes a graphite wash; by night the
   relational half sinks into shadow. The shade sits over the drawing and under the
   places, inside the drawn border, and fades as the palette changes. */
.cm-map-world { position: absolute; pointer-events: none; opacity: 0; transition: opacity .5s ease; background: var(--cm-map-world-shade); }
.cm-map-world.is-relational { inset: 1.8% .8% 50% .9%; }
.cm-map-world.is-conceptual { inset: 50% .7% 1.9% .9%; opacity: 1; }
html[data-pmx-scheme="dark"] .cm-map-world.is-conceptual { opacity: 0; }
html[data-pmx-scheme="dark"] .cm-map-world.is-relational { opacity: 1; }
@media (prefers-color-scheme: dark) {
  html:not([data-pmx-scheme="light"]) .cm-map-world.is-conceptual { opacity: 0; }
  html:not([data-pmx-scheme="light"]) .cm-map-world.is-relational { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .cm-map-world { transition: none; } }

/* The regions are named along the map's edges, each along the edge of its own
   side, so the names turn with the map. Set small in the label face and barely
   visible, so the places lead. */
.cm-map-region {
  position: absolute; pointer-events: none; white-space: nowrap;
  font: 400 var(--cm-map-region-text)/1 var(--cm-font-label); letter-spacing: var(--cm-tracking-label); text-transform: uppercase;
  color: var(--pmx-color-muted); opacity: var(--cm-map-region-opacity); padding: .1em .35em;
  text-shadow: 0 0 2px var(--pmx-color-bg), 0 0 4px var(--pmx-color-bg), 0 0 7px var(--pmx-color-bg);
}
/* Wide: relational along the top, conceptual along the bottom; order up the left
   side and chaos down the right. */
.cm-map-region:is(.is-relational, .is-conceptual) { left: 50%; translate: -50% 0; }
.cm-map-region.is-relational { top: var(--cm-map-region-inset); }
.cm-map-region.is-conceptual { bottom: var(--cm-map-region-inset); }
.cm-map-region:is(.is-order, .is-chaos) { top: 50%; translate: 0 -50%; writing-mode: vertical-rl; }
.cm-map-region.is-order { left: var(--cm-map-region-inset); rotate: 180deg; }
.cm-map-region.is-chaos { right: var(--cm-map-region-inset); }

/* Places. A place's glyph sits on its point: `--o` and `--r` on the board, `--x`
   and `--y` (percent) over artwork. Every place is one tag: glyph, then name. */
.cm-map-place { position: absolute; width: 0; height: 0; padding: 0; text-decoration: none; color: inherit; left: calc((1 - var(--o)) * 100%); top: calc((1 - var(--r)) * 50%); }
.cm-map-place.is-art { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
.cm-map-place[data-rank="featured"] { --cm-map-glyph: var(--cm-map-featured-glyph); --cm-map-tag-text: var(--cm-map-featured-text); }
.cm-map-label {
  --glyph-x: calc(1px + var(--cm-map-tag-pad-inline) + var(--cm-map-glyph) / 2);
  --tag-half: calc(1px + var(--cm-map-tag-pad-block) + var(--cm-map-glyph) / 2);
  position: absolute; left: 0; top: 0; translate: calc(-1 * var(--glyph-x)) calc(-1 * var(--tag-half));
  display: grid; justify-items: start; gap: var(--cm-map-caption-gap); white-space: nowrap;
  font: 400 var(--cm-map-tag-text)/1 var(--cm-font-label); letter-spacing: var(--cm-tracking-label); text-transform: uppercase;
}
.cm-map-tag {
  display: inline-flex; align-items: center; gap: var(--cm-map-tag-gap);
  padding: var(--cm-map-tag-pad-block) var(--cm-map-tag-pad-inline);
  border: 1px solid var(--pmx-color-border); border-radius: var(--cm-button-radius);
  background: var(--pmx-color-bg); color: var(--pmx-color-fg);
  transition: color .15s, border-color .15s, background-color .15s;
}
.cm-map-tag .cm-glyph { --cm-glyph-size: var(--cm-map-glyph); }
.cm-map-tag strong { font: inherit; }
.cm-map-place[data-rank="featured"] .cm-map-tag { border-color: var(--pmx-color-border-strong); }
.cm-map-label small {
  font-size: var(--cm-map-caption-text); line-height: 1.3; color: var(--pmx-color-muted);
  padding-inline: var(--cm-map-tag-pad-inline); text-shadow: 0 0 2px var(--pmx-color-bg), 0 0 4px var(--pmx-color-bg);
}
/* To clear a neighbour, a tag can sit to the left of its point instead. */
.cm-map-place[data-side="left"] .cm-map-label { translate: calc(-100% - var(--cm-map-label-gap)) calc(-1 * var(--tag-half)); justify-items: end; }
a.cm-map-place:hover .cm-map-tag { border-color: var(--pmx-color-border-strong); background: color-mix(in srgb, var(--pmx-color-bg) 88%, var(--pmx-color-fg)); }
.cm-map-place:is([data-state="forming"], [data-state="resting"], [data-state="closed"]) .cm-map-tag strong { color: var(--pmx-color-muted); }
/* A place you can't go to yet is not a link, and its tag is drawn in dots and
   faded: a place while it forms, Contact while it's closed. */
.cm-map-place:is([data-state="forming"], [data-state="closed"]) { opacity: var(--cm-map-unopened-opacity); }
.cm-map-place:is([data-state="forming"], [data-state="closed"]) .cm-map-tag { border-style: dotted; border-color: var(--pmx-color-border-strong); }
.cm-map-place[data-state="forming"][aria-current] { opacity: 1; }
:is(span, button).cm-map-place { cursor: default; }
/* Here: the current place's tag takes the accent colour, glyph, name and edge. */
.cm-map-place[aria-current] .cm-map-tag { color: var(--pmx-color-accent); border-color: var(--pmx-color-accent); }
.cm-map-place[aria-current] .cm-map-tag strong { color: inherit; }
.cm-map-place:focus-visible { outline: none; }
.cm-map-place:focus-visible .cm-map-tag { outline: 2px solid var(--pmx-color-accent); outline-offset: 2px; }

/* A portrait phone window turns the board a quarter turn clockwise: order on top,
   relational on the right. Artwork never turns. */
@media (orientation: portrait) and (max-width: 48rem) {
  .cm-map-board { aspect-ratio: 9 / 13; }
  .cm-map-board .cm-map-drawing.is-wide { display: none; }
  .cm-map-board .cm-map-drawing.is-upright { display: block; }
  .cm-map-world.is-relational { inset: 1.2% 1.6% 1% 50%; }
  .cm-map-world.is-conceptual { inset: 1.2% 50% 1% 1.6%; }
  .cm-map-board .cm-map-place { left: calc((1 + var(--r)) * 50%); top: calc((1 - var(--o)) * 100%); }
  .cm-map-board .cm-map-place[data-side="left"] .cm-map-label { translate: calc(-1 * var(--glyph-x)) calc(-1 * var(--tag-half)); justify-items: start; }
  .cm-map-board .cm-map-place[data-upright="left"] .cm-map-label { translate: calc(-100% - var(--cm-map-label-gap)) calc(-1 * var(--tag-half)); justify-items: end; }
  .cm-map-region:is(.is-order, .is-chaos) { top: auto; bottom: auto; left: 50%; right: auto; translate: -50% 0; writing-mode: horizontal-tb; rotate: none; }
  .cm-map-region.is-order { top: var(--cm-map-region-inset); }
  .cm-map-region.is-chaos { bottom: var(--cm-map-region-inset); }
  .cm-map-region:is(.is-relational, .is-conceptual) { top: 50%; bottom: auto; left: auto; right: auto; translate: 0 -50%; writing-mode: vertical-rl; }
  .cm-map-region.is-conceptual { left: var(--cm-map-region-inset); rotate: 180deg; }
  .cm-map-region.is-relational { right: var(--cm-map-region-inset); }
}

/* Set by the board's script: a tag that would run past the right edge reads left. */
:is(.cm-map-board, .cm-art-map) .cm-map-place[data-flip="left"] .cm-map-label { translate: calc(-100% - var(--cm-map-label-gap)) calc(-1 * var(--tag-half)); justify-items: end; }
/* A map on a page holds more places than the Sitemap, so on a phone its tags are smaller. */
@media (max-width: 40rem) {
  .pmx-document :is(.cm-map-board, .cm-art-map) {
    --cm-map-tag-text: .7rem; --cm-map-glyph: 1rem; --cm-map-tag-gap: .35rem;
    --cm-map-tag-pad-block: .2rem; --cm-map-tag-pad-inline: .4rem;
    --cm-map-featured-text: .8rem; --cm-map-featured-glyph: 1.25rem;
  }
}
}