/* ==========================================================================
   SARAH STOUTE BESPOKE — MAIN SITE DESIGN SYSTEM
   Aligned to "Sarah Stoute Bespoke — Brand Guidelines v1.0 (2026)".
   Editorial layout retained; palette, type roles, radii and motion follow
   the guideline tokens exactly:
     · Ground: cream/white/oyster — cream carries ~78% of the page
     · Ink: warm charcoal #1A1C1B / espresso #4D4635 — never pure black
     · Gold #9C7C4D is the only accent (~6%): eyebrows, primary buttons,
       link hovers, hairline flourishes
     · Radii: 4px buttons · 8px fields · 12px panels — never bubbly
     · Motion: one easing — cubic-bezier(0.16,1,0.3,1); Ken Burns 24s;
       tile zooms 1.05 over 1.2s; no bounces
   Loaded AFTER index.css (which still powers the shop, cart drawer and
   mobile menu) and overrides where the two meet.
   ========================================================================== */

:root {
  /* Guideline palette */
  --ink: #1A1C1B;            /* charcoal — strong text, dark surfaces */
  --espresso: #4D4635;       /* body copy */
  --taupe: #7F7663;          /* muted copy */
  --mist: #9C9A96;           /* faint */
  --paper: #FAF9F7;          /* cream — the page ground */
  --white: #FFFFFF;
  --oyster: #F4F3F1;         /* sunken / alternating sections */
  --ivory: #FAF6F0;
  --champagne-tint: #F4EFEB;
  --gold: #9C7C4D;           /* THE accent */
  --gold-hover: #A3875B;
  --champagne: #C9A96A;      /* gold on dark surfaces */
  --line: #EAE6E2;           /* hairlines */
  --line-warm: #E5D9C4;
  --outline: #D0C5AF;        /* field borders */
  --ease-luxe: cubic-bezier(0.16, 1, 0.3, 1);

  /* Legacy aliases used by earlier markup */
  --bone: #F4F3F1;
  --smoke: #7F7663;
  --hairline: #EAE6E2;
  --hairline-strong: #9C7C4D;
}

/* ---- Base overrides ------------------------------------------------------ */
body.bw {
  background: var(--paper);
  color: var(--ink);
}
body.bw h1, body.bw h2, body.bw h3, body.bw h4 { color: inherit; }

/* ---- Typography roles (guidelines §5) ------------------------------------ */
/* Eyebrow: uppercase Graphik, 0.25em tracking, in gold */
.eyebrow {
  font-family: 'Graphik', 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
.bw-dark .eyebrow { color: var(--champagne); }

/* Display: Maginia with Playfair Display as the documented CSS fallback */
.display {
  font-family: 'Maginia', 'Playfair Display', Georgia, serif;
  letter-spacing: -0.01em;
}
.display em, .display i { font-style: italic; font-weight: 400; }

/* Huge outlined watermark numerals / words — a whisper, never loud */
.ghost-text {
  -webkit-text-stroke: 1px rgba(156, 124, 77, 0.22);
  color: transparent;
  user-select: none;
}
.bw-dark .ghost-text { -webkit-text-stroke: 1px rgba(201, 169, 106, 0.25); }

/* ---- Header -------------------------------------------------------------- */
.bw-topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Graphik', 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.bw-nav {
  background: rgba(250, 249, 247, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.bw-nav a { color: var(--ink); }
.bw-nav a.btn-ink { color: #fff; }
.bw-nav a.btn-ink:hover { color: #fff; }
.bw-nav .nav-link {
  position: relative;
  transition: color 0.25s var(--ease-luxe);
}
.bw-nav .nav-link:hover { color: var(--gold); }
.bw-nav .nav-link.active { color: var(--gold); }
.bw-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--gold);
}

/* ---- Buttons (guidelines §8) ----------------------------------------------
   Primary = gold fill, flips to espresso on hover (never shrinks).
   Secondary = warm outline. Ghost = for charcoal/photography surfaces. */
.btn-ink, .btn-line, .btn-ghost {
  display: inline-block;
  font-family: 'Graphik', 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 17px 38px;
  border-radius: 4px;
  transition: all 0.25s var(--ease-luxe);
  text-align: center;
  cursor: pointer;
}
.btn-ink {
  background: var(--gold);
  color: #fff;
  border: 1px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.btn-ink:hover { background: var(--espresso); border-color: var(--espresso); color: #fff; }
.btn-ink:active { background: #3d3729; }
/* Gold shimmer sweep on primary buttons (guidelines §10) */
.btn-ink::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-20deg);
  transition: left 0.9s var(--ease-luxe);
}
.btn-ink:hover::after { left: 130%; }

.btn-line { background: transparent; color: var(--ink); border: 1px solid var(--outline); }
.btn-line:hover { border-color: var(--gold); color: var(--gold); }

.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.55); }
.btn-ghost:hover { background: var(--champagne); color: var(--ink); border-color: var(--champagne); }

/* ---- Imagery (guidelines §7) -----------------------------------------------
   Warm, natural, real — photography is never desaturated or cooled. */
.bw-img { filter: none; }
.keep-color { filter: none !important; }
.img-frame {
  overflow: hidden;
  background: var(--oyster);
  border-radius: 12px;
}
.img-frame img { transition: transform 1.2s var(--ease-luxe); }
.img-frame:hover img { transform: scale(1.05); }

/* ---- Rules & structure ----------------------------------------------------*/
.rule { height: 1px; background: var(--line); }
.rule-strong { height: 2px; background: var(--gold); }
.bw-dark { background: var(--ink); color: #fff; }
.bw-dark .rule { background: rgba(255, 255, 255, 0.14); }
.bw-bone { background: var(--oyster); }

/* ---- Editorial index numbers ---------------------------------------------*/
.index-no {
  font-family: 'Maginia', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--gold);
}

/* ---- Forms (guidelines §8: 8px fields, gold focus) -------------------------
   Selector carries extra specificity so it beats the Tailwind forms-plugin
   reset, which the CDN injects after this stylesheet. */
body.bw input.field, body.bw textarea.field, body.bw select.field {
  width: 100%;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: #fff;
  padding: 15px 18px;
  font-family: 'Graphik', 'Montserrat', sans-serif;
  /* 16px minimum — anything smaller makes iOS Safari auto-zoom on focus */
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body.bw input.field:focus, body.bw textarea.field:focus, body.bw select.field:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(156, 124, 77, 0.15);
  --tw-ring-color: transparent;
}
body.bw .field::placeholder { color: var(--mist); }

/* Size-selector style chips: selected fills gold (guidelines §8) */
.chip-bw {
  border: 1px solid var(--outline);
  border-radius: 4px;
  padding: 15px 16px;
  text-align: center;
  font-family: 'Graphik', 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s var(--ease-luxe);
  color: var(--ink);
}
.chip-bw:hover { border-color: var(--gold); color: var(--gold); }
.chip-bw.selected { background: var(--gold); color: #fff; border-color: var(--gold); }

/* ---- Chrome for the shared drawers (injected by app.js) -------------------*/
body.bw #mobile-menu-drawer h2 { color: var(--gold) !important; }
body.bw #mobile-menu-drawer nav a { color: var(--ink); }

/* ---- Touch ergonomics ------------------------------------------------------
   44px minimum tap targets (Apple HIG / Material) for the header icon
   buttons and the gallery/collection lightbox controls. */
.bw-nav button[aria-label] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#lb-close, #lb-prev, #lb-next {
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Motion (guidelines §10: one easing, no bounces) ----------------------*/
@keyframes bw-reveal {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: bw-reveal 0.9s var(--ease-luxe) both; }
.reveal-1 { animation-delay: 0.12s; }
.reveal-2 { animation-delay: 0.24s; }
.reveal-3 { animation-delay: 0.36s; }

/* Cinematic hero: 24s Ken Burns, scale 1.0 → 1.12 */
@keyframes bw-slow-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
.slow-zoom { animation: bw-slow-zoom 24s ease-out forwards; }