:root{
  --bg:#070707;--cream:#e6d1af;--orange:#d55a0b;--red:#8f1118;--muted:#9c8e7d;
  --line:rgba(230,209,175,.18);--side:110px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#f4eee5;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-4;background:radial-gradient(circle at 70% 15%,rgba(213,90,11,.15),transparent 28%),#070707}
a{color:inherit;text-decoration:none}button{font:inherit}.boot{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#050505;transition:opacity .9s,visibility .9s}.boot.hidden{opacity:0;visibility:hidden}.boot-mark{font-family:Georgia,serif;font-size:clamp(2rem,7vw,6rem);letter-spacing:.22em;color:var(--cream);animation:bootGlow 2s ease-in-out infinite alternate}.boot p{font-size:.65rem;letter-spacing:.35em;color:var(--muted)}.boot-line{width:min(440px,70vw);height:2px;background:#2d241d;margin:28px 0;overflow:hidden}.boot-line span{display:block;height:100%;width:0;background:var(--orange);animation:load 2.4s cubic-bezier(.2,.8,.2,1) forwards}@keyframes load{to{width:100%}}@keyframes bootGlow{to{text-shadow:0 0 35px #d55a0b88}}
.boot-grain{position:absolute;inset:0;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#particles{position:fixed;inset:0;z-index:2;pointer-events:none}.page-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:100}.page-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),#ffc079);box-shadow:0 0 15px var(--orange)}
.cursor-light{position:fixed;z-index:-1;width:540px;height:540px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(213,90,11,.12),transparent 68%);transform:translate(-50%,-50%)}
.side-nav{position:fixed;left:0;top:0;bottom:0;width:var(--side);z-index:50;border-right:1px solid var(--line);background:#080808d9;backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;padding:28px 0}.side-logo{display:grid;place-items:center;width:50px;height:50px;border:1px solid var(--orange);font-family:Georgia,serif;font-weight:900;color:var(--orange)}.side-nav nav{display:flex;flex-direction:column;gap:34px;margin:auto 0}.side-nav nav a{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.62rem;letter-spacing:.2em;color:#756b61;transition:.3s}.side-nav nav a span{color:var(--orange);margin-bottom:8px}.side-nav nav a:hover,.side-nav nav a.active{color:#fff}.side-bottom{font-size:.55rem;letter-spacing:.2em;color:#665d54;text-align:center}
.mobile-menu{display:none;position:fixed;right:18px;top:18px;z-index:80;background:#090909c9;color:#fff;border:1px solid var(--line);width:45px;height:45px}
main,footer{margin-left:var(--side)}.panel{min-height:100vh;position:relative;overflow:hidden}.hero{display:flex;align-items:center}.hero-bg{position:absolute;inset:-5%;background:url("images/alter-hut.jpg") 57% 48%/cover no-repeat;animation:heroDrift 24s ease-in-out infinite alternate;will-change:transform}.hero-atmosphere{position:absolute;inset:0;background:linear-gradient(90deg,#000e 0,#000b 38%,transparent 71%),linear-gradient(0deg,#070707 0,transparent 43%),linear-gradient(180deg,#0008,transparent 25%)}@keyframes heroDrift{to{transform:scale(1.08) translate3d(-1.5%,.5%,0)}}.hero-content{position:relative;z-index:3;margin-left:max(7vw,70px);max-width:820px}.eyebrow{font-size:.68rem;letter-spacing:.27em;color:var(--orange);font-weight:900}.hero h1{font-family:Impact,Haettenschweiler,sans-serif;font-size:clamp(6.2rem,14vw,14rem);line-height:.68;letter-spacing:-.04em;margin:38px 0 45px}.hero h1 span{display:block;background:linear-gradient(105deg,#fff 12%,#d2ae7e 42%,#fff 66%);background-size:220%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 9s linear infinite}.hero h1 span:last-child{color:var(--orange);background:none;-webkit-text-fill-color:var(--orange)}@keyframes shine{to{background-position:220% center}}.hero-tagline{letter-spacing:.18em;font-size:.82rem;color:#d2c4b2}.hero-cta{display:inline-flex;align-items:center;gap:13px;margin-top:31px;font-size:.72rem;letter-spacing:.18em;font-weight:900}.hero-cta i{display:block;width:54px;height:2px;background:var(--orange);transition:.35s}.hero-cta:hover i{width:90px}.hero-quote{position:absolute;z-index:3;right:4vw;bottom:72px;font-family:Georgia,serif;font-style:italic;color:#d6c0a0}.scroll-note{position:absolute;right:3vw;top:45%;z-index:3;writing-mode:vertical-rl;font-size:.58rem;letter-spacing:.22em;color:#817466}.scroll-note b{color:var(--orange);margin-top:10px}
.section-head{display:flex;gap:35px;align-items:flex-start;max-width:1200px;margin:0 auto 55px;padding:0 6vw}.section-no{font-family:Georgia,serif;color:var(--orange);font-size:1.1rem}.section-head h2,.story h2{font-family:Impact,Haettenschweiler,sans-serif;font-size:clamp(4rem,8vw,8rem);line-height:.82;margin:12px 0}.songs{padding:105px 0 80px;background:#080808}.record-stage{position:relative;min-height:720px}.record-backdrop{position:absolute;inset:0;background-position:center;background-size:cover;opacity:.14;filter:blur(35px) saturate(1.3);transform:scale(1.12);transition:background-image .8s,opacity .8s}.record-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080808 0,transparent 50%,#080808 100%),linear-gradient(0deg,#080808,transparent 40%,#080808)}.record-list{position:relative;z-index:3;display:flex;gap:28px;overflow-x:auto;overflow-y:hidden;padding:45px max(7vw,32px) 70px;scroll-snap-type:x proximity;scroll-padding-inline:max(7vw,32px);scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}.record-list::-webkit-scrollbar{display:none}.record{flex:0 0 min(360px,72vw);scroll-snap-align:center;cursor:pointer;transition:.5s cubic-bezier(.2,.8,.2,1);opacity:.54}.record.active{opacity:1;transform:translateY(-22px)}.record-cover{position:relative;aspect-ratio:1;box-shadow:0 32px 80px #000}.record-cover:before{content:"";position:absolute;width:92%;height:92%;right:4%;top:4%;border-radius:50%;background:repeating-radial-gradient(circle,#171717 0 3px,#0b0b0b 4px 7px);z-index:-1;transform:translateX(20%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}.record.active .record-cover:before{transform:translateX(42%);animation:spin 7s linear infinite}.record-cover:after{content:"";position:absolute;inset:0;border:1px solid #ffffff25;box-shadow:inset 0 0 50px #0005}.record-cover img{width:100%;height:100%;object-fit:cover;display:block}.record-info{padding-top:20px}.record-info span{font-size:.6rem;letter-spacing:.2em;color:var(--orange);font-weight:900}.record-info h3{font-family:Impact,sans-serif;font-size:2.1rem;line-height:.9;margin:8px 0}.record-info p{color:var(--muted);font-size:.88rem}@keyframes spin{to{transform:rotate(360deg)}}.now-playing{position:relative;z-index:3;max-width:980px;margin:auto;padding:28px 35px;border-block:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10px}.now-playing>p{grid-column:1/-1;font-size:.6rem;letter-spacing:.22em;color:var(--orange)}.now-playing strong{font-family:Impact,sans-serif;font-size:2.4rem}.now-playing>span{align-self:center;color:var(--muted);text-align:right;font-size:.65rem;letter-spacing:.16em}.main-player{grid-column:1/-1;display:grid;grid-template-columns:50px 1fr auto;gap:15px;align-items:center;margin-top:14px}.main-player button{width:50px;height:50px;border-radius:50%;background:#0b0b0b;border:1px solid #75513b;color:#fff;cursor:pointer}.main-player button:hover,.main-player button.playing{background:var(--orange)}.track{height:5px;background:#302820;cursor:pointer}.track div{height:100%;width:0;background:linear-gradient(90deg,var(--orange),#ffc179)}.main-player time{font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums}
.story{display:grid;grid-template-columns:1fr 1fr;background:#0b0b0b}.story-image{min-height:100vh;background:url("images/sunset.png") center/cover no-repeat;position:relative}.story-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#0b0b0b)}.story-copy{align-self:center;padding:80px 7vw}.story h2 em{color:var(--orange);font-style:normal}.story-copy>p{color:var(--muted);max-width:630px}.story blockquote{border-left:3px solid var(--orange);margin:35px 0;padding-left:22px;font-family:Georgia,serif;font-size:1.45rem;color:var(--cream)}
.world{padding:110px 0 50px;background:radial-gradient(circle at 70% 15%,#351005,transparent 27%),#070707}.world-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.world-grid article{background:#0d0d0d;padding:45px;min-height:280px;transition:.45s}.world-grid article:hover{background:#180f0b;transform:scale(.985)}.world-grid span{font-family:Impact,sans-serif;font-size:clamp(2.5rem,5vw,5.2rem);color:var(--cream)}.world-grid p{color:var(--muted);max-width:420px}.final-statement{text-align:center;padding:140px 24px}.final-statement small{display:block;letter-spacing:.3em;color:var(--orange)}.final-statement strong{display:block;font-family:Impact,sans-serif;font-size:clamp(5rem,13vw,13rem);line-height:.85}
footer{border-top:1px solid var(--line);padding:28px 5vw;display:flex;gap:28px;justify-content:flex-end;color:#71665c;font-size:.62rem;letter-spacing:.16em}footer span{margin-right:auto}
.reveal{opacity:0;transform:translateY(45px);transition:1s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;transform:none}
body[data-mood="fire"]{--orange:#ec4415}body[data-mood="sea"]{--orange:#ba8b52}body[data-mood="mountain"]{--orange:#bd1d22}body[data-mood="pulse"]{--orange:#f18a16}body[data-mood="red"]{--orange:#c5161e}
@media(max-width:800px){:root{--side:0px}.side-nav{transform:translateX(-100%);width:230px;transition:.35s}.side-nav.open{transform:none}.side-nav nav a{writing-mode:horizontal-tb;transform:none}.mobile-menu{display:block}main,footer{margin-left:0}.hero-content{margin:0 24px}.hero h1{font-size:6.1rem}.hero-bg{background-position:62% center}.hero-atmosphere{background:linear-gradient(0deg,#070707 0,#0008 70%,#0008)}.hero-quote,.scroll-note{display:none}.story{grid-template-columns:1fr}.story-image{min-height:620px}.story-image:after{background:linear-gradient(0deg,#0b0b0b,transparent)}.world-grid{grid-template-columns:1fr}.now-playing{margin:0 20px}.cursor-light{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}


/* V4.1 – stable horizontal carousel and mobile refinement */
.record-list::after{
  content:"";
  flex:0 0 clamp(28px,10vw,150px);
}
.record{
  touch-action:pan-x pan-y;
  -webkit-tap-highlight-color:transparent;
}
.record-cover{
  isolation:isolate;
}
.record-cover:before{
  pointer-events:none;
}
.record-list.is-dragging{
  scroll-snap-type:none;
  cursor:grabbing;
}
.record-list{
  cursor:grab;
}
.record-list:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:-4px;
}

@media(max-width:800px){
  .boot-mark{
    font-size:clamp(1.6rem,8vw,3.2rem);
    letter-spacing:.14em;
    text-align:center;
  }
  .boot p{
    letter-spacing:.2em;
  }
  .mobile-menu{
    display:grid;
    place-items:center;
    border-radius:50%;
    backdrop-filter:blur(12px);
    font-size:1.1rem;
  }
  .side-nav{
    width:min(82vw,310px);
    align-items:flex-start;
    padding:26px;
    box-shadow:35px 0 90px #000b;
  }
  .side-logo{
    flex:0 0 auto;
  }
  .side-nav nav{
    width:100%;
    margin:auto 0;
    gap:10px;
  }
  .side-nav nav a{
    width:100%;
    padding:15px 4px;
    border-bottom:1px solid var(--line);
    font-size:.75rem;
  }
  .side-bottom{
    text-align:left;
  }
  .hero{
    min-height:100svh;
  }
  .hero-content{
    width:calc(100% - 42px);
    margin:0 21px;
    padding-top:80px;
    padding-bottom:54px;
    align-self:flex-end;
  }
  .hero h1{
    font-size:clamp(5rem,25vw,7.3rem);
    margin:26px 0 31px;
  }
  .hero-tagline{
    max-width:280px;
    line-height:1.75;
  }
  .hero-cta{
    margin-top:25px;
  }
  .section-head{
    gap:18px;
    padding:0 22px;
    margin-bottom:28px;
  }
  .section-head h2,.story h2{
    font-size:clamp(3.35rem,17vw,5.4rem);
  }
  .songs{
    padding-top:82px;
  }
  .record-stage{
    min-height:auto;
  }
  .record-list{
    gap:18px;
    padding:28px 9vw 48px;
    scroll-padding-inline:9vw;
  }
  .record-list::after{
    flex-basis:9vw;
  }
  .record{
    flex-basis:82vw;
    opacity:.62;
  }
  .record.active{
    transform:translateY(-8px);
  }
  .record-cover:before{
    width:88%;
    height:88%;
    top:6%;
    transform:translateX(17%);
  }
  .record.active .record-cover:before{
    transform:translateX(25%);
  }
  .record-info{
    padding-right:8px;
  }
  .record-info h3{
    font-size:clamp(2rem,10vw,3rem);
  }
  .record-info p{
    max-width:90%;
  }
  .now-playing{
    grid-template-columns:1fr;
    gap:6px;
    margin:0 18px;
    padding:23px 4px;
  }
  .now-playing>p,
  .now-playing strong,
  .now-playing>span,
  .main-player{
    grid-column:1;
  }
  .now-playing>span{
    text-align:left;
    margin-top:2px;
  }
  .now-playing strong{
    font-size:clamp(1.9rem,9vw,2.7rem);
    line-height:.95;
  }
  .main-player{
    grid-template-columns:48px 1fr;
    margin-top:18px;
  }
  .main-player time{
    grid-column:2;
    text-align:right;
    margin-top:-5px;
  }
  .story-copy{
    padding:65px 24px 85px;
  }
  .story blockquote{
    font-size:1.2rem;
  }
  .world{
    padding-top:82px;
  }
  .world-grid{
    margin:0 18px;
  }
  .world-grid article{
    min-height:220px;
    padding:31px 25px;
  }
  .final-statement{
    padding:110px 15px;
  }
  .final-statement strong{
    font-size:clamp(5rem,26vw,8rem);
    overflow-wrap:anywhere;
  }
  footer{
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:16px 22px;
    padding:26px 20px;
  }
  footer span{
    flex-basis:100%;
  }
}

@media(max-width:380px){
  .hero h1{
    font-size:4.5rem;
  }
  .record{
    flex-basis:86vw;
  }
  .main-player{
    grid-template-columns:44px 1fr;
  }
  .main-player button{
    width:44px;
    height:44px;
  }
}
\n\n/* V4.2 – mobile story separation */\n@media(max-width:800px){\n  .story{\n    display:block;\n    min-height:auto;\n    overflow:visible;\n    background:#0b0b0b;\n  }\n  .story-image{\n    display:block;\n    width:100%;\n    min-height:0;\n    height:68svh;\n    max-height:720px;\n    background-position:center 38%;\n    transform:none!important;\n  }\n  .story-image:after{\n    background:linear-gradient(0deg,#0b0b0b 0%,rgba(11,11,11,.84) 10%,transparent 38%);\n  }\n  .story-copy{\n    position:relative;\n    z-index:4;\n    margin-top:0;\n    padding:52px 24px 88px;\n    background:#0b0b0b;\n    overflow:visible;\n  }\n  .story-copy .section-no{\n    display:block;\n    margin-bottom:18px;\n  }\n  .story h2{\n    max-width:100%;\n    margin:14px 0 28px;\n    font-size:clamp(3.25rem,15.5vw,5rem);\n    line-height:.88;\n    letter-spacing:-.025em;\n    overflow:visible;\n    overflow-wrap:normal;\n    word-break:normal;\n  }\n  .story-copy>p{\n    font-size:1.03rem;\n    line-height:1.55;\n    color:#b5a28c;\n  }\n  .story blockquote{\n    margin-top:38px;\n    padding:2px 0 2px 20px;\n    font-size:clamp(1.16rem,5.4vw,1.42rem);\n    line-height:1.35;\n  }\n}\n\n@media(max-width:380px){\n  .story-image{height:61svh}\n  .story h2{font-size:3.1rem}\n  .story-copy{padding-inline:20px}\n}\n

/* V5.1 – desktop click/drag separation */
.record-list{
  user-select:none;
}
.record-list:not(.is-dragging) .record{
  cursor:pointer;
}
.record-list.is-dragging .record{
  pointer-events:none;
}
.record-list img{
  -webkit-user-drag:none;
  user-drag:none;
}