/* Shared layout scale — inset, surface margin, and section radius.
   Desktop: 60px inset, 60px radius, 20px surface margin.
   Mobile: 20px inset, fluid radius and surface margin to desktop values by 768px viewport. */
:root {
  --layout-inset: 60px;
  --layout-gutter: var(--layout-inset);
  --nav-shell-inset: var(--layout-inset);
  --rounded-section: 60px;
  --site-surface-margin: 20px;
  --btn-mkt-scale: 1;
}

@media (max-width: 767px) {
  :root {
    --layout-inset: 20px;
    --rounded-section: calc(12px + (100vw - 320px) * 48 / 448);
    --site-surface-margin: calc(4px + (100vw - 320px) * 16 / 448);
  }
}

@media (max-width: 320px) {
  :root {
    --rounded-section: 12px;
    --site-surface-margin: 4px;
  }
}

/* Sticky nav controls — shared across marketing pages */
.nav-hamburger-anchor {
  display: block;
  flex-shrink: 0;
  width: calc(3.375rem * var(--btn-mkt-scale));
  height: calc(3.375rem * var(--btn-mkt-scale));
}

.nav-hamburger {
  position: fixed;
  z-index: 900;
  margin: 0;
}

.nav-hamburger-icon {
  display: block;
  position: relative;
  width: var(--nav-hamburger-icon-width, calc(22.9px * var(--btn-mkt-scale, 1)));
  height: var(--nav-hamburger-icon-height, calc(14.3px * var(--btn-mkt-scale, 1)));
  flex-shrink: 0;
}

.nav-hamburger-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--surface);
}

.nav-hamburger-icon span:nth-child(1) { top: 0; }
.nav-hamburger-icon span:nth-child(2) { top: calc(6px * var(--btn-mkt-scale, 1)); }
.nav-hamburger-icon span:nth-child(3) { top: calc(12px * var(--btn-mkt-scale, 1)); }

/* Hamburger morphs to close (X) in place at every breakpoint. */
.nav-hamburger-icon span {
  transition:
    transform var(--motion-base, 260ms) var(--ease-standard, ease),
    opacity var(--motion-fast, 150ms) var(--ease-standard, ease),
    top var(--motion-base, 260ms) var(--ease-standard, ease);
}

html.nav-menu-open .nav-hamburger,
html.nav-menu-closing .nav-hamburger,
.nav-hamburger[aria-expanded="true"] {
  z-index: 1002;
  background: var(--ink);
  box-shadow: var(--btn-mkt-shadow);
}

.nav-hamburger[aria-expanded="true"] .nav-hamburger-icon span:nth-child(1) {
  top: calc(6px * var(--btn-mkt-scale, 1));
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.nav-hamburger[aria-expanded="true"] .nav-hamburger-icon span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger[aria-expanded="true"] .nav-hamburger-icon span:nth-child(3) {
  top: calc(6px * var(--btn-mkt-scale, 1));
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

html.nav-menu-locked {
  overflow: hidden;
}

html.nav-menu-locked body {
  overflow: hidden;
}

html.nav-menu-locked footer,
.nav-overlay.is-wipe-active ~ footer,
.nav-overlay.is-open ~ footer,
.nav-overlay.is-closing ~ footer {
  visibility: hidden;
}

.nav-hamburger,
.nav-close,
.nav-overlay,
.nav-overlay a {
  -webkit-tap-highlight-color: transparent;
}

.nav-hamburger:focus:not(:focus-visible),
.nav-close:focus:not(:focus-visible),
.nav-overlay a:focus:not(:focus-visible) {
  outline: none;
}

.nav-overlay.is-open ~ .site-surface .nav-shell,
.nav-overlay.is-closing ~ .site-surface .nav-shell {
  position: relative;
  z-index: 1000;
  pointer-events: none;
}

.nav-overlay.is-open ~ .site-surface.site-page--shop-home .nav-shell,
.nav-overlay.is-closing ~ .site-surface.site-page--shop-home .nav-shell,
.nav-overlay.is-open ~ .site-surface.site-page--shop-product .nav-shell,
.nav-overlay.is-closing ~ .site-surface.site-page--shop-product .nav-shell,
html.nav-menu-locked .site-page--shop-home .nav-shell,
html.nav-menu-locked .site-page--shop-product .nav-shell {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}

.nav-overlay.is-open ~ .site-surface .nav-hamburger,
.nav-overlay.is-closing ~ .site-surface .nav-hamburger,
.nav-overlay.is-open ~ .site-surface .nav-logo-link,
.nav-overlay.is-closing ~ .site-surface .nav-logo-link,
.nav-overlay.is-open ~ .site-surface .nav-logo--mobile,
.nav-overlay.is-closing ~ .site-surface .nav-logo--mobile {
  pointer-events: auto;
  z-index: 1001;
}

@media (min-width: 769px) {
  html.nav-menu-locked .site-surface {
    clip-path: none;
  }

  /* Drop the desktop menu content beneath the header. --nav-overlay-desktop-top
     is measured from the live .nav-shell height by nav-menu.js (falls back to --spacing-xl). */
  .nav-overlay .nav-overlay-body {
    padding-top: var(--nav-overlay-desktop-top, var(--spacing-xl));
  }
}

@media (max-width: 768px) {
  .site-surface {
    clip-path: none;
  }

  .nav-sticky-control {
    z-index: 1002;
  }

  footer {
    position: relative;
    z-index: 1;
  }
}

html.nav-menu-locked .site-surface .nav-shell {
  pointer-events: none;
}

html.nav-menu-locked .nav-hamburger,
html.nav-menu-locked .nav-logo-link {
  pointer-events: auto;
  z-index: 1002;
}

html.nav-menu-open .nav-hamburger,
html.nav-menu-closing .nav-hamburger {
  z-index: 1003;
}

html.nav-menu-open .nav-cart-btn,
html.nav-menu-open .nav-cart-anchor,
html.nav-menu-closing .nav-cart-btn,
html.nav-menu-closing .nav-cart-anchor,
.nav-overlay.is-open ~ .site-surface .nav-cart-btn,
.nav-overlay.is-open ~ .site-surface .nav-cart-anchor,
.nav-overlay.is-closing ~ .site-surface .nav-cart-btn,
.nav-overlay.is-closing ~ .site-surface .nav-cart-anchor {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Marketing nav pills (Shop / Make a Record) fade out while the menu is open,
   matching the cart button behavior so they never linger or scroll under the menu. */
.nav-right .btn {
  transition:
    background var(--motion-fast, 0.15s) var(--ease-standard, ease),
    color var(--motion-fast, 0.15s) var(--ease-standard, ease),
    box-shadow var(--motion-fast, 0.15s) var(--ease-standard, ease),
    opacity var(--motion-base, 0.3s) var(--ease-standard, ease),
    visibility var(--motion-base, 0.3s) var(--ease-standard, ease);
}

html.nav-menu-open .nav-right .btn,
html.nav-menu-closing .nav-right .btn,
.nav-overlay.is-open ~ .site-surface .nav-right .btn,
.nav-overlay.is-closing ~ .site-surface .nav-right .btn {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  :root {
    --btn-mkt-scale: 0.875;
    --heading-size-mobile: 32px;
    --toggle-pad: calc(6px * var(--btn-mkt-scale));
    --nav-overlay-wipe-duration: 0.52s;
    --nav-overlay-wipe-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-overlay-content-delay: 0.44s;
    --nav-overlay-content-duration: 0.38s;
    --nav-overlay-close-content-duration: 0.22s;
    --nav-overlay-cascade-stagger: 0.07s;
    --nav-overlay-close-wipe-delay: calc(var(--nav-overlay-cascade-stagger) * 3 + var(--nav-overlay-close-content-duration));
    --nav-overlay-logo-delay: 0.18s;
    --nav-overlay-logo-duration: 0.32s;
    --nav-overlay-logo-close-duration: 0.22s;
    --nav-overlay-mobile-pad-x: calc(var(--site-surface-margin) + var(--nav-shell-inset));
    --nav-overlay-logo-list-gap: var(--spacing-2xl);
    --nav-overlay-mobile-header-clearance: calc(
      var(--site-surface-margin) + var(--nav-shell-inset) +
      max(calc(3.375rem * var(--btn-mkt-scale)), 2.75rem) +
      var(--nav-overlay-logo-list-gap)
    );
    --photo-text-body-inset-x: var(--spacing-lg);
  }

  html body {
    font-size: 0.875rem;
  }

  .site-surface .t-body,
  .site-surface .hero-text p,
  .site-surface .colors-left__main > p,
  .site-surface .photo-text p,
  .site-surface .banner-xl__frame p {
    font-size: 0.875rem;
  }

  .site-surface .photo-text p {
    padding-inline: var(--photo-text-body-inset-x);
    box-sizing: border-box;
  }

  .nav {
    align-items: flex-start;
  }

  .nav-overlay.is-open ~ .site-surface .nav-logo--mobile,
  .nav-overlay.is-closing ~ .site-surface .nav-logo--mobile,
  html.nav-menu-open .nav-logo--mobile,
  html.nav-menu-closing .nav-logo--mobile {
    filter: brightness(0) invert(1);
  }

  .nav-overlay.is-open:not(.is-closing) ~ .site-surface .nav-logo-link,
  .nav-overlay.is-open:not(.is-closing) ~ .site-surface .nav-logo--mobile {
    animation: nav-overlay-logo-in var(--nav-overlay-logo-duration) var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
    animation-delay: var(--nav-overlay-logo-delay);
  }

  .nav-overlay.is-closing ~ .site-surface .nav-logo-link,
  .nav-overlay.is-closing ~ .site-surface .nav-logo--mobile {
    animation: nav-overlay-logo-out var(--nav-overlay-logo-close-duration) var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
  }

  html.nav-menu-logo-away .nav-overlay.is-open ~ .site-surface .nav-logo-link,
  html.nav-menu-logo-away .nav-overlay.is-open ~ .site-surface .nav-logo--mobile {
    animation: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s var(--nav-overlay-wipe-ease, cubic-bezier(0.22, 1, 0.36, 1));
  }

  html:not(.nav-menu-logo-away) .nav-overlay.is-open:not(.is-closing) ~ .site-surface .nav-logo-link,
  html:not(.nav-menu-logo-away) .nav-overlay.is-open:not(.is-closing) ~ .site-surface .nav-logo--mobile {
    transition: opacity 0.18s var(--nav-overlay-wipe-ease, cubic-bezier(0.22, 1, 0.36, 1));
  }

  html.nav-menu-open:not(.nav-menu-closing) .nav-logo-link,
  html.nav-menu-open:not(.nav-menu-closing) .nav-logo--mobile {
    animation: nav-overlay-logo-in var(--nav-overlay-logo-duration) var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
    animation-delay: var(--nav-overlay-logo-delay);
  }

  html.nav-menu-closing .nav-logo-link,
  html.nav-menu-closing .nav-logo--mobile {
    animation: nav-overlay-logo-out var(--nav-overlay-logo-close-duration) var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
  }

  html.nav-menu-logo-away.nav-menu-open .nav-logo-link,
  html.nav-menu-logo-away.nav-menu-open .nav-logo--mobile {
    animation: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s var(--nav-overlay-wipe-ease, cubic-bezier(0.22, 1, 0.36, 1));
  }

  html:not(.nav-menu-logo-away).nav-menu-open:not(.nav-menu-closing) .nav-logo-link,
  html:not(.nav-menu-logo-away).nav-menu-open:not(.nav-menu-closing) .nav-logo--mobile {
    transition: opacity 0.18s var(--nav-overlay-wipe-ease, cubic-bezier(0.22, 1, 0.36, 1));
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-overlay.is-open:not(.is-closing) ~ .site-surface .nav-logo-link,
    .nav-overlay.is-open:not(.is-closing) ~ .site-surface .nav-logo--mobile,
    .nav-overlay.is-closing ~ .site-surface .nav-logo-link,
    .nav-overlay.is-closing ~ .site-surface .nav-logo--mobile {
      animation: none;
      opacity: 1;
    }

    .nav-overlay.is-closing ~ .site-surface .nav-logo-link,
    .nav-overlay.is-closing ~ .site-surface .nav-logo--mobile {
      opacity: 0;
    }

    html.nav-menu-logo-away .nav-overlay.is-open ~ .site-surface .nav-logo-link,
    html.nav-menu-logo-away .nav-overlay.is-open ~ .site-surface .nav-logo--mobile {
      transition: none;
      opacity: 0;
    }

    html.nav-menu-open:not(.nav-menu-closing) .nav-logo-link,
    html.nav-menu-open:not(.nav-menu-closing) .nav-logo--mobile,
    html.nav-menu-closing .nav-logo-link,
    html.nav-menu-closing .nav-logo--mobile {
      animation: none;
      opacity: 1;
    }

    html.nav-menu-closing .nav-logo-link,
    html.nav-menu-closing .nav-logo--mobile {
      opacity: 0;
    }

    html.nav-menu-logo-away.nav-menu-open .nav-logo-link,
    html.nav-menu-logo-away.nav-menu-open .nav-logo--mobile {
      transition: none;
      opacity: 0;
    }
  }

  .nav-overlay {
    background: transparent;
    opacity: 1;
    transition: none;
    visibility: hidden;
  }

  .nav-overlay.is-open,
  .nav-overlay.is-closing {
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
  }

  .nav-overlay:not(.is-open):not(.is-closing) {
    pointer-events: none;
  }

  .nav-overlay .nav-overlay-panel {
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    transform: none;
    transition: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    background: transparent;
    isolation: isolate;
  }

  .nav-overlay.is-open .nav-overlay-panel,
  .nav-overlay.is-closing .nav-overlay-panel {
    background: transparent;
  }

  .nav-overlay.is-open.is-panel-filled:not(.is-closing) .nav-overlay-panel {
    background: var(--ink);
  }

  .nav-overlay .nav-overlay-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform-origin: top center;
    -webkit-transform-origin: top center;
    z-index: 0;
    will-change: transform;
    pointer-events: none;
  }

  .nav-overlay .nav-overlay-panel > * {
    position: relative;
    z-index: 1;
  }

  .nav-overlay:not(.is-open):not(.is-closing) .nav-overlay-panel::before {
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transition: none;
  }

  .nav-overlay.is-open .nav-overlay-panel::before {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transition: transform var(--nav-overlay-wipe-duration) var(--nav-overlay-wipe-ease);
    -webkit-transition: -webkit-transform var(--nav-overlay-wipe-duration) var(--nav-overlay-wipe-ease);
  }

  .nav-overlay.is-closing .nav-overlay-panel::before {
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transition: transform var(--nav-overlay-wipe-duration) var(--nav-overlay-wipe-ease);
    -webkit-transition: -webkit-transform var(--nav-overlay-wipe-duration) var(--nav-overlay-wipe-ease);
    transition-delay: var(--nav-overlay-close-wipe-delay);
    -webkit-transition-delay: var(--nav-overlay-close-wipe-delay);
  }

  .nav-overlay .nav-overlay-bar {
    display: none;
  }

  .nav-overlay-body {
    gap: var(--spacing-2xl);
    padding:
      calc(var(--nav-overlay-mobile-header-clearance) + env(safe-area-inset-top, 0px))
      var(--nav-overlay-mobile-pad-x)
      calc(var(--spacing-2xl) + env(safe-area-inset-bottom, 0px))
      var(--nav-overlay-mobile-pad-x);
  }

  .nav-overlay-section {
    gap: var(--spacing-md);
  }

  .nav-overlay-section .footer-col-title {
    font-size: 1.125rem;
    font-weight: 700;
  }

  .nav-overlay-section ul {
    gap: var(--spacing-md);
  }

  .nav-overlay-section ul a,
  .nav-overlay-section a.nav-overlay-link {
    font-size: 0.9375rem;
  }

  .nav-overlay-section .social-icons {
    margin-top: var(--spacing-xs);
    gap: var(--spacing-md);
  }

  .nav-overlay:not(.is-open):not(.is-closing) .nav-overlay-section {
    opacity: 0;
    transition: none;
  }

  .nav-overlay.is-open:not(.is-closing) .nav-overlay-section {
    animation: nav-overlay-fade-in var(--nav-overlay-content-duration) var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
    animation-delay: calc(var(--nav-overlay-content-delay) + var(--nav-cascade-delay, 0s));
  }

  .nav-overlay.is-closing .nav-overlay-section {
    animation: nav-overlay-fade-out var(--nav-overlay-close-content-duration) var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
    animation-delay: var(--nav-cascade-delay, 0s);
  }

  .nav-overlay-section:nth-child(1) { --nav-cascade-delay: 0s; }
  .nav-overlay-section:nth-child(2) { --nav-cascade-delay: 0.07s; }
  .nav-overlay-section:nth-child(3) { --nav-cascade-delay: 0.14s; }
  .nav-overlay-section:nth-child(4) { --nav-cascade-delay: 0.21s; }

  .nav-overlay.is-closing .nav-overlay-section:nth-child(1) { --nav-cascade-delay: 0.21s; }
  .nav-overlay.is-closing .nav-overlay-section:nth-child(2) { --nav-cascade-delay: 0.14s; }
  .nav-overlay.is-closing .nav-overlay-section:nth-child(3) { --nav-cascade-delay: 0.07s; }
  .nav-overlay.is-closing .nav-overlay-section:nth-child(4) { --nav-cascade-delay: 0s; }

  @keyframes nav-overlay-logo-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes nav-overlay-logo-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes nav-overlay-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes nav-overlay-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  .nav-right {
    align-self: flex-start;
  }

  .site-surface a.btn.btn-marketing,
  .site-surface button.btn.btn-marketing,
  .site-surface .nav-hamburger,
  .site-surface .nav-cart-btn,
  .nav-overlay .nav-close {
    min-height: calc(3.375rem * var(--btn-mkt-scale));
    padding: calc(14px * var(--btn-mkt-scale)) calc(28px * var(--btn-mkt-scale));
    font-size: calc(1rem * var(--btn-mkt-scale));
  }

  .site-surface .nav-cart-btn {
    gap: 0;
    justify-content: center;
    min-width: calc(3.375rem * var(--btn-mkt-scale));
    padding: calc(14px * var(--btn-mkt-scale));
  }

  .site-surface .nav-cart-btn__label {
    display: none;
  }

  .site-surface .nav-cart-btn__icon {
    display: block;
    width: calc(22.9px * var(--btn-mkt-scale));
    height: calc(22.9px * var(--btn-mkt-scale));
  }

  .site-surface .nav-cart-btn .nav-cart-indicator {
    position: absolute;
    top: calc(50% - var(--nav-hamburger-icon-width) / 2);
    left: calc(50% + var(--nav-hamburger-icon-width) / 2 + 2px);
    right: auto;
  }

  .site-surface .nav-hamburger img,
  .nav-overlay .nav-hamburger img {
    width: calc(22.9px * var(--btn-mkt-scale));
    height: calc(14.3px * var(--btn-mkt-scale));
  }

  .nav-hamburger-anchor,
  .nav-cart-anchor {
    width: calc(3.375rem * var(--btn-mkt-scale));
    height: calc(3.375rem * var(--btn-mkt-scale));
  }

  .site-surface .nav-cart svg,
  .nav-overlay .nav-cart svg {
    width: calc(48px * var(--btn-mkt-scale));
    height: calc(48px * var(--btn-mkt-scale));
  }

  .site-surface .nav-shell {
    padding-bottom: calc(var(--spacing-lg) * var(--btn-mkt-scale));
  }

  .site-surface .hero {
    padding-block: 0;
  }

  .site-surface .hero-image {
    height: 400px;
  }

  .site-surface .hero-text {
    padding-bottom: var(--spacing-lg);
  }

  .site-surface .hero-text h1 {
    font-size: min(12.5vw, 40px);
  }

  .site-surface .variant-toggle,
  .site-surface .faq-toggle {
    padding: calc(6px * var(--btn-mkt-scale));
  }

  .site-surface .variant-btn,
  .site-surface .faq-toggle-btn {
    min-height: calc(2.875rem * var(--btn-mkt-scale));
    font-size: calc(1rem * var(--btn-mkt-scale));
  }

  .site-surface .variant-btn {
    padding: calc(14px * var(--btn-mkt-scale)) calc(20px * var(--btn-mkt-scale));
  }

  .site-surface .faq-toggle-btn {
    padding: calc(14px * var(--btn-mkt-scale)) calc(8px * var(--btn-mkt-scale));
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-overlay .nav-overlay-panel::before,
    .nav-overlay-section {
      transition: none !important;
      animation: none !important;
    }

    .nav-overlay.is-open .nav-overlay-panel::before {
      transform: scaleY(1);
      -webkit-transform: scaleY(1);
    }

    .nav-overlay:not(.is-open):not(.is-closing) .nav-overlay-panel::before,
    .nav-overlay.is-closing .nav-overlay-panel::before {
      transform: scaleY(0);
      -webkit-transform: scaleY(0);
    }

    .nav-overlay.is-open:not(.is-closing) .nav-overlay-section {
      opacity: 1;
    }

    .nav-overlay.is-closing .nav-overlay-section,
    .nav-overlay:not(.is-open):not(.is-closing) .nav-overlay-section {
      opacity: 0;
    }
  }
}

@media (max-width: 860px) {
  .site-surface .colors-left__main h2,
  .site-surface .photo-text h2 {
    font-size: var(--heading-size-mobile, 32px);
  }
}