/* ============================================================
   Hana's Japan Journal — scrapbook styling
   ============================================================ */

:root {
  --paper: #f4ecd8;
  --paper-dark: #e8dcc0;
  --ink: #3a3330;
  --faded: #8a7d6b;
  --accent: #b23a48;     /* sumi red */
  --tape: rgba(214, 197, 150, 0.55);
  --note: #fffdf6;
  --shadow: rgba(60, 45, 30, 0.28);
  --hand: "Caveat", "Segoe Script", cursive;
  --type: "Special Elite", "Courier New", monospace;
  --serif: "EB Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.35) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(150,120,80,0.10) 0, transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* ---------------- Cover / header ---------------- */

.cover {
  max-width: 900px;
  margin: 0 auto;
  padding: 5rem 1.5rem 1rem;
  text-align: center;
  position: relative;
}

.cover .stamp {
  display: inline-block;
  font-family: var(--type);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  transform: rotate(-6deg);
  opacity: 0.8;
  margin-bottom: 1.5rem;
}

.cover h1 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 0.85;
  margin: 0;
  color: var(--ink);
}

.cover .subtitle {
  font-family: var(--hand);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: var(--faded);
  margin: 0.4rem 0 0;
}

.cover .rule {
  width: 120px;
  height: 2px;
  margin: 1.8rem auto 0;
  background: linear-gradient(90deg, transparent, var(--faded), transparent);
}

/* ---------------- Scrapbook entries ---------------- */

.book {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem 6rem;
}

.entry {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 4vw, 3rem);
  margin: clamp(3rem, 8vw, 5.5rem) 0;
  flex-wrap: wrap;
}

.entry:nth-child(even) { flex-direction: row-reverse; }

.entry__photo {
  position: relative;
  background: #fff;
  padding: 0.7rem 0.7rem 0.7rem;
  border-radius: 2px;
  box-shadow: 0 10px 24px var(--shadow);
  flex: 1 1 340px;
  max-width: 460px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.entry__photo img {
  width: 100%;
  height: auto;
  border-radius: 1px;
  cursor: zoom-in;
}

/* washi-tape corners */
.entry__photo::before,
.entry__photo::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 28px;
  background: var(--tape);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.entry__photo::before { top: -12px; left: -16px; transform: rotate(-32deg); }
.entry__photo::after  { bottom: -12px; right: -16px; transform: rotate(-32deg); }

.entry:hover .entry__photo {
  transform: rotate(0deg) scale(1.015);
  box-shadow: 0 16px 34px var(--shadow);
}

/* the journal note beside the photo */
.entry__note {
  flex: 1 1 280px;
  max-width: 380px;
  background: var(--note);
  padding: 1.6rem 1.8rem;
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(60,45,30,0.14);
  position: relative;
  align-self: center;
  background-image: repeating-linear-gradient(
    transparent, transparent 31px, rgba(120,110,90,0.18) 31px, rgba(120,110,90,0.18) 32px
  );
}

.entry__note::before {
  /* red margin line, like a notebook */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 22px;
  width: 1px;
  background: rgba(178,58,72,0.25);
}

.entry__date {
  font-family: var(--type);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 0.4rem 0.6rem;
}

.entry__place {
  font-family: var(--hand);
  font-size: 1.9rem;
  line-height: 1.1;
  margin: 0 0 0.4rem 0.4rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.entry__place .pin { flex-shrink: 0; transform: translateY(-1px); }

.entry__caption {
  margin: 0 0 0 0.6rem;
  color: #4a423b;
}
/* handwritten (default) — great for short notes */
.entry__caption--hand {
  font-family: var(--hand);
  font-size: 1.45rem;
  line-height: 1.35;
}
/* readable serif — much better for long passages */
.entry__caption--serif {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* "Show info" collapse toggle */
.note-toggle {
  margin: 0.3rem 0 0 0.6rem;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, #ccc);
  color: var(--accent);
  font-family: var(--type);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.note-toggle:hover { background: var(--accent); color: #fffdf6; }
.note-body--hidden { display: none; }

/* Wide placement: note drops full-width below the photo(s) and reads
   at a comfortable measure instead of a tall, skinny column. */
.entry--wide { flex-direction: column; align-items: center; }
.entry--wide .entry__note {
  max-width: 700px;
  width: 100%;
  transform: none !important;   /* cancel the playful tilt for long reads */
  margin-top: 1.5rem;
}
.entry--wide .entry__caption { max-width: none; }

/* Drop the notebook ruling when using the readable serif (line heights
   differ, so the lines wouldn't sit on the rule anyway). */
.entry__note:has(.entry__caption--serif) {
  background-image: none;
}
.entry__note:has(.entry__caption--serif)::before { display: none; }

/* photos get a gentle, varied tilt */
.entry:nth-child(3n+1) .entry__photo { transform: rotate(-2.5deg); }
.entry:nth-child(3n+2) .entry__photo { transform: rotate(1.8deg); }
.entry:nth-child(3n+3) .entry__photo { transform: rotate(-1deg); }
.entry:nth-child(even) .entry__note { transform: rotate(1.2deg); }
.entry:nth-child(odd)  .entry__note { transform: rotate(-1deg); }

.entry__note:empty { display: none; }

/* ---------------- Collage (scattered pile) ---------------- */

.entry--collage { align-items: center; }

.entry__collage {
  flex: 1 1 460px;
  max-width: 520px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 0.5rem;
  gap: 0;
}

.collage__item {
  flex: 0 0 auto;
  width: 46%;
  margin: -1.4% -2.4%;            /* negative margins → overlapping pile */
  background: #fff;
  padding: 0.5rem;
  border-radius: 2px;
  box-shadow: 0 8px 20px var(--shadow);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s;
}

.collage__item img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
}

.collage__item:hover {
  transform: rotate(0deg) scale(1.06);
  box-shadow: 0 16px 34px var(--shadow);
  z-index: 50 !important;
}

/* vary sizes a little so the pile feels hand-made */
.collage__item:nth-child(3n+1) { width: 52%; }
.collage__item:nth-child(4n+2) { width: 40%; }

/* custom free-form layout */
.entry__collage--canvas {
  position: relative;
  display: block;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: visible;
}
.canvas-photo {
  position: absolute;
  background: #fff;
  padding: 0.45rem;
  border-radius: 2px;
  box-shadow: 0 8px 20px var(--shadow);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.canvas-photo img { width: 100%; height: auto; display: block; cursor: zoom-in; }
.canvas-photo:hover {
  transform: rotate(var(--rot, 0deg)) scale(1.04);
  box-shadow: 0 16px 34px var(--shadow);
  z-index: 200 !important;
}

@media (max-width: 640px) {
  .collage__item { width: 48%; }
}

/* ---------------- Empty state ---------------- */

.empty {
  max-width: 520px;
  margin: 3rem auto 6rem;
  text-align: center;
  font-family: var(--hand);
  font-size: 1.8rem;
  color: var(--faded);
  line-height: 1.4;
}
.empty small {
  display: block;
  font-family: var(--type);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-top: 1rem;
  color: var(--faded);
}

/* ---------------- Footer ---------------- */

.book-footer {
  text-align: center;
  padding: 2rem 1.5rem 4rem;
  font-family: var(--hand);
  font-size: 1.3rem;
  color: var(--faded);
}

/* ---------------- Video play badge ---------------- */
.play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  transition: transform 0.25s ease;
  z-index: 5;
}
/* NB: do NOT add .canvas-photo here — it is position:absolute (custom collage
   layout) and already a positioning context for the play badge. Overriding it
   to relative breaks the public collage layout. */
.entry__photo, .collage__item { position: relative; }
.entry__photo:hover .play-badge,
.collage__item:hover .play-badge,
.canvas-photo:hover .play-badge { transform: scale(1.12); }

/* ---------------- Lightbox ---------------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(30, 24, 18, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 2rem;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 95vw;
  max-height: 92vh;
  background: #fff;
  padding: 0.4rem;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox__video {
  max-width: 95vw;
  max-height: 92vh;
  border-radius: 4px;
  background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: default;
}
.lightbox__count {
  position: absolute;
  bottom: 1.6rem; left: 0; right: 0;
  text-align: center;
  color: #f4ecd8;
  font-family: var(--type);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}
.lightbox__close {
  position: absolute; top: 1rem; right: 1.4rem;
  background: none; border: none; color: #fff;
  font-size: 2.4rem; cursor: pointer; line-height: 1;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.12); border: none; color: #fff;
  width: 54px; height: 54px; border-radius: 50%;
  font-size: 2rem; cursor: pointer; transition: background 0.2s ease;
}
.lightbox__nav:hover { background: rgba(255,255,255,0.26); }
.lightbox__prev { left: 1.4rem; }
.lightbox__next { right: 1.4rem; }
@media (max-width: 640px) {
  .lightbox__nav { width: 42px; height: 42px; font-size: 1.5rem; }
}

@media (max-width: 640px) {
  .entry, .entry:nth-child(even) { flex-direction: column; align-items: center; }
  .entry__note { max-width: 100%; }
}