/* ARLing Puzzle Village. The poster sits on the dark hub page like a print
   pinned to a wall; everything inside it speaks in the poster's own inks. */
.vl-hero{padding-top:clamp(26px,3.2vw,48px);padding-bottom:clamp(18px,2vw,28px)}
.vl-hero h1{max-width:18ch}
.vl-hero .lead{margin-bottom:0}
.vl-hero .vl-howto{margin:22px 0 0;font:500 14px/1.5 var(--ui);color:var(--muted);max-width:70ch}
.vl-hero .vl-howto kbd{font:600 12px/1 var(--ui);padding:3px 6px;border-radius:5px;border:1px solid var(--line);color:var(--ink)}

.vl-wrap{position:relative;width:min(1432px,calc(100vw - 32px));margin:0 auto}
.vl{--p-paper:#f4ecd9;--p-ink:#283046;--p-line:rgba(40,48,70,.2);--p-pink:#ff6896;--p-blue:#3460b2;
  position:relative;height:clamp(520px,76vh,880px);border-radius:14px;overflow:hidden;overflow:clip;background:var(--p-paper);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px -30px rgba(0,0,0,.7);touch-action:none;user-select:none;-webkit-user-select:none;
  contain:layout paint}
.vl.vl-eve{--p-paper:#8f8ca8}
.vl canvas{display:block;position:absolute;inset:0;cursor:grab;outline:none;opacity:0;transition:opacity .5s var(--ease)}
.vl.vl-ready canvas{opacity:1}
.vl.vl-grab canvas{cursor:grabbing}
.vl canvas:focus-visible{box-shadow:inset 0 0 0 3px var(--p-blue)}

.vl-places{position:absolute;inset:0;pointer-events:none;overflow:hidden;overflow:clip}
.vl-spot{position:absolute;left:0;top:0;padding:0;margin:0;border:0;background:none;pointer-events:none;border-radius:50%;opacity:1}
.vl-spot:focus{outline:none}
.vl-spot:focus-visible{outline:2px dashed var(--p-blue);outline-offset:0;box-shadow:0 0 0 4px rgba(244,236,217,.7)}

.vl-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;overflow:clip}
.vl-lab{position:absolute;left:0;top:0;padding:4px 7px 5px;border-radius:7px;background:rgba(251,246,234,.94);color:#283046;
  font:700 12px/1 var(--ui);letter-spacing:.01em;white-space:nowrap;box-shadow:0 0 0 1px rgba(40,48,70,.14),2px 2px 0 rgba(255,104,150,.6);
  opacity:0;transition:opacity .2s var(--ease)}
.vl-labs-on .vl-lab{opacity:1}
.vl-lab-soon{background:rgba(251,246,234,.8);color:#5a6078;box-shadow:0 0 0 1px rgba(40,48,70,.12)}
.vl-lab em{margin-left:5px;font:600 11px/1 var(--ui);font-style:normal;color:#8a5a2e}
.vl.vl-grab .vl-lab{transition:none}
.vl .vl-tip{position:absolute;left:0;top:0;margin:0;padding:5px 10px 6px;border-radius:8px;background:var(--p-ink);color:#f4ecd9;
  font:700 13px/1 var(--ui);letter-spacing:.01em;pointer-events:none;white-space:nowrap;box-shadow:3px 3px 0 rgba(255,104,150,.7)}

.vl-tools{position:absolute;top:12px;right:12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 24px)}
.vl-tools button{display:inline-flex;align-items:center;gap:6px;height:36px;min-width:36px;padding:0 10px;border-radius:9px;
  border:1px solid var(--p-line);background:rgba(250,245,232,.92);color:var(--p-ink);font:600 13px/1 var(--ui);cursor:pointer;
  transition:background .15s var(--ease),transform .15s var(--ease)}
.vl-tools button:hover{background:#fffaf0}
.vl-tools button:active{transform:translateY(1px)}
.vl-tools button:focus-visible{outline:2px solid var(--p-blue);outline-offset:2px}
.vl-tools svg{width:16px;height:16px;flex:none}
.vl-tools .vl-icon{padding:0;justify-content:center}
.vl-tools [aria-pressed="true"]{background:var(--p-ink);color:#f4ecd9;border-color:var(--p-ink)}

.vl .vl-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;padding:8px 12px;border-radius:9px;background:var(--p-ink);
  color:#f4ecd9;font:600 13px/1.3 var(--ui);pointer-events:none;white-space:nowrap}

.vl-card{--ink:#283046;--body:#3a4058;--muted:#5a6078;position:absolute;left:0;top:0;z-index:2;width:min(330px,calc(100% - 24px));padding:18px 18px 16px;border-radius:12px;background:#fbf6ea;
  color:var(--p-ink);border:1px solid var(--p-line);box-shadow:5px 5px 0 rgba(52,96,178,.55),0 20px 40px -20px rgba(0,0,0,.4)}
/* the card is a <section>: the page's own section padding must not reach it */
#vl-card{--p-ink:#283046;--p-line:rgba(40,48,70,.2);--p-blue:#3460b2;padding:18px 18px 16px;border:1px solid var(--p-line)}
.vl-card.vl-in{animation:vl-in .32s var(--spring) both}
@keyframes vl-in{from{opacity:0;translate:0 6px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
#vl-card .vl-card-where{margin:0 34px 6px 0;font:700 11px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#b0385c}
#vl-card h2{margin:0 0 8px;font:700 26px/1.1 var(--display);letter-spacing:-.01em;color:var(--p-ink);outline:none}
#vl-card p{margin:0 0 10px;font:400 15px/1.45 var(--ui);color:#3a4058}
#vl-card .vl-card-rule{padding-top:10px;border-top:1px solid var(--p-line);font-size:14px}
#vl-card .vl-card-rule b{color:var(--p-ink)}
.vl-card .btn{margin-top:4px;height:42px}
.vl-card .btn:focus-visible{outline:2px solid var(--p-blue);outline-offset:2px}
#vl-card .vl-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:8px;border:1px solid var(--p-line);background:transparent;color:var(--p-ink);cursor:pointer;display:grid;place-items:center}
.vl-close:hover{background:rgba(40,48,70,.06)}
.vl-close:focus-visible{outline:2px solid var(--p-blue);outline-offset:2px}
.vl-close svg{width:14px;height:14px}
.vl .vl-bezjs{position:absolute;inset:auto 16px 16px 16px;margin:0;color:var(--p-ink);font:500 15px/1.5 var(--ui)}

.vl-wrap .vl-foot{display:flex;flex-wrap:wrap;gap:6px 22px;margin:12px 0 0;font:500 13px/1.5 var(--ui);color:var(--muted)}

/* the list of houses, for readers, search engines and anyone who prefers text */
.vl-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,64px)}
.vl-list li{padding:18px 0 20px;border-top:1px solid var(--line);display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px}
.vl-list .n{font:600 13px/1.9 var(--ui);color:var(--muted);font-variant-numeric:tabular-nums}
.vl-list h3{margin:0;font:700 19px/1.3 var(--display);letter-spacing:-.005em}
.vl-list h3 a{color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--accent),var(--accent));background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .25s var(--ease)}
.vl-list h3 a:hover,.vl-list h3 a:focus-visible{background-size:100% 2px}
#houses .vl-soon{margin:26px 0 0;max-width:62ch;font:400 15px/1.55 var(--ui);color:var(--muted)}
#houses .vl-list .kde{margin:2px 0 6px;font:600 12px/1.4 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-light)}
#houses .vl-list p{margin:0;max-width:56ch;font:400 15px/1.55 var(--ui);color:var(--body)}
.vl-list .hraj{display:inline-block;margin-top:8px;font:600 14px/1.4 var(--ui);color:var(--ink)}
.vl-list .hraj::after{content:" \2192";color:var(--accent)}

@media (max-width:760px){
  .vl-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* the stage takes the island's own shape, so the whole island fits across
     with no empty paper under it; the card goes under the picture */
  .vl{height:clamp(340px,calc((100vw - 32px) * 1.02),64vh);border-radius:12px}
  .vl-wrap{width:calc(100vw - 32px)}
  .vl-card{position:relative;left:auto;top:auto;width:auto;margin:12px 0 0;transform:none !important;box-shadow:4px 4px 0 rgba(52,96,178,.55)}
  #vl-card h2{font-size:22px;margin-bottom:6px}
  #vl-card p{font-size:14px;margin-bottom:8px}
  #vl-card{padding:14px 14px 14px}
  .vl-tools{top:10px;right:10px;gap:5px}
  .vl-tools button{height:34px;padding:0 9px}
  .vl-tools .vl-txt span{display:none}
  .vl .vl-tip{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vl canvas,.vl-lab{transition:none}
  .vl-card.vl-in{animation:none}
}