/* =========================================================
   Amenaboze — Global Styles
   Black jewelry box / digital gallery aesthetic
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #000000;
  --bg-elevated: #0a0a0a;
  --text-primary: #f5f5f5;
  --text-secondary: #b3b3b3;
  --text-muted: #8a8a8a;
  --silver-light: #f2f2f2;
  --silver-mid: #b8b8bc;
  --silver-dark: #8d8d92;
  --accent-purple: #2a1f3d;
  --accent-purple-glow: rgba(106, 80, 158, 0.25);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --radius-md: 10px;
  --radius-lg: 18px;
  --max-width: 1100px;
  --header-height: 64px;
  --mono: "IBM Plex Mono", monospace;
  --release-cover-size: 480px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--text-primary);
  text-decoration: none;
}

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 0.5em;
}

p {
  color: var(--text-secondary);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* =========================================================
   Header / Logo
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.site-header.header-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.logo {
  display: block;
  line-height: 0;
}

/* Mobile logo — constrained so header stays 80–110px tall */
.logo-img {
  width: clamp(170px, 50vw, 240px);
  height: auto;
  filter: invert(1) brightness(0.95) drop-shadow(0 0 12px rgba(200, 200, 220, 0.22));
  transition: filter 0.2s ease;
}

.logo:hover .logo-img,
.logo:focus-visible .logo-img {
  filter: invert(1) brightness(1) drop-shadow(0 0 18px rgba(200, 200, 240, 0.38));
}

/* =========================================================
   Chrome logo — CSS mask + metallic silver gradient
   SVG viewBox 555×238 → aspect-ratio matches exactly
   mask URL is relative to styles.css (root), works for all pages
   ========================================================= */

.brand-logo-chrome {
  display: block;
  width: clamp(170px, 50vw, 240px);
  aspect-ratio: 555 / 238;
  background: linear-gradient(
    115deg,
    #b8b8c8 0%,
    #eeeef8 8%,
    #d2d2e2 16%,
    #ffffff 25%,
    #c0c0d2 33%,
    #eaeaf4 43%,
    #d6d6e6 53%,
    #ffffff 62%,
    #cacad8 72%,
    #eaeaf2 83%,
    #d0d0de 92%,
    #e6e6f0 100%
  );
  -webkit-mask: url("assets/logo/amenaboze-signature.svg") center / contain no-repeat;
  mask: url("assets/logo/amenaboze-signature.svg") center / contain no-repeat;
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 10px rgba(160, 160, 190, 0.10));
  transition: filter 0.4s ease;
}

.logo:hover .brand-logo-chrome,
.logo:focus-visible .brand-logo-chrome {
  filter:
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.32))
    drop-shadow(0 0 18px rgba(180, 180, 210, 0.16));
}

/* =========================================================
   Hamburger button
   ========================================================= */

.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--silver-light);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* =========================================================
   Side drawer navigation
   ========================================================= */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(78vw, 320px);
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-strong);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.drawer.is-open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.drawer-close {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-nav a {
  display: block;
  padding: 14px 10px;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--silver-light);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.drawer-nav a:hover,
.drawer-nav a:focus-visible {
  background: rgba(255, 255, 255, 0.05);
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--silver-light);
  color: #000;
}

.btn-primary:hover {
  opacity: 0.88;
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
}

.btn-block {
  width: 100%;
}

/* =========================================================
   Eyebrow / section labels
   ========================================================= */

.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.section-title {
  font-family: var(--mono);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* =========================================================
   Hero / current drop layout
   ========================================================= */

main {
  padding-bottom: 60px;
}

.current-drop {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px 0;
}

.drop-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}

.drop-column .cover-link {
  display: block;
}

.drop-column img {
  width: 100%;
  height: auto;
  display: block;
}

.drop-column .product-image {
  max-width: none;
  margin: 0;
}

/* =========================================================
   Shopify buy button placeholder
   ========================================================= */

.buy-button-placeholder {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  background: linear-gradient(180deg, var(--accent-purple-glow), transparent);
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.buy-button-placeholder strong {
  display: block;
  color: var(--silver-light);
  margin-bottom: 8px;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

/* Shopify Buy Button live embed wrapper */
.shopify-buy-button-wrap {
  margin: 0;
  width: 100%;
  display: block;
}

.shopify-buy-button-wrap > div {
  display: block;
  width: 100%;
}

/* iframe:false — Shopify renders product button directly in DOM.
   Target the frame wrapper and button elements Shopify creates. */
.shopify-buy-button-wrap .shopify-buy-frame,
.shopify-buy-button-wrap .shopify-buy-frame--product {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

.shopify-buy-button-wrap .shopify-buy__btn-wrapper {
  display: block;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

/* Strip Shopify product layout wrapper padding/margin */
.shopify-buy-button-wrap .shopify-buy__product {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Match .btn + .btn-primary + .btn-block exactly */
.shopify-buy-button-wrap .shopify-buy__btn {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 48px !important;
  padding: 14px 28px !important;
  font-family: var(--mono) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  background-color: var(--silver-light) !important;
  color: #000 !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: opacity 0.15s ease !important;
  line-height: 1 !important;
}

.shopify-buy-button-wrap .shopify-buy__btn:hover {
  opacity: 0.88 !important;
  background-color: var(--silver-light) !important;
}

.shopify-buy-button-wrap .shopify-buy__btn:active {
  transform: scale(0.97) !important;
}

/* Fallback: if iframe mode is ever re-enabled */
.shopify-buy-button-wrap iframe {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.shop-link {
  align-self: flex-start;
  color: var(--silver-mid);
  text-decoration: underline;
  font-size: 0.9rem;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* =========================================================
   Era photo section
   ========================================================= */

.era-section {
  padding: 20px 0 32px;
  text-align: center;
}

.era-photo {
  width: 100%;
  margin: 0 0 24px;
}

.era-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   Social links
   ========================================================= */

.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 16px 0 40px;
}

.social-links a {
  padding: 10px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.social-links a:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* =========================================================
   Watch / YouTube section
   ========================================================= */

.watch-section {
  padding: 32px 0;
}

.watch-section .section-title {
  margin-bottom: 16px;
}

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  margin-bottom: 16px;
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
   Music video carousel — feature card style
   ========================================================= */

.carousel-section {
  padding: 32px 0;
}

.carousel-section .section-title {
  margin-bottom: 16px;
}

.carousel {
  position: relative;
}

.carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

/* Feature-width cards for homepage and videos page */
.video-feature-card {
  flex: 0 0 min(85vw, 560px);
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.video-feature-card:hover {
  border-color: var(--border-strong);
}

.video-feature-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.video-feature-card-label {
  padding: 14px 16px;
}

.video-feature-card-label .card-title {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.video-feature-card-label .card-sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* Legacy small cards (kept for fallback) */
.video-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.video-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.video-card-label {
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

.video-card-label span {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.carousel-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* =========================================================
   Videos page — three-tier layout
   ========================================================= */

.video-tier {
  padding: 32px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.video-tier:last-child {
  border-bottom: none;
}

.tier-heading {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin: 0 0 20px;
}

/* placeholder card for BTS / press tiers */
.video-placeholder-card {
  flex: 0 0 min(85vw, 560px);
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(160deg, #080810 0%, #0d0d1a 100%);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.video-placeholder-card .placeholder-eyebrow {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: 2px;
}

/* coming-soon card for Two Boyfriends music video */
.video-coming-soon-card {
  flex: 0 0 min(85vw, 560px);
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: linear-gradient(160deg, #08080f 0%, #12121e 100%);
  text-decoration: none;
  transition: border-color 0.2s ease;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-coming-soon-card:hover {
  border-color: var(--border-strong);
}

.video-coming-soon-card .coming-soon-inner {
  text-align: center;
  padding: 24px;
}

.video-coming-soon-card .card-title {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--silver-mid);
  margin: 0 0 12px;
}

.video-coming-soon-card .card-sub {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-muted);
}

/* release list — music page */
.release-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.release-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.release-item--current {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.03);
}

.release-date {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  white-space: nowrap;
}

.release-item--current .release-date {
  color: var(--silver-mid);
}

/* Link fills the release-item row — inherits all item styling */
.release-item-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.release-item:hover {
  border-color: var(--border-strong);
}

.release-item--current:hover {
  border-color: rgba(255, 255, 255, 0.36);
}

/* =========================================================
   Generic page sections (music/videos/about/contact)
   ========================================================= */

.page-header {
  padding: 40px 0 20px;
}

.page-header h1 {
  font-family: var(--mono);
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.block {
  padding: 24px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.block:last-child {
  border-bottom: none;
}

.placeholder-box {
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.placeholder-box a {
  color: var(--silver-mid);
  text-decoration: underline;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.contact-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
}

.contact-card h3 {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--silver-light);
}

.contact-card a {
  color: var(--text-secondary);
  text-decoration: underline;
}

footer {
  text-align: center;
  padding: 0 0 28px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* =========================================================
   Footer social / platform links — shared across all pages
   ========================================================= */

.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  padding: 20px 20px 16px;
  border-top: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}

.footer-social a {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color 0.2s ease;
}

.footer-social a:hover {
  color: var(--silver-mid);
}

/* =========================================================
   Music page — release toggle feature layout
   ========================================================= */

/* Cover art fills its wrapper; sizing controlled by wrapper */
.current-single-cover {
  display: block;
  width: 100%;
}

.current-single-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.current-single-cover:hover img {
  opacity: 0.9;
}

/* Feature layout: column on mobile, row on desktop */
.release-feature-layout {
  padding: 24px 0 32px;
}

/* Cover area: centered block on mobile, arrows overlay image edges */
.release-cover-area {
  position: relative;
  width: 90vw;
  max-width: 480px;
  margin: 0 auto 20px;
}

.release-cover-slides-wrap {
  width: 100%;
}

.release-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.55);
  color: var(--text-primary);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.release-arrow:hover {
  background: rgba(0, 0, 0, 0.78);
}

/* Arrows float over the cover art sides on mobile */
.release-cover-area .release-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.release-cover-area [data-release-prev] { left: 10px; }
.release-cover-area [data-release-next] { right: 10px; }

/* JS toggles [hidden] on slides */
.release-cover-slide[hidden],
.release-info-slide[hidden],
.release-slide[hidden] {
  display: none;
}

.release-info-slide {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Centered stacked release feature wrapper */
.release-centered-feature {
  padding: 24px 0 32px;
}

.release-slide-full[hidden] {
  display: none;
}

.release-cover-frame {
  width: 100%;
}

.release-centered-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: var(--release-cover-size);
  margin: 0 auto;
  padding-top: 8px;
}

/* Placeholder cover for releases without real art yet */
.current-single-cover--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, #0d0d18 0%, #1a1a2c 100%);
  outline: 1px solid rgba(255, 255, 255, 0.13);
}

.release-placeholder-label {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

.streaming-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.streaming-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.streaming-link:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* =========================================================
   Shop / Amilhouette product page
   ========================================================= */

.product-page {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px 0;
}

.product-image {
  max-width: var(--release-cover-size);
  margin: 0 auto;
}

.product-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Subtle 1px edge outline on real photo assets — makes edges readable on black */
.drop-column img,
.era-photo img,
.current-single-cover img,
.product-image img,
.video-feature-card img,
.about-photo {
  outline: 1px solid rgba(255, 255, 255, 0.13);
  outline-offset: 0;
}

.product-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-details h1.section-title {
  font-size: 2rem;
}

.back-link {
  color: var(--text-secondary);
  text-decoration: underline;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* =========================================================
   Contact form
   ========================================================= */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.form-input {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--text-primary);
  font-family: "IBM Plex Mono", "Courier New", monospace !important;
  font-size: 0.875rem;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s ease;
  width: 100%;
  -webkit-appearance: none;
}

.form-input:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

.form-input::placeholder,
.form-input::-webkit-input-placeholder,
.form-input::-moz-placeholder {
  color: var(--text-muted);
  font-family: "IBM Plex Mono", "Courier New", monospace !important;
}

/* Broad contact form font lock — catches any browser autofill / UA overrides */
.contact-form,
.contact-form *,
.contact-form input,
.contact-form textarea,
.contact-form button,
.contact-form label {
  font-family: "IBM Plex Mono", "Courier New", monospace !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder,
.contact-form input::-webkit-input-placeholder,
.contact-form textarea::-webkit-input-placeholder,
.contact-form input::-moz-placeholder,
.contact-form textarea::-moz-placeholder {
  font-family: "IBM Plex Mono", "Courier New", monospace !important;
  color: var(--text-muted);
}

.contact-form button[type="submit"] {
  font-family: "IBM Plex Mono", "Courier New", monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

.form-textarea {
  resize: vertical;
  min-height: 130px;
}

.form-feedback {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid;
}

.form-feedback--success {
  color: #9ec89e;
  border-color: rgba(100, 180, 100, 0.28);
  background: rgba(50, 100, 50, 0.08);
}

.form-feedback--error {
  color: #c89e9e;
  border-color: rgba(180, 80, 80, 0.28);
  background: rgba(100, 30, 30, 0.08);
}

/* =========================================================
   About page
   ========================================================= */

.about-tagline {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.3rem;
  font-style: italic;
  color: var(--silver-light);
  letter-spacing: 0.02em;
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
  line-height: 1.6;
}

/* About page — bio + photo grid */
.about-bio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

/* Wrapper exists only to carry height on desktop; collapses naturally on mobile */
.about-photo-wrap {
  line-height: 0;
}

.about-photo {
  width: 100%;
  height: auto;
  display: block;
}

.about-text-col .section-title {
  margin-bottom: 20px;
}

/* About page — copy typography */
.about-copy p {
  font-family: var(--mono);
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.9;
  margin: 0 0 1.25em;
}

.about-copy p:last-child {
  margin-bottom: 0;
}

/* About page — The World section (centered block) */
.about-world-section {
  text-align: center;
}

.about-world-copy {
  max-width: 580px;
  margin: 0 auto;
}

/* =========================================================
   Desktop layout
   ========================================================= */

@media (min-width: 800px) {
  :root {
    --release-cover-size: clamp(432px, 50vw, 612px);
  }

  /* Desktop logo — larger but capped so header stays ~100–130px */
  .logo-img {
    width: clamp(220px, 24vw, 320px);
  }

  .brand-logo-chrome {
    width: clamp(220px, 24vw, 320px);
  }

  .current-drop {
    flex-direction: row;
    align-items: stretch;
  }

  .drop-column {
    flex: 1;
  }

  /* Push CTAs to the same baseline — both columns stretch to equal height,
     auto margin above each button absorbs the remaining space */
  .drop-column .btn-block,
  .drop-column .shopify-buy-button-wrap {
    margin-top: auto;
  }

  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Release cover area — centered flex row with flanking arrows on desktop */
  .release-cover-area {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: auto;
    max-width: none;
    margin-bottom: 20px;
  }

  .release-cover-frame {
    width: var(--release-cover-size);
    flex: 0 0 auto;
  }

  /* Pre-save/listen button stretches to match cover art width */
  .release-centered-info .btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Arrows in-flow on desktop */
  .release-cover-area .release-arrow {
    position: static;
    transform: none;
    background: var(--bg-elevated);
    border-color: var(--border-strong);
  }

  .release-cover-area .release-arrow:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* =========================================================
   About page — two-column layout (wider breakpoint so
   it doesn't feel cramped at medium widths)
   ========================================================= */

@media (min-width: 960px) {
  .about-bio-grid {
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: stretch;
  }

  /* Photo column stretches to full height of text column via grid stretch */
  .about-photo-col {
    display: flex;
    flex-direction: column;
  }

  /* Wrap becomes a flex container so the img fills it via flex: 1 —
     more reliable than height: 100% through nested flex/grid levels */
  .about-photo-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
  }

  /* Anchor to bottom: crops from top, preserving feet/shoes */
  .about-photo {
    flex: 1;
    min-width: 0;
    width: 100%;
    object-fit: cover;
    object-position: center bottom;
  }
}

/* =========================================================
   Klaviyo footer signup — shared across all pages
   ========================================================= */

.footer-signup {
  background: #000;
  text-align: center;
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Flex column — gap is the single source of truth for all vertical spacing */
.footer-signup-inner {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer-signup-heading {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-light);
  margin: 0;
  line-height: 1;
}

/* =========================================================
   Klaviyo embed overrides — match site luxury button style
   ========================================================= */

/* Strip container chrome on every Klaviyo-classed element */
.footer-signup [class*="klaviyo"],
.footer-signup .klaviyo-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* Exact embed div — clear any leftover transforms and fully collapse box.
   Flex column so any constrained-width Klaviyo child div is horizontally centered. */
.footer-signup .klaviyo-form-UULXq8 {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Wildcard: zero ALL margin and padding on every non-interactive element
   Klaviyo injects — kills both top AND bottom dead space */
.footer-signup .klaviyo-form-UULXq8 *:not(input):not(button):not(label) {
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Form and its direct children */
.footer-signup .klaviyo-form-UULXq8 form,
.footer-signup .klaviyo-form-UULXq8 form > * {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Catch data-testid and camelCase/lowercase class blocks Klaviyo uses.
   margin: 0 auto centers any Klaviyo wrapper that has a constrained width.
   These selectors are specificity (0,3,0) — higher than the wildcard (0,2,3) —
   so they must also use 0 auto, or they'd override the wildcard's centering. */
.footer-signup .klaviyo-form-UULXq8 [data-testid],
.footer-signup .klaviyo-form-UULXq8 [class*="Form"],
.footer-signup .klaviyo-form-UULXq8 [class*="form"] {
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: 0 !important;
  /* width intentionally omitted — setting 100% here hits individual field
     wrappers inside the flex row and breaks the input/button side-by-side layout */
}

/* Form row — nowrap on desktop so input and button stay on one line */
.footer-signup form {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

/* Email / text inputs */
.footer-signup input[type="email"],
.footer-signup input[type="text"] {
  font-family: "IBM Plex Mono", "Courier New", monospace !important;
  background: #f2f2f2 !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  padding: 0 18px !important;
  height: 40px !important;
  min-height: 40px !important;
  min-width: 200px !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
}

.footer-signup input[type="email"]::placeholder,
.footer-signup input[type="text"]::placeholder {
  color: #666666 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 11px !important;
}

/* Hide Klaviyo's hidden fallback input[type="submit"] — our display !important
   was overriding Klaviyo's own display:none on it, making it appear as a
   second "SUBMIT" button alongside the real <button> element */
.footer-signup .klaviyo-form-UULXq8 input[type="submit"] {
  display: none !important;
}

/* Real JOIN button — target <button> elements only, not input[type="submit"] */
.footer-signup .klaviyo-form-UULXq8 button,
.footer-signup button[type="submit"],
.footer-signup button.needsclick {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-family: "IBM Plex Mono", "Courier New", monospace !important;
  background-color: #16091f !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  padding: 0 24px !important;
  height: 40px !important;
  min-height: 40px !important;
  min-width: 110px !important;
  width: auto !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  white-space: nowrap !important;
  overflow: visible !important;
  line-height: 1 !important;
}

.footer-signup .klaviyo-form-UULXq8 button:hover,
.footer-signup button[type="submit"]:hover,
.footer-signup button.needsclick:hover {
  background-color: #2a1238 !important;
  color: #ffffff !important;
}

/* Force white on any nested spans Klaviyo injects inside the button */
.footer-signup .klaviyo-form-UULXq8 button *,
.footer-signup button[type="submit"] *,
.footer-signup button.needsclick * {
  color: #ffffff !important;
  font-family: "IBM Plex Mono", "Courier New", monospace !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Error / success messages — scoped to <p> only, not <span>, to avoid
   catching button label text that Klaviyo may wrap in a span */
.footer-signup [class*="klaviyo"] p {
  font-family: "IBM Plex Mono", "Courier New", monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-secondary) !important;
}

/* Mobile: stack input and button when viewport is narrow */
@media (max-width: 540px) {
  .footer-signup form {
    flex-wrap: wrap !important;
    flex-direction: column !important;
  }
  .footer-signup input[type="email"],
  .footer-signup input[type="text"] {
    width: 100% !important;
    min-width: 0 !important;
  }
  .footer-signup button[type="submit"],
  .footer-signup button.needsclick {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* =========================================================
   Klaviyo success state — post-subscription confirmation
   Text copy is set in Klaviyo dashboard: Forms → UULXq8.
   JS adds .has-klaviyo-success to .footer-signup on success.
   ========================================================= */

/* Hide "JOIN THE WORLD" once Klaviyo confirms subscription */
.footer-signup.has-klaviyo-success .footer-signup-heading {
  display: none !important;
}

/* Success container: strip all Klaviyo chrome */
.footer-signup .klaviyo-form-UULXq8 [class*="success"],
.footer-signup .klaviyo-form-UULXq8 [class*="Success"],
.footer-signup .klaviyo-form-UULXq8 [class*="thankYou"],
.footer-signup .klaviyo-form-UULXq8 [class*="ThankYou"],
.footer-signup .klaviyo-form-UULXq8 [data-testid*="success"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Every descendant: IBM Plex Mono, off-white, no chrome */
.footer-signup .klaviyo-form-UULXq8 [class*="success"] *,
.footer-signup .klaviyo-form-UULXq8 [class*="Success"] *,
.footer-signup .klaviyo-form-UULXq8 [class*="thankYou"] *,
.footer-signup .klaviyo-form-UULXq8 [class*="ThankYou"] *,
.footer-signup .klaviyo-form-UULXq8 [data-testid*="success"] * {
  font-family: "IBM Plex Mono", "Courier New", monospace !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #f2f2f2 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Heading line (e.g. "WELCOME TO THE AMENABOZE WORLD") */
.footer-signup .klaviyo-form-UULXq8 [class*="success"] h1,
.footer-signup .klaviyo-form-UULXq8 [class*="success"] h2,
.footer-signup .klaviyo-form-UULXq8 [class*="success"] h3,
.footer-signup .klaviyo-form-UULXq8 [class*="Success"] h1,
.footer-signup .klaviyo-form-UULXq8 [class*="Success"] h2,
.footer-signup .klaviyo-form-UULXq8 [class*="Success"] h3,
.footer-signup .klaviyo-form-UULXq8 [data-testid*="success"] h1,
.footer-signup .klaviyo-form-UULXq8 [data-testid*="success"] h2 {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  color: #f2f2f2 !important;
}

/* Body paragraph (e.g. "You're in.") */
.footer-signup .klaviyo-form-UULXq8 [class*="success"] p,
.footer-signup .klaviyo-form-UULXq8 [class*="Success"] p,
.footer-signup .klaviyo-form-UULXq8 [data-testid*="success"] p {
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.65 !important;
  text-transform: none !important;
  color: rgba(242, 242, 242, 0.72) !important;
}

/* Hide Klaviyo's success checkmark/icon SVG — text is the signal */
.footer-signup .klaviyo-form-UULXq8 [class*="success"] svg,
.footer-signup .klaviyo-form-UULXq8 [class*="Success"] svg,
.footer-signup .klaviyo-form-UULXq8 [data-testid*="success"] svg {
  display: none !important;
}

/* =========================================================
   Homepage side lyrics — wide screen gutter decoration
   Only rendered in index.html; hidden below 1440px
   ========================================================= */

.home-lyric {
  position: fixed;
  top: 50%;
  z-index: 5;
  font-family: var(--mono);
  font-size: clamp(9px, 0.62vw, 12px);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  writing-mode: vertical-rl;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Left lyric: rotated so text reads bottom-to-top */
.home-lyric-left {
  left: 24px;
  transform: translateY(-50%) rotate(180deg);
}

/* Right lyric: default top-to-bottom */
.home-lyric-right {
  right: 24px;
  transform: translateY(-50%);
}

@media (min-width: 1440px) {
  .home-lyric {
    opacity: 1;
  }
}

/* =========================================================
   Hover shrink — 2% scale on interactive elements
   Transform only, no layout shift.
   Excluded: .logo, .hamburger, form inputs, Klaviyo inputs.
   ========================================================= */

/* Buttons — already have transition: transform in base .btn rule */
.btn:hover {
  transform: scale(0.98);
}

/* Clickable cover art / product image links (homepage columns) */
.cover-link {
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.cover-link:hover {
  transform: scale(0.98);
}

/* Music page cover art anchor */
.current-single-cover {
  transition: transform 0.18s ease;
}
.current-single-cover:hover {
  transform: scale(0.98);
}

/* Era photo link (homepage → About page) */
.era-photo-link {
  display: block;
  transition: transform 0.18s ease;
}
.era-photo-link:hover {
  transform: scale(0.98);
}

/* Video carousel cards — extend existing border-color transition */
.video-feature-card,
.video-coming-soon-card {
  transition: border-color 0.2s ease, transform 0.18s ease;
}
.video-feature-card:hover,
.video-coming-soon-card:hover {
  transform: scale(0.98);
}

/* Streaming links — extend existing transitions */
.streaming-link {
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.18s ease;
}
.streaming-link:hover {
  transform: scale(0.98);
}

/* Social link pills in the era section */
.social-links a {
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.18s ease;
}
.social-links a:hover {
  transform: scale(0.98);
}

/* Footer social text links */
.footer-social a {
  transition: color 0.2s ease, transform 0.18s ease;
}
.footer-social a:hover {
  transform: scale(0.98);
}

/* Music page release list items */
.release-item {
  transition: border-color 0.2s ease, transform 0.18s ease;
}
.release-item:hover {
  transform: scale(0.98);
}

/* Shopify Buy Button wrapper — safe container-level hover, doesn't touch Shopify JS */
.shopify-buy-button-wrap {
  transition: transform 0.18s ease;
}
.shopify-buy-button-wrap:hover {
  transform: scale(0.98);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .cover-link:hover,
  .current-single-cover:hover,
  .era-photo-link:hover,
  .video-feature-card:hover,
  .video-coming-soon-card:hover,
  .streaming-link:hover,
  .social-links a:hover,
  .footer-social a:hover,
  .release-item:hover,
  .shopify-buy-button-wrap:hover {
    transform: none;
  }
}