/* draumrmusic.com. Images under water: they ripple where you move and dissolve into the next. */
@font-face{font-family:"Adventor";src:url("fonts/adventor-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Adventor";src:url("fonts/adventor-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  --ink:#04050d;
  --paper:#eef0ff;
  --mist:#9ea4d6;
  --deep:#7c82b9;
  --thread:#3d6bff;
  --face:"ITC Avant Garde Gothic","Adventor","Century Gothic","Futura",sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --track:.42em;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--face);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--thread);color:var(--paper)}
a{color:inherit}
img,video,canvas{display:block}
button,input{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--paper);outline-offset:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:12px;z-index:100;padding:10px 14px;background:var(--paper);color:var(--ink);font-size:13px;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}

/* the stars: under everything, seen while a page loads and behind the listen and watch part of a release */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink) url("stars/stars-l.webp") center/cover no-repeat}
@media (max-aspect-ratio:20/23){.sky{background-image:url("stars/stars-p.webp")}}
.sky video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1600ms ease}
.sky video.on{opacity:1}

/* the water */
.stage{position:fixed;inset:0;overflow:hidden}
.stage canvas{opacity:0;transition:opacity 1600ms ease}
.stage canvas.on{opacity:1}
.stage canvas,.fb,.fb img,.fb video{position:absolute;inset:0;width:100%;height:100%}
.stage canvas{touch-action:pan-y;cursor:crosshair}
.fb img,.fb video{object-fit:cover;opacity:0;transition:opacity 1600ms ease}
.fb .on{opacity:1}
.grain{position:fixed;inset:-50%;z-index:30;pointer-events:none;opacity:.07;mix-blend-mode:overlay;animation:grain 1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* between pages: everything melts into a soft haze, and the next page wakes up out of it */
.haze{position:fixed;inset:0;z-index:45;pointer-events:none;background:var(--ink) url("stars/stars-l.webp") center/cover no-repeat;
  animation:wake 1700ms cubic-bezier(.33,0,.2,1) both}   /* the passage between pages is the night of the stars */
@media (max-aspect-ratio:20/23){.haze{background-image:url("stars/stars-p.webp")}}
.haze.on{animation:sleep 950ms cubic-bezier(.45,0,.55,1) both}
@keyframes wake{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes sleep{0%{opacity:0;visibility:visible}100%{opacity:1;visibility:visible}}
.corner,.lights,.snd{animation:surface 2200ms var(--ease) 250ms backwards}
@keyframes surface{from{opacity:0;filter:blur(6px)}}

/* corners */
.mark{position:fixed;z-index:20;left:22px;top:calc(16px + env(safe-area-inset-top,0px));margin:0;font-size:15px;font-weight:700;letter-spacing:.62em;line-height:1;text-transform:lowercase}
.mark a{display:inline-block;padding:14px 10px;letter-spacing:inherit;text-decoration:none;transition:letter-spacing 800ms var(--ease)}
.mark a:hover,.mark a:focus-visible{letter-spacing:.9em}
.corner{position:fixed;z-index:20;padding:14px 10px;font-size:12px;line-height:1;letter-spacing:.46em;text-transform:lowercase;color:var(--mist);text-decoration:none;transition:color 300ms ease,letter-spacing 600ms var(--ease)}
.corner:hover,.corner[aria-current]{color:var(--paper)}
.corner:hover{letter-spacing:.62em}
.mark,.corner{text-shadow:0 0 18px rgba(4,5,13,.6),0 0 2px rgba(4,5,13,.4)}
.c-tr{right:22px;top:calc(18px + env(safe-area-inset-top,0px))}
.c-br{right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px))}

/* the title of what you are looking at */
.t2{margin:0;font-weight:400;position:fixed;z-index:15;left:7vw;right:16vw;bottom:calc(15vh + env(safe-area-inset-bottom,0px));display:block;color:var(--paper);text-decoration:none}
.line{display:block;margin:0;font-weight:400;font-size:clamp(30px,5.2vw,84px);line-height:1.12;letter-spacing:var(--track);text-transform:lowercase;overflow-wrap:break-word;text-shadow:0 0 36px rgba(4,5,13,.5),0 0 3px rgba(4,5,13,.3)}
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block;white-space:pre;opacity:0;filter:blur(12px);transform:translateY(.35em);transition:opacity 900ms var(--ease),filter 900ms var(--ease),transform 900ms var(--ease)}
.ch.in{opacity:1;filter:blur(0);transform:none}
.ch.out{opacity:0;filter:blur(10px);transform:translateY(-.25em);transition-duration:500ms}
.date{display:block;min-height:1.5em;margin-top:18px;font-size:12px;letter-spacing:.5em;color:var(--mist);text-transform:lowercase;opacity:0;transition:opacity 900ms ease 400ms}
.date.in{opacity:1}
a.t2 .line{transition:letter-spacing 900ms var(--ease)}
a.t2:hover .line,a.t2:focus-visible .line{letter-spacing:.62em}

/* every record is a point of light: each twinkles at its own pace and floats a little */
.lights{position:fixed;z-index:16;right:16px;top:50%;transform:translateY(-50%);margin:0;padding:6px;list-style:none;display:flex;flex-direction:column}
.lights li{animation:float var(--fl,12s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes float{from{transform:translate(0,0)}to{transform:translate(var(--fx,2px),var(--fy,2px))}}
.lights a{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:28px;padding:2px 6px 2px 26px;text-decoration:none;color:var(--mist);transform:translateY(var(--push,0px));transition:transform 1100ms var(--ease)}
.lights i{position:relative;flex:none;display:block;width:3px;height:3px;border-radius:50%;background:#f6f7ff;box-shadow:0 0 6px 1px rgba(196,206,255,.6);animation:twinkle var(--tw,4s) ease-in-out var(--dl,0s) infinite;transition:transform 1100ms var(--ease)}
@keyframes twinkle{0%,100%{opacity:.22}50%{opacity:.95}}
.lights i::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:radial-gradient(circle,rgba(214,220,255,.6),rgba(150,162,255,.16) 42%,transparent 70%);opacity:0;transform:scale(.2);transition:opacity 1000ms ease,transform 1300ms var(--ease)}
.lights a.on i,.lights a:hover i,.lights a:focus-visible i{animation:none;opacity:1;transform:scale(1.7)}
.lights a.on i::after,.lights a:hover i::after,.lights a:focus-visible i::after{opacity:1;transform:scale(1)}
.lights span{position:absolute;right:calc(100% + 4px);top:50%;margin-top:-.7em;line-height:1.4;font-size:11px;letter-spacing:.34em;text-transform:lowercase;white-space:nowrap;color:var(--mist);transition:letter-spacing 800ms var(--ease)}
.lights a:hover span,.lights a:focus-visible span{letter-spacing:.62em}

/* the sound: a thin line that ripples with the music */
.snd{position:fixed;z-index:20;left:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:80px;height:48px;padding:14px 12px;border:0;background:transparent;cursor:pointer;opacity:.5;transition:opacity 600ms ease}
.snd:hover,.snd:focus-visible{opacity:1}
.snd.on{opacity:.85}
.snd canvas{display:block;width:56px;height:20px;filter:drop-shadow(0 0 5px rgba(4,5,13,.7))}

/* record pages */
.rhero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden}
.rhero .stage{position:absolute}
.rhero .t2{position:absolute}
.cue{position:absolute;z-index:15;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:1px;height:44px;background:linear-gradient(var(--mist),transparent);transform-origin:top;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.body{position:relative;z-index:2;background:linear-gradient(rgba(4,5,13,.85),rgba(4,5,13,0) 34vh);padding:clamp(80px,14vh,150px) 7vw clamp(90px,14vh,160px)}
.row{display:grid;grid-template-columns:minmax(120px,1fr) 4fr;gap:32px;max-width:1240px;margin:0 0 clamp(56px,9vh,96px)}
.row>h2{margin:6px 0 0;font-size:11px;font-weight:400;letter-spacing:.46em;text-transform:lowercase;color:var(--deep)}
.links{display:flex;flex-wrap:wrap;gap:18px 34px;margin:0;padding:0;list-style:none;font-size:14px;letter-spacing:.32em;text-transform:lowercase}
.links a{padding:9px 12px;margin:0 -12px;text-decoration:none;color:var(--mist);transition:color 300ms ease,letter-spacing 600ms var(--ease)}   /* the padding is a bigger target for thumbs; inline, so the layout does not move */
.links a:hover{color:var(--paper)}
.links .main a{color:var(--paper)}
.lines{margin:0;padding:0;list-style:none;display:grid;gap:10px;max-width:68ch;font-size:15px;line-height:1.6;color:#c9cdf0}
.watch{position:relative;display:block;width:100%;max-width:980px;aspect-ratio:16/9;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden}
.watch img{width:100%;height:100%;object-fit:cover;transition:transform 1400ms var(--ease),filter 900ms ease;filter:saturate(.9) brightness(.8)}
.watch:hover img{transform:scale(1.03);filter:none}
.watch::after{content:"";position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border:1px solid rgba(238,240,255,.7);border-radius:50%;background:rgba(4,5,13,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84'%3E%3Cpath d='M36 30v24l19-12z' fill='%23eef0ff'/%3E%3C/svg%3E") center/84px no-repeat;transition:transform 400ms var(--ease)}
.watch:hover::after{transform:scale(1.07)}
.watch iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.aside{margin:16px 0 0;font-size:12px;letter-spacing:.3em;text-transform:lowercase;color:var(--deep)}
.aside a{color:var(--mist);text-decoration:none}
.aside a:hover{color:var(--paper)}
.soon{margin:0;font-size:14px;letter-spacing:.4em;text-transform:lowercase;color:var(--mist)}

/* the next record rises out of the dark */
.next{position:relative;display:block;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:var(--ink);color:var(--paper);text-decoration:none}
.next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(var(--b,0px)) brightness(var(--l,1));transform:scale(var(--s,1));will-change:filter,transform}
.next .t2{position:absolute}
.next .lbl{display:block;margin-bottom:16px;font-size:11px;letter-spacing:.5em;color:var(--mist)}

/* newsletter and contact */
/* over the red of the mirror film: warm creams instead of the cold lavenders */
body[data-page="there"]{--paper:#fff3ec;--mist:#ecd9cb;--deep:#d9bcaa}
body[data-page="there"] .there,body[data-page="there"] .corner,body[data-page="there"] .mark{text-shadow:0 0 24px rgba(22,4,6,.6),0 0 2px rgba(22,4,6,.45)}
body[data-page="there"] .nl{border-bottom-color:rgba(255,236,226,.5)}
body[data-page="there"] .nl:focus-within{border-color:var(--paper)}
body[data-page="there"] ::selection{background:#fff3ec;color:#3a0b0e}
.there{position:relative;z-index:10;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(40px,7vh,70px);padding:120px 7vw 110px;max-width:980px}
.there h1{margin:0;font-size:clamp(34px,6vw,92px);font-weight:400;line-height:1;letter-spacing:var(--track);text-transform:lowercase}
.label{display:block;margin-bottom:14px;font-size:11px;letter-spacing:.46em;text-transform:lowercase;color:var(--mist)}
.nl{display:flex;align-items:center;gap:0;max-width:520px;border-bottom:1px solid rgba(238,240,255,.4);transition:border-color 300ms ease}
.nl:focus-within{border-color:var(--paper)}
.nl input{flex:1;min-width:0;height:52px;padding:0;border:0;background:transparent;font-size:16px;letter-spacing:.16em;outline:none}
.nl input::placeholder{color:var(--deep);letter-spacing:.3em;text-transform:lowercase}
.nl button{flex:none;width:52px;height:52px;border:0;background:transparent;cursor:pointer;font-size:20px;color:var(--mist);transition:color 300ms ease,transform 300ms var(--ease)}
.nl button:hover{color:var(--paper);transform:translateX(4px)}
.hp{position:absolute;left:-9999px}
.said{min-height:1.4em;margin:12px 0 0;font-size:12px;letter-spacing:.4em;text-transform:lowercase;color:var(--mist)}
.mailto{font-size:clamp(16px,1.6vw,20px);letter-spacing:.24em;text-decoration:none;color:var(--paper)}
.mailto:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* lost */
.lost{position:relative;z-index:10;min-height:100vh;min-height:100svh;display:grid;place-items:center;align-content:center;gap:28px;text-align:center}
.lost h1{margin:0;font-weight:400;font-size:clamp(34px,6vw,90px);letter-spacing:var(--track);text-transform:lowercase}
.lost a{padding:13px 14px;margin:-13px -14px;font-size:12px;letter-spacing:.46em;color:var(--mist);text-decoration:none}

@media (max-width:700px){
  :root{--track:.3em}
  .mark{left:10px;font-size:14px;letter-spacing:.5em}
  .corner{font-size:12px;letter-spacing:.34em}
  .c-tr{right:12px}
  .c-br{right:12px}
  .t2{left:22px;right:56px;bottom:calc(13vh + env(safe-area-inset-bottom,0px))}
  .line{font-size:clamp(26px,8.4vw,40px)}
  .lights{right:6px}
  .lights span{width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;font-size:12px}
  .snd{left:4px}
  .row{grid-template-columns:1fr;gap:18px}
  .body{padding-left:22px;padding-right:22px}
  .links{gap:18px 24px;font-size:13px;letter-spacing:.24em}
  .links a{padding:9px 10px;margin:0 -10px}
  .there{padding-left:22px;padding-right:22px}
}
@media (prefers-reduced-motion:reduce){
  .grain,.cue,.lights li,.lights i,.corner,.lights,.snd{animation:none}
  .haze{animation-duration:300ms}
  .haze.on{animation-duration:200ms}
  .ch,.date{transition:opacity 300ms linear;filter:none!important;transform:none!important}
}