/* Story page: app-only additions on top of story.css (the static story.html styles, verbatim). Loaded after story.css. */

/* drop cap: the static page tags the first paragraph .lead; rich text bodies don't, so use the first paragraph */
.story-body > p:first-of-type::first-letter{float:left; font-family:var(--font-display); font-size:4.6em; line-height:.8; margin:.06em .1em 0 0; color:var(--juice)}
.story-dek b{color:var(--ink)}

/* Top band on tablets and desktop: the headline runs the full width of the page (balanced lines) instead of
   stopping at 21-24ch, and the dek runs to the edge of the reading column so it lines up with the media below.
   That takes a long headline from 4 lines to 2 and pulls the photo/video up ~135px, with no empty orange on the right. */
@media (min-width:761px){
  .story-head h1,.story-head h1.is-long{max-width:none; text-wrap:balance}
  .story-head .story-dek,.story-head .disclose{max-width:72ch; text-wrap:pretty}
  .story-head{padding-bottom:clamp(22px, 2.4vw, 32px)}
}
@media (min-width:981px){
  .story-head .story-dek,.story-head .disclose{max-width:calc(100% - 360px - clamp(28px, 4.4vw, 64px))}
}
@media (min-width:981px) and (max-width:1180px){
  .story-head .story-dek,.story-head .disclose{max-width:calc(100% - 300px - clamp(28px, 4.4vw, 64px))}
}
.story-body p b{color:var(--paper)}
.story-body > ul li a,.story-body > ol li a{color:var(--cream); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}

/* pull quotes: site.css look (app.css restyles .pull for other pages) */
.story-body .pull{padding:16px 20px; border-left:4px solid var(--juice); background:rgba(255,93,0,.08); border-radius:0 14px 14px 0}

/* links: app.css colors every .story-body link orange (.story-body a:not(.btn):not(.ig-card)). Restore the static
   story colors. :not(#_) lifts each rule above that one without changing their order against each other. */
.story-body a:not(#_, .btn){color:inherit; text-decoration:none}
.story-body p a:not(#_){color:var(--cream); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.story-body > ul li a:not(#_),.story-body > ol li a:not(#_){color:var(--cream); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.notes a:not(#_){color:var(--muted); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.notes a:hover:not(#_){color:var(--cream)}
.filed a:not(#_){text-decoration:none}
.sound__link a:not(#_){color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.story-body .spon__h a:not(#_){color:inherit; text-decoration:none}
.story-body .spon__btn:not(#_){color:var(--sp-btn-ink)}
.story-body .spon__alt:not(#_){color:var(--sp-ink); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px}
.story-body .player__title a:not(#_){color:inherit; text-decoration:none}
.story-end .fine a:not(#_){color:var(--muted); text-decoration:underline}
.pn a:not(#_){color:var(--text)}
.pn a:hover:not(#_){color:var(--cream)}
.share a:not(#_){color:var(--text)}
.share a:hover:not(#_){color:var(--ink)}
.story-body .optin__up:not(#_){color:var(--ink)}

/* "What we know" box (knowBox block) */
.know{position:relative; padding:24px 26px 24px; border-radius:var(--r); background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden}
.know::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--juice)}
.know h2{font-size:clamp(32px, 3vw, 42px)}
.know ul{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:16px}
.know li{display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; color:var(--muted)}
.know li b{color:var(--text)}
.know li svg{width:20px; height:20px; color:var(--juice); margin-top:3px}
.know__next{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:14.5px; color:var(--muted)}
.know__next b{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--cream); margin-right:6px}

/* original IG post as a link card (instagramPost block) */
.ig-card{display:grid; grid-template-columns:200px minmax(0,1fr); border-radius:var(--r); overflow:hidden; background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .25s, transform .25s var(--ease)}
.ig-card:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(255,93,0,.65), 0 24px 50px -26px rgba(255,93,0,.7)}
.ig-card__img{position:relative; background:var(--ink-4)}
.ig-card__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0}
.ig-card__body{display:flex; flex-direction:column; gap:10px; padding:18px 20px}
.ig-card__who{display:flex; align-items:center; gap:10px; font-size:14px}
.ig-card__who img{width:34px; height:34px; border-radius:50%; box-shadow:0 0 0 2px var(--ink-3), 0 0 0 4px var(--juice)}
.ig-card__who b{display:inline-flex; align-items:center; gap:5px}
.ig-card__who span{display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; color:var(--dim)}
.ig-card__cap{font-size:16px; font-weight:600; line-height:1.4; color:var(--text)}
.ig-card__go{margin-top:auto; font-weight:700; font-size:14px; color:var(--juice)}
.ig-card:hover .ig-card__go{color:var(--cream)}

@media (max-width:760px){
  .story-body > p:first-of-type::first-letter{font-size:4.1em}
  .know{padding:20px 18px 20px 22px}
  .ig-card{grid-template-columns:118px minmax(0,1fr)}
  .ig-card__body{padding:14px 14px 16px; gap:8px}
  .ig-card__cap{font-size:14.5px}
}