/* Layout and components. Every colour comes from brand.css. */

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

body {
  overflow-x: clip; /* full-bleed elements measure 100vw incl. scrollbar */
  background: var(--page);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-ink);
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* height: auto is load-bearing — the shots carry width/height attributes, and
 * without it a scaled-down image keeps its full intrinsic height and squishes. */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

code,
kbd {
  font-family: var(--font-mono);
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 96px 0;
}

.rule {
  border-top: 1px solid var(--border);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

/* ── nav ─────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 12, 15, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.brand:hover {
  color: var(--ink);
}
.brand svg {
  width: 22px;
  height: 22px;
}
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: var(--text-sm);
}
.nav-links a {
  color: var(--ink-2);
}
.nav-links a:hover {
  color: var(--ink);
}

/* ── buttons ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 550;
  padding: 9px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--ink);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.btn:hover {
  background: var(--hover);
  border-color: var(--ink-3);
  color: var(--ink);
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #08101f;
}
.btn.primary:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: #08101f;
}
.btn.big {
  font-size: var(--text-base);
  padding: 12px 22px;
}

/* ── split download button ───────────────────────────────────── */

.split {
  display: inline-flex;
  /* The seam is one hairline, not two borders meeting. */
  gap: 1px;
}
.split > .btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.split-more {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-inline: 12px;
}
.split-more svg {
  width: 10px;
  height: 6px;
  transition: transform 0.15s var(--ease);
}
.split-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.dl-menu {
  /* A popover starts centred in the top layer; anchoring below tethers it to
     the trigger where the browser can do that, and this is the fallback. */
  padding: 6px;
  min-width: 232px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: left;
}
.dl-menu:not(:popover-open) {
  display: none;
}
/* The icons are defined once and referenced from both the menu and the
   download buttons; Tux alone is five kilobytes of path data. */
.sprite {
  display: none;
}

.dl-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
  /* The page sets 1.65 for prose; a two-line row wants the lines to read as
     one item, not as two paragraphs. */
  line-height: 1.3;
}
.dl-icon {
  width: 22px;
  height: 22px;
  flex: none;
  /* Full strength, as in the download cards: Tux is a detailed silhouette and
     a dimmed fill turns it to mush at this size where the flat marks survive. */
  fill: var(--ink);
}
/* All three marks are the full 24 tall, so height needs no correction and
   scaling one down shrinks the cue that matters most. Only Windows needs a
   touch: it is the sole one that also fills the box edge to edge (24 wide
   against ~19.7), four solid squares of ink where the others taper. */
.dl-icon.is-windows {
  transform: scale(0.88);
}
.dl-menu a[aria-current="true"] .dl-icon {
  fill: var(--accent);
}
.dl-menu a:hover,
.dl-menu a:focus-visible {
  background: var(--hover);
}
.dl-menu a[aria-current="true"] {
  background: var(--accent-fade);
}
.dl-os {
  display: block;
  font-size: var(--text-sm);
  font-weight: 550;
}
.dl-meta {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.dl-menu .dl-alt {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  border-radius: 0;
  font-size: var(--text-xs);
  color: var(--ink-2);
}

@supports (anchor-name: --a) {
  .split-more {
    anchor-name: --dl-anchor;
  }
  .dl-menu {
    position-anchor: --dl-anchor;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-block;
    inset: auto;
    margin: 6px 0 0;
  }
}

/* ── hero ────────────────────────────────────────────────────── */

.hero {
  padding: 52px 0 0;
  text-align: center;
  overflow: clip;
}
.hero h1 {
  font-size: clamp(60px, 7vw, 104px);
  letter-spacing: -0.045em;
  line-height: 1;
  max-width: 13ch;
  margin: 0 auto 22px;
}
.hero h1 code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  letter-spacing: -0.01em;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
/* The suffix slot is as wide as "four", so the mark stays put while the
   ending swaps; the intro states are wider and recenter on their hits. */
.hero h1 .sfx {
  display: inline-block;
  text-align: left;
  min-width: 2.15em;
}
.hero h1 .sfx.blink {
  animation: blink-hard 0.14s steps(2, start) infinite;
}
@keyframes blink-hard {
  to {
    visibility: hidden;
  }
}
.hero .lede {
  font-size: 1.25rem;
  max-width: 44ch;
  margin: 0 auto 26px;
}

.install {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 10px 12px 10px 16px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  text-align: left;
}
.install .sigil {
  color: var(--ink-3);
  user-select: none;
}
.copy {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: 3px 7px;
  border-radius: var(--r-sm);
}
.copy:hover {
  background: var(--hover);
  color: var(--ink);
}
.copy[data-copied="true"] {
  color: var(--green);
}

.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 22px;
}
.fine {
  font-size: var(--text-sm);
  color: var(--ink-3);
  margin-top: 16px;
}
/* The note under the download cards needs air, and the brew command must
   not wrap mid-word on wide screens. */
.downloads + .fine {
  margin-top: 32px;
  max-width: 62ch;
  margin-inline: auto;
}
@media (min-width: 720px) {
  .fine code {
    white-space: nowrap;
  }
}

/* The window leans back into the page under an accent halo, breaking out
   of the container so it fills nearly the whole viewport. */
.stage {
  position: relative;
}
.stage::before {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: -4%;
  height: 110%;
  background: radial-gradient(
    ellipse 60% 45% at 50% 22%,
    rgba(91, 157, 255, 0.5),
    transparent 70%
  );
  filter: blur(18px);
}
.shot {
  position: relative;
  margin-top: 44px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 0 140px 8px rgba(91, 157, 255, 0.3), var(--shadow);
  width: min(1560px, 96vw);
  margin-inline: calc((100% - min(1560px, 96vw)) / 2);
  transform: perspective(1600px) rotateX(7deg);
  transform-origin: 50% 0;
}

/* ── feature rows ────────────────────────────────────────────── */

/* Full-window captures read as thumbnails at row size; the zoom frame
   crops into the interesting region instead — filling the half-column
   and offset so the content, not the window chrome, is what you see. */
.frame.zoom {
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
}
.frame.zoom img {
  width: 172%;
  max-width: none;
  transform: translate(-24%, -6%);
}
.frame.zoom.focus-left img {
  transform: translate(-4%, -6%);
}
/* ── duo: unified vs split, half and half ────────────────────── */

.row.duo-row {
  display: block;
}
.duo-copy {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.duo {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 44px;
  display: flex;
  border-block: 1px solid var(--border-strong);
}
.duo-half {
  position: relative;
  width: 50%;
  height: min(560px, 42vw);
  overflow: hidden;
}
.duo-half + .duo-half {
  border-left: 1px solid var(--border-strong);
}
.duo-half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transition: filter 0.35s var(--ease);
}
/* Hover one layout and the other steps back. */
.duo:has(.duo-half:first-child:hover) .duo-half:last-child img,
.duo:has(.duo-half:last-child:hover) .duo-half:first-child img {
  filter: blur(3px) brightness(0.75);
}
.duo-label {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-2);
  background: rgba(11, 12, 15, 0.8);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px 12px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.duo-half:hover .duo-label {
  color: var(--ink);
  border-color: var(--accent);
}

/* Above the stacking breakpoint, wide frames run past the container to the
   viewport edge, so each screenshot fills its half of the viewport. The
   outer corners lose their radius because they touch the edge. */
@media (min-width: 901px) {
  .row .frame:not(.tall) {
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    margin-right: calc((min(100vw, 1120px) - 100vw) / 2 - 24px);
  }
  .row.flip .frame:not(.tall) {
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    margin-right: 0;
    margin-left: calc((min(100vw, 1120px) - 100vw) / 2 - 24px);
  }
}

.row {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.row + .row {
  margin-top: 104px;
}
.row h2 {
  font-size: var(--text-xl);
  margin-bottom: 14px;
}
.row p + p {
  margin-top: 12px;
}
.row .frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.row.flip .frame {
  order: -1;
}
/* ── bento: the sidebar section ──────────────────────────────── */

/* A tall screenshot beside two stacked cells, so the crop renders at
   real size instead of shrinking into a half-column thumbnail. */
.row.bento {
  grid-template-columns: 0.8fr 1.2fr;
  grid-template-rows: auto 1fr;
  gap: 20px;
  align-items: stretch;
}
.bento .cell {
  border: 1px solid var(--border-strong);
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: 30px;
}
/* The screenshot is already a panel of its own — no card around it. */
.bento .shot-cell {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bento .states-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* The copy needs no card — only the states row keeps one. */
.bento .copy-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 8px;
}
.bento .shot-cell img {
  max-height: 660px;
  width: auto;
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
/* The worktree states the screenshot can't show, as sidebar-style rows. */
.wt-rows {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--list);
  overflow: hidden;
}
.wt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
}
.wt-row + .wt-row {
  border-top: 1px solid var(--border);
}
.wt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.wt-name {
  display: block;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 550;
}
.wt-path {
  display: block;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 2px;
}
.wt-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  border: 1px solid;
  border-radius: 999px;
  padding: 2px 9px;
}
.wt-badge.locked {
  color: var(--orange);
  border-color: rgba(224, 164, 88, 0.4);
}
.wt-badge.detached {
  color: var(--purple);
  border-color: rgba(179, 146, 240, 0.4);
}
.wt-badge.missing {
  color: var(--red);
  border-color: rgba(229, 101, 94, 0.4);
}
.cell-note {
  margin-top: 16px;
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.note {
  margin-top: 16px;
  font-size: var(--text-sm);
  color: var(--ink-3);
  border-left: 2px solid var(--border-strong);
  padding-left: 12px;
}

/* ── quote band ──────────────────────────────────────────────── */

.band {
  background: var(--chrome);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.band h2 {
  font-size: var(--text-2xl);
  max-width: 20ch;
  margin: 0 auto 16px;
}
.band p {
  max-width: 62ch;
  margin: 0 auto;
  font-size: var(--text-md);
}
.band .hl {
  color: var(--accent);
}
/* The live-follow claim gets subhero scale — a pattern break between
   the feature rows and the card grid. */
.band.subhero {
  padding: 130px 0;
}
.band.subhero h2 {
  font-size: clamp(44px, 4.8vw, 72px);
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 15ch;
  margin-bottom: 24px;
}
.band.subhero p {
  font-size: var(--text-lg);
  max-width: 46ch;
}
@media (max-width: 900px) {
  .band.subhero {
    padding: 84px 0;
  }
  .band.subhero p {
    font-size: var(--text-md);
  }
}

/* ── feature grid ────────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 48px;
}
.card {
  background: var(--page);
  padding: 26px 24px 28px;
}
.card .n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}
.card h3 {
  font-size: var(--text-base);
  margin-bottom: 8px;
}
.card p {
  font-size: var(--text-sm);
}

/* ── download ────────────────────────────────────────────────── */

.downloads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 40px auto 0;
  max-width: 840px;
}
.dl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 18px 22px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--panel);
  color: var(--ink);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.dl:hover {
  background: var(--hover);
  border-color: var(--accent);
  color: var(--ink);
}
.dl svg {
  width: 34px;
  height: 34px;
  fill: var(--ink);
}
.dl .os {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.dl .meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
}
/* ── releases ────────────────────────────────────────────────── */

.page-head {
  padding: 72px 0 40px;
}
.page-head h1 {
  font-size: var(--text-2xl);
  margin-bottom: 12px;
}
.page-head p {
  max-width: 62ch;
}

.release {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--border);
}
.release .v {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--ink);
}
.release .when {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
  margin-top: 4px;
}
.release h3 {
  font-size: var(--text-base);
  margin: 22px 0 10px;
}
.release h3:first-child {
  margin-top: 0;
}
.release ul {
  list-style: none;
  font-size: var(--text-sm);
}
.release li {
  padding-left: 18px;
  position: relative;
  margin-bottom: 6px;
}
.release li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-3);
}
.release li code {
  color: var(--ink);
  font-size: 0.92em;
}

/* ── identity ────────────────────────────────────────────────── */

.identity-band {
  padding: 62px 0;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(126, 201, 111, 0.045), rgba(91, 157, 255, 0.06));
}
.identity-inner {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 54px;
  max-width: 850px;
}
.identity-mark,
.brand-app-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 23%;
  background: #12151b;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.identity-mark img { width: 66%; }
.identity-inner h2 { font-size: var(--text-xl); margin-bottom: 10px; }
.identity-inner p:not(.eyebrow) { max-width: 54ch; }
.identity-link { display: inline-block; margin-top: 15px; font-size: var(--text-sm); }

.brand-hero { padding: 82px 0 70px; border-bottom: 1px solid var(--border); }
.brand-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: center;
  gap: 90px;
}
.brand-hero h1 { font-size: clamp(4rem, 9vw, 7.5rem); letter-spacing: -0.07em; line-height: 0.9; }
.brand-lede { max-width: 47ch; margin-top: 28px; font-size: 1.18rem; }
.brand-app-tile { width: 100%; }
.brand-app-tile img { width: 68%; }
.brand-section { padding: 82px 0; }
.brand-rule { border-top: 1px solid var(--border); }
.brand-section > .wrap > h2 { max-width: 18ch; font-size: var(--text-2xl); }
.brand-copy { max-width: 58ch; margin-top: 14px; }

.brand-lockups { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.brand-lockup {
  min-height: 180px;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.brand-lockup.dark { background: var(--chrome); }
.brand-lockup.light { background: #f2f4f7; color: #12151b; }
.brand-lockup strong { font-family: var(--font-mono); font-size: clamp(1.7rem, 4vw, 2.8rem); letter-spacing: -0.07em; }
.brand-lockup strong span { color: var(--accent); font-weight: 500; }

.brand-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.brand-principles article { padding: 24px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); }
.brand-principles b { color: var(--green); font: 600 11px/1 var(--font-mono); }
.brand-principles h3 { margin: 28px 0 8px; }
.brand-principles p { font-size: var(--text-sm); }

.brand-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 34px; }
.brand-swatch { min-height: 210px; display: flex; flex-direction: column; justify-content: end; padding: 18px; border-radius: var(--r-lg); }
.brand-swatch span { font: 11px/1 var(--font-mono); opacity: 0.72; }
.brand-swatch strong { margin-top: 7px; font-size: var(--text-sm); }
.brand-swatch.blue { color: #08101f; background: var(--accent); }
.brand-swatch.green { color: #0d1a0a; background: var(--green); }
.brand-swatch.chrome { color: var(--ink); background: var(--chrome); border: 1px solid var(--border); }
.brand-swatch.ink { color: #12151b; background: var(--ink); }

.brand-reduction { display: flex; align-items: end; gap: clamp(22px, 6vw, 74px); margin-top: 36px; }
.brand-size { display: grid; justify-items: center; gap: 12px; font: 11px/1 var(--font-mono); color: var(--ink-3); }
.brand-size img { width: 100%; aspect-ratio: 1; }
.brand-size.s128 { width: 128px; }.brand-size.s64 { width: 64px; }.brand-size.s32 { width: 32px; }
.brand-size.s24 { width: 24px; }.brand-size.s16 { width: 16px; }
.brand-donts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.brand-donts > div { display: flex; align-items: center; gap: 18px; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-lg); }
.brand-donts p { font-size: var(--text-xs); }
.brand-mini { width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--chrome); }
.brand-mini img { width: 68%; }
.brand-mini.wrong { box-shadow: inset 0 0 0 1px var(--red); }
.brand-mini.stretched img { transform: scaleX(1.45); }
.brand-mini.recolored img { filter: hue-rotate(105deg) saturate(1.7); }

/* ── footer ──────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 44px;
  font-size: var(--text-sm);
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.foot-grid h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: 14px;
  font-weight: 600;
}
/* Only the link column stacks; the brand mark and the blurb's links stay inline. */
.foot-links a {
  display: block;
  color: var(--ink-2);
  margin-bottom: 9px;
}
.foot-links a:hover {
  color: var(--ink);
}
.foot-blurb {
  max-width: 44ch;
  margin-top: 14px;
  color: var(--ink-3);
}
.foot-legal {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.foot-legal a {
  color: var(--ink-3);
  text-decoration: underline;
}

/* ── narrow ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
  section {
    padding: 64px 0;
  }
  .row,
  .grid,
  .downloads,
  .foot-grid,
  .release,
  .brand-hero-grid,
  .brand-lockups,
  .brand-principles,
  .brand-donts {
    grid-template-columns: 1fr;
  }
  .brand-app-tile { width: min(380px, 80vw); margin-inline: auto; }
  .brand-swatches { grid-template-columns: repeat(2, 1fr); }
  .identity-inner { grid-template-columns: 120px minmax(0, 1fr); gap: 28px; }
  .row {
    gap: 28px;
  }
  .row + .row {
    margin-top: 64px;
  }
  .row.flip .frame {
    order: 0;
  }
  .row.bento {
    grid-template-columns: 1fr;
  }
  .bento .shot-cell {
    grid-row: auto;
  }
  .bento .shot-cell img {
    max-height: 520px;
  }
  .duo {
    flex-direction: column;
  }
  .duo-half {
    width: 100%;
    height: 300px;
  }
  .duo-half + .duo-half {
    border-left: 0;
    border-top: 1px solid var(--border-strong);
  }
  .release {
    gap: 16px;
  }
  .nav-links a.hide-sm {
    display: none;
  }
  .hero {
    padding-top: 44px;
  }
  .hero h1 {
    font-size: clamp(38px, 11.5vw, 60px);
  }
  .hero .lede {
    font-size: var(--text-md);
  }
  /* The install command is 35 monospace characters; it has to give somewhere. */
  .install {
    max-width: 100%;
    flex-wrap: wrap;
    font-size: var(--text-xs);
    padding-left: 12px;
  }
  .install code {
    min-width: 0;
  }
  .install code,
  .fine code {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 560px) {
  .identity-inner { grid-template-columns: 1fr; }
  .identity-mark { width: 120px; }
  .brand-swatches { grid-template-columns: 1fr; }
  .brand-reduction { flex-wrap: wrap; }
}