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

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

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

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

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