:root{
  --sand:#ECE1CE; --sand2:#D8C7AB; --ink:#1C140C; --ink2:#2A1F14;
  --mut:#B9A488; --ochre:#C88A3A; --gold:#E4AC57;
  --line:rgba(236,225,206,.18); --line2:rgba(236,225,206,.34);
  --fd:'Gilda Display',Georgia,serif; --ft:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--sand);font-family:var(--ft);font-weight:300;-webkit-font-smoothing:antialiased;overflow:hidden}
img{display:block;max-width:100%}
.fd{font-family:var(--fd)}
.ey{font-family:var(--ft);font-weight:600;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}

/* top bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:26px 42px}
.logo{font-family:var(--fd);font-size:26px;letter-spacing:.16em;color:var(--sand)}
.bar .r{display:flex;align-items:center;gap:26px}
.bar .r .hint{font-family:var(--ft);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(236,225,206,.6)}
.bar .nbtn{font-family:var(--ft);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:11px 20px;border-radius:2px;text-decoration:none;transition:.2s}
.bar .nbtn:hover{background:var(--sand)}
@media(max-width:700px){.bar{padding:18px 22px}.bar .r .hint{display:none}}

/* horizontal stage */
.stage{display:flex;height:100vh;width:100vw;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab}
.stage::-webkit-scrollbar{display:none}
.stage.drag{cursor:grabbing}
.chapter{position:relative;flex:0 0 100vw;height:100vh;scroll-snap-align:start;overflow:hidden;display:flex;align-items:flex-end}
.chapter .cimg{position:absolute;inset:0;background:#1c140c center/cover}
.chapter .cimg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,14,8,.82),rgba(20,14,8,.25) 45%,rgba(20,14,8,.55)),linear-gradient(0deg,rgba(20,14,8,.7),transparent 45%)}
.chapter .cin{position:relative;z-index:2;padding:0 42px 13vh;max-width:760px}
.chapter .ci-n{font-family:var(--ft);font-weight:600;font-size:11px;letter-spacing:.2em;color:var(--gold);margin-bottom:16px}
.chapter h1{font-family:var(--fd);font-weight:400;font-size:clamp(2.8rem,6.5vw,6rem);line-height:1;letter-spacing:.005em;margin-bottom:20px}
.chapter h1 em{font-style:italic;color:var(--gold)}
.chapter p{font-size:1.12rem;font-weight:300;color:rgba(236,225,206,.9);max-width:44ch;margin-bottom:26px}
.chapter .meta{display:flex;gap:34px;flex-wrap:wrap;margin-top:8px}
.chapter .meta .m .v{font-family:var(--fd);font-size:1.7rem;color:var(--sand);line-height:1}
.chapter .meta .m .k{font-family:var(--ft);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-top:6px}
.chapter .lnk{font-family:var(--ft);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:7px;display:inline-block}
.chapter form{display:flex;gap:0;max-width:440px;border-bottom:1px solid var(--line2);margin-top:4px}
.chapter form input{flex:1;background:transparent;border:none;color:var(--sand);font-family:var(--ft);font-size:15px;padding:13px 4px}
.chapter form input:focus{outline:none}.chapter form input::placeholder{color:rgba(236,225,206,.55)}
.chapter form button{background:transparent;border:none;color:var(--gold);font-family:var(--ft);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:0 8px}
@media(max-width:700px){.chapter .cin{padding:0 22px 16vh}}

/* progress / chapter nav (fixed) */
.hud{position:fixed;bottom:5vh;left:42px;right:42px;z-index:50;display:flex;align-items:center;gap:24px}
.hud .labels{display:flex;gap:26px;flex:1}
.hud .labels button{font-family:var(--ft);font-weight:500;font-size:12px;letter-spacing:.04em;color:rgba(236,225,206,.5);background:none;border:none;cursor:pointer;transition:color .3s;padding:0;position:relative}
.hud .labels button.on{color:var(--sand)}
.hud .labels button.on::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--gold)}
.hud .track{width:min(220px,30vw);height:1px;background:rgba(236,225,206,.2);position:relative}
.hud .track i{position:absolute;top:-.5px;height:2px;background:var(--gold);width:0;left:0;transition:width .15s linear}
.hud .count{font-family:var(--fd);font-size:1.1rem;color:var(--sand);white-space:nowrap}
.hud .count b{color:var(--gold);font-weight:400}
@media(max-width:760px){.hud{left:22px;right:22px;bottom:4vh;gap:14px}.hud .labels{display:none}.hud .track{width:auto;flex:1}}