/* =====================================================================
   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; } }

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  background: var(--snow);
  color: var(--ink);
  font: 400 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--glacier);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: var(--glacier-wash);
}
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ol,
ul {
  margin: 0;
}
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  padding: 8px 12px;
  background: var(--basalt);
  color: #fff;
  border-radius: var(--r);
  z-index: 99;
}
.skip:focus {
  left: 8px;
}

.eyebrow {
  font: 500 11.5px/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.draft {
  font-weight: 500;
  color: var(--amber);
}

/* ---- the bar: src/sections/nav/nav.css, shared with the map and the buyer page ---- */
.mark-glyph {
  width: 20px;
  height: 20px;
} /* the Snow mark, kept for the author's avatar on a piece */

/* ---- the list page ---- */
.b-head {
  max-width: var(--wrap); /* the map's column: the bar, the heading and the list share one left edge */
  margin: 0 auto;
  padding: clamp(72px, 12vw, 150px) var(--gutter) clamp(48px, 7vw, 88px);
}
.b-head h1 {
  margin-top: 20px;
  font: 300 clamp(52px, 9vw, 112px)/0.95 var(--display);
  letter-spacing: -0.04em;
  color: var(--basalt);
}
.b-lede {
  margin-top: 28px;
  max-width: 34em;
  font: 400 clamp(18px, 1.8vw, 21px)/1.6 var(--sans);
  color: var(--ink-2);
}
.b-by {
  margin-top: 22px;
  font: 400 13px/1.4 var(--mono);
  color: var(--faint);
}

.b-list {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(80px, 12vw, 160px);
}
.empty {
  padding: 48px 0;
  border-top: 1px solid var(--line-soft);
  font: 300 28px/1.3 var(--display);
  color: var(--muted);
}

.feature {
  display: grid;
  gap: 28px;
  text-decoration: none;
  color: inherit;
}
.feature-cover {
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--mist);
  aspect-ratio: 16 / 9;
}
.feature-cover img,
.feature-cover svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.feature:hover .feature-cover img,
.feature:hover .feature-cover svg {
  transform: scale(1.015);
}
.feature h2 {
  margin-top: 12px;
  max-width: 18em;
  font: 300 clamp(32px, 4.4vw, 52px)/1.05 var(--display);
  letter-spacing: -0.03em;
  color: var(--basalt);
}
.feature-sum {
  margin-top: 16px;
  max-width: 36em;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
}
.read {
  display: inline-block;
  margin-top: 22px;
  font: 500 14px/1 var(--sans);
  color: var(--glacier);
}
.read::after {
  content: " →";
}

.b-sec {
  margin: clamp(72px, 10vw, 120px) 0 8px;
  font: 500 11.5px/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.rows {
  padding: 0;
  list-style: none;
}
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 40px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
}
.rows li:last-child .row {
  border-bottom: 1px solid var(--line-soft);
}
.row-text {
  display: grid;
  gap: 8px;
}
.row-title {
  font: 400 clamp(22px, 2.4vw, 28px)/1.2 var(--display);
  letter-spacing: -0.02em;
  color: var(--basalt);
}
.row:hover .row-title {
  color: var(--glacier-deep);
}
.row-sum {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 40em;
}
.row-cover {
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 3 / 2;
  background: var(--mist);
}
.row-cover img,
.row-cover svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 720px) {
  .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .row-cover {
    order: -1;
  }
}

/* ---- a piece ---- */
.p-head {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 120px) var(--gutter) clamp(40px, 6vw, 64px);
}
.p-back {
  display: inline-block;
  margin-bottom: 40px;
  font: 500 13.5px/1 var(--sans);
  color: var(--muted);
  text-decoration: none;
}
.p-back::before {
  content: "← ";
}
.p-back:hover {
  color: var(--basalt);
}
.p-head h1 {
  margin-top: 18px;
  font: 300 clamp(40px, 6.4vw, 78px)/1.02 var(--display);
  letter-spacing: -0.035em;
  color: var(--basalt);
  text-wrap: balance;
}
.p-sum {
  margin-top: 26px;
  font: 400 clamp(19px, 2vw, 22px)/1.55 var(--sans);
  color: var(--ink-2);
  text-wrap: pretty;
}
.p-by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  font: 500 14.5px/1 var(--sans);
  color: var(--basalt);
}
.p-avatar {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: #0366d6;
}
.p-avatar .mark-glyph {
  width: 34px;
  height: 34px;
  transform: scale(1.12);
} /* the Snow mark, the same drawing as the favicon */

.p-cover {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.p-cover-img,
.p-cover .plate {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--mist);
}
.plate-num {
  font: 300 88px/1 var(--display);
  letter-spacing: -0.03em;
  fill: #8fb8e6;
}
.row-cover .plate-num {
  font-size: 150px;
}

.p-grid {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter) 0;
}
.prose {
  max-width: 680px;
  margin: 0 auto;
}
.toc {
  max-width: 680px;
  margin: 0 auto 56px;
  padding: 22px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.toc ol {
  margin-top: 12px;
  padding-left: 1.2em;
  font-size: 15.5px;
  line-height: 1.5;
}
.toc li + li {
  margin-top: 6px;
}
.toc a {
  color: var(--ink-2);
  text-decoration: none;
}
.toc a:hover {
  color: var(--glacier);
}
@media (min-width: 1200px) {
  .p-grid.has-toc {
    display: grid;
    grid-template-columns: 220px minmax(0, 680px) 220px;
    justify-content: center;
    gap: 56px;
  }
  .p-grid.has-toc .toc {
    position: sticky;
    top: 96px;
    align-self: start;
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .p-grid.has-toc .toc ol {
    padding-left: 0;
    list-style: none;
    font-size: 14px;
  }
  .p-grid.has-toc .toc {
    grid-row: 1 / span 2;
  }
  .p-grid.has-toc .prose,
  .p-grid.has-toc .p-end {
    grid-column: 2;
    margin: 0;
  }
}

/* the text itself */
.prose {
  font-size: 18.5px;
  line-height: 1.78;
  color: var(--ink);
}
/* justified text, with hyphenation so the spaces stay even */
.prose p,
.prose li,
.notes li,
.p-sum {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}
.prose blockquote p,
.prose figcaption {
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.prose > * + * {
  margin-top: 1.45em;
}
.prose h2 {
  margin-top: 2.6em;
  font: 400 clamp(28px, 3.2vw, 36px)/1.15 var(--display);
  letter-spacing: -0.025em;
  color: var(--basalt);
}
.prose h3 {
  margin-top: 2.1em;
  font: 500 22px/1.3 var(--display);
  letter-spacing: -0.015em;
  color: var(--basalt);
}
.prose h4 {
  margin-top: 1.9em;
  font: 500 11.5px/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: 0.8em;
}
.prose a {
  color: var(--glacier-deep);
  text-decoration: underline;
  text-decoration-color: var(--glacier-line);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover {
  text-decoration-color: currentColor;
}
.prose strong {
  font-weight: 600;
  color: var(--basalt);
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
}
.prose li + li {
  margin-top: 0.5em;
}
.prose li > ul,
.prose li > ol {
  margin-top: 0.5em;
}
.prose li::marker {
  color: var(--faint);
}
.prose code {
  padding: 0.12em 0.36em;
  border-radius: 5px;
  background: var(--mist);
  font: 400 0.84em/1 var(--mono);
}
.prose pre {
  overflow-x: auto;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  font: 400 14.5px/1.65 var(--mono);
}
.prose pre code {
  padding: 0;
  background: none;
  font: inherit;
}
.prose hr {
  height: auto;
  border: 0;
  margin: 3.2em 0;
  text-align: center;
}
.prose hr::after {
  content: "· · ·";
  letter-spacing: 0.6em;
  color: var(--ghost);
}
.prose blockquote {
  margin-block: 2.4em;
  padding-left: 28px;
  border-left: 2px solid var(--glacier);
}
.prose blockquote p {
  font: 300 clamp(23px, 2.6vw, 29px)/1.4 var(--display);
  letter-spacing: -0.015em;
  color: var(--basalt);
}
.prose blockquote p + p {
  margin-top: 0.7em;
}
.prose blockquote cite {
  display: block;
  margin-top: 14px;
  font: 400 14.5px/1.4 var(--sans);
  font-style: normal;
  color: var(--muted);
}
.prose blockquote cite::before {
  content: "— ";
}
.prose figure {
  margin-block: 2.6em;
}
@media (min-width: 900px) {
  .prose figure {
    margin-inline: -80px;
  }
}
.prose figure img {
  width: 100%;
  border-radius: var(--r-md);
}
.prose figcaption {
  margin-top: 12px;
  padding-inline: 4px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}
@media (min-width: 900px) {
  .prose figcaption {
    padding-inline: 80px;
  }
}
.prose p > img {
  display: inline-block;
  border-radius: var(--r);
}
.prose .table {
  overflow-x: auto;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.prose th {
  font: 500 11.5px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}
.prose th,
.prose td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.prose sup.fn {
  line-height: 0;
}
.prose sup.fn a {
  padding: 0 2px;
  font: 500 0.68em/1 var(--mono);
  text-decoration: none;
}
.p-notes {
  margin-top: 4.5em;
  padding-top: 2em;
  border-top: 1px solid var(--line-soft);
}
.prose h2.notes-head {
  margin: 0 0 1.2em;
  font: 500 11.5px/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.notes {
  padding-left: 1.3em;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.notes li + li {
  margin-top: 0.7em;
}
.notes .back {
  text-decoration: none;
}

/* the end of a piece */
.p-end {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 110px) 0 clamp(80px, 12vw, 150px);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags span {
  padding: 6px 12px;
  border-radius: var(--pill);
  background: var(--mist);
  font: 400 12.5px/1 var(--mono);
  color: var(--muted);
}
.sign {
  margin-top: 28px;
  font-size: 15px;
  color: var(--muted);
}
.arounds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
}
.around {
  display: grid;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--paper);
  text-decoration: none;
}
.around span:last-child {
  font: 400 19px/1.3 var(--display);
  letter-spacing: -0.01em;
  color: var(--basalt);
}
.around:hover {
  border-color: var(--glacier-line);
}
.around:last-child {
  text-align: right;
}
@media (max-width: 560px) {
  .arounds {
    grid-template-columns: 1fr;
  }
  .around:last-child {
    text-align: left;
  }
}

/* ---- 404 ---- */
.nf {
  min-height: 60vh;
}
.nf-links {
  display: flex;
  gap: 24px;
  margin-top: 32px;
  font: 500 15px/1 var(--sans);
}
.nf-links a {
  color: var(--glacier);
  text-decoration: none;
}

/* ---- the foot ---- */
.b-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: space-between;
  margin-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  padding: 32px 0 48px;
  border-top: 1px solid var(--line-soft);
  font: 400 12.5px/1.5 var(--mono);
  color: var(--faint);
}
.b-foot a {
  color: var(--faint);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .feature-cover img,
  .feature-cover svg {
    transition: none;
  }
}
@media print {
  .b-foot,
  .toc,
  .arounds,
  .p-back {
    display: none;
  }
  body {
    background: #fff;
  }
}