npm - @research-copilot/plugin - Versions diffs - 1.1.17 → 1.1.18 - Mend

@research-copilot/plugin 1.1.17 → 1.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (799) hide show

package/dist/skills/paper-poster-html/templates/portrait_2col.html ADDED Viewed

@@ -0,0 +1,947 @@
+<!DOCTYPE html>
+<!--
+  ============================================================
+  TEMPLATE: portrait_2col  (ARIS fork of posterly portrait_2col_neutral)
+  Adapted from posterly (MIT, © 2026 Ruishuo Chen) — see LICENSES/ & NOTICE.md;
+  ARIS modifications: flat de-gradient, --fs token scale, zero-inline-style
+  utilities, data-source/data-color-exempt contracts.
+  CANVAS:   24in × 36in PORTRAIT (ICLR / CVPR / many workshops default) DEFAULT.
+            CANVAS RETARGETING: change BOTH the @page `size` (one place, in the
+            CANVAS block below) AND the .poster `width`/`height` (one place, in
+            the .poster rule). Keep them in sync.
+            NOTE — ICLR workshops commonly mandate a 61×91 cm PORTRAIT board
+            (A0-ish portrait). To retarget to that:
+              @page { size: 610mm 910mm; }    /* or 61cm 91cm */
+              .poster { width: calc(610 * var(--u)); height: calc(910 * var(--u)); }
+            (1 print --u = 1mm, so 610/910 u == 610/910 mm == 61×91 cm — almost
+            identical to the shipped 24×36in default, which is why portrait is a
+            good fit for ICLR-workshop boards.)
+  LAYOUT:   header → body 2 columns → footer
+            (NO framework banner, NO takeaways strip — vertical space is precious)
+  USE WHEN: venue mandates portrait orientation, sub-A0/A1 size;
+            reader scans top-to-bottom in column 1, then jumps to column 2.
+  HOW TO USE:
+    1. Copy this file to your working directory as `poster.html`.
+    2. Edit the DESIGN TOKENS in `:root` (or swap a tokens/*.json palette) —
+       the token block is the ONLY place color/font-size literals may live.
+    3. Replace TODO content placeholders (search for "TODO").
+    4. Run `python3 scripts/poster_check.py measure poster.html` to align columns.
+    5. Run `python3 scripts/render_preview.py poster.html` to produce the PDF.
+  STYLE CONTRACT (ARIS source gate, scripts/style_check.py):
+    - NO inline `style=` attributes anywhere in the markup. Use the utility
+      classes (.fs-N, .mt-N, .mb-N, .w-NN, .text-secondary, .nowrap,
+      .text-center) defined in the UTILITIES block below.
+      Sole exceptions: the internal SVG of a `data-color-exempt="logo"` element,
+      and a `style="width: NN%"` on a `data-source="paper"` <img> (AR width tweak).
+    - All font-size values reference a `--fs-1..9` token (or a COMPONENTS.md
+      predefined `calc(var(--fs-N) * k)` variant such as `.eqn--large`).
+    - No `linear-gradient`; the only gradient allowed is the .poster radial
+      tint (every color stop alpha ≤ 0.06).
+  MEASURE ROLES: every layout-critical element carries `data-measure-role`.
+  Generic measurement scripts depend on these — do not remove.
+  ============================================================
+-->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>POSTER TITLE — Venue Year</title>
+<!-- MathJax v3 for inline equations. CDN by default; to go offline,
+     download a MathJax v3 release into assets/mathjax/ and change the <script>
+     `src` below to "assets/mathjax/es5/tex-svg.js". -->
+<script>
+  window.MathJax = {
+    tex: {
+      inlineMath: [['$', '$'], ['\\(', '\\)']],
+      displayMath: [['$$', '$$'], ['\\[', '\\]']],
+      packages: {'[+]': ['ams']}
+    },
+    svg: { fontCache: 'global' }
+  };
+</script>
+<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
+<style>
+  /* =========================================================
+     CANVAS — 24" × 36" PORTRAIT
+     24in × 25.4 mm/in = 609.6 mm ≈ 610 u (width)
+     36in × 25.4 mm/in = 914.4 mm ≈ 914 u (height)
+     RETARGET: change @page size here AND .poster width/height below.
+     ICLR workshop = 610mm 910mm (61×91 cm) portrait — see header note.
+     ========================================================= */
+  @page { size: 24in 36in; margin: 0; }
+  :root {
+    /* ===== DESIGN TOKENS ===== */
+    /* The ONLY place color / font-size literals are allowed (style_check
+       rule 1 + 8 locate this block by the comment pair). Override token
+       VALUES here only — never restyle component rules with new literals.
+       To rebrand, edit these or load a tokens/*.json palette. */
+    /* Primary accent (header underline, card-highlight bar, section nums, .keyword) */
+    --accent:        #2D5F8B;
+    --accent-deep:   #1F4566;
+    --accent-light:  #E8F1F8;
+    --accent-soft:   #D7E5F0;
+    /* Secondary accent for "ours / best" emphasis (table .ours row, "★" callouts) */
+    --gold:          #C9A24A;
+    --gold-soft:     #FFF7E0;
+    /* Text */
+    --text-primary:   #1A1A1A;
+    --text-secondary: #555555;
+    --text-muted:     #888888;
+    /* Backgrounds */
+    --bg-page:        #F6F2F0;
+    --bg-card:        #FFFFFF;
+    --bg-card-tint:   #FAFAFB;
+    --bg-emphasis:    var(--accent-light);
+    /* Borders */
+    --border-soft:    #D8D8D8;
+    --border-strong:  var(--accent);
+    /* Screen-preview backdrop only — @media print overrides body to white.
+       Tokenized so no color literal escapes the token block (style_check rule 1). */
+    --bg-screen:      #2b2b2b;
+    /* Base unit. Print: 1mm; screen preview: 1.6px (~3.78px = 1mm at 96dpi). */
+    --u: 1.6px;
+    /* Font-size scale (9 steps). Every font-size in this template references
+       one of these. Off-scale px drift is forbidden (style_check rule 8);
+       `calc(var(--fs-N) * k)` is allowed ONLY for COMPONENTS.md variants.
+       The posterly portrait original used a few off-scale sizes (28u title,
+       17u section title, 14u subtitle/eqn/callout); they are snapped to the
+       nearest scale token here so the template stays at exactly 9 steps. */
+    --fs-1: calc(9 * var(--u));    /* micro label                */
+    --fs-2: calc(10 * var(--u));   /* small caption              */
+    --fs-3: calc(11 * var(--u));   /* caption / table            */
+    --fs-4: calc(12 * var(--u));   /* body text                  */
+    --fs-5: calc(13 * var(--u));   /* equation / emphasis        */
+    --fs-6: calc(15 * var(--u));   /* subtitle                   */
+    --fs-7: calc(16 * var(--u));   /* section title              */
+    --fs-8: calc(22 * var(--u));   /* banner number              */
+    --fs-9: calc(32 * var(--u));   /* main title                 */
+    /* Fonts. Override at :root if your venue mandates a specific family.
+       Whitelist (style_check rule 7): serif body, sans heads, mono code. */
+    --font-serif: "Charter", "Source Serif Pro", "Georgia", serif;
+    --font-sans:  "Inter", "Helvetica Neue", sans-serif;
+    /* Shadows & watermark ink — tokenized so rules 1/3 stay literal-free
+       (the faint radial page tint is the ONE allowed literal outside this
+       block; rule 5 validates it). */
+    --shadow-screen: 0 0 60px rgba(0, 0, 0, 0.5);
+    --shadow-card: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(45, 95, 139, 0.05);
+    --ornament-ink: rgba(45, 95, 139, 0.06);
+    /* ===== END DESIGN TOKENS ===== */
+  }
+  /* =========================================================
+     RESET + BASE
+     ========================================================= */
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body {
+    background: var(--bg-screen);
+    font-family: var(--font-serif);
+    color: var(--text-primary);
+    -webkit-font-smoothing: antialiased;
+  }
+  /* Poster container — exact print dimensions; data-measure-role="poster" so
+     poster_check.py can verify the canvas size.
+     Width  : 610u ≈ 24in.
+     Height : 914u ≈ 36in.
+     RETARGET: width/height must track @page size (see CANVAS block). */
+  .poster {
+    width: calc(610 * var(--u));
+    height: calc(914 * var(--u));
+    background: var(--bg-page);
+    /* The only gradient allowed by the style gate: a low-alpha radial tint
+       (every color stop alpha ≤ 0.06). NOT a linear-gradient. */
+    background-image:
+      radial-gradient(ellipse at top left,    rgba(45, 95, 139, 0.06), transparent 40%),
+      radial-gradient(ellipse at bottom right, rgba(201, 162, 74, 0.05), transparent 50%);
+    margin: 20px auto;
+    padding: calc(10 * var(--u)) calc(12 * var(--u));
+    display: grid;
+    /* header | body | footer — no banner row, no takeaways row */
+    grid-template-rows: auto 1fr auto;
+    gap: calc(6 * var(--u));
+    box-shadow: var(--shadow-screen);
+    position: relative;
+    overflow: hidden;
+  }
+  /* Decorative top bar — flat accent (de-gradiented from posterly original). */
+  .poster::before {
+    content: "";
+    position: absolute; top: 0; left: 0; right: 0;
+    height: calc(8 * var(--u));
+    background: var(--accent);
+  }
+  /* =========================================================
+     HEADER — same 3-col structure as landscape sibling
+     (venue badge | title-block | logo+QR), but compressed vertically
+     by ~1u of padding since portrait is narrower.
+     ========================================================= */
+  .header {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: calc(14 * var(--u));
+    padding: calc(1 * var(--u)) calc(3 * var(--u)) calc(4 * var(--u));
+    border-bottom: calc(2 * var(--u)) solid var(--accent);
+  }
+  .venue-badge {
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    min-width: calc(80 * var(--u));
+    text-align: center;
+    border-right: calc(1 * var(--u)) solid var(--border-soft);
+    padding-right: calc(10 * var(--u));
+  }
+  /* Portrait venue mark: snapped 28u -> --fs-9 (32u). */
+  .venue-badge .vb-venue {
+    font-family: var(--font-sans);
+    font-weight: 800;
+    font-size: var(--fs-9);
+    color: var(--accent-deep);
+    line-height: 1;
+    letter-spacing: -0.5px;
+  }
+  .venue-badge .vb-year {
+    font-family: var(--font-sans);
+    font-size: var(--fs-4);
+    color: var(--text-secondary);
+    margin-top: calc(3 * var(--u));
+    letter-spacing: 1.2px;
+  }
+  .venue-badge .vb-tag {
+    font-family: var(--font-sans);
+    font-size: var(--fs-2);
+    color: var(--accent);
+    font-weight: 700;
+    margin-top: calc(2 * var(--u));
+    letter-spacing: 1.2px;
+  }
+  .title-block { text-align: center; min-width: 0; }
+  /* Portrait title snapped 28u -> --fs-9 (32u). The reader is closer and the
+     canvas is narrower, so the type still feels appropriately scaled. */
+  .title {
+    font-family: var(--font-sans);
+    font-weight: 800;
+    font-size: var(--fs-9);
+    line-height: 1.05;
+    color: var(--accent-deep);
+    letter-spacing: -0.5px;
+  }
+  .title .accent { color: var(--gold); }
+  /* subtitle snapped 14u -> --fs-6 (15u). */
+  .subtitle {
+    font-family: var(--font-sans);
+    font-weight: 500;
+    font-size: var(--fs-6);
+    color: var(--text-secondary);
+    margin-top: calc(2 * var(--u));
+    font-style: italic;
+  }
+  .authors-line {
+    font-family: var(--font-sans);
+    font-size: var(--fs-5);
+    color: var(--accent);
+    font-weight: 600;
+    margin-top: calc(3 * var(--u));
+  }
+  .authors-line .author { margin: 0 calc(4 * var(--u)); }
+  .authors-line sup { font-size: 0.7em; color: var(--accent); }
+  .authors-line .aff {
+    color: var(--text-secondary);
+    font-weight: 400;
+    display: block;
+    margin-top: calc(2 * var(--u));
+    font-size: var(--fs-3);
+  }
+  .right-block {
+    display: flex; align-items: center;
+    gap: calc(8 * var(--u));
+  }
+  .qr-block { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); }
+  .qr-block img {
+    width: calc(75 * var(--u));
+    height: calc(75 * var(--u));
+    border: calc(2 * var(--u)) solid var(--accent);
+    border-radius: calc(4 * var(--u));
+    background: white;
+    padding: calc(2 * var(--u));
+  }
+  .qr-label {
+    font-family: var(--font-sans);
+    font-size: var(--fs-2);
+    color: var(--accent);
+    font-weight: 600;
+  }
+  /* Optional logo slot — drop your lab logo here. Keep rendered height ~75u to
+     match QR; otherwise the header grows and steals vertical space.
+     LOGO CONTRACT: a logo whose own SVG/PNG carries brand colors must be
+     marked `data-color-exempt="logo"` so style_check exempts it from the
+     palette / inline-style gates, e.g.:
+       <div class="logo-slot"><img src="assets/logos/lab.png" alt="Lab"
+            data-color-exempt="logo"></div>
+     Inline-SVG logos carry the attribute on the <svg> element itself. */
+  .logo-slot img { height: calc(75 * var(--u)); width: auto; display: block; }
+  /* logo-row: institution logos in the header right block (REAL logos the
+     user provided — never fabricate a seal). Each img MUST carry
+     data-color-exempt="logo"; height pairs with the QR. */
+  .logo-row { display: flex; align-items: center; gap: calc(4 * var(--u)); }
+  .logo-row img { height: calc(58 * var(--u)); width: auto; display: block; }
+  .logo-row .lr-item {
+    display: flex; flex-direction: column; align-items: center;
+    gap: calc(2 * var(--u));
+    background: var(--bg-card);
+    border: 1px solid var(--border-soft);
+    border-radius: calc(3 * var(--u));
+    padding: calc(3 * var(--u)) calc(5 * var(--u));
+  }
+  .logo-row .lr-item img { height: calc(48 * var(--u)); }
+  .logo-row .lr-label {
+    font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-1);
+    color: var(--text-secondary); text-align: center; line-height: 1.15;
+  }
+  /* venue badge may carry the official venue logo above its text line */
+  .venue-badge img { height: calc(46 * var(--u)); width: auto; display: block; margin: 0 auto calc(2 * var(--u)); }
+  .venue-badge .vb-title { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-5); color: var(--accent-deep); letter-spacing: 0.5px; }
+  /* =========================================================
+     BODY: 2 columns (portrait posters live and die on column balance)
+     CRITICAL: Last-card bottoms of both columns must align —
+     run poster_check.py measure poster.html — spread < 5 px required
+     (< 3 px ideal). Gap to footer in 30–50 px.
+     ========================================================= */
+  .body-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: calc(12 * var(--u));
+    /* No overflow:hidden here — it would clip card shadows (pitfall #6).
+       .poster already clips at the page boundary; min-height:0 is the
+       grid-blowout guard. */
+    min-height: 0;
+  }
+  .column {
+    display: flex; flex-direction: column;
+    gap: calc(7 * var(--u));
+    min-height: 0;
+    height: 100%;
+    padding-bottom: calc(4 * var(--u));   /* shadow breathing room above footer */
+  }
+  /* =========================================================
+     CARDS — identical tokens to sibling
+     ========================================================= */
+  .card {
+    background: var(--bg-card);
+    border-radius: calc(5 * var(--u));
+    padding: calc(5 * var(--u)) calc(10 * var(--u));
+    border: calc(1 * var(--u)) solid var(--border-soft);
+    box-shadow: var(--shadow-card);
+    position: relative;
+  }
+  .card.tinted    { background: var(--bg-card-tint); }
+  /* .highlight de-gradiented: flat emphasis tint instead of a linear-gradient. */
+  .card.highlight {
+    border-left: calc(6 * var(--u)) solid var(--accent);
+    background: var(--bg-emphasis);
+  }
+  /* section-title snapped 17u -> --fs-7 (16u). */
+  .section-title {
+    font-family: var(--font-sans);
+    font-weight: 700;
+    font-size: var(--fs-7);
+    color: var(--accent-deep);
+    margin-bottom: calc(3 * var(--u));
+    display: flex; align-items: center;
+    gap: calc(5 * var(--u));
+    flex-wrap: wrap;
+  }
+  .section-title .num {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: calc(24 * var(--u)); height: calc(24 * var(--u));
+    background: var(--accent); color: white;
+    border-radius: 50%;
+    font-size: var(--fs-6); font-weight: 700;
+    flex-shrink: 0;
+  }
+  /* Inline "★ key/headline" tag inside a section title (replaces inline styles). */
+  .section-title .tag-key {
+    color: var(--gold);
+    font-size: var(--fs-4);
+  }
+  /* Body text — snapped 13u -> --fs-5. The 2-column portrait gives each column
+     enough width to carry a meatier line height comfortably. */
+  .body-text, .card p, .card li {
+    font-family: var(--font-serif);
+    font-size: var(--fs-5);
+    line-height: 1.35;
+    color: var(--text-primary);
+  }
+  .card ul, .card ol { padding-left: calc(20 * var(--u)); }
+  .card li { margin-bottom: calc(2 * var(--u)); }
+  .keyword       { color: var(--accent); font-weight: 700; }
+  .keyword-gold  { color: var(--gold);   font-weight: 700; }
+  .highlight-text {
+    background: var(--bg-emphasis);
+    padding: 0 calc(3 * var(--u));
+    border-radius: calc(2 * var(--u));
+  }
+  /* Equation block — snapped 14u -> --fs-5 (13u). */
+  .eqn {
+    background: var(--bg-emphasis);
+    border-left: calc(3 * var(--u)) solid var(--accent);
+    padding: calc(4 * var(--u)) calc(10 * var(--u));
+    margin: calc(4 * var(--u)) 0;
+    font-size: var(--fs-5);
+    overflow-x: hidden;
+  }
+  /* COMPONENTS.md predefined variant: a larger equation when a formula is the
+     hero of a card. The `calc(var(--fs-N) * k)` form is allowed ONLY for
+     registered variants like this one (style_check rule 8 / §12.5 nit 1). */
+  .eqn--large { font-size: calc(var(--fs-5) * 1.25); }
+  .eqn .label {
+    display: block;
+    font-family: var(--font-sans);
+    font-size: var(--fs-2);
+    color: var(--accent);
+    font-weight: 600;
+    margin-bottom: calc(2 * var(--u));
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+  /* Callout: solid accent for primary; solid gold for theorems / "★ key" strips
+     (gold .callout de-gradiented to a flat fill). Snapped 13u -> --fs-5. */
+  .callout {
+    background: var(--accent);
+    color: white;
+    padding: calc(5 * var(--u)) calc(10 * var(--u));
+    border-radius: calc(4 * var(--u));
+    font-size: var(--fs-5);
+    margin: calc(4 * var(--u)) 0;
+  }
+  .callout strong { color: var(--gold); }
+  .callout.gold {
+    background: var(--gold);
+    color: var(--accent-deep);
+  }
+  .callout.gold strong { color: var(--accent-deep); }
+  /* Figure container */
+  .figure { margin: calc(4 * var(--u)) 0; text-align: center; }
+  .figure img:not([class*="w-"]) { width: 100%; }
+  .figure img {
+    /* FIGURE CONTRACT: figures must come from the paper:
+         <img src="assets/paper_figures/x.png" data-source="paper"
+              data-asset-id="x" class="w-100">
+       data-source/data-asset-id are required by asset_check + exempt the
+       image from style_check's palette gate. Use .w-NN utilities (not an
+       inline width) to size it; the only inline-style exception the gate
+       allows is `style="width: NN%"` on a data-source="paper" <img>. */
+    border-radius: calc(4 * var(--u));
+    border: calc(1 * var(--u)) solid var(--border-soft);
+    background: white;
+  }
+  .figure .caption {
+    font-family: var(--font-sans);
+    font-size: var(--fs-3);
+    color: var(--text-secondary);
+    margin-top: calc(3 * var(--u));
+    line-height: 1.3;
+    text-align: left;
+  }
+  .figure .caption strong { color: var(--accent-deep); }
+  /* Result table with .ours row highlighted gold — snapped 12u -> --fs-4. */
+  .result-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: var(--font-sans);
+    font-size: var(--fs-4);
+    margin-top: calc(3 * var(--u));
+  }
+  .result-table th, .result-table td {
+    padding: calc(2 * var(--u)) calc(4 * var(--u));
+    text-align: center;
+    border-bottom: calc(1 * var(--u)) solid var(--border-soft);
+  }
+  .result-table thead th {
+    background: var(--accent); color: white;
+    font-weight: 600; font-size: var(--fs-3);
+  }
+  .result-table tbody tr.group-row td {
+    background: var(--bg-emphasis); font-weight: 700;
+    text-align: left;
+    color: var(--accent-deep);
+    padding-left: calc(8 * var(--u));
+    border-bottom: calc(2 * var(--u)) solid var(--accent);
+  }
+  .result-table tbody tr.ours td { background: var(--gold-soft); font-weight: 700; }
+  .result-table tbody tr.ours td:first-child { color: var(--accent-deep); }
+  .result-table .method { text-align: left; padding-left: calc(8 * var(--u)); }
+  .result-table .best { color: var(--accent); font-weight: 700; }
+  /* Muted reference row (replaces inline color styles in table cells). */
+  .result-table .ref, .result-table .ref td { color: var(--text-muted); }
+  /* 3-up stat box — kb-num snapped 16u -> --fs-7. */
+  .keybox {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: calc(4 * var(--u));
+    margin: calc(4 * var(--u)) 0 0;
+  }
+  .keybox .kb-item {
+    background: var(--bg-emphasis);
+    border-top: calc(2 * var(--u)) solid var(--accent);
+    padding: calc(3 * var(--u));
+    text-align: center;
+    border-radius: 0 0 calc(3 * var(--u)) calc(3 * var(--u));
+  }
+  .kb-item .kb-num {
+    font-family: var(--font-sans);
+    font-weight: 800;
+    font-size: var(--fs-7);
+    color: var(--accent);
+    line-height: 1;
+  }
+  .kb-item .kb-label {
+    font-family: var(--font-sans);
+    font-size: var(--fs-2);
+    color: var(--text-secondary);
+    margin-top: calc(2 * var(--u));
+    line-height: 1.15;
+  }
+  /* =========================================================
+     FOOTER — same as sibling (snapped 12u -> --fs-4).
+     (no takeaways strip in portrait — final card per column carries
+     takeaway content instead)
+     ========================================================= */
+  .footer {
+    grid-column: 1 / -1;
+    display: flex; justify-content: space-between; align-items: center;
+    padding-top: calc(8 * var(--u));
+    border-top: calc(1 * var(--u)) solid var(--border-soft);
+    font-family: var(--font-sans);
+    font-size: var(--fs-4);
+    color: var(--text-muted);
+  }
+  .footer .repo { color: var(--accent); font-weight: 600; }
+  /* Footer method name (replaces an inline color style). */
+  .footer .method-name { color: var(--accent-deep); }
+  /* Optional watermark */
+  .ornament {
+    position: absolute;
+    right: calc(18 * var(--u));
+    bottom: calc(18 * var(--u));
+    font-family: var(--font-sans);
+    font-size: var(--fs-9);
+    color: var(--ornament-ink);
+    font-weight: 900;
+    letter-spacing: 4px;
+    pointer-events: none;
+    user-select: none;
+  }
+  /* =========================================================
+     UTILITIES — replace inline `style=` attributes in the markup.
+     These exist so the template body can stay 100% inline-style-free
+     (style_check rule 2). Add new utilities here, never an inline style.
+     ========================================================= */
+  /* =========================================================
+     DENSITY COMPONENTS (catalogued — see COMPONENTS.md).
+     Guardrail: no component-local color semantics. Distinction is
+     carried by labels, order and typography — never by new hues.
+     ========================================================= */
+  /* equation-stack: compact multi-row formula stack (denser than one big .eqn) */
+  .equation-stack { margin: calc(2 * var(--u)) 0; }
+  .equation-stack .eqn { margin: calc(2 * var(--u)) 0; padding: calc(2 * var(--u)) calc(8 * var(--u)); }
+  /* eqn-anatomy: term-by-term anatomy grid (2x2 default; --row variant = 1x4) */
+  .eqn-anatomy {
+    display: grid; grid-template-columns: 1fr 1fr;
+    gap: calc(2.5 * var(--u)); margin: calc(3 * var(--u)) 0;
+  }
+  .eqn-anatomy.eqn-anatomy--row { grid-template-columns: repeat(4, 1fr); }
+  .eqn-anatomy .ea-item {
+    background: var(--bg-card-tint);
+    border: 1px solid var(--border-soft);
+    border-left: calc(2 * var(--u)) solid var(--accent);
+    border-radius: calc(2 * var(--u));
+    padding: calc(2 * var(--u)) calc(4 * var(--u));
+    font-size: var(--fs-2); line-height: 1.3;
+  }
+  .eqn-anatomy .ea-tag {
+    display: inline-block; font-family: var(--font-sans); font-weight: 700;
+    font-size: var(--fs-1); color: var(--accent-deep);
+    background: var(--accent-light); border-radius: calc(1.5 * var(--u));
+    padding: calc(0.5 * var(--u)) calc(2.5 * var(--u));
+    margin-right: calc(1.5 * var(--u));
+  }
+  /* flow-strip: labeled pipeline, ALL steps the same accent; ONLY the
+     final step may carry the gold top bar. Not an "algorithm" unless the
+     paper has one — see COMPONENTS.md. */
+  .flow-strip { display: flex; align-items: stretch; gap: calc(1.5 * var(--u)); margin: calc(3 * var(--u)) 0; }
+  .flow-strip .step {
+    flex: 1; background: var(--accent-light);
+    border: 1px solid var(--accent-soft); border-radius: calc(2 * var(--u));
+    padding: calc(2 * var(--u)) calc(2.5 * var(--u));
+    text-align: center; font-size: var(--fs-2); line-height: 1.25;
+  }
+  .flow-strip .step .step-name {
+    display: block; font-family: var(--font-sans); font-weight: 700;
+    font-size: var(--fs-1); color: var(--accent-deep);
+    letter-spacing: 0.5px; text-transform: uppercase;
+    margin-bottom: calc(1 * var(--u));
+  }
+  .flow-strip .step--final { border-top: calc(1.5 * var(--u)) solid var(--gold); background: var(--gold-soft); }
+  .flow-strip .arrow {
+    align-self: center; color: var(--accent);
+    font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-4);
+    flex: 0 0 auto;
+  }
+  /* figure--duo: two paper figures sharing one caption; each img MUST be
+     a data-source="paper" asset and carry .w-45/.w-50 (42-48% each). */
+  .figure--duo { display: flex; gap: calc(3 * var(--u)); align-items: flex-start; justify-content: center; }
+  .figure--duo img { max-width: 48%; min-width: 0; }  /* hard cap: duo contract is 42-48% each; an oversized w-NN cannot overflow the card */
+  /* result-table derived column (gold-soft = DERIVED arithmetic; label it) */
+  .result-table th.derived, .result-table td.derived {
+    background: var(--gold-soft); font-family: var(--font-sans); font-weight: 700;
+  }
+  /* keybox 4-up variant */
+  .keybox.keybox--4 { grid-template-columns: repeat(4, 1fr); }
+  /* algo: compact numbered procedure — ONLY when the paper itself states
+     an explicit algorithm/procedure; never invent steps. */
+  ol.algo { padding-left: calc(16 * var(--u)); }
+  ol.algo li { margin-bottom: calc(1.5 * var(--u)); font-size: var(--fs-3); line-height: 1.3; }
+  /* claim-pills: provenance mini-table (numeric-heavy posters only) */
+  .claim-pills { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--fs-2); }
+  .claim-pills td {
+    border-bottom: 1px solid var(--border-soft);
+    padding: calc(1.5 * var(--u)) calc(3 * var(--u));
+  }
+  .claim-pills .cp-id {
+    font-weight: 700; color: var(--accent-deep); background: var(--accent-light);
+    border-radius: calc(1.5 * var(--u)); padding: 0 calc(2.5 * var(--u)); white-space: nowrap;
+  }
+  .claim-pills .cp-fact { color: var(--accent-deep); font-weight: 700; }
+  .claim-pills .cp-derived { color: var(--gold); font-weight: 700; }
+  /* Grid-blowout guards: (1) columns may shrink below min-content so a
+     wide equation can never widen its track and squeeze siblings;
+     (2) over-wide display math scales down to fit its box instead of
+     blowing out the card (SVG keeps aspect via height:auto). */
+  .body-grid > .column { min-width: 0; }
+  .card { min-width: 0; }
+  .eqn mjx-container > svg { max-width: 100%; height: auto; }
+  /* ── Utility classes — defined LAST so equal-specificity ties
+     resolve in the utility's favor (source order). ── */
+  .fs-1 { font-size: var(--fs-1); }
+  .fs-2 { font-size: var(--fs-2); }
+  .fs-3 { font-size: var(--fs-3); }
+  .fs-4 { font-size: var(--fs-4); }
+  .fs-5 { font-size: var(--fs-5); }
+  .fs-6 { font-size: var(--fs-6); }
+  .fs-7 { font-size: var(--fs-7); }
+  .fs-8 { font-size: var(--fs-8); }
+  .fs-9 { font-size: var(--fs-9); }
+  .mt-1 { margin-top: calc(1 * var(--u)); }
+  .mt-2 { margin-top: calc(2 * var(--u)); }
+  .mt-3 { margin-top: calc(3 * var(--u)); }
+  .mt-4 { margin-top: calc(4 * var(--u)); }
+  .mt-5 { margin-top: calc(5 * var(--u)); }
+  .mt-6 { margin-top: calc(6 * var(--u)); }
+  .mb-1 { margin-bottom: calc(1 * var(--u)); }
+  .mb-2 { margin-bottom: calc(2 * var(--u)); }
+  .mb-3 { margin-bottom: calc(3 * var(--u)); }
+  .mb-4 { margin-bottom: calc(4 * var(--u)); }
+  .w-45  { width: 45%; }
+  .w-50  { width: 50%; }
+  .w-55  { width: 55%; }
+  .w-60  { width: 60%; }
+  .w-65  { width: 65%; }
+  .w-70  { width: 70%; }
+  .w-75  { width: 75%; }
+  .w-80  { width: 80%; }
+  .w-85  { width: 85%; }
+  .w-90  { width: 90%; }
+  .w-95  { width: 95%; }
+  .w-100 { width: 100%; }
+  .text-secondary { color: var(--text-secondary); }
+  .text-muted     { color: var(--text-muted); }
+  .nowrap         { white-space: nowrap; }
+  .text-center    { text-align: center; }
+  /* =========================================================
+     PRINT OVERRIDE — KEEP LAST so it wins source-order ties.
+     RETARGET: width/height must match @page size in the CANVAS block.
+     ========================================================= */
+  @media print {
+    html, body { background: white; }
+    .poster { margin: 0; box-shadow: none; width: 24in; height: 36in; page-break-after: avoid; }
+    :root { --u: 1mm; }
+  }
+</style>
+</head>
+<body>
+<div class="poster" data-measure-role="poster">
+  <!-- =========================== HEADER =========================== -->
+  <header class="header" data-measure-role="header">
+    <!-- LEFT: venue badge. Replace text or swap for an <img> if your venue allows logos. -->
+    <div class="venue-badge">
+      <div class="vb-venue">VENUE</div>
+      <div class="vb-year">YEAR</div>
+      <div class="vb-tag">POSTER</div>
+    </div>
+    <!-- CENTER: title block. Portrait posters are read from closer up, and the
+         canvas is narrower, so the title still reads big at --fs-9. -->
+    <div class="title-block">
+      <h1 class="title">POSTER TITLE: <span class="accent">Subtitle Keyword</span></h1>
+      <div class="subtitle">One-sentence tagline that explains the work in plain English.</div>
+      <div class="authors-line">
+        <span class="author">Author One</span> &middot;
+        <span class="author">Author Two</span> &middot;
+        <span class="author">Author Three<sup>&#9993;</sup></span>
+        <span class="aff">Lab / Department &middot; Institution &middot; City, Country</span>
+      </div>
+    </div>
+    <!-- RIGHT: optional logo + QR. Delete .logo-slot if your venue forbids on-poster logos. -->
+    <div class="right-block">
+      <div class="logo-slot">
+        <!-- Affiliation / lab logo goes here. Brand-colored logos MUST carry
+             data-color-exempt="logo" so style_check exempts them:
+               <img src="assets/logos/lab.png" alt="Lab" data-color-exempt="logo">
+             No logo? Delete this entire <div class="logo-slot"> instead of
+             leaving it empty (an empty slot just adds a stray gap). The .aff
+             text line and the corner .ornament still carry attribution. -->
+      </div>
+      <div class="qr-block">
+        <!-- TODO: replace with your real QR code. The default below is an inline
+             SVG placeholder so the template renders offline. The QR is a
+             monochrome black/white SVG (data-color-exempt="logo" marks it as a
+             non-palette graphic for style_check). Generate a real one with:
+               $ qrencode -o qr.png -s 12 -m 0 "https://your-url"     # apt install qrencode
+               $ python -c "import qrcode; qrcode.make('https://your-url').save('qr.png')"
+             then change src to "assets/qr/qr.png" (export at >= 2x rendered size). -->
+        <img data-color-exempt="logo" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%23fff'/><g fill='%23222'><rect x='4' y='4' width='26' height='26'/><rect x='70' y='4' width='26' height='26'/><rect x='4' y='70' width='26' height='26'/></g><g fill='%23fff'><rect x='10' y='10' width='14' height='14'/><rect x='76' y='10' width='14' height='14'/><rect x='10' y='76' width='14' height='14'/></g><g fill='%23222'><rect x='14' y='14' width='6' height='6'/><rect x='80' y='14' width='6' height='6'/><rect x='14' y='80' width='6' height='6'/><rect x='38' y='10' width='4' height='4'/><rect x='48' y='10' width='4' height='4'/><rect x='58' y='10' width='4' height='4'/><rect x='34' y='34' width='4' height='4'/><rect x='44' y='38' width='4' height='4'/><rect x='54' y='34' width='4' height='4'/><rect x='62' y='40' width='4' height='4'/><rect x='38' y='46' width='4' height='4'/><rect x='50' y='52' width='4' height='4'/><rect x='62' y='56' width='4' height='4'/><rect x='34' y='60' width='4' height='4'/><rect x='44' y='66' width='4' height='4'/><rect x='56' y='62' width='4' height='4'/><rect x='80' y='80' width='4' height='4'/><rect x='88' y='86' width='4' height='4'/></g><text x='50' y='54' text-anchor='middle' font-family='sans-serif' font-size='6' font-weight='bold' fill='%23888'>QR</text></svg>" alt="QR placeholder — replace with your real QR before printing">
+        <div class="qr-label">Paper &amp; Code</div>
+      </div>
+    </div>
+  </header>
+  <!-- ============================ BODY ============================
+       2 columns. Each column should carry 4-5 cards. The last card of each
+       column should typically be a takeaways / conclusion card so the
+       reader exits with a clear message (we don't have a takeaways strip
+       in portrait).
+       ============================================================ -->
+  <div class="body-grid" data-measure-role="body">
+    <!-- ============ COLUMN 1 ============ -->
+    <div class="column" data-measure-role="column">
+      <!-- Card 1: motivation. .highlight card to anchor the reader's eye on entry. -->
+      <div class="card highlight" data-measure-role="card">
+        <div class="section-title"><span class="num">1</span> Motivation</div>
+        <p class="body-text">
+          TODO: 2-3 sentences on the problem. Use <span class="keyword">accent color</span>
+          for terms you want the eye to land on; <span class="highlight-text">light pills</span>
+          for short phrases.
+        </p>
+        <ul class="mt-3 fs-4">
+          <li>TODO: pain point 1.</li>
+          <li>TODO: pain point 2.</li>
+        </ul>
+        <div class="callout mt-4">
+          <strong>Q:</strong> TODO: the question your paper answers.
+        </div>
+      </div>
+      <!-- Card 2: key insight / setup figure. -->
+      <div class="card" data-measure-role="card">
+        <div class="section-title"><span class="num">2</span> Key Insight</div>
+        <p class="body-text">
+          TODO: 2-3 sentences on the central insight that distinguishes this work.
+        </p>
+        <div class="figure mt-3">
+          <!-- <img src="assets/paper_figures/key-figure.png" data-source="paper"
+                    data-asset-id="key" alt="Key insight"> -->
+          <div class="caption">
+            TODO: caption explaining (a) / (b) / (c) panels in one line each.
+          </div>
+        </div>
+      </div>
+      <!-- Card 3: method step 1 (equation). -->
+      <div class="card" data-measure-role="card">
+        <div class="section-title"><span class="num">3</span> Method Step 1</div>
+        <p class="body-text">TODO: how step 1 works in 1-2 sentences.</p>
+        <div class="eqn">
+          <span class="label">Core equation</span>
+          $$f(x) \;=\; \text{TODO}$$
+        </div>
+        <p class="body-text">TODO: one-sentence interpretation of the equation.</p>
+      </div>
+      <!-- Card 4: method step 2 (theorem / key). .highlight + gold callout. -->
+      <div class="card highlight" data-measure-role="card">
+        <div class="section-title">
+          <span class="num">4</span> Method Step 2
+          <span class="tag-key">&#9733; KEY</span>
+        </div>
+        <p class="body-text">TODO: how step 2 works.</p>
+        <div class="eqn">
+          <span class="label">Step 2 equation</span>
+          $$g(x) \;=\; \text{TODO}$$
+        </div>
+        <div class="callout gold">
+          <strong>Theorem.</strong> TODO: one-sentence statement, with $\varepsilon$ bounds if applicable.
+        </div>
+      </div>
+    </div>
+    <!-- ============ COLUMN 2 ============ -->
+    <div class="column" data-measure-role="column">
+      <!-- Card 6: main result. .highlight with headline star. -->
+      <div class="card highlight" data-measure-role="card">
+        <div class="section-title">
+          <span class="num">6</span> Main Result
+          <span class="tag-key fs-3">&#9733; Headline</span>
+        </div>
+        <p class="body-text text-secondary fs-3 mb-1">
+          TODO: setup line — dataset, # samples, baselines.
+        </p>
+        <div class="figure">
+          <!-- <img src="assets/paper_figures/main-result.png" data-source="paper"
+                    data-asset-id="main" alt="Main result"> -->
+          <div class="caption fs-2">
+            <strong>Left:</strong> TODO. <strong>Right:</strong> TODO.
+          </div>
+        </div>
+        <!-- Optional: a 3-up .keybox of headline stats. Add back if you have
+             a strong narrative around 3 numbers (best paired with a wider card). -->
+      </div>
+      <!-- Card 7: benchmark table. -->
+      <div class="card" data-measure-role="card">
+        <div class="section-title"><span class="num">7</span> Benchmark Table</div>
+        <p class="body-text text-secondary fs-2 mb-1">
+          TODO: setup line — samples, seeds, metric description.
+        </p>
+        <table class="result-table">
+          <thead>
+            <tr>
+              <th class="method">Method</th>
+              <th>Metric A &#8593;</th>
+              <th>Metric B &#8593;</th>
+              <th>Cost &#8595;</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="ref"><td class="method"><em>Reference</em></td><td>x.xx</td><td>x.xx</td><td>x.xx</td></tr>
+            <tr><td class="method">Baseline 1</td><td>x.xx</td><td>x.xx</td><td>x.xx</td></tr>
+            <tr><td class="method">Baseline 2</td><td>x.xx</td><td>x.xx</td><td>x.xx</td></tr>
+            <tr class="ours"><td class="method">Ours</td><td class="best">x.xx</td><td class="best">x.xx</td><td class="best">x.xx</td></tr>
+          </tbody>
+        </table>
+        <p class="body-text mt-2 fs-3">
+          TODO: one-sentence interpretation of the table.
+        </p>
+      </div>
+      <!-- Card 8: robustness / ablation / secondary axis. -->
+      <div class="card" data-measure-role="card">
+        <div class="section-title"><span class="num">8</span> Ablation / Robustness</div>
+        <p class="body-text">TODO: 1-2 sentences on what's varied and what's measured.</p>
+        <ul class="mt-3">
+          <li><strong>Setting A</strong> — TODO.</li>
+          <li><strong>Setting B</strong> — TODO.</li>
+          <li><strong>Setting C</strong> — TODO.</li>
+        </ul>
+        <div class="callout mt-3">
+          TODO: bottom-line takeaway from the ablation study.
+        </div>
+      </div>
+      <!-- Card 9: conclusion / takeaways — replaces the takeaways strip used in landscape.
+           Keep this short and structured so the reader leaves with 3-4 crisp lines. -->
+      <div class="card highlight" data-measure-role="card">
+        <div class="section-title">
+          <span class="num">9</span> Takeaways
+          <span class="tag-key fs-3">&#9733;</span>
+        </div>
+        <ul>
+          <li><strong>Idea.</strong> TODO: 1-line.</li>
+          <li><strong>Method.</strong> TODO: 1-line.</li>
+          <li><strong>Result.</strong> TODO: 1-line.</li>
+          <li><strong>Practical.</strong> TODO: 1-line.</li>
+        </ul>
+        <div class="callout gold mt-3">
+          <strong>In one sentence:</strong> TODO — the elevator pitch a passer-by remembers.
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- ============================ FOOTER ============================ -->
+  <div class="footer" data-measure-role="footer">
+    <div>
+      <strong class="method-name">METHOD NAME</strong> &middot; Venue Year &middot;
+      Acknowledgements: TODO.
+    </div>
+    <div>
+      Code: <span class="repo">github.com/&lt;org&gt;/&lt;repo&gt;</span> &nbsp;&middot;&nbsp;
+      Contact: <span class="repo">presenter@example.com</span>
+    </div>
+  </div>
+  <!-- Optional watermark — delete if you don't want it. -->
+  <div class="ornament">LAB &middot; INSTITUTION</div>
+</div>
+</body>
+</html>