: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;
}

.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);
}

.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;
}

.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));
}

.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;
}

.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;
}

.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;
}

.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;
}

.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);
}

.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;
  }

  .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;
  }

  .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;
  }
}