/* Shared layer for blog posts, loaded after each post's own <style>.
   It brings the posts onto the site's system: warm grey paper, black ink, riso pink for data and the name band,
   Le Murmure for the name, headlines and section names, Compagnon for reading, charts and labels.
   Party colours and other data colours set by the posts are left as they are. */

@font-face { font-family: 'Le Murmure'; src: url(fonts/LeMurmure-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Compagnon'; src: url(fonts/Compagnon-Light.woff2) format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Compagnon'; src: url(fonts/Compagnon-Roman.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Compagnon'; src: url(fonts/Compagnon-Italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Compagnon'; src: url(fonts/Compagnon-Medium.woff2) format('woff2'); font-weight: 500 700; font-display: swap; }

:root {
  --surface: #F6F5F1; --surface-map: #ECEAE5; --line: #D2CFC7;
  --text: #161616; --text-muted: #5F5D58; --accent: #F2368E; --accent-ink: #B8155A;
  --field: #F2368E; --field-ink: #FFFFFF;
  --ocean: #ECEAE5; --land: #F8F7F4; --border: #C5C1B8; --quiet: #CFCBC2;
  --r1: #FAD0E3; --r2: #F59BC5; --r3: #EF5BA2; --r4: #D1207A; --r5: #7D0A47;
  --t-sb: #161616; --t-ns: #F2368E; --m-lin: #F2368E;
  --display: 'Le Murmure', 'Arial Narrow', sans-serif;
  --serif: 'Compagnon', 'Courier Prime', ui-monospace, monospace;
  --font-fallback: var(--serif);
  --font-sans: var(--serif); --font-label: var(--serif); --font-note: var(--serif);
  --font-display: var(--display); --font-head: var(--display);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #161518; --surface-map: #201E23; --line: #2D2B30;
    --text: #EFEEEA; --text-muted: #A8A5A0; --accent: #E0679F; --accent-ink: #EE93BD; --field: #C93C7C; --field-ink: #FFFFFF;
    --ocean: #1B1A1E; --land: #26242A; --border: #45424A; --quiet: #36333A;
    --r1: #3F1A2C; --r2: #6E2547; --r3: #A93A6E; --r4: #DA6A9E; --r5: #F4BCD6;
    --t-sb: #EFEEEA; --t-ns: #E0679F; --m-lin: #E0679F;
  }
}
:root[data-theme="dark"] {
  --surface: #161518; --surface-map: #201E23; --line: #2D2B30;
  --text: #EFEEEA; --text-muted: #A8A5A0; --accent: #E0679F; --accent-ink: #EE93BD; --field: #C93C7C; --field-ink: #FFFFFF;
  --ocean: #1B1A1E; --land: #26242A; --border: #45424A; --quiet: #36333A;
  --r1: #3F1A2C; --r2: #6E2547; --r3: #A93A6E; --r4: #DA6A9E; --r5: #F4BCD6;
  --t-sb: #EFEEEA; --t-ns: #E0679F; --m-lin: #E0679F;
}

body { font-size: 15px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* site bar: the same name and navigation as the homepage */
.site-bar { background: var(--field); color: var(--field-ink); padding: 22px clamp(16px, 4vw, 56px) 18px; border-bottom: 0; align-items: baseline; }
.site-bar a, .site-bar button, .site-bar a:hover, .site-bar button:hover { color: var(--field-ink) !important; }
.site-bar :focus-visible { outline-color: var(--field-ink); }
.site-bar .name { font: 400 40px/.85 var(--display); font-feature-settings: 'ss07'; }
.site-bar a:not(.name), .site-bar button { font: 400 15px/1.3 var(--serif); letter-spacing: 0; text-transform: none; }
.site-bar nav { gap: 22px; }
.site-bar button { padding-left: 22px; border-left: 1px solid currentColor; }

/* section tabs */
.tabs a { font: 400 14px/1.3 var(--serif); letter-spacing: 0; text-transform: none; }
.tabs a[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); opacity: 1; -webkit-mask: none; mask: none; }

/* reading */
.page h1 { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 11vw, 132px); line-height: .84; margin-top: 22px; overflow-wrap: anywhere; letter-spacing: 0; font-feature-settings: 'ss07'; }
.page .sub { font-family: var(--serif); font-weight: 300; font-size: 20px; line-height: 1.5; margin-top: 22px; }
.page .addr { font-size: 14px; }
p, li { font-family: var(--serif); font-size: 16px; line-height: 1.7; }
.plate p, .plate li, .note, .label, .key, .legend, .rows, .tbl, .phases, .dlab { font-family: var(--font-sans); }
.note { font-size: 13px; line-height: 1.55; }
h3 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 4.4vw, 48px); line-height: .9; letter-spacing: 0; }

/* section heads: sentence case serif, a plain rule instead of the hand-drawn line */
.shead h2, .about summary { font: 400 30px/1 var(--display); letter-spacing: 0; text-transform: none; }
.shead small { font-size: 13px; }
.shead::after { height: 1px; background: var(--line); opacity: 1; -webkit-mask: none; mask: none; }

/* plates: no paper texture, no wobble on swatches and bars */
.plate { border-radius: 3px; }
.sw, .bar i, .sq { filter: none !important; }
.seg button[aria-pressed="true"] { background: var(--text); border-color: var(--text); }

/* Compagnon runs wider than the posts' original face: let dense rows and phase strips breathe on phones */
.row { grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto; }
.row .v { font-size: 13px; }
.phases div { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto; gap: 10px; }
  .row .k, .row .v { font-size: 12px; }
}