@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@500;700&family=Inter:wght@400;600&display=swap');
:root{--black:#090909;--paper:#f1eee6;--pink:#f22993;--teal:#16b9b0;--orange:#f15a24;--blue:#3155c6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--paper);font-family:Inter,Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}
.password-gate{display:none;position:fixed;z-index:1000;inset:0;place-items:center;padding:24px;background:rgba(9,9,9,.26)}
.site-locked{overflow:hidden}
.site-locked .password-gate{display:grid}
.site-locked body>header,.site-locked body>main,.site-locked body>footer{filter:blur(22px);transform:scale(1.015);pointer-events:none;user-select:none}
.password-card{width:min(430px,100%);padding:38px 34px 32px;border:1px solid rgba(241,238,230,.3);background:rgba(9,9,9,.9);box-shadow:0 30px 80px rgba(0,0,0,.55);backdrop-filter:blur(14px)}
.password-logo{display:block;width:min(260px,85%);height:auto;margin:0 auto 34px}
.password-card h1{width:auto;max-width:none;margin:0 0 34px;padding:0;color:var(--paper);font:400 clamp(30px,5vw,48px)/.92 'Archivo Black',Impact,sans-serif;letter-spacing:-.045em;text-align:center}
.password-card label{display:block;margin-bottom:9px;color:var(--teal);font:700 11px/1 'IBM Plex Mono',monospace;letter-spacing:.08em}
.password-field{display:grid;grid-template-columns:1fr auto;border-bottom:2px solid var(--pink)}
.password-field input{min-width:0;padding:13px 4px;border:0;outline:0;background:transparent;color:var(--paper);font:700 20px 'IBM Plex Mono',monospace}
.password-field button{padding:0 4px 0 18px;border:0;background:transparent;color:var(--pink);cursor:pointer;font:700 12px 'IBM Plex Mono',monospace}
.password-field button:hover,.password-field button:focus-visible{color:var(--teal)}
.password-error{min-height:16px;margin:12px 0 0;color:var(--orange);font:700 11px 'IBM Plex Mono',monospace;text-align:center}
.password-card.has-error{animation:password-shake .32s ease}
@keyframes password-shake{25%{translate:-7px 0}50%{translate:6px 0}75%{translate:-3px 0}}
@media(max-width:500px){.password-card{padding:30px 22px 25px}.password-logo{width:min(230px,82%);margin-bottom:28px}.password-card h1{font-size:34px;margin-bottom:30px}}
header{position:fixed;z-index:100;top:0;left:0;right:0;height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 3vw;border-bottom:1px solid rgba(255,255,255,.2);background:rgba(9,9,9,.76);backdrop-filter:blur(12px)}.wordmark{display:block;height:42px;width:auto;line-height:0}.wordmark img{display:block;width:auto;height:100%;max-width:160px;object-fit:contain}nav{display:flex;gap:34px;font:700 12px 'IBM Plex Mono';text-transform:uppercase}nav a:hover{color:var(--pink)}.ig{justify-self:end;font:12px 'IBM Plex Mono';color:var(--teal)}
.chapter{position:relative;min-height:100svh;overflow:hidden;border-bottom:8px solid var(--pink)}.chapter-copy{position:relative;z-index:3}h1,h2{font-family:'Archivo Black',Impact,sans-serif;font-size:clamp(94px,18vw,290px);line-height:.78;letter-spacing:-.075em;margin:34px 0 0;padding-right:.14em}.statement{font-size:clamp(18px,2vw,30px);line-height:1.25;margin:45px 0 0}.scene{position:absolute;width:100%;height:100%;inset:0;object-fit:cover}
.malibu{display:grid;grid-template-columns:47% 53%;padding-top:72px;background:#050505}.malibu .chapter-copy{grid-column:1;padding:8vh 3vw}.malibu .scene{position:absolute;inset:0 0 0 auto;width:53%;height:100%;object-fit:cover;object-position:center 64%}.malibu h1,.malibu h2{font-size:clamp(82px,12vw,205px);margin-left:-.03em}
.history{background:var(--paper);color:#090909;padding:13vh 4vw 8vh;border-bottom-color:var(--orange)}.history .chapter-copy{max-width:90%}.history h2{color:var(--blue)}.history .statement{font-family:'Archivo Black';font-size:clamp(28px,4vw,64px);line-height:.98;max-width:870px}.history-note{position:absolute;z-index:2;right:5vw;top:16vh;width:min(32vw,470px);font-size:18px;line-height:1.55}.history-note strong{font:700 13px 'IBM Plex Mono';color:var(--pink)}
.now{background:var(--blue);display:grid;grid-template-columns:50% 50%;padding-top:72px;border-bottom-color:var(--teal)}.now .scene{position:absolute;inset:0 auto 0 0;width:50%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}.now .chapter-copy{grid-column:2;padding:9vh 4vw}.now h1,.now h2{color:var(--paper);font-size:clamp(84px,14vw,230px)}.now .statement{font-family:'Archivo Black';color:var(--pink);font-size:clamp(30px,4vw,68px);line-height:.95}.now-note{position:absolute;z-index:3;right:4vw;bottom:6vh;max-width:480px;font-size:18px;line-height:1.5}
.scene-slideshow{overflow:hidden;background:#111}
.scene-slideshow .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease;pointer-events:none}
.scene-slideshow .slide.is-active{opacity:1}
.scene-slideshow .slide:nth-child(1){object-position:center center}
.scene-slideshow .slide:nth-child(2){object-position:54% center}
.scene-slideshow .slide:nth-child(3){object-position:center center}
.scene-slideshow .slide:nth-child(4){object-position:center center}
.scene-slideshow .slide:nth-child(5){object-position:center center}
.scene-slideshow .slide:nth-child(6){object-position:center center}
.malibu .scene-slideshow .slide:nth-child(1){object-position:center 64%}
.slideshow-nav{position:absolute;z-index:5;left:28px;bottom:26px;display:flex;gap:8px}
.slideshow-nav button{width:34px;height:2px;margin:0;padding:0;border:0;background:rgba(241,238,230,.5);cursor:pointer;transition:width .35s ease,background .35s ease}
.slideshow-nav button:nth-child(1).is-active{width:52px;background:var(--pink)}
.slideshow-nav button:nth-child(2).is-active{width:52px;background:var(--teal)}
.slideshow-nav button:nth-child(3).is-active{width:52px;background:var(--orange)}
.slideshow-nav button:nth-child(4).is-active{width:52px;background:var(--blue)}
.slideshow-nav button:nth-child(5).is-active{width:52px;background:var(--pink)}
.slideshow-nav button:nth-child(6).is-active{width:52px;background:var(--teal)}
.float-object{position:absolute;z-index:12;margin:0;cursor:grab;user-select:none;touch-action:none;filter:drop-shadow(0 18px 14px rgba(0,0,0,.36));transition:filter .18s ease;will-change:translate}.float-object:active{cursor:grabbing;filter:drop-shadow(0 30px 24px rgba(0,0,0,.48))}.float-object img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.float-object figcaption{display:table;margin:8px auto 0;padding:7px 10px;color:#050505;font:700 11px 'IBM Plex Mono';white-space:nowrap}
.shape-vinyl{width:clamp(150px,17vw,270px);aspect-ratio:1;left:38%;bottom:7%;transform:rotate(8deg)}.shape-vinyl img{border-radius:50%;transform:scale(1.1)}.shape-vinyl figcaption{background:var(--teal)}.shape-photo{width:clamp(145px,15vw,235px);right:3%;top:17%;transform:rotate(7deg)}.shape-photo img{clip-path:ellipse(44% 49% at 50% 50%)}.shape-photo figcaption{background:var(--orange)}
.shape-pass{width:clamp(155px,17vw,270px);left:5%;bottom:5%;transform:rotate(-7deg);mix-blend-mode:multiply}.shape-pass img{clip-path:polygon(4% 3%,96% 5%,98% 96%,3% 98%)}.shape-pass figcaption{background:var(--orange)}.shape-paper{width:clamp(250px,29vw,460px);right:7%;bottom:4%;transform:rotate(4deg)}.shape-paper img{clip-path:polygon(2% 3%,97% 0,99% 95%,4% 100%)}.shape-paper figcaption{background:var(--blue);color:var(--paper)}.shape-frame{width:clamp(190px,21vw,330px);left:49%;top:14%;transform:rotate(-5deg)}.shape-frame img{clip-path:polygon(50% 0,96% 58%,62% 100%,21% 44%)}.shape-frame figcaption{background:var(--pink)}
.shape-locals{width:clamp(145px,17vw,260px);right:4%;top:16%;transform:rotate(8deg);mix-blend-mode:multiply}.shape-locals img{clip-path:polygon(3% 5%,96% 2%,99% 96%,4% 100%)}.shape-locals figcaption{background:var(--pink)}.shape-board{width:clamp(140px,16vw,245px);left:43%;bottom:3%;transform:rotate(-10deg)}.shape-board img{clip-path:polygon(35% 1%,65% 1%,73% 5%,78% 18%,85% 82%,78% 96%,65% 100%,35% 100%,22% 96%,15% 82%,22% 18%,27% 5%)}.shape-board figcaption{background:var(--teal)}
.drag-note{position:fixed;z-index:90;right:18px;bottom:18px;padding:10px 12px;background:var(--pink);color:#000;font:700 11px 'IBM Plex Mono';transform:rotate(-2deg)}footer{height:72px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between;font:10px 'IBM Plex Mono';color:#888}
@media(max-width:800px){header{grid-template-columns:1fr auto;height:64px}.wordmark{font-size:20px}nav{display:none}.ig{font-size:10px}.chapter{min-height:900px}.malibu,.now{display:block;padding-top:64px}.malibu .scene,.now .scene{position:absolute;inset:64px 0 0;width:100%;height:50%;object-position:center}.malibu:after,.now:after{content:"";position:absolute;inset:64px 0 35%;background:linear-gradient(180deg,rgba(0,0,0,.08),var(--black));z-index:1}.malibu .chapter-copy,.now .chapter-copy{padding:53vh 5vw 7vh}.malibu h1,.now h1,.now h2{font-size:clamp(66px,20vw,110px)}.statement{font-size:19px;margin-top:30px}.history{padding:100px 5vw 60px}.history .chapter-copy{max-width:100%}.history h2{font-size:36vw}.history .statement{font-size:34px}.history-note{position:relative;right:auto;top:auto;width:100%;margin-top:40px;padding-right:10vw}.now-note{left:5vw;right:auto;bottom:5vh;max-width:72%;font-size:16px}.now .statement{font-size:36px}.shape-vinyl{width:145px;left:auto;right:-6%;bottom:14%}.shape-photo{width:135px;right:auto;left:-3%;top:17%}.shape-pass{width:140px;left:-7%;bottom:4%}.shape-paper{width:240px;right:-17%;bottom:9%}.shape-frame{width:180px;left:auto;right:-13%;top:43%}.shape-locals{width:140px;right:-7%;top:18%}.shape-board{width:130px;left:4%;bottom:16%}.float-object figcaption{font-size:9px}.drag-note{right:10px;bottom:10px;font-size:9px}footer{height:64px;align-items:flex-start;justify-content:center;gap:4px;flex-direction:column;padding:0 5vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* New transparent archive objects */
.sticker img{object-fit:contain}.sticker figcaption{position:relative;z-index:2}
.malibu-friends{width:clamp(145px,16vw,245px);left:37%;bottom:5%;transform:rotate(-6deg)}.malibu-friends figcaption{background:var(--orange)}
.malibu-vinyl{width:clamp(125px,14vw,215px);right:4%;top:17%;transform:rotate(8deg)}.malibu-vinyl figcaption{background:var(--teal)}
.malibu-locals{width:clamp(100px,11vw,170px);left:2%;top:20%;transform:rotate(-8deg)}.malibu-locals figcaption{background:var(--pink)}
.history-drummer{width:clamp(105px,12vw,185px);left:3%;bottom:4%;transform:rotate(-5deg)}.history-drummer figcaption{background:var(--orange)}
.history-accent{width:clamp(115px,13vw,195px);left:20%;bottom:5%;transform:rotate(3deg)}.history-accent figcaption{background:var(--blue);color:var(--paper)}
.history-hawaii{width:clamp(125px,14vw,205px);left:37%;bottom:3%;transform:rotate(-3deg)}.history-hawaii figcaption{background:var(--pink)}
.history-portrait{width:clamp(90px,10vw,155px);right:34%;bottom:5%;transform:rotate(6deg)}.history-portrait figcaption{background:var(--teal)}
.history-pass{width:clamp(90px,10vw,155px);right:22%;top:40%;transform:rotate(-8deg)}.history-pass figcaption{background:var(--orange)}
.history-document{width:clamp(105px,12vw,185px);right:5%;bottom:4%;transform:rotate(5deg)}.history-document figcaption{background:var(--blue);color:var(--paper)}
.history-crouch{width:clamp(115px,13vw,205px);right:23%;bottom:3%;transform:rotate(-4deg)}.history-crouch figcaption{background:var(--pink)}
.history-stage{width:clamp(135px,15vw,225px);left:46%;top:14%;transform:rotate(4deg)}.history-stage figcaption{background:var(--teal)}
.now-shirt{width:clamp(120px,14vw,210px);right:4%;top:16%;transform:rotate(6deg)}.now-shirt figcaption{background:var(--teal)}
.now-board{width:clamp(90px,10vw,150px);left:43%;bottom:2%;transform:rotate(-9deg)}.now-board figcaption{background:var(--pink)}
.now-art{width:clamp(125px,14vw,220px);right:4%;bottom:4%;transform:rotate(-5deg)}.now-art figcaption{background:var(--orange)}
.now-photo{width:clamp(145px,16vw,245px);left:3%;top:18%;transform:rotate(5deg)}.now-photo figcaption{background:var(--pink)}
@media(max-width:800px){.malibu-friends{width:140px;left:2%;bottom:5%}.malibu-vinyl{width:125px;right:-4%;top:12%}.malibu-locals{width:95px;left:-4%;top:29%}.history-drummer{width:90px;left:-2%;bottom:3%}.history-accent{width:105px;left:13%;bottom:15%}.history-hawaii{width:110px;left:37%;bottom:2%}.history-portrait{width:78px;right:25%;bottom:15%}.history-pass{width:75px;right:4%;top:44%}.history-document{width:90px;right:-3%;bottom:2%}.history-crouch{width:95px;right:18%;bottom:1%}.history-stage{width:115px;left:45%;top:37%}.now-shirt{width:110px;right:-3%;top:15%}.now-board{width:75px;left:4%;bottom:15%}.now-art{width:110px;right:-4%;bottom:4%}.now-photo{width:130px;left:-5%;top:18%}}

/* iPhone and small-screen typography */
@media(max-width:800px){
  .chapter-copy{width:100%;max-width:100%;overflow:visible}
  .now h1,.malibu h2,.history h2{width:fit-content;max-width:88vw;margin-top:24px;padding-right:.16em;line-height:.86;letter-spacing:-.055em;white-space:normal}
  .now h1{font-size:clamp(50px,14.5vw,72px)}
  .now h1 span{display:block}
  .malibu h2{font-size:clamp(54px,16vw,76px)}
  .history h2{font-size:clamp(72px,25vw,102px)}
  .now .statement,.history .statement{max-width:88vw}
}
@media(max-width:390px){
  header{padding-left:18px;padding-right:18px}
  .wordmark{width:auto;height:35px}
  .malibu .chapter-copy,.now .chapter-copy{padding-left:20px;padding-right:20px}
  .history{padding-left:20px;padding-right:20px}
  .now h1{font-size:clamp(46px,14vw,55px)}
  .malibu h2{font-size:clamp(50px,15.5vw,62px)}
  .history h2{font-size:clamp(68px,24vw,94px)}
}

/* Unified chapter typography */
.chapter .chapter-copy{min-width:0}
.chapter h1,.chapter h2{
  width:fit-content;
  max-width:calc(100% - 1rem);
  margin-top:0;
  padding-right:.2em;
  font-size:clamp(72px,9.2vw,148px);
  line-height:.88;
  letter-spacing:-.05em;
}
.chapter .statement{
  max-width:90%;
  margin-top:30px;
  font-family:'Archivo Black',Impact,sans-serif;
  font-size:clamp(30px,2.9vw,48px);
  line-height:1.05;
}
@media(max-width:800px){
  .chapter h1,.chapter h2{
    max-width:calc(100vw - 48px);
    padding-right:.22em;
    font-size:clamp(54px,15vw,68px);
    line-height:.9;
  }
  .chapter .statement{
    max-width:calc(100vw - 48px);
    margin-top:24px;
    font-size:30px;
    line-height:1.08;
  }
}

/* A brief movement hint when each chapter enters the viewport */
.float-object.hint-move{
  animation-duration:1.4s;
  animation-timing-function:cubic-bezier(.25,.1,.25,1);
  animation-delay:var(--hint-delay,0ms);
  animation-fill-mode:both;
}
.float-object[data-hint="0"].hint-move{animation-name:hint-slide-right}
.float-object[data-hint="1"].hint-move{animation-name:hint-lift}
.float-object[data-hint="2"].hint-move{animation-name:hint-rock}
.float-object[data-hint="3"].hint-move{animation-name:hint-pop}
.float-object[data-hint="4"].hint-move{animation-name:hint-slide-left}
.float-object[data-hint="5"].hint-move{animation-name:hint-dip}
@keyframes hint-slide-right{0%,100%{translate:0 0}48%{translate:6px 0}}
@keyframes hint-lift{0%,100%{translate:0 0}48%{translate:0 -6px}}
@keyframes hint-rock{0%,100%{rotate:0deg}48%{rotate:2deg}}
@keyframes hint-pop{0%,100%{scale:1}48%{scale:1.035}}
@keyframes hint-slide-left{0%,100%{translate:0 0}48%{translate:-6px 1px}}
@keyframes hint-dip{0%,100%{translate:0 0;rotate:0deg}48%{translate:0 5px;rotate:-1.5deg}}
@media(prefers-reduced-motion:reduce){
  .float-object.hint-move{animation:none}
}

/* Full-bleed chapter photography behind the mobile header */
@media(max-width:800px){
  .malibu .scene,.now .scene{
    inset:0 0 auto;
    width:100%;
    height:58%;
    object-fit:cover;
  }
  .malibu .scene-slideshow .slide:nth-child(1){object-position:center 60%}
  .malibu:after,.now:after{inset:0 0 34%}
  .slideshow-nav{left:20px;bottom:22px}
  .slideshow-nav button{width:27px;height:2px}
  .slideshow-nav button:nth-child(1).is-active,
  .slideshow-nav button:nth-child(2).is-active,
  .slideshow-nav button:nth-child(3).is-active,
  .slideshow-nav button:nth-child(4).is-active,
  .slideshow-nav button:nth-child(5).is-active,
  .slideshow-nav button:nth-child(6).is-active{width:42px}
}

/* Keep the two text areas on the 1976 chapter clearly separated */
@media(min-width:801px){
  .history .chapter-copy{width:56vw;max-width:56vw}
  .history .statement{max-width:min(52vw,760px)}
  .history-note{top:15vh;right:4vw;width:min(30vw,430px)}
}
@media(min-width:801px) and (max-width:1050px){
  .history .chapter-copy{width:54vw;max-width:54vw}
  .history .statement{max-width:50vw;font-size:clamp(28px,3.5vw,38px)}
  .history-note{width:32vw;font-size:16px}
}
@media(max-width:800px){
  .history .chapter-copy{width:100%;max-width:100%}
  .history-note{position:relative;top:auto;right:auto;width:100%;margin-top:36px;padding-right:0}
}