/* assets/css/story.css */
/* ============================================================
   SECTION 03 — Our Story
   Sticky portrait, scroll-drawn timeline, pull quote, supplier index.
   Deliberately a different visual language from 04: rules and
   type, no cards.
   ============================================================ */

.story{
  position:relative;
  background:var(--green-deep);
  color:var(--cream);
  overflow:hidden;
  padding:clamp(84px,13vh,164px) 0 clamp(80px,12vh,150px);
}
.story::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 88% 6%, rgba(184,82,44,.20), transparent 62%),
    radial-gradient(60% 50% at 4% 96%, rgba(16,26,23,.42), transparent 66%);
}
.story__inner{
  position:relative;z-index:1;
  max-width:1320px;margin:0 auto;
  padding:0 var(--pad);
}

/* ------------------------------------------------------------
   Head
   ------------------------------------------------------------ */
.story__head{max-width:900px;margin-bottom:clamp(44px,7vh,86px)}
.story__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(38px,6.4vw,104px);line-height:.96;letter-spacing:-.02em;
  margin-top:clamp(16px,2.4vh,28px);
}
.story__title .l{display:block;overflow:hidden;padding-bottom:.03em}
.story__title .l span{display:inline-block;will-change:transform}

/* ------------------------------------------------------------
   Arc — sticky portrait beside the beats
   ------------------------------------------------------------ */
.story__arc{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,5vw,86px);
  align-items:start;
}

.story__portrait{
  position:sticky;top:clamp(84px,12vh,120px);
  /* The source photo is 484x783, far taller than it is wide. At 4/5 the
     cover crop threw away 23% of the height, and centring split that
     evenly, so it cut 11% off the top -- straight through his face. 3/4
     takes only 18%, and anchoring to the top takes all of it off the
     bottom, where there is empty studio floor. */
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:3px;
  background:var(--ink);
}
.story__portrait img{
  width:100%;height:100%;object-fit:cover;
  /* His head starts 1.8% from the top of the source, so there is no
     headroom to give away. Everything anchors to the top. */
  object-position:var(--portrait-focal,50% 0%);
  transform-origin:50% 0%;
  will-change:transform;
}
.story__portrait figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(16px,2vw,26px);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-70);
  background:linear-gradient(to top,rgba(16,26,23,.82),rgba(16,26,23,0));
}
/* the hotlink failed — keep the frame, lose the broken-image icon */
.story__portrait.is-dead img{display:none}
.story__portrait.is-dead{
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(70,106,96,.9), rgba(16,26,23,1)),
    var(--ink);
}
.story__portrait.is-dead::after{
  content:'BOBO & WILD';
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:12px;letter-spacing:.4em;color:var(--cream-28);
}

/* ---------- beats ---------- */
.beats{position:relative;padding-left:clamp(26px,3vw,48px)}
.beats__rail{
  position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:var(--cream-14);
}
.beats__rail i{
  position:absolute;inset:0;display:block;
  background:var(--terracotta);
  transform:scaleY(0);transform-origin:top;
}
.beat{
  position:relative;
  padding:clamp(20px,3.4vh,40px) 0;
}
.beat + .beat{border-top:1px solid var(--cream-08)}
.beat::before{
  content:'';position:absolute;
  left:calc(clamp(26px,3vw,48px) * -1 - 3px);top:calc(clamp(20px,3.4vh,40px) + 12px);
  width:7px;height:7px;border-radius:50%;
  background:var(--green-deep);border:1px solid var(--cream-28);
  transition:background-color .5s var(--ease),border-color .5s var(--ease);
}
.beat.is-on::before{background:var(--terracotta);border-color:var(--terracotta)}

.beat__label{
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--terracotta-lift);margin-bottom:10px;
}
.beat__figure{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(40px,5.4vw,84px);line-height:.94;letter-spacing:-.02em;
}
.beat__figure em{
  font-style:normal;font-family:var(--f-ui);font-weight:300;
  font-size:clamp(11px,1vw,14px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-45);
}
.beat__text{
  margin-top:12px;max-width:44ch;
  font-size:clamp(14px,1.15vw,17px);line-height:1.62;font-weight:300;
  color:var(--cream-70);
}

/* ------------------------------------------------------------
   Pull quote
   ------------------------------------------------------------ */
/* width is set in vw, not ch: `ch` here would resolve against the
   figure's 14px UI font rather than the 66px display font inside it,
   which collapses the quote to one word per line */
.story__quote{
  margin:clamp(64px,10vh,130px) auto clamp(56px,8vh,104px);
  max-width:clamp(300px,64vw,920px);
  text-align:center;
}
.story__quote blockquote{
  margin:0;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(28px,4.6vw,66px);line-height:1.06;letter-spacing:-.015em;
}
.story__quote .w{display:inline-block;will-change:transform,opacity}
.story__quote figcaption{
  margin-top:clamp(18px,2.6vh,30px);
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--cream-45);
}

/* ------------------------------------------------------------
   Suppliers — an index, not cards
   ------------------------------------------------------------ */
.sup__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  padding-bottom:clamp(14px,2vh,22px);
  border-bottom:1px solid var(--cream-28);
}
.sup__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(24px,3.1vw,46px);line-height:1;letter-spacing:-.012em;
}
.sup__note{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-45)}

.sup{
  position:relative;display:block;width:100%;text-align:left;
  padding:clamp(20px,2.9vh,34px) 0;
  border-bottom:1px solid var(--cream-08);
  cursor:default;
}
.sup__row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;gap:clamp(14px,2.4vw,40px);
  transition:transform .6s var(--ease);
}
.sup:hover .sup__row{transform:translateX(clamp(6px,.8vw,14px))}
.sup__n{font-size:10px;letter-spacing:.2em;color:var(--cream-28);width:2.4em;flex:none}
.sup__name{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(22px,3.2vw,50px);line-height:1.02;letter-spacing:-.014em;
  transition:color .5s var(--ease);
}
.sup:hover .sup__name{color:var(--terracotta-lift)}
.sup__supplies{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream-45);white-space:nowrap;
}
.sup__detail{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--ease),opacity .5s var(--ease);
  opacity:0;
}
.sup:hover .sup__detail,.sup:focus-within .sup__detail{grid-template-rows:1fr;opacity:1}
.sup__detail > span{
  overflow:hidden;display:block;
  padding-left:calc(2.4em + clamp(14px,2.4vw,40px));
}
.sup__detail b{
  display:block;padding-top:12px;
  font-weight:300;font-size:clamp(13px,1.05vw,15.5px);line-height:1.6;
  color:var(--cream-70);max-width:52ch;
}
.sup__who{color:var(--cream-45);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:8px}

/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .story__arc{grid-template-columns:1fr;gap:clamp(28px,5vh,52px)}
  /* 16/10 here was cropping 61% of the height off a standing portrait,
     which cut below his chin. A standing figure needs a portrait frame. */
  .story__portrait{position:relative;top:auto;aspect-ratio:4/5;max-height:64vh}
  .beats{padding-left:clamp(22px,4vw,34px)}
}

/* ------------------------------------------------------------
   Mobile — detail rows are always open, since there is no hover
   ------------------------------------------------------------ */
@media (max-width:760px){
  .story__quote{max-width:none}
  .sup__row{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .sup__supplies{grid-column:2;justify-self:start}
  .sup__detail{grid-template-rows:1fr;opacity:1}
  .sup__detail > span{padding-left:calc(2.4em + clamp(14px,2.4vw,40px))}
  .sup:hover .sup__row{transform:none}
  .beat__figure{font-size:clamp(38px,13vw,62px)}
}

@media (prefers-reduced-motion:reduce){
  .story__portrait img{transform:none}
  .sup__row,.sup__name,.sup__detail{transition:none}
  .sup__detail{grid-template-rows:1fr;opacity:1}
}