/* ═══════════════════════════════════════════════
   DEBBIE'S MEMORIAL — SCRAPBOOK EDITION v7
═══════════════════════════════════════════════ */

:root {
  --max:         1300px;
  --gap:         28px;
  --ink:         #1a1410;
  --paper:       #f5f0e8;
  --warm-accent: #c8704a;
  --warm-light:  #e8c4a8;
  --muted-ink:   #6b5c4e;
  --rule:        #c8b89a;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: 'Caveat', cursive;
  color: var(--ink);
  background-color: #2a1f14;
  background-image: var(--bg-image);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.page {
  min-height: 100%;
  background: rgba(12, 8, 4, 0.52);
}

/* ── Top bar ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(22, 16, 10, 0.93);
  border-bottom: 2px solid var(--warm-accent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand .name {
  font-family: 'Caveat', cursive;
  font-size: 28px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: .02em;
  line-height: 1;
}

.brand .years {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--warm-accent);
  margin-top: 3px;
  letter-spacing: .06em;
}

.right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.right audio {
  width: 260px;
  max-width: 42vw;
  height: 34px;
  filter: invert(0.85) sepia(0.3) hue-rotate(340deg);
  opacity: .88;
}

.meta { font-size: 13px; color: rgba(245,240,232,.50); }
.meta a { color: var(--warm-light); text-decoration: none; font-family: 'Caveat', cursive; }
.meta a:hover { text-decoration: underline; }

/* ── Wrap ── */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 36px 20px 60px;
}

/* ══════════════════════════════════
   MASONRY
══════════════════════════════════ */
.masonry {
  columns: 260px auto;
  column-gap: var(--gap);
}

/* ── Polaroid button reset ── */
button.polaroid {
  all: unset;
  cursor: pointer;
  display: block;
  break-inside: avoid;
  margin-bottom: var(--gap);
  transform: rotate(var(--rot, 0deg));
  transform-origin: center center;
  transition: transform .22s ease, box-shadow .22s ease;
  animation: fadeUp .45s ease both;
}

button.polaroid:nth-child(3n)   { animation-delay: .04s; }
button.polaroid:nth-child(3n+1) { animation-delay: .09s; }
button.polaroid:nth-child(3n+2) { animation-delay: .14s; }

@keyframes fadeUp {
  from { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(14px); }
  to   { opacity: 1; transform: rotate(var(--rot, 0deg)) translateY(0); }
}

button.polaroid:hover,
button.polaroid:focus-visible {
  transform: rotate(0deg) scale(1.05);
  z-index: 10;
  position: relative;
  outline: none;
}

/* White Polaroid card */
.polaroid-inner {
  position: relative;
  background: #fff;
  padding: 10px 10px 38px 10px;
  box-shadow:
    0 4px 14px rgba(0,0,0,.32),
    0 1px 3px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(0,0,0,.05);
}

button.polaroid:hover .polaroid-inner {
  box-shadow:
    0 18px 48px rgba(0,0,0,.55),
    0 4px 10px rgba(0,0,0,.30);
}

/* Faded color film photo */
.polaroid-inner img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  filter: grayscale(40%) sepia(35%) contrast(1.04) brightness(0.98) saturate(1.2);
  transition: filter .25s ease;
  pointer-events: none;
}

button.polaroid:hover .polaroid-inner img {
  filter: grayscale(10%) sepia(25%) contrast(1.06) brightness(1.01) saturate(1.4);
}

.polaroid-footer { height: 28px; }

/* Washi tape */
.tape {
  position: absolute;
  width: 48px;
  height: 18px;
  opacity: 0.80;
  z-index: 2;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.20) 0px, rgba(255,255,255,.20) 2px,
    transparent 2px, transparent 6px
  );
}
.tape-tl { background-color: var(--tape1); top: -8px; left: 18px; transform: rotate(var(--tr1, -3deg)); }
.tape-tr { background-color: var(--tape2); top: -8px; right: 18px; transform: rotate(var(--tr2,  3deg)); }

.polaroid.small .polaroid-inner { padding: 7px 7px 28px 7px; }
.polaroid.large .polaroid-inner { padding: 13px 13px 46px 13px; }

/* ══════════════════════════════════
   VIDEO SECTION
══════════════════════════════════ */
.video-section { margin-top: 64px; }

.divider-rule {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 36px;
}

.divider-tape {
  flex: 1;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--warm-accent) 0px, var(--warm-accent) 20px,
    transparent 20px, transparent 26px
  );
  opacity: .45;
}

.video-section-title {
  font-family: 'Caveat', cursive;
  font-size: 32px;
  font-weight: 700;
  color: var(--paper);
  margin: 0;
  white-space: nowrap;
  letter-spacing: .04em;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  transform: rotate(-1deg);
  display: inline-block;
}

.video-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.video-card {
  background: #fff;
  padding: 12px 12px 48px 12px;
  width: 100%;
  max-width: 824px;
  box-shadow: 0 8px 30px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.22);
  position: relative;
  transform: rotate(-0.4deg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.video-card:nth-child(even) { transform: rotate(0.5deg); }
.video-card:hover {
  transform: rotate(0deg) scale(1.01);
  box-shadow: 0 16px 50px rgba(0,0,0,.55);
}
.video-card::before, .video-card::after {
  content: '';
  position: absolute;
  width: 64px; height: 20px;
  opacity: .78;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.20) 0px, rgba(255,255,255,.20) 2px,
    transparent 2px, transparent 6px
  );
  z-index: 2;
}
.video-card::before { background-color: #c8a882; top: -9px; left: 24px; transform: rotate(-2deg); }
.video-card::after  { background-color: #b5c4a1; top: -9px; right: 24px; transform: rotate(2.5deg); }

.video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ── Footer ── */
.footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px dashed rgba(245,240,232,.18);
  font-size: 13px;
  color: rgba(245,240,232,.40);
  text-align: center;
}

/* ══════════════════════════════════════════════
   LIGHTBOX  — custom, zero dependencies
══════════════════════════════════════════════ */
#lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lb[hidden] { display: none; }

/* Dark backdrop — page still visible through it */
#lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 3, 0.88);
  cursor: pointer;
}

/* Large photo */
#lb-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 88vh;
}

#lb-img {
  display: block;
  max-width: 88vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow:
    0 0 0 10px #fff,          /* white Polaroid border */
    0 0 0 11px rgba(0,0,0,.15),
    0 24px 80px rgba(0,0,0,.7);
  filter: grayscale(40%) sepia(35%) contrast(1.04) brightness(0.98) saturate(1.2);
  opacity: 0;
  transition: opacity .28s ease;
}

/* Loading spinner */
#lb-spinner {
  position: absolute;
  width: 40px; height: 40px;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--warm-accent, #c8704a);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Nav buttons — big, clear, easy to click */
#lb-prev, #lb-next, #lb-close {
  position: absolute;
  z-index: 3;
  background: rgba(20, 12, 6, 0.72);
  border: 1px solid rgba(200, 112, 74, 0.45);
  color: var(--paper, #f5f0e8);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease;
}

#lb-prev, #lb-next {
  top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 54px;
  font-size: 26px;
  line-height: 1;
}

#lb-prev { left: 18px; }
#lb-next { right: 18px; }

#lb-close {
  top: 16px; right: 16px;
  width: 42px; height: 42px;
  font-size: 18px;
}

#lb-prev:hover, #lb-next:hover, #lb-close:hover {
  background: rgba(200, 112, 74, 0.80);
  transform: translateY(-50%) scale(1.08);
}
#lb-close:hover { transform: scale(1.08); }

/* Counter  "12 / 104" */
#lb-counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: rgba(245,240,232,.70);
  background: rgba(10,6,3,.55);
  padding: 3px 14px 1px;
  border-radius: 20px;
  letter-spacing: .04em;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .topbar-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .right { width: 100%; align-items: flex-start; }
  .right audio { width: 100%; max-width: 100%; }
  .masonry { columns: 1; }
  button.polaroid { transform: rotate(calc(var(--rot, 0deg) * 0.3)); }

  /* ── Lightbox mobile optimizations ── */

  /* Hide arrows — swipe left/right instead */
  #lb-prev, #lb-next { display: none; }

  /* Photo fills nearly the full screen */
  #lb-img {
    max-width: 96vw;
    max-height: 78vh;
    box-shadow:
      0 0 0 6px #fff,
      0 0 0 7px rgba(0,0,0,.15),
      0 12px 40px rgba(0,0,0,.7);
  }

  /* Close button — bigger, bottom center, easy thumb reach */
  #lb-close {
    top: auto;
    bottom: 24px;
    right: 50%;
    transform: translateX(50%);
    width: 56px;
    height: 56px;
    font-size: 22px;
    background: rgba(200, 112, 74, 0.85);
    border-color: rgba(255,255,255,.3);
  }
  #lb-close:hover { transform: translateX(50%) scale(1.08); }

  /* Counter sits above the close button */
  #lb-counter {
    bottom: 90px;
    font-size: 16px;
  }

  /* Swipe hint — fades out after a moment */
  #lb-stage::after {
    content: '← swipe →';
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Caveat', cursive;
    font-size: 15px;
    color: rgba(245,240,232,.45);
    pointer-events: none;
    animation: hintFade 2.5s ease 1s both;
  }
  @keyframes hintFade {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .masonry { columns: 240px auto; }
}