:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --accent:#4f46e5;
  --muted:#666b75;
}
*{box-sizing:border-box}
body{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial; margin:0; background:var(--bg); color:#111}
.container{max-width:1000px;margin:28px auto;padding:16px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
h1{font-size:2rem;margin:0}

/* Title blocks (pastel tiles) */
.title-blocks{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.title-blocks .block{display:inline-flex;padding:12px 14px;border-radius:10px;color:#000;font-weight:800;font-size:1.6rem;line-height:1;box-shadow:0 8px 22px rgba(17,17,17,0.12);transition:transform .28s cubic-bezier(.2,.9,.2,1), filter .18s ease, box-shadow .18s ease;transform-origin:center center}
.title-blocks.jumbled .block{transition:transform .6s cubic-bezier(.2,.9,.2,1), filter .18s ease, box-shadow .18s ease}
.title-blocks .block.space{background:transparent;box-shadow:none;width:10px}
.title-blocks .block:hover{transform:translateY(-6px) scale(1.04);filter:brightness(1.04);box-shadow:0 12px 30px rgba(17,17,17,0.16)}
.primary{background:var(--accent);color:white;border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
.nav{background:transparent;border:none;font-size:1.6rem;cursor:pointer;color:var(--muted);padding:8px;z-index:10}
.carousel-wrapper{display:flex;align-items:flex-start;/* full-viewport carousel */
  position:fixed; inset:0; width:100%; height:100vh; padding:36px 0; box-sizing:border-box;
  background:linear-gradient(180deg, rgba(246,248,251,0.6), rgba(246,248,251,0.3));
  min-height:100vh; z-index:0;}
.carousel{overflow-x:hidden;overflow-y:visible;flex:1;padding-bottom:72px;display:flex;align-items:center; height:100%}
.carousel-track{display:flex;transition:transform .35s ease;align-items:flex-start; padding-top: 40px;position: absolute;
  top: 30%;}

/* Position nav controls over the carousel */
#prevBtn{left:18px}
#nextBtn{right:18px}

/* navigation controls sit above carousel but below header */
.nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.92);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,0.14);border:1px solid rgba(0,0,0,0.06);z-index:40}
#prevBtn{left:18px}
#nextBtn{right:18px}

@media (max-width:700px){
  .nav{width:40px;height:40px;font-size:1.25rem}
  #prevBtn{left:10px}
  #nextBtn{right:10px}
}
.card{
  /* Polaroid-style vertical card */
  min-width:260px;
  max-width:360px;
  padding:12px 12px 12px; /* extra bottom padding for caption area */
  background:var(--card);
  border-radius:6px;
  border:12px solid #fff;
  border-bottom-width:56px;
  box-shadow:0 22px 48px rgba(17,17,17,0.28);
  margin:0 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform-origin:center bottom;
  transition:transform .22s ease, box-shadow .22s ease;
  position:relative;
  overflow:visible;
}

.card .photo{
  width:100%;
  aspect-ratio: 3 / 2; /* preferred modern way to keep 3:2 aspect */
  border-radius:4px;
  background:#111;
  display:block;
  overflow:hidden;
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.35);
  position:relative;
  z-index:1;
}
.card .photo img{width:100%;height:100%;object-fit:cover;display:block}

.card .meta{width:100%;text-align:center;margin-top:8px;position:relative;top:0px;z-index:3}
.card h3{margin:0;font-size:1.05rem}
.card time{display:block;color:var(--muted);font-size:0.85rem;margin-top:6px}
.card p{margin:6px 0 0;color:#444;font-style:italic;font-size:0.92rem}

/* Subtle, randomized rotation for the Polaroid stack */
.carousel-track .card:nth-child(3n+1){transform:rotate(-3deg)}
.carousel-track .card:nth-child(3n+2){transform:rotate(2deg)}
.carousel-track .card:nth-child(3n){transform:rotate(-1deg)}

/* Active card: override rotation and lift slightly */
.carousel-track .card.active{
  transform:translateY(-8px) rotate(0deg) scale(1.04) !important;
  box-shadow:0 32px 64px rgba(17,17,17,0.36);
  z-index:40;
}

/* Lift on hover to emphasize the focused card (non-active) */
.carousel-track .card:hover{transform:translateY(-6px) rotate(0deg);box-shadow:0 26px 50px rgba(17,17,17,0.32);z-index:20}
.empty{margin-top:18px;color:var(--muted)}
.dialog{border:none;padding:0;border-radius:12px}
#firstForm{display:flex;flex-direction:column;gap:10px;padding:18px;width:340px}
label{display:flex;flex-direction:column;font-size:0.9rem}
input[type="text"],input[type="date"],textarea{padding:8px;border-radius:8px;border:1px solid #e5e7eb}
.photo-preview{width:100%;height:160px;background:#f3f4f6;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:6px}
.snackbar{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;background:#111;color:white;padding:8px 12px;border-radius:8px;opacity:0;pointer-events:none}
.snackbar.show{opacity:1;pointer-events:auto}
@media (max-width:700px){.card{flex-direction:column}.card .photo{width:100%;height:200px}}