/* RELAPS 2026 / Black Market (/relaps): black-and-white slides in the style of the Instagram carousel.
   Instrument Serif for every big line and the slide numbers, JetBrains Mono for small labels.
   The only colour is the red dot next to @PUSINKARNA. Loaded only on relaps.html. */
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-400-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-700-ext.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF}

html:has(.relaps-page){background:#050505}
.relaps-page{--paper:#050505;--ink:#f4f3ef;--muted:#a3a3a3;--rule:#2a2a2a;--mono:'JetBrains Mono',ui-monospace,monospace;--serif:'Instrument Serif',Georgia,serif;background:#050505;color:#f4f3ef;color-scheme:dark}
.relaps-page ::selection{background:#f4f3ef;color:#050505}

/* Nav and footer in the dark variant */
.relaps-page .site-header,.relaps-page .site-header--side{background:#050505!important;color:#f4f3ef;--ink:#f4f3ef;--muted:#a3a3a3;--rule:#2a2a2a;border-color:#1c1c1c!important}
.relaps-page .site-header--side .site-nav__drop{background:#0a0a0a;border-color:#262626}
.relaps-page .site-header--side .site-nav .site-nav__drop .site-nav__sub{color:#a3a3a3}
.relaps-page .site-header--side .site-nav .site-nav__drop .site-nav__sub:hover,.relaps-page .site-nav .site-nav__sub[aria-current]{color:#f4f3ef}
.relaps-page .site-footer{background:#050505;color:#a3a3a3;border-top:1px solid #1c1c1c}
.relaps-page .site-footer a{color:#f4f3ef}
.relaps-page a:focus-visible,.relaps-page button:focus-visible,.relaps-page summary:focus-visible{outline:2px solid #f4f3ef;outline-offset:3px}

/* Film grain over the whole page */
.relaps-page::after{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.08;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' 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='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Slides: full-bleed, thin inner frame, header, progress strip, giant number */
.rx{overflow-x:clip}
.rx-scene{position:relative;isolation:isolate;display:flex;min-height:100svh;padding:clamp(14px,2.4vw,28px);overflow:hidden;border-top:1px solid #161616}
.rx-scene:first-child{border-top:0;min-height:calc(100svh - 64px)}
.rx-frame{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;width:100%;max-width:1320px;margin:0 auto;padding:clamp(20px,3.4vw,44px);border:1px solid rgb(255 255 255 / .22)}
.rx-head{display:flex;justify-content:space-between;gap:16px;margin:0;padding-bottom:clamp(14px,2vw,22px);border-bottom:1px solid rgb(255 255 255 / .22);font:400 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#bdbdbd}
.rx-body{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.8vw,34px);flex:1;padding:clamp(48px,9vh,110px) 0}
.rx-progress{display:flex;gap:8px}
.rx-progress i{width:clamp(22px,3.2vw,42px);height:4px;background:rgb(255 255 255 / .2)}
.rx-progress i.on{background:#f4f3ef}
.rx-num{position:absolute;z-index:1;right:clamp(10px,3vw,48px);bottom:clamp(-40px,-3vw,-10px);font:italic 400 clamp(300px,52vw,720px)/.8 var(--serif);color:rgb(255 255 255 / .06);pointer-events:none;user-select:none}

/* Photos under the text: almost grey, dark, scanlines and grain */
.rx-photo{position:absolute;inset:0;z-index:0;overflow:hidden;background:#050505}
.rx-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(.34) blur(1.5px);transform:scale(1.04)}
.rx-photo::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgb(5 5 5 / .55),rgb(5 5 5 / .25) 40%,rgb(5 5 5 / .75)),repeating-linear-gradient(to bottom,rgb(255 255 255 / .05) 0 1px,transparent 1px 4px)}
.rx-photo::after{content:'';position:absolute;left:0;right:0;top:38%;height:9%;z-index:1;backdrop-filter:invert(.12) blur(.5px);transform:translateX(0);animation:rx-band 9s steps(1) infinite;opacity:0}
@keyframes rx-band{0%,90%,100%{opacity:0;transform:none}91%{opacity:1;transform:translateX(-14px)}93%{opacity:1;top:62%;transform:translateX(10px)}95%{opacity:0}}

/* Type */
.rx-label{margin:0;font:700 12px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#bdbdbd}
.rx-h1{display:flex;flex-direction:column;gap:clamp(16px,2.4vw,30px);margin:0;font:400 clamp(52px,9.4vw,148px)/.98 var(--serif);letter-spacing:-.02em}
.rx-big{max-width:20ch;margin:0;font:400 clamp(38px,6.4vw,96px)/1.02 var(--serif);letter-spacing:-.015em}
.rx-sub{max-width:26ch;margin:0;font:400 clamp(28px,4.2vw,60px)/1.06 var(--serif);letter-spacing:-.01em;color:#a3a3a3}
.rx-h1 .rx-sub{max-width:24ch;font-size:clamp(30px,4.4vw,64px)}
.rx-big em,.rx-sub em,.rx-text em,.rx-mega em,.rx-quote em{font-style:italic}
.rx-text{max-width:44ch;margin:0;font:400 clamp(21px,1.5vw + 12px,30px)/1.3 var(--serif);color:#c4c4c4}
.rx-text em{color:#f4f3ef}
.rx-text--small{font-size:clamp(18px,1vw + 12px,22px);color:#a3a3a3}
.rx-mega{margin:0;font:400 clamp(110px,22vw,340px)/.88 var(--serif);letter-spacing:-.03em}
.rx-list{display:grid;gap:4px;margin:0;padding:0;list-style:none;font:italic 400 clamp(28px,4.2vw,60px)/1.1 var(--serif)}
.rx-list li::before{content:'— ';color:#7d7d7d}
.rx-list--grey li{color:#8f8f8f}

/* Key words: white block, black text */
.rx-block{display:inline-block;padding:.04em .16em .02em;background:#f4f3ef;color:#050505;font:inherit;line-height:1}
.rx-dress,.rx-h2{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.6vw,20px);margin:0}
.rx-dress .rx-block,.rx-h2 .rx-block{font:400 clamp(60px,12.5vw,190px)/1 var(--serif);letter-spacing:-.02em}

.rx-quote{margin:0;padding-left:clamp(16px,2.4vw,32px);border-left:1px solid #f4f3ef}
.rx-quote p{max-width:22ch;margin:0;font:italic 400 clamp(40px,6.6vw,104px)/1.02 var(--serif)}

/* Rising axis: thin white stairs that grow when the slide comes into view */
.rx-scene--rise .rx-body{flex-direction:row;align-items:stretch;gap:clamp(18px,4vw,64px)}
.rx-rise{position:relative;flex:none;width:clamp(36px,7vw,110px);min-height:52svh}
.rx-rise__axis{position:absolute;left:0;bottom:0;width:1px;height:100%;background:linear-gradient(to top,#f4f3ef 60%,transparent);transform:scaleY(0);transform-origin:bottom}
.rx-rise__step{position:absolute;left:0;height:1px;background:#f4f3ef;transform:scaleX(0);transform-origin:left}
.rx-rise__step:nth-child(2){bottom:8%;width:100%}
.rx-rise__step:nth-child(3){bottom:26%;width:82%}
.rx-rise__step:nth-child(4){bottom:44%;width:64%}
.rx-rise__step:nth-child(5){bottom:62%;width:46%}
.rx-rise__step:nth-child(6){bottom:80%;width:28%}
.rx-rise__text{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.8vw,34px);min-width:0}
.rx-scene--rise .rx-mega{font-size:clamp(84px,15vw,240px)}
.rx-scene--rise.is-in .rx-rise__axis{transform:scaleY(1);transition:transform 1.6s cubic-bezier(.2,.7,.1,1)}
.rx-scene--rise.is-in .rx-rise__step{transform:scaleX(1);transition:transform .6s ease-out}
.rx-scene--rise.is-in .rx-rise__step:nth-child(2){transition-delay:.3s}
.rx-scene--rise.is-in .rx-rise__step:nth-child(3){transition-delay:.55s}
.rx-scene--rise.is-in .rx-rise__step:nth-child(4){transition-delay:.8s}
.rx-scene--rise.is-in .rx-rise__step:nth-child(5){transition-delay:1.05s}
.rx-scene--rise.is-in .rx-rise__step:nth-child(6){transition-delay:1.3s}

/* Call to action */
.rx-actions{display:flex;flex-wrap:wrap;gap:12px}
.rx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;border:1px solid #f4f3ef;border-radius:0;font:700 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.rx-btn--primary{background:#f4f3ef;color:#050505}
.rx-btn--primary:hover{background:transparent;color:#f4f3ef}
.rx-btn--ghost{background:transparent;color:#f4f3ef}
.rx-btn--ghost:hover{background:#f4f3ef;color:#050505}
.rx-sign{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin:8px 0 0;padding-top:clamp(16px,2vw,24px);border-top:1px solid rgb(255 255 255 / .22)}
.rx-sign>span{font:italic 400 clamp(40px,5vw,64px)/1 var(--serif)}
.rx-handle{display:inline-flex;align-items:center;gap:10px;font:700 13px/1 var(--mono);letter-spacing:.18em;color:#f4f3ef;text-decoration:none}
.rx-handle:hover{text-decoration:underline;text-underline-offset:4px}
.rx-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#dc2626;flex:none}

.rx-scroll{align-self:flex-start;margin-top:clamp(12px,3vh,40px);font:400 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#bdbdbd;text-decoration:none}
.rx-scroll:hover{color:#f4f3ef}

/* Glitch: only on the big headings, short and rare, black and white */
.rx-glitch{position:relative;display:block}
.rx-glitch::before,.rx-glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;font-style:inherit}
.rx-mega.rx-glitch::before,.rx-mega.rx-glitch::after{font-style:italic}
.rx-scene--rise .rx-mega.rx-glitch::before,.rx-scene--rise .rx-mega.rx-glitch::after{font-style:normal}
.rx-glitch::before{color:#8f8f8f;animation:rx-glitch-a 7s steps(1) infinite}
.rx-glitch::after{color:#f4f3ef;animation:rx-glitch-b 7s steps(1) infinite;mix-blend-mode:difference}
@keyframes rx-glitch-a{0%,93%,100%{opacity:0;transform:none;clip-path:none}94%{opacity:.9;transform:translate(-4px,1px);clip-path:inset(12% 0 64% 0)}96%{opacity:.9;transform:translate(4px,-1px);clip-path:inset(58% 0 18% 0)}98%{opacity:0}}
@keyframes rx-glitch-b{0%,94%,100%{opacity:0;transform:none;clip-path:none}95%{opacity:.6;transform:translate(3px,0);clip-path:inset(40% 0 44% 0)}97%{opacity:0}}

/* Reveal on scroll (only with JS; without it everything is visible) */
.js .relaps-page [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.1,1)}
.js .relaps-page [data-reveal].is-in{opacity:1;transform:none}

@media(max-width:700px){
  .rx-scene{min-height:auto}
  .rx-scene:first-child{min-height:calc(100svh - 64px)}
  .rx-head{font-size:11px;letter-spacing:.12em}
  .rx-progress{gap:5px}
  .rx-progress i{flex:1;width:auto}
  .rx-scene--rise .rx-body{flex-direction:column}
  .rx-rise{width:100%;min-height:110px;order:2}
  .rx-actions .rx-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .js .relaps-page [data-reveal]{opacity:1;transform:none;transition:none}
  .rx-glitch::before,.rx-glitch::after,.rx-photo::after{animation:none;opacity:0}
  .rx-rise__axis,.rx-rise__step{transform:none!important;transition:none!important}
}
.rx-scene--rise .rx-mega--long{font-size:clamp(46px,9.5vw,150px);line-height:1}