/* Focused refinements: a full era index, a luminous threshold, and brush lettering. */
.gate .gate-heading { top:16%; width:48%; }
.gate h1.calligraphy-title { position:relative; height:clamp(125px,12vw,195px); line-height:1.3; }
.calligraphy-title img { display:none; width:100%; height:auto; position:absolute; left:0; top:50%; transform:translateY(-50%); filter:saturate(.65) drop-shadow(0 3px 12px #071b2b55); }
.calligraphy-title.art-ready img { display:block; }
.calligraphy-title.art-ready .title-fallback { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); }
#enter.light-entry { width:184px; height:122px; display:flex; flex-direction:column; gap:9px; justify-content:center; align-items:center; background:radial-gradient(ellipse,#123c37b8,transparent 70%); color:#ffedc2; text-shadow:0 0 14px #e6bd6760,0 2px 4px #081c22; }
#enter.light-entry:before { inset:4px 0 8px; border-width:1.5px; border-color:#e5bf8999; border-top-color:#fff0c3; border-right-color:#f4d69d44; box-shadow:0 0 20px #eec48125,inset 0 0 24px #e0b86818; }
#enter.light-entry:after { left:32px; top:14px; width:6px; height:6px; box-shadow:0 0 14px 5px #ffe2a77c; }
#enter.light-entry span { margin:0; font:27px/1.2 var(--display); letter-spacing:.12em; }
#enter.light-entry small { font:10px/1.3 var(--serif); letter-spacing:.15em; color:#e6ca9e; }
#enter.light-entry i { display:inline-block; font-style:normal; margin-left:9px; color:#fff0c3; transition:transform .35s; }
#enter.light-entry:hover i { transform:translate(3px,-3px); }
/* Fit the controls inside the viewport, with daylight between the index and page edge. */
.story { min-height:660px!important; }
.story .story-intro { top:22px; }
.story .scroll-chapter-label { top:92px; }
.story .scroll-rail { top:117px; height:calc(100% - 331px); }
.story .scroll-world { min-height:0; height:100%; }
.story .scroll-footer { bottom:53px; min-height:0; height:154px; padding:15px 4.5% 12px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:44px 1fr; align-items:center; gap:7px 20px; }
.story .current-period { grid-column:1; grid-row:1; text-align:left; justify-self:start; }
.story .current-period strong { font-size:21px; }
.story .scroll-control { grid-column:2; grid-row:1; justify-self:end; margin:0; }
.story .era-nav { grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:9px; overflow:visible; width:100%; padding-top:10px; align-items:stretch; }
.story .era-nav button { white-space:normal; min-height:44px; padding:7px 1px; font:13px/1.65 var(--serif); letter-spacing:.015em; border-bottom:1px solid transparent; }
.story .era-nav [aria-current=true] { border-bottom-color:#e2bf7c; color:#fff0c8; background:radial-gradient(ellipse at 50% 100%,#bd935424,transparent 70%); }
.story .story-caption { height:37px; padding-top:9px; }
.theatre .style-note { border-top:1px solid #a9855840; padding-top:10px; font:10px/1.8 var(--serif); color:#8b6d49; }
@media(min-width:1001px) {
 .theatre .mechanism-stage { left:16%; right:27%; top:0; bottom:185px; }
}
@media(max-width:1000px) {
 .gate .gate-heading { width:84%; top:17%; }
 .gate h1.calligraphy-title { height:clamp(105px,17vw,160px); max-width:560px; }
 .story { min-height:710px!important; }
 .story .story-intro { top:20px; }
 .story .scroll-chapter-label { top:110px; }
 .story .scroll-rail { top:138px; height:calc(100% - 415px); }
 .story .scroll-footer { bottom:70px; height:200px; padding:10px 5% 12px; grid-template-columns:1fr; grid-template-rows:29px 34px 1fr; gap:5px; }
 .story .current-period { grid-column:1; grid-row:1; justify-self:center; text-align:center; }
 .story .current-period strong { font-size:20px; }
 .story .scroll-control { grid-column:1; grid-row:2; justify-self:center; gap:12px; }
 .story .era-nav { grid-row:3; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 8px; padding-top:5px; }
 .story .era-nav button { min-height:44px; font-size:11px; padding:4px 0; }
 .story .story-caption { height:47px; }
 .story .memory-node button { padding-top:15px; padding-bottom:15px; }
 .story .memory-node .memory-dot { top:calc(263px - var(--lift)); }
 .story .history-thread { top:64%; }
}
@media(max-width:600px) {
 .gate h1.calligraphy-title { width:100%; height:106px; }
 #enter.light-entry { width:178px; height:122px; }
 #enter.light-entry span { font-size:26px; }
 .story .memory-node button { padding-inline:21px; max-width:275px; gap:7px; }
 .story .memory-node h2 { font-size:22px; }
 .story .memory-node p.history-summary { font-size:11px; line-height:1.85; }
}
@media(prefers-reduced-motion:reduce) {
 #enter.light-entry i { transition:none; }
}