/* ============================================================
   Maestoria — storefront component styles
   Built on colors_and_type.css (import that first).
   Dark "gallery wall" by default; gold reserved for CTAs/accents.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: rgba(176,141,87,0.30); color: var(--ink); }

/* ---------- tweak-driven knobs (overridden at runtime) ---------- */
:root {
  --shop-cols: 3;
  --reveal-shift: 22px;
  --reveal-dur: 720ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --kenburns: 1;        /* 1 = on, 0 = off */
  --maxw: 1200px;
  /* Shared text-on-art scrim: a soft dark-to-transparent wash anchored
     to the bottom, so overlaid museum-label text stays legible over any
     image. Dark in both themes (text on top is always --on-dark light). */
  --scrim: linear-gradient(to top,
             rgba(8,6,5,0.90) 0%,
             rgba(8,6,5,0.52) 32%,
             rgba(8,6,5,0.14) 58%,
             transparent 82%);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.section { padding: var(--space-section) 0; }
.section-tight { padding: 56px 0; }

.eyebrow {
  font: 500 12px/1.4 var(--font-sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--primary);
  opacity: 0.7;
}
.section-head { margin-bottom: 44px; }
.section-head h2 { font: var(--display-lg); letter-spacing: -1px; color: var(--ink); margin: 0 0 14px; }
.section-head p { font: var(--body-md); color: var(--muted); margin: 0; max-width: 56ch; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline-soft);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 24px;
  height: 78px;
}
.brand { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.brand-mark { width: 34px; height: 34px; color: var(--primary); flex: none; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.wordmark {
  font: 500 22px/1 var(--font-serif);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.brand-sub {
  font: 400 12.5px/1 var(--font-serif);
  font-style: italic;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-top: 6px;
  white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font: 500 14px/1 var(--font-sans);
  color: var(--body);
  position: relative;
  padding: 6px 0;
  transition: color 220ms var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.nav a.active { color: var(--ink); }

.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-full);
  background: transparent; border: 1px solid var(--hairline);
  color: var(--ink); cursor: pointer;
  transition: border-color 220ms var(--ease), background 220ms var(--ease);
}
.icon-btn:hover { border-color: var(--primary); background: var(--surface-soft); }
.icon-btn svg { width: 19px; height: 19px; stroke-width: 1.6; }
.cart-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary);
  font: 600 11px/18px var(--font-sans); text-align: center;
  border: 2px solid var(--canvas);
  transform: scale(0); transition: transform 260ms var(--ease);
}
.cart-badge.show { transform: scale(1); }

.nav-toggle { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 500 14.5px/1 var(--font-sans);
  height: 50px; padding: 0 28px;
  border-radius: var(--radius-md); border: 0; cursor: pointer;
  transition: background 240ms var(--ease), transform 240ms var(--ease),
              box-shadow 320ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease);
}
.btn svg { width: 18px; height: 18px; stroke-width: 1.7; }
.btn-gold { background: var(--primary); color: var(--on-primary); }
.btn-gold:hover {
  background: color-mix(in srgb, var(--primary) 90%, #fff);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--primary) 70%, transparent),
              0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent);
}
.btn-gold:active { background: var(--primary-active); transform: translateY(0); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline); }
.btn-ghost:hover { border-color: var(--primary); color: var(--ink); transform: translateY(-2px); }
.btn-block { width: 100%; }
.btn-lg { height: 56px; padding: 0 36px; font-size: 15.5px; }
.btn[disabled] { background: var(--primary-disabled); color: var(--muted); cursor: not-allowed; box-shadow: none; transform: none; }

.textlink {
  color: var(--primary); font: 500 14px/1 var(--font-sans);
  display: inline-flex; align-items: center; gap: 7px;
  transition: gap 240ms var(--ease), color 240ms var(--ease);
}
.textlink svg { width: 15px; height: 15px; stroke-width: 1.7; transition: transform 240ms var(--ease); }
.textlink:hover { color: color-mix(in srgb, var(--primary) 85%, #fff); }
.textlink:hover svg { transform: translateX(4px); }

/* ============================================================
   ART PLACEHOLDER FRAME  (drop-in slot)
   Dark mat + gold corner ticks + caption. Swap for <img> later.
   ============================================================ */
.art {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(120% 90% at 50% 22%,
      hsl(34 32% calc(11% + var(--art-tone, 18) * 0.32%)) 0%,
      transparent 62%),
    linear-gradient(160deg, #1c1813 0%, #141110 100%);
  overflow: hidden;
  border-radius: inherit;
}
.art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.art.is-filled .art-frame { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.art.is-portrait { aspect-ratio: 3 / 4; }
a.art { display: block; }
.art.is-tall { aspect-ratio: 2 / 3; }
.art::after { /* inner vignette */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 120% at 50% 38%, transparent 52%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}
.art-frame { /* thin gold inset frame */
  position: absolute; inset: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
  border-radius: 2px;
  pointer-events: none; z-index: 2;
}
.art-corner { position: absolute; width: 16px; height: 16px; z-index: 3; pointer-events: none;
  border-color: color-mix(in srgb, var(--primary) 62%, transparent); }
.art-corner::before, .art-corner::after { content: ""; position: absolute; background: currentColor; }
.art-tick { position: absolute; z-index: 3; width: 13px; height: 13px; pointer-events: none; }
.art-tick i { position: absolute; background: color-mix(in srgb, var(--primary) 55%, transparent); }
.art-tick i.h { height: 1px; width: 13px; }
.art-tick i.v { width: 1px; height: 13px; }
.art-tick.tl { top: 16px; left: 16px; }       .art-tick.tl i.h { top: 0; left: 0; }      .art-tick.tl i.v { top: 0; left: 0; }
.art-tick.tr { top: 16px; right: 16px; }       .art-tick.tr i.h { top: 0; right: 0; }     .art-tick.tr i.v { top: 0; right: 0; }
.art-tick.bl { bottom: 16px; left: 16px; }     .art-tick.bl i.h { bottom: 0; left: 0; }   .art-tick.bl i.v { bottom: 0; left: 0; }
.art-tick.br { bottom: 16px; right: 16px; }    .art-tick.br i.h { bottom: 0; right: 0; }  .art-tick.br i.v { bottom: 0; right: 0; }

.art-caption {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; gap: 7px;
}
.art-glyph { width: 30px; height: 30px; color: color-mix(in srgb, var(--primary) 70%, transparent); margin-bottom: 8px; opacity: 0.9; }
.art-glyph svg { width: 100%; height: 100%; }
.art-cap-artist {
  font: 500 11px/1.4 var(--font-sans);
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--muted);
}
.art-cap-work { font: italic 500 19px/1.25 var(--font-serif); color: var(--body-strong); }
.art-cap-kind {
  font: 500 10px/1.4 var(--font-sans);
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--muted-soft);
  margin-top: 2px;
}
.art-slot-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  font: 500 9.5px/1 var(--font-sans); letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted-soft); opacity: 0.6;
}

/* ============================================================
   MUSEUM PLAQUE
   ============================================================ */
.plaque { display: block; }
.plaque-artist {
  font: 500 var(--plaque-artist-size, 26px)/1.15 var(--font-serif);
  letter-spacing: -0.2px; color: var(--ink);
}
.plaque-rule {
  width: 34px; height: 1px; margin: 12px 0;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 12%, transparent));
}
.plaque-work { font: italic 500 var(--plaque-work-size, 20px)/1.25 var(--font-serif); color: var(--body-strong); }
.plaque-meta {
  font: 500 11.5px/1.6 var(--font-sans);
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); margin-top: 12px;
}
.plaque-meta .dot { color: var(--primary); margin: 0 7px; font-size: 13px; }
.plaque-line {
  font: italic 400 16px/1.5 var(--font-serif);
  color: var(--muted-soft); margin-top: 14px; max-width: 42ch;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(var(--reveal-shift)); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity var(--reveal-dur) var(--ease),
              transform var(--reveal-dur) var(--ease);
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: 64px; padding-bottom: var(--space-section); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 64px; align-items: center;
}
.hero-copy { max-width: 460px; }
.hero h1 {
  font: 500 clamp(46px, 6vw, 78px)/1.04 var(--font-serif);
  letter-spacing: -1.8px; color: var(--ink); margin: 18px 0 0;
}
.hero h1 em { font-style: italic; color: var(--primary); }
.hero-sub {
  font: var(--body-md); font-size: 17px; color: var(--body); margin: 24px 0 36px;
  max-width: 38ch;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-art-wrap {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8);
}
.hero-art { aspect-ratio: 4 / 3; }
/* Bottom scrim behind the hero plaque — keeps the label legible over any
   image, in both Night and Cream. Sits above the artwork, below the plaque. */
body[data-hero="split"] .hero-art-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(96% 80% at 0% 100%, rgba(8,6,5,0.92) 0%, rgba(8,6,5,0.48) 30%, transparent 60%),
    var(--scrim);
}
.kenburns { animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.07) translate(-1.5%, -1.2%); }
}
.hero-plaque {
  position: absolute; left: 22px; bottom: 20px; z-index: 4;
  padding: 2px 2px;
}
.hero-plaque .plaque-artist { font-size: 17px; }
.hero-plaque .plaque-work { font-size: 15px; }
.hero-plaque .plaque-rule { margin: 7px 0; }

/* hero variant: centered full-bleed */
body[data-hero="centered"] .hero-grid { grid-template-columns: 1fr; gap: 0; }
body[data-hero="centered"] .hero-copy {
  position: absolute; z-index: 5; max-width: 24ch; left: 50%; top: 50%;
  transform: translate(-50%, -50%); text-align: center; padding: 0 20px;
}
body[data-hero="centered"] .hero-actions { justify-content: center; }
body[data-hero="centered"] .hero-art { aspect-ratio: 21 / 9; }
body[data-hero="centered"] .hero-art-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: radial-gradient(80% 90% at 50% 50%, rgba(0,0,0,0.45), rgba(0,0,0,0.78));
}
body[data-hero="centered"] .hero-plaque { display: none; }
body[data-hero="centered"] .hero h1 { color: var(--ink); }

/* ============================================================
   FEATURED TRIPTYCH
   ============================================================ */
.triptych {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  border-radius: var(--radius-lg); overflow: hidden;
}
.triptych .art { border-radius: 0; }
.trip-panel { position: relative; }
.trip-cap {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 22px;
}
.trip-cap .cell { padding: 0 6px; }
.trip-cap .kind {
  font: 500 10.5px/1.4 var(--font-sans); letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--primary); margin-bottom: 8px;
}
.trip-cap .title { font: italic 500 18px/1.3 var(--font-serif); color: var(--ink); margin-bottom: 6px; }
.trip-cap .line { font: var(--body-sm); color: var(--muted); }
.featured-layout { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: 56px; align-items: start; }

/* ============================================================
   SHOP GRID  (scalable, data-driven)
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--shop-cols), minmax(0, 1fr));
  gap: 28px;
}
.tile { display: block; position: relative; cursor: pointer; }
.tile-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--hairline-soft);
  transition: border-color 360ms var(--ease), box-shadow 420ms var(--ease);
}
.tile .art { transition: transform 900ms var(--ease); }
.tile:hover .tile-frame { border-color: color-mix(in srgb, var(--primary) 45%, transparent); box-shadow: 0 18px 50px -24px rgba(0,0,0,0.85); }
.tile:hover .art { transform: scale(1.05); }

.tile-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px;
  background: var(--scrim);
  opacity: 0; transition: opacity 420ms var(--ease);
}
.tile:hover .tile-overlay { opacity: 1; }
.tile-overlay .plaque-artist { font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; font-family: var(--font-sans); color: var(--primary); }
.tile-overlay .plaque-work { font-size: 22px; margin-top: 6px; }
.tile-overlay .plaque-meta { font-size: 10.5px; margin-top: 8px; color: var(--muted); }
.tile-overlay .view {
  margin-top: 14px; font: 500 12px/1 var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
}
.tile-overlay .view svg { width: 14px; height: 14px; stroke-width: 1.7; color: var(--primary); }

/* always-visible caption beneath tile (so non-hover/mobile still reads) */
.tile-label { padding: 16px 2px 0; }
.tile-label .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tile-label .artist { font: 500 11px/1.4 var(--font-sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); }
.tile-label .price { font: 500 13px/1 var(--font-sans); color: var(--primary); }
.tile-label .work { font: italic 500 20px/1.25 var(--font-serif); color: var(--ink); margin-top: 5px; }
.tile-spec { font: 500 10.5px/1.4 var(--font-mono); letter-spacing: 0.3px; color: var(--muted-soft); margin-top: 9px; }

/* hover variant: caption slides up */
body[data-hover="slide"] .tile-overlay { opacity: 1; transform: translateY(64%); background: linear-gradient(to top, rgba(15,12,10,0.95) 0%, rgba(15,12,10,0.7) 60%, transparent 100%); transition: transform 460ms var(--ease); }
body[data-hover="slide"] .tile:hover .tile-overlay { transform: translateY(0); }
body[data-hover="slide"] .tile:hover .art { transform: scale(1.03); }

/* hover variant: gold frame draws in */
body[data-hover="frame"] .tile-overlay { background: linear-gradient(to top, rgba(15,12,10,0.9), transparent 60%); }
body[data-hover="frame"] .tile-frame::after {
  content: ""; position: absolute; inset: 12px; z-index: 6; pointer-events: none;
  border: 1px solid var(--primary); border-radius: 2px;
  clip-path: inset(0 0 100% 0); opacity: 0;
  transition: clip-path 520ms var(--ease), opacity 300ms var(--ease);
}
body[data-hover="frame"] .tile:hover .tile-frame::after { clip-path: inset(0 0 0 0); opacity: 0.8; }

/* ============================================================
   EMAIL CAPTURE BAND
   ============================================================ */
.email-band { background: var(--surface-soft); border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); }
.email-inner { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.email-inner h2 { font: var(--display-md); letter-spacing: -0.5px; color: var(--ink); margin: 0 0 12px; }
.email-inner p { font: var(--body-md); color: var(--muted); margin: 0; max-width: 46ch; }
.email-form { display: flex; gap: 12px; }
.input {
  height: 50px; border-radius: var(--radius-md);
  border: 1px solid var(--hairline); background: var(--canvas);
  padding: 0 16px; font: 400 15px/1 var(--font-sans); color: var(--ink);
  min-width: 280px; transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.input::placeholder { color: var(--muted-soft); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring-focus); }
.email-note { font: 500 11px/1.4 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted-soft); margin-top: 14px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--surface-dark); border-top: 1px solid var(--hairline-dark); padding: 72px 0 40px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--hairline-dark); }
.footer-brand .wordmark { color: var(--on-dark); }
.footer-brand p { font: var(--body-sm); color: var(--on-dark-soft); margin: 18px 0 0; max-width: 34ch; }
.footer-col h4 { font: 500 11px/1.4 var(--font-sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.footer-col a { display: block; font: var(--body-sm); color: var(--on-dark-soft); padding: 7px 0; transition: color 200ms var(--ease); }
.footer-col a:hover { color: var(--on-dark); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; gap: 20px; flex-wrap: wrap; }
.footer-bottom span { font: var(--body-sm); color: var(--muted-soft); }
.footer-legal { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-legal a { font: var(--body-sm); color: var(--muted-soft); transition: color 200ms var(--ease); }
.footer-legal a:hover { color: var(--on-dark); }

/* ---------- trust line (beside/under Buy & checkout buttons) ---------- */
.trust-line {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 12px; text-align: center;
  font: 500 11.5px/1.4 var(--font-sans); letter-spacing: 0.3px;
  color: var(--muted-soft);
}
.trust-line .lock { font-size: 12px; line-height: 1; filter: saturate(0.5); }

/* ============================================================
   CART DRAWER
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(8,6,5,0.6);
  opacity: 0; visibility: hidden; transition: opacity 360ms var(--ease), visibility 360ms;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.scrim.open { opacity: 1; visibility: visible; }
.cart {
  position: fixed; top: 0; right: 0; z-index: 100; height: 100%;
  width: min(440px, 100%); background: var(--surface-card);
  border-left: 1px solid var(--hairline);
  transform: translateX(100%); transition: transform 480ms var(--ease);
  display: flex; flex-direction: column;
}
.cart.open { transform: none; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 26px 26px 22px; border-bottom: 1px solid var(--hairline-soft); }
.cart-head h3 { font: var(--display-sm); color: var(--ink); margin: 0; }
.cart-items { flex: 1; overflow-y: auto; padding: 8px 26px; }
.cart-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hairline-soft); }
.cart-row .thumb { width: 70px; border-radius: var(--radius-sm); overflow: hidden; }
.cart-row .thumb .art { border-radius: var(--radius-sm); }
.cart-row .ci-artist { font: 500 10px/1.4 var(--font-sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.cart-row .ci-work { font: italic 500 17px/1.2 var(--font-serif); color: var(--ink); margin: 4px 0 3px; }
.cart-row .ci-kind { font: var(--body-sm); font-size: 12.5px; color: var(--muted-soft); }
.cart-row .ci-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.cart-row .ci-price { font: 500 14px/1 var(--font-sans); color: var(--primary); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.stepper button { width: 28px; height: 28px; background: transparent; border: 0; color: var(--body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.stepper button:hover { color: var(--primary); }
.stepper span { min-width: 24px; text-align: center; font: 500 13px/1 var(--font-sans); color: var(--ink); }
.ci-remove { background: none; border: 0; color: var(--muted-soft); font: 500 11px/1 var(--font-sans); cursor: pointer; letter-spacing: 0.5px; }
.ci-remove:hover { color: var(--error); }
.cart-empty { text-align: center; padding: 80px 30px; color: var(--muted); }
.cart-empty .art-glyph { margin: 0 auto 18px; opacity: 0.5; }
.cart-empty p { font: italic 400 18px/1.5 var(--font-serif); color: var(--muted); }
.cart-foot { padding: 24px 26px 28px; border-top: 1px solid var(--hairline); }
.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.cart-subtotal .l { font: 500 12px/1 var(--font-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.cart-subtotal .v { font: 500 26px/1 var(--font-serif); color: var(--ink); }
.cart-foot .note { font: var(--body-sm); font-size: 12px; color: var(--muted-soft); margin: 14px 0 0; text-align: center; }

/* ============================================================
   COLLECTION CONTROLS
   ============================================================ */
.page-head { padding: 56px 0 40px; border-bottom: 1px solid var(--hairline-soft); }
.crumbs { font: 500 11px/1.4 var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 20px; }
.crumbs a:hover { color: var(--primary); }
.crumbs .sep { margin: 0 10px; color: var(--hairline); }
.page-head h1 { font: var(--display-xl); font-size: clamp(40px, 5vw, 60px); letter-spacing: -1.5px; color: var(--ink); margin: 0 0 16px; }
.page-head .lead { font: var(--body-md); font-size: 17px; color: var(--muted); max-width: 54ch; margin: 0; }

.controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; flex-wrap: wrap; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  font: 500 12.5px/1 var(--font-sans); letter-spacing: 0.3px;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: transparent; border: 1px solid var(--hairline); color: var(--body);
  cursor: pointer; transition: all 220ms var(--ease);
}
.chip:hover { border-color: var(--primary); color: var(--ink); }
.chip.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.sort { display: flex; align-items: center; gap: 12px; }
.sort label { font: 500 11px/1 var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.select {
  height: 42px; border-radius: var(--radius-md); border: 1px solid var(--hairline);
  background: var(--surface-soft); color: var(--ink); padding: 0 38px 0 16px;
  font: 500 13px/1 var(--font-sans); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23968b7b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring-focus); }
.result-count { font: 500 11px/1 var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted-soft); }
.load-more-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 64px; }
.load-progress { font: var(--body-sm); color: var(--muted-soft); }
.load-progress b { color: var(--body); font-weight: 500; }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.product { display: grid; grid-template-columns: 1.25fr 0.9fr; gap: 64px; align-items: start; padding-top: 44px; }
.product-gallery { position: sticky; top: 102px; }
.preview-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline); }
/* The tiled MAESTORIA watermark is baked into the art/ preview files
   themselves (not an overlay), so it protects the raw files and shows
   on every page. The gold frame + corner ticks remain UI chrome. */
.preview-tag { position: absolute; top: 16px; left: 16px; z-index: 5; }
.tag {
  font: 500 10px/1 var(--font-sans); letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--primary); background: color-mix(in srgb, var(--surface-dark) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  padding: 8px 12px; border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.thumb-btn { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--hairline-soft); cursor: pointer; padding: 0; background: none; position: relative; transition: border-color 240ms var(--ease); }
.thumb-btn .art { border-radius: 0; }
.thumb-btn::after { content: ""; position: absolute; inset: 0; background: rgba(8,6,5,0.35); transition: opacity 240ms var(--ease); }
.thumb-btn:hover::after { opacity: 0.4; }
.thumb-btn.active { border-color: var(--primary); }
.thumb-btn.active::after { opacity: 0; }
.thumb-cap { position: absolute; bottom: 7px; left: 0; right: 0; z-index: 3; text-align: center; font: 500 9px/1 var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--on-dark); }

.product-info .plaque-artist { font-size: 17px; letter-spacing: 2.4px; text-transform: uppercase; font-family: var(--font-sans); color: var(--muted); }
.product-info h1 { font: 500 clamp(36px, 4.4vw, 52px)/1.08 var(--font-serif); font-style: italic; letter-spacing: -0.8px; color: var(--ink); margin: 14px 0 0; }
.product-info .meta { font: 500 12px/1.6 var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 18px 0 0; }
.product-info .meta .dot { color: var(--primary); margin: 0 8px; }
.product-info .desc { font: italic 400 19px/1.55 var(--font-serif); color: var(--body-strong); margin: 24px 0 0; max-width: 44ch; }

/* product spec badge — metadata, set in mono per the design system */
.spec-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.4px; color: var(--body);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 10px 16px; }
.spec-badge .k { color: var(--primary); font-weight: 600; }
.spec-badge .dot { color: var(--primary); }

/* premium 6K blurb */
.premium-blurb { display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: start;
  margin-top: 24px; padding: 18px 20px; border-radius: var(--radius-md);
  background: var(--surface-soft); border: 1px solid var(--hairline-soft); }
.premium-blurb svg { width: 18px; height: 18px; color: var(--primary); stroke-width: 1.6; margin-top: 2px; }
.premium-blurb p { margin: 0; font: 400 14.5px/1.6 var(--font-sans); color: var(--body); }
.premium-blurb b { color: var(--ink); font-weight: 600; }
.rule { height: 1px; background: var(--hairline-soft); margin: 32px 0; }

.variants { display: flex; flex-direction: column; gap: 10px; }
.variant {
  display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center;
  padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--hairline);
  background: transparent; cursor: pointer; text-align: left; width: 100%;
  transition: border-color 240ms var(--ease), background 240ms var(--ease);
}
.variant:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.variant.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.variant .v-thumb { width: 54px; border-radius: var(--radius-xs); overflow: hidden; }
.variant .v-thumb .art { border-radius: var(--radius-xs); }
.variant .v-kind { font: 500 10px/1.3 var(--font-sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--primary); display: block; }
.variant .v-title { font: italic 500 17px/1.2 var(--font-serif); color: var(--ink); margin-top: 5px; display: block; }
.variant .v-price { font: 500 15px/1 var(--font-sans); color: var(--ink); }
.variant .v-check { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--hairline); display: inline-flex; align-items: center; justify-content: center; }
.variant.active .v-check { border-color: var(--primary); background: var(--primary); }
.variant .v-check svg { width: 12px; height: 12px; color: var(--on-primary); opacity: 0; }
.variant.active .v-check svg { opacity: 1; }

.bundle {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 18px; border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.bundle .b-title { font: italic 500 18px/1.2 var(--font-serif); color: var(--ink); }
.bundle .b-sub { font: var(--body-sm); font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.bundle .b-price { font: 500 22px/1 var(--font-serif); color: var(--primary); }
.bundle .b-save { font: 500 10px/1 var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted-soft); margin-top: 6px; text-align: right; }
/* struck-through "was" price on triptych bundles */
.price-was { color: var(--muted-soft); text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted-soft) 65%, transparent); }
.bundle .b-was { font: 500 14px/1 var(--font-serif); display: block; margin-bottom: 3px; text-align: right; }

.price-row { display: flex; align-items: baseline; gap: 14px; margin: 28px 0; }
.price-row .was { font: 500 24px/1 var(--font-serif); }
.price-row .now { font: 500 38px/1 var(--font-serif); color: var(--ink); }
.price-row .unit { font: var(--body-sm); color: var(--muted); }

.receive { margin-top: 36px; }
.receive h4 { font: 500 11px/1 var(--font-sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.receive ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.receive li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.receive li svg { width: 18px; height: 18px; color: var(--primary); stroke-width: 1.6; margin-top: 2px; }
.receive li .rt { font: 500 14px/1.4 var(--font-sans); color: var(--ink); }
.receive li .rd { font: var(--body-sm); color: var(--muted); margin-top: 3px; }

/* related */
.related { margin-top: 24px; }

/* ============================================================
   MOTION OFF
   ============================================================ */
body[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
body[data-motion="off"] .kenburns { animation: none !important; }
body[data-motion="off"] .tile:hover .art { transform: none !important; }
body[data-motion="pronounced"] { --reveal-shift: 40px; --reveal-dur: 920ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .kenburns { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { max-width: none; }
  .featured-layout { grid-template-columns: 1fr; gap: 36px; }
  .product { grid-template-columns: 1fr; gap: 40px; }
  .product-gallery { position: static; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .email-inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 880px) {
  :root { --shop-cols: 2 !important; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 22px; }
  .section { padding: 64px 0; }
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 78px; left: 0; right: 0;
    background: var(--canvas); border-bottom: 1px solid var(--hairline);
    padding: 8px 22px 20px;
  }
  .nav.open a { padding: 16px 0; border-bottom: 1px solid var(--hairline-soft); width: 100%; }
  .nav-toggle { display: inline-flex; }
  .triptych { grid-template-columns: 1fr; }
  .trip-cap { grid-template-columns: 1fr; gap: 18px; }
  .trip-cap .cell { padding: 0; }
  .controls { flex-direction: column; align-items: stretch; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .email-form { flex-direction: column; }
  .input { min-width: 0; width: 100%; }
  .price-row .now { font-size: 32px; }
}
@media (max-width: 560px) {
  :root { --shop-cols: 1 !important; }
  .hero h1 { font-size: 44px; }
}

/* ============================================================
   WHAT YOU RECEIVE PAGE
   ============================================================ */
.receive-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; padding: 56px 0 8px; }
.receive-hero .lead { font: var(--body-md); font-size: 18px; color: var(--body); margin: 22px 0 0; max-width: 46ch; }
.receive-hero .specline {
  font: 500 12px/1.7 var(--font-mono); letter-spacing: 0.4px; color: var(--muted);
  margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--hairline-soft);
}
.receive-hero .specline .k { color: var(--primary); }
.receive-art-wrap { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8); }

.spec-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft); border-radius: var(--radius-lg); overflow: hidden; margin-top: 8px; }
.spec-stat { background: var(--surface-card); padding: 32px 24px; text-align: center; }
.spec-stat .n { font: 500 38px/1 var(--font-serif); color: var(--ink); letter-spacing: -0.5px; }
.spec-stat .n .unit { font-size: 18px; color: var(--primary); }
.spec-stat .l { font: 500 10.5px/1.4 var(--font-sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin-top: 12px; }

.spec-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 56px; margin-top: 8px; }
.spec-sheet .row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--hairline-soft); }
.spec-sheet .row .key { font: 500 11px/1.4 var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.spec-sheet .row .val { font: 500 14px/1.4 var(--font-mono); color: var(--ink); text-align: right; }

@media (max-width: 980px) {
  .receive-hero { grid-template-columns: 1fr; gap: 36px; }
  .spec-stats { grid-template-columns: repeat(2, 1fr); }
  .spec-sheet { grid-template-columns: 1fr; gap: 0 0; }
}
@media (max-width: 560px) {
  .spec-stats { grid-template-columns: 1fr 1fr; }
  .spec-stat .n { font-size: 32px; }
}

/* ============================================================
   THEME-STABLE "ON-DARK" SURFACES  (placed last to win cleanly)
   ------------------------------------------------------------
   These sit on always-dark surfaces — the artwork, the charcoal
   footer, the dark plaque/overlay — in BOTH Night and Cream. So
   their text uses --on-dark / --on-dark-soft (light in BOTH
   themes) instead of --ink / --body / --muted (which flip dark
   in Cream and would vanish). In Night these match the cream
   ramp exactly, so the primary brand look is unchanged.
   ============================================================ */
.hero-plaque .plaque-artist,
.tile-overlay .plaque-work,
.tile-overlay .view,
.art-cap-work { color: var(--on-dark); }

.hero-plaque .plaque-work,
.hero-plaque .plaque-meta,
.tile-overlay .plaque-meta,
.art-cap-artist,
.footer-col h4 { color: var(--on-dark-soft); }

.art-cap-kind,
.footer-bottom span { color: color-mix(in srgb, var(--on-dark-soft) 78%, transparent); }
.art-slot-hint { color: color-mix(in srgb, var(--on-dark-soft) 60%, transparent); }
.thumb-cap { color: var(--on-dark); }

/* The hero label sits on the artwork; legibility now comes from the
   shared --scrim wash behind it (works in both Night and Cream), so the
   plaque needs no box of its own. */

/* Centered-hero variant: copy sits over the (always dark) image,
   so force light text regardless of theme. */
body[data-hero="centered"] .hero h1 { color: var(--on-dark); }
body[data-hero="centered"] .hero-sub { color: var(--on-dark-soft); }

/* Header theme toggle: a quiet gold-accented glyph. */
[data-theme-toggle] svg { width: 18px; height: 18px; stroke-width: 1.5; }
[data-theme-toggle][aria-pressed="true"] { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--hairline)); }

/* ============================================================
   PROSE  — long-form content pages (Licensing, Refunds, Terms…)
   ============================================================ */
.prose { max-width: 64ch; }
.prose > * + * { margin-top: 18px; }
.prose p { font: var(--body-md); font-size: 16.5px; color: var(--body); }
.prose b { color: var(--ink); font-weight: 600; }
/* :not(.btn) — buttons inside prose keep their own colors (a .prose-colored
   label on the gold button would be gold-on-gold, i.e. invisible). */
.prose a:not(.btn) { color: var(--primary); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); }
.prose a:not(.btn):hover { color: var(--primary-active); }
.prose h3 {
  font: var(--display-sm); letter-spacing: -0.3px; color: var(--ink);
  margin-top: 40px; margin-bottom: 4px;
}
.prose h3:first-child { margin-top: 0; }
.prose ul { margin: 12px 0 0; padding-left: 0; list-style: none; display: grid; gap: 12px; }
.prose li {
  position: relative; padding-left: 26px;
  font: var(--body-md); font-size: 16px; color: var(--body);
}
.prose li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
}

/* Newsletter success state (replaces the form after signup). */
.email-success {
  display: inline-flex; align-items: center; gap: 10px;
  font: var(--body-md); color: var(--body-strong); margin: 0;
}
.email-success svg { width: 18px; height: 18px; color: var(--primary); stroke-width: 1.8; flex: none; }