/* ==========================================================
   スクロールで動くマンガ(各章の前半と、トップの序章)
   白黒のインク画 + 赤のアクセント。1シーン = 画面1枚(.stage)。
   シーンの中は、重ねたレイヤー(.ly)でできている。
     .art    … 絵(背景・人物・前景)。1600×1600 の正方形を画面いっぱいに敷く
     .cap    … ナレーションの箱(.talk はビッツやミケのひとこと)
     .big    … 画面いっぱいの巨大な文字
     .card   … 当時の実物カードなど、真ん中に出てくるもの
     .ink    … 画面を黒インクで覆う(シーンの終わり)
     .reveal … インクのしみの形に、次の場面が広がって見えてくる(シーンの始まり)
     .slash  … 斜めのコマ割りで、次の場面が切りこんでくる
   CSS に書いた姿が「静止画のときの見え方」。動きは story.js が付ける。
   色や字体の変数は .story の中だけで使う(マンガ版の manga.css と分ける)。
   ========================================================== */
.story {
  /* ---- 基本の色 ---- */
  --ink: #0d0d0d;
  --paper: #f4efe4;
  --red: #c8102e;
  --orange: #f7931a;
  --yellow: #ffd36b;

  /* ---- 設定:丸い枠・吹き出し・影の色と形(ここを書きかえれば全シーンに効く) ----
     シーンごとに変えたいときは、tools/story_chapters.py の scene() / cover() に
     vars={"--sun-color": "#d9481c"} のように渡す。 */
  --sun-color: var(--orange);          /* トップの序章・表紙の大きな丸 */
  --sun-mark: var(--paper);            /* 大きな丸の中の ₿ の色 */
  --sun-mark-opacity: .2;              /* ₿ の濃さ(0〜1) */
  --ring-color: var(--orange);         /* ブロックのまわりに出る丸い枠 */
  --ring-width: 6px;                   /* 丸い枠の太さ */
  --ring-style: dashed;                /* 丸い枠の線(solid / dashed / dotted) */
  --face-ring: var(--orange);          /* ビッツ・ミケの顔のまわりの丸い枠 */
  --face-ring-width: 3px;
  --face-bg: #fff7ea;                  /* 顔の丸の中の色 */
  --talk-bg: #fffdf7;                  /* ビッツ・ミケのひとことの箱 */
  --talk-border: var(--orange);        /* ひとことの箱の枠 */
  --talk-border-width: 3px;
  --talk-radius: 18px;                 /* ひとことの箱の角の丸さ */
  --talk-shadow: var(--ink);           /* ひとことの箱の影 */
  --talk-name: #a85400;                /* 「ビッツ」「ミケ」の名前の色 */
  --cap-border: var(--paper);          /* ナレーションの箱の枠 */
  --cap-shadow: var(--orange);         /* ナレーションの箱の影 */
  --card-shadow: var(--orange);        /* 当時の実物カードの影 */
  --progress-color: var(--orange);     /* ヘッダーの下の、読み進みの線 */
  --f-sfx: "Dela Gothic One", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --f-narr: "Klee One", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-body: "M PLUS Rounded 1c", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --f-serif: Georgia, "Times New Roman", serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --g: max(16px, env(safe-area-inset-left, 0px));
  --top: 56px;
  --vh: 100vh;
  --ink-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M866 500Q842 542 855 587Q825 623 761 637Q759 679 722 697Q694 719 703 793Q651 787 624 826Q573 796 541 841Q500 843 462 813Q406 882 380 816Q333 819 308 779Q295 731 248 723Q185 717 232 641Q152 632 185 578Q137 544 178 500Q119 454 162 417Q155 369 173 328Q194 289 226 258Q283 255 311 226Q318 153 385 196Q407 122 462 191Q500 193 535 209Q588 143 604 226Q669 178 686 231Q724 247 736 291Q784 304 784 351Q819 379 851 414Q883 454 866 500ZM76 498Q75 503 72 509Q66 509 62 512Q56 516 52 511Q49 506 43 503Q40 498 44 492Q48 489 52 485Q56 479 61 485Q68 483 69 489Q74 492 76 498ZM93 453Q92 458 89 463Q88 471 80 470Q75 467 67 471Q62 466 60 459Q61 453 63 448Q65 442 67 435Q73 431 80 434Q85 440 93 439Q95 446 93 453ZM752 190Q747 193 747 198Q745 203 740 203Q736 200 732 199Q728 197 726 194Q722 190 727 186Q729 183 731 178Q735 179 739 179Q745 177 749 180Q749 185 752 190ZM948 622Q951 627 946 629Q945 635 940 634Q935 636 931 633Q927 631 928 625Q924 622 927 618Q928 614 933 613Q936 611 940 610Q945 610 948 613Q949 618 948 622ZM845 744Q843 750 844 758Q839 764 831 764Q824 763 816 763Q813 755 810 750Q809 744 803 735Q812 732 817 727Q824 726 831 722Q839 723 843 731Q848 736 845 744ZM968 453Q971 462 965 468Q957 469 951 474Q944 472 935 474Q929 468 925 462Q928 453 923 445Q927 436 935 432Q944 432 951 433Q957 436 964 439Q967 446 968 453ZM562 886Q562 892 557 896Q552 898 548 903Q542 902 538 898Q531 897 527 892Q530 886 526 879Q534 876 536 870Q541 866 548 870Q553 871 558 875Q562 879 562 886ZM888 300Q885 305 882 308Q879 312 874 311Q869 314 864 313Q862 308 861 304Q856 300 860 296Q863 293 864 287Q869 287 874 286Q878 288 880 293Q888 294 888 300ZM898 701Q898 706 894 709Q893 715 887 713Q883 715 878 713Q877 707 874 705Q871 701 875 697Q874 691 880 692Q883 687 887 691Q892 690 896 692Q897 697 898 701ZM91 617Q90 621 88 625Q85 629 80 632Q75 632 70 630Q65 628 63 622Q63 617 63 612Q65 606 72 606Q76 606 80 605Q84 605 88 608Q94 611 91 617ZM754 823Q756 826 755 831Q751 833 748 835Q744 832 740 833Q736 830 737 826Q731 823 736 819Q736 814 741 814Q744 814 747 811Q751 813 754 815Q757 818 754 823ZM497 946Q499 953 491 956Q487 958 483 965Q477 963 471 961Q467 957 464 952Q463 946 467 941Q465 934 472 932Q476 926 482 933Q489 930 492 935Q495 940 497 946Z'/%3E%3C/svg%3E");
  position: relative; margin-left: calc(-1 * var(--gutter-l, 0px)); margin-right: calc(-1 * var(--gutter-r, 0px));
  background: var(--ink); color: var(--paper); font: 500 16px/1.75 var(--f-body);
}
@supports (height: 100svh) { .story { --vh: 100svh; } }
.story * { box-sizing: border-box; }
.story a { color: inherit; }
.story h1, .story h2, .story p { word-break: auto-phrase; }
.story img { display: block; max-width: none; }

/* ---------- シーンの土台 ---------- */
.sc { position: relative; }
/* 黒インクで終わるシーンの次は、1画面ぶん上に重ねる(story.js が付ける) */
.moving .sc.under { margin-top: calc(-1 * max(var(--vh), 520px)); }
.stage { position: relative; height: var(--vh); min-height: 520px; overflow: hidden; background: var(--base, var(--ink)); isolation: isolate; }
/* 紙のざらつき */
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ly { position: absolute; }
.art { inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 48%; }
.reveal, .slash { inset: 0; }
.dim { inset: 0; background: rgba(13, 13, 13, .45); }

/* 黒インクで画面を覆う / インクのしみの形に次の場面が現れる */
.ink { inset: 0; display: none; background: var(--ink); z-index: 20; }
.moving .ink { display: block; }
.moving .ink, .moving .reveal {
  --r: 260;
  -webkit-mask-image: var(--ink-mask); mask-image: var(--ink-mask);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%; mask-position: 50% 50%;
  -webkit-mask-size: calc(var(--r) * 1vmax) auto; mask-size: calc(var(--r) * 1vmax) auto;
}
.slash { clip-path: polygon(0% 0%, 140% 0%, 100% 100%, 0% 100%); }

/* ---------- 見出し・ナレーション ---------- */
.chap { top: calc(var(--top) + 14px); left: var(--g); right: var(--g); margin: 0; font: 400 clamp(.9rem, 2.8vw, 1.25rem)/1.35 var(--f-sfx); letter-spacing: .04em; z-index: 5; }
.chap span { display: inline-block; padding: 4px 10px; background: var(--ink); color: var(--paper); }
.chap b { display: block; margin-top: 4px; font-size: clamp(3rem, 14vw, 8.5rem); line-height: .9; letter-spacing: -.02em; color: var(--paper); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; font-weight: 400; }
.chap.dark b { color: var(--ink); -webkit-text-stroke-color: var(--paper); }
.chap.dark span { background: var(--paper); color: var(--ink); }

.cap {
  left: var(--g); right: var(--g); bottom: max(28px, env(safe-area-inset-bottom, 0px)); margin-inline: auto; max-width: 36em; z-index: 6;
  padding: 14px 18px; background: var(--ink); color: var(--paper); border: 3px solid var(--cap-border);
  font: 600 clamp(1rem, 2.6vw, 1.2rem)/1.8 var(--f-narr); box-shadow: 6px 6px 0 var(--cap-shadow);
}
.cap p { margin: 0; }
.cap p + p { margin-top: 6px; }
.cap b { color: var(--yellow); font-weight: 600; }
.cap.light { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.cap.light b { color: var(--red); }
.cap.top { bottom: auto; top: calc(var(--top) + 16px); }
.cap.talk { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; background: var(--talk-bg); color: var(--ink); border: var(--talk-border-width) solid var(--talk-border); border-radius: var(--talk-radius); box-shadow: 6px 6px 0 var(--talk-shadow); font-family: var(--f-body); font-weight: 500; }
.cap.talk svg { width: 64px; height: 64px; padding: 4px; border-radius: 50%; background: var(--face-bg); box-shadow: 0 0 0 var(--face-ring-width) var(--face-ring); }
.cap.talk .who { display: block; font: 800 .8rem/1.2 var(--f-body); color: var(--talk-name); margin-bottom: 2px; }
.cap.talk b:not(.who) { color: var(--red); font-weight: 800; }

/* ---------- 巨大な文字・はんこ ---------- */
.big {
  inset: 0 0 26% 0; margin: auto; height: fit-content; padding: 0 var(--g); text-align: center; z-index: 4;
  font: 400 clamp(3.6rem, 18vw, 12rem)/.9 var(--f-sfx); letter-spacing: -.03em; color: var(--paper);
  -webkit-text-stroke: clamp(3px, .7vw, 7px) var(--ink); paint-order: stroke fill; text-shadow: .06em .06em 0 var(--ink);
}
.big span { display: block; }
.big small { display: block; margin-top: .5em; font: 400 clamp(1rem, 3.6vw, 1.7rem)/1.4 var(--f-sfx); letter-spacing: .02em; -webkit-text-stroke: 0; text-shadow: none; }
.big small { display: table; margin-inline: auto; max-width: 30em; padding: 4px 12px; background: rgba(13, 13, 13, .86); color: var(--paper); font-size: clamp(.9rem, 2.8vw, 1.3rem); }
.big.t-red { color: var(--red); -webkit-text-stroke-color: var(--paper); }
.big.t-ink { color: var(--ink); -webkit-text-stroke-color: var(--paper); text-shadow: .06em .06em 0 var(--red); }
.big.t-orange { color: var(--orange); }
.big.t-yellow { color: var(--yellow); }
.big.s-m { font-size: clamp(2.4rem, 11vw, 7rem); }
.big.s-s { font-size: clamp(1.8rem, 7.4vw, 4.6rem); line-height: 1.1; }
.stamp {
  top: calc(var(--top) + 18px); right: var(--g); margin: 0; z-index: 5; rotate: -6deg;
  padding: 6px 14px; border: 5px solid currentColor; color: var(--red); background: rgba(244, 239, 228, .92);
  font: 400 clamp(1.4rem, 6vw, 3.2rem)/1.1 var(--f-sfx); letter-spacing: .02em;
}
.stamp.t-ink { color: var(--ink); }

/* ---------- 真ん中に出てくるカード ---------- */
.card {
  inset: 0 0 22% 0; margin: auto; width: min(560px, calc(100% - 2 * var(--g))); height: fit-content; max-height: calc(var(--vh) - 250px); overflow: hidden; z-index: 5;
  padding: clamp(16px, 3.6vw, 26px); background: #fffdf7; color: var(--ink); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--card-shadow); rotate: -1.5deg;
}
.card p { margin: 0; }
.card .tag { display: inline-block; margin-bottom: 8px; padding: 2px 10px; background: var(--red); color: #fff; font: 800 .74rem/1.6 var(--f-body); letter-spacing: .04em; }
.card .head { display: flex; flex-direction: column; gap: 0; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid #d8d1c4; font: 500 .82rem/1.5 var(--f-body); color: #4a4540; }
.card .orig { font: 400 clamp(.95rem, 2.6vw, 1.08rem)/1.55 var(--f-serif); }
.card .orig.big-o { font: 700 clamp(1.6rem, 6vw, 2.3rem)/1.2 var(--f-body); }
.card .date { margin-top: 6px; font-size: .8rem; color: #6f675d; }
.card .tr { margin-top: 10px; padding-top: 8px; border-top: 2px dashed #9a9488; font: 600 .92rem/1.7 var(--f-narr); }
.card .src { display: inline-block; margin-top: 8px; font: 700 .8rem/1.4 var(--f-body); color: #a85400; }
.card.mail { background: #eef3ff; }
.card.post { background: #e5eaf2; box-shadow: 10px 10px 0 var(--ink); }
.card.tweet { background: #fff; }
.card.paper { rotate: -2deg; }
.card.paper .t { font: 700 clamp(1.05rem, 3.4vw, 1.4rem)/1.3 var(--f-serif); text-align: center; }
.card.paper .a { margin: 6px 0 12px; font: 400 .9rem/1.4 var(--f-serif); text-align: center; color: #444; }
.card.paper .abs { font: 400 clamp(.85rem, 2.4vw, .98rem)/1.55 var(--f-serif); }
.card.news { width: min(620px, calc(100% - 2 * var(--g))); background: var(--paper); border-width: 4px; box-shadow: 12px 12px 0 var(--ink); rotate: -3deg; }
.card.news .mast { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 3px double var(--ink); font: 700 .76rem/1.2 var(--f-serif); letter-spacing: .14em; text-transform: uppercase; }
.card.news .hd { font: 900 clamp(1.6rem, 6.6vw, 3.1rem)/1.04 var(--f-serif); }
.card.news .cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 12px; }
.card.news .cols i { display: block; height: 7px; margin-bottom: 7px; background: #b9b2a3; }
.card.news .cols i:nth-child(3n) { width: 70%; }
.card.news .tr { color: var(--red); }
.card.block { width: min(440px, calc(100% - 2 * var(--g))); background: var(--ink); color: var(--paper); border: 4px solid var(--paper); text-align: center; rotate: 0deg;
  box-shadow: 0 0 0 6px var(--ink), 0 0 60px 10px rgba(255, 211, 107, .45); }
.card.block .no { font: 400 clamp(2.4rem, 10vw, 4.2rem)/1 var(--f-sfx); color: var(--yellow); }
.card.block .nm { margin: 4px 0 12px; font: 400 1rem/1.3 var(--f-sfx); letter-spacing: .1em; }
.card.block dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; text-align: left; font-size: .8rem; }
.card.block dt { color: #b9b2a3; }
.card.block dd { margin: 0; font-family: var(--f-mono); overflow-wrap: anywhere; }
.card.block .src { color: var(--yellow); }
.card.inv { width: min(420px, calc(100% - 2 * var(--g))); text-align: left; }
.card.inv .y { font: 400 .95rem/1 var(--f-sfx); color: var(--red); }
.card.inv .n { margin: 4px 0; font: 400 clamp(1.6rem, 6vw, 2.3rem)/1.1 var(--f-sfx); }
.card.inv .w { font: 800 .85rem/1.4 var(--f-body); color: #4a4540; }
.card.inv .d { margin-top: 8px; font: 600 .95rem/1.7 var(--f-narr); }
.card.inv a { font: 700 .8rem/1.4 var(--f-body); color: #a85400; }

/* ノートが並ぶ(第1章) */
.notes { inset: 0 0 24% 0; margin: auto; height: fit-content; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 2vw, 18px); width: min(760px, calc(100% - 2 * var(--g))); z-index: 5; }
.notes div { padding: 12px 8px; background: #fffdf7; color: var(--ink); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); text-align: center; font: 400 clamp(.85rem, 2.6vw, 1.2rem)/1.3 var(--f-sfx); }
.notes div small { display: block; margin-bottom: 6px; font: 800 .72rem/1 var(--f-body); color: #6f675d; }
.notes .bad { color: var(--red); border-color: var(--red); box-shadow: 5px 5px 0 var(--red); }
/* ブロックの鎖(第1章) */
.chain { inset: 0 0 26% 0; margin: auto; height: fit-content; display: flex; align-items: center; justify-content: center; gap: 0; width: calc(100% - 2 * var(--g)); z-index: 5; }
.chain div { flex: 0 1 200px; padding: 12px; background: #fffdf7; color: var(--ink); border: 4px solid var(--ink); border-radius: 12px; font: 600 clamp(.7rem, 2vw, .9rem)/1.5 var(--f-mono); box-shadow: 6px 6px 0 var(--orange); }
.chain div b { display: block; font: 400 clamp(.9rem, 2.6vw, 1.2rem)/1.2 var(--f-sfx); margin-bottom: 6px; }
.chain div + div { margin-left: clamp(14px, 4vw, 40px); position: relative; }
.chain div + div::before { content: ""; position: absolute; right: 100%; top: 50%; width: clamp(14px, 4vw, 40px); height: 6px; background: var(--orange); }
.chain .x { color: var(--red); border-color: var(--red); }
/* コピーで増えるコイン(第2章) */
.copies { inset: 0 0 26% 0; margin: auto; height: fit-content; text-align: center; z-index: 5; font-size: clamp(2.6rem, 10vw, 5.4rem); line-height: 1.1; }
.copies span { display: inline-block; width: 1.1em; height: 1.1em; margin: .06em; border-radius: 50%; background: var(--yellow); border: .07em solid var(--ink); color: var(--ink); font: 400 .66em/1.6 var(--f-sfx); }
/* 価格の線 */
.chart { inset: 0 0 20% 0; margin: auto; width: min(760px, calc(100% - 2 * var(--g))); height: fit-content; z-index: 5; clip-path: inset(0% 0% 0% 0%); }
.chart svg { display: block; width: 100%; height: auto; }

/* ---------- 章の表紙 ---------- */
.sc-cover .stage { background: var(--paper); color: var(--ink); }
.sc-cover .title { inset: 0; margin: auto; height: fit-content; padding: 0 var(--g); text-align: center; z-index: 5; }
.sc-cover .kicker { display: inline-block; margin: 0 0 12px; padding: 6px 14px; background: var(--ink); color: var(--paper); font: 400 clamp(.9rem, 2.6vw, 1.1rem)/1.2 var(--f-sfx); letter-spacing: .12em; }
.sc-cover .ttl { margin: 0; word-break: auto-phrase; text-wrap: balance; font: 400 clamp(2.3rem, 10.5vw, 7.6rem)/1.05 var(--f-sfx); letter-spacing: -.01em; color: var(--ink); -webkit-text-stroke: 3px var(--paper); paint-order: stroke fill; text-shadow: .05em .05em 0 var(--red); }
.sc-cover .ttl span { display: block; }
.sc-cover .sub { margin: 16px auto 0; max-width: 24em; width: fit-content; padding: .2em .7em; background: color-mix(in srgb, var(--paper) 88%, transparent); font: 600 clamp(1rem, 3vw, 1.3rem)/1.7 var(--f-narr); }
.sc-cover .sub mark, .sc-cover .era { background: var(--ink); color: var(--paper); padding: 0 .4em; }
.sc-cover .era { display: inline-block; margin: 12px 0 0; font: 400 clamp(.9rem, 2.6vw, 1.1rem)/1.6 var(--f-sfx); }
.sc-cover.t-dark .stage { background: var(--ink); }
.sc-cover.t-dark .ttl { color: var(--paper); -webkit-text-stroke-color: var(--ink); }
.sc-cover.t-dark .sub { color: var(--paper); background: color-mix(in srgb, var(--ink) 85%, transparent); }
.sc-cover.t-dark .kicker, .sc-cover.t-dark .era { background: var(--red); }
.sc-cover.t-dark .cue { color: var(--paper); }
.sc-cover.t-dark .cue::after { background: var(--paper); }
.cue { left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom, 0px)); text-align: center; font: 400 .85rem/1 var(--f-sfx); letter-spacing: .3em; color: var(--ink); z-index: 5; }
.cue::after { content: ""; display: block; width: 2px; height: 46px; margin: 10px auto 0; background: var(--ink); animation: cue 1.6s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: 50% 0; } 51% { transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } }
.ring { inset: 0 0 18% 0; margin: auto; width: min(92vmin, 760px); height: min(92vmin, 760px); border-radius: 50%; border: var(--ring-width) var(--ring-style) var(--ring-color); }
.sun { inset: 0; margin: auto; width: min(78vmin, 640px); height: min(78vmin, 640px); border-radius: 50%; background: var(--sun-color); }
.sun::after { content: "₿"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 min(46vmin, 380px)/1 var(--f-sfx); color: var(--sun-mark); opacity: var(--sun-mark-opacity); }

/* 読み進みの線(マンガ版のヘッダーの下) */
.top .progress { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none; }
.top .progress i { display: block; height: 100%; background: var(--progress-color, #f7931a); transform: scaleX(0); transform-origin: 0 50%; }
:is(.still, .no-js) .top .progress { display: none; }

/* ストーリーのあとに続く「体験コーナー」の入口 */
.after-story { margin-top: 28px; }

/* ---------- 静止画版(動きを減らす設定 / スクリプトが読めないとき) ----------
   絵は背景に敷いたまま、文字やカードは上から順に縦に並べる。 */
:is(.still, .no-js) .stage {
  height: auto; min-height: var(--vh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: calc(var(--top) + 24px) var(--g) 48px;
}
:is(.still, .no-js) .sc + .sc .stage { border-top: 6px solid var(--paper); }
:is(.still, .no-js) .stage > .ly:not(.art):not(.reveal):not(.slash):not(.ring):not(.sun):not(.ink):not(.dim) {
  position: relative; inset: auto; margin: 0; width: 100%; max-height: none;
}
:is(.still, .no-js) .card, :is(.still, .no-js) .cap, :is(.still, .no-js) .notes, :is(.still, .no-js) .chart { max-width: 560px; }
:is(.still, .no-js) .notes { max-width: 760px; }
:is(.still, .no-js) .chap { align-self: stretch; }
:is(.still, .no-js) .stamp { align-self: flex-end; width: auto !important; }
:is(.still, .no-js) .cue, :is(.still, .no-js) .ring { display: none; }

@media (max-width: 520px) {
  .cap.talk { grid-template-columns: 48px minmax(0, 1fr); }
  .cap.talk svg { width: 48px; height: 48px; }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain { flex-direction: column; }
  .chain div { flex: none; width: min(260px, 100%); }
  .chain div + div { margin: 18px 0 0; }
  .chain div + div::before { right: auto; left: 50%; top: auto; bottom: 100%; width: 6px; height: 18px; }
}

/* 真ん中に出てくる絵 / 夜にする幕 / 巨大な文字の飾り */
.fig { inset: 0 0 24% 0; margin: auto; width: min(760px, 100%); height: fit-content; z-index: 4; }
.fig img { width: 100%; height: auto; }
.night { inset: 0; background: rgba(29, 33, 66, .72); z-index: 2; }
.big em { font-style: normal; color: var(--red); -webkit-text-stroke-color: var(--paper); }
.big s { text-decoration-thickness: .12em; text-decoration-color: var(--red); }

/* 太い枠の1コマ / 写真のカード */
.koma { inset: 0 0 26% 0; margin: auto; width: min(520px, calc(100% - 2 * var(--g))); height: fit-content; z-index: 4; rotate: 2deg;
  background: var(--paper); border: 6px solid var(--ink); box-shadow: 10px 10px 0 var(--red); }
.koma img { display: block; width: 100%; height: auto; max-height: calc(var(--vh) - 300px); object-fit: cover; }
.card.photo { width: min(520px, calc(100% - 2 * var(--g))); padding: 12px; rotate: 1.5deg; box-shadow: 10px 10px 0 var(--ink); }
.card.photo img { display: block; width: 100%; height: auto; max-height: calc(var(--vh) - 380px); min-height: 140px; object-fit: cover; border: 3px solid var(--ink); }
.card.photo .pc { margin-top: 8px; font: 600 .95rem/1.6 var(--f-narr); }
.card.photo .cr { margin-top: 4px; font: 500 .68rem/1.5 var(--f-body); color: #6f675d; overflow-wrap: anywhere; }
.card.photo .cr a { color: inherit; }
:is(.still, .no-js) .koma, :is(.still, .no-js) .card.photo { max-width: 520px; }
/* 体験コーナー(紙のページ)の写真 */
.photo-fig { margin: 22px auto; max-width: 560px; padding: 10px; background: #fff; border: 3px solid #141414; box-shadow: 6px 6px 0 #141414; rotate: -1deg; }
.photo-fig img { display: block; width: 100%; height: auto; border: 2px solid #141414; }
.photo-fig figcaption { margin-top: 8px; font: 600 .95rem/1.6 "Klee One", serif; }
.photo-fig small { display: block; margin-top: 4px; font: 500 .7rem/1.5 "M PLUS Rounded 1c", sans-serif; color: #6f675d; overflow-wrap: anywhere; }
.photo-fig small a { color: inherit; }