/* we killed god — white bg, black text, photos boxed around the mixes */
:root{
  --disp:"Oswald","Arial Narrow",sans-serif;
  --mono:"Space Mono","Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#fff;color:#000;
  font-family:var(--mono);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* light grain over the white page */
.grain{
  position:fixed;inset:0;z-index:50;pointer-events:none;
  opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px;animation:grain .55s steps(3) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-4%,3%)}66%{transform:translate(3%,-2%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion: reduce){.grain{animation:none}}

/* ---- Landing ---- */
.hero{
  position:relative;min-height:100svh;width:100%;
  display:flex;align-items:center;
  background:#fff;padding:4vh 6vw;overflow:hidden;
}
.wkg{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;
  font-family:var(--disp);font-weight:700;color:#000;text-transform:lowercase;
  line-height:.95;letter-spacing:0;
}
.wkg span{display:block}
.wkg .l1{font-size:min(28vw,22vh)}
.wkg .l2{font-size:min(46vw,38vh)}
.wkg .l3{font-size:min(38vw,30vh)}

/* ---- Photo box wrapping the mixes ---- */
.mixbox{
  position:absolute;right:5vw;top:50%;transform:translateY(-50%);z-index:4;
  padding:32px 34px;overflow:hidden;max-width:46vw;
  border:1px solid #000;
}
.mixbox .bg{
  position:absolute;inset:0;z-index:0;
  background:center/cover no-repeat;opacity:0;transition:none;
}
.mixbox .bg.show{opacity:1}

.mixnav{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-end;gap:20px;
}
.mtitle{
  display:inline-block;white-space:nowrap;text-align:right;
  font-family:var(--disp);font-weight:600;text-transform:lowercase;
  font-size:clamp(14px,1.9vw,25px);letter-spacing:.06em;line-height:1.1;
  color:#fff;background:transparent;border:none;cursor:pointer;padding:0;
  transition:opacity .15s;
}
.mtitle:hover{opacity:.72}
.mtitle.cur{
  background:linear-gradient(90deg,#fff 0%,#fff var(--p,0%),rgba(255,255,255,.35) var(--p,0%),rgba(255,255,255,.35) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.orig{
  font-family:var(--mono);font-size:.4em;letter-spacing:.14em;text-transform:uppercase;
  vertical-align:super;margin-right:.55em;
  color:rgba(255,255,255,.55);-webkit-text-fill-color:rgba(255,255,255,.55);
}

/* discreet contact */
.contact{
  position:fixed;right:6vw;bottom:3vh;z-index:6;
  display:flex;gap:22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.contact a{color:#000;opacity:.35;transition:opacity .15s}
.contact a:hover{opacity:.9}

/* stack the box under the title when it would otherwise overlap (narrow / portrait) */
@media(max-width:900px),(orientation:portrait){
  .hero{flex-direction:column;align-items:flex-start;justify-content:center;
    gap:6vh;padding:9vh 7vw 8vh}
  .wkg .l1{font-size:22vw}
  .wkg .l2{font-size:36vw}
  .wkg .l3{font-size:30vw}
  .mixbox{position:relative;transform:none;right:auto;top:auto;
    display:flex;width:100%;max-width:100%;min-height:56vh;padding:30px 26px}
  .mixnav{flex:1;align-items:flex-end;justify-content:space-between;width:100%}
  .mtitle{white-space:normal;text-align:right;font-size:clamp(16px,4.4vw,24px)}
  .contact{position:static;right:auto;bottom:auto;margin-top:4vh;align-self:flex-end;justify-content:flex-end}
}