/* =========================================================
   muktijuddho.org · story.css
   Long-form history chapters (ইতিহাস): chapter head, reading
   progress, scenes, footnotes, "sources differ" boxes, chapter
   index and sources page. Uses the tokens in muktijuddho.css.
   ========================================================= */

/* ---------- reading progress (sits under the 72px header) ---------- */
.progress{position:fixed;left:0;right:0;top:calc(72px + env(safe-area-inset-top,0px));height:3px;z-index:49;pointer-events:none}
.progress span{display:block;height:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- chapter head: title, then the horizon with the sun ---------- */
.ch-head{position:relative;overflow:hidden}
.ch-head .crumb{padding-top:22px}
.ch-head .kicker{margin-top:30px}
.ch-head h1{font:700 clamp(38px,6.2vw,78px)/1.1 var(--f-disp);margin:12px 0 8px;max-width:14ch;text-wrap:balance}
.ch-years{font:600 clamp(18px,2vw,22px)/1.3 var(--f-body);color:var(--mute)}
.dek{font-size:clamp(18px,1.8vw,21px);line-height:1.75;max-width:38em;margin:22px 0 0;color:color-mix(in srgb,var(--ink) 88%,var(--bg))}
.ch-meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;color:var(--mute);margin-top:18px}
.ch-horizon{--D:clamp(92px,13vw,170px);position:relative;height:calc(var(--D) * .9);margin-top:22px}
.ch-horizon .glow{position:absolute;right:calc(12% - var(--D));bottom:6px;width:calc(var(--D) * 3);height:calc(var(--D) * 1.4);background:radial-gradient(closest-side at 50% 100%,color-mix(in srgb,var(--sun) 30%,transparent),transparent);pointer-events:none}
/* the sun's centre sits 0.52 × its radius above the line, so 0.76 × its diameter shows */
.ch-horizon .sky{position:absolute;right:12%;bottom:6px;width:var(--D);height:calc(var(--D) * .76);overflow:hidden}
.ch-horizon .sun{width:var(--D);height:var(--D);border-radius:50%;background:var(--sun)}
.ch-horizon .line{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--logo)}

/* ---------- chapter body ---------- */
.chapter{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:64px;padding-block:48px 80px;align-items:start}
@media (max-width:980px){.chapter{grid-template-columns:minmax(0,1fr);gap:0}.rail{display:none}}
.story{max-width:700px;font-size:19px;line-height:1.85;min-width:0}
.story p{margin:0 0 1.05em}
.story a{text-decoration-thickness:1px;text-underline-offset:3px}
.scene{position:relative;scroll-margin-top:100px}
.scene + .scene{margin-top:72px;padding-top:46px}
.scene + .scene::before{content:"";position:absolute;top:0;left:0;width:64px;height:4px;background:var(--logo)}
.scene + .scene::after{content:"";position:absolute;top:-15px;left:14px;width:20px;height:15px;background:radial-gradient(circle 10px at 10px 10px,var(--sun) 97%,transparent 100%)}
.dateline{font:600 15px/1.4 var(--f-body);color:var(--gold);margin:0 0 8px}
.scene h2{font:700 clamp(25px,3vw,33px)/1.3 var(--f-disp);margin:0 0 22px;text-wrap:balance}
.scene.open > p:first-of-type{font-size:1.1em}
.turn{font-weight:600}

/* quotes from documents: Tiro Bangla, with the English original under our translation */
.story blockquote.source{max-width:none;margin:34px 0;font-size:clamp(21px,2.3vw,25px);line-height:1.6}
.story blockquote.source p{margin:0}
.story blockquote.source .orig{font:400 15px/1.6 "Manrope",system-ui,sans-serif;color:var(--mute);margin-top:12px}
.story blockquote.source footer{line-height:1.5}

/* short lists inside the story: demands, terms of an agreement */
.points{margin:20px 0 28px;padding:16px 20px 16px 46px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);list-style-type:bengali;font-size:17px;line-height:1.75}
html[lang="en"] .points{list-style-type:decimal}
.points li{padding-left:4px;margin:5px 0}
.points li::marker{color:var(--gold);font-weight:700}
.points-h{font:600 14px/1.4 var(--f-body);color:var(--mute);margin:26px 0 -10px}

/* footnote references and their popover */
.fn{font-size:.62em;line-height:0;vertical-align:super;margin-left:1px;white-space:nowrap}
.fn a{color:var(--gold);text-decoration:none;font-weight:600;padding:0 2px;border-radius:3px}
.fn a:hover,.fn a[aria-expanded="true"]{background:color-mix(in srgb,var(--gold) 20%,transparent)}
.fn-pop{position:absolute;z-index:70;width:max-content;max-width:min(380px,calc(100vw - 32px));background:var(--surf);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,.3);padding:14px 16px 12px;font:400 15px/1.65 var(--f-body)}
.fn-pop .n{font-weight:700;color:var(--gold);margin-right:6px}
.fn-pop .all{display:block;margin-top:8px;font-size:13px;color:var(--mute)}

/* source grades: ক contemporary document · খ participant's account · গ research */
.g{display:inline-block;font:600 12px/1.65 var(--f-body);border-radius:4px;padding:0 7px;white-space:nowrap;vertical-align:1px}
.g-a{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.g-b{background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold)}
.g-c{background:color-mix(in srgb,var(--mute) 20%,transparent);color:var(--mute)}

/* when sources disagree */
.accounts{margin:44px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);padding:22px clamp(16px,3vw,26px) 24px;font-size:16px;line-height:1.75}
.accounts h3{font:700 22px/1.35 var(--f-disp);margin:6px 0 6px;text-wrap:balance}
.accounts .why{color:var(--mute);margin:0 0 16px;font-size:15px}
.acc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.acc{background:var(--surf);border:1px solid var(--line);border-radius:6px;padding:14px 15px 13px;font-size:15.5px;line-height:1.7;min-width:0}
.acc h4{font:700 15.5px/1.45 var(--f-body);margin:0 0 4px}
.acc .g{margin-bottom:8px}
.acc p{margin:0}
.verdict{margin-top:18px;padding:2px 0 2px 16px;border-left:3px solid var(--green)}
.verdict b{color:var(--green)}

/* side rail: contents, key dates, grade legend */
.rail{position:sticky;top:104px;display:grid;gap:30px;font-size:14.5px;max-height:calc(100vh - 124px);overflow:auto;padding-bottom:12px}
.rail h2{font:600 14px/1.4 var(--f-body);color:var(--gold);margin:0 0 10px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--mute);text-decoration:none;line-height:1.45}
.toc a small{display:block;font-size:12.5px;opacity:.8}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--gold)}
.keydates dl{margin:0;display:grid;gap:9px}
.keydates dt{font-weight:600;font-size:13.5px}
.keydates dd{margin:0;color:var(--mute);font-size:13.5px;line-height:1.5}
.legend ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--mute);font-size:13.5px;line-height:1.5}
.legend a{font-size:13px;color:var(--mute)}
.toc-m{display:none;margin:0 0 30px;border:1px solid var(--line);border-radius:var(--r);background:var(--surf)}
.toc-m summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:15px}
.toc-m .toc{padding:0 16px 14px}
@media (max-width:980px){.toc-m{display:block}}

/* notes and sources at the end of a chapter */
.notes{margin-top:72px;padding-top:30px;border-top:1px solid var(--line);font-size:15px;line-height:1.7;color:var(--mute)}
.notes h2,.biblio h2{font:700 22px/1.3 var(--f-disp);color:var(--ink);margin:0 0 6px}
.notes .intro,.biblio .intro{margin:0 0 16px;font-size:14.5px}
.notes ol{margin:0;padding-left:30px;list-style-type:bengali}
html[lang="en"] .notes ol{list-style-type:decimal}
.notes li{margin:0 0 10px;padding:2px 4px;scroll-margin-top:110px;border-radius:4px}
.notes li:target{background:color-mix(in srgb,var(--gold) 13%,transparent)}
.notes li::marker{color:var(--gold);font-weight:600}
.notes .src{color:var(--ink)}
.notes .back{text-decoration:none;color:var(--gold);margin-left:6px;font-size:13px}
.biblio{margin-top:44px;font-size:15px;line-height:1.7}
.biblio ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.biblio li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 14px;align-items:baseline}
.biblio li > div{min-width:0}
.biblio .where{display:block;color:var(--mute);font-size:14px}
@media (max-width:560px){.biblio li{grid-template-columns:minmax(0,1fr)}}
.translate-note{font-size:14px;color:var(--mute);border-top:1px dashed var(--line);margin-top:28px;padding-top:12px}

/* next chapter */
.next{display:block;margin-top:56px;text-decoration:none;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;transition:border-color .2s}
.next:hover{border-color:color-mix(in srgb,var(--green) 60%,var(--line))}
.next small{display:block;color:var(--mute);font-size:13.5px}
.next b{display:block;font:700 25px/1.35 var(--f-disp);margin:4px 0 6px}
.next p{margin:0 0 12px;color:var(--mute);font-size:16px;line-height:1.7}
.chip.ready{background:var(--green);border-color:var(--green);color:var(--on-green)}

/* ---------- chapter index (ইতিহাস) ---------- */
.ix-head{padding-block:12px 0}
.ix-head .kicker{margin-top:30px}
.ix-head h1{font:700 clamp(36px,5.6vw,68px)/1.12 var(--f-disp);margin:12px 0 14px;max-width:15ch;text-wrap:balance}
.ix-head .lead{font-size:clamp(17px,1.6vw,20px);line-height:1.75;color:var(--mute);max-width:44em;margin:0}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:30px}
.how div{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;font-size:15px;line-height:1.65;color:var(--mute)}
.how b{display:block;color:var(--ink);font:700 16px/1.4 var(--f-body);margin-bottom:4px}
.ruler{display:grid;grid-template-columns:5fr 16fr 2fr 4fr;gap:3px;margin:44px 0 8px}
.ruler a{display:block;height:10px;border-radius:2px;background:color-mix(in srgb,var(--ink) 24%,transparent)}
.ruler a:hover{background:var(--green)}
.ruler a.hot{background:var(--red)}
.ruler-l{display:grid;grid-template-columns:5fr 16fr 2fr 4fr;gap:3px;font-size:12.5px;color:var(--mute);line-height:1.3}
.ruler-l span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip}
.part{padding-block:46px 6px;scroll-margin-top:90px}
.part-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;border-bottom:1px solid var(--line);padding-bottom:12px}
.part-h h2{font:700 var(--fs-h2)/1.25 var(--f-disp);margin:0;text-wrap:balance}
.part-h .y{color:var(--mute);font-weight:600}
.part-h .kicker{flex-basis:100%}
.part .intro{color:var(--mute);margin:12px 0 0;max-width:46em;font-size:16px;line-height:1.7}
.ch-list{list-style:none;margin:6px 0 0;padding:0}
.ch-row{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:4px 18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none}
.ch-row .no{font:700 30px/1 var(--f-disp);color:color-mix(in srgb,var(--mute) 70%,transparent)}
.ch-row h3{font:700 21px/1.35 var(--f-disp);margin:0}
.ch-row .yr{font-size:14px;color:var(--gold);font-weight:600}
.ch-row p{margin:4px 0 0;color:var(--mute);font-size:15.5px;line-height:1.65}
.ch-row .st{align-self:center}
.ch-row.ready .no{color:var(--gold)}
a.ch-row:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
@media (max-width:640px){.ch-row{grid-template-columns:44px minmax(0,1fr)}.ch-row .st{grid-column:2;justify-self:start;margin-top:6px}.ch-row .no{font-size:24px}}

/* ---------- home: featured chapter ---------- */
.feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3.4vw,40px);text-decoration:none;transition:border-color .2s}
.feature:hover{border-color:color-mix(in srgb,var(--green) 60%,var(--line))}
.feature h3{font:700 clamp(26px,3.2vw,38px)/1.2 var(--f-disp);margin:8px 0 10px;text-wrap:balance}
.feature p{margin:0 0 18px;color:var(--mute);font-size:16.5px;line-height:1.75}
.feature blockquote.source{margin:0;max-width:none}
.feature .btn{pointer-events:none}
@media (max-width:760px){.feature{grid-template-columns:minmax(0,1fr)}}

/* ---------- sources page (সূত্র) ---------- */
.src-page{max-width:var(--read);padding-block:12px 80px}
.src-page h1{font:700 clamp(34px,5vw,58px)/1.12 var(--f-disp);margin:12px 0 14px;text-wrap:balance}
.src-page .lead{font-size:clamp(17px,1.6vw,20px);line-height:1.75;color:var(--mute);margin:0 0 8px}
.src-page h2{font:700 24px/1.3 var(--f-disp);margin:44px 0 12px}
.src-page p{margin:0 0 16px}
.rules{margin:0;padding-left:26px;list-style-type:bengali}
.rules li{margin:0 0 10px;padding-left:4px}
.rules li::marker{color:var(--gold);font-weight:700}
.grades{display:grid;gap:12px;margin:8px 0 6px}
.grades div{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;font-size:15.5px;line-height:1.7}
.grades .g{margin-right:8px}
.src-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:15.5px;line-height:1.7}
.src-list li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 14px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:12px}
.src-list li > div{min-width:0}
.src-list .where{display:block;color:var(--mute);font-size:14px}
@media (max-width:560px){.src-list li{grid-template-columns:minmax(0,1fr)}}

/* Bangla has no capitals and breaks apart with letter-spacing */
html[lang="bn"] .rail h2,html[lang="bn"] .ch-head .kicker,html[lang="bn"] .part-h .kicker{letter-spacing:0;text-transform:none}

/* ---------- additions for the built pages ---------- */
.nav a[aria-current="true"]{color:var(--ink);font-weight:600}
.biblio li,.src-list li{grid-template-columns:128px minmax(0,1fr)}
@media (max-width:560px){.biblio li,.src-list li{grid-template-columns:minmax(0,1fr)}}
.biblio li > .g,.src-list li > .g{justify-self:start}
.feature blockquote.source p{font-size:inherit;line-height:inherit;color:var(--ink);margin:0}
.feature blockquote.source footer{margin-top:10px}
.ruler,.ruler-l{grid-template-columns:5fr 16fr minmax(36px,2fr) minmax(36px,4fr)}
.ch-list li{scroll-margin-top:96px}
.ch-list li:target .ch-row{background:color-mix(in srgb,var(--gold) 9%,transparent)}
.notes li .src + .g,.notes li .g{margin-left:2px}
.fn-pop .src{font-weight:600}

/* ---------- a chapter in several pages ---------- */
.ch-tools{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:22px}
.pager{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mute)}
.pager ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.pager a{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surf);color:var(--ink);text-decoration:none;font:600 15px/1 var(--f-body);transition:border-color .2s}
.pager a:hover{border-color:color-mix(in srgb,var(--green) 60%,var(--line))}
.pager a[aria-current="page"]{background:var(--green);border-color:var(--green);color:var(--on-green)}
.pager.bottom{justify-content:center;margin-top:52px}
.prev{display:inline-block;margin-top:20px;color:var(--mute);font-size:15.5px;line-height:1.5;text-decoration:none}
.prev:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.ch-head.compact .kicker{margin-top:24px}
.ch-head.compact h1{font-size:clamp(30px,4.6vw,54px);max-width:none}
.ch-head.compact .ch-horizon{--D:clamp(64px,8vw,112px)}
.toc .pg-h{font:600 12.5px/1.4 var(--f-body);color:var(--gold);padding:14px 0 4px 14px}
.toc .pg-h:first-child{padding-top:2px}
.toc .pg-h span{color:var(--mute);font-weight:400}
.ch-row .size{display:block;margin-top:6px;font-size:13.5px;color:var(--mute)}

/* the animation, from a chapter */
.anim-link{display:inline-flex;align-items:center;gap:10px;padding:5px 18px 5px 5px;border:1px solid var(--line);border-radius:999px;background:var(--surf);color:var(--ink);text-decoration:none;line-height:1.3;transition:border-color .2s}
.anim-link:hover{border-color:color-mix(in srgb,var(--sun) 55%,var(--line))}
.anim-link .play{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:var(--sun)}
.anim-link .play::after{content:"";position:absolute;left:12px;top:9px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
.anim-link b{display:block;font-size:14.5px;font-weight:600}
.anim-link small{display:block;font-size:12.5px;color:var(--mute)}

/* ---------- phone: a bar at the bottom for the pages, contents as a sheet ---------- */
.mbar{display:none}
.sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;background:rgba(3,8,6,.55)}
.sheet[hidden]{display:none}
.sheet-in{width:100%;max-height:78vh;max-height:78dvh;overflow:auto;overscroll-behavior:contain;background:var(--bg);border-top:1px solid var(--line);border-radius:16px 16px 0 0;padding:0 max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));box-shadow:0 -18px 40px rgba(0,0,0,.35);animation:sheet-up .22s ease-out}
@keyframes sheet-up{from{transform:translateY(48px);opacity:.3}}
.sheet-h{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 12px;margin-bottom:6px;background:var(--bg);border-bottom:1px solid var(--line);font:700 17px/1.35 var(--f-disp)}
.sheet-x{flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--surf);cursor:pointer;font-size:17px;line-height:1}
.sheet .toc a{padding:10px 0 10px 14px;font-size:16px}
@media (max-width:760px){
  body.reading{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;padding:8px max(10px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));background:var(--glass);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-top:1px solid var(--line);transition:transform .25s ease}
  .mbar.hide{transform:translateY(115%)}
  .mbar a,.mbar span{display:flex;align-items:center;min-height:46px;padding:0 10px;border-radius:12px;color:var(--ink);text-decoration:none;font:600 15px/1.2 var(--f-body);white-space:nowrap}
  .mbar .mb-prev{justify-self:start}
  .mbar .mb-next{justify-self:end;color:var(--green)}
  .mbar .mb-toc{justify-self:center;padding:0 16px;border:1px solid var(--line);background:var(--surf);font-size:14px}
  .mbar .off{color:var(--mute);opacity:.45}
  .pager.top{display:none}
  .ch-tools:empty{display:none}
  .toc-m{margin-bottom:26px}
  .next{padding:20px 18px}
  .next b{font-size:22px}
}
@media (max-width:370px){.mbar a,.mbar span{font-size:14px;padding:0 6px}.mbar .mb-toc{padding:0 10px;font-size:13px}}
@media print{.mbar,.sheet,.pager,.anim-link{display:none!important}}
.ch-tools:empty{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- মুক্তির পথ: the animation page ---------- */
.anim-page{padding-bottom:72px}
.anim-head .kicker{margin-top:30px}
.anim-head h1{font:700 clamp(38px,6vw,72px)/1.1 var(--f-disp);margin:12px 0 12px;text-wrap:balance}
.anim-head .lead{font-size:clamp(17px,1.6vw,20px);line-height:1.75;color:var(--mute);max-width:44em;margin:0}
.anim-frame{margin-top:28px}
.anim-frame iframe{display:block;width:100%;height:calc(56.25vw + 240px);border:0;background:var(--bg)}
@media (min-width:1240px){.anim-frame iframe{height:calc(675px + 240px)}}
.anim-frame.full{position:fixed;inset:0;z-index:200;margin:0;background:#000}
.anim-frame.full iframe{height:100%!important}
@media (max-width:640px){
  .anim-frame{margin-left:calc(-1 * max(20px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(20px,env(safe-area-inset-right,0px)))}
  .anim-frame iframe{height:calc(56.25vw + 300px)}
}
.anim-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:16px 0 0;padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--sun);border-radius:var(--r);background:var(--surf);font-size:15.5px;line-height:1.6}
.anim-now[hidden]{display:none}
.anim-now .which{font-weight:600}
.anim-now .go{color:var(--mute)}
.anim-now a{color:var(--ink);font-weight:600;text-underline-offset:4px}
.anim-sec{margin-top:64px}
.anim-sec h2{font:700 var(--fs-h2)/1.25 var(--f-disp);margin:0 0 8px;text-wrap:balance}
.anim-sec .intro{color:var(--mute);margin:0 0 20px;max-width:46em;font-size:16px;line-height:1.75}
.scene-map{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.scene-map li{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surf);min-width:0;transition:border-color .2s}
.scene-map li.on{border-color:var(--sun)}
.scene-map .sc{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:var(--ink);font-size:16px;line-height:1.45}
.scene-map .sc .n{flex:none;min-width:1.6em;font:700 14px/1.4 var(--f-body);color:var(--mute)}
.scene-map .sc b{color:var(--gold);font-weight:600}
.scene-map .sc:hover span:last-child{text-decoration:underline;text-underline-offset:4px}
.scene-map .ch{font-size:13.5px;color:var(--mute);padding-left:calc(1.6em + 10px);text-underline-offset:3px}
.anim-src{border:1px solid var(--line);border-radius:var(--r);background:var(--surf)}
.anim-src summary{cursor:pointer;padding:14px 18px;font-weight:600}
.anim-src ol{list-style:none;margin:0;padding:0 18px 8px}
.anim-src li{padding:12px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.7}
.anim-src .who{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.anim-src p{margin:4px 0 0;color:var(--mute)}
.vs{font:600 12px/1.65 var(--f-body);border-radius:4px;padding:0 7px;white-space:nowrap}
.vs-ok{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.vs-part{background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold)}
.vs-todo{background:color-mix(in srgb,var(--mute) 20%,transparent);color:var(--mute)}

/* ---------- home: the animation teaser ---------- */
.mp-teaser{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:clamp(16px,3vw,36px);align-items:center}
.mp-poster{position:relative;display:block;aspect-ratio:16/9;max-width:100%;overflow:hidden;border-radius:var(--r);background:radial-gradient(120% 90% at 70% 72%,#11241C 0%,#07130E 62%);color:#EFE8D8;text-decoration:none;border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.28);isolation:isolate}
.mp-sky{position:absolute;right:16%;bottom:30%;width:26%;aspect-ratio:1/.76;overflow:hidden}
.mp-sun{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:#D3304A;animation:mp-rise 2.8s cubic-bezier(.2,.7,.2,1) both}
.mp-poster::before{content:"";position:absolute;right:3%;bottom:30%;width:52%;height:46%;background:radial-gradient(closest-side at 50% 100%,rgba(211,48,74,.34),transparent);pointer-events:none}
@keyframes mp-rise{from{transform:translateY(85%)}to{transform:none}}
.mp-line{position:absolute;left:0;right:0;bottom:calc(30% - 3px);height:4px;background:#EFE8D8;opacity:.9}
.mp-title{position:absolute;left:6%;top:12%;max-width:58%}
.mp-title b{display:block;font:700 clamp(28px,4.4vw,56px)/1.15 var(--f-disp)}
.mp-title small{display:block;margin-top:8px;font:600 clamp(12px,1.3vw,16px)/1.4 var(--f-body);color:#C9A04A}
.mp-play{position:absolute;left:6%;bottom:9%;width:clamp(48px,6vw,68px);aspect-ratio:1;border-radius:50%;background:rgba(239,232,216,.14);border:2px solid rgba(239,232,216,.75);transition:background .2s,transform .2s}
.mp-play::after{content:"";position:absolute;left:38%;top:29%;border-style:solid;border-width:clamp(10px,1.3vw,14px) 0 clamp(10px,1.3vw,14px) clamp(16px,2vw,22px);border-color:transparent transparent transparent #EFE8D8}
.mp-poster:hover .mp-play,.mp-poster:focus-visible .mp-play{background:#D3304A;border-color:#D3304A;transform:scale(1.06)}
.mp-side p{margin:0 0 10px;color:var(--mute);font-size:15px}
.mp-chips{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mp-chips a{display:flex;gap:10px;align-items:baseline;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surf);text-decoration:none;font-size:15.5px;line-height:1.4;transition:border-color .2s}
.mp-chips a:hover{border-color:color-mix(in srgb,var(--sun) 55%,var(--line))}
.mp-chips b{color:var(--gold);font-weight:600;flex:none}
@media (max-width:760px){
  .mp-teaser{grid-template-columns:minmax(0,1fr)}
  .mp-chips{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:6px;margin-right:calc(-1 * max(20px,env(safe-area-inset-right,0px)))}
  .mp-chips li{flex:0 0 auto;scroll-snap-align:start}
  .mp-chips a{white-space:nowrap;min-height:44px}
}