/* Theme and language controls in the top navigation. */
.nav-controls{display:flex;align-items:center;gap:7px;flex-shrink:0}
.nav-switch{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-width:39px;height:37px;padding:0 9px;
  border:1px solid #406b88;border-radius:9px;
  background:#102b40;color:#e8f5fd;
  font:700 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;transition:background .18s ease,border-color .18s ease;
}
.nav-switch:hover{background:#1c4663;border-color:#64b8ed}
.nav-switch:focus-visible{outline:3px solid #42bffa;outline-offset:3px}
.nav-switch .ui-icon{font-size:23px;line-height:1}
.nav-switch .ui-flag{
  display:block;
  width:24px;
  height:15px;
  flex-shrink:0;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 0 0 1px #ffffff80;
}
.nav-switch .ui-lang-code{font-size:11px;letter-spacing:.03em}
@media(max-width:1230px){
  .top{gap:16px}
  .top nav{gap:17px}
  .top nav a{font-size:14px}
}
@media(min-width:721px) and (max-width:1020px){.header-contact{display:none}}
@media(max-width:720px){
  .top{gap:8px}
  .top .logo{font-size:18px}
  .top .menu{margin-left:auto}
  .nav-controls{gap:5px}
  .nav-switch{min-width:34px;height:34px;padding:0 6px}
  .nav-language{min-width:59px}
}
@media(max-width:400px){
  .top{gap:5px;padding-inline:9px}
  .top .logo{font-size:16px}
  .top .menu{font-size:12px;padding:6px}
  .nav-switch{padding:0 4px}
  .nav-language{min-width:35px}
  .nav-language .ui-lang-code{display:none}
}
@media(max-width:720px){
  /* Case studies have no collapsible nav: the logo and back link remain navigable. */
  .top:not(:has(.menu)) nav{display:none}
  .top:not(:has(.menu)) .nav-controls{margin-left:auto}
}

/* The dark palette lives in site.css; light mode overrides it consistently. */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f0f7fb;
  --panel:#ffffff;
  --line:#bbd5e4;
  --blue:#096d9c;
  --text:#10273b;
  --muted:#455e70;
}
html[data-theme="light"] body{
  background:radial-gradient(circle at 55% 0,#d9f1fb,transparent 43%),var(--bg);
}
html[data-theme="light"] .top{
  background:#f7fbffeF;border-bottom-color:#bfd7e7;
}
html[data-theme="light"] .header-contact,
html[data-theme="light"] .secondary{
  border-color:#6aa6c7;
}
html[data-theme="light"] .nav-switch{
  background:#e9f4fb;color:#173b53;border-color:#9bbfd6;
}
html[data-theme="light"] .nav-switch:hover{
  background:#cde9f9;border-color:#3886b4;
}
html[data-theme="light"] .menu{
  background:#e8f2f8;color:#193b50;
}
html[data-theme="light"] .top nav{
  color:#173b53;
}
html[data-theme="light"] .role{color:#254b60}
html[data-theme="light"] .panel{
  background:linear-gradient(145deg,#ffffff,#e9f4fb);
}
html[data-theme="light"] .project{
  background:#fff;border-color:#c3d8e5;
}
html[data-theme="light"] .project:hover{border-color:#0783c2}
html[data-theme="light"] .project .art{color:#e6f8ff}
html[data-theme="light"] .project .art-sub{color:#c6eaff}
html[data-theme="light"] .cardbody p{color:var(--muted)}
html[data-theme="light"] .tags span{
  color:#24506b;background:#e5f2fa;border-color:#bad9e9;
}
html[data-theme="light"] .timeline small{color:#125f8b}
html[data-theme="light"] .contact small{color:#557186}
html[data-theme="light"] footer{color:#526e80}
html[data-theme="light"] .project-photo-preview{
  background:#f7fbfff7;border-color:#8cb9d2;box-shadow:0 22px 70px #24486166;
}
html[data-theme="light"] .project-photo-preview figcaption{color:#244459}
html[data-theme="light"] .explorer-trigger{
  background:#e1eff9;border-color:#a3cce4;color:#174865;
}
html[data-theme="light"] .explorer-trigger:hover,
html[data-theme="light"] .explorer-trigger:focus-visible{background:#c5e5f8}
html[data-theme="light"] .explorer-modal{
  background:#f4faff;border-color:#9cc5df;color:#142f45;
  box-shadow:0 25px 80px #163a5b55;
}
html[data-theme="light"] .explorer-header{background:#f4faff}
html[data-theme="light"] .explorer-close{
  background:#e1f0fa;color:#17394c;border-color:#a2c9df;
}
html[data-theme="light"] .explorer-item{
  background:#fff;border-color:#bad6e5;
}
html[data-theme="light"] .explorer-featured{
  background:linear-gradient(155deg,#e1f2fc,#fff 80%);border-color:#85b9d7;
}
html[data-theme="light"] .explorer-featured-label{
  color:#805009;border-color:#b9914f;background:#fff7e8;
}
html[data-theme="light"] .explorer-contribution{color:#365469}
html[data-theme="light"] .explorer-contribution-title{color:#376681}
html[data-theme="light"] .explorer-tech span{
  color:#285878;background:#e5f2f9;border-color:#b0d0e1;
}
html[data-theme="light"] .explorer-video{color:#096b9d}
html[data-theme="light"] .project-image img{background:#f2f8fc;border-color:#8aafc5}
html[data-theme="light"] .case-back{color:#096d9c}
html[data-theme="light"] .case-hero{
  background:radial-gradient(circle at 90% 10%,#d1edf9,#fff 68%);
  border-color:#abd1e4;
}
html[data-theme="light"] .case-hero h1 span{color:#375f77}
html[data-theme="light"] .case-lead{color:#39596d}
html[data-theme="light"] .case-tags span{
  background:#e4f3fb;border-color:#abccde;color:#2c5772;
}
html[data-theme="light"] .case-panel,
html[data-theme="light"] .case-outro{
  background:#fff;border-color:#b7d3e2;
}
html[data-theme="light"] .case-outro{border-left-color:#1686b8}
html[data-theme="light"] .case-panel p,
html[data-theme="light"] .case-outro p{color:#385669}
html[data-theme="light"] .case-note{color:#536b7d!important}
html[data-theme="light"] .portrait-label{color:#ddf4ff}
@media(max-width:720px){
  html[data-theme="light"] .top nav.open{
    background:#f7fbff;border-bottom-color:#bfd7e7;
  }
  html[data-theme="light"] .mobile-notice:not([hidden]){
    background:#e8f4fc;border-color:#9ac4dd;color:#173b53;
    box-shadow:0 8px 30px #31536d44;
  }
  html[data-theme="light"] .mobile-notice p{color:#36596f}
  html[data-theme="light"] .mobile-notice-close{
    background:#d7edf9;border-color:#91b9d1;color:#193d53;
  }
}
@media(prefers-reduced-motion:reduce){
  .nav-switch{transition:none}
}

/* Gentle theme transitions without delaying page loads. */
body,.top,.panel,.explorer-modal,.explorer-item,.case-hero,.case-panel,.case-outro,.nav-switch{
  transition:background-color 220ms ease,border-color 220ms ease,color 220ms ease;
}
.project{
  transition:transform 200ms ease,background-color 220ms ease,border-color 220ms ease,color 220ms ease;
}
@media(prefers-reduced-motion:reduce){
  body,.top,.panel,.project,.explorer-modal,.explorer-item,.case-hero,.case-panel,.case-outro,.nav-switch{transition:none}
}