@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin-ext.5717f37059.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin.e3a28eade2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/chakra-petch-latin-ext.eb128c9367.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/chakra-petch-latin.a5888696e9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arcanerobotics.com. Layout B of https://claude.ai/artifact/KbVu62EVZzkgUGM9kp2wpV, on the user's word of
   2026-09-19: B3 for the home page, Mach's side panel for the menu, K1 for /contact/. The Mach Industries structure: a black
   bar with the name, the mark and a menu; the robot on black; thin ruled columns below. */
:root {
  --bg: #000;
  --panel: #0b0b0b;
  --line: #2e2e2e;
  --field: #3a3a3a;
  --brass: #c9a15a;
  --err: #e0795f;
  --chip: rgba(150, 150, 140, .55);
  --text: #ecebe6;
  --muted: #a9a8a2;
  --faint: #85817a;
  --gutter: 48px;
  --side: clamp(120px, 18vw, 280px);
  --display: 'Chakra Petch', 'Archivo', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; padding-top: 72px; background: var(--bg); color: var(--text); font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brass); }

/* The bar: name left, mark centre, menu right. */
.top { height: 72px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: var(--bg);
  transition: top .8s cubic-bezier(.22, 1, .36, 1); }
/* The bar slides by its top, never by a transform: a transform (or will-change) on .top would make it the
   containing block of the fixed menu panel inside it and squeeze the panel into the bar. */
/* Mach's bar: fixed, so an overscroll bounce can't drag it; site.js slides it away on the first pixel of
   scroll down and back on the first pixel up (gsap power4.out over 0.8 s on Mach). */
.top.away { top: -72px; }
.emblem { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--text); }
.emblem svg { display: block; height: 32px; width: auto; }
.brand { display: block; color: var(--text); }
.brand svg { display: block; height: 30px; width: auto; }

.menu summary { list-style: none; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: flex-end; }
.menu summary::-webkit-details-marker { display: none; }
/* Two lines that swing into an X. With site.js they follow .shown, so closing animates too. */
.burger { --half: 5.25px; display: block; width: 40px; height: 12px; position: relative; }
.burger::before, .burger::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--text); transition: transform .45s cubic-bezier(.19, 1, .22, 1); }
.burger::before { top: 0; }
.burger::after { bottom: 0; }
.menu:not(.anim)[open] .burger::before, .menu.shown .burger::before { transform: translateY(var(--half)) rotate(45deg); }
.menu:not(.anim)[open] .burger::after, .menu.shown .burger::after { transform: translateY(calc(-1 * var(--half))) rotate(-45deg); }

/* After Mach's menu: a frosted panel down the right with one tall tile per link. With site.js (.anim) the
   panel slides in from the right, then the tiles rise out of a blur one after another; closing slides
   the panel back out. Timings are Mach's, read off their page on 2026-09-19. */
.menu nav { position: fixed; top: 72px; right: 0; bottom: 0; width: 448px; padding: 16px; overflow-y: auto;
  background: rgba(56, 56, 56, .16); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.menu li a { height: 160px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; background: rgba(255, 255, 255, .04);
  font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .02em; text-transform: uppercase; color: var(--text);
  transition: background-color .4s cubic-bezier(.165, .84, .44, 1); }
.menu li a i { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; transition: background-color .4s; }
.menu li a:hover, .menu li a:focus-visible { background: rgba(85, 91, 66, .85); color: var(--text); }
.menu li a:hover i, .menu li a:focus-visible i { background: currentColor; }
.menu.anim nav { transform: translateX(100%); transition: transform .6s cubic-bezier(.215, .61, .355, 1); }
.menu.anim.shown nav { transform: none; }
.menu.anim li a { opacity: 0; transform: translateY(3rem); filter: blur(4px); }
.menu.anim.shown li a, .menu.anim.closing li a { opacity: 1; transform: none; filter: none;
  transition: opacity .6s cubic-bezier(.215, .61, .355, 1) .38s, transform .6s cubic-bezier(.215, .61, .355, 1) .38s, filter .6s cubic-bezier(.215, .61, .355, 1) .38s, background-color .4s cubic-bezier(.165, .84, .44, 1); }
.menu.anim.shown li:nth-child(2) a { transition-delay: .53s, .53s, .53s, 0s; }
.menu.anim.closing li a { transition: none; }
@media (prefers-reduced-motion: reduce) { .top, .burger::before, .burger::after, .menu.anim nav, .menu.anim li a { transition: none !important; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* B3: the robot fills the first screen, cropped large, the statement over its lower left. */
/* The stage runs up under the bar, so the whole robot, arm tip included, is inside it: the bar covers the tip
   at rest and uncovers it when it slides away, and the stage's edge never cuts the image. --h is the visible
   height below the bar; the robot is sized and placed against it, not against the stage. */
.stage { --bar: 72px; --h: clamp(620px, calc(100vh - var(--bar)), 900px); position: relative; margin-top: calc(-1 * var(--bar)); height: calc(var(--h) + var(--bar)); overflow: hidden;
  background: radial-gradient(ellipse 60% 55% at 55% 50%, #181b12 0%, var(--bg) 75%); }
.robot { position: absolute; left: 58%; top: calc(var(--bar) - var(--h) * .04); height: calc(var(--h) * 1.39); aspect-ratio: 2 / 3;
  transform: translate(-50%, calc(var(--p, 0) * 50%)) scale(calc(1 - var(--p, 0) * .08)); will-change: transform; }
.robot img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; will-change: opacity; }
/* The robot scrolls at half speed and dims and blurs as it goes: site.js sets --p from 0 (top) to 1 (stage gone),
   the sharp copy fades out and the pre-blurred, darker copy fades in. Only transform and opacity change. */
.robot .sharp { opacity: calc(1 - var(--p, 0)); }
.robot .soft { opacity: calc(var(--p, 0) * .45); filter: blur(10px); }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
.robot { animation: arrive 1.4s cubic-bezier(.2, .6, .2, 1) .15s both; }
@media (prefers-reduced-motion: reduce) { .robot { animation: none; } }
.stage::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
.stage .statement { position: absolute; z-index: 1; left: var(--gutter); bottom: 48px; max-width: 600px; padding: 0; font-weight: 300; font-stretch: 112%; font-size: 46px; line-height: 1.18; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.tag { position: absolute; z-index: 1; right: var(--gutter); bottom: 48px; background: var(--chip); color: #fff; font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; padding: 10px 18px; }

/* Thin ruled columns, after Mach's mission block: a label column, the text, an empty column. */
.ruled, .index { display: grid; grid-template-columns: var(--side) minmax(0, 1fr) var(--side); border-top: 1px solid var(--line); }
.index { border-bottom: 1px solid var(--line); }
.ruled::before, .ruled::after, .index::after { content: ''; }
.ruled::before, .index .no { border-right: 1px solid var(--line); }
.ruled::after, .index::after { border-left: 1px solid var(--line); }
.index .no { padding: 36px 36px 0 0; text-align: right; font-family: var(--display); font-size: 14px; color: var(--brass); }
.index .item { padding: 30px 64px 40px; display: flex; flex-direction: column; gap: 20px; }
.index h2 { font-family: var(--display); font-weight: 600; font-size: 38px; letter-spacing: .03em; line-height: 1; text-transform: uppercase; }

.notify { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; max-width: 440px; }
.notify label { font-size: 14px; color: var(--muted); align-self: stretch; }
/* F2 of the field-state mockups: field and button are one bar in one frame, and focus or an error colours the frame. */
.notify__row { display: flex; width: 100%; border: 1px solid var(--field); }
.notify__row:focus-within { border-color: var(--brass); }
.notify__row:has([aria-invalid="true"]) { border-color: var(--err); }
.notify__row input { flex: 1; min-width: 0; height: 46px; border: 0; }
.notify__row input:focus { box-shadow: none; }
.notify__row button { flex: none; height: 46px; }
.notify__row button:focus-visible { outline: 2px solid #111; outline-offset: -5px; }

label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.form.contact label, .topics legend { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.opt { color: var(--faint); }
input, textarea { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 0; background: var(--panel); border: 1px solid var(--field); color: var(--text); resize: vertical; text-transform: none; letter-spacing: 0; font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; }
/* Focus and errors stay inside the field's own box (F1 of the mockups), so it never grows past its neighbours. */
input:focus, textarea:focus { outline: none; border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
/* V2: what's missing is said in the field's label row, right-aligned in the label's capitals; nothing below moves. */
.lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.err { font-style: normal; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--err); text-align: right; line-height: 1; }
button, .button { font: inherit; font-weight: 600; font-size: 15px; height: 48px; padding: 0 22px; border: 0; cursor: pointer; align-self: flex-start; background: var(--brass); color: #111; display: inline-flex; align-items: center; }
button:disabled { opacity: .6; cursor: default; }
.status { color: var(--text); min-height: 1.5em; font-size: 15px; }
.notify .status { min-height: 1.4em; font-size: 14px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* /contact/: the same ruled columns, the form in the middle. */
.contactpage { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contactpage::before { display: none; }
.contactpage .label { border-right: 1px solid var(--line); display: flex; justify-content: flex-end; padding: 62px 36px 0 0; font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.contactpage::after { display: none; }
.contactpage .body { padding: 56px 64px 70px; min-width: 0; }
.contactpage h1 { font-family: var(--display); font-weight: 600; font-size: 88px; letter-spacing: .02em; line-height: 1; }
.contactpage .lede { color: var(--muted); font-size: 17px; margin: 20px 0 44px; }
.form.contact { display: flex; flex-direction: column; gap: 22px; max-width: 720px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.topics { border: 0; margin: 0; padding: 0; min-width: 0; }
.topics legend { padding: 0; margin-bottom: 7px; }
.topics div { display: flex; flex-wrap: wrap; gap: 8px; }
.form.contact .topic { display: block; position: relative; text-transform: none; letter-spacing: 0; font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 15px; }
.topic input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topic span { display: block; border: 1px solid var(--field); padding: 10px 16px; color: var(--muted); cursor: pointer; }
.topic input:checked + span { border-color: var(--brass); color: var(--text); background: rgba(201, 161, 90, .12); }
.topic input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 1px; }
.contactpage .aside { border-left: 1px solid var(--line); padding: 62px 36px; display: flex; flex-direction: column; gap: 26px; color: var(--muted); font-size: 15px; }
.contactpage .aside b { display: block; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin-bottom: 6px; }

/* B1's footer: three ruled columns between the side columns, then the legal line. */
footer { color: var(--muted); font-size: 14px; }
footer .cols { display: grid; grid-template-columns: var(--side) repeat(3, minmax(0, 1fr)) var(--side); }
footer .cols > * { border-right: 1px solid var(--line); }
footer .cols > :last-child { border-right: 0; }
footer .cols div { padding: 40px 36px 56px; display: flex; flex-direction: column; gap: 10px; }
footer b { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin-bottom: 6px; }
footer .legal { border-top: 1px solid var(--line); padding: 18px var(--gutter); font-size: 13px; }

.notfound { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 0 16px; text-align: center; border-bottom: 1px solid var(--line); }
.notfound h1 { font-family: var(--display); font-weight: 600; letter-spacing: .02em; line-height: 1; font-size: 64px; }
.notfound .lede { color: var(--muted); font-size: 21px; line-height: 1.5; }
.notfound .button { align-self: center; }
.notfound .button:hover { color: #111; }

@media (max-width: 1100px) {
  .stage .statement { font-size: 38px; max-width: 520px; }
  .index .item, .contactpage .body { padding-left: 44px; padding-right: 44px; }
  .index h2 { font-size: 32px; }
  .contactpage h1 { font-size: 64px; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  html { scroll-padding-top: 60px; }
  body { padding-top: 60px; }
  .top { height: 60px; }
  .top.away { top: -60px; }
  .brand svg { height: 26px; }
  .emblem svg { height: 26px; }
  .burger { width: 30px; height: 10px; --half: 4.25px; }
  .menu nav { top: 60px; width: auto; left: 50px; padding: 12px; }
  .menu li a { height: 180px; }
  .stage { --bar: 60px; --h: 640px; }
  .robot { height: 860px; top: calc(var(--bar) - 19px); left: 60%; }
  .stage::after { inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
  .stage .statement { bottom: 76px; right: var(--gutter); font-size: 28px; }
  .tag { right: 16px; bottom: 20px; font-size: 13px; padding: 8px 12px; }
  .ruled, .index { grid-template-columns: minmax(0, 1fr); }
  .ruled::before, .ruled::after, .index::after { display: none; }
  .index .no { border-right: 0; text-align: left; padding: 24px var(--gutter) 0; }
  .index .item { padding: 8px var(--gutter) 36px; gap: 14px; }
  .index h2 { font-size: 28px; }
  .notify__row button { padding: 0 16px; }
  .contactpage .label { display: none; }
  .contactpage .body { padding: 34px var(--gutter) 30px; }
  .contactpage h1 { font-size: 48px; }
  .contactpage .lede { margin: 14px 0 28px; }
  .pair { grid-template-columns: 1fr; gap: 16px; }
  .form.contact { gap: 16px; }
  .topics div { gap: 6px; }
  .topic span { padding: 8px 12px; }
  .contactpage .aside { border-left: 0; border-top: 1px solid var(--line); padding: 24px var(--gutter) 36px; gap: 18px; }
  footer .cols { grid-template-columns: minmax(0, 1fr); }
  footer .cols > span { display: none; }
  footer .cols > * { border-right: 0; }
  footer .cols div { padding: 22px var(--gutter) 0; }
  footer .cols div:last-of-type { padding-bottom: 26px; }
  footer .legal { padding: 16px var(--gutter); }
  .notfound h1 { font-size: 44px; }
}