*{box-sizing:border-box}

:root{
  --paper:#f6f5f1;
}

html,body{
  margin:0;
  width:100%;
  min-height:100%;
  background-color:var(--paper);
  background-image:url("assets/paper-grain.png");
  background-repeat:repeat;
}

body{
  overflow-x:hidden;
}

.hero{
  width:100%;
  min-height:100svh;
  display:grid;
  place-items:center;
  background-color:var(--paper);
  background-image:url("assets/paper-grain.png");
  background-repeat:repeat;
}

.poster{
  position:relative;
  height:100svh;
  aspect-ratio:2 / 3;
  max-width:100vw;
  overflow:hidden;
  background:var(--paper);
}

.poster-art{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.hotspots{
  position:absolute;
  inset:0;
  z-index:2;
}

.spot{
  position:absolute;
  display:block;
}

.statement{
  left:3.8%;
  top:92.8%;
  width:17%;
  height:5.5%;
  cursor:default;
}

.shortform{
  left:22.4%;
  top:92.8%;
  width:19.1%;
  height:5.5%;
}

.longform{
  left:42.7%;
  top:92.8%;
  width:19%;
  height:5.5%;
}

.newsletter{
  left:62.5%;
  top:92.8%;
  width:20%;
  height:5.5%;
}

.merch{
  left:83.1%;
  top:92.8%;
  width:14%;
  height:5.5%;
}

.shortform:hover,
.longform:hover,
.newsletter:hover,
.merch:hover{
  background:rgba(0,0,0,.045);
}

@media (min-aspect-ratio:2/3){
  .poster{
    height:100svh;
    width:auto;
  }
}

@media (max-aspect-ratio:2/3){
  /*
    Mobile fix:
    Keep the poster box at the exact same 2:3 ratio as the artwork.
    Previously min-height:100svh made the invisible link layer taller than
    the image on tall phones, so the tap targets sat below the visible buttons.
  */
  .hero{
    min-height:100svh;
    align-content:start;
  }

  .poster{
    width:100vw;
    height:auto;
    min-height:0;
    aspect-ratio:2 / 3;
  }

  .poster-art{
    width:100%;
    height:100%;
    object-fit:contain;
  }

  .hotspots{
    z-index:10;
    pointer-events:auto;
  }

  .shortform,
  .longform,
  .newsletter,
  .merch{
    pointer-events:auto;
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(0,0,0,.08);
  }
}

/* Merch placeholder page */
.merch-page{
  min-height:100svh;
  background:var(--paper);
  padding:28px;
  font-family:Arial,Helvetica,sans-serif;
  color:#111;
}

.merch-page a{
  color:inherit;
  text-decoration:none;
}

.merch-page h1{
  margin:20px 0 0;
  font:900 clamp(7rem,24vw,24rem)/.72 Impact,"Arial Narrow",sans-serif;
  letter-spacing:-.05em;
}

.merch-placeholder{
  margin-top:24px;
  border-top:2px solid #111;
  padding-top:24px;
}

.merch-placeholder .art{
  min-height:58vh;
  border:2px solid #111;
  display:grid;
  place-items:center;
  text-align:center;
  font:900 clamp(3rem,10vw,9rem)/.84 Impact,"Arial Narrow",sans-serif;
}

.merch-placeholder p{
  font:700 12px/1.2 monospace;
}

.join{
  display:inline-block;
  margin-top:8px;
  border:2px solid #111;
  padding:12px 14px;
  font:700 12px/1 monospace;
}


/* Desktop edge-blend: the gutters use the same grain family as the poster. */
.poster::before,
.poster::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:18px;
  z-index:1;
  pointer-events:none;
}

.poster::before{
  left:0;
  background:linear-gradient(90deg, rgba(246,245,241,.82), rgba(246,245,241,0));
}

.poster::after{
  right:0;
  background:linear-gradient(270deg, rgba(246,245,241,.82), rgba(246,245,241,0));
}


/* ===== MERCH PAGE V2 ===== */
.merch-live{
  max-width:1180px;
  margin:0 auto;
  padding:24px clamp(24px,5vw,72px) 72px;
  background:transparent;
}

.merch-back{
  display:inline-block;
  margin-bottom:24px;
  color:#111;
  text-decoration:none;
  font:700 12px/1 "Courier New",monospace;
}

.merch-live h1{
  margin:0;
  text-align:center;
  font-family:Impact,"Arial Narrow",sans-serif;
  font-size:clamp(9rem,26vw,22rem);
  font-weight:900;
  line-height:.72;
  letter-spacing:-.045em;
  color:#111;
}

.merch-rule{
  width:100%;
  border-top:2px solid #111;
  margin:34px 0 44px;
}

.merch-intro{
  max-width:760px;
  margin:0 auto 54px;
  text-align:center;
  color:#111;
  font-family:"Courier New",Courier,monospace;
  font-size:clamp(1.15rem,2.1vw,1.8rem);
  line-height:1.55;
}

.merch-intro p{
  margin:0 0 24px;
}

.merch-intro a{
  color:#111;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:5px;
}

.merch-products{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,54px);
  align-items:center;
}

.merch-products figure{
  margin:0;
  min-width:0;
}

.merch-products img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

@media(max-width:700px){
  .merch-live{
    padding:18px 18px 48px;
  }

  .merch-live h1{
    font-size:31vw;
  }

  .merch-rule{
    margin:24px 0 30px;
  }

  .merch-intro{
    margin-bottom:36px;
    font-size:1rem;
    line-height:1.5;
  }

  .desktop-break{
    display:none;
  }

  .merch-products{
    grid-template-columns:1fr;
    gap:28px;
  }
}