/* Editorial story reader. Shared nav owns the site chrome; this owns only the article. */
:root { --jvk-ink:#1d342d;--jvk-green:#153e33;--jvk-gold:#a98143;--jvk-cream:#f4f0e7;--jvk-paper:#fffdf8;--jvk-line:#d9dfd7;--jvk-muted:#586b62 }
.jvk-story-detail-page { margin:0;background:var(--jvk-cream);color:var(--jvk-ink);font:18px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif;overflow-wrap:break-word }
.jvk-story-detail-page *,.jvk-story-detail-page *::before,.jvk-story-detail-page *::after { box-sizing:border-box }
.jvk-story-detail-page [hidden] { display:none!important }
.jvk-story-detail-page :where(a,button,input):focus-visible { outline:3px solid var(--jvk-gold);outline-offset:4px }
.story-site-header { position:relative;z-index:30;background:#102f2a;color:#fff }
.story-header-inner { width:min(1180px,calc(100% - 32px));min-height:72px;margin:auto;display:flex;align-items:center;gap:24px;position:relative }
.story-brand { display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-width:0 }
.story-brand-mark { width:36px;height:36px;display:grid;place-items:center;color:#e7cc95;font-size:25px }
.story-brand strong { display:block;font:700 20px/1.25 Georgia,serif }
.story-brand small { display:block;color:#d2ddd5;font-size:11px;line-height:1.4 }
.story-nav { margin-left:auto;display:flex;gap:4px }
.story-nav a { display:inline-flex;align-items:center;min-height:48px;padding:9px 10px;color:#fff;text-decoration:none;font-size:14px;font-weight:600;border-radius:9px }
.story-nav a:hover { background:#254b40 }
.story-menu-button { display:none;margin-left:auto;min-height:48px;min-width:48px;border:1px solid #799084;border-radius:9px;background:transparent;color:#fff;padding:9px 12px;font:inherit;font-size:14px }
.story-main { width:min(100% - 40px,1040px);margin:auto;padding:18px 0 88px }
.story-back { display:inline-flex;align-items:center;min-height:48px;margin:0 0 16px;text-decoration:none;font-size:14px;color:var(--jvk-green);font-weight:600 }
.story-article { display:grid;gap:0 }
.story-hero { padding-bottom:28px;border-bottom:1px solid var(--jvk-line) }
.story-hero.has-image { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center }
.story-cover { display:block;width:100%;height:clamp(280px,40vw,420px);object-fit:cover;border-radius:14px;order:2;background:#e3e8df }
.story-hero-copy { min-width:0 }
.story-artwork { min-width:0;margin:0;order:2 }
.story-artwork>a { display:block }
.story-artwork-document .story-cover { object-fit:contain;background:#f1eee6 }
.story-artwork figcaption { font-size:12px;line-height:1.6;color:var(--jvk-muted);margin-top:10px }
.story-artwork figcaption span { display:block }
.story-artwork figcaption a { color:inherit;text-underline-offset:3px }
.story-kicker,.story-eyebrow { display:inline-block;color:#77582b;font-size:11px;line-height:1.4;text-transform:uppercase;letter-spacing:.1em;font-weight:750 }
.story-hero h1,.story-error-card h1 { font:600 clamp(30px,4.4vw,46px)/1.14 Georgia,serif;letter-spacing:-.018em;margin:12px 0 18px;color:var(--jvk-ink);text-wrap:balance }
.story-lead { font-size:18px;line-height:1.65;color:#435a4f;margin:0 0 20px;max-width:65ch }
.story-meta { display:flex;flex-wrap:wrap;gap:6px 14px }
.story-meta span { font-size:13px;line-height:1.5;color:var(--jvk-muted) }
.story-listen-card { width:min(100%,760px);justify-self:center;margin:24px 0 32px;padding:18px 20px;border:1px solid var(--jvk-line);border-radius:12px;background:#eaf0e7;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;align-items:center }
.story-listen-card h2 { margin:0 0 3px;font-size:18px;line-height:1.35;font-weight:650;color:var(--jvk-ink) }
.story-listen-card p { margin:0;font-size:14px;line-height:1.5;color:var(--jvk-muted) }
.story-listen-button { min-height:48px;padding:11px 16px;border:1px solid var(--jvk-green);border-radius:9px;background:var(--jvk-green);color:#fff;font:650 14px/1.4 system-ui,sans-serif;cursor:pointer }
.story-listen-button:hover { background:#245646 }
.story-listen-button:disabled { opacity:.7;cursor:wait }
.story-audio-player { grid-column:1/-1;display:grid;gap:5px;width:100% }
.story-audio-times { display:flex;justify-content:space-between;gap:16px;color:var(--jvk-green);font-size:12px;font-variant-numeric:tabular-nums }
.story-audio-times span { min-width:3.35em }.story-audio-times span:last-child { text-align:right }
.story-audio-seek { width:100%;height:40px;margin:0;accent-color:var(--jvk-green);cursor:pointer;touch-action:pan-y }
.story-audio-status { grid-column:1/-1;font-size:13px!important;color:#615331!important }
.story-audio-status:empty { display:none }
.story-reading { width:min(100%,65ch);justify-self:center;padding:0 0 20px }
.story-reading .story-eyebrow { margin-bottom:18px }
.story-reading p { margin:0 0 1.4em;font:400 18px/1.8 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--jvk-ink) }
.story-end-card { width:min(100%,760px);justify-self:center;border-top:1px solid var(--jvk-line);padding:24px 0;display:grid;gap:16px }
.story-end-card h2 { font:600 26px/1.2 Georgia,serif;margin:7px 0 10px }
.story-end-card p { font-size:15px;color:var(--jvk-muted);margin:0;max-width:65ch }
.story-actions { display:flex;flex-wrap:wrap;gap:10px }
.story-button { display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 14px;border:1px solid #aebbaf;border-radius:9px;color:var(--jvk-green);background:var(--jvk-paper);text-decoration:none;font-size:14px;font-weight:650 }
.story-button-primary { background:var(--jvk-green);color:#fff;border-color:var(--jvk-green) }
.story-error-card { margin:32px auto;padding:28px;max-width:760px;border:1px solid var(--jvk-line);border-radius:14px;background:var(--jvk-paper) }
.story-error-card p { color:var(--jvk-muted);margin:0 0 24px }
.story-footer { border-top:1px solid var(--jvk-line);padding:28px max(20px,calc((100vw - 1100px)/2));display:flex;justify-content:space-between;gap:24px;color:var(--jvk-muted) }
.story-footer>div { display:grid;gap:3px;font-size:14px }
.story-footer span { font-size:12px }
.story-footer nav { display:flex;flex-wrap:wrap;gap:15px;font-size:13px }
@media(max-width:760px) {
  .story-header-inner { min-height:64px;gap:14px }
  .story-brand strong { font-size:18px }.story-brand small { display:none }
  .story-menu-button { display:block }
  .story-nav { display:none;position:absolute;left:0;right:0;top:100%;margin:0;padding:10px;background:#102f2a;border-radius:0 0 12px 12px;flex-wrap:wrap;z-index:2100 }
  .story-nav.is-open { display:flex!important }
  .story-main { width:calc(100% - 32px);padding-top:10px }
  .story-back { margin-bottom:10px }
  .story-hero.has-image { grid-template-columns:1fr;gap:20px }
  .story-cover { order:0;height:clamp(210px,62vw,360px) }
  .story-artwork { order:0 }
  .story-hero h1 { font-size:clamp(29px,7.5vw,38px) }
  .story-lead { font-size:17px }
  .story-listen-card { margin:20px 0 28px;padding:16px;grid-template-columns:1fr;gap:12px }
  .story-listen-button { justify-self:start }
  .story-reading p { font-size:18px;line-height:1.75 }
  .story-footer { flex-direction:column }
}
@media(prefers-reduced-motion:no-preference) { .story-button,.story-listen-button { transition:background-color .15s ease } }