:root{
  --paper:#fbfaf6; --ink:#141312; --ink2:#5b5853; --accent:#141312;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{
  color:var(--ink);background:var(--paper);
  font:500 13px/1.3 "Bricolage Grotesque",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* la portada se revela sobreexpuesta, como soñandodedía! */
#expo{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s}
#expo img{width:100%;height:100%;object-fit:cover;filter:brightness(1.45) contrast(.78) saturate(1.15) blur(1px)}
body.opening #expo{opacity:.62}

#top{
  position:fixed;left:0;right:0;top:0;z-index:3;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
  background:linear-gradient(var(--paper) 55%, rgba(251,250,246,0));
  font-size:13px;letter-spacing:.06em;
}
#top b{font-weight:800}
#toLinks{padding:4px 0 4px 10px;font-size:13px;opacity:.7}
body.opening #top{background:none}

main{position:relative;z-index:1;padding:54px 14px 170px}
#wall{
  font:800 clamp(46px,14.5vw,148px)/.86 "Bricolage Grotesque",sans-serif;
  font-variation-settings:"opsz" 96;
  letter-spacing:-.045em;
  word-break:break-all;overflow-wrap:anywhere;
  touch-action:pan-y;
}
.w{
  cursor:pointer;color:var(--ink);
  transition:letter-spacing .4s cubic-bezier(.3,1.3,.5,1),color .3s,opacity .35s;
}
.w:nth-child(even){color:var(--ink2)}
.sp{font-size:0;transition:font-size .4s cubic-bezier(.3,1.3,.5,1)}
.w.open{letter-spacing:-.01em;color:var(--ink);word-break:keep-all}
.w.open .sp{font-size:1em}
.w.open .bang{color:#e0302b}
.w.link{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.08em}
.w.pend{opacity:.4}
body.opening .w:not(.open){opacity:.14}

#foot{
  position:fixed;left:0;right:0;bottom:0;z-index:3;
  padding:22px 16px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(rgba(251,250,246,0), var(--paper) 42%);
  pointer-events:none;
}
body.opening #foot{background:linear-gradient(rgba(251,250,246,0), rgba(251,250,246,.85) 42%)}
#info{min-height:3.1em;font-size:14px;line-height:1.25}
#info b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em}
#hint{opacity:.6}
.disc{font-size:10px;letter-spacing:.08em;opacity:.55;margin-top:6px}

@media (min-width:760px){
  main{padding:70px 28px 190px}
  #top,#foot{padding-left:28px;padding-right:28px}
}
[hidden]{display:none!important}