/* ───────────────────────────────────────────────────────────
   KREMATORIET: test build
   PLACEHOLDER FONTS: change these three lines to swap typography.
   ─────────────────────────────────────────────────────────── */
:root{
  --font-display: "Syncopate", "Arial Black", "Helvetica Neue", sans-serif;   /* wordmark / AM Futurismo slot */
  --font-serif:   "Instrument Serif", "Times New Roman", Georgia, serif;      /* editorial headlines */
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* clinical labels */

  --void:#070606;
  --bone:#ebe6dc;
  --ash:#8f897f;
  --dim:rgba(235,230,220,.52);
  --hair:rgba(235,230,220,.16);
  --blood:#c4142f;
  --ember:#ff5a1f;
  --gut:clamp(16px, 2.4vw, 36px);
  --ease:cubic-bezier(.2,.7,0,1);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--void);-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--bone);background:var(--void);
  font-family:var(--font-mono);font-size:12px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
@media (hover:hover) and (pointer:fine){ body, a, button{cursor:none} }
::selection{background:var(--blood);color:var(--bone)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}

.display{font-family:var(--font-display);font-weight:700;text-transform:uppercase}
.serif{font-family:var(--font-serif);font-weight:400}
.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:10.5px}
.red{color:var(--blood)}
em{font-style:italic}

/* ── stage ── */
#stage{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1s 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)}}

/* ── chrome ── */
.chrome{position:fixed;z-index:20;pointer-events:none}
.chrome a,.chrome button{pointer-events:auto}
.chrome--top{top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:var(--gut);padding-bottom:0;mix-blend-mode:difference}
.brand{display:block;line-height:0}
.brand svg{height:13px;width:auto;fill:var(--bone);display:block}
.chrome__mid{color:var(--bone);display:flex;align-items:center;gap:8px;opacity:.75}
.rec{width:6px;height:6px;border-radius:50%;background:var(--blood);display:inline-block;animation:rec 1.6s steps(1) infinite}
@keyframes rec{50%{opacity:0}}
.chrome__nav{justify-self:end;display:flex;gap:clamp(14px,2vw,28px)}
.chrome__nav a,.chrome__nav button{position:relative;opacity:.8;transition:opacity .3s;letter-spacing:.14em;font-size:10.5px;text-transform:uppercase}
.chrome__nav a:hover,.chrome__nav button:hover{opacity:1}
.chrome__nav button b{font-weight:400;color:var(--blood)}
.chrome__nav button[aria-pressed="true"] b{color:var(--bone)}
body.sound-pending .chrome__nav button b{animation:rec 1s steps(1) infinite}
.sound-hint{position:fixed;left:50%;bottom:96px;z-index:22;transform:translate(-50%,12px);display:flex;align-items:center;gap:12px;
  padding:12px 18px;border:1px solid rgba(196,20,47,.55);background:rgba(7,6,6,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--bone);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .8s, transform .8s var(--ease)}
body.sound-pending .sound-hint{opacity:1;transform:translate(-50%,0);animation:hintPulse 2.4s ease-in-out infinite}
@keyframes hintPulse{0%,100%{border-color:rgba(196,20,47,.35)}50%{border-color:rgba(196,20,47,.9)}}
@media (max-width:860px){.sound-hint{bottom:140px;font-size:9.5px}}
.chrome--side{left:var(--gut);top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  display:flex;gap:12px;color:var(--dim)}
.chrome--side b{font-weight:400;color:var(--bone)}

/* ── sections ── */
main{position:relative;z-index:5}
.sec{position:relative;min-height:100vh;padding:calc(var(--gut)*4) calc(var(--gut)*2.4)}
.hero{display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh;padding-bottom:calc(var(--gut)*3.6)}
.hero__meta{position:absolute;top:calc(var(--gut)*4.2);left:calc(var(--gut)*2.4);right:calc(var(--gut)*2.4);
  display:flex;justify-content:space-between;color:var(--dim)}
.hero__mark{margin:0;width:100%;line-height:0;filter:drop-shadow(0 2px 30px rgba(0,0,0,.45))}
.hero__mark svg{display:block;width:100%;height:auto;overflow:visible}
.hero__mark .l{fill:var(--bone);transform-box:fill-box;will-change:transform;transform:translateY(120%);opacity:0;
  transition:transform 1.8s var(--ease), opacity 1.8s var(--ease)}
body.entered .hero__mark .l{transform:none;opacity:1}
.hero__sub{margin:clamp(14px,2vh,26px) 0 0;font-size:clamp(20px,2.6vw,40px);color:var(--bone);opacity:0;
  transition:opacity 2s 1.2s}
body.entered .hero__sub{opacity:.9}
.hero__sub em{cursor:inherit}
.hero__cue{position:absolute;right:calc(var(--gut)*2.4);bottom:calc(var(--gut)*3.6);display:flex;align-items:center;gap:14px;color:var(--dim)}
.cue__bar{width:1px;height:46px;background:linear-gradient(var(--bone),transparent);animation:cue 2.4s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.fig{min-height:150vh;display:flex;align-items:center}
.fig--right{justify-content:flex-end}
.fig__card{max-width:560px;position:sticky;top:30vh}
.fig__no{color:var(--dim);margin:0 0 22px;display:flex;align-items:center;gap:12px}
.fig__no::before{content:"";width:28px;height:1px;background:var(--blood)}
/* vector headlines (custom lettering from svg/grafik.svg) */
.hl{--cap:clamp(26px,3.6vw,58px);margin:0;line-height:0;filter:drop-shadow(0 2px 24px rgba(0,0,0,.5))}
.hl svg{display:block;width:calc(var(--w) * var(--cap));max-width:100%;height:auto;fill:var(--bone);overflow:visible}
.hl .ln{transform-box:fill-box;opacity:0;transform:translateY(40%);transition:opacity 1.2s var(--ease), transform 1.4s var(--ease)}
.hl .ln:nth-child(2){transition-delay:.12s}
.hl .ln:nth-child(3){transition-delay:.24s}
[data-reveal].in .ln, .hl.in .ln{opacity:1;transform:none}
.fig__p{margin:28px 0 0;color:var(--bone);opacity:.75;line-height:2.1}
.file{margin:30px 0 0;border-top:1px solid var(--hair);max-width:420px}
.file div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--hair)}
.file dt{color:var(--dim)}
.file dd{margin:0;text-align:right}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 1.4s var(--ease), transform 1.4s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* recordings */
.records{min-height:130vh;padding-top:calc(var(--gut)*6)}
.rec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-bottom:1px solid var(--hair);padding-bottom:18px}
.rec__h{--cap:clamp(34px,6.4vw,110px)}
.tracks{list-style:none;margin:0;padding:0}
.track{display:grid;grid-template-columns:70px 1fr auto 200px;align-items:baseline;gap:20px;padding:22px 0;
  border-bottom:1px solid var(--hair);position:relative;transition:padding .6s var(--ease), color .4s}
.track::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--blood);transition:width .9s var(--ease)}
.track:hover::after,.track.is-active::after{width:100%}
.track:hover{padding-left:16px}
.track__i{color:var(--dim)}
.track__t{font-family:var(--font-serif);font-size:clamp(30px,4.4vw,72px);line-height:1;text-transform:none;letter-spacing:-.01em}
.track__d{color:var(--dim)}
.track__s{justify-self:end;color:var(--dim);display:flex;align-items:center;gap:8px}
.track.is-active .track__s{color:var(--blood)}
.track.is-active .track__s::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blood);animation:rec 1s steps(1) infinite}
.track.is-active .track__t{font-style:italic}

/* footer */
.foot{min-height:110vh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:calc(var(--gut)*5)}
.foot__mail{font-size:clamp(34px,6vw,110px);line-height:1;letter-spacing:-.01em;width:fit-content;border-bottom:1px solid var(--hair);padding-bottom:6px;transition:border-color .5s}
.foot__mail:hover{border-color:var(--blood)}
.foot__small{color:var(--dim);margin:20px 0 0}
.foot__arrow{display:inline-block;font-family:var(--font-mono);font-size:.42em;vertical-align:super;margin-left:.3em;color:var(--blood);transition:transform .5s var(--ease)}
.foot__mail:hover .foot__arrow{transform:translate(4px,-4px)}
.foot__mark{margin:clamp(40px,10vh,120px) 0 28px;line-height:0}
.foot__mark svg{display:block;width:100%;height:auto;overflow:visible}
.foot__mark path{fill:none;stroke:rgba(235,230,220,.26);stroke-width:1;vector-effect:non-scaling-stroke}
.foot__row{display:flex;justify-content:space-between;gap:20px;color:var(--dim);flex-wrap:wrap}

/* player */
.player{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;
  grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:clamp(14px,2vw,30px);
  padding:18px var(--gut) calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,rgba(5,4,4,.82) 60%);
  opacity:0;transform:translateY(20px);transition:opacity 1.4s 1s var(--ease), transform 1.4s 1s var(--ease)}
body.entered .player{opacity:1;transform:none}
.player__btns{display:flex;gap:6px}
.player__btns button{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--hair);border-radius:50%;transition:border-color .3s, background .3s}
.player__btns button:hover{border-color:var(--bone)}
.player__btns svg{width:10px;height:10px;fill:var(--bone)}
#play{width:42px;height:42px;margin-top:-4px}
#play .i-pause{display:none}
body.playing #play .i-pause{display:block}
body.playing #play .i-play{display:none}
body.playing #play{border-color:var(--blood)}
.player__now{display:flex;gap:14px;white-space:nowrap}
.player__now span:first-child{color:var(--dim)}
.player__bar{height:20px;position:relative;display:flex;align-items:center}
.player__bar::before{content:"";position:absolute;left:0;right:0;height:1px;background:var(--hair)}
.player__bar i{position:absolute;left:0;height:1px;width:0;background:var(--blood);box-shadow:0 0 8px var(--blood)}
.player__time{color:var(--dim);white-space:nowrap}
#ecg{width:120px;height:28px}

/* idle + flash */
.idle{position:fixed;left:50%;bottom:110px;transform:translate(-50%,10px);z-index:22;color:var(--bone);
  opacity:0;transition:opacity 2.4s, transform 2.4s var(--ease);pointer-events:none;white-space:nowrap}
.idle.on{opacity:.8;transform:translate(-50%,0)}
.flash{position:fixed;inset:0;z-index:40;display:grid;place-items:center;font-size:22vw;color:var(--blood);
  letter-spacing:.1em;pointer-events:none;opacity:0;mix-blend-mode:difference}
.flash.on{opacity:1}

/* cursor */
#cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;mix-blend-mode:difference;display:none}
@media (hover:hover) and (pointer:fine){ #cursor{display:block} }
#cursor i{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border:1px solid var(--bone);border-radius:50%;
  transition:transform .5s var(--ease), border-color .3s, background .3s}
#cursor i::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:2px;margin:-1px;background:var(--bone);border-radius:50%}
#cursor span{position:absolute;left:24px;top:8px;white-space:nowrap;font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--bone);opacity:.7}
#cursor.link i{transform:scale(1.7)}
#cursor.flesh{mix-blend-mode:normal}
#cursor.flesh i{transform:scale(2.6);border-color:var(--blood);background:rgba(196,20,47,.08)}
#cursor.flesh i::after{background:var(--blood)}
#cursor.flesh span{color:var(--blood);opacity:1;left:44px}
#cursor.down i{transform:scale(.6)}

/* responsive */
@media (max-width:860px){
  .chrome--top{grid-template-columns:1fr auto}
  .chrome__mid{display:none}
  .chrome__nav a{display:none}
  .chrome--side{display:none}
  .sec{padding:calc(var(--gut)*5) var(--gut)}
  .hero__meta{left:var(--gut);right:var(--gut)}
  .hero__cue{display:none}
  .fig{min-height:130vh;align-items:flex-end;padding-bottom:30vh}
  .fig--right{justify-content:flex-start}
  .track{grid-template-columns:36px 1fr auto;gap:12px}
  .track__s{display:none}
  .player{grid-template-columns:auto 1fr auto;row-gap:8px}
  .player__bar{grid-column:1/-1;order:5}
  #ecg{display:none}
  .player__now{overflow:hidden}
  .idle{bottom:150px}
}
@media (prefers-reduced-motion:reduce){
  .grain,.cue__bar{animation:none}
}