/* Hallmark · shape: Narrative Workflow · genre: modern-minimal · theme: Rim (deal 2/3, seed free-download-windows-program-1b62·2241b105·2026-11-06·r0) · job: try · draw: 022aa0
 * hero: Stage · nav: slab · footer: mast · imagery: the product · signature: the real pairing window, scanned once
 * axes: dark/grotesk-sans/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R4 V4 · weakest: S, no picture of the iPad itself until a real one exists, so the real pairing window carries the page */
@import url("./tokens.css");
@import url("./base.css");

html { background: var(--color-paper); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-size: 17px; line-height: 1.55; }
.wrap { width: min(100%, 76rem); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
h1, h2, h3 { color: var(--color-ink); font-family: var(--font-display); font-weight: var(--display-weight); line-height: 1.02; margin: 0; overflow-wrap: break-word; min-width: 0; }
h1 { font-size: clamp(2.75rem, 6vw, 4.75rem); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-section, clamp(1.9rem, 3.6vw, 3.25rem)); letter-spacing: -0.03em; text-wrap: balance; padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
h3 { font-size: var(--text-title, 1.5rem); letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--color-ink); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.slab { border-bottom: 1px solid var(--color-rule); background: var(--color-paper-2); }
.slab-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; flex-wrap: wrap; }
.mark { font-weight: 500; text-decoration: none; }
.slab nav { display: flex; gap: var(--space-md); font-size: 0.95rem; }
.slab nav a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.slab nav a:hover { text-decoration: underline; color: var(--color-ink); }

.hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl); align-items: center; padding-block: var(--space-xl); }
.lede { margin-top: var(--space-md); font-size: 1.3rem; line-height: 1.4; max-width: 30ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.note { margin-top: var(--space-md); font-size: 0.95rem; color: var(--color-muted); max-width: 60ch; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-rule); border-radius: 0; background: none; color: var(--color-ink); font-weight: 500; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-paper-3); border-color: var(--color-muted); color: var(--color-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-focus); border-color: var(--color-focus); color: var(--color-accent-ink); }

.well { position: relative; background: var(--color-paper-2); }
.shot { margin: 0; justify-self: end; width: 100%; max-width: 30rem; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: var(--space-sm); font-size: 0.9rem; color: var(--color-muted); }
.ticks::before, .ticks::after { content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--color-muted); pointer-events: none; z-index: var(--z-raised); }
.ticks::before { top: calc(-1 * var(--space-xs)); left: calc(-1 * var(--space-xs)); border-width: 1px 0 0 1px; }
.ticks::after { right: calc(-1 * var(--space-xs)); bottom: calc(-1 * var(--space-xs)); border-width: 0 1px 1px 0; }

main > section { padding-block: var(--section-gap-s); }
main > .hero { padding-block: var(--space-3xl); min-height: calc(100svh - 65px); box-sizing: border-box; }
.band { background: var(--color-paper-2); color: var(--color-ink-2); border-block: 1px solid var(--color-rule); }

.rows { list-style: none; margin: var(--space-lg) 0 0; padding: 0; }
.rows li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--color-rule-2); align-items: baseline; }
.rows li:first-child { border-top: 0; }
.rows--num { counter-reset: step; }
.rows--num li { counter-increment: step; }
.rows--num h3::before { content: counter(step) ". "; color: var(--color-accent); }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-lg); }
.plain { margin: var(--space-sm) 0 0; padding-left: 1.1em; }
.plain li { padding-block: var(--space-2xs); }

.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-lg) 0 0; }
.figures > div { padding-inline: var(--space-md); border-left: 1px solid var(--color-rule); }
.figures > div:first-child { padding-left: 0; border-left: 0; }
.figures dt { font-size: 0.95rem; font-weight: 500; color: var(--color-muted); }
.figures dd { margin: var(--space-xs) 0 0; color: var(--color-ink); font-variant-numeric: tabular-nums; font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -0.03em; }
.measure { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.measure small { font-size: 0.5em; color: var(--color-muted); letter-spacing: 0; }

.closing { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); }
.closing h2 + p { margin-top: var(--space-md); }
.dl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.dl li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-md); align-items: center; }

.mast { padding-block: var(--space-xl); color: var(--color-muted); font-size: 0.95rem; }
.mast p { max-width: 70ch; margin-top: var(--space-sm); }
.mast-name { color: var(--color-ink); font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 7vw, 5rem); letter-spacing: var(--tracking-display); line-height: 1; margin-top: 0 !important; margin-bottom: var(--space-md); max-width: none !important; }

::selection { background: color-mix(in oklab, var(--color-accent) 35%, transparent); color: var(--color-ink); }

@media (max-width: 52rem) {
  :root { --gutter: 16px; --section-gap-s: 72px; }
  main > .hero { min-height: 0; padding-block: var(--space-2xl); }
  .hero, .closing, .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .shot { justify-self: start; max-width: 20rem; }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .figures { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .figures > div { padding-left: 0; border-left: 0; }
  .dl li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .slab nav a:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }