/* Shared glass: a uniform tint and light reflections over the backdrop. */
:root {
  --glass-tint: rgba(40, 28, 18, .13);
  --glass-background: radial-gradient(circle 240px at 50% 0%, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .04) 44%, transparent 100%), radial-gradient(120% 170% at 88% 120%, rgba(238, 225, 150, .08), transparent 58%), var(--glass-tint);
  --glass-filter: blur(24px) saturate(1.16) contrast(1.03);
  --glass-border: rgba(255, 250, 239, .18);
  --glass-border-top: rgba(255, 250, 239, .27);
  --glass-border-bottom: rgba(255, 250, 239, .1);
  --glass-inner-shadow: inset 0 1px 1px rgba(255, 253, 244, .12), inset 1px 0 2px rgba(255, 253, 244, .045), inset 0 -2px 5px rgba(18, 13, 8, .1), inset 0 0 24px rgba(255, 255, 255, .025);
  --glass-shadow: var(--glass-inner-shadow), 0 14px 38px rgba(0, 0, 0, .15), 0 0 22px rgba(238, 225, 150, .035);
  --glass-control-shadow: var(--glass-inner-shadow), 0 3px 8px rgba(13, 9, 6, .12);
  --card-shadow: 0 10px 28px -8px rgba(40, 28, 18, .22);
  --card-shadow-raised: 0 16px 34px -10px rgba(40, 28, 18, .28);
}

/* Clip reflected layers at the rounded surface when a preview scales the page.
   The element's own shadow stays outside. Scrolling menus and floating
   lightbox controls deliberately stay outside this group. */
:is(.site-nav, .works-nav, .works-filters, .profile-card, .contact-card,
    .projects-toolbar, .project-video, .project-placeholder, .notes-toolbar,
    .notes-empty, .site-menu-toggle, .menu-toggle) {
  overflow: clip;
}

@media (max-width: 1023px) {
  :is(.site-mobile-nav, .mobile-menu) { border-radius: 16px; }
  :is(.site-mobile-nav, .mobile-menu, .site-menu-toggle, .menu-toggle,
      .works-filters, .profile-card, .contact-card, .projects-toolbar,
      .project-video, .project-placeholder, .notes-toolbar, .notes-empty) {
    background: var(--glass-background);
    background-clip: padding-box;
    border: 2px solid var(--glass-border);
    border-top-color: var(--glass-border-top);
    border-bottom-color: var(--glass-border-bottom);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    box-shadow: var(--glass-shadow);
  }

  :is(.profile-card, .contact-card, .project-video, .project-placeholder,
      .notes-empty, .works-card[data-work-card]) {
    border: 2px solid var(--glass-border);
    border-top-color: var(--glass-border-top);
    border-bottom-color: var(--glass-border-bottom);
    box-shadow: var(--card-shadow);
  }

  /* The static reflection is enough on touch screens; no pointer glow layer. */
  :is(.site-mobile-nav, .mobile-menu, .site-menu-toggle, .menu-toggle,
      .works-filters, .profile-card, .contact-card, .projects-toolbar,
      .project-video, .project-placeholder, .notes-toolbar, .notes-empty)::after,
  .project-card::before { content: none; }

  :is(.site-mobile-nav, .mobile-menu) a {
    color: #fff9ef;
    min-height: 44px;
    line-height: 1.5;
    text-shadow: 0 1px 4px rgba(20, 14, 9, .6);
  }

  :is(.site-mobile-nav, .mobile-menu) a:is(:hover, :focus-visible, [aria-current="page"]) {
    color: #ffe292;
    background: rgba(40, 28, 18, .16);
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-menu { transition: none; }
  }

  .works-filter.is-active {
    color: #f4d35e;
    border-color: rgba(238, 225, 150, .12);
    background: rgba(238, 225, 150, .09);
    box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 4px 12px rgba(238, 225, 150, .07);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :is(.site-mobile-nav, .mobile-menu, .site-menu-toggle, .menu-toggle,
        .works-filters, .profile-card, .contact-card, .projects-toolbar,
        .project-video, .project-placeholder, .notes-toolbar, .notes-empty) {
      background: rgba(40, 28, 18, .94);
    }
  }

  @media (hover: none) {
    .works-card:hover,
    .project-video:hover,
    .contact-email:hover { transform: none; box-shadow: var(--card-shadow); }
    .works-card:hover img,
    .project-video:hover .project-cover { transform: none; filter: none; }
  }
}

@media (min-width: 1024px) {
  .works-lightbox {
    --frame-glass-filter: var(--glass-filter);
  }

  .works-lightbox::before {
    border-color: var(--glass-border);
    border-top-color: var(--glass-border-top);
    border-bottom-color: var(--glass-border-bottom);
    box-shadow: var(--glass-shadow);
  }

  /* This rim fades independently, preserving the frame's backdrop sampling. */
  .works-lightbox::after {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid transparent;
    border-top-color: rgba(255, 253, 245, .075);
    border-left-color: rgba(255, 253, 245, .035);
    border-bottom-color: rgba(18, 13, 8, .08);
    border-radius: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
  }

  .works-lightbox.is-open::after { opacity: 1; }

  .works-page-tab,
  .works-lightbox-close {
    --fluid-x: 50%;
    --fluid-y: 0%;
    --fluid-opacity: 0;
    background-color: transparent;
    border-color: rgba(255, 249, 234, .23);
    border-bottom-color: rgba(255, 249, 234, .14);
    box-shadow:
      inset 0 1px 1px rgba(255, 253, 244, .15),
      inset 1px 0 2px rgba(255, 253, 244, .055),
      inset 0 -2px 4px rgba(16, 12, 8, .12),
      0 3px 8px rgba(13, 9, 6, .12);
    transition: opacity .28s ease, color .3s ease, border-color .3s ease, box-shadow .35s ease;
  }

  .works-page-tab {
    color: rgba(255, 250, 240, .83);
    text-shadow: 0 1px 3px rgba(16, 12, 8, .14);
  }

  .works-page-tab:hover,
  .works-lightbox-close:hover {
    background-color: transparent;
    border-color: rgba(255, 249, 234, .3);
  }

  .works-page-tab[aria-pressed="true"],
  .works-page-tab[aria-pressed="true"]:hover {
    --page-glass-tint: rgba(255, 243, 218, .14);
    color: #fff9ed;
    font-weight: 600;
    border-color: rgba(255, 241, 207, .34);
    border-bottom-color: rgba(255, 241, 207, .2);
    box-shadow:
      inset 2px 0 2px rgba(255, 235, 183, .2),
      inset 0 1px 1px rgba(255, 253, 244, .2),
      inset 0 -2px 4px rgba(16, 12, 8, .09),
      0 3px 8px rgba(13, 9, 6, .12);
  }

  /* A narrow optical highlight, not a second full-surface blur layer. */
  @supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
    .works-page-tab::before,
    .works-lightbox-close::before,
    .works-page-tab::after,
    .works-lightbox-close::after {
      content: "";
      position: absolute;
      z-index: 1;
      inset: 0;
      padding: 1px;
      border-radius: inherit;
      pointer-events: none;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
    }

    .works-page-tab::before,
    .works-lightbox-close::before {
      background: linear-gradient(135deg, rgba(255, 252, 243, .17), rgba(255, 252, 243, .025) 32%, transparent 55%, rgba(228, 210, 174, .075));
    }

    .works-page-tab::after,
    .works-lightbox-close::after {
      padding: 2px;
      background: radial-gradient(circle 60px at var(--fluid-x) var(--fluid-y), rgba(255, 253, 245, .38), rgba(255, 253, 245, .12) 45%, transparent 80%);
      opacity: var(--fluid-opacity);
      transition: opacity .4s ease;
    }
  }

  :is(.site-nav, .works-nav) a:not(.site-profile):not(.works-profile)[aria-current="page"] {
    color: #f4d35e;
    border-color: rgba(238, 225, 150, .16);
    background: linear-gradient(145deg, rgba(255, 250, 228, .075), transparent 48%, rgba(31, 23, 12, .035)), rgba(238, 225, 150, .09);
    box-shadow: inset 0 1px rgba(255, 253, 244, .17), inset 0 -2px 3px rgba(18, 13, 8, .07), 0 2px 7px rgba(238, 225, 150, .035);
  }

  :is(.site-nav, .works-nav) a:not(.site-profile):not(.works-profile):is(:hover, :focus-visible) {
    border-color: rgba(255, 246, 218, .2);
    background: linear-gradient(145deg, rgba(255, 253, 241, .075), rgba(255, 253, 241, .025)), rgba(255, 250, 240, .025);
    box-shadow: inset 0 1px rgba(255, 253, 244, .18), inset 0 -1px 3px rgba(18, 13, 8, .06), 0 2px 7px rgba(238, 225, 150, .04);
  }

  :is(.site-nav, .works-nav) a:not(.site-profile):not(.works-profile):is(:hover, :focus, :focus-visible)::after {
    opacity: .42;
    transform: none;
  }

  .desktop-nav a { position: relative; isolation: isolate; }

  .desktop-nav a::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -8px -11px;
    border: 1px solid rgba(255, 249, 232, .15);
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255, 252, 241, .075), rgba(255, 252, 241, .02));
    box-shadow: inset 0 1px rgba(255, 253, 244, .12), inset 0 -1px 2px rgba(18, 13, 8, .045);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
  }

  .desktop-nav a:is(:hover, :focus-visible)::before { opacity: 1; }

  /* Replace older opaque washes rather than stacking a second tint on them.
     Media, page backdrops and the artwork-card template are separate surfaces. */
  :is(.site-nav, .works-nav, .works-filters, .profile-card, .contact-card,
      .projects-toolbar, .project-video, .project-placeholder, .notes-toolbar, .notes-empty),
  :is(.site-nav, .works-nav, .works-filters, .profile-card, .contact-card,
      .projects-toolbar, .project-video, .project-placeholder, .notes-toolbar, .notes-empty):is(:hover, :focus-within) {
    background: var(--glass-background);
    background-clip: padding-box;
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border-color: var(--glass-border);
    border-top-color: var(--glass-border-top);
    border-bottom-color: var(--glass-border-bottom);
    box-shadow: var(--glass-shadow);
  }

  /* Toolbars keep an inner rim; cards use their single outer outline. */
  :is(.projects-toolbar, .notes-toolbar)::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 1px;
    border: 1px solid transparent;
    border-top-color: rgba(255, 253, 245, .075);
    border-left-color: rgba(255, 253, 245, .035);
    border-bottom-color: rgba(18, 13, 8, .08);
    border-radius: inherit;
    pointer-events: none;
  }

  /* A brighter core stays legible on the pale courtyard backgrounds.
     Reuse the existing pointer layer and tracking; no extra blur or layer. */
  :is(.site-nav, .works-nav, .works-filters, .profile-card, .contact-card,
      .projects-toolbar, .project-video, .project-placeholder, .notes-toolbar, .notes-empty)::after {
    background: radial-gradient(circle 260px at var(--fluid-x) var(--fluid-y),
      rgba(255, 253, 245, .24) 0%,
      rgba(255, 253, 245, .16) 28%,
      rgba(255, 253, 245, .07) 58%,
      rgba(255, 253, 245, .02) 80%,
      transparent 100%);
    filter: none;
  }

  :is(.project-platform, .project-player-close),
  :is(.project-platform, .project-player-close):is(:hover, :focus-visible),
  .desktop-nav a::before {
    background: var(--glass-background);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border-color: var(--glass-border);
    border-top-color: var(--glass-border-top);
    border-bottom-color: var(--glass-border-bottom);
    box-shadow: var(--glass-control-shadow);
  }

  /* Keep the play disc clear, with a lighter blur and a visible optical rim. */
  .project-play,
  .project-play:is(:hover, :focus-visible),
  .project-video:is(:hover, :focus-within) .project-play {
    background: radial-gradient(circle 48px at 35% 0%, rgba(255, 253, 243, .025), transparent 65%), var(--glass-tint);
    -webkit-backdrop-filter: blur(10px) saturate(1.04);
    backdrop-filter: blur(10px) saturate(1.04);
    border-color: rgba(255, 250, 236, .3);
    border-top-color: rgba(255, 253, 243, .46);
    border-bottom-color: rgba(255, 250, 236, .17);
    box-shadow:
      inset 0 1px 2px rgba(255, 253, 243, .3),
      inset 0 -2px 4px rgba(18, 13, 8, .22),
      0 0 0 1px rgba(18, 13, 8, .1),
      0 2px 5px rgba(12, 9, 7, .24),
      0 8px 20px rgba(12, 9, 7, .28);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
  }

  .project-play svg {
    filter: drop-shadow(0 1px 2px rgba(12, 9, 7, .3));
  }

  /* Small controls retain the shared tint for their white labels. */
  :is(.works-page-tab, .works-lightbox-close),
  :is(.works-page-tab, .works-lightbox-close):hover {
    background-color: var(--glass-tint);
  }

  /* Match the navigation's fine outline, with only a soft, distant shadow. */
  :is(.project-video, .project-placeholder, .notes-empty, .profile-card, .contact-card),
  :is(.project-video, .project-placeholder, .notes-empty, .profile-card, .contact-card):is(:hover, :focus-within) {
    border-width: 2px;
    border-color: var(--glass-border);
    border-top-color: var(--glass-border-top);
    border-bottom-color: var(--glass-border-bottom);
    box-shadow: var(--card-shadow);
  }

  /* Keep both contact cards consistent; other informational cards stay still. */
  .project-video,
  .contact-card {
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }

  .project-video:is(:hover, :focus-within),
  .contact-card:is(:hover, :focus-visible) {
    transform: translateY(-6px);
    border-top-color: var(--glass-border-top);
    box-shadow: var(--card-shadow-raised);
  }

  a.contact-card:focus-visible {
    outline: 2px solid rgba(244, 211, 94, .75);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .project-video,
    .contact-card { transition: none; }
    .project-video:is(:hover, :focus-within),
    .contact-card:is(:hover, :focus-visible) { transform: none; }

    .works-lightbox::after,
    .works-page-tab,
    .works-lightbox-close,
    .works-page-tab::after,
    .works-lightbox-close::after,
    .desktop-nav a::before,
    .project-play,
    .project-play:is(:hover, :focus-visible),
    .project-video:is(:hover, :focus-within) .project-play { transition: none; }
  }
}