.storytelling { --story-accent:#345439; --story-tint:#eef3e8; }
:root[data-theme="dark"] .storytelling { --story-accent:#c2d9a7; --story-tint:#252f23; }
.storytelling h1,.storytelling h2,.storytelling h3 { text-wrap:balance; }
.storytelling p { text-wrap:pretty; }
.storytelling .kicker { font-size:11px; letter-spacing:.07em; }
.story-hero { display:grid; grid-template-columns:1.12fr 1fr; gap:clamp(36px,6vw,96px); align-items:center; padding:66px 0 62px; }
.story-hero h1 { margin:22px 0 28px; font-size:clamp(56px,6.8vw,102px); line-height:.98; letter-spacing:-.065em; font-weight:500; }
.story-hero>div>p { max-width:55ch; }
.story-lead { font-size:clamp(18px,1.65vw,23px); line-height:1.5; letter-spacing:-.015em; }
.story-hero .video-actions { margin-top:30px; }
.story-hero-evidence { border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong); padding:20px 0 23px; }
.story-hero-evidence>.kicker { margin:0 0 18px; }
.story-hero-frames { display:grid; gap:14px; }
.story-hero-frames .story-frame { display:grid; grid-template-columns:minmax(135px,.95fr) 1.05fr; align-items:center; gap:18px; }
.story-hero-frames figcaption { padding:0; font-size:13px; }
.story-hero-evidence>.story-related { display:inline-block; margin-top:20px; }
.story-related { font-size:14px; font-weight:500; }
.story-scope { display:grid; grid-template-columns:1fr 1.45fr; gap:36px; border-block:1px solid var(--rule); padding:23px 0; }
.story-scope p { margin:0; font-size:13px; color:var(--muted); }
.story-scope strong { display:block; color:var(--ink); font-size:18px; margin-bottom:4px; }
.story-scope span { display:block; }
.story-jump { display:flex; flex-wrap:wrap; gap:10px 25px; padding:17px 0; border-bottom:1px solid var(--rule); background:var(--paper); font-size:13px; }
.story-jump a { text-decoration:none; }
.story-jump a:hover { text-decoration:underline; }
.story-section { padding-block:64px; border-bottom:1px solid var(--rule); scroll-margin-top:20px; }
.story-section-heading { max-width:780px; margin-bottom:30px; }
.story-section-heading>.kicker { margin-top:0; color:var(--muted); }
.story-section h2,.story-comparison h2 { font-size:clamp(27px,3.2vw,44px); line-height:1.12; letter-spacing:-.04em; margin:15px 0 20px; }
.story-section-heading>p:last-child { max-width:72ch; color:var(--muted); }
.story-pattern-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; border:1px solid var(--rule); background:var(--rule); }
.story-pattern-buttons button { background:var(--paper); color:var(--ink); text-align:left; border:0; padding:18px; cursor:pointer; }
.story-pattern-buttons button span { display:inline-block; font:11px var(--mono); color:var(--muted); margin-right:14px; }
.story-pattern-buttons button[aria-pressed="true"] { background:var(--story-tint); box-shadow:inset 0 -3px 0 var(--story-accent); }
.story-pattern-buttons button:hover { background:var(--field); }
.story-pattern-buttons button[aria-pressed="true"]:hover { background:var(--story-tint); }
.story-pattern { padding:34px 30px 30px; background:var(--field); border:1px solid var(--rule); border-top:0; }
.story-pattern>.kicker { color:var(--muted); margin:0; }
.story-pattern>h3 { margin:8px 0 26px; font-size:29px; letter-spacing:-.035em; }
.story-rail { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding:0 0 26px; border-bottom:1px solid var(--rule); margin:0 0 25px; }
.story-rail li { position:relative; }
.story-rail li+li::before { content:"→"; position:absolute; left:-22px; top:26px; color:var(--muted); }
.story-rail span { display:block; font:11px var(--mono); color:var(--story-accent); margin-bottom:10px; }
.story-rail strong { display:block; font-size:20px; font-weight:500; line-height:1.25; }
.story-pattern-columns { display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.story-pattern-columns p:first-child { margin-top:0; }
.story-question { color:var(--story-accent); font-size:20px; line-height:1.4; margin-bottom:0; }
.story-filters { display:flex; gap:18px; align-items:flex-end; margin-bottom:18px; }
.story-filters label { display:grid; gap:8px; flex:1; font-size:12px; color:var(--muted); }
.story-filters label:first-child { flex:1.65; }
.story-filters input,.story-filters select,.story-form-field input,.story-form-field textarea,.story-form-field select { width:100%; min-width:0; padding:12px 13px; color:var(--ink); background:var(--paper); border:1px solid var(--rule-strong); border-radius:2px; font-size:15px; }
.story-filters .video-button { padding:12px 18px; }
.story-count { margin:0 0 26px; color:var(--muted); font:11px/1.5 var(--mono); }
.story-film-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 27px; }
.story-film { display:flex; flex-direction:column; min-width:0; border-bottom:1px solid var(--rule-strong); padding-bottom:20px; }
.story-poster { display:block; border:1px solid var(--rule); background:var(--field); overflow:hidden; }
.story-poster img { width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:contain; transition:transform 180ms ease; }
.story-poster:hover img { transform:scale(1.025); }
.story-film-meta { display:flex; justify-content:space-between; gap:12px; margin-top:17px; font:10px/1.5 var(--mono); color:var(--muted); }
.story-film h3 { font-size:23px; line-height:1.25; letter-spacing:-.025em; margin:12px 0 10px; }
.story-film h3 a { text-decoration:none; }
.story-film h3 a:hover { text-decoration:underline; }
.story-film>p { font-size:14px; margin:0 0 22px; color:var(--muted); }
.story-film-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 15px; margin-top:auto; font-size:12px; }
.story-film-bottom>span { color:var(--muted); }
.story-film-bottom>a { white-space:nowrap; }
.story-empty { padding:25px; background:var(--field); }
.story-prose { max-width:1080px; }
.story-prose>p { max-width:82ch; font-size:16px; line-height:1.75; }
.story-prose h3 { font-size:25px; line-height:1.2; letter-spacing:-.025em; margin:37px 0 18px; }
.story-table-wrap { overflow-x:auto; margin:28px 0; border:1px solid var(--rule); }
.story-prose table { border-collapse:collapse; width:100%; min-width:650px; font-size:14px; text-align:left; }
.story-prose th { background:var(--field); font-weight:500; }
.story-prose td,.story-prose th { padding:17px 20px; vertical-align:top; border-bottom:1px solid var(--rule); }
.story-prose tr:last-child td { border-bottom:0; }
.story-callout { padding:28px; background:var(--story-tint); border-left:3px solid var(--story-accent); margin-top:32px; }
.story-callout h3 { margin:0 0 12px; }
.story-callout .video-button { margin-top:12px; }
.story-breadcrumb { display:flex; flex-wrap:wrap; gap:12px; margin:25px 0 0; font-size:12px; color:var(--muted); }
.story-film-header { padding:42px 0; max-width:1040px; }
.story-film-header h1 { font-size:clamp(42px,5.8vw,80px); line-height:1.02; letter-spacing:-.055em; font-weight:500; margin:20px 0 25px; }
.story-film-header .story-lead { max-width:79ch; font-size:20px; margin:26px 0; }
.story-film-facts { display:flex; flex-wrap:wrap; gap:10px 22px; font:11px/1.7 var(--mono); color:var(--muted); }
.story-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin:0; padding:26px 0; border-block:1px solid var(--rule-strong); }
.story-summary dt { font:11px/1.5 var(--mono); text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.story-summary dd { font-size:18px; line-height:1.5; margin:0; }
.story-frame-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
.story-frame { margin:0; min-width:0; }
.story-frame .frame-open { display:block; padding:0; width:100%; background:var(--field); border:1px solid var(--rule); cursor:zoom-in; overflow:hidden; }
.story-frame img { width:100%; height:auto; display:block; }
.story-frame figcaption { display:grid; gap:8px; padding:14px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
.story-frame-label { display:flex; justify-content:space-between; gap:10px; font:11px/1.6 var(--mono); color:var(--ink); }
.story-frame-label a { white-space:nowrap; }
.story-beats { padding:0; margin:0; list-style:none; max-width:1100px; }
.story-beats>li { display:grid; grid-template-columns:155px 1fr; gap:35px; border-top:1px solid var(--rule); padding:29px 0; scroll-margin-top:24px; }
.story-beat-time { font:12px/1.5 var(--mono); color:var(--story-accent); align-self:start; padding-top:6px; white-space:nowrap; }
.story-beats h3 { font-size:26px; line-height:1.2; letter-spacing:-.025em; margin:0 0 22px; }
.story-beats p { margin:15px 0 0; font-size:16px; max-width:76ch; }
.story-label { display:block; font:10px/1.6 var(--mono); color:var(--muted); text-transform:uppercase; margin-bottom:7px; }
.story-adaptation { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.story-adaptation h2 { font-size:32px; }
.story-adaptation li { margin-block:12px; }
.story-adaptation ul { padding-left:20px; }
.story-comparison { max-width:940px; padding:32px; margin-block:40px; background:var(--story-tint); border-left:3px solid var(--story-accent); }
.story-comparison h2 { font-size:29px; }
.story-comparison p:last-child { margin-bottom:0; }
.story-evidence-note { max-width:1080px; color:var(--muted); font-size:13px; }
.story-evidence-note h2 { color:var(--ink); font-size:18px; font-weight:500; }
.story-pagination { display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; border-block:1px solid var(--rule); margin-top:32px; padding:24px 0; font-size:14px; }
.story-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px 35px; max-width:1100px; }
.story-form-field { position:relative; min-width:0; }
.story-form-field label { font-size:16px; font-weight:500; }
.story-form-field p { color:var(--muted); font-size:13px; margin:6px 0 12px; }
.story-form-field textarea { resize:vertical; line-height:1.6; }
.story-form-field>a { display:block; margin-top:12px; font-size:13px; }
.story-timing-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; max-width:1100px; }
.story-timing-fields .story-form-field { display:flex; flex-direction:column; }
.story-timing-fields p { flex:1; }
.story-timing-fields input { padding-right:80px; }
.story-unit { position:absolute; bottom:12px; right:13px; color:var(--muted); font-size:13px; pointer-events:none; }
.story-timing-result { margin-top:32px; padding:25px 30px; background:var(--field); border:1px solid var(--rule); max-width:1100px; }
.story-timing-result[data-valid="true"] { border-left:3px solid var(--story-accent); background:var(--story-tint); }
.story-timing-result[data-valid="false"] { border-left:3px solid #b06f43; }
.story-timing-result>p { margin:0; font-size:17px; }
.story-timing-result dl { display:flex; flex-wrap:wrap; gap:20px 40px; margin:24px 0 0; }
.story-timing-result dl:empty { display:none; }
.story-timing-result dt { color:var(--muted); font:11px/1.6 var(--mono); }
.story-timing-result dd { margin:6px 0 0; font-size:21px; }
.story-timing-chart { margin-top:30px; }
.story-track-label { font:11px/1.5 var(--mono); margin:14px 0 7px; }
.story-track-label span { color:var(--muted); margin-left:12px; }
.story-track { height:22px; background:var(--paper); position:relative; border:1px solid var(--rule); overflow:hidden; }
.story-bar { position:absolute; height:100%; top:0; }
.story-bar.presentation { background:var(--ink); }
.story-bar.talking { background:var(--rule-strong); }
.story-bar.buffer { background:#86a66a; }
.story-small { color:var(--muted); max-width:95ch; font-size:13px; }
.storytelling .video-footer { margin-top:40px; }
@media(min-width:1450px) { .story-film-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1000px) {
  .story-hero { gap:30px; }
  .story-hero h1 { font-size:68px; }
  .story-hero-frames .story-frame { grid-template-columns:1fr 1fr; gap:12px; }
  .story-film-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .story-pattern-columns { gap:30px; }
  .story-timing-fields { grid-template-columns:1fr 1fr; }
}
@media(max-width:700px) {
  .story-hero { grid-template-columns:1fr; padding:36px 0; gap:35px; }
  .story-hero h1 { font-size:clamp(55px,12vw,78px); }
  .story-hero-evidence { padding-top:18px; }
  .story-hero-frames .story-frame { grid-template-columns:1fr 1fr; gap:18px; }
  .story-scope { grid-template-columns:1fr; gap:17px; }
  .story-section { padding-block:40px; }
  .story-section h2 { font-size:31px; }
  .story-pattern-buttons { grid-template-columns:1fr 1fr; }
  .story-pattern-buttons button { padding:15px 12px; font-size:13px; }
  .story-pattern-buttons button span { display:block; margin:0 0 5px; }
  .story-pattern { padding:24px 18px; }
  .story-pattern>h3 { font-size:25px; }
  .story-pattern-columns { grid-template-columns:1fr; gap:22px; }
  .story-rail { gap:22px; }
  .story-rail strong { font-size:16px; }
  .story-rail li+li::before { left:-18px; }
  .story-filters { flex-wrap:wrap; gap:16px 12px; }
  .story-filters label:first-child { flex-basis:100%; }
  .story-film-grid { gap:30px 16px; }
  .story-film h3 { font-size:21px; }
  .story-film-meta { font-size:9px; flex-wrap:wrap; gap:3px; }
  .story-film-header { padding-block:32px; }
  .story-film-header .story-lead { font-size:18px; }
  .story-summary { grid-template-columns:1fr; gap:24px; }
  .story-summary dt { margin-bottom:8px; }
  .story-summary dd { font-size:17px; }
  .story-frame-grid { grid-template-columns:1fr; gap:28px; max-width:480px; }
  .story-beats>li { grid-template-columns:1fr; gap:15px; }
  .story-beats h3 { font-size:24px; }
  .story-adaptation { grid-template-columns:1fr; gap:35px; }
  .story-comparison { padding:24px; }
  .story-form-grid,.story-timing-fields { grid-template-columns:1fr; gap:26px; }
  .story-timing-result { padding:22px 18px; }
}
@media(max-width:430px) { .story-film-grid { grid-template-columns:1fr; } }
@media print {
  .study-strip,.public-header,.video-subnav,.story-jump,.story-filters,.video-footer,.video-actions { display:none!important; }
  .page-shell { padding:0; max-width:none; }
  .story-section { padding-block:25px; }
  .story-pattern[hidden],.story-film[hidden] { display:block!important; }
  .story-hero,.story-adaptation,.story-form-grid { display:block; }
  .storytelling { color:#111; background:white; }
}