/* HEADER */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 15%;

  height: 70px;

  display: flex;
  align-items: center;

  padding: 0 20px;

  z-index: 1000;

  /* subtle zine feel */
  background: rgba(246, 242, 234, 0);
  backdrop-filter: blur(6px);
}
.logo {
  width: 172px;   /* pick your exact size */
  height: auto;

  flex-shrink: 0; /* prevents it from shrinking in flex layouts */
}
body {
  padding-top: 20px;
}
body {
  margin: 0;
  background: linear-gradient(#cfe8ff, #eaf4ff);
  font-family: Arial, sans-serif;

  display: flex;
  justify-content: center;
  align-items: center;

  height: 100vh;
  overflow: hidden;
}

/* Book container (controls overall scale) */
#book-container {
  width: 70vw;
  height: 70vh;

  display: flex;
  justify-content: center;
  align-items: center;

  transform: scale(0.95);
}

/* Page base */
.page {
  background: #f6f2ea;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;

  /* physical feel */
  box-shadow:
    0 10px 30px rgba(0,0,0,0.25),
    inset 0 0 40px rgba(0,0,0,0.05);
}

/* Images inside pages */
.page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;

  /* subtle print feel */
  filter: contrast(1.05) saturate(1.1);

  /* slight imperfection */
  transform: rotate(-0.3deg);
}

/* Variation per page (zine imperfection) */
.page:nth-child(2n) img {
  transform: rotate(0.4deg);
}

.page:nth-child(3n) img {
  transform: rotate(-0.6deg);
}

.page:nth-child(5n) img {
  transform: translateY(2px);
}

/* Paper texture overlay */
.paper-texture {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  background-image: url("https://grainy-gradients.vercel.app/noise.svg");
  opacity: 0.08;
  mix-blend-mode: multiply;
  z-index: 999;
}
.page.spread-left img,
.page.spread-right img {
  width: 200%;
  height: 100%;
  object-fit: cover;
}
.page.spread-left img {
  object-position: left center;
}

.page.spread-right img {
  object-position: right center;
}
.site-footer {
  position: fixed;
  bottom: 20px;
  right: 20px;   /* moved from left → right */

  display: flex;
  gap: 12px;

  z-index: 1000;

  font-size: 12px;
  letter-spacing: 1px;
}

/* links */
.site-footer a {
  text-decoration: none;
  color: black;

  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.site-footer a:hover {
  opacity: 1;
}
.tap-zone {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;

  z-index: 500;
}

.tap-zone.left {
  left: 0;
}

.tap-zone.right {
  right: 0;
}