/* North * — Geist Mono Light, monochrome */

:root {
  --ink: #000;
  --ink-dim: rgba(0, 0, 0, 0.5);
  --hairline: #d9d9d9;
  --scrim: rgba(0, 0, 0, 0.47);
  --pad: 24px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 300;
  color: var(--ink);
  background: #fff;
  min-height: 100vh;
  min-height: 100dvh;
  /* anchor for absolutely-positioned page furniture (.footer-overlay) */
  position: relative;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.logo {
  font-size: 20px;
  white-space: nowrap;
}

.logo-star {
  color: #2222ff;
}

.menu-toggle {
  position: absolute;
  top: 13px;
  right: var(--pad);
  font-size: 12px;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: inherit;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

.menu-toggle:hover {
  color: var(--ink-dim);
}

/* [/] Search — top-left mirror of [M] Menu (dim → black on hover) */
.search-toggle {
  position: absolute;
  top: 13px;
  left: var(--pad);
  font-size: 12px;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: inherit;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0;
}

.search-toggle:hover {
  color: var(--ink);
}

/* [del.] back — dim affordance immediately right of [/] Search; every
   page except the homepage (app.js skips injecting it there) */
.back-toggle {
  position: absolute;
  top: 13px;
  left: calc(var(--pad) + 72px + 16px);
  font-size: 12px;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: inherit;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

.back-toggle:hover {
  color: var(--ink);
}

.back-toggle .back-short {
  display: none;
}

/* ---------- Hero (home) ---------- */

.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px var(--pad) 24px;
}

.hero-inner {
  width: 100%;
  max-width: 713px;
}

.hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 690 / 357;
  overflow: hidden;
}

.hero-media canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}

.hero-media canvas.dragging {
  cursor: grabbing;
}

/* 2D orbit-ring overlay, stacked over the WebGL globe; never eats pointers */
.hero-media canvas.globe-orbit {
  cursor: default;
  pointer-events: none;
  z-index: 1;
}

/* thin instrument frame — only the four corners are drawn */
.globe-frame {
  position: relative;
}

.corner {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 1;
  pointer-events: none;
}

.c-tl { top: 0; left: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.c-tr { top: 0; right: 0; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.c-bl { bottom: 0; left: 0; border-bottom: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.c-br { bottom: 0; right: 0; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); }

/* live view-space coordinates of the blue surface point — along the
   frame's top edge, clear of the nav links below */
.globe-readout {
  position: absolute;
  left: 14px;
  top: 10px;
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 1;
}

.globe-readout .val {
  color: #2222ff;
}

/* crop values from Figma — bottom overflow hides the MOSHED watermark */
.hero-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 109.62%;
  max-width: none;
  transition: opacity 120ms linear;
}

.hero-media .alt {
  opacity: 0;
}

.hero-media:hover .alt {
  opacity: 1;
}

.hero-nav {
  display: flex;
  height: 25px;
  align-items: center;
}

.hero-nav a {
  flex: 1 0 0;
  font-size: 12px;
  white-space: nowrap;
}

.hero-nav a:hover {
  color: #2222ff;
}

/* [1]-[4] — bracketed keyboard affordance, same grammar as [M] Menu /
   [/] Search; dim so it doesn't compete with the label, no layout shift
   on hover since the link's own hover just recolors the whole line */
.hero-nav a .key {
  color: var(--ink-dim);
}

.hero-nav a:hover .key {
  color: #2222ff;
}

/* ---------- Menu overlay ---------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  visibility: hidden;
  opacity: 0;
  transition: opacity 160ms linear, visibility 0s linear 160ms;
}

.menu-overlay.open {
  visibility: visible;
  opacity: 1;
  transition: opacity 160ms linear;
}

.menu-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  border: none;
  cursor: default;
  padding: 0;
}

.menu-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 299px;
  max-height: 44vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-groups {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 31px;
  width: 138px;
  font-size: 12px;
  line-height: 15px;
}

.menu-groups a {
  display: block;
}

.menu-groups a:hover {
  color: var(--ink-dim);
}

/* [1]-[4] — same bracketed-key grammar as the hero nav's [1]-[4] */
.menu-groups a .key {
  color: var(--ink-dim);
}

.menu-groups a:hover .key {
  color: var(--ink-dim);
}

.menu-close {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  font-size: 12px;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: inherit;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

.menu-close:hover {
  color: var(--ink-dim);
}

/* ---------- Search overlay (above the menu) ---------- */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: #fff;
  visibility: hidden;
  opacity: 0;
  transition: opacity 140ms linear, visibility 0s linear 140ms;
  overflow-y: auto;
}

.search-overlay.open {
  visibility: visible;
  opacity: 1;
  transition: opacity 140ms linear;
}

.search-col {
  width: 560px;
  max-width: calc(100% - 2 * var(--pad));
  margin: 140px auto 64px;
}

/* terminal prompt grammar (cf. contact / retired blog search) */
.search-prompt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding-bottom: 6px;
}

.search-prompt:focus-within {
  border-bottom-color: var(--ink);
}

.search-prompt .s-caret {
  color: var(--ink-dim);
}

.search-overlay .s-input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  caret-color: #2222ff;
  border-radius: 0;
}

.search-overlay .s-input:focus {
  outline: none;
}

/* [Esc] Close — bracketed keyboard affordance, dim */
.search-prompt .s-hint {
  color: var(--ink-dim);
  white-space: nowrap;
}

/* results list — geometry stable, no bullets */
.search-results {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  font-size: 12px;
}

.search-results .s-empty {
  color: var(--ink-dim);
  padding: 4px 0;
}

/* dim group heading — "pages" / "in text", sits above each group's rows */
.search-results .s-group {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 12px 0 4px;
}

.search-results .s-group:first-child {
  padding-top: 0;
}

.search-results .s-hit {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}

/* "in text" rows: slightly indented content matches, under their group */
.search-results .s-hit-text {
  padding-left: 12px;
}

.search-results .s-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
}

.search-results .s-hit.is-sel .s-title,
.search-results .s-hit:hover .s-title {
  color: #2222ff;
}

/* dim "page" tag, right-aligned on title-match rows only */
.search-results .s-tag {
  color: var(--ink-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: none;
}

.search-results .s-hit.is-sel .s-tag,
.search-results .s-hit:hover .s-tag {
  color: #2222ff;
}

.search-results .s-path {
  display: block;
  color: var(--ink-dim);
  margin-top: 2px;
  word-break: break-all;
}

.search-results .s-snip {
  display: block;
  color: var(--ink-dim);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-results .s-match {
  color: #2222ff;
}

/* ---------- Blog — public record of X posts ---------- */

.blog-main {
  padding: 140px var(--pad) 0;
}

/* header zone: title + source readout + terminal search */

.blog-title {
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 16px;
}

/* home .globe-readout grammar: dim labels, blue values */
.blog-source {
  font-size: 12px;
  color: var(--ink-dim);
}

.blog-source .val {
  color: #2222ff;
}

.blog-source a.val:hover {
  color: var(--ink);
}

/* the search bar — the contact terminal's prompt grammar, on white */
.blog-search {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 40px;
  max-width: 440px;
  font-size: 12px;
}

.blog-search .s-input {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding: 0 0 4px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  caret-color: var(--ink);
  border-radius: 0;
}

.blog-search .s-input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.blog-search .s-input::placeholder {
  color: var(--ink-dim);
}

/* [/] — bracketed keyboard affordance, as [M] Menu / [Esc] Close */
.blog-search .s-hint {
  color: var(--ink-dim);
}

/* live match count under the prompt; min-height holds the line box
   so the count appearing never shifts the page */
.blog-match {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-dim);
  min-height: 15px;
}

.blog-match .val {
  color: #2222ff;
}

/* ---------- post cards (built by blog.js from posts.json) ---------- */

.post {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 120ms linear;
}

/* search filter (blog.js) — opacity only, so the grid never reflows */
.post.is-dim {
  opacity: 0.15;
}

.post-media {
  position: relative;
  overflow: hidden;
}

/* instrument brackets (home/ventures .corner grammar), drawn on hover */
.post-media .corner {
  opacity: 0;
  transition: opacity 120ms linear;
}

.post:hover .post-media .corner {
  opacity: 1;
}

/* generative covers (blog.js) — the canvas just fills the aspect box */
.post-media canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* index / seed / highlight readout row — home .globe-readout grammar
   (dim label, blue value); the seed value is typed in by blog.js's
   genesis pass, the ↗ is pinned to the row's right edge */
.post-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--ink-dim);
}

.post-meta .val {
  color: #2222ff;
}

/* the seed value may be mid-type — hold its width so ↗ never shifts */
.post-seed {
  min-width: 11ch;
}

.post-out {
  margin-left: auto;
}

.post:hover .post-out {
  color: #2222ff;
}

.post-date {
  font-size: 12px;
}

.post:hover .post-date {
  color: var(--ink-dim);
}

/* the post text IS the content — X posts are short */
.post-text {
  font-size: 12px;
  line-height: 1.5;
}

.post:hover .post-text {
  color: #2222ff;
}

/* record cards clamp long posts to four lines; the highlight never does */
.post-band .post-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* #tag chips — display grammar is dim; click injects the tag into the
   search prompt (blog.js) */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  font-size: 12px;
  color: var(--ink-dim);
}

.post-tags .tag:hover {
  color: #2222ff;
}

/* ---------- highlight post — one large card on white ---------- */

.blog-highlight {
  margin-top: 96px;
}

/* cover left at the old feature size, body column beside it */
.post-highlight {
  flex-direction: row;
  gap: 64px;
  align-items: flex-start;
}

.post-highlight .post-media {
  width: 50.4%;
  aspect-ratio: 690 / 574;
  flex: 0 0 auto;
}

.hl-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 560px;
}

.post-highlight .post-text {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.55;
}

/* ---------- blog band — the record ---------- */
/* The page tips to black after the highlight: every remaining post in a
   uniform grid, covers inverted (white ink on black). Horizontal insets
   mirror .blog-main so columns line up across the edge. */

/* the band owns everything below the highlight — flex-grow runs it to
   the page bottom even on viewports taller than the content */
body:has(.blog-band) {
  display: flex;
  flex-direction: column;
}

.blog-band {
  position: relative;
  background: #000;
  color: #fff;
  margin-top: 128px;
  padding: 96px var(--pad) 240px;
  flex: 1 0 auto;
}

.band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 96px 64px;
  align-items: start;
}

.post-band .post-media {
  width: 100%;
  aspect-ratio: 3 / 2;
}

/* readout grammar inverted: dim goes half-white, values stay accent blue */
.blog-band .post-meta,
.blog-band .post-tags {
  color: rgba(255, 255, 255, 0.5);
}

.blog-band .post:hover .post-date {
  color: rgba(255, 255, 255, 0.5);
}

/* instrument brackets read white on the band (color only — the drawn
   sides are set per-corner above) */
.blog-band .post-media .corner {
  border-color: #fff;
}

/* ---------- About ---------- */

.about {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* the design is a fixed 1440-wide composition — cap and center it */
.stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* extra viewport height goes above the intro text, keeping the
   text→band→image composition as tight as the 800px design */
.about-intro {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 62px 0 12px;
}

.about-col {
  margin-left: calc(25% + 15px);
  width: 339px;
}

.about-title {
  font-size: 16px;
  margin-bottom: 12px;
}

.about-text {
  font-size: 12px;
  line-height: normal;
}

.about-band {
  background: #000;
  color: #fff;
  flex: 0 0 auto;
}

.about-media {
  position: relative;
  overflow: hidden;
}

.about-media img {
  position: absolute;
  max-width: none;
}

.about-media-left {
  position: absolute;
  left: calc(25% + 15px);
  top: 0;
  width: 339px;
  aspect-ratio: 640 / 399;
}

/* crop values from Figma — bottom overflow hides the MOSHED watermark */
.about-media-left img {
  width: 100%;
  height: 106.77%;
  left: 0;
  top: 0;
}

.about-col-right {
  position: relative;
  margin-left: calc(50% + 6px);
  width: 339px;
  /* 104 + para 95 + gap 12 = 211 = the left image's height, so the road
     image's top lines up exactly with the left image's bottom; the band
     grows to 580 (104+95+12+369), starting right at the left image top */
  padding-top: 104px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-media-right {
  width: 100%;
  /* taller window into the portrait source — shows ~72% of its height */
  aspect-ratio: 339 / 369;
}

.about-media-right img {
  width: 100%;
  height: 138%;
  left: 0;
  top: -7%;
}

.ventures-link {
  position: absolute;
  left: calc(100% + 12px);
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}

.ventures-link:hover {
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
  .about-intro {
    padding: 140px var(--pad) 12px;
  }

  .about-col {
    margin-left: 0;
    width: 100%;
    max-width: 480px;
  }

  .about-media-left {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin: 0;
  }

  .about-band {
    padding: 0 var(--pad) 24px;
  }

  .about-col-right {
    margin-left: 0;
    width: 100%;
    max-width: 480px;
    padding-top: 48px;
  }

  .ventures-link {
    position: static;
    align-self: flex-end;
    margin-top: 24px;
  }
}

/* ---------- Contact ---------- */

/* one-viewport composition (cf. .about, ventures): title zone in the
   upper area, form below it, blob right, footer overlaid bottom-left —
   nothing scrolls at the 1440×800 design size */
.contact {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* title sits up top like ventures' .v-intro; extra viewport height
   falls below the form (the body grows), keeping the zone fixed */
.contact-intro {
  flex: 0 0 auto;
  padding: 96px 0 30px;
}

.contact-col {
  margin-left: calc(25% + 15px);
  width: 339px;
}

/* the intro line reads dim here, like the form's labels */
.contact-col .about-text {
  color: var(--ink-dim);
}

.contact-body {
  position: relative;
  flex: 1 0 auto;
}

.contact-body .stage {
  padding: 24px 0 84px;
}

/* live blob canvas (contact/blob.js), right of the form on white.
   Top edge (-93 from the section) aligns with the "Contact" title row,
   whose height above it is fixed by the intro's padding. */
.contact-placeholder {
  position: absolute;
  top: -93px;
  right: 24px;
  width: 560px;
  height: 344px;
  overflow: hidden;
}

.contact-placeholder canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- the form — three plain questions ---------- */

/* narrow enough to clear the blob box on its right at the 1440 design
   width (41px gutter). Everything reads at the site's 12px body size
   (cf. .blog-search) on the 8/12/24 rhythm. */
.contact-form {
  margin-left: calc(25% + 15px);
  width: 440px;
  max-width: calc(100% - 48px);
  font-size: 12px;
  line-height: normal;
}

.c-field {
  margin-bottom: 24px;
}

.c-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--ink-dim);
}

.c-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding: 0 0 6px;
  font: inherit;
  color: var(--ink);
  caret-color: #2222ff;
  border-radius: 0;
}

.c-input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.c-input::placeholder {
  color: var(--ink-dim);
}

/* purposes — chosen blue, others dim, hover black */
.c-options {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 12px;
}

.c-option {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink-dim);
  cursor: pointer;
  text-align: left;
}

.c-option:hover,
.c-option:focus {
  outline: none;
  color: var(--ink);
}

.c-option[aria-checked="true"] {
  color: #2222ff;
}

/* the "other" free-text, revealed under the options */
.c-other {
  margin-top: 12px;
}

.c-send {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.c-send:hover {
  color: #2222ff;
}

/* handed-off confirmation, shown after send */
.c-note {
  margin-top: 24px;
  color: var(--ink-dim);
}

.c-alt {
  margin-top: 24px;
  color: var(--ink-dim);
}

.c-dim {
  color: var(--ink-dim);
}

.c-note a,
.c-alt a {
  color: var(--ink);
}

.c-note a:hover,
.c-alt a:hover {
  color: var(--ink-dim);
}

/* below the 1440 design width the blob box (fixed 560, right-anchored)
   crowds the form — drop the form below the blob's reach into the
   section (344 - 93 = 251px) instead of colliding; trimmed bottom
   padding keeps the whole page inside one 800px viewport */
@media (max-width: 1380px) and (min-width: 901px) {
  .contact-body .stage {
    padding: 275px 0 48px;
  }
}

/* app.js's shared footer (written into contact/index.html with the
   legal on one line) overlays the bottom-left corner, black on white —
   the ventures .site-footer pattern — so it adds no scroll height */
.contact ~ .site-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  margin-top: 0;
  min-height: 0;
  gap: 8px;
  pointer-events: none;
}

.contact ~ .site-footer a {
  pointer-events: auto;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 148px;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 13px;
  justify-content: flex-end;
  min-height: 202px;
}

.site-footer .footer-logo {
  font-size: 16px;
}

.site-footer .legal {
  font-size: 12px;
  line-height: normal;
}

.site-footer .legal a {
  text-decoration: underline;
  text-underline-position: from-font;
}

.site-footer .legal a:hover {
  color: var(--ink-dim);
}

/* footer laid over a black band (e.g. About): white text, pinned to the
   page bottom, transparent so the band shows through */
.footer-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0;
  color: #fff;
  pointer-events: none;
}

.footer-overlay a {
  pointer-events: auto;
}

.footer-overlay .legal a:hover {
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
  .contact-intro {
    padding: 120px var(--pad) 40px;
  }

  .contact-col {
    margin-left: 0;
    width: auto;
    max-width: 480px;
  }

  .contact-body .stage {
    padding: 0 var(--pad) 64px;
  }

  /* the blob flows above the form, full width. Must stay a positioning
     context for its absolutely-filled canvas. */
  .contact-placeholder {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 393;
    margin: 0 0 48px;
  }

  .contact-form {
    margin-left: 0;
    width: 100%;
    max-width: none;
  }

  /* purposes stack vertically, full-width tappable */
  .c-options {
    flex-direction: column;
    row-gap: 4px;
  }

  .c-option {
    width: 100%;
    padding: 9px 0;
  }

  /* small screens scroll naturally — the footer flows after the form
     instead of overlaying */
  .contact ~ .site-footer {
    position: static;
    pointer-events: auto;
  }

  /* on small screens the band bottom is the road image — flow the footer
     below it on its own black background instead of overlaying */
  .site-footer.footer-overlay {
    position: static;
    background: #000;
    min-height: 0;
    margin-top: 0;
  }
}

/* ---------- Cutoffs ---------- */

@media (max-width: 1100px) {
  .band-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .blog-main {
    padding-top: 120px;
  }

  .blog-search {
    max-width: none;
  }

  .search-col {
    width: 100%;
    margin-top: 120px;
  }

  /* highlight card stacks: cover on top, text below */
  .blog-highlight {
    margin-top: 64px;
  }

  .post-highlight {
    flex-direction: column;
    gap: 24px;
  }

  .post-highlight .post-media {
    width: 100%;
  }

  .hl-body {
    max-width: none;
  }

  /* band stacks; the static footer variant (black bg) flows on after it */
  .blog-band {
    margin-top: 96px;
    padding: 64px var(--pad) 96px;
  }

  .band-grid {
    grid-template-columns: 1fr;
    gap: 72px;
  }

  .site-footer {
    margin-top: 96px;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 88px;
  }

  .hero-nav a {
    flex: none;
  }

  /* the [N] prefixes added to each label eat most of the slack
     space-between relied on at this width; a column-gap floor plus
     wrap keeps items from ever touching, wrapping to a second row
     only if they still don't fit */
  .hero-nav {
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 16px;
    row-gap: 8px;
    height: auto;
  }

  .menu-band {
    height: auto;
    min-height: 220px;
    padding: 72px var(--pad) 40px;
    align-items: flex-start;
  }

  .menu-groups {
    position: static;
    transform: none;
    width: auto;
    margin-left: auto;
  }

  .logo {
    font-size: 16px;
  }

  /* tight top-chrome at small widths: drop " back" and keep just [del.]
     so [/] Search, [del.], and [M] Menu never crowd the centered logo */
  .back-toggle {
    left: calc(var(--pad) + 72px + 10px);
  }

  .back-toggle .back-full {
    display: none;
  }

  .back-toggle .back-short {
    display: inline;
  }
}