/* =====================================================================
   TOKENS — the Snow palette, type and spacing.
   Colours are the ones in Snow's style.css; the accent is the favicon
   blue (#0366d6). Light only: there is no dark mode for this page.
   Every other stylesheet reads these and nothing else.
   ===================================================================== */
:root {
  color-scheme: light;

  /* surfaces */
  --snow: #f8f9fa;          /* the page */
  --paper: #ffffff;         /* cards, panels, inputs */
  --frost: #fbfcfd;         /* quiet fills: fact cells, rails */
  --mist: #f2f5f8;          /* pressed and inset fills */

  /* ink */
  --basalt: #16202a;        /* headings, primary buttons */
  --ink: #24292e;           /* body text */
  --ink-2: #3b4855;
  --muted: #586069;
  --faint: #8a97a3;
  --ghost: #a3aeb9;

  /* lines */
  --line: #d1d5da;
  --line-soft: #e8ecf1;
  --line-faint: #f0f3f6;

  /* accent: glacier, the Snow mark */
  --glacier: #0366d6;
  --glacier-deep: #0356b6;
  --glacier-line: #bcd9f5;
  --glacier-tint: #eaf3fd;
  --glacier-wash: #e8f0fb;

  /* signals */
  --moss: #1a7f37;          --moss-tint: #e9f8ee;
  --ember: #cf222e;         --ember-tint: #fdecee;   --ember-line: #f3c2c7;
  --amber: #9a6700;         --amber-tint: #fdf7e3;
  --violet: #8957e5;

  /* map surfaces */
  --sea: #e7eff8;
  --land: #ffffff;
  --coast: #c3ccd5;

  /* type — the three families Snow loads */
  --display: "Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1240px;
  --wrap-wide: 1440px;
  --section: clamp(72px, 11vw, 144px);
  --nav-h: 60px;

  /* shape */
  --r-sm: 6px; --r: 8px; --r-md: 12px; --r-lg: 14px; --pill: 999px;

  /* depth */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-2: 0 4px 12px rgba(3, 102, 214, .13);
  --shadow-3: 0 12px 32px rgba(15, 25, 40, .16);
  --shadow-4: 0 24px 70px rgba(15, 25, 40, .22), 0 2px 6px rgba(15, 25, 40, .12);
  --ring: 0 0 0 3px rgba(3, 102, 214, .15);

  /* time */
  --t-fast: .13s ease;
  --t-med: .22s ease;
  --ease-out: cubic-bezier(.2, .7, .1, 1);
}

/* No scrollbars, anywhere, on any page — scrolling still works
   (wheel, touch, keys). Firefox, old Edge, then WebKit/Blink. */
*, html, body { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar, html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }

/* No zoom-on-focus, anywhere, on any form. iOS Safari zooms into any
   field whose text is under 16px; at 16px it never does. Touch screens
   only, so desktop sizes are untouched; pinch-zoom still works. */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea, [contenteditable] { font-size: max(16px, 1em) !important; }
}

/* SECTION — NAV ------------------------------------------------------
   The one site bar, shared by the farm (landing/), the map, the articles
   (scripts/blog) and the buyer page (compute/): the word "Snow" on the left
   (it goes to the farm), then only the links that page needs, never the page
   you are on, and at most one solid action. Its edges line up with the
   page's content column (--wrap). The farm makes it see-through. */
#sitenav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  height: var(--nav-h);
  padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background: rgba(248, 249, 250, .86);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 0; /* no line under the bar */
  transition: background var(--t-med, .2s);
}
#sitenav.scrolled { background: rgba(248, 249, 250, .92); }
#sitenav .mark {
  display: inline-flex; align-items: center;
  font: 800 27px/1 var(--display); letter-spacing: -.03em; color: var(--basalt); text-decoration: none;
} /* the bold wordmark, as the farm page first had it */
.navacts { display: inline-flex; align-items: center; gap: 4px; }
.navlink {
  padding: 8px 12px; border-radius: var(--pill);
  font: 500 13.5px/1 var(--sans); color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: color var(--t-fast, .12s), background var(--t-fast, .12s);
}
.navlink:hover { color: var(--basalt); background: var(--mist); }
.navlink[aria-current="page"] { color: var(--basalt); }
.navlink.solid { margin-left: 6px; padding: 10px 16px; background: var(--basalt); color: #fff; }
.navlink.solid:hover { background: var(--glacier); color: #fff; }
/* phones: the page you are on drops out of the list, and the links tighten up */
@media (max-width: 560px) {
  #sitenav { gap: var(--s2); }
  #sitenav .mark { font-size: 24px; }
  .navacts { gap: 0; }
  .navlink { padding: 8px 7px; font-size: 13px; }
  .navlink[aria-current="page"] { display: none; }
  .navlink.solid { margin-left: 4px; padding: 9px 12px; }
}
@media (max-width: 380px) { .navlink.solid { display: none; } }
/* the site footer: the same short line on every page but the farm.
   Only the company pages, never the page you are on (the bar already links the rest). */
.site-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: clamp(72px, 10vw, 128px);
  padding: 28px max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) calc(env(safe-area-inset-bottom, 0px) + 36px);
  font: 400 13px/1.4 var(--sans); color: var(--muted);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--basalt); }
@media print { #sitenav, .site-foot { display: none; } }

/* =====================================================================
   LANDING — the farm page. The UI matches the map, the articles and the
   buyer page: the shared site bar (src/sections/nav/nav.css), light display
   headings, Inter and JetBrains Mono, pill buttons, basalt for the main
   action (tokens.css; scripts/site.mjs inlines both imports on publish).
   The scene keeps its own drawing: the sky, and the labels with their ink
   leader lines, which belong to the illustration.
   Layout: a full-screen stage (backdrop bands, the 3D canvas, labels and
   coins); the UI floats over it in three bands: bar, hero, dock.
   ===================================================================== */
:root {
  --l-sky-top: #e3ebf1; --l-sky-low: #f6f3eb;
  /* the rest of the site's palette (tokens.css), under this page's names */
  --l-ink: #24292e; --l-ink-soft: #586069;
  --l-line: #3b4855;  /* the scene's ink: the labels' borders and leader lines */
  --l-hair: #d1d5da;  /* UI borders, as on the map */
  --l-paper: #ffffff; --l-paper-2: #f2f5f8; --l-edge: #e8ecf1;
  --l-barn: #16202a; --l-barn-dark: #0366d6; /* the main action: basalt, Snow blue on hover, as on the map */
  --l-cool: #0366d6;
  --l-display: var(--display); --l-body: var(--sans); --l-mono: var(--mono);
}
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--l-sky-low); color: var(--l-ink); font-family: var(--l-body); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }

#stage { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(180deg, var(--l-sky-top) 0%, var(--l-sky-low) 62%); touch-action: none; cursor: grab; }
#stage.dragging { cursor: grabbing; }
#bands, #labels { position: absolute; inset: 0; }
#labels { pointer-events: none; }
.credit { position: fixed; z-index: 6; left: 20px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); margin: 0; font: 500 10px/1.2 var(--l-mono); color: var(--l-ink-soft); }
.credit a { color: inherit; }
.band { position: absolute; top: 0; left: 0; will-change: transform; }
.band svg { display: block; }
/* #gl, #labels and the bands fade in through the loading hand-over: see the inline styles in index.html */
.nogl-img { display: none; }
html.nogl .nogl-img { display: block; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(1100px, 100%); }

.tag { position: absolute; left: 0; top: 0; font: 500 11px/1.2 var(--l-mono); letter-spacing: .02em; color: var(--l-ink); background: var(--l-paper); border: 1px solid var(--l-line); border-radius: 3px; padding: 4px 7px; white-space: nowrap; }
.tag::after { content: ""; position: absolute; left: var(--lx, 50%); top: 100%; width: 1px; height: var(--lead, 10px); background: var(--l-line); }
.tag.room { background: var(--l-ink); color: var(--l-paper); border-color: var(--l-ink); }
.tag.room::after { background: var(--l-ink); }
.tag[data-off="1"] { opacity: 0; }

/* the UI arrives with this stylesheet, so it eases in rather than popping */
#sitenav, .hero, .dock { animation: ui-in .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.hero { animation-delay: .05s; } .dock { animation-delay: .1s; }
@keyframes ui-in { from { opacity: 0; translate: 0 8px; } }

/* bar: the shared site bar, fixed over the scene */
#sitenav, #sitenav.scrolled { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } /* see-through here only: the farm runs up behind it */
button.navlink { border: 0; background: transparent; cursor: pointer; }
/* Rent GPUs: a see-through button with a thin outline, over the sky */
.navlink.clear { margin-left: 6px; padding: 10px 16px; border: 1px solid rgba(22, 32, 42, .28); color: var(--basalt); background: transparent; }
.navlink.clear:hover { background: rgba(255, 255, 255, .5); border-color: var(--basalt); color: var(--basalt); }
@media (max-width: 560px) { .navlink.clear { margin-left: 4px; padding: 9px 12px; } }

/* buttons: the map's pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 16px; font: 500 13.5px/1 var(--l-body); letter-spacing: .005em; border-radius: var(--pill); cursor: pointer; border: 1px solid var(--l-hair); background: var(--l-paper); color: var(--l-ink); text-decoration: none; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.btn:hover { border-color: var(--glacier-line); background: var(--glacier-tint); color: var(--glacier-deep); }
.btn.primary { background: var(--l-barn); border-color: var(--l-barn); color: #fff; }
.btn.primary:hover { background: var(--l-barn-dark); border-color: var(--l-barn-dark); color: #fff; }
.btn.dark, #inside[aria-pressed="true"] { background: var(--l-barn); border-color: var(--l-barn); color: #fff; }
.btn.dark:hover, #inside[aria-pressed="true"]:hover { background: var(--l-barn-dark); border-color: var(--l-barn-dark); color: #fff; }
.hero .btn { min-height: 48px; padding: 0 26px; font-size: 15px; }
.btn.clear { background: transparent; border-color: rgba(22, 32, 42, .28); color: var(--basalt); } /* see-through, over the sky */
.btn.clear:hover { background: rgba(255, 255, 255, .5); border-color: var(--basalt); color: var(--basalt); }
:focus-visible { outline: 2px solid var(--l-cool); outline-offset: 2px; }

/* hero */
.hero { position: fixed; z-index: 5; left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + clamp(24px, 5vh, 56px)); width: min(34rem, calc(100vw - 2 * var(--gutter))); pointer-events: none; transition: opacity .4s; }
.hero > * { pointer-events: auto; }
body:has(#inside[aria-pressed="true"]) .hero { opacity: 0; }
body:has(#inside[aria-pressed="true"]) .hero > * { pointer-events: none; }
.eyebrow { font: 500 11px/1.4 var(--l-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0; }
.hero h1 { font: 300 clamp(36px, 5vw, 68px)/.98 var(--l-display); letter-spacing: -.035em; font-optical-sizing: auto; color: var(--basalt); margin: .4em 0 .36em; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--glacier); }
.lede { font: 400 clamp(15px, 1.3vw, 18px)/1.6 var(--l-body); color: var(--ink-2); margin: 0 0 22px; max-width: 42ch; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }

/* dock */
.dock { position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); }
.seg { display: flex; background: var(--l-paper); border: 1px solid var(--l-hair); border-radius: var(--pill); padding: 3px; gap: 2px; }
.seg button { font: 500 13.5px/1 var(--l-body); color: var(--l-ink); background: transparent; border: 0; border-radius: var(--pill); padding: 9px 14px; cursor: pointer; display: flex; gap: 7px; align-items: baseline; }
.seg button span { font: 500 11px/1 var(--l-mono); color: var(--l-ink-soft); }
.seg button[aria-pressed="true"] { background: var(--l-barn); color: #fff; }
.seg button[aria-pressed="true"] span { color: #c9d2da; }
/* the loading line under the sketch is styled inline in index.html; here it only becomes a paper chip
   when it has something to say instead (no WebGL, or the farm failed to build) */
html.nogl #chip { top: 55%; background: var(--l-paper); border: 1px solid var(--l-line); border-radius: 3px; padding: 10px 12px; white-space: normal; max-width: calc(100vw - 48px); }

/* the full model, in the articles' viewer */
#full-view { position: fixed; inset: 0; z-index: 65; background: var(--snow); display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px calc(env(safe-area-inset-bottom, 0px) + 16px); box-sizing: border-box; gap: 12px; }
#full-view > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#full-view h2 { font: 400 28px/1.1 var(--l-display); letter-spacing: -.025em; color: var(--basalt); margin: 4px 0 0; }
.full-acts { display: flex; gap: 8px; flex-wrap: wrap; }
#full-body { flex: 1; min-height: 0; position: relative; }
#full-body .m3d-fig { position: absolute; inset: 0; margin: 0; }
#full-body .m3d { aspect-ratio: auto; height: 100%; }

/* order: a drawer on desktop, a full-height sheet on phones. The send button
   stays in view at the bottom; the fields scroll between header and footer.
   Inputs are 16px so phones don't zoom in when one is focused. */
#scrim { position: fixed; inset: 0; z-index: 69; background: rgba(44, 56, 68, .22); }
#order { position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; width: min(500px, 100vw); box-sizing: border-box; background: var(--l-paper); border-left: 1px solid var(--l-edge); display: flex; flex-direction: column; box-shadow: -24px 0 48px rgba(44, 56, 68, .14); animation: slide .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.o-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 18px) 22px 12px; border-bottom: 1px solid var(--l-edge); }
#order h2 { font: 400 28px/1.05 var(--l-display); letter-spacing: -.025em; color: var(--basalt); margin: 0 0 4px; outline: none; }
#order .sub { color: var(--l-ink-soft); font-size: 14px; line-height: 1.4; margin: 0; }
.x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -10px 0 0; background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--l-ink); }
.x:hover { background: var(--l-paper-2); }
#orderForm { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.o-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 22px 18px; display: grid; gap: 14px; align-content: start; }
.o-foot { padding: 12px 22px calc(env(safe-area-inset-bottom, 0px) + 14px); border-top: 1px solid var(--l-edge); background: var(--l-paper); display: grid; gap: 8px; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend, .field > label { display: block; padding: 0; font: 500 11px/1.2 var(--l-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--l-ink-soft); margin: 0 0 6px; }
legend .hint, summary .hint { text-transform: none; letter-spacing: 0; color: #7d8792; margin-left: 4px; }
.field > label i, .fine i { font-style: normal; color: var(--l-cool); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; }
.grid > *, .row2 > * { min-width: 0; }
.row2 { display: grid; grid-template-columns: 8.5rem 1fr; gap: 12px; align-items: start; }
.field { display: grid; }
.field input, .field textarea { font: 400 16px/1.25 var(--l-body); color: var(--l-ink); background: #fff; border: 1px solid var(--l-hair); border-radius: 6px; padding: 0 12px; height: 44px; box-sizing: border-box; min-width: 0; width: 100%; -webkit-appearance: none; appearance: none; }
.field textarea { height: auto; padding: 10px 12px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--l-cool); outline: none; box-shadow: 0 0 0 3px rgba(3, 102, 214, .18); }
.field input[aria-invalid="true"] { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
.field input::placeholder, .field textarea::placeholder { color: #9aa3ac; }
.err { margin: 5px 0 0; font: 500 12.5px/1.3 var(--l-body); color: #b03a2e; }
.suffix { position: relative; }
.suffix input { padding-right: 38px; }
.suffix span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 500 13px/1 var(--l-mono); color: var(--l-ink-soft); pointer-events: none; }

/* chips: radios and checkboxes drawn as tap targets. The real input stays in
   the page (just invisible) so keyboards and screen readers use it as normal. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips legend { width: 100%; float: left; }
.chips legend + * { clear: left; }
.chips label { position: relative; display: inline-flex; cursor: pointer; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips label > span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; box-sizing: border-box; padding: 0 13px; border: 1px solid var(--l-hair); border-radius: 999px; background: #fff; font: 500 14.5px/1 var(--l-body); color: var(--l-ink); user-select: none; transition: background .12s, border-color .12s, color .12s; }
.chips label small { font: 500 11px/1 var(--l-mono); color: var(--l-ink-soft); }
.chips label:hover > span { border-color: var(--l-line); }
.chips input:checked + span { background: var(--l-ink); border-color: var(--l-ink); color: var(--l-paper); }
.chips input:checked + span small { color: #c9d2da; }
.chips input[type="checkbox"]:checked + span::before { content: ""; width: 9px; height: 5px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }
.chips input:focus-visible + span { outline: 2px solid var(--l-cool); outline-offset: 2px; }
.seg-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg-pick legend { grid-column: 1 / -1; }
.seg-pick label, .seg-pick label > span { width: 100%; justify-content: center; }
.seg-pick label > span { min-height: 44px; border-radius: 6px; font-weight: 600; }

.note summary { cursor: pointer; font: 500 13.5px/1.2 var(--l-body); color: var(--l-cool); padding: 6px 0; width: max-content; list-style: none; }
.note summary::-webkit-details-marker { display: none; }
.note summary::before { content: "+ "; }
.note[open] summary::before { content: "− "; }
.note[open] summary { margin-bottom: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.send { width: 100%; justify-content: center; min-height: 48px; font-size: 16px; }
.send[aria-busy="true"] { opacity: .7; cursor: progress; }
.fine { font: 400 12px/1.4 var(--l-body); color: var(--l-ink-soft); margin: 0; text-align: center; }
#status { font: 500 13px/1.45 var(--l-body); color: var(--l-ink); background: var(--l-paper-2); border-radius: 6px; padding: 9px 12px; margin: 0; }
#status.bad { background: #fbeceb; color: #8f2d23; }
.done { flex: 1; display: grid; align-content: center; justify-items: center; text-align: center; gap: 10px; padding: 24px 28px calc(env(safe-area-inset-bottom, 0px) + 24px); }
.done h3 { font: 400 30px/1.1 var(--l-display); letter-spacing: -.025em; color: var(--basalt); margin: 6px 0 0; outline: none; }
.done p { margin: 0 0 8px; color: var(--l-ink-soft); font-size: 15px; line-height: 1.5; max-width: 32ch; }
.done .row { justify-content: center; }

@media (max-width: 520px) {
  .credit { display: none; }
  .hero { top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 14px); }
  .hero .btn { min-height: 44px; padding: 0 20px; }
  .lede { font-size: 14px; margin-bottom: 12px; }
  .seg button { padding: 9px 9px; }
  #order { width: 100vw; border-left: 0; animation-name: rise; }
  .o-head { padding-left: 16px; padding-right: 16px; }
  .o-body { padding: 12px 16px 16px; gap: 12px; }
  .o-foot { padding-left: 16px; padding-right: 16px; }
  .grid { gap: 10px; }
  .grid .field:nth-child(-n + 2) { grid-column: 1 / -1; } /* name and email full width; farm and where share a row */
  .row2 { grid-template-columns: 7rem 1fr; gap: 10px; }
  .chips label > span { padding: 0 10px; font-size: 14px; min-height: 38px; }
  .seg-pick label > span { min-height: 42px; }
  #order h2 { font-size: 23px; }
  .o-head { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); padding-bottom: 10px; }
  legend, .field > label { margin-bottom: 5px; }
}
@media (prefers-reduced-motion: reduce) { #order, #sitenav, .hero, .dock { animation: none; } #gl { transition: none; } }