/* MAGOS Consulting v3.1. Inside the Machine. site.css
   Palette tokens are the owner's nineteen hexes and alpha variants of them only.
   Fonts: Google Fonts link in index.html (Instrument Serif, Instrument Sans, JetBrains Mono).

   How the journey draws. Every beat is a section with a plate group and an ordered list of machine lines,
   each a [data-emit] element. One number drives each device: --emit, 0 to 1 through the element's scroll
   window. With the scene, scene.js writes --emit and one transform on each anchored element (.is-anchored);
   without it the elements sit in normal flow and --emit animates once (cards mode) or rests at 1.
   Inside an emitter every part (.em-part) carries its own sub window as --a and --b in emitter progress, so
   rows, tags, stamps and keys print in order from the same number. Scrubbing back reverses all of it. */

@property --emit{syntax:'<number>'; inherits:true; initial-value:1}

:root{
  --teal-500:#2FB5A5; --teal-300:#7FE0D2; --teal-100:#C9F5EE; --teal-700:#137F79; --teal-glow:#9FF2E8;
  --crimson-500:#B5281F; --crimson-700:#7A1812; --crimson-300:#D9452E;
  --rust-500:#C8651F; --ochre-400:#D9913A; --brass-500:#C7A356; --brass-700:#8A6B2F; --bone-200:#E8DCC0;
  --ink-950:#14100E; --ink-900:#1E1613; --ink-800:#2A201B; --smoke-700:#3E2F28; --text-100:#F2EADB; --text-300:#C9BBA7;
  --ink-a94:rgba(20,16,14,.94); --ink-a92:rgba(20,16,14,.92); --ink-a75:rgba(20,16,14,.75); --ink-a60:rgba(20,16,14,.6); --ink-a45:rgba(20,16,14,.45); --ink-a0:rgba(20,16,14,0);
  --brass-h55:rgba(138,107,47,.55); --brass-h35:rgba(138,107,47,.35); --brass-h18:rgba(138,107,47,.18);
  --glow-35:rgba(159,242,232,.35); --glow-42:rgba(159,242,232,.42); --glow-28:rgba(159,242,232,.28);
  --teal-a28:rgba(47,181,165,.28);
  --display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --body:"Instrument Sans", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --gutter:clamp(16px, 5vw, 72px);
  --header-h:72px;
  --ease-counter:cubic-bezier(.2,.75,.15,1);
  --plate-x:5vw; --plate-y:max(96px, 13vh);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; scroll-padding-top:calc(var(--header-h) + 8px)}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--ink-950); color:var(--text-100); font-family:var(--body); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip; min-width:320px}
a{color:inherit}
img,svg{display:block; max-width:100%}
h1,h2,h3,h4{font-family:var(--display); font-weight:400; margin:0; color:var(--bone-200); letter-spacing:-.005em}
p{margin:0}
button{font:inherit; color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--teal-300); outline-offset:2px; border-radius:2px}
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--teal-500); color:var(--ink-950); padding:10px 14px; border-radius:4px; font-weight:600; text-decoration:none}
.skip:focus{top:12px}
.br-narrow{display:none}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; cursor:pointer;
  font-weight:600; font-size:15px; padding:14px 22px; border-radius:4px; line-height:1; border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.btn-primary{background:var(--teal-500); color:var(--ink-950); box-shadow:0 0 36px var(--teal-a28)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 0 0 1px var(--teal-300), 0 0 48px var(--glow-42)}
.btn-primary.glow{box-shadow:0 0 48px var(--glow-42)}
.btn.small{padding:11px 16px; font-size:14px; white-space:nowrap}
.btn-ink{background:var(--ink-950); color:var(--bone-200); border-color:var(--teal-700)}
.btn-ink:hover{background:var(--ink-900); border-color:var(--teal-500)}
.btn-ink.ghost{background:transparent; color:var(--ink-950); border-color:var(--brass-700)}
.btn-ink.ghost:hover{border-color:var(--ink-950)}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}
/* Send while the contact details are pending: still focusable (aria-disabled), visibly unavailable */
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}

/* ---------------------------------------------------------------- canvas, veil, header, rail */
.canvas-layer{position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--ink-950)}
.canvas-layer canvas{width:100%; height:100%; display:block}
.canvas-layer canvas[hidden]{display:none}
html:not(.has-scene) .canvas-layer{display:none}
.scene-labels{display:none !important}          /* the CSS2D label layer is retired: the words live in the beats */
#veil{position:fixed; inset:0; z-index:1; pointer-events:none; display:none}
html.has-scene #veil{display:block; background:radial-gradient(ellipse 46vw 34vh at 22vw 22vh, rgba(20,16,14,.35), rgba(20,16,14,0) 70%)}

.top{position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px var(--gutter); min-height:var(--header-h);
  background:linear-gradient(to bottom, var(--ink-a92), var(--ink-a60) 70%, var(--ink-a0))}
.top.is-over-paper{background:var(--ink-a92)}
.progress{position:absolute; left:0; top:0; height:2px; width:100%; transform-origin:left center; transform:scaleX(var(--p,0)); background:var(--teal-500); box-shadow:0 0 8px var(--teal-glow)}
.logo{display:inline-flex; align-items:baseline; gap:12px; text-decoration:none}
.logo .mark{font-family:var(--display); font-size:30px; letter-spacing:.18em; color:var(--bone-200); line-height:1; display:inline-flex; align-items:center}
/* the pocket watch O: the brand master's own SVG (brand/source/make-brand.mjs),
   written into journey.html by build/build.mjs. This box stands where the font's
   O would: its height with overshoot and its side bearings, tracked like the
   other letters. Only the hand moves: it sweeps to twelve on hover. */
.logo .o{display:inline-block; width:.739em; height:.739em; position:relative; margin:0 .22em 0 .04em; transform:translateY(-.02em)}
.logo .o-svg{display:block; overflow:visible}
.logo .wm-hand{transform-box:fill-box; transform-origin:50% 100%; transform:rotate(var(--hand,28deg)); transition:transform .3s ease}
.logo:hover .wm-hand, .logo:focus-visible .wm-hand{transform:rotate(0deg)}
.logo .firm{font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--text-300)}
.nav{display:flex; gap:28px}
.nav a{font-size:14px; color:var(--text-300); text-decoration:none; padding:4px 0; border-bottom:1px solid transparent}
.nav a:hover{color:var(--teal-300)}
.nav a[aria-current="true"]{color:var(--teal-300); border-bottom-color:var(--teal-500)}
.sections-toggle{display:none; background:transparent; border:1px solid var(--brass-700); color:var(--bone-200); border-radius:4px; padding:9px 12px; font-size:13px; cursor:pointer}
.sections-toggle[aria-expanded="true"]{border-color:var(--teal-500); color:var(--teal-300)}

.rail{position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:15}
.rail ol{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.rail a{display:block; width:24px; height:24px; position:relative; border-radius:50%}
.rail a::before{content:""; position:absolute; left:7px; top:7px; width:10px; height:10px; border-radius:50%; border:1px solid var(--brass-700); box-sizing:border-box; transition:background .2s, border-color .2s}
.rail a::after{content:attr(data-l); position:absolute; right:22px; top:50%; transform:translateY(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-300); opacity:0; transition:opacity .2s;
  background:var(--ink-950); padding:3px 6px; border-radius:3px; pointer-events:none}
.rail li.on a::before{background:var(--teal-500); border-color:var(--teal-300); box-shadow:0 0 12px var(--teal-glow)}
.rail a:hover::after, .rail a:focus-visible::after{opacity:1}

/* ---------------------------------------------------------------- the journey: beats */
#journey{position:relative}
.beat{position:relative}
.em-lines{list-style:none; margin:0; padding:0}

/* Cards layout (the default: no WebGL, reduced motion, a lost context, a guard failure, no JavaScript).
   Each beat in flow: plate group, the 2D state card, the same machine lines stacked in emission order. */
html:not(.has-scene) .beat{padding:clamp(88px,13vh,150px) var(--gutter) clamp(40px,7vh,88px)}
html:not(.has-scene) .beat__stage{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:repeat(6, auto) 1fr; grid-auto-flow:row dense; column-gap:clamp(32px,5vw,80px); row-gap:0; align-items:start}
html:not(.has-scene) .beat__stage > *{grid-column:1}
html:not(.has-scene) .beat__stage > .state-card{grid-column:2; grid-row:1 / 8; position:sticky; top:calc(var(--header-h) + 24px); margin:0}
html:not(.has-scene) .em-runtag, html:not(.has-scene) .em-caption-group{margin-top:10px}
html:not(.has-scene) .em-lines{margin-top:26px; display:flex; flex-direction:column; gap:16px; align-items:flex-start}
html:not(.has-scene) .em-keyrow + li:not(.em-keyrow), html:not(.has-scene) li:not(.em-keyrow) + li:not(.em-keyrow){margin-top:6px}
html:not(.has-scene) .em-keyrow{margin-top:-8px}
.state-card{margin:0}
.state-card svg{width:100%; height:auto; border-radius:6px; border:1px solid var(--brass-h35); background:var(--ink-950)}
.hero-visual .poster{width:100%; height:auto; border-radius:6px; border:1px solid var(--brass-h35)}

/* Scene modes: each beat is a scroll segment of L viewport heights; its words are emitted over the machine */
html.has-scene .beat{height:calc(var(--len) * 1vh)}
@supports (height:1lvh){ html.has-scene .beat{height:calc(var(--len) * 1lvh)} }
html.has-scene .beat#start{height:auto; min-height:calc(var(--len) * 1vh); display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:8vh}
@supports (height:1lvh){ html.has-scene .beat#start{min-height:calc(var(--len) * 1lvh)} }
html.has-scene .state-card:not(.hero-visual){display:none}
/* the hero poster stands in for the machine until the scene's first frames are ready, then fades */
html.has-scene .hero-visual{position:fixed; inset:0; z-index:2; pointer-events:none}
html.page-dock .hero-visual{z-index:-1}
html.has-scene .hero-visual .poster{width:100%; height:100%; object-fit:cover; object-position:72% 60%; border:0; border-radius:0; transition:opacity .6s ease}
html.has-scene .hero-visual .poster.is-off{opacity:0}

/* Scene anchored: the element stays in its beat; scene.js writes its transform and --emit */
html.scene-emit .is-anchored{position:fixed; left:0; top:0; margin:0; z-index:3; --emit:0; width:max-content; max-width:min(44ch, 32vw)}
html.scene-emit .em-plate-group.is-anchored{max-width:min(40vw, 620px)}
/* phones: a receipt taller than the band feeds whole row units up behind the plate; the scene writes the cut */
html.scene-emit .is-anchored.is-cut{clip-path:inset(var(--feed-top, 0px) -40px var(--feed-bot, 0px) -40px)}
/* the focus rule (desktop): a line dims once the line two after it has started; hover or focus brings it back */
html.scene-emit .is-anchored.is-dim:not(:hover):not(:focus-within):not(.em-drum){filter:opacity(.8)}
html.scene-emit .is-anchored.is-dim:not(:hover):not(:focus-within):not(.em-drum) > .em-lead{visibility:hidden}

/* Leaders: the machine reaches out before it speaks. One span per anchored emitter (not keys), a direct child
   outside any clipped paper. The scene writes the anchor point relative to the box (--ld-x, --ld-y), the length
   and angle to the nearest box edge (--ld-len, --ld-ang), --avis (0 to 1) and --blink; the line shoots out over
   e 0 to 0.2 from the anchor dot, then the text prints. */
.em-lead{display:none}
html.scene-emit .is-anchored > .em-lead{display:block; position:absolute; z-index:-1; left:var(--ld-x, 0px); top:var(--ld-y, 0px); height:1px;
  width:calc(var(--ld-len, 0px) * min(1, var(--emit) * 5)); transform-origin:0 50%; transform:rotate(var(--ld-ang, 0rad));
  background:rgba(199,163,86,.7); opacity:var(--avis, 0); pointer-events:none}
html.scene-emit .is-anchored > .em-lead::after{content:""; position:absolute; left:-3px; top:-2.5px; width:6px; height:6px; box-sizing:border-box; border-radius:50%;
  border:1px solid var(--brass-500); background:var(--ink-950);
  box-shadow:0 0 0 calc(var(--blink, 0) * 8px) rgba(199,163,86,calc(.5 * var(--blink, 0)))}
html.scene-emit .is-anchored[data-state="saved"] > .em-lead::after{box-shadow:0 0 0 calc(var(--blink, 0) * 8px) rgba(159,242,232,calc(.5 * var(--blink, 0)))}
@media (prefers-contrast: more){ html.scene-emit .is-anchored > .em-lead{height:2px; background:var(--brass-500)} }

/* Receipt feed: the paper (or the drum body) sits in a window whose bottom edge is the mouth; the scene writes
   --feed so the row being printed is at the mouth and printed rows rise, one row at a time (spec 4.4). */
.em-win{position:relative; clip-path:inset(-80px -80px 0 -80px)}
.em-win > .em-tape__paper, .em-win > .em-drum__body{transform:translateY(var(--feed, 0px))}
html.scene-emit .em-drum.is-anchored .em-win::after{content:""; position:absolute; z-index:2; left:-6px; right:-6px; bottom:0; height:3px;
  background:linear-gradient(var(--brass-500), var(--brass-700)); opacity:clamp(0, calc(var(--emit) * 60), 1)}
html.scene-emit .em-drum.is-anchored{max-width:min(52ch, 40vw)}
html.scene-emit .em-who.is-anchored{max-width:min(46ch, 34vw)}
html.scene-emit .em-keyrow.is-anchored{max-width:min(60ch, 46vw)}
html.scene-emit .em-runtag.is-anchored, html.scene-emit .em-caption-group.is-anchored{max-width:min(40vw, 620px)}
/* desktop ledger: the counter fills the push in, so the receipt and the layer rows print wide and short, under the
   layer windows instead of over them */
@media (min-width:601px) and (min-aspect-ratio:4/5) and (min-height:561px){
  html.scene-emit #ledger .em-tape.is-anchored[data-line="L2"]{max-width:min(64ch, 44vw)}
  html.scene-emit #ledger .em-read.is-anchored[data-line="L3"]{max-width:min(86ch, 56vw)}
}

/* Page dock: a scene without anchoring. The current beat's stage is fixed over the machine. */
html.page-dock .beat__stage{position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .35s ease}
html.page-dock .beat.is-current .beat__stage{opacity:1}
html.page-dock .beat.is-current [data-emit]{pointer-events:auto}
html.page-dock .beat__stage{display:flex; flex-direction:column; align-items:flex-start; padding:var(--plate-y) 0 0 var(--plate-x)}
html.page-dock .em-plate-group, html.page-dock .em-runtag, html.page-dock .em-caption-group{max-width:min(40vw, 620px)}
html.page-dock .em-lines{position:absolute; right:max(6vw, 56px); top:var(--plate-y); width:min(46ch, 36vw); display:flex; flex-direction:column; gap:12px; align-items:flex-start}
html.page-dock .em-lines > li.is-fed{display:none}
html.page-dock .em-lines > li{max-width:100%}

/* ---------------------------------------------------------------- devices */
/* part progress, 0 to 1 through the part's own sub window */
.em-part{--pp:clamp(0, calc((var(--emit) - var(--a, 0)) / (var(--b, 1) - var(--a, 0))), 1)}

/* E1 plate: an engraved headline that slides out of a slot */
.em-plate-group{color:var(--bone-200)}
.em-eyebrow{display:inline-block; margin:0 0 10px; padding:4px 9px; font:500 12px/1.4 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass-500); background:var(--ink-a92); border-radius:2px; opacity:clamp(0, calc(var(--pp) * 30), 1)}
.em-plate{position:relative; margin:0; max-width:min(40vw, 620px); font:400 clamp(30px,3vw,46px)/1.04 var(--display); letter-spacing:.005em; color:var(--bone-200); text-wrap:balance;
  --ep:calc(1 - (1 - var(--pp)) * (1 - var(--pp)) * (1 - var(--pp)))}
h1.em-plate{font-size:clamp(36px,4vw,60px); max-width:min(46vw, 720px)}
.em-plate__mask{display:block; overflow:hidden; padding-bottom:3px}
.em-plate__face{display:block; position:relative; padding:14px 22px 16px; background:var(--ink-900);
  border:1px solid var(--brass-700);
  box-shadow:inset 0 1px 0 rgba(199,163,86,.35), inset 0 -1px 0 rgba(0,0,0,.5), 0 10px 28px rgba(20,16,14,.6);
  text-shadow:0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(199,163,86,.18);
  transform:translateY(calc((1 - var(--ep)) * 104%))}
.em-plate__face::before, .em-plate__face::after{content:""; position:absolute; top:8px; width:5px; height:5px; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--brass-500), var(--brass-700))}
.em-plate__face::before{left:8px}
.em-plate__face::after{right:8px}
.em-plate__slot{position:absolute; left:-12px; right:-12px; bottom:0; height:3px; z-index:1; opacity:clamp(0, calc(var(--pp) * 30), 1); background:linear-gradient(var(--brass-500), var(--brass-700)); box-shadow:0 1px 0 var(--ink-950)}
.em-plate em{font-style:italic; color:var(--teal-300); text-shadow:0 0 28px var(--glow-35)}

/* run tag: one descriptor docked under the plate for a single source beat (spec C5) */
.em-runtag{display:block; width:fit-content; max-width:min(40vw, 620px); margin:6px 0 0; padding:5px 10px; font:400 12px/1.45 var(--mono); color:var(--text-300);
  background:var(--ink-a94); border-left:2px solid var(--brass-700)}

/* E3 tape: bone paper, typed one character at a time with a printhead, out of a brass mouth */
.em-tape{position:relative; max-width:min(44ch, 32vw); padding-bottom:4px}
.em-tape__paper{position:relative; padding:9px 13px 11px; background:var(--bone-200); color:var(--ink-950); font:400 15px/1.45 var(--mono);
  box-shadow:0 0 0 1px rgba(20,16,14,.85), 0 10px 26px rgba(20,16,14,.7); opacity:clamp(0, calc(var(--emit) * 60), 1)}
.em-tape__paper > p{margin:0}
.em-tape__paper > p + p{margin-top:2px}
.em-tape__paper .em-tag{margin-top:3px; font-size:12px; color:var(--ink-900); opacity:.85}
.em-tape__mouth{position:absolute; left:-6px; right:-6px; bottom:0; height:4px; background:linear-gradient(var(--brass-500), var(--brass-700)); opacity:clamp(0, calc(var(--emit) * 60), 1)}
/* the printhead of a row: aria hidden, at the row's cut, shown only while that row prints (main.js row map) */
.em-tape__text, .em-tape .em-tag, .em-eyebrow, .em-runtag, .em-caption{position:relative}
.em-head{position:absolute; width:.62ch; background:currentColor; pointer-events:none;
  opacity:calc(min(1, var(--hf, 1) * 1000) * min(1, (1 - var(--hf, 1)) * 1000))}

/* E2 readout: switches on as the needle settles; the text never changes value, it resolves */
.em-read{position:relative; max-width:min(44ch, 32vw); color:var(--text-100); font:400 15px/1.45 var(--mono)}
/* the backing builds row by row with the reveal, so a readout never shows an empty box while it switches on */
.em-read__glass{display:flex; flex-direction:column; align-items:stretch; opacity:clamp(0, calc(var(--emit) * 60), 1)}
.em-read__glass > .em-read__line, .em-read__glass > .em-tag{background:var(--ink-a94); padding:3px 12px 3px 14px; border-left:2px solid var(--rd-edge, var(--bone-200))}
.em-read__glass > .em-read__line:first-child{padding-top:8px}
.em-read__glass > .em-read__line:last-child, .em-read__glass > .em-tag:last-child, .em-read__glass > :is(.em-read__line, .em-tag):has(+ .em-stamp){padding-bottom:9px}
.em-read__glass > .em-stamp{align-self:flex-start}
.em-read__line{margin:0;
  --ex:clamp(0, calc((var(--pp) - .15) / .85), 1);
  clip-path:inset(-3px calc((1 - var(--ex)) * 100%) -3px -3px);
  opacity:calc(.6 + .4 * clamp(0, calc((var(--pp) - .22) * 30), 1))}
.em-read__line + .em-read__line{box-shadow:inset 0 1px 0 rgba(201,187,167,.14); padding-top:5px}
.em-read .fig{font-weight:500; color:var(--rd-fig, var(--bone-200)); font-variant-numeric:tabular-nums; filter:blur(calc((1 - var(--ex)) * 3px))}
.em-read[data-state="loss"]{--rd-fig:var(--ochre-400); --rd-edge:var(--crimson-700)}
.em-read[data-state="measured"]{--rd-fig:var(--bone-200); --rd-edge:var(--bone-200)}
.em-read[data-state="saved"]{--rd-fig:var(--teal-300); --rd-edge:var(--teal-500)}
.em-read[data-state="bone"]{--rd-fig:var(--bone-200); --rd-edge:var(--brass-500)}
/* counts and career years are not finance validated money: bone, even inside a saved readout (spec 4.11) */
.em-read .fig.is-count{color:var(--bone-200)}
.em-read .em-tag{margin:0; padding-top:4px; font-size:12px; line-height:1.45; color:var(--text-300);
  clip-path:inset(-3px calc((1 - var(--pp)) * 100%) -3px -3px)}

/* tags anywhere: 12px mono, never on their own */
.em-tag{font-family:var(--mono)}

/* E5 stamp: lands with a thunk; text authored in sentence case, uppercased here; color on the border only */
.em-stamp{display:inline-block; margin:10px 0 2px; padding:5px 10px; font:500 12px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--st-ink, var(--bone-200)); border:2px solid var(--st-line, var(--bone-200)); background:var(--st-bg, var(--ink-a94)); border-radius:2px;
  transform-origin:12% 50%; transform:rotate(-1.5deg) scale(calc(1.6 - .6 * var(--pp))); opacity:clamp(0, calc(var(--pp) * 3), 1)}
.em-stamp.is-long{text-transform:none; letter-spacing:.02em; font-size:14px; border-style:double; border-width:3px; max-width:36ch}
.em-stamp[data-kind="validated"]{--st-line:var(--teal-500)}
.em-stamp[data-kind="identified"], .em-stamp[data-kind="modeled"], .em-stamp[data-kind="reported"]{--st-line:var(--brass-500)}
.em-stamp[data-kind="layer"]{--st-line:var(--bone-200)}
.em-stamp[data-kind="state"][data-state="measured"]{--st-line:var(--bone-200)}
.em-stamp[data-kind="state"][data-state="saved"]{--st-line:var(--teal-500)}
/* on bone paper (inside tapes and the work order) the ink is ink 950 and the color is the border */
.em-tape .em-stamp, .wo .em-stamp{--st-ink:var(--ink-950); --st-bg:transparent}
.em-tape .em-stamp[data-kind="validated"]{--st-line:var(--teal-700)}
.em-tape .em-stamp:not([data-kind="validated"]){--st-line:var(--brass-700)}

/* E7 key: ask keys and CTAs rise out of a slot */
.em-keys{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 0}
.em-keyrow .em-keys{margin:0; flex-wrap:nowrap}
html.scene-emit .em-plate-group.is-anchored{z-index:5}
html.scene-emit .em-keyrow.is-anchored{z-index:4}   /* a key paints over any leader line or tape that crosses it */
.em-key{display:inline-flex; align-items:center; min-height:40px; padding:0 16px; cursor:pointer; text-decoration:none; white-space:nowrap;
  font:500 13px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-950);
  background:var(--brass-500); border:0; border-bottom:3px solid var(--brass-700); border-radius:2px;
  clip-path:inset(-60px -60px calc((1 - var(--pp)) * (100% + 60px) - 60px) -60px); transform:translateY(calc((1 - var(--pp)) * 12px))}
.em-key:hover{background:#D4B46C}
.em-key:active{transform:translateY(2px); border-bottom-width:1px}
.em-key:focus-visible{outline:2px solid var(--teal-300); outline-offset:2px}
.em-key.is-primary{background:var(--teal-500); border-bottom-color:var(--teal-700); box-shadow:0 0 40px var(--glow-35)}
.em-key.is-primary:hover{background:var(--teal-300)}
/* phones: a CTA row with more than one key can keep its primary key alone, so it fits one row */
html.scene-emit .em-ctas.is-compact .em-key:not(.is-primary){display:none}

/* E4 drum: the big figure rolls on reels and settles left to right; the real text shows as they stop */
.em-drum{position:relative; max-width:min(52ch, 40vw)}
.em-drum__body{padding:12px 16px 12px; background:var(--ink-a94); border:1px solid var(--brass-500); opacity:clamp(0, calc(var(--emit) * 60), 1)}
.em-drum__fig{position:relative; margin:0; width:fit-content; font:500 clamp(40px,4.2vw,62px)/1.1 var(--mono); --lh:1.1; letter-spacing:0; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--teal-300);
  --settled:clamp(0, calc((var(--pp) - .995) * 1000), 1)}
.em-drum__fig .em-drum__text{opacity:var(--settled); text-shadow:0 0 28px var(--glow-35)}
.em-drum__label{margin:10px 0 0; padding:7px 11px 8px; background:var(--bone-200); color:var(--ink-950); font:400 14px/1.45 var(--mono);
  clip-path:inset(0 0 calc((1 - min(1, var(--pp) * 20)) * 100%) 0)}   /* never a blank bone bar before its window */
.em-drum__body .em-tag{margin-top:6px; font-size:12px; color:var(--text-300); clip-path:inset(-3px calc((1 - var(--pp)) * 100%) -3px -3px)}
.em-drum-fig{position:relative; display:inline-block; --lh:1.45; line-height:1.45; white-space:nowrap; --settled:clamp(0, calc((var(--pp) - .995) * 1000), 1)}
.em-drum-fig .em-drum__text{opacity:var(--settled)}
.em-drum__reels{position:absolute; left:0; top:0; display:flex; white-space:pre; pointer-events:none; color:var(--bone-200); opacity:calc(1 - var(--settled))}
.em-drum__reels .g, .em-drum__reels .reel{display:block; width:1ch; height:calc(var(--lh) * 1em); line-height:var(--lh); overflow:hidden}
.em-drum__reels .g::before{content:attr(data-g)}
.em-drum__reels .reel{--q:clamp(0, calc((var(--pp) - var(--o0)) / (1 - var(--o0) - var(--o1))), 1)}
.em-drum__reels .strip{display:block; width:1ch;
  transform:translateY(calc(-1em * var(--lh) * var(--N) * (1 - var(--q)) * (1 - var(--q)) * (1 - var(--q))))}
.em-drum__reels .strip::before{content:attr(data-seq); display:block; width:1ch; white-space:normal; word-break:break-all; line-height:var(--lh)}

/* who: one group per principal (small name plate, lane tape, two readout rows, key) */
.em-who .em-name{display:inline-block; margin:0 0 6px; padding:5px 12px 6px; font:400 24px/1.1 var(--display); color:var(--bone-200);
  background:var(--ink-900); border:1px solid var(--brass-700); box-shadow:inset 0 1px 0 rgba(199,163,86,.35);
  clip-path:inset(calc((1 - var(--pp)) * 100%) -4px -4px -4px)}
.em-lane{display:block; width:fit-content; margin:0 0 6px; padding:3px 9px; background:var(--bone-200); color:var(--ink-950); font:400 14px/1.45 var(--mono)}
.em-who .em-name{align-self:flex-start}
.em-who .em-lane{align-self:flex-start}

/* run the rhythm: the printhead strike flash rides the balance wheel (spec C8) */
.is-strike .em-head{background:var(--brass-500)}

/* who plate group: the caption prints bare under the plate; the plate stamp lands beside it */
.em-caption{display:block; width:fit-content; max-width:min(40vw, 620px); margin:8px 0 0; padding:4px 9px; font:400 13px/1.45 var(--mono); color:var(--bone-200); background:var(--ink-a94)}

/* the start beat's status line (the fourteenth lens): real text, not announced on change */
.em-status{font:500 12px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-900); padding:4px 8px; border:1px solid var(--brass-700); border-radius:2px}
.wo.is-signal .em-status{border-color:var(--teal-700); box-shadow:inset 3px 0 0 var(--teal-700)}

/* ---------------------------------------------------------------- the work order (start beat contact) */
.wo{position:relative; z-index:6; width:min(760px, 100%); margin:clamp(32px,6vh,64px) auto 0; scroll-margin-top:calc(var(--header-h) + 8px)}
html.has-scene .wo{width:min(680px, 92vw); margin:0 max(6vw, 56px) 0 auto}
.wo__slot{height:6px; margin:0 -8px; background:linear-gradient(var(--brass-500), var(--brass-700)); border-radius:2px; box-shadow:0 2px 0 var(--ink-950)}
.wo__card{background:var(--bone-200) url(../assets/texture-bone-ledger-paper.webp); background-size:512px 512px; color:var(--ink-950);
  padding:24px clamp(18px,3vw,36px) 28px; box-shadow:0 30px 60px rgba(20,16,14,.45)}
.wo__head{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; border-bottom:2px double var(--brass-700); padding-bottom:14px}
.wo__title{font:400 clamp(30px,3vw,40px)/1.05 var(--display); color:var(--ink-950)}
.wo__first{flex-basis:100%; font:500 14px/1.45 var(--mono); color:var(--ink-950)}
.wo__lede{margin:16px 0 4px; font-size:16px; color:var(--ink-900)}
html.js .wo:not(.is-on) .wo__card{clip-path:inset(0 0 100% 0)}
html.js .wo.is-on .wo__card{clip-path:inset(0 0 0 0); transition:clip-path .9s steps(18)}
html.js .wo:not(.is-on) .wo__body{opacity:0}
html.js .wo.is-on .wo__body{opacity:1; transition:opacity .5s ease .7s}
.contact-form{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.contact-form .field.full{grid-column:1 / -1}
.field{display:grid; gap:4px; margin-top:14px}
.field label{font-weight:600; font-size:14px; color:var(--ink-950)}
.field input, .field select, .field textarea{font:inherit; font-size:16px; padding:10px 12px; border:1px solid var(--brass-700); border-radius:4px; background:rgba(232,220,192,.6); color:var(--ink-950); width:100%}
.field select{-webkit-appearance:none; appearance:none; min-height:44px; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314100E' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{outline:2px solid var(--ink-950); outline-offset:2px; border-color:var(--teal-700)}
.field .help{font-size:12.5px; color:var(--ink-900); line-height:1.45}
.field .err{font-size:12.5px; color:var(--crimson-500); font-weight:600; line-height:1.45}
.field.invalid input{border-color:var(--crimson-500)}
.submit-row{display:flex; flex-direction:row; align-items:center; gap:16px; flex-wrap:wrap}
.form-note{font-size:13px; color:var(--ink-900); font-style:italic}
.form-note.ok{font-style:normal}
.contact-rows{margin:22px 0 0; display:grid; gap:10px}
.contact-rows div{display:grid; grid-template-columns:110px 1fr; gap:10px; border-top:1px solid var(--brass-700); padding-top:8px; min-height:30px}
.contact-rows dt{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-900); padding-top:3px}
.contact-rows dd{margin:0; font-size:15px; color:var(--ink-950)}
.wo .submit-row .btn{min-height:48px}
.wo__call{margin-top:16px; font-size:15px}
.wo__call[hidden]{display:none}
.wo .under{margin-top:12px; font-size:13px; color:var(--ink-900)}
.wo a:not(.btn){color:var(--ink-950); text-decoration-color:var(--teal-700)}
.wo :focus-visible{outline-color:var(--ink-950)}
/* the composed question: shown after Send (the mailto fallback for webmail) or when a form endpoint fails */
.wo__sent{margin-top:16px; padding:14px 16px; border:1px solid var(--brass-700); border-left:3px solid var(--teal-700); border-radius:3px; background:rgba(232,220,192,.5)}
.wo__sent[hidden]{display:none}
.wo__sent-head{margin:0 0 10px; font-size:14px; color:var(--ink-950)}
.wo__sent-head a{overflow-wrap:anywhere}
.wo__sent-body{margin:0 0 12px; max-height:220px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font:400 13px/1.5 var(--mono); color:var(--ink-950); background:var(--bone-200); border:1px solid var(--brass-700); border-radius:2px; padding:10px 12px}
.wo__sent-row{display:flex; flex-wrap:wrap; gap:10px; margin:0}
.wo__sent-row .btn{min-height:44px}
.wo.is-sent .form-note{font-weight:600}
/* without JavaScript Send cannot compose anything: it is hidden, and the note says the details are coming */
html:not(.js) #cf-submit, html:not(.js) #cf-copy{display:none}

/* ---------------------------------------------------------------- 2D state cards (cards mode) */
.state-card .needle{transform-box:fill-box; transform-origin:center; transform:rotate(var(--a, 0deg)); transition:transform 1.2s var(--ease-counter)}
.state-card .lens{transition:fill .8s ease}
.state-card .lens.bone{fill:var(--bone-200)}
.state-card .lens.teal{fill:var(--teal-500)}
.state-card .halo{transition:opacity .8s ease}
.state-card .loss{transition:stroke-dasharray 1.6s var(--ease-counter)}
.state-card .heap{transform-box:fill-box; transform-origin:center bottom; transition:transform 1.2s ease}
.state-card .cyl .fill{transform-box:fill-box; transform-origin:center bottom; transform:scaleY(var(--lvl)); transition:transform 1.6s var(--ease-counter)}
.state-card .gate .fall{transform-box:fill-box; transform-origin:center bottom; transform:rotate(80deg); opacity:0; transition:transform .6s ease, opacity .6s ease}
.state-card .key{transition:transform 1.2s ease, opacity 1.2s ease; transform:translateY(-30px); opacity:0}
.state-card .gatebars .lift{transition:transform 1.2s ease; transform:translateY(-34px)}
.state-card .plate, .state-card .board, .state-card .eplate, .state-card .fourteen{transition:transform 1.2s var(--ease-counter)}
.state-card .roll{transition:transform 2.4s var(--ease-counter)}
.state-card .face{transition:fill 1.2s ease}
.state-card .arc{transition:opacity .8s ease}
.state-card .stripe{transform-box:fill-box; transform-origin:left center; transition:transform 1.2s ease}
.state-card .tier{transition:stroke 1.2s ease; stroke:var(--bone-200)}
.state-card .cone{transition:opacity 1.2s ease}
.state-card .units{transition:opacity 1s ease}
html.js .state-card:not(.is-on) .needle{transform:rotate(-125deg)}
html.js .state-card:not(.is-on) .lens.bone, html.js .state-card:not(.is-on) .lens.teal{fill:var(--crimson-700)}
html.js .state-card:not(.is-on) .halo{opacity:0}
html.js .state-card:not(.is-on) .loss{stroke-dasharray:33 67}
html.js .state-card:not(.is-on) .cyl .fill{transform:scaleY(var(--from))}
html.js .state-card:not(.is-on) .gate .fall{transform:none; opacity:1}
html.js .state-card:not(.is-on) .key{transform:none; opacity:1}
html.js .state-card:not(.is-on) .gatebars .lift{transform:none}
html.js .state-card:not(.is-on) .plate{transform:translateY(60px)}
html.js .state-card:not(.is-on) .roll{transform:translateY(44px)}
html.js .state-card:not(.is-on) .board{transform:translateY(60px)}
html.js .state-card:not(.is-on) .face{fill:var(--ink-800)}
html.js .state-card:not(.is-on) .arc{opacity:0}
html.js .state-card:not(.is-on) .stripe{transform:scaleX(0)}
html.js .state-card:not(.is-on) .tier{stroke:var(--brass-700)}
html.js .state-card:not(.is-on) .cone{opacity:0}
html.js .state-card:not(.is-on) .units{opacity:0}
html.js .state-card:not(.is-on) .heap{transform:scaleY(0)}
html.js .state-card:not(.is-on) .eplate{transform:translateY(-80px)}
html.js .state-card:not(.is-on) .fourteen{transform:translateX(-14px)}
.state-card.is-on .loss{stroke-dasharray:0 100}
.state-card .gauge.dock .arc{opacity:1}
@media (prefers-reduced-motion: no-preference){
  @keyframes tick{0%{transform:rotate(-11deg)}100%{transform:rotate(11deg)}}
  @keyframes pulse{0%,100%{opacity:.28}50%{opacity:.6}}
  @keyframes lenspulse{0%,100%{opacity:.75}50%{opacity:1}}
  @keyframes jitter{0%,100%{transform:rotate(-120deg)}30%{transform:rotate(-128deg)}60%{transform:rotate(-114deg)}}
  .state-card.is-on .balance, html:not(.js) .state-card .balance{transform-box:fill-box; transform-origin:center; animation:tick 1s cubic-bezier(.45,0,.55,1) infinite alternate}
  .state-card.is-on .halo{animation:pulse 3.2s ease-in-out infinite}
  .state-card.is-on .lens.pulse{animation:lenspulse 2s ease-in-out infinite}
  html.js .state-card:not(.is-on) .needle.jitter{animation:jitter 1.3s ease-in-out infinite}
  .state-card .needle.jitter{transform:rotate(-120deg)}
}

/* ---------------------------------------------------------------- motion: hero intro and the cards typewriter */
@keyframes emitIn{from{--emit:0}to{--emit:1}}
/* hero intro (scene modes): eyebrow, plate, the first tape and both CTA keys play once on first paint */
html.is-intro.has-scene #hero [data-at="load"]{animation:emitIn 1.2s var(--ease-counter) both}
html.is-intro.has-scene #hero .em-tape[data-at="load"]{animation-duration:1.3s; animation-delay:.25s; animation-timing-function:linear}
/* cards mode: each beat types once as it enters; keys are always out */
html.js.no-scene:not(.reduced-motion) .beat:not(.is-on) [data-emit]{--emit:0}
html.js.no-scene:not(.reduced-motion) .beat.is-on:not(.is-static) [data-emit]{animation:emitIn var(--dur, 1.2s) linear var(--delay, 0s) both}
html.no-scene .em-keys, html:not(.has-scene) .em-keys{--pp:1}
/* reduced motion: every emitter shows its final state with no transition */
html.reduced-motion [data-emit]{--emit:1 !important; animation:none !important}
html.reduced-motion .wo__card, html.reduced-motion .wo__body{clip-path:none !important; opacity:1 !important; transition:none !important}
html.reduced-motion .logo .wm-hand{transition:none}
html.reduced-motion .logo:hover .wm-hand, html.reduced-motion .logo:focus-visible .wm-hand{transform:rotate(var(--hand,28deg))}

@media (prefers-reduced-motion: reduce){
  [data-emit]{--emit:1 !important; animation:none !important}
  .state-card *{transition-duration:0s !important}
  .logo .wm-hand{transition:none}
  .logo:hover .wm-hand, .logo:focus-visible .wm-hand{transform:rotate(var(--hand,28deg))}
  .btn{transition:none}
  .btn-primary:hover{transform:none}

}

/* ---------------------------------------------------------------- footer */
.foot-bar{position:relative; z-index:5; border-top:1px solid var(--smoke-700); background:var(--ink-950); padding:44px var(--gutter) 52px; color:var(--text-300); font-size:14px}
.foot-grid{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:20px 48px; align-items:start}
.foot-tag{margin-top:14px; font-family:var(--display); font-size:24px; color:var(--bone-200)}
.figures-note{max-width:56ch; font-size:13.5px}
.foot-links{display:flex; gap:12px 22px; flex-wrap:wrap; align-items:center; grid-column:1 / -1}
.foot-links a, .linkish{color:var(--text-300); text-decoration:none; border:0; border-bottom:1px solid var(--brass-h55); padding:3px 0 2px; background:transparent; cursor:pointer; font:inherit; font-size:14px}
.foot-links a:hover, .linkish:hover{color:var(--teal-300)}
.nocookie{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--text-300)}
.privacy{grid-column:1 / -1; font-size:13px; max-width:70ch}
.privacy p{margin:0}
.privacy p + p{margin-top:4px}
.legal{grid-column:1 / -1; font-size:12.5px; border-top:1px solid var(--smoke-700); padding-top:18px}

/* ---------------------------------------------------------------- contrast preference */
@media (prefers-contrast: more){
  .em-read__glass, .em-drum__body, .em-runtag, .em-eyebrow, .em-caption, .em-stamp{background-color:var(--ink-950)}
  .em-tape__paper{box-shadow:0 0 0 2px var(--ink-950)}
}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .sections-toggle{display:inline-block}
  .nav{display:none; position:absolute; left:var(--gutter); right:var(--gutter); top:calc(100% - 4px); flex-direction:column; gap:0; background:var(--ink-900); border:1px solid var(--smoke-700); border-radius:6px; padding:6px 0; box-shadow:0 20px 50px var(--ink-a60)}
  .nav.open{display:flex}
  .nav a{padding:12px 16px; border-bottom:1px solid var(--brass-h18); font-size:15px}
  .nav a:last-child{border-bottom:0}
  .nav a[aria-current="true"]{border-left:2px solid var(--teal-500)}
}
@media (max-width:900px){
  .rail{display:none}
  html:not(.has-scene) .beat__stage{grid-template-columns:1fr; grid-template-rows:none}
  html:not(.has-scene) .beat__stage > .state-card{grid-column:1; grid-row:auto; margin-top:22px}
  html:not(.has-scene) .state-card{position:static}

  .foot-grid{grid-template-columns:1fr}
}
/* phones, narrow or portrait screens and short screens (a landscape phone, 200% zoom): the same machine and the
   same lines, in a band under the plate (spec 6.4; landscape phones keep phone type, spec 6.3) */
@media (max-width:600px), (max-aspect-ratio:4/5), (max-height:560px){
  :root{--plate-x:max(16px, 4vw); --plate-y:64px; --band-w:calc(100vw - 32px)}
  html.has-scene #veil{background:linear-gradient(to bottom, rgba(20,16,14,.78) 0, rgba(20,16,14,.78) 44%, rgba(20,16,14,0) 52%)}
  .br-narrow{display:inline}
  .em-plate, h1.em-plate{font-size:28px; max-width:var(--band-w); text-wrap:wrap}
  h1.em-plate{font-size:32px}
  .em-runtag, .em-caption{max-width:var(--band-w)}
  .em-tape, .em-read, .em-drum{max-width:var(--band-w)}
  .em-tape__paper, .em-read{font-size:14px; line-height:1.45}
  .em-read .fig{font-size:inherit}   /* figures keep the 14px advance so a row holds 39 characters */
  .em-tape__paper{padding:8px 12px 10px}
  .em-read__glass{padding:0}   /* the rows carry their own 24px of padding and edge: 39 characters a row at 390 (spec C20) */
  .em-drum__fig{font-size:44px}
  .em-drum__label, .em-lane{font-size:13px}
  .em-stamp.is-long{font-size:13px; max-width:var(--band-w)}
  .em-key{min-height:44px; font-size:13px}
  html.scene-emit .is-anchored, html.scene-emit .em-plate-group.is-anchored, html.scene-emit .em-drum.is-anchored, html.scene-emit .em-who.is-anchored,
  html.scene-emit .em-keyrow.is-anchored, html.scene-emit .em-runtag.is-anchored, html.scene-emit .em-caption-group.is-anchored{max-width:var(--band-w)}
  html.scene-emit .is-anchored > .em-lead{background:var(--brass-500)}   /* 1px brass 500 on phones (spec 6.5) */
  /* the plate mask: older lines feed up behind the plate and its dock (spec 6.4) */
  html.scene-emit .em-plate-group.is-anchored::before{content:""; position:absolute; z-index:-1; left:calc(-1 * var(--plate-x)); width:100vw; top:-64px; bottom:-8px; pointer-events:none;
    background:linear-gradient(to bottom, rgba(20,16,14,.97) calc(100% - 10px), rgba(20,16,14,0)); opacity:clamp(0, calc(var(--emit) * 20), 1)}
  /* compact type to the phone heights of the copy deck (14px lines at 20.3px, 12px tags) */
  .em-plate-group{position:relative; padding-top:9px}
  .em-eyebrow{position:absolute; top:0; left:12px; z-index:2; margin:0; padding:2px 7px; font-size:12px; letter-spacing:.12em; border:1px solid var(--brass-700)}
  .em-plate__face{padding:13px 14px 9px}
  .em-plate, h1.em-plate{line-height:1}
  .em-read__glass > .em-read__line, .em-read__glass > .em-tag{padding:2px 10px 2px 12px}
  .em-read__glass > .em-read__line:first-child{padding-top:6px}
  .em-read__glass > .em-read__line:last-child, .em-read__glass > .em-tag:last-child, .em-read__glass > :is(.em-read__line, .em-tag):has(+ .em-stamp){padding-bottom:7px}
  .em-read__line + .em-read__line{padding-top:3px}
  .em-tape__paper{padding:6px 10px 8px}
  .em-stamp{margin:9px 0 0; padding:3px 8px; letter-spacing:.08em; transform-origin:0 100%}   /* the rotation never rises into the row above */
  .em-runtag{padding:3px 8px}
  .em-caption{margin-top:0; padding:3px 8px}
  .em-who .em-name{font-size:19px; padding:3px 9px 4px; margin-bottom:4px}
  .em-lane{font-size:12.5px; padding:2px 8px; margin-bottom:4px}
  .em-key{padding:0 12px; letter-spacing:.06em; font-size:12.5px}
  .em-drum__body{padding:8px 10px}
  .em-drum__label{margin-top:6px; padding:4px 8px}
  html.page-dock .beat__stage{gap:8px; padding:var(--plate-y) var(--plate-x) 0}
  html.page-dock .em-plate-group, html.page-dock .em-runtag, html.page-dock .em-caption-group{max-width:var(--band-w)}
  html.page-dock .em-lines{position:static; width:auto; max-width:var(--band-w); gap:8px}
  .em-who .em-name{font-size:20px}
}
/* a short landscape screen: the band is a left column under the plate, the objects keep the right half */
@media (max-height:560px) and (min-aspect-ratio:1/1){
  :root{--band-w:min(48vw, 560px)}
  html.has-scene #veil{background:linear-gradient(to right, rgba(20,16,14,.8) 0, rgba(20,16,14,.8) 50%, rgba(20,16,14,0) 60%)}
  .em-plate, h1.em-plate{font-size:26px}
  html.scene-emit .em-plate-group.is-anchored::before{left:-16px; width:calc(var(--band-w) + 32px)}
}
@media (max-width:640px){
  :root{--header-h:60px; --gutter:16px}
  body{font-size:16px}
  .top{padding:10px 16px; gap:12px}
  .top .firm{display:none}
  .logo .mark{font-size:24px}
  .contact-form{grid-template-columns:1fr}
  .contact-rows div{grid-template-columns:1fr}
  html:not(.has-scene) .beat{padding-top:88px}
  html.has-scene .wo{margin:0 auto; width:calc(100vw - 32px)}

}

/* ---------------------------------------------------------------- v3: the ask mechanic */
/* An ask key is the primary key of its beat: teal like the hero's primary, with a lit lens before its label (the
   fourteenth lens it will light at the work order). */
.em-key.is-ask::before{content:""; flex:none; width:7px; height:7px; margin-right:9px; border-radius:50%; background:var(--ink-950);
  box-shadow:0 0 0 2px rgba(20,16,14,.22), 0 0 10px rgba(201,245,238,.9)}
.em-key.is-ask:focus-visible{outline-color:var(--teal-100)}
.sr-only{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
/* the work order: the question bank sits under the lede, the question box first, everything else optional */
.wo__bank{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.wo__q{display:inline-flex; align-items:center; min-height:40px; padding:8px 12px; text-align:left; cursor:pointer;
  font:500 14px/1.3 var(--body); color:var(--ink-950); background:rgba(232,220,192,.7); border:1px solid var(--brass-700); border-left:3px solid var(--teal-700); border-radius:3px}
.wo__q:hover{background:var(--bone-200); border-color:var(--ink-950); border-left-color:var(--teal-700)}
.wo__q:focus-visible{outline:2px solid var(--ink-950); outline-offset:2px}
.wo__optional{grid-column:1 / -1; min-width:0; margin:16px 0 0; padding:0; border:0; border-top:1px solid var(--brass-700)}
.wo__optional-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.wo__optional-grid .field.full{grid-column:1 / -1}
.field textarea{resize:vertical; min-height:7.5em}

/* the optional details fold under Send */
.wo__optional > summary{display:flex; align-items:center; min-height:44px; padding:6px 0 0; cursor:pointer; list-style:none;
  font:500 11px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-900)}
.wo__optional > summary::-webkit-details-marker{display:none}
.wo__optional > summary::before{content:"+"; display:inline-block; width:1.2em; font-size:14px; color:var(--brass-700)}
.wo__optional > summary::before{transition:transform .2s ease; text-align:center}
.wo__optional[open] > summary::before{transform:rotate(45deg)}
.wo__optional > summary:focus-visible{outline:2px solid var(--ink-950); outline-offset:2px}
/* without JavaScript an ask cannot write into the form: the asks and the bank stand down, the form still works */
html:not(.js) [data-ask], html:not(.js) .em-keyrow:has(> .em-keys > [data-ask]:only-child), html:not(.js) .em-ctas, html:not(.js) .wo__bank{display:none}
@media (max-width:640px){
  .em-key.is-ask::before{width:6px; height:6px; margin-right:7px}
  .wo__optional-grid{grid-template-columns:1fr}
  .wo__bank{flex-direction:column}
  .wo__q{width:100%; min-height:44px}
  .wo__q{min-height:44px}
  .top{padding-block:8px}
  .top .book, .top .sections-toggle{min-height:44px; display:inline-flex; align-items:center}
  .top .logo{min-height:44px; align-items:center}
  .foot-links a, .linkish{display:inline-flex; align-items:center; min-height:44px; padding:0}
  .foot-brand .logo{min-height:44px}
}

/* phones under 380 wide (an iPhone SE): the hero statement keeps to two lines, so the band keeps its room */
@media (max-width:380px){
  h1.em-plate{font-size:29px}
}
/* the narrowest phones (320 to 360 wide, an iPhone SE): the header keeps all three controls on one row */
@media (max-width: 360px){
  .top{gap:8px; padding-inline:12px}
  .top .sections-toggle{padding-inline:10px; font-size:13px}
  .top .book{padding-inline:12px; font-size:13px; white-space:nowrap}
  .top .mark{font-size:20px}
  .em-key{padding-inline:10px}
  .em-keyrow .em-keys{flex-wrap:wrap}
  .em-key{white-space:normal; text-align:left; line-height:1.25; padding-block:10px; max-width:calc(100vw - 32px)}
}

/* touch screens of any width (a landscape phone, a tablet): 44px targets, as on narrow phones */
@media (pointer: coarse){
  .em-key{min-height:44px}
  .wo__q{min-height:44px}
  .top .book, .top .sections-toggle{min-height:44px; display:inline-flex; align-items:center}
  .top .logo{min-height:44px; display:inline-flex; align-items:center}
  .foot-links a, .linkish{display:inline-flex; align-items:center; min-height:44px; padding-block:0}
  .foot-brand .logo{min-height:44px; display:inline-flex; align-items:center}
  .wo__optional > summary{min-height:44px}
  .rail{right:4px}
  .rail ol{gap:0}
  .rail a{width:44px; height:44px}
  .rail a::before{left:17px; top:17px}
  .rail a::after{right:36px}
}

/* a heading focused by a section link is a landing point, not a control: no ring */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus{outline:none}

/* ---------------------------------------------------------------- back to the main site
   The traditional page is the default front door; this journey is the optional view.
   A matching control sits in the header and once more in the footer. */
.tomain{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-300); text-decoration:none; border:1px solid var(--brass-700); border-radius:4px;
  padding:9px 11px; white-space:nowrap; line-height:1}
.tomain:hover, .tomain:focus-visible{color:var(--teal-300); border-color:var(--teal-500)}
.tomain::before{content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--brass-500); margin-right:8px; vertical-align:1px}
.foot-links .tomain{border-color:var(--brass-700)}
/* the header control spells the whole phrase out wherever the row has room */
.tomain__pre{display:none}
@media (min-width:900px){.top .tomain__pre{display:inline}}
@media (pointer: coarse){.tomain{min-height:44px; display:inline-flex; align-items:center}}
/* Narrow phones: four controls will not sit on one header row, so in the header
   the control reduces to a back arrow. Its accessible name stays the full
   "Back to the main site", and the footer control keeps the words. */
@media (max-width:459px){
  .top{gap:6px}
  .top .logo .firm{display:none}
  .top .tomain{padding-inline:10px}
  .top .tomain__t{display:none}
  .top .tomain::before{content:"\2190"; width:auto; height:auto; border-radius:0; background:none;
    box-shadow:none; margin-right:0; vertical-align:0; font-family:var(--mono); font-size:15px;
    line-height:1; color:var(--bone-200)}
  .top .tomain:hover::before, .top .tomain:focus-visible::before{color:var(--teal-300)}
}
@media (max-width:340px){
  .top{gap:5px}
  .top .tomain{padding-inline:7px}
}

/* Windows high contrast: the watch's fixed colours would vanish against the
   forced background, so it is drawn in the system text colour */
@media (forced-colors:active){
  .top{background:Canvas}
  .logo .o-svg [fill]:not([fill="none"]){fill:CanvasText}
  .logo .o-svg [stroke]{stroke:CanvasText}
  .logo .o-svg .wm-glow{display:none}
}