/* ==========================================================================
   Our Story — editorial brand page (page-templates/our-story.php only)

   Loaded only on this template, so nothing here can reach the shop, the
   homepage or the journal. Everything is built from the tokens in theme.css;
   the editorial serif is named here only on this page's own headlines, so the
   header, the nav and the product cards inside section four keep the site's
   display face and the page still reads as the same store. (The closing CTA
   above the footer is the serif's one site-wide appearance; it lives in
   theme.css because it is drawn on every template.)
   ========================================================================== */

.story-hero,
.story-meaning,
.story-why,
.story-honey,
.story-philosophy,
.story-next,
.story-rooted {
  /* Cormorant Garamond is declared in fonts.css and self-hosted in
     assets/fonts. Outfit sits behind it so a failed font request degrades to
     the site's own display face rather than to a system serif. */
  --story-display: "Cormorant Garamond", "Outfit", Georgia, serif;

  /* An editorial page breathes more than a shop page: this is the section
     rhythm, deliberately larger than --section-space. */
  --story-space: clamp(64px, 8vw, 132px);
}

/* -------------------------------------------------------------------------- */
/* Shared                                                                     */
/* -------------------------------------------------------------------------- */

/* The serif, applied by name rather than by overriding --font-display, so a
   component nested inside these sections — the product card, a WooCommerce
   price — is untouched and matches its twin on the shop. */
.story-hero__title,
.story-meaning__title-en,
.story-meaning__sub,
.story-next__title,
.story-next__pull,
.story-next__future-list,
.story-honey__note,
.story-principle__number,
.story-why .section-header__title,
.story-honey .section-header__title,
.story-philosophy .section-header__title,
.story-rooted .section-header__title {
  font-family: var(--story-display);
}

/* Cormorant sets noticeably smaller than Outfit at the same px, so the shared
   --fs-h3 would leave every section title undersized against the hero. The
   section scale is lifted here, on this page only. */
.story-why .section-header__title,
.story-honey .section-header__title,
.story-philosophy .section-header__title,
.story-rooted .section-header__title,
.story-next__title {
  font-size: clamp(30px, 3.4vw, 44px);
}

/* Cormorant sets small for its point size and its colour is lighter than
   Outfit's, so the display weight steps up one notch on this page only. */
.story-hero__title,
.story-next__title,
.story-why .section-header__title,
.story-honey .section-header__title,
.story-philosophy .section-header__title,
.story-rooted .section-header__title {
  font-weight: var(--fw-display-medium);
  letter-spacing: var(--ls-display);
}

/* A short gold hairline above each eyebrow — the page's one recurring
   ornament, and the only place gold is used at any size. */
.story-hero__lede .eyebrow::before,
.story-meaning__inner .eyebrow::before,
.story-why__copy .eyebrow::before,
.story-honey__head .eyebrow::before,
.story-philosophy__head .eyebrow::before,
.story-next__copy .eyebrow::before,
.story-rooted__copy .eyebrow::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-bottom: 18px;
  background: var(--color-honey);
}

.story-meaning__inner .eyebrow::before {
  margin-inline: auto;
}

.story-hero .eyebrow,
.story-meaning .eyebrow,
.story-why .eyebrow,
.story-honey .eyebrow,
.story-philosophy .eyebrow,
.story-next .eyebrow,
.story-rooted .eyebrow {
  margin-bottom: 14px;
}

/* Body copy on this page is a shade lighter than a product page's: long-form
   reading, not scanning. */
.story-hero__text,
.story-meaning__copy,
.story-why__copy p,
.story-honey__copy,
.story-rooted__text {
  color: var(--color-text-muted);
}

.story-meaning__copy p + p,
.story-why__copy p + p,
.story-honey__copy p + p,
.story-rooted__text p + p,
.story-next__copy p + p {
  margin-top: 1.05em;
}

/* -------------------------------------------------------------------------- */
/* Figure — the page's one image component                                    */
/* -------------------------------------------------------------------------- */

.story-figure {
  margin: 0;
  min-width: 0;
  aspect-ratio: var(--story-figure-ratio, 4 / 5);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-image);
  background: var(--color-bg-muted);
}

.story-figure picture,
.story-figure img {
  display: block;
  width: 100%;
  height: 100%;
}

/* The frame already clips to the radius; a second one inside it leaves a
   hairline of border showing at each corner. Same reasoning as the exception
   list in theme.css. */
.story-figure img {
  object-fit: cover;
  object-position: var(--story-figure-position, 50% 50%);
  border-radius: 0;
}

/* Waiting for a photograph. Dashed rather than solid so it never reads as a
   finished panel, and it names the picture it wants. */
.story-figure--empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  border-color: var(--color-honey);
  background: var(--color-bg-muted);
}

.story-figure__placeholder {
  display: grid;
  gap: 10px;
  max-width: 32ch;
  padding: 24px;
  text-align: center;
}

.story-figure__placeholder-label {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-honey-deep);
}

.story-figure__placeholder-subject {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* 1 — Hero                                                                   */
/* -------------------------------------------------------------------------- */

.story-hero {
  background: var(--color-bg-card);
  padding-block: clamp(48px, 6vw, 96px) clamp(64px, 8vw, 120px);
}

.story-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: clamp(36px, 5vw, 64px);
  align-items: start;
}

/* The headline spans both columns; the lead and the photograph share the row
   beneath it. Half a column is 668px at the widest the site ever gets, and the
   second clause cannot hold one line there above ~52px. */
.story-hero__lede {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Flush with the foot of the photograph. Centred, the four lines of lead float
   in the middle of a 660px column and the gap above them reads as a hole;
   bottom-aligned, the two columns finish on the same line and the space under
   the headline becomes the whitespace the page is built on. */
.story-hero__copy {
  min-width: 0;
  align-self: end;
}

.story-hero__title {
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: 1.04;
  color: var(--color-primary);
  /* The break is placed by the spans below, so balancing would fight it. */
  text-wrap: pretty;
}

.story-hero__title-line {
  display: block;
}

.story-hero__text {
  max-width: 46ch;
  font-size: var(--fs-lg);
}

.story-hero__cta {
  margin-top: 30px;
}

.story-hero__visual {
  min-width: 0;
}

/* -------------------------------------------------------------------------- */
/* 2 — The meaning behind NAHL                                                */
/* -------------------------------------------------------------------------- */

/* The quietest section: cream ground, centred, no image and no button. */
.story-meaning {
  padding-block: var(--story-space);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.story-meaning__inner {
  max-width: 660px;
  margin-inline: auto;
  text-align: center;
}

.story-meaning__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.story-meaning__title-en {
  font-size: clamp(38px, 4.6vw, 62px);
  font-weight: var(--fw-display-medium);
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--color-primary);
}

/* Arabic set in the Nastaliq face the theme already loads for Urdu. It is the
   script a Pakistani reader expects to see the word in; no Naskh face is
   self-hosted, and adding one for four glyphs is not worth the request. */
.story-meaning__title-ar {
  font-family: var(--font-urdu-display);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: var(--fw-regular);
  line-height: 1.9;
  letter-spacing: 0;
  color: var(--color-honey-deep);
}

.story-meaning__sub {
  margin-bottom: 30px;
  font-size: var(--fs-xl);
  font-style: italic;
  line-height: 1.3;
  color: var(--color-accent-deep);
}

.story-meaning__copy {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

/* -------------------------------------------------------------------------- */
/* 3 — Why we started                                                         */
/* -------------------------------------------------------------------------- */

.story-why {
  padding-block: var(--story-space);
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border);
}

.story-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

.story-why__visual,
.story-why__copy {
  min-width: 0;
}

.story-why__title {
  margin-bottom: 24px;
}

.story-why__copy p {
  max-width: 54ch;
}

/* -------------------------------------------------------------------------- */
/* 4 — Starting with honey                                                    */
/* -------------------------------------------------------------------------- */

.story-honey {
  padding-block: var(--story-space);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.story-honey__head {
  max-width: 620px;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.story-honey__head .section-header__title {
  margin-bottom: 20px;
}

/* Three jars, three columns — the row is the collection, so it is not allowed
   to reflow into an orphan on a tablet. Outranks the 4-up .product-grid in
   theme.css, which is why the narrower breakpoints are restated below. */
.story-honey .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.story-honey__note {
  margin-top: 32px;
  font-family: var(--story-display);
  font-size: var(--fs-xl);
  font-style: italic;
  line-height: 1.3;
  color: var(--color-text-muted);
  text-align: center;
}

.story-honey__cta,
.story-honey__empty {
  margin-top: 28px;
  text-align: center;
}

.story-honey__empty {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* 5 — Our philosophy                                                         */
/* -------------------------------------------------------------------------- */

.story-philosophy {
  padding-block: var(--story-space);
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border);
}

.story-philosophy__head {
  max-width: 620px;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.story-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Hairlines between the columns rather than three boxes: the principles are one
   statement in three parts, not three cards. */
.story-principle {
  min-width: 0;
  padding-inline: clamp(24px, 3vw, 40px);
  border-left: 1px solid var(--color-border);
}

.story-principle:first-child {
  padding-left: 0;
  border-left: 0;
}

.story-principle:last-child {
  padding-right: 0;
}

.story-principle__number {
  display: block;
  margin-bottom: 14px;
  font-size: 22px;
  font-weight: var(--fw-display-medium);
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--color-honey-deep);
}

/* Uppercase belongs to small Manrope labels in this type system, never to the
   serif — so the principle titles are set as labels, not as serif headings. */
.story-principle__title {
  margin-bottom: 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-primary);
}

.story-principle__text {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* 6 — What comes next                                                        */
/* -------------------------------------------------------------------------- */

/* The one dark section. It anchors the page tonally and keeps the closing CTA
   from having to raise its voice. */
.story-next {
  padding-block: var(--story-space);
  background: var(--color-primary);
}

.story-next__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}

.story-next__copy,
.story-next__future {
  min-width: 0;
}

.story-next__eyebrow {
  color: var(--color-honey);
}

.story-next__copy .eyebrow::before {
  background: var(--color-honey);
}

.story-next__title {
  margin-bottom: 24px;
  line-height: var(--lh-tight);
  color: var(--color-bg-card);
}

.story-next__copy p {
  max-width: 56ch;
  color: rgb(255 255 255 / 82%);
}

.story-next__pull {
  margin-top: 26px;
  padding-left: 20px;
  border-left: 2px solid var(--color-honey);
  font-size: var(--fs-xl);
  font-style: italic;
  line-height: 1.45;
}

.story-next__copy .story-next__pull {
  color: var(--color-honey);
}

/* Words, not cards, and captioned as unavailable — the page must not read as a
   shelf for food the brand does not sell yet. */
.story-next__future {
  padding-top: 6px;
}

.story-next__future-label {
  margin-bottom: 18px;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgb(255 255 255 / 62%);
}

.story-next__future-list {
  font-size: var(--fs-xl);
  line-height: 1.3;
  color: var(--color-bg-card);
}

.story-next__future-list li {
  padding-block: 12px;
  border-top: 1px solid rgb(255 255 255 / 14%);
}

.story-next__future-list li:last-child {
  border-bottom: 1px solid rgb(255 255 255 / 14%);
}

/* -------------------------------------------------------------------------- */
/* 7 — Rooted in Pakistan                                                     */
/* -------------------------------------------------------------------------- */

/* Laid out the other way round from section three — photograph across the full
   column, copy beneath it as a two-part caption — so the page's two split
   sections do not mirror each other. */
.story-rooted {
  padding-block: var(--story-space);
  background: var(--color-bg-card);
}

.story-rooted__visual {
  margin-bottom: clamp(32px, 4vw, 56px);
}

.story-rooted__copy {
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.story-rooted__lede {
  min-width: 0;
}

.story-rooted__title {
  margin-top: 4px;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .story-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .story-honey .product-grid {
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .story-hero {
    padding-block: 40px 56px;
  }

  /* Copy first on a narrow screen: the headline is what the page opens with,
     and the photograph follows it rather than pushing it below the fold. */
  .story-hero__inner,
  .story-why__grid,
  .story-next__inner,
  .story-rooted__copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .story-why__visual {
    order: 2;
  }

  .story-why__copy {
    order: 1;
  }

  /* Landscape crops on a narrow column: a 4:5 frame here would eat the screen. */
  .story-figure--hero,
  .story-why__visual .story-figure {
    aspect-ratio: 3 / 2;
  }

  .story-figure--wide {
    aspect-ratio: 16 / 9;
  }

  .story-hero__text,
  .story-why__copy p,
  .story-next__copy p {
    max-width: none;
  }

  /* Three narrow columns would leave each principle about 170px wide. */
  .story-principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .story-principle {
    padding: 28px 0 0;
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .story-principle:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .story-principle:last-child,
  .story-principle:first-child {
    padding-inline: 0;
  }

  .story-next__future {
    padding-top: 0;
  }
}

@media (max-width: 700px) {
  .story-hero__title {
    font-size: clamp(34px, 9vw, 48px);
  }

  /* The break was placed for a wide measure; on a phone the sentence wraps on
     its own terms, so the two halves run together as one paragraph of type. */
  .story-hero__title-line {
    display: inline;
  }

  .story-hero__text {
    font-size: var(--fs-md);
  }

  /* One jar per row. Two would put a 165px card on a 375px screen and leave the
     third one alone underneath. */
  .story-honey .product-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .story-meaning__title {
    gap: 6px;
  }

  .story-meaning__sub {
    font-size: var(--fs-lg);
  }

  .story-figure--wide {
    aspect-ratio: 4 / 5;
  }

  .story-next__pull,
  .story-next__future-list,
  .story-honey__note {
    font-size: var(--fs-lg);
  }

}

@media (max-width: 480px) {
  .story-figure--hero,
  .story-why__visual .story-figure {
    aspect-ratio: 4 / 3;
  }
}