:root{
  --ink:#0c0a08; --ink2:#14110e; --bone:#ddd4c4; --dust:#8d8578; --dim:#5a544b;
  --rust:#a13c25; --red:#c8322a;
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --lyric:'Libre Baskerville','Times New Roman',serif;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(18px,4vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--red);color:var(--ink)}

/* grain */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:50;opacity:.13;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* type helpers */
.tiny{font-size:11px;line-height:1.55;letter-spacing:.06em;color:var(--dust);text-transform:lowercase}
.tiny b{display:block;color:var(--bone);font-weight:500;letter-spacing:.32em;text-transform:uppercase;font-size:10px;margin-bottom:10px}
.tiny p+p{margin-top:8px}
.aside{font-family:var(--lyric);font-style:italic;color:var(--bone);text-transform:none;letter-spacing:0;font-size:12px}
.box{display:inline-block;border:1px solid var(--bone);padding:3px 8px 4px;text-decoration:none;font-size:11px;letter-spacing:.38em;text-transform:lowercase;font-weight:400}
.box span{padding-left:.38em}
.box.big{font-size:clamp(13px,1.4vw,17px);padding:6px 14px 7px}

/* header + spine */
.bar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad);pointer-events:none;mix-blend-mode:difference}
.bar>*{pointer-events:auto}
.menu-btn{background:none;border:0;font-size:11px;letter-spacing:.38em;cursor:pointer;padding:6px 0;text-transform:lowercase}
.menu-btn:hover,.box:hover{color:var(--red)}
.spine{position:fixed;left:calc(var(--pad)*.35);bottom:24px;z-index:30;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:.34em;color:var(--dim);text-transform:lowercase}

/* pages */
.page{position:relative;min-height:100vh;padding:calc(var(--pad) + 40px) var(--pad) var(--pad);overflow:hidden;border-top:1px solid #1d1914}
.num{position:absolute;right:var(--pad);top:calc(var(--pad) + 18px);font-family:var(--serif);font-size:clamp(90px,16vw,240px);line-height:.8;color:transparent;-webkit-text-stroke:1px #2c2721;pointer-events:none;user-select:none}

/* out of focus */
.oof img{filter:blur(2px) saturate(.7) sepia(.2) brightness(.9);transform:scale(1.02);transition:filter 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.oof.in img,.oof:hover img,.oof:focus-within img{filter:blur(0) saturate(.95) sepia(.05) brightness(1);transform:scale(1)}
.ph{position:relative;overflow:hidden;cursor:zoom-in;background:#000}
.ph img{width:100%;height:100%;object-fit:cover}
.ph::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 60px rgba(0,0,0,.55);pointer-events:none}

/* lyric lines */
.lyric{position:relative;font-family:var(--lyric);font-weight:400;font-size:clamp(30px,5.4vw,84px);line-height:1.02;letter-spacing:-.02em;text-transform:lowercase;color:var(--bone);z-index:3}
.lyric em{font-style:italic;color:var(--red)}
.lyric .small{font-size:.42em;letter-spacing:.3em;font-family:var(--sans);font-weight:300;vertical-align:middle}
.ghost{position:absolute;left:.18em;top:-.55em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(221,212,196,.16);font-style:italic;pointer-events:none;z-index:-1}
.lyric-small{font-family:var(--lyric);font-style:italic;font-size:clamp(20px,2.4vw,32px);color:var(--bone);letter-spacing:.02em}

.btn{background:transparent;border:1px solid var(--dim);padding:9px 16px 10px;font-size:11px;letter-spacing:.3em;text-transform:lowercase;cursor:pointer;color:var(--bone);transition:border-color .3s,color .3s}
.btn:hover,.btn:focus-visible{border-color:var(--red);color:var(--red);outline:none}

/* cover */
.cover{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;border-top:0}
.cover-band{position:relative;width:min(78vw,1100px);height:min(34vh,330px);display:grid;grid-template-rows:56% 44%;overflow:hidden}
.cover-band img{width:100%;height:100%;object-fit:cover;filter:blur(2px) saturate(.6) sepia(.35) contrast(1.05)}
.cb-top{object-position:50% 70%}
.cb-bot{object-position:50% 40%;filter:blur(5px) saturate(.5) sepia(.45) hue-rotate(-20deg) contrast(1.1)!important}
.cb-line{position:absolute;left:0;right:0;top:56%;height:1px;background:rgba(0,0,0,.6)}
.cover-band::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0,transparent 12%,transparent 88%,var(--ink) 100%)}
.cover-title{display:flex;align-items:center;gap:18px}
.cover-sub{font-size:10px;letter-spacing:.3em;line-height:1.6;color:var(--dust)}
.cover-meta{display:flex;gap:40px;font-size:10px;letter-spacing:.42em;color:var(--dust)}
.turn{position:absolute;bottom:28px;font-size:10px;letter-spacing:.4em;color:var(--dim);text-decoration:none;text-transform:lowercase;animation:breathe 3s ease-in-out infinite}
.turn:hover{color:var(--red)}
@keyframes breathe{50%{opacity:.35}}

/* tracks */
.tracks{display:flex;flex-direction:column;justify-content:center}
.ghost-img{position:absolute;right:-8vw;top:8%;width:62vw;max-width:900px;opacity:.38;pointer-events:none}
.ghost-img img,.ghost-img{filter:blur(14px) saturate(.4) sepia(.5)}
.tracklist{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,120px);max-width:980px;z-index:2}
.side-h{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(46px,7vw,110px);line-height:1;color:var(--bone);margin-bottom:18px}
.side:nth-child(2) .side-h{text-align:right}
.tracklist ol{list-style:none;border-top:1px solid #2a251f}
.tracklist li{border-bottom:1px solid #2a251f}
.tracklist a{display:flex;gap:16px;padding:12px 0;text-decoration:none;font-size:13px;letter-spacing:.14em;text-transform:lowercase;transition:color .3s,padding .3s}
.tracklist a i{font-style:normal;color:var(--dim);font-size:10px;letter-spacing:.2em;padding-top:2px}
.tracklist a:hover{color:var(--red);padding-left:10px}
.tracks-note{position:relative;margin-top:40px;max-width:420px;z-index:2}

/* sol */
.sol{min-height:calc(110vh + 270px)}
.sol .ph{position:absolute}
.s1{left:8%;top:17.6vh;width:42vw;max-width:620px;aspect-ratio:4/3}
.s2{right:12%;top:33vh;width:22vw;max-width:320px;aspect-ratio:3/4}
.s3{left:40%;top:61.6vh;width:18vw;max-width:260px;aspect-ratio:3/4}
.l-sol{position:absolute;left:var(--pad);bottom:calc(17.6vh + 270px)}
.c-sol{position:absolute;right:var(--pad);bottom:calc(13.2vh + 270px);width:260px}
/* camera roll strip: a contact strip with sprocket edges */
.roll{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);padding:16px 0;height:230px;
  border-top:2px dashed #2a241d;border-bottom:2px dashed #2a241d;scrollbar-width:thin;scrollbar-color:var(--rust) transparent;outline:none}
.roll:focus-visible{border-color:var(--red)}
.roll .ph{position:relative!important;flex:0 0 auto;height:100%;width:auto;scroll-snap-align:start;margin:0}
.roll .ph img{height:100%;width:100%;object-fit:cover}
.roll .empty{align-self:center;padding:0 12px}
.sol .roll{position:absolute;left:0;right:0;bottom:30px;padding-left:var(--pad);padding-right:var(--pad)}
.roll-art{grid-column:1/3;margin-top:6vh}
.night .roll{margin-top:40px}
.wine .roll{position:absolute;left:0;right:0;bottom:30px;padding-left:var(--pad);padding-right:var(--pad)}

/* music */
.music{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-content:start}
.band-img{grid-column:1/13;height:46vh;margin:0 calc(var(--pad)*-1)}
.band-img img{object-position:50% 35%}
.l-music{grid-column:1/10;margin-top:-1.4em;font-size:clamp(28px,4.6vw,70px)}
.music .cols{grid-column:2/10;display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:12px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin-top:12px}
.facts dt{color:var(--dim);letter-spacing:.2em}
.facts dd{color:var(--bone)}
.covers{grid-column:9/13;grid-row:3/5;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-self:start;margin-top:-8vh}
.covers .ph{aspect-ratio:1}
.empty-note{grid-column:2/10;border-left:1px solid var(--rust);padding-left:12px}

/* art */
.art{min-height:130vh;display:grid;grid-template-columns:1fr minmax(260px,340px);column-gap:48px;align-content:start}
.l-art{position:relative;z-index:4}
.c-art{position:relative;z-index:4;align-self:end;margin-right:clamp(0px,8vw,140px)}
.scatter{grid-column:1/3;position:relative;height:95vh;margin-top:5vh}
.scatter .ph{position:absolute;box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* book */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:76vh;border:1px solid #221e19}
.split-text{background:#000;padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:22px}
.label{letter-spacing:.24em}
.book-title{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,96px);line-height:.95;letter-spacing:.24em;color:var(--bone)}
.push{font-family:var(--serif);font-size:clamp(14px,1.4vw,20px);letter-spacing:.3em;color:var(--dust)}
.push span{color:var(--bone)}
.push em{font-family:var(--lyric);font-size:2.6em;letter-spacing:0;color:var(--red);text-transform:lowercase}
.split-text .btn{align-self:flex-start}
.split-img{min-height:60vh}
.split-img img{object-fit:contain;background:#000}
.strip{display:flex;gap:10px;overflow-x:auto;padding:22px 0 8px;scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
.strip button{flex:0 0 auto;width:90px;aspect-ratio:424/660;border:1px solid #221e19;background:#000;cursor:pointer;padding:0;opacity:.55;transition:opacity .3s,border-color .3s}
.strip button:hover,.strip button:focus-visible{opacity:1;border-color:var(--red);outline:none}
.strip img{width:100%;height:100%;object-fit:cover}

/* burning */
.burning{background:linear-gradient(180deg,var(--ink) 0,#1a0c07 55%,var(--ink) 100%)}
.burn-title{position:relative;font-family:var(--serif);font-weight:400;font-size:clamp(64px,13vw,210px);letter-spacing:.2em;line-height:.9;color:var(--bone);margin:10px 0 70px}
.burn-title .mirror{position:absolute;left:0;top:100%;transform:scaleY(-1);color:transparent;-webkit-text-stroke:1px rgba(200,50,42,.35);pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 100%)}
.burn-cols{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:clamp(30px,5vw,90px);margin-top:8vh}
.burn-lyric{font-size:clamp(28px,3.6vw,54px);margin-bottom:28px}
.poems{list-style:none;columns:3 180px;column-gap:28px;border-top:1px solid #2a251f;padding-top:12px}
.poems li{break-inside:avoid;padding:3px 0;color:var(--bone);letter-spacing:.08em}
.poems i{font-style:normal;color:var(--dim);margin-right:8px;font-size:9px}
.vp{background:none;border:0;padding:0;cursor:pointer;color:var(--red);font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;border-bottom:1px solid rgba(200,50,42,.4)}
.vp:hover,.vp:focus-visible{color:var(--bone);outline:none}
.sampler-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin:12vh 0 18px}
.sampler{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
.sampler .ph{flex:0 0 auto;width:clamp(150px,17vw,240px);aspect-ratio:2/3;border:0;padding:0}
.r-title{position:absolute;top:22px;left:0;right:0;text-align:center;letter-spacing:.3em}

/* night */
.night{background:#070605}
.night-grid{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(6,1fr);grid-auto-rows:16vh;gap:10px;margin-top:40px}
.night-grid .ph:nth-child(1){grid-column:span 3;grid-row:span 3}
.night-grid .ph:nth-child(4){grid-column:span 2;grid-row:span 2}
.night-grid .ph:nth-child(7){grid-column:span 2;grid-row:span 2}
.night-grid .ph{grid-column:span 1;grid-row:span 1}
.night-grid .ph:nth-child(1){grid-column:1/4}
.night .lyric-small{text-align:right;margin-top:28px;letter-spacing:.5em}
.c-night{width:280px;margin-top:20px}

/* wine */
.wine{min-height:calc(110vh + 270px);background:radial-gradient(ellipse at 70% 60%,#2a0e0a 0,var(--ink) 60%)}
.wine .ph{position:absolute}
.w1{left:0;right:0;top:14%;height:30vh}
.w1 img{object-position:50% 60%}
.w2{right:14%;top:36%;width:20vw;max-width:300px;aspect-ratio:2/3}
.l-wine{position:absolute;left:var(--pad);top:calc(14% + 30vh - .55em)}
.c-wine{position:absolute;left:18%;bottom:calc(14vh + 270px);width:320px}

/* archive */
.arch-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:28px}
.arch-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(46px,7vw,110px);line-height:1}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.filters button{background:none;border:1px solid #2a251f;padding:6px 11px 7px;font-size:10px;letter-spacing:.24em;cursor:pointer;color:var(--dust);text-transform:lowercase}
.filters button[aria-selected=true]{border-color:var(--red);color:var(--bone)}
.filters button:hover{color:var(--bone)}
.filters button i{font-style:normal;color:var(--dim);margin-left:6px}
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.sheet .ph{aspect-ratio:1}
.sheet .oof img,.sheet .oof.in img{filter:saturate(.95) sepia(.05);transform:none;transition:filter .4s}
.sheet .oof:hover img,.sheet .oof:focus-within img{filter:none}
.sheet .ph figcaption{position:absolute;left:5px;bottom:4px;font-size:9px;letter-spacing:.14em;color:var(--bone);text-shadow:0 1px 3px #000;z-index:2;text-transform:lowercase}
.empty{border-left:1px solid var(--rust);padding-left:12px}

/* credits */
.credits-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);max-width:1100px;margin-top:6vh}
.contact{display:flex;flex-direction:column;gap:14px}
.contact .left{text-align:left;margin-bottom:6px}
.contact label{display:flex;flex-direction:column;gap:6px;font-size:10px;letter-spacing:.3em;color:var(--dust)}
.contact input,.contact textarea,.contact select{background:transparent;border:0;border-bottom:1px solid var(--dim);color:var(--bone);font:300 15px/1.4 var(--sans);padding:6px 0;border-radius:0}
.contact select option{background:var(--ink)}
.contact input:focus,.contact textarea:focus,.contact select:focus{outline:none;border-color:var(--red)}
.contact .invalid{border-color:var(--red)}
.contact .btn{align-self:flex-start;margin-top:6px}
.form-msg{min-height:1.5em;color:var(--bone)}
.end{margin-top:14vh;text-align:center;letter-spacing:.6em}

/* lightbox */
.lb{position:fixed;inset:0;z-index:60;background:rgba(6,5,4,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:60px 20px 24px}
.lb[hidden]{display:none}
.lb-stage{position:relative;width:min(88vw,1100px);height:min(72vh,820px)}
.lb-stage canvas,.lb-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lb-stage img{opacity:0;transition:opacity .9s ease}
.lb-stage img.show{opacity:1}
.lb-cap{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.lb-cap span:first-child{color:var(--bone)}
.lb-nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.spread{display:flex;gap:2px;height:min(76vh,860px);max-width:94vw}
.spread img{height:100%;width:auto;max-width:47vw;object-fit:contain;background:#000}

/* motion off */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain,.turn{animation:none}
  .oof img{transition:none}
}

/* mobile */
@media (max-width:760px){
  .spine{display:none}
  .page{padding-top:80px}
  .cover-band{width:92vw;height:30vh}
  .cover-title{flex-direction:column;gap:12px;text-align:center}
  .cover-meta{flex-direction:column;gap:8px;text-align:center}
  .tracklist{grid-template-columns:1fr;gap:34px}
  .side:nth-child(2) .side-h{text-align:left}
  .ghost-img{width:120vw;right:-40vw}
  .sol,.wine,.art{min-height:auto}
  .sol .ph,.wine .ph,.l-sol,.c-sol,.l-wine,.c-wine{position:relative;left:auto;right:auto;top:auto;bottom:auto}
  .s1{width:100%}
  .s2{width:58%;margin:-18% 0 0 auto}
  .s3{width:46%;margin:-22% 0 0 6%}
  .l-sol{margin-top:28px}
  .c-sol,.c-wine,.c-night{width:auto;margin-top:22px}
  .music{display:block}
  .band-img{height:34vh}
  .l-music{margin-top:-.9em}
  .music .cols{grid-template-columns:1fr;gap:22px;margin-top:22px}
  .covers{margin:26px 0 0}
  .empty-note{margin-top:20px}
  .art{display:block}
  .c-art{margin:22px 0 0}
  .book-title{font-size:38px;letter-spacing:.14em}
  .scatter{height:auto;margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .scatter .ph{position:relative!important;left:auto!important;top:auto!important;width:auto!important;transform:none!important}
  .split{grid-template-columns:1fr}
  .split-img{min-height:56vh}
  .night-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:26vw}
  .night-grid .ph,.night-grid .ph:nth-child(n){grid-column:span 1;grid-row:span 1}
  .night-grid .ph:nth-child(1),.night-grid .ph:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
  .w1{height:26vh}
  .w2{width:60%;margin:20px 0 0 auto}
  .roll,.sol .roll,.wine .roll{position:relative;height:170px;margin:28px calc(var(--pad)*-1) 0;bottom:auto}
  .l-wine{margin-top:-.6em}
  .sheet{grid-template-columns:repeat(3,1fr);gap:5px}
  .credits-grid{grid-template-columns:1fr}
  .burn-cols{grid-template-columns:1fr;margin-top:4vh}
  .burn-title{letter-spacing:.08em;margin-bottom:50px}
  .poems{columns:2}
  .sampler .ph{width:44vw}
  .spread img{max-width:92vw}
  .num{font-size:96px}
}

/* keep all text level: captions undo their photo's tilt */
figure[style*='--rot'] figcaption,figure[style*='--rot'] .cap{transform:rotate(calc(-1 * var(--rot)));transform-origin:left top}