diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 53bc59b..0f06aaa 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -6,6 +6,8 @@ All contributions are welcome: bug reports, feature suggestions, documentation i
 
 ## Table of Contents
 
+- [Licensing of contributions](#licensing-of-contributions)
+- [Credit and authorship](#credit-and-authorship)
 - [I Have a Question](#i-have-a-question)
 - [Reporting Bugs](#reporting-bugs)
 - [Suggesting Enhancements](#suggesting-enhancements)
@@ -14,6 +16,33 @@ All contributions are welcome: bug reports, feature suggestions, documentation i
 
 ---
 
+## Licensing of contributions
+
+oceanarray is MIT licensed, and contributions are accepted **under the same licence** — what GitHub calls "inbound = outbound". By opening a pull request you confirm that:
+
+1. you wrote the contribution, or you have the right to submit it; and
+2. you agree to license it to the project under the MIT licence.
+
+This does not transfer your copyright, which remains yours.
+
+**If your contribution contains code from somewhere else** — another repository, a paper's supplementary material, a Stack Overflow answer, a colleague's script, or generated output you did not review — say so in the pull request and name the source and its licence. This is the single most useful thing you can tell a reviewer. Code from an unlicensed source cannot be merged until its author agrees, so flagging it early avoids the work being wasted.
+
+---
+
+## Credit and authorship
+
+Three separate things.
+
+**Copyright** stays with whoever wrote the code. You are not asked to assign it.
+
+**Contributor credit** is automatic: everyone whose pull request is merged appears in the git history. If your name or preferred email in the git log is wrong, add a `.mailmap` entry via a pull request — that is the correct fix.
+
+**Citation authorship** is the author list in `CITATION.cff`, which propagates into the Zenodo DOI for every release and therefore into other people's bibliographies. It reflects *substantial* contribution to the software — its design, a significant body of its implementation, its test suite, or its documentation architecture — and is decided by the maintainer at release time. Funding or supervision alone does not qualify. There is no line count that guarantees it or excludes it. If you believe your contribution crosses that line and it has not been reflected, please say so in an issue — being asked is better than being resented.
+
+Where a contribution is adapted from someone else's work rather than written from scratch, we credit it **in the docstring of the code itself**, so the attribution travels with the code rather than living in a file nobody reads (see the existing examples in `utilities.py` and `plotters/current.py`).
+
+---
+
 ## I Have a Question
 
 Read the [documentation](https://ocean-uhh.github.io/oceanarray/) first.
@@ -87,7 +116,17 @@ pip install seasenselib --no-deps
 1. Fork the repository and create a feature branch from `main`.
 2. Make your changes, following the conventions below.
 3. Run `ruff check . --fix` and then `pytest` — all tests must pass.
-4. Open a pull request against `main`. Use a title prefixed with `[FEAT]`, `[FIX]`, `[REFACTOR]`, `[DOC]`, `[TEST]`, or `[CLEANUP]`.
+4. Open a pull request against `main`. Prefix the title with a bracket tag: `[FEAT]`, `[FIX]`, `[REFACTOR]`, `[DOC]`, `[TEST]`, `[CI]`, or `[CLEANUP]`. (PR titles use bracket tags; individual **commit messages** use conventional-commit prefixes — see below.)
+
+Keep each pull request to one logical change. A rename PR that also fixes a bug is a PR nobody can review — split them. (This matters most once more than one person is working on the code.)
+
+### Commit messages
+
+Use conventional-commit prefixes (`feat:`, `fix:`, `refactor:`, `docs:`, `test:`, `ci:`, `chore:`) with an imperative subject. If you worked with someone, or adapted their code, add a trailer:
+
+```
+Co-authored-by: Name <email@example.com>
+```
 
 ### Code conventions
 
@@ -97,6 +136,7 @@ pip install seasenselib --no-deps
 - **Units**: never strip or assume units. Use `gsw` for all seawater property calculations.
 - **Plot style**: discrete colorbars (`BoundaryNorm`, ≤ 20 levels); call `plt.style.use(str(P.MPLSTYLE))` at the start of every plot function.
 - **Data provenance**: store all processing parameters (thresholds, coefficients) in NC output attributes so any file can be reprocessed exactly from itself.
+- **No silent defaults**: never substitute a default, guess, or approximation when the correct value cannot be determined. Raise, or warn loudly and record what was assumed in the output's metadata. A plausible wrong number is worse than an error, because nothing downstream can detect it.
 
 ### Testing
 
@@ -108,7 +148,7 @@ pytest tests/unit -m "not slow and not needs_seasenselib"  # without seasenselib
 pytest --cov=oceanarray --cov-report=term-missing -q  # with coverage
 ```
 
-New or changed code must have test coverage. Integration tests use committed NetCDF fixtures in `tests/fixtures/`.
+New or changed code must have a test. For anything numerical, assert a **value** you can justify independently of the code — `pytest.approx` or `numpy.testing.assert_allclose` against an analytic case, an invariant that must hold for any input, or a cross-check against `gsw` or another implementation — rather than a value produced by running the code (which proves only that the code has not changed). Do not add tests that pass when nothing happened: `assert result is not None` on a function that returns `None` on failure is the shape to avoid. Integration tests use committed NetCDF fixtures in `tests/fixtures/`.
 
 ---
 
diff --git a/oceanarray/config/report.mplstyle b/oceanarray/config/report.mplstyle
new file mode 100644
index 0000000..0bb8983
--- /dev/null
+++ b/oceanarray/config/report.mplstyle
@@ -0,0 +1,24 @@
+axes.titlesize : 12
+axes.labelsize : 10
+date.autoformatter.day: %Y-%m-%d
+date.converter: auto
+figure.figsize: 8, 4
+figure.dpi: 100
+font.family:  sans-serif
+font.sans-serif: Helvetica Neue, Helvetica, Arial, Liberation Sans, DejaVu Sans
+font.style:   normal
+font.size: 10
+legend.fontsize: 9
+lines.linewidth : 1
+lines.linestyle: -
+lines.markersize : 10
+xtick.labelsize : 10
+xtick.alignment: center
+ytick.labelsize : 10
+axes.grid : False
+axes.linewidth : 0.6
+grid.alpha : 0.5
+grid.color : 0.5
+grid.linestyle : :
+grid.linewidth : 0.6
+contour.linewidth : 0.8
diff --git a/oceanarray/config/report_tokens.py b/oceanarray/config/report_tokens.py
new file mode 100644
index 0000000..f3bfb98
--- /dev/null
+++ b/oceanarray/config/report_tokens.py
@@ -0,0 +1,206 @@
+"""Shared report design tokens — the single source of every presentation value.
+
+This module is written to be **vendored** across the packages that share the
+report design system.  It is
+package-neutral — it names no package and holds only data (plus the mplstyle
+path, resolved relative to this file so no package name appears in the text) — so
+the copies can be frozen and checked later; for now this document and convention
+are the shared reference (no cross-repo hash test yet).  A value that belongs to
+one package (a scientific variable registry) does **not** live here.
+
+Layering: this is a leaf, and it lives in ``config/`` for that reason — its only
+import is :mod:`pathlib`.  Both the plotters (which size figures from
+:data:`SLOTS`) and the report/CSS layer read it; it reads nothing of theirs.
+Placing it under ``reports/`` would form an import cycle
+(``plotters.plots -> reports -> reports._index -> plotters.plots``).
+
+Part II of ``2026-08-12-report-spec.md`` is the prose behind these numbers.
+Templates and plotters read them; they never restate them.
+"""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+# ---------------------------------------------------------------------------
+# Style file and error policy
+# ---------------------------------------------------------------------------
+# The report mplstyle sits next to this module under config/, with a
+# package-neutral name so this line is byte-identical across packages.
+MPLSTYLE_PATH: Path = Path(__file__).with_name("report.mplstyle")
+
+# When True, a plotting failure (or a None from a required panel) re-raises
+# instead of being swallowed.  Test infrastructure toggles this at runtime; the
+# default False is identical across packages.  Read at call time by both the
+# plotters and the encoder so a single flag governs both.
+RAISE_ON_PLOT_ERROR: bool = False
+
+# ---------------------------------------------------------------------------
+# Geometry (spec §11)
+# ---------------------------------------------------------------------------
+CONTENT_MAX_PX: int = 1150  # body max-width
+CONTENT_PAD_PX: int = 32  # body padding, each side
+USABLE_PX: int = CONTENT_MAX_PX - 2 * CONTENT_PAD_PX  # 1086
+W_FULL: float = 9.0  # full-slot figure width in inches (the basis of SLOTS)
+FIG_DPI: int = 150  # savefig dpi; with W_FULL this fixes every PNG width
+# Oversample (png_px / display_px) is DERIVED, not a free knob: W_FULL, FIG_DPI
+# and USABLE_PX over-determine it, so declaring all three independently would
+# guarantee a contradiction.  The true value is ≈1.243, not a round 1.25 — the
+# difference is invisible, and keeping W_FULL and FIG_DPI clean (they are the two
+# that appear in code, as figsize and savefig dpi) reproduces the package's existing
+# PNG widths exactly.  Nothing reads this; it is documentation.
+OVERSAMPLE: float = W_FULL * FIG_DPI / USABLE_PX  # ≈ 1.2431
+PNG_PALETTE_COLORS: int = 256  # 8-bit palette quantization in the encoder
+
+# ---------------------------------------------------------------------------
+# Slot table (spec §14)
+# ---------------------------------------------------------------------------
+# name -> (fraction of USABLE_PX, figure width in inches).
+# Invariant asserted by the slot-contract test: inches == W_FULL * fraction, so
+# display_px / fig_in is identical for every figure and one font size renders at
+# one on-screen size everywhere.  Test 2 asserts each saved PNG is exactly
+# round(inches * FIG_DPI) px wide (1350 / 900 / 810 / 675 / 540 / 450).
+SLOTS: dict[str, tuple[float, float]] = {
+    "full": (1.0, 9.0),
+    "twothirds": (2 / 3, 6.0),
+    "three-fifths": (0.6, 5.4),
+    "half": (0.5, 4.5),
+    "two-fifths": (0.4, 3.6),
+    "third": (1 / 3, 3.0),
+}
+
+# Ergonomic width aliases (inches) for plotter call sites; derived from SLOTS.
+W_TWOTHIRDS: float = SLOTS["twothirds"][1]
+W_THREE_FIFTHS: float = SLOTS["three-fifths"][1]
+W_HALF: float = SLOTS["half"][1]
+W_TWO_FIFTHS: float = SLOTS["two-fifths"][1]
+W_THIRD: float = SLOTS["third"][1]
+
+# Aspect-locked figure constants (spec §14).
+SECTION_STRETCH: float = (
+    16.0  # calibrated: 416 dbar × 94 km → 2.5 in tall at full width
+)
+MAX_SECTION_H: float = 5.2  # height cap; tall/narrow sections get a narrower fig_w
+MIN_SECTION_H: float = 3.0  # height floor
+
+# ---------------------------------------------------------------------------
+# Figure annotation font sizes (points, spec §13.3)
+# ---------------------------------------------------------------------------
+# The only per-call font sizes a plotter may set: matplotlib does not route
+# annotation text through a style key, so these cannot come from the mplstyle.
+# Everything else (axes/tick/legend/title sizes) is the mplstyle's job and must
+# not be set per call.  The "no stray typography" test allow-lists exactly these
+# three names.
+CLABEL_FS: int = 8  # ax.clabel() contour labels
+ANNOT_FS: int = 8  # in-axes annotation / panel-label text boxes
+CAST_LABEL_FS: int = 6  # dense in-axes cast-number labels on maps and sections
+
+# ---------------------------------------------------------------------------
+# Spacing and radii (spec §15)  [data; applied by emit_css() in rep/vis-system]
+# ---------------------------------------------------------------------------
+SPACE: dict[str, str] = {
+    "1": "4px",
+    "2": "8px",
+    "3": "12px",
+    "4": "16px",
+    "5": "24px",
+    "6": "32px",
+    "7": "48px",
+}
+RADII: dict[str, str] = {"card": "8px", "btn": "4px", "pill": "999px"}
+
+# ---------------------------------------------------------------------------
+# Typography (spec §13.2)  [data; applied by emit_css() in rep/vis-system]
+# ---------------------------------------------------------------------------
+# THE single source of page font sizes.  Nothing else in the repository sets a
+# page font size.  Values in rem (the browser's 16px root, exactly as the current
+# CSS uses them) plus one absolute px for the body base.  This is the established,
+# reviewed page scale (spec §13.2) — the values to match, not a redesign.  Keyed
+# by role, matching the CSS custom
+# properties emit_css() generates.  Figure font sizes are a *separate* knob (the
+# mplstyle, in points).
+TYPE: dict[str, dict[str, str]] = {
+    "root": {"size": "14px", "line": "1.5"},  # body base
+    "h1": {"size": "1.75rem", "weight": "700"},  # masthead title
+    "type": {"size": "1.35rem", "weight": "700"},  # .masthead-type page label
+    "h2": {"size": "1rem"},  # section headings — colour/weight/underline, not size
+    "meta": {"size": "0.84rem"},  # meta-grid <dd>
+    "note": {"size": "0.82rem"},  # .note, .caption, .explainer
+    "nav": {"size": "0.8rem"},  # jump-nav, .btn-nav
+    "cap": {"size": "0.76rem"},  # figcaption
+    "xs": {"size": "0.75rem"},  # breadcrumb, footer
+    "top": {"size": "0.72rem"},  # ↑ top link
+    "dt": {"size": "0.7rem"},  # meta-grid <dt>, jump-nav ▸
+}
+
+# Page font stacks (spec §13.1).  The CSS uses the native `system-ui` stack —
+# zero-install, matches the host OS.  The *figure* font is separate (the mplstyle
+# names a Helvetica stack); figure text is baked into a raster, so the two need
+# not match.
+FONT_SANS: str = 'system-ui, -apple-system, "Segoe UI", sans-serif'
+FONT_MONO: str = (
+    'ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace'
+)
+
+# ---------------------------------------------------------------------------
+# Colour — base tokens (spec §12.1)  [data; applied in rep/vis-system]
+# ---------------------------------------------------------------------------
+COLORS: dict[str, str] = {
+    "ocean": "#1a3a5c",  # headings, structural dark
+    "seafoam": "#e8f4f8",  # h2 underline, jump-nav background
+    "muted": "#95a5a6",  # footer, breadcrumb separators, ↑ top
+    "text": "#2c3e50",  # body text
+    "rule": "#dfe6e9",  # table borders, hairlines
+    "bg": "#ffffff",  # page background
+    "bg-sunken": "#f7f9fa",  # table zebra, card interiors
+    "warn": "#e67e22",  # .warn border and icon
+    "warn-bg": "#fdf3e7",  # .warn background
+    "error": "#c0392b",  # failed QC, sentinel values
+}
+
+# Role accent (spec §12.2): masthead background + nav pill.  `landing` is the
+# summary/index accent; entity/collection/component share the structural dark
+# --ocean; the aggregate and map roles have their own colours.  The `landing`
+# value is a per-package choice (see the spec's role table).
+ROLE_ACCENT: dict[str, str] = {
+    "landing": "#2980b9",  # summary / index accent
+    "entity": "#1a3a5c",
+    "collection": "#1a3a5c",
+    "component": "#1a3a5c",
+    "aggregate-a": "#8e44ad",  # sections
+    "aggregate-b": "#27ae60",  # timeseries
+    "map": "#ee3377",
+}
+
+# Package accent (spec §12.2): confined to two additive places so it restyles no
+# existing pixel — a small masthead wordmark and the footer's border-top.  h2
+# underlines stay --seafoam and links stay --ocean.
+PACKAGE_ACCENT: dict[str, str] = {
+    "oceanarray": "#1a3a5c",
+    "ctdcast": "#0e6e6e",
+    "caldip": "#7a4b8a",  # reserved
+    "amocatlas": "#8a5a2b",  # reserved
+}
+
+# Neutral gray scale — consolidates the ad-hoc grays that the per-page template
+# <style> blocks used (text shades, hairlines, sunken fills).  Emitted as
+# --gray-1 (lightest) … --gray-7 (near-black).  A few template literals shift to
+# the nearest step here; the changes are small and were signed off on OdB.
+GRAYS: dict[str, str] = {
+    "gray-1": "#f5f7fa",  # lightest sunken fill (cast-note / card backgrounds)
+    "gray-2": "#e0e0e0",  # hairlines, borders
+    "gray-3": "#aaaaaa",  # faint text ("not generated" placeholders)
+    "gray-4": "#888888",  # soft secondary text, <details> summaries
+    "gray-5": "#555555",  # secondary body text, descriptions
+    "gray-6": "#333333",  # strong text (cast/trim notes, filenames)
+    "gray-7": "#111111",  # darkest text (interactive-map labels)
+}
+
+# Semantic status colours used by badges and banners.  --error/--warn already
+# exist in COLORS; --ok is new (the LADCP-present badge green).
+SEMANTIC: dict[str, str] = {
+    "ok": "#2c6e49",  # LADCP-present badge; "good/available" green
+}
+# Note: leaflet.html is a standalone page that does not load this shared CSS, so
+# its dark-UI palette (#1a1a2e / #aed6f1 / #4a6fa5) stays as literals there —
+# tokenizing it would need the :root injected into that page.
diff --git a/oceanarray/plotters/diagnostic.py b/oceanarray/plotters/diagnostic.py
index 66b6e9b..f906947 100644
--- a/oceanarray/plotters/diagnostic.py
+++ b/oceanarray/plotters/diagnostic.py
@@ -87,6 +87,10 @@
 
 _COMPACT_PANEL_VARS: frozenset = frozenset({"battery_voltage", "speed_of_sound"})
 _COMPACT_PANEL_HEIGHT: float = 1.5
+#: Height (relative units) of a normal, non-compact instrument panel row.  Shared
+#: by ``draw_windows`` here and ``_build_fig_from_ds`` in ``report/_plots.py`` so
+#: the full time-series and start/end-window figures use the same row height.
+_PANEL_HEIGHT: float = 2.0
 
 # QC overlay marker styles (OceanSITES flag codes 3, 4, 8).
 _QC_COLORS: Dict[int, str] = {
@@ -849,10 +853,6 @@ def draw_windows(
         Width of each window in hours (default 6).
     show_qc : bool
         Overlay QC flag markers on the data.
-    panels : list, optional
-        Subset of ``_instrument_panels`` tuples to draw.  When given, only these
-        rows are rendered (used to paginate a tall window figure across several
-        images); otherwise every panel for the instrument is drawn on one figure.
     vlines : list of (time_val, color, label), optional
         Vertical marker lines to draw on both panels.  *time_val* may be a
         ``numpy.datetime64``, an ISO-8601 string, or a ``pandas.Timestamp``.
@@ -868,6 +868,10 @@ def draw_windows(
         transition appears even if the stage2/3 YAML trim cut it off.  The
         y-axis limits are taken from the primary (stage2/3) data only so that
         bench-pressure outliers (p ≈ 0) do not squish the deployment-depth view.
+    panels : list, optional
+        Subset of ``_instrument_panels`` tuples to draw.  When given, only these
+        rows are rendered (used to paginate a tall window figure across several
+        images); otherwise every panel for the instrument is drawn on one figure.
 
     Returns
     -------
@@ -904,8 +908,6 @@ def draw_windows(
         end_mask = time >= time[-1] - np.timedelta64(hours * 3600, "s")
         if start_mask.sum() < 2 and end_mask.sum() < 2:
             return None
-        # One sample interval used to expand x-axis limits (stage2/3 fallback).
-        _dt_one = (time[1] - time[0]) if len(time) > 1 else np.timedelta64(300, "s")  # noqa: F841
 
         if panels is None:
             panels = _instrument_panels(ds, combine_pitch_roll=True)
@@ -913,7 +915,7 @@ def draw_windows(
             return None
 
         height_ratios = [
-            _COMPACT_PANEL_HEIGHT if vname in _COMPACT_PANEL_VARS else 2.0
+            _COMPACT_PANEL_HEIGHT if vname in _COMPACT_PANEL_VARS else _PANEL_HEIGHT
             for vname, *_ in panels
         ]
         nrows = len(panels)
diff --git a/oceanarray/report/_css.py b/oceanarray/report/_css.py
new file mode 100644
index 0000000..504d428
--- /dev/null
+++ b/oceanarray/report/_css.py
@@ -0,0 +1,201 @@
+"""Shared CSS for the report HTML pages, generated from the design tokens.
+
+``emit_css(package)`` builds the whole stylesheet string from
+``..config.report_tokens`` — colours, typography, spacing, radii and the slot
+table — so no value is restated here.  Its output is concatenated into each page
+template's ``<style>`` block (``{{ css | safe }}``).
+
+This module is written to be **vendored** across the packages that share the
+report design system: it names no package and reads shared values only through
+``..config.report_tokens``.  Which package's accent to render is an argument to
+``emit_css``, supplied by the (package-specific) caller — so the file itself
+carries no package-specific edit (Phase A; no cross-repo hash test yet, spec §9).
+"""
+
+from __future__ import annotations
+
+from ..config.report_tokens import (
+    COLORS,
+    CONTENT_MAX_PX,
+    FONT_MONO,
+    FONT_SANS,
+    GRAYS,
+    PACKAGE_ACCENT,
+    RADII,
+    ROLE_ACCENT,
+    SEMANTIC,
+    SLOTS,
+    SPACE,
+    TYPE,
+)
+
+
+def _emit_root(package_accent: str) -> str:
+    """Return the ``:root { … }`` custom-property block built from the tokens."""
+    lines: list[str] = [":root {"]
+    for table in (COLORS, GRAYS, SEMANTIC):
+        for key, value in table.items():
+            lines.append(f"  --{key}: {value};")
+    for key, value in ROLE_ACCENT.items():
+        lines.append(f"  --role-{key}: {value};")
+    lines.append(f"  --package-accent: {package_accent};")
+    lines.append(f"  --font-sans: {FONT_SANS};")
+    lines.append(f"  --font-mono: {FONT_MONO};")
+    for name, spec in TYPE.items():
+        lines.append(f"  --fs-{name}: {spec['size']};")
+    lines.append(f"  --lh-root: {TYPE['root']['line']};")
+    for key, value in SPACE.items():
+        lines.append(f"  --sp-{key}: {value};")
+    for key, value in RADII.items():
+        lines.append(f"  --radius-{key}: {value};")
+    lines.append("}")
+    return "\n".join(lines)
+
+
+def _emit_slots() -> str:
+    """Return the ``.slot-*`` width classes generated from the slot table.
+
+    Each width is ``fraction`` of the row minus a ``(1 - fraction) rem`` share of
+    the 1 rem flex gap, so the columns of a ``.fig-row`` tile without overflow.
+    """
+    out: list[str] = []
+    for name, (frac, _inch) in SLOTS.items():
+        if frac >= 1.0:
+            out.append(f".slot-{name}         {{ width: 100%; }}")
+        else:
+            out.append(
+                f".slot-{name:<14s}{{ width: calc({frac * 100:.4g}% - {1 - frac:.2f}rem); }}"
+            )
+    return "\n".join(out)
+
+
+def emit_css(package: str) -> str:
+    """Return the full shared stylesheet as a string, generated from the tokens.
+
+    Reproduces the established page look from the design tokens (spec §12–15 v2.0
+    are the current values, not a redesign).  The only additions over
+    the previous hand-written stylesheet are the package accent's two homes — a
+    masthead ``.wordmark`` and the footer's ``border-top`` — plus the ``78ch``
+    reading measure and the structural ``break-inside`` print rules.
+
+    Parameters
+    ----------
+    package : str
+        Which package's accent to render (a key into ``PACKAGE_ACCENT``).  Passed
+        by the package-specific caller; the function itself names no package.
+    """
+    root = _emit_root(PACKAGE_ACCENT[package])
+    slots = _emit_slots()
+    return f"""\
+{root}
+* {{ box-sizing: border-box; }}
+body {{
+  font-family: var(--font-sans);
+  font-size: var(--fs-root); color: var(--text);
+  max-width: {CONTENT_MAX_PX}px; margin: 0 auto;
+  padding: 1.5rem 2rem 4rem; line-height: var(--lh-root);
+}}
+p, li {{ max-width: 78ch; }}
+.masthead {{
+  background: var(--ocean); color: #fff; position: relative;
+  padding: 1.6rem 2rem; border-radius: 8px; margin-bottom: 2rem;
+}}
+.masthead h1 {{ margin: 0 0 0.3rem; font-size: var(--fs-h1); font-weight: 700; }}
+.masthead .sub {{ font-size: var(--fs-meta); opacity: 0.85; margin: 0 0 0.15rem; }}
+.wordmark {{
+  position: absolute; right: 2rem; bottom: 1.2rem;
+  font-size: var(--fs-dt); font-weight: 700; letter-spacing: 0.04em;
+  color: var(--package-accent); background: #fff; opacity: 0.85;
+  padding: 0.1rem 0.5rem; border-radius: 999px; text-decoration: none;
+}}
+.wordmark:hover {{ opacity: 1; }}
+.meta-grid {{
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  gap: 0.5rem 2rem; font-size: var(--fs-meta); margin-top: 0.9rem;
+}}
+.meta-grid dt {{
+  opacity: 0.7; text-transform: uppercase; font-size: var(--fs-dt);
+  letter-spacing: 0.06em; margin-bottom: 0.1rem;
+}}
+.meta-grid dd {{ margin: 0; font-weight: 600; }}
+h2 {{
+  color: var(--ocean); font-size: var(--fs-h2);
+  border-bottom: 2px solid var(--seafoam);
+  padding-bottom: 0.3rem; margin: 2.5rem 0 1rem;
+  display: flex; justify-content: space-between; align-items: baseline;
+}}
+.top-link {{
+  font-size: var(--fs-top); font-weight: 400; color: var(--muted);
+  text-decoration: none; margin-left: auto;
+}}
+.top-link:hover {{ color: var(--ocean); text-decoration: underline; }}
+.note {{
+  color: var(--gray-5); font-size: var(--fs-note);
+  margin-top: -0.5rem; margin-bottom: 0.75rem;
+}}
+.jump-nav {{
+  background: var(--seafoam); padding: 0.55rem 1rem;
+  border-radius: 6px; margin-bottom: 1.5rem;
+  font-size: var(--fs-nav); line-height: 2.2;
+}}
+.jump-nav::before {{ content: "Jump to: "; opacity: 0.55; font-size: var(--fs-xs); margin-right: 0.25rem; }}
+.jump-nav a {{
+  color: var(--ocean); text-decoration: none;
+  font-weight: 600; margin: 0 0.5rem 0 0;
+}}
+.jump-nav a::before {{ content: "▸ "; font-size: var(--fs-dt); }}
+.fig-row {{
+  display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;
+  align-items: flex-start;
+}}
+.fig-col {{ display: flex; flex-direction: column; gap: 0.75rem; }}
+figure {{ margin: 0; }}
+figure img {{
+  border: 1px solid var(--rule); border-radius: 4px;
+  display: block; width: 100%; height: auto;
+}}
+figcaption {{ font-size: var(--fs-cap); color: var(--gray-5); margin-top: 0.25rem; }}
+{slots}
+.masthead-header {{
+  display: flex; justify-content: space-between; align-items: flex-start;
+  margin-bottom: 0.3rem;
+}}
+.masthead-header h1 {{ margin: 0 0 0.1rem; font-size: var(--fs-h1); font-weight: 700; }}
+.masthead-type {{
+  font-size: var(--fs-type); font-weight: 700; opacity: 0.88; line-height: 1.35;
+  padding-top: 0.25rem;
+}}
+.nav-btns {{ display: flex; gap: 0.5rem; }}
+.btn-nav {{
+  background: var(--ocean); color: #fff; padding: 0.25rem 0.75rem;
+  border-radius: 999px; text-decoration: none; font-size: var(--fs-nav);
+}}
+.btn-nav:hover {{ opacity: 0.85; }}
+footer {{
+  text-align: center; padding: 1rem;
+  border-top: 1px solid var(--package-accent);
+  font-size: var(--fs-xs); color: var(--muted);
+}}
+footer a {{ color: var(--muted); }}
+@media print {{
+  body {{ max-width: 100%; }}
+  .masthead {{ -webkit-print-color-adjust: exact; print-color-adjust: exact; padding: 0.9rem 1.25rem; }}
+  .masthead-header h1, .masthead h1 {{ font-size: 1.35rem; }}
+  .meta-grid {{ grid-template-columns: repeat(4, 1fr); gap: 0.3rem 1rem; font-size: var(--fs-xs); }}
+  h2 {{ page-break-after: avoid; }}
+  .fig-row, figure, table {{ break-inside: avoid; }}
+  .jump-nav {{ display: none; }}
+}}
+"""
+
+
+_JS_TOP_LINKS: str = """\
+<script>
+document.querySelectorAll('h2').forEach(h => {
+  const a = document.createElement('a');
+  a.href = '#top'; a.className = 'top-link'; a.textContent = '↑ top';
+  h.appendChild(a);
+});
+</script>
+"""
diff --git a/oceanarray/report/_encode.py b/oceanarray/report/_encode.py
new file mode 100644
index 0000000..cd86664
--- /dev/null
+++ b/oceanarray/report/_encode.py
@@ -0,0 +1,134 @@
+"""The encoder — the single place a matplotlib Figure becomes base64 PNG bytes.
+
+This module is written to be **vendored** across the packages that share the
+report design system.  It is package-neutral — it references shared values only
+through ``..config.report_tokens`` (textually identical in each package) and
+names no package — so the copies can be frozen and checked later; for now this
+document and convention are the shared reference (no cross-repo hash test yet).
+
+One choke point (:func:`render_b64`) is where the report mplstyle is applied,
+the layout guard runs, dpi and palette quantization are chosen, memory is
+bounded, and error policy is decided.  Layer 3 in the spec's layer model.
+"""
+
+from __future__ import annotations
+
+import base64
+import io
+import warnings
+from collections.abc import Callable
+from typing import Any
+
+import matplotlib.pyplot as plt
+from PIL import Image
+
+from ..config import report_tokens as _tok
+from ..config.report_tokens import FIG_DPI, MPLSTYLE_PATH, PNG_PALETTE_COLORS
+
+
+def _manages_own_layout(fig: Any) -> bool:
+    """Return True when ``tight_layout()`` must be skipped for *fig*.
+
+    Two cases, both mutually exclusive with ``tight_layout``:
+
+    - a ``constrained_layout`` figure (matplotlib warns and mis-renders),
+    - a figure containing a polar axis (bounding box is mis-computed).
+
+    When a figure uses constrained layout — as the shared design intends — this
+    returns True and ``tight_layout`` is skipped.  Figures that still rely on
+    ``tight_layout`` return False here (True only for a polar axis).  The former outside-legend branch is withdrawn: growing the
+    image to fit a legend is exactly what breaks the displayed-type invariant, so
+    the fix is a fixed canvas with ``constrained_layout`` shrinking the axes
+    instead — or, for an aspect-locked figure that is exempt from the exact-width
+    invariant, an explicit ``bbox_inches="tight"`` in :func:`_fig_to_base64`.
+    """
+    engine = getattr(fig.get_layout_engine(), "__class__", None)
+    if engine is not None and "Constrained" in engine.__name__:
+        return True
+    return any(ax.name == "polar" for ax in fig.axes)
+
+
+def _fig_to_base64(fig: Any, *, bbox_inches: str | None = None) -> str:
+    """Render *fig* to a quantized PNG and return its base64 string.
+
+    By default (``bbox_inches=None``) saves the **full canvas** at
+    :data:`FIG_DPI`, so ``png_px == round(fig_in × dpi)`` exactly — the
+    displayed-type invariant that keeps figure text the same on-screen size
+    across slot figures.  Pass ``bbox_inches="tight"`` only for an aspect-locked
+    figure that is exempt from that invariant (a map, a section) and that draws a
+    decoration outside its fixed canvas — e.g. the all-sections overview map's
+    legend anchored east of the axes, which the full canvas would otherwise clip.
+
+    Composites onto white to drop the alpha channel (report backgrounds are
+    white), quantizes to :data:`PNG_PALETTE_COLORS` (these figures are few-colour
+    by construction — line art plus discrete colorbars — so an 8-bit palette is
+    visually lossless and ~3.6× smaller), and encodes the result.
+    """
+    buf = io.BytesIO()
+    fig.savefig(buf, format="png", dpi=FIG_DPI, bbox_inches=bbox_inches)
+    buf.seek(0)
+    im = Image.open(buf).convert("RGBA")
+    bg = Image.new("RGBA", im.size, (255, 255, 255, 255))
+    rgb = Image.alpha_composite(bg, im).convert(
+        "RGB"
+    )  # alpha must go before quantizing
+    pal = rgb.quantize(colors=PNG_PALETTE_COLORS, method=Image.FASTOCTREE)
+    out = io.BytesIO()
+    pal.save(out, "PNG", optimize=True)
+    return base64.b64encode(out.getvalue()).decode("ascii")
+
+
+def render_b64(
+    draw: Callable[..., Any],
+    /,
+    *args: Any,
+    optional: bool = False,
+    **kwargs: Any,
+) -> str | None:
+    """Run *draw* under the report mplstyle and return a base64 PNG, or None.
+
+    Parameters
+    ----------
+    draw : callable
+        A ``draw_*`` function returning a :class:`matplotlib.figure.Figure`, or
+        ``None`` when the dataset lacks the required variables.
+    *args, **kwargs
+        Forwarded to *draw*.
+    optional : bool
+        ``True`` when this panel is legitimately absent for some inputs (no
+        secondary sensor fitted, a biogeochemical variable not measured).  When
+        ``False`` (default) and :data:`report_tokens.RAISE_ON_PLOT_ERROR` is set,
+        a ``None`` return raises so tests catch silently dropped required panels.
+
+    Returns
+    -------
+    str or None
+        Base64-encoded PNG bytes, or ``None`` when *draw* returned ``None`` or
+        raised (unless ``RAISE_ON_PLOT_ERROR`` is set).
+    """
+    fig = None
+    try:
+        with plt.style.context(str(MPLSTYLE_PATH)):
+            fig = draw(*args, **kwargs)
+            if fig is None:
+                if _tok.RAISE_ON_PLOT_ERROR and not optional:
+                    raise RuntimeError(
+                        f"{draw.__name__} returned None for a required panel; "
+                        "check that all required variables are present in the dataset."
+                    )
+                return None
+            if not _manages_own_layout(fig):
+                fig.tight_layout()
+            return _fig_to_base64(fig)
+    except Exception:  # noqa: BLE001
+        if _tok.RAISE_ON_PLOT_ERROR:
+            raise
+        warnings.warn(
+            f"{draw.__name__} failed; panel omitted",
+            RuntimeWarning,
+            stacklevel=2,
+        )
+        return None
+    finally:
+        if fig is not None:
+            plt.close(fig)
diff --git a/oceanarray/report/_pdf.py b/oceanarray/report/_pdf.py
index 5cbec30..e68b0c7 100644
--- a/oceanarray/report/_pdf.py
+++ b/oceanarray/report/_pdf.py
@@ -42,11 +42,10 @@
     height: auto;
     break-inside: avoid;
 }
-/* A single <img> cannot split across PDF pages, so a tall multipanel figure
-   would overflow the page bottom.  Cap figure height to (about) the A4 content
-   height so such figures scale down to fit one page.  (Proper fix is to
-   paginate multipanel figures into <=5-panel images — tracked as report-figures
-   #10.)  A4 usable height ~26cm minus room for a heading/note above the figure. */
+/* A single <img> cannot split across PDF pages.  Multipanel figures are already
+   paginated into <=5-panel images (report-figures #10), so this cap is only a
+   backstop for any residual over-budget figure: it scales a too-tall image down
+   to fit one page.  A4 usable height ~26cm minus room for a heading/note above. */
 img.fig {
     max-height: 22cm;
 }
diff --git a/oceanarray/report/_plots.py b/oceanarray/report/_plots.py
index 3ba81bd..27a62c8 100644
--- a/oceanarray/report/_plots.py
+++ b/oceanarray/report/_plots.py
@@ -47,6 +47,7 @@
     _CANONICAL_PANELS,
     _COMPACT_PANEL_VARS,
     _COMPACT_PANEL_HEIGHT,
+    _PANEL_HEIGHT,
     draw_windows,
     draw_data_histogram,
     draw_velocity_iqr_profile,
@@ -356,7 +357,7 @@ def _build_fig_from_ds(
     with plt.style.context(str(params.MPLSTYLE)):
         nrows = len(panels)
         height_ratios = [
-            _COMPACT_PANEL_HEIGHT if vname in _COMPACT_PANEL_VARS else 2.0
+            _COMPACT_PANEL_HEIGHT if vname in _COMPACT_PANEL_VARS else _PANEL_HEIGHT
             for vname, *_ in panels
         ]
         fig, axs = plt.subplots(
@@ -564,7 +565,7 @@ def _make_windows_fig(
             show_qc,
             vlines,
             stage1_nc,
-            chunk,
+            panels=chunk,
             optional=True,
         )
         if b64:
diff --git a/pyproject.toml b/pyproject.toml
index 5867cf9..213efa0 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -63,6 +63,7 @@ include = ["oceanarray", "oceanarray.*"]
 [tool.setuptools.package-data]
 oceanarray = [
   "oceanarray.mplstyle",
+  "config/*.mplstyle",   # vendored report.mplstyle — MPLSTYLE_PATH resolves it at runtime
   "config/*.yaml",
   "config/legacy/*.yaml",
 ]
@@ -143,6 +144,11 @@ ignore = [
 # Report generators: every function wraps rendering in try/except → None on failure.
 # This is the established pattern for keeping HTML reports partially working on bad data.
 "oceanarray/report/_plots.py" = ["BLE001", "TRY300", "TRY301", "TRY003"]
+# Vendored byte-identical from ../ctdcast (shared report foundation, spec §9); kept
+# identical for the planned cross-repo hash check, so lint exemptions live here rather
+# than as edits that would fork the copy. Same try/except-to-None pattern as _plots.py.
+"oceanarray/report/_encode.py" = ["TRY301", "TRY003", "D413"]
+"oceanarray/report/_css.py" = ["D413"]  # vendored; docstring section-blank-line style
 "oceanarray/report/_html_helpers.py" = ["BLE001", "TRY300"]
 "oceanarray/report/_grid.py" = ["BLE001", "TRY300"]
 "oceanarray/report/_instrument.py" = ["BLE001", "TRY300", "ARG001"]
diff --git a/tests/unit/test_report_tokens.py b/tests/unit/test_report_tokens.py
new file mode 100644
index 0000000..66c9f8f
--- /dev/null
+++ b/tests/unit/test_report_tokens.py
@@ -0,0 +1,149 @@
+"""Enforcement tests for the vendored report design tokens and encoder.
+
+These pin the invariants from the report specification (spec §10, §11, §14) that
+keep one ``font.size`` rendering at one on-screen size across every figure. They
+test the token module directly — no rendered page needed — so they belong in the
+foundation phase. The page-dependent §10 tests (geometry on a rendered fixture,
+stray-typography grep, self-containment, optional ratio, caption classification)
+are added as the encoder/tokens are wired in; skipped stubs below name the phase
+that turns each on.
+"""
+
+import base64
+import io
+
+import matplotlib
+
+matplotlib.use("Agg")
+import matplotlib.pyplot as plt
+import pytest
+
+from oceanarray.config import report_tokens as tok
+from oceanarray.report import _encode
+
+
+# ---------------------------------------------------------------------------
+# Slot contract (spec §10.1) and geometry (spec §11, §14)
+# ---------------------------------------------------------------------------
+
+
+def test_slot_contract_inches_equals_wfull_times_fraction():
+    """Every slot's width in inches is exactly ``W_FULL * fraction`` (spec §10.1)."""
+    for name, (frac, inches) in tok.SLOTS.items():
+        assert abs(inches - tok.W_FULL * frac) < 1e-9, name
+
+
+def test_usable_px_is_derived():
+    """``USABLE_PX`` is the content box minus both paddings (spec §11)."""
+    assert tok.USABLE_PX == tok.CONTENT_MAX_PX - 2 * tok.CONTENT_PAD_PX
+    assert tok.USABLE_PX == 1086
+
+
+def test_oversample_value():
+    """``OVERSAMPLE`` evaluates to ≈1.2431 for the chosen W_FULL/FIG_DPI (spec §11).
+
+    Asserting the numeric value (not re-deriving the module's own expression, which
+    would be tautological): if the free pair W_FULL/FIG_DPI or USABLE_PX is retuned
+    away from a ~1.24 oversample, this flags it.
+    """
+    assert abs(tok.OVERSAMPLE - 1.2431) < 1e-3
+
+
+def test_png_palette_colors():
+    """8-bit palette quantization uses 256 colours (spec §4.5)."""
+    assert tok.PNG_PALETTE_COLORS == 256
+
+
+@pytest.mark.parametrize(
+    "slot,expected_px",
+    [
+        ("full", 1350),
+        ("twothirds", 900),
+        ("three-fifths", 810),
+        ("half", 675),
+        ("two-fifths", 540),
+        ("third", 450),
+    ],
+)
+def test_png_width_table(slot, expected_px):
+    """Each slot's saved PNG width is ``round(inches * FIG_DPI)`` (spec §14)."""
+    inches = tok.SLOTS[slot][1]
+    assert round(inches * tok.FIG_DPI) == expected_px
+
+
+def test_width_aliases_match_slots():
+    """The ergonomic ``W_*`` aliases equal their slot widths."""
+    assert tok.W_TWOTHIRDS == tok.SLOTS["twothirds"][1]
+    assert tok.W_THREE_FIFTHS == tok.SLOTS["three-fifths"][1]
+    assert tok.W_HALF == tok.SLOTS["half"][1]
+    assert tok.W_TWO_FIFTHS == tok.SLOTS["two-fifths"][1]
+    assert tok.W_THIRD == tok.SLOTS["third"][1]
+
+
+def test_mplstyle_path_resolves():
+    """``MPLSTYLE_PATH`` points at the vendored report mplstyle next to the tokens."""
+    assert tok.MPLSTYLE_PATH.exists()
+    assert tok.MPLSTYLE_PATH.name == "report.mplstyle"
+
+
+# ---------------------------------------------------------------------------
+# Encoder smoke (spec §3, §4.2, §4.5) — not yet wired into report generation
+# ---------------------------------------------------------------------------
+
+
+def _trivial_fig() -> "plt.Figure":
+    """Return a minimal single-axes Figure for the encoder smoke test."""
+    fig, ax = plt.subplots(figsize=(tok.W_FULL, 4))
+    ax.plot([0, 1], [0, 1])
+    return fig
+
+
+def test_render_b64_returns_base64_string():
+    """``render_b64`` renders under the report style and returns a base64 PNG."""
+    result = _encode.render_b64(_trivial_fig)
+    assert isinstance(result, str) and result
+    # decodes to a PNG (starts with the PNG signature)
+    assert base64.b64decode(result)[:8] == b"\x89PNG\r\n\x1a\n"
+
+
+def test_fig_to_base64_full_canvas_width_matches_fig_dpi():
+    """Full-canvas save (no bbox) yields ``round(W_FULL * FIG_DPI)`` px (spec §4.2)."""
+    from PIL import Image
+
+    with plt.style.context(str(tok.MPLSTYLE_PATH)):
+        fig, ax = plt.subplots(figsize=(tok.W_FULL, 4))
+        ax.plot([0, 1], [0, 1])
+        b64 = _encode._fig_to_base64(fig)
+        plt.close(fig)
+    im = Image.open(io.BytesIO(base64.b64decode(b64)))
+    assert im.size[0] == round(tok.W_FULL * tok.FIG_DPI)  # 1350
+
+
+# ---------------------------------------------------------------------------
+# Deferred §10 enforcement — stubs naming the phase that turns each on
+# ---------------------------------------------------------------------------
+
+
+@pytest.mark.skip(reason="Phase 4: §10.2 PNG-geometry over a rendered fixture page")
+def test_png_geometry_on_rendered_page():
+    """Every data: URI in a rendered page is round(SLOTS[slot].inches * FIG_DPI) wide."""
+
+
+@pytest.mark.skip(reason="Phase 4: §10.3 no stray fontsize=/linewidth= in plotters")
+def test_no_stray_typography():
+    """No fontsize=/size=/font-size:/linewidth= outside the named allow-list."""
+
+
+@pytest.mark.skip(reason="Phase 5: §10.4 self-containment (no http src/link)")
+def test_self_containment():
+    """No src=\"http, no <link> absolute URL; a href exempt."""
+
+
+@pytest.mark.skip(reason="Phase 7: §10.5 optional=True on <=40% of render_b64 sites")
+def test_optional_ratio():
+    """optional=True passed at no more than 40% of render_b64 call sites."""
+
+
+@pytest.mark.skip(reason="Phase 6: §10.6 no caption misfiled as .explainer")
+def test_caption_classification():
+    """No .explainer contains a colour/unit/direction token outside the allow-list."""