/* The Angel Squad Story: Brian's letter beside his portrait, the three Hustle Fund GPs, and member tweets.
   Builds on style.css, experience.css and squad-pages.css. */

.story-hero{padding-bottom:clamp(72px,8.4vw,136px)}

/* Colour-block portrait: the photo sits at the foot of a block filled with its own backdrop colour (--c),
   with the name and role in the headroom above. */
.story-card{position:relative;isolation:isolate;margin:0;overflow:hidden;background:var(--c);color:var(--ink)}
.story-card img{position:absolute;left:0;bottom:0;z-index:-1;width:100%;height:auto;max-width:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%);mask-image:linear-gradient(to bottom,transparent,#000 9%)}
.story-card figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(20px,2vw,30px)}
.story-card-name{font-size:clamp(24px,2.35vw,38px);font-weight:650;line-height:1;letter-spacing:-.05em}
.story-card .sp-pill{background:#f7f3f14d;border-color:#1e1b1a4d}

/* Letter. The type grows with the viewport up to 28px so the column keeps pace with the portrait on wide screens. */
.story-main{--story-pt:clamp(72px,7vw,112px);--story-lift:clamp(96px,13vw,210px);padding-top:var(--story-pt)}
.story-letter-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,30vw,600px);column-gap:clamp(48px,7.5vw,140px);align-items:start}
.story-letter{grid-column:1;grid-row:1;max-width:34em;font-size:clamp(19px,1.6vw,28px);line-height:1.58;letter-spacing:-.012em}
.story-letter p{text-wrap:pretty}
.story-letter p+p{margin-top:1.1em}
.story-letter .story-lede{font-size:1.22em;font-weight:500;line-height:1.42;letter-spacing:-.03em}
.story-mark{color:inherit;background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 90%/100% .46em;padding:0 .06em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.js .story-letter .reveal .story-mark{background-size:0 .46em;transition:background-size 1.1s var(--ease) .45s}
.js .story-letter .reveal.is-visible .story-mark{background-size:100% .46em}
.story-why{font-family:Georgia,'Times New Roman',serif;font-size:1.06em;letter-spacing:-.03em}
.story-letter .story-sign{margin-top:.75em;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(36px,3.2vw,50px);line-height:1;letter-spacing:-.05em}

/* Brian's portrait: rises into the hero, then stays in view beside the letter. */
.story-founder{grid-column:2;grid-row:1;position:sticky;top:28px;z-index:2;aspect-ratio:10/16;margin-top:calc(-1*var(--story-pt) - var(--story-lift));box-shadow:0 30px 60px -30px #1e1b1a59}
@media (min-width:761px){
  /* Never taller than the screen, so the whole card stays in view while it is sticky. */
  .story-founder{justify-self:end;width:min(100%,calc((100vh - 56px)*.625))}
}
@media (min-width:1500px){
  /* Wide screens: a wider, slightly shorter card (the photo exactly fills it), so the letter and portrait stay close. */
  .story-letter-grid{grid-template-columns:minmax(0,1fr) clamp(280px,32vw,640px)}
  .story-founder{aspect-ratio:10/15;width:min(100%,calc((100vh - 56px)/1.5))}
}
/* Pure CSS entrances, like the hero lines, so nothing waits for the deferred scripts. */
@media (prefers-reduced-motion:no-preference){
  .story-founder{animation:story-rise 1.3s var(--ease) .2s both}
  .story-lede{animation:story-in 1.1s var(--ease) .4s both}
}
@keyframes story-rise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes story-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* The three GPs, under a hairline as the homepage's sections are */
.story-gps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.7vw,24px);margin:clamp(72px,7vw,120px) 0 0;padding:clamp(28px,3vw,44px) 0 0;border-top:1px solid #1e1b1a35;list-style:none}
.story-gps li:nth-child(2){transition-delay:.08s}
.story-gps li:nth-child(3){transition-delay:.16s}
.story-gp{aspect-ratio:4/5}
/* Shiyan's photo has more headroom and sits off-centre: scale it so her head matches the other two. */
.story-gp--shiyan img{width:110%;left:-10%}

/* Member tweets on ink. The band keeps the homepage .section padding (100px, 80px at 1100px and below, 65px on phones). */
.story-tweets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.7vw,24px)}
/* Size comes from the shared .sp-h2; the tighter leading and tracking keep it to four balanced lines on desktop. */
.story-community-heading{align-self:start;max-width:11em;padding:0 clamp(0px,2vw,40px) clamp(24px,3vw,48px) 0;line-height:1;letter-spacing:-.065em}
.story-community-heading .serif-word{letter-spacing:-.06em}
.story-nowrap{white-space:nowrap}
.story-tweet{border-color:#ffffff24;background:#ffffff0a;color:var(--paper)}
.story-tweet:nth-of-type(odd){transition-delay:.08s}
/* Lining figures, so handles such as @b_nicks11 read exactly as written in the italic serif. */
.story-tweet blockquote{font-variant-numeric:lining-nums}
.story-tweet blockquote a{text-decoration-color:#f4ca66b3}
.story-tweet figcaption img{filter:grayscale(1)}
/* Colour on hover only where hover is real, so a tap on a phone does not leave one avatar stuck in colour. */
@media (hover:hover){
  .story-tweet figcaption img{transition:filter .5s}
  .story-tweet:hover figcaption img{filter:none}
}
.story-tweet figcaption .mono{justify-self:start;width:max-content;color:var(--yellow);font-size:.8rem}
.story-tweet figcaption a.mono:hover{text-decoration:underline;text-underline-offset:3px}
.story-tweet a:focus-visible{outline-width:2px;outline-offset:3px}
/* Featured tweet on the hero's violet, which keeps its yellow emoji visible. */
.story-tweet--violet{border-color:transparent;background:var(--violet);color:var(--ink)}
.story-tweet--violet blockquote{font-size:clamp(20px,1.7vw,26px)}
.story-tweet--violet blockquote a{text-decoration-color:#1e1b1a80}
.story-tweet--violet figcaption .mono{color:var(--ink)}

@media (max-width:1100px){
  .story-letter-grid{grid-template-columns:minmax(0,1fr) clamp(260px,31vw,360px)}
}
@media (max-width:900px){
  .story-founder{margin-top:0;top:24px}
  .story-letter{font-size:19px}
}
@media (max-width:760px){
  /* "The Angel Squad" is longer than the other sub-page headlines: at the shared 13vw (48px floor) it wraps on most
     phones and leaves "Squad" alone on a line. 12.5vw keeps it to one line from 320px up, and reaches 84px at 672. */
  .story-hero h1{font-size:min(84px,12.5vw)}
  .story-main{padding-top:0}
  .story-letter-grid{grid-template-columns:minmax(0,1fr);row-gap:44px}
  .story-letter{grid-row:auto;grid-column:auto;font-size:18px}
  .story-letter .story-lede{font-size:1.18em}
  .story-founder{grid-row:auto;grid-column:auto;position:relative;top:auto;margin:0 calc(-1*var(--gutter));aspect-ratio:auto;height:max(56vw,min(69vw,270px));box-shadow:none}
  .story-founder figcaption{padding:26px var(--gutter)}
  .story-founder .story-card-name{font-size:clamp(24px,5.4vw,40px)}
  .story-gps{margin-top:64px;padding-top:28px;gap:12px}
  .story-gp figcaption{padding:18px}
  .story-card-name{font-size:24px}
  /* Bands: the portrait fills the height at the right of the block and the name sits beside it.
     A short fade only softens the cut through the shoulders; the backdrops already match the block. */
  .story-founder img,.story-gp img{left:auto;right:0;height:100%;width:auto;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%),linear-gradient(to right,transparent,#000 4%);mask-image:linear-gradient(to bottom,transparent,#000 9%),linear-gradient(to right,transparent,#000 4%);-webkit-mask-composite:source-in;mask-composite:intersect}
  .story-tweets{grid-template-columns:minmax(0,1fr)}
  .story-tweet{transition-delay:0s!important}
  .story-community-heading{max-width:none;padding:0 0 18px}
}
@media (min-width:601px) and (max-width:760px){
  /* Three narrow cards: the photo is anchored to the bottom again at full card width. */
  .story-gp img{right:auto;left:0;width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%);mask-image:linear-gradient(to bottom,transparent,#000 9%)}
  .story-gp--shiyan img{width:110%;left:-10%}
}
@media (max-width:600px){
  .story-gps{grid-template-columns:minmax(0,1fr)}
  .story-gps li{transition-delay:0s!important}
  .story-gp{aspect-ratio:100/52}
  .story-gp .story-card-name{font-size:clamp(24px,5.4vw,32px)}
  .story-gp--shiyan img{height:110%;right:-3%}
  .story-gp .sp-pill{padding:6px 9px}
}
@media (min-width:481px) and (max-width:600px){
  .story-gp{aspect-ratio:100/42}
}
@media (prefers-reduced-motion:reduce){
  .js .story-letter .reveal .story-mark{background-size:100% .46em}
}