/* ==================================================================
   Heritage strip + Our Story
================================================================== */

/* --- Heritage strip ---------------------------------------------- */
.heritage {
  position: relative;
  z-index: 2;
  background: var(--espresso-950);
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
}
.heritage__inner {
  width: min(100% - 3rem, 1240px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(212, 175, 55, 0.14);
  border-inline: 1px solid rgba(212, 175, 55, 0.14);
}
.stat {
  background: var(--espresso-950);
  padding: clamp(1.6rem, 3.2vw, 2.6rem) clamp(0.75rem, 1.4vw, 1.25rem);
  text-align: center;
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--gold-400);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__label {
  margin-top: 0.85rem;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  line-height: 1.7;
  color: rgba(246, 241, 230, 0.6);
}
/* Four figures halve cleanly; three columns would leave one stranded. */
@media (max-width: 1000px) { .heritage__inner { grid-template-columns: repeat(2, 1fr); } }

/* --- Story ------------------------------------------------------- */
.story {
  position: relative;
  background: var(--espresso-950);
  padding: clamp(5rem, 12vh, 9rem) 0 clamp(5rem, 13vh, 10rem);
  overflow: hidden;
}
/* A faint wash of warmth so the section is not flat black-green */
.story::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 45% at 15% 8%, rgba(142, 66, 49, 0.16), transparent 70%),
    radial-gradient(60% 50% at 88% 78%, rgba(69, 54, 42, 0.35), transparent 72%);
}
.story__inner {
  position: relative;
  width: min(100% - 3rem, 1240px);
  margin: 0 auto;
}

.story__head {
  text-align: center;
  margin-bottom: clamp(3rem, 7vh, 5rem);
}
.story__title {
  margin-top: 1.1rem;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  font-weight: 400;
  color: var(--cream);
}
.story__title em {
  font-style: normal;
  color: var(--gold-400);
}
.story__head .ornament { margin-top: 1.6rem; }

/* --- Two columns -------------------------------------------------- */
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.story__media {
  position: sticky;
  top: clamp(5rem, 14vh, 8rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
/* A figure is only as tall as its picture plus its caption — never
   stretched to match a neighbour, which is what left the empty box. */
.story__media .frame { align-self: start; }

/* --- Framed photographs ------------------------------------------- */
.frame {
  position: relative;
  margin: 0;
  background: var(--espresso-900);
  border: 1px solid rgba(212, 175, 55, 0.24);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.frame::before {
  /* inner hairline, like a mounted print */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(212, 175, 55, 0.16);
  z-index: 2;
  pointer-events: none;
}
.frame__img {
  width: 100%;
  height: auto;          /* lets aspect-ratio win over the height attribute */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04);
  transition: transform 1.2s var(--ease-out);
}
.frame:hover .frame__img { transform: scale(1.04); }
.frame--wide .frame__img { aspect-ratio: 5 / 4; }
.frame--portrait .frame__img {
  aspect-ratio: 4 / 5;
  object-position: 50% 28%;
}

.frame figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem 1.2rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-200);
  border-top: 1px solid rgba(212, 175, 55, 0.18);
}
.frame figcaption span {
  font-size: 0.67rem;
  letter-spacing: 0.2em;
  color: rgba(246, 241, 230, 0.5);
}

/* Placeholder shown until the photograph is dropped in --------------- */
.frame.is-empty .frame__img { display: none; }
.frame.is-empty::after {
  content: attr(data-hint);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 4 / 5;
  padding: 2rem;
  font-size: 0.69rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 2;
  white-space: pre-line;
  color: rgba(232, 210, 140, 0.42);
  background:
    repeating-linear-gradient(45deg,
      rgba(212, 175, 55, 0.05) 0 10px,
      transparent 10px 20px);
}
.frame--wide.is-empty::after { aspect-ratio: 5 / 4; }

/* --- Prose --------------------------------------------------------- */
.story__text {
  max-width: 62ch;
  font-size: clamp(1rem, 1.25vw, 1.08rem);
  line-height: 1.85;
  color: rgba(246, 241, 230, 0.8);
}
.story__text p + p { margin-top: 1.5em; }
.story__text strong {
  font-weight: 400;
  color: var(--gold-200);
}
.story__lede {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.55;
  color: var(--cream);
  margin: 0 0 1.6em;
}

.story__quote {
  position: relative;
  margin: clamp(2.2rem, 5vh, 3.2rem) 0;
  padding: 0 0 0 clamp(1.4rem, 3vw, 2.4rem);
  border-left: 1px solid var(--gold-500);
}
.story__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.55;
  color: var(--cream);
  margin: 0;
}
.story__quote cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.69rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gold-300);
}

@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .story__media {
    position: static;
    flex-direction: row;
    gap: 1rem;
  }
  .story__media .frame { flex: 1; min-width: 0; }
  .story__text { max-width: none; }
}
/* Two frames side by side even on a phone — stacking them cost most of
   a screen, and both read fine at half width. */
@media (max-width: 560px) {
  .story__media { flex-direction: row; gap: 0.6rem; }
  .story__media .frame { flex: 1; min-width: 0; }
  .frame--film { width: auto; }
  .frame figcaption { padding: 0.7rem 0.6rem 0.75rem; font-size: 0.66rem; letter-spacing: 0.12em; }
  .frame figcaption span { font-size: 0.66rem; letter-spacing: 0.1em; }
}

/* --- Scroll reveal -------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}


/* --- Phone: the story opens folded --------------------------------
   Four paragraphs plus a pull quote runs to several screens on a
   phone. It opens at a readable excerpt and expands on request.
------------------------------------------------------------------ */
.story__expand { display: none; }

@media (max-width: 860px) {
  .story { padding-top: clamp(3.2rem, 7vh, 4.5rem); padding-bottom: clamp(3rem, 6vh, 4rem); }
  .story__head { margin-bottom: 2rem; }
  .story__head .ornament { display: none; }
  .story__text.is-collapsed {
    position: relative;
    max-height: 40vh;
    overflow: hidden;
  }
  .story__text.is-collapsed::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 8rem;
    background: linear-gradient(180deg, transparent, var(--espresso-950));
    pointer-events: none;
  }
  .story__expand {
    display: inline-flex;
    margin-top: 1.5rem;
  }
}

/* --- The shopfront walk-through, under the founder's portrait ------
   The clip is 478x850 from a phone, so it plays at its own ratio
   inside the same frame treatment rather than being cropped.
------------------------------------------------------------------ */
.frame--film .frame__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;      /* matches the photographs beside it */
  object-fit: cover;
  filter: saturate(0.95) contrast(1.04);
}
@media (max-width: 900px) {
  .frame--film { width: min(100%, 300px); }
}

/* --- Story teaser on the home page --------------------------------
   Portrait beside a short opening and a way through to the full page.
   The media column is a single frame here, so it does not need the
   sticky behaviour the full story uses.
------------------------------------------------------------------ */
.story--teaser .story__media { position: static; }
.story--teaser .story__grid { align-items: center; }
.story__title--teaser {
  margin-top: 0.7rem;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  text-align: left;
}
.story--teaser .story__lede { margin-bottom: 1.2em; }
.story__more { margin-top: 1.6rem; }

@media (max-width: 900px) {
  .story--teaser .story__grid { grid-template-columns: 1fr; }
  .story--teaser .story__media { flex-direction: row; justify-content: flex-start; }
  .story--teaser .frame { flex: 0 0 auto; width: min(62%, 230px); }
  .story__title--teaser { text-align: center; }
  .story--teaser .story__text { text-align: center; }
  .story--teaser .story__media { justify-content: center; }
  .story__more { display: inline-flex; }
}

/* --- A full-width plate inside the story ---------------------------
   The founder and the shopfront are different kinds of picture: one is
   a portrait in a rail, the other is a place. The place gets the width.
------------------------------------------------------------------ */
.story__plate {
  margin: clamp(2.5rem, 6vh, 4rem) 0;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: var(--espresso-900);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.story__plate img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 45%;
  display: block;
  filter: saturate(0.95) contrast(1.03);
}
.story__plate figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 1rem 1.25rem 1.1rem;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}
.story__plate-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-200);
}
.story__plate-sub {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(246, 241, 230, 0.5);
}

/* On the story page the text column is the page, so let it breathe and
   keep the rail to the founder alone. */
/* The rail is sticky, so everything in it must fit the screen at once
   or the bottom of it can never be reached. Narrowing the column
   shortens the portrait enough to make room for the facts beneath it;
   the prose is capped at 62ch regardless, so the text column gaining
   width costs nothing. */
.page-story .story__grid { grid-template-columns: minmax(0, 0.52fr) minmax(0, 1fr); }
.page-story .story__media { gap: 1.25rem; }
@media (max-width: 900px) {
  .page-story .story__grid { grid-template-columns: 1fr; }
  .story__plate img { aspect-ratio: 4 / 3; }
}

/* --- The gallery photograph and the clip, as a matched pair --------
   Same width, same ratio, same baseline — they are two views of the
   same place, so they should not be different sizes.
------------------------------------------------------------------ */
.story__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem);
  margin: clamp(1.5rem, 3.5vh, 2.4rem) 0 clamp(2.5rem, 6vh, 4rem);
  align-items: start;
}
.story__pair .frame { margin: 0; }
.story__pair .frame__img,
.story__pair .frame__video { aspect-ratio: 4 / 5; }

/* The rail holds one portrait now, so let it sit and stop stretching. */
.page-story .story__media { position: sticky; }

/* --- Facts under the portrait -------------------------------------
   The rail carries a single photograph against a very long text
   column, which left a tall empty space beside the reading. This is
   deliberately small: the rail is sticky, and anything that makes it
   taller than the viewport stops it sticking properly.
------------------------------------------------------------------ */
.railfacts {
  margin: 0;
  border: var(--rule) solid rgba(212, 175, 55, 0.18);
  border-radius: 2px;
  background: rgba(212, 175, 55, 0.03);
}
.railfacts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.62rem 1rem;
  border-block-end: var(--rule) solid rgba(212, 175, 55, 0.12);
}
.railfacts > div:last-child { border-block-end: 0; }
.railfacts dt {
  flex: 0 0 auto;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.railfacts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.25;
  text-align: right;
  color: var(--cream);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* Below the breakpoint the rail is no longer a rail — it stacks above
   the text, where a second block of dates just delays the reading. */
@media (max-width: 900px) {
  .railfacts { display: none; }
}

/* A sticky rail taller than the screen can never be read to its end —
   pin it and the bottom sits permanently below the fold. Laptops are
   commonly 768px tall, so size the portrait against the viewport
   rather than the column and let the figure hug it. */
@media (min-width: 901px) {
  .page-story .story__media {
    top: clamp(4.5rem, 9vh, 7rem);
    /* The portrait is 4:5, so a rail w wide is 1.25w tall before the
       caption. Capping the rail's WIDTH against the viewport height
       is what keeps the whole thing — portrait, caption and facts —
       on one screen, and it keeps the card exactly as wide as the
       photograph, which capping the image's height would not. */
    max-width: min(100%, 36vh);
  }
}

/* --- The story after it leaves the rail ---------------------------
   The portrait rail is only as tall as the portrait. Running a narrow
   text column past it for another two thousand pixels left the entire
   left side of the page empty, so the story steps out of the columns
   once the rail is spent: the reading stays at its 62ch measure and
   centres, and the photographs take the width they deserve.
------------------------------------------------------------------ */
.story__flow {
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
  font-size: clamp(1rem, 1.25vw, 1.08rem);
  line-height: 1.85;
  color: rgba(246, 241, 230, 0.8);
}
.story__flow strong { font-weight: 400; color: var(--gold-200); }

.story__block { max-width: 62ch; margin-inline: auto; }
.story__block p { margin: 0; }
.story__block p + p { margin-top: 1.5em; }

.story__flow .story__quote { max-width: 62ch; margin-inline: auto; }

/* Wide enough to feel like a break from the column, short of the full
   bleed — a 1150px-wide photograph of a shopfront is a poster, not a
   plate in a story. */
.story__flow .story__plate,
.story__flow .story__pair { max-width: 58rem; margin-inline: auto; }