/*
Theme Name: Ecology of Noise
Description: Eenpagina-thema met fotocollage en ruizige titel.
Version: 3.0
*/
:root{--bg:#fff;--ink:#111}
html,body{margin:0;background:var(--bg)}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink)}
#hero{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
#stage{position:absolute;inset:0;pointer-events:none}
.ph{position:absolute;left:58%;top:50%;width:min(80vw,52vh);margin:0;transform:translate(-50%,-50%);z-index:3}
.ph img{display:block;width:100%;height:auto;animation:in 1.3s cubic-bezier(.2,.7,.2,1) backwards}
.side{position:fixed;left:3vw;bottom:5vh;z-index:30;display:flex;flex-direction:column;align-items:flex-start;gap:10px;pointer-events:none}
.side .sub{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.side .sub a,.side button.more{box-sizing:border-box;width:104px;font-size:14px;padding:.65em 0;text-align:center}
.side a,.side .more{pointer-events:auto;display:inline-block;font:400 17px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);text-decoration:none;border:1px solid var(--ink);border-radius:999px;padding:.75em 1.4em;background:var(--bg);cursor:pointer;transition:background .25s,color .25s}
.side .sub a{text-align:center;--o:0s;--c:0s;transition:background .25s,color .25s,transform .38s cubic-bezier(.2,.8,.2,1) var(--o),opacity .3s var(--o)}
.side .sub>:nth-last-child(1){--o:0s;--c:.14s}.side .sub>:nth-last-child(2){--o:.07s;--c:.07s}.side .sub>:nth-last-child(3){--o:.14s;--c:0s}
.side:not(.open) .sub a{opacity:0;visibility:hidden;pointer-events:none;transition:background .25s,color .25s,transform .3s cubic-bezier(.5,0,.8,.4) var(--c),opacity .25s var(--c),visibility 0s calc(var(--c) + .3s)}
.side:not(.open) .sub>:nth-last-child(1){transform:translateY(44px) scale(.4)}
.side:not(.open) .sub>:nth-last-child(2){transform:translateY(88px) scale(.4)}
.side:not(.open) .sub>:nth-last-child(3){transform:translateY(132px) scale(.4)}
.side .more:hover,.side .more:focus-visible,.side.open .more,.side a:hover,.side a:focus-visible{background:var(--ink);color:var(--bg);outline:none}
.side button.more,.side button.more:hover,.side button.more:focus-visible,.side.open button.more{background:#000;color:#fff;border-color:#000}
.side.open .sub a:hover{transform:translateX(6px);transition-delay:0s}
@media(max-width:700px){.side{bottom:4vh;left:5vw}}
#txt{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none}
#story{background:var(--bg);color:var(--ink);padding:14vh 6vw 12vh;min-height:70vh;box-sizing:border-box;display:flex;justify-content:flex-end;align-items:flex-end}
#story{position:relative}
#story>div:not(.shapes){width:min(100%,40ch);position:relative;z-index:1}
.shapes{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.shapes svg{display:block;animation:sh 1.4s ease .2s backwards}
@keyframes sh{from{opacity:0}}
#story h2{margin:0 0 2.2em;font-weight:300;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
#story .t{font-size:clamp(15px,1.1vw,17.5px);line-height:1.65;font-weight:400}
#story .t p{margin:0 0 1.3em}
.ph2{left:36%;top:44%;width:min(66vw,42vh);z-index:2}
.ph2 img{animation-delay:.25s}
@keyframes in{from{opacity:0;transform:translateY(34px)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr h1{font-weight:400;margin:0}.sr p{font-weight:300;margin:0}
.fields{position:fixed;right:3vw;top:4.5vh;z-index:6;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.fields .fsub{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fields a,.fields button.fmore{pointer-events:auto;box-sizing:border-box;width:132px;height:36px;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;border:1px solid var(--ink);border-radius:999px;font:400 14px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;text-decoration:none;cursor:pointer;padding:0}
.fields a{--o:0s;--c:0s;transition:background .25s,color .25s,transform .38s cubic-bezier(.2,.8,.2,1) var(--o),opacity .3s var(--o)}
.fields button.fmore{background:#000;color:#fff;border-color:#000}
.fields a:nth-child(1){--o:0s;--c:.21s}.fields a:nth-child(2){--o:.07s;--c:.14s}.fields a:nth-child(3){--o:.14s;--c:.07s}.fields a:nth-child(4){--o:.21s;--c:0s}
.fields:not(.open) a{opacity:0;visibility:hidden;pointer-events:none;transition:background .25s,color .25s,transform .3s cubic-bezier(.5,0,.8,.4) var(--c),opacity .25s var(--c),visibility 0s calc(var(--c) + .3s)}
.fields:not(.open) a:nth-child(1){transform:translateY(-44px) scale(.4)}.fields:not(.open) a:nth-child(2){transform:translateY(-88px) scale(.4)}.fields:not(.open) a:nth-child(3){transform:translateY(-132px) scale(.4)}.fields:not(.open) a:nth-child(4){transform:translateY(-176px) scale(.4)}
.fields a:hover,.fields a:focus-visible{outline:none}
.fields.open a:hover{transform:translateX(-6px);transition-delay:0s}
@media(max-width:700px){.fields{right:5vw;top:3vh}}

#story .by{margin-top:2em;font-size:12px;letter-spacing:.14em;text-transform:uppercase}


/* tabjes die eruit komen: zwart omlijnd, ingevuld met ruis in #f74f76 */
.side .sub a,.fields a{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);color:var(--ink);border-color:var(--ink)}
.side .sub a:hover,.side .sub a:focus-visible,.fields a:hover,.fields a:focus-visible{background:#000;color:#fff}


#story{padding-left:0;padding-right:0;justify-content:flex-start}#story>div:not(.shapes){width:min(80vw,52vh);margin-left:calc(58% - min(80vw,52vh)/2)}

#story,#story h2,#story .t{text-transform:lowercase}

#story h2{display:flex;align-items:center;gap:1em;margin:0 0 2.8em;font-size:11px;letter-spacing:.16em}
#story h2:after{content:"";flex:1;height:1px;background:currentColor;opacity:.9}
#story .t{text-wrap:pretty}
#story .t p:first-child{font-size:clamp(17px,1.32vw,20px);line-height:1.3;font-weight:300;letter-spacing:-.012em;margin:0 0 2.1em}
#story .t p:not(:first-child){font-size:clamp(14px,1.02vw,16px);line-height:1.62;font-weight:400;margin:0 0 1.5em;max-width:36em}
#story .t p:nth-child(n+2):before{content:"";display:block;width:7px;height:7px;background:currentColor;margin:0 0 .95em}
#story .t p:nth-child(3):before{border-radius:50%}

#story h2{font-size:clamp(17px,1.32vw,20px);line-height:1.3;font-weight:700;letter-spacing:-.012em;margin:0 0 1.6em}
#story .t p,#story .t p:first-child,#story .t p:not(:first-child){font-size:clamp(17px,1.32vw,20px);line-height:1.3;font-weight:300;letter-spacing:-.012em;margin:0 0 1.6em;max-width:none}

.side .sub a.soon,.side .sub a.soon:hover,.fields a.soon,.fields a.soon:hover{background:#f74f76!important;color:#111!important;border-color:#111}


.side .sub>.grp{position:relative;--o:0s;--c:0s;transition:transform .38s cubic-bezier(.2,.8,.2,1) var(--o),opacity .3s var(--o)}
.side:not(.open) .sub>.grp{opacity:0;transition:transform .3s cubic-bezier(.5,0,.8,.4) var(--c),opacity .25s var(--c)}
.side .more2{position:absolute;left:calc(100% + 10px);top:0;display:flex;flex-direction:row;gap:10px;opacity:0;visibility:hidden;transform:translateX(-18px);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.side .grp.open .more2{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
.side .more2 a{transition:background .25s,color .25s}

.side .sub>.grp{display:flex;flex-direction:column}.side .grp>.person{display:block}

.side .sub>.grp{align-self:flex-start}.side .sub .sm{width:92px;font-size:12.5px;padding:.6em 0}


.disc{position:fixed;inset:0;z-index:25;background:transparent;pointer-events:none;overflow:auto;padding:16vh 0 14vh;box-sizing:border-box}
.disc>*{pointer-events:auto}.dpage{pointer-events:none}.dpage>*{pointer-events:auto}
html.pg #stage .ph,html.pg #txt{visibility:hidden}

.disc[hidden],.dpage[hidden]{display:none}
.disc .back{position:fixed;left:3vw;top:4.5vh;box-sizing:border-box;width:104px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#000;color:#fff;border:1px solid #000;font:400 14px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;text-decoration:none;z-index:26}
.disc .back:hover{background:#fff;color:#111}
@keyframes bf{from{opacity:0}to{opacity:1}}
.disc .back .bn{position:absolute;background:#f74f76;pointer-events:none}
@keyframes bnw{0%,100%{translate:0 0}33%{translate:var(--x1) var(--y1)}66%{translate:var(--x2) var(--y2)}}
@keyframes bnf{0%,100%{opacity:1}22%{opacity:.15}28%{opacity:1}58%{opacity:.4}63%{opacity:1}80%{opacity:0}85%{opacity:1}}
@media(prefers-reduced-motion:reduce){.disc .back .bn{animation:none!important}}
.disc .back{animation:bf .5s ease both;box-shadow:0 0 16px 3px rgba(247,79,118,.54)}
.dpage{width:min(80vw,52vh);margin-left:calc(58% - min(80vw,52vh)/2);text-transform:lowercase;color:var(--ink)}
.dpage h1{margin:0 0 .45em;font-weight:300;font-size:clamp(34px,5vw,72px);line-height:1;letter-spacing:-.03em}
.dpage .uc{margin:0 0 2.4em;font-size:clamp(17px,1.32vw,20px);line-height:1.3;font-weight:400;letter-spacing:-.012em;color:#f74f76}
.dpage p{margin:0 0 1.6em;font-size:clamp(17px,1.32vw,20px);line-height:1.3;font-weight:300;letter-spacing:-.012em;text-wrap:pretty}
.dpage ul{list-style:none;margin:3em 0 0;padding:0;font-size:14px;font-weight:300}
.dpage ul li{margin:0;padding:.9em 0;border-top:1px solid var(--ink)}
.dpage ul li:last-child{border-bottom:1px solid var(--ink)}
.dpage h2,.dpage h3{font-weight:300;letter-spacing:-.02em;line-height:1.1;margin:1.6em 0 .6em}
.dpage img,.dpage figure{max-width:100%;height:auto;margin:0 0 1.6em}
.dpage a{color:inherit}
.fields{z-index:27}
@media(max-width:700px){.dpage{width:calc(100% - 12vw);margin-left:6vw}}

#page{position:relative}
#page>.shapes{z-index:2}
#hero,#story{background:transparent!important}

#story .t{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3;text-wrap:wrap;word-spacing:-.02em}
#story .t p{text-align:justify;text-align-last:left}