/* =====================================================================
   Teaspoon Honey — Story page (ADDITIVE, /story/ only)
   Full-viewport storytelling panels. Namespaced `.story*`, reuses theme
   tokens. No content is pre-hidden (GSAP handles reveals), so it degrades to
   clean stacked sections if JS is unavailable.
   ===================================================================== */
.story { position: relative; }
.story *, .story *::before, .story *::after { box-sizing: border-box; }

/* Panels — each fills the viewport with an opaque background so the pinned
   stack reads as one panel at a time. */
.story-panel {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.story-panel__inner {
  position: relative; z-index: 2; width: 100%;
  max-width: 1120px; padding: clamp(90px, 12vh, 130px) clamp(24px, 6vw, 80px) clamp(40px, 8vh, 80px);
  text-align: center;
}

/* Tonal backgrounds (deliberate dark/light rhythm) */
.story-panel--dark  { background: var(--noir);  color: var(--cream); }
.story-panel--cream { background: var(--cream); color: var(--brown); }
.story-panel--honey { background: var(--honey-soft); color: var(--brown); }
.story-panel--dark .story-eyebrow  { color: var(--honey); }

/* Typography */
.story-eyebrow { display: block; font-family: var(--sans); font-size: 0.75rem; letter-spacing: .34em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin-bottom: 20px; }
.story-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.story-panel--dark .story-title { color: #fff; }
.story-title--md { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.story-title em { font-style: italic; color: var(--honey); }
.story-sub { font-family: var(--sans); font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.75; color: var(--ink-soft); max-width: 620px; margin: 22px auto 0; }
.story-panel--dark .story-sub { color: rgba(249,242,226,.72); }
.story-cue { display: inline-block; margin-top: clamp(32px, 6vh, 60px); font-family: var(--sans); font-size: 0.75rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(249,242,226,.55); animation: story-cue 2.4s ease-in-out infinite; }
@keyframes story-cue { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(8px); opacity: 1; } }

/* Buttons */
.story-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: .95em 2em; border-radius: 100px; border: 1px solid transparent; transition: transform .3s, background .25s, color .25s, box-shadow .3s, border-color .25s; }
.story-btn--gold { background: var(--honey); color: var(--brown); }
.story-btn--gold:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(234,154,54,.42); }
.story-btn--ghost { background: transparent; color: var(--cream); border-color: rgba(249,242,226,.4); }
.story-btn--ghost:hover { background: rgba(249,242,226,.12); }
.story-panel--honey .story-btn { background: var(--brown); color: var(--cream); }
.story-panel--honey .story-btn:hover { background: var(--gold); color: var(--brown); transform: translateY(-2px); }
.story-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: clamp(28px, 5vh, 44px); }

/* Split panels (image + copy) */
.story-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: center; text-align: left; max-width: 1160px; }
.story-split .story-sub, .story-split .story-eyebrow { margin-left: 0; margin-right: 0; }
.story-media img { width: 100%; height: auto; max-height: 72vh; object-fit: cover; border-radius: 22px; box-shadow: 0 40px 90px rgba(13,10,6,.35); }

/* Collection row (real product jars) */
.story-collection { display: flex; justify-content: center; gap: clamp(12px, 2vw, 28px); flex-wrap: wrap; margin-top: clamp(30px, 5vh, 54px); }
.story-collection figure { margin: 0; width: clamp(120px, 15vw, 180px); }
.story-collection img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 14px; box-shadow: 0 20px 46px rgba(13,10,6,.4); }
.story-collection figcaption { font-family: var(--sans); font-size: .78rem; letter-spacing: .04em; color: rgba(249,242,226,.75); margin-top: 12px; }

/* Journey steps */
.story-journey { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 6px; margin-top: clamp(28px, 5vh, 48px); }
.story-journey span { font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.5rem); color: var(--brown); }
.story-journey i { color: var(--gold); font-style: normal; margin: 0 4px; }

/* Auto-height panel (holds tall interactive content e.g. the gift configurator;
   never pinned, flows normally so nothing is clipped). */
.story-panel--auto { display: block; height: auto; min-height: 0; overflow: visible; }
.story-panel--auto > .luxv2 { position: relative; z-index: 2; }

/* Contact details block */
.story-contact { margin-top: 22px; font-family: var(--sans); font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 2; color: var(--brown); }
.story-contact p { margin: 0 0 .4em; }
.story-contact a { color: var(--terra); text-decoration: underline; text-underline-offset: 3px; }
.story-contact strong { color: var(--brown); }

/* ---- Contact form + locations -------------------------------------- */
.lc { width: 100%; max-width: 1080px; margin: 0 auto; padding: clamp(90px, 12vh, 130px) clamp(24px, 6vw, 80px) clamp(60px, 9vh, 100px); }
.lc__head { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 4vh, 44px); }
.lc__alert { max-width: 760px; margin: 0 auto clamp(24px, 4vh, 36px); padding: 16px 20px; border-radius: 14px; font-family: var(--sans); font-size: .95rem; line-height: 1.55; }
.lc__alert--ok { background: rgba(74,124,63,.12); color: #2f5a28; border: 1px solid rgba(74,124,63,.35); }
.lc__alert--err { background: rgba(188,91,56,.1); color: var(--terra); border: 1px solid rgba(188,91,56,.35); }
.lc__alert a { color: inherit; }

.lc__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; text-align: left; }

.lc__form { display: grid; gap: 16px; }
.lc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lc__field { display: flex; flex-direction: column; gap: 7px; }
.lc__field > span { font-family: var(--sans); font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }
.lc__field > span em { color: var(--terra); font-style: normal; }
.lc__field input, .lc__field select, .lc__field textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--brown);
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .85em 1em;
  transition: border-color .25s, box-shadow .25s;
}
.lc__field textarea { resize: vertical; min-height: 130px; }
.lc__field input:focus, .lc__field select:focus, .lc__field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242,184,49,.18);
}
.lc__submit { justify-self: start; margin-top: 6px; border: none; cursor: pointer; }
.lc__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lc__aside { display: grid; gap: 18px; }
.lc__card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 2.4vw, 30px); }
.lc__card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--brown); margin: 0 0 12px; }
.lc__card p { font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: var(--brown); margin: 0 0 8px; }
.lc__card a { color: var(--terra); text-decoration: none; }
.lc__card a:hover { text-decoration: underline; }
.lc__muted { color: var(--ink-soft) !important; font-size: .9rem !important; }
.lc__maplink { display: inline-block; margin-top: 6px; font-family: var(--sans); font-size: .8rem; letter-spacing: .06em; font-weight: 700; text-transform: uppercase; color: var(--gold) !important; }

@media (max-width: 820px) {
  .lc__grid { grid-template-columns: 1fr; }
  .lc__row { grid-template-columns: 1fr; }
}


/* Panel indicator dots (desktop only) */
.story-dots { position: fixed; right: clamp(16px, 2vw, 34px); top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 13px; }
.story-dots__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(120,110,95,.45); transition: transform .35s, background .35s; }
.story-dots__dot.is-active { background: var(--honey); transform: scale(1.5); }

/* Responsive */
@media (max-width: 767px) {
  .story-dots { display: none; }
  .story-panel { min-height: 100vh; height: auto; }
  .story-split { grid-template-columns: 1fr; text-align: center; gap: 26px; }
  .story-split .story-sub, .story-split .story-eyebrow { margin-left: auto; margin-right: auto; }
  .story-media img { max-height: 46vh; }
  .story-cta { flex-direction: column; }
  .story-cta .story-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .story-cue { animation: none; }
  .story-btn:hover { transform: none !important; }
}

/* ---- Type system: sans headings, script emphasis (see theme.css) ----- */
.story-title{ font-weight:700; letter-spacing:-.024em; }
.story-title em{ font-family:var(--script); font-style:normal; font-weight:400; font-size:1.1em; }

/* =====================================================================
   PANEL PAGE PARTS  (page-panels.php)
   Copy, card grids, product grids and fine print for the client site-map
   pages. Follows the existing tonal pattern: a base rule for the light
   panels, plus a `.story-panel--dark` override, so each part works on
   both backgrounds.

   `.story-fine` was already being used by page-gifting.php but had no rule
   anywhere — the gifting page's phone/Instagram line has been rendering at
   default body size all along. It is styled here.
   ===================================================================== */

.story-copy {
  font-family: var(--sans);
  font-size: clamp(.95rem, 1.15vw, 1.05rem);
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 18px auto 0;
}
.story-panel--dark .story-copy { color: rgba(249,242,226,.72); }

/* Card grid — auto-fit so 2 cards centre and 3+ wrap without a count-specific
   rule, and minmax(0,…) so long words cannot force an overflow. */
.story-cards {
  list-style: none;
  margin: clamp(28px, 4.5vh, 48px) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  max-width: 900px;
  text-align: left;
}
.story-card {
  background: rgba(255,253,247,.9);
  border: 1px solid rgba(67,55,45,.1);
  border-radius: 18px;
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: 0 18px 44px rgba(67,55,45,.08);
}
.story-panel--dark .story-card {
  background: rgba(249,242,226,.06);
  border-color: rgba(249,242,226,.16);
  box-shadow: none;
}
.story-card__t {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--brown);
}
.story-panel--dark .story-card__t { color: var(--cream); }
.story-card__d {
  font-family: var(--sans);
  font-size: .93rem;
  line-height: 1.7;
  margin: 0;
  color: var(--ink-soft);
}
.story-panel--dark .story-card__d { color: rgba(249,242,226,.72); }

/* WooCommerce shortcode grids inside a panel. The theme's own product-card
   styles apply; this only gives the block room and removes the default
   left-aligned list indent. */
.story-grid {
  margin: clamp(28px, 4.5vh, 48px) auto 0;
  max-width: 1120px;
  text-align: left;
}
.story-grid ul.products { margin: 0; padding: 0; }
/* An empty grid must say so rather than leaving a blank panel. */
.story-grid .woocommerce-info,
.story-grid .woocommerce-no-products-found {
  font-family: var(--sans);
  text-align: center;
  margin: 0;
}

.story-fine {
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .02em;
  line-height: 1.9;
  margin: clamp(22px, 3.4vh, 34px) auto 0;
  color: var(--ink-soft);
}
.story-panel--dark .story-fine { color: rgba(249,242,226,.62); }
.story-fine a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.story-fine a:hover { color: var(--honey); }
.story-fine span { margin: 0 .5em; opacity: .5; }

/* =====================================================================
   PHOTOGRAPHIC HERO BAND  (.story-panel--photo)
   A full-bleed photograph behind a panel, for the interior pages that
   previously opened on flat colour with no imagery at all.

   The photo is a real <img> rather than a CSS background-image so it
   gets srcset, width/height and lazy-loading from WordPress — a CSS
   background would have been a single unresponsive file with no
   intrinsic size (and the audit already flagged CLS from missing
   dimensions).

   Two scrims sit over it: a vertical one to seat the type, and a slight
   warm wash to keep the photograph inside the brand palette rather than
   reading as a raw stock photo.
   ===================================================================== */

.story-panel--photo{ position:relative; isolation:isolate; }
.story-panel__bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.story-panel__bgimg{
  width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
  display:block;
}
.story-panel--photo::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(13,10,6,.72) 0%, rgba(13,10,6,.55) 45%, rgba(13,10,6,.78) 100%),
    linear-gradient(120deg, rgba(67,40,10,.30), rgba(13,10,6,0) 60%);
}
/* Content must clear both the photo and the scrim. */
.story-panel--photo > .story-panel__inner{ position:relative; z-index:2; }
/* On a photograph the copy needs the light treatment regardless of the
   panel's declared tone. */
.story-panel--photo .story-title,
.story-panel--photo .story-title em{ color:#fff; }
.story-panel--photo .story-sub,
.story-panel--photo .story-copy{ color:rgba(249,242,226,.86); }
.story-panel--photo .story-eyebrow{ color:var(--honey); }
.story-panel--photo .story-fine{ color:rgba(249,242,226,.7); }

@media (prefers-reduced-motion: no-preference){
  /* A very slow drift stops the hero feeling like a flat placed image.
     Transform-only, so it composites without layout work. */
  .story-panel--photo .story-panel__bgimg{
    animation:tsp-drift 24s ease-in-out infinite alternate;
    will-change:transform;
  }
  @keyframes tsp-drift{
    from{ transform:scale(1.06) translate3d(0,0,0); }
    to  { transform:scale(1.12) translate3d(0,-1.2%,0); }
  }
}

/* =====================================================================
   CONTAINER OVERRIDE
   theme.css sets --tsp-container, but this stylesheet is enqueued with
   `tsp-theme` as a dependency and therefore loads AFTER it — so its own
   `.story-panel__inner{max-width:1120px}` above was winning and every
   panel stayed 1120px wide. Restated here so the 1440px shell actually
   applies, and kept next to the rule it overrides rather than hidden in
   another file.
   ===================================================================== */
.story-panel__inner{
  max-width:var(--tsp-container,1440px);
  padding-left:var(--tsp-gutter,clamp(20px,4vw,64px));
  padding-right:var(--tsp-gutter,clamp(20px,4vw,64px));
}
/* Prose keeps a readable measure inside the wider shell. */
.story-panel__inner .story-sub,
.story-panel__inner .story-copy{ max-width:var(--tsp-measure,68ch); }
.story-cards{ max-width:var(--tsp-container,1440px); }