/* September update: paired controls and an unobscured narrative viewport. */
:root{--header-height:116px}
.hero .hero-actions{flex-wrap:wrap;gap:16px;align-items:stretch}
.hero .hero-actions :is(.button-gold,.trailer-button){--cta-cut:12px;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;width:258px;min-width:0;max-width:100%;min-height:64px;padding:17px 22px;font:500 16px/1.6 var(--sans);letter-spacing:.1em;text-align:left;border-radius:0;clip-path:polygon(var(--cta-cut) 0,100% 0,100% calc(100% - var(--cta-cut)),calc(100% - var(--cta-cut)) 100%,0 100%,0 var(--cta-cut));transition:filter .25s,transform .25s;translate:none}
.hero .hero-actions .button-gold{border:0;box-shadow:inset 0 1px #fff0c2,inset 0 -2px #8a642e55}
.hero .trailer-button{border:0;color:#e8d3ab;background:linear-gradient(125deg,#e6d3aa,#907344 52%,#c8ab75);box-shadow:none;overflow:hidden}
.hero .trailer-button::before{content:'';position:absolute;inset:1px;width:auto;height:auto;z-index:-1;background:linear-gradient(115deg,#18150ff5,#090a0cf8 65%);clip-path:polygon(calc(var(--cta-cut) - .5px) 0,100% 0,100% calc(100% - var(--cta-cut) + .5px),calc(100% - var(--cta-cut) + .5px) 100%,0 100%,0 calc(var(--cta-cut) - .5px));pointer-events:none}
.hero .trailer-button::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 25%,#f1d9aa14 48%,transparent 68%);transform:translateX(-120%);transition:transform .7s;pointer-events:none}
.hero .hero-actions .button-gold>span:last-child,.hero .trailer-play{display:grid;place-items:center;flex:0 0 39px;width:39px;height:26px;margin:0;padding:0 0 0 15px;border-left:1px solid #71532655;font-size:22px}
.hero .trailer-play{border-left-color:#c6a57555;color:#e4c58e}
.hero .trailer-label{font:inherit;letter-spacing:inherit}
.hero .hero-actions :is(.button-gold,.trailer-button):focus-visible{outline:0;box-shadow:inset 0 0 0 3px #fff0c9;filter:brightness(1.15)}
@media(hover:hover){.hero .hero-actions :is(.button-gold,.trailer-button):hover{transform:translateY(-2px);filter:brightness(1.1);translate:none}.hero .trailer-button:hover::after{transform:translateX(120%)}}
.hero .hero-actions :is(.button-gold,.trailer-button):active{transform:translateY(1px);translate:none}
.hero .hero-visual,.three-ready .hero .hero-visual{opacity:var(--opening-opacity,1);z-index:-3;animation:none}
.hero .hero-visual video{object-position:65% 48%;filter:saturate(.82) brightness(.7)}
.hero .hero-shade,.three-ready .hero .hero-shade{opacity:1;z-index:-2;background:linear-gradient(90deg,#05080bd9,transparent 80%),linear-gradient(0deg,#06080b,transparent 38%)}
.story-scroll{scroll-margin-top:var(--header-height)}
.story-stage{top:var(--header-height);height:calc(100svh - var(--header-height));min-height:0}
.story-index{top:18px;left:6%;right:6%;z-index:8;min-height:54px;padding-bottom:12px;border-bottom:1px solid #cbb48a30}
.story-tabs{overflow-x:auto;scrollbar-width:none;min-width:0}
.story-tabs button{flex:none;min-height:44px;white-space:nowrap}
.story-content{top:clamp(94px,20%,150px);bottom:74px;transform:none;max-height:none;overflow-y:auto;scrollbar-width:thin;overscroll-behavior-y:auto;z-index:5;padding-right:8px}
.story-content[aria-hidden='true']{pointer-events:none}
.story-content .story-signature{display:block;margin:0 0 16px;line-height:1.8}
.story-content h2{font-size:clamp(32px,3.8vw,58px);line-height:1.35;margin-bottom:16px}
.story-content .story-description{font-size:16px;line-height:1.85;margin-bottom:18px}
.story-content .story-quote{font-size:16px;line-height:1.8}
.story-actions{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.story-content .story-actions .text-link{display:inline-flex;gap:12px;align-items:center;margin:0;font-size:14px;min-height:44px;padding:8px 12px}
.story-film{display:inline-flex;gap:14px;align-items:center;min-height:44px;padding:8px 14px;border:1px solid #c7b18475;color:#ebd7af;font-size:14px;background:#090d13b3}
.story-film:hover{background:#b89a4d20}.story-film-status{display:block;margin:0 0 12px;font-size:14px;color:#a8c9c9}
.story-bottom{bottom:15px;z-index:8;padding-top:10px;border-top:1px solid #cbb48a25;background:linear-gradient(transparent,#080b10d9)}
.horizon-passage{perspective:1000px}
.passage-engine{transform:translate(-50%,-60%) translateY(var(--engine-float,0px)) scale(var(--engine-scale,.78)) rotateX(var(--engine-pitch,0deg)) rotateY(var(--engine-yaw,0deg)) rotateZ(var(--engine-tilt,0deg));transform-style:preserve-3d}
.passage-engine img{filter:drop-shadow(15px 23px 9px #000b) drop-shadow(0 0 24px #a369d960);backface-visibility:visible}
.media-dialog{max-height:90dvh;overflow-y:auto}
.media-dialog video{display:block;width:100%;max-height:65dvh;background:#000}
.player-controls{padding:12px 18px 16px;background:#0c1118;border-top:1px solid #bca16b40;font-size:14px}
.player-seek-row{display:flex;align-items:center;gap:14px;font-variant-numeric:tabular-nums}
.player-seek-row input{flex:1;min-width:50px;accent-color:#d5b678;cursor:pointer;height:28px}
.player-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:6px}
.player-actions button,.player-actions select{min-height:40px;padding:7px 12px;border:1px solid #c8ae7840;color:#e6d5b3;background:#151b24;border-radius:0;font:inherit}
.player-actions label{margin-left:auto;display:flex;gap:8px;align-items:center}.player-time{min-width:90px;font-size:12px;color:#c5cbd1}
.player-note{margin:8px 0 0;color:#a4adb8;font-size:12px;min-height:1.6em}
.chapter-archive,.lyra-terminal{position:relative;padding:100px 6%;border-top:1px solid #c5ae7733;background:#080b10;scroll-margin-top:calc(var(--header-height) + 12px)}
.section-inner{max-width:1300px;margin:auto}.chapter-archive h2,.lyra-terminal h2{font:500 clamp(34px,4vw,58px)/1.4 var(--serif);letter-spacing:.08em;margin:0 0 18px}
.chapter-intro{max-width:760px;color:#aeb8c4;font-size:16px;line-height:1.9}
.chapter-selectors{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0}
.chapter-selectors button{min-height:48px;padding:10px 20px;border:1px solid #bda77b44;background:none;color:#b5bcc6;font-size:16px}
.chapter-selectors button[aria-pressed='true']{border-color:#d5b678;background:#c5a56612;color:#ecd6a8}
.chapter-book[hidden]{display:none}.chapter-book-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px;border-bottom:1px solid #bca67740;padding-bottom:23px}
.chapter-book-header h3{font:500 27px/1.6 var(--serif);margin:0}.chapter-book-header p{color:#a7b6c4;font-size:14px;margin:8px 0 0}
.chapter-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:0}
.chapter-book{scroll-margin-top:150px}
.chapter-book+.chapter-book{margin-top:72px}
.chapter-list li{border-bottom:1px solid #a7b3c72b;min-width:0}.chapter-list details{padding:16px 0}.chapter-list summary{display:flex;gap:22px;align-items:center;cursor:pointer;min-height:48px;font-size:18px;list-style:none}
.chapter-list summary::-webkit-details-marker{display:none}.chapter-number{font:400 27px var(--latin);color:#b49b6c;flex:none;width:32px}.chapter-list summary::after{content:'+';margin-left:auto;color:#b49b6c}.chapter-list details[open] summary::after{content:'−'}
.chapter-list p{margin:12px 16px 18px 54px;color:#aeb9c6;font-size:16px;line-height:1.9}.chapter-afterword{margin-top:30px;color:#acb9c6;font-size:14px;line-height:1.9}.chapter-afterword p{white-space:pre-line}
@media(max-width:900px){.chapter-list p{margin-left:0;margin-right:0}}
.lyra-terminal{background:linear-gradient(120deg,#101c27,#070a10 72%);border-color:#a3d4e838}
.lyra-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:60px}.lyra-ident{font-size:13px;letter-spacing:.2em;color:#9ec4d3;margin:0 0 20px}.lyra-terminal .eyebrow{color:#a8d0df}
.lyra-description{font-size:16px;color:#aebdcc;line-height:1.9}.lyra-disclosure{font-size:13px;line-height:1.8;color:#8ca2b3;border-top:1px solid #8cb3c92b;padding-top:18px;margin-top:25px}
.lyra-console{border:1px solid #85b3d347;background:#080e16}.lyra-console-bar{display:flex;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #8cb3c92b;color:#c3deeb;font-size:13px;letter-spacing:.08em}
.lyra-log{height:350px;overflow-y:auto;overscroll-behavior:contain;padding:22px 20px;scrollbar-width:thin}
.lyra-message{margin:0 0 22px;font-size:16px;line-height:1.85;color:#d7e1e9;white-space:pre-line}.lyra-message strong{display:block;font-size:12px;font-weight:500;letter-spacing:.1em;color:#8dbed3;margin-bottom:8px}.lyra-message.is-user{color:#b6bfcc;border-left:1px solid #688396;padding-left:15px}.lyra-message a{display:block;font-size:13px;margin-top:10px;color:#d6bb88;text-decoration:underline}
.lyra-suggestions{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 16px}.lyra-suggestions button{background:#152432;border:1px solid #87b3ce33;padding:8px 10px;font-size:14px;color:#b9d2e1;min-height:40px}
.lyra-form{border-top:1px solid #8cb3c92b;display:flex;gap:12px;padding:16px 18px}.lyra-form input{background:#090f17;border:1px solid #7c9db84d;color:#eef5fa;padding:12px;min-width:0;flex:1;font:16px var(--sans)}.lyra-form button{background:#adc8d8;color:#101b24;padding:10px 18px;font-size:14px;min-height:44px}.lyra-spoilers{display:flex;align-items:center;gap:9px;font-size:14px;color:#9bafc2;padding:0 18px 16px}.lyra-spoilers input{width:18px;height:18px;accent-color:#9ccde4}
@media(max-width:1150px){.header nav{justify-content:flex-start;gap:25px!important}.story-index>span{display:none}.story-tabs{width:100%;justify-content:space-between}}
@media(max-width:700px){.story-index{top:12px;left:6%;right:6%;padding-bottom:8px}.story-tabs button{font-size:22px;gap:7px}.story-tabs button span{font-size:14px}.story-content,.horizon-copy{top:94px;bottom:66px;left:7%;width:86%;max-height:none;transform:none;padding:14px 8px 14px 0;background:linear-gradient(90deg,#060a11e6,#060a114d);border-radius:0}.story-content h2{font-size:30px;line-height:1.4}.story-content .eyebrow{font-size:12px;margin-bottom:10px}.story-content .story-description{font-size:16px;line-height:1.8}.story-content .story-quote{font-size:15px}.story-content .story-signature{font-size:12px;margin-bottom:12px}.story-bottom{left:7%;right:7%}.story-status{font-size:12px}.story-step{font-size:18px}.horizon-world{top:15%}.chapter-archive,.lyra-terminal{padding:65px 6%}.chapter-book-header{align-items:flex-start;flex-direction:column}.chapter-list{grid-template-columns:1fr}.lyra-layout{grid-template-columns:1fr;gap:28px}.lyra-log{height:320px}.lyra-form{gap:8px;padding:12px}.lyra-form button{padding:10px 14px}}
@media(max-width:600px){.hero .hero-actions{gap:12px}.hero .hero-actions :is(.button-gold,.trailer-button){width:258px;min-height:60px;padding:15px 21px}.hero .hero-visual video{object-position:70% center}.player-controls{padding:10px 12px}.player-actions label{margin-left:0}.player-actions{gap:8px}}
@media(prefers-reduced-motion:reduce){.hero .hero-actions :is(.button-gold,.trailer-button){transition:none}.hero .trailer-button::after{display:none}.hero .hero-actions :is(.button-gold,.trailer-button):hover{transform:none}.passage-engine{transform:translate(-50%,-60%)}.passage-engine img{filter:none}}

/* Keep the opening footage in the sticky scene, above the sky and below story art. */
.opening-film{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--opening-opacity,1)}
.opening-film video{display:block;width:100%;height:100%;object-fit:cover;object-position:65% 48%;filter:saturate(.9) brightness(.88)}
.raven-play{position:absolute;top:calc(var(--header-height) + 18px);right:6%;z-index:5;padding:10px 16px;border:1px solid #d5b67880;background:#080d16d9;color:#e8d3ab;font:14px var(--sans);min-height:44px;letter-spacing:.06em}
.raven-play[hidden]{display:none}
@media(max-width:600px){.opening-film video{object-position:50% center}}

/* One hierarchy for every archive: English label, Chinese title, then content. */
body .section-title{font:500 clamp(40px,5vw,68px)/1.3 var(--serif);letter-spacing:.075em;color:#eee5d4;margin:0;text-align:left}
body .section-title-en{display:block;font:500 clamp(16px,1.6vw,20px)/1.6 var(--sans);letter-spacing:.14em;color:var(--gold);margin:0 0 16px;text-align:left;overflow-wrap:normal}
body :is(.chronicle-heading,.explorer-heading,.boss-archive-heading){display:block}
body :is(.chronicle-intro,.civ-section-heading,.explorer-heading,.boss-archive-heading){margin-bottom:36px}
body .chronicle-intro{padding-bottom:28px}
body .chronicle-heading{margin:0}
body .chronicle-legend{margin-top:28px}
body .boss-archive-count{display:none}
body .chapter-selectors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:30px 0 28px;border-bottom:1px solid #bda77b55}
body .chapter-selectors button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:86px;padding:12px 4px;border:0;border-bottom:2px solid transparent;background:transparent;font:500 clamp(14px,1.5vw,18px)/1.5 var(--sans);letter-spacing:.03em;white-space:nowrap;color:#bab7ae}
body .chapter-selectors button[aria-pressed='true']{border-bottom-color:#d5b678;background:linear-gradient(0deg,#c5a56614,transparent);color:#ecd6a8}
.book-roman{font:400 24px/1 var(--latin);color:#b99b64}
body .chapter-book-header h3{font:500 clamp(28px,3vw,38px)/1.4 var(--serif)}
body .lyra-disclosure{border:0;padding:0;margin:18px 0 0;font-size:14px}
@media(max-width:700px){body :is(.chapter-archive,.lyra-terminal){padding-top:52px;padding-bottom:52px}body .chronicle-intro{padding-top:0}body .section-title-en{font-size:16px;letter-spacing:.09em}body .lyra-layout{gap:24px}body .chapter-book-header{gap:16px;margin-bottom:16px;padding-bottom:18px}}

/* All thirty chapter names share one three-column reading surface. */
#chapter-books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start}
#chapter-books .chapter-book{min-width:0;margin:0}
#chapter-books .chapter-book-header{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:115px;margin-bottom:8px;gap:14px;padding-bottom:16px}
body #chapter-books .chapter-book-header h3{font-size:clamp(22px,2.3vw,31px)}
#chapter-books .chapter-list details{padding:5px 0}
#chapter-books .chapter-list summary{min-height:46px;font-size:17px;gap:12px}
#chapter-books .chapter-number{font-size:22px;width:25px}
#chapter-books .chapter-list p{margin:12px 0 18px;font-size:15px}
.chapter-selectors{scroll-margin-top:calc(var(--header-height) + 14px)}
@media(max-width:760px){#chapter-books{grid-template-columns:1fr;gap:44px}#chapter-books .chapter-book-header{min-height:0}#chapter-books .chapter-list summary{font-size:18px}}