/* ==========================================================================
   Phase — about page
   The flow system (css/flow.css) in the homepage's poster dress
   (css/home.css supplies the palette, the sticker hero, the manifesto and
   the close; js/home.js drives them). What's particular to this page:

   - the hero's disc is pink, and so is the manifesto it becomes
   - "The story so far." is a horizontal run: one colour-blocked card per
     year, the logo badges stuck on like stickers (they pop on as each card
     arrives), a rail that fills as you go and the PHASE mark drifting
     slowly behind
   - the Squarespace partner card, with the badge on a gold panel
   ========================================================================== */

body.about{--hm-ground:var(--p-pink)}

/* ==========================================================================
   CH 01 · HERO
   ========================================================================== */
.about .hm-sun{--s:clamp(250px,29vw,500px);left:65%;top:56%}
.about .hm-hero h1{font-size:clamp(4.2rem,16vw,15.5rem);letter-spacing:-.06em}

/* ==========================================================================
   CH 03 · THE STORY SO FAR — a horizontal run of years
   ========================================================================== */
.ab-story{background:var(--fl-bg)}
.ab-story .fl-run__stage{position:relative;overflow:hidden}
.ab-story .fl-run__head .fl-lede{max-width:52ch;margin-top:14px}
.ab-story.is-hscroll .fl-run__head .fl-lede{font-size:1rem}
/* the PHASE mark, huge and barely there, drifting slower than the cards */
.ab-story__mark{
  position:absolute;
  left:4vw;
  bottom:-2vw;
  z-index:0;
  width:max(1500px,120vw);
  max-width:none;
  height:auto;
  opacity:.045;
  pointer-events:none;
}
.ab-story .fl-wrap,
.ab-story .fl-run__viewport{position:relative;z-index:1}

.ab-track{
  --pad:max(clamp(20px,3.4vw,48px),calc((100vw - 1280px) / 2 + 48px));
  --pt:34px;
  position:relative;
  padding-top:var(--pt);
  padding-bottom:6px;
}
/* the native scroller clips vertically, so give the champagne headroom */
.ab-story:not(.is-hscroll) .ab-track{--pt:66px}
/* the rail the years hang from, and its fill */
.ab-rail{
  position:absolute;
  left:var(--pad);
  right:var(--pad);
  top:calc(var(--pt) - 20px);
  height:2px;
  border-radius:2px;
  background:var(--fl-line-2);
  transform-origin:left;
}
.ab-rail--fill{background:var(--fl-ink)}
.js .ab-story.is-hscroll .ab-rail--fill{transform:scaleX(0)}
.ab-story:not(.is-hscroll) .ab-rail--fill{display:none}

.ab-year{
  position:relative;
  flex:none;
  display:flex;
  flex-direction:column;
  width:min(370px,78vw);
  border-radius:24px;
  background:var(--fl-surface);
  border:1px solid var(--fl-line);
  box-shadow:0 34px 60px -44px rgba(60,40,10,.5);
  scroll-snap-align:start;
}
/* the dot where the card meets the rail */
.ab-year::before{
  content:"";
  position:absolute;
  left:28px;
  top:-27px;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--fl-bg);
  border:2px solid var(--fl-ink);
}
.ab-year__top{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:clamp(112px,15vh,150px);
  padding:20px 26px 18px;
  border-radius:23px 23px 0 0;
  color:var(--fg,#0a0a0a);
  background:var(--c);
}
.ab-year__y{font-size:clamp(3.4rem,5vw,4.8rem);font-weight:700;letter-spacing:-.06em;line-height:.8}
.ab-year__body{padding:24px 26px 28px}
.ab-year h3{font-size:1.28rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.ab-year p{margin-top:10px;font-size:.98rem;line-height:1.55;color:var(--fl-dim)}
.ab-year__more{display:inline-block;margin-top:12px;font-weight:600;font-size:.92rem;color:var(--fl-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.ab-year__more span{display:inline-block;transition:transform .3s var(--fl-ease)}
.ab-year__more:hover span{transform:translateX(3px)}

/* today: ink card, yellow year, a dot that pulses on the rail */
.ab-year--now{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.ab-year--now .ab-year__top{color:var(--p-yellow);border-bottom:1px solid rgba(255,255,255,.12)}
.ab-year--now p{color:rgba(255,255,255,.72)}
.ab-year--now::before{background:var(--p-yellow);border-color:#0a0a0a;box-shadow:0 0 0 0 rgba(247,208,0,.6);animation:ab-pulse 2s ease-out infinite}
@keyframes ab-pulse{to{box-shadow:0 0 0 14px rgba(247,208,0,0)}}

/* 2022: a champagne bottle popping off the top of the card */
.ab-year__cheers{
  position:absolute;
  right:2px;
  top:-70px;
  z-index:3;
  width:clamp(98px,8.4vw,124px);
  height:auto;
  transform:rotate(var(--rot,0deg));
  filter:drop-shadow(0 10px 14px rgba(60,40,10,.25));
  pointer-events:none;
}

/* the logo badges: stickers stuck over the colour block's bottom edge */
.ab-chips{
  position:absolute;
  right:18px;
  top:calc(clamp(112px,15vh,150px) - 26px);
  z-index:2;
  display:flex;
  gap:8px;
}
.ab-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 14px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(10,10,10,.08);
  box-shadow:0 1px 2px rgba(10,10,10,.08),0 10px 22px -8px rgba(10,10,10,.25);
  transform:rotate(var(--rot,0deg));
}
.ab-chip img{display:block;width:auto;height:20px}
.ab-chip--tall{height:auto;padding:8px 12px}
.ab-chip--tall img{height:40px}
.ab-chip--logo img{height:30px}
.ab-chip__word{font-weight:800;font-size:.92rem;letter-spacing:-.01em;white-space:nowrap;color:#0a0a0a}
.ab-chip__word b{color:var(--accent);font-weight:800}

/* ==========================================================================
   CH 04 · SQUARESPACE
   ========================================================================== */
.ab-partner{padding:clamp(110px,12vw,170px) 0;background:var(--fl-bg-2);overflow-x:clip}
.ab-partner__card{
  position:relative;
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  align-items:center;
  gap:clamp(28px,5vw,80px);
  padding:clamp(22px,3vw,40px);
  border-radius:32px;
  background:var(--fl-surface);
  box-shadow:0 50px 100px -60px rgba(60,40,10,.5);
}
/* the badge on a gold panel; the source image carries a wide empty strip
   on its right, so it's drawn a little oversized and nudged to centre */
.ab-partner__art{
  position:relative;
  display:flex;
  align-items:center;
  aspect-ratio:1.25;
  overflow:hidden;
  border-radius:24px;
  background:var(--p-yellow);
}
.ab-partner__art img{flex:none;width:106%;max-width:none;height:auto;margin-left:10%}
.ab-partner__sticker{position:absolute;right:-18px;bottom:-26px;width:clamp(70px,8vw,110px);height:auto;transform:rotate(-14deg)}
.ab-partner__copy{padding:clamp(4px,2vw,24px) clamp(4px,2vw,24px) clamp(4px,2vw,24px) 0}
.ab-partner__copy .fl-h2{font-size:clamp(2rem,3.6vw,3.3rem);max-width:13ch}
.ab-partner__copy .fl-lede{max-width:44ch}

/* ==========================================================================
   CH 05 · CLOSE — a longer line than the homepage's, so smaller type
   ========================================================================== */
.ab-cta .fl-cta__title{max-width:17ch;font-size:clamp(2.6rem,6.2vw,6rem);line-height:1}
.ab-cta .fl-btn svg{width:17px;height:17px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .ab-partner__card{grid-template-columns:1fr}
  .ab-partner__copy{padding:6px 10px 14px}
}
@media (max-width:640px){
  .ab-year__body{padding:20px 22px 24px}
  .ab-chip{height:42px;padding:0 11px}
  .ab-chip img{height:17px}
  .ab-chip--tall img{height:34px}
  .ab-chip--logo img{height:26px}
}
@media (prefers-reduced-motion:reduce){
  .ab-year--now::before{animation:none}
}