/* ===========================================================
   Lost Marbles Spirits Company — Functional Prototype
   Shared design system. Independent continuation, built after
   the engagement ended, implementing the Section 4 interaction
   concepts from the original design language notes.
   =========================================================== */

@import url("https://use.typekit.net/sfa3jbv.css");

:root {
  --cream: #F2F1E1;
  --void: #0E0C0A;
  --panel: #1A1714;
  --gold: #B6985E;
  --bronze: #D4B06A;
  --juice: #B9602A;
  --olive: #6B7352;
  --ink-on-cream: #241F19;
  --text-primary: #EDE6D6;
  --text-soft: #BDB4A0;
  --text-mute: #8A8176;
  /* A single hairline-divider color for the whole site — every section
     border, grid divider and hero split uses this, same as the solid
     gold already used for buttons and the featured photo grids, so no
     two adjacent 1px lines ever read as a different color. */
  --border-soft: var(--gold);

  /* Proof toggle theme variables, overridden in light mode */
  --bg: var(--void);
  --surface: var(--panel);
  --fg: var(--text-primary);
  --fg-soft: var(--text-soft);
  --fg-mute: var(--text-mute);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

::selection { background: var(--gold); color: var(--void); }
body.light-mode ::selection { background: var(--juice); color: #FFFFFF; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "futura-pt", sans-serif;
  overflow-x: hidden;
  transition: background 0.5s ease, color 0.5s ease;
}

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

.wrap { width: 100%; max-width: 1480px; margin: 0 auto; }

/* ---------- Nav ---------- */
header.site-nav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(14,12,10,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
}
.logo {
  font-family: "futura-pt", sans-serif;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.1em;
  color: var(--bronze);
  text-decoration: none;
  transition: color 0.25s ease;
}
a.logo:hover, a.logo:focus-visible { color: var(--bronze); opacity: 0.8; }
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.25s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-links a:hover { color: var(--bronze); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.current { color: var(--bronze); }
.nav-links a.current::after { transform: scaleX(1); }

/* Strap navigation toggle — the bottle strap's four dots, closed; an
   X, open. Closed state reuses the same brand mark as the .dots
   divider and the walnut cap's strap instead of reading as a pause
   button. */
.strap-toggle {
  display: none;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  position: relative;
  flex-shrink: 0;
}
.strap-toggle .dot {
  position: absolute;
  top: 13px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.strap-toggle .dot:nth-child(1) { left: 2px; }
.strap-toggle .dot:nth-child(2) { left: 10px; }
.strap-toggle .dot:nth-child(3) { left: 18px; }
.strap-toggle .dot:nth-child(4) { left: 26px; }
.strap-toggle.open .dot { opacity: 0; transform: scale(0.3); }
.strap-toggle .bar {
  position: absolute;
  top: 14px;
  left: 4px;
  width: 22px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.strap-toggle.open .bar { opacity: 1; }
.strap-toggle.open .bar.l { transform: rotate(45deg); }
.strap-toggle.open .bar.r { transform: rotate(-45deg); }
.strap-toggle:hover .dot { background: var(--bronze); }
.strap-toggle:hover .bar { background: var(--bronze); }

.mobile-panel {
  position: fixed;
  inset: 0;
  background: rgba(10,8,6,0.98);
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.mobile-panel.open { opacity: 1; pointer-events: auto; }
.mobile-panel a {
  font-family: "modesto-poster", serif;
  font-size: 40px;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.25s ease;
}
.mobile-panel a:hover, .mobile-panel a:focus-visible { color: var(--bronze); }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .strap-toggle { display: block; }
}

/* ---------- Type + layout helpers ----------
   Type scale is ~25% larger than the original pass across the board
   (h1 56->70, h2 38->48, h3 26->33, body 15->19, eyebrow 11->14, nav
   12->15, button 11->14) — see every font-size in this file and the
   page-level <style> blocks for the matching bump. */
.eyebrow {
  font-family: "futura-pt", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 18px;
}
.dots { color: var(--gold); opacity: 0.6; letter-spacing: 0.5em; font-size: 13px; margin-bottom: 20px; }

h1, h2, h3 { font-family: "modesto-poster", serif; font-weight: 400; color: var(--text-primary); line-height: 1.08; }
h1 { font-size: 70px; }
h2 { font-size: 48px; }
h3 { font-size: 33px; }

/* Responsive type scale, site-wide (every page, not just one hero) —
   "modesto-poster" is an all-caps display face, so a headline that's
   fine at tablet width reads oversized on an actual phone. Tablet
   knocks it down a notch; the 600px tier (real phone widths) knocks
   it down again so a 3-line headline like Little Batch's never eats
   the whole first screen. */
@media (max-width: 860px) {
  h1 { font-size: 46px; }
  h2 { font-size: 36px; }
  h3 { font-size: 27px; }
}
@media (max-width: 600px) {
  h1 { font-size: 36px; }
  h2 { font-size: 30px; }
  h3 { font-size: 24px; }
}

p { font-family: "americane", serif; color: var(--text-soft); line-height: 1.7; font-size: 19px; }

/* Vertical rhythm: one consistent gap after a heading and between
   paragraphs, applied automatically instead of per-instance inline
   margins (which is what made some text blocks tight and others
   loose). A more specific rule — like .belief-block p's auto-center
   margin — still wins where one is deliberately set. */
h1 + p, h2 + p, h3 + p, p + p { margin-top: 20px; }

.btn {
  display: inline-block;
  font-family: "futura-pt", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 35px;
  border: 1px solid var(--gold);
  color: var(--text-primary);
  background: transparent;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.btn:hover { border-color: var(--bronze); color: var(--bronze); background: rgba(182,152,94,0.1); }
.btn:active { transform: scale(0.97); }
.btn.filled { background: var(--gold); color: var(--void); }
.btn.filled:hover { background: var(--bronze); border-color: var(--bronze); color: var(--void); }
body.light-mode .btn:hover { color: var(--juice); border-color: var(--juice); background: rgba(185,96,42,0.08); }
body.light-mode .btn.filled:hover { background: var(--juice); border-color: var(--juice); color: #FFFFFF; }

/* ---------- Interaction basics: focus + press feedback ----------
   Everything marked .tap (buttons, nav links, the mobile menu
   toggle, the proof switch) gets the same keyboard focus ring and a
   small press-down on :active, so clicking/tapping anything reads
   as a single consistent system rather than per-component rules. */
.tap:active { transform: scale(0.97); }
a:focus-visible, button:focus-visible, .tap:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Card hover (photo grids) ----------
   A subtle zoom on hover for the three photo-grid patterns in the
   site: the lifestyle row (home), the archetype row (story), and
   the product detail grid (little batch). Every container this
   targets already clips overflow (.lf-cell, .archetype-cell,
   .photo-frame), so the scaled image never bleeds past its own
   cell or over a divider. */
.lf-cell img,
.archetype-grid img,
.detail-cell .photo-frame img {
  transition: transform 0.5s ease;
}
.lf-cell:hover img,
.archetype-cell:hover img,
.detail-cell:hover .photo-frame img {
  transform: scale(1.06);
}

/* ---------- Scroll reveal ----------
   Paired with the IntersectionObserver in shared.js. A block starts
   faded/offset and settles into place once it crosses into view. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .parallax { transform: none !important; }
  .reveal { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

section { padding: 90px 40px; border-bottom: 1px solid var(--border-soft); }
.center { text-align: center; }
.narrow { max-width: 620px; margin: 0 auto; }

footer.site-footer {
  padding: 28px 40px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
  background: var(--surface);
}

/* ---------- Asymmetric / parallax scroll ---------- */
.parallax { will-change: transform; }

/* Masks a parallax image so it can slide without revealing gaps or
   bleeding into neighboring sections. Wrap any <img class="parallax">
   that sits inside a grid cell or auto-height block in a `.pv-mask`
   div. The mask takes the box's normal size; the image inside is
   oversized by the scroll budget (±70px) and clipped to the mask.
   Only use this for texture/atmosphere shots where a sliver of crop
   at the edge is fine — never for a composed product shot. */
.pv-mask { position: relative; overflow: hidden; height: 100%; }
.pv-mask img.parallax {
  position: absolute;
  inset: -70px 0;
  width: 100%;
  height: calc(100% + 140px);
  object-fit: cover;
}

/* ---------- Photo frame ----------
   Shows a photo in full, at whatever size fits the box, and never
   crops it — for any shot that was composed intentionally (product
   bottles, scenes with people) where losing part of the frame isn't
   acceptable. The box's own background shows through as padding on
   whichever axis has slack, so it should be a dark/neutral tone that
   matches the photo's own background. No parallax: motion requires
   oversizing past the box, which is exactly the crop risk this
   avoids. */
.photo-frame { position: relative; height: 100%; width: 100%; background: var(--void); overflow: hidden; }
.photo-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- Placeholder for consent-pending images ---------- */
.pending-asset {
  background: repeating-linear-gradient(135deg, rgba(182,152,94,0.08) 0 14px, rgba(182,152,94,0.03) 14px 28px);
  border: 1px dashed var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.pending-asset span {
  font-family: "americane", serif;
  font-style: italic;
  font-size: 16px;
  color: var(--fg-mute);
  max-width: 260px;
}

/* ---------- Proof toggle (light mode override, Little Batch page only) ---------- */
body.light-mode {
  --bg: #F7F3E6;
  --surface: #FFFFFF;
  --fg: #241F19;
  --fg-soft: #4A4336;
  --fg-mute: #857C6C;
}
body.light-mode h1, body.light-mode h2, body.light-mode h3 { color: #241F19; }
body.light-mode p { color: #4A4336; }
body.light-mode header.site-nav { background: rgba(247,243,230,0.9); border-bottom-color: rgba(140,104,32,0.25); }
body.light-mode .btn { color: #241F19; }
body.light-mode .btn.filled { color: #FFFFFF; }

.proof-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  margin-top: 35px;
}
.proof-toggle-label {
  font-family: "futura-pt", sans-serif;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-mute);
  transition: color 0.3s ease;
}
.proof-toggle-label.active { color: var(--bronze); }
body.light-mode .proof-toggle-label.active { color: var(--juice); }
.proof-switch {
  width: 56px;
  height: 28px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--gold);
  position: relative;
  cursor: pointer;
  transition: border-color 0.25s ease;
}
.proof-switch:hover { border-color: var(--bronze); }
.proof-switch:hover .knob { background: var(--bronze); }
body.light-mode .proof-switch:hover .knob { background: var(--juice); }
.proof-switch .knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gold);
  transition: left 0.3s ease;
}
body.light-mode .proof-switch .knob { left: 28px; background: var(--juice); }