/* Isolated to the nine desktop navigation controls; the tree never matches. */
@media (min-width: 768px) {
  body > nav.clay-site-nav { --mtc-height: clamp(34px, calc(34px + (100vw - 1280px) * .0125), 36px); }
  body > nav.clay-site-nav .top-nav-list > li > .mtc-button {
    position: relative; display: inline-flex !important; align-items: center; justify-content: center;
    width: calc(var(--mtc-height) * var(--mtc-ratio)) !important;
    height: var(--header-nav-height, 40px) !important; min-height: 0 !important;
    flex: none; margin: 0 !important; padding: 0 !important; border: 0 !important;
    border-radius: 8px; background: transparent !important; box-shadow: none !important;
    transform: none !important; filter: none !important; transition: none !important;
    overflow: visible !important; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
    user-select: none; cursor: pointer;
  }
  body > nav.clay-site-nav .mtc-button::before,
  body > nav.clay-site-nav .mtc-button::after,
  body > nav.clay-site-nav .mtc-button .clay-imprint { display: none !important; }
  body > nav.clay-site-nav .mtc-visual {
    display: block; position: relative; width: 100%; height: var(--mtc-height);
    aspect-ratio: var(--mtc-ratio); pointer-events: none;
    transition: transform 150ms ease, filter 150ms ease;
  }
  body > nav.clay-site-nav :is(.mtc-poster, .mtc-canvas) {
    display: block; width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 3px 3px rgba(0, 34, 43, .23));
  }
  body > nav.clay-site-nav .mtc-canvas { position: absolute; inset: 0; visibility: hidden; }
  body > nav.clay-site-nav .mtc-button[data-mtc-ready="true"] .mtc-canvas { visibility: visible; }
  body > nav.clay-site-nav .mtc-button[data-mtc-ready="true"] .mtc-poster { visibility: hidden; }
  body > nav.clay-site-nav .mtc-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body > nav.clay-site-nav .mtc-button:focus-visible { outline: 2px solid #c8fff3 !important; outline-offset: 3px; }
  body > nav.clay-site-nav .mtc-button[data-mtc-error="true"] .mtc-label { width: auto; height: auto; margin: 0; clip-path: none; color: #fffaf3; font-size: 11px; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  body > nav.clay-site-nav { --mtc-height: clamp(32px, calc(32px + (100vw - 769px) * .025), 38px); }
}
/* At the site's exact md breakpoint the old desktop artwork stylesheet is not active. */
@media (min-width: 768px) and (max-width: 768px) {
  body > nav.clay-site-nav .top-nav-layout { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 8px; padding-block: 9px; }
  body > nav.clay-site-nav .top-nav-left { display: grid; grid-template-columns: repeat(2, max-content); gap: 5px; }
  body > nav.clay-site-nav .top-nav-right { display: flex; flex-wrap: wrap; gap: 5px; }
  body > nav.clay-site-nav .top-nav-list { margin: 0; padding: 0; list-style: none; }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  body > nav.clay-site-nav .mtc-button:not(.mtc-held):hover .mtc-visual { transform: translateY(-2px) scale(1.02); filter: drop-shadow(0 2px 3px rgba(0,31,42,.15)); }
}
@media (prefers-reduced-motion: reduce) {
  body > nav.clay-site-nav .mtc-visual { transition: none; }
  body > nav.clay-site-nav .mtc-button:hover .mtc-visual { transform: none !important; }
}

/* V2: larger, consistently scaled photos in the existing left/logo/right layout. */
@media (min-width: 769px) {
  body > nav.clay-site-nav { --mtc-height: clamp(48px, calc(48px + (100vw - 1024px) * .015), 54px); }
  body > nav.clay-site-nav .top-nav-left { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  body > nav.clay-site-nav .top-nav-right { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 10px; }
  body > nav.clay-site-nav .top-nav-list > li { min-width: 0; }
  body > nav.clay-site-nav .top-nav-list > li { width: 100%; max-width: 100%; }
  body > nav.clay-site-nav .top-nav-left > li:nth-child(even) { justify-self: end; }
  body > nav.clay-site-nav .top-nav-left > li:nth-child(even) > .mtc-button,
  body > nav.clay-site-nav .top-nav-right > li:nth-child(2) > .mtc-button,
  body > nav.clay-site-nav .top-nav-right > li:nth-child(5) > .mtc-button { margin-left: auto !important; }
  body > nav.clay-site-nav .top-nav-right > li:nth-child(4) > .mtc-button { margin-inline: auto !important; }
  body > nav.clay-site-nav .top-nav-right > li:nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
  body > nav.clay-site-nav .top-nav-right > li:nth-child(2) { grid-area: 1 / 4 / 2 / 7; justify-self: end; }
  body > nav.clay-site-nav .top-nav-right > li:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }
  body > nav.clay-site-nav .top-nav-right > li:nth-child(4) { grid-area: 2 / 3 / 3 / 5; justify-self: center; }
  body > nav.clay-site-nav .top-nav-right > li:nth-child(5) { grid-area: 2 / 5 / 3 / 7; justify-self: end; }
  body > nav.clay-site-nav .top-nav-list > li > .mtc-button { display: flex !important; height: var(--mtc-height) !important; max-width: 100%; }
  body > nav.clay-site-nav .mtc-visual { height: auto; }
  body > header:not(.mobile-header) .header-actions > .mtc-cta {
    --mtc-height: 54px; position: relative; display: inline-flex; flex: none;
    align-items: center; justify-content: center;
    width: calc(var(--mtc-height) * var(--mtc-ratio)) !important; height: var(--mtc-height) !important;
    min-height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important;
    border-radius: 12px; background: transparent !important; box-shadow: none !important;
    transform: none !important; filter: none !important; transition: none !important;
    overflow: visible; touch-action: pan-y; -webkit-tap-highlight-color: transparent; cursor: pointer;
  }
  body > header:not(.mobile-header) .mtc-cta::before,
  body > header:not(.mobile-header) .mtc-cta::after,
  body > header:not(.mobile-header) .mtc-cta .clay-imprint { display: none !important; }
  body > header:not(.mobile-header) .mtc-visual { position: relative; display: block; width: 100%; aspect-ratio: var(--mtc-ratio); pointer-events: none; transition: transform 150ms ease, filter 150ms ease; }
  body > header:not(.mobile-header) :is(.mtc-poster,.mtc-canvas) { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,34,43,.23)); }
  body > header:not(.mobile-header) .mtc-canvas { position: absolute; inset: 0; visibility: hidden; }
  body > header:not(.mobile-header) .mtc-button[data-mtc-ready="true"] .mtc-canvas { visibility: visible; }
  body > header:not(.mobile-header) .mtc-button[data-mtc-ready="true"] .mtc-poster { visibility: hidden; }
  body > header:not(.mobile-header) .mtc-cta:focus-visible { outline: 2px solid #c8fff3 !important; outline-offset: 3px; }
  body > header:not(.mobile-header) .mtc-cta[data-mtc-error="true"] .mtc-label { width: auto; height: auto; margin: 0; clip-path: none; color: #fffaf3; }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  body > header:not(.mobile-header) .mtc-button:not(.mtc-held):hover .mtc-visual { transform: translateY(-2px) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  body > header:not(.mobile-header) .mtc-visual { transition: none; }
  body > header:not(.mobile-header) .mtc-button:hover .mtc-visual { transform: none !important; }
}

/* V3: one row; size from the actual available half-width, preserving photo ratios. */
@media (min-width: 769px) {
  body > nav.clay-site-nav > div { max-width: none; padding-inline: 8px; container-type: inline-size; }
  body > nav.clay-site-nav .top-nav-layout {
    --mtc-height: min(48px, calc((100cqw - var(--header-logo-desktop-size) - 52px) / 31.0625));
    grid-template-columns: minmax(0, 1fr) calc(var(--header-logo-desktop-size) + 12px) minmax(0, 1fr);
    column-gap: 8px; padding-block: 9px;
  }
  body > nav.clay-site-nav :is(.top-nav-left, .top-nav-right) {
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 4px;
  }
  body > nav.clay-site-nav .top-nav-list > li {
    grid-area: auto; width: auto; flex: none; max-width: none;
  }
  body > nav.clay-site-nav .top-nav-list > li > .mtc-button { margin: 0 !important; }
}