:root{--ground: oklch(13% .014 32);--ground-deep: oklch(9% .012 32);--ground-soft: oklch(17% .016 32);--paper: oklch(93% .01 75);--paper-deep: oklch(88% .012 75);--paper-ink: oklch(20% .01 60);--paper-muted: oklch(42% .008 60);--paper-dim: oklch(58% .008 60);--ink: oklch(92% .008 70);--ink-soft: oklch(78% .012 60);--ink-muted: oklch(58% .012 50);--ink-dim: oklch(42% .014 45);--rule: oklch(40% .014 45 / .55);--rule-soft: oklch(35% .012 45 / .35);--red: oklch(58% .18 30);--red-deep: oklch(48% .17 30);--oxid: oklch(55% .055 38);--sans: "Oswald Variable", "Oswald", "Roboto Condensed", "Oswald Fallback", "Helvetica Neue Condensed", "Arial Narrow", sans-serif;--mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--page: 1280px}html{background-color:var(--ground);background-image:radial-gradient(ellipse 120% 80% at 50% 0%,rgba(90,38,20,.55) 0%,rgba(40,18,10,.25) 30%,transparent 65%),url(/artworks/ep-viel/viel_cover_artwork.webp);background-repeat:no-repeat,no-repeat;background-position:center top,center top;background-size:100% 70vh,100% auto}body{font-family:var(--sans);font-weight:300;font-size:18px;line-height:1.5;color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;position:relative}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background-image:radial-gradient(rgba(230,200,180,.018) 1px,transparent 1px),radial-gradient(rgba(230,200,180,.014) 1px,transparent 1px);background-size:3px 3px,7px 7px;background-position:0 0,1px 2px;mix-blend-mode:screen;opacity:.35}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(ellipse 85% 55% at 58% 12%,rgba(255,120,70,.22) 0%,rgba(180,60,30,.1) 35%,transparent 75%),url(/artworks/ep-viel/viel_cover_artwork.webp);background-repeat:no-repeat,no-repeat;background-position:center,center;background-size:100% 60%,cover;filter:brightness(.28) saturate(.95);opacity:.85;animation:glutDrift 48s ease-in-out infinite alternate}@keyframes glutDrift{0%{background-position:50% 0%,48% 50%}to{background-position:58% 4%,52% 52%}}::selection{background:var(--red-deep);color:var(--ink)}.page{max-width:var(--page);margin:0 auto;padding:0 56px;position:relative}.masthead{position:relative;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;padding-top:28px;padding-bottom:22px;border-bottom:0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}.masthead .left{justify-self:start}.masthead .mid{justify-self:center;font-feature-settings:"tnum"}.masthead .right{justify-self:end;text-align:right}.masthead a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s ease,color .3s ease}.masthead a:hover{color:var(--ink);border-bottom-color:var(--ink-soft)}.masthead .back{display:inline-flex;align-items:center;color:var(--ink-muted);border-bottom:0!important;padding:4px 2px;transition:color .35s ease,transform .35s ease}.masthead .back:hover{color:var(--red);transform:translate(-3px)}.hero{position:relative;isolation:isolate;overflow:hidden;height:100vh;min-height:640px;margin-top:-80px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"title  title" "sub    cover" "sub    cover";column-gap:48px;row-gap:0;padding-bottom:48px}.hero .echo{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.hero .echo-wide{display:none}.hero .echo-halo{background-image:url(/artworks/ep-viel/viel_cover_artwork.webp);background-repeat:no-repeat;background-position:50% 30%;background-size:110% auto;opacity:.22;filter:blur(44px) saturate(1.1);mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse 55% 38% at 50% 38%,black 0%,rgba(0,0,0,.85) 40%,transparent 85%);mask-image:radial-gradient(ellipse 55% 38% at 50% 38%,black 0%,rgba(0,0,0,.85) 40%,transparent 85%)}.hero h1{grid-area:title;font-family:var(--sans);font-weight:500;font-style:normal;font-size:clamp(160px,32vw,460px);line-height:.82;letter-spacing:-.025em;text-transform:uppercase;margin:-.42em 0 0;text-align:center;background-image:url(/artworks/ep-viel/hintergrund_titel_schrift.jpg);background-repeat:no-repeat;background-position:center 40%;background-size:100% auto;color:transparent;-webkit-background-clip:text;background-clip:text;position:relative;z-index:1}.hero h1 .period{color:#e7ac2a;-webkit-text-fill-color:oklch(78% .15 82);display:inline-block;transform:translateY(.02em);background:none}.hero .sub{grid-area:sub;align-self:end;justify-self:start;text-align:left;font-family:var(--sans);font-weight:300;font-size:clamp(20px,1.8vw,28px);line-height:1.35;color:var(--ink-soft);margin:0;max-width:22ch;letter-spacing:.005em;padding-bottom:8px}.hero-cover{grid-area:cover;align-self:end;justify-self:end;margin:0;width:clamp(240px,28vw,340px);position:relative}.hero-cover .cover-frame{aspect-ratio:1/1}.hero-cover .cover-caption{margin-top:14px;font-size:10.5px}.cover-wrap{margin:120px auto 0;max-width:840px;width:100%;position:relative}.cover-frame{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--ground-deep);box-shadow:0 1px #ffe6d208 inset,0 40px 80px -30px #0009}.cover-frame img{width:100%;height:100%;object-fit:cover;display:block}.cover-caption{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:28px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}.cover-caption .r{text-align:right}.cover-caption strong{display:block;font-weight:400;color:var(--ink-soft);margin-bottom:4px}.prosa{max-width:48ch;margin:200px auto 0;font-family:var(--sans);font-weight:300;font-size:22px;line-height:1.55;color:var(--ink);text-wrap:pretty;letter-spacing:.005em;position:relative;padding-left:28px}.prosa:before{content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:2px;background:var(--red);opacity:.85}.prosa p{margin:0 0 1.1em}.prosa p:first-child:first-letter{font-family:var(--sans);font-weight:500;font-size:3.8em;line-height:.88;float:left;padding:.04em .12em 0 0;color:var(--red);text-transform:uppercase}.prosa .sigil{display:block;text-align:right;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);margin-top:36px}.musik{margin-top:260px}.tracks{max-width:780px;margin:0 auto}.track{display:grid;grid-template-columns:40px 1fr auto 28px;gap:28px;align-items:center;padding:28px 8px 26px;border-bottom:1px solid var(--rule);cursor:pointer;transition:background .35s ease}.track:first-child{border-top:1px solid var(--rule)}.track:hover{background:var(--ground-soft)}.track:hover .t{color:var(--red)}.track .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--oxid);font-feature-settings:"tnum"}.track .t{font-family:var(--sans);font-size:28px;font-weight:400;color:var(--ink);letter-spacing:0;text-transform:uppercase;transition:color .35s ease;line-height:1.05}.track .t .feat{display:inline;font-family:var(--sans);font-weight:300;font-size:13px;color:var(--ink-muted);margin-left:12px;text-transform:uppercase;letter-spacing:.1em;vertical-align:.15em}.track .d{font-family:var(--mono);font-size:11px;color:var(--ink-muted);font-feature-settings:"tnum";letter-spacing:.06em}.track .play{width:26px;height:26px;border-radius:50%;border:1px solid var(--ink-muted);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;color:var(--ink-soft);transition:border-color .3s,background .3s,color .3s}.track .play:hover{border-color:var(--red);color:var(--red)}.track .play svg{width:7px;height:7px;display:block;margin-left:1px}.track.playing .play{background:var(--red);border-color:var(--red);color:var(--ground)}.track.playing .t{color:var(--red)}.tracks-hint{margin:40px auto 0;max-width:780px;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:14px}.tracks-hint .hint-sep{color:var(--rule)}.tracks-hint a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:color .3s,border-color .3s}.tracks-hint a:hover{color:var(--red);border-bottom-color:var(--red)}.insel{max-width:26ch;margin:220px auto 0;padding:0}.insel blockquote{margin:0;font-family:var(--sans);font-weight:300;font-size:clamp(36px,5.2vw,64px);line-height:1.08;color:var(--ink);letter-spacing:-.012em;text-transform:uppercase;text-wrap:pretty}.insel blockquote .line{display:block}.insel .marg{margin-top:32px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}.contact-sheet{max-width:1160px;margin:240px auto 0}.sheet-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;margin-bottom:56px}.sheet-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--oxid)}.sheet-rule{height:1px;background:var(--rule)}.sheet-sub{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted)}.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.contact-sheet--pair .sheet-grid{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto}.sheet-grid figure{margin:0}.sheet-frame{aspect-ratio:1/1;overflow:hidden;background:var(--ground-deep);position:relative}.sheet-frame img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94);transition:filter 1.2s ease,transform 1.2s cubic-bezier(.2,.6,.2,1);transform:scale(1.01)}.sheet-frame:hover img{filter:saturate(1);transform:scale(1.04)}.sheet-grid figcaption{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);display:flex;gap:12px;align-items:baseline}.sheet-grid .cap-n{color:var(--ink-soft);font-feature-settings:"tnum"}.prosa,.musik,.contact-sheet,.liner{position:relative}.dv{position:absolute;z-index:4;pointer-events:auto;transform-origin:var(--hinge, left center);transform:rotate(var(--rot, 0deg));transition:transform .7s cubic-bezier(.2,.8,.2,1)}@media(hover:hover){.dv:hover{transform:rotate(0) scale(1.6);z-index:5}}@media(prefers-reduced-motion:reduce){.dv{transition:none}}.dv.right{right:calc((100% - 100vw)/2)}.dv.left{left:calc((100% - 100vw)/2)}.dv-1{width:168px;top:-186px}.dv-2{width:196px;top:-200px}.dv-3{width:184px;top:-190px}.dv-4{width:154px;top:-178px}.dv-5{width:180px;top:-188px}.dv .hinge{position:absolute;top:50%;width:10px;height:22px;background:linear-gradient(to bottom,#282320e6,#141210f2 50%,#282320e6);border-radius:1px;box-shadow:inset 0 0 0 1px #0009,inset 0 1px #ffffff0a;transform:translateY(-50%)}.dv.right .hinge{right:-10px}.dv.left .hinge{left:-10px}.dv .screen{position:relative;background:#18160f;padding:6px 6px 10px;border-radius:2px;box-shadow:0 2px #00000080,0 18px 40px -10px #000000b3,inset 0 0 0 1px #ffffff08,inset 0 -1px #ffffff05}.dv .frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0a0a09;box-shadow:inset 0 0 0 1px #000000e6}.dv .frame img,.dv .frame video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88) contrast(1.05)}.dv .rec{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:#ffffffeb;text-shadow:0 1px 1px rgba(0,0,0,.8);z-index:2}.dv .rec .dot{width:6px;height:6px;border-radius:50%;background:#ff2a1a;box-shadow:0 0 8px #ff3c28e6;animation:dvBlink 1.4s steps(2,end) infinite}@keyframes dvBlink{0%,49%{opacity:1}50%,to{opacity:.15}}.dv .tc{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#ffffffeb;text-shadow:0 1px 1px rgba(0,0,0,.8);z-index:2;font-feature-settings:"tnum"}.dv .date{position:absolute;bottom:8px;right:8px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#ffe6a0d9;text-shadow:0 1px 1px rgba(0,0,0,.9);z-index:2;font-feature-settings:"tnum"}.dv .frame:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(to bottom,rgba(0,0,0,.15) 0px,rgba(0,0,0,.15) 1px,transparent 1px,transparent 3px);mix-blend-mode:multiply;opacity:.5;z-index:1}.dv .frame:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45) 100%);z-index:1}.liner{max-width:860px;margin:240px auto 0;color:var(--ink)}.credits-block{padding:48px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:220px 1fr;column-gap:56px;align-items:start}.credits-block:last-child{border-bottom:1px solid var(--rule)}.credits-block h3{grid-column:1;margin:0;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-muted);padding-top:8px}.credits-block dl{grid-column:2;margin:0;display:grid;grid-template-columns:200px 1fr;row-gap:14px;column-gap:24px;align-items:baseline}.credits-block dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--oxid);font-weight:400;padding-top:4px}.credits-block dd{margin:0;font-family:var(--sans);font-size:20px;font-style:normal;font-weight:400;color:var(--ink);line-height:1.3;letter-spacing:0;text-transform:uppercase}.credits-block .names{grid-column:2;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;row-gap:10px}.credits-block .names dd{margin:0;font-family:var(--sans);font-size:26px;font-weight:400;color:var(--ink);line-height:1.25;text-transform:uppercase;letter-spacing:-.005em}.colophon{margin-top:160px;padding-bottom:48px}.colophon a:hover{color:var(--red);border-bottom-color:var(--red)}@media(max-width:820px){.page{padding:0 24px}.hero{height:auto;min-height:0;margin-top:-72px;padding:0 0 56px;grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"title" "sub" "cover";row-gap:36px}.hero h1{font-size:clamp(80px,24vw,140px);margin-top:-.42em}.hero .sub{max-width:28ch}.hero-cover{width:100%;max-width:420px;justify-self:start}.cover-wrap{margin-top:80px}.prosa{margin-top:200px;font-size:19px}.musik{margin-top:200px}.track{grid-template-columns:32px 1fr auto 26px;gap:16px;padding:26px 4px}.track .t{font-size:22px}.insel{margin-top:180px;max-width:22ch}.insel blockquote{font-size:clamp(28px,9vw,44px)}.contact-sheet{margin-top:200px}.sheet-grid{grid-template-columns:repeat(2,1fr);gap:20px}.sheet-head{grid-template-columns:1fr;gap:8px}.liner{margin-top:240px}.credits-block{grid-template-columns:1fr;row-gap:18px;padding:40px 0}.credits-block dl,.credits-block .names{grid-column:auto}.credits-block dl{grid-template-columns:140px 1fr;column-gap:16px}.colophon{margin-top:160px}.dv-1{width:118px;top:-172px}.dv-2{width:132px;top:-150px}.dv-3{width:118px;top:-144px}.dv-4{width:112px;top:-142px}.dv-5{width:124px;top:-167px}}.arrival-mask{position:fixed;inset:0;pointer-events:none;z-index:5;background:var(--ground);opacity:0}html.from-foyer .arrival-mask{opacity:1;animation:unmask .7s ease-out forwards}@keyframes unmask{to{opacity:0}}html.from-foyer .masthead .left,html.from-foyer .masthead .mid,html.from-foyer .masthead .right,html.from-foyer .hero h1,html.from-foyer .hero-cover,html.from-foyer .hero .sub,html.from-foyer .prosa,html.from-foyer .dv{opacity:0}html.from-foyer .masthead .right{animation:arrive-signature .6s ease-out forwards}@keyframes arrive-signature{to{opacity:1}}html.from-foyer body:after{animation:arrive-atmosphere .7s ease-out both,glutDrift 48s ease-in-out infinite alternate}@keyframes arrive-atmosphere{0%{opacity:0}to{opacity:.85}}html.from-foyer .hero h1{animation:arrive-title .8s ease-out .3s forwards}html.from-foyer .hero-cover{animation:arrive-cover .8s ease-out .4s forwards}html.from-foyer .hero .sub{animation:arrive-sub .7s ease-out .5s forwards}html.from-foyer .masthead .left,html.from-foyer .masthead .mid{animation:arrive-title .7s ease-out .5s forwards}html.from-foyer .prosa{animation:arrive-prosa .7s ease-out .7s forwards}@keyframes arrive-title{to{opacity:1}}@keyframes arrive-cover{0%{opacity:0;transform:translateY(20px) scale(1.03)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes arrive-sub{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes arrive-prosa{to{opacity:1}}html.from-foyer .dv{animation:arrive-dv .6s ease-out forwards}html.from-foyer .dv:nth-of-type(1){animation-delay:.9s}html.from-foyer .dv:nth-of-type(2){animation-delay:1s}html.from-foyer .dv:nth-of-type(3){animation-delay:1.1s}html.from-foyer .dv:nth-of-type(4){animation-delay:1.2s}html.from-foyer .dv:nth-of-type(5){animation-delay:1.3s}@keyframes arrive-dv{to{opacity:1}}html.leaving-to-foyer .masthead,html.leaving-to-foyer .hero,html.leaving-to-foyer .prosa,html.leaving-to-foyer .musik,html.leaving-to-foyer .insel,html.leaving-to-foyer .contact-sheet,html.leaving-to-foyer .liner,html.leaving-to-foyer .colophon{animation:viel-leave-dim .6s ease-out forwards}@keyframes viel-leave-dim{0%{opacity:1}to{opacity:0}}.leaving-fade{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:0;background:var(--ground)}html.leaving-to-foyer .leaving-fade{animation:fade-to-ground .7s ease-in .4s forwards;pointer-events:auto}html.leaving-to-foyer .dv{animation:dv-fold-out .5s ease forwards}@keyframes fade-to-ground{to{opacity:1}}@keyframes dv-fold-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.dv .rec .dot{animation:none}body:after{animation:none}html.from-foyer .arrival-mask{opacity:0!important;animation:none!important}html.from-foyer .masthead .left,html.from-foyer .masthead .mid,html.from-foyer .masthead .right,html.from-foyer .hero h1,html.from-foyer .hero-cover,html.from-foyer .hero .sub,html.from-foyer .prosa,html.from-foyer .dv{opacity:1!important;animation:none!important;transform:none!important}html.from-foyer body:after{animation:glutDrift 48s ease-in-out infinite alternate}html.leaving-to-foyer .masthead,html.leaving-to-foyer .hero,html.leaving-to-foyer .prosa,html.leaving-to-foyer .musik,html.leaving-to-foyer .insel,html.leaving-to-foyer .contact-sheet,html.leaving-to-foyer .liner,html.leaving-to-foyer .colophon,html.leaving-to-foyer .leaving-fade,html.leaving-to-foyer .dv{animation:none!important}}
