:root {
  --blue: #87b4ff;
  --amber: #f5be72;
  --accent-ink: #111926;
  --accent-gradient: linear-gradient(135deg, var(--blue) 0%, #b7bcf2 48%, var(--amber) 100%);
  --accent-glow: 0 14px 35px rgba(77, 111, 191, .18), 0 6px 20px rgba(222, 148, 48, .12);
  --surface-highlight: rgba(255, 255, 255, .07);
  --card-depth: 0 18px 52px rgba(0, 0, 0, .23);
  --focus-ring: #87b4ff;
}

html[data-theme="dark"] {
  --blue: #87b4ff;
  --amber: #f5be72;
}

html[data-theme="light"] {
  --blue: #82b1ff;
  --amber: #f0b85c;
  --accent-ink: #152034;
  --surface-highlight: rgba(255,255,255,.88);
  --card-depth: 0 18px 45px rgba(54, 48, 54, .10);
  --focus-ring: #2557be;
}


.nav-shell.glass {
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line)) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.19), 0 1px 0 var(--surface-highlight) inset !important;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}
.brand-mark {
  border-color: color-mix(in srgb, var(--blue) 35%, var(--line)) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 18%, transparent), color-mix(in srgb, var(--amber) 13%, transparent)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(73,103,180,.10);
  color: var(--text) !important;
}
.nav-btn.active,
.nav-btn:hover,
.nav-link.active,
.nav-link:hover {
  background: color-mix(in srgb, var(--blue) 14%, transparent) !important;
  color: var(--text) !important;
}


.back-home,
.darwin-button,
.btn-gold,
.nav-contact,
.copy-btn,
.send-btn {
  background: var(--accent-gradient) !important;
  color: var(--accent-ink) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: var(--accent-glow) !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  transition: transform .27s cubic-bezier(.16,1,.3,1), box-shadow .27s ease, filter .27s ease !important;
}
.back-home {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  gap: 8px;
  padding: 11px 17px !important;
  border-radius: 14px !important;
  font: 700 11px/1.2 'Space Mono', monospace !important;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-contact { border-radius: 13px !important; }
.darwin-button { border-radius: 14px !important; }
.btn { min-height: 44px; justify-content: center; }
.btn-gold, .copy-btn, .send-btn { border-radius: 13px !important; }
.back-home:hover,
.darwin-button:hover,
.btn-gold:hover,
.nav-contact:hover,
.copy-btn:hover,
.send-btn:hover {
  filter: saturate(1.16) brightness(1.04);
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 44px rgba(69,102,181,.23), 0 9px 24px rgba(230,146,40,.17) !important;
}
.back-home:active,
.darwin-button:active,
.btn-gold:active,
.nav-contact:active,
.copy-btn:active,
.send-btn:active { transform: translateY(0) scale(.985) !important; }
.btn-glass {
  border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--line)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.06) !important;
}
.btn-glass:hover { border-color: var(--blue) !important; }


.section-head h2,
.contact-copy h2,
.gallery-header h2 { text-wrap: balance; }
.section-head .section-index,
.section-index,
.work-num,
.gallery-header .eyebrow,
.project-hero .eyebrow,
.eyebrow {
  color: var(--gold2);
}
.section-head h2::after,
.gallery-header h2::after {
  content: '';
  display: block;
  width: clamp(46px, 6vw, 80px);
  height: 3px;
  margin-top: 19px;
  border-radius: 20px;
  background: var(--accent-gradient);
  box-shadow: 0 0 20px color-mix(in srgb, var(--blue) 24%, transparent);
}


.work-card,
.tool-card,
.skill-card,
.identity-card,
.contact-form,
.place-card,
.practical-card,
.day-card,
.darwin-stat {
  border: 1px solid color-mix(in srgb, var(--blue) 13%, var(--line)) !important;
  box-shadow: var(--card-depth) !important;
  transition: transform .36s cubic-bezier(.16,1,.3,1), border-color .30s ease, box-shadow .36s ease !important;
}
.work-card,
.tool-card,
.contact-form,
.place-card { border-radius: clamp(18px, 2vw, 27px) !important; }
.skill-card,
.identity-card,
.practical-card,
.day-card,
.darwin-stat { border-radius: 16px !important; }
.work-card:hover,
.tool-card:hover,
.place-card:hover,
.practical-card:hover,
.skill-card:hover {
  transform: translateY(-5px) !important;
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line)) !important;
  box-shadow: 0 24px 60px rgba(31,49,91,.20), 0 8px 23px rgba(187,126,49,.09) !important;
}
.work-card::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 19%, transparent), transparent 72%) !important;
}
.tool-icon {
  background: linear-gradient(140deg, color-mix(in srgb, var(--blue) 15%, transparent), color-mix(in srgb, var(--amber) 11%, transparent)) !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line)) !important;
}
.tag,
.facts span {
  border-color: color-mix(in srgb, var(--blue) 21%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 5%, transparent);
}


.project-hero,
.showcase,
.darwin-hero {
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line)) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.17), inset 0 1px rgba(255,255,255,.07) !important;
}
.project-hero { border-radius: 28px !important; }
.project-hero h1 { text-wrap: balance; }
.gallery-arrow {
  border-color: color-mix(in srgb, var(--blue) 27%, var(--line)) !important;
  transition: transform .22s ease, border-color .22s ease, background .22s ease !important;
}
.gallery-arrow:hover { transform: scale(1.05); border-color: var(--blue) !important; }
.gallery-dot.active { background: var(--blue) !important; }


.field input,
.field textarea {
  border-color: color-mix(in srgb, var(--blue) 17%, var(--line)) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent) !important;
}
.copy-btn { min-height: 42px; padding-inline: 16px; }
.theme-toggle, .menu-toggle { transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease !important; }
.theme-toggle:hover, .menu-toggle:hover {
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent) !important;
}
:where(a,button,input,textarea,select):focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 3px !important;
}


@media (max-width: 760px) {
  .subnav { gap: 10px; flex-wrap: wrap; }
  .subnav-actions { min-width: 0; }
  .back-home, .darwin-button {
    min-height: 42px;
    font-size: 10px !important;
    padding: 10px 13px !important;
    white-space: normal;
    text-align: center;
  }
  .work-card, .tool-card, .contact-form { box-shadow: 0 12px 35px rgba(0,0,0,.13) !important; }
  .work-card:hover, .tool-card:hover, .place-card:hover, .practical-card:hover, .skill-card:hover {
    transform: none !important; 
  }
  .section-head h2::after, .gallery-header h2::after { margin-top: 14px; }
  .mobile-menu { border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line)) !important; }
}
@media (max-width: 380px) {
  .subnav { align-items: stretch; }
  .subnav-actions { flex: 1 1 auto; justify-content: flex-start; }
  .back-home, .darwin-button { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .back-home, .darwin-button, .btn-gold, .nav-contact, .copy-btn, .send-btn,
  .work-card, .tool-card, .place-card, .practical-card, .skill-card, .gallery-arrow {
    transition: none !important;
  }
  .back-home:hover, .darwin-button:hover, .btn-gold:hover, .nav-contact:hover,
  .copy-btn:hover, .send-btn:hover, .work-card:hover, .tool-card:hover, .place-card:hover,
  .practical-card:hover, .skill-card:hover, .gallery-arrow:hover { transform: none !important; }
}


html[data-theme="light"] :is(.back-home, .darwin-button, .btn-gold, .nav-contact, .copy-btn, .send-btn) {
  color: var(--accent-ink) !important;
  background: var(--accent-gradient) !important;
}

/* Responsive scroll-aware navigation; blends with the scenery rather than sitting above it. */
.site-header {
  transition: transform .44s cubic-bezier(.22,1,.36,1), opacity .30s ease !important;
  transform: none;
  background: transparent !important;
}
body.nav-scroll-hidden:not(.menu-open) .site-header {
  transform: translate3d(0,calc(-100% - 28px),0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html[data-theme='light'] body .site-header .nav-shell.glass {
  background: rgba(250,248,245,.36) !important;
  border: 1px solid rgba(255,255,255,.50) !important;
  box-shadow: 0 9px 26px rgba(15,26,37,.07) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
}
html[data-theme='dark'] body .site-header .nav-shell.glass {
  background: rgba(9,13,21,.38) !important;
  border: 1px solid rgba(255,255,255,.19) !important;
  box-shadow: 0 9px 30px rgba(0,0,0,.14) !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
}
@media (max-width:1100px) {
  .site-header .mobile-menu.open {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}