/* Charon's Decay V7 · "Umber & Ink", printed as a broadsheet
   Same plates and layout as V6, new language for the whole page, taken from the REQUIEM,
   IMU, Devastation, Bleed From Within and Orbit Culture references:
   a high-contrast display serif in capitals for every headline (the logo stays the only blackletter),
   tiny spaced capitals for everything around it, a folio at the head of each chapter
   (label, roman numeral between double hairlines, label), double hairline frames,
   label/value data sheets, two colours only (bone and the Dystopia brown on black), print dust over all.
   Noto Serif Display for headlines, Marcellus for inscriptions and small titles, Hanken Grotesk for reading.
   The display cut is never set below 24px: its crossbars vanish there. */
@font-face{font-family:'Noto Serif Display';font-weight:100 900;font-display:swap;src:url(fonts/noto-serif-display-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:Marcellus;font-weight:400;font-display:swap;src:url(fonts/marcellus-400.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-wght.woff2) format('woff2')}
:root{
  --fr-in:rgba(217,189,140,.62);--fr-out:rgba(168,142,112,.36);
  --soot:#0c0b10;
  --coal:#141318;
  --ink:#08080a;
  --root:#dccbad;     /* pale gold: headlines, numerals, accents */
  --tan:#c4b597;      /* small accent text */
  --umber:#0a090c;    /* black: buttons */
  --bark:#1c1914;
  --earth:#050507;
  --veil:rgba(4,4,6,.9);   /* --earth laid over the smoke on big surfaces */
  --bone:#ece9e4;
  --paper:#0c0b10;
  --text:#bfbcc2;
  --ash:#8a8790;
  --line:#26242b;
  --black:'Noto Serif Display',Didot,'Bodoni 72',Georgia,serif;
  --caps:Marcellus,'Times New Roman',serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --gut:clamp(20px,5vw,80px);
  --ww:min(100vw - 2 * var(--gut),1400px);
  --edge:calc((100vw - var(--ww)) / 2);
  --lp:clamp(12px,1.6vw,28px);   /* how far the outer grid lines stand outside the text column */
  --sec:clamp(120px,14vw,240px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--soot);scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%;scrollbar-color:#3a3228 #0c0b10}
body{--gl:rgba(168,142,112,.09);color:var(--text);font:400 1.0625rem/1.65 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased;
}
/* the four vertical hairlines of the grid run unbroken from top to bottom, over every section and picture */
/* page margin hairlines: switched off at the user request (set --gl2 to a colour to bring them back) */
:root{--gl2:transparent}
/* measured from the middle of the visible page, so a scrollbar cannot push the lines off the content;
   the outer pair sits a little outside the text column, so nothing ever touches or crosses it */
/* the smoke from the hero stays behind the whole page, very dark, and does not scroll */
/* the etching of roots and skulls lies over the smoke, so faint it reads only when you look for it */
/* the page ground (etch + veil + smoke) rides on a sticky layer inside main instead of a fixed one on body, so main is opaque
   and can slide off the footer that waits underneath; it looks exactly as fixed while scrolling, and stops where main ends */
main{position:relative;z-index:1;isolation:isolate;overflow:clip;clip-path:inset(0)}   /* clip: the sticky ground hangs below main at its end and must not cover the footer */
main::before{content:"";position:sticky;z-index:-1;top:0;display:block;height:100vh;margin-bottom:-100vh;pointer-events:none;background:linear-gradient(var(--gl2),var(--gl2)) calc(50% - var(--ww) / 2 - var(--lp)) 0/1px 100% no-repeat,linear-gradient(var(--gl2),var(--gl2)) calc(50% + var(--ww) / 2 + var(--lp)) 0/1px 100% no-repeat,url(img/waves.webp) 0 0/640px,linear-gradient(rgba(4,4,6,.3),rgba(4,4,6,.3)),url(img/etch-2000.webp) 50% 50%/cover no-repeat,linear-gradient(rgba(9,8,12,.8),rgba(9,8,12,.8)),url(img/smoke-1600.webp) 50% 50%/cover no-repeat;background-blend-mode:normal,normal,normal,normal,screen,normal,normal;pointer-events:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
p+p{margin-top:.9em}
:focus-visible{outline:2px solid var(--root);outline-offset:3px}
::selection{background:var(--root);color:#060608}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--bone);color:#000;padding:8px 14px;z-index:200}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wrap{position:relative;width:var(--ww);margin-inline:auto}

/* ---------- type ---------- */
/* big words carry a worn fill; padding keeps the descenders inside the painted box */
.word{font:500 var(--fs,clamp(3rem,6.6vw,6.2rem))/1 var(--black);letter-spacing:-.005em;white-space:nowrap;color:var(--root)}
.word .bn{color:var(--bone)}
.word.bone{color:var(--root)}
.word.ink{color:var(--root)}
.cap{font:400 clamp(.86rem,1.05vw,1rem)/1.5 var(--caps);letter-spacing:.24em;text-transform:uppercase;color:var(--bone)}
.lead{font:400 clamp(1.2rem,1.65vw,1.5rem)/1.45 var(--body);color:var(--bone)}
.rule{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--root)}
.rule::before,.rule::after{content:"";flex:1;max-width:220px;height:1px;background:currentColor;opacity:.55}

/* ---------- buttons: ink stamps ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:13px 28px;font:400 .92rem/1.2 var(--caps);letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--umber);border:1px solid var(--root);outline:1px solid rgba(168,142,112,.42);outline-offset:3px;transition:background .18s,color .18s}
.btn:focus-visible{outline:2px solid var(--bone);outline-offset:4px}
.btn:hover{background:var(--bark)}
/* secondary: same frame, no fill */
.btn.alt{background:transparent;color:var(--bone);border-color:rgba(217,189,140,.6);outline-color:rgba(168,142,112,.24)}
.btn.alt:hover{background:rgba(60,50,38,.5);color:#fff}
.go{display:inline-flex;align-items:center;gap:14px;min-height:52px;font:400 .92rem/1.2 var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.go i{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--root);border-radius:50%;transition:background .18s,color .18s}
.go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.go:hover i,.go:focus-visible i{background:var(--root);color:var(--ink)}

/* ---------- split nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:#060608;box-shadow:0 1px 0 #24222a,0 4px 0 #060608,0 5px 0 #24222a}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(20px,3vw,48px);width:var(--ww);height:76px;margin-inline:auto}
.nav-g{display:flex;gap:clamp(20px,3.2vw,48px)}
.nav-g:first-child{justify-content:flex-end}
.nav-g a{position:relative;padding:8px 0;font:400 .92rem/1 var(--caps);letter-spacing:.26em;text-transform:uppercase;color:#cfc9bd;transition:color .15s}
.nav-g a::after{content:"";position:absolute;left:0;right:.26em;bottom:0;height:2px;background:var(--root);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-g a:hover,.nav-g a.on{color:#fff}
.nav-g a:hover::after,.nav-g a.on::after{transform:none}
.brand{display:block}
.brand img{height:58px;width:auto}
.burger{display:none;align-items:center;gap:12px;min-height:44px;background:none;border:0;color:var(--bone);font:400 .9rem var(--caps);letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.burger i{width:22px;height:1px;background:currentColor;box-shadow:0 7px currentColor,0 -7px currentColor}
.drawer{display:none}

/* numbered pager: it lives in the margin outside the outer grid line, never over the content */
.pager{position:fixed;z-index:40;left:calc((var(--edge) - var(--lp) - 38px) / 2);top:50%;transform:translateY(-50%);display:grid;gap:6px;transition:opacity .35s}
.pager.off{opacity:0;pointer-events:none}
.pager a{display:flex;align-items:center;gap:8px;height:24px;font:400 .84rem/1 var(--caps);letter-spacing:.04em;color:#8f8f8f;transition:color .2s}
.pager a::after{content:"";width:0;height:1px;background:var(--root);transition:width .25s}
.pager a.on,.pager a:hover{color:var(--root)}
.pager a.on::after,.pager a:hover::after{width:12px}

/* ---------- hero ---------- */
/* the band steps out of smoke: the photograph fills the hero, a vignette closes it in, fog drifts over the feet */
.hero{position:relative;height:clamp(540px,min(calc(100svh - 76px - var(--barh,60px) + 8px),75vw),1400px);overflow:hidden;isolation:isolate;background:#000}   /* black until the sky video plays: no swirl flashing on load */
.hero::before{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(ellipse 60% 80% at 68% 48%,transparent 22%,rgba(6,7,8,.8));pointer-events:none}
.wedge-box{position:static}
/* the band stands on the floor of the hero, in front of the storm: a dark aura seats them into the clouds, their black lower half sinks into the fade */
.h-band{position:absolute;z-index:1;right:-1.5vw;bottom:0;width:min(71vw,calc(var(--hh,800px) * 1.32));max-width:none;filter:brightness(.84) contrast(1.04) drop-shadow(0 0 38px rgba(4,4,6,.7))}
.h-fade{position:absolute;z-index:2;inset:auto 0 0;height:34%;background:linear-gradient(rgba(12,11,16,0),rgba(12,11,16,.25) 28%,rgba(12,11,16,.62) 52%,rgba(12,11,16,.9) 74%,var(--soot) 90%);pointer-events:none}
/* the seam between hero and page: the chapter rule (double hairlines either side of a diamond) laid across the cut,
   */
.seam{position:relative;z-index:6;height:0;width:var(--ww);margin-inline:auto;pointer-events:none}
.seam::before{content:"";position:absolute;left:0;right:0;top:-6px;height:11px;--g:rgba(168,142,112,.55);background:
  linear-gradient(90deg,transparent,var(--g)) 0 3px/calc(50% - 16px) 1px no-repeat,linear-gradient(90deg,transparent,var(--g2,rgba(168,142,112,.28))) 0 7px/calc(50% - 16px) 1px no-repeat,
  linear-gradient(270deg,transparent,var(--g)) 100% 3px/calc(50% - 16px) 1px no-repeat,linear-gradient(270deg,transparent,var(--g2,rgba(168,142,112,.28))) 100% 7px/calc(50% - 16px) 1px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8 11.2 6 6 11.2.8 6z' fill='%230c0b10' stroke='%23d9bd8c'/%3E%3C/svg%3E") 50% 50%/11px no-repeat}
.h-copy{position:absolute;z-index:3;left:var(--edge);top:0;bottom:0;width:min(44vw,620px);display:flex;flex-direction:column;justify-content:center;padding-bottom:10%}
.h-top{margin-bottom:clamp(14px,1.8vw,26px)}
.h-logo{width:100%;filter:drop-shadow(0 6px 22px rgba(0,0,0,.65))}
.ash{position:absolute;z-index:4;inset:0;width:100%;height:100%;display:block;pointer-events:none}
html:not(.ash-on) .ash{display:none}
.ash-on .h-logo{visibility:hidden}
/* while the ash is about to form the logo, the printed one waits unseen; if the ash cannot run it fades in */
.gl:not(.ash-on):not(.ash-wait-off) .h-logo{opacity:0;animation:logo-show .6s ease 4s forwards}   /* safety: shows anyway after 4 s */
@keyframes logo-show{to{opacity:1}}
.h-logo{transition:opacity .6s ease}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:clamp(30px,3.6vw,54px)}

/* ---------- root lettering between three columns ---------- */
/* three equal columns that sit between the grid lines, each kept clear of them */

/* ---------- I · the releases: two sleeves standing free on the dark, the date and the kind beneath, the ways to listen as small marks ---------- */
.rel{padding-block:clamp(40px,5vw,72px) clamp(120px,14vw,190px)}
.discs{display:grid;grid-template-columns:repeat(2,minmax(0,min(100%,440px)));justify-content:center;column-gap:clamp(48px,9vw,150px);align-items:start;margin-top:clamp(28px,4vw,60px)}
.disc{display:flex;flex-direction:column;align-items:center;min-width:0}
.d2{margin-top:clamp(40px,7vw,120px)}
.disc-art{width:100%;height:auto;aspect-ratio:1;box-shadow:0 0 0 1px var(--fr-in),0 30px 70px -20px rgba(0,0,0,.9);outline:1px solid var(--fr-out);outline-offset:5px}
.disc-t{margin:clamp(22px,2.4vw,32px) 0 0;font:500 clamp(1.7rem,2.4vw,2.3rem)/1.1 var(--black);letter-spacing:0;color:var(--root);text-align:center}
.disc-m{display:flex;align-items:center;gap:14px;margin:14px 0 0;font:400 .82rem/1.2 var(--caps);letter-spacing:.28em;text-transform:uppercase;color:var(--ash)}
.disc-m span{color:var(--root)}
.disc-m i{width:6px;height:6px;border:1px solid var(--tan);transform:rotate(45deg);flex:none;opacity:.7}
.disc-l{display:flex;gap:12px;margin:24px 0 0;padding:0;list-style:none}
.disc-l a{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(168,142,112,.3);border-radius:50%;color:var(--tan);transition:color .2s,border-color .2s,background .2s}
.disc-l svg{width:19px;height:19px;fill:currentColor}
.d-am{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--tan);color:#0c0b10;font:700 .78rem/1 var(--body);transition:background .2s}
.disc-l a:hover .d-am,.disc-l a:focus-visible .d-am{background:var(--root)}
.disc-l a:hover,.disc-l a:focus-visible{color:var(--root);border-color:var(--root);background:rgba(217,189,140,.06)}
/* register rows */
.rows{border-bottom:1px solid var(--line)}
.rows>a,.rows>div{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;border-top:1px solid var(--line);transition:color .15s}
.rows b{display:block;font:400 clamp(1rem,1.2vw,1.12rem)/1.3 var(--caps);letter-spacing:.18em;text-transform:uppercase;color:var(--bone)}
.rows small{display:block;font-size:.98rem;line-height:1.35;color:var(--ash);margin-top:2px}
.rows svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;color:var(--root)}
/* hover: nothing moves but the arrow */
.rows>a svg{margin-right:4px;transition:transform .2s}
.rows>a:hover svg,.rows>a:focus-visible svg{transform:translateX(4px)}
.rows>a[href*="drive.google"]:hover svg,.rows>a[href*="drive.google"]:focus-visible svg{transform:translateY(3px)}
.rows>a:hover b,.rows>a:focus-visible b{color:#fff}


:root{--tear:190px;--tear-w:1800px}
/* ---------- II · the story in the dark, photographs with ragged ink edges ---------- */
.about{position:relative;isolation:isolate;color:var(--text);padding-block:clamp(36px,4vw,64px) clamp(30px,3.6vw,56px)}
.about .wrap{z-index:2}
.ab-clip{position:absolute;z-index:-1;inset:0;overflow:hidden}
.bg-word{position:absolute;left:50%;top:-.1em;font:300 min(20vw,340px)/1 var(--black);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;color:rgba(233,231,225,.026);transform:translateX(-50%);pointer-events:none;user-select:none}
.about .word.ink{--fs:clamp(2.6rem,4.3vw,4.3rem);white-space:normal;line-height:1}
.ab-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(28px,5vw,96px);align-items:center}
.ab-row.r2{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);margin-top:clamp(72px,9vw,160px)}
.about .lead{color:var(--bone);margin-top:clamp(18px,2.2vw,30px)}
.ab-p{color:var(--text);font-size:clamp(1.0625rem,1.3vw,1.2rem);max-width:34em}
/* the two photographs as printed plates: a clean rectangle, a gold plate mark set off around it, the caption on a hairline below */
.blot{position:relative;margin:10px}
.blot img{display:block;width:100%;height:auto;outline:1px solid var(--fr-out);outline-offset:5px;box-shadow:0 0 0 1px var(--fr-in),0 30px 70px -24px rgba(0,0,0,.9)}
.call{display:flex;align-items:center;gap:14px;margin-top:26px;font:400 clamp(.74rem,.95vw,.88rem)/1.25 var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--bone);white-space:nowrap}
.call::after{content:"";flex:1;height:7px;background:linear-gradient(rgba(168,142,112,.5),rgba(168,142,112,.5)) 0 50%/calc(100% - 12px) 1px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 .7 7.3 4 4 7.3.7 4z' fill='none' stroke='%23c9ad80'/%3E%3C/svg%3E") 100% 50%/7px no-repeat}
.b2 .call{flex-direction:row-reverse}
.b2 .call::after{background-position:100% 50%,0 50%}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px);margin-top:clamp(64px,7vw,120px)}
.steps::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:rgba(233,231,225,.22)}
.steps li{position:relative;padding-top:28px}
.steps li::before{content:"";position:absolute;left:1px;top:1px;width:13px;height:13px;border:1px solid var(--root);background:var(--soot);transform:rotate(45deg)}
.steps li:last-child::before{background:var(--root)}
.steps b{display:block;font:300 clamp(2rem,3vw,2.8rem)/1 var(--black);letter-spacing:.04em;color:var(--root)}
.steps span{display:block;margin-top:6px;color:var(--text)}

/* the line-up: the portrait under the cursor opens, its neighbours give way */
/* the line-up sits in the same column as everything else, between the outer grid lines */
.crew{display:flex;flex-wrap:wrap;gap:3px;width:var(--ww);margin:clamp(72px,8vw,140px) auto 0;background:#000}
.crew li{position:relative;isolation:isolate;flex:1 1 0;min-width:0;overflow:hidden;background:#000;transition:flex-grow .7s cubic-bezier(.16,.8,.24,1)}
/* emerald ink over the photograph on hover; a layer, because mix-blend-mode itself cannot fade */
.crew li::before{content:"";position:absolute;z-index:1;inset:0;background:#7a6548;mix-blend-mode:multiply;opacity:0;transition:opacity .45s;pointer-events:none}
.crew img{width:100%;height:clamp(460px,min(44vw,calc(100svh - 90px)),1180px);object-fit:cover;object-position:50% 0;transition:transform 1.1s cubic-bezier(.16,.8,.24,1)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .crew li:hover{flex-grow:1.75}
  .crew li:hover img{transform:scale(1.03)}
}
.crew p{position:absolute;z-index:2;left:clamp(12px,1.6vw,28px);bottom:clamp(12px,1.6vw,26px);margin:0;pointer-events:none}
.crew b{display:block;font:500 clamp(1.6rem,2.4vw,2.6rem)/1 var(--black);letter-spacing:0;color:var(--root);text-shadow:0 2px 14px rgba(0,0,0,.8)}
.crew span{font:400 clamp(.84rem,1.05vw,1.05rem)/1.3 var(--caps);letter-spacing:.2em;text-transform:uppercase;color:#d5cfc3;text-shadow:0 1px 8px rgba(0,0,0,.8)}

/* ---------- III · earth meets smoke, the bassist backlit in the fog ---------- */
.shows{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(var(--gl2),var(--gl2)) calc(50% - var(--ww) / 2 - var(--lp)) 0/1px 100% no-repeat,linear-gradient(var(--gl2),var(--gl2)) calc(50% + var(--ww) / 2 + var(--lp)) 0/1px 100% no-repeat,url(img/etch-2000.webp) 50% 50%/cover no-repeat,linear-gradient(rgba(6,7,8,.7),transparent 58%),linear-gradient(transparent,transparent),#0c0b10 url(img/smoke-1600.webp) 60% 50%/cover no-repeat;background-blend-mode:normal,normal,screen,normal,screen,normal;min-height:clamp(560px,50vw,760px);display:flex;align-items:center}
/* the stage at Spring Tide fills the whole section as a faint grey ground; the slanted dark sheet on the left lies over it and carries the dates */
.sh-photo{position:absolute;z-index:0;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 45%;opacity:.6;pointer-events:none}
.sh-earth{position:absolute;z-index:1;inset:0;background:rgba(4,4,6,.8);clip-path:url(#t-shows)}   /* a dark glaze, not a wall: the stage still glimmers through under the dates */
.sh-t{z-index:2;padding-block:clamp(60px,6.4vw,100px)}
.sh-col{width:min(100%,clamp(400px,35.5vw,540px))}
.sh-col .word{--fs:clamp(3rem,5.6vw,5.4rem);display:block;margin-bottom:.02em}
.shows .rows{border-color:rgba(236,222,199,.34);margin-top:clamp(12px,1.4vw,20px)}
.shows .rows>a,.shows .rows>div{border-color:rgba(236,222,199,.34);padding-inline:0}
.shows .rows b{color:#fff}
.shows .rows small{color:#ecdfcb}
.shows .rows svg{color:#fff}

/* ---------- IV · one thing thrown at you, the rest on a rail ---------- */
.merch{padding-block:var(--sec)}
.m-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(12px,2vw,32px);align-items:center}
.m-t .word{--fs:clamp(3rem,6.2vw,6rem);line-height:1}
.m-note{max-width:30rem;margin-top:clamp(16px,2vw,26px)}
.m-feat{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:8px 20px;max-width:30rem;margin-top:clamp(18px,2.2vw,28px);padding-top:14px;border-top:1px solid var(--line)}
.m-feat p{margin:0}
.m-feat p:first-child b{display:block;font:400 1.05rem/1.3 var(--caps);letter-spacing:.18em;text-transform:uppercase;color:var(--bone)}
.m-feat p:first-child span{color:var(--ash)}
.m-price{font:300 clamp(1.8rem,2.6vw,2.4rem)/1 var(--black);color:var(--tan);text-align:right}
.m-feat .m-buy{grid-column:1/-1;justify-self:start;gap:12px;margin-top:6px}
.m-buy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .2s}
.m-buy:hover svg,.m-buy:focus-visible svg{transform:translate(2px,-2px)}
/* the bundle on a printed plate like the photographs in II: smoke inside a clean frame with the gold plate mark, the goods breaking out over its lower edge */
.m-burst{position:relative;aspect-ratio:5/4;margin:10px}
.m-burst::before{content:"";position:absolute;inset:0 6% 12%;background:linear-gradient(rgba(5,5,7,.5),rgba(5,5,7,.5)),url(img/smoke-960.webp) 50% 40%/cover;outline:1px solid var(--fr-out);outline-offset:5px;box-shadow:0 0 0 1px var(--fr-in),0 30px 70px -24px rgba(0,0,0,.9)}
.m-p{position:absolute;left:4%;bottom:1%;width:92%;height:auto;filter:drop-shadow(0 22px 26px rgba(0,0,0,.8))}
/* rails: the header carries round arrows, the last card sends you onward */
.rail-h{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:clamp(44px,5vw,80px);padding:clamp(20px,2.2vw,30px) 0 clamp(14px,1.4vw,20px);border-top:1px solid var(--line)}
.r-nav{display:flex;gap:8px}
.r-nav button{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--root);border-radius:50%;background:none;color:var(--bone);cursor:pointer;transition:background .18s,color .18s,opacity .18s}
.r-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.r-nav button:hover:not(:disabled){background:var(--root);color:var(--ink)}
.r-nav button:disabled{opacity:.32;cursor:default}
.rail{--rg:clamp(10px,1.2vw,16px);--n:4;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--n) - 1) * var(--rg)) / var(--n));gap:var(--rg);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:8px 4px}
.rail::-webkit-scrollbar{display:none}
@media(hover:hover) and (pointer:fine){.rail{cursor:grab}}
.rail.drag{scroll-snap-type:none;cursor:grabbing;user-select:none;-webkit-user-select:none}
.rail>li{scroll-snap-align:start;min-width:0}
.end a{display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:220px;padding:clamp(16px,1.8vw,24px);background:linear-gradient(var(--veil),var(--veil)),var(--earth) url(img/smoke-960.webp) 50% 50%/cover;color:#f2eadd;transition:background-color .18s}
.end b{font:300 clamp(1.6rem,2.2vw,2.2rem)/1.05 var(--black);text-transform:uppercase;letter-spacing:.04em;color:#f7f1e6}
.end span{margin-top:6px;font-size:1rem;line-height:1.35}
.end i{display:grid;place-items:center;width:48px;height:48px;margin-top:14px;border:1px solid #f2eadd;border-radius:50%;transition:background .18s,color .18s}
.end svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.end a:hover i,.end a:focus-visible i{background:#f2eadd;color:var(--ink)}
.product a{display:block;text-align:center}
/* each item on its own small plate: the photo as a clean rectangle with the gold plate mark, as in II and the bundle */
.product img{display:block;width:calc(100% - 14px);margin:7px;aspect-ratio:6/5;object-fit:cover;background:#000;box-shadow:0 0 0 1px var(--fr-in);outline:1px solid var(--fr-out);outline-offset:4px;transition:outline-color .25s}
.product a:hover img,.product a:focus-visible img{outline-color:rgba(217,189,140,.7)}
.p-n{display:block;margin-top:18px;font:400 .96rem/1.35 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--bone);transition:color .2s}
.p-s{display:block;margin-top:3px;font-size:.96rem;color:var(--ash)}
.p-p{display:block;margin-top:9px;font-weight:600;color:var(--bone)}
.p-o{display:inline-block;margin-top:6px;padding:4px 0;font-size:.96rem;color:var(--bone);text-decoration:underline;text-decoration-color:var(--root);text-underline-offset:.22em}
.product a:hover .p-o{color:#fff}
/* the same hover as the film rail: the double frame lights up and the name turns gold, nothing moves */
.product a:hover .p-n,.product a:focus-visible .p-n{color:var(--root)}

/* ---------- V · scattered sheet, then the moving pictures ---------- */
.media{padding-bottom:var(--sec)}
.gal{--u:calc(var(--ww) / 12);position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:calc(var(--u) * .62);gap:clamp(18px,2vw,30px)}
.g-h{grid-column:1/6;grid-row:1/5;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:6px}
.g-h .word{--fs:clamp(3rem,5.6vw,5.6rem);line-height:1}
.g-h p{margin-top:clamp(12px,1.4vw,18px)}
.gal a.ph{position:relative;display:block;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--fr-in);outline:1px solid var(--fr-out);outline-offset:3px;transition:outline-color .25s}
.gal a.ph:hover,.gal a.ph:focus-visible{outline-color:rgba(217,189,140,.7)}   /* the rails' hover: the outer frame lights up */
.gal a.ph img{width:100%;height:100%;object-fit:cover}
/* one closed block, no holes: every edge sits on the same column and row lines */
.g-a{grid-column:6/13;grid-row:1/8}
.g-b{grid-column:1/6;grid-row:5/11}
.g-c{grid-column:6/9;grid-row:8/11}
.g-d{grid-column:9/13;grid-row:8/17}
.g-e{grid-column:1/9;grid-row:11/17}
.g-a img{object-position:50% 40%}.g-b img{object-position:60% 18%}.g-c img{object-position:100% 0}.g-d img{object-position:50% 30%}.g-e img{object-position:50% 30%}
.vid a{display:block}
.v-i{position:relative;display:block;width:calc(100% - 14px);margin:7px;aspect-ratio:16/9;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--fr-in);outline:1px solid var(--fr-out);outline-offset:4px;transition:outline-color .25s}
.v-i img{width:100%;height:100%;object-fit:cover}
.v-i i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border:1px solid var(--root);border-radius:50%;background:rgba(10,8,6,.62);transition:background .18s}
.v-i i::after{content:"";position:absolute;left:21px;top:17px;border:10px solid transparent;border-left:15px solid var(--root);border-right:0}
.vid a:hover .v-i i,.vid a:focus-visible .v-i i{background:rgba(10,8,6,.9)}
.vid a:hover .v-i,.vid a:focus-visible .v-i{outline-color:rgba(217,189,140,.7)}
.vid a:hover b,.vid a:focus-visible b{color:var(--root)}
.vid b{display:block;margin-top:18px;transition:color .2s;font:400 1rem/1.3 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.vid small{display:block;margin-top:3px;font-size:.96rem;line-height:1.3;color:var(--ash)}
.media .end a{min-height:100%}

/* ---------- VI · the poster under the spotlight, the way to reach you beside it ---------- */
.spot{position:absolute;z-index:-1;left:calc(var(--edge) + var(--ww) * .225);top:-180px;width:min(1460px,118vw);aspect-ratio:1;transform:translateX(-50%);background:url(img/spot.webp) center/contain no-repeat;opacity:.16;pointer-events:none;-webkit-mask-image:linear-gradient(transparent 15%,#000 34%);mask-image:linear-gradient(transparent 15%,#000 34%)}   /* only a faint glow now */
.book{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(60px,6vw,96px) var(--sec)}
.bk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:center}
/* the band photograph as a printed plate, like the pictures in II and IV; the headline now leads the right column */
.poster{position:relative;margin:10px}
.po-tree{aspect-ratio:4/3;width:100%;overflow:hidden;outline:1px solid var(--fr-out);outline-offset:5px;box-shadow:0 0 0 1px var(--fr-in),0 30px 70px -24px rgba(0,0,0,.9);background:#000}
.po-tree img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.bk-side .word{--fs:clamp(2.8rem,5vw,5rem);display:block;line-height:1.04;white-space:normal;margin:0 0 clamp(14px,1.6vw,22px)}
.bk-side .rows{margin-top:clamp(20px,2.4vw,32px)}

/* ---------- footer ---------- */
.bar{position:relative;z-index:1;background:linear-gradient(var(--veil),var(--veil)),var(--earth) url(img/smoke-960.webp) 50% 50%/cover}
.bar-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px clamp(16px,3vw,44px);width:var(--ww);min-height:88px;margin-inline:auto;padding-block:12px}
.bar .cap{color:#fff}
.bar a{display:grid;place-items:center;width:46px;height:46px;color:#fff;transition:color .15s,transform .15s}
.bar a:hover,.bar a:focus-visible{color:var(--root);transform:translateY(-2px)}
.bar svg{width:28px;height:28px;fill:currentColor}
/* the footer closes the page with the same smoke as the hero, without the band */
/* the footer waits pinned under the page and is uncovered as main and the bar slide up off it (a curtain, not a scroll);
   if it is taller than the screen (very short landscape phones) script.js drops it back into the normal flow */
.f-gate{height:0}
.foot{position:sticky;bottom:0;z-index:0;isolation:isolate;overflow:hidden;background:#000;padding-top:clamp(70px,10vw,160px)}
.foot::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 45%,transparent 22%,rgba(6,7,8,.8));pointer-events:none}
.foot::after{content:"";position:absolute;z-index:-1;inset:-12% -18%;background:url(img/smoke-1600.webp) 50% 50%/cover no-repeat;mix-blend-mode:screen;opacity:.42;pointer-events:none;animation:drift 38s ease-in-out infinite alternate-reverse}
.f-mark{position:relative;width:min(560px,72vw);margin-inline:auto}
.f-logo{width:100%;filter:drop-shadow(0 8px 26px #000)}
.gl.foot-gl .f-logo{visibility:hidden}
.f-ash{position:absolute;left:-16%;top:-34%;width:132%;height:168%;pointer-events:none}
html:not(.foot-gl) .f-ash{display:none}
.f-row{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 24px;width:var(--ww);margin:clamp(40px,6vw,88px) auto 0;padding-block:14px;border-top:1px solid #2a2730;font-size:.98rem;color:var(--ash)}
.f-row a{display:inline-block;padding:4px 0;margin-left:20px;color:var(--text)}
.f-row a:first-child{margin-left:0}
.f-row a:hover{color:#fff}

/* ---------- V7 · the broadsheet language ---------- */
/* print dust over everything, one fixed layer so it never repaints on scroll */
/* a fine film grain over the whole page, like a printed plate; no dust or scratches */
body::after{content:"";position:fixed;z-index:45;inset:0;background:url(img/grain.webp) 0 0/256px;opacity:.7;pointer-events:none}
/* folio: every chapter opens with a label, its numeral between double hairlines, and a label */
.folio{--fl:rgba(168,142,112,.5);display:grid;grid-template-columns:auto minmax(40px,1fr) auto minmax(40px,1fr) auto;align-items:center;gap:clamp(12px,1.6vw,22px);margin-bottom:clamp(52px,6.4vw,112px);font:400 clamp(.7rem,.8vw,.78rem)/1.3 var(--caps);letter-spacing:.3em;text-transform:uppercase;color:var(--fc,var(--ash))}
.folio span{display:contents;white-space:nowrap}
.folio span:first-child::after,.folio span:last-child::before{content:"";height:4px;border-top:1px solid var(--fl);border-bottom:1px solid color-mix(in srgb,var(--fl) 55%,transparent)}
.folio b{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);font:300 clamp(2.2rem,3.2vw,3.1rem)/1 var(--black);letter-spacing:.06em;color:var(--fn,var(--tan))}
.folio b::before,.folio b::after{content:"";width:7px;height:7px;border:1px solid var(--fl);transform:rotate(45deg)}
.about .wrap{padding-top:clamp(16px,2vw,30px)}
.shows .folio{--fc:#e2d6c3;--fl:rgba(236,222,199,.45);--fn:#f1e7d8;margin-bottom:clamp(40px,5vw,88px)}
.bk>.folio{grid-column:1/-1;margin-bottom:clamp(20px,1.8vw,28px)}
/* the plate carries its own small caption, the way an engraving is labelled */
.tag{position:absolute;z-index:2;left:clamp(14px,1.6vw,24px);top:clamp(12px,1.4vw,20px);padding:6px 10px;font:400 .72rem/1.2 var(--caps);letter-spacing:.24em;text-transform:uppercase;color:#e9e2d4;background:rgba(10,8,6,.62);box-shadow:inset 0 0 0 1px rgba(217,189,140,.4)}
/* label and value, the band file */
/* shows: the next one open, the rest folded; a chevron, never a plus (no crosses) */
.gig{border-top:1px solid rgba(236,222,199,.34)}
.gig summary{display:grid;grid-template-columns:clamp(76px,6.6vw,96px) minmax(0,1fr) auto;gap:0 16px;align-items:center;padding:12px 0;cursor:pointer;list-style:none;transition:background .15s}
.gig summary::-webkit-details-marker{display:none}
.gig summary:hover{background:rgba(14,10,7,.35)}
.gig time{font:300 clamp(2.2rem,3vw,2.9rem)/.95 var(--black);color:#fff;text-align:center}
.gig time span{display:block;margin-top:4px;font:400 .72rem/1.2 var(--caps);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.g-t{min-width:0}
.g-t b{display:block;font:400 clamp(1rem,1.2vw,1.12rem)/1.3 var(--caps);letter-spacing:.18em;text-transform:uppercase;color:#fff}
.g-t small{display:block;margin-top:2px;font-size:.98rem;line-height:1.35;color:#ecdfcb}
.g-x{width:20px;height:20px;margin-right:4px;fill:none;stroke:#fff;stroke-width:1.6;transition:transform .25s}
.gig[open] .g-x{transform:rotate(180deg)}
.gig[open] .g-t small{display:none}
.gig .spec{margin:0 0 16px calc(clamp(76px,6.6vw,96px) + 16px)}
.gig.none{padding:14px 0}
.gig.none b{display:block;font:400 1.05rem/1.3 var(--caps);letter-spacing:.18em;text-transform:uppercase;color:#fff}
.gig.none small{color:#ecdfcb}
.spec{display:grid;margin-top:10px;font-size:.98rem;line-height:1.35}
.spec>div{display:grid;grid-template-columns:5.6em minmax(0,1fr);gap:12px;align-items:baseline;padding:6px 0;border-top:1px solid var(--sl,rgba(236,222,199,.24))}
.spec dt{font:400 .74rem/1.3 var(--caps);letter-spacing:.22em;text-transform:uppercase;color:var(--st,#e2d6c3)}
.spec dd{color:var(--sd,#f4ece0)}
.spec dd a{display:inline-flex;align-items:center;gap:5px;padding:2px 0;color:#fff;text-decoration:underline;text-decoration-color:rgba(236,222,199,.5);text-underline-offset:.2em}
.spec dd a svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.spec dd a:hover{text-decoration-color:#fff}
/* hero: a coordinate line under the buttons, like the small print on a bill */
.h-geo{display:flex;align-items:center;gap:14px;margin:0 0 clamp(20px,2.4vw,36px);font:400 .74rem/1.3 var(--caps);letter-spacing:.3em;text-transform:uppercase;color:var(--ash)}
.h-geo i{flex:1;max-width:clamp(60px,8vw,130px);height:4px;border-top:1px solid rgba(168,142,112,.5);border-bottom:1px solid rgba(168,142,112,.27)}
/* rail end cards and the featured product sit in an inner hairline frame */
.end a{outline:1px solid rgba(242,234,221,.36);outline-offset:-9px}
.m-feat{border-top:0;padding-top:16px;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,linear-gradient(color-mix(in srgb,var(--line) 55%,transparent),color-mix(in srgb,var(--line) 55%,transparent)) 0 4px/100% 1px no-repeat}
.rail-h{border-top:0;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,linear-gradient(color-mix(in srgb,var(--line) 55%,transparent),color-mix(in srgb,var(--line) 55%,transparent)) 0 4px/100% 1px no-repeat}
/* footer colophon: centred, spaced, quiet */
/* colophon: the two lines balanced either side of the same double rule and diamond as the chapter heads */
.colo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:clamp(16px,2vw,28px);margin-top:clamp(34px,4.4vw,60px);font:400 .74rem/1.3 var(--caps);letter-spacing:.32em;text-transform:uppercase;color:var(--ash)}
.colo span:first-child{order:1;justify-self:end;text-align:right;margin-right:-.32em}   /* the tracking after the last letter would push it off centre */
.colo::after{content:"";order:2;width:170px;height:11px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='11'><g fill='none' stroke='%23a88e70' stroke-opacity='.6'><path d='M0 3.5h68M102 3.5h68'/><path d='M0 7.5h68M102 7.5h68' stroke-opacity='.3'/><path d='M85 1.2l4.3 4.3-4.3 4.3-4.3-4.3z'/><path d='M76 5.5h.01M94 5.5h.01' stroke-width='0'/></g></svg>") center/contain no-repeat}
.colo span:last-child{order:3;justify-self:start}
.f-row{border-top:0;background:linear-gradient(#2a2730,#2a2730) 0 0/100% 1px no-repeat,linear-gradient(#1b1a20,#1b1a20) 0 4px/100% 1px no-repeat;padding-top:18px}
@media(max-width:820px),(orientation:portrait){
  .h-geo{justify-content:center}
}
@media(max-width:640px){
  .folio{grid-template-columns:minmax(0,1fr);row-gap:8px;letter-spacing:.2em;text-align:center}
  .folio b{grid-column:1/-1;grid-row:1;justify-self:center;font-size:2.4rem}
  .folio b::before,.folio b::after{width:6px;height:6px}
  .folio span{display:flex;align-items:center;min-width:0}
  .folio span:first-child::after,.folio span:last-child::before{display:none}
  .folio span,.folio span:last-child{justify-content:center;justify-self:center;text-align:center}
  .folio span{white-space:normal}
  .h-geo{display:none}
  .cta{flex-wrap:nowrap;gap:12px}
  .cta .btn{flex:1 1 0;max-width:210px;min-height:50px;padding-inline:12px;letter-spacing:.16em}
  .colo{grid-template-columns:minmax(0,1fr);row-gap:12px;justify-items:center;letter-spacing:.24em}
  .colo span:first-child,.colo span:last-child{justify-self:center;text-align:center;margin-right:0}
  .colo::after{width:120px}
  .tag{font-size:.64rem;letter-spacing:.18em}
}
@media(orientation:landscape) and (max-height:540px){.h-geo{display:none}}

/* ---------- lightbox ---------- */
#lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;background:rgba(10,9,8,.97);color:var(--bone)}
#lb[open]{display:flex;align-items:center;justify-content:center}
#lb::backdrop{background:#000}
#lb figure{max-width:min(1400px,92vw);text-align:center}
#lb img{max-height:84vh;width:auto;margin-inline:auto}
#lb figcaption{margin-top:12px;font-size:1rem;color:var(--text)}
#lb button{position:absolute;min-width:52px;min-height:52px;background:none;border:0;color:var(--bone);font:400 2.4rem/1 var(--body);cursor:pointer}
#lb button:hover{color:var(--root)}
.lb-x{top:12px;right:14px}.lb-p{left:8px;top:50%;transform:translateY(-50%)}.lb-n{right:8px;top:50%;transform:translateY(-50%)}

/* ---------- legal pages ---------- */
/* legal pages: the same ground as the home page (etch, veil, smoke) held still behind the text, and a quiet header with a gold hairline */
.legal{background:var(--soot)}
.legal::before{content:"";position:fixed;z-index:-1;inset:0;background:url(img/waves.webp) 0 0/640px,linear-gradient(rgba(4,4,6,.3),rgba(4,4,6,.3)),url(img/etch-2000.webp) 50% 50%/cover no-repeat,linear-gradient(rgba(9,8,12,.8),rgba(9,8,12,.8)),url(img/smoke-1600.webp) 50% 50%/cover no-repeat;background-blend-mode:normal,normal,screen,normal,normal;pointer-events:none}
.legal main::before{content:none}
.legal main{z-index:auto;isolation:auto;clip-path:none}
.legal header{position:relative;padding:22px var(--edge);background:rgba(5,5,7,.72);border-bottom:1px solid rgba(168,142,112,.42);box-shadow:0 4px 0 -3px rgba(168,142,112,.2)}
.legal header img{width:170px}
.legal main{width:var(--ww);max-width:780px;margin-inline:auto;padding-block:48px 80px;overflow-wrap:anywhere}
.legal h1{font:300 clamp(2.4rem,6vw,4rem)/1 var(--black);text-transform:uppercase;letter-spacing:.03em;color:var(--root);margin-bottom:1.2rem}
.legal h2{font:300 1.6rem/1.2 var(--black);text-transform:uppercase;letter-spacing:.04em;color:var(--bone);margin:2.2rem 0 .6rem}
.legal h3{font:600 1.1rem/1.3 var(--body);color:var(--bone);margin:1.6rem 0 .5rem}
.legal p{margin-top:.7rem}
.legal strong{font-weight:600;color:var(--bone)}
.legal a{color:var(--tan);text-decoration:underline}

/* ---------- smaller screens ---------- */
@media(max-width:1420px){.pager{display:none}}   /* below this the margin is too narrow to hold it */
@media(max-width:1020px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .crew li:hover{flex-grow:1.4}
}
@media(max-width:1020px){
  .nav-g{display:none}
  .nav-in{display:flex;justify-content:space-between;height:66px}
  .brand img{height:48px}
  .burger{display:flex}
  .drawer{position:fixed;inset:66px 0 0;z-index:49;display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,1.6vh,14px);padding-inline:var(--edge);background:#060608;visibility:hidden}
  .open .drawer{visibility:visible}
  .drawer a{padding:4px 0;font:300 clamp(2rem,9vw,3.2rem)/1.15 var(--black);text-transform:uppercase;letter-spacing:.04em;color:var(--bone)}
  .drawer a:hover{color:var(--root)}
  /* the chapter numeral before every item, the same Saga numbering as the folios */
  .drawer a{display:grid;grid-template-columns:clamp(54px,14vw,84px) auto;align-items:baseline;justify-content:start}
  .drawer a i{font:300 clamp(1.1rem,4.4vw,1.5rem)/1 var(--black);font-style:normal;letter-spacing:.06em;color:var(--tan)}
  .drawer a.on i,.drawer a:hover i{color:var(--root)}
  main::before{background-image:linear-gradient(transparent,transparent),linear-gradient(transparent,transparent),url(img/waves.webp),linear-gradient(rgba(4,4,6,.3),rgba(4,4,6,.3)),url(img/etch-1200.webp),linear-gradient(rgba(9,8,12,.8),rgba(9,8,12,.8)),url(img/smoke-960.webp)}
  .rail{--n:3}
  /* three over two: the zero-height ::after forces the line break, heights are fixed so a row never jumps on hover */
  .crew{row-gap:0}
  .crew::after{content:"";flex:0 0 100%;height:0;order:1}
  .crew li:nth-child(n+4){order:2;margin-top:3px}
  .crew img{height:44vw}
  .crew li:nth-child(n+4) img{height:58vw}
}
@media(max-width:820px),(orientation:portrait){
  .hero{height:auto;overflow:hidden;padding-bottom:0}
  .h-copy{position:relative;left:auto;top:auto;bottom:auto;width:var(--ww);margin-inline:auto;padding:clamp(28px,6svh,72px) 0 0;display:block;text-align:center}
  .h-logo{width:min(100%,520px);margin-inline:auto}
  .cta{justify-content:center;text-align:center}
  .wedge-box{position:relative;height:calc(min(128vw,860px) * .403 + clamp(24px,5vw,56px));margin-top:16px}   /* just the band plus a little sky: no dead gap under the buttons */
  /* more air inside the group instead: headline, year, logo and buttons breathe */
  .h-top{margin-bottom:clamp(14px,2.6vw,24px)}
  .h-geo{margin:0 0 clamp(18px,3.4vw,30px)}
  .cta{margin-top:clamp(26px,4.4vw,44px)}
  .hero::before{background:radial-gradient(ellipse 90% 60% at 50% 68%,transparent 20%,rgba(6,7,8,.8))}
  .h-band{right:50%;bottom:0;transform:translateX(46.6%);width:min(128vw,860px)}
  .h-fade{height:14%}
  .ab-row,.ab-row.r2{grid-template-columns:minmax(0,1fr);margin-top:0}
  .ab-row.r2 .ab-p{grid-row:1}
  .ab-row.r2{margin-top:clamp(36px,9vw,56px)}
  .steps{grid-template-columns:minmax(0,1fr);gap:0;margin-top:clamp(22px,5vw,36px)}
  .steps::before{left:7px;right:auto;top:6px;bottom:10px;width:1px;height:auto}
  .steps li{padding:0 0 18px 34px}
  .m-hero{grid-template-columns:minmax(0,1fr)}
  .m-burst{order:-1;margin:10px 10px 18px}
  .bk{grid-template-columns:minmax(0,1fr)}
  .spot{left:50%}
  .poster{width:min(calc(100% - 20px),520px);margin-inline:auto}
  .shows{flex-direction:column;align-items:stretch;min-height:0;background-image:linear-gradient(transparent,transparent),linear-gradient(transparent,transparent),url(img/etch-1200.webp),linear-gradient(transparent,transparent),linear-gradient(transparent,transparent),url(img/smoke-960.webp)}
    .sh-t{order:1;padding-bottom:clamp(20px,5vw,40px)}
  .sh-col{width:100%}
  /* phones: the dates on the dark sheet, the stage below it; the photo fills only that lower band so the singer is in view */
  .shows{--sb:min(96vw,600px);padding-bottom:var(--sb)}
  .sh-earth{inset:0 0 auto;height:calc(100% - var(--sb) + 150px);clip-path:url(#t-shows-m);background:rgba(4,4,6,.96)}   /* on phones the photo is only the lower band, so the sheet stays nearly solid and hides its top edge */
  .sh-photo{inset:auto 0 0;height:calc(var(--sb) + 140px);object-position:55% 40%;opacity:.65}
  .gal{grid-auto-rows:auto;gap:18px}
  .gal::before{display:none}
  .g-h{grid-column:1/-1;grid-row:auto;padding-bottom:8px}
  .gal a.ph{grid-row:auto;aspect-ratio:3/2}
  .gal a.g-a,.gal a.g-e{grid-column:1/-1}
  .gal a.g-b,.gal a.g-c,.gal a.g-d{grid-column:span 6;aspect-ratio:1}
  .gal a.g-d{grid-column:1/-1;aspect-ratio:3/2}
}
@media(max-width:640px){
  body{font-size:1.0625rem}
  .h-top{display:none}
  .wedge-box{height:min(calc(128vw * .403 + 20px),44svh)}
  .about .word.ink{--fs:clamp(2.2rem,10.5vw,3.2rem)}
  .crew{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:3px}
  .crew::after{display:none}
  .crew li:nth-child(n+4){order:0;margin-top:0}
  .crew li:first-child{grid-column:1/-1}
  .crew img,.crew li:nth-child(n+4) img{height:auto;aspect-ratio:3/4}
  .crew li:first-child img{aspect-ratio:5/6}
  :root{--tear:118px;--tear-w:1120px}
  .discs{grid-template-columns:minmax(0,340px);row-gap:clamp(56px,14vw,80px)}
  .d2{margin-top:0}
  .call{letter-spacing:.08em}
  .m-t .word{--fs:clamp(2.8rem,13vw,4.2rem)}
  .rail{--n:1.55}
  .media .rail{--n:1.2}
  .end a{min-height:200px}
  .f-row{justify-content:center;text-align:center}
}
/* phones held sideways: everything stays on one screen */
@media(orientation:landscape) and (max-height:540px){
  .hero{height:max(300px,calc(100svh - 76px))}
  .h-copy{width:min(38vw,420px);padding-bottom:0}
  .h-top{display:none}
  .cta{margin-top:8px}
  .btn{min-height:44px;padding:9px 18px;font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* breathing room between the dates and the Instagram / booking links */
.shows .rows>.gig:last-of-type{border-bottom:1px solid rgba(236,222,199,.34)}
.shows .rows>.gig+a{margin-top:clamp(32px,4vw,56px)}

/* ---------- section feeling: chapters alternate like pages, each carries its numeral in outline ---------- */
.rel,.merch,.media,.book{position:relative;isolation:isolate}
/* I, IV and VI lie on a deep green band between two hairlines, its surface pressed with faint waves; II, III and V stay on the smoke */
.rel::before,.merch::before,.book::before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(var(--gl2),var(--gl2)) calc(50% - var(--ww) / 2 - var(--lp)) 0/1px 100% no-repeat,linear-gradient(var(--gl2),var(--gl2)) calc(50% + var(--ww) / 2 + var(--lp)) 0/1px 100% no-repeat,url(img/waves.webp) 0 0/640px,linear-gradient(180deg,rgba(12,12,15,.78),rgba(7,7,9,.8) 30%,rgba(7,7,9,.8) 70%,rgba(12,12,15,.78)),url(img/etch-2000.webp) 50% 50%/cover;background-blend-mode:normal,normal,normal,normal,screen;pointer-events:none;--fd:clamp(90px,16vh,200px);-webkit-mask-image:linear-gradient(transparent,#000 var(--fd),#000 calc(100% - var(--fd)),transparent);mask-image:linear-gradient(transparent,#000 var(--fd),#000 calc(100% - var(--fd)),transparent)}
/* the chapter numeral, huge and only drawn as an outline, behind everything */
.rel::after,.merch::after,.media::after,.book::after{position:absolute;z-index:-1;top:clamp(20px,3vw,60px);right:var(--edge);font:300 clamp(14rem,30vw,30rem)/.8 var(--black);color:transparent;-webkit-text-stroke:1px rgba(168,142,112,.16);pointer-events:none;user-select:none}
.rel::after{content:"I"}.merch::after{content:"IV"}.media::after{content:"V"}.book::after{content:"VI"}
@media(max-width:640px){
  .rel::after,.merch::after,.media::after,.book::after{font-size:min(62vw,15rem);top:auto;bottom:clamp(40px,10vw,90px);-webkit-text-stroke-color:rgba(168,142,112,.13)}
  .rel::before,.merch::before,.book::before{background-image:linear-gradient(transparent,transparent),linear-gradient(transparent,transparent),url(img/waves.webp),linear-gradient(180deg,rgba(12,12,15,.78),rgba(7,7,9,.8) 30%,rgba(7,7,9,.8) 70%,rgba(12,12,15,.78)),url(img/etch-1200.webp);background-attachment:scroll}
}

/* crew: the portrait under the cursor takes on a sepia ink */
@media(hover:hover) and (pointer:fine){.crew li:hover::before{opacity:1}}

/* ---------- soft seams: sections dissolve into each other instead of meeting at an edge ---------- */
.shows::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;--fd:clamp(80px,14vh,170px);
  background:linear-gradient(#000,transparent var(--fd),transparent calc(100% - var(--fd)),rgba(10,9,13,.96))}
.crew{box-shadow:0 0 70px 36px rgba(0,0,0,.85)}
/* content rises into place as its chapter arrives */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,.8,.24,1)}
.rv.in{opacity:1;transform:none}

/* ---------- motion: the hero breathes, the page moves in layers as you scroll ---------- */
/* a second veil of smoke drifts slowly across the hero, and the fog over the band's feet rolls */
.hero::after{content:"";position:absolute;z-index:0;inset:-12% -18%;background:url(img/smoke-1600.webp) 50% 50%/cover no-repeat;mix-blend-mode:screen;opacity:.42;pointer-events:none;animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-6%,2%,0) scale(1.05)}to{transform:translate3d(6%,-3%,0) scale(1.18)}}
/* parallax: script.js sets --py on each layer; the translate property adds to any transform already there */
[data-px]{translate:0 var(--py,0px)}
.rel::after,.merch::after,.media::after,.book::after{translate:0 var(--np,0px)}
.gal a.ph img{scale:1.12}
@media(prefers-reduced-motion:reduce){
  .hero::after,.foot::after{animation:none}
  [data-px]{translate:none}.gal a.ph img{scale:none}
}

/* ---------- lighter on older devices (four cores or fewer, little memory, data saver): the page stays the same, the extras rest ---------- */
.lite .hero::after,.lite .foot::after{display:none}
.lite body::after{display:none}
.lite [data-px]{translate:none}
.lite .gal a.ph img{scale:none}
/* the drifting smoke rests while the hero is off screen */
.hero.away::after,.foot:not(.near)::after{animation-play-state:paused}

/* hero sky: the storm-cloud video (sky.js) over the still smoke photo and under the vignette, kept dark; it replaces the CSS drift once playing */
.h-sky{position:absolute;z-index:-1;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.hero.sky .h-sky{opacity:.72}
.hero.sky::after{display:none}
.f-sky{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.foot.sky .f-sky{opacity:.72}
.foot.sky::after{display:none}
.foot.tall{position:relative}


/* previews: 30 seconds of each track, one at a time. A quiet index under the cover: play mark, number, title, length,
   and a gold hairline that runs along the row while it plays. The stream links below are for the full songs. */
.disc-p{width:100%;margin:clamp(22px,2.4vw,30px) 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.disc-p li{position:relative;border-bottom:1px solid var(--line)}
.disc-p button{position:relative;display:grid;grid-template-columns:30px 2.2em minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:46px;padding:8px 2px;border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:color .2s}
.disc-p span{font:400 .82rem/1 var(--caps);letter-spacing:.08em;color:var(--tan)}
.disc-p b{font-weight:500;color:var(--bone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .2s}
.disc-p time{font-size:.92rem;color:var(--ash);font-variant-numeric:tabular-nums}
.disc-p button:hover b,.disc-p button:focus-visible b,.disc-p button.on b{color:var(--root)}
.disc-p button:hover i,.disc-p button:focus-visible i,.disc-p button.on i{border-color:var(--root)}
.disc-p button.on i{background:rgba(217,189,140,.08)}
.disc-p button:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
.disc-l{margin-top:22px}

/* docked preview player: a slim plate that slides up from the lower edge once a preview runs and the covers are out of
   sight; same double frame as the buttons, gold controls, a seekable hairline. */
.dock{position:fixed;z-index:46;left:50%;bottom:clamp(12px,1.8vw,22px);display:grid;grid-template-columns:48px minmax(0,1fr) auto minmax(140px,1.1fr) auto;align-items:center;gap:clamp(10px,1.4vw,20px);width:min(calc(100% - 32px),860px);padding:10px 12px 10px 10px;border:1px solid rgba(217,189,140,.5);outline:1px solid rgba(168,142,112,.26);outline-offset:3px;background:rgba(6,6,8,.94);box-shadow:0 18px 50px rgba(0,0,0,.7);transform:translate(-50%,calc(100% + 40px));opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
.dock.up{transform:translate(-50%,0);opacity:1}
.dk-c{width:48px;height:48px;object-fit:cover;box-shadow:0 0 0 1px var(--fr-in)}
.dk-t{margin:0;min-width:0;line-height:1.25}
.dk-t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 .9rem/1.3 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
.dk-t span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;color:var(--tan)}
.dk-b{display:flex;align-items:center;gap:4px}
.dock button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:none;color:var(--tan);cursor:pointer;transition:color .2s,background .2s}
.dock button:hover,.dock button:focus-visible{color:var(--root);background:rgba(217,189,140,.07)}
.dock button:focus-visible,.dk-line:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
.dk-play{width:44px!important;height:44px!important;border:1px solid var(--root)!important;color:var(--root)!important}
.dk-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;font-size:.82rem;color:var(--ash);font-variant-numeric:tabular-nums}
.dk-x{width:32px!important;height:32px!important;color:var(--ash)!important}
@media(max-width:640px){
  .h-copy{padding-top:clamp(22px,5svh,44px)}
  .dock{grid-template-columns:44px minmax(0,1fr) auto auto;grid-template-areas:"c t b x" "r r r r";row-gap:6px;padding:8px 8px 6px}
  .dk-c{grid-area:c;width:44px;height:44px}.dk-t{grid-area:t}.dk-b{grid-area:b}.dk-x{grid-area:x}.dk-bar{grid-area:r}
  .dk-prev{display:none!important}
}
@media(prefers-reduced-motion:reduce){.dock{transition:opacity .2s}}

/* play / pause marks (SVG, set by previews.js): a ring with a rounded triangle, or two rounded bars while playing */
.disc-p i,.v-p i{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(217,189,140,.45);border-radius:50%;color:var(--tan);transition:border-color .2s,background .2s,color .2s}
.disc-p svg,.v-p svg,.dk-play svg{display:block;width:22px;height:22px;fill:currentColor}
.disc-p .ic-pause,.disc-p .on .ic-play,.v-p .ic-pause,.v-p .on .ic-play,.dock .dk-play .ic-pause,.dock.playing .dk-play .ic-play{display:none}
.disc-p .on .ic-pause,.v-p .on .ic-pause,.dock.playing .dk-play .ic-pause{display:block}
.disc-p button:hover i,.disc-p button:focus-visible i,.disc-p button.on i{border-color:var(--root);color:var(--root)}
.disc-p button.on i{background:rgba(217,189,140,.1)}
.disc-p button.on time{color:var(--root)}
.dk-play svg{width:28px;height:28px}
.dock .dk-prev svg,.dock .dk-next svg{width:16px;height:16px;fill:currentColor}
.dk-x svg{width:18px;height:18px}

/* time lines: a hairline with a gold fill and a diamond marker; drag it, click it, or use the arrow keys */
.tl{position:relative;height:22px;cursor:pointer;touch-action:none}
.tl::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:rgba(168,142,112,.35)}
.tl u{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:0;background:var(--root);text-decoration:none}
.tl u::after{content:"";position:absolute;right:-4.5px;top:50%;width:9px;height:9px;margin-top:-4.5px;background:var(--root);box-shadow:0 0 0 1.5px #0a090c;transform:rotate(45deg);transition:transform .15s}   /* centred on the line */
.tl:hover u::after,.tl.drag u::after,.tl:focus-visible u::after{transform:rotate(45deg) scale(1.2)}
.tl:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
/* in the track list the line only opens under the row that plays */
.dp-line{height:0;margin:0 4px;overflow:hidden;opacity:0;transition:height .3s ease,opacity .3s ease}
.disc-p li.open .dp-line,.v-p li.open .dp-line{height:26px;opacity:1;overflow:visible}
@media(prefers-reduced-motion:reduce){.dp-line{transition:none}}

/* Impressum / Datenschutz: addresses stored backwards and turned round for display, so simple scrapers get gibberish */
.addr{unicode-bidi:bidi-override;direction:rtl;text-align:left}
/* controls are not text: no accidental selection on tap, drag or double click */
.nav,.pager,.btn,.cta,.dock,.disc-p button,.tl,.disc-l,.rail,.gal,.h-logo,.ash,canvas,.p-o,.m-buy{-webkit-user-select:none;user-select:none}
img{-webkit-user-drag:none}




/* opener: the short statement between hero and music */
.opener{padding-block:clamp(72px,9vw,140px) clamp(8px,2vw,24px);text-align:center}
.opener h2{font:500 clamp(1.9rem,3vw,3rem)/1.1 var(--black);color:var(--root);margin-bottom:.45em}
.opener p{max-width:34ch;margin-inline:auto;font-size:clamp(1rem,1.2vw,1.2rem);color:var(--text)}

.foot:not(.near){visibility:hidden}   /* the pinned footer is not drawn while the page covers it: nothing can flash through mid-scroll */

/* verse: one line from Dystopia after the band's story, set like an inscription between two chapters */
.verse{padding-block:var(--sec);text-align:center}
.v-rule{position:relative;width:min(560px,70%);height:4px;margin-inline:auto;border-top:1px solid rgba(168,142,112,.45);border-bottom:1px solid rgba(168,142,112,.24)}
.v-rule i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border:1px solid var(--root);background:var(--soot);transform:rotate(45deg)}
.v-q{margin:clamp(40px,5vw,72px) auto clamp(28px,3vw,44px)}
.v-q p{font:400 clamp(2.1rem,5.4vw,5.2rem)/1.06 var(--black);letter-spacing:-.005em;margin:0}
.v-q span{color:#6e6c68;transition:color .9s ease}
.v-q span.lit{color:var(--root)}
.v-p{list-style:none;margin:0 auto clamp(40px,5vw,72px);padding:0;display:inline-block;text-align:left}
.v-p button{display:flex;align-items:center;gap:14px;background:none;border:0;padding:0;color:var(--text);cursor:pointer;font:inherit}
.v-p b{font:400 .78rem/1 var(--caps);letter-spacing:.24em;text-transform:uppercase;color:var(--bone)}
.v-p .v-s{font:400 .78rem/1 var(--caps);letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}
.v-p .v-s::before{content:"·";margin-right:14px}
.v-p time{display:none}
.v-p .dp-line{margin-top:10px;width:min(360px,80vw)}
.v-p button:hover i,.v-p button:focus-visible i,.v-p button.on i{border-color:var(--root)}
.v-p button:hover b,.v-p button.on b{color:var(--root)}
@media(prefers-reduced-motion:reduce){.v-q span{color:var(--root)}}
@media(max-width:640px){.v-q p{font-size:clamp(1.5rem,7.4vw,2.2rem)}.v-p b,.v-p .v-s{letter-spacing:.18em}}
/* verse: quotation marks, the opening one hanging into the margin so the words stay centred */
.v-q p::before,.v-q p::after{color:var(--root);opacity:.55}
.v-q p::before{content:"“";margin-left:-.42em}
.v-q p::after{content:"”"}

/* phones: on load the logo rises from the ash first, the buttons and the band follow (ash.js sets .hero-in);
   without the ash, or after 3 s at the latest, they are simply there */
@media(max-width:820px){
  .hero .cta,.hero .h-band{transition:opacity .7s ease,translate .9s cubic-bezier(.16,.8,.24,1)}
  .hero .h-band{transition-delay:.15s}
  .gl:not(.ash-wait-off):not(.hero-in) .hero .cta,.gl:not(.ash-wait-off):not(.hero-in) .hero .h-band{opacity:0;translate:0 16px;animation:hero-late .7s ease 3s forwards}
}
@keyframes hero-late{to{opacity:1;translate:0 0}}
/* phones and tablets: no curtain. Mobile browsers resize the screen while their address bar slides in and out,
   and the pinned footer flashed through the page. There it simply follows the content. */
@media(max-width:820px),(hover:none){.foot{position:relative}}

/* the social bar frames the screen at the bottom, like the nav at the top; when the footer arrives it travels up with it */
:root{--barh:60px}
.bar{position:sticky;bottom:0;z-index:40;box-shadow:0 -1px 0 #24222a,0 -4px 0 #060608,0 -5px 0 #24222a,0 -14px 30px rgba(0,0,0,.45)}   /* the nav's double hairline, mirrored */
.bar-in{min-height:var(--barh);padding-block:6px;gap:4px clamp(10px,2.4vw,36px)}
.bar a{width:40px;height:40px}
.bar svg{width:24px;height:24px}
.dock{bottom:calc(var(--barh) + clamp(10px,1.4vw,18px))}
@media(max-width:520px){:root{--barh:54px}.bar .cap{display:none}.bar-in{gap:4px 18px}}
/* iPhone: Safari lets the page run on under its floating address bar, below the pinned social bar.
   A black apron under the bar closes that gap; it steps aside as soon as the footer arrives. */
@media(max-width:820px),(hover:none){
  .bar::after{content:"";position:absolute;left:0;right:0;top:100%;height:160px;background:#000;pointer-events:none}
  .bar.free::after{display:none}
}
/* phones: no large outlined numerals or words behind the chapters */
@media(max-width:820px){.rel::after,.merch::after,.media::after,.book::after,.bg-word{display:none}}
.folio bdi{display:contents}   /* the untranslatable numeral stays in the same line as "Chapter" */
/* crew: a dark fade under each name, so light shirts and arms never wash the caption out */
.crew li::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:46%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55) 45%,rgba(0,0,0,.88));pointer-events:none}
.crew b,.crew span{text-shadow:0 2px 6px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.8)}

/* language switch: two small flags at the right edge of the nav, muted until hovered; the current one sits in the gold double frame */
.nav{position:sticky}
.lang{position:absolute;right:var(--edge);top:50%;display:flex;gap:10px;transform:translateY(-50%)}
.lang a{display:flex;align-items:center;gap:8px;padding:6px 4px;font:400 .72rem/1 var(--caps);letter-spacing:.2em;color:#8f8f8f;transition:color .2s}
.lang svg{display:block;width:22px;height:14px;filter:saturate(.45) brightness(.82);opacity:.55;transition:filter .2s,opacity .2s}
.lang a[aria-current]{color:var(--root)}
.lang a[aria-current] svg{opacity:1;filter:saturate(.7) brightness(.95);box-shadow:0 0 0 1px var(--fr-in);outline:1px solid var(--fr-out);outline-offset:2px}
.lang a:hover,.lang a:focus-visible{color:#fff}
.lang a:hover svg,.lang a:focus-visible svg{opacity:1;filter:none}
@media(max-width:1180px) and (min-width:1021px){.lang span{display:none}}
@media(max-width:1020px){.lang{position:static;transform:none;margin-left:auto;margin-right:18px;gap:6px}.lang span{display:none}.lang a{padding:8px 3px}}
/* nav and social bar: the same gold double hairline as the seam under the band photo, fading out to both sides */
.nav,.bar{--g:rgba(168,142,112,.55);--g2:rgba(168,142,112,.28);--rule:linear-gradient(90deg,transparent,var(--g) 22%,var(--g) 78%,transparent);--rule2:linear-gradient(90deg,transparent,var(--g2) 22%,var(--g2) 78%,transparent)}
.nav{box-shadow:none}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;background:#060608;background:var(--rule) 0 0/100% 1px no-repeat,var(--rule2) 0 4px/100% 1px no-repeat,linear-gradient(#060608,#060608) 0 1px/100% 3px no-repeat;pointer-events:none}
.bar{box-shadow:0 -14px 30px rgba(0,0,0,.45)}
.bar::before{content:"";position:absolute;left:0;right:0;top:-5px;height:5px;background:var(--rule2) 0 0/100% 1px no-repeat,var(--rule) 0 4px/100% 1px no-repeat,linear-gradient(#060608,#060608) 0 1px/100% 3px no-repeat;pointer-events:none}
/* once the footer has arrived and the social bar travels with it, the bar is closed off below by the same double line */
.bar-in::before{content:"";position:absolute;z-index:2;left:0;right:0;bottom:-5px;height:5px;background:var(--rule) 0 0/100% 1px no-repeat,var(--rule2) 0 4px/100% 1px no-repeat;opacity:0;transition:opacity .4s ease;pointer-events:none}
.bar.free .bar-in::before{opacity:1}
/* nav and social bar share one dark ground */
.nav,.bar{background:#060608}
.nav::after{background:var(--rule) 0 0/100% 1px no-repeat,var(--rule2) 0 4px/100% 1px no-repeat}
.legal h1{font-size:clamp(1.3rem,6.2vw,2.8rem);line-height:1.1;margin-bottom:1.4rem;overflow-wrap:normal}
.legal h2{font-size:clamp(1.15rem,4.4vw,1.6rem)}   /* "Datenschutzerklärung" fits the column on every screen
/* hero: on landscape screens it fills exactly the space between the nav and the social bar, its gold seam tucked
   under the bar so only one line shows; scrolling lifts the seam out. Too narrow (62vw) or too short (540px): normal height. */
.seam-off .seam{display:none}
.bar a:hover,.bar a:focus-visible{transform:none}   /* social icons: colour only, no lift */
/* chapter pager: centred in the space between the nav and the social bar, and drawn above the bar */
.pager{z-index:45;top:calc(76px + (100vh - 76px - var(--barh,60px)) / 2)}
@media(max-height:560px){.pager{display:none}}   /* too little height for six numerals between nav and bar */
/* legal pages: the logo centred over the text column, the header in the same dark ground and gold double line as the main nav */
.legal header{display:flex;justify-content:center;background:#060608;border-bottom:0;box-shadow:none;--g:rgba(168,142,112,.55);--g2:rgba(168,142,112,.28)}
.legal header::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;background:linear-gradient(90deg,transparent,var(--g) 22%,var(--g) 78%,transparent) 0 0/100% 1px no-repeat,linear-gradient(90deg,transparent,var(--g2) 22%,var(--g2) 78%,transparent) 0 4px/100% 1px no-repeat;pointer-events:none}
.legal header img{width:150px}