html { scroll-padding-top: 128px; }

::selection {
  background: color-mix(in srgb, var(--color-primary) 28%, transparent);
}

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--color-gold, #7A6832);
  outline-offset: 3px;
}

:where(button, a, select, input) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

img,
svg,
canvas {
  max-inline-size: 100%;
}

.leaflet-container:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* Production hero: KPI cards replace the former methodology bullets. */
.home-intro .hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-self: stretch;
  min-width: 0;
}

.home-intro .hero-stats .stat {
  min-height: 112px;
  padding: 14px;
  box-shadow: none;
  background: var(--color-card);
}

.home-intro .hero-stats .stat > span {
  inset-block-start: 12px;
  inset-inline-end: 12px;
  width: 34px;
  height: 34px;
}

.home-intro .hero-stats .stat strong {
  font-size: clamp(22px, 2.2vw, 28px);
}

.home-intro .hero-stats .stat small {
  font-size: 11px;
}

@supports (content-visibility: auto) {
  .project-card,
  .component-card {
    content-visibility: auto;
    contain-intrinsic-size: 1px 300px;
  }
}

/* Tablet/phone density: keep the interface compact without reducing tap safety. */
@media (max-width: 768px) {
  .home-intro {
    padding: 17px;
    gap: 16px;
  }

  .intro-copy h1,
  .detail-hero-main h1 {
    font-size: clamp(25px, 7vw, 29px);
    margin-block: 8px 9px;
  }

  .intro-copy p {
    font-size: 13px;
    line-height: 1.7;
  }

  .home-intro .hero-stats {
    gap: 8px;
  }

  .home-intro .hero-stats .stat {
    min-height: 86px;
    padding: 10px;
    gap: 1px;
  }

  .home-intro .hero-stats .stat > span {
    position: static;
    width: 29px;
    height: 29px;
    margin: 0 0 2px;
    border-radius: 9px;
  }

  .home-intro .hero-stats .stat > span svg {
    width: 17px;
    height: 17px;
  }

  .home-intro .hero-stats .stat strong {
    font-size: 20px;
  }

  .home-intro .hero-stats .stat small {
    font-size: 9.5px;
    line-height: 1.35;
  }

  .filters {
    padding: 10px;
    gap: 9px;
    border-radius: 16px;
  }

  .filters-heading {
    gap: 8px;
  }

  .filters-heading p {
    display: none;
  }

  .filters-heading .eyebrow {
    font-size: 11px;
  }

  .filters-heading .reset {
    min-height: 34px;
    padding-inline: 10px;
    font-size: 10.5px;
  }

  .filters-heading .reset svg {
    width: 14px;
    height: 14px;
  }

  .search {
    height: 38px;
    padding-inline: 10px;
    gap: 7px;
  }

  .search svg {
    width: 15px;
    height: 15px;
  }

  .search input {
    font-size: 12px;
  }

  .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .filter-grid label {
    gap: 3px;
  }

  .filter-grid label > span {
    font-size: 9.5px;
    line-height: 1.25;
  }

  .filter-grid select {
    min-height: 35px;
    height: 35px;
    padding-inline: 8px;
    border-radius: 9px;
    font-size: 10.5px;
  }

  .sort-field {
    grid-column: 1 / -1;
  }

  .cards {
    gap: 9px;
  }

  .project-card {
    min-height: 0;
    padding: 11px;
    border-radius: 15px;
    gap: 8px;
  }

  .project-card .icon-tile {
    width: 31px;
    height: 31px;
    border-radius: 9px;
  }

  .project-card .icon-tile svg {
    width: 17px;
    height: 17px;
  }

  .project-card .card-top {
    gap: 6px;
  }

  .project-card .card-badges {
    gap: 5px;
  }

  .project-card .card-kind {
    font-size: 9.5px;
  }

  .project-card .card-copy h2 {
    margin: 3px 0 5px;
    font-size: 13.5px;
    line-height: 1.45;
  }

  .project-card .card-copy p {
    -webkit-line-clamp: 2;
    font-size: 11px;
    line-height: 1.55;
  }

  .project-card .chips {
    gap: 4px;
  }

  .project-card .chip,
  .project-card .badge {
    padding: 2px 7px;
    font-size: 9px;
  }

  .project-card .card-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .project-card .card-meta div {
    padding: 6px;
  }

  .project-card .card-meta dt {
    font-size: 8.5px;
  }

  .project-card .card-meta dd {
    font-size: 9.5px;
  }

  .project-card .primary-button {
    min-height: 35px;
    padding: 6px 9px;
    font-size: 10px;
  }
}

@media (max-width: 430px) {
  body { overflow-x: hidden; }

  .app-header,
  .hero,
  .panel,
  .project-card,
  .component-card { min-width: 0; }

  .detail-nav { overscroll-behavior-inline: contain; }

  .page-stack {
    gap: 12px;
    padding-block: 12px 24px;
  }

  .home-intro {
    border-radius: 17px;
    padding: 14px;
  }

  .eyebrow {
    font-size: 10.5px;
  }

  .intro-copy h1 {
    font-size: 25px;
    line-height: 1.35;
  }

  .home-intro .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .home-intro .hero-stats .stat {
    min-height: 78px;
    padding: 8px;
    border-radius: 12px;
  }

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

  .sort-field {
    grid-column: 1 / -1;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .project-card {
    min-height: 0;
    padding: 10px;
  }

  .project-card .card-meta div:nth-child(1),
  .project-card .card-meta div:nth-child(4) {
    display: none;
  }

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

@media (prefers-contrast: more) {
  .glass,
  .project-card,
  .panel,
  .component-card,
  .badge,
  .chip { border-width: 2px; }
}

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

@media print {
  :root { color-scheme: light; }
  body { background: #fff !important; color: #000 !important; }
  .header-wrap,
  .detail-nav,
  .back-link,
  .hero-actions,
  .map-layout,
  .primary-button,
  footer { display: none !important; }
  .app-main,
  .page-stack { width: 100% !important; max-width: none !important; }
  .glass,
  .panel,
  .hero,
  .project-card,
  .component-card {
    break-inside: avoid;
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #bbb !important;
  }
  a { color: #000 !important; text-decoration: underline; }
}