:root{color-scheme:dark;--bg:var(--dark-navy);--ink:var(--white);--muted:var(--light-slate);--story-accent:var(--accent);--fill:.58;--light:.65;--progress:0}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono-font);line-height:1.65}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--story-accent);outline-offset:6px}
.skip-link{position:fixed;top:-100px;left:20px;z-index:110;background:var(--bg);padding:12px}
.skip-link:focus{top:16px}
.chapter-nav{position:fixed;left:5vw;bottom:35px;z-index:4;width:38vw;display:flex;justify-content:space-between;gap:12px;background:#070707f5;padding:16px 0}
.chapter-nav a{display:flex;flex-direction:column;gap:4px;font-size:10px;color:var(--muted)}
.chapter-nav a>span:first-child{font-family:var(--mono-font);color:var(--light-slate)}
.chapter-nav a[aria-current]{color:var(--story-accent)}
.chapter-nav a:hover{color:var(--ink)}
.progress-track{height:2px;background:#ffffff16;position:absolute;bottom:0;left:0;right:0}
#shift-progress{background:var(--story-accent);height:100%;transform:scaleX(var(--progress));transform-origin:left}
.bar-scene{position:fixed;top:80px;right:0;width:50%;height:calc(100svh - 80px);overflow:hidden;background:linear-gradient(110deg,#0b1017,#111b28 60%,#0a0d12);border-left:1px solid #ffffff0b}
.ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,rgba(var(--accent-rgb),.25),transparent 70%);opacity:var(--light)}
.pendant{position:absolute;top:0;left:50%;height:15%;width:2px;background:#34465b}
.pendant:after{content:"";position:absolute;bottom:0;left:-50px;width:100px;height:25px;background:var(--accent);border-radius:80px 80px 5px 5px;box-shadow:0 20px 65px rgba(var(--accent-rgb),.3)}
.shelf{position:absolute;left:10%;right:10%;top:33%;height:54px;border-bottom:6px solid #27384b;display:flex;gap:16px;align-items:end;opacity:.3}
.shelf i{display:block;width:23px;height:55px;background:var(--accent);border-radius:8px 8px 0 0}
.shelf i:before{content:"";display:block;width:9px;height:16px;margin:-12px auto 0;background:inherit}
.shelf i:nth-child(2){height:40px;background:var(--accent-secondary)}
.shelf i:nth-child(3){margin-left:auto;height:48px}
.scene-caption{position:absolute;top:20%;left:10%;font:10px/1.8 var(--mono-font);letter-spacing:.2em;color:var(--lightest-slate);opacity:.7}
.glass-wrap{position:absolute;left:50%;bottom:20%;width:210px;height:260px;transform:translateX(-50%)}
.glass{position:absolute;inset:20px 15px 15px;border:2px solid #d7d7d775;border-top:3px solid #d7d7d799;border-bottom:9px solid #d7d7d75c;border-radius:8px 8px 30px 30px;overflow:hidden;background:linear-gradient(100deg,#ffffff13,transparent 40%,#ffffff0c);box-shadow:inset 8px 0 14px #ffffff08,15px 14px 40px #0003}
.liquid{position:absolute;inset:8px 0 0;background:linear-gradient(rgba(var(--accent-secondary-rgb),.8),#792342e6);transform:scaleY(var(--fill));transform-origin:bottom;border-top:3px solid #ed8cad}
.ice{position:absolute;width:63px;height:63px;border:1px solid #fff5;background:linear-gradient(135deg,#ffffff38,#fff1);border-radius:12px;transform:rotate(22deg)}
.ice-one{left:18px;bottom:30px}.ice-two{right:15px;bottom:85px;transform:rotate(-18deg)}
.glass-shine{position:absolute;left:12px;top:10px;bottom:15px;width:5px;background:#fff2;border-radius:10px}
.garnish{position:absolute;right:0;top:0;width:76px;height:76px;border:7px solid #c78536;border-radius:50%;background:repeating-conic-gradient(#eabb62 0deg 40deg,#f4d49b 41deg 45deg);transform:rotate(-20deg)}
.coaster{position:absolute;bottom:0;left:-12px;right:-12px;height:15px;border-radius:50%;background:rgba(var(--accent-rgb),.15);box-shadow:0 10px 20px #0007}
.counter{position:absolute;bottom:0;width:100%;height:20%;background:linear-gradient(#4a9eea33 0 3px,var(--dark-navy) 3px);z-index:0}
.scene-label{position:absolute;bottom:7%;left:10%;font:9px var(--mono-font);color:var(--light-slate);letter-spacing:.15em}
.chapters{width:50%;padding:0 6vw 0 5vw}
.chapter{min-height:100svh;padding:145px 0 135px;display:flex;flex-direction:column;justify-content:center;position:relative}
.eyebrow{font:10px/1.5 var(--mono-font);letter-spacing:.2em;color:var(--story-accent);margin:0 0 28px}
h1,h2{font-family:var(--heading-font);font-weight:400;line-height:1.15;letter-spacing:0;margin:0 0 28px}
h1{font-size:clamp(40px,5.2vw,80px)}h2{font-size:clamp(26px,3vw,46px)}
em{font-style:normal;font-weight:400;color:var(--story-accent)}
.lead{font-size:19px;line-height:1.5;margin:0 0 14px;max-width:400px}
.chapter-copy{color:var(--muted);font-size:15px;max-width:380px}
.draft-label{font:10px/1.6 var(--mono-font);color:var(--muted);border-left:2px solid var(--story-accent);padding-left:10px;margin:0 0 24px}
.story-note{margin-top:24px;border-top:1px solid #ffffff1c;padding-top:18px;max-width:410px;color:var(--muted)}
.story-note>span{font:9px var(--mono-font);letter-spacing:.12em;color:var(--story-accent)}
.story-note p{font-size:14px;line-height:1.8;margin:10px 0 0}
.next-chapter{margin-top:32px;font-size:12px;color:var(--story-accent)}
.next-chapter span{margin-left:20px}
.craft-details{display:flex;flex-wrap:wrap;gap:18px;margin-top:32px;font:9px var(--mono-font);color:var(--story-accent)}
.tickets{display:flex;gap:8px;margin:25px 0 10px}
.ticket{flex:1;min-width:0;background:var(--lightest-slate);color:var(--dark-navy);padding:16px 12px 20px;clip-path:polygon(0 0,100% 0,100% 95%,90% 100%,80% 95%,70% 100%,60% 95%,50% 100%,40% 95%,30% 100%,20% 95%,10% 100%,0 95%);transition:transform .7s,opacity .7s}
.ticket span{font:8px var(--mono-font)}.ticket strong{display:block;font-size:12px;line-height:1.5;margin:18px 0}
.ticket i{display:block;height:1px;background:#07070733;margin-top:8px}
.memory-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 0}
.memory{border:1px solid var(--border-gray);background:rgba(var(--accent-rgb),.04);padding:25px 16px;transition:transform .7s,opacity .7s}
.memory span{font:8px/1.8 var(--mono-font);color:var(--story-accent)}.memory p{font-family:var(--mono-font);font-size:14px;line-height:1.7;margin-bottom:0}
.motion-enabled .chapter:not(.is-visible) .ticket{opacity:.15;transform:translateY(35px) rotate(-5deg)}
.motion-enabled .chapter:not(.is-visible) .memory{opacity:.2;transform:translateY(22px)}
.ticket:nth-child(2),.memory:nth-child(2){transition-delay:.12s}.ticket:nth-child(3){transition-delay:.24s}
.return-link{align-self:flex-start;margin-top:35px;padding:14px 22px;border:1px solid var(--story-accent);color:var(--story-accent);font-size:12px}
.return-link:hover{background:var(--story-accent);color:var(--bg)}
.signature{margin-top:50px;font-size:12px}.signature span{display:block;font:9px var(--mono-font);color:var(--muted);margin-top:5px;letter-spacing:.14em}
@media(min-width:1500px){.chapters{padding-left:10vw}.chapter-nav{left:10vw;width:32vw}}
@media(max-width:768px){
 html{scroll-padding-top:90px}
 .bar-scene{top:84px;width:100%;height:34svh;border:0;border-bottom:1px solid #ffffff16;z-index:1}
 .pendant{left:25%;height:24%}.pendant:after{width:60px;left:-30px;height:16px}
 .shelf{top:40%;left:8%;right:8%;height:20px}.shelf i{height:24px;width:15px}.shelf i:nth-child(2){height:18px}.shelf i:nth-child(3){height:22px}
 .glass-wrap{transform:translateX(-50%) scale(.48);transform-origin:bottom center;bottom:16%}
 .counter{height:16%}.scene-caption{top:18%;left:7%;font-size:8px;max-width:110px}.scene-label{bottom:5%;left:7%;font-size:7px}
 .chapters{width:100%;padding:0 24px;margin-top:calc(84px + 34svh)}
 .chapter{min-height:85svh;padding:65px 0 105px;scroll-margin-top:34svh}
 h1{font-size:clamp(36px,9vw,60px)}h2{font-size:clamp(25px,6.5vw,38px)}.lead{font-size:18px}
 .chapter-nav{left:0;bottom:0;width:100%;padding:12px 24px  max(12px,env(safe-area-inset-bottom));border-top:1px solid #ffffff16;gap:8px}
 .chapter-nav a{font-size:9px}.progress-track{bottom:auto;top:0}
 .story-note{max-width:none}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*:before,*:after{transition:none!important;animation:none!important}
 .liquid{transform:scaleY(.65)}
 .ambient{opacity:.65}
 .motion-enabled .chapter:not(.is-visible) .ticket,.motion-enabled .chapter:not(.is-visible) .memory{opacity:1;transform:none}
}

/* Shared footer remains above the fixed illustration and chapter navigation. */
.footer{position:relative;z-index:6;background:var(--dark-navy)}
.next-chapter:hover,.chapter-nav a:hover{color:var(--accent-secondary)}
.return-link:hover{background:var(--accent-secondary);border-color:var(--accent-secondary)}
@media(max-width:768px){.footer{padding-bottom:100px}.scene-caption{left:55%;max-width:150px}.chapter-copy,.story-note{max-width:100%}}