/* Agua, the front door: navigation, home page, prizes and the additions to the card. */
.off{display:none!important}
#nav{display:flex;gap:6px 22px;padding:0;order:3;width:100%;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
@media (max-width:620px){#nav{gap:6px 16px}#nav a{font-size:13px}}
.hero.off+main{}
body[data-view="home"] .hero{padding-top:clamp(10px,2vh,24px)}
body[data-view="home"] .sub{margin-top:10px}
#nav::-webkit-scrollbar{display:none}
#nav a{color:var(--mute);text-decoration:none;font-weight:700;font-size:14px;padding:8px 0;border-bottom:2px solid transparent}
#nav a:hover{color:var(--ink)}
#nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
body[data-view="home"] main{padding-top:14px}
body:not([data-view="home"]) main{padding-top:clamp(20px,4vh,40px)}
.basin>.lede{margin:0 0 14px}

.hv{margin:0;font-weight:800;font-size:clamp(21px,3.2vw,34px);line-height:1.1;max-width:24ch;text-wrap:balance}
.hs{margin:8px 0 0;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--mute);max-width:60ch}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
@media (min-width:860px){.doors{grid-template-columns:repeat(4,1fr)}}
.door{display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-height:84px;padding:11px 12px;border:2px solid var(--ink);color:var(--ink);text-decoration:none}
.door b{font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:clamp(21px,2.6vw,30px);line-height:.95}
.door span{font-family:var(--mono);font-size:11px;line-height:1.35;color:var(--mute)}
.door:hover{background:var(--ink);color:var(--dark)}
.door:hover span{color:var(--dark)}
.tk{display:block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--mute)}
.teaser{display:block;margin-top:20px;color:var(--ink);text-decoration:none;max-width:560px}
.teaser .tb{display:flex;gap:12px;align-items:center;border-top:2px solid var(--ink);padding-top:10px;margin-top:6px}
.teaser svg{flex:none}
.teaser b{display:block;font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:22px;line-height:.98}
.teaser i,.aw i{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;line-height:1.45;color:var(--mute);margin-top:3px}
.teaser u,.hid u{display:block;font-weight:800;font-size:13px;margin-top:5px;text-underline-offset:3px}
.teaser:hover u,.hid:hover u{color:var(--water)}

.aws{display:grid;gap:0 32px;max-width:1100px}
@media (min-width:860px){.aws{grid-template-columns:1fr 1fr}}
.aw{display:flex;gap:14px;align-items:stretch;border-top:2px solid var(--ink);padding:12px 0;color:var(--ink);text-decoration:none}
.aw svg{flex:none}
.aw b{display:block;font-weight:900;font-stretch:66%;text-transform:uppercase;font-size:clamp(28px,3.4vw,40px);line-height:.9}
.aw em{display:block;font-style:normal;font-weight:800;font-size:15px;margin-top:5px}
.aw strong{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--water);white-space:nowrap}
.aw:hover b{color:var(--water)}
.rule{margin:14px 0 0;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--mute);max-width:74ch}
.rule a,.ctx a{color:var(--ink);text-underline-offset:3px}

#card{max-height:calc(100vh - 124px);overflow-y:auto}
.cm{margin:12px 0 0;font-weight:800;font-size:15px;line-height:1.3}
.mood{display:inline-block;font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:15px;color:var(--dark);background:var(--rock);padding:4px 8px;margin-right:4px}
.hid{display:block;margin-top:12px;border:2px solid var(--ink);padding:10px 12px;color:var(--ink);text-decoration:none}
.hid b{display:block;font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:19px;line-height:1;margin-top:5px}
.go{display:block;margin-top:8px;border:2px solid var(--line);padding:11px 12px;color:var(--ink);text-decoration:none;font-weight:800;font-size:13px;text-align:center}
.go:hover{border-color:var(--ink)}

.vtxt p.joke{font-family:var(--display);font-weight:800;font-size:clamp(19px,2.4vw,24px);line-height:1.15;color:var(--ink);margin:10px 0 0}
.vtxt p.ctx{color:var(--rock)}
.share{margin-top:14px;background:var(--ink);color:var(--dark);border:2px solid var(--ink);font-weight:800;font-size:14px;padding:12px 18px;min-height:44px}
.share:hover{background:transparent;color:var(--ink)}

.mwrap{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-start}
.mwrap canvas{flex:none}
#mside{flex:1 1 280px;max-width:460px;min-width:0}
#mside ol{list-style:none;margin:8px 0 0;padding:0;border-top:2px solid var(--ink)}
#mside li{display:grid;grid-template-columns:minmax(0,1fr) 90px 46px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:14px}
#mside li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mside li>i{display:block;height:12px;background:var(--rock)}
#mside li>i>i{display:block;height:100%;margin-left:auto;background:var(--water)}
#mside li b{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--water);text-align:right;font-variant-numeric:tabular-nums}
#mside p{margin:12px 0 0;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--mute)}

/* header: brand, menu, language. The menu takes its own line on a phone */
.top{flex-wrap:wrap;row-gap:4px}
.top .brand{order:1}.top .lang{order:2}
@media (min-width:1000px){
  #nav{order:2;width:auto;flex:0 1 auto;justify-content:center}
  #nav a[href="#/"]{display:none}
  .top .lang{order:3}
}

/* home: one column on a phone, two on a wide screen */
.home .hero{padding:0}
.home .hr{margin-top:26px}
.home .hr .bh{margin-bottom:10px}
.home .hr .bh h2{font-size:clamp(24px,3.2vw,40px);white-space:nowrap}
.home .hr .bm{white-space:normal;max-width:16ch}
.home .hc1{margin-top:14px}
.cw svg{display:block}
.bw .wt{transform-box:fill-box;transform-origin:50% 100%;transition:transform .9s cubic-bezier(.3,1.25,.5,1)}
@media (prefers-reduced-motion:reduce){.bw .wt{transition:none}}
.bw text{fill:#0B1112;pointer-events:none}
.bw .t1{font-family:var(--display);font-weight:800;font-size:14px}
.bw .t2{font-family:var(--mono);font-weight:600;font-size:12px}
.bw .t3{font-family:var(--display);font-weight:700;font-size:11px}
.bw:hover .wt,.bw:focus-visible .wt{fill:#4FA7BD}
.bw:focus-visible{outline:none}
.bw:focus-visible rect:first-child{stroke:#EEF1EC;stroke-width:4}
.find{margin-top:20px;max-width:620px}
.find label{display:block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--mute);margin-bottom:6px}
.find div{display:flex}
.find input{flex:1;min-width:0;background:var(--dark);border:2px solid var(--ink);border-right:0;color:var(--ink);font-family:var(--display);font-weight:800;font-size:clamp(16px,1.6vw,20px);padding:11px 12px;border-radius:0}
.find input::placeholder{color:var(--mute);opacity:.8}
.find button{background:var(--ink);color:var(--dark);border:2px solid var(--ink);font-weight:800;font-size:14px;padding:0 16px;min-height:48px}
.find button:hover{background:transparent;color:var(--ink)}
@media (min-width:1000px){
  .home{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
  .home .hr{margin-top:0}
  .home .doors{display:none}
  .home .teaser{margin-top:24px}
  body[data-view="home"] main{padding-top:20px}
}

/* map zoom */
.mbox{position:relative;flex:none;max-width:100%}
.mzoom{overflow:hidden;max-width:100%;overscroll-behavior:contain;scrollbar-width:thin}
.mbox.zoomed .mzoom{overflow:auto;outline:2px solid var(--line)}
.mzoom canvas{touch-action:pan-x pan-y;transform-origin:0 0}
.mctl{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:6px}
.mctl button{width:44px;height:44px;display:grid;place-items:center;background:var(--dark);border:2px solid var(--ink);color:var(--ink);padding:0}
.mctl button:hover{background:var(--ink);color:var(--dark)}
.mbox:not(.zoomed) .zout{opacity:.35;pointer-events:none}