/* desteba.com, the white rooms behind the black shield */
:root{
  --paper:#ffffff;
  --ink:#000000;
  --mute:rgba(0,0,0,.5);
  --rule:rgba(0,0,0,.12);
  --accent:#000000;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
html.saimox{--accent:#E6B24C}
html.hashid{--accent:#6E67C8}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;font-size:clamp(15px,.82rem + .4vw,22px)}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

.top{display:flex;align-items:center;justify-content:space-between;padding:3vh 6vw 0;position:relative;z-index:1}
.home{border:0;display:block}
.home img{display:block;height:40px;width:auto}
.home img.wordmark{height:clamp(48px,4.2vw,72px)}

main{flex:1;width:100%;max-width:100rem;padding:6vh 6vw 8vh;position:relative;z-index:1}
.mark{display:block;width:auto;height:clamp(52px,8vw,96px);margin:0 0 5vh}
.mark.wide{height:clamp(44px,6.5vw,80px)}

h1{font-weight:700;font-size:clamp(2rem,4.6vw,4.4rem);line-height:1.02;letter-spacing:-.025em;max-width:16em;margin:0 0 .45em}
.sub{font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.4;color:var(--mute);max-width:none;margin:0 0 5vh}
.intro{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.5;max-width:38em;margin:0 0 6vh}

.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:2.4rem 3rem;margin:0 0 6vh}
.parts p{font-size:1.05rem;line-height:1.5;max-width:30em}
.parts b{display:block;font-size:1.15rem;margin-bottom:.35em}

.facts{list-style:none;margin:0 0 6vh;max-width:none;border-top:1px solid var(--rule)}
.facts li{padding:.8em 0;border-bottom:1px solid var(--rule);font-size:1.05rem;line-height:1.45}

.tiers{display:grid;grid-template-columns:auto auto 1fr;column-gap:2rem;row-gap:.5em;max-width:40em;margin:0 0 1.2em;font-size:1.05rem;font-variant-numeric:tabular-nums}
.note{color:var(--mute);font-size:1rem;line-height:1.5;max-width:36em;margin:0 0 6vh}

.partner{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:2rem;align-items:start;max-width:52em;margin:0 0 6vh}
.partner img{width:100%;height:auto;display:block}
.partner p{font-size:1.05rem;line-height:1.5}
.partner b{display:block;font-size:1.15rem;margin-bottom:.35em}

.line{font-weight:700;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.2;letter-spacing:-.015em;max-width:22em;margin:0 0 5vh}
.go{font-size:1.15rem;line-height:1.6;margin:0 0 2vh}
.go a{margin-right:1.6em}
.status{color:var(--mute);font-size:.95rem}

a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);transition:color .15s ease,border-color .15s ease}
a:hover,a:focus-visible{color:var(--accent);outline:none}

footer{padding:0 6vw 4vh;font-size:12px;line-height:2;color:var(--mute);position:relative;z-index:1}
footer a{color:var(--mute);border-bottom:1px solid transparent}
footer a:hover,footer a:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}
footer .links a{margin-right:1.4em}
footer .lang{margin-left:.6em}
footer .lang a{margin-right:.7em}
footer .lang a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--ink)}

@media (max-width:600px){
  .partner{grid-template-columns:1fr}
  .tiers{column-gap:1.2rem}
  footer{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  a{transition:none}
}

/* about and legal pages: one column, plain sentences */
.essay,.legal{max-width:none}
.essay h2,.legal h2{font-weight:700;font-size:1.35rem;letter-spacing:-.01em;line-height:1.2;margin:2.6em 0 .7em}
.essay p,.legal p,.legal li{font-size:1.05rem;line-height:1.55;margin:0 0 1em}
.essay .lead{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.35;font-weight:700;letter-spacing:-.01em;margin:0 0 1.2em}
.essay .rules p b{display:block;margin-bottom:.15em}
.essay .motto{font-weight:700;font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.15;letter-spacing:-.025em;margin:0 0 6vh;max-width:none}
.essay .close{font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.35;font-weight:700;letter-spacing:-.01em;margin:3em 0 1.2em;max-width:none}
.essay .pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));gap:0 3rem}
.essay .three,.legal .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:.5rem 3rem}
.legal .grid{gap:1.5rem 3rem}
.legal .grid section h2{margin-top:0}
.essay .cols,.legal .cols{columns:26rem 3;column-gap:3rem}
.essay .cols p,.legal .cols p{break-inside:avoid}
.legal .lead{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.35;font-weight:700;letter-spacing:-.01em;margin:0 0 2em}
.legal ul{list-style:none;padding:0}
.legal .big{font-size:clamp(2.4rem,7vw,5.5rem);font-weight:700;letter-spacing:-.03em;line-height:1;margin:0 0 .3em}

/* studio background: a blurred wash and a slowly wandering, slightly shimmering focus */
:root{--bg-base:.6;--bg-focus:.9}
.bg,.bg-focus{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bgimg) center/cover no-repeat;opacity:0;transition:opacity 1.8s ease}
.bg{filter:blur(28px) saturate(.85);transform:scale(1.08)}
.bg-focus{-webkit-mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%) 50% 50%/80vmax 80vmax no-repeat;
  mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%) 50% 50%/80vmax 80vmax no-repeat;
  animation:wander 52s ease-in-out infinite alternate,shimmer 9s ease-in-out infinite}
html.bg-ready .bg{opacity:var(--bg-base)}
html.bg-ready .bg-focus{opacity:var(--bg-focus)}
@keyframes wander{
  0%{-webkit-mask-position:8% 18%;mask-position:8% 18%}
  35%{-webkit-mask-position:72% 28%;mask-position:72% 28%}
  65%{-webkit-mask-position:30% 78%;mask-position:30% 78%}
  100%{-webkit-mask-position:86% 66%;mask-position:86% 66%}
}
@keyframes shimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.1)}}
@media (prefers-reduced-motion:reduce){.bg-focus{animation:none}.bg,.bg-focus{transition:none}}

/* music: the studio page */
.music .mark{height:clamp(88px,13vw,160px)}
.music .photos{display:grid;grid-template-columns:1fr;gap:1.5rem;margin:1.5em 0 1em}
.music .photos img{display:block;width:100%;height:auto;max-height:72vh;object-fit:cover}
.music .artist-links{display:block;margin-top:.4em;font-weight:400}
.music .artist-links a{margin-right:1.3em;white-space:nowrap}
.music .tag{display:inline-block;vertical-align:middle;font-size:.62em;font-weight:400;letter-spacing:0;padding:.15em .65em;margin-left:.6em;border:1.5px solid var(--ink);border-radius:2em}