/* MAVRA- · black & white · monospace · neocities */
:root{
  --ink:#000;
  --paper:#fff;
}
*{box-sizing:border-box}
html{
  background:var(--paper);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0 auto;
  padding:0 12px 40px;
  max-width:960px;
  background:var(--paper);
  color:var(--ink);
  font-family:"Courier New",ui-monospace,Menlo,Consolas,monospace;
  font-size:15px;
  line-height:1.45;
}
a{color:var(--ink);text-decoration:underline}
a:hover{background:var(--ink);color:var(--paper);text-decoration:none}
img{max-width:100%;height:auto;display:block;border:2px solid var(--ink)}
hr{border:none;border-top:2px solid var(--ink);margin:28px 0}
::selection{background:var(--ink);color:var(--paper)}

/* header logo (subpages) */
#logo{
  text-align:center;
  margin:18px 0 4px;
}
#logo pre{
  display:inline-block;
  text-align:left;
  font-size:clamp(6px,1.9vw,14px);
  line-height:1.1;
  margin:0;
}
.desc{text-align:center;margin:14px 0 2px}

/* nav strip */
#nav{
  text-align:center;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  padding:6px 0;
  margin:0 0 18px;
  letter-spacing:1px;
}
#nav a{margin:0 6px;white-space:nowrap}

/* the map: full-bleed, fine-grained, one document */
#mapwrap{
  --fs:calc(100vw / 390);
  position:relative;
  width:100vw;
  margin:0 calc(50% - 50vw) 10px;
  overflow:hidden;
  border:none;
  padding:0;
}
#map{
  margin:0;
  font-size:var(--fs);
  line-height:1.08;
  white-space:pre;
  letter-spacing:0;
}
/* overlays: positioned in map-cell units (x: cells, y: rows) */
.ov{
  position:absolute;
  left:calc(var(--x) * var(--fs) * 0.6);
  top:calc(var(--y) * var(--fs) * 1.08);
  font-size:calc(var(--fs) * 4.6);
  line-height:1.4;
  background:var(--paper);
  white-space:nowrap;
  transform:rotate(var(--r, 0deg));
  transform-origin:top left;
}
.ovsm{font-size:calc(var(--fs) * 3.8)}
.ovh{
  font-size:calc(var(--fs) * 3.2);
  font-weight:bold;
  letter-spacing:0.25em;
}
.ovlist a{font-weight:bold}
.ov .dim{font-size:calc(var(--fs) * 3.8)}
.ovcap{
  width:calc(var(--w) * var(--fs) * 0.6);
  font-size:calc(var(--fs) * 3.8);
  text-align:center;
  white-space:normal;
  line-height:1.3;
}
.ovcap a{text-decoration:none;border-bottom:1px solid var(--ink)}
.ovcap a:hover{background:var(--ink);color:var(--paper)}
.ovpre{
  font-size:calc(var(--fs) * 3.1);
  line-height:1.25;
  font-family:inherit;
  margin:0;
  white-space:pre;
}
.ovimg{
  position:absolute;
  left:calc(var(--x) * var(--fs) * 0.6);
  top:calc(var(--y) * var(--fs) * 1.08);
  width:calc(var(--w) * var(--fs) * 0.6);
  display:block;
  background:var(--paper);
  transform:rotate(var(--r, 0deg));
  transform-origin:top left;
}
.ovimg{text-decoration:none}
.ovimg img{
  width:100%;
  display:block;
  border:1px solid var(--ink);
  max-height:calc(var(--fs) * 72);   /* very tall images cap here */
  object-fit:contain;
}
.ovimg .cap{
  display:block;
  font-size:calc(var(--fs) * 3.8);
  line-height:1.3;
  text-align:center;
  margin-top:calc(var(--fs) * 1.8);
  white-space:normal;
  text-decoration:underline;
  color:var(--ink);
}
.ovimg:hover img{outline:3px solid var(--ink)}
.ovimg:hover .cap{background:var(--ink);color:var(--paper);text-decoration:none}
@media (max-width:640px){
  /* closer default zoom: map larger than the screen, scrollable */
  #mapwrap{overflow-x:auto;--fs:1.5px;-webkit-overflow-scrolling:touch}
  /* stickers recede */
  .stickerwall{gap:3px}
  .stickerwall img{width:44px;height:15.5px}
  #stickers{margin-top:8px}
}
#trickle{
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  display:grid;
  grid-template-columns:repeat(40, 1fr);
  grid-auto-rows:1fr;
}
#trickle i{
  background:var(--paper);
  animation:trk .05s steps(1) forwards;
  animation-delay:var(--d, 0ms);
}
@keyframes trk{to{opacity:0}}
.zone{
  cursor:pointer;
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  position:relative;
}
.zone::after{content:"";position:absolute;inset:-8px}
.zone:hover{background:var(--ink);color:var(--paper);border-bottom:none}
.st{font-weight:bold}
.mapnote{font-size:12px;text-align:center;margin:0 0 26px}

/* sections */
.sec{border:2px solid var(--ink);margin:0 0 22px}
.sec > h2{margin:0}
.sec-toggle{
  display:block;
  width:100%;
  text-align:left;
  background:var(--paper);
  color:var(--ink);
  border:none;
  border-bottom:2px solid transparent;
  font:inherit;
  font-weight:bold;
  font-size:16px;
  letter-spacing:2px;
  padding:10px 12px;
  cursor:pointer;
}
.sec-toggle:hover{background:var(--ink);color:var(--paper)}
.sec.open .sec-toggle{border-bottom:2px solid var(--ink)}
.sec-body{padding:16px 14px}
html.js .sec:not(.open){display:none}
html.js .sec:not(.open) .sec-body{display:none}

/* store grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
}
.work{border:2px solid var(--ink);padding:8px;text-align:center}
.work a.imglink:hover{background:transparent}
.work img{margin:0 auto 8px;border:1px solid var(--ink)}
.work .wt{font-weight:bold}
.work .wp{margin-top:2px}

/* calendar */
.cals{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}
.cals pre{margin:0;font-size:14px;line-height:1.35}
.cal-mark{background:var(--ink);color:var(--paper);font-weight:bold}
.callegend{text-align:center;margin-top:12px;font-size:13px}

/* shows */
.showrow{margin:0 0 14px}
.showrow .when{font-size:13px}

/* manifesto */
.manifesto{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}
.manifesto p{margin:0 0 18px}
.dotted{letter-spacing:4px}

/* team */
.team{max-width:640px;margin:0 auto;text-align:center}

/* stickers */
#stickers{
  margin-top:14px;
  padding-top:6px;
  text-align:center;
}
#stickers h2{font-size:14px;letter-spacing:3px}
.stickerwall{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  align-items:center;
}
.stickerwall img{
  width:88px;height:31px;
  border:none;
  image-rendering:pixelated;
}
.badge{
  width:88px;height:31px;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;line-height:1.1;
  padding:2px;text-align:center;
  border:2px solid var(--ink);
  user-select:none;
}
.badge.b-double{border-style:double;border-width:4px}
.badge.b-dashed{border-style:dashed}
.badge.b-dotted{border-style:dotted}
.badge.b-inv{background:var(--ink);color:var(--paper)}
.badge.b-round{border-radius:14px}
.badge.b-thick{border-width:4px}
.badge.b-tilt1{transform:rotate(-2deg)}
.badge.b-tilt2{transform:rotate(1.6deg)}
.badge:hover{background:var(--ink);color:var(--paper)}
.badge.b-inv:hover{background:var(--paper);color:var(--ink)}
.userbox{
  display:flex;align-items:stretch;
  width:240px;height:44px;
  border:1px solid var(--ink);
  font-size:10px;text-align:left;
  user-select:none;
}
.userbox .ub-l{
  width:44px;min-width:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:bold;
  background:var(--ink);color:var(--paper);
}
.userbox .ub-r{display:flex;align-items:center;padding:3px 6px}
.barnstar{font-size:8px;line-height:1.05;margin:0;display:inline-block;text-align:left}

/* footer */
#foot{
  text-align:center;
  font-size:13px;
  margin-top:26px;
  border-top:2px solid var(--ink);
  padding-top:14px;
}

/* subpages */
.crumb{margin:14px 0}
.workpage,.showpage{max-width:720px;margin:0 auto}
.workpage h1,.showpage h1{letter-spacing:2px}
.meta{border:2px solid var(--ink);padding:10px 12px;margin:14px 0}
.buy{
  display:inline-block;
  border:3px solid var(--ink);
  padding:10px 18px;
  font-weight:bold;
  letter-spacing:1px;
  text-decoration:none;
  margin:10px 0;
}
.buy:hover{background:var(--ink);color:var(--paper)}
.imgs img{margin:0 0 6px}
.imgcap{font-size:12px;margin:0 0 18px}
.ph{font-size:12px;border:1px dashed var(--ink);padding:2px 6px;display:inline-block;margin:0 0 10px}

@media (max-width:640px){
  body{font-size:14px}
  #nav{letter-spacing:0}
  #nav a{margin:0 3px}
  .cals pre{font-size:12px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media (prefers-reduced-motion:reduce){
  #trickle{display:none}
}