<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Site Map | Gennaro NYC</title>

<style>
  /* ====== BASE (desktop & laptop default) ====== */
  :root{
    --brand:#92000a;
    --ink:#222;

    /* Hotspot placements for large screens */
    --home-x:42%;  --home-y:20%;
    --story-x:15%; --story-y:32%;
    --menu-x:42%;  --menu-y:32%;
    --wine-x:68%;  --wine-y:32%;
    --press-x:42%; --press-y:45%;
    --verse-x:42%; --verse-y:57%;

    --link-size: clamp(22px,2.8vw,46px);

    /* Background controls */
    --bg-fit: cover;      /* base behavior; tablets use 'contain' */
    --bg-pos-y: 50%;      /* 0% top … 100% bottom */
    --bg-shift: 0px;      /* pixel nudge (negative = up, positive = down) */
    --bg-url: url("img/sitemap-bg.webp?v=4"); /* cache-bust here */

    /* Title anchors */
    --title-x: 44%;
    --title-y: 23%;

    /* Stroke defaults: white for mobile by default */
    --stroke-color: #fff;
    --stroke-width: .5px;
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
    color:var(--ink);
    overflow:hidden;
    background:#000;
  }

  .wrap{position:relative; min-height:100vh; isolation:isolate}

  /* ==== BACKGROUND (now CSS background, not an <img>) ==== */
  .bg{
    position:absolute;
    inset:-15dvh 0 0 0; /* laptop+ dramatic look */
    z-index:-2;
    overflow:hidden;
    pointer-events:none;

    /* The image and its controls */
    background-image: var(--bg-url);
    background-repeat: no-repeat;
    background-size: var(--bg-fit);
    /* Combine % alignment and pixel nudge */
    background-position:
      50%
      calc(var(--bg-pos-y) + var(--bg-shift));
  }

  /* Gradient overlay */
  .bg::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(to bottom,
      rgba(0,0,0,.30),
      rgba(0,0,0,.16) 35%,
      rgba(0,0,0,.10) 55%,
      rgba(0,0,0,.28));
  }

  h1{
    margin: clamp(14px,4dvh,36px) auto 0;
    text-align:center;
    font-weight:700;
    letter-spacing:.04em;
    font-size: clamp(26px,4.8vw,56px);
    color: var(--brand);
    text-shadow: 0 2px 12px rgba(255,255,255,.35),
                 0 2px 18px rgba(0,0,0,.22);
  }
  
  .sitemap-title {
    position:absolute;
    top: var(--title-y, 23%);
    left: var(--title-x, 44%);
    transform: translate(-50%,-50%);
    color: var(--brand);
    font-weight:800;
    letter-spacing:.04em;
    font-size: clamp(18px, 5vw, 60px);
    -webkit-text-stroke: var(--stroke-width, .5px) var(--stroke-color, #fff);
    text-shadow:
      0 1px 2px rgba(0,0,0,.25),
      0 0 12px rgba(0,0,0,.25);
  }

  /* ==== HOTSPOTS ==== */
  .hotspots{position:absolute; inset:0}
  .hotspots a{
    position:absolute;
    transform:translate(-50%,-50%);
    font-weight:700;
    font-size:var(--link-size);
    text-transform:uppercase;
    letter-spacing:.06em;
    text-decoration:none;
    line-height:1.05;
    color:var(--brand);
    -webkit-text-stroke: var(--stroke-width, .5px) var(--stroke-color, #fff);
    text-shadow:
      0 .5px 0 rgba(0,0,0,.2),
      0 1.5px 6px rgba(0,0,0,.25),
      0 0 28px rgba(0,0,0,.25);
    transition: transform .18s ease;
    touch-action:manipulation;
  }
  .hotspots a:hover{ transform:translate(-50%,-52%) scale(1.02) }
  .hotspots a:focus-visible{ outline:2px solid var(--brand); outline-offset:6px }

  /* Position links from vars */
  a[data-name="Home"]  { left:var(--home-x);  top:var(--home-y); }
  a[data-name="Story"] { left:var(--story-x); top:var(--story-y); }
  a[data-name="Menu"]  { left:var(--menu-x);  top:var(--menu-y); }
  a[data-name="Wine"]  { left:var(--wine-x);  top:var(--wine-y); }
  a[data-name="Press"] { left:var(--press-x); top:var(--press-y); }
  a[data-name="Verse"] { left:var(--verse-x); top:var(--verse-y); }

  /* ==== MEDIA QUERY OVERRIDES ==== */

  /* Phones <601px, portrait — SIZING UNCHANGED */
  @media (max-width:600px) and (orientation:portrait){
    .bg{ inset:0 0 0 0; } /* no zoom */
    :root{
      --home-x:44%;  --home-y:42%;
      --story-x:44%; --story-y:45.5%;
      --menu-x:44%;  --menu-y:49%;
      --wine-x:44%;  --wine-y:52.8%;
      --press-x:44%; --press-y:56.5%;
      --verse-x:44%; --verse-y:60%;
      --link-size: clamp(18px,6vw,30px);
      /* outline stays white by default here */
      /* keep default bg controls unless you want a different crop on phones */
    }
  }

  /* Phones <601px, landscape — SIZING UNCHANGED */
  @media (max-width:600px) and (orientation:landscape){
    .bg{ inset:-6dvh 0 0 0; }
    :root{
      --home-x:9%;   --home-y:45%;
      --menu-x:26%;  --menu-y:45%;
      --press-x:43%; --press-y:45%;
      --verse-x:58%; --verse-y:45%;
      --story-x:74%; --story-y:45%;
      --wine-x:90%;  --wine-y:45%;
      --link-size: clamp(18px,3.6vw,30px);
      /* outline stays white by default here */
    }
  }

  /* Tablets 601–1024px */
  @media (min-width:601px) and (max-width:1024px){
    /* Decouple background and show the most image */
    .bg{
      position:fixed;
      inset:0;
    }
    :root{
      /* anchors unchanged */
      --home-x:9%;   --home-y:45%;
      --story-x:26%; --story-y:45%;
      --menu-x:43%;  --menu-y:45%;
      --wine-x:58%;  --wine-y:45%;
      --press-x:74%; --press-y:45%;
      --verse-x:90%; --verse-y:45%;
      --link-size: clamp(20px,3.8vw,40px);

      /* outline switches to black ≥601px */
      --stroke-color:#000;
      --stroke-width:1.5px;

      /* show the entire image as much as possible */
      --bg-fit: contain;
      --bg-pos-y: 50%;      /* center */
      --bg-shift: -16px;    /* nudge up; try -8px/-24px to taste */

      /* title anchor */
      --title-x:13%;
      --title-y:16%;
    }
    .sitemap-title{
      top: var(--title-y, 16%);
      left: var(--title-x, 13%);
    }
  }

  /* Desktop ≥1025px */
  @media (min-width:1025px){
    :root{
      --home-x:9%;   --home-y:45%;
      --story-x:26%; --story-y:45%;
      --menu-x:43%;  --menu-y:45%;
      --wine-x:58%;  --wine-y:45%;
      --press-x:74%; --press-y:45%;
      --verse-x:90%; --verse-y:45%;
      --link-size: clamp(20px,3.8vw,40px);

      /* black outline on desktop as well */
      --stroke-color:#000;
      --stroke-width:1.5px;

      /* desktop returns to dramatic cropped look */
      --bg-fit: cover;
      --bg-pos-y: 50%;
      --bg-shift: 0px;
    }
  }
</style>
</head>
<body>
  <div class="wrap" id="wrap">
    <!-- background now set via CSS variables on .bg -->
    <div class="bg" id="bg"></div>

    <h2 class="sitemap-title">Site Map</h2>

    <nav class="hotspots" aria-label="Sitemap Navigation">
      <a class="nav" data-name="Home" href="/">Home</a>
      <a class="nav" data-name="Story" href="/story.html">Story</a>
      <a class="nav" data-name="Menu" href="/menu.html">Menu</a>
      <a class="nav" data-name="Wine" href="/wine.html">Wine</a>
      <a class="nav" data-name="Press" href="/press.html">Press</a>
      <a class="nav" data-name="Verse" href="/spdailyverse.html">Verse</a>
    </nav>
  </div>

<script>
  /* If you prefer to set the URL via JS (keeps your cache-bust habit) */
  const BG_URL = "img/sitemap-bg.webp?v=4"; // bump v=# to clear cache
  const bg = document.getElementById('bg');
  if (bg && BG_URL){
    bg.style.setProperty('--bg-url', `url("${BG_URL}")`);
  }
</script>
</body>
</html>