/* ===========================================
   style.css — Portfolio design / zine viewer
   =========================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #faf7f3;
  color: #1a1a1a;
  font-family: Georgia, "Times New Roman", serif;
  min-height: 100vh;
}

/* ---- Header / intro ---- */

.zine-header {
  max-width: 860px;
  margin: 0 auto;
  padding: 56px 32px 40px;
  border-bottom: 1px solid #c8b9a8;
}

.zine-header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
}

.zine-back {
  font-family: "Press Start 2P", cursive;
  font-size: 9px;
  color: #6b5a4e;
  text-decoration: none;
  letter-spacing: 0.05em;
}

.zine-back:hover {
  color: #1a1a1a;
}

.zine-header h1 {
  font-family: "Press Start 2P", cursive;
  font-size: clamp(11px, 2vw, 16px);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #1a1a1a;
  line-height: 1.6;
}

.zine-header p {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.75;
  color: #4a3f38;
  max-width: 560px;
}

/* ---- Upload zone ---- */

.upload-zone {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 32px;
  border-bottom: 1px solid #c8b9a8;
  display: flex;
  align-items: center;
  transition: background 0.2s ease;
}

.upload-zone.drag-over {
  background: rgba(200, 185, 168, 0.15);
}

.upload-prompt,
.upload-active {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
}

.upload-hint {
  font-size: 13px;
  font-style: italic;
  color: #6b5a4e;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.upload-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.upload-btn {
  font-family: "Press Start 2P", cursive;
  font-size: 8px;
  color: #6b5a4e;
  border: 1px solid #c8b9a8;
  padding: 9px 14px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.upload-btn:hover {
  color: #1a1a1a;
  border-color: #6b5a4e;
}

.upload-drag-hint {
  font-size: 11px;
  font-style: italic;
  color: #b0a090;
  letter-spacing: 0.03em;
}

.upload-reset-btn {
  font-family: "Press Start 2P", cursive;
  font-size: 7px;
  color: #b0a090;
  background: transparent;
  border: none;
  cursor: pointer;
  letter-spacing: 0.04em;
  padding: 0;
  transition: color 0.15s;
}

.upload-reset-btn:hover {
  color: #1a1a1a;
}

@media (max-width: 600px) {
  .upload-zone { padding: 16px 20px; }
  .upload-drag-hint { display: none; }
}

/* ---- Zine content column ---- */

.zine-container {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}

/* Every group of photos is a "block" */
.zine-block {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 80px;
}

/* One large photo, centred */
.zine-hero { justify-content: center; }
.zine-hero .zine-img-wrap { width: 82%; flex-shrink: 0; }

/* Two equal-width photos */
.zine-duo-even { align-items: center; }
.zine-duo-even .zine-img-wrap { flex: 1; min-width: 0; }

/* Two photos, first noticeably larger; second slightly offset down */
.zine-duo-offset { align-items: flex-start; gap: 20px; }
.zine-duo-offset .zine-img-wrap:nth-child(1) { flex: 1.6; min-width: 0; }
.zine-duo-offset .zine-img-wrap:nth-child(2) { flex: 1; min-width: 0; margin-top: 48px; }

/* Single photo, left-aligned at ~half width */
.zine-solo-left { justify-content: flex-start; }
.zine-solo-left .zine-img-wrap { width: 52%; flex-shrink: 0; }

/* Single photo, right-aligned at ~58% width */
.zine-solo-right { justify-content: flex-end; }
.zine-solo-right .zine-img-wrap { width: 58%; flex-shrink: 0; }

/* Three equal-width photos in a row */
.zine-trio { align-items: center; gap: 12px; }
.zine-trio .zine-img-wrap { flex: 1; min-width: 0; }

/* Shared image-wrap — hidden until scrolled into view */
.zine-img-wrap {
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}
.zine-img-wrap.visible { opacity: 1; transform: translateY(0); }
.zine-img-wrap img { width: 100%; height: auto; display: block; }

/* ---- Text breaks between photo blocks ---- */

.zine-text-break {
  font-size: 13px;
  font-style: italic;
  color: #6b5a4e;
  letter-spacing: 0.06em;
  padding: 0 0 64px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s ease, transform 1s ease;
}
.zine-text-break.visible { opacity: 1; transform: translateY(0); }

/* Position variants — assigned randomly in JS */
.zine-text-break--center  { text-align: center; }
.zine-text-break--left-a  { text-align: left;  padding-left: 4%; }
.zine-text-break--left-b  { text-align: left;  padding-left: 18%; }
.zine-text-break--right-a { text-align: right; padding-right: 6%; }
.zine-text-break--right-b { text-align: right; padding-right: 20%; }

/* ---- Responsive ---- */

@media (max-width: 600px) {
  .zine-header    { padding: 36px 20px 28px; }
  .zine-container { padding: 48px 20px 80px; }

  /* hero: full width, still centred */
  .zine-hero .zine-img-wrap { width: 92%; }

  /* duo-even: keep side by side, tighter gap */
  .zine-duo-even { gap: 8px; }

  /* duo-offset: keep side by side, reduce ratio + offset */
  .zine-duo-offset { gap: 10px; }
  .zine-duo-offset .zine-img-wrap:nth-child(1) { flex: 1.3; }
  .zine-duo-offset .zine-img-wrap:nth-child(2) { flex: 1; margin-top: 24px; }

  /* solo: partial width, stays aligned */
  .zine-solo-left .zine-img-wrap  { width: 68%; }
  .zine-solo-right .zine-img-wrap { width: 68%; }

  /* trio: 3-column strip, tight gap */
  .zine-trio { gap: 6px; }
}