*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f3eadc;color:#463a31;font-family:Georgia,'Times New Roman',serif}a{color:inherit}a:focus-visible,button:focus-visible{outline:3px solid #d5a350;outline-offset:4px}.site-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px clamp(18px,4vw,54px);background:#fffaf2;border-bottom:1px solid #e2d5bf}.site-head .brand{text-decoration:none;color:#26425b;font-size:clamp(18px,2.2vw,26px);letter-spacing:.045em}.site-head .hint{font:11px/1.6 Arial,sans-serif;letter-spacing:.13em;color:#8d7357;text-align:right}.site-head .hint a{text-decoration:none}.approved-sheet{width:min(100%,1024px);margin:34px auto 54px;position:relative;box-shadow:0 15px 50px #45331a24;border:1px solid #e6d9c6;background:#fff;line-height:0}.approved-sheet img{display:block;width:100%;height:auto}.hot-area{position:absolute;z-index:2;top:87.55%;height:4.95%;display:block;border-radius:12px;opacity:1;transition:box-shadow .22s,background .22s}.hot-area:hover{box-shadow:0 0 0 3px #fff9,0 0 0 5px #ac8339;background:#ffffff0d}.hot-area:focus-visible{outline:4px solid #d7ad52;outline-offset:4px}.one{left:4.15%;width:29.75%}.two{left:36.0%;width:28.65%}.three{left:66.2%;width:30%}.mobile-composition{display:none}.page-nav{background:linear-gradient(180deg,#e9dbc4,#f7efe1);padding:50px 18px 66px;border-top:1px solid #d8c5a7;text-align:center}.page-nav h2{font:400 clamp(29px,3.7vw,44px)/1.2 Georgia,serif;margin:0 0 10px;color:#6c3d35}.page-nav p.note{font:14px/1.7 Arial,sans-serif;color:#786a5a;max-width:680px;margin:0 auto 25px}.pills{display:flex;flex-wrap:wrap;gap:12px;max-width:1100px;justify-content:center;margin:auto}.pill{min-height:58px;flex:1 1 190px;min-width:175px;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;padding:13px 19px;border-radius:999px;background:#173955;color:#fff7ed;border:1px solid #a38c6e;font:700 12px/1.45 Arial,sans-serif;letter-spacing:.04em;transition:transform .2s,background .2s}.pill:hover{transform:translateY(-2px);background:#2b597b}.pill.red{background:#743c3b}.pill.red:hover{background:#945451}.pill.cream{background:#fbf5ea;color:#23415b}.pill.cream:hover{background:#ece0d1}.site-foot{text-align:center;padding:23px;color:#8b745d;letter-spacing:.16em;font:11px/1.7 Arial,sans-serif}.paper{max-width:960px;margin:48px auto 80px;padding:clamp(25px,5vw,74px);background:#fffaf3;box-shadow:0 10px 40px #46301913;border:1px solid #e0cfb8}.paper .kicker{font:700 11px Arial,sans-serif;letter-spacing:.22em;color:#a17b4f;text-transform:uppercase}.paper h1{font:400 clamp(38px,5vw,65px)/1.12 Georgia,serif;letter-spacing:-.025em;color:#163b55;margin:16px 0}.paper h1.redhead{color:#753735}.paper .intro{font:16px Arial,sans-serif;color:#846b55;line-height:1.65;margin-bottom:39px}.paper .rule{height:1px;background:#d1b78e;margin:28px 0 39px}.synopsis-content p{font:clamp(17px,1.75vw,19px)/1.81 Georgia,'Times New Roman',serif;color:#433c36;margin:0 0 22px;text-indent:1.35em;hyphens:auto}.synopsis-content p:first-child{text-indent:0}.synopsis-content p:first-child:first-letter{float:left;color:#7b3732;font-size:3.3em;line-height:.86;padding:8px 7px 0 0}.synopsis-content .last-para{color:#63463c}.synopsis-outro{padding:30px;margin:45px auto 0;background:#f3e9d7;border-left:3px solid #b59867;font:14px/1.8 Arial,sans-serif;color:#645342}.video-page{max-width:1100px;margin:48px auto 80px;padding:30px clamp(18px,4vw,50px);text-align:center}.video-page h1{color:#533831;font-size:clamp(35px,5vw,62px);font-weight:400}.video-page .lead{color:#70594d;font-size:20px;line-height:1.5}.video-frame{margin:32px auto 24px;max-width:930px;position:relative;padding:13px;background:#141824;box-shadow:0 22px 50px #120f1380;border-radius:8px}.video-frame video{width:100%;display:block;aspect-ratio:16/9;border-radius:3px;background:#090c14}.choice-stage{margin:50px auto 70px;max-width:980px;background:radial-gradient(ellipse at 40% 20%,#293959,#070d18 70%);border:1px solid #616879;color:#f5ecdf;text-align:center;padding:55px 20px 65px;border-radius:12px}.choice-stage h1{font:400 clamp(38px,5vw,65px)/1.15 Georgia,serif;margin:0 0 14px}.choice-stage p{font-size:21px;color:#dfcdbb}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:700px;margin:36px auto 0}.choice-grid a{border-radius:14px;display:block;text-decoration:none;color:white;padding:25px 15px;font:700 17px/1.5 Arial,sans-serif;background:#1e567e;border:1px solid #91b8d3}.choice-grid a:last-child{background:#722d37;border-color:#bc8392}.choice-grid span{font:11px Arial,sans-serif;letter-spacing:.12em;display:block;margin-top:10px;color:#eee0da}.snake-scene{min-height:68vh;background:black;color:#f5efed;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:25px}.snake-scene video{max-width:100%;max-height:65vh;object-fit:contain}.snake-scene h1{font-size:clamp(31px,5vw,59px);font-weight:400}.snake-scene .back-light{opacity:0;pointer-events:none;transition:opacity .8s}.snake-scene .back-light.visible{opacity:1;pointer-events:auto}.mobile-image{width:100%;display:block}.mobile-title{text-align:center;margin:25px auto 22px;color:#11142a;font:700 clamp(32px,7vw,48px)/1.07 Georgia,serif}.mobile-title em{font-style:normal;color:#763431}.mobile-intro{max-width:700px;margin:0 auto;padding:0 17px 30px;text-align:center;font-size:18px;line-height:1.45}.mobile-girl{max-width:410px;width:68%;display:block;margin:0 auto 25px;border-radius:13px;box-shadow:0 12px 35px #483a2828}.mobile-book{max-width:550px;margin:0 auto 34px;padding:24px 19px;background:#fff9ee;border-top:2px solid #bb9368}.mobile-book img{display:block;max-width:190px;width:48%;margin:0 auto 15px;box-shadow:0 15px 25px #463d3050}.mobile-book h2{text-align:center;font-weight:400;color:#173a52;font-size:27px;margin:0 0 12px}.mobile-book p{font-size:16px;line-height:1.65}.mobile-book .mobile-cta{display:block;text-align:center;text-decoration:none;padding:15px;border-radius:999px;background:#073f56;color:white;font:700 12px Arial,sans-serif;letter-spacing:.035em;margin:21px 0}.mobile-book.red-accent .mobile-cta{background:#82373b}.mobile-next{display:block;text-align:center;margin:10px auto 35px;max-width:340px;padding:18px 15px;border:1px solid #872e39;border-radius:999px;text-decoration:none;color:#7f2f39;background:#fff8ef;font:700 13px Arial,sans-serif}@media(max-width:760px){.approved-sheet{display:none}.mobile-composition{display:block;padding:22px 8px 1px}.pills{display:grid;grid-template-columns:repeat(2,1fr)}.pill{min-width:0}.site-head{padding:13px 16px}.site-head .hint{font-size:10px}.paper{margin:20px 12px 35px}.synopsis-content p{font-size:17px;line-height:1.73}.choice-grid{grid-template-columns:1fr}}@media(max-width:500px){.pills{grid-template-columns:1fr}.page-nav{padding:35px 15px 45px}.paper{padding:25px 18px}.paper h1{font-size:37px}.site-head .brand{font-size:17px}.site-head .hint{font-size:9px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Snake ending: button stays inside the visible video viewport, not below the fold. */
.snake-scene{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:calc(100svh - 79px);
  padding:clamp(18px,4vw,38px) 15px clamp(30px,5svh,60px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:#020204;
}
.snake-scene h1{
  position:relative; z-index:2;
  margin:0 auto 6px; text-align:center;
  max-width:95%; font-size:clamp(26px,3.6vw,53px); line-height:1.15;
}
.snake-screen {
  position:relative; flex:1 1 auto; width:min(100%,1120px);
  min-height: min(54svh,460px); max-height: min(69svh,690px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#000;
}
.snake-screen::after{
  content:""; position:absolute; pointer-events:none; inset:auto 0 0; height:32%;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.83)); z-index:1;
}
.snake-screen video{
  display:block;width:100%;height:100%;max-height: min(69svh,690px);
  object-fit:contain; background:#000;
}
.snake-scene .back-light{
  position:absolute; z-index:5; left:50%; bottom:clamp(22px,8%,72px);
  width: min(94%,560px);
  transform:translate(-50%,15px);
  text-align:center; opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .65s ease,transform .65s ease,visibility .65s;
}
.snake-scene .back-light.visible{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0);
}
.snake-scene .back-light .pill{
  display:flex;flex-wrap:wrap;gap:3px;min-height:60px;
  background:rgba(249,239,221,.96);color:#173a53;
  border:2px solid #d5ae79;box-shadow:0 0 30px rgba(207,177,122,.35),0 18px 55px rgba(0,0,0,.85);
  font:700 clamp(12px,1.5vw,15px)/1.5 Arial,sans-serif;letter-spacing:.065em;
}
.snake-scene .back-light .pill:hover{background:#fff;color:#133854}
.snake-scene .back-light .pill:focus-visible{outline:3px solid white;outline-offset:4px}
@media(max-width:600px){
 .snake-scene{min-height:calc(100svh - 70px)}
 .snake-screen{min-height:52svh;max-height:64svh}
 .snake-scene .back-light{bottom:7%;width:94%}
 .snake-scene .back-light .pill{min-height:61px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.snake-scene .back-light{transition:none}}


/* Film page: typography, color, and navigation coordinated with approved Page 22a. */
.film-landing{max-width:1135px;margin:0 auto;padding:clamp(35px,5.5vw,72px) 20px 76px;text-align:center}
.film-eyebrow{font:700 11px/1.5 Arial,sans-serif;letter-spacing:.25em;color:#a47b4e;margin:0 auto 21px}
.film-landing h1{font:400 clamp(36px,5.8vw,72px)/1.08 Georgia,'Times New Roman',serif;letter-spacing:-.024em;color:#173954;margin:0}
.film-landing h1 span{color:#9a7f5f;font:400 .43em/1 Georgia,serif;font-style:italic;vertical-align:.26em}
.film-subhead{font:700 clamp(12px,1.8vw,19px)/1.4 Georgia,serif;letter-spacing:.25em;color:#783939;margin:14px auto 17px}
.film-lede{font:clamp(16px,2vw,21px)/1.65 Georgia,serif;color:#6d584a;margin:0 auto 30px;max-width:850px}
.film-cinema{max-width:1000px;margin:0 auto;background:#0d1421;padding:clamp(8px,1.2vw,13px);border:1px solid #c1a889;border-radius:7px;box-shadow:0 24px 56px rgba(37,25,17,.24),0 3px 8px rgba(20,20,23,.08)}
.film-player{position:relative;background:#080b10;aspect-ratio:16/9;overflow:hidden;border-radius:2px}
.film-player video{display:block;width:100%;height:100%;background:#080b10;object-fit:contain}
.film-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;gap:14px;justify-content:center;align-items:center;background:rgba(13,24,39,.88);backdrop-filter:blur(8px);border:1px solid rgba(255,238,210,.78);color:white;padding:14px 24px;border-radius:999px;min-height:66px;font:700 13px/1.4 Arial,sans-serif;letter-spacing:.1em;cursor:pointer;box-shadow:0 7px 30px rgba(0,0,0,.5);transition:background .2s,opacity .25s}
.film-start-mark{color:#ffdf9c;font-size:23px;line-height:1}
.film-start:hover{background:rgba(46,80,115,.96)}.film-start.hidden{opacity:0;pointer-events:none}
.film-status{display:flex;justify-content:space-between;gap:12px;padding:13px 11px 4px;font:700 10px/1.5 Arial,sans-serif;color:#d7c9b3;letter-spacing:.16em}
.film-afterword{max-width:730px;margin:36px auto 34px;color:#5a4a40}
.film-afterword .film-ornament{color:#b68f60;font-size:26px}
.film-afterword p{font:italic clamp(17px,1.9vw,21px)/1.62 Georgia,serif;margin:12px 0}
.film-next{display:flex;justify-content:center;flex-wrap:wrap;gap:13px}
.film-link{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:55px;padding:14px 24px;border-radius:999px;text-decoration:none;font:700 12px/1.4 Arial,sans-serif;letter-spacing:.04em;transition:transform .2s,filter .2s}
.film-link:hover{transform:translateY(-2px);filter:brightness(1.06)}
.film-link-light{border:1px solid #b39c7d;color:#22445c;background:#fff9ee}
.film-link-dark{border:1px solid #a6917e;color:#fffaed;background:#173955}
@media(max-width:600px){.film-landing{padding:30px 12px 45px}.film-landing h1{font-size:clamp(33px,8vw,44px)}.film-lede{font-size:17px}.film-lede br{display:none}.film-cinema{padding:6px}.film-start{gap:8px;min-height:49px;padding:9px 13px;font-size:10px}.film-start-mark{font-size:17px}.film-status{font-size:9px}.film-next{flex-direction:column}.film-link{width:100%}}
@media(prefers-reduced-motion:reduce){.film-start,.film-link{transition:none}}

/* v17: one clear onward route from the two-book page; the film remains optional. */
.pill.journey-forward{background:#173955;color:#ffedce;border:2px solid #c0a06b;box-shadow:0 4px 14px #17395526}
.pill.journey-forward:hover{background:#295879}