/* Pockitect site r4: one drawing set, drawn in front of you.
 * Colour: brand/color/tokens.css exactly; no other colour below. flag red has one meaning: a check that fails.
 * Type: Familjen Grotesk (OFL) for reading, DM Mono (OFL) for labels; self-hosted, licences beside the files. */
@font-face { font-family: "Familjen Grotesk"; src: url("/assets/fonts/familjen-grotesk-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/assets/fonts/dm-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/assets/fonts/dm-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --pk-ink: #141414;
  --pk-ink-secondary: #66665F;
  --pk-ink-faint: #A3A39D;
  --pk-paper: #F5F5F2;
  --pk-sheet: #FBFBF9;
  --pk-panel: #E8E8E4;
  --pk-rule: #D4D4CF;
  --pk-flag: #C8102E;
  --pk-lamp: #2F8F4E;
  color-scheme: light dark;

  --sans: "Familjen Grotesk", ui-sans-serif, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --edge: 8px;
  --head: 56px;
  --gut: 24px;
  --hair: 1px;
  --wrap: 1360px;
  --s1: 24px; --s2: 48px; --s3: clamp(64px, 7vw, 104px);
  --out: cubic-bezier(.455, .03, .515, .955);
  --p2: cubic-bezier(.33, 1, .68, 1);          /* power2.out */
}
@media (prefers-color-scheme: dark) {
  :root {
    --pk-ink: #F0F0EC;
    --pk-ink-secondary: #A6A6A0;
    --pk-ink-faint: #6C6C67;
    --pk-paper: #141414;
    --pk-sheet: #141414;
    --pk-panel: #232322;
    --pk-rule: #383836;
    --pk-flag: #F0485F;
    --pk-lamp: #4CC274;
  }
}
@media (min-resolution: 2dppx) { :root { --hair: .5px; } }

/* ---------------------------------------------------------------- page turns (assets/turn.js): paper, not a hinge */
.turn { position: fixed; top: calc(var(--edge) + var(--head)); left: calc(var(--edge) + 1px); right: calc(var(--edge) + 1px); bottom: calc(var(--edge) + 1px); overflow: clip; z-index: 4; pointer-events: none; --t-sh: var(--pk-ink); --t-hi: var(--pk-sheet); --t-back: var(--pk-sheet); }
html.turning .turn { pointer-events: auto; cursor: grab; touch-action: none; }
.t-under { position: absolute; inset: 0; background: var(--pk-paper); }
.t-clip { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: clip; will-change: transform; }
.t-page { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: clip; background: var(--pk-paper); will-change: transform; }
.t-back { background: var(--t-back); box-shadow: 0 0 46px color-mix(in srgb, var(--t-sh) 24%, transparent); }
.t-snap, .t-ghost { position: absolute; inset: 0; }
.t-ghost { opacity: .075; }
.t-curl, .t-bend, .t-shade { position: absolute; left: 0; top: 0; width: 1px; height: 100%; transform-origin: 0 0; }
.t-clip > .t-shade { height: 100%; }
.t-curl { height: 300vmax; background: linear-gradient(to right, color-mix(in srgb, var(--t-sh) 30%, transparent), color-mix(in srgb, var(--t-sh) 10%, transparent) 16%, color-mix(in srgb, var(--t-hi) 70%, transparent) 34%, color-mix(in srgb, var(--t-sh) 6%, transparent) 62%, transparent); }
.t-bend { height: 300vmax; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--t-sh) 14%, transparent)); }
.t-shade { background: linear-gradient(to right, color-mix(in srgb, var(--t-sh) 34%, transparent), color-mix(in srgb, var(--t-sh) 12%, transparent) 30%, transparent); }
.t-crease { position: absolute; left: 0; top: 0; bottom: 0; width: 84px; background: linear-gradient(to right, color-mix(in srgb, var(--t-sh) 22%, transparent), transparent); opacity: 0; }
.t-edge { position: fixed; right: calc(var(--edge) + 1px); top: calc(var(--edge) + var(--head)); bottom: calc(var(--edge) + 1px); width: 18px; z-index: 5; touch-action: none; cursor: grab; }
.t-edge::after { content: ""; position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; background: linear-gradient(225deg, var(--pk-paper) 49%, var(--pk-rule) 50%, var(--pk-sheet) 52%); opacity: .9; }
@media (prefers-color-scheme: dark) { .turn { --t-sh: var(--pk-paper); --t-hi: var(--pk-ink); --t-back: var(--pk-panel); } .t-ghost { opacity: .1; } .t-shade { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .t-edge { display: none; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--pk-paper); }
html, body { overflow-x: clip; }
body { margin: 0; padding: 0 calc(var(--edge) + 1px); background: var(--pk-paper); color: var(--pk-ink); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; font-kerning: normal; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--pk-ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--pk-ink-faint); transition: text-decoration-color .15s; }
a:hover { text-decoration-color: var(--pk-ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--pk-ink); outline-offset: 3px; }
::selection { background: var(--pk-ink); color: var(--pk-paper); }
.skip { position: absolute; left: 24px; top: -96px; background: var(--pk-ink); color: var(--pk-paper); padding: 8px 16px; border-radius: 4px; text-decoration: none; z-index: 20; }
.skip:focus-visible { top: 16px; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; }

/* ---------------------------------------------------------------- type */
[id], section { scroll-margin-top: calc(var(--head) + var(--edge) + 24px); }
h1, h2, h3, .display { font-family: var(--sans); font-weight: 500; text-wrap: balance; font-feature-settings: "kern"; }
h1 { font-size: clamp(46px, 6.1vw, 92px); line-height: .98; letter-spacing: -.028em; }
h2 { font-size: clamp(34px, 4.1vw, 62px); line-height: 1; letter-spacing: -.024em; }
h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
p { text-wrap: pretty; }
.lede { font-size: 17px; line-height: 1.5; max-width: 34em; color: var(--pk-ink); }
.body { font-size: 15.5px; line-height: 1.55; color: color-mix(in srgb, var(--pk-ink) 82%, var(--pk-paper)); }
.small { font-size: 13.5px; line-height: 1.5; color: var(--pk-ink-secondary); }
.label, .mono { font: 500 11px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pk-ink-secondary); font-variant-numeric: tabular-nums; }
.tm { font-size: .55em; vertical-align: .9em; line-height: 0; margin-left: .04em; }
blockquote p { font-size: 22px; line-height: 1.3; letter-spacing: -.01em; hanging-punctuation: first; }
/* SplitText line masks (.ln-mask): tall enough to hold ascenders, accents and descenders (g, p, y, j) while a line
   rises; the negative margins keep the leading as it was. Once a line has landed the split is reverted (motion.js), so
   at rest there is no mask at all. */
.ln-mask { padding: .12em 0 .28em; margin: -.12em 0 -.28em; }

/* ---------------------------------------------------------------- the sheet: frame, rulers, registration marks */
.frame { position: fixed; inset: var(--edge); border: var(--hair) solid var(--pk-rule); pointer-events: none; z-index: 7; }
.frame i { position: absolute; width: 13px; height: 13px; }
.frame i::before, .frame i::after { content: ""; position: absolute; background: var(--pk-ink-secondary); }
.frame i::before { left: 6px; top: 0; width: 1px; height: 13px; }
.frame i::after { top: 6px; left: 0; height: 1px; width: 13px; }
.frame i:nth-child(1) { left: -7px; top: -7px; } .frame i:nth-child(2) { right: -7px; top: -7px; }
.frame i:nth-child(3) { left: -7px; bottom: -7px; } .frame i:nth-child(4) { right: -7px; bottom: -7px; }
.frame b { position: absolute; background: var(--pk-ink-faint); }
.frame b.rx { left: 0; right: 0; top: calc(var(--head) + 1px); height: 8px; -webkit-mask: url("/assets/img/ruler-x.svg") repeat-x 0 0 / 100px 8px; mask: url("/assets/img/ruler-x.svg") repeat-x 0 0 / 100px 8px; }
.frame b.ry { top: calc(var(--head) + 1px); bottom: 0; left: 0; width: 8px; -webkit-mask: url("/assets/img/ruler-y.svg") repeat-y 0 0 / 8px 100px; mask: url("/assets/img/ruler-y.svg") repeat-y 0 0 / 8px 100px; }
.frame b.ryr { top: calc(var(--head) + 1px); bottom: 0; right: 0; width: 8px; transform: scaleX(-1); -webkit-mask: url("/assets/img/ruler-y.svg") repeat-y 0 0 / 8px 100px; mask: url("/assets/img/ruler-y.svg") repeat-y 0 0 / 8px 100px; }

/* ---------------------------------------------------------------- header */
.site-head { position: sticky; top: var(--edge); z-index: 8; display: flex; align-items: stretch; height: var(--head); margin-top: var(--edge); background: var(--pk-paper); border-bottom: var(--hair) solid var(--pk-rule); }
.site-head::before { content: ""; position: absolute; left: calc(-1 * var(--edge) - 2px); right: calc(-1 * var(--edge) - 2px); bottom: 100%; height: calc(var(--edge) + 2px); background: var(--pk-paper); }
.site-head::after { content: ""; position: absolute; left: calc(-1 * var(--edge) - 2px); right: calc(-1 * var(--edge) - 2px); top: 0; bottom: -1px; background: var(--pk-paper); z-index: -1; }
.site-head { isolation: isolate; }
.brand { position: relative; display: flex; align-items: center; padding: 0 28px 0 24px; text-decoration: none; }
.brand img { width: 150px; height: auto; }
.brand .tm-mark { position: absolute; top: 12px; right: 12px; font: 400 9px/1 var(--mono); color: var(--pk-ink-secondary); }
.nav { margin-left: auto; display: flex; }
.nav ul { display: flex; }
.nav li, .head-cta { display: flex; border-left: var(--hair) solid var(--pk-rule); }
.nav a, .head-cta { position: relative; display: flex; align-items: center; padding: 0 22px; text-decoration: none; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pk-ink-secondary); transition: color .15s; }
.nav a:hover { color: var(--pk-ink); }
.nav a[aria-current="page"] { color: var(--pk-ink); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 14px; height: 1px; background: var(--pk-ink); }
.head-cta { color: var(--pk-ink); padding: 0 24px; overflow: hidden; }
.head-cta::before { content: ""; position: absolute; inset: 0; background: var(--pk-ink-faint); -webkit-mask: url("/assets/img/hatch.svg") repeat 0 0 / 6px 6px; mask: url("/assets/img/hatch.svg") repeat 0 0 / 6px 6px; clip-path: inset(0 100% 0 0); transition: clip-path .5s steps(12, end); z-index: -1; }
.head-cta:hover::before, .head-cta:focus-visible::before { clip-path: inset(0 0 0 0); }
.head-cta { isolation: isolate; }
.menu-btn { display: none; }

/* ---------------------------------------------------------------- buttons: ink plates, hatch on hover */
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 18px; border-radius: 4px; border: 1px solid var(--pk-ink); background: var(--pk-ink); color: var(--pk-paper); text-decoration: none; font: 500 15px/1 var(--sans); letter-spacing: -.005em; overflow: hidden; cursor: pointer; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pk-paper); opacity: .32; -webkit-mask: url("/assets/img/hatch.svg") repeat 0 0 / 6px 6px; mask: url("/assets/img/hatch.svg") repeat 0 0 / 6px 6px; clip-path: inset(0 100% 0 0); transition: clip-path .5s steps(12, end); }
.btn:hover::before, .btn:focus-visible::before { clip-path: inset(0 0 0 0); }
.btn .tick { width: 14px; height: 10px; flex: none; }
.btn .tick path { fill: none; stroke: currentColor; stroke-width: 1.2; }
.btn.secondary { background: transparent; color: var(--pk-ink); }
.btn.secondary::before { background: var(--pk-ink-faint); opacity: 1; }
.btn:active { transform: translateY(1px); }
.write { font-size: 13.5px; color: var(--pk-ink-secondary); }

/* ---------------------------------------------------------------- hero: one drawing, almost no words */
.hero { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: calc(100svh - var(--head) - 2 * var(--edge) - 1px); min-height: 600px; max-height: 1180px; }
.plate { position: relative; container-type: size; min-height: 0; overflow: clip; touch-action: pan-y; }
.plate .art { position: absolute; left: 50%; bottom: 0; width: min(100cqw - 32px, (100cqh - 20px) * 7 / 3); aspect-ratio: 7 / 3; transform: translateX(-50%); }
.plate .art picture, .plate .art picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate .art .ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plate .art .ov svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plate .cap { position: absolute; right: 24px; top: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; z-index: 2; text-align: right; }
.plate .cap .label { color: var(--pk-ink-secondary); }
.plate .cap .label b { color: var(--pk-ink); font-weight: 500; }
.hint { position: absolute; z-index: 3; pointer-events: none; padding: 0 0 3px; border-bottom: 1px solid var(--pk-ink); color: var(--pk-ink); text-shadow: 0 0 3px var(--pk-paper), 0 0 6px var(--pk-paper); font: 500 10.5px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.run-check { position: absolute; right: 24px; top: 72px; z-index: 3; }
html.plot .run-check { opacity: 0; }
.band { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); border-top: var(--hair) solid var(--pk-rule); }
.band > * { padding: 20px 24px 22px; border-left: var(--hair) solid var(--pk-rule); min-width: 0; }
.band > :first-child { border-left: 0; }
.hero h1 { font-size: clamp(46px, 5.4vw, 92px); }
.hero .band > * { padding: 22px 28px 26px; }
.hero .t-act { justify-content: space-between; }
.hero .t-act .lede { max-width: 26em; }
.plot-pct { position: absolute; left: 24px; top: 20px; z-index: 2; opacity: 0; }
html.plotting .plot-pct { opacity: 1; }
.plot-pct b { color: var(--pk-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.sheet-tb { position: absolute; right: 0; bottom: 0; z-index: 2; display: flex; border-top: var(--hair) solid var(--pk-rule); border-left: var(--hair) solid var(--pk-rule); background: var(--pk-paper); }
.sheet-tb span { padding: 7px 12px; font: 500 10px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pk-ink-secondary); white-space: nowrap; }
.sheet-tb span + span { border-left: var(--hair) solid var(--pk-rule); }
.sheet-tb b { color: var(--pk-ink); font-weight: 500; }
.tap-hint { display: none; }
@media (hover: none) { .tap-hint { display: block; position: absolute; left: 16px; bottom: 8px; z-index: 2; } }
.plate:focus-visible { outline-offset: -4px; }
.hero .lede { font-size: 15.5px; color: color-mix(in srgb, var(--pk-ink) 82%, var(--pk-paper)); }
.hero .t-act { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.hero .t-act .actions { flex-direction: column; align-items: stretch; }
.hero .t-act .btn { justify-content: space-between; }

/* title block: the brand's frame, sheet number, title, date, scale */
.tb { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0; padding: 0 !important; }
.tb > div { padding: 10px 16px; border-bottom: var(--hair) solid var(--pk-rule); }
.tb > div:last-child { border-bottom: 0; }
.tb .no { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tb .no strong { font: 500 34px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tb .t { font-size: 13px; line-height: 1.35; color: var(--pk-ink-secondary); }
.scalebar { display: block; width: 100%; max-width: 160px; height: 18px; margin-top: 4px; color: var(--pk-ink); }
.scalebar rect.b { fill: var(--pk-ink); } .scalebar rect.w { fill: none; stroke: var(--pk-ink); stroke-width: 1; }
.scalebar text { font: 500 8px var(--mono); fill: var(--pk-ink-secondary); }

/* hero overlay: pens, dimension string, construction, checks */
.hero-plot .plot path { stroke: var(--pk-ink); }
.hero-plot .dimset .dim { fill: none; stroke: var(--pk-ink-secondary); }
.hero-plot .dimset .con { fill: none; stroke: var(--pk-ink-faint); }
.hero-plot .dimset .dim-t { fill: var(--pk-ink-secondary); }
.hero-plot .plot { opacity: 0; }
html.plot .hero-plot .plot { opacity: 1; }
html.plot .plate picture { opacity: 0; }
html.plot .hero .band > *, html.plot .sheet-tb { opacity: 0; }
.mk { pointer-events: none; }
.mk .ok path { fill: none; stroke: var(--pk-ink); stroke-width: 3; }
.mk .no path { fill: none; stroke: var(--pk-flag); stroke-width: 3.2; }
.mk .no rect.box { fill: none; stroke: var(--pk-flag); stroke-width: 2; }
.mk .lk { fill: none; stroke: var(--pk-ink-secondary); stroke-width: 1.2; }
.mk .ok path.ld, .mk .no path.ld { fill: none; stroke: var(--pk-ink); stroke-width: 1.3; }
.mk .no path.ld { stroke: var(--pk-flag); }
.mk .ok path.halo, .mk .no path.halo { fill: none; stroke: var(--pk-paper); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.mk .ok path.halo.thin, .mk .no path.halo.thin { stroke-width: 4.5; }
.mk .note text { font-family: var(--mono); font-weight: 500; letter-spacing: .03em; }
.mk .note .caught { fill: var(--pk-flag); }
.mk text.num { font-family: var(--mono); font-weight: 500; fill: var(--pk-ink); paint-order: stroke; stroke: var(--pk-paper); stroke-width: 10px; stroke-linejoin: round; }
.check-list { order: 2; margin: 0; padding: 4px 16px 10px; border-top: var(--hair) solid var(--pk-rule); }
.check-list li { display: grid; grid-template-columns: 18px 1fr; gap: 0 8px; padding: 7px 0; border-bottom: var(--hair) solid var(--pk-rule); font: 500 10.5px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.check-list li b { grid-row: span 2; font-weight: 500; }
.check-list li .v { text-transform: none; letter-spacing: 0; font: 400 13px/1.4 var(--sans); color: var(--pk-ink-secondary); }
.check-list li em { font-style: normal; color: var(--pk-flag); }
.mk .ok .note text { fill: var(--pk-ink); }
.mk .note text.v { font-weight: 400; }
.mk text { font-family: var(--mono); letter-spacing: .04em; }
.mk .no text { fill: var(--pk-flag); }
.mk .ok text { fill: var(--pk-ink); }
.mk .bg { fill: var(--pk-paper); }
.sel { fill: none; stroke: var(--pk-ink); stroke-width: 1.4; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }

.carriage-unused { position: absolute; left: 0; top: -14px; bottom: -2px; width: 0; border-left: 1px solid var(--pk-ink); z-index: 3; pointer-events: none; will-change: transform; }
.carriage .pct { position: absolute; top: 0; left: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .05em; color: var(--pk-ink); font-variant-numeric: tabular-nums; }
.carriage i { position: absolute; top: -1px; left: -4px; width: 7px; height: 7px; border: 1px solid var(--pk-ink); background: var(--pk-paper); }
.tb-mini .no { display: flex; flex-direction: column; gap: 6px; }
.tb-mini .no strong { font: 500 26px/1 var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.tb-mini .no .label { white-space: nowrap; font-size: 10px; }
.tb-mini { padding: 14px 16px; }
.steps figure.mkup .over { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
.stage .stamp-dwg { position: absolute; inset: auto 2% 3% auto; width: 34%; height: auto; z-index: 3; }
.stage .checks .fail path, .stage .checks .fail .box { fill: none; stroke: var(--pk-flag); stroke-width: 1.6; }
.stage .checks text { paint-order: stroke; stroke: var(--pk-paper); stroke-width: 2.6px; stroke-linejoin: round; }
.stage .checks .fail text { fill: var(--pk-flag); font: 500 5.8px var(--mono); letter-spacing: .03em; }
.stage .checks .ok path, .stage .checks .pass2 path { fill: none; stroke: var(--pk-ink); stroke-width: 1.4; }
.stage .checks .ok text, .stage .checks .pass2 text { fill: var(--pk-ink); font: 500 5.8px var(--mono); letter-spacing: .03em; }
.stage .checks .bg { fill: var(--pk-paper); stroke: var(--pk-ink); stroke-width: .6; }

/* ---------------------------------------------------------------- the instrument: crosshair, readout, leader */
.inst { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.inst .h, .inst .v { position: absolute; background: var(--pk-ink-secondary); opacity: 0; transition: opacity .15s; }
.inst .h { height: 1px; } .inst .v { width: 1px; }
.inst .sq { position: absolute; width: 7px; height: 7px; margin: -3px 0 0 -3px; border: 1px solid var(--pk-ink); background: var(--pk-paper); opacity: 0; }
.inst .ro { position: absolute; padding: 0 2px 3px; border-bottom: 1px solid var(--pk-ink); text-shadow: 0 0 3px var(--pk-paper), 0 0 6px var(--pk-paper), 0 0 9px var(--pk-paper); font: 500 10.5px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: var(--pk-ink); opacity: 0; font-variant-numeric: tabular-nums; }
.inst .ro small { display: block; color: var(--pk-ink-secondary); font-size: 9.5px; }
.inst.on .h, .inst.on .v, .inst.on .sq, .inst.on .ro { opacity: 1; }
.inst svg.ld { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.inst svg.ld path { fill: none; stroke: var(--pk-ink); stroke-width: 1; opacity: 0; transition: opacity .15s; }
.inst svg.ld.on path { opacity: 1; }
[data-instrument] { cursor: crosshair; }

/* ---------------------------------------------------------------- statement: fills pale to ink as you read it */
.statement { min-height: calc(100svh - var(--head) - 2 * var(--edge)); display: grid; align-content: center; padding: var(--s3) var(--gut); border-top: var(--hair) solid var(--pk-rule); }
.statement p { max-width: 21em; font-size: clamp(30px, 3.7vw, 56px); line-height: 1.06; letter-spacing: -.024em; font-weight: 500; text-wrap: balance; }
.statement .w { color: var(--pk-ink-faint); }
.statement .w.on, .no-js .statement .w { color: var(--pk-ink); }

/* ---------------------------------------------------------------- sections, rows, grid lines that draw in */
.sec { position: relative; padding: var(--s3) 0; }
.sec + .sec { padding-top: 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; padding: 0 var(--gut) 40px; }
.sec-head .lede { color: color-mix(in srgb, var(--pk-ink) 82%, var(--pk-paper)); }
.rule { display: block; height: var(--hair); background: var(--pk-rule); transform-origin: 0 50%; }
.vrule { display: block; width: var(--hair); background: var(--pk-rule); transform-origin: 50% 0; }
.rows { border-top: var(--hair) solid var(--pk-rule); }
.row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr); gap: 24px 48px; padding: 24px var(--gut); border-bottom: var(--hair) solid var(--pk-rule); align-items: baseline; }
.row h3 { font-size: 22px; }
.row .label { justify-self: end; }
.row p { max-width: 36em; }

/* ---------------------------------------------------------------- the pinned story */
.story { position: relative; }
.story .stage { display: none; }
.js-story .story .stage { display: block; position: relative; height: calc(100svh - var(--head) - 2 * var(--edge) - 1px); overflow: clip; border-top: var(--hair) solid var(--pk-rule); background: var(--pk-paper); }
.js-story .story .steps { display: none; }
.stage .sheet { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 190px; }
.stage .surface { position: absolute; top: 32px; bottom: 32px; right: 222px; width: 38%; z-index: 3; container-type: size; pointer-events: none; }
.stage .surface .fs { pointer-events: auto; }
.stage .sf { position: absolute; inset: 0; display: grid; place-items: center end; margin: 0; opacity: 0; visibility: hidden; }
.stage .sf.on { opacity: 1; visibility: visible; }
.stage .sf img { display: block; }
.stage .sf.console img { border: 1px solid var(--pk-rule); background: var(--pk-sheet); }
.stage .sf.phone img { height: min(100cqh, 700px); width: auto; max-width: none; }
.stage .sf.console { display: block; }
.stage .sf.console img.panel { position: absolute; right: 0; bottom: 0; }
.stage .dwg { transition: opacity .4s var(--p2); }
.stage.console-on .dwg { opacity: .28; }
@media (min-width: 1101px) {
  .stage .dwg { transition: transform .5s var(--p2), opacity .4s var(--p2); }
  .stage.console-on .dwg { transform: translate(-50%, -50%) translateX(-30%) scale(.86); opacity: .28; }
}
.stage .sf.console img.panel { width: auto; max-width: none; height: auto; max-height: 100cqh; border: 1px solid var(--pk-rule); background: var(--pk-sheet); }
.stage .sf.console img.p-06-check, .move .art.console img.p-06-check, .story .steps .scr.p-06-check { width: 620px; }
.stage .sf.console img.p-08-review { width: 585px; }
.stage .sf.console img.p-09-stamp { width: 320px; }
.move .art.console img.p-09-stamp, .story .steps .scr.p-09-stamp { width: 364px; }
.stage .l-mk { opacity: 0; }
.stage .note.n1 { left: 6%; top: -2%; width: 52%; max-width: 21em; font-size: 18px; }
.stage .field { position: relative; container-type: size; min-width: 0; }
.stage .dwg { position: absolute; left: 36%; top: 50%; width: min(70cqw, (100cqh - 64px) * 1.0399); aspect-ratio: 371.45 / 357.21; transform: translate(-50%, -50%); }
.stage .dwg > img, .stage .dwg > .trace, .stage .dwg > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .field, .stage .sheet { overflow: clip; }
.stage .dwg img { object-fit: contain; }
.stage .side { border-left: var(--hair) solid var(--pk-rule); display: grid; grid-template-rows: 1fr auto auto; min-height: 0; }
.stage .stampslot { padding: 12px 16px; border-bottom: 0 !important; }
.stage .stamp-sf { display: none; }
.stage .side > div { padding: 14px 16px; border-bottom: var(--hair) solid var(--pk-rule); }
.stage .side > div:last-child { border-bottom: 0; }
.stage .steps-ix { display: grid; gap: 2px; counter-reset: s; }
.stage .steps-ix li { display: flex; gap: 10px; align-items: baseline; font: 500 11px/1.6 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--pk-ink-faint); transition: color .2s; }
.stage .steps-ix li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-variant-numeric: tabular-nums; }
.stage .steps-ix li.on { color: var(--pk-ink); }
.stage .revs table { width: 100%; border-collapse: collapse; font: 400 12px/1.4 var(--sans); }
.stage .revs td { padding: 5px 0; border-top: var(--hair) solid var(--pk-rule); vertical-align: top; opacity: .25; transition: opacity .3s; }
.stage .revs td:first-child { width: 26px; font: 500 11px/1.5 var(--mono); }
.stage .revs tr.on td { opacity: 1; }
.stage .stampslot { position: relative; aspect-ratio: 260 / 150; }
.stage .stampslot .stamp { position: absolute; inset: 0; opacity: 0; }
.cap-box { position: absolute; left: 24px; bottom: 24px; z-index: 3; width: min(320px, calc(100% - 48px)); background: var(--pk-ink); color: var(--pk-paper); }
.cap-box .hd { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid color-mix(in srgb, var(--pk-paper) 22%, var(--pk-ink)); font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.cap-box .bd { position: relative; padding: 12px 12px 14px; min-height: 104px; }
.cap-box .bd > div { position: absolute; inset: 12px 12px 14px; opacity: 0; }
.cap-box .bd > div.on { position: relative; inset: auto; opacity: 1; }
.cap-box h3 { font-size: 18px; line-height: 1.2; color: var(--pk-paper); }
.cap-box p { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: color-mix(in srgb, var(--pk-paper) 78%, var(--pk-ink)); }
.cap-box .ft { padding: 7px 12px; border-top: 1px solid color-mix(in srgb, var(--pk-paper) 22%, var(--pk-ink)); font: 500 10px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--pk-paper) 60%, var(--pk-ink)); }
.stage .note { position: absolute; left: 53%; top: 3%; width: 30%; max-width: 15em; padding: 0 0 6px; border-bottom: 1px solid var(--pk-ink); font-size: 15px; line-height: 1.35; opacity: 0; z-index: 2; text-shadow: 0 0 4px var(--pk-paper), 0 0 8px var(--pk-paper); }
.stage .note .who { display: block; margin-top: 4px; }
.stage .dwg > .trace { inset: -3% -4%; width: auto; height: auto; background: color-mix(in srgb, var(--pk-paper) 74%, transparent); border-left: 1px solid var(--pk-ink-faint); z-index: 1; }
.stage .trace img { position: absolute; inset: 3% 4%; width: 92%; height: 94%; object-fit: contain; opacity: .8; }
.stage .trace .tl { position: absolute; left: 8px; top: 8px; }
.stage .sweep { position: absolute; top: -2%; bottom: -2%; width: 0; border-left: 1px solid var(--pk-ink); opacity: 0; z-index: 2; }
.stage .sweep span { position: absolute; top: -18px; left: 4px; font: 500 10px/1 var(--mono); letter-spacing: .05em; }
.stage .checks { position: absolute; inset: 0; overflow: visible; z-index: 2; }
.stage .leader { position: absolute; inset: 0; overflow: visible; z-index: 2; }
.stage .leader path { fill: none; stroke: var(--pk-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cap-box .fs { border: 1px solid color-mix(in srgb, var(--pk-paper) 40%, var(--pk-ink)); background: none; color: var(--pk-paper); font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 4px 8px; margin: -4px -4px -4px 0; border-radius: 4px; cursor: pointer; }
.cap-box .hd { align-items: center; }
.stage .sheet { --fs: 0; }
.steps > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; padding: 40px var(--gut); border-top: var(--hair) solid var(--pk-rule); align-items: start; }
.steps .step-text h3 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.1; letter-spacing: -.02em; }
.steps .step-text p, .steps .step-text blockquote { margin-top: 14px; }
.steps figure { position: relative; border: var(--hair) solid var(--pk-rule); padding: 16px; background: var(--pk-sheet); }
.steps figure.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.steps figure .stamp { position: absolute; right: 8%; bottom: 8%; width: 34%; }
.stamp { color: var(--pk-ink); }
.stamp svg { display: block; width: 100%; height: auto; overflow: visible; }
.story-note { padding: 16px var(--gut) 0; }
/* the story without motion: a contact sheet of the seven states, not a column of repeated plans */
.story .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--hair) solid var(--pk-rule); }
.story .steps figure { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.story .steps li.console figure { grid-template-columns: 1fr; }
.story .steps .scr.phone { width: auto; height: 240px; }
.story .steps .scr.console { width: auto; max-width: 100%; border: 1px solid var(--pk-rule); }
.story .steps .scr.p-08-review { width: 585px; }
.story .steps > li { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 16px; padding: 20px 20px 28px; border-top: 0; border-right: var(--hair) solid var(--pk-rule); border-bottom: var(--hair) solid var(--pk-rule); }
.story .steps .step-text h3 { font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
.story .steps .step-text p, .story .steps blockquote { margin-top: 8px; }
.story .steps blockquote p { font-size: 16px; }
.story .steps .body { font-size: 14px; }
.story .steps figure { padding: 8px; }
.story .steps figure.pair { gap: 6px; }

/* ---------------------------------------------------------------- ladder */
.ladder li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr); gap: 8px 48px; padding: 22px var(--gut); border-bottom: var(--hair) solid var(--pk-rule); align-items: baseline; }
.ladder .tier { font-size: 26px; line-height: 1.1; letter-spacing: -.018em; font-weight: 500; }
.ladder .label { justify-self: end; }
.ladder-foot { padding: var(--s2) var(--gut) 0; }

/* ---------------------------------------------------------------- inner sheets: title sheet, moves, facts */
.title-sheet { display: grid; grid-template-columns: minmax(0, 1fr) 260px; border-bottom: var(--hair) solid var(--pk-rule); min-height: calc(100svh - var(--head) - 2 * var(--edge) - 1px); }   /* the first screen ends where the title sheet does: no empty band under it */
.title-sheet .t-main { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; padding: 64px var(--gut) 32px; }
.title-sheet .tb { border-left: var(--hair) solid var(--pk-rule); grid-template-rows: auto 1fr auto auto; }
.title-sheet.has-art { grid-template-columns: minmax(0, 5fr) minmax(0, 6.2fr) 240px; }
.t-art { display: grid; place-items: center; padding: 32px; border-left: var(--hair) solid var(--pk-rule); min-width: 0; }
.t-art img, .t-art picture { width: 100%; max-height: min(74svh, 1080px); object-fit: contain; }
.t-art .stack { position: relative; width: 100%; max-width: min(100%, 74svh); }
.t-art .stack img { width: 100%; }
.t-art .stack .over { position: absolute; inset: 0; height: 100%; }
.moves .move { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); border-bottom: var(--hair) solid var(--pk-rule); }
.move .art { position: relative; display: grid; place-items: center; padding: 40px; border-right: var(--hair) solid var(--pk-rule); min-height: 520px; background: var(--pk-paper); }
.move .art img { max-height: 520px; width: auto; }
.move .art.phone img { max-height: 660px; }
.move .art.console img { width: auto; max-width: 100%; max-height: none; border: 1px solid var(--pk-rule); }
.move .art.console img.p-08-review { width: 585px; }
.moves .move.console { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.move .art.wide img { width: 100%; max-height: none; }
.move .art.plan img { width: 100%; max-width: 560px; }
.move .txt { padding: 40px var(--gut) 40px; display: flex; flex-direction: column; gap: 16px; }
.move .txt .label { margin-bottom: 8px; }
.move h2 { font-size: clamp(30px, 3vw, 46px); }
.move .txt > p { max-width: 30em; }
details.acc { border-top: var(--hair) solid var(--pk-rule); margin-top: 16px; }
details.acc summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; cursor: pointer; list-style: none; font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pk-ink-secondary); }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "+"; font: 400 20px/1 var(--sans); color: var(--pk-ink); transition: transform .3s var(--p2); }
details.acc[open] summary::after { transform: rotate(45deg); }
details.acc summary:hover { color: var(--pk-ink); }
details.acc ul { display: grid; gap: 0; padding-bottom: 16px; }
details.acc li { padding: 9px 0; border-top: var(--hair) solid var(--pk-rule); font-size: 14.5px; line-height: 1.5; color: color-mix(in srgb, var(--pk-ink) 82%, var(--pk-paper)); }
details.acc li b { font-weight: 500; color: var(--pk-ink); }
.facts { border-top: var(--hair) solid var(--pk-rule); }
.facts > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px 48px; padding: 18px var(--gut); border-bottom: var(--hair) solid var(--pk-rule); }
.facts dt { padding-top: 3px; }
.facts dd { font-size: 17px; line-height: 1.45; max-width: 38em; }
.lines { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--hair) solid var(--pk-rule); border-bottom: var(--hair) solid var(--pk-rule); }
.lines > div { padding: 24px var(--gut) 28px; }
.lines > div + div { border-left: var(--hair) solid var(--pk-rule); }
.lines dd { margin-top: 10px; font-size: clamp(28px, 3vw, 44px); line-height: 1.05; letter-spacing: -.022em; font-weight: 500; }
.shots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: var(--hair) solid var(--pk-rule); }
.shots figure { padding: 20px 16px; border-right: var(--hair) solid var(--pk-rule); border-bottom: var(--hair) solid var(--pk-rule); }
.shots.console { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shots figcaption { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--pk-ink-secondary); }
.dl a { white-space: nowrap; }

/* founder: the drawing, and the photo it was drawn from under a hatch wipe */
.founder { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); border-top: var(--hair) solid var(--pk-rule); border-bottom: var(--hair) solid var(--pk-rule); }
.founder .pic { position: relative; aspect-ratio: 3 / 4; border-right: var(--hair) solid var(--pk-rule); overflow: hidden; cursor: crosshair; background: #F5F5F2; }
/* the portrait is never inverted: in dark mode it keeps its own light paper, framed by a hairline */
@media (prefers-color-scheme: dark) { .founder .pic { margin: 16px; border: 1px solid var(--pk-rule); aspect-ratio: 3 / 4; } }
.founder .who .role { margin-top: 6px; color: var(--pk-ink-secondary); }
.founder .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.founder .pic .photo { opacity: 0; }
.founder .pic .ink { transition: clip-path .6s steps(14, end), opacity .6s; clip-path: inset(0 0 0 0); }
.founder .pic:hover .photo, .founder .pic.show .photo { opacity: 1; }
.founder .pic:hover .ink, .founder .pic.show .ink { clip-path: inset(0 0 100% 0); }
.founder .pic .wipe { position: absolute; left: 0; right: 0; height: 22px; bottom: 100%; background: var(--pk-ink); -webkit-mask: url("/assets/img/hatch.svg") repeat 0 0 / 6px 6px; mask: url("/assets/img/hatch.svg") repeat 0 0 / 6px 6px; opacity: 0; }
.founder .who { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px var(--gut) 28px; }
.founder .who h3 { font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -.024em; }
.founder .who .label + p { margin-top: 10px; }
.founder .pic-btn { position: absolute; left: 12px; bottom: 12px; z-index: 2; }
.rows-acc details.acc { margin: 0; border-top: 0; border-bottom: var(--hair) solid var(--pk-rule); padding: 0 var(--gut); }
.rows-acc details.acc summary { padding: 22px 0; font: 500 22px/1.2 var(--sans); letter-spacing: -.01em; text-transform: none; color: var(--pk-ink); display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; gap: 24px; }
.rows-acc details.acc summary .label { align-self: center; }
.rows-acc details.acc > p { padding: 0 0 24px; max-width: 40em; }
.steps.arch > li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.steps.arch figure { max-width: 760px; }
.fs-link { position: absolute; right: 16px; bottom: 16px; min-height: 36px; font-size: 13px; }

/* full-screen drawing (phone): fit first, then this */
dialog.dwg-full { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--pk-paper); color: var(--pk-ink); }
dialog.dwg-full::backdrop { background: var(--pk-paper); }
dialog.dwg-full .in { position: absolute; inset: 52px 0 0; overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
dialog.dwg-full .in img { width: auto; height: 100%; max-width: none; min-width: 100%; object-fit: contain; }
dialog.dwg-full.device .in img { width: 100%; height: 100%; min-width: 0; padding: 12px; object-fit: contain; }
dialog.dwg-full .bar { position: absolute; left: 0; right: 0; top: 0; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; border-bottom: var(--hair) solid var(--pk-rule); }

/* ---------------------------------------------------------------- footer: the set's index, as a title block */
.site-foot { margin-top: 0; border-top: 1.5px solid var(--pk-ink); }
.index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: var(--hair) solid var(--pk-rule); }
.index li + li { border-left: var(--hair) solid var(--pk-rule); }
.index a { display: block; padding: 18px var(--gut) 20px; text-decoration: none; color: var(--pk-ink-secondary); transition: background-color .15s; }
.index a:hover { background: var(--pk-sheet); color: var(--pk-ink); }
.index a b { display: block; margin-bottom: 4px; font: 500 30px/1 var(--sans); letter-spacing: -.02em; color: var(--pk-ink); font-variant-numeric: tabular-nums; }
.index a[aria-current="page"] b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .16em; }
.foot-lines { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 32px; padding: 20px var(--gut) 28px; align-items: baseline; }
.foot-lines .line { font-size: 22px; letter-spacing: -.015em; font-weight: 500; }

/* ---------------------------------------------------------------- 404 */
.missing { min-height: calc(100svh - var(--head) - 2 * var(--edge) - 200px); }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1100px) {
  .stage .sheet { grid-template-columns: minmax(0, 1fr); }
  .stage .surface { right: 24px; width: 42%; }
  .stage .dwg { left: 32%; width: min(58cqw, (100cqh - 64px) * 1.0399); }
  .title-sheet.has-art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .title-sheet.has-art .tb { grid-column: 1 / -1; border-left: 0; border-top: var(--hair) solid var(--pk-rule); }
  .band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .band > :nth-child(3) { border-left: 0; border-top: var(--hair) solid var(--pk-rule); }
  .band > :nth-child(4) { border-top: var(--hair) solid var(--pk-rule); }
  .stage .side { display: none; }
  .story .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- phone: rebuilt, not shrunk */
@media (max-width: 720px) {
  :root { --head: 52px; --gut: 16px; --edge: 6px; }
  body { font-size: 15.5px; }
  .frame b { display: none; }
  .brand { padding: 0 14px; }
  .brand img { width: 118px; }
  .brand .tm-mark { right: 2px; top: 10px; }
  .nav { display: none; }
  .nav.open { display: block; position: fixed; left: calc(var(--edge) + 1px); right: calc(var(--edge) + 1px); top: calc(var(--edge) + var(--head)); bottom: calc(var(--edge) + 1px); background: var(--pk-paper); z-index: 9; border-top: var(--hair) solid var(--pk-rule); }
  .nav.open ul { display: block; }
  .nav.open li { border-left: 0; border-bottom: var(--hair) solid var(--pk-rule); }
  .nav.open a { width: 100%; padding: 22px 16px; font: 500 30px/1 var(--sans); letter-spacing: -.02em; text-transform: none; color: var(--pk-ink); }
  .nav.open a[aria-current="page"]::after { display: none; }
  .head-cta { margin-left: auto; padding: 0 14px; font-size: 10.5px; }
  .menu-btn { display: flex; align-items: center; gap: 8px; border: 0; border-left: var(--hair) solid var(--pk-rule); background: none; color: var(--pk-ink); padding: 0 14px; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
  .menu-btn i { display: block; width: 14px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
  .no-js .nav { display: block; position: static; }
  .hero { height: auto; min-height: 0; max-height: none; display: block; }
  .plate { height: auto; container-type: normal; }
  .plate { display: flex; flex-direction: column; }
  .plate .art { position: relative; left: auto; bottom: auto; transform: none; width: 100%; aspect-ratio: 1450 / 1350; margin: 0; order: 1; }
  .sheet-tb span:last-child { display: none; }
  .sheet-tb { position: static; order: 3; border-left: 0; }
  .sheet-tb span { padding: 7px 16px 7px 0; } .sheet-tb span + span { padding-left: 12px; }
  .tap-hint { position: static !important; order: 2; padding: 10px 16px 12px; }
  .plate .art { margin-top: 20px; }
  .sheet-tb { padding-left: 16px; }
  .head-cta { display: none; }
  .menu-btn { margin-left: auto; }
  .band { display: block; }
  .band > * { border-left: 0; border-top: var(--hair) solid var(--pk-rule); padding: 18px 16px; }
  .hero h1 { font-size: 46px; }
  .hero .t-act .actions { flex-direction: column; }
  .tb .no strong { font-size: 30px; }
  .statement p { font-size: 31px; }
  .sec-head { grid-template-columns: 1fr; padding-bottom: 28px; }
  .row, .ladder li { grid-template-columns: 1fr; gap: 6px; padding: 18px 16px; }
  .row .label, .ladder .label { justify-self: start; }
  .js-story .story .stage { height: calc(100svh - var(--head) - 2 * var(--edge) - 1px); }
  .stage .sheet { grid-template-columns: 1fr; grid-template-rows: minmax(0, .72fr) minmax(0, 1.28fr) auto; }
  .stage .surface { position: relative; inset: auto; width: auto; border-left: 0; border-top: var(--hair) solid var(--pk-rule); pointer-events: auto; }
  .stage .sf { place-items: center; }
  .stage .sf.console { display: grid; }
  .stage .sf.console img.panel { position: static; }
  .stage .sf.console img.panel, .stage .sf.console img.p-08-review { width: auto; max-width: calc(100cqw - 16px); max-height: calc(100cqh - 16px); }
  .stage .dwg { left: 50%; }
  .stage .stamp-sf { display: block; position: absolute; right: 6px; top: -58px; width: 80px; opacity: 0; }
  .stage .stampslot { display: none; }
  .stage .sf.phone img { height: calc(100cqh - 12px); }
  .cap-box .bd { min-height: 70px; padding: 9px 12px 10px; }
  .cap-box .hd { padding: 6px 12px; }
  .cap-box p { font-size: 12.5px; margin-top: 3px; }
  .stage .sf.console img { width: calc(100cqw - 16px); }
  .stage .dwg { width: min(100cqw - 16px, (100cqh - 12px) * 1.0399); }
  .cap-box { position: static; width: auto; margin: 0; }
  .stage .note.n1 { font-size: 12.5px; left: 8%; top: 26%; width: 60%; }
  .stage .note { left: 30%; top: 1%; width: 52%; font-size: 12px; padding: 5px 7px; }
  .stage .note .who { display: none; }
  .cap-box .bd { min-height: 92px; }
  .cap-box h3 { font-size: 16.5px; }
  .cap-box p { font-size: 13px; }
  .steps > li { grid-template-columns: 1fr; padding: 28px 16px; }
  .story .steps { grid-template-columns: 1fr; }
  .title-sheet { grid-template-columns: 1fr; min-height: 0; }
  .title-sheet .t-main { padding: 40px 16px 28px; }
  .title-sheet .tb { border-left: 0; border-top: var(--hair) solid var(--pk-rule); }
  .title-sheet.has-art { grid-template-columns: 1fr; }
  .t-art { border-left: 0; border-top: var(--hair) solid var(--pk-rule); padding: 16px; }
  .moves .move { grid-template-columns: 1fr; }
  .move .art { border-right: 0; border-bottom: var(--hair) solid var(--pk-rule); min-height: 0; padding: 24px 16px; }
  .move .art img { max-height: 420px; }
  .move .txt { padding: 24px 16px 28px; }
  .facts > div { grid-template-columns: 1fr; gap: 6px; padding: 16px; }
  .lines { grid-template-columns: 1fr; }
  .lines > div + div { border-left: 0; border-top: var(--hair) solid var(--pk-rule); }
  .shots, .shots.console { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder { grid-template-columns: 1fr; }
  .founder .pic { border-right: 0; border-bottom: var(--hair) solid var(--pk-rule); }
  .index { grid-template-columns: 1fr 1fr; }
  .index li:nth-child(3) { border-left: 0; }
  .index li:nth-child(n+3) { border-top: var(--hair) solid var(--pk-rule); }
  .foot-lines { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- reduced motion: everything drawn and still */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html.plot .plate picture, html.plot .hero .band > *, html.plot .sheet-tb { opacity: 1; }
}

/* ---------------------------------------------------------------- print: the set on paper */
@media print {
  :root { --pk-ink: #141414; --pk-ink-secondary: #66665F; --pk-ink-faint: #A3A39D; --pk-paper: #FBFBF9; --pk-sheet: #FBFBF9; --pk-panel: #E8E8E4; --pk-rule: #D4D4CF; --hair: .5pt; }
  @page { margin: 12mm; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body { padding: 0; background: #FBFBF9; font-size: 10.5pt; }
  .frame, .turn, .t-edge, .nav, .head-cta, .menu-btn, .skip, .actions, .stage, .inst, .hint, .run-check, .fs, details summary, .ov { display: none !important; }
  .site-head { position: static; height: auto; padding: 0 0 4mm; border-bottom: .5pt solid #141414; }
  .hero { height: auto; min-height: 0; display: block; }
  .plate { container-type: normal; }
  .plate .art { position: static; transform: none; width: 100%; }
  .plate picture, .hero .band > *, .plate .cap { opacity: 1 !important; }
  .plate .art picture { position: static; } .plate .art picture img { position: static; height: auto; }
  .story .steps { display: grid !important; grid-template-columns: 1fr 1fr; }
  .pin-spacer { padding: 0 !important; height: auto !important; min-height: 0 !important; }
  .statement { padding: 12mm 0; }
  .steps > li { break-inside: avoid; }
  details.acc { display: block; } details.acc > * { display: block; }
  section, .move, .row, figure { break-inside: avoid; }
  .statement .w { color: #141414 !important; }
  a { text-decoration: none; }
  .site-foot { margin-top: 12mm; }
}

/* the story on another sample house: a LOCAL preview flag only (boot.js sets data-story on 127.0.0.1/localhost) */
.stage.alt .dwg { aspect-ratio: 512.922 / 524.056; width: min(70cqw, (100cqh - 64px) * .9788); }
.stage.alt .al-cam { position: absolute; inset: 0; }
.stage.alt .al-cam > img.al { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage.alt .al-cam > .al-wash { position: absolute; inset: -3% -4%; background: color-mix(in srgb, var(--pk-paper) 78%, transparent); border-left: 1px solid var(--pk-ink-faint); }
.stage.alt .checks, .stage.alt .trace, .stage.alt .leader, .stage.alt .note.n2, .stage.alt .sweep, .stage.alt .stamp { display: none; }
.stage.alt .sf.none { display: none; }
.cap-box .pending { margin-top: 6px; font: 500 10px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--pk-flag); }
@media (max-width: 720px) {
  .stage.alt .dwg { width: min(100cqw - 16px, (100cqh - 12px) * .9788); }
  .stage.alt.no-sf .sheet { grid-template-rows: minmax(0, 1fr) 0 auto; }
  .stage.alt.no-sf .surface { border-top: 0; }
}
.stage.alt .field { overflow: clip; }
.al-callout { position: absolute; z-index: 4; max-width: 300px; padding: 0 0 8px; border-bottom: 1px solid var(--pk-flag); color: var(--pk-ink); font-size: 15px; line-height: 1.4; text-shadow: 0 0 4px var(--pk-paper), 0 0 8px var(--pk-paper); }
.al-callout .dl { display: inline-block; width: 1.25em; height: 1.1em; margin: 0 .35em -.15em 0; overflow: visible; }
.al-callout .dl path { fill: none; stroke: var(--pk-flag); stroke-width: 1.4; stroke-linejoin: round; }
.al-callout .dl text { fill: var(--pk-flag); font: 600 10px var(--sans); }
@media (max-width: 720px) { .al-callout { max-width: none; right: 12px; font-size: 13.5px; } }
.stage.alt .note.n1 { top: 5%; }
/* a console screen in a quiet window: a 1px hairline frame and a thin title bar in our tokens (the page name in the
   mono, small), square like the drawing frames, no shadow; the console's own light UI sits inside as it is */
.win { display: inline-flex; flex-direction: column; border: 1px solid var(--pk-rule); background: var(--pk-paper); }
.win-bar { padding: 5px 10px 6px; border-bottom: 1px solid var(--pk-rule); font: 400 10.5px/1.2 var(--mono); letter-spacing: 0; color: var(--pk-ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win > img.panel, .stage .sf.console .win > img.panel, .move .art.console .win > img.panel { display: block; position: static; border: 0; background: none; max-width: none; max-height: none; height: auto; }
.stage .sf.console .win { position: absolute; right: 0; bottom: 0; }
/* a drawing plate (step 06): the plan on the paper ground with a hairline, ink-inverted in dark by its own tokens */
.stage .sf.console img.plate, .move .art.console img.plate { display: block; position: static; border: 1px solid var(--pk-rule); background: none; height: auto; max-width: none; max-height: none; }
.stage .sf.console picture { position: absolute; right: 0; bottom: 0; }
@media (max-width: 720px) {
  .stage .surface { --sf-pad: 16px; }
  .stage .sf.console .win, .stage .sf.console picture { position: static; }
}