/* ---- Base ---- */
:root {
  --paper: #ffffff;
  --ink: #0a0a0a;

  /* Poster size relationship (your image is 1296 x 1728 = 3:4) */
  --poster-ratio: 3 / 4;

  /* Grid settings */
  --grid-alpha: 0.10;       /* overall grid visibility */
  --grid-line: rgba(0, 0, 0, var(--grid-alpha));
  --grid-step: 16.666%;     /* 6 columns/rows vibe (tweak) */
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

/* ---- Layout ---- */
.page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  gap: 18px;
}

/* Poster canvas */
.poster {
  width: min(92vw, 900px);
  aspect-ratio: var(--poster-ratio);
  position: relative;
  background: var(--paper);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.25); /* light keyline like print comp */
}

/* The mockup image fills the poster */
.poster__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* keeps it clean at any size */
  user-select: none;
  -webkit-user-drag: none;
}

/* Subtle grid overlay (like the visible construction lines in your comp) */
.poster__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    /* vertical lines */
    repeating-linear-gradient(
      to right,
      var(--grid-line),
      var(--grid-line) 1px,
      transparent 1px,
      transparent calc(var(--grid-step))
    ),
    /* horizontal lines */
    repeating-linear-gradient(
      to bottom,
      var(--grid-line),
      var(--grid-line) 1px,
      transparent 1px,
      transparent calc(var(--grid-step))
    );
  mix-blend-mode: multiply;
}

/* ---- Hotspots (optional) ---- */
.hotspot {
  position: absolute;
  display: block;
  /* invisible but clickable */
  background: rgba(0,0,0,0);
  outline: none;
}

/* Debug mode (turn on to see boxes) */
/*
.hotspot { background: rgba(255, 0, 0, 0.08); outline: 1px solid rgba(255,0,0,0.35); }
*/

.hotspot:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.65);
  outline-offset: 2px;
}

/* These are approximate placements based on the mockup proportions.
   Tweak values until they sit exactly where you want. */

/* Top-right wireframe cluster */
.hs-wireframe {
  left: 62%;
  top: 0%;
  width: 36%;
  height: 22%;
}

/* Left code-text block */
.hs-code {
  left: 6%;
  top: 33%;
  width: 35%;
  height: 26%;
}

/* Bottom title word */
.hs-title {
  left: 30%;
  top: 90%;
  width: 40%;
  height: 9%;
}

/* ---- Footer note ---- */
.meta {
  width: min(92vw, 900px);
  opacity: 0.7;
  font-size: 12px;
  line-height: 1.35;
}
.meta code {
  font-family: inherit;
}