/* ===== RAWBURTZ 3×3 overlay ===== */
*,*::before,*::after{box-sizing:border-box;}

html,body{height:100%;}

body{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  font-family:system-ui,sans-serif;
}

/* ------------ responsive artwork wrapper ------------ */
.grid-wrap{
  position:relative;
  width:90vmin;       /* keeps 1:1 aspect ratio & scales w/ viewport */
  max-width:800px;    /* cap on very large screens */
}

/* background sketch */
.bg{
  width:100%;
  height:auto;
  display:block;
  pointer-events:none; /* clicks go to overlay links */
}

/* ------------ transparent link zones ------------ */
.zone{
  position:absolute;
  display:block;
  text-decoration:none;
}

/* 40‑20‑40 grid (rows & cols) */
.tl{left:0;   top:0;   width:40%; height:40%;}
.tc{left:40%; top:0;   width:20%; height:40%;}
.tr{left:60%; top:0;   width:40%; height:40%;}

.ml{left:0;   top:40%; width:40%; height:20%;}
.mc{left:40%; top:40%; width:20%; height:20%;}
.mr{left:60%; top:40%; width:40%; height:20%;}

.bl{left:0;   top:60%; width:40%; height:40%;}
.bc{left:40%; top:60%; width:20%; height:40%;}
.br{left:60%; top:60%; width:40%; height:40%;}

/* Optional debugging outline */
@media (hover:hover){
  .zone:hover,
  .zone:focus{
    outline:2px dashed #fff;
    outline-offset:-4px;
  }
}