:root {
  --paper: #f6f5f1;
  --surface: #fffefa;
  --surface-strong: #ffffff;
  --ink: #1a1a1a;
  --ink-soft: #3a3a38;
  --muted: #6a655d;
  --line: #d9d4ca;
  --line-strong: #b9b1a4;
  --accent: #c68b07;
  --accent-strong: #8a6100;
  --accent-dark: #8a6100;
  --accent-warm: #b25f3d;
  --accent-blue: #3f5c7a;
  --category-accent: #1a1a1a;
  --category-accent-dark: #1a1a1a;
  --category-bg: rgba(26, 26, 26, 0.06);
  --subcategory-accent: #3f5c7a;
  --subcategory-accent-dark: #28415c;
  --subcategory-bg: rgba(63, 92, 122, 0.1);
  --review-flag: #b25f3d;
  --warning: #8b4e15;
  --warning-bg: #fff1dc;
  --shadow: 0 14px 40px rgba(26, 26, 26, 0.07);
  --radius: 8px;
  --max: 1180px;
  --focus: 0 0 0 3px rgba(198, 139, 7, 0.4);
  --filter-sticky-top: 0px;
  --header-h: 4rem;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-display: 800;
  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3rem);
  --space-2xs: clamp(0.5rem, 0.47rem + 0.15vw, 0.6rem);
  --space-xs: clamp(0.75rem, 0.71rem + 0.2vw, 0.9rem);
  --space-s: clamp(1rem, 0.95rem + 0.25vw, 1.2rem);
  --space-m: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --space-l: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --space-xl: clamp(3.4rem, 2.6rem + 4vw, 6rem);
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --step-3: clamp(2.1rem, 1.7rem + 2vw, 3.2rem);
  --step-4: clamp(2.8rem, 2.1rem + 3.4vw, 4.6rem);
  --font-base: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--font-base);
  color: var(--ink);
  background: var(--paper);
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter.var.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterTight.var.woff2") format("woff2-variations");
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(246, 245, 241, 0) 420px),
    var(--paper);
  color: var(--ink);
  line-height: 1.5;
}

body:has(dialog[open]) {
  overflow: hidden;
}

body[data-page="projects"] {
  overflow-anchor: none;
}

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

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: var(--focus);
}

/* On dark bands an ink outline is invisible; switch to a light ring there. */
.hero-section :focus-visible,
.contact-cta :focus-visible {
  outline-color: var(--surface);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 20;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--surface);
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: rgba(246, 245, 241, 0.92);
  border-bottom: 1px solid rgba(217, 212, 202, 0.8);
  backdrop-filter: blur(14px);
  transform: translateY(0);
  transition: transform 180ms ease;
  will-change: transform;
}

.site-header.is-header-hidden {
  transform: translateY(-105%);
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.9rem clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 13rem;
  text-decoration: none;
}

.brand-logo-wrap {
  width: 2.05rem;
  height: 2.05rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-copy {
  display: grid;
  gap: 0.1rem;
}

.brand-mark {
  font-weight: var(--w-bold);
  line-height: 1;
}

.brand-name {
  color: var(--muted);
  font-size: 0.86rem;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.2rem;
  min-width: 0;
}

.site-nav ul {
  display: contents;
  margin: 0;
  padding: 0;
}

.site-nav li {
  list-style: none;
}

.site-nav a {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.62rem;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  background: rgba(26, 26, 26, 0.06);
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 0.35rem 0.7rem;
  font-weight: var(--w-semibold);
}

.menu-toggle span[aria-hidden="true"] {
  position: relative;
  width: 1rem;
  height: 2px;
  background: currentColor;
}

.menu-toggle span[aria-hidden="true"]::before,
.menu-toggle span[aria-hidden="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1rem;
  height: 2px;
  background: currentColor;
}

.menu-toggle span[aria-hidden="true"]::before {
  top: -5px;
}

.menu-toggle span[aria-hidden="true"]::after {
  top: 5px;
}

.section-inner {
  width: min(100% - 2rem, var(--max));
  margin: 0 auto;
}

.hero-section {
  position: relative;
  min-height: clamp(440px, 60vh, 580px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #1f2623;
  color: #fffefa;
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(25, 28, 26, 0.88), rgba(25, 28, 26, 0.62) 48%, rgba(25, 28, 26, 0.2)),
    linear-gradient(0deg, rgba(25, 28, 26, 0.82), rgba(25, 28, 26, 0.08) 60%);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(0.95);
}

.hero-content {
  position: relative;
  padding: var(--space-xl) 0 var(--space-l);
}

.hero-section h1 {
  max-width: 18ch;
  letter-spacing: -0.015em;
}

.hero-heading span {
  display: block;
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--accent-strong);
  font-size: var(--step--1);
  font-weight: var(--w-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-section .eyebrow,
.hero-section .hero-copy {
  color: rgba(255, 254, 250, 0.82);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.04;
  letter-spacing: 0;
  color: inherit;
}

h1 {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--w-display);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-bold);
}

h3 {
  font-size: var(--step-1);
  font-weight: var(--w-semibold);
}

p {
  margin: 0;
}

.hero-kicker {
  max-width: 42ch;
  margin-top: var(--space-s);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.25;
}

.hero-copy {
  max-width: 56ch;
  margin-top: var(--space-2xs);
  color: var(--muted);
  font-size: var(--step-0);
}

.hero-actions,
.card-actions,
.badge-row,
.chip-row,
.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.hero-actions {
  margin-top: var(--space-m);
}

.button,
.filter-button,
.chip-button,
.text-action {
  min-height: 2.55rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-weight: var(--w-semibold);
}

.button {
  padding: 0.72rem 1rem;
}

.button-primary {
  background: var(--accent);
  color: var(--ink);
}

.button-primary:hover {
  background: var(--accent-strong);
  color: var(--surface);
}

.button-secondary {
  border-color: rgba(255, 254, 250, 0.35);
  color: #fffefa;
  background: rgba(255, 254, 250, 0.08);
}

.button-secondary:hover {
  background: rgba(255, 254, 250, 0.16);
}

.button-feedback {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.button-feedback:hover {
  border-color: var(--ink);
  background: var(--paper);
  color: var(--ink);
}

.text-action {
  border: 0;
  background: transparent;
  color: var(--accent-dark);
  padding: 0;
}

.text-action:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.content-band {
  padding: clamp(3.4rem, 7vw, 6rem) 0;
  background: var(--paper);
}

/* Figure/ground rhythm: every other content band lifts to --surface.
   These specific semantic classes are already emitted by the renderer
   and are not new class names. Dark bands (.hero-section, .contact-cta)
   carry their own explicit background rules and sit outside .content-band. */
.support-work-band,
.capability-band,
.content-band.quote-band {
  background: var(--surface);
}

/* Retain a hairline between adjacent bands whose surfaces are too close
   to read as a step change at certain viewport sizes. */
.content-band + .content-band {
  border-top: 1px solid var(--line);
}

/* Homepage editorial spine: the lead band breathes and carries the largest
   heading; later bands tighten, so the page reads as a sequence of movements
   rather than four equal stacked blocks. Scoped to renderer band classes. */
.selected-work-band {
  padding: var(--space-xl) 0 var(--space-l);
}

.selected-work-band .section-heading {
  margin-bottom: var(--space-l);
}

.selected-work-band .section-heading h2 {
  font-size: var(--step-3);
}

.support-work-band,
.capability-band,
.about-band {
  padding: var(--space-l) 0;
}

.section-heading {
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: end;
}

.section-heading p:not(.eyebrow) {
  max-width: 760px;
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 1.05rem;
}

.section-cta {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.feature-grid,
.card-grid {
  display: grid;
  gap: var(--space-s);
}

.feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Archive + compact grids wrap intrinsically (no fixed counts / 980-680 breakpoints):
   columns appear/disappear one at a time at the natural wrap point, so a card being viewed
   keeps its size instead of snapping. Two-class selectors so these win at every width (beating
   the single-class .card-grid / .compact-grid rules inside the media queries); the curated
   homepage feature/supporting rows keep their fixed counts. auto-fill (not auto-fit) keeps empty
   tracks, so a partial row's cards stay a consistent width instead of stretching to fill. */
.card-grid.archive-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.card-grid.compact-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* The capabilities page packs its dense proof grid tighter (≈4-up on the band); the related
   grid on single projects (wider container, ≤3 hand-picked cards) keeps the larger 280px track
   above so 3 cards read like the prior 4-column footprint instead of small + sparse. */
.capability-detail .card-grid.compact-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

.feedback-list {
  display: grid;
  gap: var(--space-xs);
}

.feedback-card {
  display: grid;
  gap: var(--space-2xs);
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
}

.feedback-quote {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.55;
}

.feedback-quote p {
  margin: 0;
}

.feedback-quote p + p {
  margin-top: 0.75rem;
}

.feedback-attribution,
.feedback-related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.feedback-attribution strong {
  color: var(--ink);
}

.feedback-separator {
  color: var(--line-strong);
}

.feedback-project-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.feedback-project-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  padding: 0.28rem 0.62rem;
}

.feedback-project-chip:hover,
.feedback-project-chip:focus-visible {
  border-color: var(--ink);
  background: var(--surface-strong);
}

.project-card {
  display: grid;
  min-width: 0;
  min-height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.02);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

/* Equal-height rows stretch stacked cards taller than their content. Make the image row size to
   the picture (auto) and the body row absorb the slack (1fr), so the extra height grows the body
   (where "View project" is pinned) instead of opening a gap under the image. Keeps the
   image->category spacing constant across a row and on resize. Flagship is side-by-side, excluded. */
.project-card-standard,
.project-card-compact {
  grid-template-rows: auto 1fr;
}

.project-card:hover,
.project-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--ink-soft);
  box-shadow: var(--shadow);
}

/* The side-by-side flagship treatment only applies inside the wide 2-col feature
   grid (homepage). Anywhere else a flagship card degrades to the base single-column
   stacked layout, so it can never clip inside a narrow grid cell. */
.feature-grid .project-card-flagship {
  grid-template-columns: minmax(40%, 1fr) minmax(0, 1fr);
}

.project-card-private {
  border-color: var(--warning);
  background: linear-gradient(180deg, var(--surface), var(--warning-bg));
}

.project-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--paper);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.feature-grid .project-card-flagship .project-image {
  aspect-ratio: auto;
  min-height: 100%;
  border-bottom: 0;
  border-right: 1px solid var(--line);
}

.project-image img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

.project-preview-video {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
}

/* Touch / no-hover devices never run the preview video, so show the project's
   hero (featured) image instead of the preview poster. On hover + fine-pointer
   devices this layer is hidden, leaving the desktop poster -> hover-video
   behavior untouched. */
.project-image-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  .project-image-hero {
    display: none;
  }
}

.project-preview-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--paper);
  transition: opacity 180ms ease;
}

.project-card.is-preview-active .project-preview-video {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .project-preview-video {
    transition: none;
  }
}

/* Shared vertical-zone body: a flex column so the top group (meta + title) packs from the top, the
   summary clamps in the middle, and the bottom group (chips + CTA) anchors to the bottom. */
.project-card-body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: var(--space-2xs);
  padding: var(--space-s);
}

.feature-grid .project-card-flagship .project-card-body {
  padding: var(--space-m);
}

.project-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--w-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-card-flag {
  flex: 0 0 auto;
  color: var(--accent-strong);
  white-space: nowrap;
}

/* Unified meta zone across standard + flagship (compact already does this): stack the Featured flag
   above a full-width category and reserve a 2-line slot, so the category never wraps and the title
   starts at a consistent Y. The flag occupies the reserved line above (blank on non-featured). */
.project-card-standard .project-card-meta,
.project-card-flagship .project-card-meta {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.2rem;
  line-height: 1.4;
  min-height: calc(2 * 1.4em + 0.2rem);
}

.project-card-standard .project-card-flag,
.project-card-flagship .project-card-flag {
  order: -1;
}

/* Cards rendered with the flag suppressed (homepage Supporting band) never use the reserved
   line, so collapse it and let the category sit directly above the title. */
.project-card-no-flag .project-card-meta {
  min-height: 0;
}

.project-card h3 {
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Title reserve + clamp per variant: titles occupy a fixed line-area so they start consistently and
   never push the rest of the card around; over-long titles truncate with an ellipsis. */
.project-card-standard h3 {
  -webkit-line-clamp: 2;
  min-height: calc(1.2em * 2);
}

.project-card-flagship h3 {
  -webkit-line-clamp: 4;
  min-height: calc(1.2em * 3);
}

.project-card p {
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feature-grid .project-card-flagship p {
  -webkit-line-clamp: 5;
}

.card-affordance {
  align-self: flex-start;
  margin-top: 0;
  color: var(--accent-strong);
  font-size: var(--step--1);
  font-weight: var(--w-semibold);
}

/* Bottom group: anchor chips + CTA to the bottom of the body so the only slack sits above the
   summary, never before "View project". The chip-row carries the anchor where chips show; the CTA
   carries it where chips are hidden (capabilities page) or absent (no-capability project). */
.chip-row {
  margin-top: auto;
}

.capability-detail .card-affordance,
.project-card:not(:has(.chip-row)) .card-affordance {
  margin-top: auto;
}

.project-card:hover .card-affordance,
.project-card:focus-visible .card-affordance {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.project-card-compact h3 {
  font-size: 1.05rem;
  -webkit-line-clamp: 3;
  min-height: calc(1.2em * 3);
}

.project-card-compact p {
  font-size: 0.92rem;
  -webkit-line-clamp: 4;
  min-height: calc(1.5em * 3);
}

/* Standard summary reserves its 3 clamped lines so card height stays steady across widths
   (the title reserve lives in the shared `.project-card-standard h3` rule above). */
.project-card-standard p {
  min-height: calc(1.5em * 3);
}

/* Compact cards live in narrow 4-col grids. Stack the meta so the nowrap
   "Featured project" flag sits on its own line above the category instead of
   sharing a flex row (which blew out the grid track and clipped the content).
   Fixed rem padding keeps the image->text gap consistent across viewport widths. */
.project-card-compact .project-card-meta {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.2rem;
  min-height: calc(2 * 1.5em + 0.2rem);
  font-size: 0.75rem;
  line-height: 1.5;
}

.project-card-compact .project-card-flag {
  order: -1;
  letter-spacing: 0.02em;
}

.project-card-compact .project-card-body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: 0.3rem;
  padding: 0.7rem;
}

/* Archive card body: flex column with fixed rem spacing so the image->text gap doesn't drift
   on resize and "View project" can pin to the bottom. Scoped so the homepage base body is intact. */
.archive-grid .project-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem;
  min-height: 100%;
}

.badge,
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.16rem 0.55rem;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: var(--w-medium);
}

.badge-format {
  color: var(--accent-strong);
  border-color: rgba(198, 139, 7, 0.3);
  background: rgba(198, 139, 7, 0.1);
}

.badge-warning {
  color: var(--warning);
  border-color: rgba(139, 78, 21, 0.28);
  background: var(--warning-bg);
}

.badge-review {
  color: var(--accent-blue);
  border-color: rgba(56, 95, 138, 0.28);
  background: rgba(56, 95, 138, 0.08);
}

.chip {
  color: var(--ink-soft);
}

.chip-large {
  min-height: 2rem;
  font-size: 0.9rem;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Odd counts in the 2-col grid: let the final capability span the full row instead of
   leaving a half-width orphan; its internal copy/proof split mirrors .capability-detail. */
.capability-grid > .capability-preview:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.capability-preview {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 1.4rem) 0;
  border-top: 1px solid var(--line);
}

.capability-copy p:not(.eyebrow) {
  margin-top: 0.75rem;
  color: var(--muted);
}

.proof-list {
  display: grid;
  gap: 0.55rem;
}

.proof-link {
  display: grid;
  gap: 0.22rem;
  width: 100%;
  padding: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  text-align: left;
}

.proof-link:hover {
  border-color: var(--line-strong);
}

.proof-link span {
  font-weight: var(--w-semibold);
}

.proof-link small {
  color: var(--muted);
}

.about-snapshot,
.about-page-grid,
.detail-hero-grid,
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

.about-snapshot p:not(.eyebrow) {
  max-width: 740px;
  margin: 1rem 0;
  color: var(--muted);
  font-size: 1.12rem;
}

.about-snapshot figure,
.about-page-grid figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.about-snapshot img,
.about-page-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.contact-cta {
  padding: var(--space-xl) 0;
  background: var(--ink);
  color: var(--surface);
}

.contact-cta h2 {
  max-width: 900px;
}

.contact-cta p:not(.eyebrow) {
  max-width: 720px;
  margin: 1rem 0 1.5rem;
  color: rgba(255, 254, 250, 0.74);
}

.page-hero {
  padding: clamp(5rem, 11vw, 9rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.page-hero h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 8vw, 6.3rem);
}

.page-hero .hero-kicker {
  max-width: 860px;
  color: var(--muted);
}

/* The archive's first content is the filter panel (no section heading), so pull
   it closer to the hero divider than the default page-hero/content-band seam. */
.archive-hero {
  padding-bottom: var(--space-m);
}

.archive-hero + .content-band {
  padding-top: 0.5rem;
}

.archive-controls {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-xs) 0 var(--space-s);
  background: rgba(246, 245, 241, 0.95);
  backdrop-filter: blur(12px);
  overflow-anchor: none;
}

.archive-sticky-controls {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--filter-sticky-top);
  z-index: 7;
  padding: 0.55rem 0;
  background: rgba(246, 245, 241, 0.96);
  border-bottom: 1px solid rgba(217, 212, 202, 0.8);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.4rem);
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(12px);
  overflow-anchor: none;
}

.archive-sticky-controls.is-sticky-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.archive-sticky-controls .compact-filter-bar,
.archive-sticky-controls .filter-panel {
  width: min(100% - 2rem, var(--max));
  margin: 0 auto;
}

.compact-filter-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
}

.active-filter-chips,
.compact-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

.active-filter-chips {
  min-width: 0;
}

.compact-filter-actions {
  flex: 0 0 auto;
}

.filter-panel {
  display: grid;
  gap: var(--space-s);
  max-height: min(70vh, 620px);
  overflow: auto;
  padding: var(--space-s);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.archive-sticky-controls .filter-panel {
  display: none;
  margin-top: 0.55rem;
}

.archive-sticky-controls.is-filter-panel-open .filter-panel {
  display: grid;
}

.filter-panel-toggle,
.filter-clear {
  min-height: 2.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 0.35rem 0.75rem;
  font-weight: var(--w-semibold);
}

.filter-panel-toggle {
  display: inline-flex;
  align-items: center;
}

.archive-sticky-controls.is-filter-panel-open .filter-panel-toggle {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}

.filter-clear {
  color: var(--accent-dark);
}

.filter-group {
  display: grid;
  gap: var(--space-2xs);
}

.filter-group > p {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: var(--w-bold);
  text-transform: uppercase;
}

.filter-group-category > p {
  color: var(--category-accent-dark);
}

.filter-hint {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: var(--w-regular);
  text-transform: none;
}

.filter-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.empty-results {
  display: grid;
  gap: 0.55rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.empty-results h2 {
  font-size: 1.35rem;
}

.empty-results p {
  color: var(--muted);
}

.filter-button,
.chip-button {
  min-height: 2.35rem;
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  padding: 0.35rem 0.75rem;
  font-weight: var(--w-semibold);
}

/* Hover: step border to --line-strong; readable without colour alone */
.filter-button:hover,
.chip-button:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

/* Selected base: weight bump + ink colour; no box-shadow noise.
   Colour-semantic variants below layer their surface + border on top. */
.filter-button[aria-pressed="true"] {
  font-weight: var(--w-bold);
  color: var(--ink);
}

/* Selected CATEGORY = ink primacy */
.filter-button[data-filter-group="category"][aria-pressed="true"] {
  background: var(--category-bg);
  border-color: var(--category-accent);
  color: var(--category-accent-dark);
}

.filter-button-muted {
  border-style: dashed;
}

/* Active-filter chips: weight + colour only; no border-width jump */
.active-filter-chip {
  font-weight: var(--w-bold);
}

.active-filter-chip-category {
  border-color: var(--category-accent);
  background: var(--category-bg);
  color: var(--category-accent-dark);
}

/* --- B1: capability filter + archive search reuse the secondary "blueprint" accent --- */
.filter-group-capability > p {
  color: var(--subcategory-accent-dark);
}

.filter-button[data-filter-group="capability"][aria-pressed="true"] {
  background: var(--subcategory-bg);
  border-color: var(--subcategory-accent);
  color: var(--subcategory-accent-dark);
}

.active-filter-chip-capability {
  border-color: var(--subcategory-accent);
  background: var(--subcategory-bg);
  color: var(--subcategory-accent-dark);
}

.chip-capability {
  border-color: var(--subcategory-accent);
  color: var(--subcategory-accent-dark);
}

.project-search-input {
  width: 100%;
  max-width: 30rem;
  min-height: 2.55rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.project-search-input::placeholder {
  color: var(--muted);
}

.project-search-input:hover {
  border-color: var(--line-strong);
}

.active-filter-chip[data-remove-filter] {
  gap: 0.4rem;
  cursor: pointer;
}

.active-filter-chip[data-remove-filter] span {
  font-weight: var(--w-bold);
  opacity: 0.65;
}

.active-filter-chip[data-remove-filter]:hover,
.active-filter-chip[data-remove-filter]:focus-visible,
.filter-clear-chip:hover,
.filter-clear-chip:focus-visible {
  border-color: var(--ink-soft);
}

.filter-clear-chip {
  cursor: pointer;
  color: var(--accent-strong);
  border-style: dashed;
  font-weight: var(--w-semibold);
}

.active-filter-summary {
  display: grid;
  gap: var(--space-2xs);
}

.filter-summary-label {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: var(--w-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.filter-staged-hint {
  margin-bottom: var(--space-2xs);
  padding-left: var(--space-2xs);
  border-left: 2px solid var(--accent);
}

.filter-clear:disabled,
.empty-results button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.archive-count {
  color: var(--muted);
  font-size: 0.92rem;
}

[hidden] {
  display: none !important;
}

.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-xs);
}

.snapshot-item {
  min-height: 5.5rem;
  display: grid;
  align-content: start;
  gap: 0.32rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.snapshot-item span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: var(--w-semibold);
  text-transform: uppercase;
}

.snapshot-item strong {
  overflow-wrap: anywhere;
}

.detail-image {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.detail-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.detail-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 3rem;
}

.detail-section {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.detail-section h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.35rem);
}

.detail-section p,
.detail-section li {
  color: var(--muted);
}

.detail-section ul,
.detail-section ol,
.prose ul,
.prose ol {
  margin: 0;
  padding-left: 1.2rem;
}

.draft-gap,
.missing-section p {
  padding: 0.85rem;
  border-left: 3px solid var(--accent-warm);
  background: #fff7ef;
  color: var(--warning) !important;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-s);
}

.gallery-grid figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-grid figcaption {
  padding: 0.7rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.project-detail-content {
  display: grid;
  gap: var(--space-m);
}

.project-gallery {
  --gallery-gap: var(--space-s);
  --gallery-visible-count: 3;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
  margin-top: var(--space-s);
}

.project-gallery-detail {
  margin-top: var(--space-m);
}

.project-gallery-modal {
  --gallery-gap: 0.65rem;
  --gallery-visible-count: 2;
  margin-top: 0;
}

.project-gallery-viewport {
  min-width: 0;
  overflow: hidden;
}

.project-gallery-track {
  display: grid;
  gap: var(--gallery-gap);
  min-width: 0;
}

.project-gallery-count-1 .project-gallery-track {
  grid-template-columns: minmax(0, min(100%, 36rem));
  justify-content: center;
}

.project-gallery-count-2 .project-gallery-track {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 54rem;
  margin: 0 auto;
}

.project-gallery-count-3 .project-gallery-track {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-gallery-modal.project-gallery-count-3 .project-gallery-track {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-gallery.is-gallery-carousel .project-gallery-track {
  display: flex;
  transition: transform 180ms ease;
  will-change: transform;
}

.project-gallery.is-gallery-carousel .project-gallery-item {
  flex: 0 0 calc((100% - var(--gallery-gap) - var(--gallery-gap)) / 3);
}

.project-gallery-modal.is-gallery-carousel .project-gallery-item {
  flex-basis: calc((100% - var(--gallery-gap)) / 2);
}

.project-gallery-item {
  position: relative;
  min-width: 0;
  margin: 0;
  transform: translateX(var(--gallery-shift-x, 0));
  transition: transform 180ms ease;
}

.project-gallery-media {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  color: inherit;
  text-align: left;
}

button.project-gallery-media {
  cursor: pointer;
  appearance: none;
}

.project-gallery-media:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

.project-gallery-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.project-gallery figcaption {
  padding-top: 0.5rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.project-gallery-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
}

.project-gallery-arrow:hover,
.project-gallery-arrow:focus-visible {
  border-color: var(--ink-soft);
  color: var(--accent-strong);
}

.gallery-lightbox {
  width: min(96vw, 1120px);
  max-height: 94vh;
  max-height: 94dvh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
}

.gallery-lightbox::backdrop {
  background: rgba(26, 26, 26, 0.78);
}

.gallery-lightbox-surface {
  position: relative;
  display: grid;
  max-height: 92vh;
  max-height: 92dvh;
  padding: var(--space-s);
  border: 1px solid rgba(255, 254, 250, 0.18);
  border-radius: var(--radius);
  background: var(--ink);
}

.gallery-lightbox-close {
  z-index: 2;
}

.gallery-lightbox-figure {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  /* Let vertical gestures pass through while horizontal swipes are handled in
     JS for image navigation; prevents the browser from hijacking the swipe. */
  touch-action: pan-y;
}

.gallery-lightbox img {
  justify-self: center;
  max-width: 100%;
  max-height: min(78vh, 820px);
  max-height: min(78dvh, 820px);
  object-fit: contain;
}

.gallery-lightbox figcaption {
  color: var(--paper);
  font-size: 0.92rem;
  line-height: 1.4;
  text-align: center;
}

.gallery-lightbox figcaption[hidden] {
  display: none;
}

.gallery-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 254, 250, 0.3);
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.55);
  color: var(--paper);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.gallery-lightbox-arrow:hover {
  background: rgba(26, 26, 26, 0.82);
}

.gallery-lightbox-arrow[hidden] {
  display: none;
}

.gallery-lightbox-prev {
  left: var(--space-2xs);
}

.gallery-lightbox-next {
  right: var(--space-2xs);
}

.gallery-lightbox-counter {
  margin: var(--space-2xs) 0 0;
  color: var(--paper);
  font-size: 0.85rem;
  text-align: center;
  opacity: 0.82;
}

.gallery-lightbox-counter[hidden] {
  display: none;
}

/* The lightbox sits on a dark surface, so the default ink focus ring is
   invisible there — switch to a light ring for its controls. */
.gallery-lightbox :focus-visible {
  outline-color: var(--paper);
}

/* Featured/hero images become lightbox triggers. The wrapping button is a
   full-bleed, box-model-neutral block (no padding/border/background) that fills
   its existing .modal-image / .detail-image container, so the descendant
   .modal-image img / .detail-image img rules (aspect-ratio, object-fit, radius)
   still apply and the layout is preserved — while keeping the button keyboard
   focusable (display:contents would make it unfocusable). */
.modal-image-button,
.detail-image-button {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}

.modal-image-button:focus-visible,
.detail-image-button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -3px;
}

@media (hover: hover) and (pointer: fine) {
  .modal-image-button,
  .detail-image-button {
    cursor: zoom-in;
  }
}

@media (hover: hover) and (pointer: fine) {
  .project-gallery.is-gallery-motion-active .project-gallery-item:hover,
  .project-gallery.is-gallery-motion-active .project-gallery-item:focus-within {
    z-index: 1;
    transform: translateX(var(--gallery-shift-x, 0)) translateY(-0.18rem) scale(1.015);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-gallery-track,
  .project-gallery-item {
    transition: none;
  }

  .project-gallery-item {
    transform: none !important;
  }
}

.prose {
  color: var(--ink-soft);
}

.prose-narrow {
  max-width: 780px;
}

.prose h1 {
  max-width: 13ch;
  margin-bottom: 1.4rem;
}

.prose h2 {
  margin: 2rem 0 0.8rem;
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
}

.prose h3 {
  margin: 1.2rem 0 0.55rem;
}

.prose p,
.prose li {
  margin-bottom: 0.8rem;
}

.quote-band {
  background: var(--surface);
}

blockquote {
  max-width: 850px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.45rem, 3vw, 2.5rem);
  line-height: 1.2;
}

.capability-detail {
  display: grid;
  grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1.5fr);
  gap: 2rem;
  align-items: start;
}

/* On the capabilities page each section already names the capability, so the
   per-card capability chips are redundant. Hiding them frees room for the
   project summary in the narrow compact cards. */
.capability-detail .chip-row {
  display: none;
}

.capability-detail-copy {
  position: sticky;
  top: 6rem;
}

.capability-detail-copy p:not(.eyebrow) {
  margin-top: 0.9rem;
  color: var(--muted);
}

.capability-project-link {
  margin-top: 1rem;
}

.contact-panel {
  padding: clamp(1.1rem, 2.5vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.contact-panel p:not(.eyebrow) {
  margin-top: 0.9rem;
  color: var(--muted);
}

.project-dialog {
  width: min(1060px, calc(100vw - 1.5rem));
  max-height: min(780px, calc(100vh - 1.5rem));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
}

.project-dialog::backdrop {
  background: rgba(26, 26, 26, 0.62);
}

.dialog-surface {
  position: relative;
  max-height: inherit;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Zero-height sticky layer: stays pinned to the top of the scrolling surface
   without reserving vertical space, so modal content starts at the very top. */
.dialog-close-layer {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 0;
  pointer-events: none;
}

.dialog-close {
  position: absolute;
  top: var(--space-2xs);
  right: var(--space-2xs);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: var(--w-semibold);
  box-shadow: var(--shadow);
}

.dialog-close:hover {
  border-color: var(--ink-soft);
}

.modal-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-m);
  align-items: start;
  padding: var(--space-m);
}

.modal-image {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  aspect-ratio: 4 / 3;
}

.modal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-copy {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  padding: 0;
}

.modal-copy h2 {
  font-size: var(--step-2);
}

.modal-summary,
.modal-summary p,
.modal-summary li,
.modal-detail-copy p,
.modal-detail-copy li {
  color: var(--muted);
}

.modal-summary p,
.modal-detail-copy p {
  margin-bottom: 0.7rem;
}

.modal-summary p:last-child,
.modal-detail-copy p:last-child {
  margin-bottom: 0;
}

.modal-summary ul,
.modal-detail-copy ul {
  padding-left: 1.2rem;
}

.modal-summary h3,
.modal-detail-copy h3 {
  font-size: var(--step-0);
}

.proof-note {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem;
  border-left: 3px solid var(--accent);
  background: rgba(198, 139, 7, 0.08);
  color: var(--ink-soft);
}

.proof-note span {
  color: var(--muted);
}

.modal-detail-more {
  display: none;
  gap: 1rem;
}

.modal-layout.is-detail-open .modal-detail-more {
  display: grid;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

.loading-state,
.error-state {
  min-height: 55vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
}

.error-state {
  gap: 1rem;
}

.site-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  color: var(--muted);
}

.footer-inner strong {
  color: var(--ink);
}

@media (max-width: 980px) {
  .feature-grid,
  .card-grid,
  .compact-grid,
  .capability-grid,
  .detail-sections,
  .gallery-grid,
  .snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-grid .project-card-flagship,
  .capability-preview,
  .about-snapshot,
  .about-page-grid,
  .detail-hero-grid,
  .contact-grid,
  .capability-detail,
  .modal-layout {
    grid-template-columns: 1fr;
  }

  .project-gallery {
    --gallery-visible-count: 2;
  }

  .project-gallery.is-gallery-carousel .project-gallery-item {
    flex-basis: calc((100% - var(--gallery-gap)) / 2);
  }

  .project-gallery-count-3 .project-gallery-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-detail-copy {
    position: static;
  }

  .modal-copy {
    padding: 0;
  }
}

@media (max-width: 680px) {
  .header-inner {
    padding: 0.65rem 0.8rem;
    gap: 0.7rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brand {
    min-width: 0;
  }

  .brand-logo-wrap {
    width: 1.85rem;
    height: 1.85rem;
  }

  .brand-mark {
    font-size: 0.94rem;
  }

  .brand-name,
  .menu-toggle-label {
    font-size: 0.8rem;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .site-nav {
    grid-column: 1 / -1;
    width: 100%;
    display: none;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    max-width: 100%;
  }

  .site-header.is-menu-open .site-nav {
    display: grid;
  }

  .site-nav a {
    display: flex;
    width: 100%;
    justify-content: center;
    border: 1px solid rgba(217, 212, 202, 0.7);
    background: rgba(255, 254, 250, 0.6);
    padding: 0.45rem 0.7rem;
    text-align: center;
    white-space: nowrap;
    line-height: 1.15;
    font-size: 0.86rem;
  }

  .section-inner {
    width: min(100% - 1.25rem, var(--max));
  }

  .hero-section {
    min-height: clamp(520px, 76vh, 620px);
  }

  .hero-content {
    padding-top: calc(var(--header-h) + var(--space-m));
  }

  .section-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .feature-grid,
  .card-grid,
  .compact-grid,
  .capability-grid,
  .detail-sections,
  .gallery-grid,
  .snapshot-grid {
    grid-template-columns: 1fr;
  }

  /* All card grids are single-column here, so the min-height reservations that align text
     across grid rows only create uneven blank space — collapse them; line clamps stay. */
  .project-card-standard .project-card-meta,
  .project-card-flagship .project-card-meta,
  .project-card-compact .project-card-meta,
  .project-card-standard h3,
  .project-card-flagship h3,
  .project-card-compact h3,
  .project-card-standard p,
  .project-card-compact p {
    min-height: 0;
  }

  .project-gallery {
    --gallery-gap: 0.65rem;
    --gallery-visible-count: 1;
  }

  .project-gallery.is-gallery-carousel .project-gallery-item {
    flex-basis: 100%;
  }

  .project-gallery-count-2 .project-gallery-track,
  .project-gallery-count-3 .project-gallery-track,
  .project-gallery-modal.project-gallery-count-3 .project-gallery-track {
    grid-template-columns: 1fr;
  }

  .project-gallery-arrow {
    width: 2.25rem;
    height: 2.25rem;
  }

  .project-card-flagship .project-image {
    aspect-ratio: 4 / 3;
  }

  .archive-controls {
    gap: 0.75rem;
    padding: 0.65rem 0;
  }

  .archive-sticky-controls {
    padding: 0.5rem 0;
  }

  .archive-sticky-controls .compact-filter-bar,
  .archive-sticky-controls .filter-panel {
    width: min(100% - 1.25rem, var(--max));
  }

  .compact-filter-bar {
    align-items: center;
    gap: 0.55rem;
  }

  .active-filter-chips {
    width: 100%;
    overflow: visible;
    flex-wrap: wrap;
    padding-bottom: 0.2rem;
  }

  .active-filter-chips .chip {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
  }

  .filter-panel-toggle {
    display: inline-flex;
  }

  .filter-panel {
    max-height: min(68vh, 560px);
    padding: 0.75rem;
  }

  .filter-group > div {
    display: grid;
    grid-template-columns: 1fr;
  }

  .filter-button,
  .chip-button {
    width: 100%;
  }

  .page-hero {
    padding-top: 4rem;
  }

  .page-hero .hero-kicker {
    max-width: 100%;
    font-size: 1.08rem;
    line-height: 1.34;
  }

  .filter-button,
  .chip-button {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }

  .project-dialog {
    width: calc(100vw - 0.8rem);
    max-height: calc(100vh - 0.8rem);
  }
}

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

  .site-header,
  .archive-sticky-controls {
    transition: none;
  }
}