/* Gilbert Consulting · site.css
   Layout: one drafting sheet. Blueprint paper with a 5 mm grid, chalk linework, title blocks and detail callouts;
   red pencil only for revisions and focus. Committed dark look (no light theme), like real blueprint paper.
   No inline styles anywhere: the Content-Security-Policy forbids them (style-src 'self'). */

@font-face { font-family: "Saira Condensed"; font-weight: 500; font-display: swap; src: url("../fonts/saira-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/saira-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/saira-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2"); }

:root {
  --paper: #0f3b6e;
  --paper-deep: #0a2b54;
  --chalk: #f1f7ff;
  --cyan: #a6d8ff;
  --muted: #b9d0ea;
  --faint: rgba(166, 216, 255, .42);
  --rule: rgba(166, 216, 255, .3);
  --pencil: #ff7c43;
  --field: #061d3a;
  --field-line: rgba(166, 216, 255, .6);
  --grid-minor: rgba(190, 226, 255, .065);
  --grid-major: rgba(190, 226, 255, .15);
  --f-display: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* --fs is the text size (look.js): Auto is a little bigger on phones; the A · size · A pill changes it. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; font-size: calc(100% * var(--fs, 1)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: env(safe-area-inset-top, 0px) calc(56px + env(safe-area-inset-bottom, 0px));
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 255, 255, .07), transparent 70%),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 100% 900px, 94.5px 94.5px, 94.5px 94.5px, 18.9px 18.9px, 18.9px 18.9px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
  color: var(--chalk);
  font: 400 1rem/1.6 var(--f-body);
  overflow-x: hidden;
}
.wrap { max-width: 1160px; margin-inline: auto; }
a { color: var(--chalk); }
:focus-visible { outline: 2px solid var(--pencil); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .015em; line-height: .95; margin: 0; text-wrap: balance; }
p { margin: 0; }
.label { font: 500 .72rem/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.skip { position: absolute; left: -10000px; top: 8px; z-index: 30; background: var(--chalk); color: var(--paper); padding: 10px 14px; font: 600 .9rem/1 var(--f-mono); }
.skip:focus { left: max(16px, env(safe-area-inset-left, 0px)); }

/* Header */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 20px; border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* The mark: a drafting compass and a dimensioned G. On load the compass leg swings round and draws the G,
   leaving its orange pencil point at the corner, then the extension lines draw and the orange dimension lines
   measure it. Pointing at the name measures it again. Reduced motion shows the finished drawing. */
.brand .mark { width: 46px; height: 46px; flex: none; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mark .g { stroke: var(--chalk); stroke-width: 2.4; }
.mark .pin, .mark .ext, .mark .leg line { stroke: var(--cyan); stroke-width: .9; }
.mark .leg line { opacity: 0; }
.mark .tip { fill: var(--pencil); stroke: none; }
.mark .dim { stroke: var(--pencil); stroke-width: 1.3; }
.mark .leg, .mark .pin, .mark .tip { transform-origin: 24px 24px; }
.mark .tip { transform-origin: 34px 24px; }
.mark .dimh { transform-origin: 24px 6px; }
.mark .dimv { transform-origin: 42px 24px; }
@media (prefers-reduced-motion: no-preference) {
  .mark .pin { animation: gc-pop-in .3s ease-out both; }
  .mark .g { stroke-dasharray: 1 1; animation: gc-draw 1.7s linear .2s both; }
  .mark .leg { animation: gc-swing 1.46s linear .2s both; }
  .mark .leg line { animation: gc-leg-fade 1.9s ease .2s both; }
  .mark .ext { stroke-dasharray: 1 1; animation: gc-draw .4s ease-out 1.9s both; }
  .mark .dimh { animation: gc-grow-x .5s ease-out 2.1s both; }
  .mark .dimv { animation: gc-grow-y .5s ease-out 2.25s both; }
  .mark .arrow { animation: gc-fade .25s ease 2.6s both; }
  /* Hover adds a second animation next to the intro (same name list), so leaving never replays the intro. */
  .brand:hover .mark .dimh, .brand:focus-visible .mark .dimh { animation: gc-grow-x .5s ease-out 2.1s both, gc-measure-x .6s ease-out; }
  .brand:hover .mark .dimv, .brand:focus-visible .mark .dimv { animation: gc-grow-y .5s ease-out 2.25s both, gc-measure-y .6s ease-out .1s; }
  .brand:hover .mark .tip, .brand:focus-visible .mark .tip { animation: gc-pop .5s ease-out; }
}
/* The wordmark: each letter is its own span (--i is its place), so the letters can stamp in one by one while the
   compass draws the G, and an orange pencil line draws underneath. Hovering
   the name ripples the letters. All of it is still for reduced motion. */
.brand .word { position: relative; display: inline-block; white-space: nowrap; }
.word > span { display: inline-block; }
.word > .sp { width: .28em; }
.word::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--pencil); transform-origin: 0 50%; transform: scaleX(0); }
.word > span:nth-child(1) { --i: 0; }
.word > span:nth-child(2) { --i: 1; }
.word > span:nth-child(3) { --i: 2; }
.word > span:nth-child(4) { --i: 3; }
.word > span:nth-child(5) { --i: 4; }
.word > span:nth-child(6) { --i: 5; }
.word > span:nth-child(7) { --i: 6; }
.word > span:nth-child(8) { --i: 7; }
.word > span:nth-child(9) { --i: 8; }
.word > span:nth-child(10) { --i: 9; }
.word > span:nth-child(11) { --i: 10; }
.word > span:nth-child(12) { --i: 11; }
.word > span:nth-child(13) { --i: 12; }
.word > span:nth-child(14) { --i: 13; }
.word > span:nth-child(15) { --i: 14; }
.word > span:nth-child(16) { --i: 15; }
.word > span:nth-child(17) { --i: 16; }
.word > span:nth-child(18) { --i: 17; }
@media (prefers-reduced-motion: no-preference) {
  .word > span { animation: gc-stamp .42s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(1s + var(--i) * 45ms); }
  .word::after { animation: gc-rule .7s ease-out 1.85s forwards; }
  /* Hover adds the ripple next to the stamp (same name list), so leaving never replays the stamp. */
  .brand:hover .word > span, .brand:focus-visible .word > span {
    animation: gc-stamp .42s cubic-bezier(.2, 1.4, .4, 1) both, gc-ripple .55s ease-in-out both;
    animation-delay: calc(1s + var(--i) * 45ms), calc(var(--i) * 28ms);
  }
}
@media (prefers-reduced-motion: reduce) { .word::after { transform: scaleX(1); opacity: .55; } }
@keyframes gc-stamp {
  0% { opacity: 0; transform: translateY(-.55em) scale(1.35); }
  60% { opacity: 1; transform: translateY(.04em) scale(.96); }
  100% { opacity: 1; transform: none; }
}
@keyframes gc-rule { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: .55; } }
@keyframes gc-ripple { 0%, 100% { transform: none; } 40% { transform: translateY(-.22em); color: var(--cyan); } }
@keyframes gc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gc-swing { from { transform: rotate(-45deg); } to { transform: rotate(-360deg); } }
@keyframes gc-leg-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gc-pop-in { 0% { transform: scale(0); } 70% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes gc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gc-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gc-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gc-measure-x { 0% { transform: scaleX(1); } 35% { transform: scaleX(.2); } 100% { transform: scaleX(1); } }
@keyframes gc-measure-y { 0% { transform: scaleY(1); } 35% { transform: scaleY(.2); } 100% { transform: scaleY(1); } }
@keyframes gc-pop { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }
.brand b { font: 700 1.35rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.top nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.top nav a { font: 500 .74rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--muted); padding: 8px 0; }
.top nav a:hover { color: var(--chalk); }
.fzpill { display: inline-flex; align-items: stretch; border: 1px solid var(--rule); background: var(--paper-deep); }
.fzpill button { min-height: 38px; min-width: 38px; padding: 0 8px; border: 0; background: none; color: var(--chalk); cursor: pointer; font: 600 .8rem/1 var(--f-display); }
.fzpill button + button { border-left: 1px solid var(--rule); }
.fzpill .up { font-size: 1.15rem; }
.fzpill .lvl { min-width: 54px; font: 500 .62rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.fzpill button:hover { background: rgba(241, 247, 255, .08); }
/* Phones and small tablets (Marc): the logo and name take a full row and fill its width. Sizes are in cqi (a
   percentage of the brand row's width), so they fit any screen; the name measures 8.66em wide, so 8.7cqi fills
   about 76% of the row next to a 20cqi mark. The nav and the text-size pill wrap underneath. */
@media (max-width: 700px) {
  .brand { flex: 1 0 100%; container-type: inline-size; gap: 3cqi; }
  .brand .mark { width: 20cqi; height: 20cqi; }
  .brand .word { font-size: 8.7cqi; }
  .word::after { bottom: -.1em; height: max(2px, .05em); }
}

/* Hero */
.hero { padding-block: 40px 0; display: grid; gap: 20px; }
.hero h1 { font-size: clamp(2.6rem, 7.4vw, 5.6rem); font-weight: 700; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--cyan); }
.hero .ask { font: 600 clamp(1.35rem, 3.2vw, 2.1rem)/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .03em; color: var(--chalk); max-width: 34ch; text-wrap: balance; border-left: 3px solid var(--pencil); padding-left: 14px; }
.hero .lede { max-width: 60ch; color: var(--muted); font-size: 1.08rem; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; min-height: 44px;
  font: 600 1.05rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  border: 1.5px solid var(--chalk); color: var(--chalk); background: transparent; cursor: pointer;
}
.btn.solid { background: var(--chalk); color: var(--paper); }
.btn.solid:hover { background: var(--cyan); border-color: var(--cyan); }
.btn:not(.solid):hover { background: rgba(241, 247, 255, .08); }

/* The drawing sheet */
.sheet { margin-top: 18px; border: 1.5px solid var(--chalk); padding: 8px; position: relative; }
.sheet::before, .sheet::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--pencil); border-style: solid; }
.sheet::before { top: -8px; left: -8px; border-width: 1.5px 0 0 1.5px; }
.sheet::after { bottom: -8px; right: -8px; border-width: 0 1.5px 1.5px 0; }
.sheet-inner { border: 1px solid var(--rule); }
.canvas-box { position: relative; }
#machine { display: block; width: 100%; height: 560px; touch-action: pan-y; }
@media (hover: hover) and (pointer: fine) { #machine { cursor: none; } }
.sheet-foot { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
@media (min-width: 860px) { .sheet-foot { grid-template-columns: 1fr minmax(360px, 420px); } }
.key { padding: 16px; display: grid; gap: 10px; align-content: start; }
.key dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .92rem; }
.key dt { display: flex; align-items: center; gap: 8px; font: 600 .95rem/1.2 var(--f-display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.key dd { margin: 0; color: var(--muted); min-width: 0; }
.num { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.2px solid var(--chalk); border-radius: 50%; font: 600 .7rem/1 var(--f-mono); flex: none; }
.rev { color: var(--pencil); }

.titleblock { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
@media (min-width: 860px) { .titleblock { border-top: 0; border-left: 1px solid var(--chalk); } }
.titleblock div { padding: 8px 12px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); min-width: 0; }
.titleblock div:nth-child(2n) { border-right: 0; }
.titleblock .wide { grid-column: 1 / -1; border-right: 0; }
.titleblock span { display: block; font: 500 .6rem/1.3 var(--f-mono); letter-spacing: .14em; color: var(--cyan); text-transform: uppercase; }
.titleblock b { display: block; font: 600 1.1rem/1.25 var(--f-display); letter-spacing: .05em; text-transform: uppercase; overflow-wrap: anywhere; }
.titleblock div:nth-last-child(-n+2) { border-bottom: 0; }

/* Sections */
section { padding-block: 88px 0; }
.head { display: grid; gap: 12px; margin-bottom: 32px; }
.head .label { display: flex; align-items: center; gap: 12px; }
.head .label::after { content: ""; height: 1px; flex: 1; background: var(--rule); }
.head h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; max-width: 20ch; }
.head p { color: var(--muted); max-width: 62ch; }

/* Services: eight details (one, two or four across, so the rows always fill) */
.details { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .details { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .details { grid-template-columns: repeat(4, 1fr); } }
.detail { border: 1px solid var(--rule); display: grid; grid-template-rows: auto auto auto 1fr; background: rgba(10, 43, 84, .35); min-width: 0; }
.detail header { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.detail header .label:last-child { color: var(--muted); }
.detail svg { display: block; width: 100%; height: auto; aspect-ratio: 200 / 120; max-width: 100%; padding: 12px 12px 0; }
.detail h3 { font-size: 1.45rem; font-weight: 600; padding: 12px 16px 6px; }
.detail p { padding: 0 16px 18px; color: var(--muted); font-size: .95rem; }

.draft { color: var(--chalk); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.draft .c { stroke: var(--cyan); stroke-width: 1; }
.draft .f { stroke: var(--faint); stroke-width: .9; }
.draft .r { stroke: var(--pencil); }
.draft text { fill: var(--cyan); stroke: none; font: 500 9px var(--f-mono); letter-spacing: .08em; }
.draft text.r { fill: var(--pencil); }
.draft text.ink { fill: var(--chalk); font-weight: 600; }
.draft text.t11 { font-size: 11px; }
.draft text.t12 { font-size: 12px; }
.draft text.t13 { font-size: 13px; }
.draft .tri-a { fill: currentColor; font: 600 8px var(--f-mono); }
.draft.armed .ln { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.6, .1, .3, 1) calc(var(--i, 0) * 70ms); }
.draft.armed.on .ln { stroke-dashoffset: 0; }

/* Who it's for: three scales */
.scales { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .scales { grid-template-columns: repeat(3, 1fr); } }
.scale { border-top: 1.5px solid var(--chalk); padding-top: 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.scale h3 { font-size: 1.7rem; font-weight: 600; }
.scale p { color: var(--muted); }
.scalebar { height: 8px; border: 1px solid var(--chalk); max-width: 240px; }
.scalebar.s1 { background: repeating-linear-gradient(90deg, var(--chalk) 0 40px, transparent 40px 80px); }
.scalebar.s10 { background: repeating-linear-gradient(90deg, var(--chalk) 0 16px, transparent 16px 32px); }
.scalebar.s100 { background: repeating-linear-gradient(90deg, var(--chalk) 0 6px, transparent 6px 12px); }

/* Process */
.strip { display: none; margin-bottom: 8px; }
@media (min-width: 760px) { .strip { display: block; } }
.strip svg { width: 100%; height: auto; display: block; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { border-top: 1.5px solid var(--chalk); padding-top: 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.steps .num { width: 34px; height: 34px; font-size: .85rem; }
.steps h3 { font-size: 1.6rem; font-weight: 600; }
.steps p { color: var(--muted); }

/* About */
.about { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .about { grid-template-columns: 280px 1fr; } }
.portrait { margin: 0; width: 100%; max-width: 280px; border: 1.5px solid var(--chalk); padding: 8px; position: relative; display: grid; gap: 8px; }
.portrait::before, .portrait::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--pencil); border-style: solid; }
.portrait::before { top: -8px; left: -8px; border-width: 1.5px 0 0 1.5px; }
.portrait::after { bottom: -8px; right: -8px; border-width: 0 1.5px 1.5px 0; }
.portrait img { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 4 / 5; border: 1px solid var(--rule); background: var(--paper-deep); }
.portrait figcaption { display: flex; justify-content: space-between; gap: 8px; }
.about .copy { display: grid; gap: 16px; max-width: 64ch; }
.about .copy p { color: var(--muted); font-size: 1.05rem; }
.about .copy p.big { color: var(--chalk); font: 500 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--f-display); letter-spacing: .02em; }
.revnote {
  border: 1.5px dashed var(--pencil); border-radius: 22px; padding: 12px 18px; color: var(--pencil);
  font: 500 .82rem/1.5 var(--f-mono); display: flex; gap: 12px; align-items: flex-start;
}
.revnote svg { flex: none; width: 22px; height: 20px; }

/* Contact: the work order */
.contact { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1.25fr; } }
.contact .copy { display: grid; gap: 18px; }
.contact .copy p { color: var(--muted); max-width: 46ch; }
.email { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px solid var(--rule); padding: 12px 14px; }
.email code { font: 500 1.02rem/1.3 var(--f-mono); color: var(--chalk); user-select: all; overflow-wrap: anywhere; min-width: 0; }
.email button { font: 500 .7rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); background: transparent; border: 1px solid var(--rule); padding: 8px 10px; cursor: pointer; min-height: 32px; }
.email button:hover { color: var(--chalk); border-color: var(--chalk); }

.order { border: 1.5px solid var(--chalk); background: rgba(10, 43, 84, .5); }
.order .bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 10px 16px; border-bottom: 1.5px solid var(--chalk); }
.order .bar b { font: 700 1.25rem/1.1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.order form { display: grid; grid-template-columns: 1fr; position: relative; }
@media (min-width: 560px) { .order form { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--rule); min-width: 0; }
@media (min-width: 560px) { .field.left { border-right: 1px solid var(--rule); } }
.field.full { grid-column: 1 / -1; }
/* Labels are small cyan captions; the boxes you type in are dark wells with a bright border, so the two never blur. */
.field label { font: 600 .68rem/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.field label small { color: var(--muted); letter-spacing: .08em; font-weight: 400; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 46px; background-color: var(--field); border: 1.5px solid var(--field-line); border-radius: 3px;
  color: #fff; font: 400 1rem/1.5 var(--f-body); padding: 10px 12px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--chalk); }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { background: var(--paper-deep); color: var(--chalk); }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none; border-color: var(--pencil); box-shadow: 0 0 0 3px rgba(255, 124, 67, .3), inset 0 1px 3px rgba(0, 0, 0, .35);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(185, 208, 234, .6); }
.submit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px; }
.submit p { font: 400 .8rem/1.5 var(--f-mono); color: var(--muted); }
.form-note { grid-column: 1 / -1; margin: 12px 16px 0; padding: 10px 14px; font: 500 .88rem/1.5 var(--f-mono); border: 1.5px solid var(--cyan); color: var(--chalk); }
.form-note[data-state="problem"] { border-color: var(--pencil); color: var(--pencil); }
/* FormDesk's honeypot: hidden from people, filled in by robots. */
.cf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

footer { margin-top: 88px; border-top: 1.5px solid var(--chalk); padding-block: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
footer p { font: 500 .7rem/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
footer a { color: var(--muted); }
footer a:hover { color: var(--chalk); }

/* Plain pages: privacy and 404 */
.page { padding-block: 48px 0; display: grid; gap: 22px; max-width: 70ch; }
.page h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; }
.page h2 { font-size: 1.6rem; font-weight: 600; margin-top: 12px; }
.page p, .page li { color: var(--muted); }
.page ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.page .btn { justify-self: start; }

@media (prefers-reduced-motion: reduce) {
  .draft.armed .ln { transition: none; }
}
.revnote .draft { color: var(--pencil); }

/* ---------- Moving parts ----------
   Each section drawing drafts itself in (.on), then starts working. main.js adds .run while it's on screen, so
   nothing animates out of sight. People who ask for reduced motion get still drawings and still gears. */
.draft .m-travel { fill: var(--pencil); stroke: none; }
.draft .m-scan, .draft .m-bar, .draft .m-nod, .draft .m-bob, .draft .m-type, .draft .m-join, .draft .m-beat,
.draft .m-steam, .draft .m-travel { transform-box: fill-box; }
.draft .m-bar { transform-origin: 50% 100%; }
.draft .m-type { transform-origin: 0 50%; }
.draft .m-beat { transform-origin: 50% 50%; }

/* Big faint gears behind the page, turned by the scroll (see main.js). */
.wrap { position: relative; z-index: 1; }
.bg-gears { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-gears svg { position: absolute; color: var(--chalk); opacity: .07; fill: none; stroke: currentColor; stroke-width: 2; }
.bg-gears .g1 { width: 520px; height: 520px; right: -190px; top: 18vh; transform: rotate(var(--r1, 0deg)); }
.bg-gears .g2 { width: 330px; height: 330px; right: 230px; top: calc(18vh - 150px); transform: rotate(var(--r2, 0deg)); }
@media (max-width: 700px) {
  .bg-gears svg { opacity: .05; }
  .bg-gears .g1 { width: 300px; height: 300px; right: -140px; }
  .bg-gears .g2 { width: 190px; height: 190px; right: 120px; top: calc(18vh - 80px); }
}

@media (prefers-reduced-motion: no-preference) {
  .draft.on .m-scan { animation: gc-scan 6s ease-in-out 1.6s infinite; }
  .draft.on .m-found { animation: gc-found 6s ease-in-out 1.6s infinite; }
  .draft.on .m-t1 { animation: gc-t1 6s linear 1.6s infinite; }
  .draft.on .m-t2 { animation: gc-t2 6s linear 1.6s infinite; }
  .draft.on .m-t3 { animation: gc-t3 6s linear 1.6s infinite; }
  .draft.on .m-bar { animation: gc-bar 3.2s ease-in-out 1.6s infinite; }
  .draft.on .m-b2 { animation-delay: 1.9s; }
  .draft.on .m-b4 { animation-delay: 2.2s; }
  .draft.on .m-b5 { animation-delay: 2.5s; }
  .draft.on .m-fix { animation: gc-fix 5s ease-in-out 1.6s infinite; }
  .draft.on .m-nod { animation: gc-nod 3s ease-in-out 1.6s infinite; }
  .draft.on .m-n2 { animation-delay: 3.1s; }
  .draft.on .m-bob { animation: gc-bob 2.4s ease-in-out 1.6s infinite alternate; }
  .draft.on .m-type { animation: gc-type 3.4s ease-out 1.6s infinite; }
  .draft.on .m-y2 { animation-delay: 1.9s; }
  .draft.on .m-y3 { animation-delay: 2.2s; }
  .draft.on .m-neon { animation: gc-neon 4.5s linear 1.6s infinite; }
  .draft.on .m-glow { animation: gc-glow 3s ease-in-out 1.6s infinite; }
  .draft.on .m-wave { animation: gc-wave 1.8s ease-out 1.6s infinite; }
  .draft.on .m-w2 { animation-delay: 1.9s; }
  .draft.on .m-w3 { animation-delay: 2.2s; }
  .draft.on .m-beat { animation: gc-beat 1.8s ease-in-out 1.6s infinite; }
  .draft.on .m-chip { animation: gc-chip 2.2s steps(1) 1.6s infinite; }
  .draft.on .m-join { animation: gc-join 5s ease-in-out 1.6s infinite; }
  .draft.on .m-pull { animation: gc-pull 5s ease-in-out 1.6s infinite; }
  .draft.on .m-talk { animation: gc-talk 3.2s ease-in-out 1.6s infinite; }
  .draft.on .m-k2 { animation-delay: 3.2s; }
  .draft.on .m-steam { animation: gc-steam 2.6s ease-out 1.6s infinite; }
  .draft.on .m-travel { animation: gc-travel 7s ease-in-out 1.6s infinite; }
  .draft.on:not(.run) * { animation-play-state: paused; }

  .scalebar { animation: gc-march 2.4s linear infinite; }
  .scalebar.s1 { --step: 80px; }
  .scalebar.s10 { --step: 32px; animation-duration: 1.6s; }
  .scalebar.s100 { --step: 12px; animation-duration: 1s; }
}

@keyframes gc-scan {
  0%, 8% { transform: translate(0, 0); }
  22%, 30% { transform: translate(-62px, -24px); }
  44%, 52% { transform: translate(-62px, -2px); }
  66%, 74% { transform: translate(-62px, 20px); }
  90%, 100% { transform: translate(0, 0); }
}
@keyframes gc-found { 0%, 8%, 90%, 100% { opacity: 1; } 14%, 84% { opacity: 0; } }
@keyframes gc-t1 { 0%, 25% { opacity: 0; } 28%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gc-t2 { 0%, 47% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gc-t3 { 0%, 69% { opacity: 0; } 72%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gc-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.84); } }
@keyframes gc-fix {
  0%, 20% { transform: scaleY(1); stroke: var(--pencil); }
  55%, 85% { transform: scaleY(1.55); stroke: var(--cyan); }
  100% { transform: scaleY(1); stroke: var(--pencil); }
}
@keyframes gc-nod { 0%, 40%, 100% { transform: translateY(0); } 15% { transform: translateY(3px); } 28% { transform: translateY(-1px); } }
@keyframes gc-bob { from { transform: translateY(1px); } to { transform: translateY(-3px); } }
@keyframes gc-type { 0% { transform: scaleX(0); } 35%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes gc-neon { 0%, 17%, 23%, 58%, 66%, 100% { opacity: 1; } 20%, 62% { opacity: .2; } 64% { opacity: .7; } }
@keyframes gc-glow { 0%, 100% { stroke-opacity: .45; } 50% { stroke-opacity: 1; } }
@keyframes gc-wave { 0%, 100% { opacity: .15; } 30% { opacity: 1; } }
@keyframes gc-beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.6); } 40% { transform: scale(1); } }
@keyframes gc-chip { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .3; } }
@keyframes gc-join { 0%, 12% { transform: translateX(26px); } 42%, 82% { transform: translateX(0); } 100% { transform: translateX(26px); } }
@keyframes gc-pull { 0%, 38% { opacity: 1; } 46%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gc-talk { 0%, 42% { opacity: 1; } 52%, 100% { opacity: .12; } }
@keyframes gc-steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes gc-travel {
  0%, 6% { transform: translateX(0); }
  26%, 33% { transform: translateX(250px); }
  53%, 60% { transform: translateX(500px); }
  80%, 94% { transform: translateX(750px); }
  100% { transform: translateX(750px); opacity: 0; }
}
@keyframes gc-march { to { background-position-x: var(--step, 80px); } }