:root {
  --mt-banner-yellow: #ffff00;
  --mt-font-primary: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;

  /* Modus 2.0 form control tokens (light mode) */
  --mt-input-radius: 4px;
  --mt-input-bg: #ffffff;
  --mt-input-color: #252a2e;
  --mt-input-placeholder: #90939f;
  --mt-input-border-default: #cbcdd6;
  --mt-input-border-filled: #252a2e;
  --mt-input-border-focus: #0c77be;
  --mt-input-border-invalid: #da212c;
  --mt-input-shadow-focus: rgba(12, 119, 190, 0.4);
  --mt-input-shadow-invalid: rgba(218, 33, 44, 0.4);
  --mt-input-error: #da212c;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--mt-font-primary);
  color: #171c1e;
  background: #ffffff;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.site-header {
  flex: 0 0 auto;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  z-index: 2;
}

.site-nav {
  padding: 12px 32px;
}

.breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
  font-size: 14px;
}

.breadcrumb a {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  color: #4d4d4d;
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: #171c1e;
  background-color: rgba(0, 0, 0, 0.05);
  outline: none;
}

/* ------------------------------------------------------------------ */
/* Hero-page variant: image-covered viewport with translucent chrome  */
/* ------------------------------------------------------------------ */
body.home-page {
  background-color: #000000;
  background-image: url("../img/banner.aff7f4791b74.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #ffffff;
}

body.home-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
  pointer-events: none;
  z-index: 0;
}

body.home-page > *:not(.mode-hint) {
  position: relative;
  z-index: 1;
}

body.home-page .site-header {
  background: rgba(10, 14, 16, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

body.home-page .breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body.home-page .breadcrumb a:hover,
body.home-page .breadcrumb a:focus-visible {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.15);
}

/* ------------------------------------------------------------------ */
/* Cross-document (MPA) view transitions                              */
/*                                                                    */
/* Opt every same-origin navigation in so the home → configure (and   */
/* back) page change animates.  The home search box (`.search-row`)   */
/* and the configure side panel (`.cfg-panel`) share the              */
/* `view-transition-name: vt-panel`, so the browser morphs one into   */
/* the other: confirming a search makes the search box fly left and   */
/* grow into the options panel.  Unsupported browsers (Firefox, older */
/* Chrome/Safari) simply navigate normally — no JS required.          */
/* ------------------------------------------------------------------ */
@view-transition {
  navigation: auto;
}

/* Tune the shared element's morph — a bit longer + Modus easing so the
 * box visibly glides and resizes into the panel rather than snapping. */
::view-transition-group(vt-panel) {
  animation-duration: 460ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gentle cross-fade of the rest of the page (the "root" snapshot). */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 360ms;
}

/* Respect users who prefer reduced motion: cut all transition motion. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }
}