/* ============================================================
   Poster base — palettes, type, primitives
   F2F2ED background fixed across all palettes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&family=Newsreader:ital,wght@0,400;0,600;1,400&display=swap');

/* ---- Palette tokens ----
   Each palette overrides these scoped variables.
   --p-bg is FIXED at #F2F2ED everywhere (per user request).
   --p-cream is always #E3E1D0 (the lighter pigment).
   --p-1 / --p-2 / --p-3 are the three middle accents (light → dark).
   --p-ink is the darkest pigment (used for body type).
*/

.palette-1 {
  --p-bg:    #F2F2ED;
  --p-cream: #E3E1D0;
  --p-1:     #92AD94;
  --p-2:     #214F4B;
  --p-3:     #796465;
  --p-ink:   #1E000E;
  --p-name:  "Sage & Teal";
}
.palette-2 {
  --p-bg:    #F2F2ED;
  --p-cream: #E3E1D0;
  --p-1:     #006C67;
  --p-2:     #003844;
  --p-3:     #796465;
  --p-ink:   #1E000E;
  --p-name:  "Deep Sea";
}
.palette-3 {
  --p-bg:    #F2F2ED;
  --p-cream: #E3E1D0;
  --p-1:     #C78283;
  --p-2:     #4D9078;
  --p-3:     #42213D;
  --p-ink:   #2D0320;
  --p-name:  "Wine & Sage";
}
.palette-4 {
  --p-bg:    #F2F2ED;
  --p-cream: #E3E1D0;
  --p-1:     #8A89C0;
  --p-2:     #4D9078;
  --p-3:     #7C6354;
  --p-ink:   #2D0320;
  --p-name:  "Lavender & Sage";
}
.palette-5 {
  --p-bg:    #F2F2ED;
  --p-cream: #E3E1D0;
  --p-1:     #4D9078;
  --p-2:     #A33B20;
  --p-3:     #A47963;
  --p-ink:   #172121;
  --p-name:  "Rust & Sage";
}
.palette-6 {
  --p-bg:    #F2F2ED;
  --p-cream: #E3E1D0;
  --p-1:     #517664;
  --p-2:     #A33B20;
  --p-3:     #A47963;
  --p-ink:   #172121;
  --p-name:  "Rust & Forest";
}

/* ---- Type families ----
   Restrained academic vibe: Newsreader serif for editorial headings,
   Space Grotesk for body + meta, JetBrains Mono for metadata. */
:root {
  --pf-serif:  'Newsreader', 'Charter', 'Georgia', serif;
  --pf-ital:   'DM Serif Display', 'Georgia', serif;
  --pf-sans:   'Space Grotesk', 'Helvetica Neue', sans-serif;
  --pf-mono:   'JetBrains Mono', 'SF Mono', monospace;
}

/* ---- Density scale ---- */
.density-compact { --d: 0.78; }
.density-normal  { --d: 1; }
.density-loose   { --d: 1.22; }

/* ============================================================
   Poster shell — A0 portrait at 1mm = 1px scale (841×1189).
   Flex column: header / body / footer never push each other off.
   ============================================================ */
.poster {
  width: 841px;
  height: 1189px;
  background: var(--p-bg);
  color: var(--p-ink);
  font-family: var(--pf-sans);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.poster > header,
.poster > footer { flex-shrink: 0; }
.poster > main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Reset inside poster scope */
.poster *,
.poster *::before,
.poster *::after { box-sizing: border-box; }
.poster p, .poster h1, .poster h2, .poster h3, .poster h4, .poster ul, .poster ol {
  margin: 0;
}
.poster ul { padding-left: 1.1em; }
.poster ul li + li { margin-top: calc(4px * var(--d, 1)); }

/* ---- Type primitives at poster scale ----
   Sized for A0 print viewed from ~1m. Body baseline ~14px = ~24pt at full size.
*/
.poster .t-meta {
  font-family: var(--pf-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.poster .t-conf {
  font-family: var(--pf-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
}
.poster .t-title {
  font-family: var(--pf-serif);
  font-weight: 600;
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.poster .t-title-it {
  font-family: var(--pf-ital);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.poster .t-authors {
  font-family: var(--pf-sans);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.poster .t-affil {
  font-family: var(--pf-sans);
  font-size: 9.5px;
  line-height: 1.45;
  font-weight: 400;
  color: color-mix(in oklab, var(--p-ink) 78%, var(--p-bg));
}
.poster .t-section {
  font-family: var(--pf-sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
}
.poster .t-section-num {
  font-family: var(--pf-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.poster .t-body {
  font-family: var(--pf-sans);
  font-size: 10.5px;
  line-height: 1.38;
  font-weight: 400;
  text-wrap: pretty;
  hyphens: auto;
}
.poster .t-body-sm {
  font-family: var(--pf-sans);
  font-size: 9px;
  line-height: 1.38;
  font-weight: 400;
}
.poster .t-pull {
  font-family: var(--pf-ital);
  font-style: italic;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.poster .t-stat {
  font-family: var(--pf-serif);
  font-size: 48px;
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.025em;
}
.poster .t-stat-label {
  font-family: var(--pf-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ---- Rules ---- */
.poster .rule {
  border: 0;
  border-top: 1px solid var(--p-ink);
  margin: 0;
}
.poster .rule-thick {
  border: 0;
  border-top: 3px solid var(--p-ink);
  margin: 0;
}
.poster .rule-accent {
  border: 0;
  border-top: 3px solid var(--p-2);
  margin: 0;
}

/* ---- Figure placeholder ---- */
.poster .figbox {
  position: relative;
  background: var(--p-cream);
  border: 1px solid var(--p-ink);
  display: grid;
  place-items: center;
  font-family: var(--pf-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--p-ink) 60%, var(--p-bg));
  overflow: hidden;
}
.poster .figbox::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom right, transparent 49.7%, color-mix(in oklab, var(--p-ink) 18%, transparent) 49.85%, color-mix(in oklab, var(--p-ink) 18%, transparent) 50.15%, transparent 50.3%),
    linear-gradient(to top right,    transparent 49.7%, color-mix(in oklab, var(--p-ink) 18%, transparent) 49.85%, color-mix(in oklab, var(--p-ink) 18%, transparent) 50.15%, transparent 50.3%);
}
.poster .figbox > span { position: relative; z-index: 1; padding: 4px 8px; background: var(--p-cream); }
.poster .figcap {
  font-family: var(--pf-sans);
  font-size: 7.5px;
  line-height: 1.32;
  margin-top: 3px;
  color: color-mix(in oklab, var(--p-ink) 75%, var(--p-bg));
}
.poster .figcap b { font-weight: 600; color: var(--p-ink); }

/* ---- QR placeholder ---- */
.poster .qr {
  width: 84px;
  height: 84px;
  background:
    conic-gradient(from 0deg at 50% 50%, var(--p-ink) 0 25%, transparent 0 50%, var(--p-ink) 0 75%, transparent 0) 0 0/14px 14px,
    var(--p-cream);
  border: 1.5px solid var(--p-ink);
  position: relative;
}
.poster .qr::after {
  content: "";
  position: absolute;
  inset: 30% 30% 30% 30%;
  background: var(--p-cream);
  border: 1.5px solid var(--p-ink);
}

/* ---- Pill ---- */
.poster .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 18px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--p-ink);
  font-family: var(--pf-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  background: transparent;
  color: var(--p-ink);
  white-space: nowrap;
}
.poster .pill.solid {
  background: var(--p-ink);
  color: var(--p-bg);
}
.poster .pill.accent {
  background: var(--p-2);
  color: var(--p-bg);
  border-color: var(--p-2);
}

/* ---- Star divider ---- */
.poster .star-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--p-ink);
}
.poster .star-rule::before,
.poster .star-rule::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 1px solid var(--p-ink);
}
.poster .star-rule > span {
  font-family: var(--pf-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---- Tiny table ---- */
.poster table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pf-sans);
  font-size: 8.5px;
  line-height: 1.15;
}
.poster table.tbl th,
.poster table.tbl td {
  text-align: left;
  padding: 0.5px 5px;
  border-bottom: 0.5px solid color-mix(in oklab, var(--p-ink) 35%, var(--p-bg));
  vertical-align: top;
}
.poster table.tbl th {
  font-family: var(--pf-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--p-ink);
  border-top: 1px solid var(--p-ink);
  color: var(--p-ink);
}
.poster table.tbl td.num {
  font-family: var(--pf-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Refs ---- */
.poster .refs {
  columns: 2;
  column-gap: 20px;
  font-family: var(--pf-sans);
  font-size: 8.5px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--p-ink) 80%, var(--p-bg));
}
.poster .refs ol { padding-left: 1.2em; margin: 0; }
.poster .refs li { margin-bottom: 3px; break-inside: avoid; }
.poster .refs em { font-style: italic; }