/* Stories section: homepage block, /stories/ index and episode pages. */
.stories{padding:125px clamp(24px,10vw,160px);background:var(--paper)}
.stories .section-label{margin-bottom:0}
.stories-grid{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:clamp(40px,8vw,120px);align-items:center;margin-top:61px}
.stories-copy h2,.story-article h1{font-size:clamp(43px,5vw,75px);line-height:.96;letter-spacing:-.06em;margin:0;font-weight:600}
.stories-copy h2 em,.story-article h1 em{font-family:News,Georgia,serif;font-weight:600}
.stories-title{font:600 italic 28px/1.15 News,Georgia,serif;margin:30px 0 12px}
.stories-copy p{max-width:520px;line-height:1.55;color:var(--muted)}
.stories-copy .stories-title{color:var(--ink)}

.phone-frame{width:min(340px,82vw);aspect-ratio:9/16;border-radius:38px;background:#15100d;padding:10px;box-shadow:14px 18px 0 rgba(32,25,21,.12),0 24px 60px rgba(58,32,20,.22);margin:0 auto;transform:rotate(-1.5deg)}
.phone-frame video{display:block;width:100%;height:100%;border-radius:29px;object-fit:cover;background:#000}

.story-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:28px}
.button-ghost{border:1px solid var(--ink);color:var(--ink);background:transparent;padding:14px 18px 14px 22px}
.button-ghost:hover{background:var(--ink);color:var(--paper-hi)}
.text-link{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px}
.story-note{font-size:13px;line-height:1.5;color:var(--muted);margin:22px 0 0;max-width:520px}
.story-note a{color:var(--ink)}

.story-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:64px}
.story-cards-large{margin-top:72px}
.story-card{display:flex;gap:16px;align-items:center;background:var(--paper-hi);padding:14px;text-decoration:none;color:inherit;box-shadow:0 14px 28px rgba(32,25,21,.06);transition:transform .25s}
.story-card:hover{transform:translateY(-3px)}
.story-card img{width:72px;aspect-ratio:9/16;object-fit:cover;flex:0 0 auto;background:#ddd}
.story-card-text{display:flex;flex-direction:column;gap:6px}
.story-card-text .eyebrow{color:var(--muted);font-size:10px}
.story-card-text strong{font:600 italic 21px/1.15 News,Georgia,serif}
.story-card-meta{font-size:12px;color:var(--muted)}

/* episode and index pages */
body.story-page{background:var(--paper)}
body.story-page .site-header{position:absolute}
.story-article{padding:150px clamp(24px,10vw,160px) 100px;max-width:1240px;margin:0 auto}
.breadcrumb{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:38px}
.breadcrumb a{color:inherit}
.story-layout{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:clamp(40px,7vw,100px);align-items:start}
.story-body h1{margin-top:22px}
.story-lede{font-size:19px;line-height:1.5;color:var(--muted);max-width:560px;margin:26px 0 0}
.story-section-block{max-width:760px;margin-top:84px}
.story-section-block h2{font:600 italic 34px/1.1 News,Georgia,serif;margin:0 0 22px}
.story-section-block p{font-size:17px;line-height:1.65;margin:0 0 16px}
.story-section-block ul{padding-left:20px;margin:0;line-height:1.7}
.story-section-block li{margin-bottom:6px}
.story-section-block a{color:var(--copper)}
.story-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1000px}
.story-meta-grid h2{font-size:26px}
.story-page .story-cards{margin-top:20px}

@media(max-width:800px){
  .stories{padding:85px 24px}
  .stories-grid,.story-layout{grid-template-columns:1fr;gap:45px;margin-top:40px}
  .story-article{padding:110px 24px 70px}
  .story-meta-grid{grid-template-columns:1fr;gap:40px}
  .story-section-block{margin-top:60px}
  .phone-frame{transform:none}
}

/* fixes: the global nav rule adds a left margin, and img height attributes would override aspect-ratio */
.breadcrumb{display:block;margin-left:0}
.story-card img{height:auto}