/* iOS-style frosted glass — selective overlays over photos / rich backgrounds */
:root {
  --glass-frost: rgba(255, 255, 255, 0.16);
  --glass-frost-strong: rgba(255, 255, 255, 0.28);
  --glass-frost-soft: rgba(255, 255, 255, 0.1);
  --glass-edge: rgba(255, 255, 255, 0.38);
  --glass-edge-soft: rgba(255, 255, 255, 0.2);
  --glass-ink: rgba(255, 255, 255, 0.94);
  --glass-ink-muted: rgba(255, 255, 255, 0.72);
  --glass-blur: 22px;
  --glass-blur-strong: 36px;
  --glass-sat: 160%;
  --glass-shade: rgba(20, 16, 14, 0.22);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-frost: rgba(255, 255, 255, 0.55);
    --glass-frost-strong: rgba(255, 255, 255, 0.7);
  }
}

/* Large translucent type (lock-screen clock feel) */
.glass-title {
  color: var(--glass-ink);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 28px rgba(0, 0, 0, 0.28);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.glass-caption {
  color: var(--glass-ink-muted);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Frosted panel with white type */
.glass-panel {
  background: var(--glass-frost);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 32px var(--glass-shade);
  color: var(--glass-ink);
}

.glass-panel a {
  color: inherit;
}

.glass-panel--strong {
  background: var(--glass-frost-strong);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat));
}

/* Compact widget chip (weather / calendar row) */
.glass-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--glass-frost);
  backdrop-filter: blur(18px) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: var(--glass-ink);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

/* Circular control (flashlight / camera) */
.glass-orb {
  background: var(--glass-frost-strong) !important;
  backdrop-filter: blur(20px) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(var(--glass-sat)) !important;
  border: 1px solid var(--glass-edge) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.18) !important;
  color: var(--glass-ink) !important;
}

.glass-orb:hover,
.glass-orb:focus-visible {
  background: rgba(255, 255, 255, 0.38) !important;
  color: #fff !important;
}

/* Square frosted control */
.glass-btn {
  background: var(--glass-frost) !important;
  backdrop-filter: blur(18px) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-sat)) !important;
  border: 1px solid var(--glass-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
  color: var(--glass-ink) !important;
}

.glass-btn:hover,
.glass-btn:focus-visible,
.glass-btn[aria-pressed="true"] {
  background: var(--glass-frost-strong) !important;
  color: #fff !important;
}

/* ——— Site hooks ——— */

/* Home hero: frosted sheet over the photograph */
.home-stage .home-bg::after {
  background: linear-gradient(
    100deg,
    rgba(24, 20, 18, 0.55) 0%,
    rgba(24, 20, 18, 0.28) 38%,
    rgba(24, 20, 18, 0.08) 58%,
    transparent 74%
  ) !important;
}

.home-stage .home-sheet {
  padding: 28px 26px 30px;
  background: var(--glass-frost);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 18px 48px rgba(0, 0, 0, 0.22);
  color: var(--glass-ink);
}

.home-stage h1.home-title {
  color: var(--glass-ink) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 36px rgba(0, 0, 0, 0.28);
}

.home-stage p.home-lede,
.home-stage .home-place,
.home-stage .home-facts dt,
.home-stage .home-facts dd,
.home-stage .home-portrait figcaption {
  color: var(--glass-ink-muted) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}

.home-stage .home-facts dd,
.home-stage .home-place {
  color: var(--glass-ink) !important;
}

.home-stage .home-portrait img {
  border: 1px solid var(--glass-edge);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.home-stage a {
  color: #fff !important;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

.home-stage a:hover {
  color: #fff !important;
  text-decoration-color: #fff;
}

.home-credit {
  background: var(--glass-frost) !important;
  backdrop-filter: blur(16px) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(var(--glass-sat)) !important;
  border: 1px solid var(--glass-edge-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: var(--glass-ink) !important;
}

/* Floating circular controls */
#clear-drawing-btn,
.mobile-menu-toggle {
  background: var(--glass-frost-strong) !important;
  backdrop-filter: blur(20px) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(var(--glass-sat)) !important;
  border: 1px solid var(--glass-edge) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.16) !important;
  color: #fff !important;
}

#clear-drawing-btn:hover,
.mobile-menu-toggle:hover,
#clear-drawing-btn:focus-visible,
.mobile-menu-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.4) !important;
}

/* Ask assistant — frosted launch chip */
.site-assistant-launch {
  background: var(--glass-frost-strong) !important;
  backdrop-filter: blur(22px) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(var(--glass-sat)) !important;
  border: 1px solid var(--glass-edge) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 12px 32px rgba(0, 0, 0, 0.2) !important;
  color: var(--glass-ink) !important;
}

.site-assistant-launch:hover,
.site-assistant-launch:focus-visible,
.site-assistant-launch[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}

/* Related content over sunburst / page ends — frosted glass, dark type */
.related {
  position: relative;
  z-index: 2;
  margin-bottom: -48px;
  padding-bottom: 56px;
}

.related h2 {
  color: #1a1512 !important;
  border-left-color: #1a1512 !important;
  text-shadow: none;
}

.related .related-card {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 0 !important;
  color: #1a1512 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 12px 32px rgba(0, 0, 0, 0.16);
  text-shadow: none;
}

.related .related-card .related-kicker,
.related .related-card .related-name,
.related .related-card .related-note {
  color: inherit !important;
}

.related .related-card .related-kicker {
  color: rgba(26, 21, 18, 0.72) !important;
}

.related .related-card .related-name {
  color: #1a1512 !important;
}

.related .related-card .related-note {
  color: rgba(26, 21, 18, 0.78) !important;
}

.related .related-card:hover,
.related .related-card:focus-visible {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: #1a1512 !important;
}

.related .related-card:hover .related-kicker,
.related .related-card:focus-visible .related-kicker,
.related .related-card:hover .related-note,
.related .related-card:focus-visible .related-note,
.related .related-card:hover .related-name,
.related .related-card:focus-visible .related-name {
  color: #1a1512 !important;
}

.related .related-more button {
  color: #1a1512 !important;
  text-shadow: none;
}

[data-theme="dark"] .related h2 {
  color: #fff8f5 !important;
  border-left-color: rgba(255, 248, 245, 0.8) !important;
}

[data-theme="dark"] .related .related-card {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #fff8f5 !important;
}

[data-theme="dark"] .related .related-card .related-kicker,
[data-theme="dark"] .related .related-card .related-note {
  color: rgba(255, 248, 245, 0.78) !important;
}

[data-theme="dark"] .related .related-card .related-name {
  color: #fff8f5 !important;
}

[data-theme="dark"] .related .related-card:hover,
[data-theme="dark"] .related .related-card:focus-visible {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #fff !important;
}

[data-theme="dark"] .related .related-card:hover .related-kicker,
[data-theme="dark"] .related .related-card:focus-visible .related-kicker,
[data-theme="dark"] .related .related-card:hover .related-note,
[data-theme="dark"] .related .related-card:focus-visible .related-note,
[data-theme="dark"] .related .related-card:hover .related-name,
[data-theme="dark"] .related .related-card:focus-visible .related-name {
  color: #fff !important;
}

[data-theme="dark"] .related .related-more button {
  color: #fff8f5 !important;
}

/* Travels globe shell — frosted glass panel behind the globe */
.travel-globe-card {
  background: rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 16px 40px rgba(0, 0, 0, 0.12) !important;
  color: #2b1d16 !important;
}

.travel-globe-card h2,
.travel-globe-card .travel-globe-note,
.travel-globe-card .travel-globe-legend,
.travel-globe-card .travel-globe-status {
  color: #2b1d16 !important;
  text-shadow: none;
}

.travel-globe-panel {
  background: rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 0 !important;
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .travel-globe-card {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff8f5 !important;
}

[data-theme="dark"] .travel-globe-card h2,
[data-theme="dark"] .travel-globe-card .travel-globe-note,
[data-theme="dark"] .travel-globe-card .travel-globe-legend,
[data-theme="dark"] .travel-globe-card .travel-globe-status {
  color: #fff8f5 !important;
}

[data-theme="dark"] .travel-globe-panel {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Travels globe controls — square frosted chips, dark type on light card */
.travel-scheme,
.travel-zoom {
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(16px) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(var(--glass-sat)) !important;
  border: 1px solid rgba(43, 29, 22, 0.35) !important;
  color: #2b1d16 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.travel-scheme[aria-pressed="true"],
.travel-scheme:hover,
.travel-zoom:hover {
  background: #2b1d16 !important;
  border-color: #2b1d16 !important;
  color: #fff8f5 !important;
}

[data-theme="dark"] .travel-scheme,
[data-theme="dark"] .travel-zoom {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #fff8f5 !important;
}

[data-theme="dark"] .travel-scheme[aria-pressed="true"],
[data-theme="dark"] .travel-scheme:hover,
[data-theme="dark"] .travel-zoom:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
}

.travel-globe-card .travel-place-btn,
.travel-places .travel-place-btn,
.travel-places button {
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #2b1d16 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.travel-places .travel-place-btn small,
.travel-places button small {
  color: #6b3a2a !important;
}

.travel-places .travel-place-btn[aria-current="true"],
.travel-places button[aria-current="true"] {
  background: #6b3a2a !important;
  color: #fff8f5 !important;
}

.travel-places .travel-place-btn[aria-current="true"] small,
.travel-places button[aria-current="true"] small {
  color: #fff8f5 !important;
}

.travel-places .travel-place-btn[data-home="true"][aria-current="true"],
.travel-places button[data-home="true"][aria-current="true"] {
  background: #1b7f8e !important;
  color: #fff8f5 !important;
}

[data-theme="dark"] .travel-globe-card .travel-place-btn,
[data-theme="dark"] .travel-places .travel-place-btn,
[data-theme="dark"] .travel-places button {
  color: #fff8f5 !important;
}

[data-theme="dark"] .travel-places .travel-place-btn small,
[data-theme="dark"] .travel-places button small {
  color: #e7d5cc !important;
}

/* Architecture: frosted title strip on project images */
.project-card .card-image-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(20, 16, 14, 0.45), transparent);
  z-index: 1;
}

.project-card .card-content {
  position: relative;
}

.project-card .card-title {
  display: inline-block;
  margin-top: -2.4rem;
  margin-bottom: 0.65rem;
  position: relative;
  z-index: 2;
  max-width: calc(100% - 24px);
  margin-left: 12px;
  padding: 8px 12px;
  background: var(--glass-frost-strong);
  backdrop-filter: blur(18px) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: var(--glass-ink) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

/* Footer sunburst time chips */
.footer.footer-with-sunburst .sunburst-controls .time-option,
.footer.footer-with-sunburst .sunburst-controls .play-pause button,
.footer.footer-with-sunburst .sunburst-controls .sunburst-toggle-background {
  background: var(--glass-frost) !important;
  backdrop-filter: blur(18px) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-sat)) !important;
  border: 1px solid var(--glass-edge) !important;
  color: var(--glass-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.footer.footer-with-sunburst .sunburst-controls .time-option:hover,
.footer.footer-with-sunburst .sunburst-controls .time-option.active,
.footer.footer-with-sunburst .sunburst-controls .play-pause button:hover,
.footer.footer-with-sunburst .sunburst-controls .sunburst-toggle-background:hover {
  background: var(--glass-frost-strong) !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  /* On phones the sheet sits below the photo — drop frost so copy stays readable */
  .home-stage .home-sheet {
    padding: 0;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    width: min(100%, 100%);
    max-width: none;
  }

  .home-stage h1.home-title {
    color: #2b1d16 !important;
    text-shadow: none !important;
  }

  .home-stage p.home-lede,
  .home-stage .home-place,
  .home-stage .home-facts dt,
  .home-stage .home-facts dd,
  .home-stage .home-portrait figcaption {
    color: #5c463c !important;
    text-shadow: none !important;
  }

  .home-stage .home-facts dd,
  .home-stage .home-place {
    color: #2b1d16 !important;
  }

  .home-stage a {
    color: #6b3a2a !important;
  }

  [data-theme="dark"] .home-stage h1.home-title,
  [data-theme="dark"] .home-stage .home-place,
  [data-theme="dark"] .home-stage .home-facts dd {
    color: #fff8f5 !important;
  }

  [data-theme="dark"] .home-stage p.home-lede,
  [data-theme="dark"] .home-stage .home-facts dt,
  [data-theme="dark"] .home-stage .home-portrait figcaption {
    color: #f3e4d4 !important;
  }

  .project-card .card-title {
    margin-top: -2rem;
    font-size: 1rem;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-panel,
  .glass-chip,
  .glass-orb,
  .glass-btn,
  .home-stage .home-sheet,
  .home-credit,
  #clear-drawing-btn,
  .mobile-menu-toggle,
  .site-assistant-launch,
  .related .related-card,
  .travel-globe-card,
  .travel-globe-panel,
  .travel-scheme,
  .travel-zoom,
  .project-card .card-title,
  .footer.footer-with-sunburst .sunburst-controls .time-option,
  .footer.footer-with-sunburst .sunburst-controls .play-pause button,
  .footer.footer-with-sunburst .sunburst-controls .sunburst-toggle-background {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(40, 34, 30, 0.88) !important;
  }
}