/* nooterra.ai v12, the company site. One file: tokens, the face, the grid, pages, the contact form.
   Light only. A top bar, then a 12-column grid (1200 px max) that every section spans, with rules across the grid.
   One face, Switzer. Five sizes: display, h2, body 17, UI 15, label 13. Spacing on the 4 px scale (DESIGN_RULES §3). */

@font-face { font-family: "Switzer"; src: url("/assets/fonts/Switzer-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { /* metric-matched stand-in while Switzer loads (measured for v7: 1.0064 x Arial, ascent 98, descent 25) */
  font-family: "Switzer Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 100.64%; ascent-override: 97.4%; descent-override: 24.8%; line-gap-override: 0%; }

:root {
  --paper: #FAFAF8;
  --paper-2: #F0EFEB;
  --field: #FFFFFF;
  --ink: #141413;
  --ink-2: #4A4844;
  --ink-3: #6B6862;
  --line: #E2E0DA;
  --line-strong: #BEBBB4;
  --accent: #3A5713;
  --danger: #A1311F;
  /* /updates covers (SHIP1): the colour under each cover's art (never the verdict green or orange) */
  --slate: #33405A;
  --clay: #B98D80;
  /* home panels (CO8): white hairlines and copy on the art, the cream band under card metadata, the dark footer */
  --white: #FFFFFF;
  --cream: #F4F1EA;
  --dusk: #2A2466;      /* the Lode panel before its art loads */
  --sea: #14566E;
  --cobalt: #1D3FA0;
  --ember: #D9A4A0;
  --foot-ink: #B9B6AF;
  --foot-hi: #EDECE8;
  --foot-label: #9C9A94;

  --sans: "Switzer", "Switzer Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-body: 1.0625rem;
  --fs-ui: 0.9375rem;
  --fs-label: 0.8125rem;

  --pad: 48px;          /* page gutter */
  --wrap: 1200px;       /* the grid */
  --gap: 24px;          /* column gap */
  --sec: 128px;         /* space between sections */
  --top: 128px;         /* space between the bar and the first heading */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  min-height: 100vh; display: flex; flex-direction: column;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong); transition: text-decoration-color 140ms cubic-bezier(0.2, 0, 0, 1), color 140ms cubic-bezier(0.2, 0, 0, 1), background-color 140ms cubic-bezier(0.2, 0, 0, 1); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: color-mix(in oklab, var(--accent) 20%, transparent); }
.label { font-size: var(--fs-label); line-height: 1.5; letter-spacing: 0.02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 10; padding: 12px 16px; background: var(--ink); color: var(--paper); font-size: var(--fs-ui); }
.skip:focus { top: 16px; }
.visually-hidden { margin: 0; position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* ------------------------------------------------------------------------------------------------ the bar */
.top { position: relative; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-height: 44px; }
.brand__mark { width: 24px; height: 24px; }
.brand__word { font-weight: 500; font-size: var(--fs-body); letter-spacing: -0.01em; }
.menu { display: none; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; }
.nav li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink-2); font-size: var(--fs-ui); }
.nav li a:hover, .nav li a[aria-current="page"] { color: var(--ink); }
.nav__product {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  text-decoration: none; font-size: var(--fs-ui); color: var(--paper); background: var(--ink);
}
.nav__product:hover { background: var(--ink-2); }

/* ------------------------------------------------------------------------------------------------ sections */
main { flex: 1; padding-top: var(--top); padding-bottom: var(--sec); }
.sec { margin-top: var(--sec); border-top: 1px solid var(--line); padding-top: 24px; }
.sec--tight { margin-top: 64px; }
.sec__head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 48px; }
.sec__head .label { margin: 0; }
.sec__side { grid-column: 1 / 5; }
.sec__main { grid-column: 5 / 13; }

h1, h2, h3 { font-family: var(--sans); margin: 0; text-wrap: balance; color: var(--ink); }
h1 { font-size: var(--fs-display); font-weight: 400; line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-body); font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; }

/* hero: display H1 over 7 columns, the intro beside it on the H1's last baseline */
.hero { align-items: last baseline; row-gap: 32px; }
.hero h1 { grid-column: 1 / 8; }
.hero__intro { grid-column: 9 / 13; }
.hero__intro { margin: 0; color: var(--ink-2); }
.hero__cta { grid-column: 9 / 13; }
.page-head { row-gap: 32px; }
.page-head h1 { grid-column: 1 / 10; }
.page-head .label { grid-column: 1 / -1; margin: 0; }
.page-head__intro { grid-column: 1 / 8; color: var(--ink-2); margin: 0; }

.prose { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); max-width: 66ch; }
.prose p { margin: 0; }
.prose p + p, .prose p + ul, .prose p + ol, .prose ul + p, .prose ol + p { margin-top: 16px; }
.prose h2 { margin-top: 48px; margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0; padding-left: 24px; }
.prose li + li { margin-top: 8px; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose li::marker { color: var(--ink-3); }
.prose a, .form__privacy a, .book a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.form__privacy a { padding-block: 16px; margin-block: -16px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border: 1px solid var(--ink); border-radius: 999px;
  font-family: var(--sans); font-size: var(--fs-ui); line-height: 1.5; color: var(--paper); background: var(--ink); text-decoration: none;
}
.btn:hover { background: var(--ink-2); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--paper-2); }
.link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-ui); color: var(--ink); }

/* what we're building: three columns */
.cols { row-gap: 48px; }
.cols > div { grid-column: span 4; padding-right: 24px; }
.cols p { margin: 12px 0 0; color: var(--ink-2); }

/* update cards (SHIP1): a procedural cover (tools/bg/gen.py art, white hairlines, grain) under a frosted cream plate
   that carries the label and title in ink; then the date and one line */
.cards { row-gap: 48px; }
.card { grid-column: span 4; display: block; text-decoration: none; color: var(--ink); }
.card__cover { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; justify-content: flex-end; background: var(--paper-2) center / cover no-repeat; transition: filter 140ms cubic-bezier(0.2, 0, 0, 1); }
.card__cover::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: overlay; opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.card:hover .card__cover { filter: brightness(0.97); }
.card__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.card__plate { border-radius: 8px; padding: 16px; background: color-mix(in srgb, var(--cream) 88%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.card__plate .label { color: var(--ink-2); }
.card__plate h3 { margin-top: 8px; font-size: var(--fs-h2); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.card--slate .card__cover { background-color: var(--slate); }
.card--slate .card__art { background: url(/assets/bg/u_slate.png) top center / 408px 300px repeat-x; image-rendering: pixelated; }
.card--clay .card__cover { background-color: var(--clay); background-image: url(/assets/bg/u_clay.webp); }
.card__meta { margin: 16px 0 0; }
.card__sum { margin: 4px 0 0; font-size: var(--fs-ui); color: var(--ink-2); }
.card:hover .card__sum { color: var(--ink); }

/* join us */
.join__text { margin: 0; color: var(--ink-2); max-width: 52ch; }
.join .actions { margin-top: 32px; }

/* lists of notes (the archive) */
.list { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; }
.list__row + .list__row { border-top: 1px solid var(--line); }
.list__link { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 24px 0; text-decoration: none; color: var(--ink); }
.list__title { grid-column: 1 / 6; font-weight: 500; }
.list__sum { grid-column: 7 / 13; font-size: var(--fs-ui); color: var(--ink-2); }
.list__link:hover .list__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

/* an article */
.post { grid-column: 1 / 9; }
.post__body { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
.post__next { margin: 96px 0 0; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.post__next a { color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-ui); }

/* footer: brand, then Product, Company, Legal */
.foot { border-top: 1px solid var(--line); font-size: var(--fs-ui); color: var(--ink-2); }
.foot__in { padding-block: 48px 64px; row-gap: 32px; }
.foot__brand { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 8px; }
.foot__brand p { margin: 0; }
.foot__col { grid-column: span 2; }
.foot__col h2 { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.02em; color: var(--ink-3); margin: 0 0 8px; line-height: 1.5; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .brand { color: var(--ink); }

/* ------------------------------------------------------------------------------------------------ home: the index */
.c-hero { padding-top: 0; container-type: inline-size; }
/* the wordmark is fitted to the grid: measured in Chromium with Switzer 500 at -0.055em tracking (canvas measureText,
   10-16): ink starts 0.0730 em right of the origin and is 3.5702 em wide, so 100cqw / 3.5702 = 28.009cqw puts the
   N stem's ink on the left grid edge and the last a's ink on the right one */
.c-name { font-size: 28.009cqw; font-weight: 500; line-height: 0.86; letter-spacing: -0.055em; margin-left: -0.073em; white-space: nowrap; max-width: none; }
.c-thesis { margin: 48px 0 0; max-width: 28em; font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.c-index { list-style: none; margin: 128px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.c-row { border-bottom: 1px solid var(--line); }
.c-row a {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline;
  min-height: 176px; padding: 32px 0; text-decoration: none; color: var(--ink); transition: background-color 160ms cubic-bezier(0.2, 0, 0, 1);
}
.c-row a:hover { background: var(--paper-2); }
.c-row a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; background: var(--paper-2); }
.c-row__title { grid-column: 1 / 5; font-size: var(--fs-display); line-height: 1; letter-spacing: -0.035em; transition: transform 220ms cubic-bezier(0.2, 0, 0, 1); }
.c-row a:hover .c-row__title, .c-row a:focus-visible .c-row__title { transform: translateX(12px); }
.c-row__body { grid-column: 5 / 11; color: var(--ink-2); }
.c-row__meta { grid-column: 11 / 13; justify-self: end; }
.c-mini { list-style: none; margin: 0; padding: 0; }
.c-mini li + li { margin-top: 4px; }
.c-mini__date { margin: 0 0 8px; }
.c-mini span { color: var(--ink); }

/* ------------------------------------------------------------------------------------------------ contact form (classes from v2site/contact) */
.contact { grid-column: 1 / 8; margin-top: 64px; }
.form { margin: 0; }
.form__row--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.field__label { display: block; margin-bottom: 8px; padding: 0; font-size: var(--fs-ui); color: var(--ink); }
.field__opt { color: var(--ink-3); }
.field__input {
  display: block; width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--field); color: var(--ink); font-family: var(--sans); font-size: var(--fs-body); line-height: 1.5;
}
.field__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field__input[aria-invalid="true"] { border-color: var(--danger); }
.field__input--area { min-height: 160px; resize: vertical; }
.field__input::placeholder { color: var(--ink-3); opacity: 1; }
.field__error { margin: 8px 0 0; font-size: var(--fs-label); color: var(--danger); }
.field__count { margin: 8px 0 0; font-size: var(--fs-label); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.field__count[data-over] { color: var(--danger); }
.choice__list { display: flex; flex-wrap: wrap; gap: 8px; }
.choice__item {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--field); font-size: var(--fs-ui); cursor: pointer;
}
.choice__item:has(input:checked) { border-color: var(--ink); }
.choice__item input { margin: 0; accent-color: var(--ink); }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__trap input { padding: 0; border: 0; }
.choice__item input { padding: 0; }
.form__alert { margin: 0 0 24px; padding: 12px 16px; border-left: 2px solid var(--danger); background: var(--paper-2); font-size: var(--fs-ui); }
.form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.box {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 1px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: var(--fs-ui); line-height: 1.5; cursor: pointer;
}
.box:hover { background: var(--ink-2); }
.box__spin { display: none; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 800ms linear infinite; }
.form.is-sending .box__spin { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.form__privacy { margin: 0; font-size: var(--fs-label); color: var(--ink-2); }
.done { padding: 32px 0; }
.done__text { margin: 12px 0 24px; font-size: var(--fs-body); }
.done__again { min-height: 44px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-ui); cursor: pointer; }
.book { margin: 32px 0 0; font-size: var(--fs-ui); color: var(--ink-2); }
html:not(.js) .js-only { display: none; }
.contact__noscript { font-size: var(--fs-body); }

/* ------------------------------------------------------------------------------------------------ narrower screens */
@media (max-width: 1199px) {
  :root { --pad: 32px; --sec: 96px; --top: 96px; }
  .hero h1 { grid-column: 1 / 11; }
  .hero__intro, .hero__cta { grid-column: 1 / 8; }
  .hero { align-items: start; }
  .cols > div { padding-right: 0; }
  .c-row__body { grid-column: 5 / 13; }
  .c-row__meta { grid-column: 5 / 13; justify-self: start; margin-top: 8px; }
  .foot__brand { grid-column: 1 / 5; }
  .foot__col { grid-column: span 2; }
}
@media (max-width: 759px) {
  :root { --pad: 24px; --top: 64px; --sec: 64px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > *, .hero h1, .hero__intro, .hero__cta, .page-head h1, .page-head__intro, .sec__side, .sec__main, .cols > div, .card, .post, .contact, .foot__brand, .foot__col { grid-column: 1 / -1; }
  .sec__side { margin-bottom: 16px; }
  .sec__head { margin-bottom: 32px; }
  .top { position: sticky; top: 0; }
  .top__in { min-height: 64px; }
  html.js .menu {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 0 0 16px; border: 0; background: none;
    font-family: var(--sans); font-size: var(--fs-ui); color: var(--ink); cursor: pointer;
  }
  html.js .nav { display: none; }
  html:not(.js) .top__in { flex-wrap: wrap; padding-bottom: 12px; }
  html:not(.js) .nav { flex-wrap: wrap; gap: 16px; width: 100%; }
  html:not(.js) .nav ul { flex-wrap: wrap; gap: 16px; }
  .top.is-open .nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0; position: fixed; inset: 64px 0 0 0; margin: 0;
    padding: 32px var(--pad) 48px; background: var(--paper); overflow-y: auto;
  }
  .top.is-open .nav ul { flex-direction: column; gap: 0; }
  .top.is-open .nav li a { font-size: var(--fs-h2); line-height: 1.25; color: var(--ink); padding: 8px 0; }
  .top.is-open .nav__product { margin-top: auto; min-height: 48px; padding-inline: 24px; }
  html.menu-open { overflow: hidden; }
  .list__link { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .c-index { margin-top: 64px; }
  .c-thesis { margin-top: 32px; }
  .c-row a { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 24px 0; }
  .c-row a { min-height: 0; }
  .c-row__title, .c-row__body, .c-row__meta { grid-column: 1; margin-top: 0; }
  .list__link > * { grid-column: 1; }
  .form__row--pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .choice__list { display: grid; grid-template-columns: minmax(0, 1fr); }
  .foot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; padding-block: 32px 48px; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__col { grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
@view-transition { navigation: auto; }

/* ---- Home (comp D) with the CO8 panel art ---------------------------------------------------------------------------
   Art: assets/bg (tools/bg/gen.py, procedural, 2x the panel size). Hairlines: inline SVG from tools/bg/overlays.py.
   Grain is browser-made fractal noise (an SVG feTurbulence tile), so it is sharp at any DPR and costs no bytes. */
.home main { padding-top: 96px; }
.h-hero { align-items: start; }
.h-hero h1 { grid-column: 1 / 7; font-size: clamp(2.75rem, 1.5rem + 3.6vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; }
.h-mission { grid-column: 8 / 13; margin: 8px 0 0; font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }

.h-lode, .h-card { position: relative; isolation: isolate; overflow: hidden; }
.h-lode::after, .h-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  mix-blend-mode: overlay; opacity: 0.2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.h-lode {
  margin-top: 96px; border-radius: 24px; min-height: 560px; display: grid; place-items: center; text-align: center; padding: 64px 32px;
  background: var(--dusk) url(/assets/bg/lode.webp) center / cover no-repeat;
}
.h-lode__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ov { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--white); }
.ov path, .ov ellipse, .ov circle { vector-effect: non-scaling-stroke; stroke-width: 1; }
.ov__faint { opacity: 0.3; }
.ov__vein, .ov__ring { opacity: 0.9; }
.ov__dash { opacity: 0.9; stroke-dasharray: 4 5; }
.ov__node { fill: var(--white); stroke: none; }
.ov--tall { display: none; }
/* the strata fade out behind the copy so every letter sits on the field itself */
.h-lode .ov { -webkit-mask-image: radial-gradient(ellipse 30% 42% at 50% 47%, transparent 45%, var(--ink) 100%); mask-image: radial-gradient(ellipse 30% 42% at 50% 47%, transparent 45%, var(--ink) 100%); }
.h-lode__copy { position: relative; max-width: 34rem; }
.h-lode__title { font-size: clamp(4.5rem, 2rem + 8vw, 9rem); line-height: 0.9; letter-spacing: -0.05em; font-weight: 400; color: var(--white); }
.h-lode__copy p { margin: 24px auto 0; color: var(--white); font-size: var(--fs-body); }
.h-lode .actions { justify-content: center; margin-top: 32px; }
.h-lode .btn { background: var(--white); color: var(--ink); border-color: var(--white); }
.h-lode .btn:hover { background: var(--cream); }
.h-lode .btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.h-latest { margin-top: 128px; }
.h-h2 { font-size: var(--fs-h2); margin-bottom: 32px; }
.h-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.h-card { border-radius: 16px; padding: 32px 24px 24px; display: flex; flex-direction: column; min-height: 360px; background: var(--paper-2) center / cover no-repeat; }
.h-card__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.h-card h3 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.h-card h3 a { text-decoration: none; color: inherit; } .h-card h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.h-card__text { margin: 16px 0 0; color: var(--ink-2); font-size: var(--fs-ui); }
/* the metadata rows sit on a frosted cream band across the card's full width */
.h-card__head { flex: 1 0 auto; }
.h-meta { position: relative; isolation: isolate; margin: 0; padding-top: 32px; font-size: var(--fs-label); }
.h-meta::before { content: ""; position: absolute; left: -24px; right: -24px; top: 12px; bottom: -24px; z-index: -1;
  background: color-mix(in srgb, var(--cream) 88%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.h-meta div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(20, 20, 19, 0.16); }
.h-meta dt { color: var(--ink-2); } .h-meta dd { margin: 0; color: var(--ink); }
/* card 1: an ordered dither of a cloud bank in two cobalt inks, 3 CSS px cells, never resampled */
.h-card--cobalt { background-color: var(--cobalt); }
.h-card--cobalt h3, .h-card--cobalt .h-card__text { color: var(--white); }
.h-card--cobalt .h-card__art { background: url(/assets/bg/cobalt.png) top center / 384px 480px repeat-x; image-rendering: pixelated; }
.h-card--cobalt::after { display: none; }
/* card 2: grain painterly dusk under a heavy stipple and a dashed path */
.h-card--ember { background-color: var(--ember); background-image: url(/assets/bg/ember_w.webp); }
.h-card--ember .ov__dash, .h-card--ember .ov__node { opacity: 1; }
.h-card--ember .h-card__text { color: var(--ink); }
.h-card--ember::after { mix-blend-mode: normal; opacity: 0.55; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  14 0 0 0 -8.6'/%3E%3C/filter%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24  0 0 0 0 .06  0 0 0 0 .2  -14 0 0 0 5.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23w%29'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23d%29'/%3E%3C/svg%3E"); background-size: 180px; }
/* card 3: sea-teal mesh under orbit hairlines, white copy */
.h-card--sea { background-color: var(--sea); background-image: url(/assets/bg/sea.webp); color: var(--white); }
.h-card--sea h3, .h-card--sea .h-card__text { color: var(--white); }
.h-card .ov { height: 100%; }
.h-card--sea .ov__faint { opacity: 0.34; } .h-card--sea .ov__vein { opacity: 0.8; }

.h-rows { margin-top: 96px; }
.h-rows ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.h-rows li { border-bottom: 1px solid var(--line); }
.h-rows a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 24px 0; text-decoration: none; color: var(--ink); }
.h-rows__title { font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.2; }
.h-rows a:hover .h-rows__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.h-rows a:focus-visible, .h-card a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.h-card--sea a:focus-visible, .h-card--cobalt a:focus-visible { outline-color: var(--white); }
.home .foot { background: var(--ink); color: var(--foot-ink); border-top: 0; margin-top: 0; }
.home .foot a, .home .foot .brand { color: var(--foot-hi); }
.home .foot a:hover { color: var(--white); }
.home .foot__col h2 { color: var(--foot-label); }
.home .foot :focus-visible { outline-color: var(--white); }
@media (max-width: 1199px) {
  .h-hero h1 { grid-column: 1 / 8; } .h-mission { grid-column: 8 / 13; }
}
@media (max-width: 759px) {
  .home main { padding-top: 48px; }
  .h-hero h1, .h-mission { grid-column: 1 / -1; } .h-mission { margin-top: 24px; }
  .h-lode { margin-top: 64px; min-height: 480px; border-radius: 16px; padding: 48px 24px; align-items: start; background-image: url(/assets/bg/lode_p.webp); }
  .ov--wide { display: none; } .ov--tall { display: block; }
  .h-lode .ov { -webkit-mask-image: linear-gradient(transparent 52%, var(--ink) 72%); mask-image: linear-gradient(transparent 52%, var(--ink) 72%); }
  .h-latest { margin-top: 96px; }
  .h-cards { grid-template-columns: minmax(0, 1fr); }
  .h-card { min-height: 360px; }
  .h-card--ember .ov { top: 26%; height: 36%; }
  .h-rows { margin-top: 64px; }
}