/* Single-article template styles. Extracted from pages/article.html. Depends on sfn-chrome.css tokens. */


.story-cat{display:inline-flex;font-weight:700;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--red-ink)}
.story h1{font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:2.5rem;line-height:1.08;margin:10px 0 14px;color:var(--ink)}
.story-byline{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:0.82rem;color:var(--ink-soft);margin-bottom:22px;border-bottom:1px solid var(--border);padding-bottom:18px}
.story-byline b{color:var(--ink)}
.story-byline b a{color:inherit}
.story-byline b a:hover{color:var(--red-ink)}
.story-hero{aspect-ratio:7/5;border-radius:var(--r-md);margin-bottom:10px}
.story-hero.is-wide{aspect-ratio:16/9}
.story-hero.is-tall{aspect-ratio:4/5}
.story-cap{font-size:0.78rem;color:var(--ink-faint);margin:0 0 26px}
.story-body{max-width:72ch;font-size:1.05rem;line-height:1.72;color:var(--ink)}
.story-body p{margin:0 0 20px}
.story-body h2{font-family:"Hanken Grotesk",sans-serif;font-weight:700;font-size:1.3rem;margin:32px 0 14px;color:var(--ink)}
.story-body figure{margin:28px 0}
/* WordPress's [caption] shortcode writes an inline style="width:...px"
   straight onto the <figure class="wp-caption"> element itself (legacy
   core behavior: image width + 10px), which otherwise beats any external
   stylesheet rule and blows the layout out to the image's native size. */
.story-body figure.wp-caption{width:auto!important;max-width:100%!important}
.story-body img{max-width:100%;height:auto;display:block;border-radius:var(--r-sm)}
.story-body figcaption{font-size:0.78rem;color:var(--ink-faint);margin-top:8px;line-height:1.5}
.story-body iframe{width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:var(--r-sm);display:block;margin:28px 0}
.story-body blockquote{margin:28px 0;padding-left:18px;border-left:3px solid var(--red);color:var(--ink-soft);font-style:italic}




.watch-replay{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:var(--r-sm);font-weight:700;font-size:0.8rem;color:var(--btn-fg);background:var(--btn-bg);border:1px solid var(--btn-bg)}
.watch-replay:hover{background:var(--red);border-color:var(--red);color:#fff}
.watch-replay svg{width:13px;height:13px}

.paywall{margin-top:24px;padding:28px 26px;border-radius:var(--r-lg);background:var(--navy);color:#fff}
.paywall h3{font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:1.2rem;margin:0 0 8px;color:#fff}
.paywall p{color:rgba(255,255,255,0.78);font-size:0.92rem;line-height:1.6;margin:0 0 18px}
.paywall-actions{display:flex;gap:10px;flex-wrap:wrap}
.paywall-actions a{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--r-sm);font-weight:700;font-size:0.85rem}
.paywall-actions a.primary{background:var(--red);color:#fff}
.paywall-actions a.primary:hover{background:var(--red-soft)}
.paywall-actions a.secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.35)}
.paywall-actions a.secondary:hover{border-color:#fff}

.story-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid var(--border)}
.back-to-archive{display:inline-flex;align-items:center;gap:7px;margin-top:26px;padding:10px 18px;border-radius:var(--r-sm);font-weight:700;font-size:0.8rem;color:var(--navy-ink);background:var(--surface);border:1px solid var(--border-2)}
.story-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.story-nav .back-to-archive{margin-top:0;grid-column:1/-1;justify-self:start}
.story-step{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.story-step:hover{border-color:var(--navy-ink)}
.story-step--prev{grid-column:1}
.story-step--next{grid-column:2;grid-template-columns:minmax(0,1fr) 76px;text-align:right}
.story-step--next .art{order:2}
.story-step .art{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:6px;font-size:0.48rem;background-size:cover;background-position:center}
.story-step-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.story-step-dir{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.story-step-title{font-weight:700;font-size:.86rem;line-height:1.32;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:620px){.story-nav{grid-template-columns:1fr}.story-step--prev,.story-step--next{grid-column:1}.story-step--next{grid-template-columns:76px minmax(0,1fr);text-align:left}.story-step--next .art{order:0}}
.back-to-archive:hover{background:var(--active-bg);color:var(--active-fg);border-color:var(--active-bg)}
.story-tags a{display:inline-flex;height:32px;padding:0 14px;align-items:center;border-radius:999px;border:1px solid var(--border-2);background:var(--surface);font-size:0.74rem;font-weight:700;color:var(--ink-soft)}
.story-tags a:hover{border-color:var(--navy-ink);color:var(--navy-ink)}



@media (max-width:640px){.story h1{font-size:1.9rem}}

/* Server-rendered hero: real <img> (LCP/SEO) filling the same cropped box the design uses. */
.story-hero{overflow:hidden;margin-left:0;margin-right:0}
.story-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.story-body figure.wp-caption{width:auto!important;max-width:100%!important}
.story-body .wp-caption-text{font-size:0.78rem;color:var(--ink-faint);margin-top:8px;line-height:1.5}

/* Wide page (settings gear > Page width; html[data-wide], big screens only): the hero stops being a wall. Articles with pictures are
   composed like the Mission Reports featured article (story-layout.js, .is-sided); articles without stay one reading column. */
@media (min-width:1600px){
  html[data-wide] .story-body{max-width:78ch}
  /* story-layout.js rows: same composition and sizes as the expanded Mission Reports article (sfn-missions.css .is-paired) */
  html[data-wide] .story-body.is-sided{max-width:none}
  .story-body.is-sided .sa-section{display:flex;align-items:center;justify-content:center;gap:18px;font-family:"Hanken Grotesk",sans-serif;font-size:1.2rem;font-weight:700;color:var(--ink);margin:34px 0 22px;line-height:1.3;text-align:center}
  .story-body.is-sided .sa-section::before,.story-body.is-sided .sa-section::after{content:"";flex:1;height:2px;background:var(--border-2)}
  .story-body.is-sided .sa-section strong,.story-body.is-sided .sa-section b{font-weight:inherit}
  .story-body.is-sided .sa-row.is-solo{max-width:720px;margin:0 auto 24px}
  .story-body.is-sided .sa-row.is-pair{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 48px;align-items:start;margin:8px 0 24px}
  .story-body.is-sided .sa-row.is-media-left{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .story-body.is-sided .sa-row.is-pair.is-photo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .story-body.is-sided .is-media-right>.sa-text{grid-column:1}
  .story-body.is-sided .is-media-right>.sa-media{grid-column:2;grid-row:1/span 2}
  .story-body.is-sided .is-media-left>.sa-text{grid-column:2}
  .story-body.is-sided .is-media-left>.sa-media{grid-column:1;grid-row:1/span 2}
  .story-body.is-sided .sa-row.is-center{margin:4px 0 28px}
  .story-body.is-sided .is-center>.sa-media{max-width:960px;margin:0 auto 26px;text-align:center}
  .story-body.is-sided .is-center>.sa-media img{width:auto;max-width:100%;margin-left:auto;margin-right:auto}   /* never past the photo's own size (no blur) */
  .story-body.is-sided .is-center>.sa-media figcaption,.story-body.is-sided .is-center>.sa-media .wp-caption-text{max-width:720px;margin-left:auto;margin-right:auto}
  /* text with no picture beside it, never in newspaper columns: centred only as a short section opener (the feature row's
     one or two paragraphs, a one-or-two-paragraph section start); anything longer is a plain left reading column */
  .story-body.is-sided .is-center>.sa-text,.story-body.is-sided .sa-row.is-text.is-lede{max-width:720px;margin-left:auto;margin-right:auto}
  .story-body.is-sided .sa-row.is-text{max-width:78ch;margin-bottom:24px}
  .story-body.is-sided .sa-media{position:sticky;top:24px}
  .story-body.is-sided .is-center>.sa-media{position:static}
  .story-body.is-sided .sa-media img{display:block;width:100%;height:auto}
  .story-body.is-sided .sa-media>:first-child,.story-body.is-sided .sa-media>:first-child>:first-child,.story-body.is-sided .sa-text>:first-child{margin-top:0}
  .story-body.is-sided .sa-media figure{margin:0 0 18px}
  html[data-wide] .story-hero{width:100%;max-height:min(62vh,640px)}
  html[data-wide] .story-hero{overflow:hidden}
  html[data-wide] .story-hero img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0}
}