:root{color-scheme:dark;--bg:#101112;--ink:#f5f6f6;--muted:#a4a8ac;--accent:#48d5c7;--line:#303438;--panel:#191b1d;font-family:Arial,Helvetica,sans-serif;font-size:16px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--bg);color:var(--ink)}a{color:inherit;text-decoration:none}a:focus-visible,summary:focus-visible,video:focus-visible{outline:3px solid var(--accent);outline-offset:6px}a:hover{color:var(--accent)}.wrap{width:min(1280px,calc(100% - 96px));margin:auto}.skip{position:fixed;top:-80px;left:20px;padding:12px;background:var(--accent);color:#101112;z-index:10}.skip:focus{top:12px}.header{padding:30px 0 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.author{font-size:17px;font-weight:700}.author span{display:block;color:var(--muted);font-size:14px;font-weight:400;margin-top:6px}.header nav{display:flex;gap:32px;font-size:14px}.hero{padding-top:50px}.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:13px;line-height:1.6;color:var(--muted)}.hero>.eyebrow{display:flex;justify-content:space-between}.hero-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:22px 0 38px}h1{font-size:clamp(64px,9vw,132px);line-height:.94;letter-spacing:-.065em;margin:0;font-weight:800}h1 span{color:var(--accent)}.hero-heading p{font-size:22px;line-height:1.35;margin:0 0 6px;max-width:380px}figure{margin:0}video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#070808}figcaption{color:var(--muted);font-size:14px;line-height:1.5;padding:14px 0}.hero-media figcaption{display:flex;justify-content:space-between;gap:16px}.hero-media figcaption span:first-child{color:var(--ink)}.context{padding:74px 0 86px}.lead{font-size:clamp(23px,2.8vw,35px);line-height:1.42;letter-spacing:-.025em;max-width:1050px;margin:0 0 48px}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;border-top:1px solid var(--line);padding-top:25px}.facts h2{font-size:15px;color:var(--accent);margin:0 0 15px}.facts p,p{font-size:17px;line-height:1.65;margin:0;color:var(--muted)}.history{background:#e9eceb;color:#17191b}.chapter{padding:78px 0;display:grid;grid-template-columns:1fr 1.5fr;gap:70px}.chapter+.chapter{border-top:1px solid #c9cecc}.year{display:block;font-size:16px;letter-spacing:.13em;margin-bottom:26px;color:var(--accent);font-weight:700}.history .year{color:#0d6861}.chapter h2,.package h2,.episodes h2{font-size:clamp(32px,3.6vw,50px);line-height:1.08;letter-spacing:-.04em;margin:0 0 26px}.history p{color:#51595d}.role{font-size:15px;line-height:1.6;margin-top:22px}.history .role{color:#333a3e}.text-link{display:inline-block;font-size:14px;border-bottom:1px solid #73827e;margin-top:25px;padding-bottom:6px}.history a:hover{color:#0d6861}.history figcaption{color:#555e61}details{border-top:1px solid #c9cecc;margin-top:15px}summary{font-size:15px;cursor:pointer;padding:18px 0;list-style-position:inside}details[open] summary{padding-bottom:20px}.package{padding:84px 0}.package-heading{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-bottom:45px}.package-heading h2{margin-bottom:0}.package-copy{max-width:520px}.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px 24px}.media-grid figcaption strong{display:block;font-size:19px;color:var(--ink);margin:3px 0 6px}.media-grid figcaption span{display:block}.package-note{display:grid;grid-template-columns:1fr 2fr;gap:30px;padding-top:27px;margin-top:32px;border-top:1px solid var(--line)}.package-note>span{font-size:15px;color:var(--accent)}.package-note p{font-size:16px;max-width:610px}.episodes{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:66px 0 80px;border-top:1px solid var(--line)}.episodes .eyebrow{display:block;margin-bottom:25px}.episodes p{max-width:470px}.episode-links{display:flex;flex-direction:column;gap:18px}.episode-links a{display:block;background:var(--panel);padding:30px;border-left:3px solid var(--accent);transition:background .2s}.episode-links a:hover{background:#242a2b}.episode-links span{display:block;color:var(--muted);font-size:14px}.episode-links strong{display:block;font-size:24px;line-height:1.25;margin:18px 0}.episode-links .link-action{color:var(--accent);margin-top:22px}.footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:27px 0 35px;color:var(--muted);font-size:14px}
@media(min-width:1600px){.hero-heading{padding-top:30px}.hero-media{max-width:1180px;margin:auto}}
@media(max-width:900px){.wrap{width:calc(100% - 48px)}.header nav{gap:18px}.hero-heading p{font-size:18px}.chapter{gap:32px;grid-template-columns:1fr 1.3fr}.facts{gap:24px}.package-heading,.episodes{gap:35px}.episode-links a{padding:24px}.episode-links strong{font-size:21px}}
@media(max-width:640px){.wrap{width:calc(100% - 32px)}.header{padding:22px 0;align-items:start}.header nav{gap:14px;font-size:13px}.header nav a:first-child{display:none}.author{font-size:15px}.author span{font-size:12px}.hero{padding-top:32px}.eyebrow{font-size:12px}.hero-heading{display:block;padding:24px 0}.hero-heading p{margin-top:24px;font-size:20px}.hero-media figcaption{display:block;font-size:13px}.hero-media figcaption span{display:block;margin-bottom:4px}.context{padding:44px 0 52px}.lead{font-size:24px;margin-bottom:30px}.facts{grid-template-columns:1fr;gap:25px}.facts p{font-size:16px}.facts h2{margin-bottom:8px}.chapter{grid-template-columns:1fr;padding:48px 0;gap:28px}.year{margin-bottom:20px}.chapter h2,.package h2,.episodes h2{font-size:36px}.chapter p,.package p,.episodes p{font-size:16px}.chapter .role,.package .role{font-size:14px}.package{padding:52px 0}.package-heading,.episodes{grid-template-columns:1fr;gap:28px}.package-heading{margin-bottom:30px}.media-grid{grid-template-columns:1fr;gap:25px}.package-note{grid-template-columns:1fr;gap:12px}.episodes{padding:46px 0 52px}.footer{font-size:12px;align-items:center}summary{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.episode-links a{transition:none}}

/* Stage 6: current package first, earlier generations in a compact comparison. */
.context { padding: 30px 0 0; }
.context .lead { max-width: 1050px; font-size: 23px; line-height: 1.5; margin-bottom: 0; }
.package { padding: 40px 0; }
.package-heading { gap: 48px; margin-bottom: 28px; }
.package-copy p { font-size: 16px; }
.package-copy .role { font-size: 14px; }
.package .year { margin-bottom: 16px; }
.media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.media-grid figcaption { font-size: 13px; }
.media-grid figcaption strong { font-size: 16px; }
.full-intro { border-color: var(--line); margin-top: 22px; }
.full-intro > summary { color: var(--accent); min-height: 48px; padding: 13px 0; font-size: 13px; }
.full-intro > figure { max-width: 840px; }
.package-note { margin-top: 18px; padding-top: 20px; }
.package-note p { font-size: 14px; }
.episodes { padding: 34px 0 40px; gap: 48px; }
.episodes p { font-size: 16px; }
.episode-links a { padding: 22px; }
.episode-links strong { font-size: 21px; margin: 12px 0; }
.episode-links .link-action { margin-top: 14px; }
.history { padding: 36px 0 40px; }
.history-heading h2 { margin: 12px 0 28px; }
body.case-po-krau .history-heading h2 { font-size: clamp(38px, 4vw, 56px); }
.history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.chapter { display: flex; flex-direction: column; padding: 0; gap: 22px; min-width: 0; }
.chapter + .chapter { border: 0; }
.chapter .year { margin-bottom: 14px; }
.chapter h3 { font-size: 40px; line-height: 1; margin: 0 0 18px; }
.chapter p { font-size: 14px; line-height: 1.65; }
.chapter .role { font-size: 12px; margin-top: 16px; }
.chapter .text-link { font-size: 12px; margin-top: 16px; }
.chapter figcaption { font-size: 12px; }
.chapter details { border-color: var(--line); }
.chapter summary { font-size: 12px; min-height: 48px; padding: 13px 0; }
@media (max-width: 900px) {
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-grid { gap: 24px; }
}
@media (max-width: 760px) {
  .case-po-krau .header nav a:first-child { display: inline-flex; }
  .context { padding-top: 22px; }
  .context .lead { font-size: 19px; }
  .package { padding: 30px 0; }
  .package-heading { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .package-copy p { font-size: 15px; }
  .package-copy .role { font-size: 13px; }
  .media-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .episodes { grid-template-columns: minmax(0, 1fr); padding: 30px 0; gap: 24px; }
  .history { padding: 30px 0; }
  .history-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .chapter + .chapter { padding-top: 30px; border-top: 1px solid var(--line); }
  .chapter h3 { font-size: 36px; }
  .chapter .year { font-size: 14px; }
}