/* Imitation.Tech — coming soon.
   Swiss poster on a 12-column grid: 24px gutters, 24px baseline.
   Margins 40 : 60 : 80 : 120 = 2 : 3 : 4 : 6 (inner : top : outer : bottom) at 1440×900.
   Orange is never painted; it is the output of the field's rule (arms 6 → 12 → 24 → 48 on a 48px pitch).
   Fonts: Michroma 400 (display, wordmark) + Barlow 400/500/600. Nothing else. */

@font-face{font-family:Michroma;src:url(fonts/michroma.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:Barlow;src:url(fonts/barlow-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Fallback';src:local('Arial');size-adjust:92%;ascent-override:100%;descent-override:20%;line-gap-override:0%}
@font-face{font-family:'Michroma Fallback';src:local('Arial');size-adjust:148%;ascent-override:116%;descent-override:27%;line-gap-override:0%}

:root{
  /* palette — never used directly by components */
  --paper:#F8F4ED; --ink:#1A1A18; --ink-0:#0E0E0C; --ink-2:#3A3A36; --ink-3:#6B6862;
  --orange:#E1461E; --orange-deep:#B8360F; --tint-1:#FBD9C8; --hair:#D9D2C6; --hair-strong:#BFB7A8;
  /* role tokens — the only things data-ground="orange" remaps */
  --bg:var(--paper); --fg:var(--ink); --fg-body:var(--ink-2); --fg-mute:var(--ink-3);
  --accent:var(--orange); --state:var(--orange-deep);
  --mark:var(--hair-strong); --rule:var(--hair-strong); --control:var(--ink-3);
  --capsule-bg:var(--paper); --capsule-fg:var(--ink-2);
  /* type: five sizes — 12 · 14 · body 16→18 · 20 (wordmark) · display */
  --f-disp:Michroma,'Michroma Fallback',sans-serif;
  --f-body:Barlow,'Barlow Fallback',Arial,sans-serif;
  --t-12:12px; --t-14:14px; --t-20:20px;
  --t-body:clamp(1rem,.95rem + .25vw,1.125rem);
  --t-disp:clamp(2rem,min(5.8vw,10.7svh),6rem);      /* 84px @1440×900 · 74px @1280×720 · 96px cap · CAPTURED. = 8.06em */
  --lh-disp:.96;                                      /* replaced by round(up,.92em,24px) where supported */
  --disp-track:-.02em; --track-label:.16em; --track-row:.14em;
  /* grid */
  --baseline:24px; --gutter:24px; --cols:12;
  --track-in:16px; --track-out:56px;                  /* + one gutter each: 40 inner, 80 outer */
  --m-top:60px; --m-bot:120px; --gap-1:48px;
  /* field programme: one unit (the registration cross), one pitch, series 1-2-4-8 */
  --pitch:48px; --band:192px;
  --m0:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M21 24h6M24 21v6' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  --m1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M18 24h12M24 18v12' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  --m2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M12 24h24M24 12v24' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  --m3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 24h48M24 0v48' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
  /* motion */
  --ease:cubic-bezier(.2,0,.2,1); --t-hover:120ms; --t-reveal:180ms; --t-rule:320ms; --t-step:120ms;
  color-scheme:light;
}
@supports (height:round(nearest,1px,1px)){
  :root{--band:round(nearest,calc((100% - 216px) / 3),var(--pitch))}
}
@supports (line-height:round(up,1em,24px)){
  :root{--lh-disp:round(up,.92em,var(--baseline))}
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);overflow-x:clip}
body{font:400 var(--t-body)/var(--baseline) var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--tint-1)}
main,footer{display:contents}
p{margin:0}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.label,.meta-tr,.field-caption,.capsule,.fig,.contact .label,.pipeline,.spine,.spec caption,.spec th,.form label,.row05 .idx{
  font:600 var(--t-12)/var(--baseline) var(--f-body);letter-spacing:var(--track-label);text-transform:uppercase;font-variant-numeric:tabular-nums}
a:focus-visible,button:focus-visible{outline:1px solid var(--state);outline-offset:2px;text-decoration-thickness:2px}
#status:focus-visible{outline:none}

/* ---------- poster grid (desktop) ---------- */
.poster{position:relative;display:grid;min-height:100svh;overflow-anchor:none;
  grid-template-columns:var(--track-in) repeat(var(--cols),minmax(0,1fr)) var(--track-out);
  column-gap:var(--gutter);
  grid-template-rows:[top] var(--m-top) [meta] 48px [gap1] var(--gap-1) [head] auto [gap2] minmax(24px,1fr) [lower] auto [foot] var(--m-bot)}

/* chrome: the deck's cover lockup — cross · wordmark · rule · dot */
.head{display:contents}
.wordmark{grid-row:top;grid-column:2/8;align-self:end;justify-self:start;display:flex;align-items:center;height:24px;
  font:400 var(--t-20)/1 var(--f-disp);letter-spacing:.02em;color:var(--fg);text-decoration:none;white-space:nowrap}
.wordmark .period{color:var(--accent)}
.cross{position:relative;width:19px;height:19px;margin-right:20px;flex:none}
.cross::before,.cross::after{content:'';position:absolute;background:var(--accent)}
.cross::before{left:0;top:9px;width:19px;height:1.4px}
.cross::after{top:0;left:9px;width:1.4px;height:19px}
.headrule{grid-row:top;grid-column:5/14;align-self:end;position:relative;height:24px;margin-left:24px;pointer-events:none}
.headrule::before{content:'';position:absolute;left:0;right:0;top:12px;height:1px;background:var(--accent)}
.headrule::after{content:'';position:absolute;right:-3px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.meta-tr{grid-row:meta;grid-column:11/14;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;text-align:right;color:var(--fg-mute);white-space:nowrap}

/* headline — the typographic event; LCP as real text */
.display{grid-row:head;grid-column:2/9;margin:0;font:400 var(--t-disp)/var(--lh-disp) var(--f-disp);
  letter-spacing:var(--disp-track);text-transform:uppercase;white-space:nowrap;color:var(--fg)}
.display .beat{color:var(--accent)}
@supports (text-box:trim-both cap alphabetic){.display{text-box:trim-both cap alphabetic}}

/* field caption at the grid intersection above the programme */
.field-caption{grid-row:meta;grid-column:9/13;align-self:end;color:var(--fg-mute);white-space:nowrap}
.field-caption .x{color:var(--fg-mute);letter-spacing:0}

/* the field: point → line → plane */
.field{grid-row:gap1/-1;grid-column:9/15;position:relative;overflow:hidden;min-height:0;
  display:grid;grid-template-rows:repeat(3,var(--band)) 1fr}
.band{background:var(--mark);-webkit-mask:var(--m) 0 0/var(--pitch) var(--pitch) repeat;mask:var(--m) 0 0/var(--pitch) var(--pitch) repeat;
  transition:opacity var(--t-reveal) var(--ease);transition-delay:calc(var(--n) * var(--t-step))}
.b0{--m:var(--m0);--n:0} .b1{--m:var(--m1);--n:1} .b2{--m:var(--m2);--n:2} .b3{--m:var(--m3);--n:3;background:var(--accent)}
.js:not(.ready) .band{opacity:0}
@media (resolution < 1.5dppx){
  :root{
    --m0:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M21 24h6M24 21v6' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
    --m1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M18 24h12M24 18v12' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
    --m2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M12 24h24M24 12v24' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")}
}
/* the registration target: the origin every other mark is registered to — once */
.target{position:absolute;left:2.5px;top:2.5px;width:43px;height:43px;color:var(--accent);opacity:.95}
.target-bg{fill:var(--bg)}

/* lower block: description · spec · distribution list */
.lower{grid-row:lower;grid-column:3/7}
.description{max-width:416px;font-size:var(--t-body);line-height:var(--baseline);color:var(--fg-body);hyphens:none;text-wrap:pretty}
.spec{width:100%;border-collapse:collapse;margin-top:var(--baseline);color:var(--fg)}
.spec caption{caption-side:top;text-align:right;color:var(--fg-mute);padding:0}
.spec th,.spec td{padding:0;height:var(--baseline);vertical-align:top;line-height:var(--baseline)}
.spec th{text-align:left;letter-spacing:var(--track-row);white-space:nowrap;font-weight:600}
.spec td{text-align:right;font:500 var(--t-14)/var(--baseline) var(--f-body);color:var(--fg-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.spec tr:first-child>*{box-shadow:inset 0 1px 0 var(--rule)}
.spec tr:last-child>*{box-shadow:inset 0 -1px 0 var(--rule)}
.spec tr:first-child:last-child>*{box-shadow:inset 0 1px 0 var(--rule),inset 0 -1px 0 var(--rule)}
html[data-form="on"] .spec tr:last-child>*{box-shadow:none}
.idx{display:inline-block;width:32px;color:var(--fg-mute);font-variant-numeric:tabular-nums;letter-spacing:var(--track-row)}

/* row 05 — the only value on the sheet a visitor can fill */
.form{position:relative;color:var(--fg)}
html[data-form="off"] .form{display:none}
.row05{position:relative;display:flex;align-items:center;height:48px;border-bottom:1px solid var(--control);
  transition:border-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.row05:focus-within{border-bottom-color:var(--state);box-shadow:0 1px 0 var(--state)}
.form label{flex:none;color:var(--fg);letter-spacing:var(--track-row);margin-right:24px}
.form input{flex:1;min-width:0;height:44px;padding:0;margin:0;border:0;border-radius:0;background:none;color:var(--fg);
  font:400 16px/24px var(--f-body);outline:none;scroll-margin-block:30vh}
.form input::placeholder{color:var(--fg-mute);opacity:1}
.form input:-webkit-autofill{box-shadow:0 0 0 100px var(--bg) inset;-webkit-text-fill-color:var(--fg)}
.form input:focus-visible{outline:none}
.form button{flex:none;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:var(--fg);cursor:pointer;
  display:grid;place-items:center;transition:filter var(--t-hover) var(--ease)}
.form button:hover{filter:brightness(.92)}
.form button:active{filter:brightness(.85)}
.form button:disabled{opacity:.38;cursor:progress}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.status{color:var(--fg);font-size:var(--t-14);line-height:var(--baseline);margin:0}
.status:empty{display:none}
.status.is-error{color:var(--state)}
.privacy{color:var(--fg-mute);font-size:var(--t-14);line-height:var(--baseline);max-width:424px;hyphens:none;text-wrap:pretty}
.privacy a{color:var(--fg);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:2px;
  transition:text-decoration-color var(--t-hover) var(--ease)}
.privacy a:hover{text-decoration-color:currentColor}
.cf{min-height:0}
.cf:not(:empty){margin-top:var(--baseline)}
/* success: the brand's rule-and-dot becomes the confirmation */
.okrule{position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none}
.okrule .r{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;opacity:0;transition:transform var(--t-rule) var(--ease),opacity 1ms}
.okrule .d{position:absolute;right:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:0;transition:opacity 60ms var(--ease) 280ms}
.done .okrule .r{transform:none;opacity:1}
.done .okrule .d{opacity:1}
.done .row05{border-bottom-color:transparent;box-shadow:none}
.form.done input,.form.done button{opacity:0;transition:opacity var(--t-reveal) var(--ease);pointer-events:none}   /* main.js puts `done` on the form itself, so this cannot be a descendant selector */
.done .privacy,.done .cf{display:none}

/* footer: the conclusion row */
.capsule{grid-row:foot;grid-column:13/14;justify-self:end;align-self:center;z-index:1;
  background:var(--capsule-bg);color:var(--capsule-fg);padding:0 8px;white-space:nowrap}
.contact{grid-row:foot;grid-column:2/5;align-self:center;display:flex;align-items:baseline;gap:24px;white-space:nowrap}
.contact .label{color:var(--fg-mute)}
.contact a{font:500 var(--t-14)/var(--baseline) var(--f-body);color:var(--fg);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:2px;transition:text-decoration-color var(--t-hover) var(--ease)}
.contact a:hover{text-decoration-color:currentColor}
.spine{grid-row:lower;grid-column:2;align-self:end;justify-self:start;writing-mode:vertical-rl;transform:rotate(180deg);
  color:var(--fg-mute);letter-spacing:var(--track-row);line-height:12px;white-space:nowrap}
.pipeline{grid-row:foot;grid-column:5/9;align-self:center;display:flex;align-items:center;gap:8px;color:var(--fg-mute);white-space:nowrap}
.pipeline span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pipeline svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- height compaction: 1280×720 must hold the poster ---------- */
@media (max-height:779px){:root{--m-top:24px;--gap-1:24px;--m-bot:60px}}

/* ---------- reflow (never shrink): below the poster gate ---------- */
@media (max-width:1279px),(max-height:719px){
  html:not(.og){--cols:8;--track-out:24px;--m-top:24px;--m-bot:48px;--gap-1:24px}
  html:not(.og) .poster{min-height:0;grid-template-rows:none;grid-auto-rows:auto;row-gap:0}
  html:not(.og) .wordmark,html:not(.og) .display,html:not(.og) .field-caption,html:not(.og) .lower,html:not(.og) .contact,html:not(.og) .spine,html:not(.og) .pipeline,html:not(.og) .capsule{grid-row:auto;grid-column:2/-2;align-self:auto;justify-self:auto}
  html:not(.og) .wordmark{margin-top:var(--m-top)}
  html:not(.og) .headrule{grid-row:auto;grid-column:2/-2;margin:0;height:24px}
  html:not(.og) .meta-tr{grid-row:auto;grid-column:2/-2;flex-direction:row;justify-content:space-between;justify-self:stretch;text-align:left}
  html:not(.og) .display{margin-top:24px;margin-bottom:24px}
  html:not(.og) .field-caption{margin:0}
  html:not(.og) .field{grid-row:auto;grid-column:1/-1;height:calc(var(--pitch) * 9);--band:96px;margin:0 0 var(--baseline)}
  html:not(.og) .spine{writing-mode:horizontal-tb;transform:none;line-height:var(--baseline);margin-top:var(--baseline)}
  html:not(.og) .capsule{justify-self:start;padding:0;margin-top:var(--baseline);background:none;color:var(--fg-mute);z-index:auto}
  html:not(.og) .contact{margin-top:var(--baseline)}
  html:not(.og) .pipeline{margin-bottom:var(--m-bot)}
}
@media (max-width:991px){
  html:not(.og){--cols:6}
}
@media (max-width:575px){
  html:not(.og){--cols:1;--pitch:32px;--track-in:16px;--track-out:24px;--gutter:0px;--m-top:24px;--m-bot:48px;--t-disp:clamp(2rem,10.8vw,5.25rem)}
  html:not(.og) .poster{column-gap:0}
  html:not(.og) .wordmark,html:not(.og) .display,html:not(.og) .field-caption,html:not(.og) .lower,html:not(.og) .contact,html:not(.og) .spine,html:not(.og) .pipeline,html:not(.og) .capsule,html:not(.og) .headrule,html:not(.og) .meta-tr{grid-column:2}
  html:not(.og) .field{height:calc(var(--pitch) * 9);--band:64px}
  html:not(.og) .field .target{left:0;top:0;width:32px;height:32px}
  html:not(.og) .spec{table-layout:auto}
  html:not(.og) .spec td{white-space:normal;text-wrap:balance;padding-left:12px}
  html:not(.og) .meta-tr{flex-wrap:wrap;gap:0 16px}
  html:not(.og) .contact{flex-direction:column;gap:0;align-items:flex-start}
  html:not(.og) .pipeline{flex-wrap:wrap}
}
@media (min-width:576px) and (max-width:1279px){
  html:not(.og) .field .target{width:43px;height:43px}
}

/* ---------- reduced motion: end states restored explicitly, never a blanket transition:none ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .band{opacity:1}
  .done .okrule .r,.done .okrule .d{opacity:1;transform:none}
}

/* ---------- review mode: the mood board literally. Not the shipping default (see README). ---------- */
html[data-ground="orange"]{
  --bg:var(--orange);--fg:var(--ink-0);--fg-body:var(--ink-0);--fg-mute:var(--ink-0);
  --accent:var(--paper);--state:var(--ink-0);--control:var(--ink-0);
  --mark:rgb(14 14 12 / .30);--rule:rgb(14 14 12 / .22);
  --capsule-bg:var(--ink-0);--capsule-fg:var(--paper)}
html[data-ground="orange"] ::selection{background:rgb(14 14 12 / .25)}
html[data-ground="orange"] .form input::placeholder{opacity:.6}

/* ---------- OG render: same page, 1200×630, driven by qa/shoot.cjs ---------- */
html.og .poster{width:1200px;height:630px;min-height:0;--m-top:30px;--m-bot:72px;--gap-1:24px;--t-disp:68px;--pitch:40px;--band:120px}
html.og .form,html.og .contact,html.og .pipeline{display:none}
html.og .field .target{width:36px;height:36px;left:2px;top:2px}

/* ---------- secondary pages (404, data notice) ---------- */
.page{grid-template-rows:[top] var(--m-top) [meta] 48px [gap1] var(--gap-1) [head] auto [gap2] minmax(24px,1fr) [foot] var(--m-bot);min-height:100svh}
.page .display{grid-column:2/12}
.page .prose{grid-row:gap2;grid-column:2/9;max-width:62ch;color:var(--fg-body)}
.page .prose h2{font:600 var(--t-12)/var(--baseline) var(--f-body);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-mute);margin:var(--baseline) 0 0}
.page .prose p{margin:0 0 var(--baseline)}
.page .prose ul{margin:0 0 var(--baseline);padding-left:1.2em}
@media (max-width:1279px),(max-height:719px){.page .prose{grid-row:auto;grid-column:2/-2;margin:0 0 var(--baseline)}}
@media (max-width:575px){.page .prose{grid-column:2}}

/* ---------- motion: three beats (all gated on .ready; complete without JS; static under reduced motion) ----------
   1 · the headline registers (360 ms wipes, 0/80/160) while the chrome rule draws to its dot (320 ms)
   2 · the field comes up band by band (120 + n·200 ms)
   3 · the rest of the sheet appears in one 180 ms fade at 480 ms; the spec rule draws; the arm arrives at 900 ms, parked, then departs */
.display .line{display:inline-block;clip-path:inset(-.1em -.05em -.1em -.05em);transition:clip-path 360ms var(--ease)}
.display .line:nth-of-type(2){transition-delay:80ms} .display .line:nth-of-type(3){transition-delay:160ms}
.js:not(.ready) .display .line{clip-path:inset(-.1em 100% -.1em -.05em)}
.headrule::before{transform-origin:left;transition:transform var(--t-rule) var(--ease)}
.headrule::after{transition:opacity 60ms var(--ease) 280ms}
.js:not(.ready) .headrule::before{transform:scaleX(0)} .js:not(.ready) .headrule::after{opacity:0}
.band{transition-delay:calc(120ms + var(--n) * 200ms)}
.meta-tr,.field-caption,.lower,.contact,.spine,.pipeline,.capsule,.fig{transition:opacity var(--t-reveal) var(--ease) 480ms}
.js:not(.ready) :is(.meta-tr,.field-caption,.lower,.contact,.spine,.pipeline,.capsule,.fig){opacity:0}
.spec tr:first-child>*{background:linear-gradient(var(--rule),var(--rule)) left top/0 1px no-repeat;box-shadow:none;transition:background-size var(--t-rule) var(--ease) 480ms}
.ready .spec tr:first-child>*,html:not(.js) .spec tr:first-child>*{background-size:100% 1px}
/* safety net: if main.js never arrives, everything shows after 2.5 s anyway */
@keyframes safety-op{to{opacity:1}}
@keyframes safety-clip{to{clip-path:inset(-.1em -.05em -.1em -.05em)}}
@keyframes safety-rule{to{transform:none;opacity:1}}
@keyframes safety-bg{to{background-size:100% 1px}}
.js:not(.ready) :is(.band,.stage,.meta-tr,.field-caption,.lower,.contact,.spine,.pipeline,.capsule,.fig){animation:safety-op 1ms linear 2500ms forwards}
.js:not(.ready) .display .line{animation:safety-clip 1ms linear 2500ms forwards}
.js:not(.ready) .headrule::before,.js:not(.ready) .headrule::after{animation:safety-rule 1ms linear 2500ms forwards}
.js:not(.ready) .spec tr:first-child>*{animation:safety-bg 1ms linear 2500ms forwards}

/* ---------- FIG. 01: a human hand demonstrates, the field registers, the robot imitates (public/fig.js) ---------- */
.field{user-select:none}
.target{z-index:2}
.stage{position:absolute;left:0;top:0;width:616px;height:576px;overflow:visible;transform-origin:0 0;transform:scale(var(--k,1));will-change:transform;pointer-events:none;z-index:1;color:var(--fg-body);transition:opacity var(--t-reveal) var(--ease) 900ms}
.js:not(.ready) .stage{opacity:0}
.stage rect,.stage path,.stage circle,.stage polyline{fill:none;stroke:currentColor;stroke-width:calc(1.8 / var(--k,1));stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.stage .robot rect,.stage .robot circle,.stage .blk rect{fill:var(--bg)}
.stage .hand{color:var(--fg)}
.stage .hand .part{fill:var(--bg);stroke:currentColor}
.stage .hand .ink{fill:none;stroke:currentColor}
.stage .hand .ink.palm,.stage .hand .ink.forearm{stroke-width:calc(3.6 / var(--k,1));stroke-linecap:butt}   /* ink painted under a paper fill shows only its outer half: double width, so every visible outline is 1.8 */
.stage .hand .fill{fill:var(--bg);stroke:none}
/* the capture glove: three weights, the page's own — object edges (hem, module) at the silhouette's 1.8, sensor rings 1.2 in ink on paper, traces 1.2 in the robot trace's grey */
.stage .hand .glove .trace{stroke:var(--fg-body);stroke-width:calc(1.2 / var(--k,1));fill:none}
.stage .hand .glove .node{stroke:var(--fg);stroke-width:calc(1.2 / var(--k,1));fill:var(--bg)}
.stage .hand .glove .edge{stroke:var(--fg);stroke-width:calc(1.8 / var(--k,1));fill:none}
.stage .hand .glove .mod{stroke:var(--fg);stroke-width:calc(1.8 / var(--k,1));fill:var(--bg)}
.stage .hand .glove .band{stroke:var(--fg);stroke-width:calc(1.8 / var(--k,1));fill:var(--bg);stroke-linecap:butt}
.stage .blk-shadow rect{fill:var(--fg-mute);stroke:none}
.stage .blk-shadow{opacity:0}
.stage .mk{stroke:var(--accent);animation:mk-pop 240ms var(--ease) both;transform-box:fill-box;transform-origin:center}
.stage .mk.hit{stroke-width:calc(2.6 / var(--k,1))}
@keyframes mk-pop{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:scale(1)}}
.stage #marks,.stage #trace-h,.stage #trace-r{transition:opacity 700ms var(--ease)}
.stage .fade{opacity:0}
.stage #trace-h{stroke:var(--fg-mute);stroke-dasharray:3 4;stroke-width:calc(1 / var(--k,1))}
.stage #trace-r{stroke:var(--fg-body);stroke-width:calc(1.2 / var(--k,1))}
@media (max-width:575px){html:not(.og) .field{--k:.6667}}
html.og .field{--k:.8333}

/* figure caption on the footer baseline; doubles as the registration readout on fine pointers */
.fig{grid-row:foot;grid-column:9/12;align-self:center;justify-self:start;z-index:1;background:var(--capsule-bg);color:var(--capsule-fg);padding:0 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:1279px),(max-height:719px){html:not(.og) .fig{grid-row:auto;grid-column:2/-2;justify-self:start;padding:0;margin-top:var(--baseline);background:none;color:var(--fg-mute);z-index:auto;align-self:auto}}
@media (max-width:575px){html:not(.og) .fig{grid-column:2}}

/* pointer registration (fine pointers only): the nearest cross lights — it snaps, it does not glide */
.reg{position:absolute;left:0;top:0;width:var(--pitch);height:var(--pitch);pointer-events:none;opacity:0;z-index:2;
  transform:translate(var(--rx,0px),var(--ry,0px));transition:opacity 120ms var(--ease)}
.reg.is-on{opacity:1}
.reg i{position:absolute;inset:0;background:var(--accent);-webkit-mask:var(--m2) center/var(--pitch) var(--pitch) no-repeat;mask:var(--m2) center/var(--pitch) var(--pitch) no-repeat}
@media (pointer:coarse){.reg{display:none}}

/* ---------- reduced motion: a static, complete sheet from first paint; the arm holds the carry pose ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .js:not(.ready) .display .line{clip-path:inset(-.1em -.05em -.1em -.05em)}
  .js:not(.ready) .headrule::before{transform:none} .js:not(.ready) .headrule::after{opacity:1}
  .js:not(.ready) .band,.js:not(.ready) .stage,.js:not(.ready) :is(.meta-tr,.field-caption,.lower,.contact,.spine,.pipeline,.capsule,.fig){opacity:1}
  .js:not(.ready) .spec tr:first-child>*{background-size:100% 1px}
  .done .okrule .r,.done .okrule .d{opacity:1;transform:none}
}

/* =====================================================================
   CONCEPT A — ONE SCREEN (phones and portrait tablets)
   The phone gets the desktop's promise: one viewport, no scroll, a poster in
   the hand. Three moves.
   1 · FIG. 01 is framed, not guillotined. One rule at every viewport: the frame
       is the box both actors work in (456 × 322 stage units) plus the two
       lattice rows below it (96). main.js contains that in the field and snaps
       the pan to the pitch, so the field's own crosses fall exactly on the
       stage's cells at every k — today that registration only holds at the one
       hard-coded k = 2/3.
   2 · the five trailing metadata lines are resolved, not stacked: FIG. 01 and
       the IN DEVELOPMENT capsule are annotations ON the drawing (where they
       belong, and where they cost no height), PHYSICAL CAPTURE · DATA
       INFRASTRUCTURE is cut as a restatement of the description, and WRITE TO US
       and the pipeline become the two footer rows.
   3 · the lattice is the ground, not the backdrop: the last two rows of the
       field, with the frame guaranteeing that every grasp happens above it.
   ===================================================================== */

/* the stage can be panned as well as scaled — the crop is composed, not arbitrary */
.stage{transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--k,1))}

/* the figure's caption and the capsule are children of the field now */
html .field > .fig,html .field > .capsule{
  grid-area:auto;position:absolute;bottom:var(--fig-b,48px);margin:0;z-index:3;align-self:auto;justify-self:auto;
  background:var(--capsule-bg);color:var(--capsule-fg);padding:0 8px;white-space:nowrap}
html .field > .fig{left:var(--fig-l,0px)}
html .field > .capsule{right:var(--fig-r,24px)}

/* touch replaces hover: a tap registers the node under the finger */
@media (pointer:coarse){
  .reg{display:block}
  .reg.is-on i{animation:mk-pop 200ms var(--ease) both}
  .field{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
}

/* ---------- portrait, up to a tablet: one screen ---------- */
@media (max-width:900px) and (orientation:portrait){
  html:not(.og){
    --edge:24px;--gap:12px;--cols:1;--gutter:0px;--m-top:16px;--m-bot:16px;
    --t-disp:min(10.6vw,7.2svh);--lh-disp:1.16;
    --fig-b:8px;--fig-l:var(--edge);--fig-r:var(--edge)}
  html:not(.og) .poster{
    height:100svh;min-height:0;column-gap:0;row-gap:0;
    padding-top:max(var(--m-top),env(safe-area-inset-top));
    padding-bottom:max(var(--m-bot),env(safe-area-inset-bottom));
    grid-template-columns:[edge-l] max(var(--edge),env(safe-area-inset-left)) [col] minmax(0,1fr) [edge-r] max(var(--edge),env(safe-area-inset-right));
    grid-template-rows:[mark] 24px [rule] 12px [meta] minmax(0,auto) [head] auto [desc] auto [fig] minmax(150px,1fr) [legend] auto [spec] auto [form] auto [contact] minmax(44px,auto) [pipe] auto}
  html:not(.og) .lower{display:contents}
  html:not(.og) .wordmark{grid-row:mark;grid-column:col;margin:0;align-self:center}
  html:not(.og) .headrule{grid-row:rule;grid-column:col;margin:0;height:12px}
  html:not(.og) .headrule::before{top:6px}
  html:not(.og) .headrule::after{top:3px}
  html:not(.og) .meta-tr{grid-row:meta;grid-column:col;height:20px;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;gap:0;align-self:center}
  html:not(.og) .display{grid-row:head;grid-column:col;margin:var(--gap) 0 0}
  html:not(.og) .description{grid-row:desc;grid-column:col;margin:var(--gap) 0 0;max-width:none}

  /* the plate */
  html:not(.og) .field{grid-row:fig;grid-column:1/-1;height:auto;min-height:0;margin:var(--gap) 0 0;
    grid-template-rows:1fr calc(var(--pitch) * 2) var(--pitch) calc(var(--pitch) * 2)}
  html:not(.og) .b0{-webkit-mask-position:0 100%;mask-position:0 100%}   /* the band grid is anchored to the field's bottom, so every row lines up with the lattice */
  /* the caption leaves the drawing: as a paper chip over the lattice it punched a hole through the forearm and cut the robot's
     jaws into fragments. It becomes a legend line under the plate, where it can also carry the tap affordance. The one
     annotation that stays on the field is the capsule, in the sparse top band — empty sky at every size. */
  html:not(.og) .fig{grid-row:legend;grid-column:col;position:static;min-height:24px;margin:6px 0 0;display:flex;align-items:center;z-index:auto}
  html:not(.og) .field > .capsule{top:2px;bottom:auto;right:var(--edge)}
  html:not(.og) .field-caption,html:not(.og) .spine{display:none}

  /* the sheet: rows are flex, so a value that will not fit beside its label drops
     to its own line whole, right-aligned — never broken mid-phrase */
  html:not(.og) .spec{grid-row:spec;grid-column:col;margin-top:var(--gap);display:block;width:auto}
  html:not(.og) .spec caption{display:none}
  html:not(.og) .spec tbody{display:block}
  html:not(.og) .spec tr{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:8px}
  html:not(.og) .spec th,html:not(.og) .spec td{display:block;height:auto;min-height:var(--baseline);padding:0;white-space:nowrap;background:none;box-shadow:none}
  html:not(.og) .spec td{flex:0 1 auto}
  html:not(.og) .spec tr:last-child{box-shadow:inset 0 -1px 0 var(--rule)}
  html:not(.og)[data-form="on"] .spec tr:last-child{box-shadow:none}
  html:not(.og) .spec tr:first-child{background:linear-gradient(var(--rule),var(--rule)) left top/0 1px no-repeat;transition:background-size var(--t-rule) var(--ease) 480ms}
  html:not(.og).ready .spec tr:first-child,html:not(.og):not(.js) .spec tr:first-child{background-size:100% 1px}
  html:not(.og) .idx{width:26px}

  /* row 05 is a sheet row, not a desktop input line: the label is the row's name on its own
     line, the value is a full-width 48px field — 16px type, a 44px send target, 298px of room */
  html:not(.og) .form{grid-row:form;grid-column:col;margin-top:var(--gap)}
  html:not(.og) .row05{flex-wrap:wrap;align-content:flex-start;height:auto;row-gap:0}
  html:not(.og) .form label{flex:1 0 auto;margin:0;height:var(--baseline)}
  html:not(.og) .form input{flex:1 1 calc(100% - 44px);min-width:0;height:48px}
  html:not(.og) .form button{margin-right:0}
  html:not(.og) .privacy{max-width:none}
  html:not(.og) .privacy a{display:inline-block;padding-block:4px}   /* 25px tall: an inline link that still clears WCAG 2.5.8 */
  html:not(.og) .contact{grid-row:contact;grid-column:col;flex-direction:row;align-items:center;gap:16px;margin:0}
  html:not(.og) .contact a{display:inline-flex;align-items:center;min-height:44px}
  html:not(.og) .pipeline{grid-row:pipe;grid-column:col;margin:0;flex-wrap:nowrap;align-self:center;height:24px}
  html:not(.og)[data-form="on"] .pipeline{display:none}   /* the sign-up row buys its height from the process line */
  html:not(.og) :is(.description,.spec,.form){transition:opacity var(--t-reveal) var(--ease) 480ms}
  .js:not(.ready) :is(.description,.spec,.form){opacity:0;animation:safety-op 1ms linear 2500ms forwards}
}
/* portrait tablet: the column stops growing with the screen, the plate still bleeds */
@media (min-width:576px) and (max-width:900px) and (orientation:portrait){
  html:not(.og){--edge:max(40px,calc((100vw - 620px) / 2));--t-disp:min(74px,7.2svh);--m-top:24px;--m-bot:24px;--gap:16px}
}
/* narrow: tracking gives way before a line breaks */
@media (max-width:359px) and (orientation:portrait){
  html:not(.og){--edge:16px;--track-label:.10em;--track-row:.10em}
  html:not(.og) .pipeline{gap:6px}
  html:not(.og) .pipeline span{gap:6px}
}
/* short: the rhythm tightens before anything is dropped */
@media (max-width:900px) and (orientation:portrait) and (max-height:719px){
  html:not(.og){--gap:8px;--m-top:12px;--m-bot:12px}
  html:not(.og) .poster{grid-template-rows:[mark] 24px [rule] 10px [meta] minmax(0,auto) [head] auto [desc] auto [fig] minmax(132px,1fr) [spec] auto [form] auto [contact] minmax(40px,auto) [pipe] auto}
  html:not(.og) .pipeline{display:none}                      /* the process line is the first thing the plate takes back */
  html:not(.og) .spec th,html:not(.og) .spec td{min-height:20px}
}
/* shorter still (SE-class): the sheet stamp goes, and the plate is too small to carry annotations
   across the drawing — the readout goes with it and the capsule moves to the sparse top band */
@media (max-width:900px) and (orientation:portrait) and (max-height:599px){
  html:not(.og) .meta-tr,html:not(.og) .fig{display:none}
}

/* ---------- landscape phone: the poster, two columns ---------- */
@media (orientation:landscape) and (max-height:575px){
  html:not(.og){--edge:24px;--gap:10px;--cols:1;--gutter:0px;
    --t-disp:min(5.6vw,12.4svh);--lh-disp:1.14;
    --fig-b:10px;--fig-l:12px;--fig-r:12px}
  html:not(.og) .poster{
    height:100svh;min-height:0;column-gap:0;row-gap:0;
    padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom));
    grid-template-columns:[edge-l] max(var(--edge),env(safe-area-inset-left)) [col] minmax(0,1fr) [figc] 44%;
    grid-template-rows:[mark] 24px [rule] 12px [meta] 20px [head] auto [desc] auto [free] 1fr [contact] minmax(44px,auto)}
  html:not(.og) .lower{display:contents}
  html:not(.og) .wordmark{grid-row:mark;grid-column:col;margin:0}
  html:not(.og) .headrule{grid-row:rule;grid-column:col;margin:0 32px 0 0;height:12px}
  html:not(.og) .headrule::before{top:6px} html:not(.og) .headrule::after{top:3px}
  html:not(.og) .meta-tr{grid-row:meta;grid-column:col;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;gap:0}
  html:not(.og) .display{grid-row:head;grid-column:col;margin:var(--gap) 0 0}
  html:not(.og) .description{grid-row:desc;grid-column:col;margin:var(--gap) 24px 0 0;max-width:none}
  html:not(.og) .field{grid-row:1/-1;grid-column:figc;height:auto;min-height:0;
    margin:calc(-1 * max(14px,env(safe-area-inset-top))) 0 calc(-1 * max(14px,env(safe-area-inset-bottom)));
    grid-template-rows:1fr calc(var(--pitch) * 2) var(--pitch) calc(var(--pitch) * 2)}
  html:not(.og) .b0{-webkit-mask-position:0 100%;mask-position:0 100%}
  html:not(.og) .field > .capsule{top:2px;bottom:auto;right:12px}
  html:not(.og) .field-caption,html:not(.og) .spine,html:not(.og) .spec,html:not(.og) .pipeline{display:none}
  html:not(.og) .contact{grid-row:contact;grid-column:col;flex-direction:row;align-items:center;gap:16px;margin:0}
  html:not(.og) .contact a{display:inline-flex;align-items:center;min-height:44px}
  html:not(.og) .form{grid-row:free;grid-column:col;align-self:end;margin:0}
  html:not(.og) .row05{flex-wrap:wrap;align-content:flex-start;height:auto;row-gap:0}
  html:not(.og) .form label{flex:1 0 auto;margin:0;height:var(--baseline)}
  html:not(.og) .form input{flex:1 1 calc(100% - 44px);min-width:0;height:48px}
  html:not(.og) .form button{margin-right:0}
  html:not(.og) :is(.description,.spec,.form){transition:opacity var(--t-reveal) var(--ease) 480ms}
  .js:not(.ready) :is(.description,.spec,.form){opacity:0;animation:safety-op 1ms linear 2500ms forwards}
}