/* Hub homepage theme -- "magazine rack". Each verse is a magazine cover
   leaning back in a wire rack under a hand-made cardboard sign. Styles ONLY
   docs/index.html (the verse index); each verse keeps its own theme
   entirely under docs/<verse>/. No image assets -- rack, wire, tape, and
   every cover are pure CSS/SVG. */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Permanent+Marker&display=swap");

:root {
  --pegboard-bg: #FFFBEB;
  --pegboard-hole: rgba(40, 34, 22, 0.5);
  --pegboard-hole-soft: rgba(40, 34, 22, 0.14);
  --pegboard-grime-a: rgba(120, 100, 70, 0.05);
  --pegboard-grime-b: rgba(90, 80, 60, 0.045);
  --wire-hi: #f2f2f2;
  --wire-mid: #9a9a9a;
  --wire-lo: #4d4d4d;
  --cardboard: #cba876;
  --ink: #1c1a17;
  --ink-dark: #3a352c;
  --font-mast: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-sign: "Permanent Marker", cursive;
  --font-body: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* ONE pegboard layer for the whole page -- hole grid + grime blotches,
     phase-locked to the tines. This only works because the sign's
     font-size is now pinned (see .sign below) instead of vw-fluid, which
     makes the full vertical stack from page-top down to the first shelf's
     tine-bottom a fixed, known number of pixels: scene padding-top (48) +
     sign height (17.6 pad-top + 1.2*41.6 line-height + 22.4 pad-bottom =
     89.92) + sign-wrap margin-bottom (17.6) + rack padding-top (8) +
     magazine height (315) + wire's 2px drop = 480.52px. A radial-gradient's
     hole center sits at +13px into each 26px tile, so background-position
     25.5px lands a hole row exactly on that line (25.5 + 13 + 17*26 =
     480.5, near enough given sub-pixel rounding). */
  background-color: var(--pegboard-bg);
  background-image:
    radial-gradient(circle, var(--pegboard-hole) 0 2px, transparent 2.4px),
    radial-gradient(circle, var(--pegboard-hole-soft) 0 3.4px, transparent 3.6px),
    radial-gradient(circle at 18% 25%, var(--pegboard-grime-a), transparent 42%),
    radial-gradient(circle at 82% 68%, var(--pegboard-grime-b), transparent 46%),
    radial-gradient(circle at 55% 92%, var(--pegboard-grime-a), transparent 40%);
  background-size: 26px 26px, 26px 26px, auto, auto, auto;
  background-position: center 25.5px, center 25.5px, 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  font-family: var(--font-body);
  color: var(--ink);
}

a { color: inherit; text-decoration: none; }

.scene {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1rem 5rem;
}

/* ---------------- Hand-made sign ---------------- */

.sign-wrap {
  position: relative;
  margin-bottom: 1.1rem;
  /* the drop-shadow has to live here, not on .sign -- filter is applied
     BEFORE clip-path in the rendering pipeline, so a filter on .sign gets
     clipped away by .sign's own clip-path same as box-shadow did. .sign-wrap
     has no clip-path, so its filter renders un-clipped around the already-
     clipped shape underneath. */
  filter: drop-shadow(4px 10px 10px rgba(0, 0, 0, 0.5));
}
.sign {
  position: relative;
  background: var(--cardboard);
  background-image: repeating-linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.03) 0px,
    rgba(0, 0, 0, 0.03) 2px,
    transparent 2px,
    transparent 7px
  );
  color: var(--ink);
  font-family: var(--font-sign);
  /* pinned (not vw-fluid) so the page-wide pegboard grid above can be
     phase-locked to the tines across the whole layout -- these are the
     same two values the old clamp() already landed on for the vast
     majority of real viewport widths, so this is a no-visible-change fix
     outside a narrow ~570-925px in-between band. */
  font-size: 2.6rem;
  line-height: 1.2;
  text-align: center;
  padding: 1.1rem 2rem 1.4rem;
  transform: rotate(-1.5deg);
  clip-path: polygon(
    1% 4%, 12% 0%, 28% 2%, 46% 0%, 63% 1.5%, 80% 0%, 97% 3%, 100% 14%,
    98% 34%, 100% 58%, 97% 79%, 99% 93%, 88% 100%, 71% 97%, 55% 100%,
    38% 98%, 21% 100%, 4% 97%, 0% 82%, 2% 60%, 0% 38%, 2% 18%
  );
}
.tape {
  position: absolute;
  width: 46px;
  height: 20px;
  background: rgba(230, 230, 220, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.tape-left { top: -8px; left: 6%; transform: rotate(-35deg); }
.tape-right { top: -8px; right: 6%; transform: rotate(35deg); }

.scene-tagline {
  font-size: 0.95rem;
  color: rgba(58, 53, 44, 0.65);
  font-style: italic;
  margin: 0 0 2.6rem;
  text-align: center;
}

/* ---------------- Rack ---------------- */

.rack {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 78px = 3 x 26px hole-grid rows, so every shelf after the first stays
     phase-locked to the grid too, not just the first one */
  gap: 78px;
  padding: 0.5rem 2.2rem 1rem;
  width: 100%;
  max-width: 900px;
  /* no background of its own -- the single pegboard layer on html/body
     (see above) shows through, so the rack isn't a separate visible panel
     sitting on top of the wall. */
}

.shelf { position: relative; }
.shelf-mags {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 2.2rem;
  perspective: 800px;
  padding: 0 0.5rem;
}

/* The wire rack itself: one horizontal bar spanning the shelf, with short
   vertical tines hanging behind it (their top ends hidden under the bar),
   about a tenth of a magazine's height. Magazine bottoms sit just above the
   tine tips, so the tines peek out a little below every cover. The whole
   assembly paints in front of the resting magazines (z-index above their
   resting state, below their hover-lifted state), like the wire is
   physically in front of the stack -- pulling a mag forward on hover lifts
   it clear of the wire. */
.shelf-wire {
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -2px;
  height: 41px;
  z-index: 10;
  pointer-events: none;
}
.shelf-tines {
  position: absolute;
  inset: 0;
  /* centered so the leftover space before the first tine and after the last
     tine match, instead of one edge starting flush at position 0 */
  background-position: center;
  background-image: repeating-linear-gradient(
    90deg,
    var(--wire-mid) 0px, var(--wire-hi) 1.2px, var(--wire-lo) 2.5px,
    transparent 2.5px, transparent 23px
  );
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}
.shelf-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--wire-hi), var(--wire-mid) 45%, var(--wire-lo));
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}

@media (max-width: 720px) {
  .shelf-wire { height: 31px; bottom: -1px; }
  /* mobile sign is pinned smaller (1.6rem, the clamp's old floor), which
     shortens the whole vertical stack above the rack; re-solved offset:
     48 (scene pad) + 70.72 (sign: 17.6 + 1.2*25.6 + 22.4) + 17.6 (sign-wrap
     margin) + 8 (rack pad) + 220 (mag) + 1 (wire drop) = 365.32px. Hole
     row lands there at background-position 14.3px (14.3 + 13 + 13*26 =
     365.3). */
  .sign { font-size: 1.6rem; }
  html, body { background-position: center 14.3px, center 14.3px, 0 0, 0 0, 0 0; }
}

/* ---------------- Magazines ---------------- */

.mag {
  position: relative;
  display: block;
  width: 230px;
  height: 315px;
  flex-shrink: 0;
  transform-origin: 50% 100%;
  transform: perspective(750px) rotateX(11deg);
  transition: transform 0.2s ease, z-index 0s;
  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.5));
}
.shelf-mags .mag:not(:first-child) { margin-left: -68px; }
.shelf-mags .mag:nth-child(1) { z-index: 4; }
.shelf-mags .mag:nth-child(2) { z-index: 3; }
.shelf-mags .mag:nth-child(3) { z-index: 2; }
.shelf-mags .mag:nth-child(4) { z-index: 1; }
.mag:hover,
.mag:focus-visible {
  transform: perspective(750px) rotateX(0deg) translateY(-18px) scale(1.06);
  z-index: 20 !important;
  outline: none;
}

.mag-cover {
  height: 100%;
  border-radius: 3px;
  border: 2px solid rgba(0, 0, 0, 0.55);
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #fff;
  overflow: hidden;
}

.mag-cover--image {
  padding: 0;
  background-size: cover;
  background-position: center;
}

.mag--blue   .mag-cover { background: linear-gradient(160deg, #1a3a6b, #0a1830); }
.mag--red    .mag-cover { background: linear-gradient(160deg, #8c1f1f, #350808); }
.mag--green  .mag-cover { background: linear-gradient(160deg, #1f7a52, #0b3520); }
.mag--gold   .mag-cover { background: linear-gradient(160deg, #a8811f, #3d2e0a); }
.mag--purple .mag-cover { background: linear-gradient(160deg, #4a3a8c, #1c1538); }
.mag--teal   .mag-cover { background: linear-gradient(160deg, #147a7a, #06302f); }
.mag--brown  .mag-cover { background: linear-gradient(160deg, #7a4a24, #33200e); }
.mag--navy   .mag-cover { background: linear-gradient(160deg, #10345c, #041224); }

.mag-masthead {
  font-family: var(--font-mast);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}
.mag-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65px;
}
.mag-art svg { width: 56px; height: 56px; }
.mag-coverline {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.92;
}
.mag-summary {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.95;
  flex: 1;
}
.mag-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 2px;
}
.mag-barcode {
  width: 36px;
  height: 15px;
  background: repeating-linear-gradient(
    90deg,
    #fff 0px, #fff 1.5px, transparent 1.5px, transparent 3px,
    #fff 3px, #fff 3.5px, transparent 3.5px, transparent 4.5px
  );
  opacity: 0.85;
}
.mag-price {
  font-size: 0.62rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  padding: 1px 5px;
  border-radius: 2px;
  transform: rotate(-3deg);
  white-space: nowrap;
}

.mag--ghost .mag-cover {
  background: transparent;
  border: 2px dashed rgba(58, 53, 44, 0.3);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mag--ghost .mag-masthead { color: rgba(58, 53, 44, 0.45); }
.mag--ghost .mag-summary { color: rgba(58, 53, 44, 0.4); flex: none; }
.mag--ghost:hover { transform: perspective(750px) rotateX(11deg); }

/* ---------------- Mobile ---------------- */

@media (max-width: 720px) {
  .mag { width: 160px; height: 220px; }
  .shelf-mags .mag:not(:first-child) { margin-left: -44px; }
  .mag-masthead { font-size: 0.92rem; }
  .mag-art { height: 46px; }
  .mag-art svg { width: 39px; height: 39px; }
  .mag-coverline { font-size: 0.56rem; }
  .mag-summary { font-size: 0.6rem; }
  .rack { gap: 2.4rem; padding: 0.5rem 1.2rem 1rem; }
}